/* ============================================================
   DESIGN TOKENS — LP Universal Platform structural tier
   Contract: ./DESIGN.md (amended 2026-07-04 at Oliver's eyeball
   gate). NEUTRAL near-black ground per the 21st.dev reference;
   active/primary states are NEUTRAL (white-on-dark), NOT amber.
   True amber survives ONLY as --brand-amber: the horizon glow and
   rare small badges. The legacy --amber var name is kept but now
   carries the neutral primary so every module view de-ambers
   without a markup sweep.
   ============================================================ */
:root {
  /* Fonts */
  --font-display: 'Bricolage Grotesque', 'Sora', sans-serif;
  --font-body:    'Hanken Grotesk', 'Barlow', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* Surfaces — neutral near-black (reference ground; never pure #000) */
  --bg:     #0a0b0d;
  --sf1:    #131416;
  --sf2:    #131416;
  --sf3:    #1a1b1e;
  --bd1:    #26282c;
  --bd2:    #4c4f55;

  /* Text — neutral greys */
  --t1: #f4f5f6;
  --t2: #a2a6ad;
  --t3: #84898f;

  /* PRIMARY / ACTIVE — neutral (legacy var name kept; value demoted from amber) */
  --amber:      #f4f4f5;
  --amber-dim:  #d9dadd;
  --amber-deep: #bcbec2;
  --amber-ink:  #101113;
  --amber-bg:   rgba(244,244,245,0.07);
  --amber-glow: rgba(244,244,245,0.12);

  /* TRUE brand amber — horizon glow + rare small badges ONLY */
  --brand-amber:      #f2a900;
  --brand-amber-bg:   rgba(242,169,0,0.10);
  --brand-amber-glow: rgba(242,169,0,0.13);

  /* Semantic scale (separate from accent) */
  --ok:       #3ecf8e;
  --warn:     #e8843c;
  --risk:     #f26d6d;
  --info:     #5ca8f5;
  --verified: #43c6c0;

  /* Legacy alias — neon-jade RETIRED; jade-named refs now render verified-teal */
  --jade:      #43c6c0;
  --jade-dim:  #33a8a3;
  --jade-deep: #278883;
  --jade-bg:   rgba(67,198,192,0.10);
  --jade-glow: rgba(67,198,192,0.16);

  /* Extra accents — violet sanctioned for small chip/dataviz doses only
     (per Oliver's 21st.dev reference stat-card chips) */
  --c-blue:   #5ca8f5;
  --g-blue:   rgba(92,168,245,0.14);
  --c-purple: #a78bfa;
  --g-purple: rgba(167,139,250,0.14);

  /* Status (legacy names → semantic scale; in-progress = brand amber, small doses) */
  --done:     #3ecf8e;
  --done-bg:  rgba(62,207,142,0.10);
  --prog:     #f2a900;
  --prog-bg:  rgba(242,169,0,0.10);
  --blk:      #f26d6d;
  --blk-bg:   rgba(242,109,109,0.10);
  --muted:    #7c8b99;
  --muted-bg: rgba(124,139,153,0.12);

  /* Chart palette — dataviz-validated (both modes) 2026-07-03 */
  --ch1: #21a265;
  --ch2: #c08300;
  --ch3: #3d85d6;
  --ch4: #c25e74;

  /* Type scale */
  --f10: 0.625rem;
  --f11: 0.6875rem;
  --f13: 0.8125rem;
  --f14: 0.875rem;
  --f17: 1.0625rem;
  --f22: 1.375rem;
  --f28: 1.75rem;

  /* Spacing */
  --s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px;  --s12: 48px;

  --r: 12px; --r2: 8px;
  --shadow: 0 8px 28px rgba(0,0,0,0.36);

  /* Motion (DESIGN.md §6) */
  --dur-fast: 120ms;
  --dur-med:  240ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ============================================================ LIGHT MODE — warm paper (DESIGN.md light ground) */
html[data-theme="light"] {
  --bg:     #f6f3ec;
  --sf1:    #fcfaf6;
  --sf2:    #fcfaf6;
  --sf3:    #fefdfb;
  --bd1:    #e4dfd4;
  --bd2:    #877c68;
  --t1: #1b242d;
  --t2: #4c5b68;
  --t3: #5d6c79;
  --amber:      #1f2328;
  --amber-dim:  #363b42;
  --amber-deep: #4c525a;
  --amber-ink:  #fefdfb;
  --amber-bg:   rgba(31,35,40,0.06);
  --amber-glow: rgba(31,35,40,0.10);
  --brand-amber:      #8a6100;
  --brand-amber-bg:   rgba(138,97,0,0.10);
  --brand-amber-glow: rgba(242,169,0,0.16);
  --ok:       #107455;
  --warn:     #9a5416;
  --risk:     #c03434;
  --info:     #1d63b8;
  --verified: #0e6e69;
  --jade:      #0e6e69;
  --jade-dim:  #0c5f5b;
  --jade-deep: #0a504c;
  --jade-bg:   rgba(14,110,105,0.10);
  --jade-glow: rgba(14,110,105,0.16);
  --c-blue:   #1d63b8;
  --g-blue:   rgba(29,99,184,0.12);
  --c-purple: #6d4fc4;
  --g-purple: rgba(109,79,196,0.12);
  --done:     #107455;
  --done-bg:  rgba(16,116,85,0.10);
  --prog:     #8a6100;
  --prog-bg:  rgba(138,97,0,0.10);
  --blk:      #c03434;
  --blk-bg:   rgba(192,52,52,0.10);
  --muted:    #5d6c79;
  --muted-bg: rgba(93,108,121,0.12);
  --shadow: 0 8px 28px rgba(27,36,45,0.10);
}

/* ============================================================ THEME TRANSITION — only active during toggle */
.theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.15s ease, box-shadow 0.25s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================ BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font-body);
  font-size: var(--f14);
  line-height: 1.55; /* light-on-dark reads lighter — extra leading (DESIGN.md §3) */
  -webkit-font-smoothing: antialiased;
}
html[data-theme="light"] body { line-height: 1.5; }
a { color: var(--amber); text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.25; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* AUTH GATE CSS removed 2026-05-21: superseded by Traefik basicauth at edge */

/* ============================================================ TOP BAR */
.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--bd1);
}
.top-inner {
  max-width: 1520px; margin: 0 auto;
  padding: var(--s2) var(--s4);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.brand-pill { display: flex; align-items: center; gap: var(--s2); }
.brand-mark {
  width: 30px; height: 30px; border-radius: var(--r2);
  background: var(--amber); color: var(--bg);
  display: grid; place-items: center;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: var(--f11); letter-spacing: .04em;
  flex-shrink: 0;
}
.brand-name { font-family: 'Sora', sans-serif; font-size: var(--f13); font-weight: 700; letter-spacing: .01em; line-height: 1.1; }
.brand-sub { font-size: var(--f10); letter-spacing: .20em; text-transform: uppercase; color: var(--t3); font-weight: 600; margin-top: 2px; }
.grow { flex: 1; }

/* Org switcher */
.org-switch { position: relative; }
.org-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--sf2); border: 1px solid var(--bd1);
  padding: 6px var(--s3); border-radius: var(--r2);
  cursor: pointer; font-family: 'Barlow', sans-serif; color: inherit;
  font-weight: 600; font-size: var(--f13);
}
.org-btn::after { content: "▾"; color: var(--t3); margin-left: 2px; font-size: var(--f11); }
.org-mark {
  width: 20px; height: 20px; border-radius: 5px;
  background: var(--amber); color: var(--bg);
  display: grid; place-items: center;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: var(--f10); letter-spacing: .04em;
}
.org-mark.nl { background: oklch(60% 0.14 260); color: var(--t1); }
.org-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px;
  background: var(--sf1); border: 1px solid var(--bd1);
  border-radius: var(--r); padding: var(--s1); box-shadow: var(--shadow);
  display: none; z-index: 60;
}
.org-switch.open .org-menu { display: block; }
.org-option { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s2); border-radius: var(--r2); cursor: pointer; font-size: var(--f13); }
.org-option:hover { background: var(--sf2); }
.org-check { margin-left: auto; color: var(--amber); font-weight: 700; }
.org-meta { display: flex; flex-direction: column; }
.org-meta-name { font-weight: 600; font-family: 'Barlow', sans-serif; }
.org-meta-sub { font-size: var(--f10); color: var(--t3); letter-spacing: .06em; }

/* Edit/Final seg */
.seg { display: inline-flex; border: 1px solid var(--bd1); border-radius: var(--r2); overflow: hidden; }
.seg button {
  background: transparent; border: 0;
  padding: 6px var(--s3); color: var(--t2);
  font-family: 'Barlow', sans-serif; font-weight: 600;
  font-size: var(--f10); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.seg button.active { background: var(--jade-deep); color: var(--t1); }
.icon-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--bd1); background: var(--sf2);
  border-radius: var(--r2); display: grid; place-items: center;
  cursor: pointer; color: var(--t2); font-size: var(--f14);
}
.icon-btn:hover { color: var(--t1); border-color: var(--amber); }

/* ============================================================ LAYOUT */
.shell {
  max-width: 1520px; margin: var(--s4) auto var(--s12);
  padding: 0 var(--s4);
  display: grid; grid-template-columns: 252px 1fr; gap: var(--s4); align-items: start;
}
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; padding: 0 var(--s3); } }

