/* ══════════════════════════════════════════════════════════════════════════
   plenum.css — a hand-authored control-plane UI.

   Design intent (not a template):
   · The signature is a DUAL accent that maps straight onto the physics: cold air
     (ice-blue, supply) + hot air (red, return). Surfaces are warm true-grey.
     No product-rainbow, no off-the-shelf Tailwind-blue. The cold blue also carries
     up/positive money, the hot red down/negative — so the colours tell the HVAC story.
   · Layout breaks the uniform grid: a featured revenue "hero", asymmetric stat
     band, one featured product card + compact secondaries. Varied aspect ratios.
   · Depth comes from layered shadows whose colour is tinted with the ink
     undertone (never pure black), paired with warm hairline borders.
   · Motion is spring-eased and restrained; focus states are custom-drawn.
   · Type is a fixed modular scale; headers sit at medium/semibold, never heavy.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── warm true-grey neutrals ── */
  --paper:#f4f6fa; --panel:#ffffff; --panel-2:#eef2f7; --sunken:#e9edf3;
  --ink:#131722; --ink-2:#4a5568; --ink-3:#8a94a4;
  --hair:#e4e9f1; --hair-2:#d5dce8;
  /* ── signature dual accent: cold air (ice-blue, supply) is the interactive brand ── */
  --accent:#1493e6; --accent-2:#0f76bf; --accent-wash:#dcecfb; --accent-ring:rgba(20,147,230,.30);
  /* hot-cold pair: cold = supply / up / positive, hot = return / down / negative */
  --cold:#1493e6; --hot:#e23b3b;
  --pos:var(--cold); --neg:var(--hot);
  /* ── type: fixed modular scale ── */
  --font:'Sora',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --t-micro:10.5px; --t-xs:11.5px; --t-sm:12.5px; --t-base:13.5px;
  --t-md:15px; --t-lg:17px; --t-xl:20px; --t-2xl:25px; --t-3xl:33px;
  --track-cap:.145em; --track-tight:-.021em; --track-snug:-.012em;
  /* ── shape ── */
  --r-xs:7px; --r:11px; --r-lg:15px; --r-xl:19px;
  /* ── motion ── */
  --spring:cubic-bezier(.34,1.32,.52,1); --out:cubic-bezier(.22,.61,.36,1); --dur:.19s;
  /* ── depth: layered, ink-tinted (never pure black) ── */
  --sh-1:0 1px 1.5px rgba(28,26,22,.05),0 1px 2px rgba(28,26,22,.03);
  --sh-2:0 1px 2px rgba(28,26,22,.05),0 10px 20px -8px rgba(28,26,22,.11),0 22px 38px -20px rgba(28,26,22,.12);
  --sh-pop:0 2px 8px rgba(28,26,22,.07),0 22px 50px -14px rgba(28,26,22,.24);
  --ring:0 0 0 2px var(--panel),0 0 0 4px var(--accent-ring);
  /* back-compat aliases (login.html + inline refs) */
  --bg:var(--paper); --card:var(--panel); --card2:var(--panel-2); --bg2:var(--sunken);
  --line:var(--hair); --line2:var(--hair-2); --ink3:var(--ink-3); --ink2:var(--ink-2);
  --accent-ink:var(--accent-2); --accent2:var(--accent-2); --red:var(--neg); --green:var(--pos); --amber:var(--accent);
  --design:var(--ink-2); --dispatch:var(--ink-2); --books:var(--ink-2); --portal:var(--ink-2);
}
:root[data-theme="dark"]{
  --paper:#0e0f12; --panel:#1b1e25; --panel-2:#23272f; --sunken:#15171c;
  --ink:#f2f4f8; --ink-2:#aeb6c4; --ink-3:#727b8b;
  --hair:#2c313b; --hair-2:#3a404c;
  --accent:#33b1ff; --accent-2:#5cc0ff; --accent-wash:#0a2233; --accent-ring:rgba(51,177,255,.32);
  --cold:#33b1ff; --hot:#ff5c5c;
  --sh-1:0 1px 2px rgba(0,0,0,.42);
  --sh-2:0 1px 2px rgba(0,0,0,.42),0 12px 28px -8px rgba(0,0,0,.55),0 28px 50px -22px rgba(0,0,0,.6);
  --sh-pop:0 18px 46px -12px rgba(0,0,0,.66);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--paper);color:var(--ink);font-size:var(--t-base);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01" 1}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
[hidden]{display:none!important}

/* one custom focus system for the whole app (no browser defaults) */
:where(a,button,[tabindex],input){outline:none}
:where(a,button,input,.clickable,.wapp,.org):focus-visible{box-shadow:var(--ring);border-radius:var(--r-xs)}
.kpi:focus-visible,.stat:focus-visible,.app:focus-visible{box-shadow:var(--ring)}

