/* ============================================================
   DESIGN TOKENS — OKLCH dark palette, hub-matched navy tint
   Surface hue: 250° | Accent: LP amber 72° | Direction: Command
   ============================================================ */
:root {
  /* Surfaces — hub-matched palette */
  --bg:     #06060a;
  --sf1:    #0d0d12;
  --sf2:    #13131a;
  --sf3:    #1a1a24;
  --bd1:    #1c1c28;
  --bd2:    #2a2a3a;

  /* Text */
  --t1: #f0f0f0;
  --t2: #a0a0b0;
  --t3: #555570;

  /* LP amber — primary accent */
  --amber:      #f59e0b;
  --amber-dim:  #d48a09;
  --amber-deep: #b37408;
  --amber-bg:   rgba(245,158,11,0.10);
  --amber-glow: rgba(245,158,11,0.22);

  /* Jade — success / done */
  --jade:      #10b981;
  --jade-dim:  #0d9e6e;
  --jade-deep: #0a8059;
  --jade-bg:   rgba(16,185,129,0.10);
  --jade-glow: rgba(16,185,129,0.20);

  /* Extra accents */
  --c-blue:   #3b82f6;
  --g-blue:   rgba(59,130,246,0.15);
  --c-purple: #a855f7;
  --g-purple: rgba(168,85,247,0.15);

  /* Status */
  --done:     #10b981;
  --done-bg:  rgba(16,185,129,0.09);
  --prog:     #f59e0b;
  --prog-bg:  rgba(245,158,11,0.09);
  --blk:      #ef4444;
  --blk-bg:   rgba(239,68,68,0.09);
  --muted:    #a855f7;
  --muted-bg: rgba(168,85,247,0.09);

  /* 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: 14px; --r2: 10px;
  --shadow: 0 8px 28px rgba(0,0,0,0.36);
}

/* ============================================================ LIGHT MODE — warm cream / parchment */
html[data-theme="light"] {
  --bg:     #f8f4ed;
  --sf1:    #f0ebe0;
  --sf2:    #e8e0d2;
  --sf3:    #ddd4c2;
  --bd1:    #c8bfaa;
  --bd2:    #b5a98e;
  --t1: #1a1a0e;
  --t2: #3a3020;
  --t3: #6a5e45;
  --amber:      #b37408;
  --amber-dim:  #9a6307;
  --amber-deep: #7d5006;
  --amber-bg:   rgba(179,116,8,0.10);
  --amber-glow: rgba(179,116,8,0.18);
  --jade:      #0a8059;
  --jade-dim:  #087049;
  --jade-deep: #065c3c;
  --jade-bg:   rgba(10,128,89,0.10);
  --jade-glow: rgba(10,128,89,0.18);
  --done:     #0a8059;
  --done-bg:  rgba(10,128,89,0.10);
  --prog:     #b37408;
  --prog-bg:  rgba(179,116,8,0.10);
  --blk:      #cc2222;
  --blk-bg:   rgba(204,34,34,0.10);
  --muted:    #7c3aed;
  --muted-bg: rgba(124,58,237,0.10);
  --shadow: 0 8px 28px rgba(0,0,0,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: 'Barlow', system-ui, sans-serif;
  font-size: var(--f14);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--amber); text-decoration: none; }
h1, h2, h3 { font-family: 'Sora', sans-serif; line-height: 1.15; }

/* ============================================================ AUTH GATE */
#auth-gate {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: var(--s4);
}
.ag-card {
  background: var(--sf1);
  border: 1px solid var(--bd1);
  border-radius: 14px;
  padding: var(--s8) var(--s6);
  max-width: 360px; width: 100%;
  box-shadow: var(--shadow);
}
.ag-brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.ag-mark {
  width: 36px; height: 36px; 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(--f13); letter-spacing: .04em;
}
.ag-title { font-family: 'Sora', sans-serif; font-size: var(--f17); font-weight: 700; letter-spacing: .01em; }
.ag-sub { font-size: var(--f10); letter-spacing: .18em; text-transform: uppercase; color: var(--t3); font-weight: 600; margin-top: 2px; }
.ag-label { font-size: var(--f13); color: var(--t2); margin-bottom: var(--s1); display: block; margin-top: var(--s4); }
#auth-gate input {
  width: 100%; padding: var(--s3) var(--s3);
  border: 1px solid var(--bd1); background: var(--sf2);
  color: var(--t1); border-radius: var(--r2);
  font-size: var(--f14); font-family: 'Barlow', sans-serif;
  outline: none; letter-spacing: .04em;
}
#auth-gate input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--jade-bg); }
#auth-gate button {
  width: 100%; margin-top: var(--s3); padding: var(--s3);
  background: #f59e0b; color: #000;
  border: none; border-radius: var(--r2);
  font-family: 'Barlow', sans-serif; font-weight: 800; font-size: var(--f14);
  cursor: pointer; letter-spacing: .02em;
  transition: background 0.2s;
}
#auth-gate button:hover { background: #d48a09; }
.ag-err { color: var(--blk); font-size: var(--f11); margin-top: var(--s2); min-height: 14px; }
.ag-foot { font-size: var(--f10); color: var(--t3); text-align: center; margin-top: var(--s4); letter-spacing: .08em; }