/* ============================================================ SIDEBAR */
aside {
  background: var(--sf1);
  border: 1px solid var(--bd1);
  border-radius: var(--r); padding: var(--s3);
  position: sticky; top: 62px;
  max-height: calc(100vh - 78px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--bd1) transparent;
  display: flex; flex-direction: column;
}
@media (max-width: 900px) {
  aside { position: static; max-height: none; }
  .nav-item { min-height: 44px; } /* touch targets */
  .side-org, .side-search { min-height: 44px; }
}
#groups-sortable { flex: 1; } /* pushes the low group + Chiron pin to the bottom */
.nav-group { margin-bottom: var(--s2); }
.nav-group-label {
  font-size: var(--f10); letter-spacing: .08em; text-transform: uppercase;
  color: var(--t3); font-weight: 600;
  padding: var(--s3) var(--s2) var(--s1); font-family: var(--font-body);
}
.nav-item {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 36px;
  padding: 7px var(--s2); border-radius: var(--r2);
  color: var(--t2); font-size: var(--f13); font-weight: 500;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-item svg { flex-shrink: 0; color: var(--t3); transition: color var(--dur-fast) var(--ease-out); }
.nav-item:hover { background: var(--sf3); color: var(--t1); }
.nav-item:hover svg { color: var(--t2); }
.nav-item.active {
  background: var(--sf3); color: var(--t1); font-weight: 600;
  position: relative;
}
.nav-item.active svg { color: var(--amber); }
.nav-item.active::before {
  /* 3×12 rounded amber scope tick — a signal dot, not a side-stripe */
  content: ""; position: absolute; left: -6px; top: 50%;
  width: 3px; height: 12px; margin-top: -6px;
  border-radius: 3px; background: var(--amber);
}
.nav-num {
  font-size: var(--f10); color: var(--t3); letter-spacing: .06em;
  font-weight: 600; min-width: 20px; font-family: var(--font-mono);
}
.nav-item.active .nav-num { color: var(--amber); }
.nav-lock { margin-left: auto; font-size: var(--f10); opacity: .5; }
.comp-sidebar-pip {
  margin-left: auto; font-size: var(--f10); font-weight: 700;
  font-family: 'Sora', sans-serif; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 5px;
  background: var(--sf3); color: var(--t3);
}
.comp-sidebar-pip.pip-progress { background: var(--prog-bg); color: var(--prog); }
.comp-sidebar-pip.pip-done { background: var(--done-bg); color: var(--done); }

/* ============================================================ MAIN */
main { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }

/* ============================================================ SECTION SWITCH */
.section { display: none; flex-direction: column; gap: var(--s4); }
.section.active { display: flex; }

/* ============================================================ HEADER CARD */
/* No glow-box: the page header sits directly on the ground; the amber
   horizon (one radial wash, .horizon on the section) is the only glow. */
.header-card {
  position: relative;
  isolation: isolate; /* keeps the -1 horizon inside this card's stacking context */
  padding: var(--s6) 0 var(--s4);
}
.h-eye {
  font-size: var(--f10); letter-spacing: .08em; text-transform: uppercase;
  color: var(--t3); font-weight: 600; font-family: var(--font-body); margin-bottom: var(--s2);
}
.h-title {
  font-family: var(--font-display); font-size: var(--f28); font-weight: 700;
  letter-spacing: -.01em; color: var(--t1); margin-bottom: var(--s2);
}
/* two-tone headline (reference cue): trailing segment goes muted */
.h-title .tt { color: var(--t3); font-weight: 600; }
.h-sub { color: var(--t2); font-size: var(--f13); max-width: 65ch; }
/* amber horizon — the single permitted glow, behind the page header only */
.horizon {
  position: absolute; inset: -40px -10% auto -10%; height: 220px;
  pointer-events: none; z-index: -1;
  background: radial-gradient(55% 100% at 50% 0%, var(--brand-amber-glow), transparent 70%);
  opacity: .9;
}
html[data-theme="light"] .horizon { opacity: .35; }

/* ============================================================ CARDS */
.grid  { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
@media (max-width: 900px) { .grid, .grid3 { grid-template-columns: 1fr; } }
.card {
  background: var(--sf2);
  border: 1px solid var(--bd1);
  border-radius: var(--r); padding: var(--s4);
  position: relative; overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.card:hover { border-color: var(--bd2); }
.card-eye {
  font-size: var(--f10); letter-spacing: .08em; text-transform: uppercase;
  color: var(--t3); font-weight: 600; margin-bottom: var(--s2);
  font-family: var(--font-body);
}
.card h3 {
  font-family: var(--font-display); font-size: var(--f17); font-weight: 700;
  letter-spacing: -.01em; margin-bottom: var(--s2); display: flex; align-items: center; gap: var(--s2);
}
.card p { color: var(--t2); font-size: var(--f13); line-height: 1.6; margin-bottom: var(--s1); }
.stamp {
  font-size: var(--f11); color: var(--t3); margin-top: var(--s3);
  padding-top: var(--s2); border-top: 1px solid var(--bd1); letter-spacing: .02em;
}
.card-wm {
  position: absolute; bottom: var(--s2); right: var(--s3);
  font-size: var(--f10); font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--t1); opacity: .12;
  cursor: pointer; user-select: none; transition: opacity .15s;
}
.card-wm:hover { opacity: .32; }
.card[data-sponsor="lp"] .card-wm.ltit { display: none; }
.card[data-sponsor="ltit"] .card-wm.lp { display: none; }

/* ============================================================ BADGES */
.badge {
  display: inline-block; font-size: var(--f10); letter-spacing: .14em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 5px;
  font-weight: 700; font-family: 'Barlow', sans-serif;
}
.badge.jade  { background: var(--jade-bg);   color: var(--amber); }
.badge.amber { background: var(--prog-bg);   color: var(--prog); }
.badge.red   { background: var(--blk-bg);    color: var(--blk); }
.badge.muted { background: var(--muted-bg);  color: var(--muted); }
.badge.dim   { background: var(--sf3);       color: var(--t3); }

/* ============================================================ KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: var(--sf1);
  border: 1px solid var(--bd1);
  border-radius: var(--r); padding: var(--s4);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.kpi:hover { border-color: var(--bd2); }
.kpi-label {
  font-size: var(--f11); letter-spacing: .02em;
  color: var(--t2); font-weight: 500; font-family: var(--font-body);
}
.kpi-value {
  font-family: var(--font-display); font-size: var(--f28); font-weight: 700;
  margin-top: var(--s2); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kpi-sub { font-size: var(--f11); color: var(--t3); margin-top: var(--s1); font-weight: 500; }

/* ============================================================ NOTE */
.note {
  background: var(--g-blue); border: 1px solid var(--bd1);
  border-radius: var(--r2); padding: var(--s3);
  color: var(--t2); font-size: var(--f13); line-height: 1.55;
}

/* ============================================================ EDIT MODE */
.editable { position: relative; display: inline-block; }
.pencil {
  display: none; margin-left: var(--s1);
  background: var(--jade-bg); color: var(--amber);
  border: 0; width: 20px; height: 20px; border-radius: 5px;
  font-size: var(--f11); cursor: pointer;
  align-items: center; justify-content: center; vertical-align: middle;
}
body.edit-mode .pencil { display: inline-flex; }
.pencil:hover { background: var(--jade-glow); }
.popover {
  position: absolute; z-index: 200; width: 280px;
  background: var(--sf1); border: 1px solid var(--bd2);
  border-radius: var(--r); padding: var(--s2); box-shadow: var(--shadow);
}
.popover textarea {
  width: 100%; height: 140px; background: var(--sf2);
  border: 1px solid var(--bd1); color: var(--t1);
  font-family: 'Barlow', sans-serif; font-size: var(--f13);
  border-radius: var(--r2); padding: var(--s2); resize: none; outline: none;
}
.popover-actions { display: flex; justify-content: flex-end; gap: var(--s1); margin-top: var(--s2); }
.popover button { font-family: 'Barlow', sans-serif; font-size: var(--f13); font-weight: 600; padding: 6px var(--s2); border-radius: var(--r2); border: 0; cursor: pointer; }
.pop-cancel { background: transparent; color: var(--t2); }
.pop-save { background: var(--jade-deep); color: var(--t1); }

/* ============================================================ LOCKED OVERLAY */
.locked-overlay {
  position: absolute; inset: 0;
  background: rgba(6,6,10,0.82); backdrop-filter: blur(2px);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s2); text-align: center; padding: var(--s6);
}
.locked-overlay .lock-cta { font-size: var(--f13); color: var(--t2); max-width: 26ch; }

/* ============================================================ CANDIDATE ROWS */
.cand-row {
  display: flex; align-items: center; gap: var(--s2);
  margin: var(--s1) 0; padding: var(--s2) var(--s2);
  background: var(--sf1); border: 1px solid var(--bd1); border-radius: var(--r2);
}
.cand-name { flex: 1; font-weight: 600; font-size: var(--f13); }
.cand-promote {
  background: var(--jade-deep); color: var(--t1); border: 0;
  padding: 5px 10px; border-radius: 5px; font-family: 'Barlow', sans-serif;
  font-size: var(--f10); font-weight: 600; cursor: pointer; letter-spacing: .06em;
  text-transform: uppercase; display: none;
}
body.edit-mode .cand-promote { display: inline-block; }
.cand-row.final { background: var(--done-bg); border-color: oklch(72% 0.177 158 / 0.28); }

/* ============================================================ COMPLIANCE CHECKLIST */
.comp-progress-wrap {
  background: var(--sf1); border: 1px solid var(--bd1);
  border-radius: var(--r); padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
}
.comp-progress-meta { display: flex; align-items: baseline; justify-content: space-between; }
.comp-progress-title {
  font-family: 'Sora', sans-serif; font-size: var(--f17); font-weight: 700; color: var(--t1);
}
.comp-progress-label { font-size: var(--f13); color: var(--t2); font-weight: 500; }
.comp-progress-track {
  height: 6px; background: var(--sf3); border-radius: 3px; overflow: hidden;
}
.comp-progress-fill {
  height: 100%; background: var(--amber); border-radius: 3px;
  transition: width .4s ease-out; width: 0%;
}
.comp-progress-cats { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.comp-cat-pill {
  font-size: var(--f10); font-weight: 600; letter-spacing: .10em;
  padding: 3px var(--s2); border-radius: 5px;
  background: var(--sf3); color: var(--t3);
  font-family: 'Barlow', sans-serif;
}
.comp-cat-pill .ccp-count { color: var(--amber); margin-left: 4px; }

.comp-category { background: var(--sf1); border: 1px solid var(--bd1); border-radius: var(--r); overflow: hidden; }
.comp-cat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4);
  background: var(--sf2); border-bottom: 1px solid var(--bd1);
}
.comp-cat-name {
  font-family: 'Barlow', sans-serif; font-weight: 600;
  font-size: var(--f13); color: var(--t1); letter-spacing: .02em;
}
.comp-cat-count {
  font-family: 'Sora', sans-serif; font-size: var(--f11); font-weight: 700;
  color: var(--t3); letter-spacing: .04em;
}
.comp-items { padding: var(--s1) 0; }
.comp-item {
  display: grid; grid-template-columns: 36px 1fr 90px;
  align-items: center;
  padding: var(--s2) var(--s4);
  cursor: pointer; transition: background .1s;
  gap: var(--s2);
}
.comp-item:hover { background: var(--sf2); }
.comp-pip {
  font-size: 18px; text-align: center; line-height: 1;
  transition: color .15s;
  font-family: 'Sora', sans-serif;
}
.comp-item[data-status="none"]     .comp-pip { color: var(--t3); }
.comp-item[data-status="progress"] .comp-pip { color: var(--prog); }
.comp-item[data-status="done"]     .comp-pip { color: var(--done); }
.comp-label { font-size: var(--f13); color: var(--t2); line-height: 1.4; }
.comp-item[data-status="done"] .comp-label { color: var(--t1); }
.comp-ts {
  font-size: var(--f10); color: var(--t3); letter-spacing: .04em;
  text-align: right; font-family: 'Barlow', sans-serif;
}