/* ── TOP BAR ─────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:0 26px;height:58px;background:color-mix(in srgb,var(--paper) 80%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--hair)}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:var(--track-snug);font-size:var(--t-md);flex-shrink:0}
.brand .dot{width:23px;height:23px;border-radius:6px;background:var(--accent);display:grid;place-items:center;color:#fff;font-size:13px}
.brand .dot i{color:#fff}
.brand .brand-logo{width:28px;height:28px;object-fit:contain;display:block;flex-shrink:0}

.pop{position:relative}
.waffle-btn{display:flex;align-items:center;gap:7px;height:33px;padding:0 12px;border-radius:9px;flex-shrink:0;
  border:1px solid var(--hair-2);background:var(--panel);cursor:pointer;font-size:var(--t-sm);font-weight:500;
  box-shadow:var(--sh-1);transition:border-color var(--dur) var(--out),box-shadow var(--dur) var(--out)}
.waffle-btn i{font-size:15px;color:var(--ink-2)}
.waffle-btn:hover,.waffle-btn[aria-expanded="true"]{border-color:var(--ink-3);box-shadow:var(--sh-2)}
.menu{position:absolute;top:44px;background:var(--panel);border:1px solid var(--hair-2);
  border-radius:16px;padding:9px;box-shadow:var(--sh-pop);z-index:50;
  transform-origin:top;animation:menu .16s var(--spring)}
@keyframes menu{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.waffle-menu{left:0;width:320px}
.waffle-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.wapp{display:flex;flex-direction:column;gap:9px;padding:13px;border-radius:12px;border:1px solid var(--hair);
  background:var(--panel);position:relative;cursor:pointer;text-align:left;
  transition:transform var(--dur) var(--spring),border-color var(--dur) var(--out),background var(--dur)}
.wapp:hover{border-color:var(--hair-2);background:var(--panel-2);transform:translateY(-2px)}
.wapp .ic{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;font-size:15px;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--hair)}
.wapp b{font-size:var(--t-sm);font-weight:600}
.wapp span{font-size:var(--t-xs);color:var(--ink-3)}
.wapp.locked{opacity:.62}
.wapp .lock{position:absolute;top:12px;right:12px;font-size:13px;color:var(--ink-3)}
.menu-foot{margin-top:8px;padding:9px 8px 3px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;
  align-items:center;font-size:var(--t-xs);color:var(--ink-3)}
.menu-foot a{color:var(--accent);font-weight:600;cursor:pointer;transition:color var(--dur)}
.menu-foot a:hover{color:var(--accent-2)}

.spacer{flex:1}
.tb-btn{width:33px;height:33px;border-radius:9px;border:1px solid var(--hair-2);background:var(--panel);flex-shrink:0;
  color:var(--ink-2);display:grid;place-items:center;cursor:pointer;position:relative;box-shadow:var(--sh-1);
  transition:color var(--dur) var(--out),border-color var(--dur) var(--out),transform var(--dur) var(--spring)}
.tb-btn:hover,.tb-btn[aria-expanded="true"]{color:var(--ink);border-color:var(--ink-3)}
.tb-btn:active{transform:scale(.93)}
.tb-btn .badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--accent);color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center;font-family:var(--mono)}
.notif-menu{right:0;width:326px}
.notif-menu h4{font-size:var(--t-sm);font-weight:600;padding:4px 6px 10px}
.notif{display:flex;gap:11px;padding:10px 8px}
.notif .d{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0}
.notif p{font-size:var(--t-sm);line-height:1.4;font-weight:500}
.notif span{font-size:var(--t-micro);color:var(--ink-3)}
.notif-link{text-decoration:none;color:inherit;border-radius:10px;cursor:pointer;align-items:center;
  transition:background var(--dur) var(--out)}
.notif-link:hover{background:var(--panel-2)}
.notif .nic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:15px;flex-shrink:0;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--hair)}
.notif .nic.urgent{background:color-mix(in srgb,var(--neg) 12%,var(--panel));color:var(--neg);border-color:color-mix(in srgb,var(--neg) 22%,var(--panel))}
.notif-row{display:flex;align-items:center;gap:2px}
.notif-row .notif-link{flex:1 1 auto;min-width:0}
.notif-x{flex-shrink:0;width:26px;height:26px;border:0;border-radius:7px;background:none;color:var(--ink-3);
  cursor:pointer;display:grid;place-items:center;font-size:14px;opacity:0;
  transition:opacity var(--dur) var(--out),background var(--dur) var(--out),color var(--dur) var(--out)}
.notif-row:hover .notif-x,.notif-x:focus-visible{opacity:1}
.notif-x:hover{background:var(--panel-2);color:var(--ink-1)}
@media (hover:none){.notif-x{opacity:.55}}

.org{display:flex;align-items:center;gap:8px;height:33px;padding:0 7px 0 9px;border-radius:9px;flex-shrink:0;
  border:1px solid var(--hair-2);background:var(--panel);cursor:pointer;box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--out)}
.org:hover,.org[aria-expanded="true"]{border-color:var(--ink-3)}
.org .av{width:22px;height:22px;border-radius:6px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:10px;font-weight:600}
.org b{font-size:var(--t-sm);font-weight:600}
.org i{font-size:14px;color:var(--ink-3)}
.org-menu{right:0;width:284px}
.org-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;cursor:pointer;transition:background var(--dur)}
.org-row:hover,.org-row.active{background:var(--panel-2)}
.org-row[data-switch-org]:hover .ti-arrows-exchange{color:var(--accent-2)}
.org-row .av{width:29px;height:29px;border-radius:8px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:10.5px;font-weight:600}
.org-row b{font-size:var(--t-sm);display:block;line-height:1.25}
.org-row span{font-size:var(--t-micro);color:var(--ink-3)}
/* menu section label + vertical action rows + separators */
.menu-cap{font-family:var(--mono);font-size:9.5px;letter-spacing:var(--track-cap);text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:5px 9px 8px}
.menu-sep{height:1px;background:var(--hair);margin:7px 5px}
.menu-links{display:flex;flex-direction:column;gap:1px}
.menu-link{display:flex;align-items:center;gap:11px;padding:9px 9px;border-radius:9px;cursor:pointer;
  font-size:var(--t-sm);font-weight:500;color:var(--ink-2);transition:background var(--dur) var(--out),color var(--dur) var(--out)}
