:root{--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--nav-w:48px;--nav-exp:216px;--r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-full:999px;--ease:cubic-bezier(.16,1,.3,1);--dur:160ms;--sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--kb-height:0px;}
[data-theme="light"]{--bg:#ffffff;--surface:#ffffff;--s2:#f8f8f7;--s3:#f0efed;--s4:#D4CFC4;--border:#d1cdc5;--text:#2C2C2A;--t2:#4A4A47;--t3:#6B6B67;--t4:#9A9A96;--nav-bg:#f8f8f7;--nav-border:#d1cdc5;--sh-sm:0 1px 2px rgba(44,44,42,.06);--sh-md:0 4px 16px rgba(44,44,42,.09);}
[data-theme="dark"]{--bg:#1a1a1a;--surface:#222222;--s2:#2a2a2a;--s3:#333333;--s4:#444444;--border:#3d3d3d;--text:#e8e6e3;--t2:#c4c2bf;--t3:#9a9896;--t4:#6b6966;--nav-bg:#1e1e1e;--nav-border:#3d3d3d;--sh-sm:0 1px 2px rgba(0,0,0,.2);--sh-md:0 4px 16px rgba(0,0,0,.3);--bg1:#222222;--bg2:#2a2a2a;--bg3:#333333;--br:#3d3d3d;--t1:#e8e6e3;--color-blue-bg:rgba(37,99,235,.15);--color-green-bg:rgba(22,163,74,.15);--color-red-bg:rgba(220,38,38,.15);--color-amber-light:rgba(217,119,6,.2);--btn-txt:#ffffff;--red-bdr:#7f1d1d;--amber-txt:#fcd34d;--amber-bdr:#78350f;--green-bdr:#064e3b;--deduced:#a78bfa;--deduced-bg:#2e1065;}
/* v3 reskin themes (2026-06-13) — accent stays brand blue --accent #1B4F72 across all; surfaces/text vary. Default = nova. */
[data-theme="nova"]{--bg:#f4f7fc;--surface:#ffffff;--s2:#edf2fa;--s3:#e1eaf6;--s4:#d0ddf0;--border:#dde6f2;--text:#0f1b2d;--t2:#44566f;--t3:#6a7d97;--t4:#94a3b8;--nav-bg:#eef3fa;--nav-border:#dde6f2;--sh-sm:0 1px 2px rgba(27,79,114,.06);--sh-md:0 6px 24px rgba(27,79,114,.10);--bg1:#ffffff;--bg2:#edf2fa;--bg3:#e1eaf6;--br:#dde6f2;--t1:#0f1b2d;--color-blue-bg:rgba(27,79,114,.10);--color-green-bg:rgba(22,163,74,.10);--color-red-bg:rgba(192,57,43,.10);--color-amber-light:rgba(183,98,14,.12);}
[data-theme="alto"]{--bg:#f7f7f5;--surface:#ffffff;--s2:#f1f0ee;--s3:#e8e6e2;--s4:#dedad5;--border:#e2dfd9;--text:#111111;--t2:#6b6560;--t3:#8a847d;--t4:#aaa49d;--nav-bg:#f1f0ee;--nav-border:#e2dfd9;--sh-sm:0 1px 2px rgba(0,0,0,.04);--sh-md:0 4px 16px rgba(0,0,0,.06);--bg1:#ffffff;--bg2:#f1f0ee;--bg3:#e8e6e2;--br:#e2dfd9;--t1:#111111;--color-blue-bg:rgba(37,99,235,.08);--color-green-bg:rgba(22,163,74,.08);--color-red-bg:rgba(220,38,38,.08);--color-amber-light:rgba(217,119,6,.1);}
[data-theme="pulse"]{--bg:#f5f0e8;--surface:#fffef9;--s2:#ede8df;--s3:#e2dbd0;--s4:#d6cec1;--border:#d4ccbf;--text:#1c1407;--t2:#6b5c46;--t3:#8a795f;--t4:#a08e78;--nav-bg:#ede8df;--nav-border:#d4ccbf;--sh-sm:0 1px 3px rgba(100,70,30,.07);--sh-md:0 4px 16px rgba(100,70,30,.1);--bg1:#fffef9;--bg2:#ede8df;--bg3:#e2dbd0;--br:#d4ccbf;--t1:#1c1407;--color-blue-bg:rgba(37,99,235,.08);--color-green-bg:rgba(22,163,74,.08);--color-red-bg:rgba(220,38,38,.08);--color-amber-light:rgba(217,119,6,.12);}
[data-theme="eclipse"]{--bg:#07090f;--surface:#0d1220;--s2:#131c2e;--s3:#1a2540;--s4:#213052;--border:rgba(255,255,255,.09);--text:#dce6f5;--t2:#9aaccb;--t3:#7e93b3;--t4:#5a6f90;--nav-bg:#0d1220;--nav-border:rgba(255,255,255,.09);--sh-sm:0 1px 2px rgba(0,0,0,.4);--sh-md:0 4px 20px rgba(0,0,0,.5);--bg1:#0d1220;--bg2:#131c2e;--bg3:#1a2540;--br:rgba(255,255,255,.09);--t1:#dce6f5;--color-blue-bg:rgba(79,156,249,.15);--color-green-bg:rgba(34,197,94,.15);--color-red-bg:rgba(239,68,68,.15);--color-amber-light:rgba(245,158,11,.2);}
/* a11y Sprint 6: --t4 darkened #94a3b8→#596577 for WCAG AA contrast on light bg */
/* Bridge: old CT/page tokens → new theme tokens (so scheme/dark switching propagates) */
:root{
  --surface-1:var(--card,#fff);--surface-2:var(--surface,#F7F5F0);--surface-3:var(--bdr2,#f0f0ee);
  --border-1:var(--bdr,#e8e8e5);--bg:var(--surface,#F7F5F0);--bg-1:var(--card,#fff);
  --ink-1:var(--t1,#1a1a18);--ink-2:var(--t2,#3a3a37);--ink-4:var(--t3,#6b6b67);
  --red-tint:var(--red-bg,rgba(192,57,43,.07));--amber-tint:var(--amber-bg,rgba(212,121,15,.07));
  --green-tint:var(--green-bg,rgba(26,122,74,.07));
  --shadow-md:0 2px 8px rgba(0,0,0,.07);--shadow-sm:0 1px 3px rgba(0,0,0,.05);
}
:root{--accent:#1B4F72;--red:#C0392B;--amber:#B7620E;--green:#22c55e;--purple:#7D3C98;--fs-xs:11px;--fs-sm:12px;--fs-base:14px;--fs-md:15px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;--fw-normal:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:900;--btn-txt:#ffffff;--red-bdr:#f5c6c6;--amber-txt:#92400e;--amber-bdr:#fde68a;--green-bdr:#a7f3d0;--deduced:#7c3aed;--deduced-bg:#ede9fe;}
[data-density="comfortable"]{--pc:24px;--fs:14px;--lh:1.55;}
[data-density="compact"]{--pc:18px;--fs:13px;--lh:1.45;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
/* Ionic → Senshin brand theme mapping. Ionic auto-picks iOS or MD mode by platform;
   these tokens apply to both modes so the look stays on-brand everywhere. */
:root{
  --ion-color-primary:#1B4F72;--ion-color-primary-rgb:27,79,114;
  --ion-color-primary-contrast:#ffffff;--ion-color-primary-contrast-rgb:255,255,255;
  --ion-color-primary-shade:#154360;--ion-color-primary-tint:#2E86C1;
  --ion-background-color:#ffffff;--ion-background-color-rgb:255,255,255;
  --ion-text-color:#2C2C2A;--ion-text-color-rgb:44,44,42;
  --ion-font-family:var(--font-family);
  --ion-item-background:#ffffff;
  --ion-item-border-color:#E8E4DC;
  --ion-color-step-50:#f8f8f7;--ion-color-step-100:#f0efed;
}
/* Prevent Ionic global styles from swallowing the Senshin body — scope via tag not class */
ion-list,ion-item,ion-label,ion-segment,ion-chip,ion-button,ion-card{--ion-font-family:var(--font-family);}
html{font-size:var(--fs);-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:var(--lh);-webkit-font-smoothing:antialiased;overflow:hidden;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);-webkit-text-size-adjust:100%;text-size-adjust:100%;}
button{font-family:var(--font);cursor:pointer;}
a{text-decoration:none;color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs);}
@media(prefers-reduced-motion:reduce){*{transition-duration:0ms!important;}}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:var(--s4);border-radius:var(--r-full);}
::-webkit-scrollbar-track{background:transparent;}

/* APP — flex row */
.app{display:flex;height:100vh;overflow:hidden;padding-top:var(--sat);padding-right:var(--sar);padding-bottom:var(--sab);padding-left:var(--sal);}
/* Capacitor native: keyboard pushes content up */
body.keyboard-open .app{padding-bottom:var(--kb-height);}
body.keyboard-open .mobile-bar{display:none!important;}

/* ── Cinematic shell — dark nav matching homepage energy ─── */
:root{--zen-ink:rgba(26,26,46,1);--zen-ink-faint:rgba(26,26,46,0.06);--zen-ink-medium:rgba(26,26,46,0.14);--zen-wash-top:rgba(26,26,46,0.035);--zen-divider-col:rgba(26,26,46,0.13);--zen-accent-warm:rgba(180,140,90,0.55);--zen-texture-op:0.028;}

/* NAV — themed sidebar (tokens set by theme.js on #app-nav) */
/* Side nav: outer is non-scrolling so .nav__bottom stays pinned at the
   bottom of the viewport. Only the link list (#navLinks) scrolls when it
   overflows. Bottom block (avatar, plan, sign-out) must NEVER scroll
   off-screen — see senshin-design-system.css discipline. */
.nav{flex-shrink:0;width:var(--nav-exp);height:100vh;background:var(--nav-bg,#fff);border-right:1px solid var(--nav-border,#e8e8e5);display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;padding:0 0 16px;position:relative;z-index:200;scrollbar-width:none;transition:width .2s ease;}
.nav[data-collapsed]{width:var(--nav-w);}
.nav[data-collapsed] .nav__lbl,.nav[data-collapsed] .nav__group,.nav[data-collapsed] .nav__brush-div,.nav[data-collapsed] .nav__logo-wrap,.nav[data-collapsed] .nav__user-info{display:none;}
.nav[data-collapsed] .nav__link{justify-content:center;padding:0;}
.nav[data-collapsed] .nav__logo{justify-content:center;padding:14px 0 18px;}
#navLinks{flex:1 1 auto;min-height:0;overflow-y:auto;width:100%;scrollbar-width:none;}
#navLinks::-webkit-scrollbar{width:0;height:0;}
/* Sub-level nav items indent under their group header (per design discipline:
   information hierarchy is communicated visually as well as semantically). */
#navLinks .nav__link{padding-left:22px;}
[data-device="tablet"] #navLinks .nav__link{padding-left:10px;}
.nav::-webkit-scrollbar{display:none;}
.nav.open{width:var(--nav-exp);}
/* No texture overlays in light mode — pseudo-elements suppressed */
.nav::before,.nav::after{display:none;}
.nav>*{position:relative;z-index:1;}
/* Nav is always expanded on web/tablet — collapsed rules removed */
.nav__logo{width:100%;height:auto;background:var(--nav-bg,#fff);display:flex;align-items:center;gap:10px;padding:14px 14px 18px;flex-shrink:0;transition:opacity .15s;text-decoration:none;cursor:pointer;position:sticky;top:0;z-index:5;box-shadow:0 1px 0 var(--nav-divider,#f0f0ee);}.nav__logo:hover{opacity:.85;}
/* Brush-stroke divider — separates nav sections */
.nav__brush-div{display:block;width:100%;height:10px;margin:4px 0;overflow:visible;}
.nav__enso{width:52px;height:52px;flex-shrink:0;}
.nav__logo svg,.nav__logo-img{width:52px;height:52px;flex-shrink:0;}
.nav__logo-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;}
.nav__logo-text{font-size:24px;font-weight:700;color:var(--shell-text-bright,#E8E4DC);letter-spacing:-.02em;line-height:1;}
.nav__logo-sub{font-size:8.5px;font-weight:var(--fw-semibold);color:var(--shell-text-muted,#8A8680);letter-spacing:.18em;text-transform:uppercase;margin-top:4px;line-height:1;}
.nav__group{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--nav-txt-dim,#767672);padding:14px 16px 4px;white-space:nowrap;width:100%;opacity:1;transition:opacity var(--dur) var(--ease);}
/* Link — uses theme nav tokens */
.nav__link{width:calc(100% - 12px);height:36px;display:flex;align-items:center;margin:1px 6px;padding:0 10px;gap:10px;color:var(--nav-txt,#3a3a37);font-size:13px;font-weight:500;transition:background .15s ease,color .15s ease;white-space:nowrap;position:relative;justify-content:flex-start;border-radius:6px;}
.nav__link:hover{background:var(--nav-item-hover,rgba(27,79,114,0.05));color:var(--nav-txt-strong,#1a1a18);border-radius:6px;}
.nav__link.active{background:var(--nav-item-active,rgba(27,79,114,0.1));color:var(--accent,#1B4F72);font-weight:600;border-radius:6px;border-left:none;}
.nav__link.active::before{display:none;}
/* Icons */
.nav__link svg{width:18px;height:18px;flex-shrink:0;color:var(--nav-txt,#3a3a37);}
.nav__link.active svg{color:var(--accent,#1B4F72);}
.nav__link:hover svg{color:var(--nav-txt-strong,#1a1a18);}
.nav__lbl{font-size:14px;font-weight:inherit;opacity:1;overflow:hidden;white-space:nowrap;transition:opacity var(--dur) var(--ease);}
.nav__sep{width:calc(100% - 28px);height:1px;background:var(--nav-divider,#f0f0ee);margin:5px auto;flex-shrink:0;}
/* Collapse toggle — sits at bottom of nav */
.nav__toggle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;border:1px solid var(--nav-border,#e8e8e5);background:var(--nav-bg,#fff);cursor:pointer;color:var(--nav-txt,#3a3a37);flex-shrink:0;transition:background .12s,color .12s;}
.nav__toggle:hover{background:var(--nav-item-hover,rgba(27,79,114,0.05));color:var(--accent,#1B4F72);}
.nav__toggle svg{width:14px;height:14px;transition:transform .2s ease;}
.nav[data-collapsed] .nav__toggle svg{transform:rotate(180deg);}
/* AI Depth — nav-item-level section, same visual tier as Simulations/Settings */
.nav__ai{width:100%;display:flex;flex-direction:column;margin-bottom:6px;}
/* AI Depth parent — icon + label, same level as nav links */
.nav__ai-parent{width:calc(100% - 12px);height:36px;display:flex;align-items:center;margin:1px 6px;padding:0 10px;gap:10px;color:var(--shell-text-muted,#8A8680);font-size:var(--fs-base);font-weight:var(--fw-semibold);white-space:nowrap;border-radius:var(--r-sm);}
.nav__ai-parent svg{width:16px;height:16px;stroke-width:1.65;flex-shrink:0;}
/* Group label — hidden now, replaced by parent icon row */
.nav__ai-hdr{display:none;}
/* Each option — identical geometry to .nav__link */
.nav__ai-opt{width:calc(100% - 12px);height:32px;display:flex;align-items:center;margin:1px 6px;padding:0 10px 0 36px;gap:8px;color:var(--shell-text-muted,#8A8680);font-size:var(--fs-body);font-weight:var(--fw-semibold);transition:background var(--dur),color var(--dur);white-space:nowrap;position:relative;cursor:pointer;user-select:none;border-radius:var(--r-sm);}
.nav__ai-opt:hover{background:var(--shell-hover,rgba(255,255,255,0.05));color:var(--shell-text-bright,#E8E4DC);}
.nav__ai-opt.active{color:var(--shell-text-bright,#E8E4DC);font-weight:600;}
.nav__ai-opt.active::before{display:none;}
/* Icon pip — 16px coloured dot, matches nav svg icon footprint */
.nav__ai-pip{width:8px;height:8px;border-radius:50%;background:var(--ai-opt-col);flex-shrink:0;opacity:.4;transition:opacity var(--dur);}
.nav__ai-opt.active .nav__ai-pip{opacity:1;}
/* Label */
.nav__ai-name{font-size:14px;font-weight:inherit;overflow:hidden;white-space:nowrap;}
.nav__ai-opt.active .nav__ai-name{color:var(--ai-opt-col);}
/* Hide verbose description — nav items are terse */
.nav__ai-desc{display:none;}
.nav__ai-txt{overflow:hidden;}
/* Tablet (icon-only nav) — show only active, centred */
[data-device="tablet"] .nav .nav__ai-hdr{display:none;}
[data-device="tablet"] .nav .nav__ai-opt:not(.active){display:none;}
[data-device="tablet"] .nav .nav__ai-opt.active{justify-content:center;padding:0 10px;}
[data-device="tablet"] .nav .nav__ai-name{display:none;}
[data-device="tablet"] .nav .nav__ai-pip{width:20px;height:20px;opacity:1;}
.nav__bottom{margin-top:auto;width:100%;display:flex;flex-direction:column;padding-bottom:14px;}
.nav__user{display:flex;align-items:center;gap:9px;padding:8px 12px;cursor:pointer;transition:background var(--dur);border-radius:6px;}
.nav__user:hover{background:var(--nav-item-hover,rgba(27,79,114,0.05));}
.nav__avatar{width:28px;height:28px;border-radius:var(--r-full);background:var(--accent,#1B4F72);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}
.nav__user-info{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;}
.nav__user-name{font-size:13px;font-weight:500;color:var(--nav-txt-strong,#1a1a18);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav__user-credits{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:600;color:var(--accent,#1B4F72);white-space:nowrap;margin-left:auto;}
.nav__user-credits svg{width:12px;height:12px;}

/* DROPDOWN — user profile menu */
.dropdown{position:fixed;bottom:56px;left:60px;background:var(--card,#fff);border:1px solid var(--bdr,#e8e8e5);border-radius:var(--r-lg);box-shadow:0 8px 32px rgba(0,0,0,.12);width:260px;z-index:500;display:none;animation:dropIn 140ms var(--ease) both;padding:0;overflow:hidden;}
.dropdown.open{display:block;}
@keyframes dropIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.dd-head{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;}
.dd-avatar{width:32px;height:32px;border-radius:var(--r-full);background:var(--surface,#F7F5F0);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dd-avatar svg{width:18px;height:18px;color:var(--t3,#6b6b67);}
.dd-head-info{overflow:hidden;}
.dd-name{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--t1,#1a1a18);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dd-plan{font-size:12px;color:var(--t3,#6b6b67);}
.dd-upgrade-row{display:flex;align-items:center;justify-content:space-between;padding:0 16px 14px;gap:8px;}
.dd-upgrade-label{font-size:13px;color:var(--t2,#3a3a37);}
.dd-upgrade-btn{height:36px;padding:0 14px;border-radius:6px;border:none;background:var(--accent,#1B4F72);color:#fff;font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:opacity var(--dur);display:inline-flex;align-items:center;}
.dd-upgrade-btn:hover{opacity:.88;}
.dd-sep{height:1px;background:var(--bdr,#e8e8e5);margin:0;}
.dd-section{padding:6px 6px;}
.dd-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:var(--r-sm);color:var(--t1,#1a1a18);font-size:14px;font-weight:400;cursor:pointer;transition:background var(--dur);}
.dd-item:hover{background:var(--surface,#F7F5F0);}
.dd-item svg{width:14px;height:14px;stroke-width:1.7;color:var(--t3,#6b6b67);}
.dd-item--chevron::after{content:'›';font-size:var(--fs-lg);color:var(--t3,#6b6b67);font-weight:var(--fw-regular);transition:transform .15s;}
.dd-item--chevron.open::after{transform:rotate(90deg);}
.dd-sub{display:none;padding:0 0 0 12px;}
.dd-sub.open{display:block;}
.dd-sub .dd-item{font-size:13px;color:var(--t3,#6b6b67);padding:6px 10px;}
.dd-item--danger{color:var(--t3,#6b6b67);}
.dd-item--danger:hover{color:var(--red,#C0392B);}
/* Legacy seg/toggle kept for any reuse */
.seg{display:inline-flex;gap:3px;padding:3px;border-radius:var(--r-md,8px);background:var(--shell-hover,rgba(255,255,255,0.05));}
.seg__btn{height:24px;padding:0 11px;font-size:11.5px;font-weight:600;color:var(--shell-text-muted,#8A8680);background:transparent;border:none;border-radius:var(--r-sm,6px);font-family:var(--font);cursor:pointer;transition:background var(--dur),color var(--dur);white-space:nowrap;}
.seg__btn:hover{color:var(--shell-text-bright,#E8E4DC);}
.seg__btn.on{background:var(--brand-primary,#1B4F72);color:#fff;font-weight:700;}
.seg__btn.on:hover{color:#fff;}
/* Skin swatches — selectable named v3 themes (Nova/Alto/Pulse/Eclipse) + Auto.
   The swatch fills are literal theme-preview colours (like a paint chip), so
   they are intentionally fixed, not theme tokens. */
.seg--skins{gap:2px;background:var(--s2);border:1px solid var(--nav-border,rgba(255,255,255,.12));border-radius:var(--r-full,999px);padding:2px;flex-wrap:wrap;}
.skin{position:relative;height:24px;padding:0 9px;border:none;border-radius:var(--r-full,999px);background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--t3);white-space:nowrap;transition:background var(--dur,160ms) var(--ease,ease),color var(--dur,160ms) var(--ease,ease);}
.skin:hover{color:var(--t1);background:var(--s3);}
.skin__sw{width:10px;height:10px;border-radius:50%;border:1px solid var(--nav-border,rgba(255,255,255,.18));box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);flex-shrink:0;}
.skin.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.18);}
.toggle{width:44px;height:24px;border-radius:var(--r-full);background:var(--s4);border:none;cursor:pointer;position:relative;transition:background .2s var(--ease);flex-shrink:0;-webkit-appearance:none;appearance:none;}
.toggle.on{background:var(--text);}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:var(--r-full);background:var(--bg1);transition:transform .2s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.12);}
.toggle.on::after{transform:translateX(20px);}

/* MAIN — takes remaining width, never wider than viewport minus nav */
.main{flex:1;min-width:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;}

/* WIZARD ROUTES — hide shell nav + Sensei, expand main to full width */
[data-wizard-route="true"] #appNav,
[data-wizard-route="true"] #senseiSidebar { display:none !important; }
[data-wizard-route="true"] .main { width:100% !important; }

/* HEADER — themed top strip */
.header{position:relative;flex-shrink:0;height:46px;border-bottom:1px solid var(--bdr,#e8e8e5);display:flex;align-items:center;padding:0 var(--pc);gap:8px;background:var(--card,#fff);z-index:100;}
.header::after{display:none;}
.header__crumb{font-size:12px;color:var(--t3,#6b6b67);}
.header__sep{color:var(--t4,#767672);font-size:12px;}
.header__title{font-size:14px;font-weight:700;color:var(--t1,#1a1a18);}
.header__right{margin-left:auto;display:flex;align-items:center;gap:6px;}
/* Page-purpose subtitle */
@keyframes pageSubtitleIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.page-subtitle{flex-shrink:0;padding:6px var(--pc) 10px;font-size:13px;font-weight:600;color:var(--t3,#6b6b67);letter-spacing:0.01em;line-height:1.35;text-align:center;border-bottom:1px solid var(--bdr,#e8e8e5);background:var(--card,#fff);animation:pageSubtitleIn 0.4s ease-out;}
.page-subtitle:empty,[data-page-desc="off"] .page-subtitle{display:none;}
[data-device="phone"] .page-subtitle{padding:5px 10px 8px;font-size:12px;}
.ss-lock-btn{width:32px;height:32px;border:none;background:transparent;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);transition:all var(--dur);}
.ss-lock-btn:hover{background:var(--s2);color:var(--red);}
.ss-lock-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;backdrop-filter:blur(12px);animation:ssFadeIn .2s ease;}
.ss-lock-overlay svg{color:#fff;opacity:.6;}
.ss-lock-overlay__msg{font-size:18px;font-weight:700;color:#fff;}
.ss-lock-overlay__sub{font-size:14px;color:rgba(255,255,255,.5);}
.ss-lock-overlay__bio{width:72px;height:72px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:var(--font);transition:all .2s;backdrop-filter:blur(4px);}
.ss-lock-overlay__bio:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);}
.ss-lock-overlay__bio:active{transform:scale(.95);}
.ss-lock-overlay__bio span{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:.03em;opacity:.7;}
.ss-lock-overlay__btn{padding:10px 28px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.5);font-size:var(--fs-body);font-weight:var(--fw-semibold);cursor:pointer;font-family:var(--font);transition:all .15s;}
.ss-lock-overlay__btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.ss-lock-overlay__signout{padding:8px 20px;border:none;background:transparent;color:rgba(255,255,255,.4);font-size:13px;cursor:pointer;font-family:var(--font);}
.ss-lock-overlay__signout:hover{color:#fff;}

/* AI STRIP — shared nudge bar, built once */
/* AI strip removed — AI insights now rendered inline by each page module */

/* ── TOP ACTION BAR — themed toolbar ─ */
.topbar{flex-shrink:0;height:42px;border-bottom:1px solid var(--bdr,#e8e8e5);display:flex;align-items:center;padding:0 var(--pc);gap:4px;background:var(--card,#fff);z-index:99;}
.topbar[data-hidden="true"]{display:none;}
/* Scheme swatches — 4 coloured dots replacing old theme select */
.hdr-scheme-swatches{display:flex;align-items:center;gap:5px;}
.hdr-swatch{width:13px;height:13px;min-width:13px;min-height:13px;max-width:13px;max-height:13px;padding:0;border-radius:50%;border:none;cursor:pointer;transition:transform .12s,box-shadow .12s;flex-shrink:0;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.15);}
.hdr-swatch:hover{transform:scale(1.2);}
.hdr-swatch.active{box-shadow:0 0 0 2px var(--card,#fff),0 0 0 3.5px var(--hdr-swatch-color,#1B4F72);}
.hdr-swatch[data-scheme="senshin"]{background:#1B4F72;--hdr-swatch-color:#1B4F72;}
.hdr-swatch[data-scheme="jade"]{background:#0C6B55;--hdr-swatch-color:#0C6B55;}
.hdr-swatch[data-scheme="ume"]{background:#8B1852;--hdr-swatch-color:#8B1852;}
.hdr-swatch[data-scheme="ember"]{background:#7A3820;--hdr-swatch-color:#7A3820;}
/* Dark mode toggle pill — 20px canonical pill height */
.hdr-dark-toggle{height:20px;padding:0 8px;border-radius:10px;border:1px solid var(--bdr,#e8e8e5);background:var(--surface,#F7F5F0);color:var(--t2,#3a3a37);font-size:11px;font-weight:600;font-family:var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background .12s,border-color .12s;}
.hdr-dark-toggle:hover{background:var(--bdr,#e8e8e5);}
/* Old theme select — hidden; replaced by swatches */
.hdr-theme-sel{display:none;}
.topbar__left{display:flex;align-items:center;gap:6px;}
.topbar__right{margin-left:auto;display:flex;align-items:center;gap:2px;position:relative;}
.topbar__icon{position:relative;width:32px;height:32px;border-radius:6px;border:none;background:transparent;color:var(--t2,#3a3a37);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s;padding:0;}
.topbar__icon:hover{background:var(--surface,#F7F5F0);color:var(--t1,#1a1a18);}
.topbar__icon:focus-visible{outline:2px solid var(--accent,#1B4F72);outline-offset:1px;}
.topbar__icon[aria-expanded="true"]{background:var(--surface,#F7F5F0);color:var(--t1,#1a1a18);}
.topbar__icon svg{width:18px;height:18px;flex-shrink:0;display:block;}
.topbar__icon-badge{position:absolute;top:5px;right:5px;min-width:8px;height:8px;padding:0 2px;background:var(--red,#C0392B);border-radius:6px;border:2px solid var(--card,#fff);box-sizing:content-box;}
.topbar__icon-badge[hidden]{display:none;}
.topbar__icon-badge--count{top:3px;right:3px;height:14px;min-width:14px;padding:0 4px;font-size:var(--fs-caption);font-weight:700;color:#fff;line-height:14px;text-align:center;border-radius:7px;}
/* Dropdown panels */
.topbar__menu{position:absolute;top:calc(100% + 4px);right:0;min-width:200px;background:var(--card,#fff);border:1px solid var(--bdr,#e8e8e5);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.10);padding:4px;z-index:200;display:none;}
.topbar__menu[data-open="true"]{display:block;}
.topbar__menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:none;background:transparent;color:var(--t1,#1a1a18);font-size:13px;font-family:var(--font);text-align:left;cursor:pointer;border-radius:5px;line-height:1.2;}
.topbar__menu-item:hover{background:var(--surface,#F7F5F0);}
.topbar__menu-item svg{width:14px;height:14px;flex-shrink:0;color:var(--t3,#6b6b67);}
.topbar__menu-sep{height:1px;background:var(--bdr,#e8e8e5);margin:4px 2px;}
/* Notification panel — cinematic dark, wider, sectioned */
.topbar__notif-panel{min-width:340px;max-width:380px;max-height:460px;display:none;flex-direction:column;}
.topbar__notif-panel[data-open="true"]{display:flex;}
.topbar__notif-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px;border-bottom:1px solid var(--shell-border,rgba(255,255,255,0.06));}
.topbar__notif-hdr-title{font-size:13px;font-weight:600;color:var(--shell-text-bright,#E8E4DC);}
.topbar__notif-mark{border:none;background:transparent;color:var(--shell-gold,#E5E4E2);font-size:11px;font-weight:600;cursor:pointer;padding:2px 6px;border-radius:4px;}
.topbar__notif-mark:hover{background:var(--shell-hover,rgba(255,255,255,0.05));}
.topbar__notif-tabs{display:inline-flex;gap:2px;background:rgba(255,255,255,0.04);border-radius:7px;padding:2px;}
.topbar__notif-tab{border:none;background:transparent;color:var(--shell-text-muted,#8A8680);font-size:12px;font-weight:600;font-family:var(--font);cursor:pointer;padding:4px 10px;border-radius:5px;line-height:1;transition:background .12s,color .12s;}
.topbar__notif-tab:hover{color:var(--shell-text-bright,#E8E4DC);}
.topbar__notif-tab.is-active{background:var(--shell-bg,#0f0f11);color:var(--shell-text-bright,#E8E4DC);}
.topbar__notif-tab-count{margin-left:5px;font-size:10px;font-weight:700;color:var(--shell-gold,#E5E4E2);}
.topbar__notif-body{flex:1;overflow-y:auto;padding:4px 0;}
.topbar__notif-section{padding:6px 12px 4px;font-size:var(--fs-caption);font-weight:600;color:var(--shell-text-muted,#8A8680);letter-spacing:0.04em;text-transform:uppercase;}
.topbar__notif-item{display:flex;gap:8px;padding:8px 12px;cursor:pointer;}
.topbar__notif-item:hover{background:var(--shell-hover,rgba(255,255,255,0.05));}
.topbar__notif-item--unread{background:rgba(229,228,226,0.06);}
.topbar__notif-item-text{font-size:12.5px;color:var(--shell-text,#E5E4E2);line-height:1.4;}
.topbar__notif-item-meta{font-size:11px;color:var(--shell-text-muted,#8A8680);margin-top:2px;}
.topbar__notif-empty{padding:24px 16px;text-align:center;color:var(--shell-text-muted,#8A8680);font-size:12.5px;}
@media(max-width:767px){.topbar{height:38px;padding:0 12px;}.topbar__icon{width:30px;height:30px;}.topbar__icon svg{width:16px;height:16px;}.topbar__menu,.topbar__notif-panel{right:-8px;}}
/* AI voice FAB — hidden in favour of Cmd+K and sidebar entry points */
.sv-fab{display:none!important;}

/* ── PRINT — content only, no chrome ──────────────────────────────── */
@media print{
  .nav,.mobile-bar,.header,.topbar,.dropdown,.ss-ptr,.ss-lock-overlay,
  .cookie-consent,.sv-fab{display:none!important;}
  .app{display:block!important;height:auto!important;overflow:visible!important;}
  .main{height:auto!important;overflow:visible!important;}
  #mount{overflow:visible!important;padding:0!important;height:auto!important;}
  body{overflow:visible!important;background:#fff!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  html{font-size:12px!important;}
  .ss-card,.ct-card{break-inside:avoid;page-break-inside:avoid;}
  a{text-decoration:none!important;color:inherit!important;}
  .pill,.ss-pill,.ct-pill{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* MOUNT — sole scrolling region */
#mount{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:var(--pc);position:relative;display:flex;flex-direction:column;overscroll-behavior:contain;}
/* Scrollbar a touch wider so users can see / grab it on long pages
   (Control Tower has 10 cards). Was 4px → effectively invisible. */
#mount::-webkit-scrollbar{width:10px;height:10px;}
#mount::-webkit-scrollbar-thumb{background:var(--s4);border-radius:var(--r-full);}
#mount::-webkit-scrollbar-thumb:hover{background:var(--s3);}
#mount::-webkit-scrollbar-track{background:transparent;}
#mount{scrollbar-width:thin;scrollbar-color:var(--s4) transparent;}

/* MOBILE */
.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--shell-bg,#0f0f11);border-top:1px solid var(--shell-border,rgba(255,255,255,0.06));padding:8px 0 max(8px,env(safe-area-inset-bottom));z-index:300;grid-template-columns:repeat(5,1fr);}
.mobile-tab{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:3px 0;color:var(--shell-text-muted,#8A8680);-webkit-tap-highlight-color:transparent;transition:color var(--dur);}
.mobile-tab.on{color:var(--shell-gold,#E5E4E2);}
.mobile-tab svg{width:21px;height:21px;stroke-width:1.55;}
.mobile-tab__lbl{font-size:11px;font-weight:600;}
/* Shared back button — used by all page modules */
.ss-back{padding:7px 14px;border-radius:8px;border:1px solid #cbd5e1;background:#f1f5f9;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;color:#1c1c1a;display:inline-flex;align-items:center;gap:4px;transition:all .12s;line-height:1.4;}
.ss-back:hover{background:#e2e8f0;border-color:#2563eb;color:#2563eb;}

/* ── SHARED DESIGN SYSTEM ─────────────────────────────────────────────
   Build once, use everywhere. All pages use ss- prefixed classes.
   ──────────────────────────────────────────────────────────────────── */

/* Toolbar — search + filter row */
.ss-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.ss-toolbar--right{margin-left:auto;}
.ss-search{padding:8px 14px;border:1px solid #e8e8e6;border-radius:10px;font-size:var(--fs-lg);font-family:inherit;outline:none;min-width:180px;flex:1;max-width:340px;background:var(--bg1);color:#1c1c1a;transition:border-color .15s;}
.ss-search:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.08);}
.ss-filter{padding:7px 12px;border:1px solid #e8e8e6;border-radius:10px;font-size:14px;font-family:inherit;background:var(--bg1);cursor:pointer;color:#1c1c1a;transition:all .12s;}
.ss-filter:hover{border-color:#2563eb;color:#2563eb;}
.ss-filter.active{background:#eff6ff;border-color:#2563eb;color:#2563eb;}

/* Form fields — inputs, selects, textareas */
.ss-input{width:100%;padding:8px 12px;border:1px solid #e8e8e6;border-radius:8px;font-size:var(--fs-lg);font-family:inherit;outline:none;background:var(--bg1);color:#1c1c1a;transition:border-color .15s;}
.ss-input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.08);}
.ss-select{width:100%;padding:8px 12px;border:1px solid #e8e8e6;border-radius:8px;font-size:var(--fs-lg);font-family:inherit;outline:none;background:var(--bg1);cursor:pointer;color:#1c1c1a;transition:border-color .15s;}
.ss-select:focus{border-color:#2563eb;}
.ss-textarea{width:100%;padding:8px 12px;border:1px solid #e8e8e6;border-radius:8px;font-size:var(--fs-lg);font-family:inherit;outline:none;resize:vertical;min-height:80px;background:var(--bg1);color:#1c1c1a;transition:border-color .15s;}
.ss-textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.08);}
.ss-field-label{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--t2,#475569);margin-bottom:4px;}
.ss-field-row{display:flex;flex-direction:column;gap:4px;}

/* Buttons — refined, understated. Screen furniture, not visual blocks.
   34px height, 6px radius, medium weight (500). Linear/Vercel aesthetic.
   No large black/navy casings — ever. */
.ss-btn{height:34px;padding:0 14px;border-radius:6px;border:1px solid transparent;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .15s ease,color .15s ease,border-color .15s ease;line-height:1;letter-spacing:0;}
/* Primary — brand blue, refined */
.ss-btn--primary,.ss-btn-primary{background:#2563eb;color:#fff;border-color:#2563eb;}
.ss-btn--primary:hover,.ss-btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8;}
/* Secondary — outline ghost (border only, no fill) */
.ss-btn--secondary,.ss-btn-secondary{background:transparent;color:var(--t2,#334155);border-color:var(--br,#e2e8f0);}
.ss-btn--secondary:hover,.ss-btn-secondary:hover{background:var(--bg3,#f1f5f9);color:var(--t1,#0f172a);border-color:var(--br-hover,#bfdbfe);}
/* Accent — purple (AI actions) */
.ss-btn--accent,.ss-btn-accent{background:#7c3aed;color:#fff;border-color:#7c3aed;}
.ss-btn--accent:hover,.ss-btn-accent:hover{background:#6d28d9;border-color:#6d28d9;}
/* Danger — outline only, never filled */
.ss-btn--danger,.ss-btn-danger{background:transparent;color:#dc2626;border:1px solid #fecaca;}
.ss-btn--danger:hover,.ss-btn-danger:hover{background:#fef2f2;border-color:#dc2626;}
/* Ghost — text-link style, minimal */
.ss-btn--ghost,.ss-btn-ghost{background:transparent;color:#2563eb;border:1px solid transparent;}
.ss-btn--ghost:hover,.ss-btn-ghost:hover{background:rgba(37,99,235,0.06);color:#1d4ed8;}

/* Solid pills — RAG health indicators (white text on solid bg)
   CANONICAL: slim, hugs text, uniform across every page and platform.
   Override ONLY via class additions (.pill--lg etc), never per-page redefine. */
.pill{display:inline-flex;align-items:center;justify-content:center;height:var(--pill-height-sm,20px);padding:0 var(--pill-pad-x,8px);border-radius:var(--pill-radius,999px);font-size:var(--pill-font,10px);font-weight:600;line-height:1;color:#fff;white-space:nowrap;border:1px solid transparent;text-transform:uppercase;letter-spacing:.02em;box-sizing:border-box;}
.pill-red{background:#dc2626;border-color:#dc2626;}
.pill-amber{background:#d97706;border-color:#d97706;}
.pill-green{background:#16a34a;border-color:#16a34a;}
.pill-blue{background:#2563eb;border-color:#2563eb;}
.pill-purple{background:#7c3aed;border-color:#7c3aed;}
.pill-neutral{background:#4a4a47;border-color:#4a4a47;}
.pill-slate{background:#475569;border-color:#475569;}

/* Tinted pills — softer badges (coloured text on light bg) */
.ss-pill{display:inline-flex;align-items:center;justify-content:center;height:var(--pill-height-sm,20px);padding:0 var(--pill-pad-x,8px);border-radius:var(--pill-radius,999px);font-size:var(--pill-font,10px);font-weight:600;line-height:1;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;box-sizing:border-box;}
.ss-pill--red{background:#fef2f2;color:#dc2626;}
.ss-pill--amber{background:#fffbeb;color:#d97706;}
.ss-pill--green{background:#f0fdf4;color:#16a34a;}
.ss-pill--blue{background:#eff6ff;color:#2563eb;}
.ss-pill--purple{background:#f5f3ff;color:#7c3aed;}
.ss-pill--neutral{background:#f0f0ee;color:#4a4a47;}
.ss-pill--slate{background:#f1f5f9;color:#475569;}

/* Cards — tight, hug content */
.ss-card{background:var(--bg1);border:1px solid #e8e8e6;border-radius:12px;padding:14px 16px;transition:box-shadow .15s ease,border-color .15s ease,transform 120ms ease-out;}
.ss-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateY(-1px);}
.ss-card--click{cursor:pointer;}
.ss-card--click:hover{border-color:var(--br-hover,#D4CFC4);box-shadow:0 4px 16px rgba(0,0,0,.08);}
.ss-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}

/* Metric cards & strips — compact */
.ss-metric{background:var(--bg1);border:1px solid #e8e8e6;border-radius:10px;padding:10px 12px;text-align:center;}
.ss-metric__label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:2px;}
.ss-metric__value{font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:#1c1c1a;line-height:1.1;}
.ss-metric__meta{font-size:11px;color:var(--t4);margin-top:1px;}
.ss-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:10px;}

/* Avatar / initials circle */
.ss-avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;color:#fff;flex-shrink:0;text-transform:uppercase;}
.ss-avatar--sm{width:28px;height:28px;font-size:11px;}
.ss-avatar--md{width:36px;height:36px;font-size:14px;}
.ss-avatar--lg{width:48px;height:48px;font-size:18px;}

/* Section label */
.ss-section-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:6px;}

/* Alert banners */
.ss-alert{border-radius:10px;padding:10px 14px;font-size:14px;display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;}
.ss-alert--warning{background:#fffbeb;border:1px solid #fde68a;color:#92400e;}
.ss-alert--error{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;}
.ss-alert--info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;}
.ss-alert--success{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;}

/* Modal / overlay */
.ss-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.35);z-index:900;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);animation:ssFadeIn .15s ease;}
.ss-modal{background:var(--bg1);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.15);max-width:600px;width:90%;max-height:85vh;overflow-y:auto;animation:ssSlideUp .2s ease;}
.ss-modal__header{padding:20px 24px 0;font-size:var(--fs-xl);font-weight:var(--fw-bold);color:#1c1c1a;}
.ss-modal__body{padding:16px 24px;}
.ss-modal__footer{padding:0 24px 20px;display:flex;gap:10px;justify-content:flex-end;}
@keyframes ssFadeIn{from{opacity:0}to{opacity:1}}
@keyframes ssSlideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Progress / confidence bars */
.ss-progress{height:8px;background:#e8e8e6;border-radius:999px;overflow:hidden;}
.ss-progress__fill{height:100%;border-radius:999px;transition:width .4s ease;}
.ss-progress--green .ss-progress__fill{background:#16a34a;}
.ss-progress--amber .ss-progress__fill{background:#d97706;}
.ss-progress--red .ss-progress__fill{background:#dc2626;}
.ss-progress--blue .ss-progress__fill{background:#2563eb;}

/* Tables — compact and dense */
.ss-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg1);border:1px solid #e8e8e6;border-radius:12px;overflow:hidden;}
.ss-table th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:8px 12px;text-align:left;background:#fafaf9;border-bottom:1px solid #e8e8e6;}
.ss-table td{padding:8px 12px;font-size:14px;color:#1c1c1a;border-bottom:1px solid #f0f0ee;vertical-align:middle;}
.ss-table tbody tr:last-child td{border-bottom:none;}
.ss-table tbody tr:hover td{background:#fafaf9;}
.ss-table--compact th,.ss-table--compact td{padding:6px 10px;font-size:13px;}
.ss-table--striped tbody tr:nth-child(even) td{background:#fafaf9;}

/* Sortable header button */
.ss-th-sort{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:700;}
.ss-th-sort__arrow{font-size:12px;color:#8c8c88;}
.ss-th-sort.active .ss-th-sort__arrow{color:#2563eb;}

/* Drag and drop */
.ss-drag-handle{cursor:grab;color:#8c8c88;font-size:16px;user-select:none;padding:0 4px;}
.ss-drag-handle:active{cursor:grabbing;}
.ss-row--dragging{opacity:.5;box-shadow:0 8px 24px rgba(0,0,0,.15);}
.ss-row--drop-target td{box-shadow:inset 0 -3px 0 #2563eb;}

/* Checkbox — canonical slim, uniform across every page and platform.
   iOS Safari renders native checkboxes as large squircles; this reset
   enforces a tight 16px square on every device. */
input[type="checkbox"].ss-cb,
#mount input[type="checkbox"],
.prj-cb,
#prjSelectAll{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;min-width:16px;min-height:16px;max-width:16px;max-height:16px;
  border:1.5px solid #cbd5e1;border-radius:4px;background:var(--bg1);
  cursor:pointer;flex-shrink:0;position:relative;padding:0;margin:0;vertical-align:middle;
  transition:background .12s,border-color .12s;
}
input[type="checkbox"].ss-cb:hover,
#mount input[type="checkbox"]:hover,
.prj-cb:hover{border-color:#2563eb;}
input[type="checkbox"].ss-cb:checked,
#mount input[type="checkbox"]:checked,
.prj-cb:checked{background:#2563eb;border-color:#2563eb;}
input[type="checkbox"].ss-cb:checked::after,
#mount input[type="checkbox"]:checked::after,
.prj-cb:checked::after{
  content:'';position:absolute;left:4px;top:0;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* Toggle switch — canonical Recraft-style pill toggle */
.ss-toggle{width:44px;height:24px;border-radius:99px;background:#d1d5db;border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;-webkit-appearance:none;appearance:none;}
.ss-toggle.on{background:var(--text,#0f172a);}
.ss-toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--bg1);transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.12);}
.ss-toggle.on::after{transform:translateX(20px);}

/* Delete confirmation inline */
.ss-confirm-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;font-size:14px;color:#991b1b;margin-bottom:10px;}

/* ── Canonical mobile-native list components ─────────────────────
   Two patterns, reused by every list page on phone/tablet:
   1. .ss-card-list — card-per-row list (Projects, RAID, People,
      Finance, Artefacts). Replaces wide horizontal-scroll tables.
      Pattern: Stripe / Linear / iOS Mail mobile rows.
   2. .ss-group-list — iOS grouped-list (Settings, Preferences).
      Pattern: iOS Settings app / 1Password / Bitwarden.
   ──────────────────────────────────────────────────────────────── */

/* ── Card list (list pages on phone/tablet) ── */
.ss-card-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;}
.ss-card-row{display:block;background:var(--bg1);border:1px solid #e8e8e6;border-radius:12px;padding:12px 14px;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease,transform 120ms ease-out;position:relative;text-decoration:none;color:inherit;}
.ss-card-row:active{transform:scale(.995);}
@media(hover:hover){.ss-card-row:hover{border-color:var(--br-hover,#D4CFC4);box-shadow:0 4px 12px rgba(0,0,0,.06);transform:translateY(-1px);}}
.ss-card-row__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.ss-card-row__title{font-size:var(--fs-lg);font-weight:700;color:#1c1c1a;line-height:1.25;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ss-card-row__badge{flex-shrink:0;}
.ss-card-row__body{display:flex;flex-direction:column;gap:4px;}
.ss-card-row__line{display:flex;align-items:center;gap:6px;font-size:13px;color:#3a3a37;line-height:1.35;}
.ss-card-row__line--meta{color:#6b6b67;font-size:12px;}
.ss-card-row__line strong{font-weight:700;color:#1c1c1a;}
.ss-card-row__progress{display:flex;align-items:center;gap:8px;}
.ss-card-row__bar{flex:1;height:6px;background:#e8e8e6;border-radius:999px;overflow:hidden;min-width:40px;max-width:140px;}
.ss-card-row__bar-fill{height:100%;border-radius:999px;}
.ss-card-row__pct{font-size:13px;font-weight:700;color:#1c1c1a;min-width:38px;text-align:right;font-variant-numeric:tabular-nums;}
.ss-card-row__raid{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
.ss-card-row__raid span.r{color:#dc2626;}
.ss-card-row__raid span.a{color:#2563eb;}
.ss-card-row__raid span.i{color:#d97706;}
.ss-card-row__raid span.d{color:#7c3aed;}
.ss-card-row__raid span.o{color:#dc2626;font-weight:var(--fw-bold);}
.ss-card-row.selected{border-color:#2563eb;background:#eff6ff;}
.ss-card-row__cb{position:absolute;top:10px;right:12px;}

/* Card list is hidden by default; shown on phone/tablet via responsive rules below.
   Conversely, desktop-only wide tables are hidden on phone. */
.ss-card-list{display:none;}

/* ── Grouped list (settings, preferences — iOS pattern) ── */
.ss-group-list{display:flex;flex-direction:column;gap:18px;margin:0;padding:0;list-style:none;}
.ss-group{display:flex;flex-direction:column;}
.ss-group__label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3,#6b6b67);padding:0 16px 6px;margin:0;}
.ss-group__rows{background:var(--bg1);border:1px solid #e8e8e6;border-radius:12px;overflow:hidden;}
.ss-group-row{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 14px;background:var(--bg1);border:0;border-bottom:1px solid #f0f0ee;font:inherit;color:inherit;width:100%;text-align:left;cursor:pointer;}
.ss-group-row:last-child{border-bottom:none;}
.ss-group-row:active{background:#f7f7f6;}
@media(hover:hover){.ss-group-row:hover{background:#fafafa;}}
.ss-group-row__label{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:#1c1c1a;flex:1;min-width:0;}
.ss-group-row__value{font-size:14px;color:#6b6b67;text-align:right;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ss-group-row__chev{color:#c4c4c0;font-size:14px;flex-shrink:0;margin-left:2px;}
.ss-group-row--toggle .ss-group-row__value{display:none;}
.ss-group-row--toggle .ss-group-row__chev{display:none;}
.ss-group__footer{font-size:12px;color:var(--t3,#6b6b67);padding:6px 16px 0;line-height:1.4;}

/* Inline edit field inside a group row (e.g. text input, select) */
.ss-group-row--edit{display:flex;flex-direction:column;align-items:stretch;gap:6px;}
.ss-group-row--edit .ss-group-row__label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3,#6b6b67);}
.ss-group-row--edit input,
.ss-group-row--edit select,
.ss-group-row--edit textarea{
  width:100%;min-height:36px;padding:6px 10px;font:inherit;font-size:14px;
  background:transparent;border:1px solid #e8e8e6;border-radius:8px;color:#1c1c1a;
}

/* ── RESPONSIVE: DEVICE-CLASS SYSTEM ──────────────────────────────
   Uses data-device="phone|tablet|desktop" set by detector script.
   @media fallbacks kept for SSR/pre-detect safety.
   ──────────────────────────────────────────────────────────────── */

/* ── TABLE: horizontal scroll wrapper on phone/tablet ── */
.ss-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;}
/* Auto-wrap any table inside mount on touch devices */
[data-device="phone"] #mount table,[data-device="tablet"] #mount table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
[data-device="phone"] #mount thead,[data-device="phone"] #mount tbody,[data-device="phone"] #mount tr,[data-device="tablet"] #mount thead,[data-device="tablet"] #mount tbody,[data-device="tablet"] #mount tr{display:table;width:100%;table-layout:auto;}

/* ── PHONE/TABLET: show card list, hide desktop tables ── */
[data-device="phone"] .ss-card-list,
[data-device="tablet"] .ss-card-list{display:flex;}
[data-device="phone"] .ss-desktop-table,
[data-device="tablet"] .ss-desktop-table{display:none !important;}
/* Card list tweaks on phone — tighter padding */
[data-device="phone"] .ss-card-row{padding:10px 12px;border-radius:10px;}
[data-device="phone"] .ss-card-row__title{font-size:14px;}
[data-device="phone"] .ss-card-row__line{font-size:12px;}
[data-device="phone"] .ss-card-list{gap:6px;}
/* Grouped list tweaks on phone */
[data-device="phone"] .ss-group-list{gap:14px;}
[data-device="phone"] .ss-group__label{padding:0 14px 4px;}
[data-device="phone"] .ss-group-row{min-height:44px;padding:8px 12px;}

/* ── PHONE ────────────────────────────────────────────── */
[data-device="phone"] .nav{display:none;}
[data-device="phone"] .mobile-bar{display:grid;}
[data-device="phone"] #mount{padding:8px 10px calc(90px + env(safe-area-inset-bottom,0px));gap:0;}
[data-device="phone"] .header{height:36px;padding:0 10px;}
[data-device="phone"] .header__title{font-size:13px;font-weight:700;}
[data-device="phone"] .header__crumb{font-size:11px;}

/* Strips & metrics — tight single row that auto-fits however many tiles.
   grid-auto-flow:column + minmax(0,1fr) forces all tiles onto one row,
   splitting space equally and preventing intrinsic content (e.g. "AVG COMPLETE"
   uppercase labels) from expanding tracks and causing wrap. */
[data-device="phone"] .ss-strip{
  display:grid !important;
  grid-template-columns:none !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(0,1fr) !important;
  gap:4px;margin-bottom:6px;
}
[data-device="phone"] .ss-metric,
[data-device="phone"] .prj-m,
[data-device="phone"] .raid-m{padding:4px 2px !important;border-radius:6px;border-width:1px;text-align:center;min-width:0;overflow:hidden;}
[data-device="phone"] .ss-metric__label,
[data-device="phone"] .prj-m-l,
[data-device="phone"] .raid-m-l{font-size:var(--fs-caption) !important;letter-spacing:.02em;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
[data-device="phone"] .ss-metric__value,
[data-device="phone"] .prj-m-v,
[data-device="phone"] .raid-m-v{font-size:var(--fs-lg) !important;line-height:1.1;font-weight:var(--fw-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
[data-device="phone"] .ss-metric__meta,
[data-device="phone"] .prj-m-s,
[data-device="phone"] .raid-m-s{display:none !important;}

/* Section labels — tight */
[data-device="phone"] .prj-section-lbl,[data-device="phone"] .ss-section-lbl{font-size:var(--fs-small);margin-bottom:4px;margin-top:2px;}

/* Cards — tight padding, hug content */
[data-device="phone"] .ss-card-grid{grid-template-columns:1fr;gap:6px;}
[data-device="phone"] .ss-card{padding:10px 12px;border-radius:10px;}

/* Toolbar — horizontal row, compact */
[data-device="phone"] .ss-toolbar{flex-direction:row;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
[data-device="phone"] .ss-search{max-width:none;flex:1;min-width:120px;height:36px;min-height:36px;font-size:14px;padding:0 10px;}
[data-device="phone"] .ss-select{height:36px;min-height:36px;font-size:13px;padding:0 8px;flex-shrink:0;}
[data-device="phone"] .ss-input,[data-device="phone"] .ss-textarea{min-height:40px;font-size:var(--fs-lg);border-radius:10px;}

/* Tables — compact, scrollable */
[data-device="phone"] .ss-table th{padding:6px 8px;font-size:var(--fs-small);}
[data-device="phone"] .ss-table td{padding:7px 8px;font-size:13px;}
[data-device="phone"] .ss-table--compact th,[data-device="phone"] .ss-table--compact td{padding:5px 6px;font-size:11px;}

/* Buttons — 44px touch targets on phone */
[data-device="phone"] .ss-btn{min-height:44px;padding:0 16px;font-size:13px;border-radius:8px;}
[data-device="phone"] .ss-filter{min-height:44px;padding:6px 12px;}

/* Pills already slim in base — no phone override needed */

/* AI nudge — tight on mobile */
[data-device="phone"] .ai-nudge{padding:8px 10px;border-radius:10px;margin-bottom:6px;}
[data-device="phone"] .ai-nudge__label{font-size:var(--fs-small);}
[data-device="phone"] .ai-nudge__text{font-size:13px;-webkit-line-clamp:2;}
[data-device="phone"] .ai-nudge__rec{gap:6px;}
[data-device="phone"] .ai-nudge__num{min-width:18px;height:18px;font-size:var(--fs-caption);}
[data-device="phone"] .ai-nudge__action{font-size:13px;}

/* Modal — full screen on phone */
[data-device="phone"] .ss-modal{max-width:100%;width:100%;max-height:100vh;border-radius:0;height:100vh;}
[data-device="phone"] .ss-overlay{backdrop-filter:none;}

/* Alerts — tighter */
[data-device="phone"] .ss-alert{padding:8px 10px;font-size:13px;border-radius:8px;}

/* Back button */
[data-device="phone"] .ss-back{min-height:36px;padding:6px 12px;font-size:14px;}

/* Hide non-essential meta text on phone */
[data-device="phone"] .prj-m-s{display:none;}
[data-device="phone"] .prj-commit-date{display:none;}

/* ── TABLET ───────────────────────────────────────────── */
[data-device="tablet"] .nav{width:var(--nav-w);}
[data-device="tablet"] .nav .nav__lbl{display:none;}
[data-device="tablet"] .nav .nav__group{display:none;}
[data-device="tablet"] .nav__logo{padding:6px 0 14px;justify-content:center;}
[data-device="tablet"] .nav__logo-wrap{display:none;}
[data-device="tablet"] .nav .nav__user-info{display:none;}
[data-device="tablet"] .nav__link{justify-content:center;padding:0 10px;}
[data-device="tablet"] #mount{padding:16px;}

/* Strips & metrics — 3-col grid */
[data-device="tablet"] .ss-strip{grid-template-columns:repeat(3,1fr);gap:8px;}
[data-device="tablet"] .ss-metric{padding:9px 12px;}
[data-device="tablet"] .ss-metric__value{font-size:18px;}

/* Cards — 2-col */
[data-device="tablet"] .ss-card-grid{grid-template-columns:repeat(2,1fr);gap:10px;}

/* Tables — slightly compact */
[data-device="tablet"] .ss-table th{padding:8px 12px;}
[data-device="tablet"] .ss-table td{padding:9px 12px;font-size:14px;}

/* Touch targets — 44px minimum */
[data-device="tablet"] .ss-btn{min-height:42px;}
[data-device="tablet"] .ss-input,[data-device="tablet"] .ss-select{min-height:42px;}

/* Modal — 80% width, not full screen */
[data-device="tablet"] .ss-modal{max-width:80%;max-height:85vh;}

/* ── DESKTOP — defaults (no overrides needed) ─────── */

/* ── PORTRAIT vs LANDSCAPE tweaks ─────────────────── */
[data-device="phone"][data-orient="landscape"] .ss-strip{grid-template-columns:repeat(3,1fr);gap:6px;}
[data-device="phone"][data-orient="landscape"] #mount{padding:8px 16px 68px;}
[data-device="phone"][data-orient="landscape"] .ss-card-grid{grid-template-columns:repeat(2,1fr);}
[data-device="phone"][data-orient="landscape"] .ss-toolbar{flex-direction:row;flex-wrap:nowrap;}
[data-device="tablet"][data-orient="portrait"] .ss-strip{grid-template-columns:repeat(2,1fr);}

/* ── MOBILE "MORE" MENU ───────────────────────────── */
.mobile-more{position:fixed;bottom:0;left:0;right:0;z-index:400;pointer-events:none;transition:background .2s;}
.mobile-more.open{pointer-events:auto;background:rgba(0,0,0,.35);}
.mobile-more__sheet{position:absolute;bottom:0;left:0;right:0;background:var(--surface);border-top-left-radius:16px;border-top-right-radius:16px;padding:12px 16px max(16px,env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .25s var(--ease);box-shadow:0 -4px 24px rgba(0,0,0,.12);}
.mobile-more.open .mobile-more__sheet{transform:translateY(0);}
.mobile-more__handle{width:36px;height:4px;border-radius:2px;background:var(--s4);margin:0 auto 12px;}
.mobile-more__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.mobile-more__item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;cursor:pointer;color:var(--t2);-webkit-tap-highlight-color:transparent;transition:background .12s;}
.mobile-more__item:hover,.mobile-more__item:active{background:var(--s2);}
.mobile-more__item svg{width:22px;height:22px;stroke-width:1.55;}
.mobile-more__item span{font-size:11px;font-weight:600;text-align:center;}
.mobile-more__item.active{color:var(--accent);}

/* ── PULL TO REFRESH ─────────────────────────────── */
.ss-ptr{position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(-44px);width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-md);display:flex;align-items:center;justify-content:center;z-index:50;transition:transform .2s var(--ease),opacity .2s;opacity:0;pointer-events:none;}
.ss-ptr.pulling{opacity:1;pointer-events:none;}
.ss-ptr.refreshing{opacity:1;}
.ss-ptr__arrow{width:18px;height:18px;stroke:var(--t2);transition:transform .2s;}
.ss-ptr.ready .ss-ptr__arrow{transform:rotate(180deg);}
.ss-ptr__spinner{width:18px;height:18px;border:2px solid var(--s4);border-top-color:var(--accent);border-radius:50%;animation:ssSpin .6s linear infinite;display:none;}
.ss-ptr.refreshing .ss-ptr__arrow{display:none;}
.ss-ptr.refreshing .ss-ptr__spinner{display:block;}
@keyframes ssSpin{to{transform:rotate(360deg)}}
/* Desktop refresh button in header */
.ss-refresh-btn{width:32px;height:32px;border:none;background:transparent;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);transition:all var(--dur);}
.ss-refresh-btn:hover{background:var(--s2);color:var(--accent);}
.ss-refresh-btn.spinning svg{animation:ssSpin .6s linear infinite;}
[data-device="phone"] .ss-refresh-btn{display:none;}

/* ── @media FALLBACKS (pre-detect / SSR safety) ──── */
@media(max-width:767px){.nav{display:none;}.mobile-bar{display:grid;}#mount{padding-bottom:70px;}}
@media(max-width:1100px){.ss-card-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}}
@media(min-width:768px) and (max-width:1023px){
  .nav{width:var(--nav-w)!important;}
  .nav .nav__lbl,.nav .nav__group,.nav__logo-wrap,.nav .nav__user-info{display:none!important;}
  .nav__logo{padding:6px 0 14px!important;justify-content:center!important;}
  .nav__link{justify-content:center!important;padding:0 10px!important;}
  #mount{padding:16px!important;}
  .sensei-sidebar{position:fixed!important;right:0!important;top:0!important;bottom:0!important;width:min(320px,calc(100vw - 72px))!important;height:100vh!important;z-index:400!important;box-shadow:-4px 0 24px rgba(0,0,0,.14);transform:translateX(110%);transition:transform 200ms ease;}
  .sensei-sidebar.ss-open{transform:translateX(0);}
}
@media(max-width:767px){
  .sensei-sidebar{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;height:85vh!important;z-index:400!important;border-left:none!important;border-top:1px solid var(--br);border-radius:16px 16px 0 0;transform:translateY(110%);transition:transform 200ms ease;}
  .sensei-sidebar.ss-open{transform:translateY(0);}
}

/* ── Feature Gate: Nav transitions ──────────────────────────────────────── */
.nav__link{overflow:hidden;transition:opacity var(--dur) var(--ease),max-height .25s var(--ease),padding .25s var(--ease),margin .25s var(--ease);}
.nav__link.fg-hidden{max-height:0!important;opacity:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;pointer-events:none;overflow:hidden;}
.nav__group-hdr{transition:opacity var(--dur) var(--ease),max-height .25s var(--ease),margin .25s var(--ease);}
.nav__group-hdr.fg-hidden{max-height:0!important;opacity:0;margin:0;pointer-events:none;overflow:hidden;}

/* Usage limit badge on nav items */
.nav__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:var(--fs-caption);font-weight:var(--fw-bold);line-height:1;margin-left:auto;flex-shrink:0;opacity:0;transition:opacity var(--dur) var(--ease);}
.nav__badge--warn{background:var(--amber);color:#fff;opacity:1;}
.nav__badge--limit{background:var(--red);color:#fff;opacity:1;}
.nav[data-collapsed] .nav__badge{position:absolute;top:4px;right:4px;width:8px;height:8px;font-size:0;}

/* ── Feature Gate: Gating screen (route-level) ───────────────────────────── */
.fg-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:48px 24px;gap:16px;}
.fg-gate__icon{font-size:40px;line-height:1;margin-bottom:8px;}
.fg-gate__title{font-size:var(--fs-xl);font-weight:700;color:var(--text);}
.fg-gate__body{font-size:var(--fs-lg);color:var(--t2);max-width:440px;line-height:1.55;}
.fg-gate__plan{display:inline-block;background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm);padding:2px 10px;font-size:13px;font-weight:600;color:var(--accent);margin:4px 2px;}
.fg-gate__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px;}
.fg-gate__btn{padding:10px 20px;border-radius:var(--r-md);font-size:14px;font-weight:600;border:none;cursor:pointer;transition:opacity .15s;}
.fg-gate__btn--primary{background:var(--accent);color:#fff;}
.fg-gate__btn--primary:hover{opacity:.88;}
.fg-gate__btn--secondary{background:var(--s2);color:var(--text);border:1px solid var(--border);}
.fg-gate__btn--secondary:hover{background:var(--s3);}

/* ── Feature Gate: Usage limit modal ────────────────────────────────────── */
.fg-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;}
.fg-modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px 28px;max-width:420px;width:100%;text-align:center;box-shadow:var(--sh-md);}
.fg-modal__icon{font-size:36px;line-height:1;margin-bottom:12px;}
.fg-modal__title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;}
.fg-modal__body{font-size:14px;color:var(--t2);line-height:1.55;margin-bottom:20px;}
.fg-modal__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.fg-modal__btn{padding:9px 20px;border-radius:var(--r-md);font-size:14px;font-weight:600;border:1px solid var(--border);background:var(--s2);color:var(--text);cursor:pointer;transition:opacity .15s;}
.fg-modal__btn--primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.fg-modal__btn:hover{opacity:.85;}

/* ── Boot splash — hides the shell until the first route mounts so users
   never see the static nav next to an empty #mount (1s flash on sign-in). */
#ssBootSplash{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .25s ease;}
#ssBootSplash[data-hide]{opacity:0;pointer-events:none;}
.ss-boot-splash__word{font:600 14px/1 var(--font);color:var(--t3);letter-spacing:.18em;text-transform:uppercase;}
@media(prefers-reduced-motion:reduce){#ssBootSplash{transition:none;}}