/* ============================================================ BANKABILITY SCORE RING */
.bankab-wrap {
  display: flex; gap: var(--s6); align-items: center; flex-wrap: wrap;
  background: var(--sf2); border: 1px solid rgba(244,244,245,0.22);
  border-radius: var(--r); padding: var(--s4);
  box-shadow: 0 0 30px rgba(244,244,245,0.06);
}
.bankab-ring-area { display: flex; flex-direction: column; align-items: center; gap: var(--s2); flex-shrink: 0; }
.bankab-ring-inner { position: relative; display: flex; align-items: center; justify-content: center; }
.bankab-ring-center { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.bankab-score { font-family: 'Sora', sans-serif; font-weight: 700; font-size: var(--f28); color: var(--amber); }
.bankab-sub { font-size: var(--f10); color: var(--t3); letter-spacing: .08em; text-transform: uppercase; }
.bankab-ring-title { font-size: var(--f11); color: var(--t2); font-weight: 600; text-align: center; letter-spacing: .06em; text-transform: uppercase; }
.bankab-tiers { flex: 1; display: flex; flex-direction: column; gap: var(--s2); min-width: 260px; }
.bankab-tier { display: flex; align-items: flex-start; gap: var(--s3); padding: 10px var(--s3); border-radius: var(--r2); border: 1px solid var(--bd1); transition: border-color .2s, background .2s; }
.bankab-tier.active { border-color: rgba(244,244,245,0.45); background: var(--amber-bg); }
.bt-range { font-family: 'Sora', sans-serif; font-weight: 700; font-size: var(--f13); min-width: 56px; color: var(--t2); }
.bankab-tier.active .bt-range { color: var(--amber); }
.bt-name { font-weight: 600; font-size: var(--f13); margin-bottom: 2px; }
.bt-desc { font-size: var(--f11); color: var(--t2); }

/* COACHING PANEL */
.coaching-panel {
  background: var(--sf1); border: 1px solid rgba(244,244,245,0.22);
  border-radius: var(--r2); padding: var(--s4);
  display: none;
}
.coaching-panel.visible { display: block; }
.cp-item-name { font-weight: 700; font-size: var(--f13); color: var(--amber); margin-bottom: var(--s2); font-family: 'Sora', sans-serif; }
.cp-text { font-size: var(--f13); color: var(--t2); line-height: 1.65; }
.comp-item.selected { background: var(--amber-bg); border-radius: var(--r2); }

/* ============================================================ NOVUS SPLIT */
.split-bar {
  display: flex; border-radius: var(--r2); overflow: hidden;
  height: 8px; margin: var(--s2) 0;
}
.split-seg { transition: flex .4s; }
.split-labels { display: flex; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s2); }
.split-label-item { display: flex; flex-direction: column; gap: 2px; }
.split-label-name { font-size: var(--f10); letter-spacing: .12em; text-transform: uppercase; color: var(--t3); font-weight: 600; font-family: 'Barlow', sans-serif; }
.split-label-pct { font-family: 'Sora', sans-serif; font-size: var(--f17); font-weight: 700; }

/* ============================================================ AFFILIATE TABLE */
.af-table { width: 100%; border-collapse: collapse; font-size: var(--f13); }
.af-table th {
  text-align: left; font-size: var(--f10); letter-spacing: .16em;
  text-transform: uppercase; color: var(--t3); font-weight: 600;
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--bd1);
  font-family: 'Barlow', sans-serif;
}
.af-table td { padding: var(--s2) var(--s3); color: var(--t2); border-bottom: 1px solid rgba(28,28,40,0.5); }
.af-table tr:last-child td { border-bottom: 0; }
.af-table td:first-child { color: var(--t1); font-weight: 500; }

/* ============================================================ PWA INSTALL */
.install-banner {
  display: none; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3); border-radius: var(--r2);
  background: var(--amber-bg); border: 1px solid oklch(72% 0.17 72 / 0.28);
  color: var(--amber); font-size: var(--f13);
}
.install-banner button {
  margin-left: auto; background: var(--jade-deep); color: var(--t1);
  border: 0; padding: 6px var(--s3); border-radius: var(--r2);
  font-family: 'Barlow', sans-serif; font-weight: 600; cursor: pointer; font-size: var(--f13);
}

/* ============================================================ MOBILE NAV */
.mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--sf1); border-top: 1px solid var(--bd1);
  padding: var(--s1) var(--s2) env(safe-area-inset-bottom); z-index: 40; overflow-x: auto;
}
@media (max-width: 900px) { .mobile-nav { display: flex; gap: var(--s1); } aside { display: none; } }
.mobile-nav button {
  flex-shrink: 0; background: transparent; border: 0;
  color: var(--t2); font-family: 'Barlow', sans-serif; font-size: var(--f10);
  padding: var(--s1) var(--s2);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; border-radius: var(--r2); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; min-width: 48px;
}
.mobile-nav button.active { color: var(--amber); background: var(--jade-bg); }
.mb-num { font-size: 9px; color: var(--t3); font-weight: 700; font-family: 'Sora', sans-serif; }

/* ============================================================ MISC */
.powered { font-size: var(--f10); letter-spacing: .22em; text-transform: uppercase; color: var(--t3); text-align: center; margin: var(--s3) 0 var(--s1); font-weight: 600; }

/* ============================================================ DRAG HANDLES */
.nav-group-label { display: flex; align-items: center; }
.nav-spacer { flex: 1; }
.group-drag-handle {
  opacity: 0; cursor: grab; color: var(--t3); font-size: 15px;
  transition: opacity 0.15s; padding: 0 var(--s1); user-select: none; flex-shrink: 0;
}
.group-drag-handle:active { cursor: grabbing; }
.nav-group-label:hover .group-drag-handle { opacity: 1; }
.item-drag-handle {
  opacity: 0; cursor: grab; color: var(--t3); font-size: 13px;
  transition: opacity 0.15s; user-select: none; flex-shrink: 0;
}
.item-drag-handle:active { cursor: grabbing; }
.nav-item:hover .item-drag-handle { opacity: 1; }
.sortable-ghost {
  opacity: 0.35 !important; background: rgba(244,244,245,0.07) !important;
  border-top: 2px solid var(--amber) !important;
  border-left: none !important; border-right: none !important;
  border-bottom: none !important; border-radius: 0 !important;
}
.sortable-chosen { opacity: 0.85; }

/* Remove auto-margin from pip — nav-spacer handles it now */
.comp-sidebar-pip { margin-left: 0; }