.menu-link i{font-size:16px;color:var(--ink-3);transition:color var(--dur) var(--out)}
.menu-link:hover{background:var(--panel-2);color:var(--ink)}
.menu-link:hover i{color:var(--ink-2)}
.menu-link.danger:hover{background:color-mix(in srgb,var(--neg) 9%,var(--panel));color:var(--neg)}
.menu-link.danger:hover i{color:var(--neg)}

/* ── LAYOUT SHELL ────────────────────────────────────────── */
.wrap{max-width:1160px;margin:0 auto;padding:48px 26px 96px}
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hello .eyebrow{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3);font-weight:600}
.hello h1{font-size:var(--t-3xl);font-weight:600;letter-spacing:var(--track-tight);margin-top:10px;line-height:1.05}
.hello .sub{color:var(--ink-2);font-size:var(--t-md);margin-top:9px;max-width:52ch}
.plan-pill{display:flex;align-items:center;gap:16px;padding:11px 15px;border-radius:12px;background:var(--panel);
  border:1px solid var(--hair);box-shadow:var(--sh-1);white-space:nowrap}
.plan-pill .k{font-family:var(--mono);font-size:9.5px;letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3)}
.plan-pill b{font-size:var(--t-base);font-weight:600;margin-top:2px;display:block}
.plan-pill .up{font-size:var(--t-xs);font-weight:600;color:var(--accent);cursor:pointer;transition:color var(--dur)}
.plan-pill .up:hover{color:var(--accent-2)}

/* section label */
.sect-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 16px}
.sect-head h2{font-family:var(--mono);font-size:var(--t-xs);font-weight:600;letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3)}
.sect-head a{font-size:var(--t-sm);color:var(--ink-2);font-weight:500;cursor:pointer;transition:color var(--dur)}
.sect-head a:hover{color:var(--ink)}

/* ── STAT BAND (asymmetric, broken grid) ─────────────────── */
.stats{display:grid;grid-template-columns:1.55fr minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:14px;margin:40px 0 46px}
.stat{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-1);
  display:flex;flex-direction:column;min-height:118px;
  transition:transform var(--dur) var(--spring),box-shadow var(--dur) var(--out),border-color var(--dur) var(--out)}
