/* Gallery identity (2026-07-21): FigiHome brand black & white. Cool white ground,
   hairline rules, square corners, Helvetica, one red "sold dot" accent (#c8381f).
   Money keeps semantic green/red. Previous cream+gold theme: git history. */
:root{ --bg:#eeeeea; --ink:#141516; --muted:#70726e; --line:#e3e3de;
  --red:#c8381f; --pos:#2f7d46; --hoverbg:#ececea; --rowline:#eeeeea;
  --sans:'Helvetica Neue',Helvetica,-apple-system,system-ui,sans-serif;
  /* Bold refresh (2026-08-06): elevation + radius scale + dark sidebar.
     Still monochrome gallery — one red accent, semantic money greens/reds. */
  --r-lg:14px; --r-md:10px; --r-sm:8px; --r-pill:999px;
  --card:#fff; --card-line:#e9e9e4; --on-ink:#fff;
  --elev-1:0 1px 2px rgba(20,21,22,.05), 0 2px 6px rgba(20,21,22,.05);
  --elev-2:0 2px 8px rgba(20,21,22,.05), 0 12px 28px rgba(20,21,22,.07);
  --elev-hi:0 6px 16px rgba(20,21,22,.08), 0 22px 48px rgba(20,21,22,.12);
  --ease:cubic-bezier(.22,1,.36,1);
  /* Dark charcoal sidebar */
  --side-bg:#17181a; --side-fg:#f4f4f2; --side-muted:#9a9ca1;
  --side-hover:#232427; --side-active:#2b2d31; --side-line:#2a2c2f; }
*{ box-sizing:border-box; }
[hidden]{ display:none !important; } /* class selectors with display:flex/grid must not defeat the hidden attribute */
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-variant-numeric:tabular-nums; /* digits align app-wide; no jiggle on updates */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }

/* Keyboard-focus ring (mouse clicks stay clean via :focus-visible) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.search:focus-visible, .notebox:focus-visible, #dispatch-input:focus-visible,
.cb-form input:focus-visible, .cb-form select:focus-visible{ outline-offset:0; border-color:var(--ink); }



/* ===== Shell (2026-10-12): a slim rail of SECTIONS + the open section's pages as
   tabs along the top. On a phone the rail is hidden (menu drawer below) and
   the tabs into a swipeable strip. Since 2026-11-07 the viewport is the phone's real width
   (width=device-width + <html data-viewport="device">, like the other Figi hubs), so every
   phone size below is a real size. Before that the page was pinned to width=700 and these
   rules were ~1.8x; the shared hub-core layer, sized for real width, came out at 6-7px. */
#shell{ display:flex; min-height:100vh; align-items:flex-start; }
#rail{ width:84px; flex:none; position:sticky; top:0; height:100vh; z-index:20; display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:18px 8px; background:var(--side-bg); color:var(--side-muted); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.rail-brand{ width:100%; display:flex; justify-content:center; }
/* A transparent black mark (assets/figihome-logo-mark.png): as it is on a light sidebar, white on a dark one. No blending, so no box. */
.rail-logo{ width:64px; }
html[data-theme="dark"] .rail-logo{ filter:invert(1); }
.rail-groups{ display:flex; flex-direction:column; gap:6px; width:100%; }
.rail-btn{ position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; width:100%; min-height:60px; padding:6px 2px 8px;
  border:0; background:none; color:var(--side-muted); cursor:pointer; font:600 10.5px/1.15 var(--sans); letter-spacing:.02em; }
.rail-ic{ position:relative; display:grid; place-items:center; width:44px; height:34px; border-radius:11px; transition:background .18s var(--ease), color .18s var(--ease); }
.rail-btn .ni{ width:20px; height:20px; transition:transform .18s var(--ease); }
.rail-btn:hover{ color:var(--side-fg); }
.rail-btn:hover .rail-ic{ background:var(--side-hover); }
.rail-btn:hover .ni{ transform:scale(1.06); }
.rail-btn.on{ color:#fff; }
.rail-btn.on .rail-ic{ background:var(--side-active); }
/* ONE red line that slides to the open section (app.js moveRailIndicator), never a per-button line
   that would just appear (Yassin, 2026-10-12). */
.rail-groups{ position:relative; }
#rail-ind{ position:absolute; left:-8px; top:0; width:3px; height:26px; border-radius:0 3px 3px 0; background:var(--red); box-shadow:0 0 10px rgba(200,56,31,.55);
  opacity:0; pointer-events:none; }
#rail-ind.ready{ opacity:1; transition:transform .38s cubic-bezier(.22,1,.36,1); }
.rail-btn:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; border-radius:12px; }
.rail-dot{ position:absolute; top:4px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 2px var(--side-bg); }
body.one-group #rail{ display:none; }

#main-col{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:100vh; }
#topbar{ position:sticky; top:0; z-index:15; background:var(--bg); border-bottom:1px solid var(--line); padding:0 34px; }
#topbar > *{ max-width:1412px; margin-inline:auto; }
.topbar-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; }
.group-title{ font:700 11px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.topbar-me{ display:flex; align-items:center; gap:10px; }
.me-label{ font-size:12px; color:var(--muted); text-transform:capitalize; }
.switch-acct{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid var(--line); border-radius:var(--r-pill);
  font:500 12px var(--sans); color:var(--muted); text-decoration:none; transition:color .15s ease, border-color .15s ease, background .15s ease; }
.switch-acct .ni{ width:14px; height:14px; }
.switch-acct:hover{ color:var(--ink); border-color:var(--ink); background:var(--card); }
#subnav{ position:relative; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
#subnav::-webkit-scrollbar, #rail::-webkit-scrollbar{ display:none; }
#subnav .nav-item{ flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 12px 12px; border:0; background:none;
  font:500 13.5px var(--sans); color:var(--muted); cursor:pointer; white-space:nowrap; transition:color .15s ease; }
#subnav .nav-item:hover{ color:var(--ink); }
#subnav .nav-item.on{ color:var(--ink); font-weight:700; }
#subnav .nav-item:focus-visible{ outline:2px solid var(--red); outline-offset:-4px; border-radius:8px; }
#sub-ind{ position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--red); border-radius:2px 2px 0 0;
  transition:transform .3s var(--ease), width .3s var(--ease); }
#content{ width:100%; min-width:0; max-width:1480px; margin:0 auto; padding:28px 32px; }

/* Phone menu: the rail is hidden and a hamburger opens a drawer listing every section
   and page by name in big rows (Yassin, 2026-10-12: no bottom bar, same as 2026-09-24). */