/* ============================================================ 12-COL HOME GRID */
.home-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s4); }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
@media (max-width: 1200px) {
  .home-grid { grid-template-columns: repeat(6, 1fr); }
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 3; }
  .col-5 { grid-column: span 6; }
  .col-6 { grid-column: span 6; }
  .col-8 { grid-column: span 6; }
}
@media (max-width: 900px) {
  .home-grid { grid-template-columns: 1fr; }
  .col-3, .col-4, .col-5, .col-6, .col-8 { grid-column: span 1; }
}

/* ============================================================ WIDGET: PROGRESS RING */
.ring-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.ring-inner { position: relative; display: flex; align-items: center; justify-content: center; }
.ring-center { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.ring-pct { font-family: 'Sora', sans-serif; font-weight: 700; font-size: var(--f22); color: var(--amber); }
.ring-sub { font-size: var(--f10); color: var(--t3); letter-spacing: .08em; }
.ring-title { font-family: 'Sora', sans-serif; font-size: var(--f13); font-weight: 600; color: var(--t2); text-align: center; }

/* ============================================================ WIDGET: NEXT STEP / SCORE / BUTTONS */
.next-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--amber-bg); border: 1px solid rgba(244,244,245,0.3);
  color: var(--amber); font-size: var(--f10); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; padding: 3px var(--s2);
  border-radius: 5px; margin-bottom: var(--s2); font-family: 'Barlow', sans-serif;
}
.btn-amber {
  display: inline-block; background: var(--amber); color: #000;
  border: none; border-radius: var(--r2); padding: var(--s2) var(--s4);
  font-family: 'Barlow', sans-serif; font-weight: 700; font-size: var(--f13);
  cursor: pointer; letter-spacing: .02em; margin-top: var(--s3);
  transition: background 0.2s; width: 100%; text-align: center;
}
.btn-amber:hover { background: var(--amber-dim); }
.btn-amber-sm {
  display: inline-block; background: transparent; color: var(--amber);
  border: 1px solid rgba(244,244,245,0.4); border-radius: var(--r2);
  padding: 5px var(--s3); font-family: 'Barlow', sans-serif;
  font-weight: 600; font-size: var(--f13); cursor: pointer;
  letter-spacing: .01em; margin-top: var(--s3);
  transition: background 0.2s, border-color 0.2s;
}
.btn-amber-sm:hover { background: var(--amber-bg); border-color: var(--amber); }
.score-num { font-family: 'Sora', sans-serif; font-size: var(--f28); font-weight: 700; color: var(--amber); line-height: 1; margin-bottom: var(--s2); }

/* ============================================================ WIDGET: PIPELINE */
.pipe-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); margin-top: var(--s3); }
.pipe-stat { background: var(--sf3); border-radius: var(--r2); padding: var(--s2) var(--s3); }
.pipe-num { font-family: 'Sora', sans-serif; font-size: var(--f22); font-weight: 700; line-height: 1; }
.pipe-lbl { font-size: var(--f10); color: var(--t3); letter-spacing: .10em; text-transform: uppercase; font-weight: 600; margin-top: 3px; font-family: 'Barlow', sans-serif; }
.pipe-stat.amber .pipe-num { color: var(--amber); }
.pipe-stat.blue .pipe-num { color: var(--c-blue); }
.pipe-stat.purple .pipe-num { color: var(--c-purple); }
.pipe-stat.jade .pipe-num { color: var(--jade); }

/* ============================================================ WIDGET: TASK LIST */
.task-list { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.task-item { display: flex; align-items: center; gap: var(--s2); font-size: var(--f13); color: var(--t2); cursor: pointer; padding: var(--s1) 0; transition: color 0.15s; }
.task-item:hover { color: var(--t1); }
.task-cb { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--amber); border-radius: 5px; display: grid; place-items: center; transition: background 0.15s; }
.task-item.checked .task-cb { background: var(--amber); }
.task-item.checked .task-cb::after { content: '✓'; font-size: 11px; color: #000; font-weight: 700; }
.task-item.checked span:not(.task-cb) { text-decoration: line-through; color: var(--t3); }

/* ============================================================ WIDGET: NOTES */
.notes-area { width: 100%; height: 90px; background: var(--sf2); border: 1px solid var(--bd1); color: var(--t1); border-radius: var(--r2); padding: var(--s2); font-family: monospace; font-size: var(--f13); resize: none; outline: none; margin-top: var(--s3); }
.notes-area:focus { border-color: var(--amber); }

/* ============================================================ WIDGET: CALL */
.call-name { font-family: 'Sora', sans-serif; font-size: var(--f17); font-weight: 600; margin-top: var(--s2); margin-bottom: var(--s2); }
.call-info { display: flex; flex-direction: column; gap: var(--s1); }
.call-row { display: flex; align-items: center; gap: var(--s2); font-size: var(--f13); color: var(--t2); }
.call-row.muted { color: var(--t3); }

/* ============================================================ WIDGET: CHART */
.chart-total { font-family: 'Sora', sans-serif; font-size: var(--f22); font-weight: 700; color: var(--jade); margin-bottom: var(--s3); }
.chart-bars { display: flex; align-items: flex-end; gap: var(--s2); height: 90px; }
.chart-col { display: flex; flex-direction: column; align-items: center; gap: var(--s1); flex: 1; height: 100%; justify-content: flex-end; }
.bar { width: 100%; background: var(--sf3); border-radius: 3px 3px 0 0; transition: background 0.2s; min-height: 4px; }
.bar.highlight { background: var(--amber); }
.chart-lbl { font-size: var(--f10); color: var(--t3); letter-spacing: .04em; font-family: 'Barlow', sans-serif; }
.chart-col.highlight .chart-lbl { color: var(--amber); }

/* ============================================================ WIDGET: FEED */
.feed-list { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.feed-item { display: flex; align-items: flex-start; gap: var(--s2); }
.feed-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: 'Sora', sans-serif; font-size: var(--f10); font-weight: 700; color: #000; }
.feed-body { flex: 1; min-width: 0; }
.feed-text { font-size: var(--f13); color: var(--t2); line-height: 1.4; }
.feed-text strong { color: var(--t1); }
.feed-time { font-size: var(--f10); color: var(--t3); margin-top: 2px; letter-spacing: .04em; }

/* ============================================================ WIDGET: QUICK LINKS */
.ql-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s3); }
.ql-btn { background: var(--sf2); border: 1px solid var(--bd1); border-radius: var(--r2); padding: var(--s2) var(--s1); font-family: 'Barlow', sans-serif; font-size: var(--f11); font-weight: 600; color: var(--t2); cursor: pointer; text-align: center; letter-spacing: .04em; line-height: 1.3; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.ql-btn:hover { color: var(--amber); border-color: rgba(244,244,245,0.4); background: var(--amber-bg); }

/* ============================================================ WIDGET: READINESS */
.readiness-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--s3); }
.readiness-score { font-family: 'Sora', sans-serif; font-size: var(--f22); font-weight: 700; color: var(--amber); white-space: nowrap; margin-left: var(--s4); }
.readiness-bar { height: 4px; background: var(--bd1); border-radius: 2px; margin-bottom: var(--s4); }
.readiness-fill { height: 100%; background: var(--amber); border-radius: 2px; transition: width 0.4s ease; }
.readiness-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
@media (max-width: 900px) { .readiness-items { grid-template-columns: repeat(2, 1fr); } }
.readiness-item { display: flex; align-items: center; gap: var(--s2); font-size: var(--f13); color: var(--t2); }
.readiness-check { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--bd2); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.readiness-check.done { background: var(--jade-bg); border-color: var(--jade); color: var(--jade); }

/* ============================================================ CREDIT BUILDER */
.cb-panel { background: var(--sf1); border: 1px solid var(--bd1); border-radius: var(--r); padding: var(--s6); margin-bottom: var(--s4); }
.cb-panel-header { margin-bottom: var(--s6); }
.cb-panel-title { font-family: 'Sora', sans-serif; font-size: var(--f17); font-weight: 700; display: block; }
.cb-panel-sub { font-size: var(--f13); color: var(--t2); display: block; margin-top: 4px; }

/* SBSS Scorecard */
.cbss-layout { display: grid; grid-template-columns: 180px 1fr; gap: var(--s6); align-items: start; }
@media (max-width: 800px) { .cbss-layout { grid-template-columns: 1fr; } }
.cbss-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.cbss-ring-area { position: relative; display: flex; align-items: center; justify-content: center; }
.cbss-ring-center { position: absolute; display: flex; flex-direction: column; align-items: center; }
.cbss-score-num { font-family: 'Sora', sans-serif; font-size: var(--f28); font-weight: 700; color: var(--amber); line-height: 1; }
.cbss-score-sub { font-size: var(--f11); color: var(--t3); }
.cbss-ring-label { font-size: var(--f13); font-weight: 600; color: var(--t2); text-align: center; }
.cbss-thresholds { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.cbss-thresh { font-size: var(--f11); color: var(--t3); }
.cbss-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 600px) { .cbss-inputs { grid-template-columns: 1fr; } }
.cbss-input-group { display: flex; flex-direction: column; gap: 5px; }
.cbss-label { font-size: var(--f13); color: var(--t2); font-weight: 500; }
.cbss-range { font-size: var(--f11); color: var(--t3); }
.cbss-input { background: var(--sf2); border: 1px solid var(--bd1); border-radius: var(--r2); padding: 8px 12px; color: var(--t1); font-size: var(--f14); font-family: 'Barlow', sans-serif; width: 100%; box-sizing: border-box; }
.cbss-input:focus { outline: none; border-color: var(--amber); }
select.cbss-input { cursor: pointer; }
.cbss-status-row { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s6); flex-wrap: wrap; }
.cbss-status-item { display: flex; align-items: center; gap: var(--s2); padding: 8px 12px; border-radius: var(--r2); background: var(--sf2); border: 1px solid var(--bd1); flex: 1; min-width: 110px; transition: border-color 0.3s, background 0.3s; }
.cbss-status-item.active { border-color: var(--amber); background: var(--amber-bg); }
.cbss-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bd2); flex-shrink: 0; transition: background 0.3s; }
.cbss-status-item.active .cbss-status-dot { background: var(--amber); }
.cbss-status-name { font-size: var(--f13); font-weight: 600; }
.cbss-status-range { font-size: var(--f11); color: var(--t3); }
.cbss-status-arrow { color: var(--t3); font-size: var(--f13); }