.stat.clickable{cursor:pointer}
.stat.clickable:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--hair-2)}
.stat.clickable:active{transform:translateY(-1px)}
.stat .slab{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3);font-weight:600}
.stat .snum{font-size:var(--t-2xl);font-weight:600;letter-spacing:var(--track-tight);font-variant-numeric:tabular-nums;margin-top:auto;line-height:1}
.stat .ssub{font-size:var(--t-xs);color:var(--ink-3);margin-top:8px}
/* featured revenue hero — tall, larger figure, ledger breakdown */
.stat--hero{grid-column:1;grid-row:1 / span 2;padding:24px;justify-content:flex-start}
.stat--hero .slab{color:var(--ink-2)}
.stat--hero .snum{font-size:var(--t-3xl);margin-top:20px}
.stat--hero .hero-break{display:flex;gap:0;margin-top:auto;padding-top:18px;border-top:1px solid var(--hair)}
.hero-break .hb{flex:1;display:flex;flex-direction:column;gap:3px}
.hero-break .hb+.hb{border-left:1px solid var(--hair);padding-left:18px}
.hero-break .hb .hbk{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hero-break .hb .hbv{font-size:var(--t-md);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:var(--track-snug)}
.stat--designs{grid-column:2;grid-row:1}
.stat--jobs{grid-column:3;grid-row:1}
/* attention = a distinct slim alert strip, not another identical card */
.stat--alert{grid-column:2 / span 2;grid-row:2;flex-direction:row;align-items:center;gap:15px;min-height:0;
  background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 26%,var(--panel))}
.stat--alert .aic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  background:color-mix(in srgb,var(--accent) 18%,var(--panel));color:var(--accent-2);font-size:17px}
.stat--alert .atxt b{font-size:var(--t-base);font-weight:600;display:block}
.stat--alert .atxt span{font-size:var(--t-xs);color:var(--ink-2)}
.stat--alert .anum{margin-left:auto;font-size:var(--t-xl);font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent-2)}
.stat--alert .arr{color:var(--accent-2);font-size:16px;transition:transform var(--dur) var(--spring)}
.stat--alert:hover .arr{transform:translateX(3px)}
/* zero items → positive all-clear state (dashboard.js swaps the class/icon) */
.stat--alert.all-clear{background:color-mix(in srgb,var(--pos) 8%,var(--panel));border-color:color-mix(in srgb,var(--pos) 26%,var(--panel))}
.stat--alert.all-clear .aic{background:color-mix(in srgb,var(--pos) 16%,var(--panel));color:var(--pos)}
.stat--alert.all-clear .anum,.stat--alert.all-clear .arr{color:var(--pos)}

/* ── PRODUCT LAUNCHER (featured + compact) ───────────────── */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.app{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:18px;
  display:flex;flex-direction:column;gap:15px;box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--spring),box-shadow var(--dur) var(--out),border-color var(--dur) var(--out)}
.app:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--hair-2)}
.app .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;flex-shrink:0;
  background:var(--panel-2);color:var(--ink);border:1px solid var(--hair)}
.app-name b{font-size:var(--t-md);font-weight:600;letter-spacing:var(--track-snug);display:block}
.app-name span{font-size:var(--t-xs);color:var(--ink-3)}
.app-top{display:flex;align-items:center;gap:13px}
.app .open{margin-left:auto;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:4px;cursor:pointer;transition:color var(--dur)}
.app .open:hover{color:var(--ink)}
.app .open i{transition:transform var(--dur) var(--spring)}
.app .open:hover i{transform:translate(2px,-2px)}
.app-stat{display:flex;gap:26px}
.app-stat .s .n{font-size:var(--t-xl);font-weight:600;letter-spacing:var(--track-tight);font-variant-numeric:tabular-nums;line-height:1}
.app-stat .s .l{font-size:var(--t-micro);color:var(--ink-3);margin-top:5px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}
.app-cta{display:flex;align-items:center;gap:9px;margin-top:auto;flex-wrap:wrap}
/* featured: full width, horizontal, more presence */
.app--featured{grid-column:1 / -1;flex-direction:row;align-items:center;gap:28px;padding:22px 26px;
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel-2) 40%,var(--panel)))}
.app--featured .ic{width:46px;height:46px;font-size:23px;border-radius:13px}
.app--featured .af-id{display:flex;align-items:center;gap:15px;min-width:230px}
.app--featured .app-name b{font-size:var(--t-lg)}
.app--featured .app-stat{gap:34px;margin-left:8px}
.app--featured .app-cta{margin-left:auto;margin-top:0}
/* locked / upsell — quieter, dashed */
.app.locked{background:transparent;border-style:dashed;box-shadow:none}
.app.locked:hover{transform:none;box-shadow:none;border-color:var(--hair-2)}
.app.locked .ic{background:transparent;color:var(--ink-3)}
.app.locked .app-name b{color:var(--ink-2)}
.upsell-note{font-size:var(--t-sm);color:var(--ink-2);line-height:1.55}

/* ── AI CREDITS METER (feature_ai_credits) ───────────────
   Compact usage bar between the greeting and the setup checklist. --aic ramps
   the accent from cold (plenty) to hot (low) via the .low class. */
