/* =====================================================================
 * SalesForce Pro — Design System (web)
 * Tokens → base → components → app shell. Light + dark. Tenant brand
 * colour overrides --brand-* at runtime (white-labelling).
 * ===================================================================== */

:root {
  --brand-50:#EEEDFF; --brand-100:#DCDAFF; --brand-200:#B4B0FF; --brand-300:#8580FA; --brand-400:#4D44EE;
  --brand-500:#0B00D0; --brand-600:#0900AC; --brand-700:#07008A; --brand-800:#050068; --brand-900:#03003E;

  --gray-0:#FFFFFF; --gray-25:#FCFCFD; --gray-50:#F7F8FA; --gray-100:#F0F1F4; --gray-150:#E6E8EC;
  --gray-200:#D9DCE1; --gray-300:#BCC0C8; --gray-400:#9097A1; --gray-500:#6B7280; --gray-600:#4B5260;
  --gray-700:#353A45; --gray-800:#1F242E; --gray-900:#0F1218; --black:#000;

  --success-50:#ECFDF3; --success-100:#D1FADF; --success-500:#12B76A; --success-600:#039855; --success-700:#027A48;
  --warning-50:#FFFAEB; --warning-100:#FEF0C7; --warning-500:#F79009; --warning-600:#DC6803; --warning-700:#B54708;
  --danger-50:#FEF3F2;  --danger-100:#FEE4E2;  --danger-500:#F04438;  --danger-600:#D92D20;  --danger-700:#B42318;
  --info-50:#EFF8FF;    --info-100:#D1E9FF;    --info-500:#2E90FA;    --info-600:#1570EF;    --info-700:#175CD3;
  --violet-50:#F4F3FF;  --violet-600:#6938EF;  --teal-50:#F0FDF9; --teal-600:#0E9384;

  --fg-default:var(--gray-900); --fg-muted:var(--gray-600); --fg-subtle:var(--gray-500); --fg-faint:var(--gray-400);
  --fg-onbrand:#fff; --fg-link:var(--brand-500);
  --bg-canvas:var(--gray-50); --bg-surface:#fff; --bg-raised:#fff; --bg-hover:var(--gray-50); --bg-active:var(--gray-100);
  --bg-sidebar:#000; --bg-topbar:rgba(255,255,255,.86); --bg-input:#fff; --bg-subtle:var(--gray-50);
  --border-default:var(--gray-200); --border-strong:var(--gray-300); --border-subtle:var(--gray-150);

  --font-sans:'Inter','Noto Sans Bengali',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --fs-xs:11px; --fs-sm:12px; --fs-base:14px; --fs-md:15px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:32px;

  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:9999px;
  --shadow-xs:0 1px 2px rgba(15,18,24,.05);
  --shadow-sm:0 1px 2px rgba(15,18,24,.06),0 1px 1px rgba(15,18,24,.04);
  --shadow-md:0 4px 12px rgba(15,18,24,.08),0 2px 4px rgba(15,18,24,.04);
  --shadow-lg:0 16px 40px rgba(15,18,24,.14),0 4px 12px rgba(15,18,24,.06);
  --ring:0 0 0 2px var(--bg-surface),0 0 0 4px var(--brand-500);
  --ease:cubic-bezier(.2,0,0,1); --t-fast:120ms; --t-base:180ms; --t-slow:240ms;
  --sidebar-w:248px; --topbar-h:60px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --gray-0:#0B0D12; --gray-25:#0E1016; --gray-50:#0F1218; --gray-100:#161A22; --gray-150:#1D222C;
  --gray-200:#262C38; --gray-300:#353C4A; --gray-400:#6B7384; --gray-500:#8C93A3; --gray-600:#A9AFBC;
  --gray-700:#C7CBD4; --gray-800:#E3E6EB; --gray-900:#F4F5F7;
  --success-50:rgba(18,183,106,.12); --success-100:rgba(18,183,106,.2); --success-700:#4ADE9A;
  --warning-50:rgba(247,144,9,.12); --warning-100:rgba(247,144,9,.2); --warning-700:#FDB022;
  --danger-50:rgba(240,68,56,.12); --danger-100:rgba(240,68,56,.2); --danger-700:#FF8A80;
  --info-50:rgba(46,144,250,.12); --info-100:rgba(46,144,250,.2); --info-700:#84CAFF;
  --violet-50:rgba(105,56,239,.14); --teal-50:rgba(14,147,132,.14);
  --brand-50:rgba(77,68,238,.16); --brand-100:rgba(77,68,238,.26); --brand-700:#B4B0FF;
  --fg-link:#8580FA;
  --bg-canvas:#0B0D12; --bg-surface:#11141B; --bg-raised:#161A22; --bg-hover:#161A22; --bg-active:#1D222C;
  --bg-sidebar:#05060A; --bg-topbar:rgba(17,20,27,.86); --bg-input:#0F1218; --bg-subtle:#0F1218;
  --border-default:#232935; --border-strong:#323948; --border-subtle:#1B2029;
  --shadow-md:0 4px 16px rgba(0,0,0,.45); --shadow-lg:0 20px 48px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.5;color:var(--fg-default);
  background:var(--bg-canvas);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:var(--fg-link);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{vertical-align:middle}
.ico{flex-shrink:0;display:inline-block}
h1,h2,h3,h4,h5{margin:0;color:var(--fg-default);letter-spacing:-.01em}
p{margin:0}
hr{border:0;border-top:1px solid var(--border-subtle);margin:16px 0}
code,.mono{font-family:var(--font-mono);font-size:.92em}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
::selection{background:var(--brand-100)}
[x-cloak]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type */
.t-display{font-size:var(--fs-3xl);line-height:1.15;font-weight:650;letter-spacing:-.025em}
.t-h1{font-size:var(--fs-2xl);line-height:1.2;font-weight:650;letter-spacing:-.02em}
.t-h2{font-size:var(--fs-xl);line-height:1.3;font-weight:600}
.t-h3{font-size:var(--fs-lg);line-height:1.35;font-weight:600}
.t-small{font-size:var(--fs-sm);color:var(--fg-muted)}
.t-caption{font-size:var(--fs-xs);color:var(--fg-subtle)}
.t-overline{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle)}
.t-muted{color:var(--fg-muted)} .t-subtle{color:var(--fg-subtle)} .t-strong{font-weight:600}
.t-success{color:var(--success-700)} .t-danger{color:var(--danger-700)} .t-warning{color:var(--warning-700)}
.t-brand{color:var(--brand-500)} .t-right{text-align:right} .t-center{text-align:center}
.t-mono{font-family:var(--font-mono);font-size:var(--fs-sm)} .nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* layout utilities */
.row{display:flex;align-items:center;gap:8px} .row-top{align-items:flex-start}
.col{display:flex;flex-direction:column}
.between{justify-content:space-between} .wrap{flex-wrap:wrap} .grow{flex:1;min-width:0}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.ml-auto{margin-left:auto}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.span-2{grid-column:span 2}.span-3{grid-column:span 3}
.w-full{width:100%}
.hide{display:none!important}
@media (max-width:1180px){.grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}.span-2,.span-3{grid-column:auto}.hide-sm{display:none!important}}