/* Tradeline Tracker */
.tl-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); margin-bottom: var(--s4); }
@media (max-width: 900px) { .tl-summary { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .tl-summary { grid-template-columns: repeat(2, 1fr); } }
.tl-stat { background: var(--sf2); border: 1px solid var(--bd1); border-radius: var(--r2); padding: var(--s4); text-align: center; }
.tl-stat-val { font-family: 'Sora', sans-serif; font-size: var(--f22); font-weight: 700; color: var(--amber); }
.tl-stat-label { font-size: var(--f11); color: var(--t3); margin-top: 4px; }
.tl-add-form { background: var(--sf2); border: 1px solid var(--bd1); border-radius: var(--r2); padding: var(--s4); margin-bottom: var(--s4); }
.tl-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-bottom: var(--s4); }
@media (max-width: 800px) { .tl-form-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tl-form-grid { grid-template-columns: 1fr; } }
.tl-form-actions { display: flex; gap: var(--s3); }
.tl-controls { margin-bottom: var(--s3); }
.tl-table-wrap { overflow-x: auto; }
.tl-table { width: 100%; border-collapse: collapse; font-size: var(--f13); }
.tl-table th { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--bd2); color: var(--t3); font-weight: 600; font-size: var(--f11); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.tl-table td { padding: 10px 12px; border-bottom: 1px solid var(--bd1); color: var(--t1); vertical-align: middle; white-space: nowrap; }
.tl-table tbody tr:hover td { background: var(--sf2); }
.tl-util { padding: 2px 7px; border-radius: 5px; font-size: var(--f11); font-weight: 700; }
.tl-util.low { background: var(--jade-bg); color: var(--jade); }
.tl-util.med { background: var(--amber-bg); color: var(--amber); }
.tl-util.high { background: var(--blk-bg); color: var(--blk); }
.tl-del-btn { background: none; border: none; cursor: pointer; color: var(--t3); font-size: 16px; padding: 2px 6px; border-radius: 4px; }
.tl-del-btn:hover { color: var(--blk); background: var(--blk-bg); }

/* Tier Roadmap */
.tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-card { background: var(--sf2); border: 1px solid var(--bd1); border-radius: var(--r); padding: var(--s5, var(--s4)); transition: border-color 0.3s; }
.tier-card.complete { border-color: var(--jade); }
.tier-card-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.tier-badge { font-family: 'Sora', sans-serif; font-size: var(--f13); font-weight: 700; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.t1-badge { background: rgba(92,168,245,0.15); color: var(--c-blue); }
.t2-badge { background: var(--amber-bg); color: var(--amber); }
.t3-badge { background: var(--jade-bg); color: var(--jade); }
.t4-badge { background: var(--g-purple); color: var(--c-purple); }
.tier-name { font-family: 'Sora', sans-serif; font-size: var(--f17); font-weight: 700; }
.tier-sub { font-size: var(--f13); color: var(--t2); }
.tier-progress-pill { margin-left: auto; font-size: var(--f11); font-weight: 700; padding: 3px 9px; border-radius: 20px; background: var(--sf3); color: var(--t2); white-space: nowrap; }
.tier-progress-pill.done { background: var(--jade-bg); color: var(--jade); }
.tier-bar-wrap { margin-bottom: var(--s3); }
.tier-bar-track { height: 4px; background: var(--bd2); border-radius: 2px; overflow: hidden; }
.tier-bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; }
.t1-fill { background: var(--c-blue); }
.t2-fill { background: var(--amber); }
.t3-fill { background: var(--jade); }
.t4-fill { background: var(--c-purple); }
.tier-milestones { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }
.tier-milestone { display: flex; align-items: flex-start; gap: var(--s2); padding: 6px 0; cursor: pointer; border-radius: var(--r2); transition: background 0.15s; }
.tier-milestone:hover { background: var(--sf3); padding-left: 6px; margin-left: -6px; }
.tier-milestone.done .tm-pip { color: var(--jade); }
.tier-milestone.done .tm-label { color: var(--t2); text-decoration: line-through; }
.tm-pip { color: var(--t3); font-size: 16px; flex-shrink: 0; line-height: 1.4; }
.tm-label { font-size: var(--f13); color: var(--t1); line-height: 1.45; }
.tier-unlock { font-size: var(--f11); color: var(--t3); border-top: 1px solid var(--bd1); padding-top: var(--s2); }

/* ============================================================ STUB SECTIONS */
.stub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
@media (max-width: 900px) { .stub-grid { grid-template-columns: 1fr; } }
.stub-card { background: var(--sf1); border: 1px solid var(--bd1); border-radius: var(--r); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s2); }
.stub-icon { font-size: 28px; margin-bottom: var(--s1); }
.stub-card h3 { font-family: 'Sora', sans-serif; font-size: var(--f17); font-weight: 700; }
.stub-card p { color: var(--t2); font-size: var(--f13); line-height: 1.55; }
.stub-tag { display: inline-block; font-size: var(--f10); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; font-family: 'Barlow', sans-serif; margin-top: auto; align-self: flex-start; }
.stub-tag.tag-phase2 { background: var(--amber-bg); color: var(--amber); }
.stub-tag.tag-setup { background: rgba(92,168,245,0.12); color: var(--c-blue); }
.stub-tag.tag-locked { background: var(--muted-bg); color: var(--muted); }
.stub-tag.tag-live { background: var(--done-bg); color: var(--done); }

/* Lock overlay for stub sections */
.lock-wrap { position: relative; }
.lock-overlay {
  position: absolute; inset: 0; background: rgba(6,6,10,0.70);
  backdrop-filter: blur(3px); border-radius: var(--r);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s3); padding: var(--s6); text-align: center;
}
.lock-overlay .lock-icon { font-size: 32px; }
.lock-overlay p { color: var(--t2); font-size: var(--f13); max-width: 28ch; }

