/* ============================================================
   Mythox - REIS design system (single source of truth)
   ------------------------------------------------------------
   Total rebuild on the Brand OS identity:
     · Font: Space Grotesk (display) + Inter (body) - no third face
     · 4 palettes as [data-theme] token sets: green (default), blue,
       mono, yellow - each with a light variant via [data-mode="light"]
     · Glowing "//" brand mark · signature glow-hover + pill .lead-form
     · Cursor premium motion + one-button // theme switcher (chrome below)
   Modules consume the legacy token NAMES (--gold*, --ivory, --ink, --line…)
   which are aliased here onto the new canonical Brand OS tokens, so the new
   palette flows to every screen with zero markup change. New code should
   prefer the canonical names (--accent, --text, --bg, --surface, --glow…).
   ============================================================ */

/* ---------- palette-independent tokens (fonts, geometry, derivations) ---------- */
:root{
  /* Geist + Geist Mono + Georgia — matched to the mythox.ai website (2026-06-25). */
  --font-display:"Geist", system-ui, sans-serif;
  --font-body:"Geist", system-ui, sans-serif;
  --serif:Georgia, 'Times New Roman', Times, serif;
  --sans:var(--font-body);
  --mono:"Geist Mono", ui-monospace, 'SF Mono', monospace;

  --radius:14px; --radius-lg:22px;
  --max:1480px; --chat-max:820px;
  --topbar-h:0px;
  --ease:cubic-bezier(.23,1,.32,1);

  /* ----- accent-derived tokens (lazy: resolve against the active --accent) ----- */
  --gold:var(--accent);
  --gold-2:var(--accent-2);
  --gold-ink:var(--ink-on-accent);
  --gold-glow:var(--glow);
  --gold-soft:color-mix(in srgb, var(--accent) 14%, transparent);
  --gold-line:color-mix(in srgb, var(--accent) 34%, transparent);

  /* ----- surface / text aliases ----- */
  --ink:var(--bg);
  --ink-2:var(--surface);
  --graphite:var(--surface-2);
  --graphite-2:var(--surface-3);
  --ivory:var(--text);
  --ivory-soft:color-mix(in srgb, var(--text) 84%, var(--bg));
  --dim:color-mix(in srgb, var(--text) 44%, var(--bg));
  --line:var(--border);
  --line-2:color-mix(in srgb, var(--text) 16%, transparent);
  --topbar-bg:color-mix(in srgb, var(--bg) 84%, transparent);
  --surface-grad-2:color-mix(in srgb, var(--surface) 68%, var(--bg));
  --btn-bg-2:var(--surface-2);
  --btn-bg-2h:var(--surface-3);

  /* ----- semantic status (dark-tuned; light overrides below) ----- */
  --ok:#7FE000; --warn:#E8BF4A; --bad:#FF6B6B;
  --green:#22c55e; --red:#ef4444; --blue:#60a5fa;

  /* ----- CreatorViz chart-kit ----- */
  --viz-track:color-mix(in srgb, var(--text) 8%, transparent);
  --viz-grid:color-mix(in srgb, var(--text) 8%, transparent);
  --viz-3:var(--ok); --viz-4:var(--blue); --viz-5:var(--warn); --viz-6:var(--muted);
}

/* ============================================================ SURFACES + TYPE TONE
   Matched to the mythox.ai website model (2026-06-25): neutral surfaces are shared
   per MODE (dark/light); each palette swaps ONLY the accent set. This replaces the
   old per-palette tinted surfaces so the app reads identically to the website. */