/* ------------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;
  border-radius:var(--r-md);border:1px solid transparent;font:500 13px/1 var(--font-sans);cursor:pointer;
  white-space:nowrap;user-select:none;text-decoration:none!important;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn-primary{background:var(--brand-500);color:#fff;box-shadow:0 1px 2px color-mix(in srgb,var(--brand-500) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.12)}
.btn-primary:hover{background:var(--brand-600)}
.btn-primary:active{background:var(--brand-700)}
.btn-secondary{background:var(--bg-surface);color:var(--gray-800);border-color:var(--border-default);box-shadow:var(--shadow-xs)}
.btn-secondary:hover{background:var(--bg-hover);border-color:var(--border-strong)}
.btn-ghost{background:transparent;color:var(--gray-700)}
.btn-ghost:hover{background:var(--bg-active)}
.btn-danger{background:var(--danger-600);color:#fff}
.btn-danger:hover{background:var(--danger-700)}
.btn-success{background:var(--success-600);color:#fff}
.btn-dark{background:var(--gray-900);color:var(--gray-0)}
.btn-dark:hover{background:var(--gray-800)}
.btn-sm{height:28px;padding:0 10px;font-size:12px;border-radius:var(--r-sm)}
.btn-lg{height:42px;padding:0 20px;font-size:14px}
.btn-xl{height:50px;padding:0 26px;font-size:15px;border-radius:10px}
.btn-block{width:100%}
.btn-icon{width:34px;padding:0}
.btn-icon.btn-sm{width:28px}
.icon-btn{position:relative;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);border:1px solid var(--border-default);background:var(--bg-surface);color:var(--gray-600);cursor:pointer;
  transition:background var(--t-fast)}
.icon-btn:hover{background:var(--bg-hover);color:var(--gray-900)}
.icon-btn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--danger-500);
  box-shadow:0 0 0 2px var(--bg-surface)}

/* ------------------------------------------------------------------ forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field-label{font-size:13px;font-weight:500;color:var(--gray-800);display:flex;align-items:center;gap:4px}
.field-label .req{color:var(--danger-500)}
.field-help{font-size:12px;color:var(--fg-subtle)}
.field-error{font-size:12px;color:var(--danger-700);display:flex;gap:4px;align-items:center}
.sf-input,.sf-select,.sf-textarea{width:100%;height:38px;padding:0 12px;border:1px solid var(--border-default);
  border-radius:var(--r-md);background:var(--bg-input);color:var(--fg-default);font:400 14px/1.4 var(--font-sans);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);box-shadow:var(--shadow-xs)}
.sf-textarea{height:auto;min-height:96px;padding:10px 12px;resize:vertical}
.sf-select{appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
select[multiple].sf-select{height:auto;min-height:96px;padding:6px;background-image:none}
.sf-input::placeholder,.sf-textarea::placeholder{color:var(--fg-faint)}
.sf-input:hover,.sf-select:hover,.sf-textarea:hover{border-color:var(--border-strong)}
.sf-input:focus,.sf-select:focus,.sf-textarea:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
[aria-invalid="true"]{border-color:var(--danger-500)!important}
[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--danger-100)!important}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap>.ico{position:absolute;left:12px;color:var(--fg-faint);pointer-events:none}
.input-wrap>.sf-input{padding-left:36px}
.input-group{display:flex;align-items:stretch}
.input-group .addon{display:flex;align-items:center;padding:0 12px;background:var(--bg-subtle);border:1px solid var(--border-default);
  color:var(--fg-subtle);font-size:13px;white-space:nowrap}
.input-group .addon:first-child{border-right:0;border-radius:var(--r-md) 0 0 var(--r-md)}
.input-group .addon:last-child{border-left:0;border-radius:0 var(--r-md) var(--r-md) 0}
.input-group .sf-input{border-radius:0;min-width:0}
.input-group .sf-input:first-child{border-radius:var(--r-md) 0 0 var(--r-md)}
.input-group .sf-input:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
.sf-check{width:16px;height:16px;accent-color:var(--brand-500);margin:0;cursor:pointer;flex-shrink:0}
.check-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--gray-700);cursor:pointer}
.check-row .sf-check{margin-top:2px}
.sf-file{font-size:13px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.form-errors{padding:10px 12px;border-radius:var(--r-md);background:var(--danger-50);color:var(--danger-700);
  border:1px solid var(--danger-100);font-size:13px;margin-bottom:16px;display:flex;gap:8px}
.switch{position:relative;display:inline-flex;width:36px;height:20px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;border-radius:99px;background:var(--gray-300);transition:background var(--t-fast);cursor:pointer}
.switch span::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:var(--shadow-sm);transition:transform var(--t-base) var(--ease)}
.switch input:checked+span{background:var(--brand-500)}
.switch input:checked+span::after{transform:translateX(16px)}

/* segmented control */
.segmented{display:inline-flex;padding:3px;background:var(--bg-active);border-radius:10px;gap:2px}
.segmented button,.segmented a{border:0;background:transparent;height:30px;padding:0 14px;border-radius:8px;font:500 13px var(--font-sans);
  color:var(--fg-muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.segmented .on{background:var(--bg-surface);color:var(--fg-default);box-shadow:var(--shadow-sm)}

/* ------------------------------------------------------------------ cards */
.card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--r-lg)}
.card-head{padding:16px 18px 14px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:flex-start;
  justify-content:space-between;gap:16px}
.card-head h3{font-size:15px;font-weight:600}
.card-head .sub{font-size:12px;color:var(--fg-subtle);margin-top:2px}
.card-body{padding:18px}
.card-foot{padding:12px 18px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;gap:8px;
  background:var(--bg-subtle);border-radius:0 0 var(--r-lg) var(--r-lg)}
