/* শপ অ্যাপ — ডিজাইন টোকেন + কম্পোনেন্ট। মান design/boards/Foundations.dc.html ও Main.dc.html থেকে হুবহু।
   অ্যাডমিন কনসোলের সাথে কোনো টোকেন শেয়ার হয় না (admin.css এ --adm-*). */
:root {
  --shop-bg: #F4F6F8;
  --shop-surface: #FFFFFF;
  --shop-surface-2: #F8F9FB;
  --shop-soft: #F6F7F9;
  --shop-border: #E2E6EC;
  --shop-border-strong: #D5DAE1;
  --shop-divider: #EEF0F3;
  --shop-ink: #101828;
  --shop-ink-2: #344054;
  --shop-muted: #5D6B7E;
  --shop-accent: #2453D6;
  --shop-accent-hover: #1A3FA8;
  --shop-accent-soft: #EAF0FD;
  --shop-selected: #F5F8FF;
  --shop-success: #067647;
  --shop-danger: #B42318;
  --shop-danger-line: #F3B8B2;
  --shop-amber: #F59E0B;
  --shop-sidebar: #0E1726;
  --shop-sidebar-ink: #C5CDD9;
  --shop-sidebar-muted: #8A96A8;
  --shop-sidebar-line: #243249;
  --shop-sidebar-raised: #141F33;
  --shop-sidebar-active: #1C2940;
  --shop-sidebar-avatar: #2B3A55;
  --shop-font: Inter, 'Noto Sans Bengali', system-ui, sans-serif;
  --shop-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--shop-font); color: var(--shop-ink); background: var(--shop-bg); font-size: 14px; line-height: 1.5; }