/* ============================================================ PROJECT MASTER */
.pm-pill { background:var(--sf2); border:1px solid var(--bd1); border-radius:20px; padding:6px 14px; color:var(--t2); cursor:pointer; font-family:'Barlow',sans-serif; font-size:.8125rem; font-weight:600; transition:all .15s; white-space:nowrap; }
.pm-pill.active { border-color:var(--amber); color:var(--amber); box-shadow:0 0 12px rgba(244,244,245,0.22); }
.pm-pill.stale { animation:stale-pulse 2s infinite; }
@keyframes stale-pulse { 0%,100% { border-color:rgba(244,244,245,0.2); } 50% { border-color:rgba(244,244,245,0.8); } }
.pm-section { border:1px solid var(--bd1); border-radius:10px; margin-bottom:12px; overflow:hidden; }
.pm-section-header { padding:12px 16px; background:var(--sf1); cursor:pointer; display:flex; align-items:center; gap:8px; font-family:'Barlow',sans-serif; font-weight:600; font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--t2); }
.pm-section-header:hover { color:var(--amber); }
.pm-section-body { padding:16px; background:var(--sf2); }
.pm-section.collapsed .pm-section-body { display:none; }
.pm-count { background:var(--amber-bg); color:var(--amber); border-radius:12px; padding:2px 8px; font-size:.6875rem; font-weight:700; margin-left:auto; }
.pm-count.overdue { background:rgba(239,68,68,.1); color:#ef4444; margin-left:4px; }
.pm-action-item { display:flex; align-items:center; gap:8px; padding:8px 4px; border-bottom:1px solid var(--bd1); }
.pm-action-item:last-child { border-bottom:0; }
.pm-action-cb { width:20px; height:20px; border-radius:6px; border:2px solid var(--bd2); cursor:pointer; flex-shrink:0; appearance:none; background:transparent; transition:all .15s; }
.pm-action-cb:checked { background:var(--jade); border-color:var(--jade); }
.pm-action-text { flex:1; font-size:.875rem; color:var(--t1); cursor:text; }
.pm-action-item.done .pm-action-text { text-decoration:line-through; opacity:.4; }
.pm-chip { background:var(--sf3); border:1px solid var(--bd2); border-radius:12px; padding:2px 8px; font-size:.6875rem; font-weight:600; cursor:pointer; color:var(--t2); transition:all .15s; white-space:nowrap; }
.pm-chip:hover { border-color:var(--amber); color:var(--amber); }
.pm-chip.energy-low { color:var(--jade); border-color:var(--jade-dim); }
.pm-chip.energy-med { color:var(--amber); border-color:var(--amber-dim); }
.pm-chip.energy-high { color:#ef4444; border-color:#b91c1c; }
.pm-stale-badge { font-size:.625rem; color:var(--amber); font-weight:700; }
.pm-slot { border:1px solid var(--bd1); border-radius:10px; margin-bottom:12px; overflow:hidden; }
.pm-slot-header { background:var(--sf1); padding:10px 14px; display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.6875rem; letter-spacing:.18em; font-weight:700; text-transform:uppercase; color:var(--t3); flex-wrap:wrap; }
.pm-slot-fields { padding:12px; display:flex; flex-direction:column; gap:8px; }
.pm-slot-field-label { font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); font-weight:700; margin-bottom:2px; display:block; }
.pm-slot-field-label+textarea { width:100%; background:var(--sf3); border:1px solid var(--bd1); color:var(--t1); border-radius:8px; padding:8px 10px; font-family:'Barlow',sans-serif; font-size:.875rem; resize:vertical; min-height:52px; outline:none; box-sizing:border-box; }
.pm-slot-field-label+textarea:focus { border-color:var(--amber); }
.pm-slot.collapsed .pm-slot-fields { display:none; }
.pm-mic-btn { background:transparent; border:1px solid var(--bd2); border-radius:8px; padding:4px 8px; cursor:pointer; color:var(--t2); font-size:.75rem; transition:all .15s; }
.pm-mic-btn.recording { background:rgba(239,68,68,.15); border-color:#ef4444; color:#ef4444; }
#focus-overlay { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:48px 24px; gap:24px; min-height:60vh; }
#focus-project-name { font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); font-weight:700; }
#focus-action-text { font-family:'Sora',sans-serif; font-size:1.5rem; font-weight:700; color:var(--t1); max-width:600px; line-height:1.3; }
#focus-timer { font-family:'Sora',sans-serif; font-size:4rem; font-weight:700; color:var(--amber); line-height:1; font-variant-numeric:tabular-nums; }
#focus-timer-controls { display:flex; gap:12px; }
#focus-next-label { font-size:.875rem; color:var(--t3); }
#focus-done-btn { background:var(--jade); color:#fff; border:none; border-radius:10px; padding:12px 28px; font-family:'Barlow',sans-serif; font-weight:800; font-size:1rem; cursor:pointer; }
#focus-exit-btn { background:transparent; border:1px solid var(--bd2); color:var(--t2); border-radius:10px; padding:10px 20px; font-family:'Barlow',sans-serif; font-weight:600; cursor:pointer; }
.widget { position:relative; }
.widget-drag-handle { position:absolute; top:12px; right:12px; opacity:0; cursor:grab; color:var(--t3); font-size:.875rem; transition:opacity .15s; }
.widget:hover .widget-drag-handle { opacity:1; }
.widget-hide-btn { position:absolute; top:10px; right:32px; opacity:0; cursor:pointer; color:var(--t3); background:none; border:none; font-size:.875rem; transition:opacity .15s; }
.widget:hover .widget-hide-btn { opacity:1; }
@keyframes confetti-burst { 0% { transform:translate(0,0) scale(1); opacity:1; } 100% { transform:translate(var(--dx),var(--dy)) scale(0); opacity:0; } }
.confetti-particle { position:fixed; pointer-events:none; z-index:9999; width:6px; height:6px; border-radius:50%; background:var(--amber); animation:confetti-burst .6s ease-out forwards; }
#pm-focus-strip { background:var(--sf1); border:1px solid var(--bd1); border-radius:10px; padding:12px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; position:sticky; top:0; z-index:10; }
#pm-switcher { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:16px; scrollbar-width:none; }
#pm-switcher::-webkit-scrollbar { display:none; }
#pm-detail { background:var(--sf2); border:1px solid var(--bd1); border-radius:14px; padding:20px; }
#pm-new-modal { position:fixed; inset:0; z-index:500; background:rgba(6,6,10,0.88); display:none; align-items:center; justify-content:center; padding:24px; }
#pm-new-modal.open { display:flex; }
.pm-modal-card { background:var(--sf1); border:1px solid var(--bd1); border-radius:14px; padding:24px; width:100%; max-width:400px; }
.pm-modal-title { font-family:'Sora',sans-serif; font-weight:700; font-size:1.125rem; margin-bottom:16px; color:var(--t1); }
.pm-modal-field { margin-bottom:12px; }
.pm-modal-label { font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); font-weight:700; display:block; margin-bottom:4px; }
.pm-modal-input { width:100%; padding:9px 11px; background:var(--sf2); border:1px solid var(--bd1); color:var(--t1); border-radius:8px; font-family:'Barlow',sans-serif; font-size:.875rem; outline:none; box-sizing:border-box; }
.pm-modal-input:focus { border-color:var(--amber); }
.pm-color-dots { display:flex; gap:8px; }
.pm-color-dot { width:20px; height:20px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.pm-color-dot.selected { border-color:var(--t1); }
.pm-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.pm-action-input { width:100%; padding:9px 11px; background:var(--sf1); border:1px solid var(--bd1); color:var(--t1); border-radius:8px; font-family:'Barlow',sans-serif; font-size:.875rem; outline:none; margin-bottom:12px; box-sizing:border-box; }
.pm-action-input:focus { border-color:var(--amber); }
.pm-digest { font-size:.75rem; color:var(--t3); margin-top:8px; }
.pm-done-rail { border-top:1px solid var(--bd1); margin-top:12px; padding-top:8px; }
.pm-done-toggle { font-size:.6875rem; color:var(--t3); cursor:pointer; letter-spacing:.1em; text-transform:uppercase; }
.pm-done-toggle:hover { color:var(--amber); }
.pm-decision-item { padding:8px 0; border-bottom:1px solid var(--bd1); }
.pm-decision-item:last-child { border-bottom:0; }
.pm-decision-locked { font-size:.625rem; color:var(--t3); letter-spacing:.1em; text-transform:uppercase; }
.pm-session-item { border:1px solid var(--bd1); border-radius:8px; margin-bottom:8px; overflow:hidden; }
.pm-session-header { padding:8px 12px; background:var(--sf1); cursor:pointer; display:flex; align-items:center; gap:8px; font-size:.8125rem; }
.pm-session-body { padding:12px; font-size:.8125rem; color:var(--t2); display:none; line-height:1.6; }
.pm-session-item.open .pm-session-body { display:block; }
.pm-filter-strip { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.pm-filter-btn { background:var(--sf3); border:1px solid var(--bd2); border-radius:12px; padding:3px 10px; font-size:.6875rem; color:var(--t2); cursor:pointer; }
.pm-filter-btn.active { background:var(--amber-bg); color:var(--amber); border-color:var(--amber); }

/* ── KanbanDrag */
.kanban-column { transition: border-color 200ms ease-in-out, background 200ms ease-in-out; }
.kanban-column--hover { border-color: var(--amber) !important; background: var(--amber-bg) !important; }
.kanban-card--dragging { opacity: 0; }
.kanban-placeholder { opacity: 0.35; border-style: dashed !important; background: var(--amber-bg) !important; }
.kanban-drag-clone { position:fixed; left:0; top:0; z-index:9999; pointer-events:none; opacity:.78; cursor:grabbing; box-shadow:0 18px 48px rgba(0,0,0,.45); will-change:transform; }

/* ── CRM Slide-over */
#crm-slideover { position:fixed; top:0; right:0; width:380px; max-width:100vw; height:100vh; background:var(--sf1); border-left:1px solid var(--bd2); z-index:1200; transform:translateX(100%); transition:transform 280ms cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow:hidden; }
#crm-slideover.open { transform:translateX(0); }
#crm-slideover-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1199; display:none; }
#crm-slideover-overlay.open { display:block; }
.crm-so-header { padding:16px 20px; border-bottom:1px solid var(--bd1); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.crm-so-body { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:14px; }
.crm-so-field label { font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); font-weight:600; display:block; margin-bottom:4px; }
.crm-so-field input, .crm-so-field select, .crm-so-field textarea { width:100%; padding:8px 10px; background:var(--sf2); border:1px solid var(--bd1); color:var(--t1); border-radius:8px; font-family:'Barlow',sans-serif; font-size:.8125rem; outline:none; box-sizing:border-box; }
.crm-so-field textarea { resize:vertical; min-height:60px; }
.crm-so-details { background:var(--sf1); border:1px solid var(--bd1); border-radius:8px; overflow:hidden; }
.crm-so-details[open] { border-color:var(--bd2); }
.crm-so-details-summary { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; cursor:pointer; user-select:none; list-style:none; }
.crm-so-details-summary::-webkit-details-marker { display:none; }
.crm-so-details-eye { font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); font-family:'Barlow',sans-serif; }
.crm-so-details-chevron { font-size:.75rem; color:var(--t3); transition:transform .15s; }
.crm-so-details[open] .crm-so-details-chevron { transform:rotate(180deg); }
.crm-so-details-body { padding:0 14px 14px 14px; }
.crm-readiness-wrap { background:var(--sf2); border:1px solid var(--bd1); border-radius:8px; padding:10px 12px; }
.crm-readiness-track { height:6px; background:var(--sf3); border-radius:3px; overflow:hidden; }
.crm-readiness-fill { height:100%; transition:width .3s, background .3s; border-radius:3px; }
.crm-activity-entry { display:flex; gap:8px; align-items:flex-start; font-size:.8125rem; padding:8px 0; border-bottom:1px solid var(--bd1); }
.crm-activity-entry:last-child { border-bottom:0; }
.crm-activity-type { font-size:.625rem; letter-spacing:.10em; text-transform:uppercase; background:var(--sf3); border-radius:4px; padding:2px 6px; color:var(--t2); flex-shrink:0; }
.crm-activity-text { color:var(--t2); flex:1; }
.crm-activity-ts { font-size:.625rem; color:var(--t3); white-space:nowrap; }

/* ── CRM view toggle */
.crm-view-toggle { display:flex; gap:0; background:var(--sf2); border:1px solid var(--bd1); border-radius:8px; overflow:hidden; }
.crm-view-btn { padding:7px 18px; border:none; background:transparent; color:var(--t2); font-family:'Barlow',sans-serif; font-size:.8125rem; cursor:pointer; font-weight:600; transition:background .15s,color .15s; }
.crm-view-btn.active { background:var(--amber-bg); color:var(--amber); }

/* ── CRM FAB */
#crm-fab { position:fixed; bottom:80px; right:20px; z-index:1100; background:var(--amber); color:#000; border:none; border-radius:50px; padding:13px 22px; font-family:'Barlow',sans-serif; font-weight:700; font-size:.875rem; cursor:pointer; box-shadow:0 8px 24px rgba(244,244,245,.35); transition:transform .15s; }
#crm-fab:hover { transform:scale(1.05); }
#crm-fab.hidden { display:none; }

/* ── CRM kanban cards */
.crm-kanban-card { background:var(--sf2); border:1px solid var(--bd1); border-radius:10px; padding:10px 12px; cursor:grab; user-select:none; touch-action:pan-y; transition:border-color .15s; display:flex; flex-direction:column; gap:5px; }
.crm-kanban-card:hover { border-color:var(--bd2); }
.crm-card-name { font-weight:600; font-size:.875rem; color:var(--t1); }
.crm-card-company { font-size:.75rem; color:var(--t2); }
.crm-card-meta { font-size:.625rem; color:var(--t3); display:flex; justify-content:space-between; align-items:center; }
.crm-card-advance { font-size:.625rem; background:var(--sf3); border:1px solid var(--bd2); border-radius:4px; padding:2px 7px; color:var(--t2); cursor:pointer; }
.crm-card-advance:hover { background:var(--amber-bg); color:var(--amber); border-color:var(--amber); }

/* ── Phase 4 PT-08: CRM home summary widget */
.crm-summary-row { display:flex; align-items:baseline; gap:8px; padding:4px 0; }
.crm-summary-count { font-family:'Sora',sans-serif; font-size:1.5rem; font-weight:700; color:var(--amber); min-width:32px; }
.crm-summary-row:has(.crm-summary-count:empty) { display:none; }
#home-crm-overdue { color:var(--blk); }
#home-crm-today { color:var(--amber); }
#home-crm-week { color:var(--t2); }
.crm-summary-label { font-size:.75rem; color:var(--t2); text-transform:uppercase; letter-spacing:.04em; }
.crm-summary-cta { font-size:.6875rem; color:var(--amber); margin-top:8px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
#home-crm-summary { cursor:pointer; transition:transform .15s, border-color .15s; }
#home-crm-summary:hover { transform:translateY(-1px); border-color:rgba(244,244,245,0.4); }

/* ── Phase 4 PT-07: Quick filter bar chips */
.crm-filter-group-label { font-size:.625rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); font-family:'Barlow',sans-serif; margin-right:2px; }
.crm-filter-chip { padding:4px 10px; background:var(--sf2); border:1px solid var(--bd1); color:var(--t2); border-radius:5px; font-family:'Barlow',sans-serif; font-size:.75rem; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.crm-filter-chip:hover { color:var(--t1); border-color:var(--bd2); }
.crm-filter-chip.active { background:var(--amber-bg); color:var(--amber); border-color:rgba(244,244,245,0.4); }

/* ── Phase 4 PT-09: Stage card tinting (left border per stage) */
.crm-kanban-card[data-stage="lead"] { border-left:3px solid var(--t3); }
.crm-kanban-card[data-stage="prospect"] { border-left:3px solid #60a5fa; }
.crm-kanban-card[data-stage="proposal-sent"] { border-left:3px solid var(--amber); }
.crm-kanban-card[data-stage="active-client"] { border-left:3px solid var(--jade); }
.crm-kanban-card[data-stage="upgrade"] { border-left:3px solid var(--c-purple); }

/* ── CRM list table */
.crm-list-table { width:100%; border-collapse:collapse; font-size:.8125rem; }
.crm-list-table th { text-align:left; padding:8px 12px; font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); font-weight:600; border-bottom:1px solid var(--bd2); }
.crm-list-table td { padding:9px 12px; border-bottom:1px solid var(--bd1); color:var(--t2); vertical-align:middle; }
.crm-list-table tr:hover td { background:var(--sf2); }
.crm-stage-pill { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.625rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.crm-stage-lead { background:var(--sf3); color:var(--t2); }
.crm-stage-prospect { background:rgba(92,168,245,.12); color:#60a5fa; }
/* ── stage pills — all 5 stages + defensive alias */
.crm-stage-proposal-sent { background:var(--amber-bg); color:var(--amber); }
.crm-stage-active-client { background:var(--jade-bg); color:var(--jade); }
.crm-stage-upgrade { background:rgba(124,139,153,.12); color:var(--c-purple); }
.crm-stage-client { background:var(--jade-bg); color:var(--jade); }

/* ── Phase 3 — Demo Mode */
#demo-banner { display:none; position:fixed; top:0; left:0; right:0; z-index:9000; background:var(--c-blue); color:#fff; font-family:'Barlow',sans-serif; font-size:.8125rem; font-weight:700; text-align:center; padding:7px 16px; letter-spacing:.04em; align-items:center; justify-content:center; gap:12px; }
body.demo-mode #demo-banner { display:flex; }
body.demo-mode .top { top:34px; }
body.demo-mode .shell { padding-top:34px; }

/* ── Phase 3 — Final/Review hides mutation controls */
body:not(.edit-mode) #crm-fab,
body:not(.edit-mode) .pencil,
body:not(.edit-mode) .edit-only { display:none !important; }

/* ── Phase 4 — CRM archive modal + archived cards */
#crm-archive-modal { display:none; position:fixed; inset:0; z-index:2000; align-items:center; justify-content:center; background:rgba(6,6,10,.82); }
#crm-archive-modal.open { display:flex; }
.crm-archived-card { background:var(--sf1); border:1px solid var(--bd1); border-radius:10px; padding:10px 14px; opacity:.6; width:180px; cursor:pointer; transition:opacity .15s; }
.crm-archived-card:hover { opacity:1; }
.crm-archived-card-name { font-weight:700; font-size:.875rem; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-archived-card-meta { font-size:.6875rem; color:var(--t3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-archived-card-reason { font-size:.625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); margin-top:5px; }

/* ── Phase 4 (PT-02) — CRM stage transition modal */
#crm-stage-transition-modal { display:none; position:fixed; inset:0; z-index:2000; align-items:center; justify-content:center; background:rgba(6,6,10,.82); }
#crm-stage-transition-modal.open { display:flex; }
#crm-stage-transition-modal .pm-arch-card { width:420px; }
.crm-st-label { display:block; font-size:.75rem; color:var(--t2); margin-bottom:8px; font-family:'Barlow',sans-serif; }
.crm-st-label input[type="checkbox"] { margin-right:6px; vertical-align:middle; }
.crm-st-label .pm-arch-input { margin-top:4px; font-size:.8125rem; padding:8px 10px; }
#crm-st-fields { display:flex; flex-direction:column; gap:10px; }

/* ── Phase 3 — Archive session modal */
#pm-archive-modal { display:none; position:fixed; inset:0; z-index:2000; align-items:center; justify-content:center; background:rgba(6,6,10,.82); }
#pm-archive-modal.open { display:flex; }
.pm-arch-card { background:var(--sf2); border:1px solid var(--bd2); border-radius:var(--r); padding:24px 28px; width:340px; max-width:92vw; display:flex; flex-direction:column; gap:14px; }
.pm-arch-title { font-family:'Sora',sans-serif; font-size:1rem; font-weight:700; color:var(--t1); }
.pm-arch-sub { font-size:.75rem; color:var(--t3); margin-top:-8px; }
.pm-arch-input { width:100%; padding:10px 12px; background:var(--sf1); border:1px solid var(--bd1); color:var(--t1); border-radius:8px; font-family:'Barlow',sans-serif; font-size:.875rem; outline:none; box-sizing:border-box; }
.pm-arch-actions { display:flex; gap:8px; justify-content:flex-end; }
.pm-arch-btn-primary { background:var(--amber); color:#000; border:none; border-radius:6px; padding:8px 20px; font-family:'Barlow',sans-serif; font-weight:700; font-size:.8125rem; cursor:pointer; }
.pm-arch-btn-cancel { background:transparent; color:var(--t2); border:1px solid var(--bd2); border-radius:6px; padding:8px 16px; font-family:'Barlow',sans-serif; font-size:.8125rem; cursor:pointer; }

/* ── Phase 3 — LPDB status */
#lpdb-status { font-size:.625rem; letter-spacing:.08em; color:var(--t3); transition:color .4s; }
#lpdb-status.ready { color:var(--jade); }
#demoBtn.demo-on { color:var(--c-blue) !important; }

/* ============================================================
   PHASE 4 SHELL — reference-matched components (DESIGN.md §4)
   ============================================================ */

/* ---- sidebar org-switcher block (top of aside) */
.side-org {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; padding: var(--s2);
  background: transparent; border: 1px solid var(--bd1); border-radius: var(--r2);
  color: var(--t1); font-family: var(--font-body); font-size: var(--f13); font-weight: 600;
  cursor: pointer; margin-bottom: var(--s3);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform 140ms var(--ease-out);
}
.side-org:hover { background: var(--sf3); border-color: var(--bd2); }
.side-org:active { transform: scale(0.98); }
.side-org .org-avatar {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  background: var(--amber); color: var(--amber-ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--f11);
}
.side-org .org-name { line-height: 1.2; text-align: left; }
.side-org .org-role { display: block; font-size: var(--f10); color: var(--t3); font-weight: 500; }
.side-org svg { margin-left: auto; color: var(--t3); }

/* ---- sidebar search pill */
.side-search {
  display: flex; align-items: center; gap: var(--s2);
  padding: 7px var(--s3); margin-bottom: var(--s2);
  background: var(--sf3); border: 1px solid var(--bd1); border-radius: 999px;
  color: var(--t3); font-size: var(--f13); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.side-search:hover { border-color: var(--bd2); color: var(--t2); }
.side-search kbd {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--f10);
  background: var(--sf1); border: 1px solid var(--bd1); border-radius: 5px; padding: 1px 5px;
}

/* ---- Chiron pin + user card (bottom of aside) */
.side-bottom { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--bd1); }
.chiron-pin {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2); border-radius: var(--r2);
  border: 1px solid var(--bd1);
  color: var(--t2); font-size: var(--f13); font-weight: 600; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chiron-pin:hover { background: var(--sf3); border-color: var(--bd2); color: var(--t1); }
.chiron-pin:active { transform: scale(0.98); }
.chiron-pin svg { color: var(--amber); flex-shrink: 0; }
.chiron-pin .chiron-sub { display: block; font-size: var(--f10); color: var(--t3); font-weight: 500; }
.side-user {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2); margin-top: var(--s2); border-radius: var(--r2);
}
.side-user .u-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--sf3); border: 1px solid var(--bd2); color: var(--t2);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--f10);
}
.side-user .u-name { font-size: var(--f13); font-weight: 600; color: var(--t1); line-height: 1.2; }
.side-user .u-mail { font-size: var(--f10); color: var(--t3); font-family: var(--font-mono); }
.side-user .u-out {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--t3); display: grid; place-items: center; padding: 6px; border-radius: 6px;
}
.side-user .u-out:hover { color: var(--risk); background: var(--sf3); }

/* ---- reference stat cards */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); }
.stat-card {
  background: var(--sf2); border: 1px solid var(--bd1); border-radius: var(--r);
  padding: 20px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.stat-card:hover { border-color: var(--bd2); }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--s3); }