.card-flush .card-body{padding:0}
.card-hover{transition:border-color var(--t-fast),box-shadow var(--t-base),transform var(--t-base)}
.card-hover:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.card-brand{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-50)}

/* KPI */
.kpi{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--r-lg);padding:16px 18px;
  display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.kpi .lbl{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-subtle);
  display:flex;align-items:center;gap:6px}
.kpi .val{font-size:26px;font-weight:650;letter-spacing:-.025em;color:var(--fg-default)}
.kpi .foot{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-subtle)}
.kpi .spark{position:absolute;right:14px;top:16px;opacity:.9}
.delta{font-size:11px;font-weight:600;padding:2px 6px;border-radius:5px;display:inline-flex;align-items:center;gap:2px}
.delta.pos{color:var(--success-700);background:var(--success-50)}
.delta.neg{color:var(--danger-700);background:var(--danger-50)}
.delta.flat{color:var(--gray-600);background:var(--bg-active)}

/* ------------------------------------------------------------------ table */
.table-wrap{overflow:auto;border-radius:0 0 var(--r-lg) var(--r-lg)}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{background:var(--bg-subtle);padding:9px 16px;text-align:left;font-size:11px;font-weight:600;color:var(--fg-muted);
  letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--border-subtle);white-space:nowrap;position:sticky;top:0;z-index:1}
.table td{padding:0 16px;height:46px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--t-fast)}
.table tbody tr:hover{background:var(--bg-hover)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table .id{font-family:var(--font-mono);font-size:12px;color:var(--fg-subtle)}
.table-compact td{height:36px}
.table a.row-link{color:inherit;font-weight:500}

/* ------------------------------------------------------------------ pills & badges */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:var(--r-full);font-size:11px;
  font-weight:500;line-height:16px;white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.square{border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:10.5px}
.pill-success{background:var(--success-50);color:var(--success-700)}
.pill-warning{background:var(--warning-50);color:var(--warning-700)}
.pill-danger{background:var(--danger-50);color:var(--danger-700)}
.pill-info{background:var(--info-50);color:var(--info-700)}
.pill-neutral{background:var(--bg-active);color:var(--gray-700)}
.pill-brand{background:var(--brand-50);color:var(--brand-700)}
.pill-violet{background:var(--violet-50);color:var(--violet-600)}
.kbd{font-family:var(--font-mono);font-size:11px;background:var(--bg-surface);color:var(--gray-600);padding:1px 6px;
  border-radius:4px;border:1px solid var(--border-default);box-shadow:0 1px 0 var(--border-default)}

/* avatar */
.av{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  font-size:12px;font-weight:600;flex-shrink:0;overflow:hidden;background:var(--brand-50);color:var(--brand-700)}
.av img{width:100%;height:100%;object-fit:cover}
.av-sm{width:24px;height:24px;font-size:10px}.av-lg{width:44px;height:44px;font-size:15px}.av-xl{width:64px;height:64px;font-size:20px}
.av.tone-brand{background:var(--brand-500);color:#fff}.av.tone-success{background:var(--success-50);color:var(--success-700)}
.av.tone-warning{background:var(--warning-50);color:var(--warning-700)}.av.tone-info{background:var(--info-50);color:var(--info-700)}
.av.tone-danger{background:var(--danger-50);color:var(--danger-700)}.av.tone-violet{background:var(--violet-50);color:var(--violet-600)}
.av.tone-teal{background:var(--teal-50);color:var(--teal-600)}.av.tone-neutral{background:var(--bg-active);color:var(--gray-700)}
.av-stack{display:flex}.av-stack .av{box-shadow:0 0 0 2px var(--bg-surface);margin-left:-6px}.av-stack .av:first-child{margin-left:0}

/* icon chip */
.chip-icon{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--brand-50);color:var(--brand-500)}
.chip-icon.success{background:var(--success-50);color:var(--success-700)}
.chip-icon.warning{background:var(--warning-50);color:var(--warning-700)}
.chip-icon.danger{background:var(--danger-50);color:var(--danger-700)}
.chip-icon.info{background:var(--info-50);color:var(--info-700)}
.chip-icon.neutral{background:var(--bg-active);color:var(--gray-700)}
.chip-icon.sm{width:28px;height:28px;border-radius:8px}

/* progress */
.progress{height:6px;background:var(--bg-active);border-radius:99px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--brand-500);border-radius:99px;transition:width .6s var(--ease)}
.progress.success>span{background:var(--success-500)}.progress.warning>span{background:var(--warning-500)}
.progress.danger>span{background:var(--danger-500)}

/* alerts / banners */
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);border:1px solid;font-size:13px}
.alert .ico{margin-top:1px}
.alert-info{background:var(--info-50);border-color:var(--info-100);color:var(--info-700)}
.alert-success{background:var(--success-50);border-color:var(--success-100);color:var(--success-700)}
.alert-warning{background:var(--warning-50);border-color:var(--warning-100);color:var(--warning-700)}
.alert-danger{background:var(--danger-50);border-color:var(--danger-100);color:var(--danger-700)}
.alert-brand{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-700)}

/* empty state */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 24px;gap:10px}
.empty .chip-icon{width:48px;height:48px;border-radius:14px}
.empty h4{font-size:15px;font-weight:600}
.empty p{font-size:13px;color:var(--fg-subtle);max-width:360px}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-default);overflow-x:auto}
.tabs a,.tabs button{padding:10px 12px;font-size:13px;font-weight:500;color:var(--fg-subtle);border:0;background:none;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.tabs a:hover,.tabs button:hover{color:var(--fg-default)}
.tabs .on{color:var(--fg-default);border-bottom-color:var(--brand-500)}

/* dropdown / menu */
.menu{position:absolute;z-index:60;min-width:220px;background:var(--bg-raised);border:1px solid var(--border-default);
  border-radius:10px;box-shadow:var(--shadow-lg);padding:6px}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:7px;font-size:13px;
  color:var(--gray-800);border:0;background:none;cursor:pointer;text-decoration:none;text-align:left}
.menu a:hover,.menu button:hover{background:var(--bg-active)}
.menu .sep{height:1px;background:var(--border-subtle);margin:6px 0}
.menu .head{padding:8px 10px 6px}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,12,18,.48);backdrop-filter:blur(2px);z-index:80;
  display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}