.ai-credits{--aic:var(--cold);display:flex;align-items:center;gap:16px;margin-top:28px;margin-bottom:22px;
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:13px 18px;box-shadow:var(--sh-1)}
.ai-credits.low{--aic:var(--hot)}
.ai-credits .aic-l{display:flex;align-items:center;gap:11px;flex:1 1 auto;min-width:0}
.ai-credits .aic-l>div{min-width:0}
.aic-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex-shrink:0;
  background:color-mix(in srgb,var(--aic) 15%,transparent);color:var(--aic);border:1px solid color-mix(in srgb,var(--aic) 30%,transparent)}
.ai-credits .aic-l b{font-size:var(--t-sm);font-weight:600;display:block;letter-spacing:var(--track-snug)}
.aic-sub{display:block;font-size:var(--t-micro);color:var(--ink-3);font-family:var(--mono);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aic-bar{flex:0 1 220px;max-width:220px;height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden;min-width:80px}
.aic-bar i{display:block;height:100%;border-radius:99px;background:var(--aic)}
.ai-credits .aic-r{flex:0 0 auto;text-align:right}
.ai-credits .aic-r b{font-size:var(--t-lg);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:var(--track-tight);color:var(--aic)}
.ai-credits .aic-r span{font-size:var(--t-micro);color:var(--ink-3);margin-left:4px}
.ai-credits .aic-buy{flex:0 0 auto;appearance:none;cursor:pointer;font:inherit;font-size:var(--t-micro);font-weight:600;
  letter-spacing:var(--track-snug);padding:var(--sp-2) var(--sp-3_5);border-radius:99px;display:inline-flex;align-items:center;gap:var(--sp-1_5);
  color:var(--aic);border:1px solid color-mix(in srgb,var(--aic) 35%,transparent);
  background:color-mix(in srgb,var(--aic) 12%,transparent);
  transition:background var(--dur) var(--out),transform var(--dur) var(--spring)}
.ai-credits .aic-buy:hover{background:color-mix(in srgb,var(--aic) 20%,transparent);transform:translateY(-1px)}
.ai-credits .aic-buy:active{transform:translateY(0)}

/* ── WORK PIPELINE (feature_hub_pipeline) ─────────────────
   Airflow metaphor: each .stage carries a --sc accent ramped cold→hot along the
   pipeline (set inline per stage in dashboard.js). One property drives the left
   accent bar, the icon chip and the hover ring, so the flow visibly warms from
   the design origin to the money end. */
.pipeline-wrap{margin-bottom:26px}
.pipeline{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.stage{--sc:var(--cold);position:relative;overflow:hidden;flex:1 1 0;min-width:158px;background:var(--panel);
  border:1px solid var(--hair);border-radius:var(--r-lg);padding:16px 18px 16px 21px;
  display:flex;align-items:center;gap:14px;cursor:pointer;box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--spring),box-shadow var(--dur) var(--out),border-color var(--dur) var(--out)}
.stage::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sc)}
.stage:hover{transform:translateY(-3px);
  box-shadow:0 10px 26px -12px color-mix(in srgb,var(--sc) 55%,transparent),var(--sh-1);
  border-color:color-mix(in srgb,var(--sc) 42%,var(--hair))}
.stage:focus-visible{outline:2px solid var(--sc);outline-offset:2px}
.stage-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex-shrink:0;
  background:color-mix(in srgb,var(--sc) 15%,transparent);color:var(--sc);
  border:1px solid color-mix(in srgb,var(--sc) 30%,transparent)}
.stage-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.stage-label{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3);font-weight:600}
.stage-count{font-size:var(--t-2xl);font-weight:600;letter-spacing:var(--track-tight);font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
.stage-act{margin-left:auto;align-self:flex-start;border:0;cursor:pointer;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}
.stage-act:hover{background:color-mix(in srgb,var(--amber) 24%,transparent)}
.stage-sep{display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:15px;flex:0 0 auto;opacity:.55}
/* slim apps strip once the pipeline is the centerpiece — every tile is compact
   (Canvas included; renderApps drops its featured variant in pipeline mode), and
   the strip is pure quick-access, so stat rows and CTA buttons are hidden. */
.apps--slim{grid-template-columns:repeat(5,minmax(0,1fr))}
.apps--slim .app{padding:14px 15px;gap:11px}
.apps--slim .app--featured{grid-column:auto}
.apps--slim .app-stat,.apps--slim .app-cta{display:none}

/* buttons */
.btn{height:35px;padding:0 15px;border-radius:9px;border:1px solid transparent;font-weight:600;font-size:var(--t-sm);
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;letter-spacing:var(--track-snug);
  transition:transform var(--dur) var(--spring),background var(--dur) var(--out),border-color var(--dur),box-shadow var(--dur)}
.btn:active{transform:scale(.96)}
.btn i{font-size:15px}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:var(--sh-1)}
.btn-primary:hover{box-shadow:var(--sh-2)}
.btn-ghost{background:var(--panel);color:var(--ink-2);border-color:var(--hair-2)}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink-3)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:var(--sh-1)}
.btn-accent:hover{background:var(--accent-2);box-shadow:var(--sh-2)}