/* ============================================================ TOP BAR */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6,6,10,0.94);
  backdrop-filter: blur(12px);
  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 rgba(245,158,11,0.15);
  box-shadow: 0 0 40px rgba(245,158,11,0.04);
  border-radius: var(--r); padding: var(--s3);
  position: sticky; top: 62px;
  max-height: calc(100vh - 78px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #2a2a3a transparent;
}
@media (max-width: 900px) { aside { position: static; max-height: none; } }
.nav-group { margin-bottom: var(--s2); }
.nav-group-label {
  font-size: var(--f10); letter-spacing: .22em; text-transform: uppercase;
  color: var(--t3); font-weight: 600;
  padding: var(--s2) var(--s2) var(--s1); font-family: 'Barlow', sans-serif;
}
.nav-item {
  display: flex; align-items: center; gap: var(--s2);
  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: 'Barlow', sans-serif;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--sf2); color: #f59e0b; }
.nav-item.active {
  background: rgba(245,158,11,0.12); color: #f59e0b;
  border-left: 3px solid #f59e0b;
  box-shadow: 0 0 20px rgba(245,158,11,0.18), inset 0 0 8px rgba(245,158,11,0.05);
}
.nav-num {
  font-size: var(--f10); color: var(--t3); letter-spacing: .06em;
  font-weight: 600; min-width: 20px; font-family: 'Sora', sans-serif;
}
.nav-item.active .nav-num { color: var(--jade-dim); }
.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 */
.header-card {
  background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(245,158,11,0.02) 60%, transparent);
  border: 1px solid rgba(245,158,11,0.40);
  border-radius: var(--r); padding: var(--s4) var(--s6);
  box-shadow: 0 0 40px rgba(245,158,11,0.12), inset 0 1px 0 rgba(245,158,11,0.10);
}
.h-eye {
  font-size: var(--f10); letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber); font-weight: 600; font-family: 'Barlow', sans-serif; margin-bottom: var(--s1);
}
.h-title {
  font-family: 'Sora', sans-serif; font-size: var(--f22); font-weight: 700;
  letter-spacing: -.01em; color: var(--t1); margin-bottom: var(--s1);
}
.h-sub { color: var(--t2); font-size: var(--f13); max-width: 72ch; }

/* ============================================================ 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 rgba(245,158,11,0.20);
  box-shadow: 0 0 28px 0 rgba(245,158,11,0.06), 0 0 0 1px rgba(245,158,11,0.04);
  border-radius: var(--r); padding: var(--s4);
  position: relative; overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.25s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(245,158,11,0.50);
  box-shadow: 0 0 48px 0 rgba(245,158,11,0.18), 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(245,158,11,0.12);
}
.card-eye {
  font-size: var(--f10); letter-spacing: .20em; text-transform: uppercase;
  color: var(--amber); font-weight: 600; margin-bottom: var(--s2);
  font-family: 'Barlow', sans-serif;
}
.card h3 {
  font-family: 'Sora', sans-serif; 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 rgba(245,158,11,0.20);
  box-shadow: 0 0 20px rgba(245,158,11,0.06);
  border-radius: var(--r2); padding: var(--s3) var(--s3);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.kpi:hover {
  border-color: rgba(245,158,11,0.40);
  box-shadow: 0 0 30px rgba(245,158,11,0.12);
}
.kpi-label {
  font-size: var(--f10); letter-spacing: .16em; text-transform: uppercase;
  color: var(--t3); font-weight: 600; font-family: 'Barlow', sans-serif;
}
.kpi-value {
  font-family: 'Sora', sans-serif; font-size: var(--f22); font-weight: 700;
  margin-top: var(--s1); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kpi-sub { font-size: var(--f11); color: var(--amber); margin-top: 3px; font-weight: 500; }

/* ============================================================ NOTE */
.note {
  background: rgba(168,85,247,0.06); border: 1px solid rgba(168,85,247,0.24);
  border-radius: var(--r2); padding: var(--s3);
  color: var(--muted); 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(245,158,11,0.22);
  border-radius: var(--r); padding: var(--s4);
  box-shadow: 0 0 30px rgba(245,158,11,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(245,158,11,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(245,158,11,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(245,158,11,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(245,158,11,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(245,158,11,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(245,158,11,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(59,130,246,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(59,130,246,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(245,158,11,0.22); }
.pm-pill.stale { animation:stale-pulse 2s infinite; }
@keyframes stale-pulse { 0%,100% { border-color:rgba(245,158,11,0.2); } 50% { border-color:rgba(245,158,11,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(245,158,11,.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(245,158,11,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(245,158,11,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(59,130,246,.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(168,85,247,.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; }