:root,
[data-mode="dark"]{
  --bg:#0A0B0D; --surface:#15161A; --surface-2:#1C1E22; --surface-3:#24262B;
  --border:rgba(255,255,255,.09);
  --text:#ECEDEF; --muted:rgba(236,237,239,.55);
  /* single soft glow in the bottom-right only; the website's top-left radial was
     dropped because the app's header sits top-left and it read as a light box. */
  --page-glow:radial-gradient(1200px 760px at 82% 94%, rgba(255,255,255,.045), transparent 60%);
  --h1-grad:linear-gradient(100deg,#9aa0a8 0%,#e9ecef 13%,#ffffff 25%,#c0c4cb 39%,#f3f5f7 51%,#ffffff 63%,#c7cbd2 77%,#aab0b8 90%,#eceef1 100%);
  --h1-shadow:0 4px 26px rgba(0,0,0,.55);
  --bg-lift:linear-gradient(180deg, var(--surface-2), var(--surface) 45%, var(--bg));
}
/* ---- per-palette accents (DARK) ---- */
:root,
[data-theme="green"] { --accent:#C6FF3F; --accent-2:#7FE000; --glow:rgba(198,255,63,.22); --ink-on-accent:#0A0D05; }
[data-theme="blue"]  { --accent:#4FC3FF; --accent-2:#1E9BE0; --glow:rgba(79,195,255,.20); --ink-on-accent:#04121C; }
[data-theme="mono"]  { --accent:#FAFAFA; --accent-2:#B7B8BD; --glow:rgba(255,255,255,.16); --ink-on-accent:#0A0A0B; }
[data-theme="yellow"]{ --accent:#C9A227; --accent-2:#E8BF4A; --glow:rgba(201,162,39,.20); --ink-on-accent:#0B0B0B; }

/* ============================================================ LIGHT MODE
   Shared light surfaces (website values). Light mode is deliberately FLAT - the
   flat-card/no-glow treatment lives in codex-redesign.css. Existing Light/Dark
   picker feature preserved. */
[data-mode="light"]{
  --bg:#FAFAF9; --surface:#FFFFFF; --surface-2:#F4F4F3; --surface-3:#ECECEA;
  --border:rgba(0,0,0,.09);
  --text:#0A0A0B; --muted:rgba(10,10,11,.55);
  --page-glow:radial-gradient(1100px 700px at 80% 92%, rgba(0,0,0,.02), transparent 60%);
  --h1-grad:linear-gradient(100deg,#2a2a31 0%,#5a5a64 14%,#1b1b21 27%,#46464f 41%,#75757f 53%,#26262d 66%,#54545e 80%,#1e1e24 93%,#3a3a42 100%);
  --h1-shadow:0 1px 2px rgba(0,0,0,.14);
  --bg-lift:none;
  --ivory-soft:color-mix(in srgb, var(--text) 78%, var(--bg));
  --dim:color-mix(in srgb, var(--text) 52%, var(--bg));
  /* status darkened so it reads on light surfaces */
  --green:#166534; --red:#991b1b; --blue:#1d4ed8; --warn:#78350f;
  --viz-track:color-mix(in srgb, var(--text) 12%, transparent);
  --viz-grid:color-mix(in srgb, var(--text) 11%, transparent);
}
/* ---- per-palette accents (LIGHT) ---- */
[data-theme="green"][data-mode="light"],
[data-mode="light"]:not([data-theme="blue"]):not([data-theme="mono"]):not([data-theme="yellow"]){
  --accent:#4FB400; --accent-2:#3B8C00; --glow:rgba(79,180,0,.18); --ink-on-accent:#FFFFFF;
}
[data-theme="blue"][data-mode="light"]{ --accent:#0E83C9; --accent-2:#0A6AA3; --glow:rgba(14,131,201,.16); --ink-on-accent:#FFFFFF; }
[data-theme="mono"][data-mode="light"]{ --accent:#0A0A0B; --accent-2:#3A3A3E; --glow:rgba(0,0,0,.07); --ink-on-accent:#FFFFFF; }
[data-theme="yellow"][data-mode="light"]{ --accent:#9A7A12; --accent-2:#7D6310; --glow:rgba(154,122,18,.16); --ink-on-accent:#FFFFFF; }

/* ============================================================ BASE */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
/* base canvas color lives on <html>; the living WebGL texture (#reis-bgfx,
   z-index:-1) renders over it and shows through the transparent body in all
   negative space. Surfaces/cards are opaque so they sit cleanly on top. */
html{ background:var(--bg); }
body{
  background:transparent;
  color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.58;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:auto;
}
/* CSS fallback when WebGL is unavailable: a soft drifting accent mesh */
html.reis-bgfx-css{
  background:
    radial-gradient(900px 600px at 18% 12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(800px 700px at 84% 78%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
@media (prefers-reduced-motion: no-preference){
  html.reis-bgfx-css{ animation:reisMeshDrift 24s ease-in-out infinite alternate; }
}
@keyframes reisMeshDrift{ from{background-position:0 0,0 0,0 0} to{background-position:6% 4%,-5% -3%,0 0} }
::selection{ background:color-mix(in srgb, var(--accent) 28%, transparent); color:var(--text); }
a{color:inherit; text-decoration:none}
button{font-family:inherit}

h1,h2,h3{
  font-family:var(--font-display); font-weight:600; line-height:1.05;
  margin:0; letter-spacing:-.02em;
}
h1{font-size:clamp(28px,4vw,44px); font-weight:700}
h2{font-size:clamp(22px,3vw,30px)}
h3{font-size:18px}
/* accent word in a headline = palette accent, no synthetic italic */
h1 em, h2 em, h3 em, .mark em{ font-style:normal; color:var(--accent); }
.mono{font-family:var(--font-body); font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.dim{color:var(--dim)}

/* ---- glowing "//" brand motif ---- */
.bars{ color:var(--accent); font-weight:700; letter-spacing:-1px;
  text-shadow:0 0 16px var(--glow); }
.reis-sign{ font-family:var(--font-display); font-weight:700; color:var(--accent);
  text-shadow:0 0 16px var(--glow); }
.twin-bar{display:inline-flex; gap:2px; align-items:center; color:var(--accent);
  font-weight:700; text-shadow:0 0 12px var(--glow)}
.twin-bar::before{ content:"//"; }
.kicker{
  font-family:var(--font-body); font-weight:600; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; gap:9px; align-items:center;
}
.kicker::before{ content:"//"; color:var(--accent); text-shadow:0 0 12px var(--glow); letter-spacing:-1px}

/* ---- diagonal divider ---- */
.diag{height:1px; border:0; margin:0;
  background:linear-gradient(99deg, transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent);
}

/* ============================================================ SIGNATURE COMPONENTS */
/* hover-glow / pop - interactive lift on buttons, cards, nav, tiles */
.glow-hover{ transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .3s var(--ease); }
.glow-hover:hover{ transform:translateY(-3px); box-shadow:0 10px 34px var(--glow); border-color:var(--accent); }

/* pill email-capture form + CTA */
.lead-form{ display:flex; gap:12px; padding:8px; max-width:520px; margin-inline:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:999px; }
.lead-form input{ flex:1; background:transparent; border:0; outline:0; color:var(--text);
  font-family:var(--font-body); font-size:1rem; padding:14px 20px; }
.lead-form input:focus{ box-shadow:none }
.lead-form button{ font-family:var(--font-body); font-weight:600; cursor:pointer; border:0;
  padding:14px 28px; border-radius:999px; background:var(--accent); color:var(--ink-on-accent);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.lead-form button:hover{ transform:translateY(-2px); box-shadow:0 8px 30px var(--glow); }

/* ============================================================ APP SHELL */
.app-shell{display:flex; flex-direction:row; min-height:100vh; min-height:100dvh; min-width:360px}

.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:22px;
  padding:14px clamp(16px,4vw,34px);
  background:var(--topbar-bg); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0}
.brand .mark{font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.02em}

.topbar .nav{display:flex; gap:4px; flex:1; overflow-x:auto; scrollbar-width:none}
.topbar .nav::-webkit-scrollbar{display:none}
.topbar .nav a{
  padding:8px 14px; border-radius:10px; font-size:14.5px; color:var(--muted);
  white-space:nowrap; transition:.2s var(--ease); border:1px solid transparent;
}
.topbar .nav a:hover{color:var(--text); background:var(--surface-2)}
.topbar .nav a.active{ color:var(--text); background:var(--surface-2); border-color:var(--gold-line); }
.topbar .nav a.active::before{content:"// "; color:var(--accent); letter-spacing:-1px}

.topbar .user{display:flex; align-items:center; gap:12px; flex-shrink:0}
.avatar{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-soft); color:var(--accent); font-family:var(--font-body);
  font-size:13px; font-weight:600; border:1px solid var(--gold-line);
}

/* content area */
.content{flex:1; width:100%; max-width:var(--max); margin:0 auto;
  padding:clamp(14px,2.4vw,24px) clamp(16px,4vw,34px) 64px;
}
.app-shell > .content{flex:1 1 auto; min-width:0}
.view-head{margin-bottom:24px}
.view-head h1{margin-top:8px}
.view-head .sub{color:var(--muted); margin-top:8px; max-width:64ch}

/* ============================================================ COMPONENTS */
.card{
  background:linear-gradient(180deg, var(--surface), var(--surface-grad-2));
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent), 0 18px 44px rgba(0,0,0,.42);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover{border-color:var(--gold-line);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent), 0 22px 52px rgba(0,0,0,.5), 0 0 34px -10px var(--glow);
}
a.card:hover{transform:translateY(-3px)}
.card + .card{margin-top:16px}
.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}

/* ---- buttons ----
   .btn = neutral surface w/ accent-line lift; .btn-gold = solid accent pill. */
.btn,.btn-gold{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  padding:11px 20px; border-radius:11px; font-size:14.5px; font-weight:600; letter-spacing:.005em;
  background:linear-gradient(180deg, var(--surface-2), var(--btn-bg-2)); color:var(--text);
  border:1px solid var(--line-2);
  transition:transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover{ background:linear-gradient(180deg, var(--surface-3), var(--btn-bg-2h));
  border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 30px var(--glow); }
.btn:active{transform:translateY(0)}
.btn-gold{
  position:relative; color:var(--ink-on-accent); border:1px solid transparent; font-weight:700;
  background:linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 6px 18px -6px var(--glow);
}
.btn-gold:hover{ transform:translateY(-2px); filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 12px 34px -6px var(--glow); }
.btn-gold:active{transform:translateY(0)}
.btn:disabled,.btn-gold:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}

.chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.04em;
  background:var(--gold-soft); color:var(--accent); border:1px solid var(--gold-line);
}

.progress{height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden}
.progress > span{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .5s var(--ease);
}

.chart-wrap{position:relative; width:100%; height:280px}
.chart-wrap canvas{max-width:100%}

label.field{display:block; margin-bottom:14px}
label.field > span{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px;
  font-family:var(--font-body); font-weight:600; letter-spacing:.03em}
input,select,textarea{
  width:100%; padding:11px 13px; border-radius:10px; font-family:inherit; font-size:14px;
  background:var(--surface); color:var(--text); border:1px solid var(--line-2); outline:none;
  transition:.2s var(--ease);
}
input:focus,select:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--gold-soft)}

/* ============================================================ LOGIN GATE */
.login-screen{
  min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px;
  /* transparent base so the living texture shows behind the login card */
  background:radial-gradient(900px 520px at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
}
/* Boot splash - shown for a returning (cached-session) user while auth + the MFA gate
   restore in the background, so they never see a blank/login flash before the app appears.
   z-index sits below the MFA challenge overlay (9999) so a 2FA prompt still shows on top. */
#boot-splash{position:fixed; inset:0; z-index:9990; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--bg); opacity:1; transition:opacity .22s ease}
#boot-splash.boot-splash-out{opacity:0; pointer-events:none}
#boot-splash .boot-splash-mark{font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:44px; letter-spacing:-2px; color:var(--accent)}
#boot-splash .boot-splash-spin{width:26px; height:26px; border-radius:50%; border:2.5px solid var(--surface-3); border-top-color:var(--accent); animation:boot-splash-rot .7s linear infinite}
@keyframes boot-splash-rot{to{transform:rotate(360deg)}}
.login-card{
  width:100%; max-width:420px; text-align:center;
  background:linear-gradient(180deg, var(--surface), var(--surface-grad-2));
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:40px 32px; box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.login-card .bars{font-size:26px; display:block; margin-bottom:12px}
.login-card h1{font-size:32px; margin-bottom:4px; letter-spacing:-.03em}
.login-card .tag{color:var(--muted); font-size:13px; margin-bottom:28px}
.login-card form{text-align:left}
.login-card .btn-gold{width:100%; justify-content:center; margin-top:8px}
.login-card .switch{margin-top:18px; font-size:13px; color:var(--muted)}
.login-card .switch a{color:var(--accent); cursor:pointer}
.login-card .err{color:var(--bad); font-size:12.5px; min-height:18px; margin-top:8px; text-align:center}
.login-card .note{color:var(--accent); font-size:12.5px; margin-top:8px; text-align:center; line-height:1.5}
.oauth-sep{display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--muted); font-size:12px}
.oauth-sep::before,.oauth-sep::after{content:""; flex:1; height:1px; background:var(--border)}
.oauth-row{display:flex; flex-direction:column; gap:10px}
.btn-oauth{width:100%; justify-content:center; display:inline-flex; align-items:center; gap:8px;
  padding:11px 14px; border-radius:var(--radius); cursor:pointer;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  font-family:inherit; font-size:13.5px; font-weight:600;
  transition:border-color .15s var(--ease), background .15s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)}
.btn-oauth:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 26px var(--glow)}

/* ============================================================ TOAST */
#toast-host{position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{
  pointer-events:auto; padding:11px 18px; border-radius:10px; font-size:13.5px;
  background:var(--surface-3); color:var(--text); border:1px solid var(--gold-line);
  box-shadow:0 14px 36px rgba(0,0,0,.5); opacity:0; transform:translateY(10px);
  transition:.3s var(--ease);
}
.toast.show{opacity:1; transform:translateY(0)}

/* ============================================================ MAC APP UPDATE BUTTON
   Sits in the sidebar account row, left of the gear. It only exists on screen
   when a new Mac version is actually published (shell.js unhides it), so it is
   never chrome the user has to look past. It is a single arrow the width of the
   gear; hovering or focusing it opens a small panel above it.
   Every colour is an accent token, so it follows whichever palette and light or
   dark mode the user picked, with no colour of its own.

   The panel FLOATS instead of widening the button. Widening pushed the gear and
   Log out along and shoved Log out out of the row, and a row that jumps under
   the mouse is worse than no button. */
.sb-update{
  position:relative;
  flex:0 0 auto; display:inline-grid; place-items:center;
  width:30px; height:30px; padding:0;
  border:1px solid var(--gold-line); border-radius:8px;
  background:var(--gold-soft); color:var(--accent);
  cursor:pointer;
  transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.sb-update[hidden]{display:none}
.sb-update-ic{display:grid; place-items:center}
.sb-update-ic svg{width:15px; height:15px; display:block}
/* the ring needs !important: codex-redesign.css strips box-shadow from every
   button in both modes, and the ring is also the keyboard focus indicator */
.sb-update:hover, .sb-update:focus-visible{
  background:var(--accent); border-color:var(--accent); color:var(--ink-on-accent);
  box-shadow:0 0 0 3px var(--glow)!important; outline:none;
}
/* the little panel that opens when the mouse is on it */
.sb-update-tx{
  position:absolute; left:50%; bottom:calc(100% + 8px); z-index:60;
  transform:translateX(-50%) translateY(4px);
  padding:6px 11px; border-radius:9px;
  border:1px solid var(--gold-line);
  background:var(--surface-3); color:var(--text);
  font-family:var(--font-body); font-size:12px; font-weight:650; white-space:nowrap;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition:opacity .16s var(--ease), transform .16s var(--ease);
}
.sb-update:hover .sb-update-tx,
.sb-update:focus-visible .sb-update-tx,
.sb-update.is-working .sb-update-tx{opacity:1; transform:translateX(-50%) translateY(0)}
/* while it installs: locked on, label pinned open, arrow breathing */
.sb-update.is-working{
  cursor:progress;
  background:var(--accent); border-color:var(--accent); color:var(--ink-on-accent);
}
.sb-update.is-working .sb-update-ic{animation:sb-update-pulse 1s var(--ease) infinite}
@keyframes sb-update-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .sb-update, .sb-update-tx{transition:none}
  .sb-update.is-working .sb-update-ic{animation:none}
}

/* sync status dot */
.sync-dot{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:11px; color:var(--muted)}
.sync-dot i{width:8px; height:8px; border-radius:50%; background:var(--dim); display:block; transition:.3s var(--ease)}
.sync-dot.ok i{background:var(--ok); box-shadow:0 0 8px color-mix(in srgb, var(--ok) 60%, transparent)}
.sync-dot.saving i{background:var(--accent); box-shadow:0 0 8px var(--glow)}
.sync-dot.off i{background:var(--bad)}

/* ============================================================ LEFT SIDEBAR */
.sidebar{
  position:sticky; top:0; align-self:flex-start; z-index:40;
  width:248px; flex-shrink:0; height:100vh;
  display:flex; flex-direction:column;
  padding:18px 14px;
  background:var(--topbar-bg); backdrop-filter:blur(14px);
  border-right:1px solid var(--border);
}
.sb-brand{display:flex; align-items:center; gap:10px; padding:6px 8px 16px}
.sb-brand .mark{font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-.02em}
.sb-brand .bars{font-size:18px}

.sidebar .nav{display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none}
.sidebar .nav::-webkit-scrollbar{display:none}
.sidebar .nav a{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:11px; font-size:14.5px; color:var(--muted);
  border:1px solid transparent; transition:.18s var(--ease); white-space:nowrap;
}
.sidebar .nav a .ic{width:18px; height:18px; flex-shrink:0; opacity:.8; transition:.18s var(--ease)}
.sidebar .nav a:hover{color:var(--text); background:var(--surface-2)}
.sidebar .nav a:hover .ic{opacity:1}
.sidebar .nav a.active{color:var(--text); background:var(--surface-2); border-color:var(--gold-line)}
.sidebar .nav a.active .ic{color:var(--accent); opacity:1}
/* M6 / walkthrough - COLLAPSIBLE zone groups in the grouped sidebar nav.
   The zone header is a button; clicking it folds the zone (state persisted). */
.sidebar .nav .nav-zone-group{display:flex; flex-direction:column}
.sidebar .nav .nav-zone{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  font-family:var(--font-body); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--dim); background:none; border:0; cursor:pointer; text-align:left;
  padding:14px 12px 6px; transition:color .18s var(--ease);
}
.sidebar .nav .nav-zone:hover{color:var(--muted)}
.sidebar .nav .nav-chev{width:13px; height:13px; flex-shrink:0; opacity:.65; transition:transform .22s var(--ease), opacity .18s var(--ease)}
.sidebar .nav .nav-zone:hover .nav-chev{opacity:1}
.sidebar .nav .nav-zone-group.collapsed .nav-chev{transform:rotate(-90deg)}
/* fold via grid-rows so it animates cleanly with dynamic content */
.sidebar .nav .nav-zone-items{display:grid; grid-template-rows:1fr; transition:grid-template-rows .22s var(--ease)}
.sidebar .nav .nav-zone-group.collapsed .nav-zone-items{grid-template-rows:0fr}
.sidebar .nav .nav-zone-inner{overflow:hidden; min-height:0; display:flex; flex-direction:column; gap:3px}
/* renamed-item plain-English descriptor under the strong name */
.sidebar .nav a .nav-label{display:flex; flex-direction:column; line-height:1.12; min-width:0}
.sidebar .nav a .nav-desc{font-size:10px; font-weight:500; letter-spacing:.01em; color:var(--dim); margin-top:1px; text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* non-clickable group divider inside a zone (Growth: Daily / Reflect / Direction) */
.sidebar .nav .nav-divider{font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); opacity:.75; padding:8px 12px 2px; user-select:none}

.sb-foot{display:flex; flex-direction:column; gap:14px; padding-top:14px; margin-top:auto; border-top:1px solid var(--border)}
/* Settings pinned in the sidebar foot, directly above Notifications - never scrolls (Reis lock 2026-06-14) */
.sb-settings{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; font-size:14.5px; color:var(--muted); border:1px solid transparent; transition:.18s var(--ease); white-space:nowrap; text-decoration:none}
.sb-settings .ic{width:18px; height:18px; flex-shrink:0; opacity:.8; transition:.18s var(--ease)}
.sb-settings:hover{color:var(--text); background:var(--surface-2)}
.sb-settings:hover .ic{opacity:1}
.sb-settings.active{color:var(--text); background:var(--surface-2); border-color:var(--gold-line)}
.sb-settings.active .ic{color:var(--accent); opacity:1}
.sb-appearance .appr-row{gap:8px}
.sb-appearance .appr-sw{min-width:0; flex:1; padding:8px 6px}
.sb-appearance .appr-name{font-size:11px}
.sb-appearance .appr-modes{margin-top:10px}
.sb-appearance .appr-mode{padding:7px 10px; font-size:12.5px; flex:1; text-align:center}
.sb-user{display:flex; align-items:center; gap:8px}
.sb-user .avatar{cursor:pointer; padding:0; flex-shrink:0; -webkit-appearance:none; appearance:none}
.sb-user .avatar.has-photo{background-size:cover; background-position:center; color:transparent; font-size:0}
.sb-user .btn{padding:6px 10px; font-size:12.5px}
.sb-user .sync-dot{font-size:0; flex-shrink:0}
.sb-gear{margin-left:auto; display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; color:var(--muted); border:1px solid transparent; border-radius:10px; transition:.18s var(--ease); text-decoration:none}
.sb-gear svg{width:17px; height:17px}
.sb-gear:hover{color:var(--text); background:var(--surface-2)}
.sb-gear.active{color:var(--accent); background:var(--surface-2); border-color:var(--gold-line)}

/* sidebar credits meter - always-visible, above the user row; click → Settings */
.sb-credits{display:block; text-decoration:none; cursor:pointer}
.sb-credits-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.sb-credits-lab{font-family:var(--font-body); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.sb-credits-top strong{font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--text); letter-spacing:-.01em}
.sb-credits-bar{display:block; height:3px; margin-top:7px; border-radius:99px; background:var(--surface-3); overflow:hidden}
.sb-credits-bar i{display:block; height:100%; width:0; border-radius:99px; background:var(--accent); transition:width .4s var(--ease)}
.sb-credits:hover .sb-credits-lab{color:var(--text)}
.sb-credits.low .sb-credits-bar i{background:var(--bad)}
.sb-credits.low .sb-credits-top strong{color:var(--bad)}
/* Flat "buy more credits" entry point under the sidebar credits meter (item 17). */
.sb-buy{display:block; width:calc(100% - 24px); margin:8px 12px 4px; padding:7px 10px; font-family:var(--font-body); font-size:11.5px; font-weight:600; letter-spacing:.01em; color:var(--muted); background:none; border:1px solid var(--border); border-radius:9px; cursor:pointer; text-align:center; transition:color .12s var(--ease), border-color .12s, background .12s}
.sb-buy:hover{color:var(--text); border-color:var(--accent); background:var(--surface-2)}
/* Tabs-to-dropdown (item 10): each tab strip becomes this premium trigger + a menu that
   floats down (same animation + look as the #money-pop $ popover). */
.cos-tabdd{ display:inline-flex; align-items:center; justify-content:space-between; gap:14px;
  /* stay compact even when the parent is a flex/grid that stretches its children */
  align-self:flex-start; justify-self:start; width:fit-content; min-width:170px; max-width:min(100%,280px); margin:0 0 16px;
  font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:9px 13px 9px 14px;
  cursor:pointer; outline:none; transition:border-color .15s var(--ease), background .15s var(--ease); }
.cos-tabdd:hover{ border-color:var(--accent); }
.cos-tabdd:focus-visible{ border-color:var(--accent); box-shadow:0 0 0 3px var(--gold-soft); }
.cos-tabdd-lbl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cos-tabdd-tic{ display:inline-flex; color:var(--muted); transition:color .15s var(--ease); flex:0 0 auto; }
.cos-tabdd:hover .cos-tabdd-tic{ color:var(--accent); }
/* the floating menu (mirrors #money-pop: fade + slide-down + slight scale, premium card) */
.cos-tabdd-menu{ position:fixed; z-index:120; opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top left;
  pointer-events:none; transition:opacity .18s var(--ease), transform .18s var(--ease); }
.cos-tabdd-menu.open{ opacity:1; transform:none; pointer-events:auto; }
.cos-tabdd-card{ background:color-mix(in srgb, var(--surface) 92%, transparent); border:1px solid var(--border); border-radius:14px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 20px 50px rgba(0,0,0,.42); padding:6px; max-height:60vh; overflow-y:auto; }
.cos-tabdd-opt{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left;
  font-family:var(--font-body); font-size:13.5px; font-weight:500; color:var(--text); background:none; border:0; border-radius:9px;
  padding:9px 12px; cursor:pointer; transition:background .12s var(--ease), color .12s var(--ease); }
.cos-tabdd-opt:hover{ background:var(--surface-2); }
.cos-tabdd-opt.is-on{ color:var(--accent); }
.cos-tabdd-optck{ display:inline-flex; color:var(--accent); flex:0 0 auto; }

/* Collapsible "Your status" panel: Notifications + Progress + Credits in one container.
   Collapsed by default; click the header to expand; auto-collapses (shell.js) after a
   few seconds with no hover. */
.sb-panel{border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.026); overflow:hidden}
.sb-panel-head{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:9px 12px; background:none; border:0; cursor:pointer; color:var(--text); font:inherit; text-align:left; -webkit-appearance:none; appearance:none}
.sb-panel-title{font-family:var(--font-body); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.sb-panel-head:hover .sb-panel-title{color:var(--text)}
.sb-panel-meta{display:flex; align-items:center; gap:7px}
.sb-panel-bell{display:grid; place-items:center; color:var(--muted)}
.sb-panel-bell svg{width:15px; height:15px}
.sb-panel-crit{width:9px; height:9px; border-radius:50%; background:var(--bad); box-shadow:0 0 8px color-mix(in srgb, var(--bad) 65%, transparent)}
.sb-panel-count{display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 5px; border-radius:999px; font-family:var(--mono); font-size:9.5px; color:var(--ink-on-accent); background:var(--accent)}
.sb-panel-chev{display:grid; place-items:center; color:var(--dim); transition:transform .22s var(--ease)}
.sb-panel-chev svg{width:14px; height:14px}
.sb-panel.open .sb-panel-chev{transform:rotate(180deg)}
.sb-panel-body{max-height:0; overflow:hidden; transition:max-height .26s var(--ease)}
.sb-panel.open .sb-panel-body{max-height:min(440px,56vh); overflow-y:auto}
/* rows inside the panel: tight, hairline-separated, not separate cards */
.sb-panel .sb-notifs, .sb-panel .sb-progress, .sb-panel .sb-credits{border:0!important; border-radius:0!important; background:none!important; border-top:1px solid var(--border)!important; padding:10px 12px; margin:0}

/* sidebar progress meter - sibling of the credits meter; click → Progress panel.
   Reuses the .sb-credits-* inner layout classes so the two meters match exactly. */
.sb-progress{display:block; text-decoration:none; cursor:pointer}
.sb-progress:hover .sb-credits-lab{color:var(--text)}
.sb-progress-sub{display:block; margin-top:5px; font-family:var(--font-body); font-size:10.5px; font-weight:500; color:var(--muted); letter-spacing:.01em}

/* sidebar Notifications button - sibling ABOVE the Progress pill (#8c). Reuses the
   .sb-credits-* inner layout so the sidebar-foot buttons line up identically. */
.sb-notifs{display:block; text-decoration:none; cursor:pointer}
.sb-notifs:hover .sb-credits-lab{color:var(--text)}
.sb-notifs-dot{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--accent); color:var(--ink-on-accent,#0A0D05); font-family:var(--font-body); font-size:11px; font-weight:800; line-height:1}
.sb-notifs-sub{display:block; margin-top:5px; font-family:var(--font-body); font-size:10.5px; font-weight:500; color:var(--muted); letter-spacing:.01em}

/* notifications panel content (#8c) - rendered inside the shared .prog-panel slide-over */
.notif-list{display:flex; flex-direction:column; gap:10px}
/* collapsible categories */
.notif-cats{display:flex; flex-direction:column; gap:16px}
.notif-cat{display:flex; flex-direction:column; gap:10px}
.notif-cat-head{display:flex; align-items:center; gap:8px; width:100%; padding:4px 2px; background:none; border:0; cursor:pointer; color:var(--muted); text-align:left; font-family:var(--font-display, inherit)}
.notif-cat-chev{font-size:11px; line-height:1; transition:transform .16s var(--ease); color:var(--dim)}
.notif-cat.collapsed .notif-cat-chev{transform:rotate(-90deg)}
.notif-cat-label{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.notif-cat-crit{flex:none; min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; background:rgba(239,68,68,.14); color:#ef4444}
.notif-cat-count{margin-left:auto; flex:none; font-size:11px; font-weight:700; color:var(--dim)}
.notif-cat-body{display:flex; flex-direction:column; gap:10px}
.notif-cat.collapsed .notif-cat-body{display:none}
/* one notification = a deep-link row + a dismiss button */
.notif-item{position:relative; display:flex; align-items:stretch; border-radius:14px; background:var(--surface); border:1px solid var(--border); overflow:hidden; transition:transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease)}
.notif-item:hover{border-color:var(--accent); transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.28)}
.notif-row{flex:1; min-width:0; display:flex; align-items:flex-start; gap:12px; padding:14px; text-decoration:none; color:var(--text)}
.notif-ic{flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; background:var(--surface-2); color:var(--muted)}
.notif-alert .notif-ic{background:rgba(239,68,68,.12); color:#ef4444}
.notif-txt{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.notif-t{font-family:var(--font-body); font-size:13.5px; font-weight:700; letter-spacing:-.01em; line-height:1.25}
.notif-s{font-size:12px; color:var(--muted); line-height:1.35}
.notif-go{flex:none; align-self:center; color:var(--dim); font-size:20px; line-height:1}
.notif-item:hover .notif-go{color:var(--accent)}
.notif-dismiss{flex:none; width:36px; align-self:stretch; background:none; border:0; border-left:1px solid var(--border); color:var(--dim); font-size:18px; line-height:1; cursor:pointer; transition:background .16s var(--ease), color .16s var(--ease)}
.notif-dismiss:hover{background:var(--surface-2); color:var(--text)}
.notif-empty{text-align:center; padding:48px 20px; color:var(--muted)}
.notif-empty-ic{display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:rgba(198,255,63,.12); color:var(--accent); font-size:22px; font-weight:800; margin-bottom:12px}
.notif-empty p{margin:0; font-size:14px}

/* ── Progress slide-over panel (folds in the old Insights detail) ───────────── */
.prog-overlay{position:fixed; inset:0; z-index:200; display:flex; justify-content:flex-end; opacity:0; pointer-events:none; transition:opacity .2s var(--ease)}
.prog-overlay.open{opacity:1; pointer-events:auto}
.prog-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.prog-panel{position:relative; width:min(560px,94vw); max-width:94vw; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--bg); border-left:1px solid var(--border); box-shadow:-24px 0 60px rgba(0,0,0,.35); transform:translateX(28px); transition:transform .24s var(--ease); padding:22px 22px 44px}
.prog-overlay.open .prog-panel{transform:translateX(0)}
.prog-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px}
.prog-head h2{margin:4px 0 0; font-size:24px; letter-spacing:-.02em}
.prog-x{flex:none; width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:20px; line-height:1; cursor:pointer}
.prog-x:hover{background:var(--surface-3)}
/* fit the detail into the narrower panel (the page-width media queries don't fire here).
   The ring host is clamp(120px,18vw,150px); 18vw resolves against the full viewport, so
   three full-size cards overflow the 560px panel - pin them small here so 3-up fits. */
.prog-body .grid.cols-2{grid-template-columns:1fr}
.prog-body .ins-rings{gap:10px}
.prog-body .ins-ring-card{padding:16px}
.prog-body .ins-ring-host{width:112px; min-width:0}
/* the radar svg fills its host (width:100%); cap + centre it so the axis labels
   (Pillars / Finances / Goals) don't clip against the panel edge */
.prog-body .ins-radar-host .viz-svg{max-width:300px; margin:0 auto}
.ins-ach-toggle{margin-top:8px; width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer}
.ins-ach-toggle:hover{background:var(--surface-3)}

/* mobile appbar + slide-in drawer */
.appbar{display:none}
.appbar-burger{display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
  width:40px; height:40px; padding:9px 8px; border-radius:10px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line-2)}
.appbar-burger span{display:block; height:2px; border-radius:2px; background:var(--text)}
.nav-backdrop[hidden]{display:none}

@media (max-width:900px){
  :root{--topbar-h:60px}
  .app-shell{flex-direction:column}
  .appbar{display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:45;
    padding:11px 16px; background:var(--topbar-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(--border)}
  /* hide hamburger - bottom nav has a More button that opens the drawer instead */
  .appbar-burger{display:none}
  .sidebar{position:fixed; top:0; left:0; height:100vh; width:min(82vw,300px); z-index:60;
    transform:translateX(-100%); transition:transform .25s var(--ease)}
  .sidebar.open{transform:none; box-shadow:0 0 60px rgba(0,0,0,.55)}
  .nav-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55; display:block}
}

@media (max-width:760px){
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
  .topbar{gap:12px; flex-wrap:wrap}
  .topbar .nav{order:3; flex:1 1 100%; width:100%; padding-bottom:2px; -webkit-overflow-scrolling:touch}
}

/* Mobile fix (2026-06-20): the floating AI dock + feedback button sit at the
   bottom-right and were covering the last row of page content. Give the content
   column clearance so nothing hides behind them. */
@media (max-width:900px){
  /* 64px bottom bar + 16px gap + env(safe-area-inset-bottom) handled in the bar itself;
     96px clears both the bar and the floating AI dock that may also be visible */
  .content{padding-bottom:160px}
}
/* Mobile fix (2026-06-20, + Codex): hide the floating dock + feedback button while
   ANY blocking layer is open (nav drawer, chat sheet, progress/notifications panel,
   onboarding/guided tour, or the feedback modal) so they never float over them. */
body:has(.sidebar.open) #ai-dock-fab,
body:has(.sidebar.open) #mythox-fb-btn,
body:has(.prog-overlay.open) #ai-dock-fab,
body:has(.prog-overlay.open) #mythox-fb-btn,
body:has(.cg-overlay:not([hidden])) #ai-dock-fab,
body:has(.cg-overlay:not([hidden])) #mythox-fb-btn,
body:has(#mythox-fb-overlay.open) #ai-dock-fab,
body:has(#ai-dock-panel.open) #mythox-fb-btn{display:none!important}

/* FIX 1 (2026-06-21): shift floating buttons above the bottom nav bar on mobile.
   Bar is ~64px tall; add 72px so both buttons clear it comfortably.
   The !important overrides the specificity from ai-dock.css and feedback.js inline styles.
   The existing display:none rules above still take precedence when a drawer is open. */
@media (max-width:900px){
  #ai-dock-fab{bottom:calc(16px + 72px)!important}
  #mythox-fb-btn{bottom:calc(30px + 72px)!important}
}
@media (max-width:640px){
  #mythox-fb-btn{bottom:calc(22px + 72px)!important}
}

/* FIX 2b (2026-06-21): hide the bottom nav when the authed shell is not yet visible
   (i.e. the user is on the login gate). The bar is appended inside #app-shell so it
   inherits that element's [hidden] state, but this CSS guard adds a belt-and-suspenders
   layer in case the bar ever ends up outside the shell for any reason. */
body:has(#app-shell[hidden]) #mobile-bottom-nav{display:none}

/* ---- Mobile liquid-glass bottom navigation bar ---- */
#mobile-bottom-nav{display:none}
@media (max-width:900px){
  #mobile-bottom-nav{
    display:flex;
    position:fixed;
    bottom:0; left:0; right:0;
    z-index:44;
    align-items:stretch;
    padding-bottom:env(safe-area-inset-bottom);
    background:color-mix(in srgb, var(--surface) 65%, transparent);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
    border-top:1px solid var(--border);
    box-shadow:0 -4px 24px rgba(0,0,0,.35);
    /* needed so the absolutely-positioned indicator anchors to the bar */
    position:fixed;
  }
  /* hide the bar while the sidebar drawer is open so it doesn't peek under it */
  body:has(.sidebar.open) #mobile-bottom-nav{display:none}
  #mobile-bottom-nav a,
  #mobile-bottom-nav button.mbn-more{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:10px 4px 10px;
    color:var(--muted);
    text-decoration:none;
    font-family:var(--font-body);
    font-size:10px;
    font-weight:500;
    letter-spacing:.02em;
    line-height:1;
    border:none;
    background:transparent;
    cursor:pointer;
    transition:color .18s var(--ease), transform .12s var(--ease), font-weight .18s var(--ease);
    -webkit-tap-highlight-color:transparent;
    outline:none;
    border-radius:0;
    position:relative;
    z-index:1;
  }
  /* sliding active indicator pill - sits behind all tabs.
     Neutral frosted-glass capsule: the active ICON stays accent; the pill is light glass. */
  #mobile-bottom-nav .mbn-indicator{
    position:absolute;
    top:6px;
    bottom:6px;
    left:0;
    width:0;
    border-radius:12px;
    background:color-mix(in srgb, var(--text) 14%, transparent);
    border-top:1.5px solid color-mix(in srgb, var(--text) 22%, transparent);
    box-shadow:0 0 12px color-mix(in srgb, var(--text) 8%, transparent),
               inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
    pointer-events:none;
    z-index:0;
    opacity:0;
    transition:transform .34s cubic-bezier(.22,1,.36,1), width .34s cubic-bezier(.22,1,.36,1), opacity .2s ease;
  }
  /* drag state: pill grabs and stretches with the finger */
  #mobile-bottom-nav.mbn-dragging .mbn-indicator{
    transition:transform .08s cubic-bezier(.22,1,.36,1), width .08s cubic-bezier(.22,1,.36,1), opacity .2s ease;
  }
  /* press effect: scale down slightly on tap */
  #mobile-bottom-nav a:active,
  #mobile-bottom-nav button.mbn-more:active{
    transform:scale(.9);
  }
  /* active tab: lime accent glow on icon + label */
  #mobile-bottom-nav a.active{
    color:var(--accent);
    font-weight:600;
  }
  #mobile-bottom-nav a.active svg{
    filter:drop-shadow(0 0 6px var(--glow));
  }
  /* "More" button - subtle indicator when drawer route is active */
  #mobile-bottom-nav button.mbn-more{
    color:var(--muted);
  }
  #mobile-bottom-nav button.mbn-more.mbn-more-active{
    color:var(--accent);
  }
  /* drag-hover: item nearest the finger gets a preview accent tint */
  #mobile-bottom-nav a.mbn-drag-hover,
  #mobile-bottom-nav button.mbn-more.mbn-drag-hover{
    color:var(--accent);
  }
  /* icon sizing inside the bottom bar */
  #mobile-bottom-nav .ic{
    width:22px; height:22px;
    flex-shrink:0;
  }
  /* label text below the icon */
  #mobile-bottom-nav .mbn-label{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:60px;
  }
}