.menu-btn, #phone-menu, #menu-scrim{ display:none; }
@media (max-width:760px){
  #shell{ display:block; }
  #rail{ display:none; }
  .menu-btn{ display:flex; flex:none; width:44px; height:44px; margin-left:-6px; align-items:center; justify-content:center;
    border:0; border-radius:10px; background:transparent; color:var(--ink); cursor:pointer; padding:0; }
  .menu-btn:active{ background:var(--hoverbg); }
  .menu-btn svg{ width:24px; height:24px; }
  #menu-scrim{ display:block; position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .22s var(--ease); }
  body.menu-open #menu-scrim{ opacity:1; pointer-events:auto; }
  body.menu-open{ overflow:hidden; }
  #phone-menu{ display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:41; width:min(320px, 84vw); height:100%; height:100dvh;
    padding:8px 10px 20px; background:var(--side-bg); color:var(--side-fg); overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(-100%); visibility:hidden; transition:transform .22s var(--ease), visibility 0s linear .22s; }
  body.menu-open #phone-menu{ transform:none; visibility:visible; transition:transform .22s var(--ease); box-shadow:8px 0 32px rgba(0,0,0,.35); }
  .menu-close{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0 0 4px auto; flex:none;
    border:0; border-radius:10px; background:transparent; color:var(--side-muted); cursor:pointer; }
  .menu-close svg{ width:22px; height:22px; }
  .pm-group{ margin:4px 0 8px; }
  .pm-head{ display:flex; align-items:center; gap:12px; padding:10px 12px 4px; font:600 11.5px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--side-muted); }
  .pm-head .ni{ width:18px; height:18px; }
  .pm-item{ position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:12px 12px 12px 42px; border:0; border-radius:10px;
    background:none; color:var(--side-fg); font:500 16px var(--sans); text-align:left; cursor:pointer; }
  .pm-item.pm-top{ padding-left:12px; font-weight:600; margin:2px 0; }
  .pm-item .ni{ width:20px; height:20px; }
  .pm-item:active, .pm-item:hover{ background:var(--side-hover); }
  .pm-item.on{ background:var(--side-active); font-weight:700; }
  .pm-item.on::before{ content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--red); }
  .pm-dot{ width:9px; height:9px; border-radius:50%; background:var(--red); margin-left:auto; }
  #topbar{ padding:0 14px; }
  .topbar-row{ min-height:52px; gap:6px; }
  .group-title{ flex:1; font-size:17px; letter-spacing:0; text-transform:none; color:var(--ink); }
  .me-label, .switch-acct span{ display:none; }
  .switch-acct{ width:40px; height:40px; padding:0; justify-content:center; }
  .switch-acct .ni{ width:18px; height:18px; }
  #subnav{ scroll-snap-type:x proximity; margin:0 -14px; padding:0 6px; }
  #subnav .nav-item{ scroll-snap-align:start; min-height:44px; padding:8px 12px 12px; font-size:14px; }
  .nav-badge{ min-width:18px; height:18px; font-size:11px; border-radius:9px; }
  #content{ padding:18px 14px 32px; }
}
@media (prefers-reduced-motion:reduce){ #rail-ind.ready, #sub-ind, .rail-ic, .rail-btn .ni, #phone-menu, #menu-scrim{ transition:none !important; } }

/* View header (per-tab title + freshness/refresh) */
.view-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.view-title{ font-family:var(--sans); font-size:22px; font-weight:700; letter-spacing:-.02em; text-transform:uppercase; margin:0; }
.view-actions{ display:flex; align-items:center; gap:10px; }
.freshness{ font-family:var(--sans); font-size:11px; padding:5px 11px; border:1px solid var(--line); background:var(--card); }
.freshness.green{ color:var(--pos); border-color:currentColor; }
.freshness.amber{ color:var(--tf-8a6d1f,#8a6d1f); border-color:currentColor; }
.freshness.red{ color:var(--red); border-color:currentColor; }
.refresh-btn{ font-family:var(--sans); font-size:11px; padding:6px 12px;
  border:1px solid var(--ink); background:var(--ink); color:var(--on-ink); cursor:pointer; }
.refresh-btn:disabled{ opacity:.55; cursor:default; }

/* Stats: period tabs */
#tabs{ display:flex; gap:6px; margin-bottom:22px; font-family:var(--sans); flex-wrap:wrap; }
#cr-period-tabs{ display:flex; gap:6px; margin-bottom:18px; font-family:var(--sans); flex-wrap:wrap; }
.tab{ font-size:12px; padding:7px 16px; background:var(--card); border:1px solid var(--line); color:var(--muted); cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease; }
.tab:hover:not(.on){ border-color:var(--ink); color:var(--ink); }
.tab.on{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); font-weight:600; letter-spacing:.5px; }

/* Shared interaction feedback for chip/segment/pagination controls */
.chip, .seg-btn, .pg-arrow, .pg-num, .refresh-btn, .export{ transition:background .15s ease, color .15s ease, border-color .15s ease; }
.chip:hover:not(.on){ border-color:var(--ink); color:var(--ink); }
.seg-btn:hover:not(.on){ color:var(--ink); }
.pg-num:hover:not(.on), .pg-arrow:hover:not(:disabled){ border-color:var(--ink); color:var(--ink); }
.refresh-btn:hover:not(:disabled), .export:hover:not(:disabled){ background:var(--dk-btn-hover,#343536); border-color:var(--dk-btn-hover,#343536); }
.wa{ transition:background .15s ease, border-color .15s ease; }

.cols{ display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:18px; margin-bottom:18px; }
@media(max-width:760px){ .cols{ grid-template-columns:1fr; } }
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
@media(max-width:760px){ .cols2{ grid-template-columns:1fr; } }

.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.panel-head .lead-title{ margin:0; }
.seg{ display:inline-flex; background:var(--card); border:1px solid var(--line); padding:2px; }
.seg-btn{ font-family:var(--sans); font-size:10px; letter-spacing:.4px; text-transform:uppercase;
  padding:4px 9px; border:none; background:none; color:var(--muted); cursor:pointer; }
.seg-btn.on{ background:var(--ink); color:var(--on-ink); font-weight:600; }

/* Cards: white with hairline borders, square corners, no soft shadows */
.panel{ background:var(--card); border:1px solid var(--line); border-radius:2px; padding:16px 16px 8px; }
.lead-title{ font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin:0 0 14px; }

.row{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--rowline); }
.row:last-child{ border-bottom:none; }
.rk{ width:16px; font-size:15px; font-weight:700; }
.rk.gold{ color:var(--red); }
.thumb{ width:38px; height:38px; border-radius:2px; flex:none; object-fit:cover; border:1px solid var(--line); background:var(--dk-surface,#ececea); }
/* Pop-out image preview on the Top Products leaderboard thumbnails (same as Shopping). */
#panel-product .thumb{ transform-origin:center left; cursor:zoom-in;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s var(--ease); }
.nm{ flex:1; }
.nm-name{ font-size:14px; line-height:1.1; }
.bar{ height:4px; background:var(--dk-surface,#e7e7e3); margin-top:5px; overflow:hidden; width:90%; }
.bar > i{ display:block; height:100%; width:0; background:var(--ink); }
.vals{ text-align:right; font-family:var(--sans); }
.egp{ font-size:13px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.egp small{ font-weight:400; color:var(--muted); font-size:10px; }
.pct{ font-size:11px; color:var(--pos); margin-top:2px; white-space:nowrap; }
.soon-box,.empty{ text-align:center; padding:26px 8px; color:#9a9c98; font-family:var(--sans); font-size:12px; }

/* Meta Ads drill-down: Campaign > Ad Set > Ad */
.ad-node{ border:1px solid var(--line); border-radius:2px; margin-bottom:8px; background:var(--card); overflow:hidden; }
.ad-node-head{ display:flex; align-items:center; gap:10px; padding:11px 13px; cursor:pointer; }
.ad-leaf .ad-node-head{ cursor:default; }
.ad-node-tog{ font-size:10px; color:var(--muted); transition:transform .15s ease; flex:none; width:10px; }
.ad-node.open > .ad-node-head .ad-node-tog{ transform:rotate(90deg); }
.ad-node-name{ flex:1; font-family:var(--sans); font-size:14px; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-node-stats{ font-family:var(--sans); font-size:12px; color:var(--muted); white-space:nowrap; flex:none; font-variant-numeric:tabular-nums; }
.ad-node-stats b{ color:var(--ink); }
.ad-node-head:hover{ background:var(--dk-surface,#f7f7f4); }
.ad-node-kids{ padding:4px 8px 8px 22px; background:var(--dk-surface,#f7f7f4); }
.ad-camp{ border-color:var(--dk-line,var(--tl-cfcfc9,#cfcfc9)); }
.ad-camp > .ad-node-head .ad-node-name{ font-weight:700; }
.ad-set{ border-color:var(--line); }
.ad-set > .ad-node-head .ad-node-name{ font-weight:600; font-size:13px; }
.ad-leaf{ border-style:dashed; }
.ad-leaf .ad-node-name{ font-size:13px; }
.ad-leaf-detail{ font-family:var(--sans); font-size:11px; color:var(--muted); padding:0 13px 10px; }

/* Meta Ads detail grid — every metric */
.ad-details{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:14px; }
.ad-stat{ background:var(--card); border:1px solid var(--line); border-radius:2px; padding:11px 13px; }
.ad-stat-v{ font-family:var(--sans); font-size:18px; font-weight:700; color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums; }
.ad-stat-l{ font-family:var(--sans); font-size:11px; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.4px; }
.ad-stat-h{ font-family:var(--sans); font-size:10px; color:#9a9c98; margin-top:3px; }

/* Slim "coming soon" strip */
.ad-strip{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:18px; padding:12px 16px;
  background:var(--card); border:1px dashed var(--dk-line,var(--tl-cfcfc9,#cfcfc9)); border-radius:2px; }
.ad-strip-t{ font-family:var(--sans); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
.ad-strip-s{ font-family:var(--sans); font-size:12px; color:#9a9c98; }

.kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:18px; }
@media(max-width:760px){ .kpis{ grid-template-columns:repeat(2,1fr); } }
.kpi{ background:var(--card); border:1px solid var(--line); border-radius:2px; padding:14px 16px; }
.kpi-label{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
.kpi-value{ font-size:24px; font-weight:700; margin-top:6px; line-height:1; font-variant-numeric:tabular-nums; }
.kpi-value small{ font-size:11px; font-weight:400; color:var(--muted); }
.kpi-sub{ font-family:var(--sans); font-size:11px; color:var(--muted); margin-top:6px; }
.kpi-delta{ display:inline-block; margin-top:8px; font-family:var(--sans); font-size:11px; padding:2px 8px; border:1px solid currentColor; }
.kpi-delta.up{ color:var(--pos); }
.kpi-delta.down{ color:var(--red); }
.kpi-delta.flat{ color:var(--muted); }
.kpi-delta.none{ display:none; }

/* Revenue is the north-star metric: white card, 2px ink frame, red "sold" dot */
.kpi.hero{ background:var(--card); border:2px solid var(--ink); }
.kpi.hero .kpi-label::before{ content:'●'; color:var(--red); margin-right:6px; font-size:8px; vertical-align:2px; }
.kpi.hero .kpi-value{ font-size:27px; }

/* Daily trend: bar chart */
.trend-panel{ margin-bottom:18px; }
.t-plot{ position:relative; touch-action:pan-y; }
.tb-bars{ position:relative; display:flex; align-items:flex-end; gap:2px; height:210px; padding-top:14px; }
.tb-bar{ flex:1; min-width:2px; background:var(--ink); transition:height .7s cubic-bezier(.22,1,.36,1), background .1s ease; }
.tb-bar.last{ background:var(--red); }
.tb-bar.hot{ background:var(--red); }
.t-grid-h{ position:absolute; left:0; right:0; height:1px; background:var(--dk-surface,#e7e7e3); pointer-events:none; }
.t-ylabel{ position:absolute; right:2px; transform:translateY(-50%); font-family:var(--sans); font-size:10px;
  color:#9a9c98; background:color-mix(in srgb, var(--card) 80%, transparent); padding:0 3px; pointer-events:none; z-index:1; }
.t-tip{ position:absolute; top:-2px; transform:translate(-50%,-100%); background:var(--ink); color:var(--on-ink);
  font-family:var(--sans); padding:6px 10px; white-space:nowrap; pointer-events:none;
  display:flex; flex-direction:column; gap:1px; z-index:2; }
.t-tip-d{ font-size:10px; color:var(--on-ink); opacity:.65; letter-spacing:.3px; }
.t-tip-v{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; } .t-tip-v small{ font-weight:400; opacity:.6; font-size:10px; }
.t-axis{ display:flex; justify-content:space-between; margin-top:6px; font-family:var(--sans); font-size:10px; color:var(--muted); }
.t-axis span{ flex:1; }
.t-cap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-family:var(--sans); font-size:10px; color:var(--muted); margin-top:8px; letter-spacing:.3px; }
/* .t-key i, .t-spend and .t-tip-a: the shared Meta ads line, hub-ui.css "THE META ADS LINE" */

.dead-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.dead-pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; }
.dead-page-info{ font-family:var(--sans); font-size:12px; color:var(--muted); }
.dead{ display:flex; align-items:center; gap:9px; padding:7px; border:1px solid var(--line); border-radius:2px; }
.dead .thumb{ width:30px; height:30px; }
.dead-link{ text-decoration:none; color:inherit; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.dead-link:hover{ border-color:var(--ink); }
.dead-name{ font-size:12px; line-height:1.2; }
.dead-sub{ display:block; font-family:var(--sans); font-size:10px; color:var(--muted); margin-top:2px; }
#panel-restock{ display:grid; grid-template-columns:1fr; gap:8px; }
#panel-restock .dead.urgent{ border-color:var(--red); }
#panel-restock .dead.urgent .dead-sub{ color:var(--red); }
/* Same pop-out image preview as the Shopping tab, for the Restock / Not-selling /
   Newly-out-of-stock product cards. */
#stats-view .dead .thumb{ transform-origin:center left; cursor:zoom-in;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s var(--ease); }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.kpi, .panel, .trend-panel{ animation:fadeUp .5s cubic-bezier(.22,1,.36,1) backwards; }
.kpis .kpi:nth-child(2){ animation-delay:.05s; }
.kpis .kpi:nth-child(3){ animation-delay:.10s; }
.kpis .kpi:nth-child(4){ animation-delay:.15s; }
.kpis .kpi:nth-child(5){ animation-delay:.20s; }
.kpi-delta .g{ display:inline-block; }
@media (prefers-reduced-motion: reduce){
  .kpi,.panel,.trend-panel{ animation:none !important; }
  .bar > i, .tb-bar{ transition:none !important; }
}

/* Customer-health strip (Customers tab) */
.cust-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
@media(max-width:760px){ .cust-metrics{ grid-template-columns:repeat(2,1fr); } }
/* Finance carries six KPIs (net, in, costs, to-pay, other expenses, stock on
   hand) rather than the four every other tab shows, so it flows instead of
   forcing a fixed count -- a hardcoded repeat(4) drops the last two onto a row
   of their own and reads like an afterthought. Scoped to :is(#finance-view,#invoices-view,#salaries-view,#paymob-view) so the
   Customers and Couriers strips keep their exact current layout. */
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .cust-metrics{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
@media(max-width:760px){ :is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .cust-metrics{ grid-template-columns:repeat(2,1fr); } }

/* ---- position block: what we have, what we are owed ------------------- */
.pos-block{ margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.pos-cols{ margin-top:14px; }
/* A section title, so the panel reads as three distinct answers rather than one
   long undifferentiated column. */
.cf-sec-title{ font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:4px 0 10px; }
.lnk{ background:none; border:0; padding:0; cursor:pointer; color:var(--red);
  font:inherit; font-size:11px; text-decoration:underline; text-underline-offset:2px; }
.lock-btn{ background:none; border:1px solid var(--line); border-radius:2px; cursor:pointer;
  color:var(--muted); font-size:11px; padding:4px 9px; margin-inline-start:8px; }
.lock-btn:hover{ color:var(--ink); border-color:var(--ink); }
.lock-btn.on{ border-color:var(--red); color:var(--red); }
.lock-note{ font-size:11px; color:var(--muted); margin-inline-start:8px; }
.inv-imgs{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.inv-img{ display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--muted);
  border:1px solid var(--line); border-radius:2px; padding:2px 5px; }
.inv-img-del{ background:none; border:0; cursor:pointer; color:var(--muted);
  font-size:14px; line-height:1; padding:0 0 0 3px; }
.inv-img-del:hover{ color:var(--red); }
@media(max-width:760px){ .pos-cols{ grid-template-columns:1fr; } }

/* ---- salary bonuses & deductions -------------------------------------- */
.exp-row-adj{ flex-wrap:wrap; }
.adj-open{ background:none; border:1px solid var(--line); border-radius:2px; cursor:pointer;
  color:var(--muted); font-size:13px; line-height:1; padding:3px 6px; }
.adj-open:hover{ color:var(--ink); border-color:var(--ink); }
.adj-panel{ grid-column:1/-1; width:100%; margin:8px 0 4px; padding:10px;
  border:1px solid var(--line); border-radius:2px; }
.adj-head{ font-size:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
  margin-bottom:6px; }
.adj-list{ margin-bottom:8px; }
.adj-row{ display:grid; grid-template-columns:90px 1fr 30px; gap:8px; align-items:center;
  font-size:12px; padding:2px 0; }
.adj-amt{ font-variant-numeric:tabular-nums; }
.adj-amt.pos{ color:var(--pos); }
.adj-amt.neg{ color:var(--red); }
.adj-note{ color:var(--muted); }
.adj-del{ background:none; border:0; cursor:pointer; color:var(--muted); padding:0; line-height:0; }
.adj-del:hover{ color:var(--red); }
@media(max-width:760px){ .adj-form .exp-in{ font-size:16px; } }

/* ---- cashflow tabs + supplier history --------------------------------- */
.cf-tabs{ margin-bottom:14px; }
.hist-pick{ margin-bottom:10px; }
.hist-pick select{ width:100%; max-width:460px; }
.hist-sum{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
  padding:8px 0 10px; border-bottom:1px solid var(--line); margin-bottom:6px; font-size:13px; }
/* A history row carries its line items underneath, so it cannot use the single
   grid row the other ledgers do. */
.hist-row{ flex-wrap:wrap; }
.hist-lines{ grid-column:1/-1; width:100%; margin:4px 0 2px; padding-inline-start:8px;
  border-inline-start:2px solid var(--line); }
.hist-line{ display:grid; grid-template-columns:minmax(60px,.7fr) minmax(90px,1.6fr) 46px 70px 80px;
  gap:6px; font-size:11px; color:var(--muted); padding:1px 0; }
.hist-line span:last-child{ text-align:end; font-variant-numeric:tabular-nums; }
.inv-hint{ grid-column:1/-1; font-size:11px; color:var(--muted); }
.exp-kind-hint{ font-size:11px; color:var(--muted); align-self:center; }
@media(max-width:760px){
  .hist-line{ grid-template-columns:1fr 1fr 40px 60px; }
  .hist-line span:nth-child(5){ display:none; }
}

/* ---- invoice ledger ---------------------------------------------------- */
.inv-form .inv-kinds{ grid-column:1/-1; margin-bottom:2px; }
.inv-kind{ display:inline-block; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:2px; padding:1px 5px; margin-inline-end:6px; color:var(--muted); }
.inv-kind-packaging{ border-color:var(--tl-b9b4a4,#b9b4a4); }
.inv-kind-other{ border-color:var(--red); color:var(--red); }
.inv-lines{ grid-column:1/-1; display:flex; flex-direction:column; gap:4px; margin:6px 0; }
.inv-line{ display:grid; grid-template-columns:minmax(70px,.8fr) minmax(110px,1.6fr) 66px 86px 92px 30px;
  gap:6px; align-items:center; }
.inv-line-head{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.inv-line-head span{ padding-inline:2px; }
.inv-total{ text-align:end; font-variant-numeric:tabular-nums; font-size:12px; }
.inv-del-line{ background:none; border:0; cursor:pointer; color:var(--muted); padding:0; line-height:0; }
.inv-del-line:hover{ color:var(--red); }
.inv-flag{ grid-column:1/-1; font-size:11px; color:var(--red); }
.inv-foot{ grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.inv-amt-label{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.inv-sum{ font-size:11px; color:var(--muted); }
.inv-sum-warn{ color:var(--red); }
.inv-confirm{ grid-column:1/-1; font-size:12px; border:1px solid var(--red); border-radius:2px;
  padding:6px 8px; color:var(--red); }
.inv-confirm-err{ margin-bottom:10px; }
.inv-scan-btn{ cursor:pointer; }
.inv-scan-btn.is-busy{ opacity:.6; pointer-events:none; }
/* The scan flags only the fields the model was unsure of. Flagging everything
   would train the reader to click straight past the flags. */
.inv-line input.is-low{ border-color:var(--red); }
@media(max-width:760px){
  .inv-line{ grid-template-columns:1fr 1fr 60px 80px; }
  .inv-line-head{ display:none; }
  .inv-total{ grid-column:3/5; }
  /* 16px stops iOS zooming the whole page on focus. */
  .inv-line input{ font-size:16px; }
}
.cm-card{ background:var(--card); border:1px solid var(--line); border-radius:2px; padding:14px 16px; }
.cm-label{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
.cm-value{ font-size:24px; font-weight:700; margin-top:6px; line-height:1; font-variant-numeric:tabular-nums; }
.cm-value small{ font-size:13px; font-weight:400; color:var(--muted); }
.cm-sub{ font-family:var(--sans); font-size:11px; color:var(--muted); margin-top:7px; }
.cm-card.cm-hero{ background:var(--card); border:2px solid var(--ink); }
.cm-hero .cm-label::before{ content:'●'; color:var(--red); margin-right:6px; font-size:8px; vertical-align:2px; }
.cm-hero .cm-value{ font-size:28px; }

/* Search / filters (Customers + Orders) */
.searchrow{ display:flex; gap:8px; margin-bottom:14px; }
.search-mode{ flex:none; font-family:var(--sans); font-size:13px; padding:0 12px; border:1px solid var(--line);
  border-radius:2px; background:var(--card); color:var(--ink); cursor:pointer; }
.search{ flex:1; min-width:0; font-family:var(--sans); font-size:15px; padding:13px 16px; border:1px solid var(--line);
  border-radius:2px; background:var(--card); }
#filters, #o-filters{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.chip{ font-family:var(--sans); font-size:12px; padding:7px 14px; background:var(--card);
  border:1px solid var(--line); color:var(--muted); cursor:pointer; }
.chip.on{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); font-weight:600; }
.chip.guide{ margin-left:auto; }
.guide-box{ font-family:var(--sans); font-size:12px; line-height:1.9; color:var(--dk-text2,#4c4d4a); background:var(--card);
  border:1px solid var(--line); border-radius:2px; padding:14px 16px; margin-bottom:14px; }

.bulkbar{ display:flex; align-items:center; justify-content:space-between; font-family:var(--sans); font-size:12px; color:var(--muted); margin-bottom:10px; }
/* The two exports travel together on the right; `Select all` keeps the left. */
.bulk-actions{ display:flex; align-items:center; gap:8px; margin-inline-start:auto; }
.export{ font-family:var(--sans); font-size:12px; padding:8px 16px; border:1px solid var(--ink);
  background:var(--ink); color:var(--on-ink); cursor:pointer; }
.export:disabled{ opacity:.4; cursor:default; }

/* Data tables (Customers + Orders) */
/* Keep wide tables scrolling inside their own box so the page body never scrolls sideways on phones. */
.table-wrap{ overflow-x:auto; }
.table-wrap .dtable{ min-width:640px; }
.dtable{ width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); }
.dtable thead th{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1px;
  color:var(--muted); text-align:left; padding:12px 14px; border-bottom:1px solid var(--ink); }
.dtable tbody tr.drow{ cursor:pointer; }
.dtable tbody tr.drow:hover{ background:var(--dk-surface,#f7f7f4); }
.dtable td{ padding:12px 14px; border-bottom:1px solid var(--rowline); font-size:13px; vertical-align:middle; font-family:var(--sans); }
.dtable tr:last-child td{ border-bottom:none; }
.col-check{ width:36px; }
.col-action{ width:44px; text-align:right; }
.col-main{ display:flex; align-items:center; gap:10px; }
.cname-n{ font-family:var(--sans); font-size:14px; } .cname-s{ font-size:11px; color:var(--muted); margin-top:2px; }
.badges{ display:flex; gap:5px; flex-wrap:wrap; }
.badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-size:10px; padding:3px 10px 3px 8px; border:1px solid var(--line); background:none; color:var(--muted); }
.badge .gi, .chip .gi, .tag .gi{ width:12px; height:12px; flex:none; }
#filters .chip .gi, .guide-box .gi{ width:15px; height:15px; stroke-width:2.2; vertical-align:-3px; }
.badge.risky{ border-color:currentColor; color:var(--red); } .badge.vip{ border-color:currentColor; color:var(--tf-8a6d1f,#8a6d1f); }
.badge.vvip{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.wa{ flex:none; display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  line-height:1; padding:7px 9px; border-radius:2px; border:1px solid var(--line); background:var(--card); color:var(--muted); }
.wa .gi{ width:16px; height:16px; }
.wa:hover{ background:var(--tb-eaf6ec,#eaf6ec); border-color:var(--tl-cfe6d4,#cfe6d4); color:var(--pos); }
.matched{ font-family:var(--sans); font-size:11px; padding:2px 8px; border:1px solid var(--ink); color:var(--ink); font-weight:600; white-space:nowrap; }

.drow-detail td{ background:var(--dk-surface,#f7f7f4); padding:16px 14px; }
.detail{ font-family:var(--sans); font-size:12px; display:grid; gap:10px; }
.detail .stat{ color:var(--dk-text2,#4c4d4a); } .detail .stat b{ color:var(--ink); }
.detail .stat .gi{ width:14px; height:14px; } .detail .st-pos{ color:var(--pos); } .detail .st-neg{ color:var(--red); }
.tagrow{ display:flex; gap:6px; flex-wrap:wrap; }
.tag{ font-size:11px; padding:5px 11px; border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; }
.tag.on{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.notebox{ width:100%; font-family:var(--sans); font-size:12px; padding:8px 10px; border:1px solid var(--line); border-radius:2px; resize:vertical; }
.savestate{ font-size:11px; color:var(--muted); }

/* Status chips: outline style, semantic text colors */
.stchip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-size:10px; padding:3px 10px 3px 8px;
  border:1px solid currentColor; background:none; font-weight:600; white-space:nowrap; }
.stchip::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-pending{ color:var(--tf-6f6a60,#6f6a60); }
.st-out{ color:var(--tf-1a56b8,#1a56b8); }
.st-delivered{ color:var(--tf-188038,#188038); }
.st-returned{ color:var(--tf-c05c0a,#c05c0a); }
.st-cancelled{ color:var(--red); }
.st-bosta{ color:var(--tf-7b1fa2,#7b1fa2); }
.st-noanswer{ color:var(--tf-c05c0a,#c05c0a); }
/* 3+ no-answer attempts on one order: the rule tagged the order and the customer. */
.stchip.na-strike{ color:var(--red); border-color:var(--red); }
.st-postponed{ color:var(--tf-7b1fa2,#7b1fa2); }

/* Feedback sentiment chips (Feedback tab + Orders tab) */
.stchip.fb-positive{ color:var(--tf-2f8a4e,#2f8a4e); }
.stchip.fb-neutral{ color:var(--tf-8a6d1f,#8a6d1f); }
.stchip.fb-negative{ color:var(--red); }
.fb-mini{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  font-size:11px; vertical-align:middle; margin-left:4px; border:1px solid var(--line); }
.fb-mini.fb-positive{ border-color:var(--tl-9ec7a8,#9ec7a8); } .fb-mini.fb-neutral{ border-color:var(--tl-d3bd7d,#d3bd7d); } .fb-mini.fb-negative{ border-color:#dba49a; }
.fb-mini.bosta-warn{ border-color:var(--tl-dbb28c,#dbb28c); }

/* Feedback tab: period tabs (the sentiment bar is in the Atelier layer at the end) */
#fb-period-tabs{ display:flex; gap:6px; margin-bottom:18px; font-family:var(--sans); flex-wrap:wrap; }

/* Feedback tab: comments */
#fb-comments{ display:grid; gap:10px; }
.fb-comment{ border:1px solid var(--line); border-radius:2px; padding:11px 13px; }
.fb-c-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px; }
.fb-c-ord{ font-family:var(--sans); font-size:12px; color:var(--dk-text2,#4c4d4a); }
.fb-c-date{ font-family:var(--sans); font-size:11px; color:var(--muted); margin-left:auto; }
.fb-c-text{ font-family:var(--sans); font-size:14px; color:var(--ink); line-height:1.45; }

.timeline{ display:grid; gap:8px; }
.tl-row{ display:flex; align-items:center; gap:10px; padding-left:10px; border-left:2px solid var(--line); }
.tl-meta{ font-size:11px; color:var(--muted); }

.manual-status{ display:flex; align-items:center; gap:8px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--rowline); }
.manual-status .status-select{ font-family:var(--sans); font-size:12px; padding:6px 10px; border:1px solid var(--line); border-radius:2px; background:var(--card); }
.manual-status .status-save{ font-family:var(--sans); font-size:12px; padding:6px 14px; border:1px solid var(--ink);
  background:var(--ink); color:var(--on-ink); cursor:pointer; }

/* Pagination */
.tfoot-bar{ display:flex; align-items:center; justify-content:space-between; margin-top:14px;
  font-family:var(--sans); font-size:12px; color:var(--muted); flex-wrap:wrap; gap:10px; }
.page-size select{ font-family:var(--sans); font-size:12px; border:1px solid var(--line); border-radius:2px; padding:4px 8px; margin:0 4px; }
.pagination{ display:flex; gap:4px; align-items:center; }
.pg-arrow,.pg-num{ font-family:var(--sans); font-size:12px; min-width:28px; height:28px; padding:0 6px;
  border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; }
.pg-num.on{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); font-weight:600; }
.pg-arrow:disabled{ opacity:.4; cursor:default; }
.pg-ellipsis{ padding:0 4px; color:var(--muted); }

/* Courier portal */
#courier-app{ max-width:700px; margin:0 auto; padding:24px 20px 60px; }
.figi-top{ display:flex; flex-direction:column; align-items:center; text-align:center; margin:8px 0 28px; }
.figi-logo{ height:76px; max-width:100%; mix-blend-mode:multiply; }
.figi-sub{ font-family:var(--sans); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1.6px; color:var(--ink); margin-top:10px; }
/* Wraps because the brand count grows (3 since Yeganen) and these sit on a
   driver's phone — a third tab must not push the row off a 360px screen. */
#brand-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 14px; }
#brand-tabs .btab{ font-family:var(--sans); font-size:13px; padding:8px 22px; background:var(--card);
  border:1px solid var(--line); color:var(--muted); cursor:pointer; border-radius:2px; }
#brand-tabs .btab.on{ background:var(--brand-accent,#141516); color:#fff; border-color:var(--brand-accent,#141516); font-weight:700; }
#courier-tabs{ display:flex; justify-content:center; gap:8px; margin-bottom:18px; }
#courier-tabs .tab{ font-family:var(--sans); font-size:13px; padding:9px 20px; background:var(--card);
  border:1px solid var(--line); color:var(--muted); cursor:pointer; }
#courier-tabs .tab.on{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); font-weight:600; }
#dispatch-input{ width:100%; font-family:var(--sans); font-size:16px; padding:14px; border:1px solid var(--line);
  border-radius:2px; resize:vertical; margin-bottom:10px; }
#courier-app .lead-title{ font-size:13px; letter-spacing:.4px; }

/* Running collection tally on the Status page — sticky so it stays visible while
   the driver scrolls their order list, and shows the total to hand over when done. */
.cr-totals{ position:sticky; top:0; z-index:5; display:flex; gap:10px; margin:0 0 16px;
  background:var(--ink); border-radius:2px; padding:12px 14px; }
.crt-item{ flex:1; display:flex; flex-direction:column; gap:3px; text-align:center; }
.crt-item + .crt-item{ border-right:1px solid rgba(255,255,255,.18); }
.crt-label{ font-family:var(--sans); font-size:12px; color:rgba(255,255,255,.72); }
.crt-val{ font-family:var(--sans); font-size:24px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.crt-val small{ font-size:12px; font-weight:400; color:rgba(255,255,255,.72); }

/* Customer-info blocks (bigger, block layout for on-the-road readability) */
.cb-count{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--pos); margin:6px 0 12px; }
.cblock{ background:var(--card); border:1px solid var(--line); border-radius:2px; padding:16px; margin-bottom:14px; }
.cb-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.cb-ord{ font-family:var(--sans); font-weight:700; font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums; }
.cb-name{ font-family:var(--sans); font-size:18px; color:var(--ink); }
.cb-info{ display:flex; flex-direction:column; gap:8px; }
.phone-copy{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-family:var(--sans);
  font-size:17px; font-weight:600; letter-spacing:.5px; padding:8px 14px; border:1px solid var(--line); border-radius:2px;
  background:var(--bg); color:var(--ink); cursor:pointer; }
.phone-copy:active{ background:var(--tb-e3e3de,#e3e3de); }
.phone-copy .pc-ico{ font-size:14px; opacity:.7; }
.cb-phone{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wa-btn{ display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:14px; font-weight:600;
  padding:8px 14px; border-radius:2px; background:#25d366; color:#fff; text-decoration:none; }
.wa-btn:active{ background:#1eb457; }
.cb-noloc{ font-family:var(--sans); font-size:13px; color:#9a9c98; }
.cb-addr{ font-family:var(--sans); font-size:14px; color:var(--dk-text2,#4c4d4a); line-height:1.5; }
.cb-loc{ align-self:flex-start; font-family:var(--sans); font-size:15px; font-weight:600; color:var(--red);
  text-decoration:none; padding:4px 0; }
.cb-form{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line); }
.cb-form label{ display:flex; flex-direction:column; gap:5px; font-family:var(--sans); font-size:12px; color:var(--muted); }
.cb-form-wide{ flex:1 1 100%; }

/* brand accent drives the courier sub-tabs, tally bar, and action accents —
   placed after the base rules above so it wins the cascade at equal specificity */
#courier-app .tab.on{ background:var(--brand-accent,#141516); border-color:var(--brand-accent,#141516); }
#courier-app .cr-totals{ background:var(--brand-accent,#141516); }
#courier-app .cb-loc{ color:var(--brand-accent,var(--red)); }
.cb-form select, .cb-form input{ font-family:var(--sans); font-size:15px; padding:10px 12px; border:1px solid var(--line);
  border-radius:2px; background:var(--card); color:var(--ink); min-width:110px; }
.cb-form .price-input{ min-width:90px; }
.cb-form-wide input{ width:100%; box-sizing:border-box; }
.cb-form .status-submit{ padding:11px 22px; font-size:15px; }
.cb-form .savestate{ font-family:var(--sans); font-size:13px; color:var(--pos); align-self:center; }
#copy-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--ink); color:var(--on-ink);
  font-family:var(--sans); font-size:14px; font-weight:600; padding:10px 20px; z-index:50; }

/* ============ Finance tab ============ */
.fin-picker{ display:flex; align-items:center; gap:6px; }
.fin-nav{ width:30px; height:30px; border:1px solid var(--line); background:var(--card);
  font-size:18px; line-height:1; color:var(--ink); cursor:pointer; font-family:var(--sans); }
.fin-nav:hover:not(:disabled){ border-color:var(--ink); }
.fin-nav:disabled{ opacity:.35; cursor:default; }
.fin-month{ min-width:132px; text-align:center; font-family:var(--sans); font-size:13px; font-weight:600; }

.cm-card.cm-warn{ border-color:var(--red); }
.cm-warn .cm-label{ color:var(--red); }
.fin-net.pos{ color:var(--pos); } .fin-net.neg{ color:var(--red); }
.fin-cols{ grid-template-columns:1.15fr .85fr; }
@media(max-width:760px){ .fin-cols{ grid-template-columns:1fr; } }

/* P&L statement */
.pl-group{ margin-bottom:14px; }
.pl-head{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:6px; margin-bottom:4px;
  display:flex; justify-content:space-between; align-items:baseline; }
.pl-hint, .pl-note{ font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:10px;
  color:#9a9c98; font-weight:400; }
.pl-note{ margin-left:8px; font-style:italic; }
.pl-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 2px;
  border-bottom:1px solid var(--rowline); }
.pl-label{ font-size:15px; }
.pl-amt{ font-family:var(--sans); font-size:14px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pl-line.in .pl-amt{ color:var(--pos); }
.pl-line.out .pl-amt{ color:var(--muted); }
.pl-line.manual .pl-amt{ color:var(--red); }
.pl-line.manual.paid{ opacity:.55; }
.pl-line.manual.paid .pl-label{ text-decoration:line-through; }
.pl-check{ display:flex; align-items:center; gap:10px; cursor:pointer; margin:0; }
.exp-paid{ width:17px; height:17px; accent-color:var(--ink); cursor:pointer; flex:none; }
.pl-recur{ font-family:var(--sans); font-size:9px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted); border:1px solid var(--line); padding:2px 6px; margin-left:8px; vertical-align:middle; }
.pl-empty{ font-family:var(--sans); font-size:12px; color:#9a9c98; padding:12px 2px; }
.pl-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:12px;
  padding-top:12px; border-top:2px solid var(--ink); font-family:var(--sans); font-weight:700; font-size:15px; }
.pl-total .fin-net{ font-size:19px; }
.pl-topay{ display:flex; justify-content:space-between; margin-top:8px; font-family:var(--sans);
  font-size:12px; color:var(--red); }

/* Manual-cost manager */
.exp-form{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; align-items:center; }
.exp-in{ font-family:var(--sans); font-size:13px; padding:8px 10px; border:1px solid var(--line);
  border-radius:2px; background:var(--card); color:var(--ink); }
.exp-in-name{ flex:1 1 180px; } .exp-in-amt{ width:110px; }
.exp-add{ cursor:pointer; }
.exp-cancel{ font-family:var(--sans); font-size:12px; padding:8px 12px;
  border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; }
.exp-list{ display:flex; flex-direction:column; }
.exp-row{ display:grid; grid-template-columns:120px 1fr auto auto auto; align-items:center; gap:10px;
  padding:9px 2px; border-bottom:1px solid var(--rowline); }
.exp-cat{ font-family:var(--sans); font-size:11px; color:var(--muted); }
.exp-name{ font-size:14px; }
.exp-amt{ font-family:var(--sans); font-size:13px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Line-icon marks — inherit currentColor so they sit in the black-&-white palette. */
.fic{ width:1em; height:1em; vertical-align:-0.14em; flex:none; }
.pl-label .fic, .exp-cat .fic{ margin-inline-end:1px; }
.exp-edit, .exp-del, .min-edit, .min-del, .pur-edit, .pur-del{
  background:none; border:none; cursor:pointer; opacity:.45; padding:2px 4px;
  color:var(--ink); display:inline-flex; align-items:center; line-height:1;
  transition:opacity .15s, color .15s; }
.exp-edit .fic, .min-edit .fic, .pur-edit .fic,
.exp-del .fic, .min-del .fic, .pur-del .fic{ width:15px; height:15px; }
.exp-edit:hover, .min-edit:hover, .pur-edit:hover{ opacity:1; }
.exp-del:hover, .min-del:hover, .pur-del:hover{ opacity:1; color:var(--red); }
@media(max-width:760px){ .exp-row{ grid-template-columns:1fr auto auto auto; } .exp-cat{ display:none; } }

/* Net-profit trend (Finance) */
.tr-row{ display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:10px; width:100%;
  padding:7px 6px; background:none; border:none; cursor:pointer; font-family:var(--sans); text-align:left; }
.tr-row:hover{ background:var(--hoverbg); }
.tr-row.on{ background:var(--hoverbg); box-shadow:inset 2px 0 0 var(--red); }
.tr-lbl{ font-size:11px; color:var(--muted); }
.tr-track{ height:9px; background:var(--dk-surface,#e7e7e3); overflow:hidden; }
.tr-bar{ display:block; height:100%; }
.tr-bar.pos{ background:var(--ink); }
.tr-bar.neg{ background:var(--red); }
.tr-val{ font-size:12px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tr-val.pos{ color:var(--pos); } .tr-val.neg{ color:var(--red); }

.pl-line.muted .pl-amt{ color:var(--tf-8a6d1f,#8a6d1f); opacity:.85; }

/* Bosta live timeline (order detail) */
.bosta-tl{ margin-top:6px; padding:10px 12px; border:1px solid var(--line); background:var(--card); }
.btl-head{ font-family:var(--sans); font-size:9.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); margin-bottom:8px; }
.btl-row{ display:flex; align-items:baseline; gap:9px; padding:3px 0; font-family:var(--sans); font-size:12px; }
.btl-dot{ flex:none; font-size:9px; color:var(--ink); }
.btl-row.todo{ opacity:.45; }
.btl-row.done:last-of-type .btl-dot{ color:var(--red); }
.btl-label{ min-width:120px; font-weight:600; }
.btl-when{ color:var(--muted); font-variant-numeric:tabular-nums; }
.btl-loading{ font-family:var(--sans); font-size:11px; color:#9a9c98; }

/* Manual-cost manager: monthly vs one-time sections */
.exp-sec-head{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--sans);
  font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted);
  border-bottom:1px solid var(--line); padding-bottom:6px; margin:18px 0 4px; }
.exp-sec-sum{ font-size:11px; letter-spacing:0; text-transform:none; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

/* Newly out of stock: vendor is the reorder signal */
.oos-card{ border-color:var(--tl-dcc9c4,#dcc9c4); }
.oos-vendor{ display:block; font-family:var(--sans); font-size:11px; font-weight:700; color:var(--red); margin-top:2px; }

/* Most missed (Shopping tab): back-in-stock signups on products still
   unavailable, ranked by demand. Reuses .dead as the row shell. */
.mp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:10px; }
.mp-grid .view-all{ grid-column:1/-1; }
.mp-row{ gap:11px; }
.mp-row .dead-name{ flex:1; min-width:0; }
.mp-count{ flex:none; min-width:30px; padding:5px 6px; text-align:center;
  font-family:var(--sans); font-size:14px; font-weight:700; color:var(--on-ink); background:var(--ink);
  border-radius:2px; font-variant-numeric:tabular-nums; }
.mp-link{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; }
.mp-link:hover{ border-bottom-color:var(--red); color:var(--red); }
/* Why it is still missing + who to reorder from */
.mp-meta{ display:block; font-family:var(--sans); font-size:10px; color:var(--muted); margin-top:3px; }
.mp-state{ display:inline-block; padding:1px 5px; margin-right:5px; border:1px solid var(--line);
  border-radius:2px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:9px; }
.mp-state-out{ color:var(--red); border-color:var(--tl-e0bdb6,#e0bdb6); }
.mp-x{ flex:none; background:none; border:none; cursor:pointer; font-size:13px; line-height:1;
  opacity:.4; padding:3px 4px; color:inherit; font-family:var(--sans);
  transition:opacity .15s ease, color .15s ease; }
.mp-x:hover{ opacity:1; color:var(--red); }
.mp-x:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; opacity:1; }
/* Removed rows: same shell, dimmed, ↩ restores instead of removing */
.mp-off{ opacity:.55; border-style:dashed; }
.mp-off .mp-count{ background:var(--muted); }
.mp-back:hover{ color:var(--pos,#2f7d46); }
.mp-toggle{ display:block; margin-top:10px; padding:5px 0; background:none; border:none;
  font-family:var(--sans); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); cursor:pointer; }
.mp-toggle:hover{ color:var(--ink); }

/* Trend panel: range + mode toggles side by side */
.trend-controls{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Driver profile cards (Couriers tab) */
.drv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; padding-bottom:8px; }
.drv-card{ border:1px solid var(--line); border-radius:2px; background:var(--card); padding:14px 15px; }
.drv-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.drv-avatar{ width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--on-ink);
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:14px; font-weight:700; flex:none; }
.drv-name{ font-family:var(--sans); font-size:15px; font-weight:700; flex:1; }
.drv-outnow{ font-family:var(--sans); font-size:10px; font-weight:600; color:var(--ink);
  border:1px solid var(--ink); padding:3px 8px; white-space:nowrap; }
.drv-live{ color:var(--red); text-transform:uppercase; letter-spacing:.08em; font-size:8.5px; margin-left:3px; }
.drv-body{ display:flex; align-items:center; gap:14px; }
.drv-donut{ flex:none; }
.drv-donut-num{ font-family:var(--sans); font-size:22px; font-weight:700; fill:var(--ink); }
.drv-donut-lbl{ font-family:var(--sans); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; fill:var(--muted); }
.drv-stats{ display:grid; gap:7px; min-width:0; }
.drv-stat{ font-family:var(--sans); font-size:12.5px; }
.drv-stat b{ font-variant-numeric:tabular-nums; }
.drv-mut{ color:var(--muted); font-size:11px; }
.drv-money{ display:flex; flex-direction:column; gap:5px; padding:9px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.drv-mrow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--sans); font-size:12.5px; }
.drv-mrow .k{ color:var(--muted); font-size:11.5px; }
.drv-mrow .v{ font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }
.drv-mrow .v small{ font-weight:400; color:var(--muted); font-size:10px; }
.drv-msub{ margin-top:-4px; text-align:right; font-family:var(--sans); font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.drv-mnet{ padding-top:5px; border-top:1px dashed var(--line); }
.drv-mnet .k{ color:var(--ink); font-weight:600; }
.drv-legend{ display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:2px; }
.drv-leg{ font-family:var(--sans); font-size:10px; color:var(--muted); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.drv-leg i{ width:8px; height:8px; display:inline-block; }
/* Customer replies to the problem-outcome WhatsApps, inside each driver card. */
.drv-replies{ margin-top:10px; padding-top:9px; border-top:1px solid var(--line); }
.drv-rep-head{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink); margin-bottom:6px; }
.drv-rep-head .drv-mut{ font-weight:400; text-transform:none; letter-spacing:0; margin-inline-start:auto; }
.drv-rep-row{ display:flex; align-items:center; flex-wrap:wrap; gap:5px 8px; padding:5px 0;
  border-top:1px dashed var(--line); font-size:12px; }
.drv-rep-row:first-of-type{ border-top:0; }
.drv-rep-main{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.drv-rep-kind{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.drv-rep-ord{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drv-rep-why{ flex-basis:100%; font-size:11px; color:var(--muted); }
.drv-rep-more{ font-size:11px; color:var(--muted); padding-top:5px; }
.rep-chip{ font-size:10px; padding:2px 6px; border:1px solid var(--line); border-radius:2px; white-space:nowrap; }
.rep-good{ border-color:var(--pos); color:var(--pos); }
.rep-bad{ border-color:var(--red); color:var(--red); }
.rep-wait{ border-color:var(--line); color:var(--muted); }
.rep-mute{ border-style:dashed; color:var(--muted); }
.drv-card.drv-total{ border-color:var(--ink); border-width:2px; }
.drv-total .drv-avatar{ background:var(--card); color:var(--ink); border:2px solid var(--ink); }

/* Cashflow section (Finance tab) */
.cf-cols{ display:grid; grid-template-columns:1fr 1.1fr; gap:20px; padding-bottom:8px; }
@media(max-width:760px){ .cf-cols{ grid-template-columns:1fr; } }

/* ===== Motion pass (2026-07-21): view transitions, donut sweep, paid feedback,
   nav indicator, empty states. All guarded for prefers-reduced-motion. ===== */

/* 1 · View transitions: each tab fades + rises in when shown */
@keyframes viewIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
#content > section:not([hidden]){ animation: viewIn .18s cubic-bezier(.22,1,.36,1); }

/* 2 · Donut sweep-in: a bg-colored cover circle un-draws to reveal segments.
   JS sets the final stroke-dashoffset; the transition does the sweep (no CSS-var
   keyframes — Safari resolves those unreliably). */
.donut-cover{ stroke-dashoffset:0; transition: stroke-dashoffset .9s cubic-bezier(.22,1,.36,1) .1s; }

/* 3 · Paid feedback: checkbox pop + strikethrough that draws itself */
@keyframes cbPop{ 50%{ transform:scale(1.3); } }
.exp-paid:checked{ animation: cbPop .18s ease-out; }
.pl-line.strike-anim .pl-label{ text-decoration:none; position:relative; }
.pl-line.strike-anim .pl-label::after{ content:''; position:absolute; left:0; top:55%; height:1.5px;
  width:100%; background:currentColor; animation: strikeDraw .35s cubic-bezier(.22,1,.36,1); }
@keyframes strikeDraw{ from{ width:0; } }



/* 6 · Gallery empty states: red dot + quiet line */
.empty::before{ content:'●'; display:block; color:var(--red); font-size:7px; margin-bottom:8px; }

@media (prefers-reduced-motion: reduce){
  #content > section:not([hidden]){ animation:none; }
  .donut-cover{ display:none; }
  .exp-paid:checked{ animation:none; }
  .pl-line.strike-anim .pl-label::after{ animation:none; }
}
.drv-neg{ color:var(--red); }
.issue-why{ font-family:var(--sans); font-size:11px; color:var(--red); margin-top:2px; }
.st-retcancel{ color:var(--tf-8a1f14,#8a1f14); }
.st-refunded{ color:var(--tf-b3261e,#b3261e); }
.st-replace{ color:var(--tf-1a56b8,#1a56b8); }

/* Monochrome stroke icons (replace emoji section markers) */
.ti, .ni{ stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ti{ width:14px; height:14px; vertical-align:-2px; margin-right:8px; }
.gi{ stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  width:13px; height:13px; vertical-align:-2px; flex:none; display:inline-block; }
.ni{ width:16px; height:16px; display:block; }
/* Ruled section headers: hairline under every panel title */
.panel > .lead-title:first-child{ border-bottom:1px solid var(--rowline); padding-bottom:9px; margin-bottom:13px; }
.panel-head{ border-bottom:1px solid var(--rowline); padding-bottom:9px; }

/* Feedback comments: called checkbox + delete */
.fb-c-called{ display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-size:11px;
  color:var(--muted); cursor:pointer; margin-left:auto; white-space:nowrap; }
.fb-called-cb{ width:14px; height:14px; accent-color:var(--pos); cursor:pointer; }
.fb-comment.fb-called{ opacity:.62; }
.fb-comment.fb-called .fb-c-called{ color:var(--pos); font-weight:600; }
.fb-c-del{ background:none; border:none; cursor:pointer; font-size:13px; opacity:.45; padding:2px 4px; font-family:var(--sans); }
.fb-c-del:hover{ opacity:1; }
.fb-c-del.arm{ opacity:1; color:#fff; background:var(--red); font-size:11px; font-weight:600; padding:3px 8px; }
.fb-comment .fb-c-date{ margin-left:0; }

/* ---- Courier portal links on driver cards ---- */
.drv-link{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.drv-link:hover{ border-bottom-color:var(--red); color:var(--red); }

/* ---- Assistant tab: sessions rail + chat ---- */
.as-panel{ display:grid; grid-template-columns:224px 1fr; height:calc(100vh - 190px); min-height:440px; padding:0; overflow:hidden; }
#as-rail{ border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; background:var(--bg); }
.as-new{ margin:12px 12px 10px; padding:9px 12px; border:1px solid var(--ink); background:var(--ink); color:var(--on-ink);
  font-family:var(--sans); font-size:12px; font-weight:600; border-radius:2px; cursor:pointer; text-align:center;
  transition:background .15s ease, border-color .15s ease; }
.as-new:hover{ background:var(--red); border-color:var(--red); }
.as-rail-label{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1.4px;
  color:var(--muted); padding:2px 14px 8px; border-bottom:1px solid var(--line); }
#as-sessions{ flex:1; overflow-y:auto; min-height:0; }
.as-sess{ display:flex; align-items:center; gap:8px; padding:10px 12px; cursor:pointer;
  border-bottom:1px solid var(--rowline); font-family:var(--sans); position:relative; }
.as-sess:hover{ background:var(--hoverbg); }
.as-sess.on{ background:var(--card); }
.as-sess.on::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--red); }
.as-sess-title{ flex:1; min-width:0; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.as-sess.on .as-sess-title{ font-weight:700; }
.as-sess-date{ font-size:10px; color:var(--muted); flex:none; }
.as-sess-del{ background:none; border:none; cursor:pointer; color:var(--muted); font-size:11px; padding:2px 4px;
  opacity:0; flex:none; font-family:var(--sans); }
.as-sess:hover .as-sess-del, .as-sess-del:focus-visible{ opacity:1; }
.as-sess-del:hover{ color:var(--red); }
.as-sess-del.arm{ opacity:1; color:#fff; background:var(--red); font-size:10px; font-weight:600; padding:3px 7px; border-radius:2px; }
.as-rail-empty{ padding:16px 14px; font-family:var(--sans); font-size:11.5px; color:var(--muted); }

.as-main{ display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--card); }
#as-log{ flex:1; overflow-y:auto; padding:20px 18px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.as-msg{ max-width:76%; padding:10px 14px; font-family:var(--sans); font-size:13.5px; line-height:1.6;
  border:1px solid var(--line); border-radius:2px; background:var(--card); overflow-wrap:break-word;
  animation:asIn .22s cubic-bezier(.22,1,.36,1); }
@keyframes asIn{ from{ opacity:0; transform:translateY(5px);} to{ opacity:1; transform:none;} }
.as-msg bdi{ unicode-bidi:plaintext; }
.as-user{ align-self:flex-end; background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.as-bot{ align-self:flex-start; background:var(--bg); }
.as-li{ padding-inline-start:14px; position:relative; }
.as-li::before{ content:''; position:absolute; inset-inline-start:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--red); }
.as-gap{ height:6px; }
.as-loading{ color:var(--muted); font-family:var(--sans); font-size:13px; padding:20px; }

.as-empty{ margin:auto; text-align:center; padding:24px 16px; max-width:440px; }
.as-empty-title{ font-family:var(--sans); font-size:19px; font-weight:700; letter-spacing:-.01em; }
.as-empty-sub{ font-family:var(--sans); font-size:12px; color:var(--muted); margin:8px 0 18px; }
.as-chips{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.as-chip{ border:1px solid var(--line); background:var(--card); font-family:var(--sans); font-size:13px; color:var(--ink);
  padding:9px 16px; border-radius:2px; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.as-chip:hover{ border-color:var(--red); color:var(--red); }

#as-form{ display:flex; gap:8px; border-top:1px solid var(--line); padding:12px 14px; background:var(--card); align-items:flex-end; }
#as-input{ flex:1; border:1px solid var(--line); border-radius:2px; padding:10px 12px; font-family:var(--sans);
  font-size:13.5px; background:var(--bg); resize:none; max-height:120px; line-height:1.5; }
#as-input:focus{ outline:2px solid var(--ink); outline-offset:-1px; }
#as-send{ border:1px solid var(--ink); background:var(--ink); color:var(--on-ink); font-family:var(--sans); font-size:13px;
  font-weight:600; padding:10px 18px; border-radius:2px; cursor:pointer; flex:none;
  transition:background .15s ease, border-color .15s ease; }
#as-send:hover:not(:disabled){ background:var(--red); border-color:var(--red); }
#as-send:disabled{ opacity:.4; cursor:default; }
.as-dots{ display:inline-flex; gap:4px; padding:3px 2px; }
.as-dots i{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:asDot 1s infinite ease-in-out; }
.as-dots i:nth-child(2){ animation-delay:.15s; }
.as-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes asDot{ 0%,100%{ opacity:.25; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-3px);} }
@media (prefers-reduced-motion: reduce){
  .as-dots i{ animation:none; }
  .as-msg{ animation:none; }
}
@media (max-width:760px){
  .as-panel{ grid-template-columns:1fr; grid-template-rows:auto 1fr; height:calc(100vh - 220px); }
  #as-rail{ border-right:none; border-bottom:1px solid var(--line); flex-direction:row; align-items:center; gap:4px; overflow:hidden; }
  .as-new{ margin:8px 8px 8px 10px; white-space:nowrap; }
  .as-rail-label{ display:none; }
  #as-sessions{ display:flex; flex-direction:row; overflow-x:auto; overflow-y:hidden; border-bottom:none; }
  .as-sess{ border-bottom:none; border-right:1px solid var(--rowline); max-width:170px; flex:none; padding:8px 10px; }
  .as-sess.on::before{ width:100%; height:2px; bottom:auto; }
  .as-sess-date{ display:none; }
  .as-msg{ max-width:92%; }
}

/* ---- Paymob section (Finance tab) ---- */
.pm-actions{ display:flex; gap:8px; margin:14px 0 10px; flex-wrap:wrap; }
.pm-export-all{ background:var(--card); color:var(--ink); border:1px solid var(--line); }
.pm-export-all:hover{ border-color:var(--ink); background:var(--card); }
.pm-list{ max-height:420px; overflow-y:auto; border-top:1px solid var(--rowline); }
.pm-row{ display:flex; align-items:center; gap:12px; padding:9px 2px; border-bottom:1px solid var(--rowline);
  font-family:var(--sans); font-size:12.5px; }
.pm-ord{ font-weight:700; width:64px; flex:none; }
.pm-cust{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-date{ color:var(--muted); width:52px; flex:none; }
.pm-amt{ font-weight:700; width:100px; text-align:right; flex:none; font-variant-numeric:tabular-nums; }
.stchip.pm-complete{ color:var(--pos); }
.stchip.pm-window{ color:var(--tf-8a6d1f,#8a6d1f); }
.stchip.pm-await{ color:var(--muted); }
.stchip.pm-attn{ color:var(--red); font-weight:700; }
.stchip.pm-refunded{ color:var(--tf-7b1fa2,#7b1fa2); }
.cm-card.pm-attn-card{ border-color:var(--red); }
.cm-card.pm-attn-card .cm-value{ color:var(--red); }
@media (max-width:760px){ .pm-cust{ display:none; } }
.pm-cb{ accent-color:var(--ink); width:15px; height:15px; flex:none; cursor:pointer; }
.pm-row.pm-sel{ background:var(--hoverbg); }
.pm-selall{ display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:12px;
  color:var(--muted); cursor:pointer; padding:6px 4px; }
.pm-selall input{ accent-color:var(--ink); width:14px; height:14px; }
.pm-fee{ font-weight:400; font-size:10.5px; color:var(--muted); }
.pm-filters{ display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 0; }
.pm-refund-btn{ font-family:var(--sans); font-size:10.5px; font-weight:600; border:1px solid var(--red);
  color:var(--red); background:var(--card); padding:4px 10px; border-radius:2px; cursor:pointer; flex:none; white-space:nowrap; }
.pm-refund-btn:hover{ background:var(--red); color:#fff; }
.pm-refund-btn.arm{ background:var(--red); color:#fff; }
.pm-refund-btn:disabled{ opacity:.5; cursor:default; }
.pm-refund-btn.pm-undo{ border-color:var(--line); color:var(--muted); font-weight:400; }
.pm-refund-btn.pm-undo:hover{ border-color:var(--ink); color:var(--ink); background:var(--card); }

/* ---- Messenger VA tab ---- */
/* The bot's status pill (2026-09-06): a dot + one line, coloured by
   ai_provider_health. Amber matches the hub's other in-between states
   (freshness.amber, badge.vip) — the palette's only non-red/green accent. */
.va-testbanner{ font-family:var(--sans); font-size:12.5px; border:1px solid var(--line); color:var(--ink);
  background:var(--card); padding:10px 14px; margin-bottom:16px; border-radius:2px;
  display:flex; align-items:center; gap:9px; }
.va-status-dot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--muted); }
.va-testbanner.va-live{ border-color:var(--pos); color:var(--pos); }
.va-testbanner.va-live .va-status-dot{ background:var(--pos); }
.va-testbanner.va-fallback{ border-color:var(--tf-8a6d1f,#8a6d1f); color:var(--tf-8a6d1f,#8a6d1f); }
.va-testbanner.va-fallback .va-status-dot{ background:var(--tf-8a6d1f,#8a6d1f); }
.va-testbanner.va-down{ border-color:var(--red); color:var(--red); }
.va-testbanner.va-down .va-status-dot{ background:var(--red); }
#va-period-tabs{ display:flex; gap:6px; margin-bottom:18px; font-family:var(--sans); flex-wrap:wrap; }
#va-plat-tabs{ display:flex; align-items:center; gap:6px; margin:-6px 0 18px; font-family:var(--sans); flex-wrap:wrap; }
#va-plat-tabs .va-pf-label{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-right:4px; }
.va-pf{ font-family:var(--sans); font-size:11px; padding:5px 12px; background:var(--card); border:1px solid var(--line);
  color:var(--muted); cursor:pointer; border-radius:2px; letter-spacing:.03em; }
.va-pf:hover:not(.on){ border-color:var(--ink); color:var(--ink); }
.va-pf.on{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); font-weight:600; }
/* platform icons: line glyphs in currentColor, so they follow the hover/active colour */
#va-plat-tabs .va-pf{ display:inline-flex; align-items:center; gap:6px; }
.va-pf-ic{ width:13px; height:13px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.va-pf-ic .dot{ fill:currentColor; stroke:none; }
/* Silent-failure strip: counts of things that produced no reply and no error. */
.va-health{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; font-family:var(--sans);
  border:1px solid var(--line); background:var(--card); padding:9px 14px; margin-bottom:18px; border-radius:2px; }
.va-h-label{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.va-h-item{ font-size:12px; color:var(--muted); }
.va-h-item b{ font-size:13.5px; color:var(--ink); margin-right:3px; }
.va-h-bad b{ color:var(--red); }
/* List footer for capped panels (conversations, tickets, driver issues, feedback).
   Full-width and quiet: it closes the list rather than competing with the rows. */
.view-all{ display:block; width:100%; margin-top:10px; padding:9px 0;
  font-family:var(--sans); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); background:none; border:1px solid var(--line); border-radius:2px;
  cursor:pointer; transition:color .15s ease, border-color .15s ease; }
.view-all:hover{ color:var(--ink); border-color:var(--ink); }
.view-all:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* Busiest hours: same bar language as the Stats trend, shorter (24 fixed buckets). */
.va-peak{ font-family:var(--sans); font-size:12px; color:var(--muted); margin:-4px 0 10px; }
.va-peak b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.va-hours-bars{ height:140px; padding-top:0; }
.va-resume{ font-size:10.5px; padding:3px 9px; flex:none; }
.va-resume.arm{ border-color:var(--red); color:var(--red); }
.va-conv{ border-bottom:1px solid var(--rowline); padding:10px 0; }
.va-conv:last-child{ border-bottom:none; }
.va-conv-head{ display:flex; align-items:center; gap:9px; cursor:pointer; }
.va-plat{ font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:.06em; border:1px solid var(--ink);
  padding:2px 6px; flex:none; }
.va-name{ font-family:var(--sans); font-size:13.5px; font-weight:600; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.va-new{ font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:.06em; color:#fff;
  background:var(--red); padding:2px 6px; border-radius:8px; flex:none; }
.va-conv-unread .va-name{ font-weight:700; }
.stchip.va-bot{ color:var(--pos); }
.stchip.va-human{ color:var(--tf-8a6d1f,#8a6d1f); }
.stchip.va-ticket{ color:var(--red); }
.va-preview{ font-family:var(--sans); font-size:12px; color:var(--muted); margin:5px 0 0 2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.va-transcript{ margin-top:10px; border:1px solid var(--line); border-radius:2px; background:var(--bg);
  padding:12px; display:flex; flex-direction:column; gap:8px; max-height:380px; overflow-y:auto; }
.va-m{ max-width:80%; padding:8px 11px; font-family:var(--sans); font-size:12.5px; line-height:1.55;
  border:1px solid var(--line); border-radius:2px; background:var(--card); overflow-wrap:break-word; position:relative; }
.va-m-in{ align-self:flex-start; }
.va-m-bot{ align-self:flex-end; background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.va-m-bot .va-m-t{ color:var(--on-ink); opacity:.65; }
.va-m-staff{ align-self:flex-end; border-color:var(--red); }
.va-m-who{ font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--red); display:block; margin-top:3px; }
.va-m-t{ font-size:9.5px; color:var(--muted); margin-top:4px; }
.va-m-media{ font-size:11px; color:var(--muted); margin-top:3px; }
.va-m-bot .va-m-media{ color:#b9bab6; }
.va-tk{ border-bottom:1px solid var(--rowline); padding:11px 0; }
.va-tk:last-child{ border-bottom:none; }
.va-tk-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.stchip.va-tk-refund{ color:var(--red); font-weight:700; }
.stchip.va-tk-handoff{ color:var(--tf-1a56b8,#1a56b8); }
.va-tk-ord{ font-family:var(--sans); font-size:12px; font-weight:700; }
.va-tk-phone{ font-family:var(--sans); font-size:12px; font-weight:600; color:var(--pos); text-decoration:none;
  border-bottom:1px solid transparent; }
.va-tk-phone:hover{ border-bottom-color:var(--pos); }
.va-tk-sum{ font-family:var(--sans); font-size:12.5px; margin-top:6px; }
.va-tk-why{ font-family:var(--sans); font-size:11.5px; color:var(--muted); margin-top:3px; }
.va-tk-done{ opacity:.55; }
.va-tk-res{ font-family:var(--sans); font-size:10.5px; color:var(--pos); }
.va-tk-hist{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--muted); padding:12px 0 4px; border-bottom:1px solid var(--line); margin-bottom:4px; }
/* Ticket list controls: status chips + type/sort selects. */
.va-tk-ctrls{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.va-tk-ctrls nav{ display:flex; gap:6px; flex-wrap:wrap; }
.va-tk-ctrls .va-pf{ padding:4px 10px; }
.va-tk-sel{ font-family:var(--sans); font-size:11px; padding:4px 6px; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:2px; cursor:pointer; }
.va-tk-sel:hover{ border-color:var(--ink); }
.va-tk-sel:last-of-type{ margin-inline-start:auto; }
.pm-exp{ font-family:var(--sans); font-size:9.5px; font-weight:600; color:var(--pos); border:1px solid currentColor;
  padding:2px 6px; border-radius:2px; flex:none; white-space:nowrap; letter-spacing:.04em; }

/* ---- Calendar tab ---- */
.nav-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; margin-left:6px; font-family:var(--sans); font-size:10px; font-weight:600; color:#fff; background:var(--red); border-radius:8px; }
/* Big full-width calendar on top, agenda stacked below */
.cal-layout{ display:block; }
.cal-grid-head{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:12px; }
.cal-mtitle{ font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; min-width:180px; text-align:center; }
.cal-nav{ font-family:var(--sans); border:1px solid var(--line); background:var(--card); width:30px; height:30px; border-radius:2px; cursor:pointer; color:var(--ink); font-size:15px; }
.cal-nav:hover{ border-color:var(--ink); }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); font-family:var(--sans); font-size:10px; letter-spacing:.08em; color:var(--muted); text-align:left; }
.cal-dow span{ padding:0 8px 5px; }
.cal-weeks{ border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--card); }
.cal-week{ position:relative; border-top:1px solid var(--line); }
.cal-week:first-child{ border-top:none; }
.cal-week-bg{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(7,1fr); }
.cal-daycell{ border-left:1px solid var(--line); padding:5px 7px; }
.cal-daycell:first-child{ border-left:none; }
.cal-daycell[data-day]{ cursor:pointer; }
.cal-daycell[data-day]:hover{ background:var(--tb-faf9f6,#faf9f6); }
.cal-daycell.out{ background:var(--tb-f7f6f2,#f7f6f2); }
.cal-dnum{ font-family:var(--sans); font-size:12px; color:var(--muted); }
.cal-daycell.today .cal-dnum{ background:var(--ink); color:var(--on-ink); border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; margin:-1px 0; }
.cal-week-bars{ position:absolute; inset:0; pointer-events:none; }
.cal-barlbl{ position:absolute; height:19px; line-height:18px; padding:0 7px; font-family:var(--sans); font-size:11px; border-radius:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; pointer-events:auto; box-sizing:border-box; }
.cal-bar-holiday{ background:var(--dk-surface,#ececea); color:var(--ink); border-left:3px solid var(--ink); }
.cal-bar-occasion{ background:var(--tb-eeeeeb,#eeeeeb); color:var(--muted); border-left:3px solid var(--muted); }
.cal-bar-event{ background:var(--tb-e6f0ea,#e6f0ea); color:var(--tf-276b3f,#276b3f); border-left:3px solid var(--pos); }
.cal-bar-discount{ background:var(--tb-f7e7e3,#f7e7e3); color:var(--red); border-left:3px solid var(--red); }
.cal-agenda{ margin-top:28px; }
.cal-agenda-head,.cal-upcoming-h{ font-family:var(--sans); font-size:11px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; display:flex; justify-content:space-between; margin:4px 0 8px; }
.cal-upcoming-h{ color:var(--red); }
.cal-mhead{ font-family:var(--sans); font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin:14px 0 6px; }
.cal-row{ display:grid; grid-template-columns:auto auto 1fr auto auto; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--line); }
.cal-tag{ font-family:var(--sans); font-size:10px; padding:2px 6px; border:1px solid var(--line); border-radius:2px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.cal-holiday{ color:var(--ink); border-color:var(--ink); }
.cal-occasion{ color:var(--muted); }
.cal-event{ color:var(--pos); border-color:var(--pos); }
.cal-discount{ color:var(--red); border-color:var(--red); }
.cal-date{ font-family:var(--sans); font-size:12px; color:var(--muted); white-space:nowrap; }
.cal-title{ font-family:var(--sans); font-size:13px; color:var(--ink); }
.cal-code{ margin-left:8px; font-family:var(--sans); font-size:11px; color:var(--red); border:1px solid var(--red); padding:1px 5px; border-radius:2px; }
.cal-note{ margin-left:8px; font-family:var(--sans); font-size:11px; color:var(--muted); }
.cal-away{ font-family:var(--sans); font-size:11px; color:var(--muted); white-space:nowrap; }
.cal-edit{ background:none; border:none; cursor:pointer; color:var(--muted); font-size:13px; }
.cal-edit:hover{ color:var(--ink); }
.cal-upcoming-box{ border:1px solid var(--red); border-radius:2px; padding:10px 14px; margin-bottom:18px; }
.cal-upcoming-box .cal-row:first-of-type{ border-top:none; }
.cal-pasttoggle{ font-family:var(--sans); font-size:10px; color:var(--muted); text-transform:none; letter-spacing:0; cursor:pointer; }
/* modal */
.cal-modal{ position:fixed; inset:0; background:rgba(20,21,22,.35); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; z-index:50; }
.cal-modal-box{ background:var(--card); border:1px solid var(--line); border-radius:2px; padding:18px; width:min(420px,100%); max-height:88vh; overflow:auto; }
.cal-modal-h{ font-family:var(--sans); font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; color:var(--ink); }
.cal-modal-box label{ display:block; font-family:var(--sans); font-size:11px; color:var(--muted); margin-bottom:10px; }
.cal-modal-box input,.cal-modal-box select,.cal-modal-box textarea{ display:block; width:100%; margin-top:3px; padding:6px 8px; border:1px solid var(--line); border-radius:2px; font:inherit; color:var(--ink); box-sizing:border-box; }
.cal-modal-box textarea{ min-height:52px; resize:vertical; }
.cal-modal-box .cal-inline{ display:flex; align-items:center; gap:6px; }
.cal-modal-box .cal-inline input{ width:auto; margin:0; }
.cal-modal-actions{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.cal-seed{ font-family:var(--sans); font-size:9px; color:var(--muted); border:1px solid var(--line); padding:1px 4px; border-radius:2px; }
.cal-danger{ color:var(--red); border-color:var(--red); }
.cal-invalid{ border-color:var(--red)!important; }
@media(prefers-reduced-motion:no-preference){ .cal-modal-box{ animation:cal-pop .16s ease-out; } @keyframes cal-pop{ from{ transform:translateY(-6px); opacity:0 } to{ transform:none; opacity:1 } } }

/* ---- Shopping tab (vendor purchase planning, admin-only) ---- */
.shop-heroes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.shop-hero{ position:relative; border:1px solid var(--line); border-radius:2px; padding:10px; background:var(--card);
  display:flex; flex-direction:column; gap:8px; color:inherit; text-decoration:none; }
a.shop-hero:hover{ background:var(--hoverbg); }
.shop-hero.urgent-row{ border-left:3px solid var(--red); }
.shop-hero .thumb{ width:44px; height:44px; object-fit:cover; border-radius:2px; background:var(--hoverbg); flex:none; }
.shop-share{ font-size:22px; font-weight:700; }
.shop-hero-stats{ display:flex; flex-wrap:wrap; gap:4px 12px; color:var(--muted); font-size:12px; }
.shop-star{ color:var(--ink); }
.shop-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.shop-bar label{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.shop-bar select{ border:1px solid var(--line); border-radius:2px; padding:6px 8px; background:var(--card); font:inherit; max-width:280px; }
.shop-summary{ display:flex; gap:14px; color:var(--muted); font-size:13px; flex-wrap:wrap; }
.shop-summary strong{ color:var(--ink); }
.shop-group-title{ text-transform:uppercase; letter-spacing:.06em; font-size:12px; color:var(--muted); margin:14px 0 6px; }
.shop-row{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-bottom:1px solid var(--rowline);
  border-radius:var(--r-md);
  transition:background .18s var(--ease), transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .2s var(--ease); }
.shop-row:hover{ background:var(--card); border-bottom-color:transparent; transform:translateY(-2px);
  box-shadow:var(--elev-1); position:relative; z-index:1; }
.shop-row.urgent-row{ border-left:3px solid var(--red); padding-left:9px; }
.shop-row .thumb{ width:38px; height:38px; object-fit:cover; border-radius:var(--r-sm); background:var(--hoverbg); flex:none; }
/* Soften the hero cards + pop the product image out as a preview on hover. */
.shop-hero{ border-radius:var(--r-md);
  transition:transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .2s var(--ease), background .15s var(--ease); }
a.shop-hero:hover{ transform:translateY(-4px); box-shadow:var(--elev-2); background:var(--card); }
#shopping-view .thumb{ transform-origin:center left; cursor:zoom-in;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s var(--ease); }
.shop-name{ flex:1; min-width:0; }
.shop-name a{ color:inherit; text-decoration:none; }
.shop-name a:hover{ text-decoration:underline; }
.shop-sub{ display:block; color:var(--muted); font-size:12px; }
.shop-qty{ margin-left:auto; text-align:right; font-weight:700; font-size:16px; min-width:72px; flex:none; }
.shop-qty small{ display:block; font-weight:400; color:var(--muted); font-size:11px; }
.status-chip, .cover-chip{ display:inline-block; border:1px solid var(--line); border-radius:2px; padding:1px 6px;
  font-size:11px; color:var(--muted); white-space:nowrap; flex:none; }
.cover-chip.low{ border-color:var(--ink); color:var(--ink); }
.cover-chip.urgent, .status-chip.oos{ border-color:var(--red); color:var(--red); }
.shop-toggle{ background:none; border:1px solid var(--line); border-radius:2px; padding:6px 10px; font:inherit;
  cursor:pointer; margin-top:8px; color:var(--ink); }
.shop-toggle:hover{ background:var(--hoverbg); }

/* Select-for-export checkboxes + sticky export bar */
.shop-sel{ display:inline-flex; align-items:center; flex:none; cursor:pointer; }
.shop-sel input{ width:16px; height:16px; margin:0; accent-color:var(--ink); cursor:pointer; }
.shop-sel.hero{ position:absolute; top:8px; left:8px; z-index:2; padding:2px;
  background:var(--card); border:1px solid var(--line); border-radius:3px; }
.shop-export-bar{ position:sticky; bottom:0; z-index:5; display:flex; align-items:center;
  justify-content:space-between; gap:12px 14px; flex-wrap:wrap; margin-top:14px;
  padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:2px; }
.shop-sel-count{ font-size:13px; font-weight:700; color:var(--ink); }
.shop-export-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Refund/postpone confirmation cases (Feedback tab) */
.confirm-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-bottom:10px; }
.confirm-card.confirm-flag{ border-color:var(--red); box-shadow:inset 3px 0 0 var(--red); }
.confirm-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.confirm-ord{ font-family:var(--sans); font-size:13px; color:var(--ink); }
.confirm-ans{ font-family:var(--sans); font-size:11px; padding:2px 9px; border:1px solid currentColor; border-radius:var(--r-pill); white-space:nowrap; }
.confirm-ans.neg{ color:var(--red); } .confirm-ans.pos{ color:var(--pos); }
.confirm-ans.neu{ color:var(--muted); } .confirm-ans.warn{ color:var(--tf-8a6d1f,#8a6d1f); }
.confirm-reason{ font-family:var(--sans); font-size:12.5px; color:var(--dk-text2,#4c4d4a); font-style:italic; margin-top:8px; }
.confirm-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.confirm-btn.arm{ border-color:var(--red); color:var(--red); }

/* ---- Stock tab (AYA) ---- */
.sw-summary{ display:flex; flex-wrap:wrap; gap:12px; }
.sw-card{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:2px; padding:10px 14px; min-width:118px; }
.sw-card b{ font-size:20px; }
.sw-card span{ color:var(--muted); font-size:12px; }
.sw-dot{ width:9px; height:9px; border-radius:50%; background:var(--muted); flex:none; }
.sw-dot.st-out{ background:var(--red); }
.sw-dot.st-crit{ background:var(--red); opacity:.55; }
.sw-dot.st-low{ background:#b8860b; }
.sw-dot.st-ok{ background:var(--pos); }
.sw-bar{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:14px; }
.sw-filter{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.sw-filter select, .sw-filter input, #stock-search{ font:inherit; border:1px solid var(--line); border-radius:2px; padding:6px 8px; background:var(--card); color:var(--ink); }
#stock-threshold{ width:58px; }
.sw-add{ position:relative; flex:1; min-width:220px; }
#stock-search{ width:100%; }
.sw-results{ position:absolute; z-index:20; top:100%; left:0; right:0; background:var(--card); border:1px solid var(--line); border-top:none; max-height:300px; overflow:auto; }
.sw-res{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; padding:8px 10px; background:none; border:none; border-bottom:1px solid var(--rowline); cursor:pointer; color:var(--ink); }
.sw-res:hover{ background:var(--hoverbg); }
.sw-res[disabled]{ opacity:.5; cursor:default; }
.sw-res-meta{ font-size:11px; color:var(--muted); }
.sw-res-empty{ padding:8px 10px; color:var(--muted); font-size:12px; }
.sw-table{ width:100%; border-collapse:collapse; font-size:13px; }
.sw-table th, .sw-table td{ padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.sw-table th{ font-weight:600; color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.04em; white-space:nowrap; }
.al-right{ text-align:right; }
.al-left{ text-align:left; }
th.sortable{ cursor:pointer; user-select:none; }
th.sortable:hover, th.on{ color:var(--ink); }
.sw-prod{ display:flex; align-items:center; gap:10px; }
.sw-prod .thumb{ width:38px; height:38px; object-fit:cover; border:1px solid var(--line); border-radius:2px; background:var(--bg); flex:none; }
.sw-prod a{ color:var(--ink); text-decoration:none; font-weight:500; }
.sw-prod a:hover{ text-decoration:underline; }
.sw-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; }
.sw-tag{ font-size:10px; color:var(--muted); border:1px solid var(--line); border-radius:2px; padding:1px 5px; }
.sw-star{ color:#c8a227; }
.sw-chip{ display:inline-block; font-size:11px; padding:2px 8px; border-radius:2px; border:1px solid; white-space:nowrap; }
.sw-chip.st-out{ color:var(--red); border-color:var(--red); }
.sw-chip.st-crit{ color:var(--red); border-color:var(--red); font-weight:600; }
.sw-chip.st-low{ color:#b8860b; border-color:#b8860b; }
.sw-chip.st-ok{ color:var(--pos); border-color:var(--tl-cfe0d3,#cfe0d3); }
.sw-x{ border:none; background:none; color:var(--muted); cursor:pointer; font-size:13px; padding:4px 6px; border-radius:2px; }
.sw-x:hover{ color:var(--red); background:var(--tb-faeae7,#faeae7); }
.sw-section{ margin-bottom:18px; }
.sw-sec-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.sw-sec-title{ font-size:15px; text-transform:uppercase; letter-spacing:.04em; margin:0; }
.sw-sec-count{ font-size:12px; color:var(--muted); }
.sw-sec-vendor{ margin-left:auto; }
.sw-tops-wrap{ margin-bottom:14px; }
.sw-tops-label{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--red); margin-bottom:8px; }
.sw-tops{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.sw-top{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:2px; padding:8px; text-decoration:none; color:var(--ink); background:var(--card); }
.sw-top:hover{ background:var(--hoverbg); }
.sw-top .thumb{ width:44px; height:44px; object-fit:cover; border:1px solid var(--line); border-radius:2px; background:var(--bg); flex:none; }
.sw-top-body{ min-width:0; }
.sw-top-name{ font-weight:500; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sw-top-meta{ display:flex; align-items:center; gap:6px; margin-top:3px; font-size:11px; color:var(--muted); }
.sw-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sw-sec-bar{ display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.sw-sec-bar .sw-sec-count{ margin-left:auto; }
.sw-search{ font:inherit; font-size:13px; border:1px solid var(--line); border-radius:2px; padding:6px 9px; background:var(--card); color:var(--ink); min-width:170px; }
.al-center{ text-align:center; }
.sw-selcol{ width:34px; }
.sw-check, .sw-check-all{ width:15px; height:15px; cursor:pointer; accent-color:var(--ink); vertical-align:middle; }
.sw-table tr.sel{ background:var(--tb-f4f6fb,#f4f6fb); }
.sw-bulk{ display:flex; align-items:center; gap:12px; padding:8px 12px; margin-bottom:12px; background:var(--ink); color:var(--on-ink); border-radius:2px; }
.sw-bulk b{ font-size:15px; }
.sw-bulk-remove{ font:inherit; font-size:12px; padding:5px 12px; background:var(--red); color:#fff; border:none; border-radius:2px; cursor:pointer; }
.sw-bulk-remove:disabled{ opacity:.6; cursor:default; }
.sw-bulk-clear{ font:inherit; font-size:12px; padding:5px 12px; background:none; color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:2px; cursor:pointer; }
/* Overview: unified "restock first" grouped by section */
.sw-ov-group{ margin-bottom:16px; }
.sw-ov-group:last-child{ margin-bottom:0; }
.sw-ov-label{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; border-bottom:1px solid var(--line); padding-bottom:4px; }
/* Mobile (AYA mostly uses her phone) */
@media(max-width:760px){
  .sw-summary{ gap:8px; }
  .sw-card{ flex:1 1 calc(50% - 4px); min-width:0; padding:8px 10px; }
  .sw-card b{ font-size:17px; }
  .sw-add{ flex:1 1 100%; min-width:0; }
  #stock-search, #stock-threshold, .sw-filter select, .sw-search{ font-size:16px; }   /* prevents iOS zoom-on-focus */
  .sw-search{ flex:1 1 100%; min-width:0; }
  /* Fit the table to the phone: drop low-priority columns, let product names wrap. */
  .sw-hm{ display:none; }
  .sw-table{ min-width:0; width:100%; }
  .sw-table th, .sw-table td{ padding:7px 6px; }
  .sw-prod{ gap:7px; }
  .sw-prod .thumb{ width:34px; height:34px; }
  .sw-name{ white-space:normal; }
  .sw-selcol{ width:26px; }
  .sw-tops{ grid-template-columns:1fr; }
  .sw-sec-bar .sw-sec-count{ margin-left:0; }
}

/* ============================================================================
   BOLD REFRESH (2026-08-06) — dark charcoal rail + real elevation + rounding.
   Appended last so it wins the cascade over the flat base rules above.
   Gallery DNA kept: monochrome surfaces, ONE red accent, semantic money colors.
   ========================================================================== */

.view-title{ font-size:23px; }

/* --- Cards: rounded, soft layered depth, no hairline (shadow defines the edge) --- */
.panel, .trend-panel{ border:0; border-radius:var(--r-lg); box-shadow:var(--elev-1); padding:18px 18px 10px; }
/* Stacked panels are now big shadowed cards — give them real breathing room so
   sections (e.g. Finance Paymob / Cashflow) don't touch. */
section.panel{ margin-bottom:20px; }
.kpi, .cm-card{ border:0; border-radius:var(--r-md); box-shadow:var(--elev-1); padding:16px 18px; }
.ad-stat{ border:0; border-radius:var(--r-md); box-shadow:var(--elev-1); }
.dead, .cblock, .fb-comment, .ad-node, .bosta-tl, .sw-card, .guide-box, .as-panel{ border-radius:var(--r-md); }
.thumb{ border-radius:var(--r-sm); }

/* Bigger hero numbers; an inset ink ring replaces the flat 2px border */
.kpi-value{ font-size:27px; }
.cm-value{ font-size:26px; }
.kpi.hero{ border:0; box-shadow:var(--elev-2), inset 0 0 0 1.5px var(--ink); }
.kpi.hero .kpi-value{ font-size:34px; }
.cm-card.cm-hero, .cm-card.cm-warn, .cm-card.pm-attn-card{ border:0; }
.cm-hero{ box-shadow:var(--elev-2), inset 0 0 0 1.5px var(--ink); }
.cm-hero .cm-value{ font-size:32px; }
.cm-warn, .pm-attn-card{ box-shadow:var(--elev-1), inset 0 0 0 1.5px var(--red); }

/* Tables float as one rounded surface */
.dtable{ border:0; border-radius:var(--r-lg); box-shadow:var(--elev-1); overflow:hidden; }
.table-wrap{ border-radius:var(--r-lg); }

/* --- Hover motion: cards spring up with a bouncy pop + shadow bloom. --- */
@media(prefers-reduced-motion:no-preference){
  /* overshoot easing on transform = a lively little bounce, not a flat slide */
  .kpi, .cm-card, .drv-card, .ad-stat, .dead-link, .tr-row{
    transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .24s var(--ease), background .15s var(--ease); }
  .kpi:hover, .cm-card:hover, .drv-card:hover, .ad-stat:hover{
    transform:translateY(-9px) scale(1.03); box-shadow:var(--elev-2); }
  /* hero / attention cards keep their inset ring while they pop */
  .kpi.hero:hover, .cm-hero:hover{ transform:translateY(-9px) scale(1.03);
    box-shadow:var(--elev-2), inset 0 0 0 1.5px var(--ink); }
  .cm-warn:hover, .pm-attn-card:hover{ transform:translateY(-9px) scale(1.03);
    box-shadow:var(--elev-2), inset 0 0 0 1.5px var(--red); }
  /* big panels lift a touch too, so the whole surface feels alive */
  .panel, .trend-panel{ transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .28s var(--ease); }
  .panel:hover, .trend-panel:hover{ transform:translateY(-3px); box-shadow:var(--elev-2); }
  .dead-link:hover{ box-shadow:var(--elev-1); }
}

/* --- Controls become soft pills / rounded --- */
.tab, .chip, #brand-tabs .btab, #courier-tabs .tab, .pg-num, .pg-arrow, .search-mode,
.badge, .stchip, .tag, .matched, .seg, .seg-btn{ border-radius:var(--r-pill); }
.search, .notebox, .exp-in, .cb-form input, .cb-form select, #dispatch-input, #as-input,
.status-select, .status-save, .page-size select, .fin-nav, .refresh-btn, .export, .as-new,
.exp-cancel, .wa, .fb-c-del.arm, .pm-refund-btn{ border-radius:var(--r-sm); }

/* Primary/secondary buttons: subtle depth + a lift on hover */
.refresh-btn, .export, .status-save{ box-shadow:var(--elev-1);
  transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.refresh-btn:hover:not(:disabled), .export:hover:not(:disabled), .status-save:hover{
  transform:translateY(-1px); box-shadow:var(--elev-2); }
.refresh-btn:active:not(:disabled), .export:active:not(:disabled){ transform:translateY(0); box-shadow:var(--elev-1); }

/* Freshness / live-status pill gets a status dot; green (fresh) softly pulses */
.freshness{ display:inline-flex; align-items:center; gap:7px; border-radius:var(--r-pill); }
.freshness::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.freshness.green::before{ animation:livePulse 2.4s var(--ease) infinite; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(47,125,70,.5); } 70%{ box-shadow:0 0 0 6px rgba(47,125,70,0); } 100%{ box-shadow:0 0 0 0 rgba(47,125,70,0); } }

/* Sticky courier tally + assistant surface: give them the same soft depth */
.cr-totals{ border-radius:var(--r-md); box-shadow:var(--elev-2); }
.as-msg{ border-radius:var(--r-md); }

/* --- Motion: a slightly richer, staggered rise-in (reduced-motion safe below) --- */
@keyframes riseIn{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }
/* `backwards` (not `both`): the entrance fills only the START, so it does NOT lock
   `transform` afterward — otherwise :hover lifts are ignored (only shadow shows). */
.kpi, .panel, .trend-panel, .cm-card, .drv-card{ animation:riseIn .52s var(--ease) backwards; }
.cust-metrics .cm-card:nth-child(2), .drv-grid .drv-card:nth-child(2){ animation-delay:.05s; }
.cust-metrics .cm-card:nth-child(3), .drv-grid .drv-card:nth-child(3){ animation-delay:.10s; }
.cust-metrics .cm-card:nth-child(4), .drv-grid .drv-card:nth-child(4){ animation-delay:.15s; }
.cust-metrics .cm-card:nth-child(5){ animation-delay:.20s; }
.cust-metrics .cm-card:nth-child(6){ animation-delay:.25s; }
.drv-grid .drv-card:nth-child(n+5){ animation-delay:.20s; }

@media (prefers-reduced-motion: reduce){
  .kpi, .panel, .trend-panel, .cm-card, .drv-card{ animation:none !important; }
  .freshness.green::before{ animation:none; }
  .refresh-btn, .export, .status-save{ transition:none; }
}

/* --- Mobile: the rail is dark now, so recolor the tab pills / account button --- */

/* ===== Videos tab — drag-and-drop 360 video uploader ===== */
.vid-toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.vid-toolbar .search{ flex:1; min-width:180px; }
.vid-toggle{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); white-space:nowrap; cursor:pointer; }

/* Collection filter: one line that scrolls sideways, there are 80 of them */
.vid-collections-bar{ display:block; margin:0 0 14px; }
#vid-collections{ display:flex; max-width:100%; overflow-x:auto; scrollbar-width:thin; }
#vid-collections .seg-btn{ flex:0 0 auto; white-space:nowrap; }

/* Tray: every draggable video chip in view; it wraps instead of hiding the rest off to the side */
.vid-tray{ display:flex; flex-wrap:wrap; gap:12px; max-height:380px; overflow-y:auto; padding:4px 2px 10px; }
.vid-chip{ flex:0 0 auto; width:120px; cursor:grab; user-select:none;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); padding:6px; text-align:center;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.vid-chip:hover{ box-shadow:var(--elev-1); transform:translateY(-1px); }
.vid-chip:active{ cursor:grabbing; }
.vid-chip.armed{ border-color:var(--red); box-shadow:0 0 0 2px rgba(200,56,31,.18); }
.vid-chip.uploading{ opacity:.55; pointer-events:none; }
.vid-thumb{ position:relative; aspect-ratio:1; border-radius:4px; overflow:hidden; background:#141516; display:flex; align-items:center; justify-content:center; }
.vid-thumb img{ width:100%; height:100%; object-fit:cover; }
.vid-thumb .vid-play{ position:absolute; color:#fff; font-size:22px; opacity:.9; text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none; }
.vid-thumb.noimg{ background:#20211f; }
.vid-name{ margin-top:5px; font-size:11px; line-height:1.25; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.vid-spin{ margin-top:4px; font-size:10px; color:var(--red); font-weight:600; }

/* Product grid: square tiles */
.vid-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px,1fr)); gap:12px; }
.vid-tile{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); overflow:hidden; cursor:pointer;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.vid-tile:hover{ box-shadow:var(--elev-1); transform:translateY(-1px); }
.vid-tile:focus-visible{ outline:2px solid var(--red); outline-offset:1px; }
.vid-tile.drop-hover{ border-color:var(--red); box-shadow:0 0 0 3px rgba(200,56,31,.22); transform:translateY(-2px); }
.vid-tile-img{ position:relative; aspect-ratio:1; background:var(--tb-f0f0ec,#f0f0ec); display:flex; align-items:center; justify-content:center; }
.vid-tile-img img{ width:100%; height:100%; object-fit:cover; }
.vid-noimg{ font-size:11px; color:var(--muted); }
.vid-badge{ position:absolute; top:5px; left:5px; background:rgba(20,21,22,.82); color:#fff; font-size:10px; font-weight:600;
  padding:2px 6px; border-radius:var(--r-pill); letter-spacing:.02em; }
.vid-status{ position:absolute; top:5px; right:5px; background:var(--card); color:var(--muted); font-size:10px; font-weight:600;
  padding:2px 6px; border-radius:4px; text-transform:capitalize; }
.vid-tile{ content-visibility:auto; contain-intrinsic-size:auto 160px; }
.vid-drop-hint{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(200,56,31,.85); color:#fff; font-size:12px; font-weight:700; opacity:0; transition:opacity .12s var(--ease); pointer-events:none; }
.vid-tile.drop-hover .vid-drop-hint{ opacity:1; }
.vid-tile-spin{ position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--card) 80%, transparent); color:var(--red); font-size:12px; font-weight:700; }
.vid-tile.uploading{ pointer-events:none; }
.vid-tile.uploading .vid-tile-spin{ display:flex; }
.vid-tile-name{ padding:6px 7px; font-size:11px; line-height:1.25; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* Toast */
#vid-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
  background:var(--ink); color:var(--on-ink); padding:11px 18px; border-radius:var(--r-pill); font-size:13px; font-weight:500;
  box-shadow:var(--elev-2); opacity:0; pointer-events:none; z-index:60; transition:opacity .2s var(--ease), transform .2s var(--ease); max-width:88vw; }
#vid-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#vid-toast.bad{ background:var(--red); }
@media (prefers-reduced-motion: reduce){ .vid-chip, .vid-tile, #vid-toast{ transition:none; } }

/* ---------------------------------------------------------------------------
   Daily Report tab (admin only). Arabic prose renders RTL inside section
   bodies; figures and metric names stay LTR via <bdi>. Hairlines, no shadows,
   red reserved for the single accent — same rules as the rest of the hub.
--------------------------------------------------------------------------- */
.rep-wrap { display: grid; grid-template-columns: 190px 1fr; gap: 22px; align-items: start; }
.rep-empty { padding: 40px 0; color: var(--muted); }

.rep-rail { border-right: 1px solid var(--line); padding-right: 14px; max-height: 78vh; overflow-y: auto; }
.rep-railgroup { margin-bottom: 14px; }
.rep-railmonth { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.rep-raildate { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: none; border: 0; border-left: 2px solid transparent; padding: 6px 9px;
  font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; border-radius: var(--r-sm); }
.rep-raildate:hover { background: var(--hoverbg); }
.rep-raildate.on { background: var(--ink); color:var(--on-ink); border-left-color: var(--red); }
.rep-railtag { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 7px; color: var(--muted); }
.rep-raildate.on .rep-railtag { border-color: color-mix(in srgb, var(--on-ink) 40%, transparent); color: var(--on-ink); }

.rep-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px; }
.rep-date { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px; }
.rep-headline { font-size: 20px; line-height: 1.5; margin: 8px 0 0; font-weight: 600; }
.rep-warn { color: var(--red); }

.rep-warnbox { border: 1px solid var(--red); border-radius: var(--r-md); padding: 12px 16px; background: var(--card);
  margin-bottom: 18px; font-size: 13px; }
.rep-warnbox ul { margin: 6px 0 0; padding-inline-start: 18px; }

.rep-stitle { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 10px; }
.rep-actions .rep-stitle { margin-top: 0; }

.rep-action { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-md);
  box-shadow: var(--elev-1); padding: 16px 18px; margin-bottom: 12px;
  transition: box-shadow .2s var(--ease); }
.rep-action:hover { box-shadow: var(--elev-2); }
.rep-action.is-done { opacity: .55; }
.rep-action.is-dismissed { opacity: .4; }
.rep-ahead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.rep-acat { letter-spacing: .04em; }
.rep-asev { text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 1px 8px; }
.rep-sev-high { border-color: var(--red); color: var(--red); }
.rep-aimpact { margin-inline-start: auto; color: var(--ink); font-weight: 600; }
.rep-astreak { color: var(--red); }
.rep-astate { border: 1px solid var(--ink); border-radius: var(--r-pill); padding: 1px 8px; color: var(--ink); }
.rep-atitle { font-size: 15px; margin: 8px 0 4px; line-height: 1.5; }
.rep-awhy { font-size: 13px; line-height: 1.7; margin: 0 0 8px; color: var(--tf-3a3c3a,#3a3c3a); }
.rep-aev { margin: 0 0 10px; padding-inline-start: 18px; font-size: 12px; color: var(--muted); }
.rep-aev li { margin-bottom: 2px; }
.rep-abtns { display: flex; gap: 8px; }
.rep-abtn { font: inherit; font-size: 12px; background: none; border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px 14px; cursor: pointer; color: var(--ink);
  transition: border-color .15s var(--ease), color .15s var(--ease); }
.rep-abtn:hover:not(:disabled) { border-color: var(--ink); }
.rep-abtn-no:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.rep-abtn:disabled { opacity: .4; cursor: default; }

.rep-section { margin-bottom: 4px; }
.rep-sbody { font-size: 13.5px; line-height: 1.85; }
.rep-sbody p { margin: 0 0 10px; }
.rep-sbody ul { margin: 0 0 10px; padding-inline-start: 20px; }
.rep-sbody li { margin-bottom: 4px; }

.rep-raw { margin-top: 26px; font-size: 12px; color: var(--muted); }
.rep-raw pre { background: var(--hoverbg); padding: 12px; border-radius: var(--r-sm); overflow-x: auto; max-height: 320px; }

@media (max-width: 760px) {
  .rep-wrap { grid-template-columns: 1fr; }
  .rep-rail { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px;
    max-height: none; display: flex; gap: 10px; overflow-x: auto; }
  .rep-railgroup { margin-bottom: 0; display: flex; gap: 6px; align-items: center; }
  .rep-aimpact { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rep-action, .rep-abtn { transition: none; }
}

/* Product strip on an action card: thumbnail + name, linking to Shopify admin.
   Ids and images come from the facts pack, never from the model. */
.rep-prods { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.rep-prod { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 12px 4px 4px;
  color: var(--ink); font-size: 12.5px; max-width: 100%;
  transition: border-color .15s var(--ease); }
.rep-prod:hover { border-color: var(--ink); }
.rep-pthumb { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  background: var(--hoverbg); flex-shrink: 0; display: block; }
.rep-pthumb-empty { display: block; }
.rep-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }

/* Product names linked inside the written sections. */
.rep-plink { color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 3px; }
.rep-plink:hover { text-decoration-color: var(--red); color: var(--red); }

/* VA "what customers ask about" → product view: a draft piece has no storefront page */
.va-draft{ font-family:var(--sans); font-size:9px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); padding:1px 5px; margin-left:6px; border-radius:var(--r-pill); }
#va-topics .nm-name a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
#va-topics .nm-name a:hover{ border-bottom-color:var(--ink); }

/* VA running-cost card (admin only) */
.va-cost-hero{ display:flex; align-items:baseline; gap:10px; padding:2px 0 14px; border-bottom:1px solid var(--rowline); }
.va-cost-hero b{ font-size:30px; letter-spacing:-.5px; }
.va-cost-hero span{ font-family:var(--sans); font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
.va-cost-note{ font-size:11px; line-height:1.55; color:var(--muted); padding-top:12px; }

/* ---- Stuck orders panel (Orders tab; fed by the n8n Order Sweeper) ---- */
.stuck{ border:1px solid var(--line); border-left:2px solid var(--red); background:var(--card);
  border-radius:2px; margin-bottom:18px; }
.stuck-head{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px;
  background:none; border:0; font:inherit; color:inherit; cursor:pointer; text-align:left; }
.stuck-head:hover{ background:var(--hoverbg); }
.stuck-title{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.stuck-sum{ flex:1; font-size:12px; color:var(--muted); }
.stuck-stale{ color:var(--red); font-weight:600; margin-left:6px; }
.stuck-chev{ font-size:16px; color:var(--muted); transition:transform .18s ease; }
.stuck-head[aria-expanded="true"] .stuck-chev{ transform:rotate(90deg); }
.stuck-body{ border-top:1px solid var(--line); padding:4px 14px 10px; }
.stuck-note{ font-size:12px; color:var(--muted); margin:10px 0 12px; }
.stuck-actions{ margin:0 0 12px; }
/* Nothing flagged is a calm state, not an alarm — drop the red spine. */
.stuck-clear{ border-left-color:var(--line); }
.stuck-clear .stuck-sum{ font-style:italic; }
.stuck-note code{ font-size:11px; background:var(--bg); padding:1px 5px; border:1px solid var(--line); }
.stchip.st-mild{ color:var(--tf-8a6d1f,#8a6d1f); }
.stchip.st-warn{ color:var(--tf-c05c0a,#c05c0a); }
.stchip.st-crit{ color:var(--red); }
@media (prefers-reduced-motion: reduce){ .stuck-chev{ transition:none; } }

/* --- Needs your input -----------------------------------------------------
   The list of things no API reports. Deliberately loud: a missed Bosta payout
   is ~120,000 EGP the dashboard silently believes it does not have, so this
   block outranks the panels below it visually as well as in reading order. */
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inputs-block{ margin:14px 0 4px; padding:12px 14px; border:1px solid var(--line);
  border-radius:10px; background:var(--card); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inputs-block.ok{ display:flex; align-items:center; gap:8px; color:var(--muted);
  font-size:12px; border-style:dashed; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inputs-block.ok .fic{ width:15px; height:15px; color:var(--pos); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-intro{ font-size:11px; color:var(--muted); margin:-2px 0 8px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-row{ display:grid; grid-template-columns:74px 1fr auto; gap:10px;
  align-items:start; padding:9px 0; border-top:1px solid var(--line); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-row:first-of-type{ border-top:0; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-when{ font-size:10.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 0; color:var(--muted); font-variant-numeric:tabular-nums; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-row.late .inp-when,
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-row.never .inp-when{ color:var(--red); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-what{ display:flex; flex-direction:column; gap:2px; min-width:0; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-what b{ font-size:13px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-why{ font-size:11px; color:var(--muted); line-height:1.45; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-where{ font-size:10.5px; color:var(--muted); opacity:.8; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-last{ font-size:11px; color:var(--muted); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-short{ display:block; font-size:11px; color:var(--red); margin-top:2px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .exp-row.row-warn{ border-left:2px solid var(--red); padding-left:8px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .exp-sec-head.sub{ margin-top:14px; font-size:11px; opacity:.75; }
@media (max-width:760px){
  :is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-row{ grid-template-columns:1fr; gap:3px; }
  :is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inp-last{ font-size:10.5px; }
}

/* ===== Money position + chart of accounts (2026-09-05) =====================
   The ledger-driven "where is the money" table and the collapsible chart of
   accounts. Monochrome like the rest of the tab; red only for warnings. */
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-table{ border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:18px; background:var(--card,#fff); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-row{ position:relative; border-bottom:1px solid var(--rowline); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-row:last-of-type{ border-bottom:0; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-row-head{ display:grid; grid-template-columns:34px 1fr auto auto 18px; align-items:center; gap:10px;
  width:100%; padding:11px 40px 11px 12px; background:none; border:0; font:inherit; color:inherit; text-align:left; cursor:pointer; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-row-head:hover{ background:var(--hoverbg); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-icon{ display:flex; align-items:center; justify-content:center; color:var(--muted); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-icon .fic{ width:20px; height:20px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-name{ font-size:15px; font-weight:600; display:flex; flex-direction:column; gap:1px; min-width:0; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-meta{ font-size:11px; font-weight:400; color:var(--muted); letter-spacing:.02em; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-badge{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:2px 8px; white-space:nowrap; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-badge.ok{ color:var(--pos); border-color:var(--pos); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-badge.warn{ color:var(--red); border-color:var(--red); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-amt{ font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-amt small{ font-size:10px; color:var(--muted); font-weight:400; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-unknown .ma-amt{ color:var(--muted); font-weight:400; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-chev{ color:var(--muted); font-size:11px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-note{ padding:0 12px 10px 56px; font-size:12px; color:var(--red); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .fin-info{ position:absolute; top:10px; right:10px; background:none; border:0; padding:2px; cursor:pointer; color:var(--muted); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .fin-info:hover{ color:var(--ink); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .fin-info .fic{ width:14px; height:14px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .fin-hintbox{ margin:0 12px 10px 56px; padding:8px 10px; font-size:12.5px; color:var(--muted);
  border-left:2px solid var(--line); background:var(--hoverbg); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-posts{ margin:0 12px 12px 12px; border-top:1px dashed var(--line); padding-top:6px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-post{ display:grid; grid-template-columns:78px 1fr auto 110px; gap:10px; padding:4px 0;
  font-size:12.5px; font-variant-numeric:tabular-nums; border-bottom:1px solid var(--rowline); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-post:last-child{ border-bottom:0; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-post-head{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-post-date{ color:var(--muted); white-space:nowrap; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-post-memo{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-post-amt.neg{ color:var(--red); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-post-amt.pos{ color:var(--pos); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-post-run{ text-align:right; color:var(--muted); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-total{ display:flex; justify-content:space-between; align-items:center; padding:12px;
  border-top:2px solid var(--ink); font-weight:700; font-size:15px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-total.warn{ color:var(--red); font-weight:600; font-size:13.5px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .coa-head .exp-sec-sum{ display:flex; align-items:center; gap:12px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .coa-proof{ font-size:12px; color:var(--muted); text-transform:none; letter-spacing:0; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .coa-proof.bad{ color:var(--red); font-weight:700; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .coa-group{ margin-bottom:14px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .coa-group-head{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  padding:8px 2px 6px; border-bottom:1px solid var(--line); margin-bottom:2px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .coa-row{ border-bottom:1px solid var(--rowline); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .coa-row.zero .ma-name{ font-weight:400; color:var(--muted); }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .coa-actions{ display:flex; align-items:center; gap:12px; margin:10px 0 14px; flex-wrap:wrap; }
@media (max-width:700px){
  :is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-row-head{ grid-template-columns:28px 1fr auto 14px; }
  :is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-badge{ display:none; }
  :is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-post{ grid-template-columns:64px 1fr auto; }
  :is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-post-run{ display:none; }
}

/* Each driver's pot under "Money with drivers", with the تم الاستلام button */
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-drivers{ margin:0 12px 12px 56px; border-top:1px dashed var(--line); padding-top:6px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-drv{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:6px 0;
  border-bottom:1px solid var(--rowline); font-size:12.5px; font-variant-numeric:tabular-nums; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-drv:last-child{ border-bottom:0; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-drv-name{ min-width:0; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-drv-amt{ font-weight:600; white-space:nowrap; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .drv-recv{ font-family:inherit; white-space:nowrap; }
@media (max-width:640px){
  :is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-drivers{ margin-left:12px; }
  :is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-drv{ grid-template-columns:1fr auto; }
  :is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .drv-recv{ grid-column:1 / -1; justify-self:end; }
}

/* Bonus + correction controls on a driver's line */
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-drv{ grid-template-columns:1fr auto auto; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-drv-act{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-drv-act .drv-bonus{ width:92px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-drv-empty .ma-drv-amt{ color:var(--muted); font-weight:400; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-drv-adjs{ grid-column:1 / -1; padding-left:8px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .ma-drv-adj{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:2px 0; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .drv-adj-form{ grid-column:1 / -1; margin:6px 0 2px; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .inv-bad{ border-color:var(--red) !important; }
@media (max-width:640px){
  :is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .drv-recv{ grid-column:auto; }
}
/* the "paid from" picker that replaces a bill's checkbox while an account is chosen */
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .pl-pick{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
:is(#finance-view,#invoices-view,#salaries-view,#paymob-view) .pl-pick .exp-pay-src{ max-width:200px; }

/* ============================================================================
   INVOICES TAB (2026-09-07): a sub-item under Finance in the rail, the owed
   strip, paid / still-owed on each row, the search box, driver split, totals.
   ========================================================================== */

.inv-owed{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding:10px 14px; margin-bottom:12px;
  border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--r-sm, 8px); font-size:13px; }
.inv-owed{ display:block; }
.inv-owed-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.inv-owed-amt{ font-size:18px; font-weight:700; }
.inv-owed .out-totals{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.inv-owed .exp-list{ margin-top:6px; }
.inv-search{ margin-bottom:10px; }
.inv-search input{ width:100%; max-width:460px; }
.inv-paid{ display:block; font-size:11px; color:var(--muted); margin-top:2px; }
.inv-paid b{ font-weight:600; }
.inv-due{ color:var(--red); }
.inv-settled{ color:var(--muted); }
/* A payment fee is money out that is not the supplier's: shown beside the paid
   line, muted, so it never reads as part of what he was owed. */
.inv-fee{ color:var(--muted); }
.hist-row-due{ border-left:2px solid var(--red); padding-left:8px; }
.ma-drv-split{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--ink); margin:2px 0; }
.ma-drv-split b{ font-weight:600; }
.ma-drv-split .ma-drv-out{ color:var(--red); font-weight:600; }
/* His per-delivery fee, acknowledged order by order under his line. */
.ma-drv-fee{ grid-column:1/-1; font-family:var(--sans); font-size:11px; padding:4px 0 0; }
.ma-drv-fee .fee-amt{ color:var(--ink); }

/* The weekly delivery bonus, under a driver's line. Two tests, both shown: the
   week and the month so far. A ✕ on either is why nothing is owed. */
.ma-drv-bonus{ grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  font-family:var(--sans); font-size:11px; color:var(--muted); padding:6px 0 0; }
.bon-head{ text-transform:uppercase; letter-spacing:.8px; }
.bon-nums{ display:flex; flex-wrap:wrap; gap:4px 12px; font-variant-numeric:tabular-nums; }
.bon-nums b{ color:var(--ink); }
.bon-mark{ font-weight:700; }
.bon-mark.ok{ color:var(--pos); } .bon-mark.no{ color:var(--red); }
.bon-state.due{ color:var(--ink); font-weight:600; }
.bon-state.due b{ color:var(--pos); }
.bon-state.no{ color:var(--red); }
.bon-state.paid{ color:var(--pos); }
.bon-use{ font-family:var(--sans); font-size:11px; }

/* Suppliers registered by hand on the Invoices tab. A chip is a NAME, not money,
   so it stays quiet: outlined, and filled only once he has invoices filed. */
.vend-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 0 4px; }
.vend-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:12px;
  padding:4px 8px; border:1px solid var(--line); border-radius:2px; background:var(--card); color:var(--muted); }
.vend-chip.on{ color:var(--ink); border-color:var(--ink); }
.vend-del{ background:none; border:none; cursor:pointer; opacity:.45; padding:0 2px; line-height:1;
  font-family:var(--sans); font-size:12px; color:var(--ink); transition:opacity .15s, color .15s; }
.vend-del:hover{ opacity:1; color:var(--red); }
.vend-del.arm{ opacity:1; color:var(--red); font-weight:600; }

/* Money in / money out grouped by type: like sits with like, each block totalled. */
.exp-grp{ margin-bottom:10px; }
.exp-grp-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--muted);
  padding:8px 2px 4px; border-bottom:1px solid var(--line); }
.exp-grp-n{ font-weight:400; opacity:.7; }
.exp-grp-sum{ color:var(--ink); font-variant-numeric:tabular-nums; }
.exp-grp-more{ font-family:var(--sans); font-size:11px; color:var(--muted); padding:6px 2px; }
.out-totals{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--muted); padding:8px 0 6px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.out-totals b{ color:var(--ink); font-weight:600; }
.out-totals .out-totals-all{ color:var(--ink); }
.out-totals .fic{ width:13px; height:13px; vertical-align:-2px; }

/* Two-tap delete on Finance / Invoices (2026-09-06): the armed state. */
.exp-del.arm, .adj-del.arm, .pur-del.arm, .acc-del.arm{ opacity:1; color:#fff; background:var(--red); font-family:var(--sans); font-size:11px; font-weight:600; padding:3px 8px; line-height:1.4; border-radius:var(--r-sm, 6px); }

/* Courier cards flip to their order list (2026-09-06). */
.drv-card{ cursor:pointer; }
.drv-grid{ perspective:1400px; }
/* One card turns in place (couriers.js flipCard): away edge-on, side swapped, back to face you.
   Reduced motion: flipCard swaps with no turn. */
.drv-card.no-rise{ animation:none; }
.drv-card{ backface-visibility:hidden; }   /* the turn itself is inline transitions in couriers.js flipCard */
.drv-flip-hint{ margin-inline-start:auto; font-family:var(--sans); font-size:10px; color:var(--muted); white-space:nowrap; }
.drv-orders{ display:grid; gap:10px; }
.drv-og-head{ display:flex; align-items:center; gap:6px; font-family:var(--sans); font-size:12px; font-weight:700; margin-bottom:4px; }
.drv-og-head i{ width:9px; height:9px; display:inline-block; }
.drv-og-head .drv-mut{ font-weight:400; margin-inline-start:auto; }
.drv-op{ display:grid; grid-template-columns:118px 1fr; gap:4px 8px; padding:4px 0; border-top:1px dashed var(--line); font-family:var(--sans); font-size:12px; }
.drv-op-k{ font-weight:600; }
.drv-op-rows{ display:flex; flex-wrap:wrap; gap:3px 6px; }
.drv-oo{ border:1px solid var(--line); border-radius:2px; padding:1px 6px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.drv-oo b{ font-weight:600; }




/* Revenue card: the before-cancellations line (2026-09-06) */
/* Six cards, three by two, every card the same shape: label, number, then one
   footer row with the change on the left and one fact on the right. */
.kpis{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:760px){ .kpis{ grid-template-columns:repeat(2, 1fr); } }
.kpis .kpi{ display:flex; flex-direction:column; }
.kpis .kpi .kpi-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:10px; }
.kpis .kpi .kpi-delta{ margin-top:0; }
.kpis .kpi .kpi-sub{ margin:0; font-size:11.5px; color:var(--muted); line-height:1.3; text-align:end; white-space:nowrap; }
.kpis .kpi .kpi-sub b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
@media (max-width:760px){ .kpis .kpi .kpi-foot{ flex-direction:column; align-items:flex-start; gap:6px; } .kpis .kpi .kpi-sub{ text-align:start; white-space:normal; } }
.kpi-sub-mut{ opacity:.8; }

/* Generate report (2026-09-06): the Daily Report tab became a panel under the Stats header */
.report-panel{ margin:0 0 22px; padding:14px 16px 6px; background:var(--card, #fff); border:1px solid var(--line); border-radius:var(--r-sm, 8px); }
.report-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.report-panel-head > div{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.report-status{ font-family:var(--sans); font-size:11.5px; color:var(--muted); }
#open-reports, #gen-report{ margin-inline-start:8px; }
#open-reports{ font-size:11px; padding:6px 12px; }

/* The Bank row postings, filtered to one bank (2026-09-08) */
.ma-posts .bank-filter{ margin:6px 0 10px; }
.ma-posts .bank-filter .seg-btn{ font-size:12px; padding:3px 10px; }

/* ---- Supplier page (Invoices tab, 2026-09-08): one vendor, every invoice ---- */
.sup-page{ padding-top:4px; }
.sup-back{ font-family:var(--sans); font-size:12px; margin-bottom:8px; }
.sup-title{ font-family:var(--sans); font-size:22px; font-weight:700; margin:2px 0 12px; letter-spacing:-.01em; }
.sup-title .drv-mut{ font-size:12px; font-weight:400; margin-inline-start:8px; }
.sup-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:10px; }
.sup-stat{ background:var(--card); border:1px solid var(--line); border-radius:2px; padding:12px 14px; }
.sup-stat.cm-warn{ border-color:var(--red); }
.sup-stat .cm-value{ font-size:20px; }
.sup-bits{ margin-bottom:12px; }
.sup-months{ margin-bottom:14px; font-family:var(--sans); font-size:12.5px; }
.sup-mrow{ display:grid; grid-template-columns:1.4fr .7fr 1fr 1fr 1fr; gap:8px; padding:5px 2px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.sup-mrow span:not(:first-child){ text-align:end; }
.sup-mhead{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:1px solid var(--ink); }
@media (max-width:600px){ .sup-mrow{ grid-template-columns:1.2fr .6fr 1fr 1fr; } .sup-mrow span:nth-child(4){ display:none; } }

/* ── Owed-per-supplier blocks on the Invoices tab (2026-09-10) ───────────────
   Each supplier is his own block inside the red "Still owed" panel, so the
   total at the top always has its invoices under it. */
.inv-owed-grp{ margin-bottom:6px; }
.inv-owed-grp .exp-grp-head{ padding-top:10px; }
.inv-owed-grp .exp-grp-head .lnk{ font-size:12px; font-weight:700; color:var(--ink); }

/* ── Payment voucher (إيصال استلام) — screen form + A4 print ────────────────
   The sheet is authored at real A4 width so the on-screen preview and the
   printed page are the same object, not two layouts that can drift. */
.pv-box{ width:min(820px,100%); }
.pv-note{ font-family:var(--sans); font-size:11px; color:var(--muted); margin:2px 0 10px; }
.pv-preview-label{ font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:14px 0 6px; padding-top:12px; border-top:1px solid var(--line); }
.pv-sheet-wrap{ background:var(--bg); padding:12px; overflow-x:auto; }
.pv-sheet{ width:210mm; min-height:148mm; background:var(--card); color:var(--ink); padding:18mm 16mm;
  border:1px solid var(--line); font-family:var(--sans); box-sizing:border-box; }
.pv-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:6mm; border-bottom:2px solid var(--ink); }
.pv-logo{ height:22mm; width:auto; object-fit:contain; }
.pv-title{ font-size:22pt; font-weight:700; letter-spacing:-.01em; }
.pv-date{ font-size:11pt; color:var(--dk-text2,#444); white-space:nowrap; }
.pv-date span{ color:#777; font-size:9pt; display:block; }
.pv-body{ margin-top:12mm; }
.pv-line{ display:flex; align-items:flex-end; gap:6mm; margin-bottom:10mm; font-size:13pt; }
.pv-label{ flex:none; color:var(--dk-text2,#444); }
.pv-value{ flex:1; border-bottom:1px dotted var(--ink); padding-bottom:2mm; min-height:8mm; font-weight:600; }
.pv-amount-line .pv-value{ font-variant-numeric:tabular-nums; }
.pv-signs{ display:flex; gap:10mm; margin-top:22mm; }
.pv-sign{ flex:1; }
.pv-sign-rule{ border-bottom:1px solid var(--ink); height:14mm; }
.pv-sign-label{ margin-top:2mm; font-size:11pt; color:var(--dk-text2,#444); text-align:center; }

/* Printing prints the SHEET and nothing else: the modal, its form and the whole
   hub shell are hidden rather than re-styled, so a stray panel can never ride
   along onto the paper. */
@media print{
  @page{ size:A4; margin:0; }
  body{ background:var(--card); }
  body.pv-open > *:not(#pay-form-host){ display:none !important; }
  body.pv-open .pv-modal .cal-modal-h, body.pv-open .pv-modal label, body.pv-open .pv-modal .pv-note,
  body.pv-open .pv-modal .cal-modal-actions, body.pv-open .pv-modal .pv-preview-label{ display:none !important; }
  body.pv-open .pv-modal{ position:static; inset:auto; background:none; padding:0; display:block; }
  body.pv-open .pv-modal .cal-modal-box{ border:0; padding:0; width:auto; max-height:none; overflow:visible; animation:none; }
  body.pv-open .pv-sheet-wrap{ background:var(--card); padding:0; overflow:visible; }
  body.pv-open .pv-sheet{ border:0; width:auto; min-height:auto; padding:18mm 16mm; }
}

/* ---- Ads tab (2026-09-17) ------------------------------------------------
   Hairlines, not shadows; 2px radius; red is the only accent. Nothing here
   invents a colour: --pos marks a cell at or above target, --red one below its
   floor, everything else stays ink on white. */
.ads-head-btns{ display:flex; gap:8px; }
.ads-kpis{ grid-template-columns:repeat(5,1fr); }
#ads-head .empty{ margin-bottom:18px; }

.ads-matrix{ display:grid; grid-template-columns:120px 1fr 1fr; gap:10px; align-items:stretch; }
.ads-mx-corner{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--muted); display:flex; align-items:flex-end; padding-bottom:6px; }
.ads-mx-col{ font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:6px; }
.ads-mx-row{ font-family:var(--sans); font-size:12px; color:var(--ink); display:flex; align-items:center;
  border-right:1px solid var(--line); padding-right:10px; }
.ads-mx-box{ display:flex; flex-direction:column; gap:8px; }
.ads-mx-none{ font-family:var(--sans); font-size:11px; color:var(--muted); padding:14px 0; }

.ads-cell{ border:1px solid var(--line); border-radius:2px; padding:10px 11px; background:var(--card); }
.ads-cell.ads-ok{ border-left:2px solid var(--pos); }
.ads-cell.ads-bad{ border-left:2px solid var(--red); }
.ads-cell-off{ opacity:.68; }
.ads-cell-h{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.ads-cell-key{ font-family:var(--sans); font-size:10px; letter-spacing:1px; color:var(--muted); }
.ads-cell-roas{ font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; }
.ads-cell-label{ font-size:12px; margin:2px 0 7px; }
.ads-cell .bar{ width:100%; margin-bottom:7px; }
.ads-cell-figs{ display:flex; justify-content:space-between; font-family:var(--sans); font-size:11px;
  color:var(--muted); font-variant-numeric:tabular-nums; }

.ads-rest{ margin-top:20px; }
.ads-rest-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }

.ads-pace{ margin-top:20px; }
.ads-pace-bar{ position:relative; height:6px; background:var(--dk-surface,#e7e7e3); }
.ads-pace-bar > i{ display:block; height:100%; background:var(--ink); }
.ads-pace-bar > b{ position:absolute; top:-3px; width:1px; height:12px; background:var(--red); }
.ads-pace-legend{ display:flex; justify-content:space-between; gap:10px; margin-top:7px;
  font-family:var(--sans); font-size:11px; color:var(--muted); }
.ads-pace-legend .ads-ok{ color:var(--pos); }
.ads-pace-legend .ads-bad{ color:var(--red); }
.ads-pace-legend .ads-warnx{ color:var(--ink); }

.ads-note-group + .ads-note-group{ margin-top:18px; }
.ads-note{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
  padding:11px 0; border-bottom:1px solid var(--rowline); }
.ads-note:last-child{ border-bottom:none; }
.ads-note-t{ font-size:13px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ads-note-w, .ads-note-e, .ads-note-a, .ads-note-m{ font-family:var(--sans); font-size:11px; margin-top:4px; }
.ads-note-w{ color:var(--ink); }
.ads-note-e, .ads-note-m{ color:var(--muted); font-variant-numeric:tabular-nums; }
.ads-note-a{ color:var(--ink); font-weight:600; }
.ads-note-btns{ display:flex; gap:6px; flex:none; }
.ads-sev{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1px;
  padding:2px 7px; border:1px solid currentColor; }
.ads-sev-urgent{ color:var(--red); }
.ads-sev-warn{ color:var(--ink); }
.ads-sev-win{ color:var(--pos); }
.ads-sev-info{ color:var(--muted); }

.ads-crow{ flex-wrap:wrap; }
.ads-cname{ flex:1 1 180px; font-size:13px; }
.ads-cchip{ padding:3px 9px; font-size:11px; }
.ads-ccell{ font-family:var(--sans); font-size:11px; color:var(--muted); }
.ads-chook{ flex:1 1 200px; font-family:var(--sans); font-size:11px; color:var(--muted); }
.ads-danger{ color:var(--red); border-color:var(--red); }

.ads-cform{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:11px 0;
  border-bottom:1px solid var(--rowline); }
.ads-cform input, .ads-cform select{ font-family:var(--sans); font-size:12px; padding:7px 9px;
  border:1px solid var(--line); border-radius:2px; background:var(--card); color:var(--ink); }
.ads-cform input[name="name"]{ flex:1 1 200px; }

.ads-pform{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; padding:12px 0;
  border-bottom:1px solid var(--rowline); }
.ads-pform:last-child{ border-bottom:none; }
.ads-pform label{ display:flex; flex-direction:column; gap:4px; font-family:var(--sans);
  font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.ads-pform input, .ads-pform textarea{ font-family:var(--sans); font-size:12px; padding:7px 9px;
  border:1px solid var(--line); border-radius:2px; background:var(--card); color:var(--ink); width:110px;
  text-transform:none; letter-spacing:0; }
.ads-pform input[name="label"]{ width:190px; }
.ads-pform .ads-pchk{ flex-direction:row; align-items:center; gap:6px; }
.ads-pform .ads-pchk input{ width:auto; }
.ads-palias textarea{ width:240px; }
.ads-pkey{ font-family:var(--sans); font-size:11px; letter-spacing:1px; display:flex;
  flex-direction:column; gap:3px; width:150px; }
.ads-pkey small{ letter-spacing:0; text-transform:none; color:var(--muted); font-size:10px; }

@media (max-width:900px){
  .ads-kpis{ grid-template-columns:repeat(2,1fr); }
  .ads-matrix{ grid-template-columns:1fr; }
  .ads-mx-corner, .ads-mx-row{ border:none; padding:0; }
  .ads-mx-row{ font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); margin-top:8px; }
  .ads-note{ flex-direction:column; }
  .ads-pform input, .ads-pform textarea, .ads-palias textarea{ width:100%; }
  .ads-pform label{ flex:1 1 140px; }
}

/* Ads tab manual: the same collapsible guide-box the Assistant tab uses, with a
   language toggle pinned to the top right in BOTH directions (the manual flips
   to dir=rtl in Arabic, so the button is positioned, not floated). */
.ads-manual-box{ position:relative; padding:0; }
.ads-manual{ position:relative; padding:16px 18px 18px; }
.ads-manual-title{ font-family:var(--sans); font-size:13px; letter-spacing:.4px; color:var(--ink);
  margin:0 0 4px; padding-inline-end:44px; }
.ads-manual-lang{ position:absolute; top:12px; inset-inline-end:14px; min-width:38px; text-align:center;
  font-weight:600; letter-spacing:.5px; }
.ads-manual-plan{ margin:4px 0 10px; font-size:13px; }
.ads-manual-plan a{ color:var(--red); text-decoration:none; border-bottom:1px solid var(--red); }
.ads-plan-link{ text-decoration:none; }
.ads-manual-sec{ margin-top:14px; }
.ads-manual-sec h3{ font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--ink); margin:0 0 6px; padding-bottom:6px; border-bottom:1px solid var(--rowline); }
.ads-manual-sec p{ margin:0 0 6px; }
.ads-manual-sec ul{ margin:0; padding-inline-start:18px; }
.ads-manual-sec li{ margin-bottom:3px; }
.ads-manual[dir="rtl"]{ line-height:2; }

/* ---- Wall Grid Requests (wallreq.js, 2026-09-22) ---- */
.wgr-filter{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
#wallreq-list{ display:grid; gap:12px; padding-bottom:8px; }
.wgr-card{ border:1px solid var(--line); border-left:3px solid var(--red); background:var(--card); padding:14px 16px; }
.wgr-card.is-acked{ border-left-color:var(--pos); }
.wgr-top{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.wgr-name{ margin:0 0 4px; font-size:16px; font-weight:600; }
.wgr-contact{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--muted); }
.wgr-contact a{ color:var(--ink); }
.wgr-st{ font-size:11px; letter-spacing:.3px; padding:4px 10px; border:1px solid currentColor; white-space:nowrap; }
.wgr-new{ color:var(--red); }
.wgr-ok{ color:var(--pos); }
.wgr-pieces{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 14px; }
.wgr-pc{ margin:0; width:96px; }
.wgr-pc-img{ width:96px; height:96px; background:var(--dk-surface,#f2f2ee); display:flex; align-items:center; justify-content:center; }
.wgr-pc-img img{ width:100%; height:100%; object-fit:contain; display:block; }
.wgr-pc figcaption{ margin-top:6px; font-size:13px; line-height:1.3; }
.wgr-pc figcaption b{ font-variant-numeric:tabular-nums; }
.wgr-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
@media (min-width:760px){ .wgr-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.wgr-d span{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:2px; }
.wgr-d b{ font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.wgr-note{ margin:12px 0 0; font-size:14px; line-height:1.5; }
.wgr-note span{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.wgr-ack{ margin-top:14px; min-height:44px; padding:0 18px; }
.wgr-hint{ margin:6px 0 0; font-size:12px; color:var(--muted); }

/* ---- Wall Grids stats (wallstats.js, 2026-09-22) ---- */
.wst-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.wst-head .wgr-filter{ margin:0; }
.wst-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.wst-tools a.exp-cancel{ text-decoration:none; display:inline-flex; align-items:center; }
.wst-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
@media (min-width:900px){ .wst-cards{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1300px){ .wst-cards{ grid-template-columns:repeat(7,minmax(0,1fr)); } }
.wst-card{ border:1px solid var(--line); padding:12px 14px; background:var(--card); min-width:0; }
.wst-k{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.wst-v{ display:block; font-size:24px; font-weight:600; margin:6px 0 2px; font-variant-numeric:tabular-nums; }
.wst-s{ display:block; font-size:12px; color:var(--muted); line-height:1.35; }
.wst-trend{ border:1px solid var(--line); padding:14px 14px 8px; margin-bottom:16px; }
.wst-bars{ display:flex; align-items:flex-end; gap:2px; height:120px; }
.wst-day{ position:relative; flex:1 1 0; height:100%; display:flex; align-items:flex-end; min-width:2px; }
.wst-day i{ display:block; width:100%; background:var(--ink); }
.wst-day em{ position:absolute; left:50%; top:-2px; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--red); }
.wst-axis{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:6px; font-variant-numeric:tabular-nums; }
.wst-legend{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11px; color:var(--muted); margin:6px 0 0; }
.wst-lg-bar{ width:10px; height:10px; background:var(--ink); }
.wst-lg-dot{ width:7px; height:7px; border-radius:50%; background:var(--red); margin-left:10px; }
.wst-lists{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:760px){ .wst-lists{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1200px){ .wst-lists{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.wst-list{ border:1px solid var(--line); padding:12px 14px; min-width:0; }
.wst-list h4{ margin:0 0 10px; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:500; }
.wst-list ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.wst-list li{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto; align-items:center; gap:8px; font-size:13px; }
.wst-lk{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wst-bar{ height:6px; background:var(--rowline); }
.wst-bar i{ display:block; height:100%; background:var(--ink); }
.wst-list li b{ font-variant-numeric:tabular-nums; font-weight:600; text-align:right; }
.wst-list li.wst-none{ display:block; color:var(--muted); }
.wst-note{ font-size:12px; color:var(--muted); line-height:1.5; margin:14px 0 4px; }

/* --- Competitors tab (cw-, redesigned 2026-11-06) ----------------------------------
   One sans, neutral surfaces; red only for "they are cheaper" and "not read", green for
   "we are cheapest", amber for "sold out at them". Phone first; min-width adds columns. */
#competitors-view .view-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cw-flash{ border:1px solid var(--red); color:var(--red); background:var(--card); border-radius:8px; padding:8px 12px; font-size:13px; margin:0 0 12px; }
.cw-answer{ font-size:clamp(17px, 2.2vw, 20px); font-weight:500; letter-spacing:-.015em; line-height:1.35; margin:0 0 6px; max-width:60em; color:var(--ink); }
.cw-answer em{ font-style:normal; color:var(--red); }
.cw-note, .cw-legend{ font-size:12px; color:var(--muted); line-height:1.5; margin:6px 0 10px; }
.cw-legend{ margin:12px 0 4px; }
.cw-muted{ color:var(--muted); }
.cw-cheaper{ color:var(--red); }
.cw-out{ color:var(--muted); text-decoration:line-through; }
.cw-stale-list{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; color:var(--muted); margin:6px 0 14px; }
.cw-stale{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:500;
  background:var(--at-bad-tint, rgba(200,56,31,.1)); color:var(--red); cursor:help; white-space:nowrap; }
.cw-badge{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap;
  background:var(--at-track, rgba(20,21,22,.055)); color:var(--muted); font-variant-numeric:tabular-nums; }
.cw-badge-red{ background:var(--at-bad-tint, rgba(200,56,31,.1)); color:var(--red); }
.cw-badge-warn{ background:color-mix(in srgb, var(--at-warn, #9a6a12) 14%, transparent); color:var(--at-warn, #9a6a12); }
.cw-link{ border:0; background:none; padding:0; font:inherit; color:inherit; cursor:pointer; text-align:start; text-decoration:underline;
  text-decoration-color:color-mix(in srgb, currentColor 30%, transparent); text-underline-offset:2px; }
.cw-link:hover{ text-decoration-color:currentColor; }
.cw-link.on{ font-weight:600; text-decoration:none; }
#competitors-view .panel{ margin-bottom:16px; }
#competitors-view .panel-head{ flex-wrap:wrap; gap:8px 12px; }
#competitors-view .panel-head > div{ max-width:100%; min-width:0; }

/* segmented filters: the hub's track + sliding raised highlight (slide.js glide) */
.cw-seg{ position:relative; isolation:isolate; display:inline-flex; gap:2px; padding:2px; border-radius:9px; background:var(--at-track, rgba(20,21,22,.055));
  max-width:100%; overflow-x:auto; scrollbar-width:none; }
.cw-seg::-webkit-scrollbar{ display:none; }
.cw-seg-b{ position:relative; z-index:1; flex:none; border:0; background:transparent; color:var(--mac-muted, var(--muted)); padding:0 12px; min-height:34px;
  border-radius:7px; font:500 13px var(--sans); white-space:nowrap; cursor:pointer; font-variant-numeric:tabular-nums; }
.cw-seg-b:hover:not(.on){ color:var(--mac-ink, var(--ink)); }
.cw-seg-b.on{ color:var(--mac-ink, var(--ink)); background:var(--at-paper, #fff); box-shadow:var(--at-ring, 0 0 0 1px var(--line)), var(--mac-raise, none); }
.cw-seg.slide-on > .cw-seg-b.on{ background:transparent; box-shadow:none; }
.cw-seg .slide-ind{ border-radius:7px; background:var(--at-paper, #fff); box-shadow:var(--at-ring, 0 0 0 1px var(--line)), var(--mac-raise, none); }

/* the four tiles */
.cw-kpis{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:0 0 16px; }
.cw-kpi{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px; text-align:start; min-width:0;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; cursor:pointer; color:var(--ink); font:inherit; }
.cw-kpi:hover{ border-color:var(--at-rule-2, var(--muted)); }
.cw-kl{ font-size:12px; color:var(--muted); }
.cw-kv{ font-size:clamp(22px, 3vw, 28px); font-weight:500; letter-spacing:-.03em; line-height:1.15; font-variant-numeric:tabular-nums; }
.cw-d{ font-size:12px; color:var(--muted); }
.cw-d.cw-bad{ color:var(--red); }
.cw-d.cw-good{ color:var(--pos); }
.cw-split{ display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--at-track, rgba(20,21,22,.055)); margin:6px 0 2px; }
.cw-split i{ display:block; height:100%; }
.cw-split .c, .cw-key .c::before{ background:var(--pos); }
.cw-split .n, .cw-key .n::before{ background:var(--at-muted-2, #8e908a); }
.cw-split .e, .cw-key .e::before{ background:var(--red); }
.cw-key{ display:flex; flex-wrap:wrap; gap:2px 10px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.cw-key span::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:2px; margin-inline-end:5px; }

/* Do today */
.cw-q{ display:grid; grid-template-columns:44px minmax(0, 1fr); gap:6px 12px; padding:12px 0; border-top:1px solid var(--rowline); }
.cw-q:first-child{ border-top:0; padding-top:2px; }
button.cw-q{ width:100%; border:0; border-top:1px solid var(--rowline); background:none; font:inherit; color:inherit; text-align:start; cursor:pointer; }
.cw-qg > button.cw-q{ border-top:0; }
.cw-qg:first-child > button.cw-q{ padding-top:2px; }
.cw-qg > button.cw-q:hover .cw-q-t{ text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 30%, transparent); text-underline-offset:2px; }
.cw-q-main{ display:flex; flex-direction:column; }
.cw-qg .cw-q-acts{ justify-content:flex-end; }
.cw-q > .cw-thumb{ grid-row:span 3; }
.cw-q-main, .cw-q-why, .cw-q-acts{ min-width:0; }
.cw-q-t{ font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.cw-q-t a{ color:inherit; }
.cw-q-m{ font-size:13px; color:var(--muted); }
.cw-q-m b{ color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }
.cw-q-why{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.cw-q-acts{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.cw-q-acts .exp-cancel, .cw-q-acts .refresh-btn{ min-height:36px; display:inline-flex; align-items:center; text-decoration:none; }
.cw-thumb{ width:44px; height:44px; object-fit:cover; border-radius:8px; background:var(--at-img-bg, #ece9e2); display:block; flex:none; }
.cw-noimg{ display:grid; place-items:center; color:var(--muted); font-size:11px; text-align:center; line-height:1.3; padding:4px; overflow:hidden; }
.cw-ad-img.cw-noimg{ padding:40px 10px 10px; }
.cw-skel-answer{ height:26px; max-width:640px; margin:0 0 14px; }
.cw-kpi.skel-card{ min-height:118px; border-color:transparent; cursor:default; }
.cw-skel-row{ height:20px; margin:6px 0; }
.cw-spark{ display:block; flex:none; overflow:visible; }
.cw-spark path{ fill:none; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.cw-spark .ours, .cw-spark .line{ stroke:var(--ink); }
.cw-spark .theirs{ stroke:var(--red); }

/* our products they also sell: one row per product, opens in place to every copy */
.cw-sp{ border-top:1px solid var(--rowline); }
.cw-sp:first-child{ border-top:0; }
.cw-sp-h{ display:grid; grid-template-columns:44px minmax(0, 1fr) auto; gap:4px 12px; align-items:center; width:100%; padding:10px 0; border:0; background:none;
  font:inherit; color:inherit; text-align:start; cursor:pointer; }
.cw-sp-h:hover .cw-sp-t{ text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 30%, transparent); text-underline-offset:2px; }
.cw-sp-h > .cw-thumb{ grid-row:span 2; }
.cw-sp-t{ font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-sp-m{ grid-column:2; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:0; }
.cw-sp-m b{ color:var(--ink); font-weight:500; }
.cw-sp-g{ grid-column:3; grid-row:1 / span 2; display:flex; align-items:center; gap:8px; }
.cw-chev{ width:16px; height:16px; flex:none; color:var(--muted); transition:transform .2s var(--ease); }
.cw-sp.open .cw-chev{ transform:rotate(180deg); }
.cw-badge-good{ background:color-mix(in srgb, var(--pos) 14%, transparent); color:var(--pos); }
.cw-sp-x{ padding:2px 0 14px; }
.cw-ladder{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.cw-ladder li{ display:grid; grid-template-columns:40px minmax(0, 88px) minmax(0, 1fr) auto; gap:4px 10px; align-items:center; font-size:13px; }
.cw-ladder .cw-lthumb{ width:40px; height:40px; border-radius:7px; }
.cw-ladder li > a{ display:block; line-height:0; }
.cw-ladder .cw-lw{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-ladder .cw-track{ height:12px; }
.cw-ladder .cw-lp{ font-variant-numeric:tabular-nums; text-align:end; white-space:nowrap; }
.cw-ladder .cw-la{ grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; font-size:12px; color:var(--muted); }
.cw-ladder .cw-la .cw-mbtn{ min-height:30px; padding:0 10px; font-size:12px; }
.cw-ladder li.cw-l-ours{ font-weight:600; }
.cw-ladder li.cw-l-ours .cw-track i{ background:var(--ink); }
.cw-ladder li.cw-l-cheap .cw-track i{ background:var(--red); }
.cw-ladder li.cw-l-x{ opacity:.55; }

/* market board */
.cw-tablewrap{ overflow-x:auto; margin:0 -16px; padding:0 16px; }
.cw-board-t{ border-collapse:collapse; width:100%; min-width:820px; font-variant-numeric:tabular-nums; }
.cw-board-t th, .cw-board-t td{ height:44px; padding:0 8px; text-align:end; white-space:nowrap; border-top:1px solid var(--rowline); font-size:13px; }
.cw-board-t thead th{ height:32px; border-top:0; font-size:12px; font-weight:500; color:var(--muted); }
.cw-board-t th:first-child, .cw-board-t td:first-child{ text-align:start; padding-inline-start:0; position:sticky; left:0; background:var(--card); z-index:1; }
.cw-board-t tbody th{ font-weight:500; }
.cw-board-t tbody tr{ cursor:pointer; }
.cw-board-t tbody tr:hover > *{ background:var(--hoverbg); }
.cw-board-t tr.cw-own > *{ font-weight:600; }
.cw-cell{ display:inline-flex; align-items:center; gap:8px; justify-content:flex-end; }
.cw-board-t tr.cw-open > *{ background:var(--hoverbg); }
.cw-board-t tr.cw-bx > td{ height:auto; padding:4px 0 16px; white-space:normal; text-align:start; cursor:default; }
.cw-board-t tr.cw-bx:hover > *{ background:var(--card); }
.cw-bx-in{ max-width:calc(100vw - 48px); width:min(760px, 100%); display:grid; gap:10px; }
.cw-bx-why{ font-size:13px; color:var(--muted); margin:0; line-height:1.5; }
.cw-bx-links{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cw-bx-links .exp-cancel{ text-decoration:none; min-height:36px; display:inline-flex; align-items:center; }

/* sales timeline + winning ads */
.cw-cols{ display:grid; grid-template-columns:minmax(0, 1fr); gap:0 16px; }
.cw-tl{ display:grid; grid-template-columns:minmax(0, 110px) minmax(0, 1fr); gap:6px 10px; align-items:center; }
.cw-who{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-lane{ position:relative; height:22px; border-radius:5px; background:var(--at-track, rgba(20,21,22,.055)); }
.cw-bar{ position:absolute; top:3px; bottom:3px; border-radius:4px; background:color-mix(in srgb, var(--ink) 62%, transparent); color:var(--card); font-size:11px; line-height:16px;
  padding:0 6px; overflow:hidden; white-space:nowrap; font-variant-numeric:tabular-nums; cursor:help; }
.cw-bar.cw-live{ background:var(--red); color:#fff; }
.cw-bar.cw-clip{ border-start-start-radius:0; border-end-start-radius:0; }
.cw-scale{ grid-column:2; display:flex; justify-content:space-between; font-size:11px; color:var(--muted); }
.cw-ads{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.cw-ad{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.cw-ad-pic{ position:relative; }
.cw-ad-img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:10px; background:var(--at-img-bg, #ece9e2); }
.cw-ad-days{ position:absolute; top:8px; inset-inline-start:8px; background:var(--card); color:var(--ink); }
.cw-ad-who{ font-size:13px; font-weight:500; }
.cw-ad-t{ font-size:12px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cw-ad-lib{ font-size:12px; color:var(--muted); }

/* engagement + spikes */
.cw-rank{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cw-rank li{ display:grid; grid-template-columns:minmax(0, 110px) minmax(0, 1fr) auto; gap:10px; align-items:center; font-size:13px; }
.cw-rank li > .cw-stale{ grid-column:1 / -1; justify-self:start; }
.cw-track{ height:10px; border-radius:5px; overflow:hidden; background:var(--at-track, rgba(20,21,22,.055)); }
.cw-track i{ display:block; height:100%; border-radius:5px; background:var(--at-muted-2, #8e908a); }
.cw-rank li.cw-own{ font-weight:600; }
.cw-rate{ white-space:nowrap; text-align:end; font-variant-numeric:tabular-nums; }
.cw-rate small{ font-size:11px; font-weight:400; color:var(--muted); }
.cw-stack{ display:grid; align-content:start; gap:16px; min-width:0; }
#competitors-view .cw-stack > .panel{ margin:0; }
.cw-rank li.cw-own .cw-track i{ background:var(--ink); }
.cw-rank b{ font-weight:500; font-variant-numeric:tabular-nums; text-align:end; }
.cw-eng-read{ font-size:14px; line-height:1.5; margin:0 0 12px; padding:10px 12px; border-radius:10px; background:var(--at-track, rgba(20,21,22,.055)); }
.cw-spk{ display:grid; gap:10px; }
.cw-spk-r{ display:grid; grid-template-columns:56px minmax(0, 1fr); gap:10px; align-items:center; font-size:13px; }
.cw-spk-img{ width:56px; height:56px; object-fit:cover; border-radius:8px; background:var(--at-img-bg, #ece9e2); display:block; }

/* check these matches */
.cw-review-box > summary{ display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; min-height:36px; }
.cw-review-box > summary::-webkit-details-marker{ display:none; }
.cw-review-box > summary .lead-title{ margin:0; flex:1; }
.cw-review-box[open] > summary{ margin-bottom:8px; }
.cw-rv{ display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; padding:12px 0; border-top:1px solid var(--rowline); }
.cw-rv-side{ display:grid; grid-template-columns:44px minmax(0, 1fr); gap:10px; align-items:center; min-width:0; }
.cw-rv-side a{ color:inherit; }

/* the store page (inside the hub drawer) */
.cw-sh{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:20px 0 8px; }
.cw-sh:first-child{ margin-top:0; }
.cw-sh h3{ font-size:14px; font-weight:600; margin:0; }
.cw-sh .exp-cancel{ text-decoration:none; }
.cw-pairs{ list-style:none; margin:0; padding:0; }
.cw-pairs li{ display:grid; grid-template-columns:40px minmax(0, 1fr) 40px auto; gap:4px 10px; align-items:center; padding:9px 0; border-top:1px solid var(--rowline); font-size:13px; }
.cw-pairs li:first-child{ border-top:0; }
.cw-pairs li > .cw-mbtn{ grid-column:2 / -1; justify-self:start; }
.cw-pairs .cw-lthumb{ width:40px; height:40px; border-radius:7px; }
.cw-ppic{ display:block; line-height:0; }
.cw-pt, .cw-pp{ display:flex; flex-direction:column; min-width:0; }
.cw-pp{ align-items:flex-end; text-align:end; font-variant-numeric:tabular-nums; }
.cw-pt small, .cw-pp small, .cw-ct small, .cw-cp small{ font-size:11px; color:var(--muted); }
.cw-pt a, .cw-ct a{ color:inherit; }
.cw-pp a{ color:inherit; }
.cw-cf{ margin:0 0 8px; }
.cw-sorts{ display:flex; gap:12px; align-items:center; font-size:13px; }
.cw-cat{ display:grid; }
.cw-crow{ display:grid; grid-template-columns:44px minmax(0, 1fr) auto; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--rowline); cursor:pointer; }
.cw-crow:first-child{ border-top:0; }
.cw-crow.on{ background:var(--hoverbg); }
.cw-ct{ display:flex; flex-direction:column; min-width:0; font-size:13px; }
.cw-cp{ display:flex; flex-direction:column; align-items:flex-end; font-variant-numeric:tabular-nums; font-size:13px; }
.cw-log{ list-style:none; margin:0 0 8px 54px; padding:0; display:grid; gap:4px; font-size:12px; }
.cw-log li{ display:grid; grid-template-columns:84px minmax(0, 1fr) auto; gap:8px; align-items:center; }
.cw-log i{ display:block; height:6px; border-radius:3px; background:var(--ink); }
.cw-log b{ font-weight:500; font-variant-numeric:tabular-nums; }
.cw-logbox{ margin-inline-start:54px; }
.cw-ads-sm{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.cw-sec{ min-width:0; }
/* the products card's two hide switches */
.cw-stog{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:2px 0 4px; }
.cw-tog{ display:inline-flex; align-items:center; gap:7px; min-height:36px; font-size:13px; color:var(--muted); cursor:pointer; }
.cw-tog input{ width:16px; height:16px; margin:0; accent-color:var(--ink); cursor:pointer; }
/* store logos beside store names */
.cw-named{ display:inline-flex; align-items:center; gap:7px; min-width:0; max-width:100%; }
.cw-named > .cw-link{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-logo{ flex:none; width:20px; height:20px; border-radius:5px; object-fit:contain; background:var(--at-paper, #fff); }
.cw-logo.cw-noimg{ display:inline-grid; place-items:center; padding:0; font-size:11px; font-weight:600; color:var(--ink); background:var(--at-track, rgba(20,21,22,.055)); }
.cw-title .cw-logo{ width:30px; height:30px; border-radius:7px; }
.cw-title .cw-logo.cw-noimg{ font-size:15px; }
.cw-sec:not(:first-child) > .cw-sh:first-child{ margin-top:24px; }
.cw-ad-pic a{ text-decoration:none; }

/* a store with a catalogue opens as a whole page, not a side panel */
.drawer.drawer-full{ left:0; right:0; width:100vw; border-radius:0; }
.drawer-full .drawer-head, .drawer-full .drawer-body{ padding-inline:max(22px, calc((100vw - 1240px) / 2)); }
.drawer-full .drawer-title{ font-size:clamp(20px, 2.4vw, 26px); }
@media (max-width:760px){
  .drawer.drawer-full{ top:0; height:100vh; height:100dvh; max-height:none; border-radius:0; }
}
@media (min-width:1500px){   /* only a wide screen has room for "Not the same" on the same line */
  .drawer-full .cw-pairs li{ grid-template-columns:40px minmax(0, 1fr) 40px auto auto; }
  .drawer-full .cw-pairs li > .cw-mbtn{ grid-column:auto; }
}
@media (min-width:1000px){
  /* our shared products beside their catalogue; our own page has no shared list, so it stays one column */
  .drawer-full .cw-store:has(.cw-sec-pairs){ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); gap:0 40px;
    grid-template-areas:"pairs cat" "ads ads" "posts posts"; align-items:start; }
  .drawer-full .cw-sec-pairs{ grid-area:pairs; } .drawer-full .cw-sec-cat{ grid-area:cat; }
  .drawer-full .cw-sec-ads{ grid-area:ads; } .drawer-full .cw-sec-posts{ grid-area:posts; }
  .drawer-full .cw-sec-cat > .cw-sh:first-child{ margin-top:0; }
  .drawer-full .cw-ads-sm{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .drawer-full .cw-sec-posts .cw-spk{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 760px){
  .cw-kpis{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .cw-q{ grid-template-columns:44px minmax(0, 1.4fr) minmax(0, 1.6fr) auto; align-items:center; }
  .cw-q > .cw-thumb{ grid-row:auto; }
  .cw-sp-h{ grid-template-columns:44px minmax(0, 1.5fr) minmax(0, 1fr) auto; }
  .cw-sp-h > .cw-thumb{ grid-row:auto; }
  .cw-sp-m{ grid-column:auto; }
  .cw-sp-g{ grid-column:auto; grid-row:auto; }
  .cw-sp-x{ padding-inline-start:56px; }
  .cw-ladder li{ grid-template-columns:40px minmax(0, 140px) minmax(0, 1fr) auto minmax(0, 1.1fr); }
  .cw-ladder .cw-la{ grid-column:auto; justify-content:flex-end; }
  .cw-rv{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) auto; align-items:center; }
}
@media (min-width: 1100px){
  .cw-cols{ grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); }
  .cw-cols.cw-even{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .cw-ads{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce){ .cw-chev{ transition:none; } .cw-seg .slide-ind{ display:none; } .cw-seg.slide-on > .cw-seg-b.on{ background:var(--at-paper, #fff); box-shadow:var(--at-ring, 0 0 0 1px var(--line)); } }

/* --- Competitors subtabs and loading (2026-11-07, Yassin: "divide it into subtabs, make the loading
   smoother without cutting"). Four panes behind the shared page-tab bar (hub-ui.css .subtabs) under the four tiles; a pane
   rises in once when it is opened; a section fades in where its placeholder stood; a picture fades in
   when it arrives; Refresh dims the page instead of emptying it. --- */
.cw-pane.cw-enter{ animation:cwEnter .28s cubic-bezier(.22,1,.36,1) both; }
@keyframes cwEnter{ from{ opacity:0; transform:translateY(6px); } }
.cw-in{ animation:cwIn .38s cubic-bezier(.22,1,.36,1) both; }
@keyframes cwIn{ from{ opacity:0; transform:translateY(4px); } }
/* An ad picture fades in over its frame's grey (the frame keeps the box while it loads); smaller
   pictures keep their own grey square until they land, so nothing is ever an empty hole. */
.cw-ad-pic{ border-radius:12px; background:var(--at-img-bg, #ece9e2); }
.cw-ad-pic img.cw-ad-img{ opacity:0; transition:opacity .35s cubic-bezier(.22,1,.36,1); }
.cw-ad-pic img.cw-ad-img.is-in{ opacity:1; }
#competitors-view.cw-busy #cw-status, #competitors-view.cw-busy .cw-kpis, #competitors-view.cw-busy .cw-pane{ opacity:.55; pointer-events:none; transition:opacity .2s ease; }
#competitors-view #cw-status, #competitors-view .cw-kpis, #competitors-view .cw-pane{ transition:opacity .25s ease; }
/* placeholders shaped like what replaces them, so nothing jumps when it lands (heights measured on the
   real tab with live data, 2026-11-07: tiles 151/93 px on a phone, 175 px from 760 px) */
#competitors-view .cw-kpi.skel-card{ min-height:93px; }
#competitors-view .cw-kpi.skel-card:nth-child(-n+2){ min-height:151px; }
#competitors-view .cw-skel-answer{ height:46px; margin:0 0 6px; }
@media (min-width:760px){
  #competitors-view .cw-kpi.skel-card, #competitors-view .cw-kpi.skel-card:nth-child(-n+2){ min-height:175px; }
  #competitors-view .cw-skel-answer{ height:27px; }
}
.cw-skel-rows .skel-line{ height:52px; width:100%; margin:6px 0; }
.cw-skel-bars .skel-line{ height:18px; margin:10px 0; }
.cw-skel-bars .skel-line:nth-child(4){ width:60%; } .cw-skel-bars .skel-line:nth-child(5){ width:45%; }
.cw-skel-cards{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.cw-skel-cards .skel-card{ aspect-ratio:4/5; border-radius:12px; animation:skel 1.4s ease-in-out infinite; }
/* Ads and sales: the winning ads get the full width */
#cw-pane-ads .cw-ads{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 12px; }
.cw-ad-img{ border-radius:12px; }
.cw-ad-img.cw-noimg{ display:flex; align-items:center; justify-content:center; padding:16px; font-size:11.5px; line-height:1.4; }
.cw-ad-who{ margin-top:2px; }
/* Social: the platform pills lead the pane, the two lists side by side, the posts below */
.cw-social-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin:0 0 12px; }
.cw-social-head .cw-note{ margin:0; }
#cw-pane-social .cw-rank li{ grid-template-columns:minmax(0, 140px) minmax(0, 1fr) auto; }
#cw-pane-social .cw-spk{ gap:12px; }
@media (min-width:760px){
  #cw-pane-ads .cw-ads, .cw-skel-cards{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  #cw-pane-social .cw-spk{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:1100px){
  #cw-pane-ads .cw-ads, .cw-skel-cards{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  #cw-pane-social .cw-spk{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (min-width:1400px){ #cw-pane-ads .cw-ads{ grid-template-columns:repeat(6, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce){
  .cw-pane.cw-enter, .cw-in, .cw-skel-cards .skel-card{ animation:none; }
  .cw-ad-pic img.cw-ad-img{ transition:none; }
}

/* Expenses tab (2026-10-04): type filter chips + unpaid bills shown faded */
.exp-types{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.exp-types .chip bdi{ opacity:.7; margin-left:4px; }
.exp-notpaid{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:4px; background:var(--red); color:#fff; font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; vertical-align:1px; }


/* Expenses on a phone: the first column is the DATE here, not a category, so it stays */
@media (max-width:760px){ #expenses-view .exp-row{ grid-template-columns:auto 1fr auto; } #expenses-view .exp-cat{ display:block; } }
.exp-range{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; }
.exp-range label{ display:flex; align-items:center; gap:6px; font-size:12px; }
.exp-row.exp-nocost{ opacity:.6; }
@media (max-width:760px){ .exp-notpaid{ font-size:15px; padding:2px 9px; } }
/* Expenses rows: the amount column is fixed so amounts line up; an unpaid bill's
   red tag sits right after its amount, then "Pay from… / Pay" (2026-10-04). */
@media (min-width:761px){ #expenses-view .exp-row{ grid-template-columns:120px 1fr 130px auto; } }
#expenses-view .exp-amt{ text-align:right; }
.exp-due{ display:flex; align-items:center; gap:8px; justify-self:end; }
.exp-due .exp-notpaid{ margin-left:0; }
.exp-pay{ display:flex; align-items:center; gap:6px; }
.exp-pay .exp-in{ max-width:200px; }
.exp-pay-acct.row-warn{ border-color:var(--red); }
@media (max-width:760px){ #expenses-view .exp-due{ grid-column:1 / -1; } }

/* Couriers: pick a day or span under the period chips (2026-10-11) */

/* ============================================================================
   2026-10-12 · Drill-down panel, loading placeholders, sticky
   table headers, phone table cards. Appended last so it wins the cascade.
   ========================================================================== */

/* --- Loading placeholders: the shape of what is coming, not the word "Loading" --- */
@keyframes skel{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
.skel-line, .skel-card, .skel-block .skel-line{ background:linear-gradient(90deg, #e9e9e4 0%, #f5f5f2 45%, #e9e9e4 90%); background-size:200% 100%;
  animation:skel 1.4s ease-in-out infinite; }
.skel-block{ grid-column:1 / -1; width:100%; padding:4px 0; }
.skel-line{ height:42px; border-radius:var(--r-sm); margin:8px 0; }
.skel-line:nth-child(2){ width:92%; } .skel-line:nth-child(3){ width:78%; }
.kpi.skel-card{ min-height:118px; box-shadow:none; animation:skel 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .skel-line, .skel-card, .kpi.skel-card{ animation:none; } }

/* --- Clickable number cards (Stats Revenue/Orders) --- */
button.kpi-drill{ font:inherit; color:inherit; text-align:left; cursor:pointer; width:100%;
  transition:box-shadow .18s var(--ease), transform .18s var(--ease); }
button.kpi-drill:hover{ box-shadow:var(--elev-2); transform:translateY(-1px); }
button.kpi-drill.hero:hover{ box-shadow:var(--elev-2), inset 0 0 0 1.5px var(--ink); }
button.kpi-drill .kpi-label::after{ content:'›'; margin-left:6px; font-size:13px; letter-spacing:0; color:var(--muted); opacity:0; transition:opacity .15s ease; }
button.kpi-drill:hover .kpi-label::after, button.kpi-drill:focus-visible .kpi-label::after{ opacity:1; }

/* --- Drill-down panel: from the side on a desktop, up from the bottom on a phone --- */
.drawer-scrim{ position:fixed; inset:0; z-index:60; background:rgba(20,21,22,.38); opacity:0; transition:opacity .25s var(--ease); }
.drawer-scrim.open{ opacity:1; }
.drawer{ position:fixed; top:0; right:0; z-index:61; width:min(480px, 100vw); height:100vh; height:100dvh; display:flex; flex-direction:column;
  background:var(--card); box-shadow:var(--elev-hi); transform:translateX(100%); transition:transform .3s var(--ease); }
.drawer.open{ transform:none; }
.drawer-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:22px 22px 14px; border-bottom:1px solid var(--line); }
.drawer-title{ margin:0; font:700 17px/1.25 var(--sans); letter-spacing:-.01em; }
.drawer-sub{ margin-top:5px; font-size:12px; color:var(--muted); }
.drawer-close{ flex:none; width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:10px; background:var(--hoverbg); color:var(--ink); cursor:pointer; }
.drawer-close svg{ width:18px; height:18px; }
.drawer-close:hover{ background:var(--line); }
.drawer-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:6px 22px 24px; }
.dr-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid var(--rowline); font-size:13px; }
.dr-name{ min-width:0; overflow-wrap:anywhere; }
.dr-meta{ margin-top:3px; font-size:11.5px; color:var(--muted); }
.dr-val{ flex:none; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dr-val small{ font-weight:400; color:var(--muted); }
.dr-total{ display:flex; justify-content:space-between; gap:14px; margin-top:4px; padding:14px 0 6px; border-top:2px solid var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.dr-note{ margin-top:12px; padding:10px 12px; border-left:3px solid #c98a1b; border-radius:6px; background:var(--hoverbg); font-size:12px; line-height:1.45; }
.dr-note.ok{ border-left-color:var(--pos); }
.dr-go{ margin-top:16px; }
body.drawer-open{ overflow:hidden; }
@media (max-width:760px){
  .drawer{ top:auto; bottom:0; width:100%; height:auto; max-height:88vh; max-height:88dvh; border-radius:22px 22px 0 0; transform:translateY(100%);
    padding-bottom:env(safe-area-inset-bottom); }
  .drawer-head{ padding:20px 18px 12px; }
  .drawer-close{ width:44px; height:44px; border-radius:12px; } .drawer-close svg{ width:20px; height:20px; }
  .dr-row{ padding:12px 0; }
}
@media (prefers-reduced-motion:reduce){ .drawer, .drawer-scrim{ transition:none; } }

/* --- Sticky table headers: the header row stays put while the rows scroll.
   The table scrolls inside its own box, because a sideways-scrolling wrapper
   would otherwise pin the header to nothing. overflow:clip (not hidden) keeps
   the rounded corners without becoming a scroll container. --- */
.dtable{ overflow:clip; }
.table-wrap{ max-height:calc(100vh - 190px); overflow:auto; overscroll-behavior:contain; box-shadow:var(--elev-1); }
.table-wrap .dtable{ box-shadow:none; }
.dtable thead th{ position:sticky; top:0; z-index:2; background:var(--card); }
.sw-scroll{ max-height:calc(100vh - 190px); overflow:auto; overscroll-behavior:contain; }
.sw-table thead th{ position:sticky; top:0; z-index:2; background:var(--card); }

/* --- Phone: a table row becomes a card, each cell labelled with its column.
   app.js stamps data-label on every cell from the table's own header row. --- */
@media (max-width:760px){
  .table-wrap{ max-height:none; overflow:visible; box-shadow:none; border-radius:0; }
  .table-wrap .dtable{ min-width:0; }
  .dtable, .dtable tbody{ display:block; background:none; border-radius:0; overflow:visible; }
  .dtable thead{ display:none; }
  .dtable tbody tr{ position:relative; display:block; margin:0 0 12px; padding:4px 2px; background:var(--card); border-radius:var(--r-lg); box-shadow:var(--elev-1); }
  .dtable tbody td{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 12px; border-bottom:1px solid var(--rowline);
    font-size:14px; text-align:right; }
  .dtable tbody td:last-child{ border-bottom:0; }
  .dtable tbody td[data-label]::before{ content:attr(data-label); flex:none; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); text-align:left; }
  .dtable tbody td:not([data-label]), .dtable tbody td[colspan]{ display:block; text-align:left; }
  .dtable tbody td.col-check:empty, .dtable tbody td.col-action:empty{ display:none; }
  /* the name cell is the card's heading; the WhatsApp link and the pick box sit in its corner */
  .dtable tbody td:has(> .col-main){ padding:12px 104px 12px 12px; border-bottom:1px solid var(--line); }
  .dtable tbody td.col-action{ position:absolute; top:10px; right:10px; padding:0; border:0; width:auto; }
  .dtable tbody td.col-check{ position:absolute; top:20px; right:62px; padding:0; border:0; width:auto; }
  .dtable tbody td.col-check input{ width:22px; height:22px; }
  .dtable tbody td .wa{ width:44px; height:44px; }
  .dtable tbody td .wa .gi{ width:20px; height:20px; }
  .dtable tbody .cname-n{ font-size:15px; font-weight:700; } .dtable tbody .cname-s{ font-size:12.5px; }
  .dtable tbody .stchip, .dtable tbody .badges > *{ font-size:11.5px; }
}

/* ============================================================================
   2026-10-12 · Loading (app.js wireLoading): a thin bar that runs along the top
   bar while anything is fetching, and, the first time a page opens, a shimmering
   placeholder in the page's shape until its data arrives.
   ========================================================================== */
#topbar::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent 0%, var(--red) 35%, #ff8a6a 50%, var(--red) 65%, transparent 100%);
  background-size:40% 100%; background-repeat:no-repeat; transition:opacity .2s ease; }
body.is-fetching #topbar::after{ opacity:1; animation:topLoad 1.1s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes topLoad{ from{ background-position:-40% 0; } to{ background-position:140% 0; } }

#content > section{ position:relative; }
#content > section.is-loading > *:not(.view-head):not(.view-skel){ opacity:0; pointer-events:none; }
#content > section > *:not(.view-head):not(.view-skel){ transition:opacity .3s var(--ease); }
.view-skel{ position:absolute; left:0; right:0; z-index:3; min-height:60vh; background:var(--bg); animation:skelIn .25s var(--ease) both; }
.view-skel.out{ opacity:0; transform:translateY(-4px); transition:opacity .25s ease, transform .25s ease; }
@keyframes skelIn{ from{ opacity:0; } }
.vs-cards{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-bottom:18px; }
.vs-cards i, .vs-panel b, .vs-panel span{ display:block; border-radius:var(--r-md);
  background:linear-gradient(100deg, #e6e6e1 20%, #f6f6f3 40%, #e6e6e1 60%); background-size:300% 100%; animation:skelSweep 1.5s ease-in-out infinite; }
.vs-cards i{ height:112px; border-radius:var(--r-lg); }
.vs-cards i:nth-child(2){ animation-delay:.08s; } .vs-cards i:nth-child(3){ animation-delay:.16s; } .vs-cards i:nth-child(4){ animation-delay:.24s; }
.vs-panel{ padding:20px; border-radius:var(--r-lg); background:var(--card); box-shadow:var(--elev-1); }
.vs-panel b{ width:180px; height:14px; margin-bottom:18px; }
.vs-panel span{ height:40px; margin-bottom:10px; }
.vs-panel span:nth-child(odd){ width:96%; } .vs-panel span:nth-child(3n){ width:88%; }
.vs-panel span:nth-of-type(2){ animation-delay:.1s; } .vs-panel span:nth-of-type(3){ animation-delay:.2s; } .vs-panel span:nth-of-type(4){ animation-delay:.3s; }
.vs-panel span:nth-of-type(5){ animation-delay:.4s; } .vs-panel span:nth-of-type(6){ animation-delay:.5s; } .vs-panel span:nth-of-type(7){ animation-delay:.6s; }
@keyframes skelSweep{ from{ background-position:100% 0; } to{ background-position:0 0; } }
@media (max-width:760px){
  .vs-cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .vs-cards i{ height:150px; } .vs-panel span{ height:64px; } .vs-panel b{ height:20px; }
  #topbar::after{ height:4px; }
}
@media (prefers-reduced-motion:reduce){
  body.is-fetching #topbar::after{ animation:none; background:var(--red); opacity:.6; }
  .vs-cards i, .vs-panel b, .vs-panel span{ animation:none; }
  .view-skel, .view-skel.out{ animation:none; transition:none; }
}

/* ===== Links between tabs (2026-10-14): an order's customer name opens Customers,
   an order number opens Orders. Looks like text with a red underline. ===== */
.xlink{ background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; font-weight:600; cursor:pointer;
  text-decoration:underline; text-decoration-color:rgba(200,56,31,.45); text-decoration-thickness:1.5px; text-underline-offset:3px;
  transition:color .15s, text-decoration-color .15s; }
.xlink:hover{ color:var(--red); text-decoration-color:var(--red); }
.xlink:focus-visible{ outline:2px solid var(--red); outline-offset:2px; border-radius:3px; }
body.no-goto-orders [data-goto-order], body.no-goto-customers [data-goto-customer]{ pointer-events:none; text-decoration:none; font-weight:inherit; }
@keyframes rowFlash{ 0%,30%{ background:rgba(200,56,31,.13); } 100%{ background:transparent; } }
tr.flash > td{ animation:rowFlash 1.8s ease-out; }
@media (prefers-reduced-motion:reduce){ .xlink{ transition:none; } }   /* the glow is a colour fade, not movement, so it stays */

/* Money with drivers: every order behind what a driver holds (2026-10-14). */
.ma-drv-orders{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 14px; padding:6px 0 2px; font-family:var(--sans); font-size:12px; }
.ma-drv-ord{ display:inline-flex; gap:6px; align-items:baseline; white-space:nowrap; }

/* Notes under "Total, everywhere" (2026-10-14): which shared money is in or out of it. */
.ma-total-note{ font-family:var(--sans); font-size:12px; text-align:right; padding:2px 4px 0; }

/* Hero products (2026-10-14): the month's four best sellers on the overview. */
.hero-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.hero-tile{ display:flex; flex-direction:column; gap:6px; color:inherit; text-decoration:none; min-width:0; }
.hero-img{ position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:var(--hoverbg, #f2f1ee); }
.hero-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
a.hero-tile:hover .hero-img img{ transform:scale(1.04); }
.hero-rank{ position:absolute; top:8px; left:8px; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:var(--red); color:#fff;
  font-family:var(--sans); font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.hero-name{ font-family:var(--sans); font-size:13px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hero-pct{ font-family:var(--sans); font-size:12px; color:var(--muted); }
.hero-pct b{ font-size:18px; color:var(--ink); margin-right:2px; }
.hero-rev{ font-family:var(--sans); font-size:11.5px; color:var(--muted); }
.hero-sub{ font-family:var(--sans); font-size:11px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); margin-left:6px; }
@media (max-width:760px){ .hero-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce){ .hero-img img{ transition:none; } }

/* Money collected this month (2026-10-17): one total, then a line per way money reaches us. */
.mc-total{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:2px 0 12px; border-bottom:1px solid var(--rowline); }
.mc-total-num{ font-family:var(--sans); font-size:clamp(26px,4vw,34px); font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.mc-total-num small, .mc-val small{ font-size:.5em; font-weight:500; color:var(--muted); }
.mc-total-sub{ font-family:var(--sans); font-size:12px; color:var(--muted); }
.mc-lines{ display:flex; flex-direction:column; }
.mc-line{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--rowline); min-height:44px; }
.mc-name{ font-family:var(--sans); font-size:14px; font-weight:600; display:flex; flex-direction:column; gap:2px; min-width:0; }
.mc-meta{ font-size:12px; font-weight:400; color:var(--muted); }
.mc-val{ font-family:var(--sans); font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; text-align:end; white-space:nowrap; }
.mc-dash{ color:var(--muted); }
.mc-foot{ font-family:var(--sans); font-size:11.5px; color:var(--muted); margin:10px 0 0; }

/* ---- Where sales come from: governorate heatmap (geomap.js, 2026-10-19) ---- */
.gm-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.gm-zoom .seg-btn{ min-height:32px; padding:0 12px; }
.gm-legend{ display:flex; align-items:center; gap:8px; font-family:var(--sans); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.gm-legend i{ display:block; width:88px; height:6px; border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--dk-gm-land,#e6e6e1), color-mix(in srgb, var(--dk-gm-hi,#141516) 12%, var(--dk-gm-lo,#d6d6d0)) 12%, var(--dk-gm-hi,#141516)); }
.gm-stage{ position:relative; border-radius:var(--r-md); overflow:hidden;
  background:radial-gradient(120% 90% at 50% 20%, var(--dk-gm-sea-1,#fdfdfc) 0%, var(--dk-gm-sea-2,#f7f7f4) 100%); border:1px solid var(--card-line); }
.gm-svg{ display:block; width:100%; height:auto; aspect-ratio:1000/887; touch-action:manipulation; }
/* Shade comes from --gm-l (geomap.js) so the map follows the theme toggle without a re-render. */
.gm-gov{ fill:var(--dk-gm-land,#e6e6e1); stroke:var(--dk-gm-edge,#fff); stroke-width:.8; vector-effect:non-scaling-stroke; stroke-linejoin:round; cursor:pointer;
  transition:fill .25s var(--ease), opacity .2s var(--ease); outline:none; }
.gm-gov.has{ fill:color-mix(in srgb, var(--dk-gm-hi,#141516) calc(var(--gm-l) * 100%), var(--dk-gm-lo,#d6d6d0)); }
.gm-svg:hover .gm-gov:not(.on), .gm-svg:has(.gm-gov.on) .gm-gov:not(.on){ opacity:.72; }
.gm-gov.on{ stroke:var(--ink); stroke-width:1.6; opacity:1; }
.gm-gov:focus-visible{ stroke:var(--red); stroke-width:2; }
.gm-dot{ fill:var(--red); stroke:var(--dk-gm-edge,#fff); stroke-width:1.5; vector-effect:non-scaling-stroke; pointer-events:none;
  animation:gm-pulse 2.4s var(--ease) infinite; transform-box:fill-box; transform-origin:center; }
@keyframes gm-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.35); } }
@media (prefers-reduced-motion: reduce){ .gm-dot{ animation:none; } .gm-gov{ transition:none; } }
.gm-tip{ position:absolute; left:0; top:0; z-index:2; pointer-events:none; min-width:140px;
  display:flex; flex-direction:column; gap:2px; padding:9px 12px; border-radius:var(--r-sm);
  background:var(--dk-gm-tip,#141516); color:#f4f4f2; border:1px solid var(--dk-gm-tip-line,transparent); box-shadow:var(--elev-hi); font-family:var(--sans); font-size:12px;
  font-variant-numeric:tabular-nums; transition:transform .12s var(--ease); }
.gm-tip[hidden]{ display:none; }
.gm-tip b{ font-size:13px; font-weight:600; letter-spacing:.2px; }
.gm-tip span{ color:#c9cacd; }
.gm-tip strong{ color:#fff; font-weight:600; }
.gm-list{ list-style:none; margin:12px 0 0; padding:0; }
.gm-list li{ display:grid; grid-template-columns:18px 1fr auto auto; align-items:center; gap:10px;
  min-height:40px; padding:4px 6px; border-bottom:1px solid var(--rowline); font-family:var(--sans); font-size:13px; border-radius:var(--r-sm); }
.gm-list li:last-child{ border-bottom:0; }
.gm-list li:hover{ background:var(--hoverbg); }
.gm-rk{ font-weight:700; font-size:13px; }
.gm-rk.gold{ color:var(--red); }
.gm-nm{ font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-o, .gm-e{ font-variant-numeric:tabular-nums; text-align:end; white-space:nowrap; }
.gm-o{ color:var(--muted); }
.gm-o strong{ color:var(--ink); }
.gm-e small{ color:var(--muted); font-size:10px; }
.gm-other{ font-family:var(--sans); font-size:11.5px; color:var(--muted); margin:10px 0 0; line-height:1.45; }
.panel-head:has(#geo-period){ flex-wrap:wrap; gap:8px; }
#geo-period .seg-btn{ min-height:32px; padding:0 12px; }

/* ---------------------------------------------------------------- Warehouse (stock system, IN PROGRESS 2026-10-21) */
.wh-ip{ margin-left:6px; font-size:9px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; padding:2px 6px; border-radius:var(--r-pill);
  background:var(--tb-fdf0dc,#fdf0dc); color:var(--tf-8a5a12,#8a5a12); border:1px solid var(--tl-f1d6a8,#f1d6a8); vertical-align:1px; }
.wh-banner{ margin:0 0 14px; padding:10px 14px; background:var(--tb-fdf6ea,#fdf6ea); border:1px solid var(--tl-f1d6a8,#f1d6a8); color:var(--tf-6e4a10,#6e4a10); font-size:13px; line-height:1.45; }
.wh-help{ margin:0 0 10px; color:var(--muted); font-size:12.5px; line-height:1.45; }
.wh-empty{ color:var(--muted); font-size:13px; padding:8px 0 12px; }
.wh-bad{ color:var(--red); }
.wh-ok{ color:var(--pos); font-weight:600; }
.wh-muted{ color:var(--muted); font-size:12px; }
.wh-code{ font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--muted); }
.wh-pill{ display:inline-block; font-size:10.5px; padding:2px 8px; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--muted); background:var(--card); }
.wh-pill-bad{ color:var(--red); border-color:var(--tl-f0c6bd,#f0c6bd); }
.wh-table td{ padding:8px 10px; }
.wh-img{ width:40px; height:40px; object-fit:cover; display:block; border:1px solid var(--line); background:var(--dk-surface,#f4f4f1); }
.wh-row-ok td{ background:var(--tb-f1f8f3,#f1f8f3); }
.wh-row-warn td{ background:var(--tb-fdf6ea,#fdf6ea); }
.wh-row-bad td{ background:var(--tb-fbefec,#fbefec); }
.wh-search, .wh-find{ width:100%; max-width:440px; font:inherit; font-size:14px; padding:9px 12px; border:1px solid var(--line); background:var(--card); margin-bottom:10px; }
.wh-find{ font-size:12.5px; padding:6px 9px; margin:4px 0; max-width:260px; }
.wh-find-res, .wh-sug{ display:flex; flex-wrap:wrap; gap:4px; }
.wh-mini{ font-size:11px; padding:4px 9px; }
.wh-num{ width:64px; font:inherit; font-size:13px; padding:5px 7px; border:1px solid var(--line); }
.wh-form{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; margin-bottom:8px; }
.wh-form label{ display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.wh-form input, .wh-form select{ font:inherit; font-size:14px; padding:7px 9px; border:1px solid var(--line); background:var(--card); color:var(--ink); min-width:90px; text-transform:none; letter-spacing:0; }
.wh-form .wh-letter{ width:60px; min-width:0; text-transform:uppercase; }
.wh-scanrow{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.wh-scan{ flex:1; min-width:220px; max-width:420px; font:600 16px/1 ui-monospace,Menlo,monospace; padding:12px 14px; border:2px solid var(--ink); background:var(--card); }
.wh-scan:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(200,56,31,.12); }
.wh-shelfnow{ font-size:14px; }
.wh-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.wh-save:disabled{ background:#9a9b98; }
.wh-split{ display:grid; grid-template-columns:minmax(220px, 1fr) 2fr; gap:14px; align-items:start; margin-top:14px; }
.wh-q-row{ display:grid; grid-template-columns:auto 1fr; gap:2px 10px; width:100%; text-align:left; font:inherit; font-size:13px; padding:9px 10px;
  border:0; border-bottom:1px solid var(--rowline); background:none; cursor:pointer; color:var(--ink); }
.wh-q-row span:nth-child(n+3){ grid-column:2; }
.wh-q-row:hover{ background:var(--hoverbg); }
.wh-q-row.on{ background:var(--dk-surface,#f4f4f1); box-shadow:inset 3px 0 0 var(--red); }
.wh-inv{ margin-bottom:14px; }
.wh-inv-head{ font-size:13px; margin:4px 0 6px; }
.wh-order-head{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin:4px 0 10px; font-size:14px; }
.wh-post{ display:grid; grid-template-columns:110px 70px 1fr auto; gap:10px; padding:7px 0; border-bottom:1px solid var(--rowline); font-size:13px; }
#wh-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:60; max-width:min(560px, 92vw); padding:11px 16px;
  background:var(--ink); color:var(--on-ink); font-size:13px; line-height:1.4; box-shadow:var(--elev-hi); }
@media (max-width:760px){
  .wh-split{ grid-template-columns:1fr; }
  .wh-post{ grid-template-columns:1fr 1fr; }
  .wh-scan{ font-size:16px; padding:12px; }
  .wh-ip{ font-size:13px; }
}
.wh-sim{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:-2px 0 12px; font-size:12px; color:var(--muted); }
.wh-banner .wh-src{ margin-left:8px; vertical-align:1px; }

/* Product picker: a window inside the page (stock system, 2026-10-21) */
.wh-findmain{ font-size:13px; padding:9px 16px; margin-bottom:10px; }
.wh-pk-back{ position:fixed; inset:0; z-index:70; background:rgba(20,21,22,.42); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; }
.wh-pk{ width:min(1060px, 100%); max-height:90vh; display:flex; flex-direction:column; gap:10px; background:var(--card); border:1px solid var(--line); box-shadow:var(--elev-hi); padding:16px 18px 12px; }
.wh-pk-head{ display:flex; align-items:center; gap:12px; font-size:15px; }
.wh-pk-head b{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wh-pk-x{ border:0; background:none; font-size:18px; cursor:pointer; color:var(--muted); padding:4px 6px; }
.wh-pk-x:hover{ color:var(--ink); }
.wh-pk .wh-search{ max-width:none; margin:0; }
.wh-pk-filters{ display:flex; gap:10px; flex-wrap:wrap; }
/* Segmented pill filters: the chosen one is accent blue with white text, and ONE highlight slides between choices. */
.wh-pills{ position:relative; isolation:isolate; display:inline-flex; flex-wrap:nowrap; gap:2px; padding:3px; max-width:100%; overflow-x:auto; scrollbar-width:none;
  background:var(--card); border:1px solid var(--line); border-radius:999px; }
.wh-pills::-webkit-scrollbar{ display:none; }
.wh-pill-btn{ position:relative; z-index:1; flex:none; display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 12px; border:0; border-radius:999px; background:none;
  font:600 10.5px/1 var(--sans); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); white-space:nowrap; cursor:pointer; transition:color .25s ease, transform .12s ease; }
.wh-pill-btn:hover:not([aria-pressed="true"]){ color:var(--ink); }
.wh-pill-btn[aria-pressed="true"]{ background:#1f6feb; color:#fff; }
.wh-pills.ind-on > .wh-pill-btn[aria-pressed="true"]{ background:transparent; }
.wh-pill-btn:active{ transform:scale(.95); }
.wh-pill-ind{ position:absolute; left:0; top:3px; bottom:3px; z-index:0; border-radius:999px; background:#1f6feb; box-shadow:0 2px 8px -2px rgba(31,111,235,.55); pointer-events:none;
  transition:transform .34s cubic-bezier(.3,.8,.25,1), width .34s cubic-bezier(.3,.8,.25,1); }
.wh-pill-n{ font-weight:500; opacity:.7; letter-spacing:0; }
.wh-pk-head, .wh-pk .wh-search, .wh-pk-filters, .wh-pk-cols{ flex:none; }
.wh-pk-cols{ display:flex; }
.wh-pk-grid{ flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; padding:2px 2px 6px; align-content:start; }
.wh-pk-card{ display:flex; flex-direction:column; gap:4px; text-align:left; font:inherit; padding:0 0 8px; border:1px solid var(--line); background:var(--card); cursor:pointer; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.wh-pk-card:hover{ border-color:var(--ink); box-shadow:var(--elev-1); }
.wh-pk-card:active{ transform:scale(.98); }
.wh-pk-card.off{ opacity:.5; }
.wh-pk-img{ display:block; aspect-ratio:1; background:var(--dk-surface,#f4f4f1); overflow:hidden; }
.wh-pk-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.wh-pk-ph{ display:grid; place-items:center; width:100%; height:100%; font:600 34px/1 var(--sans); color:#c9c9c4; }
.wh-pk-name{ padding:0 8px; font-size:12.5px; font-weight:600; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wh-pk-var{ padding:0 8px; font-size:11.5px; color:var(--muted); }
.wh-pk-meta{ padding:0 8px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:11px; color:var(--muted); }
.wh-pk-foot{ grid-column:1 / -1; text-align:center; padding:8px 0; }
@media (max-width:760px){
  .wh-pk-back{ padding:0; }
  .wh-pk{ max-height:none; height:100%; border:0; padding:14px; }
  .wh-pk-grid{ grid-template-columns:repeat(2, 1fr); }
  .wh-pill-btn{ min-height:40px; font-size:12.5px; padding:0 14px; }
  .wh-pk-name{ font-size:14.5px; } .wh-pk-var, .wh-pk-meta{ font-size:13px; }
}
@media (prefers-reduced-motion: reduce){ .wh-pill-ind{ transition:none; } }

/* Stock pages, design C (Yassin, 2026-10-21): one header, one status line, help folded away, the work. */
.nav-item .wh-ip, .wh-ip{ display:inline-block; flex:none; box-sizing:content-box; padding:0; min-width:0; width:7px; height:7px; margin-left:6px; border-radius:50%; background:#d99a2b; vertical-align:2px; }
.wh-ip-tag{ font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:var(--r-pill); background:var(--tb-fdf0dc,#fdf0dc); color:var(--tf-8a5a12,#8a5a12); border:1px solid var(--tl-f1d6a8,#f1d6a8); }
.wh-live{ font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:var(--r-pill); background:var(--tb-e8f4ec,#e8f4ec); color:var(--tf-245f37,#245f37); border:1px solid var(--tl-bfdcc9,#bfdcc9); }
.wh-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; padding:8px 12px; font-size:12.5px; line-height:1.4; }
.wh-banner:empty{ display:none; }
.wh-how{ margin:0 0 12px; font-size:13px; color:var(--muted); }
.wh-how summary{ cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink); list-style:none; padding:4px 0; }
.wh-how summary::-webkit-details-marker{ display:none; }
.wh-how summary::before{ content:'?'; display:grid; place-items:center; width:16px; height:16px; border-radius:50%; border:1px solid var(--line); font-size:10px; }
.wh-how[open] summary{ margin-bottom:6px; }
.wh-how p{ margin:0 0 6px; max-width:760px; line-height:1.5; }
.wh-step{ display:inline-flex; align-items:center; gap:8px; margin:0 18px 10px 0; font-size:13px; font-weight:600; }
.wh-step span{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--ink); color:var(--on-ink); font-size:11px; }
.wh-subtabs{ margin:0 0 12px; }
.lead-title.wh-sub{ margin-top:18px; }

/* Room count */
.rc-status{ font-size:12px; color:var(--muted); }
.rc-status.busy{ color:var(--tf-8a5a12,#8a5a12); } .rc-status.bad{ color:var(--red); font-weight:600; }
.rc-start{ display:grid; gap:10px; max-width:520px; background:var(--card); border:1px solid var(--line); padding:16px; margin-bottom:12px; }
.rc-big{ font-size:14px; padding:12px 18px; justify-self:start; }
.rc-sess{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; font-size:13px; }
.rc-more summary{ cursor:pointer; font-size:12px; font-weight:600; }
.rc-more[open]{ display:grid; gap:8px; width:100%; background:var(--card); border:1px solid var(--line); padding:12px; }
.rc-more label{ display:grid; gap:4px; font-size:11px; color:var(--muted); }
.rc-danger{ color:var(--red); border-color:var(--tl-f0c6bd,#f0c6bd); }
.rc-rooms, .rc-modes{ margin:0 8px 12px 0; }
.rc-findrow{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.rc-findrow .wh-search{ flex:1; min-width:220px; margin:0; font-size:15px; padding:11px 14px; }
.rc-hide{ font-size:12.5px; display:flex; gap:6px; align-items:center; cursor:pointer; }
#rc-cols{ display:flex; margin:10px 0 6px; }
.rc-catline{ display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-bottom:8px; }
.rc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; }
.rc-card{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); }
.rc-card.done{ border-color:var(--tl-bfdcc9,#bfdcc9); box-shadow:inset 0 -3px 0 #2f7d46; }
.rc-photo{ position:relative; display:block; padding:0; border:0; background:var(--dk-surface,#f4f4f1); aspect-ratio:1; cursor:pointer; overflow:hidden; }
.rc-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s var(--ease); }
.rc-photo:hover img{ transform:scale(1.03); }
.rc-badge{ position:absolute; left:8px; top:8px; background:#2f7d46; color:#fff; font-size:12px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); }
.rc-name{ padding:8px 10px 4px; font-size:13px; font-weight:600; line-height:1.3; }
.rc-vars{ display:flex; flex-wrap:wrap; gap:5px; padding:4px 10px 10px; }
.rc-var{ font:inherit; font-size:12px; padding:6px 10px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--card); cursor:pointer; color:var(--ink); }
.rc-var:hover{ border-color:var(--ink); }
.rc-var.on{ background:var(--tb-e8f4ec,#e8f4ec); border-color:var(--tl-bfdcc9,#bfdcc9); color:var(--tf-245f37,#245f37); }
.rc-var.sel{ background:#1f6feb; border-color:#1f6feb; color:#fff; }
.rc-sheet{ width:min(760px, 100%); max-height:100%; overflow-y:auto; background:var(--card); box-shadow:var(--elev-hi); padding:14px 16px 16px; align-self:center; }
.rc-sheet-head{ display:flex; align-items:center; gap:10px; font-size:16px; margin-bottom:10px; }
.rc-sheet-head b{ flex:1; }
.rc-sheet-body{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:16px; }
.rc-sheet-img{ background:var(--dk-surface,#f4f4f1); aspect-ratio:1; overflow:hidden; }
.rc-sheet-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.rc-sheet-right{ display:flex; flex-direction:column; gap:10px; }
.rc-vars-pick{ padding:0; }
.rc-room-line{ margin:0; font-size:13px; color:var(--muted); }
.rc-num{ font:700 40px/1 var(--sans); text-align:center; padding:14px 0; border:2px solid var(--ink); font-variant-numeric:tabular-nums; }
.rc-num.rc-blank{ font-size:16px; font-weight:600; color:var(--muted); padding:26px 0; border-color:var(--line); }
.rc-keys{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.rc-keys button{ font:600 22px/1 var(--sans); padding:16px 0; border:1px solid var(--line); background:var(--card); cursor:pointer; color:var(--ink); }
.rc-keys button:active{ background:var(--hoverbg); }
.rc-keys .rc-save{ background:var(--ink); color:var(--on-ink); font-size:16px; }
.rc-keys .rc-save:disabled{ background:#c9c9c4; cursor:default; }
.rc-sum{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:10px; }
.rc-tile{ border:1px solid var(--line); padding:12px; background:var(--card); display:grid; gap:4px; }
.rc-tile b{ font-size:26px; font-variant-numeric:tabular-nums; }
.rc-tile span{ font-size:12px; color:var(--muted); line-height:1.35; }
.rc-tile.bad b{ color:var(--red); } .rc-tile.warn b{ color:var(--tf-8a5a12,#8a5a12); } .rc-tile.ok b{ color:var(--pos); }
.rc-toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0; }
.rc-rq{ max-width:260px; margin:0; }
.tbl-scroll{ overflow-x:auto; }
.rc-rep td{ font-variant-numeric:tabular-nums; }
.rc-short .rc-kind{ color:var(--red); font-weight:600; } .rc-extra .rc-kind{ color:var(--tf-8a5a12,#8a5a12); font-weight:600; } .rc-ok .rc-kind{ color:var(--pos); } .rc-missed .rc-kind{ color:var(--muted); font-weight:600; }
@media (max-width:760px){
  .rc-grid{ grid-template-columns:repeat(2, 1fr); }
  .rc-name{ font-size:13.5px; } .rc-var{ font-size:12.5px; padding:11px 13px; }
  .rc-sheet{ align-self:stretch; height:100%; padding:12px; }
  .rc-sheet-body{ grid-template-columns:1fr; }
  .rc-sheet-img{ aspect-ratio:auto; height:180px; }
  .rc-keys button{ font-size:22px; padding:16px 0; } .rc-keys .rc-save{ font-size:17px; }
  .rc-num{ font-size:40px; }
  .rc-sum{ grid-template-columns:repeat(2, 1fr); }
  .rc-findrow .wh-search{ font-size:16px; }
  .wh-step{ font-size:14px; } .wh-step span{ width:24px; height:24px; font-size:12px; }
}

.rc-warn{ margin:0 0 8px; padding:8px 12px; background:var(--tb-fdf6ea,#fdf6ea); border:1px solid var(--tl-f1d6a8,#f1d6a8); color:var(--tf-6e4a10,#6e4a10); font-size:12.5px; line-height:1.45; }
.rc-progress{ padding:6px 0 10px; font-size:13.5px; }
.rc-progress ol{ margin:8px 0 0; padding-left:20px; display:grid; gap:6px; }
.rc-step-busy b{ color:var(--tf-8a5a12,#8a5a12); } .rc-step-done b{ color:var(--pos); }
.rc-who{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.rc-who .wh-search{ margin:0; width:200px; font-size:14px; padding:8px 10px; }
/* The public count link (count.html): the hub's shell without the rail. */
.count-page{ max-width:1180px; margin:0 auto; padding:18px 16px 60px; }
.count-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.count-top img{ height:34px; }
.wh-howsteps{ margin:4px 0 8px; padding:0; list-style:none; counter-reset:how; display:grid; gap:8px; max-width:760px; }
.wh-howsteps li{ counter-increment:how; position:relative; padding-left:36px; min-height:24px; color:var(--ink); font-size:13.5px; line-height:1.5; }
.wh-howsteps li::before{ content:counter(how); position:absolute; left:0; top:-1px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--ink); color:var(--on-ink); font-size:12px; font-weight:700; }
.wh-howtip{ font-size:12.5px; color:var(--muted); line-height:1.5; }
@media (max-width:760px){ .wh-howsteps li{ font-size:14px; padding-left:36px; min-height:26px; } .wh-howsteps li::before{ width:26px; height:26px; font-size:12px; } .wh-howtip{ font-size:13.5px; } }
.rc-draft{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:var(--r-pill); background:#b45309; color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; vertical-align:2px; }
/* A draft card cannot be mistaken for a product on the site: amber frame + a flag on the photo. */
.rc-card.is-draft{ border:2px solid #d97706; background:var(--dk-surface,#fffbf3); }
.rc-draft-flag{ position:absolute; right:8px; top:8px; z-index:1; background:#b45309; color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill); box-shadow:0 2px 6px rgba(0,0,0,.25); }
@media (max-width:760px){ .rc-draft{ font-size:11.5px; padding:2px 9px; } .rc-draft-flag{ font-size:12.5px; padding:5px 11px; } }
/* Room count: photo search (2026-10-25) */
.rc-cam{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:10px 14px; font-size:14px; white-space:nowrap; }
.rc-ps-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.rc-ps-shot{ position:relative; background:var(--tb-f4f4f4,#f4f4f4); }
.rc-ps-shot img{ display:block; width:100%; max-height:42vh; object-fit:contain; cursor:crosshair; }
.rc-ps-mark{ position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border:3px solid #fff; border-radius:50%; box-shadow:0 0 0 2px #111; pointer-events:none; }
.rc-ps-tip{ margin:6px 0 10px; font-size:13px; }
.rc-ps-wait{ padding:14px 0; font-weight:500; }
.rc-ps-note{ margin:0 0 8px; }
.rc-ps-list{ display:grid; gap:8px; }
.rc-ps-card{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; font:inherit; padding:8px; border:1px solid var(--line); background:var(--card); cursor:pointer; }
.rc-ps-card.first{ border:2px solid var(--ink); }
.rc-ps-card img, .rc-ps-card .wh-pk-ph{ width:84px; height:84px; object-fit:cover; flex:none; }
.rc-ps-txt{ display:flex; flex-direction:column; gap:4px; }
.rc-ps-txt .rc-draft{ align-self:flex-start; margin-left:0; }
.rc-ps-conf{ font-size:12px; font-weight:600; }
.rc-ps-conf.high{ color:var(--tf-15803d,#15803d); } .rc-ps-conf.medium{ color:var(--tf-b45309,#b45309); } .rc-ps-conf.low{ color:var(--tf-6b7280,#6b7280); }
@media (max-width:760px){ .rc-cam{ font-size:14px; padding:12px 14px; } .rc-ps-txt b{ font-size:14px; } .rc-ps-conf{ font-size:12px; } .rc-ps-card img, .rc-ps-card .wh-pk-ph{ width:80px; height:80px; } .rc-ps-tip{ font-size:12px; } .rc-ps-wait{ font-size:14px; } }
/* Fulfilment area tab (Room count, 2026-10-21) */
.rc-fulfil-pill{ box-shadow:inset 0 0 0 1px #c7d7f5; }
.rc-ff-steps{ margin-bottom:12px; }
.rc-ff{ border:1px solid var(--line); background:var(--card); margin-bottom:8px; }
.rc-ff.open{ border-color:var(--ink); }
.rc-ff-head{ display:flex; justify-content:space-between; align-items:center; width:100%; padding:12px 14px; font:inherit; font-size:15px; border:0; background:none; cursor:pointer; color:var(--ink); text-align:left; }
.rc-ff-body{ padding:0 14px 14px; }
.rc-ff-lines{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px; }
.rc-ff-lines li{ display:grid; grid-template-columns:56px 1fr auto; gap:10px; align-items:center; font-size:13.5px; }
.rc-ff-lines img, .rc-ff-noimg{ width:56px; height:56px; object-fit:cover; display:block; background:var(--dk-surface,#f4f4f1); }
.rc-ff-go{ font-size:14px; padding:12px 18px; }
.rc-ff-go.armed{ background:var(--red); }
@media (max-width:760px){ .rc-ff-head{ font-size:15px; padding:12px; } .rc-ff-lines li{ font-size:14px; grid-template-columns:64px 1fr auto; } .rc-ff-lines img, .rc-ff-noimg{ width:64px; height:64px; } .rc-ff-go{ font-size:15px; padding:13px 16px; width:100%; } }
.rc-matchbar{ position:sticky; top:62px; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0; padding:10px 12px; background:var(--card); border:1px solid var(--ink); box-shadow:var(--elev-1); font-size:13px; }
.rc-match{ font-size:13.5px; padding:10px 16px; }
.rc-match.armed{ background:var(--red); }
.rc-rep .rc-kind{ display:block; font-size:11px; margin-top:2px; }
.rc-rep input[type=checkbox]{ width:18px; height:18px; }
@media (max-width:760px){ .rc-matchbar{ font-size:14px; } .rc-match{ font-size:15px; padding:12px 14px; width:100%; } .rc-rep input[type=checkbox]{ width:22px; height:22px; } }

/* =====================================================================================
   ATELIER (2026-10-23): FigiHome's brand tokens for the shared Atelier layer.
   The layer itself (structure only) is docs/shared/hub-core/atelier.css, copied
   between the markers below by tools/sync-hub-core.mjs; never edit it here.
   DIRECTION  An auction catalogue: warm paper, ink, hairline-ruled sheets, big quiet
              numbers, red only for what needs you.
   TYPE       One family, the hub's Helvetica. Titles, the brief and big numbers at weight
              500 with tight tracking (no serif: Yassin, 2026-10-24, "new font is ugly").
              Labels in sentence case.
   SIGNATURE  The brief: one sentence that answers "how is it going", then the
              few things that need you, each a button straight to the problem.
   ===================================================================================== */
:root{
  --at-title-font:var(--sans); --at-title-weight:500; --at-title-track:-.03em; --at-figure-font:var(--sans);
  --at-lead-color:var(--ink);
  --at-paper:#fbfaf7; --at-raised:#fff; --at-hero-bg:#fff;
  --at-rule:#e3e1d9; --at-rule-2:#d4d1c6; --at-ink-2:#45474a; --at-muted-2:#8e908a;
  --at-lift:0 0 0 1px var(--at-rule-2), 0 1px 2px rgba(20,21,22,.04), 0 12px 28px -16px rgba(20,21,22,.28);
  --at-topbar-glass:rgba(238,238,234,.84); --at-topbar-shadow:0 14px 28px -24px rgba(20,21,22,.5);
  --at-rail-on-bg:#eeeeea; --at-rail-on-fg:#141516; --at-rail-on-shadow:0 8px 18px -10px rgba(0,0,0,.7); --at-rail-on-label:#fff;
  --at-track:rgba(20,21,22,.055); --at-track-hover:rgba(20,21,22,.09); --at-chip:rgba(20,21,22,.05);
  --at-chosen:var(--ink); --at-chosen-fg:#fff;
  --at-warn:#9a6a12; --at-bar:#2a2b2d; --at-img-bg:#ece9e2; --at-rank-bg:rgba(251,250,247,.92);
  --at-mono-bg:#ebe8e1; --at-vip:#b08a3e; --at-vip-ink:#7a5d1f; --at-vip-tint:rgba(176,138,62,.13); --at-vip-badge-ink:#6e531a; --at-vvip-fg:#f4f1ea;
  --at-bad-tint:rgba(200,56,31,.1); --at-bad-tint-2:rgba(200,56,31,.09); --at-bad-soft:rgba(200,56,31,.45);
  --at-st-pending:#a19c90; --at-st-out:#1a56b8; --at-st-delivered:var(--pos); --at-st-bosta:#7b5ea7; --at-st-postponed:#b08a3e;
  --at-band-mild:#d9c7a0; --at-band-warn:#c98a4a;
  --at-neutral:#c9a54e; --at-neutral-ink:#9a7a26;
}
/* >>> hub-core/atelier.css: GENERATED by tools/sync-hub-core.mjs from docs/shared/hub-core/atelier.css. Do not edit between these markers. */
/* =====================================================================================
   ATELIER LAYER: docs/shared/hub-core/atelier.css (the ONE source, since 2026-10-24)
   tools/sync-hub-core.mjs copies this file, unchanged, into every hub's styles.css
   between the "hub-core/atelier.css" markers; ./tools/check.sh fails on a stale copy.
   Edit that source file, never a hub's copy.

   STRUCTURE ONLY. Every colour and face is a --at-* token that each hub defines in
   its own styles.css, just above the markers, so FigiHome stays the Atelier
   (paper, ink, Helvetica), Yeganen keeps its red-and-white with the Fraunces title,
   and Khod Kart its warm paper, ink chips and red rail. A token a hub forgets is
   caught by the same check, because a missing var() renders as nothing, silently.

   What the layer is (first built for FigiHome, 2026-10-23):
   - Titles in sentence case; the rail lights the open section; the top bar lifts
     off the page only once something scrolls under it (.scrolled, set in app.js).
   - Paper panels ruled by a hairline ring. Cards do not bounce: hover means
     "this is clickable", nothing else. Calmer motion; reduced motion turns it off.
   - Filter rows: a pill track, the chosen one filled; the fill SLIDES (slide.js).
   - The brief (Stats; FigiHome's Feedback): one sentence that agrees with the
     cards under it, then the few things that need you, each a button.
   - Ledger strips: the KPI row as one ruled sheet with big quiet numbers.
   - Ledger tables on Customers and Orders, quiet status pills with a coloured
     dot (only exceptions tinted), the stuck pile as an exception panel.
   Scope: titles, rail, top bar, panels and hover are hub-wide; everything else is
   scoped to #stats-view, #customers-view, #orders-view and #feedback-view.
   Selectors name every hub's filter-row ids (#tabs, #st-period-tabs, #stats-tabs,
   #fb-period-tabs, #filters, #o-filters, #yo-filters): an id a hub lacks matches
   nothing there.
   ===================================================================================== */
:root{
  /* Structural tokens: the same in every hub. Brand tokens (--at-paper, --at-rule ...)
     come from the hub's own styles.css, ABOVE this layer. */
  --at-ring:0 0 0 1px var(--at-rule);
  --at-t:.16s cubic-bezier(.22,1,.36,1);
}
html{ scroll-padding-top:128px; }

/* ---- Titles: tight, sentence case (face and weight are brand tokens) ---------------- */
.view-title{ font-family:var(--at-title-font); font-weight:var(--at-title-weight); font-size:clamp(28px,2.5vw,36px); line-height:1.05;
  letter-spacing:var(--at-title-track); text-transform:none; }
.group-title{ font:600 12.5px var(--sans); letter-spacing:0; text-transform:none; color:var(--at-ink-2); }
.lead-title{ font:600 14px var(--sans); letter-spacing:0; text-transform:none; color:var(--at-lead-color); display:flex; align-items:center; gap:8px; }
.lead-title .ti{ color:var(--at-muted-2); }
.hero-sub{ font-weight:400; color:var(--muted); font-size:12.5px; }

/* ---- Top bar: flat until the page scrolls under it ------------------------------- */
#topbar{ transition:box-shadow var(--at-t), background-color var(--at-t); }
#topbar.scrolled{ background:var(--at-topbar-glass); -webkit-backdrop-filter:saturate(1.3) blur(12px); backdrop-filter:saturate(1.3) blur(12px);
  border-bottom-color:transparent; box-shadow:0 1px 0 var(--at-rule), var(--at-topbar-shadow); }

/* ---- Rail: the open section is lit like a page -------------------------------------- */
.rail-btn{ font:500 11px/1.15 var(--sans); letter-spacing:0; }
.rail-ic{ border-radius:12px; transition:background-color var(--at-t), color var(--at-t), transform .12s ease; }
.rail-btn:hover .ni{ transform:none; }
.rail-btn:active .rail-ic{ transform:scale(.94); }
.rail-btn.on .rail-ic{ background:var(--at-rail-on-bg); color:var(--at-rail-on-fg); box-shadow:var(--at-rail-on-shadow); }
.rail-btn.on{ color:var(--at-rail-on-label); }
#rail-ind{ box-shadow:none; }

/* ---- Surfaces: paper sheets ruled by a hairline. No hover lift, no bounce. -------- */
.panel, .trend-panel{ background:var(--at-paper); box-shadow:var(--at-ring); }
.panel-head, .panel > .lead-title:first-child{ border-bottom-color:var(--at-rule); }
.kpi, .panel, .trend-panel, .cm-card, .drv-card{ animation:none; }
@media (prefers-reduced-motion:no-preference){
  .kpi:hover, .cm-card:hover, .drv-card:hover, .ad-stat:hover, .kpi.hero:hover, .cm-hero:hover,
  .cm-warn:hover, .pm-attn-card:hover, .panel:hover, .trend-panel:hover{ transform:none; }
  .panel:hover, .trend-panel:hover{ box-shadow:var(--at-ring); }
  .kpi, .cm-card, .drv-card, .ad-stat, .panel, .trend-panel{ transition:box-shadow var(--at-t), background-color var(--at-t); }
}
.refresh-btn, .export, .status-save{ box-shadow:none; }
.refresh-btn:hover:not(:disabled), .export:hover:not(:disabled), .status-save:hover{ transform:none; box-shadow:none; }
.refresh-btn:active:not(:disabled), .export:active:not(:disabled){ transform:scale(.97); }
.refresh-btn, .export{ font-size:12.5px; padding:9px 15px; }
.freshness{ background:transparent; border-color:var(--at-rule-2); font-size:12px; }
.freshness.green::before{ animation:none; }

/* ---- Filter rows: a pill track, small caps, the chosen one in ink; the ink SLIDES --- */
#tabs, #st-period-tabs, #stats-tabs, #fb-period-tabs, #filters, #o-filters, #yo-filters{ position:relative; isolation:isolate; display:inline-flex; flex-wrap:nowrap; gap:2px;
  padding:3px; max-width:100%; overflow-x:auto; scrollbar-width:none; background:var(--at-track); border-radius:999px; margin-bottom:18px; }
#tabs::-webkit-scrollbar, #st-period-tabs::-webkit-scrollbar, #stats-tabs::-webkit-scrollbar, #fb-period-tabs::-webkit-scrollbar, #filters::-webkit-scrollbar, #o-filters::-webkit-scrollbar, #yo-filters::-webkit-scrollbar{ display:none; }
#tabs .tab, #st-period-tabs .tab, #stats-tabs .tab, #fb-period-tabs .tab, #filters .chip, #o-filters .chip, #yo-filters .chip{ position:relative; z-index:1; flex:none; border:0; background:transparent; border-radius:999px;
  min-height:32px; padding:0 13px; font:600 10.5px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  transition:color var(--at-t), background-color var(--at-t); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
#tabs .tab:hover:not(.on), #st-period-tabs .tab:hover:not(.on), #stats-tabs .tab:hover:not(.on), #fb-period-tabs .tab:hover:not(.on), #filters .chip:hover:not(.on), #o-filters .chip:hover:not(.on), #yo-filters .chip:hover:not(.on){ color:var(--ink); border:0; }
#tabs .tab.on, #st-period-tabs .tab.on, #stats-tabs .tab.on, #fb-period-tabs .tab.on, #filters .chip.on, #o-filters .chip.on, #yo-filters .chip.on{ background:var(--at-chosen); color:var(--at-chosen-fg); letter-spacing:.09em; }
.slide-on > .on{ background:transparent !important; }
.slide-ind{ position:absolute; z-index:0; left:0; top:0; border-radius:999px; background:var(--at-chosen); pointer-events:none;
  transition:transform .34s cubic-bezier(.22,1,.36,1), width .34s cubic-bezier(.22,1,.36,1), height .34s cubic-bezier(.22,1,.36,1); }
.seg{ position:relative; isolation:isolate; }
/* the label's colour follows the highlight in (slide.js glide), instead of flipping first */
.slide-on > *{ transition:color .24s ease .06s, transform .12s ease; }
.slide-on > :not(.slide-ind):active{ transform:scale(.96); }
.seg > .seg-btn{ position:relative; z-index:1; }
.seg .slide-ind{ border-radius:999px; }
#filters .chip.guide{ margin-left:2px; }

/* ---- The brief (Stats, Feedback) --------------------------------------------------- */
.brief{ margin:-6px 0 28px; }
.brief:empty{ display:none; }
.brief-day{ font:500 12.5px var(--sans); color:var(--muted); margin:0 0 10px; }
.brief-line{ margin:0; max-width:27em; font-family:var(--at-figure-font); font-weight:500; font-size:clamp(26px,2.55vw,38px);
  line-height:1.18; letter-spacing:-.028em; color:var(--ink); text-wrap:balance; }
.brief-line .m{ color:var(--at-muted-2); }
.brief-line .up{ color:var(--pos); }
.brief-line .down{ color:var(--red); }
.brief-sm .brief-line{ font-size:clamp(22px,2vw,30px); }
.needs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; margin-top:22px; max-width:1180px; }
.need{ --tone:var(--ink); display:flex; align-items:center; gap:14px; min-height:72px; padding:12px 16px; text-align:left; cursor:pointer;
  font:inherit; color:inherit; background:var(--at-paper); border:0; border-radius:14px; box-shadow:var(--at-ring); transition:box-shadow var(--at-t), background-color var(--at-t); }
.need.bad{ --tone:var(--red); } .need.warn{ --tone:var(--at-warn); }
.need-n{ flex:none; min-width:1.15em; font-family:var(--at-figure-font); font-size:36px; font-weight:500; line-height:1; color:var(--tone); font-variant-numeric:lining-nums;  letter-spacing:-.03em;}
.need-t{ min-width:0; }
.need-t b{ display:block; font:600 13.5px/1.25 var(--sans); color:var(--ink); }
.need-t span{ display:block; margin-top:3px; font-size:12px; color:var(--muted); }
.need-go{ margin-left:auto; font-size:22px; line-height:1; color:var(--at-muted-2); transition:transform var(--at-t), color var(--at-t); }
.need:hover{ background:var(--at-raised); box-shadow:var(--at-lift); }
.need:hover .need-go{ transform:translateX(3px); color:var(--ink); }
.need:active{ transform:scale(.99); }
.need-none{ display:flex; align-items:center; gap:8px; margin:0; font-size:13.5px; color:var(--pos); }
.need-none .gi{ width:16px; height:16px; }

/* ---- Ledger strips: one sheet, cells ruled by hairlines, big quiet numbers ----------- */
#stats-view .kpis, #stats-view .cust-metrics, #customers-view .cust-metrics, #feedback-view .cust-metrics{
  gap:0; background:var(--at-paper); border-radius:14px; box-shadow:var(--at-ring); overflow:hidden; }
#stats-view .kpis{ grid-template-columns:1.55fr repeat(5,minmax(0,1fr)); margin-bottom:22px; }
#stats-view .kpis > .kpi, #stats-view .cust-metrics > .cm-card, #customers-view .cust-metrics > .cm-card, #feedback-view .cust-metrics > .cm-card{
  min-width:0; background:transparent; border:0; border-left:1px solid var(--at-rule); border-radius:0; box-shadow:none !important; padding:18px 20px 16px; }
#stats-view .kpis > .kpi:first-child, #stats-view .cust-metrics > .cm-card:first-child,
#customers-view .cust-metrics > .cm-card:first-child, #feedback-view .cust-metrics > .cm-card:first-child{ border-left:0; }
#stats-view .kpi-label, #stats-view .cm-label, #customers-view .cm-label, #feedback-view .cm-label{
  font:500 12.5px var(--sans); letter-spacing:0; text-transform:none; color:var(--muted); }
#stats-view .kpi-value, #stats-view .cm-value, #customers-view .cm-value, #feedback-view .cm-value{
  font-family:var(--at-figure-font); font-weight:500; font-size:clamp(22px,2.3vw,32px); line-height:1; letter-spacing:-.035em; margin-top:12px; font-variant-numeric:tabular-nums; }
#stats-view .kpi.hero .kpi-value, #stats-view .cm-hero .cm-value, #customers-view .cm-hero .cm-value, #feedback-view .cm-hero .cm-value{ font-size:clamp(28px,3.1vw,46px); }
#stats-view .kpi-value small, #stats-view .cm-value small, #customers-view .cm-value small, #feedback-view .cm-value small{
  font-family:var(--sans); font-size:12.5px; font-weight:400; letter-spacing:0; color:var(--muted); margin-left:4px; }
#stats-view .kpi.hero, #stats-view .cm-hero, #customers-view .cm-hero, #feedback-view .cm-hero{ background:var(--at-hero-bg); }
#stats-view .kpi-delta{ border:0; padding:0; font-size:12px; font-weight:600; }
#stats-view .kpi-delta .g{ font-size:9px; vertical-align:1px; }
#stats-view .kpi .kpi-sub{ font-size:12px; }
#stats-view .cm-sub, #customers-view .cm-sub, #feedback-view .cm-sub{ font-size:12px; line-height:1.4; }
#stats-view button.kpi-drill:hover, #stats-view button.kpi-drill.hero:hover{ background:var(--at-raised); box-shadow:none; transform:none; }
#stats-view button.kpi-drill:hover .kpi-value{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; text-decoration-color:var(--at-rule-2); }

/* ---- Stats: trend, hero products, leaderboards, money, ads ------------------------- */
#stats-view .tb-bars{ gap:3px; }
#stats-view .tb-bar{ background:var(--at-bar); border-radius:3px 3px 0 0; }
#stats-view .tb-bar.last, #stats-view .tb-bar.hot{ background:var(--red); }
#stats-view .t-grid-h{ background:var(--at-rule); }
#stats-view .t-tip{ border-radius:10px; padding:8px 11px; box-shadow:0 12px 24px -12px rgba(0,0,0,.5); }
#stats-view .t-axis, #stats-view .t-cap, #stats-view .t-ylabel{ font-size:11px; letter-spacing:0; }
#stats-view .hero-grid{ gap:18px; }
#stats-view .hero-tile{ gap:4px; }
#stats-view .hero-img{ aspect-ratio:4/5; border-radius:12px; background:var(--at-img-bg); }
#stats-view .hero-img img{ transition:transform .7s cubic-bezier(.22,1,.36,1); }
#stats-view a.hero-tile:hover .hero-img img{ transform:scale(1.035); }
#stats-view .hero-rank{ background:var(--at-rank-bg); color:var(--ink); font-family:var(--at-figure-font); font-weight:500; font-size:15px;
  width:30px; height:30px; display:grid; place-items:center; border-radius:50%; box-shadow:none;  letter-spacing:-.03em;}
#stats-view .hero-name{ margin-top:8px; font-size:14px; font-weight:600; }
#stats-view .hero-pct b{ font-family:var(--at-figure-font); font-size:22px; font-weight:500;  letter-spacing:-.03em;}
#stats-view .row{ border-bottom-color:var(--at-rule); padding:10px 0; }
#stats-view .rk{ font-family:var(--at-figure-font); font-weight:500; font-size:17px; width:22px; color:var(--at-muted-2);  letter-spacing:-.03em;}
#stats-view .rk.gold{ color:var(--ink); }
#stats-view .bar{ height:3px; border-radius:2px; background:var(--at-rule); }
#stats-view .bar > i{ border-radius:2px; }
#stats-view .pct{ color:var(--muted); }
#stats-view .egp{ font-size:13.5px; }
#stats-view .mc-total-num{ font-family:var(--at-figure-font); font-weight:500; font-size:52px; letter-spacing:-.01em; }
#stats-view .ads-panel .cust-metrics{ margin-bottom:14px; }
#stats-view .ads-sub{ margin:18px 0 12px; }
.more-link{ font-size:12.5px; font-weight:500; color:var(--muted); text-decoration:none; transition:color var(--at-t); }
.more-link:hover{ color:var(--ink); }
.more-btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; margin-bottom:8px; border:0; border-radius:999px; cursor:pointer;
  background:var(--at-track); font:600 12.5px var(--sans); color:var(--at-ink-2); transition:background-color var(--at-t), color var(--at-t); }
.more-btn:hover{ background:var(--at-track-hover); color:var(--ink); }
.more-chev{ display:inline-block; font-size:16px; line-height:1; transition:transform .22s cubic-bezier(.22,1,.36,1); }
.more-btn[aria-expanded="true"] .more-chev{ transform:rotate(90deg); }
#ad-more:not([hidden]){ animation:sheetOpen .26s cubic-bezier(.22,1,.36,1); }
@keyframes sheetOpen{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
#stats-view .dead, #stats-view .dead-link{ border-color:var(--at-rule); background:var(--at-paper); }
#stats-view .dead-link:hover{ background:var(--at-raised); border-color:var(--at-rule-2); box-shadow:none; }

/* ---- Tables (Customers, Orders) ------------------------------------------------------ */
#customers-view .table-wrap, #orders-view .table-wrap{ box-shadow:var(--at-ring); background:var(--at-paper); }
#customers-view .dtable, #orders-view .dtable{ background:var(--at-paper); }
#customers-view .dtable thead th, #orders-view .dtable thead th{ background:var(--at-paper); font:500 12px var(--sans); letter-spacing:0;
  text-transform:none; color:var(--muted); border-bottom:1px solid var(--at-rule-2); padding-top:13px; padding-bottom:11px; }
#customers-view .dtable td, #orders-view .dtable td{ border-bottom-color:var(--at-rule); padding-top:11px; padding-bottom:11px; }
#customers-view .dtable tbody tr.drow, #orders-view .dtable tbody tr.drow{ transition:background-color .12s ease; }
#customers-view .dtable tbody tr.drow:hover, #orders-view .dtable tbody tr.drow:hover{ background:var(--at-raised); }
.dtable th.num, .dtable td.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dtable td.num small{ color:var(--muted); font-size:11px; }
#customers-view .cname-n, #orders-view .cname-n{ font-weight:600; font-size:14px; }
#customers-view .cname-s, #orders-view .cname-s{ font-size:12px; }
.drow-detail:not([hidden]) .detail{ animation:sheetOpen .22s cubic-bezier(.22,1,.36,1); }
#customers-view .col-main, #orders-view .col-main{ display:flex; align-items:center; gap:12px; }
.mono{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--at-mono-bg); color:var(--at-ink-2);
  font-family:var(--at-figure-font); font-weight:500; font-size:16px; line-height:1;  letter-spacing:-.03em;}
.mono.vip{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--at-vip); color:var(--at-vip-ink); }
.mono.vvip{ background:var(--ink); color:var(--at-vvip-fg); }
#customers-view .badge{ border:0; background:var(--at-chip); color:var(--at-ink-2); font-size:11px; font-weight:500; padding:3px 9px 3px 7px; }
#customers-view .badge.vvip{ background:var(--ink); color:#fff; }
#customers-view .badge.vip{ background:var(--at-vip-tint); color:var(--at-vip-badge-ink); }
#customers-view .badge.risky{ background:var(--at-bad-tint); color:var(--red); }
#customers-view .searchrow .search, #orders-view .searchrow .search{ background:var(--at-paper); border-color:var(--at-rule); border-radius:12px; }
#customers-view .searchrow .search-mode, #orders-view .searchrow .search-mode{ background:var(--at-paper); border-color:var(--at-rule); border-radius:12px; }
#customers-view .bulkbar{ margin-top:-4px; }
.wa{ transition:background-color var(--at-t), color var(--at-t), border-color var(--at-t); }

/* ---- Status: a quiet pill with a coloured dot; only exceptions are tinted ----------- */
.stchip.st-pending, .stchip.st-out, .stchip.st-delivered, .stchip.st-bosta, .stchip.st-postponed, .stchip.st-replace{
  border:0; background:var(--at-chip); color:var(--at-ink-2); font-size:11px; font-weight:500; }
.stchip.st-pending::before{ background:var(--at-st-pending); }
.stchip.st-out::before{ background:var(--at-st-out); }
.stchip.st-delivered::before{ background:var(--at-st-delivered); }
.stchip.st-bosta::before{ background:var(--at-st-bosta); }
.stchip.st-postponed::before{ background:var(--at-st-postponed); }
.stchip.st-replace::before{ background:var(--at-st-out); }
.stchip.st-cancelled, .stchip.st-returned, .stchip.st-retcancel, .stchip.st-refunded, .stchip.st-noanswer{
  border:0; background:var(--at-bad-tint-2); font-size:11px; font-weight:600; }

/* ---- Orders: the stuck pile reads as the exception it is ------------------------------ */
#orders-view .stuck{ border:0; border-radius:16px; background:var(--at-paper); box-shadow:var(--at-ring); overflow:hidden; margin-bottom:22px; }
#orders-view .stuck-head{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px 20px; padding:18px 22px; }
#orders-view .stuck-head:hover{ background:var(--at-raised); }
#orders-view .stuck-title{ font:600 13.5px var(--sans); letter-spacing:0; text-transform:none; color:var(--red); grid-row:1; }
#orders-view .stuck-sum{ display:contents; }
#orders-view .stuck-n{ grid-column:1; grid-row:2 / span 2; font-family:var(--at-figure-font); font-weight:500; font-size:58px; line-height:.9; color:var(--ink);  letter-spacing:-.03em;}
#orders-view .stuck-txt{ grid-column:2; grid-row:2; font-size:14px; color:var(--at-ink-2); }
#orders-view .stuck-txt b{ font-weight:600; color:var(--ink); }
#orders-view .stuck-bar{ grid-column:2; grid-row:3; display:flex; gap:3px; height:8px; max-width:520px; }
#orders-view .stuck-bar i{ display:block; min-width:6px; border-radius:2px; transform-origin:left; animation:barGrow .7s cubic-bezier(.22,1,.36,1) backwards; }
#orders-view .stuck-bar .sb-mild{ background:var(--at-band-mild); } #orders-view .stuck-bar .sb-warn{ background:var(--at-band-warn); } #orders-view .stuck-bar .sb-crit{ background:var(--red); }
#orders-view .stuck-bar i:nth-child(2){ animation-delay:.08s; } #orders-view .stuck-bar i:nth-child(3){ animation-delay:.16s; }
@keyframes barGrow{ from{ transform:scaleX(0); } to{ transform:none; } }
#orders-view .stuck-legend{ grid-column:2; grid-row:4; font-size:12px; color:var(--muted); }
#orders-view .stuck-chev{ grid-column:3; grid-row:1 / span 4; font-size:24px; }
#orders-view .stuck-clear .stuck-title{ color:var(--pos); }
#orders-view .stuck-body{ border-top:1px solid var(--at-rule); background:var(--at-raised); }

/* ---- Feedback ------------------------------------------------------------------------ */
.senti{ padding:6px 0 10px; }
.senti-total{ font-size:13px; color:var(--muted); margin-bottom:12px; }
.senti-total b{ font-family:var(--at-figure-font); font-weight:500; font-size:40px; color:var(--ink); margin-right:6px; vertical-align:-4px;  letter-spacing:-.03em;}
.senti-bar{ display:flex; gap:3px; height:14px; margin-bottom:18px; }
.senti-seg{ display:block; min-width:8px; border-radius:3px; transform-origin:left; animation:barGrow .8s cubic-bezier(.22,1,.36,1) backwards; }
.senti-seg:nth-child(2){ animation-delay:.08s; } .senti-seg:nth-child(3){ animation-delay:.16s; }
.senti-seg.fb-positive{ background:var(--pos); } .senti-seg.fb-neutral{ background:var(--at-neutral); } .senti-seg.fb-negative{ background:var(--red); }
.senti-row{ display:grid; grid-template-columns:22px 1fr auto 48px; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--at-rule); font-size:13.5px; }
.senti-ic .gi{ width:18px; height:18px; }
.senti-row.fb-positive .senti-ic{ color:var(--pos); } .senti-row.fb-neutral .senti-ic{ color:var(--at-neutral-ink); } .senti-row.fb-negative .senti-ic{ color:var(--red); }
.senti-n{ font-weight:600; font-variant-numeric:tabular-nums; } .senti-p{ text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
#feedback-view .fb-comment{ position:relative; border:0; border-radius:12px; background:var(--at-raised); box-shadow:var(--at-ring); padding:16px 16px 12px 46px; margin-bottom:10px; }
#feedback-view .fb-comment::before{ content:'\201C'; position:absolute; left:14px; top:4px; font-family:var(--at-figure-font); font-size:46px; line-height:1; color:var(--at-rule-2); }
#feedback-view .fb-comment.fb-negative::before{ color:var(--at-bad-soft); }
#feedback-view .fb-c-text{ font-size:15px; line-height:1.55; margin-bottom:10px; color:var(--ink); }
#feedback-view .fb-c-head{ margin:0; gap:8px; }
#feedback-view .fb-c-head .stchip{ border:0; background:var(--at-chip); font-size:11px; }
#feedback-view .fb-c-ord{ font-size:12px; color:var(--muted); }
#feedback-view .confirm-card{ border:0; background:var(--at-raised); box-shadow:var(--at-ring); border-radius:12px; }
#feedback-view .confirm-card.confirm-flag{ box-shadow:0 0 0 1px var(--at-bad-soft); }

/* ---- Phone ---------------------------------------------------------------------------
   Every Figi hub uses the phone's real width and says so with <html data-viewport="device">
   (FigiHome since 2026-11-07; before that it pinned width=700 and its phone sizes were ~1.8x).
   The :not([data-viewport="device"]) rules below are the old pinned sizes; no live hub takes
   them now, they stay for a hub that still pins. :where() adds no specificity. */
@media (max-width:760px){
  :where(html:not([data-viewport="device"])) .brief-line{ font-size:34px; }
  .needs{ grid-template-columns:1fr 1fr; }
  :where(html[data-viewport="device"]) .needs{ grid-template-columns:1fr; }
  :where(html:not([data-viewport="device"])) .need-n{ font-size:40px; } :where(html:not([data-viewport="device"])) .need-t b{ font-size:17px; } :where(html:not([data-viewport="device"])) .need-t span{ font-size:15px; }
  :where(html:not([data-viewport="device"])) #stats-view .kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  :where(html:not([data-viewport="device"])) #stats-view .kpis > .kpi:nth-child(4){ border-left:0; }
  :where(html:not([data-viewport="device"])) #stats-view .kpis > .kpi:nth-child(n+4){ border-top:1px solid var(--at-rule); }
  :where(html[data-viewport="device"]) #stats-view .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  :where(html[data-viewport="device"]) #stats-view .kpis > .kpi:nth-child(odd){ border-left:0; }
  :where(html[data-viewport="device"]) #stats-view .kpis > .kpi:nth-child(n+3){ border-top:1px solid var(--at-rule); }
  :where(html:not([data-viewport="device"])) #stats-view .kpi.hero .kpi-value{ font-size:34px; }
  #stats-view .cust-metrics, #customers-view .cust-metrics, #feedback-view .cust-metrics{ grid-template-columns:1fr 1fr; }
  #stats-view .cust-metrics > .cm-card:nth-child(odd), #customers-view .cust-metrics > .cm-card:nth-child(odd), #feedback-view .cust-metrics > .cm-card:nth-child(odd){ border-left:0; }
  #stats-view .cust-metrics > .cm-card:nth-child(n+3), #customers-view .cust-metrics > .cm-card:nth-child(n+3), #feedback-view .cust-metrics > .cm-card:nth-child(n+3){ border-top:1px solid var(--at-rule); }
  #tabs .tab, #st-period-tabs .tab, #stats-tabs .tab, #fb-period-tabs .tab, #filters .chip, #o-filters .chip, #yo-filters .chip{ min-height:44px; font-size:13px; padding:0 16px; }
  :where(html:not([data-viewport="device"])) #orders-view .stuck-n{ font-size:64px; }
  :where(html:not([data-viewport="device"])) #orders-view .stuck-txt{ font-size:17px; } :where(html:not([data-viewport="device"])) #orders-view .stuck-legend{ font-size:15px; }
  #customers-view .dtable tbody tr, #orders-view .dtable tbody tr{ background:var(--at-paper); box-shadow:var(--at-ring); }
  :where(html:not([data-viewport="device"])) .mono{ width:46px; height:46px; font-size:22px; }
}
@media (prefers-reduced-motion:reduce){
  .slide-on > *, .slide-on > :not(.slide-ind):active{ transition:none; transform:none; }
  .slide-ind, #ad-more:not([hidden]), .drow-detail:not([hidden]) .detail, #orders-view .stuck-bar i, .senti-seg,
  #stats-view .hero-img img{ animation:none; transition:none; }
}
#stats-view .kpis .kpi .kpi-foot{ flex-wrap:wrap; justify-content:flex-start; gap:4px 10px; }
#stats-view .kpis .kpi .kpi-sub{ text-align:start; white-space:normal; }
/* <<< hub-core/atelier.css */

/* ---- Stats › Meta ads: the ads table + the per-ad pop-up (2026-10-27) ---- */
.adt-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:4px 0 12px; }
.adt-bar-l{ font:600 10px var(--sans); letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin-inline-start:auto; }
.adt-bar .seg-btn{ min-height:32px; padding:0 11px; }
.adt-wrap{ overflow-x:auto; background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-md); }
.adt{ width:100%; border-collapse:collapse; font:400 13px var(--sans); font-variant-numeric:tabular-nums; }
.adt th{ position:sticky; top:0; background:var(--card); text-align:start; font:600 10.5px var(--sans); letter-spacing:.4px; text-transform:uppercase;
  color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.adt td{ padding:9px 12px; border-bottom:1px solid var(--rowline); vertical-align:middle; white-space:nowrap; color:var(--ink); }
.adt .num{ text-align:end; }
.adt tbody tr:last-child td{ border-bottom:0; }
.adt tr[tabindex]{ cursor:pointer; transition:background-color .15s var(--ease); }
.adt tr[tabindex]:hover{ background:var(--hoverbg); }
.adt tr[tabindex]:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; }
.adt-name{ width:100%; max-width:0; min-width:220px; }
.adt-name-in{ display:flex; align-items:center; gap:10px; min-width:0; }
.adt-txt{ display:flex; flex-direction:column; min-width:0; }
.adt-n{ overflow:hidden; text-overflow:ellipsis; }
.adt-meta{ font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.adt-tog{ flex:none; width:12px; color:var(--muted); font-size:15px; line-height:1; transition:transform .18s var(--ease); }
.adt-camp.open .adt-tog, .adt-set.open .adt-tog{ transform:rotate(90deg); }
/* A click re-draws the tree: the clicked row's arrow turns here, the revealed rows slide out from under
   it in adt-slide.js (Yassin, 2026-10-30: no popping). */
@keyframes adtTurnOpen{ from{ transform:rotate(0deg); } to{ transform:rotate(90deg); } }
@keyframes adtTurnClose{ from{ transform:rotate(90deg); } to{ transform:rotate(0deg); } }
.adt-wrap{ overflow-y:hidden; }
/* While rows slide (adt-slide.js) every row but the revealed ones sits above them on an opaque paper,
   so the revealed block comes out from under the clicked row. */
.adt.adt-sliding tr{ position:relative; z-index:1; background-color:var(--card); transition:none; }
.adt.adt-sliding tr.adt-in{ z-index:0; }
.adt tr.adt-just.open .adt-tog{ animation:adtTurnOpen .24s var(--ease) both; }
.adt tr.adt-just:not(.open) .adt-tog{ animation:adtTurnClose .2s var(--ease) both; }
@media (prefers-reduced-motion: reduce){ .adt tr.adt-just .adt-tog{ animation:none; } }
.adt-camp td{ font-weight:700; }
.adt-camp .adt-meta{ font-weight:400; }
.adt-set td{ background:color-mix(in srgb, var(--hoverbg) 45%, transparent); font-weight:600; }
.adt-set .adt-name-in{ padding-inline-start:16px; }
.adt-set .adt-meta{ font-weight:400; }
.adt-ad .adt-name-in{ padding-inline-start:30px; }
.adt-ad:not([hidden]) + .adt-camp td, .adt-set + .adt-camp td{ border-top:1px solid var(--line); }
.adt-thumb{ flex:none; width:38px; height:38px; border-radius:7px; object-fit:cover; background:var(--hoverbg); display:block; }
.adt-thumb-none{ background:repeating-linear-gradient(135deg, var(--hoverbg) 0 6px, transparent 6px 12px); border:1px solid var(--line); }
.adt-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-inline-end:5px; vertical-align:1px; background:var(--muted); }
.adt-dot-on{ background:var(--pos); } .adt-dot-bad{ background:var(--red); }
.adt-cpp{ font-weight:700; }
.adt-foot{ margin:10px 2px 0; font-size:11.5px; line-height:1.5; color:var(--muted); }
@media (max-width:640px){
  .adt-ctr{ display:none; }
  .adt td, .adt th{ padding:9px 8px; }
  .adt-name{ min-width:170px; }
  .adt-ad .adt-name-in{ padding-inline-start:12px; } .adt-set .adt-name-in{ padding-inline-start:6px; }
  .adt-bar-l{ margin-inline-start:0; width:100%; }
}

.adp-media{ position:relative; display:block; margin:12px 0 16px; border-radius:var(--r-md); overflow:hidden; background:var(--hoverbg); }
.adp-media img{ display:block; width:100%; max-height:420px; object-fit:contain; background:#000; }
.adp-media-none{ padding:34px 16px; text-align:center; font-size:12.5px; color:var(--muted); }
.adp-play{ position:absolute; inset:0; margin:auto; width:52px; height:52px; display:grid; place-items:center; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:18px; padding-inline-start:3px; box-sizing:border-box; }
.adp-figs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.adp-fig{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-sm); padding:10px 11px; }
.adp-fig.hero{ background:var(--ink); border-color:var(--ink); }
.adp-fig.hero .adp-fig-v, .adp-fig.hero .adp-fig-l{ color:var(--bg); }
.adp-fig-v{ font:700 18px/1.1 var(--sans); font-variant-numeric:tabular-nums; color:var(--ink); }
.adp-fig-l{ margin-top:4px; font-size:10.5px; color:var(--muted); }
.adp-h{ margin:20px 0 8px; font:600 10.5px var(--sans); letter-spacing:.4px; text-transform:uppercase; color:var(--muted); }
.adp-funnel{ display:grid; gap:7px; }
.adp-step{ display:grid; grid-template-columns:92px 1fr auto; align-items:center; gap:10px; font-size:12.5px; }
.adp-step-l{ color:var(--muted); }
.adp-step-bar{ height:8px; border-radius:4px; background:var(--hoverbg); overflow:hidden; }
.adp-step-bar i{ display:block; height:100%; background:var(--ink); border-radius:4px; }
.adp-step-n{ font-variant-numeric:tabular-nums; font-weight:600; text-align:end; min-width:70px; }
.adp-step-n small{ font-weight:400; color:var(--muted); margin-inline-start:3px; }
.adp-copy{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-sm); padding:12px 13px; font-size:13px; line-height:1.55;
  white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); }
.adp-copy b{ display:block; margin-bottom:6px; }
.adp-cta{ display:inline-block; margin-top:10px; text-transform:capitalize; white-space:nowrap; }
.adp-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.adp-links a{ text-decoration:none; display:inline-flex; align-items:center; gap:5px; min-height:38px; }
@media (max-width:640px){
  .adp-figs{ grid-template-columns:repeat(2, 1fr); }
  .adp-links a{ flex:1 1 calc(50% - 8px); justify-content:center; min-height:46px; }
}

/* ---- Dark mode (2026-10-27) -------------------------------------------------
   theme.js puts data-theme on <html> before first paint; only index.html loads it,
   so the courier portal (same stylesheet) stays light. Light mode is untouched: every
   hard-coded light colour above was rewritten as var(--card) (= #fff) or as
   var(--dk-*, <the original colour>), so these overrides only bite here.
   Semantic pastel chips (warn/positive/VIP tints) stay as they are on purpose. */
html[data-theme="dark"]{ color-scheme:dark;
  --bg:#111213; --ink:#ececea; --muted:#9b9d99; --line:#2a2b2e; --rowline:#202124; --hoverbg:#1f2022;
  --red:#e2583e; --pos:#53b071;
  --card:#18191b; --card-line:#26272a; --on-ink:#141516;
  --dk-surface:#1e1f21; --dk-line:#303134; --dk-text2:#c3c4c0;
  --elev-1:0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --elev-2:0 2px 8px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.4);
  --elev-hi:0 6px 16px rgba(0,0,0,.5), 0 22px 48px rgba(0,0,0,.55);
  --side-bg:#0b0b0c; --side-hover:#1a1b1d; --side-active:#232427; --side-line:#1d1e20;
  --at-lead-color:var(--ink);
  --at-paper:#18191b; --at-raised:#1f2022; --at-hero-bg:#1f2022;
  --at-rule:#2a2b2e; --at-rule-2:#36373a; --at-ink-2:#c9cac6; --at-muted-2:#8c8e8a;
  --at-lift:0 0 0 1px var(--at-rule-2), 0 1px 2px rgba(0,0,0,.3), 0 12px 28px -16px rgba(0,0,0,.7);
  --at-topbar-glass:rgba(17,18,19,.84); --at-topbar-shadow:0 14px 28px -24px rgba(0,0,0,.9);
  --at-rail-on-bg:#ececea; --at-rail-on-fg:#141516;
  --at-track:rgba(255,255,255,.06); --at-track-hover:rgba(255,255,255,.1); --at-chip:rgba(255,255,255,.07);
  --at-chosen:var(--ink); --at-chosen-fg:#141516;
  --at-bar:#d6d6d2; --at-img-bg:#222326; --at-rank-bg:rgba(24,25,27,.92); --at-mono-bg:#222326; --at-vvip-fg:#141516;
  --at-warn:#d9a441; --at-bad-tint:rgba(226,88,62,.16); --at-bad-tint-2:rgba(226,88,62,.14);
  --dk-gm-sea-1:#141516; --dk-gm-sea-2:#101112; --dk-gm-edge:#101112; --dk-gm-land:#2a2b2e; --dk-gm-lo:#3f4043; --dk-gm-hi:#f2f2ef;
  --dk-gm-tip:#2b2d31; --dk-gm-tip-line:#3a3b3f; --dk-btn-hover:#c9c9c6; }
html[data-theme="dark"] body{ background:var(--bg); color:var(--ink); }
html[data-theme="dark"] img{ color-scheme:light; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{ background-color:var(--card); color:var(--ink); }
html[data-theme="dark"] ::placeholder{ color:var(--muted); }

.theme-btn{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:transparent; font:500 12px var(--sans); color:var(--muted); cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background-color .15s ease; }
.theme-btn:hover{ color:var(--ink); border-color:var(--ink); }
.theme-btn svg{ width:15px; height:15px; }
.theme-btn .ic-sun{ display:none; }
html[data-theme="dark"] .theme-btn .ic-sun{ display:block; }
html[data-theme="dark"] .theme-btn .ic-moon{ display:none; }
.adt-flat .adt-ad .adt-name-in{ padding-inline-start:0; }
/* the shared Atelier layer hard-codes white on this ink badge; it is synced, so it is fixed here */
html[data-theme="dark"] #customers-view .badge.vvip{ color:var(--on-ink); }

/* generated by the 2026-10-27 dark pass: dark twins of hard-coded light surfaces and dark text */
html[data-theme="dark"]{
  --tb-eaf6ec:color-mix(in srgb, #eaf6ec 13%, #18191b);
  --tb-e3e3de:color-mix(in srgb, #e3e3de 13%, #18191b);
  --tb-faf9f6:color-mix(in srgb, #faf9f6 13%, #18191b);
  --tb-f7f6f2:color-mix(in srgb, #f7f6f2 13%, #18191b);
  --tb-eeeeeb:color-mix(in srgb, #eeeeeb 13%, #18191b);
  --tb-e6f0ea:color-mix(in srgb, #e6f0ea 13%, #18191b);
  --tb-f7e7e3:color-mix(in srgb, #f7e7e3 13%, #18191b);
  --tb-faeae7:color-mix(in srgb, #faeae7 13%, #18191b);
  --tb-f4f6fb:color-mix(in srgb, #f4f6fb 13%, #18191b);
  --tb-f0f0ec:color-mix(in srgb, #f0f0ec 13%, #18191b);
  --tb-fdf0dc:color-mix(in srgb, #fdf0dc 13%, #18191b);
  --tb-fdf6ea:color-mix(in srgb, #fdf6ea 13%, #18191b);
  --tb-f1f8f3:color-mix(in srgb, #f1f8f3 13%, #18191b);
  --tb-fbefec:color-mix(in srgb, #fbefec 13%, #18191b);
  --tb-e8f4ec:color-mix(in srgb, #e8f4ec 13%, #18191b);
  --tb-f4f4f4:color-mix(in srgb, #f4f4f4 13%, #18191b);
  --tl-cfcfc9:color-mix(in srgb, #cfcfc9 28%, #26272a);
  --tl-b9b4a4:color-mix(in srgb, #b9b4a4 28%, #26272a);
  --tl-cfe6d4:color-mix(in srgb, #cfe6d4 28%, #26272a);
  --tl-9ec7a8:color-mix(in srgb, #9ec7a8 28%, #26272a);
  --tl-d3bd7d:color-mix(in srgb, #d3bd7d 28%, #26272a);
  --tl-dbb28c:color-mix(in srgb, #dbb28c 28%, #26272a);
  --tl-dcc9c4:color-mix(in srgb, #dcc9c4 28%, #26272a);
  --tl-e0bdb6:color-mix(in srgb, #e0bdb6 28%, #26272a);
  --tl-cfe0d3:color-mix(in srgb, #cfe0d3 28%, #26272a);
  --tl-f1d6a8:color-mix(in srgb, #f1d6a8 28%, #26272a);
  --tl-f0c6bd:color-mix(in srgb, #f0c6bd 28%, #26272a);
  --tl-bfdcc9:color-mix(in srgb, #bfdcc9 28%, #26272a);
  --tf-8a6d1f:color-mix(in srgb, #8a6d1f 45%, #f2f2ef);
  --tf-6f6a60:color-mix(in srgb, #6f6a60 45%, #f2f2ef);
  --tf-1a56b8:color-mix(in srgb, #1a56b8 45%, #f2f2ef);
  --tf-188038:color-mix(in srgb, #188038 45%, #f2f2ef);
  --tf-c05c0a:color-mix(in srgb, #c05c0a 45%, #f2f2ef);
  --tf-7b1fa2:color-mix(in srgb, #7b1fa2 45%, #f2f2ef);
  --tf-2f8a4e:color-mix(in srgb, #2f8a4e 45%, #f2f2ef);
  --tf-8a1f14:color-mix(in srgb, #8a1f14 45%, #f2f2ef);
  --tf-b3261e:color-mix(in srgb, #b3261e 45%, #f2f2ef);
  --tf-276b3f:color-mix(in srgb, #276b3f 45%, #f2f2ef);
  --tf-3a3c3a:color-mix(in srgb, #3a3c3a 45%, #f2f2ef);
  --tf-8a5a12:color-mix(in srgb, #8a5a12 45%, #f2f2ef);
  --tf-6e4a10:color-mix(in srgb, #6e4a10 45%, #f2f2ef);
  --tf-245f37:color-mix(in srgb, #245f37 45%, #f2f2ef);
  --tf-15803d:color-mix(in srgb, #15803d 45%, #f2f2ef);
  --tf-b45309:color-mix(in srgb, #b45309 45%, #f2f2ef);
  --tf-6b7280:color-mix(in srgb, #6b7280 45%, #f2f2ef);
}

/* Docked drawer (push: true): the page makes room instead of being covered (2026-10-27) */
#main-col{ transition:margin .28s var(--ease); }
@media (min-width:900px){ body.drawer-push #main-col{ margin-inline-end:min(480px, 100vw); } }
.drawer.drawer-docked{ box-shadow:none; border-inline-start:1px solid var(--line); }
.adt tr.adt-ad.on td{ background:var(--hoverbg); }
.adt tr.adt-ad.on td:first-child{ box-shadow:inset 3px 0 0 var(--red); }
@media (prefers-reduced-motion:reduce){ #main-col{ transition:none; } }
/* loading shimmers and the map tile are gradients, which the colour passes do not rewrite */
html[data-theme="dark"] .skel-line, html[data-theme="dark"] .skel-card, html[data-theme="dark"] .skel-block .skel-line{
  background:linear-gradient(90deg, #1f2022 0%, #2a2b2e 45%, #1f2022 90%); background-size:200% 100%; }
html[data-theme="dark"] .vs-cards i, html[data-theme="dark"] .vs-panel b, html[data-theme="dark"] .vs-panel span{
  background:linear-gradient(100deg, #1f2022 20%, #2a2b2e 40%, #1f2022 60%); background-size:300% 100%; }

/* Page arrival when switching tabs (app.js enterView, 2026-10-27) */
@keyframes viewInUp{ from{ opacity:0; transform:translateY(8px); } }
@keyframes viewInNext{ from{ opacity:0; transform:translateX(14px); } }
@keyframes viewInPrev{ from{ opacity:0; transform:translateX(-14px); } }
#content > section.view-in{ animation-duration:.32s; animation-timing-function:var(--ease); animation-fill-mode:backwards; }
#content > section.view-in-up{ animation-name:viewInUp; }
#content > section.view-in-next{ animation-name:viewInNext; }
#content > section.view-in-prev{ animation-name:viewInPrev; }
#sub-ind{ transition:none; }
@media (prefers-reduced-motion:reduce){ #content > section.view-in{ animation:none; } }

/* Paper is white: a print in the dark theme uses the light tokens (2026-10-27) */
@media print{
  html[data-theme="dark"]{ color-scheme:light; --bg:#fff; --card:#fff; --ink:#141516; --muted:#70726e; --line:#e3e3de;
    --card-line:#e9e9e4; --on-ink:#fff; --dk-text2:#444; --dk-surface:#f7f7f4; --dk-line:#e3e3de;
    --dk-gm-sea-1:#fdfdfc; --dk-gm-sea-2:#f7f7f4; --dk-gm-edge:#fff; --dk-gm-land:#e6e6e1; --dk-gm-lo:#d6d6d0; --dk-gm-hi:#141516; }
}

/* ---- Bolder rail + selected tab (Yassin: "too thin", 2026-10-27). After the Atelier
   layer on purpose: same selectors, so these win for FigiHome only. ---- */
#rail{ width:96px; gap:26px; padding:20px 10px; }
.rail-groups{ gap:8px; }
.rail-btn{ min-height:70px; gap:7px; font:600 11.5px/1.15 var(--sans); letter-spacing:.01em; }
.rail-ic{ width:54px; height:40px; border-radius:14px; }
.rail-btn .ni{ width:22px; height:22px; stroke-width:2; }
.rail-btn.on{ font-weight:700; }
.rail-btn.on .rail-ic{ box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 10px 22px -12px rgba(0,0,0,.9); }
.rail-btn.on .ni{ stroke-width:2.2; }
#rail-ind{ left:-10px; width:4px; height:40px; border-radius:0 4px 4px 0; box-shadow:0 0 14px rgba(226,88,62,.55); }
#rail-ind.ready{ transition:none; }
#subnav{ gap:4px; }
#subnav .nav-item{ font:500 14px var(--sans); padding:10px 14px 14px; border-radius:10px 10px 0 0; transition:color .2s ease, background-color .2s ease; }
#subnav .nav-item:hover:not(.on){ background:var(--hoverbg); }
#subnav .nav-item.on{ font-weight:700; color:var(--ink); }
#sub-ind{ height:3px; border-radius:3px 3px 0 0; box-shadow:0 0 12px color-mix(in srgb, var(--red) 55%, transparent); }

/* Money in/out record groups fold (finance.js groupsHTML, 2026-10-27) */
details.exp-grp > summary.exp-grp-head{ list-style:none; cursor:pointer; border-radius:6px; transition:background-color .15s ease, color .15s ease; }
details.exp-grp > summary.exp-grp-head::-webkit-details-marker{ display:none; }
details.exp-grp > summary.exp-grp-head:hover{ background:var(--hoverbg); color:var(--ink); }
details.exp-grp > summary.exp-grp-head:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
details.exp-grp > summary .exp-grp-chev{ display:inline-block; width:7px; height:7px; margin-inline-end:8px; vertical-align:1px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(-45deg); transition:transform .22s var(--ease); }
details.exp-grp[open] > summary .exp-grp-chev{ transform:rotate(45deg); }
details.exp-grp:not([open]) > summary.exp-grp-head{ border-bottom-color:transparent; }
details.exp-grp[open] > .exp-grp-rows{ animation:grpOpen .24s var(--ease); }
@keyframes grpOpen{ from{ opacity:0; transform:translateY(-4px); } }
button.exp-grp-more{ display:block; border:0; background:none; cursor:pointer; padding:8px 2px; font-weight:600; color:var(--ink); }
button.exp-grp-more:hover{ text-decoration:underline; }
@media (prefers-reduced-motion:reduce){ details.exp-grp > summary .exp-grp-chev{ transition:none; } details.exp-grp[open] > .exp-grp-rows{ animation:none; } }
@media (max-width:760px){ details.exp-grp > summary.exp-grp-head{ min-height:44px; align-items:center; } }

/* ---- Selected rail item + trend bars (Yassin, 2026-10-27): the chosen section is a
   grey chip with a RED icon (was a white chip with a black icon), and the Overview
   bars are red: muted for the history, full red for today and the bar under the cursor. */
:root{ --at-rail-on-bg:#2e3034; --at-rail-on-fg:var(--red); --at-rail-on-label:#fff;
  --at-bar:color-mix(in srgb, var(--red) 42%, #fff); }
html[data-theme="dark"]{ --at-rail-on-bg:#2b2d31; --at-rail-on-fg:var(--red);
  --at-bar:color-mix(in srgb, var(--red) 48%, #18191b); }
.rail-btn.on .rail-ic{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 10px 22px -12px rgba(0,0,0,.9); }
#stats-view .tb-bar{ transition:height .7s cubic-bezier(.22,1,.36,1), background-color .15s ease; }
#stats-view .tb-bar.last, #stats-view .tb-bar.hot{ background:var(--red); box-shadow:0 0 14px -2px color-mix(in srgb, var(--red) 60%, transparent); }

/* The link up to Figi Trade's Finance (api/group-link.js), admin and accountant only by virtue of the Finance tab. */
.group-link{font-size:13px;color:var(--text-2);text-decoration:underline;text-underline-offset:3px;margin-inline-start:12px}
.group-link:hover{color:var(--text-1)}

/* ---- The Reports page (2026-11-02): one large headline, the steps, everything else folded. ---- */
.report-status{ min-height:18px; margin:0 0 14px; font-size:13px; color:var(--muted); }
.rep-page{ max-width:860px; margin:0 auto; padding-bottom:64px; }
.rep-page .rep-head{ border:0; padding:8px 0 30px; margin:0; }
.rep-pick{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.rep-pick select{ font:inherit; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:9px; padding:6px 10px; cursor:pointer; }
.rep-page .rep-headline{ font-size:clamp(23px, 3vw, 34px); line-height:1.5; font-weight:500; margin:22px 0 0; }
.rep-page .rep-stitle{ margin:0 0 12px; font-size:14px; letter-spacing:0; text-transform:none; color:var(--muted); text-align:right; }
.rep-page .rep-action{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; padding:20px 22px; margin-bottom:10px; }
.rep-amain{ grid-column:2; grid-row:1; }
.rep-aside{ grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.rep-page .rep-aimpact{ font-size:15px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rep-page .rep-atitle{ font-size:17px; font-weight:500; margin:0 0 4px; }
.rep-page .rep-awhy{ margin:0; font-size:14px; line-height:1.7; color:var(--muted); }
.rep-page .rep-abtns{ grid-column:1; grid-row:2; margin:0; display:flex; gap:6px; align-items:center; }
.rep-amore{ grid-column:2; grid-row:2; }
.rep-amore summary, .rep-full > summary, .rep-page .rep-raw summary{ cursor:pointer; font-size:13px; color:var(--muted); }
.rep-amore summary:hover, .rep-full > summary:hover{ color:var(--ink); }
.rep-amore[open] > summary{ margin-bottom:10px; }
.rep-full{ margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }
.rep-full > summary{ font-size:15px; font-weight:500; color:var(--ink); }
.rep-page .rep-raw{ margin-top:20px; }
@media (max-width:640px){
  .rep-page .rep-action{ display:block; padding:16px; }
  .rep-aside{ margin-bottom:8px; }
  .rep-page .rep-abtns{ margin-top:12px; }
}

/* ---- Posts tab (Instagram post generator, 2026-11-06) ---- */
.pq-lead{ font:500 13px var(--sans); color:var(--muted); margin:0 0 10px; max-width:70ch; }
.pq-msg{ font:500 12px var(--sans); color:var(--ink); min-height:1em; margin:0 0 10px; }
#posts-view .panel{ margin-bottom:16px; }
.pq-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-bottom:8px; }
.pq-card{ border:1px solid var(--line); background:var(--card); display:flex; flex-direction:column; }
.pq-img{ aspect-ratio:4/5; background:var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pq-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pq-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; }
.pq-place{ font:600 11px var(--sans); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.pq-title{ font:600 15px var(--sans); letter-spacing:-.01em; margin:0; }
.pq-idea{ font:500 12px var(--sans); color:var(--muted); margin:0; }
.pq-caption{ font:500 13px/1.45 var(--sans); white-space:pre-wrap; margin:4px 0; padding:10px; background:var(--bg,#f7f7f4); border:1px solid var(--line); }
.pq-actions, .pq-row-actions{ display:flex; flex-wrap:wrap; gap:6px; }
.pq-btn{ text-decoration:none; display:inline-flex; align-items:center; }
.pq-danger{ background:transparent; color:var(--red); border-color:var(--line); box-shadow:none; }
.pq-search{ width:100%; max-width:420px; font:500 13px var(--sans); padding:9px 12px; border:1px solid var(--line); background:var(--card); color:var(--ink); margin:0 0 8px; }
.pq-list{ list-style:none; margin:0 0 8px; padding:0; }
.pq-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.pq-row:first-child{ border-top:0; }
.pq-row img, .pq-noimg{ width:48px; height:48px; object-fit:cover; flex:none; background:var(--line); }
.pq-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font:500 13px var(--sans); }
.pq-row-main span{ font-size:12px; color:var(--muted); }
.pq-row.is-failed .pq-row-main span{ color:var(--red); }
.pq-ask{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; }
.pq-ask-q{ font:500 12px var(--sans); color:var(--ink); margin-right:2px; }
.pq-danger-solid, .pq-danger-solid:hover:not(:disabled){ background:var(--red); border-color:var(--red); color:#fff; }
.pq-quiet{ background:transparent; color:var(--ink); box-shadow:none; }
@media (max-width:600px){ .pq-row{ flex-wrap:wrap; } .pq-row-actions{ width:100%; } }
/* Posts tab: reorder + make now (2026-11-06) */
[data-drag]{ cursor:grab; }
[data-drag].is-dragging{ opacity:.45; }
.pq-row.drop-before{ box-shadow:inset 0 2px 0 var(--ink); }
.pq-row.drop-after{ box-shadow:inset 0 -2px 0 var(--ink); }
.pq-card.drop-before{ box-shadow:-3px 0 0 var(--ink); }
.pq-card.drop-after{ box-shadow:3px 0 0 var(--ink); }
.pq-grip{ color:var(--muted); font-size:14px; letter-spacing:-2px; padding:0 2px; user-select:none; }
.pq-place{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pq-arrows{ display:inline-flex; gap:4px; }
.pq-arrow{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--card); color:var(--ink); font:600 14px var(--sans); cursor:pointer; padding:0; }
.pq-arrow:hover{ border-color:var(--ink); }
.pq-drawing{ font:500 12px var(--sans); color:var(--muted); padding:6px 0; }
/* Posts tab: Post to Instagram (2026-11-07) */
.pq-ig{ font-weight:600; }
.pq-igerr{ font:500 12px var(--sans); color:var(--red); margin:0; }