a { color: var(--shop-accent); }
a:hover { color: var(--shop-accent-hover); }
button { font: inherit; }
.mono { font-family: var(--shop-mono); }
.muted { color: var(--shop-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: 2px; }

/* ---------- AppShell ---------- */
.app { display: flex; flex-wrap: wrap; min-height: 100vh; }

.sb { flex: 1 1 240px; background: var(--shop-sidebar); color: var(--shop-sidebar-ink); padding: 20px 14px; display: flex; flex-direction: column; gap: 22px; }
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px; }
.sb-logo { width: 36px; height: 36px; border-radius: 10px; background: var(--shop-accent); display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.sb-brand-name { color: #FFFFFF; font-weight: 700; font-size: 15px; }
.sb-brand-sub { font-size: 12px; color: var(--shop-sidebar-muted); }
.sb-shop { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--shop-sidebar-line); background: var(--shop-sidebar-raised); color: #E6EAF0; text-align: left; min-height: 48px; }
.sb-shop-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--shop-amber); color: #1A1204; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.sb-shop-text { flex: 1; min-width: 0; }
.sb-shop-name { display: block; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-shop-sub { display: block; font-size: 11.5px; color: var(--shop-sidebar-muted); }
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-group { font-size: 11px; letter-spacing: .06em; color: var(--shop-sidebar-muted); padding: 14px 10px 6px; font-weight: 600; }
.sb-group:first-child { padding-top: 0; }
.sb-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--shop-sidebar-ink); }
.sb-link:hover { color: #FFFFFF; background: rgba(255, 255, 255, .04); }
.sb-link[aria-current="page"] { background: var(--shop-sidebar-active); color: #FFFFFF; font-weight: 600; }
.sb-link > span:first-of-type { flex: 1; }
.sb-badge { font-size: 11.5px; font-weight: 600; background: #6D28D9; color: #FFFFFF; border-radius: 999px; padding: 0 7px; }
.sb-live { font-size: 11.5px; color: #6EE7B7; }
.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.sb-wallet { border: 1px solid var(--shop-sidebar-line); border-radius: 10px; padding: 12px; background: var(--shop-sidebar-raised); }
.sb-wallet-label { font-size: 12px; color: var(--shop-sidebar-muted); }
.sb-wallet-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sb-wallet-value { color: #FFFFFF; font-weight: 700; font-size: 18px; }
.sb-wallet-sub { font-size: 11.5px; color: var(--shop-sidebar-muted); }
.sb-wallet a { font-size: 12.5px; color: #93B4FF; }
.sb-wallet.is-soon .sb-wallet-value { color: var(--shop-sidebar-muted); font-size: 14px; font-weight: 600; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.sb-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--shop-sidebar-avatar); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: none; }
.sb-user-text { flex: 1; min-width: 0; }
.sb-user-name { display: block; color: #FFFFFF; font-size: 13px; font-weight: 600; }
.sb-user-sub { display: block; font-size: 11.5px; color: var(--shop-sidebar-muted); }
.sb-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent; color: var(--shop-sidebar-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.sb-icon-btn:hover { color: #FFFFFF; }

.content { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 28px; background: var(--shop-surface); border-bottom: 1px solid var(--shop-border); }
.crumbs { font-size: 13px; color: var(--shop-muted); }
.crumbs a { color: var(--shop-muted); text-decoration: none; }
.crumbs b { color: var(--shop-ink); font-weight: 600; }
.search { flex: 1 1 280px; max-width: 460px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--shop-border-strong); border-radius: 9px; padding: 0 12px; height: 40px; color: var(--shop-muted); background: #F9FAFB; }
.search input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; color: var(--shop-ink); min-width: 0; }
.kbd { font-size: 11.5px; border: 1px solid var(--shop-border-strong); border-radius: 5px; padding: 0 5px; background: #FFFFFF; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; align-items: center; }

/* HealthPill */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 5px 10px; border-radius: 999px; font-weight: 500; background: #EEF1F5; color: var(--shop-ink-2); }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: #98A2B3; }
.pill.ok { background: #E3F5EC; color: var(--shop-success); }
.pill.ok::before { background: #12B76A; }
.pill.neutral-ok::before { background: #12B76A; }
.pill.info { background: #E6EEFD; color: #1D4ED8; }
.pill.info::before { background: var(--shop-accent); }
.pill.warn { background: #FDF1DE; color: #93500A; }
.pill.warn::before { background: #F0A23B; }
.pill.bad { background: #FDECEB; color: var(--shop-danger); }
.pill.bad::before { background: #E5484D; }

.bell { position: relative; width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--shop-border); background: #FFFFFF; color: var(--shop-ink-2); display: flex; align-items: center; justify-content: center; }
.bell[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.page { padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 20px; max-width: 1360px; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; justify-content: space-between; }
.page-eyebrow { font-size: 12.5px; color: var(--shop-muted); }
.page-title { margin: 2px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.page-sub { font-size: 13px; color: var(--shop-muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--shop-border-strong); background: #FFFFFF; color: var(--shop-ink); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { color: var(--shop-ink); background: var(--shop-surface-2); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { border: 0; background: var(--shop-accent); color: #FFFFFF; padding: 0 18px; }
.btn-primary:hover { background: var(--shop-accent-hover); color: #FFFFFF; }
.btn-dark { border: 0; background: var(--shop-ink); color: #FFFFFF; padding: 0 18px; }
.btn-dark:hover { background: #1D2939; color: #FFFFFF; }
.btn-success { border: 0; background: var(--shop-success); color: #FFFFFF; }
.btn-success:hover { background: #05603A; color: #FFFFFF; }
.btn-danger { border: 1px solid var(--shop-danger-line); background: #FFFFFF; color: var(--shop-danger); }
.btn-danger:hover { background: #FFF7F6; color: var(--shop-danger); }
.btn-soon, .btn-soon:hover { border: 1px dashed #C9CFD8; background: #F8F9FB; color: var(--shop-muted); font-weight: 400; cursor: not-allowed; }
.btn-md { height: 40px; padding: 0 14px; font-weight: 500; }
.btn-sm { height: 36px; padding: 0 12px; border-radius: 8px; font-weight: 500; font-size: 13px; }
.icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--shop-border-strong); background: #FFFFFF; color: var(--shop-ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* Segmented */
.seg { display: flex; border: 1px solid var(--shop-border-strong); border-radius: 9px; overflow: hidden; background: #FFFFFF; }
.seg button { border: 0; padding: 0 14px; height: 40px; background: #FFFFFF; color: var(--shop-ink-2); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--shop-border-strong); }
.seg button[aria-pressed="true"] { font-weight: 600; background: var(--shop-ink); color: #FFFFFF; }

/* Switch */
.switch { position: relative; width: 40px; height: 24px; border-radius: 99px; border: 0; padding: 0; background: #C9CFD8; cursor: pointer; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 99px; background: #FFFFFF; transition: left .15s; }
.switch[aria-checked="true"] { background: var(--shop-accent); }
.switch[aria-checked="true"]::after { left: 19px; }

/* Field */
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--shop-ink-2); font-weight: 500; }
.field input, .field select, .field textarea, .input { height: 40px; border: 1px solid var(--shop-border-strong); border-radius: 8px; padding: 0 10px; font: inherit; font-weight: 400; color: var(--shop-ink); background: #FFFFFF; }
.field textarea { height: auto; padding: 8px 10px; }
.field.is-error { color: var(--shop-danger); }
.field.is-error input { border: 2px solid #D92D20; padding: 0 9px; }
.field-hint { font-size: 12px; font-weight: 400; }

/* ---------- Card / KPI ---------- */
.card { background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: 12px; padding: 20px; }
.card-flush { padding: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--shop-border); }
.card-title { margin: 0; font-size: 16px; font-weight: 600; }
.card-note { font-size: 12.5px; color: var(--shop-muted); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kpi { background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.kpi-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--shop-muted); }
.kpi-label i { width: 8px; height: 8px; border-radius: 3px; background: var(--shop-accent); }
.kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.kpi-sub { font-size: 12.5px; color: var(--shop-muted); }

/* ---------- StatusChip (লেখা + বিন্দু, রং শুধু এখান থেকে) ---------- */
.chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; color: #475467; background: #EEF1F5; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: #98A2B3; }
.chip.no-dot::before { display: none; }
.s-PENDING { color: #475467; background: #EEF1F5; } .s-PENDING::before { background: #98A2B3; }
.s-QUEUED { color: #4338CA; background: #EEF0FF; } .s-QUEUED::before { background: #6366F1; }
.s-CALLING { color: #1D4ED8; background: #E6EEFD; } .s-CALLING::before { background: #2453D6; }
.s-CONFIRMED { color: #067647; background: #E3F5EC; } .s-CONFIRMED::before { background: #12A15E; }
.s-CANCELLED { color: #B42318; background: #FDECEB; } .s-CANCELLED::before { background: #E5484D; }
.s-AGENT { color: #6D28D9; background: #F1EBFD; } .s-AGENT::before { background: #7C3AED; }
.s-NO_ANSWER, .s-BUSY, .s-NO_INPUT { color: #93500A; background: #FDF1DE; }
.s-NO_ANSWER::before, .s-BUSY::before, .s-NO_INPUT::before { background: #F0A23B; }
.s-FAILED { color: #9F1239; background: #FDE8EE; } .s-FAILED::before { background: #E11D48; }
.s-INVALID { color: #57534E; background: #F0EEEC; } .s-INVALID::before { background: #A8A29E; }
.s-SUPPRESSED { color: #3F3F46; background: #E4E4E7; } .s-SUPPRESSED::before { background: #71717A; }
.s-AI { color: #0F766E; background: #E0F4F1; } .s-AI::before { background: #14B8A6; }

/* ---------- StateCard / Skeleton / Soon ---------- */
.state { border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--shop-border); background: #FFFFFF; }
.state.info { background: #F5F8FF; border-color: #C9D5F5; }
.state.warn { background: #FFFBF2; border-color: #F3D9A4; }
.state.crit { background: #FFF7F6; border-color: #F3B8B2; }
.state-top { display: flex; gap: 12px; align-items: flex-start; }
.state-mark { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; background: #EEF1F5; color: #475467; }
.state.info .state-mark { background: #E6EEFD; color: #1D4ED8; }
.state.warn .state-mark { background: #FDF1DE; color: #93500A; }
.state.crit .state-mark { background: #FDECEB; color: #B42318; }
.state-kind { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--shop-muted); }
.state-title { font-weight: 700; font-size: 15.5px; }
.state-body { margin: 0; font-size: 13.5px; color: var(--shop-ink-2); }
.state-impact { font-size: 12.5px; color: var(--shop-muted); }
.state-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.state-actions .btn { height: 40px; padding: 0 14px; }
.state.warn .btn-primary { background: #93500A; }
.state.crit .btn-primary { background: #B42318; }
.skel { display: block; height: 12px; border-radius: 6px; background: #E8EBEF; }
.soon { border: 1px dashed #C9CFD8; background: #F8F9FB; color: var(--shop-muted); border-radius: 12px; padding: 16px; font-size: 13px; }

/* ---------- Toast ---------- */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 50; width: min(480px, calc(100vw - 32px)); }
.toast { background: var(--shop-ink); color: #FFFFFF; border-radius: 10px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 8px 24px rgba(16, 24, 40, .18); }
.toast-mark { font-weight: 700; color: #93B4FF; }
.toast.ok .toast-mark { color: #6EE7B7; }
.toast.err .toast-mark { color: #FCA5A5; }
.toast button { margin-left: auto; border: 0; background: none; color: #93B4FF; font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }

/* Banner */
.banner { border-radius: 10px; padding: 12px 14px; font-size: 13.5px; border: 1px solid #F3D9A4; background: #FFFBF2; color: #93500A; }

/* ---------- ড্যাশবোর্ড — Main.dc.html ---------- */
.dash-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.dash-main { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.dash-rail { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.card-head.tight { padding: 16px 18px; }
.card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.funnel { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.funnel-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 110px; gap: 12px; align-items: center; }
.funnel-label { font-size: 13.5px; color: var(--shop-ink-2); }
.funnel-track { height: 22px; background: #F1F3F6; border-radius: 6px; overflow: hidden; }
.funnel-fill { height: 100%; border-radius: 0 4px 4px 0; }
.funnel-value { font-size: 13.5px; text-align: right; }
.funnel-value span { color: var(--shop-muted); }
.card-foot-note { margin-top: 14px; font-size: 12.5px; color: var(--shop-muted); }
.card-foot-note b { color: var(--shop-ink); }
.legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--shop-ink-2); flex-wrap: wrap; align-items: center; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend a { text-decoration: none; font-weight: 500; }
.chart { display: flex; gap: 10px; margin-top: 18px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; height: 200px; font-size: 11.5px; color: var(--shop-muted); text-align: right; width: 28px; flex: none; }
.chart-scroll { flex: 1; min-width: 0; overflow-x: auto; }
.chart-bars, .chart-x { display: grid; grid-template-columns: repeat(14, minmax(22px, 1fr)); gap: 8px; min-width: 420px; }
.chart-bars { height: 200px; align-items: end; border-bottom: 1px solid var(--shop-border-strong); }
.chart-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 200px; }
.chart-x { margin-top: 6px; }
.chart-x span { font-size: 11px; color: var(--shop-muted); text-align: center; }
.alert-row { display: flex; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--shop-divider); flex-wrap: wrap; }
.alert-row:last-child { border-bottom: 0; }
.alert-body { flex: 1 1 260px; min-width: 0; }
.alert-title { font-weight: 600; }
.alert-desc { font-size: 12.5px; color: var(--shop-muted); }
.btn-link { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--shop-border-strong); text-decoration: none; color: var(--shop-ink); font-weight: 500; font-size: 13px; background: #FFFFFF; }
.btn-link:hover { color: var(--shop-ink); background: var(--shop-surface-2); }
.rail-link { font-size: 13px; text-decoration: none; font-weight: 500; }
.live-dot { width: 8px; height: 8px; border-radius: 99px; background: #12B76A; display: inline-block; }
.live-row { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--shop-divider); align-items: center; }
.live-row:last-child, .team-row:last-child { border-bottom: 0; }
.live-kind { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; }
.live-kind.ivr { background: #E6EEFD; color: #1D4ED8; }
.live-kind.agent { background: #F1EBFD; color: #6D28D9; }
.live-kind.ai { background: #E0F4F1; color: #0F766E; }
.live-kind.free { background: #EEF1F5; color: #475467; }
.live-text { flex: 1; min-width: 0; }
.live-title { font-weight: 600; font-size: 13.5px; }
.live-sub { font-size: 12px; color: var(--shop-muted); }
.live-time { font-family: var(--shop-mono); font-size: 12.5px; color: var(--shop-ink-2); }
.team-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--shop-divider); }
.team-avatar { width: 32px; height: 32px; border-radius: 99px; background: #EEF1F5; color: var(--shop-ink-2); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12.5px; flex: none; }
.team-row .chip, .alert-row .chip { align-self: center; }
.queue-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; text-align: center; }
.queue-tile { background: var(--shop-soft); border-radius: 9px; padding: 10px 4px; }
.queue-tile b { display: block; font-size: 20px; font-weight: 700; }
.queue-tile span { font-size: 12px; color: var(--shop-muted); }
.rail-empty { padding: 14px 18px; font-size: 13px; color: var(--shop-muted); }
.chip.c-free { color: #067647; background: #E3F5EC; }
.chip.c-busy { color: #1D4ED8; background: #E6EEFD; }
.chip.c-off { color: #475467; background: #EEF1F5; }
.chip.c-ai { color: #0F766E; background: #E0F4F1; }

/* ---------- Softphone dock — LiveCalls.dc.html ---------- */
.dock { background: #FFFFFF; display: flex; flex-direction: column; min-width: 0; }
.dock-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--shop-border); cursor: default; }
.dock-head .sdot { width: 9px; height: 9px; border-radius: 99px; background: #98A2B3; flex: none; }
.dock-head .sdot.ok { background: #12B76A; }
.dock-head .sdot.bad { background: #E5484D; }
.dock-head .sdot.busy, .dock-head .sdot.live { background: #F0A23B; }
.dock-head-text { flex: 1; min-width: 0; }
.dock-head-text span { color: var(--shop-muted); font-size: 13px; }
.rec-badge { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: #FDECEB; color: var(--shop-danger); font-weight: 600; }
.dock-toggle { border: 0; background: transparent; color: var(--shop-muted); cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.dock-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.dock-note { font-size: 12.5px; color: var(--shop-muted); text-align: center; }
.dock-note.bad { color: var(--shop-danger); }
.incoming { margin: 14px 18px 0; border: 1px solid #A6E3C4; background: #F0FBF5; border-radius: 12px; padding: 12px; }
.incoming.ring { animation: ring 1.2s ease-in-out infinite; }
@keyframes ring { 50% { box-shadow: 0 0 0 4px rgba(18, 161, 94, .18); } }
.incoming-kind { font-size: 12px; color: var(--shop-success); font-weight: 600; }
.incoming-title { font-weight: 600; margin-top: 2px; }
.incoming-sub { font-size: 12.5px; color: #4B5565; }
.incoming-actions { display: flex; gap: 8px; margin-top: 10px; }
.incoming-actions .btn { height: 40px; }
.call-who { text-align: center; }
.call-state { font-size: 12.5px; color: var(--shop-muted); }
.call-name { font-size: 20px; font-weight: 700; margin-top: 2px; overflow-wrap: anywhere; }
.call-number { font-family: var(--shop-mono); color: var(--shop-ink-2); }
.call-timer { font-family: var(--shop-mono); font-size: 28px; font-weight: 600; margin-top: 6px; }
.call-order { background: var(--shop-soft); border-radius: 10px; padding: 10px 12px; font-size: 13px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 10px; }
.call-order > span:nth-child(odd) { color: var(--shop-muted); }
.call-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.call-tool { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px; border: 1px solid var(--shop-border); background: #FFFFFF; font-size: 12px; color: var(--shop-ink-2); cursor: pointer; min-height: 60px; }
.call-tool[aria-pressed="true"] { font-weight: 600; }
.call-tool.mute[aria-pressed="true"] { border-color: var(--shop-danger); background: #FDECEB; color: var(--shop-danger); }
.call-tool.hold[aria-pressed="true"] { border-color: #93500A; background: #FDF1DE; color: #93500A; }
.call-tool:disabled { opacity: .5; cursor: not-allowed; }
.xfer { border: 1px solid var(--shop-border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.xfer label { font-size: 12.5px; color: var(--shop-muted); display: flex; flex-direction: column; gap: 4px; }
.xfer-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.xfer-btns button { height: 36px; border-radius: 8px; border: 1px solid var(--shop-border-strong); background: #FFFFFF; font-size: 12.5px; cursor: pointer; color: var(--shop-ink-2); }
.xfer-btns button:disabled { opacity: .5; cursor: not-allowed; }
.xfer-btns button.primary { background: var(--shop-success); border: 0; color: #FFFFFF; font-weight: 600; }
.hints { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: #475467; }
.hints span { padding: 2px 7px; background: #F1F3F6; border-radius: 5px; }
.call-decide { display: flex; gap: 8px; }
.call-decide button { flex: 1; height: 44px; border-radius: 9px; border: 0; font-weight: 600; cursor: pointer; }
.call-decide .ok { background: #E3F5EC; color: var(--shop-success); }
.call-decide .no { background: #FDECEB; color: var(--shop-danger); }
.btn-hangup { height: 52px; border-radius: 12px; border: 0; background: #D92D20; color: #FFFFFF; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-hangup:hover { background: #B42318; }
.btn-answer { flex: 1; background: var(--shop-success); color: #FFFFFF; border: 0; }
.btn-answer:hover { background: #05603A; color: #FFFFFF; }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.keypad button { height: 44px; border-radius: 9px; border: 1px solid var(--shop-border); background: #FFFFFF; font-family: var(--shop-mono); font-size: 16px; font-weight: 600; cursor: pointer; color: var(--shop-ink); }
.keypad button:hover { background: var(--shop-surface-2); }
.dial-row { display: flex; gap: 8px; }
.dial-row input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--shop-border-strong); border-radius: 9px; padding: 0 12px; font-family: var(--shop-mono); font-size: 16px; }
.dial-row .btn { padding: 0 16px; }

/* লাইভ কল পাতার বাইরে: ডানে নিচে ভাসমান (ছোট), কল/রিং এ বড় */
.dock-float { position: fixed; right: 20px; bottom: 20px; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 40px); overflow-y: auto; border: 1px solid var(--shop-border); border-radius: 14px; box-shadow: 0 12px 32px rgba(16, 24, 40, .18); z-index: 40; }
.dock-float .dock-head { border-bottom: 0; cursor: pointer; }
.dock-float.open .dock-head { border-bottom: 1px solid var(--shop-border); }
.dock-float:not(.open) .dock-body, .dock-float:not(.open) .incoming { display: none; }
.dock-float.open .incoming { display: block; }
/* লাইভ কল পাতায়: বোর্ডের মতো ডানের কলাম */
.dock-slot { flex: 1 1 340px; max-width: 400px; min-width: 0; border-left: 1px solid var(--shop-border); background: #FFFFFF; align-self: stretch; }
.dock-slot .dock-toggle { display: none; }

/* ---------- লাইভ কল বোর্ড ---------- */
.live-stats { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.live-stats span { padding: 8px 12px; border-radius: 9px; background: #FFFFFF; border: 1px solid var(--shop-border); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; flex-wrap: wrap; }
.line-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.line-card { background: #FFFFFF; border: 1px solid var(--shop-border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.line-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.line-card-id { font-family: var(--shop-mono); font-weight: 600; }
.line-card-title { font-weight: 600; }
.line-card-sub { font-size: 12.5px; color: var(--shop-muted); }
.line-card-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--shop-muted); border-top: 1px solid var(--shop-divider); padding-top: 8px; }
.line-card-foot .state::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: #12B76A; margin-right: 6px; }
.line-card-foot .state.off::before { background: #E5484D; }
.line-card-foot b { font-family: var(--shop-mono); color: var(--shop-ink); font-weight: 600; }
.agent-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--shop-divider); }
.agent-row:last-child, .next-row:last-child { border-bottom: 0; }
.agent-row .chip { align-self: center; }
.agent-avatar { width: 34px; height: 34px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12.5px; flex: none; background: #EEF1F5; color: #475467; }
.agent-avatar.free { background: #E3F5EC; color: #067647; }
.agent-avatar.busy { background: #E6EEFD; color: #1D4ED8; }
.next-list { list-style: none; margin: 0; padding: 0; }
.next-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--shop-divider); }
.next-n { width: 26px; height: 26px; border-radius: 7px; background: #F1F3F6; color: var(--shop-ink-2); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none; }

/* ---------- Tabs (অবস্থা অনুযায়ী) — Orders.dc.html ---------- */
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--shop-border); }
.tab { border: 0; background: transparent; font-size: 13.5px; padding: 10px 12px; cursor: pointer; white-space: nowrap; color: var(--shop-muted); font-weight: 500; }
.tab[aria-selected="true"] { color: var(--shop-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--shop-accent); }
.tab-count { font-size: 11.5px; padding: 1px 7px; border-radius: 99px; margin-left: 4px; background: #EEF1F5; color: #475467; }
.tab[aria-selected="true"] .tab-count { background: var(--shop-ink); color: #FFFFFF; }

/* ---------- ফিল্টার ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters .search { flex: 1 1 260px; max-width: none; background: #FFFFFF; }
.filter-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--shop-muted); }
.select { height: 40px; border: 1px solid var(--shop-border-strong); border-radius: 9px; padding: 0 10px; font: inherit; background: #FFFFFF; color: var(--shop-ink); }
.btn-decision { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 9px; background: #6D28D9; color: #FFFFFF; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; }
.btn-decision:hover { background: #5B21B6; color: #FFFFFF; }
.btn-decision span { font-size: 12px; background: #FFFFFF; color: #6D28D9; border-radius: 99px; padding: 0 7px; }

/* ---------- বাল্ক বার ---------- */
.bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; background: var(--shop-ink); color: #FFFFFF; border-radius: 10px; }
.bulkbar b { font-weight: 600; }
.bulkbar .spacer { flex: 1; }
.bulkbar button { height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid #3A475C; background: transparent; color: #FFFFFF; cursor: pointer; }
.bulkbar button:hover { background: rgba(255, 255, 255, .06); }
.bulkbar button.danger { border: 0; background: var(--shop-danger); }
.bulkbar button.link { border: 0; color: #93B4FF; text-decoration: underline; padding: 0 4px; }

/* ---------- বাতিলের কারণ (DecisionMode.dc.html) ---------- */
.reasons { border: 1px solid var(--shop-danger-line); background: #FFF7F6; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.reasons-list { display: flex; flex-wrap: wrap; gap: 8px; }
.reason { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--shop-danger-line); background: #FFFFFF; color: var(--shop-danger); cursor: pointer; }
.reason:hover, .reason[aria-pressed="true"] { background: var(--shop-danger); color: #FFFFFF; }
.reasons-other { display: flex; gap: 8px; flex-wrap: wrap; }
.reasons-other input { flex: 1 1 200px; }

/* ---------- DataTable ---------- */
.table-card { background: #FFFFFF; border: 1px solid var(--shop-border); border-radius: 12px; overflow-x: auto; }
.dt { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 13.5px; }
.dt thead tr { background: var(--shop-surface-2); color: var(--shop-muted); text-align: left; font-size: 12.5px; }
.dt th { padding: 10px 8px; font-weight: 600; }
.dt td { padding: 11px 8px; vertical-align: top; }
.dt th:first-child, .dt td:first-child { padding-left: 12px; padding-right: 12px; width: 32px; }
.dt th:last-child, .dt td:last-child { padding-right: 12px; text-align: right; white-space: nowrap; }
.dt .num { text-align: right; font-weight: 600; white-space: nowrap; }
.dt tbody tr { border-top: 1px solid var(--shop-divider); cursor: pointer; }
.dt tbody tr:hover { background: #FAFBFC; }
.dt tbody tr.is-selected { background: var(--shop-selected); box-shadow: inset 3px 0 0 var(--shop-accent); }
.dt tbody tr.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: #FFF6D6; } }
.dt .ref { font-family: var(--shop-mono); font-weight: 600; font-size: 12.5px; }
.dt .sub { font-size: 11.5px; color: var(--shop-muted); }
.dt .sub-12 { font-size: 12px; color: var(--shop-muted); }
.dt .name { font-weight: 600; }
.dt .when { font-size: 12.5px; }
.dt input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.dt-empty { padding: 40px; text-align: center; color: var(--shop-muted); }
.pips { display: flex; gap: 3px; }
.pip { width: 16px; height: 6px; border-radius: 3px; background: var(--shop-border); }
.pip.on { background: var(--shop-accent); }
.pips.done .pip.on { background: #F0A23B; }
.row-actions { display: inline-flex; gap: 4px; }

/* Pager */
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--shop-muted); }
.pager-btns { display: flex; gap: 4px; }
.pager button { min-width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--shop-border-strong); background: #FFFFFF; cursor: pointer; color: var(--shop-ink-2); padding: 0 8px; }
.pager button[aria-current="page"] { border: 0; background: var(--shop-ink); color: #FFFFFF; }
.pager button:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- তালিকা + ড্রয়ার ---------- */
.split { display: flex; flex-wrap: wrap; align-items: flex-start; }
.split > .page { flex: 999 1 620px; min-width: 0; gap: 16px; }

/* DetailDrawer — ডানে ৩৮০–৪৬০px; ফোনে পুরো চওড়া (flex-wrap) */
.drawer { flex: 1 1 380px; min-width: 0; max-width: 460px; background: #FFFFFF; border-left: 1px solid var(--shop-border); display: flex; flex-direction: column; align-self: stretch; }
.drawer-head { padding: 18px 22px; border-bottom: 1px solid var(--shop-border); display: flex; align-items: flex-start; gap: 12px; }
.drawer-head > div { flex: 1; min-width: 0; }
.drawer-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drawer-ref { font-family: var(--shop-mono); font-weight: 600; font-size: 16px; }
.drawer-sub { font-size: 12.5px; color: var(--shop-muted); }
.drawer-close { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--shop-border); background: #FFFFFF; cursor: pointer; color: var(--shop-ink-2); display: flex; align-items: center; justify-content: center; flex: none; }
.drawer-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 18px; }
.drawer-section-title { margin: 0 0 10px; font-size: 14px; font-weight: 600; }

/* DecisionCard */
.decision { border: 1px solid #DCCFF8; background: #FAF7FF; border-radius: 12px; padding: 14px; }
.decision-title { font-weight: 600; }
.decision-desc { font-size: 12.5px; color: #4B5565; margin-top: 2px; }
.decision-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.decision-actions .btn { flex: 1 1 100px; }
.decision-actions .btn-primary { flex-basis: 120px; }
.decision .reasons { margin-top: 12px; }

/* key-value */
.kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; font-size: 13.5px; margin: 0; }
.kv dt { color: var(--shop-muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv .strong { font-weight: 700; }
.kv .warn { color: #93500A; font-weight: 600; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li { display: grid; grid-template-columns: 44px 16px minmax(0, 1fr); gap: 8px; padding-bottom: 12px; }
.tl-time { font-size: 12px; color: var(--shop-muted); font-family: var(--shop-mono); padding-top: 1px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 10px; height: 10px; border-radius: 99px; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px currentColor; background: currentColor; color: #98A2B3; flex: none; }
.tl-line { flex: 1; width: 2px; background: var(--shop-border); margin-top: 3px; }
.timeline li:last-child .tl-line { display: none; }
.tl-title { display: block; font-weight: 600; font-size: 13px; }
.tl-sub { display: block; font-size: 12px; color: var(--shop-muted); overflow-wrap: anywhere; }
.tl-gray { color: #98A2B3; } .tl-amber { color: #F0A23B; } .tl-blue { color: #2453D6; } .tl-purple { color: #7C3AED; }
.tl-teal { color: #0F766E; } .tl-green { color: #12A15E; } .tl-red { color: #E5484D; }

/* AudioPlayer + Waveform */
.player { border: 1px solid var(--shop-border); border-radius: 12px; padding: 12px 14px; }
.player-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--shop-muted); }
.player-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.player-btn { width: 40px; height: 40px; border-radius: 99px; border: 0; background: var(--shop-ink); color: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
.wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 36px; cursor: pointer; }
.wave span { flex: 1; border-radius: 2px; background: #C9D3E3; min-height: 3px; }
.wave span.played { background: var(--shop-accent); }
.player-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 500; text-decoration: none; }

/* AI কথোপকথন (Transcript) */
.transcript { display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 13px; }
.bubble.ai { align-self: flex-start; background: #E0F4F1; color: #0B4F4A; border-top-left-radius: 4px; }
.bubble.customer { align-self: flex-end; background: #EEF1F5; color: var(--shop-ink); border-top-right-radius: 4px; }
.bubble.system { align-self: center; background: transparent; color: var(--shop-muted); font-size: 12px; border: 1px dashed var(--shop-border-strong); }
.bubble-who { display: block; font-size: 11px; font-weight: 600; opacity: .75; }

.player-time { font-family: var(--shop-mono); font-size: 12px; color: var(--shop-muted); white-space: nowrap; }
.player-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--shop-muted); }
.player-foot a { text-decoration: none; }
.player-speed { border: 0; background: none; padding: 0; font: inherit; color: var(--shop-muted); cursor: pointer; }
.player-speed[aria-pressed="true"] { color: var(--shop-ink); font-weight: 600; }
.bubble.tool { align-self: center; background: #FFFFFF; border: 1px dashed #B8C0CC; color: #475467; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-family: var(--shop-mono); }

/* ---------- কল লগ (Calls.dc.html) ---------- */
.type-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.type-filter button { height: 36px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; border: 1px solid var(--shop-border-strong); background: #FFFFFF; color: var(--shop-ink-2); font-weight: 500; }
.type-filter button[aria-pressed="true"] { border-color: var(--shop-ink); background: var(--shop-ink); color: #FFFFFF; font-weight: 600; }
.type-filter .count { opacity: .75; }
.tchip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.t-IVR { color: #1D4ED8; background: #E6EEFD; }
.t-MANUAL { color: #344054; background: #EEF1F5; }
.t-IN { color: #067647; background: #E3F5EC; }
.t-CONF { color: #93500A; background: #FDF1DE; }
.t-AI { color: #0F766E; background: #E0F4F1; }
.dt-calls { min-width: 780px; }
.dt-calls th:first-child, .dt-calls td:first-child { width: auto; padding-left: 14px; padding-right: 8px; }
.dt-calls td:first-child { font-size: 12.5px; }
.dt-calls .mono { font-family: var(--shop-mono); font-size: 12.5px; }
.dt-calls .line-by { font-size: 12.5px; }
.play-btn { width: 34px; height: 34px; border-radius: 99px; border: 1px solid var(--shop-border-strong); background: #FFFFFF; color: var(--shop-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.call-detail .call-title { font-size: 17px; font-weight: 700; margin-top: 6px; }
.call-detail .drawer-body-stack { display: flex; flex-direction: column; gap: 16px; }
.call-detail .drawer-body-stack:empty { display: none; }
.mini-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.mini-tiles > div { background: #F6F7F9; border-radius: 9px; padding: 8px 4px; }
.mini-tiles b { display: block; font-weight: 700; }
.mini-tiles span { font-size: 11.5px; color: var(--shop-muted); }
.ai-summary { border: 1px solid #C9D5F5; background: #F5F8FF; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ai-summary b { font-size: 13.5px; }
.outcome { background: #F6F7F9; border-radius: 10px; padding: 12px; font-size: 13px; }
.outcome-title { font-weight: 600; margin-bottom: 4px; }
.outcome-sub { color: var(--shop-muted); font-size: 12.5px; }

/* ---------- সিস্টেমের অবস্থা (States.dc.html) — খোলসের উপরে ---------- */
.sys-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; padding: 16px 28px 0; max-width: 1360px; box-sizing: border-box; }
.sys-states .state-mark { font-size: 12px; }

/* ---------- লগইন / সাইনআপ (ShopLogin.dc.html) ---------- */
.auth-body { margin: 0; background: var(--shop-bg); }
.auth { font-family: var(--shop-font); color: var(--shop-ink); background: #F4F6F8; display: flex; flex-wrap: wrap; font-size: 14px; line-height: 1.5; min-height: 100vh; }
.auth-hero { flex: 1 1 420px; background: #0E1726; color: #E6EAF0; padding: 56px; box-sizing: border-box; display: flex; flex-direction: column; gap: 32px; justify-content: space-between; }
.auth-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; }
.auth-logo { width: 40px; height: 40px; border-radius: 11px; background: #2453D6; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.auth-h1 { margin: 0; font-size: 40px; line-height: 1.25; font-weight: 700; color: #FFFFFF; max-width: 520px; }
.auth-lead { margin: 16px 0 0; font-size: 16px; color: #B8C2D3; max-width: 480px; }
.auth-points { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.auth-points li { display: flex; gap: 10px; align-items: center; }
.auth-tick { width: 22px; height: 22px; border-radius: 99px; background: #1C2940; color: #6EE7B7; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.auth-foot { font-size: 12.5px; color: #8A96A8; }
.auth-foot a { color: #93B4FF; }
.auth-side { flex: 1 1 420px; display: flex; align-items: center; justify-content: center; padding: 40px 20px; box-sizing: border-box; }
.auth-card { width: 100%; max-width: 420px; background: #FFFFFF; border: 1px solid #E2E6EC; border-radius: 16px; padding: 28px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #F1F3F6; border-radius: 10px; padding: 4px; }
.auth-tab { height: 40px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; background: transparent; color: #5D6B7E; }
.auth-tab[aria-selected="true"] { background: #FFFFFF; color: #101828; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form.tight { gap: 12px; }
.auth-h2 { margin: 0; font-size: 22px; font-weight: 700; }
.auth-sub { font-size: 13px; color: #5D6B7E; }
.auth-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; color: #344054; }
.auth-field input { height: 46px; border: 1px solid #D5DAE1; border-radius: 10px; padding: 0 12px; font: inherit; font-weight: 400; color: #101828; min-width: 0; box-sizing: border-box; }
.auth-form.tight .auth-field input { height: 44px; }
.auth-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.auth-check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.auth-check.top { align-items: flex-start; gap: 10px; }
.auth-check input { width: 18px; height: 18px; flex: none; margin: 0; }
.auth-check.top input { margin-top: 2px; }
.auth-link { border: 0; background: none; padding: 0; font: inherit; color: #2453D6; cursor: pointer; }
.auth-note { font-size: 12.5px; color: #344054; background: #F5F8FF; border: 1px solid #C9D5F5; border-radius: 10px; padding: 10px 12px; }
.auth-error { font-size: 13px; color: #B42318; background: #FDECEB; border-radius: 10px; padding: 10px 12px; }
.auth-submit { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 10px; border: 0; background: #2453D6; color: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer; }
.auth-submit:disabled { opacity: .6; cursor: wait; }
.auth-hint { font-size: 12.5px; color: #5D6B7E; text-align: center; }
.auth-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 520px) {
  .auth-hero { padding: 32px 24px; }
  .auth-h1 { font-size: 30px; }
  .auth-two { grid-template-columns: 1fr; }
}

/* ---------- Dialog ও ⋯ মেনু ---------- */
.dlg { border: 0; border-radius: 14px; padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 20px 50px rgba(16, 24, 40, .25); color: var(--shop-ink); }
.dlg::backdrop { background: rgba(14, 23, 38, .45); }
.dlg-form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.dlg-title { margin: 0; font-size: 17px; font-weight: 700; }
.dlg-body { margin: -6px 0 0; font-size: 13px; color: var(--shop-muted); }
.dlg-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.dlg-check input { width: 16px; height: 16px; }
.dlg-error { font-size: 13px; color: #B42318; background: #FDECEB; border-radius: 8px; padding: 8px 10px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; }
.menu-wrap { position: relative; display: inline-block; }
.menu-btn { width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--shop-border-strong); background: #FFFFFF; cursor: pointer; color: var(--shop-ink-2); font: inherit; line-height: 1; }
.menu-btn:disabled { opacity: .4; cursor: not-allowed; }
.menu { position: fixed; z-index: 60; min-width: 180px; background: #FFFFFF; border: 1px solid var(--shop-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(16, 24, 40, .15); padding: 4px; display: flex; flex-direction: column; text-align: left; }
.menu button { border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 7px; font: inherit; font-size: 13.5px; cursor: pointer; color: var(--shop-ink); white-space: nowrap; }
.menu button:hover, .menu button:focus-visible { background: #F4F6F8; }
.menu button.danger { color: #B42318; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- সেটিংস (Settings.dc.html) ---------- */
.set-page { max-width: 1200px; }
.set-hero { padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; border-bottom: 1px solid var(--shop-border); }
.set-eyebrow { margin: 0; font-size: 13px; color: var(--shop-muted); font-weight: 600; }
.set-number { font-family: var(--shop-mono); font-size: 28px; font-weight: 600; margin-top: 2px; }
.soon-text { color: #98A2B3; font-family: inherit; }
.set-number.soon-text { font-size: 22px; }
.set-note { margin: 2px 0 0; font-size: 13px; color: var(--shop-muted); }
.set-note.small { margin-top: 10px; font-size: 12px; }
.set-hero .set-note { margin-top: 6px; }
.set-stats { padding: 16px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; border-bottom: 1px solid var(--shop-border); }
.set-stats b { font-weight: 600; }
.muted-normal { color: var(--shop-muted); font-weight: 400; }
.set-foot { padding: 12px 20px; font-size: 12.5px; color: var(--shop-muted); border-top: 1px solid var(--shop-divider); }
.set-h2 { margin: 0; font-size: 17px; font-weight: 600; }
.set-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.set-team { flex: 3 1 560px; min-width: 0; }
.set-perms { flex: 2 1 320px; min-width: 0; padding: 18px 20px; }
.st { width: 100%; border-collapse: collapse; min-width: 700px; font-size: 13.5px; }
.st-team { min-width: 620px; }
.st thead tr { background: var(--shop-surface-2); color: var(--shop-muted); text-align: left; font-size: 12.5px; }
.st th { padding: 10px 8px; font-weight: 600; }
.st td { padding: 11px 8px; border-top: 1px solid var(--shop-divider); vertical-align: middle; }
.st th:first-child, .st td:first-child { padding-left: 20px; }
.st th:last-child, .st td:last-child { padding-right: 20px; text-align: right; }
.st .mono { font-family: var(--shop-mono); font-size: 12.5px; }
.st .strong, .strong { font-weight: 600; }
.st .ink { color: var(--shop-ink-2); }
.member { display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 99px; background: #EEF1F5; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12.5px; flex: none; }
.r-owner { color: #93500A; background: #FDF1DE; }
.r-admin { color: #1D4ED8; background: #E6EEFD; }
.r-agent { color: #344054; background: #EEF1F5; }
.reg-ok { color: #067647; background: #E3F5EC; } .reg-ok::before { background: #12B76A; }
.reg-warn { color: #93500A; background: #FDF1DE; } .reg-warn::before { background: #F0A23B; }
.reg-bad { color: #B42318; background: #FDECEB; } .reg-bad::before { background: #E5484D; }
.perm { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.perm th { color: var(--shop-muted); font-size: 12px; font-weight: 600; padding: 6px 4px; text-align: center; }
.perm th:first-child, .perm td:first-child { text-align: left; padding-left: 0; }
.perm td { border-top: 1px solid var(--shop-divider); padding: 8px 4px; text-align: center; font-weight: 600; }
.perm td:first-child { font-weight: 400; }
.perm .yes { color: #067647; }
.perm .no { color: #98A2B3; }
.ext-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 16px 20px; }
.ext-card { border: 1px solid var(--shop-border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ext-top { display: flex; justify-content: space-between; align-items: center; }
.ext-num { font-family: var(--shop-mono); font-size: 18px; font-weight: 600; }
.ext-right { display: flex; align-items: center; gap: 6px; }
.ext-right .menu-btn { width: 28px; height: 28px; }
.ext-who { font-size: 13px; }
.ext-who .muted { color: var(--shop-muted); }
.ext-actions { display: flex; gap: 6px; }
.btn-sm-out { flex: 1; height: 32px; border-radius: 7px; border: 1px solid var(--shop-border-strong); background: #FFFFFF; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--shop-ink-2); }
.secret { flex: 1; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 7px; background: #F6F7F9; font-family: var(--shop-mono); font-size: 12.5px; user-select: all; overflow-wrap: anywhere; }

/* ---------- রিপোর্ট (Reports.dc.html) ---------- */
.report-body { display: flex; flex-direction: column; gap: 20px; }
.report-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.report-kpi { padding: 16px; }
.report-kpi .kpi-label { font-size: 13px; }
.report-kpi-value { font-size: 24px; font-weight: 700; margin-top: 4px; }
.kpi-delta { font-size: 12.5px; color: var(--shop-muted); margin-top: 2px; }
.kpi-delta.up { color: #067647; }
.kpi-delta.down { color: #B42318; }
.report-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.report-heat { flex: 3 1 560px; min-width: 0; }
.report-side { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.heat-scroll { overflow-x: auto; margin-top: 14px; }
.heat { min-width: 560px; }
.heat-row { display: grid; gap: 3px; margin-bottom: 3px; }
.heat-hours { font-size: 11.5px; color: var(--shop-muted); text-align: center; }
.heat-day { font-size: 12.5px; color: var(--shop-ink-2); display: flex; align-items: center; }
.heat-cell { height: 32px; border-radius: 4px; font-size: 11.5px; display: flex; align-items: center; justify-content: center; font-weight: 500; }
.heat-cell.empty { background: #F6F7F9; }
.heat-legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--shop-muted); flex-wrap: wrap; }
.heat-swatch { width: 22px; height: 12px; border-radius: 3px; }
.heat-best { margin-left: auto; }
.heat-best b { color: var(--shop-ink); }
.ai-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ai-tiles > div { background: #F6F7F9; border-radius: 9px; padding: 10px; }
.ai-tiles b { display: block; font-size: 20px; font-weight: 700; }
.ai-tiles span { font-size: 12px; color: var(--shop-muted); }
.reason-bars { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.bar-track { height: 8px; background: #F1F3F6; border-radius: 4px; margin-top: 4px; }
.bar-fill { height: 8px; border-radius: 4px; background: #E5484D; }
.rt { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 13.5px; }
.rt thead tr { background: var(--shop-surface-2); color: var(--shop-muted); font-size: 12.5px; }
.rt th { padding: 10px 8px; font-weight: 600; text-align: right; }
.rt td { padding: 10px 8px; text-align: right; border-top: 1px solid var(--shop-divider); }
.rt th:first-child, .rt td:first-child { text-align: left; padding-left: 20px; }
.rt td:first-child { font-weight: 500; }
.rt th:last-child, .rt td:last-child { padding-right: 20px; }
.rt .ok { color: #067647; font-weight: 600; }
.rt .strong { font-weight: 600; }
@media print {
  .sb, .topbar, .dock, .dock-float, .page-actions, .toasts, .banner { display: none !important; }
  .app, .content { display: block; background: #FFFFFF; }
  .report-page .card { break-inside: avoid; }
}

.drawer-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--shop-muted); border-top: 1px solid var(--shop-divider); padding-top: 12px; flex-wrap: wrap; gap: 6px; }
.drawer-foot .dot { display: inline-flex; align-items: center; gap: 6px; }
.drawer-foot .dot::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: #12B76A; }
.drawer-foot .dot.pending::before { background: #F0A23B; }