/* ---- Appearance picker (Settings) - minimalist: small palette pills + icon mode toggle ---- */
.appr-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.appr-sw{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:6px 11px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--surface-2); transition:.16s var(--ease); min-width:0;
}
.appr-sw:hover{border-color:var(--accent); transform:translateY(-1px)}
.appr-sw.sel{border-color:var(--accent); box-shadow:0 0 0 2px var(--gold-soft)}
.appr-dot{width:15px; height:15px; border-radius:50%; border:1px solid rgba(255,255,255,.2)}
.appr-name{font-size:11.5px; font-weight:600; color:var(--muted)}
.appr-sw.sel .appr-name{color:var(--text)}
.appr-modes{display:inline-flex; gap:6px; margin-top:14px}
.appr-mode{
  width:38px; height:34px; padding:0; border-radius:10px; display:grid; place-items:center;
  cursor:pointer; font-size:16px; line-height:1;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line-2); transition:.16s var(--ease);
}
.appr-mode:hover{border-color:var(--accent); color:var(--accent)}
.appr-mode.sel{background:var(--gold-soft); color:var(--accent); border-color:var(--gold-line)}

/* ============================================================ LIVING BACKGROUND + // THEME SWITCHER */
/* Flowing domain-warped noise texture rendered by cursorfx.js. Sits behind all
   content; ripples under the cursor + a soft accent light follows the cursor. */