.stat-label { font-size: var(--f13); color: var(--t2); font-weight: 500; }
.stat-chip {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
}
.stat-chip svg { width: 15px; height: 15px; }
.stat-chip.c-neutral { background: rgba(124,139,153,0.14); color: var(--t2); }
.stat-chip.c-ok      { background: rgba(62,207,142,0.12);  color: var(--ok); }
.stat-chip.c-info    { background: rgba(92,168,245,0.12);  color: var(--info); }
.stat-chip.c-amber   { background: var(--amber-bg);        color: var(--amber); }
.stat-chip.c-purple  { background: var(--g-purple);        color: var(--c-purple); }
.stat-chip.c-warn    { background: rgba(232,132,60,0.12);  color: var(--warn); }
.stat-value {
  font-family: var(--font-display); font-size: var(--f28); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--t1);
}
.stat-delta { display: flex; align-items: center; gap: 5px; margin-top: var(--s2); font-size: var(--f11); }
.stat-delta .d-up   { color: var(--ok);   font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.stat-delta .d-down { color: var(--risk); font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.stat-delta .d-ctx  { color: var(--t3); }

/* ---- charts row (Revenue area + Pipeline donut) */
.charts-row { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s4); }
@media (max-width: 1024px) { .charts-row { grid-template-columns: 1fr; } }
.chart-card {
  background: var(--sf2); border: 1px solid var(--bd1); border-radius: var(--r);
  padding: 20px; min-width: 0;
}
.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.chart-title { font-family: var(--font-display); font-size: var(--f17); font-weight: 700; color: var(--t1); }
.chart-range {
  font-size: var(--f11); color: var(--t2); background: var(--sf3);
  border: 1px solid var(--bd1); border-radius: var(--r2); padding: 5px 10px;
  font-family: var(--font-body); cursor: pointer;
}
.chart-link { font-size: var(--f11); color: var(--t2); font-weight: 600; }
.chart-link:hover { color: var(--amber); }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg text { font-family: var(--font-mono); font-size: 10px; fill: var(--t3); }
.donut-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.donut-legend .lg { display: flex; align-items: center; gap: 6px; font-size: var(--f11); color: var(--t2); }
.donut-legend .lg i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.donut-center-num {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; fill: var(--t1);
}
.donut-center-cap { font-family: var(--font-body); font-size: 9px; fill: var(--t3); }

/* ---- page-load stagger (one orchestrated moment; transform+opacity only) */
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.section.active .stagger { animation: rise-in var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }

/* ---- login overlay (cockpit auth) */
.login-wrap {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: var(--bg);
}
.login-wrap.show { display: flex; }
.login-card {
  width: min(400px, calc(100vw - 48px));
  background: var(--sf2); border: 1px solid var(--bd1); border-radius: 16px;
  padding: var(--s8); position: relative;
}
.login-horizon {
  position: fixed; left: 50%; top: 0; transform: translateX(-50%);
  width: min(900px, 100vw); height: 260px; pointer-events: none;
  background: radial-gradient(55% 100% at 50% 0%, var(--brand-amber-glow), transparent 70%);
}
.login-title { font-family: var(--font-display); font-size: var(--f22); font-weight: 700; margin: var(--s3) 0 var(--s1); }
.login-title .tt { color: var(--t3); font-weight: 600; }
.login-sub { color: var(--t2); font-size: var(--f13); margin-bottom: var(--s6); }
.login-field { margin-bottom: var(--s4); }
.login-field label { display: block; font-size: var(--f11); font-weight: 600; color: var(--t2); margin-bottom: 6px; }
.login-field input {
  width: 100%; height: 40px; padding: 0 var(--s3);
  background: var(--sf3); border: 1px solid var(--bd2); border-radius: var(--r2);
  color: var(--t1); font-family: var(--font-body); font-size: var(--f14);
}
.login-err { color: var(--risk); font-size: var(--f11); margin: calc(-1 * var(--s2)) 0 var(--s3); display: none; }
.login-err.show { display: block; }
.login-btn {
  width: 100%; height: 40px; border: 0; border-radius: var(--r2);
  background: var(--amber); color: var(--amber-ink);
  font-family: var(--font-body); font-weight: 600; font-size: var(--f14); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform 140ms var(--ease-out);
}
.login-btn:hover { background: var(--amber-dim); }
.login-btn:active { transform: scale(0.98); }
.login-btn[disabled] { opacity: .6; cursor: default; }

/* ---- org-switch re-context (signature): brief crossfade of the surface */
@keyframes org-recontext { from { opacity: 0; } to { opacity: 1; } }
.org-switching main, .org-switching aside { animation: org-recontext var(--dur-slow) var(--ease-out); }
@keyframes scope-pulse {
  0% { box-shadow: 0 0 0 0 var(--amber-glow); }
  100% { box-shadow: 0 0 0 12px rgba(244,244,245,0); }
}
.org-switching .side-org .org-avatar { animation: scope-pulse var(--dur-slow) var(--ease-out); }

/* ---- reduced motion: crossfade only, no movement */
@media (prefers-reduced-motion: reduce) {
  .section.active .stagger { animation: none; }
  .org-switching main, .org-switching aside { animation: none; }
  .org-switching .side-org .org-avatar { animation: none; }
}

/* ---- org-switch now lives in the sidebar: menu expands IN FLOW (aside
   scrolls with overflow-y:auto, so an absolute dropdown would be clipped) */
.org-switch { position: static; }
.org-switch .org-menu {
  position: static; display: none; min-width: 0;
  margin: 0 0 var(--s3); padding: var(--s1);
  max-height: 320px; overflow-y: auto;
  box-shadow: none; border-radius: var(--r2);
}
.org-switch.open .org-menu { display: block; }
.org-mark {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: var(--sf3); color: var(--t2);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--f10);
}
.org-option.active .org-mark, .org-option:first-child .org-mark { background: var(--amber); color: var(--amber-ink); }
.org-check { margin-left: auto; color: var(--amber); display: grid; place-items: center; }

/* org-switcher: per-org "Open Client Portal" SSO button (2026-07-09) */
.org-right { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
.org-right .org-check { margin-left: 0; }
.org-portal { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--r2); background: transparent; color: var(--t3); cursor: pointer; }
.org-portal:hover { background: var(--sf3); color: var(--t1); }