/* ── ACTIVITY (ledger) + AGENDA ──────────────────────────── */
.cols{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:52px}
.panel{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--sh-1)}
.panel .ph{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.panel h3{font-size:var(--t-base);font-weight:600;letter-spacing:var(--track-snug)}
.panel .ph small{font-size:var(--t-xs);color:var(--ink-3)}
.panel .ph small a{cursor:pointer;transition:color var(--dur)}
.panel .ph small a:hover{color:var(--ink)}
.feed{display:flex;flex-direction:column}
.ev{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--hair)}
.ev:first-child{border-top:none}
.ev .eic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:14px;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--hair)}
.ev .body p{font-size:var(--t-sm);line-height:1.45}
.ev .body p b{font-weight:600}
.ev .meta{display:flex;align-items:center;gap:7px;margin-top:2px;font-size:var(--t-micro);color:var(--ink-3);
  font-family:var(--mono);letter-spacing:.03em}
.ev .amt{font-family:var(--mono);font-weight:600;font-size:var(--t-sm);font-variant-numeric:tabular-nums;text-align:right;color:var(--pos)}
/* agenda */
.ag{display:grid;grid-template-columns:46px 2px 1fr;align-items:start;gap:14px;padding:13px 0;border-top:1px solid var(--hair)}
.ag:first-child{border-top:none}
.ag .time{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:1px}
.ag .bar{width:2px;height:100%;border-radius:2px;background:var(--hair-2)}
.ag.now .bar{background:var(--accent)}
.ag .info b{font-size:var(--t-sm);font-weight:600;display:block}
.ag .info span{font-size:var(--t-xs);color:var(--ink-3);margin-top:2px;display:block}

/* ── SKELETON LOADERS (mirror real layout) ───────────────── */
.skel{position:relative;overflow:hidden;background:var(--panel-2);border-radius:6px;display:inline-block}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 7%,transparent),transparent);
  animation:shimmer 1.4s var(--out) infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-num{height:26px;width:82px} .sk-num-lg{height:34px;width:140px}
.sk-line{height:10px;width:100%} .sk-line.sm{width:60%} .sk-line.xs{width:38%}
.sk-chip{height:19px;width:64px;border-radius:6px}
.sk-circ{width:26px;height:26px;border-radius:7px}
.ev.sk,.ag.sk{pointer-events:none}

/* ── REVEAL: soften the skeleton→content swap (no abrupt pop) ─────────────── */
@keyframes ndReveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.nd-reveal{animation:ndReveal .34s var(--out) both}
@media (prefers-reduced-motion:reduce){.nd-reveal{animation:none}}

/* ── EMPTY STATES (designed, not afterthoughts) ──────────── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:30px 18px 24px;color:var(--ink-3)}
.empty .ei{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:18px;
  background:var(--panel-2);color:var(--ink-3);border:1px solid var(--hair)}
.empty b{font-size:var(--t-sm);color:var(--ink-2);font-weight:600}
.empty span{font-size:var(--t-xs);max-width:230px;line-height:1.55}

/* toast */
.toasts{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink);color:var(--paper);border-radius:11px;padding:11px 16px;font-size:var(--t-sm);font-weight:500;
  box-shadow:var(--sh-pop);display:flex;align-items:center;gap:9px;animation:menu .18s var(--spring)}
.toast i{font-size:16px;color:var(--accent)}