#reis-bglift{position:fixed; inset:0; pointer-events:none; z-index:-2; transform:translateZ(0); background:var(--bg-lift)}
#reis-bgfx{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; display:block; transform:translateZ(0); will-change:transform}

#reis-theme-toggle, #reis-mode-toggle, #reis-money-toggle, #reis-credits-toggle, #reis-feedback-toggle{
  position:fixed; top:18px; z-index:70; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border); background:color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter:blur(8px); cursor:pointer; display:grid; place-items:center; line-height:1;
  font-family:var(--font-display); font-weight:700;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .3s var(--ease), color .2s var(--ease);
}
#reis-theme-toggle{ right:18px; color:var(--accent); font-size:15px; letter-spacing:-1px; text-shadow:0 0 12px var(--glow); }
#reis-mode-toggle{ right:66px; color:var(--muted); font-size:16px; }
#reis-money-toggle{ right:114px; color:var(--accent); font-size:16px; font-weight:800; }
#reis-credits-toggle{ right:162px; color:var(--accent); }
#reis-feedback-toggle{ right:210px; color:var(--muted); }
#reis-theme-toggle:hover, #reis-mode-toggle:hover, #reis-money-toggle:hover, #reis-credits-toggle:hover, #reis-feedback-toggle:hover{ transform:translateY(-2px); box-shadow:0 10px 30px var(--glow); border-color:var(--accent); }
#reis-mode-toggle:hover, #reis-feedback-toggle:hover{ color:var(--accent); }