.modal{width:100%;max-width:560px;background:var(--bg-raised);border:1px solid var(--border-default);border-radius:14px;
  box-shadow:var(--shadow-lg);overflow:hidden}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between}
.modal-body{padding:20px}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border-subtle);display:flex;gap:8px;justify-content:flex-end;background:var(--bg-subtle)}

/* toasts */
.toasts{position:fixed;right:20px;bottom:20px;z-index:100;display:flex;flex-direction:column;gap:10px;max-width:380px}
.toast{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--gray-900);color:var(--gray-0);
  border-radius:10px;box-shadow:var(--shadow-lg);font-size:13px;animation:toast-in var(--t-slow) var(--ease)}
.toast .ico{margin-top:1px}
.toast.success .ico{color:#4ADE9A}.toast.danger .ico{color:#FF8A80}.toast.warning .ico{color:#FDB022}.toast.info .ico{color:#84CAFF}
.toast button{margin-left:auto;background:none;border:0;color:inherit;opacity:.6;cursor:pointer;padding:0}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* steps / checklist */
.checklist{display:flex;flex-direction:column}
.check-item{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-top:1px solid var(--border-subtle)}
.check-item:first-child{border-top:0}
.check-dot{width:22px;height:22px;border-radius:50%;border:1.5px dashed var(--gray-300);display:inline-flex;
  align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#fff}
.check-item.done .check-dot{background:var(--success-500);border:0}
.check-item.done .title{color:var(--fg-subtle);text-decoration:line-through;text-decoration-color:var(--gray-300)}

/* stat list */
.stat-list{display:flex;flex-direction:column}
.stat-list .it{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--border-subtle);font-size:13px}
.stat-list .it:first-child{border-top:0}
.dl{display:grid;grid-template-columns:140px 1fr;gap:10px 16px;font-size:13px}
.dl dt{color:var(--fg-subtle)} .dl dd{margin:0;color:var(--fg-default);font-weight:500}

/* skeleton */
.skeleton{background:linear-gradient(90deg,var(--bg-active),var(--bg-hover),var(--bg-active));background-size:200% 100%;
  animation:sk 1.2s infinite;border-radius:6px}
@keyframes sk{to{background-position:-200% 0}}
.htmx-indicator{opacity:0;transition:opacity var(--t-base)}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}
.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* =====================================================================
 * APP SHELL
 * ===================================================================== */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--bg-sidebar);color:#BCC0C8;display:flex;flex-direction:column;
  position:fixed;inset:0 auto 0 0;z-index:40;border-right:1px solid rgba(255,255,255,.04)}