/* clickable ticket rows + thread modal */
.list-row.is-clickable{cursor:pointer;transition:background .12s,border-color .12s}
.list-row.is-clickable:hover{background:var(--panel-2)}
.list-row.is-clickable:focus-visible{outline:none;box-shadow:var(--ring)}
.modal-overlay{position:fixed;inset:0;z-index:90;background:rgba(8,10,14,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-overlay[hidden]{display:none}
.modal-card{background:var(--panel);border:1px solid var(--hair-2);border-radius:16px;box-shadow:var(--sh-pop);width:100%;max-width:560px;display:flex;flex-direction:column;max-height:86vh;overflow:hidden;animation:menu .18s var(--spring)}
.modal-head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--hair)}
.modal-head .mh-main{flex:1;min-width:0}
.modal-head h3{margin:0;font-size:var(--t-md);font-weight:650;color:var(--ink)}
.modal-head .mh-sub{display:block;margin-top:3px;font-size:var(--t-xs);color:var(--ink-3)}
.icon-btn{width:32px;height:32px;flex:0 0 auto;border-radius:9px;border:1px solid var(--hair-2);background:var(--panel);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;font-size:16px}
.icon-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.ticket-thread{padding:16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.tmsg{max-width:82%;padding:10px 13px;border-radius:12px;font-size:var(--t-sm);line-height:1.5}
.tmsg-who{font-size:var(--t-xs);color:var(--ink-3);margin-bottom:3px;font-weight:600}
.tmsg-body{white-space:pre-wrap;color:var(--ink)}
.tmsg-you{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.tmsg-you .tmsg-who{color:rgba(255,255,255,.8)}
.tmsg-you .tmsg-body{color:#fff}
.tmsg-staff{align-self:flex-start;background:var(--panel-2);border-bottom-left-radius:4px}
.tmsg-note{align-self:center;font-size:var(--t-xs);color:var(--ink-3);padding:4px 0}
.ticket-reply{border-top:1px solid var(--hair);padding:12px 18px;display:flex;flex-direction:column;gap:10px}
.ticket-reply textarea{width:100%;resize:vertical;border:1px solid var(--hair-2);border-radius:10px;padding:10px 12px;background:var(--panel);color:var(--ink);font:inherit;font-size:var(--t-sm)}
.ticket-reply-actions{display:flex;justify-content:space-between;gap:8px}

.foot{max-width:1160px;margin:0 auto;padding:0 26px 48px}
.foot .box{border-top:1px solid var(--hair);padding:18px 2px 0;font-size:var(--t-xs);color:var(--ink-3);line-height:1.65;max-width:78ch}
.foot .box b{color:var(--ink-2);font-weight:600}

/* ── GLOBAL SEARCH (command palette) ─────────────────────── */
.search-overlay{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;align-items:flex-start;
  padding:96px 20px 20px;background:color-mix(in srgb,var(--ink) 34%,transparent);backdrop-filter:blur(4px);
  animation:menu .14s var(--out)}
.search-box{width:100%;max-width:580px;background:var(--panel);border:1px solid var(--hair-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-pop);overflow:hidden;display:flex;flex-direction:column;max-height:72vh}
.search-head{display:flex;align-items:center;gap:13px;padding:16px 18px;border-bottom:1px solid var(--hair)}
.search-head i{font-size:20px;color:var(--ink-3)}
.search-in{flex:1;border:none;background:none;outline:none;color:var(--ink);font-family:inherit;font-size:var(--t-lg);font-weight:500;letter-spacing:var(--track-snug)}
.search-in::placeholder{color:var(--ink-3);font-weight:400}
.search-kbd{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-3);border:1px solid var(--hair-2);
  border-radius:6px;padding:2px 7px;background:var(--panel-2)}
.search-results{overflow-y:auto;padding:8px;min-height:96px}
.search-group{font-family:var(--mono);font-size:9.5px;letter-spacing:var(--track-cap);text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:12px 10px 6px}
.sr{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;cursor:pointer;
  transition:background var(--dur) var(--out)}
.sr:hover,.sr.sel{background:var(--panel-2)}
.sr .sic{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;font-size:15px;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--hair)}
.sr.sel .sic,.sr:hover .sic{color:var(--accent-2)}
.sr .stxt{min-width:0;flex:1}
.sr .stxt b{font-size:var(--t-sm);font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr .stxt span{font-size:var(--t-xs);color:var(--ink-3)}
.sr .sarr{color:var(--ink-3);font-size:15px;opacity:0;transition:opacity var(--dur)}
.sr:hover .sarr,.sr.sel .sarr{opacity:1}
.search-empty{padding:40px 18px;text-align:center;color:var(--ink-3);font-size:var(--t-sm);line-height:1.55}
.search-foot{display:flex;align-items:center;gap:18px;padding:10px 16px;border-top:1px solid var(--hair);
  font-size:var(--t-xs);color:var(--ink-3)}
.search-foot > span{display:flex;align-items:center;gap:5px}
.skbd{font-family:var(--mono);font-size:10px;color:var(--ink-2);border:1px solid var(--hair-2);border-radius:5px;
  min-width:17px;height:17px;padding:0 4px;display:inline-grid;place-items:center;background:var(--panel-2)}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:920px){
  .stats{grid-template-columns:1fr 1fr}
  .stat--hero{grid-column:1 / -1;grid-row:auto}
  .stat--designs{grid-column:1;grid-row:auto}.stat--jobs{grid-column:2;grid-row:auto}
  .stat--alert{grid-column:1 / -1;grid-row:auto}
  .apps{grid-template-columns:1fr 1fr}
  .apps--slim{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app--featured{flex-direction:column;align-items:flex-start;gap:16px}
  .app--featured .app-cta{margin-left:0}
  .cols{grid-template-columns:1fr}
  .hello{flex-direction:column;align-items:flex-start;gap:16px}
}
/* App tiles carry an icon + name + stat + CTA row, so two-up gets cramped well
   before the 560px phone breakpoint — drop them to a single column earlier. */
@media (max-width:680px){
  .apps{grid-template-columns:1fr}
  .apps--slim{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .stats,.apps,.apps--slim{grid-template-columns:1fr}
  /* Reset the ≤920 two-up placements — otherwise grid-column:2 on Jobs forces a
     phantom second track and the stat cards stay cramped 2-up on phones. */
  .stat--hero,.stat--designs,.stat--jobs,.stat--alert{grid-column:1 / -1}
  .app--featured .af-id{min-width:0}
  .org b,.brand span:not(.dot){display:none}
  /* The full topbar (logo + Apps label + 4 icons + org) overflows 390px and the
     browser squishes the fixed-size buttons into ovals — tighten the gap and drop
     the Apps button to icon-only so every control keeps its square footprint. */
  .topbar{gap:8px}
  .waffle-btn{padding:0 9px}
  .waffle-btn .wl,.waffle-btn .ti-chevron-down{display:none}
  /* Reclaim edge space on phones: 26px gutters leave narrow cards. */
  .wrap{padding:34px 16px 72px}
  .topbar,.foot{padding-left:16px;padding-right:16px}
  .app{padding:16px}
  .stat{padding:16px}
  .hello h1{font-size:var(--t-2xl)}
  /* The credit meter's 3-across row (label · bar · count) can't hold on phones —
     wrap the bar onto its own full-width line below the label + remaining count. */
  .ai-credits{flex-wrap:wrap;gap:var(--sp-2_5) var(--sp-3_5)}
  .ai-credits .aic-l{order:1;flex:1 1 0}
  .ai-credits .aic-r{order:2}
  .ai-credits .aic-buy{order:4;flex:1 1 100%;justify-content:center}
  .aic-bar{order:3;flex:1 1 100%;min-width:0;max-width:none}
  .stat--hero .hero-break{flex-wrap:wrap;gap:14px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ── Direct-messaging drawer: token bridge ─────────────────────────────────
   The shared messenger (js/messaging/dm.js + dm-ui.js) styles itself from a
   generic token set (--bg-card / --text / --border / --accent …) that the app
   design systems provide. The hub uses its own names (--panel / --ink / --hair
   …), so without this bridge the drawer + launcher fall back to their hardcoded
   dark defaults and render dark-on-light on the hub. Map the messenger tokens
   onto the hub palette; because the hub tokens flip with the light/dark theme,
   the drawer follows the hub theme automatically. */
.dm-drawer,.dm-launch{
  --bg-card:var(--panel); --bg-input:var(--panel-2); --bg-hover:var(--panel-2);
  --surface-hover:var(--panel-2); --border:var(--hair-2);
  --text:var(--ink); --text-primary:var(--ink);
  --text-secondary:var(--ink-2); --text-muted:var(--ink-3);
  --accent-light:var(--accent-wash);
}

/* ── First-run setup checklist (hub home; dashboard.js renderSetup) ──────── */
.setup{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-1);margin:24px 0 0}
.setup[hidden]{display:none}
.setup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.setup-head b{display:block;font-size:var(--t-md);font-weight:600}
.setup-head span{display:block;font-size:var(--t-sm);color:var(--ink-3);margin-top:2px}
.setup-x{flex-shrink:0;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--ink-3);cursor:pointer;font-size:16px;display:grid;place-items:center}
.setup-x:hover{background:var(--panel-2);color:var(--ink)}
.setup-bar{height:6px;border-radius:99px;background:var(--sunken);overflow:hidden;margin-bottom:16px}
.setup-bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .5s var(--out)}
.setup-steps{display:flex;flex-direction:column;gap:8px}
.setup-step{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;border:1px solid var(--hair-2);background:var(--panel);text-decoration:none;color:inherit;transition:border-color var(--dur) var(--out),transform var(--dur) var(--out)}
a.setup-step:hover{border-color:var(--accent);transform:translateY(-1px)}
.setup-step.done{opacity:.62}
.setup-step .sb{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:13px;flex-shrink:0;background:var(--accent-wash);color:var(--accent-2);border:1px dashed var(--accent-ring)}
.setup-step.done .sb{background:color-mix(in srgb,var(--pos) 16%,var(--panel));color:var(--pos);border:1px solid transparent}
.setup-step .sl{flex:1;font-size:var(--t-sm);font-weight:500}
.setup-step .sgo{color:var(--ink-3);font-size:15px}