/* Page-1 #8e: the money quick-glance pop-up (under #reis-money-toggle). */
#money-pop{ position:fixed; top:66px; right:18px; z-index:75; width:248px; opacity:0;
  transform:translateY(-8px) scale(.98); transform-origin:top right; pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease); }
#money-pop.open{ opacity:1; transform:none; pointer-events:auto; }
#money-pop .mp-card{ background:color-mix(in srgb, var(--surface) 92%, transparent); border:1px solid var(--border);
  border-radius:16px; backdrop-filter:blur(14px); box-shadow:0 20px 50px rgba(0,0,0,.42); padding:14px 16px 16px; }
.mp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mp-vals{ display:flex; flex-direction:column; }
.mp-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid var(--border); }
.mp-row:last-child{ border-bottom:0; }
.mp-k{ font-size:12px; color:var(--muted); }
.mp-v{ font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:-.02em; }
.mp-empty{ text-align:center; padding:6px 2px 2px; }
.mp-empty p{ font-size:12.5px; color:var(--muted); margin:0 0 12px; }

/* ============================================================
   CreatorViz - SVG chart kit
   ============================================================ */
.viz{position:relative; display:inline-flex; align-items:center; justify-content:center; vertical-align:top}
.viz-svg{display:block; width:100%; height:auto; overflow:visible}
.viz-ring,.viz-gauge,.viz-radar,.viz-donut{line-height:0}
.viz-ring-center,.viz-gauge-center{
  position:absolute; left:0; right:0; top:0; bottom:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; text-align:center; gap:1px; line-height:1.15;
}
.viz-gauge-center{justify-content:flex-end; padding-bottom:4%}
.viz-ring-val{font-family:var(--font-display); font-weight:700; font-size:clamp(18px,4.4vw,26px); color:var(--text); letter-spacing:-.01em}
.viz-ring-lbl{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--muted)}
.viz-axis-lbl{font-family:var(--font-body); font-size:10.5px; font-weight:600; fill:var(--muted); letter-spacing:.02em}
.viz-particles{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:0}
.viz-particles-host{position:relative}
.viz-particles-host > :not(.viz-particles){position:relative; z-index:1}
@media (prefers-reduced-motion: reduce){ .viz-svg *{transition:none !important} }