.sidebar-top{padding:14px 12px 8px}
.ws-switch{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;width:100%;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:#fff;text-align:left;font-family:var(--font-sans)}
.ws-switch:hover{background:rgba(255,255,255,.07)}
.ws-logo{width:32px;height:32px;border-radius:8px;background:var(--brand-500);display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:13px;flex-shrink:0;overflow:hidden}
.ws-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.ws-name{font-size:13px;font-weight:600;color:#fff;line-height:1.2}
.ws-plan{font-size:11px;color:#8C93A3}
.sidebar-scroll{flex:1;overflow-y:auto;padding:4px 12px 12px;scrollbar-width:thin;scrollbar-color:#262C38 transparent}
.nav-group{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#5E6574;padding:16px 10px 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:#AEB3BD;font-size:13px;font-weight:500;
  text-decoration:none!important;transition:background var(--t-fast),color var(--t-fast);position:relative;margin:1px 0}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:linear-gradient(90deg,color-mix(in srgb,var(--brand-400) 40%,transparent),color-mix(in srgb,var(--brand-400) 14%,transparent));color:#fff}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--brand-400)}
.nav-item .ico{opacity:.85}
.nav-item.active .ico{opacity:1}
.nav-item .badge{margin-left:auto;background:var(--brand-500);color:#fff;font-size:10px;font-weight:600;line-height:1;padding:3px 7px;border-radius:99px}
.nav-item .count{margin-left:auto;font-size:11px;color:#5E6574}
.sidebar-foot{padding:10px 12px 14px;border-top:1px solid rgba(255,255,255,.06)}
.user-card{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;width:100%;border:0;
  background:transparent;text-align:left;font-family:var(--font-sans)}
.user-card:hover{background:rgba(255,255,255,.06)}
.user-card .name{color:#fff;font-size:12.5px;font-weight:500;line-height:1.2}
.user-card .role{color:#6B7384;font-size:11px}

.main{flex:1;min-width:0;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100vh}
.topbar{height:var(--topbar-h);position:sticky;top:0;z-index:30;background:var(--bg-topbar);backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--border-default);display:flex;align-items:center;gap:14px;padding:0 24px}
.topbar .crumbs{font-size:11.5px;color:var(--fg-subtle);display:flex;align-items:center;gap:4px}
.topbar .crumbs a{color:var(--fg-subtle)}
.topbar h1{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.search-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px;min-width:280px;background:var(--bg-subtle);
  border:1px solid var(--border-default);border-radius:var(--r-md);color:var(--fg-subtle);font:400 12.5px var(--font-sans);cursor:pointer}
.search-btn:hover{border-color:var(--border-strong)}
.search-btn .kbd{margin-left:auto}
.canvas{flex:1;padding:24px;max-width:1600px;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head .sub{font-size:13px;color:var(--fg-subtle);margin-top:4px}
.menu-toggle{display:none}
.sidebar-scrim{display:none}
@media (max-width:1024px){
  .sidebar{transform:translateX(-100%);transition:transform var(--t-slow) var(--ease)}
  .shell.nav-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}
  .shell.nav-open .sidebar-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35}
  .main{margin-left:0}
  .menu-toggle{display:inline-flex}
  .search-btn{min-width:0;width:34px;padding:0;justify-content:center}
  .search-btn span,.search-btn .kbd{display:none}
  .canvas{padding:16px}
  .topbar{padding:0 16px}
}

/* command palette */
.cmdk{max-width:620px}
.cmdk-input{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-subtle)}
.cmdk-input input{flex:1;border:0;outline:0;background:transparent;font:400 15px var(--font-sans);color:var(--fg-default)}
.cmdk-list{max-height:360px;overflow:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;color:var(--gray-800);text-decoration:none!important}
.cmdk-item:hover,.cmdk-item.sel{background:var(--bg-active)}
.cmdk-item .hint{margin-left:auto;font-size:11px;color:var(--fg-subtle)}

/* =====================================================================
 * AUTH LAYOUT (tenant + platform sign-in)
 * ===================================================================== */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.auth-panel{display:flex;flex-direction:column;padding:32px 48px}
.auth-form{width:100%;max-width:400px;margin:auto}
.auth-art{position:relative;overflow:hidden;background:#05050F;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:48px}
.auth-art::before{content:"";position:absolute;inset:-20%;background:
  radial-gradient(40% 40% at 70% 20%,rgba(77,68,238,.55),transparent 70%),
  radial-gradient(35% 35% at 20% 80%,rgba(11,0,208,.6),transparent 70%),
  radial-gradient(30% 30% at 90% 90%,rgba(46,144,250,.25),transparent 70%)}
.auth-art::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom,transparent,#000 40%)}
.auth-art>*{position:relative;z-index:1}
@media (max-width:960px){.auth{grid-template-columns:1fr}.auth-art{display:none}.auth-panel{padding:24px}}
.divider-text{display:flex;align-items:center;gap:12px;color:var(--fg-faint);font-size:12px;margin:18px 0}
.divider-text::before,.divider-text::after{content:"";flex:1;height:1px;background:var(--border-default)}

/* print */
@media print{.sidebar,.topbar,.no-print,.toasts{display:none!important}.main{margin:0}.canvas{padding:0}body{background:#fff}}

/* dashboard welcome */
.welcome{background:#05050F;border:0;overflow:hidden;position:relative;color:#fff}
.welcome::before{content:"";position:absolute;inset:-30%;background:radial-gradient(35% 45% at 20% 30%,color-mix(in srgb,var(--brand-500) 90%,transparent),transparent 70%),
  radial-gradient(30% 40% at 80% 70%,color-mix(in srgb,var(--brand-400) 55%,transparent),transparent 70%)}
.welcome-inner{position:relative;display:flex;align-items:center;gap:32px;padding:28px 32px}
.welcome-title{color:#fff;font-size:26px;letter-spacing:-.02em;font-weight:650;margin-top:6px}
.welcome-sub{color:#C7CBD4;margin-top:6px;font-size:14px}
.ring{--p:0;width:132px;height:132px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.14) 0)}
.ring>div{width:108px;height:108px;border-radius:50%;background:#0A0A1F;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring b{font-size:24px;letter-spacing:-.02em}.ring span{font-size:11px;color:#AEB3BD}
@media (max-width:700px){.ring{display:none}.welcome-inner{padding:22px}}
.linkrow{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-subtle)}
.dash-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
@media (max-width:1100px){.dash-grid{grid-template-columns:1fr}}

/* choice lists (radio / checkbox groups) */
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices .choice{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border-default);
  border-radius:var(--r-md);background:var(--bg-surface);font-size:13px;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.choices .choice:hover{border-color:var(--border-strong)}
.choices .choice:has(input:checked){border-color:var(--brand-500);background:var(--brand-50);color:var(--brand-700)}
.choices input{accent-color:var(--brand-500);margin:0}
.choices.radio .choice{flex:1;min-width:180px}

/* filter bar */
.toolbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap}
.toolbar .sf-input,.toolbar .sf-select{height:34px;width:auto}
.toolbar .search{min-width:240px;flex:1;max-width:360px}
.status-tabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--border-subtle);overflow-x:auto}
.status-tabs a{padding:11px 10px;font-size:13px;color:var(--fg-subtle);font-weight:500;border-bottom:2px solid transparent;
  margin-bottom:-1px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap;text-decoration:none}
.status-tabs a:hover{color:var(--fg-default)}
.status-tabs a.on{color:var(--fg-default);border-bottom-color:var(--brand-500)}
.status-tabs .n{font-size:11px;background:var(--bg-active);color:var(--fg-muted);padding:0 6px;border-radius:99px;line-height:18px}

/* person cell */
.person{display:flex;align-items:center;gap:10px;min-width:0}
.person .nm{font-weight:500;color:var(--fg-default)}
.person .sub{font-size:12px;color:var(--fg-subtle)}

/* permission matrix */
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.matrix .grp td{background:var(--bg-subtle);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-subtle);height:32px}
.perm-cell{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;cursor:pointer;
  border:1px solid var(--border-default);background:var(--bg-surface);transition:all var(--t-fast)}
.perm-cell input{position:absolute;opacity:0;pointer-events:none}
.perm-cell .ico{opacity:0;color:#fff;transition:opacity var(--t-fast)}
.perm-cell:has(input:checked){background:var(--brand-500);border-color:var(--brand-500)}
.perm-cell:has(input:checked) .ico{opacity:1}
.perm-cell:has(input:disabled){cursor:not-allowed;opacity:.75}
.matrix .na{color:var(--gray-300)}

/* role cards */
.role-card{display:flex;flex-direction:column;gap:10px;padding:16px;text-decoration:none!important;color:inherit}
.role-card .top{display:flex;align-items:center;gap:10px}
.role-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.tone-brand{--tone:var(--brand-500)}.tone-violet{--tone:var(--violet-600)}.tone-info{--tone:var(--info-600)}
.tone-teal{--tone:var(--teal-600)}.tone-success{--tone:var(--success-600)}.tone-warning{--tone:var(--warning-600)}
.tone-danger{--tone:var(--danger-600)}.tone-neutral{--tone:var(--gray-500)}
.role-dot{background:var(--tone)}

/* timeline */
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:12px;padding:10px 16px;border-top:1px solid var(--border-subtle);font-size:13px}
.tl-item:first-child{border-top:0}
.tl-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;background:var(--gray-300)}
.tl-dot.success{background:var(--success-500)}.tl-dot.danger{background:var(--danger-500)}
.tl-dot.warning{background:var(--warning-500)}.tl-dot.info{background:var(--info-500)}
.chg{font-size:12px;color:var(--fg-subtle);margin-top:2px}
.chg code{background:var(--bg-active);padding:0 4px;border-radius:4px}

.side-tabs{display:flex;flex-direction:column;gap:2px}
.side-tabs a{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:8px;color:var(--gray-700);font-size:13px;font-weight:500;text-decoration:none}
.side-tabs a:hover{background:var(--bg-active)}
.side-tabs a.on{background:var(--bg-surface);box-shadow:var(--shadow-sm);border:1px solid var(--border-default);color:var(--fg-default)}
.settings-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:860px){.settings-layout{grid-template-columns:1fr}.side-tabs{flex-direction:row;overflow-x:auto}}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-family:var(--font-mono);font-size:14px}
.codes span{padding:8px 12px;background:var(--bg-subtle);border:1px dashed var(--border-strong);border-radius:8px;text-align:center}
.qr{width:180px;height:180px;padding:8px;background:#fff;border-radius:12px;border:1px solid var(--border-default)}
.qr svg{width:100%;height:100%}
.otp-input{font:600 26px var(--font-mono)!important;letter-spacing:.4em;text-align:center;height:56px!important}

/* branding */
.swatch{width:26px;height:26px;border-radius:7px;border:2px solid var(--bg-surface);box-shadow:0 0 0 1px var(--border-default);cursor:pointer}
.swatch.on{box-shadow:0 0 0 2px var(--fg-default)}
.brand-logo-box{width:84px;height:84px;border-radius:14px;border:1px dashed var(--border-strong);display:grid;place-items:center;background:var(--bg-subtle);flex-shrink:0;overflow:hidden}
.brand-logo-box img{max-width:76px;max-height:76px;object-fit:contain}
.brand-preview{display:grid;grid-template-columns:130px 1fr;height:220px;border-radius:12px;overflow:hidden;border:1px solid var(--border-default);box-shadow:var(--shadow-md);font-size:11px}
.bp-side{background:#000;padding:10px 8px}
.bp-side.mid{background:linear-gradient(180deg,color-mix(in srgb,var(--p) 55%,#000),#05050F)}
.bp-logo{width:22px;height:22px;border-radius:6px;color:#fff;display:inline-grid;place-items:center;font-size:9px;font-weight:700;overflow:hidden;flex-shrink:0}
.bp-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.bp-item{color:#9097A1;padding:5px 8px;border-radius:5px;margin-top:2px}
.bp-item.on{background:color-mix(in srgb,var(--p) 45%,transparent);color:#fff}
.bp-main{background:var(--bg-canvas);padding:12px;display:flex;flex-direction:column;gap:10px}
.bp-kpi{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;padding:8px}
.bp-kpi span{display:block;color:var(--fg-subtle);font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.bp-kpi b{font-size:16px}
.bp-bar{flex:1;display:flex;gap:8px;align-items:flex-end;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;padding:8px}
.bp-bar i{flex:1;border-radius:3px 3px 0 0;display:block}
.bp-btn{align-self:flex-start;color:#fff;padding:5px 10px;border-radius:6px;font-weight:600}
.sidebar.sb-midnight{background:linear-gradient(180deg,color-mix(in srgb,var(--brand-500) 42%,#000) 0%,#05050F 55%)}

/* message previews */
.phone-bubble{max-width:340px;padding:12px 14px;border-radius:16px 16px 16px 4px;font-size:13.5px;line-height:1.45;box-shadow:var(--shadow-sm)}
.phone-bubble.sms{background:var(--bg-active);color:var(--fg-default)}
.phone-bubble.whatsapp{background:#DCF8C6;color:#0F1218}
.t-faint{color:var(--fg-faint)}

/* website builder */
.builder{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1200px){.builder{grid-template-columns:1fr}.preview-pane{display:none}}
.sec-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer}
.sec-card.hidden-sec{opacity:.6}
.add-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.add-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border:1px dashed var(--border-strong);border-radius:10px;
  background:var(--bg-surface);color:var(--gray-700);font:500 12px var(--font-sans);cursor:pointer}
.add-tile:hover{border-color:var(--brand-500);color:var(--brand-500);background:var(--brand-50)}
.preview-pane{position:sticky;top:84px}
.preview-frame{border:1px solid var(--border-default);border-radius:12px;overflow:hidden;background:var(--bg-surface);height:calc(100vh - 150px);display:flex;justify-content:center;box-shadow:var(--shadow-md)}
.preview-frame iframe{width:100%;height:100%;border:0;background:#fff;transition:width .3s var(--ease)}
.site-thumb{overflow:hidden;height:300px;position:relative}
.site-thumb iframe{width:250%;height:250%;transform:scale(.4);transform-origin:0 0;border:0;pointer-events:none}
.thumb{display:flex;flex-direction:column;gap:4px;font-size:11px}
.thumb img{width:86px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--border-default)}

/* hierarchy */
.geo-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1000px){.geo-layout{grid-template-columns:1fr}}
.tree-card{position:sticky;top:84px;max-height:calc(100vh - 110px);display:flex;flex-direction:column}
.tree{list-style:none;margin:0;padding:8px;overflow:auto;flex:1}
.tree ul{list-style:none;margin:0;padding-left:14px;border-left:1px dashed var(--border-default);margin-left:11px}
.tree-row{display:flex;align-items:center;gap:4px;padding:3px 6px;border-radius:7px;font-size:13px}
.tree-row:hover{background:var(--bg-hover)}
.tree-row a{color:var(--gray-800);text-decoration:none;display:flex;align-items:center;gap:8px;padding:3px 0}
.tree-row.sel{background:var(--brand-50)}.tree-row.sel a{color:var(--brand-700);font-weight:600}
.tree-row.locked a{color:var(--fg-faint)}
.tree-tog{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;color:var(--fg-subtle);cursor:pointer;border-radius:5px;flex-shrink:0;padding:0}
.tree-tog .ico{transition:transform var(--t-base)}
.tree-tog.open .ico{transform:rotate(90deg)}
.lvl-dot{width:7px;height:7px;border-radius:2px;display:inline-block;flex-shrink:0;background:var(--gray-400)}
.lvl-dot.d0{background:var(--gray-700)}.lvl-dot.d1{background:var(--violet-600)}.lvl-dot.d2{background:var(--info-600)}
.lvl-dot.d3{background:var(--success-600)}.lvl-dot.d4{background:var(--warning-600)}.lvl-dot.d5{background:var(--danger-600)}
.crumbs-inline{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--fg-subtle);flex-wrap:wrap}
.crumbs-inline a{color:var(--fg-subtle)}
.mini-stat{padding:10px 12px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-subtle)}
.mini-stat>span{display:block;font-size:11px;color:var(--fg-subtle);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.mini-stat b{font-size:20px;letter-spacing:-.02em;display:block;margin-top:2px}
.day-chip{display:inline-block;font-size:11px;font-weight:600;padding:1px 6px;border-radius:5px;margin:1px;background:var(--bg-active);color:var(--fg-subtle)}
.day-chip.on{background:var(--brand-50);color:var(--brand-700)}

/* catalogue */
.thumb-sm{width:36px;height:36px;border-radius:8px;background:var(--bg-subtle);border:1px solid var(--border-subtle);display:grid;place-items:center;
  overflow:hidden;flex-shrink:0;color:var(--fg-faint);font-size:11px;font-weight:600}
.thumb-sm img{width:100%;height:100%;object-fit:cover}
.thumb-lg{width:84px;height:84px;border-radius:14px;background:var(--bg-subtle);border:1px solid var(--border-subtle);display:grid;place-items:center;overflow:hidden;color:var(--fg-faint);flex-shrink:0}
.thumb-lg img{width:100%;height:100%;object-fit:cover}
.prod-grid-app{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding:16px}
.pcard{border:1px solid var(--border-default);border-radius:12px;overflow:hidden;background:var(--bg-surface);color:inherit;text-decoration:none!important;
  transition:box-shadow var(--t-base),transform var(--t-base)}
.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.pimg{aspect-ratio:4/3;background:var(--bg-subtle);display:grid;place-items:center;color:var(--fg-faint);position:relative}
.pimg img{width:100%;height:100%;object-fit:cover}
.ptag{position:absolute;top:8px;left:8px}
.pbody{padding:10px 12px 12px}
.pbody b.truncate{display:block}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:32px;border:2px dashed var(--border-strong);border-radius:14px;
  cursor:pointer;color:var(--fg-subtle);text-align:center;background:var(--bg-subtle);transition:all var(--t-base)}
.dropzone:hover,.dropzone.has{border-color:var(--brand-500);color:var(--brand-600);background:var(--brand-50)}
.dropzone input{display:none}
.dropzone b{color:var(--fg-default)}

/* pricing */
.tier-card{border-left:4px solid var(--tc)}
.tier-badge{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--tc);flex-shrink:0}
.tier-stats{display:grid;grid-template-columns:repeat(4,auto);gap:18px}
.tier-stats span{display:block;font-size:11px;color:var(--fg-subtle);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.tier-stats b{font-size:15px}
@media (max-width:700px){.tier-stats{grid-template-columns:repeat(2,auto)}}
.sim-totals{min-width:300px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.sim-totals div{display:flex;justify-content:space-between;gap:24px}
.sim-totals span{color:var(--fg-muted)}
.sim-totals .tot{border-top:1px solid var(--border-default);padding-top:8px;margin-top:4px;font-size:16px}
.sim-totals .tot span{color:var(--fg-default);font-weight:600}

/* maps */
.map{height:380px;border-radius:0 0 var(--r-lg) var(--r-lg);z-index:0}
.map.tall{height:560px}.map.short{height:240px}
.map.rounded{border-radius:var(--r-lg);border:1px solid var(--border-default)}
.sf-pin span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--brand-500);color:#fff;
  font:700 11px var(--font-sans);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.leaflet-container{font-family:var(--font-sans)}
.bin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;padding:14px}
.bin button{width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:1px solid var(--border-default);background:var(--bg-surface);cursor:pointer;
  display:flex;flex-direction:column;gap:2px;font-family:var(--font-sans);color:var(--fg-default)}
.bin button:hover{border-color:var(--brand-500)}
.bin span{font-size:10.5px;color:var(--fg-subtle)}
.bin.off button{opacity:.45;border-style:dashed}
.bin.k-quarantine button,.bin.k-damage button{border-left:3px solid var(--danger-500)}
.bin.k-returns button{border-left:3px solid var(--warning-500)}
.bin.k-staging button,.bin.k-picking button{border-left:3px solid var(--info-500)}
/* partners: KYC documents, route stops */
.tabs .n{font-size:11px;background:var(--bg-active);color:var(--fg-muted);padding:0 6px;border-radius:99px;line-height:18px;margin-left:4px}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.doc{display:flex;flex-direction:column;gap:6px;min-width:0}
.doc-thumb{aspect-ratio:4/3;border-radius:10px;border:1px solid var(--border-subtle);background:var(--bg-subtle);display:grid;place-items:center;overflow:hidden;color:var(--fg-faint)}
.doc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}.doc-thumb:hover img{transform:scale(1.04)}
.stop-n{width:26px;height:26px;border-radius:50%;background:var(--brand-500);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0}
.stop-n.off{background:var(--bg-active);color:var(--fg-muted)}
.age-late{color:var(--danger-600);font-weight:600}
/* notifications */
.bell-btn{position:relative}
.bell-dot{position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--danger-500);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--bg-canvas,#fff)}
.bell-menu{right:0;top:44px;width:380px;max-width:calc(100vw - 24px);padding:0;overflow:hidden}
.bell-menu .bm-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border-subtle)}
.bell-menu .bm-list{max-height:420px;overflow:auto}
.bell-menu .bm-foot{padding:8px;border-top:1px solid var(--border-subtle);text-align:center}
.nt{display:flex;gap:12px;padding:12px 14px;align-items:flex-start;color:inherit;text-decoration:none;border-bottom:1px solid var(--border-subtle);position:relative}
.nt:hover{background:var(--bg-subtle)}
.nt.unread{background:color-mix(in srgb,var(--brand-500) 5%,transparent)}
.nt.unread:after{content:"";position:absolute;right:14px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--brand-500)}
.nt .nt-title{font-size:13px;font-weight:600;color:var(--fg-default)}
.nt .nt-body{font-size:12.5px;color:var(--fg-muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt .nt-time{font-size:11px;color:var(--fg-faint);margin-top:4px}
.bell-menu .nt{padding-right:30px}
.pref-table td,.pref-table th{text-align:center}.pref-table td:first-child,.pref-table th:first-child{text-align:left}
.bubble{background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:12px;padding:10px 12px;font-size:13px;white-space:pre-wrap}
.segmented label{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:8px;font:500 13px var(--font-sans);color:var(--fg-subtle);cursor:pointer}
.segmented label.on{background:var(--bg-surface);color:var(--fg-default);box-shadow:var(--shadow-sm)}
.section-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--fg-default);margin:4px 0 12px}
hr.sep{border:0;border-top:1px solid var(--border-subtle);margin:18px 0}
/* workflow */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.chain-step{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-subtle);font-size:12.5px}
.chain-n{width:20px;height:20px;border-radius:50%;background:var(--brand-500);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex-shrink:0}
.chain-arrow{color:var(--fg-faint)}
.pick-card{color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.pick-card:hover{border-color:var(--brand-300,var(--brand-500));box-shadow:var(--shadow-md)}
.stepper{display:flex;flex-direction:column;gap:0}
.stp{display:flex;gap:12px;position:relative;padding-bottom:18px}
.stp:not(:last-child):before{content:"";position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--border-subtle)}
.stp.done:not(:last-child):before{background:var(--success-500)}
.stp-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--bg-active);color:var(--fg-muted);border:2px solid var(--bg-surface);box-shadow:0 0 0 1px var(--border-subtle)}
.stp.done .stp-dot{background:var(--success-500);color:#fff}
.stp.now .stp-dot{background:var(--warning-500);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--warning-500) 25%,transparent)}
.stp.bad .stp-dot{background:var(--danger-500);color:#fff}
.stp.back .stp-dot{background:var(--info-500,#3b82f6);color:#fff}
.decide{border:1px solid color-mix(in srgb,var(--warning-500) 40%,var(--border-subtle));background:color-mix(in srgb,var(--warning-500) 6%,var(--bg-surface))}
/* schemes */
.kind-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.kind-card{display:flex;flex-direction:column;gap:6px;padding:14px;border:1.5px solid var(--border-subtle);border-radius:12px;cursor:pointer;background:var(--bg-surface);transition:border-color .15s,box-shadow .15s}
.kind-card:hover{border-color:var(--border-default)}
.kind-card.on{border-color:var(--brand-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-500) 15%,transparent)}
.kind-card b{font-size:13px}
.offer-hero{display:flex;gap:18px;align-items:center;padding:22px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand-500) 12%,var(--bg-surface)),var(--bg-surface));border:1px solid var(--border-subtle)}
.offer-hero .big{font-size:20px;font-weight:700;color:var(--fg-default)}
.applied{border:1px solid color-mix(in srgb,var(--success-500) 35%,var(--border-subtle));background:color-mix(in srgb,var(--success-500) 6%,var(--bg-surface));border-radius:10px;padding:10px 12px}
.totals{display:grid;grid-template-columns:1fr auto;gap:6px 16px;font-size:13px}.totals .grand{font-size:17px;font-weight:700;border-top:1px solid var(--border-subtle);padding-top:8px}
.reward-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.reward{border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;background:var(--bg-surface)}
.reward .img{aspect-ratio:16/10;background:var(--bg-subtle);display:grid;place-items:center;color:var(--fg-faint)}
.reward .img img{width:100%;height:100%;object-fit:cover}
.reward .body{padding:12px}
.pts{font-weight:700;color:var(--brand-600,var(--brand-500))}
.dash-grid.sim-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}@media (max-width:1100px){.dash-grid.sim-grid{grid-template-columns:1fr}}
/* orders */
.dash-grid.ob-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}@media (max-width:1100px){.dash-grid.ob-grid{grid-template-columns:1fr}}
.ob-side{position:sticky;top:76px}
.qt td{padding-left:0;padding-right:0}.qt tr.free-row{background:color-mix(in srgb,var(--success-500) 6%,transparent)}
.credit-box{border:1px solid var(--border-subtle);border-radius:10px;padding:10px 12px;background:var(--bg-subtle)}
.credit-box.over{border-color:color-mix(in srgb,var(--danger-500) 45%,var(--border-subtle));background:color-mix(in srgb,var(--danger-500) 5%,var(--bg-surface))}
.o-steps{display:flex;gap:0;align-items:center;overflow-x:auto;padding:4px 0}
.o-step{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg-muted);white-space:nowrap}
.o-step .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--bg-active);color:var(--fg-muted);font-size:11px;font-weight:700}
.o-step.done .dot{background:var(--success-500);color:#fff}.o-step.done{color:var(--fg-default)}
.o-step.now .dot{background:var(--brand-500);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-500) 20%,transparent)}.o-step.now{color:var(--fg-default);font-weight:600}
.o-step.bad .dot{background:var(--danger-500);color:#fff}
.o-bar{flex:1;min-width:24px;height:2px;background:var(--border-subtle);margin:0 8px}.o-bar.done{background:var(--success-500)}
/* inventory */
.grn-table .sf-input,.grn-table .sf-select{height:32px;font-size:12.5px;padding:0 8px}
.grn-table td{padding:6px 4px}
.var-pos{color:var(--success-600,#16a34a)}.var-neg{color:var(--danger-600,#dc2626)}

/* ---------- Part 19: support mode, console, developers ---------- */
.support-bar{display:flex;gap:10px;align-items:center;padding:10px 14px;margin:-4px 0 16px;border-radius:var(--r-md);
  color:#fff;font-size:13px;background:repeating-linear-gradient(135deg,#b54708 0 14px,#c4560f 14px 28px);
  box-shadow:0 6px 18px -8px rgba(181,71,8,.6)}
.console-badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.12);color:#fff}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.flag-row{display:grid;grid-template-columns:1fr 110px 210px;gap:12px;align-items:center;padding:10px 16px;
  border-top:1px solid var(--border-subtle)}
.flag-row:first-child{border-top:0}
.tri{display:inline-flex;border:1px solid var(--border-default);border-radius:8px;overflow:hidden}
.tri label{padding:4px 10px;font-size:12px;cursor:pointer;color:var(--fg-muted);border-left:1px solid var(--border-default)}
.tri label:first-child{border-left:0}
.tri input{display:none}
.tri input:checked+span{font-weight:600;color:var(--fg-default)}
.tri label:has(input:checked){background:var(--bg-active)}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.secret-box{font-family:var(--font-mono,monospace);font-size:13px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--bg-subtle);border:1px dashed var(--border-strong);word-break:break-all}
.code-block{font-family:var(--font-mono,monospace);font-size:12px;line-height:1.55;padding:14px 16px;border-radius:var(--r-md);
  background:#0f172a;color:#e2e8f0;overflow-x:auto;white-space:pre}
.method{display:inline-block;min-width:52px;text-align:center;font:700 11px/1 var(--font-mono,monospace);padding:4px 6px;
  border-radius:6px}
.method.GET{background:var(--success-50);color:var(--success-700)}
.method.POST{background:var(--info-50);color:var(--info-700)}
@media (max-width:860px){.flag-row{grid-template-columns:1fr}}
.dash-grid>*{min-width:0}