/* ============================================================
   Insights page (5.5-E) - gamified dashboard. All tokens.
   ============================================================ */
.ins-hero{position:relative; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:22px;
  border:1px solid var(--border); background:linear-gradient(180deg, var(--surface), var(--surface-grad-2));
  padding:clamp(22px,4vw,38px)}
.ins-hero-in{position:relative; z-index:1}
.ins-hero h1{margin:8px 0 6px}
.ins-hero .sub{color:var(--muted); max-width:60ch}

.ins-rings{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px}
.ins-ring-card{display:flex; flex-direction:column; align-items:center; gap:12px; padding:22px}
.ins-ring-host{width:clamp(120px,18vw,150px)}
.ins-ring-cap{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); text-align:center}

.ins-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px}
.ins-stat{background:linear-gradient(180deg, var(--surface), var(--surface-grad-2)); border:1px solid var(--border);
  border-radius:16px; padding:18px 20px}
.ins-stat-val{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,4vw,34px); color:var(--accent); letter-spacing:-.02em}
.ins-stat-lbl{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:4px}
.ins-stat-sub{font-size:11.5px; color:var(--dim); margin-top:2px}

.ins-card{margin-bottom:18px}
.ins-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.ins-head h3{margin:0}
.ins-sub{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; margin:18px 0 8px}

.ins-week{display:grid; grid-template-columns:repeat(7,1fr); gap:10px}
.ins-day{display:flex; flex-direction:column; align-items:center; gap:7px}
.ins-day-dot{width:100%; aspect-ratio:1; max-width:46px; border-radius:13px; background:var(--surface-3);
  border:1px solid var(--border); transition:.3s var(--ease)}
.ins-day.on .ins-day-dot{background:linear-gradient(160deg, var(--accent-2), var(--accent)); border-color:var(--gold-line);
  box-shadow:0 0 18px -4px var(--glow)}
.ins-day-lbl{font-size:11px; font-weight:700; color:var(--muted)}

.ins-grid{display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:1fr; gap:5px; max-width:420px}
.ins-cell{display:block; aspect-ratio:1; border-radius:4px; background:var(--surface-3); border:1px solid var(--border)}
.ins-cell.on{background:linear-gradient(160deg, var(--accent-2), var(--accent)); border-color:var(--gold-line)}
.ins-cell.today{outline:1.5px solid var(--accent); outline-offset:1px}

.ins-2col .ins-radar-host{display:flex; justify-content:center; width:100%}
.ins-axis-note{font-size:12px; margin-top:12px}

.ins-next{display:flex; align-items:center; gap:16px; text-decoration:none; margin-bottom:18px}
.ins-next-ic{font-size:22px; font-weight:900; color:var(--accent); flex-shrink:0; text-shadow:0 0 14px var(--glow)}
.ins-next b{display:block; font-size:15px; color:var(--text)}
.ins-next .muted{display:block; font-size:13px; margin-top:2px}

.ins-ach{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; align-items:start}
.ins-badge{display:flex; flex-direction:column; gap:5px; padding:14px; border-radius:14px;
  background:var(--surface-2); border:1px solid var(--border); opacity:.5; filter:grayscale(.6); transition:.25s var(--ease)}
.ins-badge.on{opacity:1; filter:none; border-color:var(--gold-line); box-shadow:0 0 24px -12px var(--glow)}
.ins-badge-ic{font-size:22px; line-height:1}
.ins-badge-name{font-size:13.5px; font-weight:800; color:var(--text)}
.ins-badge-why{font-size:11.5px; line-height:1.35}

@media (max-width:900px){
  .ins-rings{grid-template-columns:1fr 1fr}
  .ins-stats{grid-template-columns:1fr 1fr}
  .ins-2col{grid-template-columns:1fr}
  .ins-grid{grid-template-columns:repeat(12,1fr); max-width:none}
}
@media (max-width:560px){
  .ins-rings{grid-template-columns:1fr}
}

/* premium-tier nav badge + upgrade gate (§26 Books = MAX) */
.sidebar .nav a .nav-tier, .topbar .nav a .nav-tier{
  margin-left:auto; font-size:9px; font-weight:800; letter-spacing:.05em;
  color:var(--gold-ink); background:var(--gold); border-radius:5px; padding:2px 6px; line-height:1.3;
}
.upgrade-gate{ display:flex; align-items:center; justify-content:center; min-height:60vh; padding:24px; }
.upgrade-card{
  max-width:520px; text-align:center; padding:40px 32px; border:1px solid var(--gold-line); border-radius:20px;
  background:radial-gradient(120% 140% at 50% -20%, var(--gold-soft), transparent 60%), var(--surface);
}
.upgrade-badge{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-ink); background:var(--gold); border-radius:999px; padding:5px 14px; margin-bottom:16px; }
.upgrade-card h1{ font-size:clamp(22px,3vw,28px); margin:0 0 12px; }
.upgrade-card p{ color:var(--muted); font-size:14.5px; line-height:1.6; margin:0 0 24px; }

/* ============================================================
   Walkthrough foundational #4 - app-wide stepper + control polish
   ------------------------------------------------------------
   (#10) Kill the ugly native number-spinner arrows everywhere. They were both
   ugly AND the cause of the "glitch on click" (the arrows only appear on
   hover/focus, shifting the field width, and clicking them fired rapid input
   events). Removing them app-wide fixes every number field at once; the clean
   .cos-stepper below adds back tidy − / + buttons where a stepper helps.
   (#11) Stock white checkbox/radio backgrounds → brand accent via accent-color.
   ============================================================ */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; appearance:none; margin:0 }
input[type=number]{ -moz-appearance:textfield; appearance:textfield }

input[type=checkbox], input[type=radio]{ accent-color:var(--accent) }

/* the clean global stepper (driven by assets/stepper.js → CreatorStepper).
   Opt in by adding class "cos-num" to any <input type=number>; the script wraps
   it in .cos-stepper and adds the − / + buttons. All .cos-* so nothing collides. */
.cos-stepper{ display:inline-flex; align-items:stretch; gap:0; vertical-align:middle;
  border:1px solid var(--line); border-radius:11px; background:var(--surface-3); overflow:hidden; max-width:100% }
.cos-stepper > input[type=number]{
  width:64px; min-width:0; text-align:center; border:0; background:transparent; color:var(--ivory);
  font-family:var(--font-body); font-size:13.5px; padding:7px 6px; margin:0; -moz-appearance:textfield; appearance:textfield }
.cos-stepper > input[type=number]:focus{ outline:none }
.cos-step-btn{ flex:0 0 auto; width:30px; padding:0; border:0; cursor:pointer; user-select:none;
  background:transparent; color:var(--muted); font-size:17px; font-weight:600; line-height:1;
  display:grid; place-items:center; transition:.14s var(--ease) }
.cos-step-btn:first-child{ border-right:1px solid var(--line) }
.cos-step-btn:last-child{ border-left:1px solid var(--line) }
.cos-step-btn:hover{ background:color-mix(in srgb, var(--accent) 20%, var(--surface-3)); color:var(--ivory) }
.cos-step-btn:active{ background:var(--accent); color:var(--ink-on-accent) }
.cos-step-btn:disabled{ opacity:.35; cursor:not-allowed; background:transparent; color:var(--muted) }

/* ============================================================
   Walkthrough foundational #5 - app-wide back button (top-left, history-aware)
   Lives as the first child of .content (above #module-container) so a module
   re-render never wipes it. Wired + shown/hidden by shell.js.
   ============================================================ */
.app-back{
  display:inline-flex; align-items:center; gap:5px;
  margin:0 0 18px; padding:7px 14px 7px 10px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); color:var(--muted);
  font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.01em;
  cursor:pointer; transition:.16s var(--ease);
}
.app-back:hover{ background:var(--surface-3); color:var(--ivory); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)) }
.app-back:active{ transform:translateY(1px) }
.app-back[hidden]{ display:none }
.app-back .app-back-ic{ font-size:18px; line-height:1; margin-top:-2px }

/* Swipe affordance: a subtle right-edge fade on horizontally scrollable tab strips so phone
   users can tell there is more to swipe to (no JS, mobile only). (deferred fix 2026-06-20) */
@media (max-width:760px){
  .j-tabs,
  #finance-root .nav-center.fos-vault-tabs,
  .bk-entbar, .bk-subnav,
  #systems-root .step-nav{
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
}