/* ═══════════════════════════════════════════════════════════════════════
   Lazarus Tracker — Visual System
   Dense + elegant ops UI. Inter type, deep navy on cool white.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Colors — navy gradient with cool greys */
  --navy-900: #0f1d3a;
  --navy-800: #1a2b50;
  --navy-700: #243964;
  --navy-600: #2f4f8a;
  --navy-500: #3f6bb8;
  --accent: #4f8df7;
  --accent-hover: #2670e8;

  --ink-900: #0a0f1c;
  --ink-700: #1f2937;
  --ink-500: #4b5563;
  --ink-400: #6b7280;
  --ink-300: #9ca3af;
  --ink-200: #d1d5db;
  --ink-100: #e5e7eb;
  --ink-50: #f3f4f6;

  --bg: #f8fafc;
  --bg-alt: #f1f5f9;
  --surface: #ffffff;
  --surface-hover: #f8fafc;

  /* Functional colors */
  --green: #16a34a;
  --green-light: #dcfce7;
  --green-bg: #f0fdf4;
  --red: #dc2626;
  --red-light: #fee2e2;
  --red-bg: #fef2f2;
  --amber: #f59e0b;
  --amber-light: #fef3c7;
  --amber-bg: #fffbeb;
  --purple: #8b5cf6;
  --purple-light: #ede9fe;
  --purple-bg: #faf5ff;

  /* Track colors */
  --t-codebase: #3b82f6;
  --t-codebase-bg: #eff6ff;
  --t-legacy: #f59e0b;
  --t-legacy-bg: #fffbeb;
  --t-questionnaire: #ea580c;
  --t-questionnaire-bg: #fff7ed;
  --t-bd: #be185d;
  --t-bd-bg: #fdf2f8;
  --t-referral: #8b5cf6;
  --t-referral-bg: #faf5ff;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
  --shadow-drawer: -20px 0 60px -10px rgb(0 0 0 / 0.30);

  /* Type scale */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;

  /* Animation */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  min-height: 100vh;   /* themed bg fills the viewport even on short tabs (e.g. Data Requests) */
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink-900);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--accent-hover); }

/* ═══════════════════════════════════════════════════════════════════════
   Topbar — navy gradient, generous height, prominent tabs
   ═══════════════════════════════════════════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
  box-shadow: var(--shadow-md);
  padding: 0;
}
.topbar-inner {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 32px;
  padding: 14px 28px;
  max-width: 1800px; margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo { height: 24px; width: auto; display: block; }
.brand-divider { width: 1px; height: 26px; background: rgba(255,255,255,0.22); }
.brand-mark {
  font-size: 28px; line-height: 1; color: var(--accent);
  filter: drop-shadow(0 0 12px rgba(79, 141, 247, 0.45));
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-weight: 700; color: #fff; font-size: 17px; letter-spacing: -0.01em; }
.brand-sub { color: rgba(255,255,255,0.55); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }

/* Tab nav — large, prominent, satisfying */
.tab-nav {
  display: inline-flex; align-self: center; justify-self: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.30);
}
.tab-btn {
  background: transparent; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.65);
  border-radius: 7px;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.tab-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.tab-btn:active { transform: scale(0.97); }
.tab-btn.active {
  background: linear-gradient(180deg, var(--accent) 0%, #3b78d8 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.18);
  font-weight: 600;
}
.tab-icon { font-size: 15px; line-height: 1; }
.tab-text { letter-spacing: -0.01em; }

/* Topbar actions */
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.badge-count {
  background: rgba(79, 141, 247, 0.22); color: rgba(255,255,255,0.95);
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(79, 141, 247, 0.35);
}
.refreshed-text { color: rgba(255,255,255,0.55); font-size: 11px; }
.operator-input {
  background: rgba(255,255,255,0.10); color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 5px 11px; border-radius: 999px;
  font: inherit; font-size: 12px; width: 130px;
  transition: background var(--dur-fast) var(--ease);
}
.operator-input::placeholder { color: rgba(255,255,255,0.45); }
.operator-input:focus { background: rgba(255,255,255,0.18); border-color: var(--accent); outline: none; }
.operator-input.has-value { background: rgba(79, 141, 247, 0.22); border-color: rgba(79, 141, 247, 0.45); }

.icon-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; cursor: pointer; font-size: 15px;
  transition: all var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.20); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0); }
/* Light-surface variant: .icon-btn above is tuned for the navy topbar, but the
   class is reused in modal headers (close X) and table cells (QA "Open lead" ↗),
   which are white in light mode — the white-alpha colors were invisible there.
   Declared before the body.dark .icon-btn override so dark mode still wins. */
.modal-header .icon-btn, td .icon-btn {
  color: var(--ink-500);
  border-color: var(--ink-200);
  background: var(--ink-50);
}
.modal-header .icon-btn:hover, td .icon-btn:hover {
  color: var(--ink-700);
  border-color: var(--ink-300);
  background: var(--ink-100);
}

.btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, #3b78d8 100%);
  color: #fff; border: none; font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 7px; cursor: pointer;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.20);
  transition: all var(--dur-fast) var(--ease);
}
.btn-primary:hover { background: linear-gradient(180deg, #5e9bff 0%, #4683e8 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79, 141, 247, 0.35); }
.btn-primary:active { transform: translateY(0); }
.refresh-icon { display: inline-block; transition: transform 0.4s var(--ease-out); }
.btn-primary:hover .refresh-icon { transform: rotate(180deg); }

.btn-ghost {
  background: transparent; border: 1px solid var(--ink-200);
  color: var(--ink-500); font: inherit; font-size: 12px;
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.btn-ghost:hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-700); }

/* ═══════════════════════════════════════════════════════════════════════
   Tab panes
   ═══════════════════════════════════════════════════════════════════════ */
.tab-pane { animation: fadeIn var(--dur-slow) var(--ease-out); }
.tab-pane.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   Filter bar
   ═══════════════════════════════════════════════════════════════════════ */
.filterbar {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end;
  background: var(--surface); padding: 14px 28px;
  border-bottom: 1px solid var(--ink-100);
  position: sticky; top: 60px; z-index: 50;
}
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-grow { flex: 1; min-width: 250px; }
.filter-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-400); font-weight: 600;
}

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--ink-200); background: var(--surface); color: var(--ink-700);
  padding: 5px 12px; border-radius: 999px;
  font: inherit; font-size: 12px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.chip:hover { background: var(--ink-50); border-color: var(--ink-300); transform: translateY(-1px); }
.chip:active { transform: translateY(0); }
.chip.active {
  background: var(--navy-900); color: #fff; border-color: var(--navy-900);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(15, 29, 58, 0.25);
}

.search, .select {
  border: 1px solid var(--ink-200); background: var(--surface);
  padding: 7px 12px; border-radius: 7px; font: inherit; font-size: 13px;
  min-width: 220px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.search:focus, .select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 141, 247, 0.18);
}
.select { min-width: 170px; cursor: pointer; }
.search { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   Content + status banner
   ═══════════════════════════════════════════════════════════════════════ */
.content { padding: 18px 28px 60px; }
.status-banner {
  padding: 10px 16px; border-radius: 8px; margin-bottom: 14px;
  display: none; font-size: 13px;
}
.status-banner.show { display: block; animation: slideDown var(--dur) var(--ease-out); }
.status-banner.error { background: var(--red-bg); border: 1px solid var(--red-light); color: var(--red); }
.status-banner.info { background: #eef6ff; border: 1px solid #c6dbff; color: #1e40af; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.banner-info {
  margin: 12px 28px 0;
  padding: 11px 16px; border-radius: 8px;
  background: var(--amber-bg); border-left: 3px solid var(--amber); color: #92400e;
  font-size: 12px;
}
.banner-info strong { color: #78350f; }

/* ═══════════════════════════════════════════════════════════════════════
   Stats bar (Leads tab)
   ═══════════════════════════════════════════════════════════════════════ */
.stats-bar {
  display: flex; gap: 8px; padding: 14px 28px;
  background: var(--surface); border-bottom: 1px solid var(--ink-100);
  overflow-x: auto;
}
.stat-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 14px; border-radius: 8px;
  background: var(--bg-alt); border: 1px solid var(--ink-100);
  min-width: 100px;
  transition: all var(--dur-fast) var(--ease);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card .stat-label { font-size: 10px; color: var(--ink-400); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.stat-card .stat-value { font-size: 18px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }

.stat-card.t-Codebase, .stat-card.t-Codebase-Modern { background: var(--t-codebase-bg); border-color: rgba(59, 130, 246, 0.25); }
.stat-card.t-Codebase-Legacy { background: var(--t-legacy-bg); border-color: rgba(245, 158, 11, 0.25); }
.stat-card.t-Legacy-Questionnaire { background: var(--t-questionnaire-bg); border-color: rgba(234, 88, 12, 0.25); }
.stat-card.t-Business-Data { background: var(--t-bd-bg); border-color: rgba(190, 24, 93, 0.25); }
.stat-card.t-Referral { background: var(--t-referral-bg); border-color: rgba(139, 92, 246, 0.25); }

/* ═══════════════════════════════════════════════════════════════════════
   Tables
   ═══════════════════════════════════════════════════════════════════════ */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--ink-100); border-radius: 10px;
  overflow: auto; box-shadow: var(--shadow-sm);
}
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
tbody td { overflow: hidden; text-overflow: ellipsis; }
tbody td .cell-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tbody td .cell-context, tbody td .connectors-list { white-space: normal; overflow: visible; }
thead th {
  background: var(--navy-900); color: rgba(255,255,255,0.95); text-align: left;
  padding: 10px 14px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  position: sticky; top: 0; z-index: 5;
  white-space: nowrap; font-weight: 600;
  border-bottom: 1px solid var(--navy-700);
}

.density-compact tbody td { padding: 7px 14px; font-size: 12.5px; line-height: 1.35; }
.density-comfortable tbody td { padding: 12px 14px; font-size: 13px; line-height: 1.5; }
tbody td { border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
tbody tr {
  transition: background var(--dur-fast) var(--ease);
  cursor: pointer;
}
tbody tr:hover {
  background: var(--bg-alt);
  box-shadow: inset 3px 0 0 var(--accent);
}
tbody tr.placeholder { color: var(--ink-300); text-align: center; cursor: default; }
tbody tr.placeholder td { padding: 60px 16px; font-size: 14px; }
tbody tr.placeholder:hover { background: var(--surface); box-shadow: none; }

/* Row tints by track */
tbody tr.r-Codebase, tbody tr.r-Codebase-Modern { background: rgba(239, 246, 255, 0.45); }
tbody tr.r-Codebase-Legacy { background: rgba(255, 251, 235, 0.55); }
tbody tr.r-Legacy-Questionnaire { background: rgba(255, 247, 237, 0.55); }
tbody tr.r-Business-Data { background: rgba(253, 242, 248, 0.55); }
tbody tr.r-Referral { background: rgba(250, 245, 255, 0.55); }
tbody tr.fresh-24h td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tbody tr.stale-30d { opacity: 0.7; }

/* Type pill */
.type-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  white-space: nowrap; letter-spacing: 0.01em;
  text-transform: none;
}
.type-Codebase, .type-Codebase-Modern { background: var(--t-codebase-bg); color: var(--t-codebase); border: 1px solid rgba(59, 130, 246, 0.25); }
.type-Codebase-Legacy { background: var(--t-legacy-bg); color: var(--t-legacy); border: 1px solid rgba(245, 158, 11, 0.30); }
.type-Legacy-Questionnaire { background: var(--t-questionnaire-bg); color: var(--t-questionnaire); border: 1px solid rgba(234, 88, 12, 0.30); }
.type-Business-Data { background: var(--t-bd-bg); color: var(--t-bd); border: 1px solid rgba(190, 24, 93, 0.30); }
.type-Referral { background: var(--t-referral-bg); color: var(--t-referral); border: 1px solid rgba(139, 92, 246, 0.30); }
.type-Unknown { background: var(--ink-50); color: var(--ink-500); border: 1px solid var(--ink-200); }

/* Columns sized */
.col-type { width: 140px; }
.col-founder { width: 210px; }
.col-company { width: 180px; }
.col-industry { width: 130px; }
.col-fte { width: 70px; text-align: right; }
.col-payout { width: 110px; }
.col-repos { width: 65px; text-align: right; }
.col-prs { width: 65px; text-align: right; }
.col-connectors { width: 220px; }
.col-signals { width: 160px; }
.col-inbound { width: 145px; white-space: nowrap; }
.col-actions { width: 80px; text-align: center; }

.cell-name { font-weight: 600; color: var(--ink-900); }
.cell-email { font-size: 11px; color: var(--ink-400); margin-top: 1px; }
.cell-na { color: var(--ink-300); }

.badge {
  display: inline-block; padding: 1.5px 7px; border-radius: 6px;
  font-size: 10px; font-weight: 600; margin-right: 4px; margin-bottom: 2px;
}
.b-bd { background: var(--t-bd-bg); color: var(--t-bd); }
.b-code { background: var(--t-codebase-bg); color: var(--t-codebase); }
.b-artifact { background: var(--green-light); color: var(--green); }
.b-stale { background: var(--red-light); color: var(--red); }
.b-fresh { background: #dbeafe; color: #1d4ed8; }
.b-missing { background: var(--ink-50); color: var(--ink-500); }
.connectors-list { font-size: 11px; line-height: 1.45; color: var(--ink-700); }
.cell-context { font-size: 11.5px; line-height: 1.45; color: var(--ink-700); white-space: normal; }
.inbound-date { font-variant-numeric: tabular-nums; color: var(--ink-700); font-size: 11.5px; }
.inbound-rel { font-size: 10px; color: var(--ink-400); margin-top: 1px; }

.actions-cell { display: flex; gap: 3px; justify-content: center; }
.actions-cell a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px;
  color: var(--ink-500); font-size: 13px;
  transition: all var(--dur-fast) var(--ease);
}
.actions-cell a:hover { background: var(--ink-50); color: var(--accent); transform: scale(1.1); }

/* ═══════════════════════════════════════════════════════════════════════
   Control surface
   ═══════════════════════════════════════════════════════════════════════ */
.ctl-funnel { width: 130px; }
.ctl-auto { width: 130px; }
.ctl-manual { width: 145px; }
.ctl-reason { width: 160px; }
.ctl-final { width: 150px; }
.ctl-preview { width: 220px; }
.ctl-notes { width: 200px; }

.funnel-pill {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.f-intake { background: var(--ink-50); color: var(--ink-500); border-color: var(--ink-100); }
.f-awaiting_verdict { background: var(--amber-bg); color: #92400e; border-color: rgba(245, 158, 11, 0.25); }
.f-decision_pending { background: #fff7ed; color: #c2410c; border-color: rgba(234, 88, 12, 0.25); }
.f-outcome_set { background: var(--green-bg); color: var(--green); border-color: rgba(22, 163, 74, 0.25); }
.f-closed { background: var(--ink-50); color: var(--ink-700); border-color: var(--ink-200); }

.ctl-select, .ctl-text {
  border: 1px solid var(--ink-200); background: var(--surface); padding: 5px 9px;
  border-radius: 6px; font: inherit; font-size: 12px; width: 100%;
  transition: all var(--dur-fast) var(--ease);
  color: var(--ink-700);
}
.ctl-select { cursor: pointer; }
.ctl-select:hover, .ctl-text:hover { border-color: var(--accent); }
.ctl-select:focus, .ctl-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 141, 247, 0.15); }
/* "Set" just adds weight; colour comes from the semantic tone classes below. */
.ctl-select.dirty { font-weight: 600; }

/* Semantic tone palette for control dropdowns (makeSelect + bulk selects).
   Soft, low-saturation fills matched to the app's QA-stage / priority colours
   so a value reads at a glance without being garish. */
.ctl-select.tone-neutral,  .ctl-bulk-select.tone-neutral  { background: rgba(100, 116, 139, 0.10); border-color: rgba(100, 116, 139, 0.40); color: #475569; }
.ctl-select.tone-progress, .ctl-bulk-select.tone-progress { background: rgba(99, 102, 241, 0.10); border-color: rgba(99, 102, 241, 0.40); color: #4338ca; }
.ctl-select.tone-positive, .ctl-bulk-select.tone-positive { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.38); color: #15803d; }
.ctl-select.tone-warn,     .ctl-bulk-select.tone-warn     { background: rgba(245, 158, 11, 0.11); border-color: rgba(245, 158, 11, 0.44); color: #b45309; }
.ctl-select.tone-negative, .ctl-bulk-select.tone-negative { background: rgba(244, 63, 94, 0.10); border-color: rgba(244, 63, 94, 0.42); color: #be123c; }
body.dark .ctl-select.tone-neutral,  body.dark .ctl-bulk-select.tone-neutral  { background: rgba(148, 163, 184, 0.14); border-color: rgba(148, 163, 184, 0.42); color: #cbd5e1; }
body.dark .ctl-select.tone-progress, body.dark .ctl-bulk-select.tone-progress { background: rgba(129, 140, 248, 0.16); border-color: rgba(129, 140, 248, 0.46); color: #c7d2fe; }
body.dark .ctl-select.tone-positive, body.dark .ctl-bulk-select.tone-positive { background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.46); color: #86efac; }
body.dark .ctl-select.tone-warn,     body.dark .ctl-bulk-select.tone-warn     { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.50); color: #fcd34d; }
body.dark .ctl-select.tone-negative, body.dark .ctl-bulk-select.tone-negative { background: rgba(244, 63, 94, 0.17); border-color: rgba(244, 63, 94, 0.50); color: #fda4af; }

/* Read-only QA-stage pill — qa_stage is derived from QA items (owned by the QA
   tab), so Control shows it as a chip instead of an editable select. */
.ctl-qa-readout { display: inline-block; padding: 5px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; border: 1px solid rgba(100, 116, 139, 0.30); background: rgba(100, 116, 139, 0.08); color: #475569; }
.ctl-qa-readout.is-mixed { font-weight: 500; font-style: italic; color: var(--ink-500); }
.ctl-qa-readout.ctl-locked { cursor: not-allowed; border-style: dashed; }
/* Codebase "→ QA" hand-off button (BD reaches QA via its pass_to_qa dropdown). */
.ctl-handoff-btn { padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.3; cursor: pointer; white-space: nowrap; border: 1px solid var(--accent); background: rgba(79, 141, 247, 0.12); color: var(--accent); }
.ctl-handoff-btn:hover { background: rgba(79, 141, 247, 0.22); }
.ctl-qa-readout.tone-neutral  { background: rgba(100, 116, 139, 0.10); border-color: rgba(100, 116, 139, 0.40); color: #475569; }
.ctl-qa-readout.tone-progress { background: rgba(99, 102, 241, 0.10); border-color: rgba(99, 102, 241, 0.40); color: #4338ca; }
.ctl-qa-readout.tone-positive { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.38); color: #15803d; }
.ctl-qa-readout.tone-warn     { background: rgba(245, 158, 11, 0.11); border-color: rgba(245, 158, 11, 0.44); color: #b45309; }
.ctl-qa-readout.tone-negative { background: rgba(244, 63, 94, 0.10); border-color: rgba(244, 63, 94, 0.42); color: #be123c; }
body.dark .ctl-qa-readout { border-color: rgba(148, 163, 184, 0.30); background: rgba(148, 163, 184, 0.10); color: #cbd5e1; }
body.dark .ctl-qa-readout.tone-neutral  { background: rgba(148, 163, 184, 0.14); border-color: rgba(148, 163, 184, 0.42); color: #cbd5e1; }
body.dark .ctl-qa-readout.tone-progress { background: rgba(129, 140, 248, 0.16); border-color: rgba(129, 140, 248, 0.46); color: #c7d2fe; }
body.dark .ctl-qa-readout.tone-positive { background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.46); color: #86efac; }
body.dark .ctl-qa-readout.tone-warn     { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.50); color: #fcd34d; }
body.dark .ctl-qa-readout.tone-negative { background: rgba(244, 63, 94, 0.17); border-color: rgba(244, 63, 94, 0.50); color: #fda4af; }

.email-preview {
  font-size: 10.5px; line-height: 1.35;
  padding: 6px 10px; background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border-left: 3px solid var(--accent); border-radius: 4px;
  color: #1e3a8a;
}
.email-preview.muted { background: var(--ink-50); border-left-color: var(--ink-200); color: var(--ink-400); font-style: italic; }
.email-preview .template-name { font-weight: 700; margin-bottom: 1px; }

.auto-badge {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em;
}
.av-pending { background: var(--ink-50); color: var(--ink-500); }
.av-accept, .av-qualifying { background: var(--green-light); color: var(--green); }
.av-reject, .av-likely_reject { background: var(--red-light); color: var(--red); }
.av-on_hold, .av-borderline { background: var(--amber-light); color: #92400e; }
.av-unknown { background: var(--ink-50); color: var(--ink-300); font-style: italic; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════
   Overview / Metrics page
   ═══════════════════════════════════════════════════════════════════════ */
.metrics-content { padding: 22px 28px 60px; max-width: 1800px; margin: 0 auto; }

.page-intro { margin-bottom: 20px; }
.page-title { font-size: 22px; font-weight: 700; margin: 0; color: var(--ink-900); letter-spacing: -0.02em; }
.page-sub { font-size: 13px; color: var(--ink-500); margin: 4px 0 0; }

/* KPIs */
.kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; }
.kpi-card {
  background: var(--surface); border: 1px solid var(--ink-100); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-fast) var(--ease);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), #2670e8);
}
.kpi-card.k-bd::before { background: linear-gradient(90deg, var(--t-bd), #831843); }
.kpi-card.k-codebase::before { background: linear-gradient(90deg, var(--t-codebase), var(--navy-700)); }
.kpi-card.k-warm::before { background: linear-gradient(90deg, var(--amber), #d97706); }
.kpi-card.k-stale::before { background: linear-gradient(90deg, var(--red), #991b1b); }
.kpi-card.k-closed::before { background: linear-gradient(90deg, var(--green), #15803d); }
.kpi-label { font-size: 10px; text-transform: uppercase; color: var(--ink-400); letter-spacing: 0.08em; font-weight: 600; }
.kpi-value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-900); letter-spacing: -0.02em; }
.kpi-sub { font-size: 11px; color: var(--ink-400); margin-top: 1px; }

/* Section heads */
.metrics-section { margin-bottom: 30px; }
.metrics-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; margin: 0 0 14px; color: var(--ink-900);
  padding-bottom: 8px; border-bottom: 1px solid var(--ink-100);
  font-weight: 600; letter-spacing: -0.01em;
}
.metrics-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.d-bd { background: var(--t-bd); }
.d-codebase { background: var(--t-codebase); }
.d-engage { background: var(--amber); }
.d-funnel { background: linear-gradient(135deg, var(--navy-700), var(--accent)); }

/* Funnel section — clickable stage cards */
.funnel-block { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.funnel-stage {
  background: var(--surface); border: 1px solid var(--ink-100); border-radius: 10px;
  padding: 12px; cursor: pointer; transition: all var(--dur-fast) var(--ease);
  display: flex; flex-direction: column; gap: 4px; position: relative;
  overflow: hidden;
}
.funnel-stage:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.funnel-stage::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.funnel-stage.f-intake::before { background: var(--ink-300); }
.funnel-stage.f-awaiting_verdict::before { background: var(--amber); }
.funnel-stage.f-decision_pending::before { background: #ea580c; }
.funnel-stage.f-in_qa::before { background: var(--accent); }
.funnel-stage.f-outcome_set::before { background: #16a34a; }
.funnel-stage.f-purchased::before { background: linear-gradient(90deg, #16a34a, #047857); }
.funnel-stage.f-closed::before { background: var(--ink-400); }
.funnel-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-500); font-weight: 600; }
.funnel-count { font-size: 22px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.funnel-sub { font-size: 10.5px; color: var(--ink-400); line-height: 1.35; }
.funnel-stage[data-empty="1"] { opacity: 0.55; cursor: default; }
.funnel-stage[data-empty="1"]:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--ink-100); }

/* KPI drilldown affordance */
.kpi-card.drillable { cursor: pointer; }
.kpi-card.drillable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.kpi-card.drillable::after {
  content: '↗'; position: absolute; top: 8px; right: 12px;
  font-size: 12px; color: var(--ink-300);
  transition: color var(--dur-fast) var(--ease);
}
.kpi-card.drillable:hover::after { color: var(--accent); }

.metric-card-sub { font-size: 10px; font-weight: 400; text-transform: none; color: var(--ink-400); margin-left: 4px; letter-spacing: 0; }
.ctl-qa { width: 130px; }

/* Funnel filter banner on Leads tab */
.funnel-filter-banner {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid rgba(79, 141, 247, 0.3);
  border-radius: 8px; padding: 9px 14px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: #1e3a8a;
}
.funnel-filter-banner.hidden { display: none; }
.funnel-filter-banner .ff-label { font-weight: 600; }
.funnel-filter-banner .ff-clear {
  margin-left: auto;
  background: transparent; border: 1px solid rgba(30, 58, 138, 0.25); color: #1e3a8a;
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 11.5px;
  transition: all var(--dur-fast) var(--ease);
}
.funnel-filter-banner .ff-clear:hover { background: rgba(79, 141, 247, 0.10); border-color: var(--accent); }
.funnel-filter-banner .ff-chip {
  display: inline-flex; align-items: center;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(30, 58, 138, 0.25);
  color: #1e3a8a; font-weight: 500;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; letter-spacing: 0.1px;
}

@media (max-width: 1400px) { .funnel-block { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px)  { .funnel-block { grid-template-columns: repeat(2, 1fr); } }

.metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.metric-card {
  background: var(--surface); border: 1px solid var(--ink-100); border-radius: 10px;
  padding: 14px 16px; min-height: 220px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.metric-card:hover { box-shadow: var(--shadow); }
.metric-card-wide { grid-column: span 2; }
.metric-card-title {
  font-size: 11px; text-transform: uppercase; color: var(--ink-500);
  letter-spacing: 0.08em; margin: 0 0 12px; font-weight: 600;
}

/* Bar charts */
.chart { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; }
.chart-row {
  display: grid; grid-template-columns: 120px 1fr 50px;
  align-items: center; gap: 10px;
  transition: background var(--dur-fast) var(--ease);
  padding: 1px 0;
}
.chart-row:hover { background: var(--bg-alt); border-radius: 4px; }
.chart-label { color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-bar { height: 16px; border-radius: 4px; position: relative; transition: filter var(--dur-fast) var(--ease); }
.chart-row:hover .chart-bar { filter: brightness(1.05); }
.chart-bar.bd { background: linear-gradient(90deg, #fce7f3, var(--t-bd)); }
.chart-bar.code { background: linear-gradient(90deg, #dbeafe, var(--t-codebase)); }
.chart-bar.warm { background: linear-gradient(90deg, #fef3c7, var(--amber)); }
.chart-bar.green { background: linear-gradient(90deg, #d1fae5, var(--green)); }
.chart-bar.red { background: linear-gradient(90deg, #fee2e2, var(--red)); }
.chart-bar.grey { background: linear-gradient(90deg, var(--ink-100), var(--ink-300)); }
.chart-count { text-align: right; color: var(--ink-900); font-variant-numeric: tabular-nums; font-weight: 600; }
.chart-empty { color: var(--ink-300); font-style: italic; padding: 24px 0; text-align: center; }

.list-block { font-size: 12px; max-height: 260px; overflow-y: auto; }
.list-row {
  display: grid; grid-template-columns: 1fr 1fr 80px;
  padding: 7px 0; border-bottom: 1px solid var(--ink-100); gap: 8px;
  font-size: 11.5px;
  transition: background var(--dur-fast) var(--ease);
}
.list-row:hover { background: var(--bg-alt); }
.list-row .lr-name { font-weight: 600; color: var(--ink-900); }
.list-row .lr-company { color: var(--ink-500); }
.list-row .lr-meta { color: var(--ink-400); text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════
   Drawer — decision-relevant summary, not raw JSON
   ═══════════════════════════════════════════════════════════════════════ */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 29, 58, 0.45);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.drawer-overlay.show { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0;
  width: min(640px, 96vw); height: 100vh;
  background: var(--surface);
  z-index: 210;
  box-shadow: var(--shadow-drawer);
  display: flex; flex-direction: column;
  transform: translateX(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.drawer.show { transform: none; }
.drawer.hidden { transform: translateX(110%); }
.drawer-overlay.hidden { display: block; opacity: 0; pointer-events: none; }

.drawer-header {
  padding: 18px 22px;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: #fff;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
}
.drawer-header-text { flex: 1; }
.drawer-type {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.10); color: #fff;
  margin-bottom: 8px;
}
.drawer-header h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.drawer-sub { color: rgba(255,255,255,0.65); font-size: 12.5px; }
.close-btn { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.15); width: 32px; height: 32px; font-size: 22px; }
.close-btn:hover { background: rgba(255,255,255,0.18); }

.drawer-body { padding: 22px; overflow-y: auto; flex: 1; font-size: 13px; line-height: 1.5; }

/* Drawer content blocks */
.drawer-section { margin-bottom: 24px; }
.drawer-section:last-child { margin-bottom: 0; }
.drawer-section-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ink-400); font-weight: 700; margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.drawer-section-title::after { content: ''; flex: 1; height: 1px; background: var(--ink-100); }

.fitness-card {
  padding: 16px 18px; border-radius: 10px;
  border: 1px solid var(--ink-100);
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--surface) 100%);
}
.fitness-card.qualifying, .fitness-card.accept { border-color: var(--green); background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%); }
.fitness-card.borderline, .fitness-card.on_hold { border-color: var(--amber); background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%); }
.fitness-card.likely_reject, .fitness-card.reject { border-color: var(--red); background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%); }
.fitness-verdict { display: flex; align-items: center; gap: 10px; }
.fitness-icon { font-size: 22px; line-height: 1; }
.fitness-label { font-size: 17px; font-weight: 700; color: var(--ink-900); }
.fitness-reason { margin-top: 10px; color: var(--ink-700); font-size: 12.5px; line-height: 1.55; }

.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fact {
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg-alt); border: 1px solid var(--ink-100);
  display: flex; flex-direction: column; gap: 2px;
}
.fact-label { font-size: 10px; color: var(--ink-400); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.fact-value { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.fact-value.muted { color: var(--ink-300); font-weight: 500; }
.fact-link { font-size: 12px; word-break: break-all; }

.repo-list, .connectors-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.repo-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 12px; background: var(--bg-alt); border: 1px solid var(--ink-100); border-radius: 6px;
  font-size: 12px;
}
.repo-row.passing { background: var(--green-bg); border-color: rgba(22, 163, 74, 0.20); }
.repo-row.holding { background: var(--amber-bg); border-color: rgba(245, 158, 11, 0.25); }
.repo-row.rejected { background: var(--red-bg); border-color: rgba(220, 38, 38, 0.20); }
.repo-name { font-family: var(--font-mono); font-size: 11px; color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-meta { font-size: 10.5px; color: var(--ink-500); }
.repo-status {
  font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.repo-status.passing { background: var(--green); color: #fff; }
.repo-status.holding { background: var(--amber); color: #fff; }
.repo-status.rejected { background: var(--red); color: #fff; }

.connector-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: var(--bg-alt); border: 1px solid var(--ink-100);
  border-radius: 999px; font-size: 11.5px; color: var(--ink-700);
}
.connector-pill .ck { font-weight: 600; color: var(--ink-900); }
.connector-list { display: flex; flex-wrap: wrap; gap: 6px; }

.drawer-actions {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px;
  background: var(--bg-alt); border-top: 1px solid var(--ink-100);
}
/* Every action-row variant (primary / ghost / danger, plus the email <a class="btn-ghost">)
   shares one sizing rule so the row reads coherently: equal width, same height,
   centered icon+label, identical font-size. btn-danger was previously excluded.
   Buttons wrap at ~3 per row (6 actions on manual leads with email = two tidy
   rows of three; fewer buttons grow to fill a single row), labels never wrap. */
.drawer-actions > .btn-primary,
.drawer-actions > .btn-ghost,
.drawer-actions > .btn-danger {
  flex: 1 1 calc(33.333% - 8px); white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 9px 14px; font-size: 12px; text-align: center;
}

.signal-list { display: flex; flex-wrap: wrap; gap: 5px; }
.signal-pill {
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.signal-good { background: var(--green-light); color: var(--green); }
.signal-warn { background: var(--amber-light); color: #92400e; }
.signal-neutral { background: var(--ink-50); color: var(--ink-500); }
.signal-info { background: #dbeafe; color: #1d4ed8; }

.timeline {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: var(--ink-700);
}
.timeline-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--ink-100); }
.timeline-row:last-child { border-bottom: none; }
.timeline-k { color: var(--ink-400); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.timeline-v { color: var(--ink-900); }
.timeline-v.na { color: var(--ink-300); font-style: italic; font-weight: 500; }

/* Tooltips — rendered as a single body-attached element (.lz-tooltip) positioned
   with position:fixed by JS (see initTooltips() in tracker.js). A pure-CSS
   ::after bubble can't escape an ancestor with overflow:hidden/auto (e.g. the
   leads table), so it would clip; a fixed, body-level element never clips. */
.lz-tooltip {
  position: fixed; z-index: 100000;
  background: var(--navy-900); color: #fff;
  padding: 6px 10px; border-radius: 6px;
  font-size: 11px; white-space: nowrap; max-width: 360px;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  animation: fadeIn 100ms var(--ease-out);
}

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* Hide on small screens — operator surface only */
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .topbar-inner { grid-template-columns: 1fr; gap: 14px; }
  .tab-nav { justify-self: stretch; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Manual lead modal ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
  /* Above the drawer (200/210) AND the command palette (300/301): modals like
     Add-manual-lead / QA Add-sample can be opened from the palette. */
  z-index: 310; backdrop-filter: blur(2px);
  transition: opacity var(--dur-base) var(--ease);
}
.modal-overlay.hidden { display: none; }
.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(640px, 92vw); max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 14px; z-index: 311;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}
.modal.hidden { display: none; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--ink-100);
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink-900); }
.modal-body { padding: 18px 22px 22px; }
.modal-sub { font-size: 12.5px; color: var(--ink-500); margin: 0 0 14px; line-height: 1.55; }
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;
}
.form-row:last-child { margin-bottom: 0; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label {
  font-size: 11.5px; font-weight: 600; color: var(--ink-600);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--ink-200);
  border-radius: 7px; font-size: 13px; font-family: inherit; color: var(--ink-900);
  background: #fff; transition: border-color var(--dur-fast) var(--ease);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 141, 247, 0.12);
}
.form-field textarea { resize: vertical; min-height: 64px; }
.form-actions {
  display: flex !important; grid-template-columns: none !important;
  gap: 10px; justify-content: flex-end; margin-top: 8px;
}
.form-actions .btn-primary,
.form-actions .btn-ghost { padding: 8px 18px; }
.form-status { font-size: 12.5px; margin-top: 8px; padding: 6px 10px; border-radius: 6px; min-height: 18px; }
.form-status.error { background: #fef2f2; color: #b91c1c; }
.form-status.info { background: #eff6ff; color: #1e40af; }
.form-status.success { background: #ecfdf5; color: #047857; }

/* ─── Drawer "Mark touched" affordance ──────────────────────────────── */
.mark-touch-row {
  display: flex; gap: 8px; align-items: center; margin-top: 10px;
  padding: 8px 10px; background: var(--ink-50);
  border: 1px dashed var(--ink-200); border-radius: 7px;
}
.mark-touch-note {
  flex: 1; padding: 6px 10px; border: 1px solid var(--ink-200);
  border-radius: 6px; font-size: 12px; background: #fff; font-family: inherit;
}
.mark-touch-note:focus { outline: none; border-color: var(--accent); }
.mark-touch-btn { white-space: nowrap; padding: 6px 12px; font-size: 12px; }

.btn-danger {
  background: transparent; border: 1px solid var(--red-light);
  color: var(--red); font: inherit; font-size: 12px; font-weight: 500;
  padding: 7px 14px; border-radius: 7px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.btn-danger:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }

/* ─── Inline filter count strip (above each table) ─────────────────── */
.count-strip {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 4px 4px 8px;
  font-size: 12.5px; color: var(--ink-500);
}
.count-inline {
  font-variant-numeric: tabular-nums; font-weight: 500;
  background: var(--ink-50); border: 1px solid var(--ink-100);
  padding: 4px 11px; border-radius: 999px;
}

/* Bump the topbar pill so it doesn't disappear next to a noisy nav */
.badge-count {
  font-size: 13.5px !important; padding: 6px 14px !important;
  font-weight: 700 !important;
  background: rgba(79, 141, 247, 0.32) !important;
  border-color: rgba(79, 141, 247, 0.55) !important;
}

/* ─── LLM upload card inside manual-lead modal ─────────────────────── */
.llm-upload {
  background: linear-gradient(180deg, #f7f4ff 0%, #f0ecff 100%);
  border: 1px solid #ddd6fe;
  border-radius: 10px; padding: 12px 14px;
  margin-bottom: 14px;
}
.llm-upload-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.llm-upload-title { font-weight: 600; color: #5b21b6; font-size: 13.5px; }
.llm-upload-sub { font-size: 11.5px; color: var(--ink-500); line-height: 1.4; }
.llm-upload-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1.4fr) auto; gap: 9px; align-items: center; }
.llm-upload-row input[type="file"] {
  font-size: 12px; padding: 6px 8px; border: 1px solid var(--ink-200);
  background: #fff; border-radius: 6px; cursor: pointer;
}
.llm-upload-row input[type="text"] {
  padding: 7px 10px; border: 1px solid var(--ink-200);
  border-radius: 6px; font-size: 12.5px; font-family: inherit;
}
.llm-upload-row input[type="text"]:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); }
.llm-parse-btn {
  background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%) !important;
  white-space: nowrap; padding: 7px 16px !important;
}
.llm-parse-btn:hover { background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 100%) !important; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35) !important; }
.llm-parse-btn:disabled { opacity: 0.6; cursor: not-allowed; }

#m-parse-status { margin-top: 8px; margin-bottom: 0; }

/* form-divider between LLM section and manual fields */
.form-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--ink-400);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin: 14px 0 12px;
}
.form-divider::before, .form-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--ink-100);
}

@media (max-width: 720px) {
  .llm-upload-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   v2 polish — visual upgrade pass (2026-06)
   Targeted overrides for hero/KPIs/funnel/tables/drawer/modal/empty states.
   Only adds depth and breathing room; no structural HTML changes.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --display-font: 'Inter', system-ui, sans-serif;
  --grad-blue: linear-gradient(135deg, #4f8df7 0%, #6e60ff 100%);
  --grad-rose: linear-gradient(135deg, #f472b6 0%, #ef4444 100%);
  --grad-amber: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
  --grad-emerald: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  --grad-violet: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  --grad-slate: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.5);
  --shadow-glass: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -8px rgba(15, 23, 42, 0.10);
  --shadow-glass-lifted: 0 4px 8px rgba(15, 23, 42, 0.08), 0 24px 48px -12px rgba(15, 23, 42, 0.18);
}

/* ─── Page intro — bigger, gradient title, breathing room ──────────── */
.page-intro {
  margin: 18px 0 26px;
  padding: 22px 26px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--ink-100);
  border-radius: 14px;
  box-shadow: var(--shadow-glass);
  display: flex; flex-direction: column; gap: 6px;
}
.page-title {
  margin: 0;
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-600) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--navy-900);
}
.page-sub {
  margin: 0;
  font-size: 14px;
  color: var(--ink-500);
  letter-spacing: -0.01em;
  line-height: 1.5;
}

/* ─── KPI cards v2 — bolder numbers, soft tonal backgrounds ────────── */
.kpi-row {
  gap: 14px !important;
  margin-bottom: 28px;
}
.kpi-card {
  position: relative;
  background: var(--surface) !important;
  border: 1px solid var(--ink-100) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  box-shadow: var(--shadow-glass);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease);
  overflow: hidden;
}
.kpi-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-slate);
  opacity: 0.85;
}
.kpi-card.k-warm::before { background: var(--grad-amber); }
.kpi-card.k-codebase::before { background: var(--grad-blue); }
.kpi-card.k-bd::before { background: var(--grad-rose); }
.kpi-card.k-closed::before { background: var(--grad-emerald); }
.kpi-card.k-stale::before { background: var(--grad-violet); }
.kpi-card.drillable {
  cursor: pointer;
}
.kpi-card.drillable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glass-lifted);
  border-color: var(--accent) !important;
}
.kpi-card.drillable:hover::before { opacity: 1; height: 4px; }
.kpi-label {
  display: block;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-500) !important;
  margin-bottom: 8px !important;
}
.kpi-value {
  display: block;
  font-size: 34px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1.05 !important;
  color: var(--ink-900);
  margin-bottom: 6px !important;
}
.kpi-sub {
  display: block;
  font-size: 11.5px !important;
  color: var(--ink-400) !important;
  letter-spacing: -0.005em;
}

/* ─── Funnel — true funnel shape, progressive width ────────────────── */
.funnel-block {
  gap: 10px !important;
  padding: 2px;
}
.funnel-stage {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  padding: 16px 14px 14px !important;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease);
  cursor: pointer;
  overflow: hidden;
}
.funnel-stage[data-empty="1"] { opacity: 0.55; cursor: default; }
.funnel-stage::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-slate);
  transition: height var(--dur-fast) var(--ease);
}
.funnel-stage.f-intake::after { background: var(--grad-slate); }
.funnel-stage.f-awaiting_verdict::after { background: var(--grad-amber); }
.funnel-stage.f-decision_pending::after { background: var(--grad-violet); }
.funnel-stage.f-in_qa::after { background: var(--grad-blue); }
.funnel-stage.f-outcome_set::after { background: var(--grad-rose); }
.funnel-stage.f-purchased::after { background: var(--grad-emerald); }
.funnel-stage.f-closed::after { background: linear-gradient(135deg, #6b7280 0%, #374151 100%); }
.funnel-stage:not([data-empty="1"]):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.funnel-stage:not([data-empty="1"]):hover::after { height: 6px; }
.funnel-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 6px;
}
.funnel-count {
  display: block;
  font-size: 28px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin-bottom: 4px;
  line-height: 1.05;
}
.funnel-sub {
  font-size: 11px;
  color: var(--ink-400);
}

/* ─── Metric section titles — softer ───────────────────────────────── */
.metrics-title {
  font-size: 17px !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 14px !important;
  display: flex; align-items: center; gap: 9px;
}
.metrics-dot {
  width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(79, 141, 247, 0.18);
}
.metrics-dot.d-funnel { background: #4f8df7; }
.metrics-dot.d-bd { background: #f472b6; }
.metrics-dot.d-codebase { background: #6e60ff; }
.metrics-dot.d-engage { background: #34d399; }

/* ─── Metric cards (charts) — refined ──────────────────────────────── */
.metric-card {
  background: var(--surface) !important;
  border: 1px solid var(--ink-100) !important;
  border-radius: 14px !important;
  padding: 18px 18px 14px !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease);
}
.metric-card:hover { box-shadow: var(--shadow-md); }
.metric-card-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-700) !important;
  letter-spacing: -0.005em;
  margin: 0 0 12px !important;
}
.metric-card-sub {
  font-size: 11px; font-weight: 400; color: var(--ink-400);
  margin-left: 6px;
}

/* ─── Chart bars — gradient + smoother hover ───────────────────────── */
.chart .bar-row { margin-bottom: 7px !important; }
.chart .bar-track {
  height: 22px !important;
  background: var(--ink-50) !important;
  border-radius: 7px !important;
  overflow: hidden;
  position: relative;
}
.chart .bar {
  height: 100%;
  border-radius: 7px !important;
  background: var(--grad-blue) !important;
  transition: width 600ms var(--ease-out);
  position: relative;
}
.chart .bar.bd { background: var(--grad-rose) !important; }
.chart .bar.code { background: var(--grad-blue) !important; }
.chart .bar.warm { background: var(--grad-amber) !important; }
.chart .bar-label {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--ink-700) !important;
}
.chart .bar-value {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
}

/* ─── Tab nav — subtle glow on active ──────────────────────────────── */
.tab-btn.active {
  box-shadow: 0 2px 8px rgba(79, 141, 247, 0.40),
              inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
.tab-btn { letter-spacing: -0.005em; }

/* ─── Tables — sticky header + smoother hover ──────────────────────── */
.table-wrap {
  border-radius: 12px !important;
  border: 1px solid var(--ink-100);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: auto;
  max-height: calc(100vh - 240px);
}
#grid thead th,
#control-grid thead th {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-500) !important;
  padding: 11px 12px !important;
  border-bottom: 1px solid var(--ink-100) !important;
  backdrop-filter: blur(10px);
}
#grid tbody tr,
#control-grid tbody tr {
  transition: background var(--dur-fast) var(--ease);
}
#grid tbody tr:nth-child(even) td,
#control-grid tbody tr:nth-child(even) td {
  background: rgba(248, 250, 252, 0.55);
}
#grid tbody tr:hover td,
#control-grid tbody tr:hover td {
  background: rgba(79, 141, 247, 0.06) !important;
}
#grid tbody td,
#control-grid tbody td {
  padding: 10px 12px !important;
  font-size: 12.5px;
  border-bottom: 1px solid var(--ink-100) !important;
}

/* ─── Filter chips — softer with active glow ───────────────────────── */
.chip {
  border-radius: 999px !important;
  padding: 6px 13px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: var(--surface) !important;
  border: 1px solid var(--ink-200) !important;
  color: var(--ink-700) !important;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--accent) !important; color: var(--accent-hover) !important; background: rgba(79, 141, 247, 0.06) !important; }
.chip.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(79, 141, 247, 0.32);
  font-weight: 600 !important;
}

/* ─── Filterbar — softer container ─────────────────────────────────── */
.filterbar {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 14px;
  padding: 14px !important;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.filter-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-500) !important;
  margin-bottom: 4px !important;
}

/* ─── Drawer — bigger title, airier sections ───────────────────────── */
.drawer { width: min(720px, 95vw) !important; box-shadow: var(--shadow-drawer) !important; }
.drawer-header {
  padding: 20px 24px 18px !important;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid var(--ink-100);
}
#drawer-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
  margin: 4px 0 !important;
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--navy-700) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.drawer-body { padding: 22px 24px !important; }
.drawer-section { margin-bottom: 28px !important; }
.drawer-section-title {
  font-size: 11.5px !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-500) !important;
  margin-bottom: 12px !important;
  font-weight: 600 !important;
}

/* ─── Topbar — subtle glass + better depth ─────────────────────────── */
.topbar {
  background: linear-gradient(180deg, #0a1429 0%, #1a2b50 60%, #243964 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
}

/* ─── Status banner — refined ──────────────────────────────────────── */
.status-banner.show {
  border-radius: 10px !important;
  padding: 11px 16px !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}

/* ─── Loading skeleton (replaces "Loading..." text feel) ───────────── */
@keyframes shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg, var(--ink-100) 0%, var(--ink-50) 50%, var(--ink-100) 100%);
  background-size: 200px 100%; background-repeat: no-repeat;
  border-radius: 6px;
  animation: shimmer 1.6s ease infinite;
}

/* ─── Stagger fade-in on card mount ────────────────────────────────── */
@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
#kpi-row .kpi-card,
#funnel-block .funnel-stage,
.metrics-grid .metric-card {
  animation: fade-in-up 460ms var(--ease-out) backwards;
}
#kpi-row .kpi-card:nth-child(1) { animation-delay: 0ms; }
#kpi-row .kpi-card:nth-child(2) { animation-delay: 40ms; }
#kpi-row .kpi-card:nth-child(3) { animation-delay: 80ms; }
#kpi-row .kpi-card:nth-child(4) { animation-delay: 120ms; }
#kpi-row .kpi-card:nth-child(5) { animation-delay: 160ms; }
#kpi-row .kpi-card:nth-child(6) { animation-delay: 200ms; }
#kpi-row .kpi-card:nth-child(7) { animation-delay: 240ms; }
#kpi-row .kpi-card:nth-child(8) { animation-delay: 280ms; }
#kpi-row .kpi-card:nth-child(9) { animation-delay: 320ms; }
#funnel-block .funnel-stage:nth-child(1) { animation-delay: 100ms; }
#funnel-block .funnel-stage:nth-child(2) { animation-delay: 150ms; }
#funnel-block .funnel-stage:nth-child(3) { animation-delay: 200ms; }
#funnel-block .funnel-stage:nth-child(4) { animation-delay: 250ms; }
#funnel-block .funnel-stage:nth-child(5) { animation-delay: 300ms; }
#funnel-block .funnel-stage:nth-child(6) { animation-delay: 350ms; }
#funnel-block .funnel-stage:nth-child(7) { animation-delay: 400ms; }
.metrics-grid .metric-card { animation-delay: 100ms; }

/* ─── Banner-info ("email not sent yet") — refined card ────────────── */
.banner-info {
  background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
  border: 1px solid #fde68a;
  border-radius: 11px;
  padding: 12px 16px;
  margin: 0 0 14px;
  font-size: 12.5px;
  color: #78350f;
  box-shadow: 0 1px 2px rgba(120, 53, 15, 0.06);
}
.banner-info strong { color: #78350f; }

/* ─── Stats bar on Leads ──────────────────────────────────────────── */
.stats-bar { gap: 8px !important; margin-bottom: 12px; }
.stat-card {
  background: var(--surface) !important;
  border: 1px solid var(--ink-100) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  box-shadow: var(--shadow-sm);
}
.stat-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-500) !important;
}
.stat-value {
  font-size: 17px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

/* ─── Modal — softer shadow + entry animation ──────────────────────── */
.modal {
  box-shadow: 0 32px 64px -16px rgba(15, 23, 42, 0.30),
              0 2px 8px rgba(15, 23, 42, 0.08) !important;
  animation: modal-in 280ms var(--ease-out);
}
@keyframes modal-in {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ─── Count-up animation prep ──────────────────────────────────────── */
.counting { color: var(--accent); transition: color 0.6s var(--ease-out); }

/* ─── Scrollbar refinement ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
::-webkit-scrollbar-thumb { background: var(--ink-200) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400) !important; }

/* ─── Responsive bumps ─────────────────────────────────────────────── */
@media (max-width: 1400px) {
  .kpi-row { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  .page-title { font-size: 22px; }
}

/* Seed essentials grid inside the LLM upload card */
.seed-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-bottom: 12px;
}
.seed-grid .form-field label {
  color: #5b21b6 !important;
  font-size: 10.5px !important;
}
.seed-grid .form-field input {
  background: rgba(255, 255, 255, 0.9);
  border-color: #ddd6fe !important;
}
.seed-grid .form-field input:focus {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
}
@media (max-width: 720px) {
  .seed-grid { grid-template-columns: 1fr; }
}

/* Numbered section headings inside modal */
.section-heading {
  margin: 18px 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  display: flex; align-items: baseline; gap: 10px;
}
.section-heading:first-child { margin-top: 4px; }
.section-heading .section-sub {
  font-weight: 500;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-400);
}

/* Inline "optional" badge in field label + help text */
.form-field label .field-hint {
  font-weight: 500;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-400);
  background: var(--ink-50);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
}
.field-help {
  display: block;
  font-size: 10.5px;
  color: var(--ink-400);
  line-height: 1.4;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════════════
   Wave 1 — Command palette, dark mode, sparklines, queue, bulk, saved views
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Dark mode tokens ────────────────────────────────────────────── */
body.dark {
  --bg: #0a1226;
  --bg-alt: #0f1a35;
  --surface: #131e3d;
  --surface-hover: #1a2647;
  --ink-900: #f1f5fb;
  --ink-700: #cbd5e1;
  --ink-500: #94a3b8;
  --ink-400: #7c8aa1;
  --ink-300: #5a6a82;
  --ink-200: #364260;
  --ink-100: #1f2a47;
  --ink-50: #161f3a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px -1px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45);
  --shadow-glass: 0 1px 3px rgba(0, 0, 0, 0.50), 0 12px 28px -10px rgba(0, 0, 0, 0.55);
  --glass: rgba(19, 30, 61, 0.85);
  --glass-border: rgba(255, 255, 255, 0.06);
}
body.dark .topbar {
  background: linear-gradient(180deg, #050b1d 0%, #0a1226 60%, #131e3d 100%) !important;
}
body.dark .page-title {
  background: linear-gradient(135deg, #f1f5fb 0%, #4f8df7 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.dark .kpi-card,
body.dark .funnel-stage,
body.dark .metric-card,
body.dark .filterbar,
body.dark .stat-card,
body.dark .table-wrap,
body.dark .page-intro {
  background: var(--surface) !important;
  border-color: var(--ink-100) !important;
}
body.dark #grid thead th,
body.dark #control-grid thead th {
  background: linear-gradient(180deg, #0f1a35 0%, #131e3d 100%) !important;
  color: var(--ink-500) !important;
  border-bottom-color: var(--ink-100) !important;
}
body.dark #grid tbody tr:nth-child(even) td,
body.dark #control-grid tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
body.dark #grid tbody tr:hover td,
body.dark #control-grid tbody tr:hover td { background: rgba(79, 141, 247, 0.10) !important; }
body.dark .chip {
  background: var(--ink-100) !important;
  border-color: var(--ink-200) !important;
  color: var(--ink-700) !important;
}
body.dark .chip:hover { background: rgba(79, 141, 247, 0.12) !important; }
body.dark .modal { background: var(--surface) !important; color: var(--ink-900); }
body.dark .modal-sub { color: var(--ink-500); }
body.dark .form-field input,
body.dark .form-field select,
body.dark .form-field textarea {
  background: var(--bg-alt) !important;
  border-color: var(--ink-200) !important;
  color: var(--ink-900);
}
body.dark .form-field input:focus,
body.dark .form-field select:focus,
body.dark .form-field textarea:focus {
  border-color: var(--accent) !important;
}
body.dark .drawer { background: var(--surface) !important; }
body.dark .drawer-header { background: linear-gradient(180deg, var(--bg-alt) 0%, var(--surface) 100%) !important; border-color: var(--ink-100); }
body.dark #drawer-title { background: linear-gradient(135deg, #f1f5fb 0%, #94a3b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
body.dark .timeline-k { color: var(--ink-500); }
body.dark .timeline-v { color: var(--ink-900); }
body.dark .fact-label { color: var(--ink-500); }
body.dark .fact-value { color: var(--ink-900); }
body.dark .banner-info {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.10) 0%, rgba(254, 249, 195, 0.06) 100%);
  border-color: rgba(253, 230, 138, 0.35);
  color: #fbbf24;
}
body.dark .badge-count { background: rgba(79, 141, 247, 0.45) !important; }
body.dark .count-inline { background: var(--ink-100); border-color: var(--ink-200); color: var(--ink-500); }
body.dark .llm-upload { background: linear-gradient(180deg, rgba(139, 92, 246, 0.10) 0%, rgba(124, 58, 237, 0.05) 100%); border-color: rgba(139, 92, 246, 0.25); }

/* ─── Command palette ─────────────────────────────────────────────── */
.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 18, 38, 0.55);
  backdrop-filter: blur(6px);
  /* Must sit ABOVE the lead drawer (z 200/210) — same tier as the seller picker. */
  z-index: 300;
}
.cmdk-overlay.hidden { display: none; }
.cmdk-modal {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  width: min(620px, 92vw);
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 14px;
  z-index: 301;
  box-shadow: 0 32px 72px -16px rgba(0, 0, 0, 0.45),
              0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: cmdk-in 240ms var(--ease-out);
}
.cmdk-modal.hidden { display: none; }
@keyframes cmdk-in {
  0% { opacity: 0; transform: translate(-50%, -8px) scale(0.97); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.cmdk-search-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--ink-100);
}
.cmdk-icon {
  font-size: 12px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.5px;
  background: rgba(79, 141, 247, 0.10);
  padding: 4px 9px; border-radius: 6px;
}
#cmdk-input {
  flex: 1;
  border: none; outline: none; background: transparent;
  font: inherit; font-size: 15px; color: var(--ink-900);
}
.cmdk-hint { font-size: 11px; color: var(--ink-400); }
.cmdk-hint kbd, .cmdk-footer kbd {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px;
  background: var(--ink-100); color: var(--ink-700);
  border: 1px solid var(--ink-200);
  padding: 2px 5px; border-radius: 4px;
  min-width: 18px; text-align: center;
  margin: 0 2px;
}
.cmdk-results {
  max-height: 460px; overflow-y: auto;
  padding: 8px 0;
}
.cmdk-result {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 18px;
  cursor: pointer;
  font-size: 13px;
  border-left: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease);
}
.cmdk-result:hover,
.cmdk-result.active {
  background: rgba(79, 141, 247, 0.08);
  border-left-color: var(--accent);
}
.cmdk-result-kind {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ink-500);
  background: var(--ink-50);
  padding: 2px 7px; border-radius: 4px;
  min-width: 60px; text-align: center;
}
.cmdk-result-kind.k-action { background: rgba(79, 141, 247, 0.12); color: var(--accent); }
.cmdk-result-kind.k-view { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.cmdk-result-label { flex: 1; color: var(--ink-900); font-weight: 500; }
.cmdk-result-sub { font-size: 11.5px; color: var(--ink-400); }
.cmdk-empty {
  padding: 30px 20px; text-align: center;
  color: var(--ink-400); font-size: 12.5px;
}
.cmdk-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  color: var(--ink-400); text-transform: uppercase;
  padding: 12px 18px 4px;
}
.cmdk-footer {
  display: flex; gap: 16px;
  padding: 10px 18px;
  background: var(--bg-alt);
  border-top: 1px solid var(--ink-100);
  font-size: 11px; color: var(--ink-500);
}

/* ─── Today's queue strip ─────────────────────────────────────────── */
.today-queue {
  margin-bottom: 24px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.10) 0%, rgba(239, 68, 68, 0.06) 100%);
  border: 1px solid rgba(251, 191, 36, 0.30);
  border-radius: 14px;
  animation: fade-in-up 460ms var(--ease-out) backwards;
}
.today-queue.hidden { display: none; }
.today-queue-title {
  margin: 0 0 14px;
  font-size: 14px; font-weight: 700;
  color: #b45309;
  letter-spacing: -0.005em;
}
body.dark .today-queue-title { color: #fbbf24; }
.today-queue-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.queue-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(251, 191, 36, 0.20);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
body.dark .queue-card { background: rgba(20, 30, 60, 0.6); border-color: rgba(251, 191, 36, 0.25); }
.queue-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #f59e0b;
}
.queue-card-count { font-size: 22px; font-weight: 700; color: #b45309; line-height: 1; font-variant-numeric: tabular-nums; }
body.dark .queue-card-count { color: #fbbf24; }
.queue-card-label { font-size: 11.5px; font-weight: 600; color: var(--ink-700); margin-top: 4px; }
.queue-card-sub { font-size: 10.5px; color: var(--ink-500); margin-top: 2px; }

/* ─── Sparkline + comparison on KPI cards ─────────────────────────── */
.kpi-card { padding-bottom: 16px !important; }
.kpi-sparkline {
  display: block;
  margin-top: 8px;
  width: 100%; height: 22px;
  pointer-events: none;
}
.kpi-sparkline path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kpi-sparkline .area { stroke: none; opacity: 0.18; }
.kpi-card .kpi-delta {
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  padding: 1px 7px; border-radius: 999px;
  margin-left: 6px;
}
.kpi-card .kpi-delta.up { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.kpi-card .kpi-delta.down { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.kpi-card .kpi-delta.flat { background: var(--ink-50); color: var(--ink-500); }

/* ─── Bulk action bar ─────────────────────────────────────────────── */
.bulk-bar {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.30),
              0 0 0 4px rgba(79, 141, 247, 0.15);
  z-index: 70;
  animation: bulk-in 240ms var(--ease-out);
}
.bulk-bar.hidden { display: none; }
@keyframes bulk-in {
  0% { opacity: 0; transform: translate(-50%, 12px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
.bulk-count {
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  padding-right: 14px; border-right: 1px solid var(--ink-100);
  font-variant-numeric: tabular-nums;
}
.bulk-actions { display: flex; gap: 6px; }
.bulk-btn {
  background: transparent; border: 1px solid var(--ink-200);
  color: var(--ink-700); font: inherit; font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: 7px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.bulk-btn:hover { background: var(--ink-50); border-color: var(--accent); color: var(--accent); }

/* Row checkboxes */
.row-check { width: 24px !important; }
.row-check input[type="checkbox"] { cursor: pointer; }
tr.selected td { background: rgba(79, 141, 247, 0.10) !important; }

/* ─── Snooze + reaction + assignee pills in drawer ─────────────────── */
.drawer-meta-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
}
.meta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--ink-50); border: 1px solid var(--ink-100);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--ink-700);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.meta-pill:hover { border-color: var(--accent); color: var(--accent); }
.meta-pill.active { background: rgba(79, 141, 247, 0.10); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.meta-pill .meta-icon { font-size: 13px; }
.reaction-row { display: inline-flex; gap: 4px; }
.reaction-btn {
  background: var(--ink-50); border: 1px solid var(--ink-100);
  font-size: 14px; cursor: pointer;
  padding: 3px 8px; border-radius: 999px;
  transition: all var(--dur-fast) var(--ease);
}
.reaction-btn:hover { background: rgba(79, 141, 247, 0.10); border-color: var(--accent); transform: scale(1.15); }
.reaction-btn.active { background: rgba(79, 141, 247, 0.18); border-color: var(--accent); }

/* ─── Inline GradeX + BD panels in drawer ─────────────────────────── */
.inline-data-panel {
  background: var(--bg-alt);
  border: 1px solid var(--ink-100);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
}
.inline-data-row {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 8px; padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px dashed var(--ink-100);
}
.inline-data-row:last-child { border-bottom: none; }
.inline-data-key { color: var(--ink-500); font-weight: 500; }
.inline-data-val { color: var(--ink-900); font-variant-numeric: tabular-nums; }
.inline-data-val.muted { color: var(--ink-400); }
.repo-pill {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  padding: 2px 9px; border-radius: 999px;
  margin: 2px 4px 2px 0;
}
.repo-pill.accept { background: rgba(34, 197, 94, 0.10); border-color: #22c55e; color: #15803d; }
.repo-pill.reject { background: rgba(239, 68, 68, 0.10); border-color: #ef4444; color: #b91c1c; }
.repo-pill.on_hold { background: rgba(251, 191, 36, 0.10); border-color: #f59e0b; color: #b45309; }
body.dark .repo-pill.accept { color: #4ade80; }
body.dark .repo-pill.reject { color: #f87171; }
body.dark .repo-pill.on_hold { color: #fbbf24; }

/* ─── Activity feed in drawer ─────────────────────────────────────── */
.activity-feed { margin-top: 10px; }
.activity-entry {
  display: grid; grid-template-columns: 14px 1fr auto;
  gap: 10px; padding: 6px 0;
  font-size: 12px;
  border-left: 1px dashed var(--ink-100); padding-left: 12px;
  position: relative;
}
.activity-entry::before {
  content: ''; position: absolute; left: -5px; top: 11px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.activity-dot { color: var(--accent); }
.activity-text { color: var(--ink-700); }
.activity-time { color: var(--ink-400); font-size: 11px; white-space: nowrap; }

/* ─── Pricing widget in drawer ────────────────────────────────────── */
.price-widget {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 10px;
  padding: 14px;
  margin-top: 10px;
}
.price-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 0;
  font-size: 12.5px;
}
.price-row .price-label { color: var(--ink-700); }
.price-row .price-amount { font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.price-total {
  margin-top: 8px; padding-top: 10px; border-top: 1px dashed rgba(34, 197, 94, 0.30);
  font-size: 14px;
}
.price-total .price-amount { font-size: 17px; color: #15803d; font-weight: 700; }
body.dark .price-total .price-amount { color: #4ade80; }

/* ─── mNDA / Calendly status pills ────────────────────────────────── */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 600;
  border-radius: 999px;
  border: 1px solid;
}
.status-pill.signed { background: rgba(34, 197, 94, 0.10); color: #15803d; border-color: rgba(34, 197, 94, 0.35); }
.status-pill.booked { background: rgba(79, 141, 247, 0.10); color: var(--accent); border-color: rgba(79, 141, 247, 0.35); }
.status-pill.pending { background: var(--ink-50); color: var(--ink-500); border-color: var(--ink-200); }
body.dark .status-pill.signed { color: #4ade80; }
body.dark .status-pill.booked { color: #93c5fd; }

/* ─── Saved views menu ────────────────────────────────────────────── */
.saved-views-menu {
  position: relative;
  display: inline-block;
}
.saved-views-menu-btn {
  background: var(--surface); border: 1px solid var(--ink-200);
  color: var(--ink-700); font: inherit; font-size: 12px;
  padding: 6px 12px; border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.saved-views-menu-btn:hover { border-color: var(--accent); color: var(--accent); }
.saved-views-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 240px;
  background: var(--surface); border: 1px solid var(--ink-100);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 6px; z-index: 50;
}
.saved-views-dropdown.hidden { display: none; }
.saved-view-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 6px;
  cursor: pointer; font-size: 12.5px;
}
.saved-view-row:hover { background: var(--ink-50); }
.saved-view-row .sv-name { font-weight: 500; color: var(--ink-900); }
.saved-view-row .sv-del { background: none; border: none; color: var(--ink-400); cursor: pointer; font-size: 14px; padding: 0 4px; }
.saved-view-row .sv-del:hover { color: var(--red); }
.saved-view-add {
  display: flex; gap: 6px; padding: 8px 6px 4px;
  border-top: 1px solid var(--ink-100); margin-top: 6px;
}
.saved-view-add input {
  flex: 1; padding: 6px 9px;
  border: 1px solid var(--ink-200); border-radius: 6px;
  font-size: 12px; font-family: inherit; background: var(--surface);
}
.saved-view-add button {
  padding: 6px 12px; background: var(--accent); color: #fff;
  border: none; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 600;
}

/* ─── Recent leads in topbar ──────────────────────────────────────── */
.recent-leads-btn { position: relative; }
.recent-leads-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 240px; max-width: 320px;
  background: var(--surface); border: 1px solid var(--ink-100);
  border-radius: 10px; box-shadow: var(--shadow-md);
  padding: 6px; z-index: 50;
}
.recent-leads-dropdown.hidden { display: none; }
.recent-lead-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 10px; border-radius: 6px; cursor: pointer;
}
.recent-lead-row:hover { background: var(--ink-50); }
.recent-lead-name { font-size: 12.5px; font-weight: 500; color: var(--ink-900); }
.recent-lead-sub { font-size: 11px; color: var(--ink-400); }

/* ─── Snoozed row treatment ──────────────────────────────────────── */
tr.snoozed td:first-child { box-shadow: inset 3px 0 0 #f59e0b; opacity: 0.65; }
tr.snoozed td:first-child::after { content: ' 💤'; }

/* ════════════════════════════════════════════════════════════════════════
   Color overhaul (2026-06-05) — light + dark contrast pass.
   Goal: pass WCAG AA on every text/background pair, eliminate "faint text"
   and the dark-mode unreadability. Token-driven so future surfaces inherit.
   ════════════════════════════════════════════════════════════════════════ */

/* Light mode — tighter contrast on secondary inks (was too washed) */
:root {
  --ink-900: #0a0f1c;
  --ink-700: #1f2937;
  --ink-600: #2f3a4d;
  --ink-500: #3d4756;   /* was #4b5563 — bumped */
  --ink-400: #525d6e;   /* was #6b7280 — bumped */
  --ink-300: #7b8597;   /* was #9ca3af — bumped */
  --ink-200: #c2cad7;
  --ink-100: #dde3ec;
  --ink-50:  #f1f4f9;
  --surface: #ffffff;
  --surface-hover: #f5f8fc;
  --bg: #f6f9fd;
  --bg-alt: #ebf0f7;
}

/* Dark mode — Linear/Notion-style: deep navy bg, near-white primary text */
body.dark {
  --bg:         #0b1120;
  --bg-alt:     #0f172a;
  --surface:    #182238;
  --surface-hover: #1f2c47;
  --ink-900:    #f8fafc;   /* primary text — near white */
  --ink-700:    #e2e8f0;   /* body text */
  --ink-600:    #cbd5e1;
  --ink-500:    #a8b3c5;   /* labels */
  --ink-400:    #8b96aa;   /* hints */
  --ink-300:    #6a7793;
  --ink-200:    #3a4660;
  --ink-100:    #29344a;
  --ink-50:     #1b2540;
  --accent:     #6ba1ff;
  --accent-hover: #8db8ff;
  --glass:      rgba(24, 34, 56, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow:    0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px -1px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.50);
  --shadow-glass: 0 1px 3px rgba(0, 0, 0, 0.50), 0 12px 28px -10px rgba(0, 0, 0, 0.60);
}

/* Body text + background always reads from tokens */
body { background: var(--bg); color: var(--ink-900); }

/* === Light + dark sweeps: kill literal colors that don't switch ====== */

/* Topbar text in both modes */
.topbar .brand-title { color: #ffffff !important; }
.topbar .brand-sub   { color: rgba(255,255,255,0.65) !important; }
.tab-btn { color: rgba(255,255,255,0.72); }
.tab-btn:hover { color: #ffffff; }
.tab-btn.active { color: #ffffff !important; }

/* Page intro — use background-image (not the shorthand) so background-clip
   is preserved and the gradient stays clipped to text shape. */
.page-title { color: var(--ink-900); }
body:not(.dark) .page-title {
  background-image: linear-gradient(135deg, #0a0f1c 0%, #2f4f8a 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.dark .page-title {
  background-image: linear-gradient(135deg, #ffffff 0%, #93b8ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-sub { color: var(--ink-500); }

/* KPI cards — text colors via tokens */
.kpi-label { color: var(--ink-500) !important; }
.kpi-value { color: var(--ink-900) !important; }
.kpi-sub   { color: var(--ink-400) !important; }
body.dark .kpi-card { background: var(--surface) !important; border-color: var(--ink-200) !important; }
body.dark .kpi-card.drillable:hover { border-color: var(--accent) !important; }

/* Funnel cards */
.funnel-label { color: var(--ink-500); }
.funnel-count { color: var(--ink-900); }
.funnel-sub   { color: var(--ink-400); }
body.dark .funnel-stage { background: var(--surface); border-color: var(--ink-200); }

/* Metric chart cards */
body.dark .metric-card { background: var(--surface) !important; border-color: var(--ink-200) !important; }
.metric-card-title { color: var(--ink-900) !important; }
.metric-card-sub   { color: var(--ink-400) !important; }
.chart .bar-label  { color: var(--ink-900) !important; }
.chart .bar-value  { color: var(--ink-500) !important; }
body.dark .chart .bar-track { background: var(--ink-100) !important; }
.chart-empty       { color: var(--ink-400); }

/* Section titles + metric dots */
.metrics-title { color: var(--ink-900); }

/* Drawer body text colors all token-driven */
.drawer { background: var(--surface) !important; color: var(--ink-900); }
.drawer-header { background: var(--bg-alt) !important; border-color: var(--ink-100); }
.drawer-type   { color: var(--accent); }
#drawer-title  { color: var(--ink-900); }
.drawer-sub    { color: var(--ink-500); }
.drawer-section-title { color: var(--ink-500); }
.drawer-section-title::after { background: var(--ink-100); }
.fact-label    { color: var(--ink-500); }
.fact-value    { color: var(--ink-900); }
.fact-value.muted { color: var(--ink-400); }
.timeline-k    { color: var(--ink-500); }
.timeline-v    { color: var(--ink-900); }
.timeline-v.na { color: var(--ink-400); }
.fitness-reason { color: var(--ink-500); }
.connector-pill { background: var(--bg-alt); border: 1px solid var(--ink-100); color: var(--ink-700); }
.connector-pill .ck { color: var(--ink-400); }
.repo-name     { color: var(--ink-900); }
.repo-meta     { color: var(--ink-500); }
body.dark #drawer-title {
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Filterbar + chips + saved-views + count-strip */
.filterbar { background: var(--surface); border-color: var(--ink-100); }
.filter-label { color: var(--ink-500) !important; }
.chip { background: var(--surface) !important; border-color: var(--ink-200) !important; color: var(--ink-700) !important; }
.chip:hover { background: var(--bg-alt) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
.chip.active { background: var(--accent) !important; color: #ffffff !important; border-color: var(--accent) !important; }
body.dark .chip { background: var(--surface) !important; }
body.dark .chip:hover { background: var(--surface-hover) !important; }
.count-inline { background: var(--bg-alt); border-color: var(--ink-100); color: var(--ink-700); }
.search, .select {
  background: var(--surface);
  border-color: var(--ink-200);
  color: var(--ink-900);
}
.search::placeholder, input::placeholder { color: var(--ink-400); }
.search:focus, .select:focus { border-color: var(--accent); }

/* Table — light + dark */
.table-wrap { background: var(--surface); border-color: var(--ink-100); }
#grid thead th, #control-grid thead th {
  background: var(--bg-alt) !important;
  color: var(--ink-500) !important;
  border-bottom-color: var(--ink-100) !important;
}
body.dark #grid thead th, body.dark #control-grid thead th {
  background: var(--surface-hover) !important;
}
#grid tbody td, #control-grid tbody td { color: var(--ink-900); border-bottom-color: var(--ink-100) !important; }
#grid tbody tr:nth-child(even) td, #control-grid tbody tr:nth-child(even) td { background: rgba(0,0,0,0.015); }
body.dark #grid tbody tr:nth-child(even) td, body.dark #control-grid tbody tr:nth-child(even) td { background: rgba(255,255,255,0.025); }
#grid tbody tr:hover td, #control-grid tbody tr:hover td { background: rgba(79, 141, 247, 0.07) !important; }
body.dark #grid tbody tr:hover td, body.dark #control-grid tbody tr:hover td { background: rgba(107, 161, 255, 0.12) !important; }
.cell-na { color: var(--ink-400); }

/* Modal text colors */
.modal { background: var(--surface) !important; color: var(--ink-900); }
.modal-header { border-bottom-color: var(--ink-100); }
.modal-header h3 { color: var(--ink-900); }
.modal-sub { color: var(--ink-500); }
.form-field label { color: var(--ink-600); }
.form-field input, .form-field select, .form-field textarea {
  background: var(--surface) !important;
  border-color: var(--ink-200) !important;
  color: var(--ink-900) !important;
}
body.dark .form-field input,
body.dark .form-field select,
body.dark .form-field textarea {
  background: var(--bg-alt) !important;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-400); }
.form-status.info  { background: var(--bg-alt); color: var(--accent); }
.form-status.error { background: rgba(220, 38, 38, 0.10); color: #dc2626; }
.form-status.success { background: rgba(22, 163, 74, 0.10); color: #16a34a; }
body.dark .form-status.error { background: rgba(220, 38, 38, 0.20); color: #fca5a5; }
body.dark .form-status.success { background: rgba(22, 163, 74, 0.20); color: #86efac; }

/* LLM upload section — readable in both modes */
.llm-upload {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, rgba(124, 58, 237, 0.04) 100%);
  border: 1px solid rgba(139, 92, 246, 0.25);
}
body.dark .llm-upload {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.14) 0%, rgba(124, 58, 237, 0.08) 100%);
  border-color: rgba(139, 92, 246, 0.40);
}
.llm-upload-title { color: #6d28d9; }
.llm-upload-sub   { color: var(--ink-500); }
body.dark .llm-upload-title { color: #c4b5fd; }
.section-heading  { color: var(--ink-900); }
.section-heading .section-sub { color: var(--ink-400); }
.field-help       { color: var(--ink-400); }
.form-field label .field-hint { background: var(--bg-alt); color: var(--ink-500); }
.seed-grid .form-field label { color: #6d28d9 !important; }
body.dark .seed-grid .form-field label { color: #c4b5fd !important; }
.seed-grid .form-field input { border-color: rgba(139, 92, 246, 0.35) !important; }
body.dark .seed-grid .form-field input { background: var(--bg-alt) !important; }

/* Mark-touched row */
.mark-touch-row { background: var(--bg-alt); border-color: var(--ink-100); }
.mark-touch-note { background: var(--surface); border-color: var(--ink-200); color: var(--ink-900); }

/* Status banner — light + dark */
.status-banner.info  { background: rgba(79, 141, 247, 0.12); color: var(--accent); border: 1px solid rgba(79, 141, 247, 0.30); }
.status-banner.error { background: rgba(220, 38, 38, 0.12); color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.30); }
.status-banner.success { background: rgba(22, 163, 74, 0.12); color: #15803d; border: 1px solid rgba(22, 163, 74, 0.30); }
body.dark .status-banner.error { color: #fca5a5; }
body.dark .status-banner.success { color: #86efac; }

/* Banner-info ("email not being sent yet") */
.banner-info { color: #78350f; background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%); border-color: #fde68a; }
body.dark .banner-info { color: #fcd34d; background: linear-gradient(135deg, rgba(254, 243, 199, 0.10) 0%, rgba(254, 249, 195, 0.06) 100%); border-color: rgba(253, 230, 138, 0.30); }
.banner-info strong { color: inherit; }

/* Stats bar */
.stat-card { background: var(--surface) !important; border-color: var(--ink-100) !important; }
.stat-label { color: var(--ink-500) !important; }
.stat-value { color: var(--ink-900); }

/* KPI delta pills (already had colors, but make sure they read on dark) */
.kpi-card .kpi-delta.up   { background: rgba(34, 197, 94, 0.16); color: #15803d; }
.kpi-card .kpi-delta.down { background: rgba(220, 38, 38, 0.16); color: #b91c1c; }
.kpi-card .kpi-delta.flat { background: var(--bg-alt); color: var(--ink-500); }
body.dark .kpi-card .kpi-delta.up   { color: #86efac; }
body.dark .kpi-card .kpi-delta.down { color: #fca5a5; }

/* Funnel-filter banner */
.funnel-filter-banner {
  background: linear-gradient(180deg, rgba(79, 141, 247, 0.10) 0%, rgba(79, 141, 247, 0.04) 100%);
  border-color: rgba(79, 141, 247, 0.30);
  color: var(--accent);
}
body.dark .funnel-filter-banner {
  background: linear-gradient(180deg, rgba(107, 161, 255, 0.18) 0%, rgba(107, 161, 255, 0.08) 100%);
  border-color: rgba(107, 161, 255, 0.45);
  color: #c2dafd;
}
.funnel-filter-banner .ff-label { color: inherit; }
.funnel-filter-banner .ff-chip { background: var(--surface); border-color: var(--ink-200); color: var(--ink-700); }
body.dark .funnel-filter-banner .ff-chip { background: var(--surface-hover); }
.funnel-filter-banner .ff-clear { background: transparent; border-color: var(--ink-200); color: inherit; }

/* Drawer meta pills */
.meta-pill { background: var(--bg-alt); border-color: var(--ink-100); color: var(--ink-700); }
.meta-pill:hover { background: var(--surface-hover); }
.meta-pill.active { background: rgba(79, 141, 247, 0.14); border-color: var(--accent); color: var(--accent); }
body.dark .meta-pill { background: var(--surface-hover); }
body.dark .meta-pill.active { background: rgba(107, 161, 255, 0.22); color: #c2dafd; }
.reaction-btn { background: var(--bg-alt); border-color: var(--ink-100); }
.reaction-btn:hover { background: var(--surface-hover); }
.reaction-btn.active { background: rgba(79, 141, 247, 0.18); border-color: var(--accent); }
body.dark .reaction-btn { background: var(--surface-hover); }

/* Activity feed */
.activity-text { color: var(--ink-700); }
.activity-time { color: var(--ink-400); }
.activity-entry { border-left-color: var(--ink-100); }

/* Inline data panel + repo pills */
.inline-data-panel { background: var(--bg-alt); border-color: var(--ink-100); }
.inline-data-row { border-bottom-color: var(--ink-100); }
.inline-data-key { color: var(--ink-500); }
.inline-data-val { color: var(--ink-900); }
.inline-data-val.muted { color: var(--ink-400); }
.repo-pill { background: var(--surface); border-color: var(--ink-200); color: var(--ink-700); }

/* Price widget */
.price-widget {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.10) 0%, rgba(16, 185, 129, 0.05) 100%);
  border-color: rgba(34, 197, 94, 0.30);
}
body.dark .price-widget { background: linear-gradient(135deg, rgba(34, 197, 94, 0.16) 0%, rgba(16, 185, 129, 0.08) 100%); border-color: rgba(34, 197, 94, 0.40); }
.price-label { color: var(--ink-700); }
.price-amount { color: var(--ink-900); }
.price-total .price-label { color: var(--ink-900); font-weight: 600; }
.price-total .price-amount { color: #15803d; }
body.dark .price-total .price-amount { color: #86efac; }

/* Status pills */
.status-pill.signed  { background: rgba(34, 197, 94, 0.14); color: #15803d; border-color: rgba(34, 197, 94, 0.40); }
.status-pill.booked  { background: rgba(79, 141, 247, 0.14); color: var(--accent); border-color: rgba(79, 141, 247, 0.40); }
.status-pill.pending { background: var(--bg-alt); color: var(--ink-500); border-color: var(--ink-200); }
body.dark .status-pill.signed  { color: #86efac; }
body.dark .status-pill.booked  { color: #c2dafd; }

/* Today's queue strip */
.today-queue {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.10) 0%, rgba(239, 68, 68, 0.05) 100%);
  border-color: rgba(251, 191, 36, 0.30);
}
body.dark .today-queue { background: linear-gradient(135deg, rgba(251, 191, 36, 0.16) 0%, rgba(239, 68, 68, 0.08) 100%); border-color: rgba(251, 191, 36, 0.45); }
.today-queue-title { color: #92400e; }
body.dark .today-queue-title { color: #fcd34d; }
.queue-card { background: rgba(255, 255, 255, 0.78); border-color: rgba(251, 191, 36, 0.30); }
body.dark .queue-card { background: rgba(24, 34, 56, 0.75); border-color: rgba(251, 191, 36, 0.40); }
.queue-card-count { color: #b45309; }
body.dark .queue-card-count { color: #fcd34d; }
.queue-card-label { color: var(--ink-900); }
.queue-card-sub { color: var(--ink-500); }

/* Command palette body text */
.cmdk-modal { background: var(--surface); border-color: var(--ink-200); }
#cmdk-input { color: var(--ink-900); }
.cmdk-result-label { color: var(--ink-900); }
.cmdk-result-sub   { color: var(--ink-400); }
.cmdk-section-label { color: var(--ink-500); }
.cmdk-empty { color: var(--ink-400); }
.cmdk-footer { background: var(--bg-alt); border-color: var(--ink-100); color: var(--ink-500); }
.cmdk-hint kbd, .cmdk-footer kbd { background: var(--bg-alt); border-color: var(--ink-200); color: var(--ink-700); }
.cmdk-result.active { background: rgba(79, 141, 247, 0.10); border-left-color: var(--accent); }
body.dark .cmdk-result.active { background: rgba(107, 161, 255, 0.18); border-left-color: var(--accent); }

/* Saved views dropdown */
.saved-views-menu-btn { background: var(--surface); border-color: var(--ink-200); color: var(--ink-700); }
.saved-views-dropdown { background: var(--surface); border-color: var(--ink-100); }
.saved-view-row .sv-name { color: var(--ink-900); }
.saved-view-row:hover { background: var(--bg-alt); }

/* Recent leads dropdown */
.recent-leads-dropdown { background: var(--surface); border-color: var(--ink-100); }
.recent-lead-name { color: var(--ink-900); }
.recent-lead-sub  { color: var(--ink-400); }
.recent-lead-row:hover { background: var(--bg-alt); }

/* btn-ghost in dark */
body.dark .btn-ghost { background: var(--surface); border-color: var(--ink-200); color: var(--ink-700); }
body.dark .btn-ghost:hover { background: var(--surface-hover); color: var(--ink-900); }
body.dark .btn-danger { color: #fca5a5; border-color: rgba(220, 38, 38, 0.30); }
body.dark .btn-danger:hover { background: rgba(220, 38, 38, 0.16); border-color: #fca5a5; }

/* Bulk bar (when it ships) */
.bulk-bar { background: var(--surface); border-color: var(--accent); }
.bulk-btn { background: var(--surface); border-color: var(--ink-200); color: var(--ink-700); }

/* Connector pills + form helpers */
body.dark .connector-pill { background: var(--surface-hover); border-color: var(--ink-200); color: var(--ink-900); }
body.dark .connector-pill .ck { color: var(--ink-400); }

/* GradeX repo list inside drawer */
.repo-list .repo-row { border-bottom: 1px solid var(--ink-100); }
.repo-row .repo-status.passing  { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.repo-row .repo-status.holding  { background: rgba(251, 191, 36, 0.16); color: #b45309; }
.repo-row .repo-status.rejected { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }
body.dark .repo-row .repo-status.passing  { color: #86efac; }
body.dark .repo-row .repo-status.holding  { color: #fcd34d; }
body.dark .repo-row .repo-status.rejected { color: #fca5a5; }

/* Scrollbar in dark */
body.dark ::-webkit-scrollbar-thumb { background: var(--ink-200) !important; }
body.dark ::-webkit-scrollbar-thumb:hover { background: var(--ink-300) !important; }

/* ════════════════════════════════════════════════════════════════════════
   Readability pass v3 (2026-06-05) — table density, type pills,
   Decision Fitness card legibility (light + dark), fact grid in dark.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Table cells: bigger text, more padding, stronger zebra ────────── */
#grid tbody td,
#control-grid tbody td {
  padding: 13px 14px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: var(--ink-900) !important;
}
#grid thead th,
#control-grid thead th {
  padding: 13px 14px !important;
  font-size: 11.5px !important;
}
#grid tbody tr:nth-child(even) td,
#control-grid tbody tr:nth-child(even) td {
  background: rgba(15, 23, 42, 0.025) !important;
}
body.dark #grid tbody tr:nth-child(even) td,
body.dark #control-grid tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.035) !important;
}
#grid tbody tr:hover td,
#control-grid tbody tr:hover td {
  background: rgba(79, 141, 247, 0.10) !important;
}
body.dark #grid tbody tr:hover td,
body.dark #control-grid tbody tr:hover td {
  background: rgba(107, 161, 255, 0.16) !important;
}
.cell-name { font-size: 13.5px; font-weight: 600; }
.cell-email { font-size: 11.5px; }
.cell-context { font-size: 12.5px !important; line-height: 1.5 !important; color: var(--ink-700) !important; }
.cell-na { color: var(--ink-400) !important; font-style: italic; }

/* Table-wrap subtle elevation in light, dark-friendly border */
.table-wrap {
  background: var(--surface) !important;
  border: 1px solid var(--ink-100) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px -4px rgba(15, 23, 42, 0.06);
}
body.dark .table-wrap {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
  border-color: var(--ink-200) !important;
}

/* ── Type pill: stronger contrast in both modes ──────────────────── */
.type-pill {
  font-size: 11px !important;
  padding: 4px 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
.type-Codebase, .type-Codebase-Modern {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(59, 130, 246, 0.45) !important;
}
body.dark .type-Codebase, body.dark .type-Codebase-Modern { color: #93c5fd !important; background: rgba(59, 130, 246, 0.22) !important; }
.type-Codebase-Legacy {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #b45309 !important;
  border: 1px solid rgba(245, 158, 11, 0.50) !important;
}
body.dark .type-Codebase-Legacy { color: #fcd34d !important; background: rgba(245, 158, 11, 0.24) !important; }
.type-Legacy-Questionnaire {
  background: rgba(234, 88, 12, 0.14) !important;
  color: #c2410c !important;
  border: 1px solid rgba(234, 88, 12, 0.45) !important;
}
body.dark .type-Legacy-Questionnaire { color: #fdba74 !important; background: rgba(234, 88, 12, 0.24) !important; }
.type-Business-Data {
  background: rgba(190, 24, 93, 0.14) !important;
  color: #9d174d !important;
  border: 1px solid rgba(190, 24, 93, 0.45) !important;
}
body.dark .type-Business-Data { color: #f9a8d4 !important; background: rgba(190, 24, 93, 0.28) !important; }
.type-Referral {
  background: rgba(139, 92, 246, 0.14) !important;
  color: #6d28d9 !important;
  border: 1px solid rgba(139, 92, 246, 0.45) !important;
}
body.dark .type-Referral { color: #c4b5fd !important; background: rgba(139, 92, 246, 0.24) !important; }
.type-Unknown { background: var(--ink-50) !important; color: var(--ink-500) !important; border-color: var(--ink-200) !important; }

/* ── Row type tints in dark mode (the existing pastel rows blow out) ── */
body.dark tbody tr.r-Codebase,
body.dark tbody tr.r-Codebase-Modern { background: rgba(59, 130, 246, 0.04); }
body.dark tbody tr.r-Codebase-Legacy { background: rgba(245, 158, 11, 0.04); }
body.dark tbody tr.r-Legacy-Questionnaire { background: rgba(234, 88, 12, 0.04); }
body.dark tbody tr.r-Business-Data { background: rgba(190, 24, 93, 0.04); }
body.dark tbody tr.r-Referral { background: rgba(139, 92, 246, 0.04); }
body:not(.dark) tbody tr.r-Codebase,
body:not(.dark) tbody tr.r-Codebase-Modern { background: rgba(59, 130, 246, 0.03); }
body:not(.dark) tbody tr.r-Codebase-Legacy { background: rgba(245, 158, 11, 0.04); }
body:not(.dark) tbody tr.r-Legacy-Questionnaire { background: rgba(234, 88, 12, 0.04); }
body:not(.dark) tbody tr.r-Business-Data { background: rgba(190, 24, 93, 0.03); }
body:not(.dark) tbody tr.r-Referral { background: rgba(139, 92, 246, 0.03); }
body.dark tbody tr.stale-30d { opacity: 0.55; }

/* ── Decision Fitness card — real visual treatment, dark-safe ──────── */
.fitness-card {
  padding: 20px 22px !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--ink-100) !important;
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--surface) 100%) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 8px 24px -10px rgba(15, 23, 42, 0.10);
  position: relative;
  overflow: hidden;
  margin-bottom: 4px;
}
.fitness-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%);
}

/* Score-specific card styling (light) */
.fitness-card.qualifying, .fitness-card.accept {
  border-color: rgba(34, 197, 94, 0.45) !important;
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 60%) !important;
}
.fitness-card.qualifying::before, .fitness-card.accept::before {
  background: linear-gradient(90deg, #16a34a 0%, #10b981 100%);
}
.fitness-card.borderline, .fitness-card.on_hold {
  border-color: rgba(245, 158, 11, 0.55) !important;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 60%) !important;
}
.fitness-card.borderline::before, .fitness-card.on_hold::before {
  background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
}
.fitness-card.likely_reject, .fitness-card.reject {
  border-color: rgba(239, 68, 68, 0.50) !important;
  background: linear-gradient(180deg, #fef2f2 0%, #ffffff 60%) !important;
}
.fitness-card.likely_reject::before, .fitness-card.reject::before {
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
}

/* Score-specific card styling (dark) — translucent overlays so text reads */
body.dark .fitness-card {
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--surface) 100%) !important;
  border-color: var(--ink-200) !important;
}
body.dark .fitness-card.qualifying, body.dark .fitness-card.accept {
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.18) 0%, rgba(24, 34, 56, 0.95) 70%) !important;
  border-color: rgba(34, 197, 94, 0.55) !important;
}
body.dark .fitness-card.borderline, body.dark .fitness-card.on_hold {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.18) 0%, rgba(24, 34, 56, 0.95) 70%) !important;
  border-color: rgba(245, 158, 11, 0.55) !important;
}
body.dark .fitness-card.likely_reject, body.dark .fitness-card.reject {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.18) 0%, rgba(24, 34, 56, 0.95) 70%) !important;
  border-color: rgba(239, 68, 68, 0.55) !important;
}

.fitness-verdict { display: flex; align-items: center; gap: 12px; }
.fitness-icon { font-size: 26px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); }
.fitness-label {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--ink-900) !important;
  letter-spacing: -0.015em !important;
}
.fitness-reason {
  margin-top: 12px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--ink-700) !important;
}
body.dark .fitness-reason { color: var(--ink-600) !important; }

/* Verdict label color by tier */
.fitness-card.qualifying .fitness-label,
.fitness-card.accept .fitness-label { color: #15803d !important; }
.fitness-card.borderline .fitness-label,
.fitness-card.on_hold .fitness-label { color: #b45309 !important; }
.fitness-card.likely_reject .fitness-label,
.fitness-card.reject .fitness-label { color: #b91c1c !important; }
body.dark .fitness-card.qualifying .fitness-label,
body.dark .fitness-card.accept .fitness-label { color: #86efac !important; }
body.dark .fitness-card.borderline .fitness-label,
body.dark .fitness-card.on_hold .fitness-label { color: #fcd34d !important; }
body.dark .fitness-card.likely_reject .fitness-label,
body.dark .fitness-card.reject .fitness-label { color: #fca5a5 !important; }

/* ── Fact grid — readable cards in dark ──────────────────────────── */
body.dark .fact {
  background: var(--surface-hover) !important;
  border-color: var(--ink-200) !important;
}
.fact-label { font-size: 10.5px !important; }
.fact-value { font-size: 14.5px !important; }
.fact-value.muted { color: var(--ink-400) !important; }

/* ── Connector pills + repo rows in dark ─────────────────────────── */
body.dark .connector-pill { background: var(--surface-hover) !important; border-color: var(--ink-200) !important; }
body.dark .repo-row { background: var(--surface-hover); border-color: var(--ink-200); }
.repo-row { padding: 9px 14px !important; font-size: 12.5px !important; }
.repo-name { font-size: 12.5px !important; font-weight: 600; }
.repo-meta { color: var(--ink-500) !important; }

/* ── Stats bar on Leads tab — better contrast ─────────────────────── */
.stat-card {
  padding: 11px 16px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body.dark .stat-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30); }

/* ── Filter chips: bigger touch target + clearer text ─────────────── */
.chip {
  padding: 7px 14px !important;
  font-size: 12.5px !important;
}

/* ── Search input: larger, more visible ──────────────────────────── */
.search, .select {
  padding: 8px 12px !important;
  font-size: 13px !important;
}

/* ── Banner-info — better contrast in dark ────────────────────────── */
body.dark .banner-info {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.14) 0%, rgba(254, 249, 195, 0.08) 100%) !important;
  border-color: rgba(253, 230, 138, 0.40) !important;
  color: #fde68a !important;
}
.banner-info { padding: 13px 17px !important; font-size: 13px !important; }

/* ════════════════════════════════════════════════════════════════════════
   Dark mode v2 — dark.design inspiration (pure-black + white-opacity surfaces).
   Replaces the navy-tinted palette with the classic gallery aesthetic:
   - Background: pure black
   - Surfaces: rgba(255,255,255,X) overlays for elevation
   - Text hierarchy via opacity tiers, not lightness scale
   ════════════════════════════════════════════════════════════════════════ */
body.dark {
  /* Surfaces — pure black base + translucent-white overlays */
  --bg:            #000000;
  --bg-alt:        #0a0a0a;          /* near-black for slight separation */
  --surface:       rgba(255, 255, 255, 0.045);
  --surface-hover: rgba(255, 255, 255, 0.075);

  /* Text — pure white at descending opacities */
  --ink-900: rgba(255, 255, 255, 1.0);    /* primary */
  --ink-700: rgba(255, 255, 255, 0.78);   /* body */
  --ink-600: rgba(255, 255, 255, 0.68);
  --ink-500: rgba(255, 255, 255, 0.56);   /* labels */
  --ink-400: rgba(255, 255, 255, 0.40);   /* hints */
  --ink-300: rgba(255, 255, 255, 0.28);   /* icons */
  --ink-200: rgba(255, 255, 255, 0.12);   /* borders */
  --ink-100: rgba(255, 255, 255, 0.07);   /* dividers */
  --ink-50:  rgba(255, 255, 255, 0.035);  /* faint */

  --accent:        #6ba1ff;
  --accent-hover:  #93b8ff;
  --glass:         rgba(0, 0, 0, 0.80);
  --glass-border:  rgba(255, 255, 255, 0.08);
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.60);
  --shadow:        0 1px 3px rgba(0, 0, 0, 0.75);
  --shadow-md:     0 8px 24px -10px rgba(0, 0, 0, 0.80);
  --shadow-glass:  0 1px 3px rgba(0, 0, 0, 0.60), 0 24px 48px -16px rgba(0, 0, 0, 0.85);
  --shadow-drawer: -24px 0 64px -8px rgba(0, 0, 0, 0.85);
}

/* Force pure-black body in dark — no navy bleed */
body.dark { background: #000000 !important; color: var(--ink-900); }

/* Topbar — frosted black glass (dark.design's signature) */
body.dark .topbar {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--ink-100);
}

/* Cards / surfaces use the new white-overlay tokens automatically.
   These rules override the v1 dark-mode rules that hardcoded surface hex. */
body.dark .kpi-card,
body.dark .funnel-stage,
body.dark .metric-card,
body.dark .filterbar,
body.dark .stat-card,
body.dark .page-intro,
body.dark .modal,
body.dark .drawer,
body.dark .cmdk-modal,
body.dark .saved-views-dropdown,
body.dark .recent-leads-dropdown,
body.dark .table-wrap {
  background: var(--surface) !important;
  border-color: var(--ink-200) !important;
  backdrop-filter: blur(8px);
}

/* Drawer header has its own sheet — slightly heavier overlay */
body.dark .drawer-header {
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid var(--ink-100);
}

/* Modal body / cmdk footer — slight tint */
body.dark .cmdk-footer { background: rgba(255, 255, 255, 0.025) !important; }

/* Topbar inputs / chips / buttons */
body.dark .form-field input,
body.dark .form-field select,
body.dark .form-field textarea,
body.dark .search,
body.dark .select,
body.dark .mark-touch-note {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--ink-200) !important;
  color: var(--ink-900) !important;
}
body.dark .chip {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--ink-200) !important;
}
body.dark .chip:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--accent) !important; color: var(--ink-900) !important; }
body.dark .chip.active { background: var(--accent) !important; color: #000 !important; }
body.dark .saved-views-menu-btn,
body.dark .btn-ghost {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--ink-200) !important;
}
body.dark .btn-ghost:hover { background: rgba(255, 255, 255, 0.08) !important; }
body.dark .icon-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink-200);
  color: var(--ink-700);
}
body.dark .icon-btn:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }

/* Tables on pure black */
body.dark #grid thead th,
body.dark #control-grid thead th {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--ink-500) !important;
  border-bottom: 1px solid var(--ink-200) !important;
}
body.dark #grid tbody td,
body.dark #control-grid tbody td {
  color: var(--ink-900) !important;
  border-bottom: 1px solid var(--ink-100) !important;
  background: transparent !important;
}
body.dark #grid tbody tr:nth-child(even) td,
body.dark #control-grid tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.020) !important;
}
body.dark #grid tbody tr:hover td,
body.dark #control-grid tbody tr:hover td {
  background: rgba(107, 161, 255, 0.10) !important;
}

/* Row-type tints in dark — barely-visible color hint */
body.dark tbody tr.r-Codebase,
body.dark tbody tr.r-Codebase-Modern { background: rgba(59, 130, 246, 0.035); }
body.dark tbody tr.r-Codebase-Legacy { background: rgba(245, 158, 11, 0.035); }
body.dark tbody tr.r-Legacy-Questionnaire { background: rgba(234, 88, 12, 0.035); }
body.dark tbody tr.r-Business-Data { background: rgba(236, 72, 153, 0.035); }
body.dark tbody tr.r-Referral { background: rgba(139, 92, 246, 0.035); }

/* Type pills — pastel-on-translucent (dark.design uses this pattern) */
body.dark .type-Codebase, body.dark .type-Codebase-Modern {
  background: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.40) !important;
}
body.dark .type-Codebase-Legacy {
  background: rgba(245, 158, 11, 0.18) !important; color: #fde68a !important;
  border: 1px solid rgba(245, 158, 11, 0.40) !important;
}
body.dark .type-Legacy-Questionnaire {
  background: rgba(234, 88, 12, 0.18) !important; color: #fed7aa !important;
  border: 1px solid rgba(234, 88, 12, 0.40) !important;
}
body.dark .type-Business-Data {
  background: rgba(236, 72, 153, 0.22) !important; color: #fbcfe8 !important;
  border: 1px solid rgba(236, 72, 153, 0.45) !important;
}
body.dark .type-Referral {
  background: rgba(139, 92, 246, 0.20) !important; color: #ddd6fe !important;
  border: 1px solid rgba(139, 92, 246, 0.40) !important;
}
body.dark .type-Unknown {
  background: rgba(255, 255, 255, 0.05) !important; color: var(--ink-500) !important;
  border: 1px solid var(--ink-200) !important;
}

/* Decision Fitness card — on pure black, use colored overlay not gradient */
body.dark .fitness-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--ink-200) !important;
}
body.dark .fitness-card.qualifying,
body.dark .fitness-card.accept {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.16) 0%, rgba(255, 255, 255, 0.04) 70%) !important;
  border-color: rgba(34, 197, 94, 0.45) !important;
}
body.dark .fitness-card.borderline,
body.dark .fitness-card.on_hold {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.16) 0%, rgba(255, 255, 255, 0.04) 70%) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}
body.dark .fitness-card.likely_reject,
body.dark .fitness-card.reject {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.16) 0%, rgba(255, 255, 255, 0.04) 70%) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
}
body.dark .fitness-card.qualifying .fitness-label,
body.dark .fitness-card.accept .fitness-label { color: #86efac !important; }
body.dark .fitness-card.borderline .fitness-label,
body.dark .fitness-card.on_hold .fitness-label { color: #fde68a !important; }
body.dark .fitness-card.likely_reject .fitness-label,
body.dark .fitness-card.reject .fitness-label { color: #fca5a5 !important; }
body.dark .fitness-card .fitness-label { color: #ffffff !important; }
body.dark .fitness-card .fitness-reason { color: var(--ink-700) !important; }

/* Fact grid cards in dark — translucent overlays */
body.dark .fact {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--ink-200) !important;
}
body.dark .fact-value { color: var(--ink-900) !important; }
body.dark .fact-label { color: var(--ink-500) !important; }

/* Connector pills, repo rows in dark */
body.dark .connector-pill,
body.dark .repo-row,
body.dark .inline-data-panel,
body.dark .meta-pill,
body.dark .reaction-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--ink-200) !important;
}
body.dark .meta-pill.active {
  background: rgba(107, 161, 255, 0.18) !important;
  border-color: var(--accent) !important;
  color: #c2dafd !important;
}
body.dark .reaction-btn.active { background: rgba(107, 161, 255, 0.22) !important; border-color: var(--accent) !important; }

/* Repo status badges (passing/holding/rejected) — translucent-on-black */
body.dark .repo-row .repo-status.passing  { background: rgba(34, 197, 94, 0.18); color: #86efac; }
body.dark .repo-row .repo-status.holding  { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
body.dark .repo-row .repo-status.rejected { background: rgba(220, 38, 38, 0.18); color: #fca5a5; }

/* Status pills */
body.dark .status-pill.signed  { background: rgba(34, 197, 94, 0.20) !important; color: #86efac !important; border-color: rgba(34, 197, 94, 0.45) !important; }
body.dark .status-pill.booked  { background: rgba(107, 161, 255, 0.20) !important; color: #c2dafd !important; border-color: rgba(107, 161, 255, 0.45) !important; }
body.dark .status-pill.pending { background: rgba(255, 255, 255, 0.05) !important; color: var(--ink-500) !important; border-color: var(--ink-200) !important; }

/* KPI delta pills */
body.dark .kpi-card .kpi-delta.up   { background: rgba(34, 197, 94, 0.22); color: #86efac; }
body.dark .kpi-card .kpi-delta.down { background: rgba(220, 38, 38, 0.22); color: #fca5a5; }
body.dark .kpi-card .kpi-delta.flat { background: rgba(255, 255, 255, 0.05); color: var(--ink-500); }

/* Today's queue strip — dim warm orange overlay on black */
body.dark .today-queue {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.10) 0%, rgba(239, 68, 68, 0.06) 100%) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
}
body.dark .today-queue-title { color: #fcd34d !important; }
body.dark .queue-card { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(251, 191, 36, 0.30) !important; }
body.dark .queue-card-count { color: #fcd34d !important; }

/* Funnel filter banner */
body.dark .funnel-filter-banner {
  background: linear-gradient(180deg, rgba(107, 161, 255, 0.16) 0%, rgba(107, 161, 255, 0.06) 100%) !important;
  border-color: rgba(107, 161, 255, 0.45) !important;
  color: #c2dafd !important;
}
body.dark .funnel-filter-banner .ff-chip { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--ink-200) !important; color: var(--ink-700) !important; }

/* Banner-info (yellow "email not sent yet") */
body.dark .banner-info {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.08) 0%, rgba(254, 249, 195, 0.05) 100%) !important;
  border-color: rgba(253, 230, 138, 0.30) !important;
  color: #fde68a !important;
}

/* LLM upload card */
body.dark .llm-upload {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.12) 0%, rgba(124, 58, 237, 0.06) 100%) !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
}
body.dark .llm-upload-title { color: #c4b5fd !important; }
body.dark .seed-grid .form-field input { background: rgba(255, 255, 255, 0.04) !important; }
body.dark .seed-grid .form-field label { color: #c4b5fd !important; }

/* Mark-touched row */
body.dark .mark-touch-row { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--ink-200) !important; }

/* Status banners */
body.dark .status-banner.info { background: rgba(107, 161, 255, 0.14) !important; color: #c2dafd !important; border-color: rgba(107, 161, 255, 0.35) !important; }
body.dark .status-banner.error { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; border-color: rgba(220, 38, 38, 0.40) !important; }
body.dark .status-banner.success { background: rgba(34, 197, 94, 0.18) !important; color: #86efac !important; border-color: rgba(34, 197, 94, 0.40) !important; }

/* Count strip pill */
body.dark .count-inline { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--ink-200) !important; color: var(--ink-700) !important; }

/* Topbar text + badge in dark */
body.dark .badge-count {
  background: rgba(107, 161, 255, 0.30) !important;
  border-color: rgba(107, 161, 255, 0.55) !important;
  color: #ffffff !important;
}

/* Page title gradient on dark — use background-image not shorthand */
body.dark .page-title {
  background-image: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.65) 100%) !important;
  background-color: transparent !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Drawer title — bright white gradient */
body.dark #drawer-title {
  background-image: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.65) 100%) !important;
  background-color: transparent !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Charts bars - keep bright but on black */
body.dark .chart .bar-track { background: rgba(255, 255, 255, 0.05) !important; }

/* KPI card top-accent stripes stay bright */
body.dark .kpi-card::before { opacity: 0.95; }

/* Scrollbar in dark */
body.dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12) !important; border: 2px solid #000 !important; }
body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.20) !important; }

/* Price widget on black */
body.dark .price-widget {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.14) 0%, rgba(16, 185, 129, 0.06) 100%) !important;
  border-color: rgba(34, 197, 94, 0.40) !important;
}
body.dark .price-total .price-amount { color: #86efac !important; }

/* Activity feed dotted line — white at low opacity */
body.dark .activity-entry { border-left-color: var(--ink-100) !important; }

/* Form labels in dark */
body.dark .form-field label { color: var(--ink-700) !important; }
body.dark .form-field label .field-hint { background: rgba(255, 255, 255, 0.06); color: var(--ink-500); }

/* Refresh button stays brand blue */
body.dark .btn-primary {
  background: linear-gradient(180deg, #6ba1ff 0%, #4f8df7 100%);
  color: #000;
  font-weight: 700;
}
body.dark .btn-primary:hover { background: linear-gradient(180deg, #93b8ff 0%, #6ba1ff 100%); }

/* GradeX button busy spinner */
.icon-btn.busy span {
  display: inline-block;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Status banner: only render the box when .show is present (no empty box). */
.status-banner { display: none; }
.status-banner.show { display: block; }

/* Page intro — strip the redundant glass card framing. Title + subtitle now
   sit inline on the page background. */
.page-intro {
  margin: 22px 0 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Higher-specificity override to beat body.dark .page-intro */
body .page-intro,
body.dark .page-intro {
  margin: 22px 0 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   Wave 1B + Wave 2 styles
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Multi-select checkbox column ──────────────────────────────────── */
.row-check { width: 30px !important; text-align: center; }
.row-check input { cursor: pointer; width: 14px; height: 14px; accent-color: var(--accent); }
tr.row-selected td { background: rgba(79, 141, 247, 0.12) !important; }
body.dark tr.row-selected td { background: rgba(107, 161, 255, 0.20) !important; }
.row-check-head { width: 30px !important; }
.row-check-head input { cursor: pointer; width: 14px; height: 14px; accent-color: var(--accent); }

/* ─── Bulk bar (already styled earlier — augment with action button polish) */
.bulk-btn-danger {
  background: rgba(220, 38, 38, 0.10) !important;
  color: #b91c1c !important;
  border-color: rgba(220, 38, 38, 0.30) !important;
}
.bulk-btn-danger:hover { background: rgba(220, 38, 38, 0.16) !important; }
body.dark .bulk-btn-danger { color: #fca5a5 !important; }

/* ─── Person-centric grouped view ──────────────────────────────────── */
.grouped-list {
  display: flex; flex-direction: column; gap: 10px;
}
/* View-mode toggle (Individual table <-> By-seller cards) on Leads/Control/QA.
   Without these, the `hidden` class JS toggles had no effect — there is no
   generic `.hidden{display:none}` — so a populated table could never be hidden
   and the toggle appeared one-directional (F-f). */
.table-wrap.hidden,
.grouped-list.hidden { display: none; }
.founder-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.founder-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.founder-card-head { display: flex; align-items: center; gap: 14px; }
.founder-card-name { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.founder-card-meta { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.founder-card-counts { margin-left: auto; display: flex; gap: 6px; }
.founder-card-count {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  background: var(--ink-50); color: var(--ink-700);
  border: 1px solid var(--ink-200);
}
.founder-card-submissions {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--ink-100);
  display: none;
}
.founder-card.expanded .founder-card-submissions { display: block; }
.founder-card.expanded .founder-card-collapse { transform: rotate(90deg); }
.founder-card-collapse {
  font-size: 10px; color: var(--ink-400);
  transition: transform var(--dur-fast) var(--ease);
}
.sub-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; margin-top: 4px;
  border-radius: 6px; font-size: 12.5px;
  cursor: pointer;
}
.sub-row:hover { background: var(--bg-alt); }
.sub-row-type { min-width: 130px; }
.sub-row-co { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-row-stage { min-width: 120px; flex-shrink: 0; }
.sub-row-date { color: var(--ink-500); font-size: 11.5px; margin-left: auto; }

/* ─── Kanban board ──────────────────────────────────────────────── */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding: 4px;
  align-items: start;
}
.kanban-col {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  min-height: 200px;
  display: flex; flex-direction: column;
  transition: all var(--dur-fast) var(--ease);
}
.kanban-col.drop-target { border-color: var(--accent); background: rgba(79, 141, 247, 0.08); }
body.dark .kanban-col.drop-target { background: rgba(107, 161, 255, 0.10); }
.kanban-col-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-100);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--ink-500);
}
.kanban-col-head .kanban-count {
  font-size: 11px; font-weight: 700;
  background: var(--ink-50); color: var(--ink-700);
  padding: 2px 7px; border-radius: 999px;
}
.kanban-col-body {
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: calc(100vh - 280px); overflow-y: auto;
}
.kanban-card {
  background: var(--bg-alt);
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: grab;
  transition: all var(--dur-fast) var(--ease);
}
.kanban-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.kanban-card.dragging { opacity: 0.5; cursor: grabbing; }
.kanban-card-name { font-size: 12.5px; font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.kanban-card-company { font-size: 11px; color: var(--ink-500); margin-top: 2px; }
.kanban-card-foot {
  margin-top: 8px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; color: var(--ink-400);
}

/* color the column accents to match funnel-stage colors
   (stage keys = the three derive.js board column sets: new, qualifying,
   warm_hold, sampling, in_qa, qa_passed, accepted, gradex_review,
   purchased, closed) */
.kanban-col[data-stage="new"]           .kanban-col-head { color: #64748b; }
.kanban-col[data-stage="qualifying"]    .kanban-col-head { color: #6366f1; }
.kanban-col[data-stage="warm_hold"]     .kanban-col-head { color: #f59e0b; }
.kanban-col[data-stage="sampling"]      .kanban-col-head { color: #14b8a6; }
.kanban-col[data-stage="in_qa"]         .kanban-col-head { color: #3b82f6; }
.kanban-col[data-stage="qa_passed"]     .kanban-col-head { color: #22c55e; }
.kanban-col[data-stage="accepted"]      .kanban-col-head { color: #16a34a; }
.kanban-col[data-stage="gradex_review"] .kanban-col-head { color: #8b5cf6; }
.kanban-col[data-stage="purchased"]     .kanban-col-head { color: #10b981; }
.kanban-col[data-stage="closed"]        .kanban-col-head { color: #71717a; }
body.dark .kanban-col[data-stage="qualifying"] .kanban-col-head { color: #a5b4fc; }
body.dark .kanban-col[data-stage="warm_hold"] .kanban-col-head { color: #fcd34d; }
body.dark .kanban-col[data-stage="sampling"] .kanban-col-head { color: #5eead4; }
body.dark .kanban-col[data-stage="in_qa"] .kanban-col-head { color: #93c5fd; }
body.dark .kanban-col[data-stage="qa_passed"] .kanban-col-head { color: #4ade80; }
body.dark .kanban-col[data-stage="accepted"] .kanban-col-head { color: #86efac; }
body.dark .kanban-col[data-stage="gradex_review"] .kanban-col-head { color: #c4b5fd; }
body.dark .kanban-col[data-stage="purchased"] .kanban-col-head { color: #86efac; }

/* ─── @mentions bell ─────────────────────────────────────────────── */
.bell-btn { position: relative; }
.bell-count {
  position: absolute; top: -2px; right: -2px;
  min-width: 14px; height: 14px;
  background: #dc2626; color: #ffffff;
  font-size: 9px; font-weight: 700;
  border-radius: 999px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--navy-900);
}
.bell-count.hidden { display: none; }
.bell-dropdown {
  position: fixed; top: 64px; right: 16px;
  width: min(380px, 90vw); max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--ink-200);
  border-radius: 12px;
  box-shadow: 0 24px 60px -16px rgba(15, 23, 42, 0.30);
  z-index: 95;
}
.bell-dropdown.hidden { display: none; }
.bell-dropdown-head {
  padding: 12px 16px; border-bottom: 1px solid var(--ink-100);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--ink-900);
}
.bell-dropdown-empty {
  padding: 24px; text-align: center; font-size: 12.5px; color: var(--ink-400);
}
.mention-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 16px; border-bottom: 1px solid var(--ink-100);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.mention-row:hover { background: var(--bg-alt); }
.mention-row:last-child { border-bottom: none; }
.mention-meta { font-size: 11px; color: var(--ink-400); }
.mention-snippet { font-size: 12.5px; color: var(--ink-700); line-height: 1.4; }
.mention-snippet .mention-tag { color: var(--accent); font-weight: 600; }
body.dark .mention-row:hover { background: rgba(255, 255, 255, 0.05); }

/* ─── Anomaly strip on Overview ─────────────────────────────────── */
.anomaly-strip {
  margin-bottom: 22px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(79, 141, 247, 0.10) 0%, rgba(139, 92, 246, 0.06) 100%);
  border: 1px solid rgba(79, 141, 247, 0.30);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.anomaly-strip.hidden { display: none; }
body.dark .anomaly-strip {
  background: linear-gradient(135deg, rgba(107, 161, 255, 0.16) 0%, rgba(139, 92, 246, 0.10) 100%);
  border-color: rgba(107, 161, 255, 0.40);
}
.anomaly-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); }
.anomaly-row { font-size: 13px; color: var(--ink-900); display: flex; gap: 8px; align-items: baseline; }
.anomaly-row .anomaly-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.anomaly-row .anomaly-delta.up { color: #15803d; }
.anomaly-row .anomaly-delta.down { color: #b91c1c; }
body.dark .anomaly-row .anomaly-delta.up { color: #86efac; }
body.dark .anomaly-row .anomaly-delta.down { color: #fca5a5; }

/* ─── Cohort retention table ─────────────────────────────────────── */
.cohort-table {
  display: grid;
  font-size: 11.5px;
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-alt);
}
.cohort-row {
  display: grid;
  grid-template-columns: 130px repeat(6, 1fr);
  border-bottom: 1px solid var(--ink-100);
}
.cohort-row:last-child { border-bottom: none; }
.cohort-row.head { background: var(--surface); font-weight: 700; color: var(--ink-500); }
.cohort-cell {
  padding: 8px 10px;
  border-right: 1px solid var(--ink-100);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.cohort-cell:last-child { border-right: none; }
.cohort-cell.label { text-align: left; font-weight: 500; color: var(--ink-700); }
.cohort-cell.empty { color: var(--ink-300); }
/* heatmap intensity (0-100) */
.cohort-cell.heat-0  { background: transparent; color: var(--ink-300); }
.cohort-cell.heat-1  { background: rgba(34, 197, 94, 0.06); color: var(--ink-700); }
.cohort-cell.heat-2  { background: rgba(34, 197, 94, 0.14); color: var(--ink-900); }
.cohort-cell.heat-3  { background: rgba(34, 197, 94, 0.24); color: var(--ink-900); }
.cohort-cell.heat-4  { background: rgba(34, 197, 94, 0.36); color: #064e3b; }
.cohort-cell.heat-5  { background: rgba(34, 197, 94, 0.50); color: #022c22; font-weight: 600; }
body.dark .cohort-cell.heat-4 { color: #86efac; }
body.dark .cohort-cell.heat-5 { color: #d1fae5; }

/* ─── Template editor in drawer ──────────────────────────────────── */
.template-editor { margin-top: 10px; }
.template-editor textarea {
  width: 100%; min-height: 110px; resize: vertical;
  padding: 12px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  font: inherit; font-size: 12.5px; line-height: 1.5;
  color: var(--ink-900);
}
.template-editor textarea:focus { outline: none; border-color: var(--accent); }
.template-editor-actions {
  display: flex; gap: 8px; margin-top: 8px;
  justify-content: flex-end;
}
.template-editor-actions button {
  font-size: 11.5px; padding: 6px 12px;
}
.template-editor .template-meta {
  font-size: 11px; color: var(--ink-400);
  margin-bottom: 6px;
}

/* ─── Onboarding name prompt (one-time) ─────────────────────────────── */
.onboard-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  z-index: 99;
}
.onboard-overlay.hidden { display: none; }
.onboard-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(460px, 92vw);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 32px 32px 24px;
  z-index: 100;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.50),
              0 4px 12px rgba(0, 0, 0, 0.15);
  animation: onboard-in 320ms var(--ease-out);
  text-align: center;
}
.onboard-modal.hidden { display: none; }
@keyframes onboard-in {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.onboard-mark {
  font-size: 38px; line-height: 1; color: var(--accent);
  filter: drop-shadow(0 0 16px rgba(79, 141, 247, 0.55));
  margin-bottom: 14px;
}
.onboard-title {
  margin: 0 0 8px;
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink-900);
}
.onboard-sub {
  margin: 0 0 22px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-500);
}
.onboard-input-wrap { margin-bottom: 16px; }
#onboard-name {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: 15px;
  background: var(--bg-alt); border: 1px solid var(--ink-200);
  border-radius: 10px; color: var(--ink-900);
  text-align: center;
}
#onboard-name:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 141, 247, 0.18); }
body.dark #onboard-name { background: rgba(255, 255, 255, 0.04); }
.onboard-submit { width: 100%; padding: 11px 18px !important; font-size: 14px !important; }
.onboard-foot { margin: 12px 0 0; font-size: 11.5px; color: var(--ink-400); }

.activity-actor { color: var(--accent); font-weight: 500; font-size: 11px; }

/* ─── Multi-file staged list + batch review pane ─────────────────── */
.file-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.file-list:empty { display: none; }
.file-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(139, 92, 246, 0.30);
  border-radius: 999px;
  font-size: 11.5px;
  color: #6d28d9;
}
body.dark .file-chip { color: #c4b5fd; background: rgba(139, 92, 246, 0.18); }
.file-chip-x {
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: inherit; padding: 0; line-height: 1;
}
.file-chip-x:hover { opacity: 0.6; }

.batch-review {
  margin-top: 14px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(79, 141, 247, 0.06) 0%, rgba(79, 141, 247, 0.02) 100%);
  border: 1px solid rgba(79, 141, 247, 0.30);
  border-radius: 10px;
}
body.dark .batch-review {
  background: linear-gradient(180deg, rgba(107, 161, 255, 0.10) 0%, rgba(107, 161, 255, 0.04) 100%);
  border-color: rgba(107, 161, 255, 0.35);
}
.batch-review.hidden { display: none; }
.batch-review-head { margin-bottom: 12px; }
.batch-review-title { display: block; font-size: 12.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.4px; }
.batch-review-sub { display: block; font-size: 11.5px; color: var(--ink-500); margin-top: 3px; }
.batch-row {
  display: grid;
  grid-template-columns: 22px 1.5fr 1fr 1.5fr auto;
  gap: 8px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--ink-100);
}
.batch-row:last-child { border-bottom: none; }
.batch-row-num {
  font-size: 11px; font-weight: 700; color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.batch-row input, .batch-row select {
  width: 100%;
  padding: 6px 9px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  font: inherit; font-size: 12px; color: var(--ink-900);
}
body.dark .batch-row input, body.dark .batch-row select { background: rgba(255, 255, 255, 0.04); }
.batch-row input:focus, .batch-row select:focus { outline: none; border-color: var(--accent); }
.batch-row-del {
  background: none; border: 1px solid var(--ink-200);
  width: 24px; height: 24px;
  border-radius: 6px; cursor: pointer;
  font-size: 12px; color: var(--ink-500);
  display: inline-flex; align-items: center; justify-content: center;
}
.batch-row-del:hover { border-color: var(--red); color: var(--red); }
.batch-row.row-error { background: rgba(220, 38, 38, 0.06); }
.batch-row.row-success { opacity: 0.5; }
.batch-row .batch-row-status {
  font-size: 10.5px; color: var(--ink-400);
  grid-column: 2 / -1; padding-left: 0;
}
.batch-review-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 12px;
}

/* ─── Batch card v2: richer per-file fields ──────────────────────── */
.batch-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
body.dark .batch-card { background: rgba(255, 255, 255, 0.03); border-color: var(--ink-200); }
.batch-card.row-error { border-color: var(--red-light); background: rgba(220, 38, 38, 0.05); }
.batch-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--ink-100);
}
.batch-card-file {
  flex: 1;
  font-size: 11.5px; color: var(--ink-500);
  font-family: var(--font-mono);
}
.batch-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.batch-field { display: flex; flex-direction: column; gap: 4px; }
.batch-field-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ink-500);
  margin-top: 6px;
}
.batch-input, .batch-textarea {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  font: inherit; font-size: 12.5px; color: var(--ink-900);
}
body.dark .batch-input,
body.dark .batch-textarea { background: rgba(255, 255, 255, 0.04); }
.batch-input:focus, .batch-textarea:focus { outline: none; border-color: var(--accent); }
.batch-textarea { font-family: inherit; line-height: 1.4; resize: vertical; min-height: 38px; }

@media (max-width: 720px) {
  .batch-card-grid { grid-template-columns: 1fr; }
}

/* File chip status variants */
.file-chip.chip-busy {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.50);
  color: #b45309;
}
body.dark .file-chip.chip-busy { color: #fcd34d; background: rgba(245, 158, 11, 0.20); }
.file-chip.chip-done {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.45);
  color: #15803d;
}
body.dark .file-chip.chip-done { color: #86efac; background: rgba(34, 197, 94, 0.20); }
.file-chip.chip-err {
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(220, 38, 38, 0.45);
  color: #b91c1c;
}
body.dark .file-chip.chip-err { color: #fca5a5; background: rgba(220, 38, 38, 0.20); }

/* Removed the parse-button row; use a clean stacked layout */
.llm-upload-row-v2 {
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
.llm-upload-row-v2 input[type="file"] {
  font-size: 12px; padding: 6px 8px;
  border: 1px solid var(--ink-200);
  background: var(--surface);
  border-radius: 6px; cursor: pointer;
}
body.dark .llm-upload-row-v2 input[type="file"] { background: rgba(255, 255, 255, 0.04); }
.llm-upload-row-v2 input[type="text"] {
  padding: 8px 11px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  font: inherit; font-size: 12.5px; color: var(--ink-900);
}
body.dark .llm-upload-row-v2 input[type="text"] { background: rgba(255, 255, 255, 0.04); }
.llm-upload-row-v2 input[type="text"]:focus { outline: none; border-color: var(--accent); }

/* ═══ QA tab ═══════════════════════════════════════════════════════════ */
.qa-section-title {
  font-size: 15px; font-weight: 650; color: var(--ink-900);
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
}
.qa-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.qa-dot-bd { background: var(--purple); }
.qa-dot-legacy { background: var(--t-codebase); }
.qa-section-count {
  font-size: 12px; font-weight: 600; color: var(--ink-400);
  background: var(--bg-alt); border-radius: 10px; padding: 1px 9px;
}
/* Fixed layout so the <colgroup> widths apply and Stage/Verdict stay readable. */
.qa-table { table-layout: fixed; width: 100%; }
.qa-table th, .qa-table td { vertical-align: top; overflow: hidden; }
.qa-table td > select, .qa-table td > .qa-input, .qa-table td > input { width: 100%; box-sizing: border-box; max-width: 100%; }
.qa-table .qa-company, .qa-table .qa-founder, .qa-table .qa-shared { overflow-wrap: anywhere; }
.qa-company { font-weight: 600; color: var(--ink-900); }
.muted-text, .qa-founder, .qa-shared { color: var(--ink-400); font-size: 11.5px; }
.qa-shared { font-size: 10.5px; margin-top: 2px; }
.qa-input {
  width: 100%; box-sizing: border-box; padding: 5px 7px;
  border: 1px solid var(--ink-200); border-radius: 6px;
  font: inherit; font-size: 12px; color: var(--ink-900); background: var(--surface);
  resize: vertical;
}
.qa-input:focus { outline: none; border-color: var(--accent); }
.qa-date { min-width: 130px; }
body.dark .qa-input { background: rgba(255,255,255,0.04); color: #e8eefb; border-color: rgba(255,255,255,0.12); }

/* Coloured selects (left accent bar) */
.qa-prio-P0 { border-left: 4px solid var(--red); }
.qa-prio-P1 { border-left: 4px solid var(--amber); }
.qa-prio-P2 { border-left: 4px solid var(--t-codebase); }
.qa-prio-P3 { border-left: 4px solid var(--ink-300); }
.qa-stage-blocking { border-left: 4px solid var(--red); }
.qa-stage-in_progress { border-left: 4px solid var(--amber); }
.qa-stage-received { border-left: 4px solid var(--t-codebase); }
.qa-stage-done { border-left: 4px solid var(--green); }
.qa-verdict-accept { border-left: 4px solid var(--green); }
.qa-verdict-reject { border-left: 4px solid var(--red); }
.qa-verdict-partial { border-left: 4px solid var(--amber); }
.qa-verdict-pending { border-left: 4px solid var(--ink-300); }

.qa-row-done { opacity: 0.62; }
/* Whole-row tint by QA stage (received / in progress / blocking / done) so a
   submission's state is distinguishable at a glance. Double-class beats
   .qa-row-done specificity for done rows. */
.qa-row.qa-rowstage-received    > td { background: rgba(148, 163, 184, 0.10); }
.qa-row.qa-rowstage-in_progress > td { background: rgba(59, 130, 246, 0.13); }
.qa-row.qa-rowstage-blocking    > td { background: rgba(239, 68, 68, 0.14); }
.qa-row.qa-rowstage-done        > td { background: rgba(34, 197, 94, 0.10); }
.qa-row.qa-rowstage-in_progress:hover > td { background: rgba(59, 130, 246, 0.20); }
.qa-row.qa-rowstage-blocking:hover    > td { background: rgba(239, 68, 68, 0.22); }
.qa-row.qa-rowstage-received:hover    > td { background: rgba(148, 163, 184, 0.18); }
.qa-row.qa-rowstage-done:hover        > td { background: rgba(34, 197, 94, 0.18); }
/* Theme is class-based (body.dark), not OS-based — keep these in sync with it. */
body.dark .qa-row.qa-rowstage-received    > td { background: rgba(148, 163, 184, 0.14); }
body.dark .qa-row.qa-rowstage-in_progress > td { background: rgba(59, 130, 246, 0.20); }
body.dark .qa-row.qa-rowstage-blocking    > td { background: rgba(239, 68, 68, 0.22); }
body.dark .qa-row.qa-rowstage-done        > td { background: rgba(34, 197, 94, 0.16); }
body.dark .qa-row.qa-rowstage-received:hover    > td { background: rgba(148, 163, 184, 0.22); }
body.dark .qa-row.qa-rowstage-in_progress:hover > td { background: rgba(59, 130, 246, 0.28); }
body.dark .qa-row.qa-rowstage-blocking:hover    > td { background: rgba(239, 68, 68, 0.30); }
body.dark .qa-row.qa-rowstage-done:hover        > td { background: rgba(34, 197, 94, 0.24); }
.qa-group-row td {
  background: var(--bg-alt); font-size: 11px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-400);
  padding: 6px 14px !important;
}
.qa-actions { white-space: nowrap; }

/* Attachments */
.qa-att-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 5px; }
.qa-att-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-alt); border-radius: 6px; padding: 2px 6px; font-size: 11px; max-width: 100%;
}
.qa-att-chip a { color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-att-chip a:hover { text-decoration: underline; }
.qa-att-x {
  border: none; background: none; cursor: pointer; color: var(--ink-400);
  font-size: 14px; line-height: 1; padding: 0 2px;
}
.qa-att-x:hover { color: var(--red); }
.qa-att-add {
  border: 1px dashed var(--ink-200); background: none; cursor: pointer;
  color: var(--ink-400); font-size: 11px; border-radius: 6px; padding: 2px 8px;
}
.qa-att-add:hover { color: var(--accent); border-color: var(--accent); }
.qa-att-form { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; }
.qa-att-form .qa-input { width: auto; flex: 1 1 120px; }
.qa-att-form.hidden { display: none; }
.qa-att-save { padding: 4px 10px; font-size: 11px; }

/* ─── Control tab: By-founder grouped view ─────────────────────── */
.ctl-grouped {
  display: flex; flex-direction: column; gap: 10px;
}
.ctl-grouped.hidden { display: none; }
.ctl-founder-card { cursor: default; }
.ctl-founder-card .founder-card-head { cursor: pointer; }

.ctl-bulk-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: flex-end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--ink-100);
}
.ctl-bulk-btn {
  background: var(--bg-alt);
  border: 1px solid var(--ink-200);
  color: var(--ink-700);
  font: inherit; font-size: 11.5px; font-weight: 500;
  padding: 5px 10px; border-radius: 6px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.ctl-bulk-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent); color: var(--accent);
}
body.dark .ctl-bulk-btn { background: rgba(255, 255, 255, 0.04); }
body.dark .ctl-bulk-btn:hover { background: rgba(107, 161, 255, 0.14); }
.ctl-bulk-select {
  background: var(--bg-alt);
  border: 1px solid var(--ink-200);
  color: var(--ink-700);
  font: inherit; font-size: 11.5px;
  padding: 5px 9px; border-radius: 6px;
  cursor: pointer;
  max-width: 140px;
}
body.dark .ctl-bulk-select { background: rgba(255, 255, 255, 0.04); }
.ctl-bulk-select:hover { border-color: var(--accent); }

/* By-seller card: collapsed shows only the seller header; the submission rows
   and the bulk "Apply to all" row live together in the expand-gated section. */
.ctl-apply-all-label {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-right: 4px; white-space: nowrap;
}
/* Bulk row sits above the submission rows inside the expand-gated section. The
   parent already draws the top divider, so drop the bulk row's own top border
   and instead divide it from the submission rows below. */
.ctl-seller-detail > .ctl-bulk-row:first-child {
  margin-top: 0; padding-top: 0; border-top: none;
  padding-bottom: 10px; margin-bottom: 6px;
  border-bottom: 1px dashed var(--ink-100);
}
/* a.ctl-sub-link (element+class) so the accent colour wins over .ctl-sub-co,
   which is defined later in this file. */
a.ctl-sub-link { color: var(--accent); text-decoration: none; cursor: pointer; }
a.ctl-sub-link:hover { text-decoration: underline; }
/* Per-submission "last activity" readout (distinct from explicit "last touch"). */
.ctl-sub-edited { font-size: 11px; color: var(--ink-400); white-space: nowrap; }
/* Labeled dropdowns — per-submission rows and the bulk "Apply to all" row. */
.ctl-sub-field, .ctl-bulk-field { display: inline-flex; flex-direction: column; gap: 2px; }
.ctl-sub-field-label, .ctl-bulk-field-label {
  font-size: 9.5px; font-weight: 700; color: var(--ink-400);
  text-transform: uppercase; letter-spacing: 0.04em;
}
/* Bulk select reading back accumulated state. Colour comes from the tone
   classes; is-set only adds weight, is-mixed reads as a muted italic. */
.ctl-bulk-select.is-set { font-weight: 600; }
.ctl-bulk-select.is-mixed { font-style: italic; color: var(--ink-500); }

.ctl-sub-row {
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) minmax(360px, 2fr) auto;
  gap: 10px;
  padding: 8px 10px;
  align-items: center;
  border-bottom: 1px dashed var(--ink-100);
  font-size: 12px;
}
.ctl-sub-row:last-child { border-bottom: none; }
.ctl-sub-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ctl-sub-co { font-weight: 500; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl-sub-funnel {
  font-size: 11px; color: var(--ink-500);
  background: var(--bg-alt); border: 1px solid var(--ink-100);
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
body.dark .ctl-sub-funnel { background: rgba(255, 255, 255, 0.04); }
.ctl-sub-edits { display: flex; gap: 6px; flex-wrap: wrap; }
.ctl-sub-edits select {
  background: var(--surface); border: 1px solid var(--ink-200);
  color: var(--ink-900); font: inherit; font-size: 11.5px;
  padding: 4px 7px; border-radius: 5px; min-width: 110px;
}
body.dark .ctl-sub-edits select { background: rgba(255, 255, 255, 0.04); }
.ctl-sub-open {
  background: transparent; border: 1px solid var(--ink-200);
  color: var(--ink-500); font: inherit; font-size: 11px;
  padding: 4px 9px; border-radius: 5px; cursor: pointer;
  white-space: nowrap;
}
.ctl-sub-open:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
  .ctl-sub-row { grid-template-columns: 1fr; }
}

/* ─── QA tab: By-founder grouped view ─────────────────────────── */
.qa-grouped { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.qa-grouped.hidden { display: none; }
.qa-founder-card {}

.qa-track-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
  border: 1px solid;
}
.qa-track-bd {
  background: rgba(190, 24, 93, 0.14);
  color: #9d174d;
  border-color: rgba(190, 24, 93, 0.45);
}
.qa-track-legacy {
  background: rgba(234, 88, 12, 0.14);
  color: #c2410c;
  border-color: rgba(234, 88, 12, 0.45);
}
body.dark .qa-track-bd { color: #f9a8d4; background: rgba(190, 24, 93, 0.28); }
body.dark .qa-track-legacy { color: #fdba74; background: rgba(234, 88, 12, 0.24); }

.qa-sub-row .ctl-sub-edits select { min-width: 90px; }

/* QA grouped view — attachment pills under each sub-row */
.qa-sub-attachments {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 4px 10px 6px;
  font-size: 11px;
  border-bottom: 1px dashed var(--ink-100);
}
.qa-sub-attachments-label {
  font-size: 11px; color: var(--ink-400);
  margin-right: 2px;
}
.qa-attachment-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 500;
  background: rgba(79, 141, 247, 0.10);
  color: var(--accent);
  border: 1px solid rgba(79, 141, 247, 0.30);
  border-radius: 999px;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qa-attachment-pill:hover {
  background: rgba(79, 141, 247, 0.18);
  border-color: var(--accent);
  transform: translateY(-1px);
}
body.dark .qa-attachment-pill {
  background: rgba(107, 161, 255, 0.14);
  color: #c2dafd;
  border-color: rgba(107, 161, 255, 0.35);
}
body.dark .qa-attachment-pill:hover {
  background: rgba(107, 161, 255, 0.22);
}

/* Requested Samples section dot — amber to distinguish from BD pink + Legacy orange */
.qa-dot.qa-dot-sampling { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }

/* ─── Priority pills (P0=red, P1=orange, P2=amber, P3=neutral) ────── */
.priority-pill {
  font-weight: 700; letter-spacing: 0.5px;
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid;
}
.priority-p0 {
  background: rgba(220, 38, 38, 0.16); color: #991b1b;
  border-color: rgba(220, 38, 38, 0.50);
}
body.dark .priority-p0 { color: #fca5a5; background: rgba(220, 38, 38, 0.26); }
.priority-p1 {
  background: rgba(245, 158, 11, 0.16); color: #b45309;
  border-color: rgba(245, 158, 11, 0.50);
}
body.dark .priority-p1 { color: #fcd34d; background: rgba(245, 158, 11, 0.24); }
.priority-p2 {
  background: rgba(202, 138, 4, 0.14); color: #854d0e;
  border-color: rgba(202, 138, 4, 0.45);
}
body.dark .priority-p2 { color: #fde047; background: rgba(202, 138, 4, 0.22); }
.priority-p3 {
  background: var(--ink-50); color: var(--ink-500);
  border-color: var(--ink-200);
}
.priority-none {
  background: transparent;
  color: var(--ink-400);
  border-color: var(--ink-200);
  border-style: dashed;
}

/* FCS toggle pill */
.fcs-toggle {
  background: var(--bg-alt);
  border-color: var(--ink-200);
}
.fcs-toggle.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(220, 38, 38, 0.14));
  border-color: rgba(245, 158, 11, 0.55);
  color: #b45309; font-weight: 700;
}
body.dark .fcs-toggle.active { color: #fcd34d; }

/* ─── QA Status card in drawer ──────────────────────────────────── */
.qa-status-card { background: rgba(79, 141, 247, 0.04); border: 1px solid rgba(79, 141, 247, 0.18); border-radius: 12px; padding: 16px; }
body.dark .qa-status-card { background: rgba(107, 161, 255, 0.06); border-color: rgba(107, 161, 255, 0.25); }
.qa-status-item {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 10px;
}
.qa-status-item:first-child { margin-top: 0; }
.qa-status-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.qa-status-label { flex: 1; min-width: 200px; font-size: 14px; font-weight: 600; color: var(--ink-900); }
.qa-status-owner { font-size: 11.5px; color: var(--ink-500); }

/* 4-step stage progress bar */
.qa-stage-progress {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin-bottom: 12px;
}
.qa-stage-step {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 8px;
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  font-size: 11px;
  color: var(--ink-500);
}
.qa-stage-step:hover { border-color: var(--accent); color: var(--accent); }
.qa-stage-step.done {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.40);
  color: #15803d;
}
body.dark .qa-stage-step.done { color: #86efac; }
.qa-stage-step.current {
  background: rgba(79, 141, 247, 0.18);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(79, 141, 247, 0.20);
}
.qa-stage-step.current.is-blocking {
  background: rgba(220, 38, 38, 0.16);
  border-color: rgba(220, 38, 38, 0.50);
  color: #991b1b;
}
body.dark .qa-stage-step.current.is-blocking { color: #fca5a5; }
.qa-stage-step.future { opacity: 0.65; }
.qa-stage-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink-100);
  font-weight: 700; font-size: 10px;
  color: var(--ink-700);
}
.qa-stage-step.done .qa-stage-step-num { background: rgba(34, 197, 94, 0.30); color: #15803d; }
.qa-stage-step.current .qa-stage-step-num { background: var(--accent); color: #fff; }
.qa-stage-step.current.is-blocking .qa-stage-step-num { background: #dc2626; color: #fff; }

/* Action button row */
.qa-status-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.qa-action-btn {
  padding: 7px 14px;
  border: 1px solid var(--ink-200);
  background: var(--surface);
  color: var(--ink-700);
  border-radius: 7px;
  font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.qa-action-btn:hover { background: var(--surface-hover); border-color: var(--accent); }
.qa-action-btn.primary {
  background: linear-gradient(180deg, var(--accent) 0%, #3b78d8 100%);
  color: #fff; border-color: var(--accent); font-weight: 600;
}
.qa-action-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79, 141, 247, 0.30); }
.qa-action-btn.accept { color: #15803d; border-color: rgba(34, 197, 94, 0.40); }
.qa-action-btn.accept.active { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.65); }
.qa-action-btn.reject { color: #991b1b; border-color: rgba(220, 38, 38, 0.40); }
.qa-action-btn.reject.active { background: rgba(220, 38, 38, 0.18); border-color: rgba(220, 38, 38, 0.65); }
.qa-action-btn.partial { color: #b45309; border-color: rgba(245, 158, 11, 0.40); }
.qa-action-btn.partial.active { background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.65); }
.qa-action-btn.warning { color: #b45309; border-color: rgba(245, 158, 11, 0.40); }
.qa-action-btn.warning:hover { background: rgba(245, 158, 11, 0.12); }
body.dark .qa-action-btn.accept { color: #86efac; }
body.dark .qa-action-btn.reject { color: #fca5a5; }
body.dark .qa-action-btn.partial { color: #fcd34d; }
body.dark .qa-action-btn.warning { color: #fcd34d; }

.qa-status-attachments {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--ink-100);
}
.qa-status-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--ink-100);
  font-size: 11.5px; color: var(--ink-500);
}
.qa-status-meta .verdict-accept { color: #15803d; font-weight: 600; }
.qa-status-meta .verdict-reject { color: #991b1b; font-weight: 600; }
.qa-status-meta .verdict-partial { color: #b45309; font-weight: 600; }
body.dark .qa-status-meta .verdict-accept { color: #86efac; }
body.dark .qa-status-meta .verdict-reject { color: #fca5a5; }
body.dark .qa-status-meta .verdict-partial { color: #fcd34d; }

/* Also color the existing QA grouped sub-row priority chip */
.ctl-sub-funnel.priority-p0,
.ctl-sub-funnel.priority-p1,
.ctl-sub-funnel.priority-p2,
.ctl-sub-funnel.priority-p3 {
  /* already set above */
}

/* ─── QA grouped: clean sub-card layout (replaces stacked dropdowns) ─── */
.qa-sub-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ink-100);
  background: transparent;
  transition: background 0.12s;
}
.qa-sub-card:last-child { border-bottom: none; }
.qa-sub-card:hover { background: rgba(99, 102, 241, 0.04); }
body.dark .qa-sub-card:hover { background: rgba(99, 102, 241, 0.08); }

.qa-sub-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.qa-sub-title {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
  font-size: 13px;
}
.qa-sub-title:hover .qa-sub-co { color: var(--accent); text-decoration: underline; }
.qa-sub-title .qa-sub-co {
  font-weight: 600; color: var(--ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 380px;
}
.qa-sub-meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 11.5px; color: var(--ink-500);
  white-space: nowrap;
}
.qa-sub-open-link:hover { text-decoration: underline; }

/* Stage chip — color by stage */
.qa-stage-chip {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  border: 1px solid;
}
.qa-stage-received { background: rgba(99, 102, 241, 0.12); color: #4338ca; border-color: rgba(99, 102, 241, 0.45); }
.qa-stage-in_progress { background: rgba(245, 158, 11, 0.14); color: #b45309; border-color: rgba(245, 158, 11, 0.50); }
.qa-stage-blocking { background: rgba(220, 38, 38, 0.14); color: #991b1b; border-color: rgba(220, 38, 38, 0.55); }
.qa-stage-done { background: rgba(34, 197, 94, 0.14); color: #15803d; border-color: rgba(34, 197, 94, 0.45); }
body.dark .qa-stage-received { color: #c7d2fe; }
body.dark .qa-stage-in_progress { color: #fcd34d; }
body.dark .qa-stage-blocking { color: #fca5a5; }
body.dark .qa-stage-done { color: #86efac; }

.qa-verdict-chip {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase;
  border: 1px solid;
}
.qa-verdict-chip.verdict-accept { background: rgba(34, 197, 94, 0.14); color: #15803d; border-color: rgba(34, 197, 94, 0.45); }
.qa-verdict-chip.verdict-reject { background: rgba(220, 38, 38, 0.14); color: #991b1b; border-color: rgba(220, 38, 38, 0.55); }
.qa-verdict-chip.verdict-partial { background: rgba(245, 158, 11, 0.14); color: #b45309; border-color: rgba(245, 158, 11, 0.50); }

/* Inline labeled selects (Stage/Verdict/Priority on a single row) */
.qa-sub-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding-left: 4px;
}
.qa-labeled-select {
  display: inline-flex; flex-direction: column; gap: 2px;
  font-size: 10.5px;
}
.qa-labeled-select-label {
  font-size: 10px; color: var(--ink-400);
  text-transform: uppercase; letter-spacing: 0.4px;
  font-weight: 600;
}
.qa-labeled-select-input {
  background: var(--surface); border: 1px solid var(--ink-200);
  color: var(--ink-900); font: inherit; font-size: 12px;
  padding: 4px 22px 4px 8px; border-radius: 6px;
  min-width: 110px;
  cursor: pointer;
}
body.dark .qa-labeled-select-input { background: rgba(255, 255, 255, 0.05); }
.qa-labeled-select-input:hover { border-color: var(--accent); }
.qa-labeled-select-input:focus { outline: 2px solid rgba(99, 102, 241, 0.30); outline-offset: 0; }
/* Per-submission QA select tones — same 5-tone palette as the Control bulk row. */
.qa-labeled-select-input.tone-neutral  { background: rgba(100, 116, 139, 0.10); border-color: rgba(100, 116, 139, 0.40); color: #475569; }
.qa-labeled-select-input.tone-progress { background: rgba(99, 102, 241, 0.10); border-color: rgba(99, 102, 241, 0.40); color: #4338ca; }
.qa-labeled-select-input.tone-positive { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.38); color: #15803d; }
.qa-labeled-select-input.tone-warn     { background: rgba(245, 158, 11, 0.11); border-color: rgba(245, 158, 11, 0.44); color: #b45309; }
.qa-labeled-select-input.tone-negative { background: rgba(244, 63, 94, 0.10); border-color: rgba(244, 63, 94, 0.42); color: #be123c; }
body.dark .qa-labeled-select-input.tone-neutral  { background: rgba(148, 163, 184, 0.14); border-color: rgba(148, 163, 184, 0.42); color: #cbd5e1; }
body.dark .qa-labeled-select-input.tone-progress { background: rgba(129, 140, 248, 0.16); border-color: rgba(129, 140, 248, 0.46); color: #c7d2fe; }
body.dark .qa-labeled-select-input.tone-positive { background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.46); color: #86efac; }
body.dark .qa-labeled-select-input.tone-warn     { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.50); color: #fcd34d; }
body.dark .qa-labeled-select-input.tone-negative { background: rgba(244, 63, 94, 0.17); border-color: rgba(244, 63, 94, 0.50); color: #fda4af; }

.qa-sub-att-inline {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  margin-left: auto;
}
.qa-sub-att-label { color: var(--ink-400); }

/* (Requested Samples still uses .qa-sub-row; QA grouped now uses .qa-sub-card) */

/* ─── BD drawer: per-category vendor breakdown ─── */
.bd-category-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.bd-category-row {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px dashed var(--ink-100);
}
.bd-category-row:last-child { border-bottom: none; }
.bd-category-label {
  font-size: 11px; font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 0.4px;
  padding-top: 4px;
}
.bd-vendor-pills {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.bd-vendor-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.30);
  color: var(--accent);
  font-size: 11.5px; font-weight: 500;
  white-space: nowrap;
}
body.dark .bd-vendor-pill { background: rgba(99, 102, 241, 0.18); color: #c7d2fe; }

.bd-notes-block {
  margin-top: 12px; padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--ink-100);
  border-radius: 6px;
}
body.dark .bd-notes-block { background: rgba(255, 255, 255, 0.03); }
.bd-notes-label {
  font-size: 11px; font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.bd-notes-body {
  font-size: 12px;
  color: var(--ink-700);
  line-height: 1.55;
  white-space: pre-wrap;
  max-height: 240px;
  overflow-y: auto;
}

/* ─── Requested Samples: flat card per lead (no founder grouping) ─── */
.sampling-flat-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
body.dark .sampling-flat-card { background: rgba(255, 255, 255, 0.025); }
.sampling-flat-card:hover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.05);
}
.sampling-flat-card:active { transform: translateY(1px); }
.sampling-flat-top {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.sampling-flat-co {
  font-weight: 600; font-size: 13.5px;
  color: var(--ink-900);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sampling-flat-founder {
  font-size: 11.5px; color: var(--ink-500);
}
.sampling-flat-meta {
  display: flex; align-items: center; gap: 16px;
  font-size: 11.5px; color: var(--ink-500);
  flex-wrap: wrap;
}
.sampling-flat-open {
  margin-left: auto;
  color: var(--accent);
  font-weight: 500;
}
.sampling-flat-card:hover .sampling-flat-open { text-decoration: underline; }

/* ─── Cross-tab navigation: flash-highlight when scrolled into view ─── */
@keyframes rowFlash {
  0%   { background: rgba(99, 102, 241, 0.40); }
  60%  { background: rgba(99, 102, 241, 0.20); }
  100% { background: transparent; }
}
.row-flash {
  animation: rowFlash 2.2s ease-out;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ─── Seller (By-seller) view: merge variants + duplicate flags ─────────── */
.seller-variants { font-size: 11px; font-weight: 400; color: var(--muted, #8a8f98); margin-left: 6px; }
.founder-card-count.dup-badge { background: #fdecec; color: #b4232a; border-color: #f3c4c4; }
.sub-row .dup-tag { font-size: 10.5px; font-weight: 600; color: #b4232a; background: #fdecec; border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.sub-row.has-dup { box-shadow: inset 2px 0 0 #e0a3a3; }
/* Theme is class-based (body.dark), not OS-based — keep these in sync with it. */
body.dark .founder-card-count.dup-badge { background: #3a1c1e; color: #f0a0a4; border-color: #5a2a2d; }
body.dark .sub-row .dup-tag { background: #3a1c1e; color: #f0a0a4; }

/* ─── "Move to seller" picker (reuses .modal / .modal-header / .modal-body) ── */
/* Opened from the lead drawer (z-index 210), so it must sit ABOVE it. */
#seller-picker-overlay { z-index: 300; }
.seller-picker.modal { z-index: 301; }
.seller-picker { width: min(560px, 92vw); }
.seller-picker-current { font-size: 11.5px; color: var(--ink-500, #8a8f98); margin: -6px 0 12px; }
.seller-picker-search { width: 100%; margin: 4px 0 8px; }
.seller-picker-fixed { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.seller-picker-list { display: flex; flex-direction: column; gap: 3px; }
.seller-picker-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  width: 100%; padding: 9px 11px; border: 1px solid var(--ink-100, #e2e5ea); border-radius: 8px;
  background: var(--surface, #fff); color: var(--ink-900, inherit); cursor: pointer; font: inherit; transition: background 120ms, border-color 120ms; }
.seller-picker-opt:hover { background: var(--accent-soft, rgba(99,102,241,0.10)); border-color: var(--accent, #6366f1); }
.seller-picker-name { font-weight: 600; font-size: 13px; }
.seller-picker-meta { font-size: 11px; color: var(--ink-500, #8a8f98); }
.seller-picker-detach { color: var(--accent, #6366f1); font-weight: 600; }
.seller-picker-reset { color: var(--ink-500, #8a8f98); }
.seller-picker-empty { font-size: 12.5px; color: var(--ink-500, #8a8f98); padding: 12px 2px; }

/* ─── Editable identity: seller rename + per-submission edit ─────────────── */
.seller-edit-btn {
  flex: 0 0 auto; margin-left: 8px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--ink-100, #e2e5ea); background: var(--surface, #fff);
  color: var(--ink-500, #8a8f98); cursor: pointer; font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity 120ms, background 120ms, color 120ms;
}
.founder-card:hover .seller-edit-btn { opacity: 1; }
.seller-edit-btn:hover { background: var(--accent-soft, rgba(99,102,241,0.10)); color: var(--accent, #6366f1); border-color: var(--accent, #6366f1); }
.seller-renamed { font-size: 11px; color: var(--accent, #6366f1); margin-left: 6px; font-weight: 400; }

/* Identity edit modal — opened from the drawer (z 210) / card, so sits above. */
#identity-modal-overlay { z-index: 300; }
.identity-modal.modal { z-index: 301; width: min(440px, 92vw); }
.identity-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-500, #8a8f98); margin: 10px 0 4px; }
.identity-input { width: 100%; }
.identity-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ─── Expanded "Edit submission" modal (submission-edit-modal) ──────────── */
.submission-edit-modal { max-width: 560px; }
.submission-edit-modal .modal-body { max-height: 70vh; overflow-y: auto; }
.edit-group-title { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.edit-group-title:first-of-type { margin-top: 4px; }
.field-reset-btn { margin-left: 8px; border: none; background: none; cursor: pointer; opacity: .6; font-size: 12px; }
.field-reset-btn:hover { opacity: 1; }
.submission-edit-modal textarea.identity-input { resize: vertical; font: inherit; }

/* ─── Overview revamp: dual funnels + clickable bars + new tags ──────────── */
.funnel-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .funnel-split { grid-template-columns: 1fr; } }
.funnel-col-title { font-size: 12px; font-weight: 600; color: var(--ink-500, #8a8f98); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.funnel-block { display: flex; flex-direction: column; gap: 4px; }
.funnel-row { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; }
.funnel-row-click { cursor: pointer; }
.funnel-row-click:hover { background: var(--accent-soft, rgba(99,102,241,0.10)); }
.funnel-row-label { font-size: 12px; color: var(--ink-700, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funnel-row-track { background: var(--ink-50, #f1f3f5); border-radius: 4px; height: 16px; overflow: hidden; }
.funnel-row-bar { height: 100%; border-radius: 4px; min-width: 2px; }
.funnel-row-bar.bd { background: var(--accent, #6366f1); }
.funnel-row-bar.code { background: #0ea5e9; }
.funnel-row-count { font-size: 12px; font-weight: 600; text-align: right; color: var(--ink-900, inherit); }
.funnel-aside { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.funnel-aside-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--ink-50, #f1f3f5); color: var(--ink-500, #8a8f98); border: 1px solid var(--ink-100, #e2e5ea); }
.funnel-aside-click { cursor: pointer; }
.funnel-aside-click:hover { border-color: var(--accent, #6366f1); color: var(--accent, #6366f1); }
.chart-row-click { cursor: pointer; border-radius: 5px; }
.chart-row-click:hover { background: var(--accent-soft, rgba(99,102,241,0.10)); }
.meta-pill.tag-toggle { cursor: pointer; }
.meta-pill.tag-toggle.active { background: var(--accent-soft, rgba(99,102,241,0.14)); border-color: var(--accent, #6366f1); color: var(--accent, #6366f1); }

/* ─── Goals tab (F85): coverage vs GTM targets ─────────────────────────── */
.goals-wrap { padding: 18px 22px; max-width: 1000px; }
.goals-header { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.goals-head-primary { display: flex; align-items: baseline; gap: 10px; }
.goals-headline-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.goals-headline-label { font-size: .95rem; color: var(--ink-700, #4b5563); }
.goals-head-breakdown { display: flex; gap: 20px; font-size: .9rem; color: var(--ink-700, #4b5563); }
.goals-chip { display: inline-flex; align-items: center; gap: 5px; }
.goals-chip b { font-weight: 700; }
.goals-head-targets { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .82rem; color: var(--text-dim, #8a8f98); margin-top: 3px; }
.goals-target-chip { background: rgba(128, 128, 128, .12); border-radius: 6px; padding: 2px 9px; font-weight: 600; color: var(--ink-700, #4b5563); }
.goals-updated { margin-left: auto; font-size: .76rem; color: var(--text-dim, #8a8f98); }
.goals-section { margin-bottom: 28px; }
.goals-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.goals-section-head h3 { margin: 0; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
/* Shared column template — the header row and every data row use this so the
   columns line up: Name | Coverage bar | 4 band counts | Have | Goal. */
.goals-grid { display: grid; grid-template-columns: 168px minmax(120px, 1fr) 62px 62px 62px 62px 50px 62px; gap: 12px; align-items: center; }
/* Column-header row: titled, muted, not interactive. */
.goals-head-row { padding: 0 10px 7px; margin-bottom: 3px; border-bottom: 1px solid var(--ink-100, #e5e7eb); cursor: default; }
.goals-head-row .gh { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-400, #6b7280); font-weight: 700; }
.gh-num, .gh-have, .gh-goal { justify-self: end; text-align: right; display: inline-flex; align-items: center; gap: 4px; }
.gh-num i.goals-dot { width: 8px; height: 8px; margin: 0; }
.goals-row { padding: 8px 10px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: background .15s ease, box-shadow .15s ease, transform .12s ease, border-color .15s ease; }
/* Hover uses the site's glass treatment (translucent + blur), not a flat white. */
.goals-row:hover { background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--glass-border); box-shadow: var(--shadow-glass-lifted); transform: translateX(3px); }
.goals-row:hover .goals-row-name { color: var(--accent, #4a90d9); }
.goals-row:hover .goals-bar { box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .14); }
.goals-row-name { font-weight: 600; font-size: .86rem; transition: color .15s ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goals-row.unclassified .goals-row-name { color: var(--text-dim, #8a8f98); font-style: italic; }
.goals-bar { position: relative; height: 18px; background: rgba(128, 128, 128, .12); border-radius: 5px; transition: box-shadow .15s ease; }
.goals-bar-seg { position: absolute; top: 0; bottom: 0; box-shadow: inset -2px 0 0 var(--card-bg, #fff); cursor: pointer; transition: filter .12s ease, box-shadow .12s ease, transform .12s ease; transform-origin: center; }
.goals-bar-seg:first-child { border-radius: 5px 0 0 5px; }
/* Refined, evenly-spaced quartet — calmer than primaries, still four clearly
   different hues: blue → gold → lavender → green. */
.goals-bar-sampling { background: #5a8dd6; }       /* blue     = sampling  */
.goals-bar-in_qa { background: #e0a13c; }           /* gold     = in QA     */
.goals-bar-qa_passed { background: #f48fb1; }       /* light pink = QA passed */
.goals-bar-purchased { background: #46ad79; }       /* green    = purchased */
.goals-bar-seg:hover { filter: brightness(1.1) saturate(1.06); box-shadow: inset -2px 0 0 var(--card-bg, #fff), 0 0 0 2px rgba(0, 0, 0, .2); transform: scaleY(1.2); z-index: 3; border-radius: 3px; }
.goals-bar-target { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink-900, #0a0f1c); opacity: .65; pointer-events: none; }
/* Per-band number columns + Have/Goal, aligned under the titled headers. */
.goals-num { justify-self: end; text-align: right; font-variant-numeric: tabular-nums; font-size: .82rem; font-weight: 600; color: var(--ink-700, #1f2937); }
.goals-num.goals-num-zero { opacity: .28; font-weight: 400; }
.goals-have { justify-self: end; text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; font-size: .9rem; }
.goals-goal { justify-self: end; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .82rem; color: var(--ink-500, #4b5563); white-space: nowrap; }
.goals-goal.met { color: #2e9e5b; }
.goals-goal.met-pipeline { color: #c98a2a; }
.goals-goal.goals-goal-na { color: var(--ink-300, #9ca3af); }
/* Stage pill (Leads table): one color family per board stage so any drill
   destination shows where each lead sits in the funnel. */
.stage-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .72rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.stage-new { background: rgba(128,128,128,.16); color: var(--text-dim, #6b7280); }
.stage-qualifying { background: rgba(99,102,241,.16); color: #6366f1; }
.stage-warm_hold { background: rgba(168,85,247,.16); color: #a855f7; }
.stage-sampling { background: rgba(63,127,196,.18); color: #3f7fc4; }
.stage-gradex_review { background: rgba(63,127,196,.18); color: #3f7fc4; }
.stage-in_qa { background: rgba(224,138,43,.18); color: #c2741b; }
.stage-qa_passed { background: rgba(31,157,87,.16); color: #1f9d57; }
.stage-accepted { background: rgba(31,157,87,.16); color: #1f9d57; }
.stage-purchased { background: #1f9d57; color: #fff; }
.stage-closed { background: rgba(220,53,69,.14); color: #c23a47; }
.goals-target-input { width: 52px; justify-self: end; }
/* Legend sits at the top of the tab (under the header strip), larger type. */
.goals-legend { display: flex; gap: 22px; align-items: center; color: var(--ink-700, #4b5563); font-size: .92rem; font-weight: 500; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--ink-100, rgba(128, 128, 128, .16)); }
.goals-dot { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }

/* ── Bespoke drawer (2026-06-17): long text, repo groups, links ───────── */
.drawer-longtext { font-size: 12px; line-height: 1.45; color: var(--ink-700, #4b5563); background: var(--ink-50, #f8fafc); border-radius: 7px; padding: 7px 9px; }
.repo-group-head { cursor: pointer; font-size: 11px; font-weight: 700; text-transform: capitalize; padding: 4px 0; color: var(--ink-700, #4b5563); }
.repo-group-head::before { content: '▸ '; }
.repo-group-head.open::before { content: '▾ '; }
.repo-group-body.hidden { display: none; }
.repo-search { width: 100%; box-sizing: border-box; margin: 4px 0; padding: 4px 7px; font-size: 11px; border: 1px solid var(--ink-200, #d7dce3); border-radius: 6px; }
.repo-more { margin-top: 4px; font-size: 11px; }
.link-group { margin: 6px 0; }
.link-group-label { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400, #94a3b8); font-weight: 700; }
.link-row { display: flex; align-items: center; gap: 6px; border: 1px solid var(--ink-100, #eef1f5); border-radius: 8px; padding: 5px 8px; margin: 3px 0; font-size: 12px; }
.link-anchor { flex: 1; color: var(--brand, #1d4ed8); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-meta { color: var(--ink-400, #94a3b8); font-size: 9.5px; white-space: nowrap; }
.link-remove { color: var(--ink-300, #cbd5e1); cursor: pointer; font-weight: 700; }
.link-remove:hover { color: #b91c1c; }
.link-add-form { border: 1px dashed var(--ink-200, #c7cdd6); border-radius: 9px; padding: 8px; margin-top: 8px; }
.link-add-form .link-in { width: 100%; box-sizing: border-box; border: 1px solid var(--ink-200, #d7dce3); border-radius: 6px; padding: 5px 7px; font-size: 12px; margin-bottom: 6px; }
.link-add-row { display: flex; gap: 6px; }
.link-add-row > * { flex: 1; }

/* ─── Data Requests tab (F90-F97) — ported from three-board-split ─── */
/* ─── Data Requests tab (F90+) ─────────────────────────────────────── */
.dr-wrap { padding: 0; }
.dr-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.dr-search { flex: 1; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--ink-200); background: var(--surface); color: var(--text, #cdd5df); }
.dr-subtabs { display: flex; gap: 6px; padding: 4px 14px 12px; border-bottom: 1px solid var(--ink-100); }
.dr-subtab { padding: 9px 18px; background: var(--surface); border: 1px solid var(--ink-200); border-radius: 8px; color: var(--ink-500); cursor: pointer; font-size: 13.5px; font-weight: 600; transition: background .12s, color .12s, border-color .12s; }
.dr-subtab:hover { color: var(--ink-900); border-color: var(--ink-300); }
.dr-subtab.active { background: var(--accent, #4f8df7); border-color: var(--accent, #4f8df7); color: #fff; font-weight: 700; }
.dr-subpane { padding: 12px 14px; }
.dr-subpane.hidden { display: none; }
.dr-empty { color: var(--ink-500); padding: 20px; text-align: center; }

.dr-table, .dr-vtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.dr-table th, .dr-table td, .dr-vtable th, .dr-vtable td { padding: 6px 9px; border-bottom: 1px solid var(--ink-200); text-align: left; }
.dr-table th, .dr-vtable th { color: var(--ink-500); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.dr-row, .dr-vrow, .dr-board-row { cursor: pointer; }
.dr-row.open, .dr-vrow.open, .dr-board-row.open { background: var(--bg-alt); }
.dr-caret { color: var(--accent, #5aa9ff); width: 12px; }
.dr-demand { color: var(--text, #cdd5df); }
.dr-supply { color: #46d17a; font-weight: 600; }
.dr-link { color: var(--accent, #5aa9ff); }
.dr-spill { font-size: 10px; padding: 1px 8px; border-radius: 999px; background: #2a2f3a; color: #9aa4b2; }
.dr-status-sourcing, .dr-status-open { background: #12243b; color: #5aa9ff; }
.dr-status-won { background: #123b1e; color: #46d17a; }
.dr-status-lost { background: #3b1620; color: #e0637a; }
.dr-status-on_hold { background: #3b2f12; color: #f0c040; }
.dr-marg-good { color: #46d17a; font-weight: 700; }
.dr-marg-thin { color: #f0c040; font-weight: 700; }
.dr-marg-neg { color: #e0637a; font-weight: 700; }

.dr-ebox { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; padding: 12px 16px; background: var(--bg-alt); }
.dr-flab { color: var(--ink-500); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; display: block; margin: 8px 0 4px; }
.dr-ro { color: var(--text, #cdd5df); font-size: 11.5px; line-height: 1.5; }
.dr-edit-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.dr-input { background: var(--surface); border: 1px solid #355; border-radius: 5px; padding: 4px 7px; color: var(--text, #cdd5df); }
.dr-notes { width: 100%; min-height: 44px; box-sizing: border-box; }
.dr-qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dr-qbox { border: 1px solid var(--ink-200); border-radius: 6px; padding: 8px; background: var(--surface); }
.dr-qbox.dr-add { color: var(--ink-500); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dr-qline { display: flex; gap: 6px; margin: 4px 0; }
.dr-qline .dr-input { width: 50%; }
.dr-qcomputed { font-size: 11px; color: #46d17a; margin-top: 4px; }
.dr-margin-line { margin-top: 8px; font-weight: 700; }

.dr-board-row { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-bottom: 1px solid var(--ink-200); }
.dr-board-row b { color: var(--text, #e6ebf2); }
.dr-col { font-size: 11px; color: #9aa4b2; }
.dr-poc { margin-left: auto; }
.dr-funnel { display: flex; gap: 7px; padding: 10px 12px; overflow-x: auto; background: #0b0e13; }
.dr-fcol { flex: 1; min-width: 132px; background: var(--surface); border: 1px solid var(--ink-200); border-radius: 8px; padding: 7px; }
.dr-fcol.drop { border-color: var(--accent, #5aa9ff); background: #0e1722; }
.dr-fcol-won { border-color: #1f5132; } .dr-fcol-lost { border-color: #5a2330; } .dr-fcol-rejected { border-color: #4a3a12; }
.dr-fhead { display: flex; justify-content: space-between; font-size: 9.5px; text-transform: uppercase; color: var(--ink-500); margin-bottom: 7px; padding-bottom: 5px; border-bottom: 1px solid var(--ink-200); }
.dr-fcount { background: #20252f; color: #9aa4b2; border-radius: 999px; padding: 0 6px; }
.dr-vcard { background: var(--bg-alt); border: 1px solid var(--ink-200); border-radius: 6px; padding: 7px; margin-bottom: 7px; cursor: grab; }
.dr-vcard b { color: var(--text, #e6ebf2); }
.dr-vmeta { font-size: 10.5px; color: #9aa4b2; margin-top: 4px; }
.dr-fempty { color: #39404c; font-size: 10px; text-align: center; padding: 8px 0; }

.dr-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 16px; font-size: 12.5px; }
.dr-chip { font-size: 12px; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--ink-200); color: #9aa4b2; cursor: pointer; }
.dr-chip.on { background: #12243b; border-color: var(--accent, #5aa9ff); color: var(--accent, #5aa9ff); }
.dr-count { margin-left: auto; }
.dr-cap { text-align: center; }
.dr-cap-yes { color: #46d17a; font-weight: 700; }
.dr-cap-partial { color: #f0c040; font-weight: 700; }
.dr-cap-no { color: #39404c; }
.dr-fresh-hot { color: #46d17a; } .dr-fresh-warm { color: #9aa4b2; } .dr-fresh-cold { color: #c46; } .dr-fresh-none { color: #5a6472; }
.dr-rel-preferred { color: #46d17a; } .dr-rel-blacklisted { color: #e0637a; } .dr-rel-none { color: #5a6472; }
.dr-vtype { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: #2a2f3a; color: #9aa4b2; }

/* ── Vendor directory table — uniform rows, icon strip, badges (2026-07) ── */
.dr-vtable { table-layout: fixed; }                                     /* widths below hold */
.dr-vtable td { height: 50px; vertical-align: middle; }                 /* fixed row height */
.dr-vtable th:nth-child(1), .dr-vtable td:nth-child(1) { width: 22%; }  /* Vendor */
.dr-vtable th:nth-child(2), .dr-vtable td:nth-child(2) { width: 9%; }   /* Domain / data */
.dr-vtable th:nth-child(3), .dr-vtable td:nth-child(3) { width: auto; } /* Capabilities — takes the slack */
.dr-vtable th:nth-child(4), .dr-vtable td:nth-child(4) { width: 62px; white-space: nowrap; }  /* Samples */
.dr-vtable th:nth-child(5), .dr-vtable td:nth-child(5) { width: 118px; white-space: nowrap; } /* Status */
.dr-vtable th:nth-child(6), .dr-vtable td:nth-child(6) { width: 92px; white-space: nowrap; }  /* Relationship */
.dr-vtable th:nth-child(7), .dr-vtable td:nth-child(7) { width: 54px; white-space: nowrap; }  /* View */
.dr-vrow { transition: background .12s; }
.dr-vrow:hover { background: var(--surface-hover); }
.dr-vname { font-weight: 700; color: var(--ink-900); font-size: 12.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.dr-vdomain-tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ink-100); color: var(--ink-500); white-space: nowrap; }
.dr-capstrip { display: flex; gap: 5px; }
.dr-capi { flex: 1 1 0; min-width: 0; height: 40px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.dr-capi .ci { font-size: 13px; font-weight: 700; line-height: 1; }
.dr-capi .cl { font-size: 9.5px; font-weight: 600; letter-spacing: -.01em; opacity: .9; }
.dr-capi-yes { background: rgba(34, 197, 94, .16); color: #16a34a; }
.dr-capi-partial { background: rgba(245, 158, 11, .18); color: #d97706; }
.dr-capi-no { background: var(--ink-100); color: var(--ink-300); }
.dr-dealstage { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.dr-dealstage::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.ds-msa { background: rgba(34, 197, 94, .14); color: #16a34a; }  .ds-msa::before { background: #16a34a; }
.ds-nda { background: rgba(79, 141, 247, .18); color: #4f8df7; } .ds-nda::before { background: #4f8df7; }
.ds-none { background: rgba(245, 158, 11, .18); color: #d97706; } .ds-none::before { background: #f59e0b; }
.ds-other { background: var(--ink-100); color: var(--ink-500); } .ds-other::before { background: var(--ink-400); }
.dr-relpill { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; }
.dr-relpill.dr-rel-preferred { background: rgba(139, 92, 246, .18); color: #8b5cf6; }
.dr-relpill.dr-rel-active { background: rgba(34, 197, 94, .16); color: #16a34a; }
.dr-relpill.dr-rel-blacklisted { background: rgba(244, 63, 94, .16); color: #e0637a; }
.dr-relpill.dr-rel-none { color: var(--ink-300); }
.dr-viewcue { text-align: right; color: var(--accent, #4f8df7); font-weight: 600; font-size: 11px; opacity: .45; transition: opacity .12s; white-space: nowrap; }
.dr-vrow:hover .dr-viewcue { opacity: 1; }
.dr-vnotes-hero { font-size: 13.5px; line-height: 1.6; padding: 14px 15px; color: var(--ink-900); border-left: 3px solid var(--accent, #4f8df7); }
.dr-ntbl { width: 100%; border-collapse: collapse; margin-top: 5px; }
.dr-ntbl th, .dr-ntbl td { border: 1px solid var(--ink-200); padding: 4px 7px; font-size: 11px; text-align: left; }
.dr-ndr { width: 130px; color: var(--accent, #5aa9ff); }
.dr-ntoggle { color: var(--accent, #5aa9ff); font-size: 11px; margin-top: 5px; cursor: pointer; }

.dr-newreq { margin: 0 0 10px; }
.dr-newreq-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.dr-newreq-form .dr-input { width: 150px; }

.dr-vn-row { display: flex; align-items: center; gap: 6px; }
.dr-vn-row .dr-vn { flex: 1; }
.dr-vremove { color: var(--ink-300, #cbd5e1); cursor: pointer; font-weight: 700; padding: 0 2px; }
.dr-vremove:hover { color: #b91c1c; }

.dr-stats { display: flex; gap: 20px; align-items: baseline; margin: 0 0 10px; padding: 8px 12px; background: var(--ink-50, #f8fafc); border-radius: 8px; }
.dr-stat b { font-size: 16px; color: var(--ink-900, #0f172a); }
.dr-stat-lbl { font-size: 11px; color: var(--ink-500, #64748b); }
.dr-row-click { cursor: pointer; }
.dr-open-hint { color: var(--ink-300, #cbd5e1); font-weight: 700; text-align: right; }
.dr-row-click:hover { background: var(--ink-50, #f6f8fb); }

/* DR status-board column header colors (mirror the main board pattern) */
.kanban-col[data-stage="open"] .kanban-col-head { color: #64748b; }
.kanban-col[data-stage="sourcing"] .kanban-col-head { color: #3b82f6; }
.kanban-col[data-stage="on_hold"] .kanban-col-head { color: #f59e0b; }
.kanban-col[data-stage="won"] .kanban-col-head { color: #16a34a; }
.kanban-col[data-stage="lost"] .kanban-col-head { color: #71717a; }

/* ── QA stage board ─────────────────────────────────────────────────────── */
.qa-board { display: grid; grid-template-columns: repeat(4, minmax(250px, 360px)); gap: 14px; align-items: start; justify-content: start; }
.qa-col-empty { font-size: 12px; color: var(--ink-300); text-align: center; padding: 18px 8px; border: 1px dashed var(--ink-100); border-radius: 8px; }
.qa-card-eta { cursor: pointer; }
.qa-card-eta.qa-eta-empty { color: var(--ink-300); }
.qa-col { background: var(--bg-alt); border: 1px solid var(--ink-100); border-radius: 11px; padding: 9px; min-height: 120px; }
.qa-col-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: var(--ink-700); padding: 3px 5px 10px; }
.qa-col-count { color: var(--ink-400); font-weight: 600; }
.qa-col-title { font-weight: 700; }
.qa-col-body { display: flex; flex-direction: column; min-height: 60px; }
.qa-col.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.qa-card { position: relative; background: var(--surface); border: 1px solid var(--ink-100); border-radius: 10px; padding: 11px 12px 10px; margin-bottom: 9px; box-shadow: var(--shadow-sm); cursor: pointer; }
.qa-card:hover { border-color: var(--accent); }
.qa-card.track-bd { border-left: 4px solid var(--t-bd); }
.qa-card.track-legacy { border-left: 4px solid var(--t-legacy); }
.qa-card-head { display: flex; align-items: center; gap: 7px; padding-right: 36px; }
.qa-card-head .qa-track-badge { flex: none; }
.qa-card-co { font-weight: 600; font-size: 13.5px; color: var(--ink-700); }
.qa-card-fo { font-size: 11.5px; color: var(--ink-400); margin-top: 1px; }
.qa-card-lbl { font-size: 11px; color: var(--ink-300); font-style: italic; margin-top: 2px; }
.qa-card .priority-pill { position: absolute; top: 11px; right: 12px; }
.qa-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 9px; font-size: 11.5px; color: var(--ink-400); }
.qa-card-eta.overdue { color: var(--red); font-weight: 600; }
.qa-folder-chip { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; background: var(--bg-alt); padding: 2px 7px; border-radius: 6px; cursor: pointer; }
.qa-owner { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--navy-700); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.qa-folder-pop { position: absolute; z-index: 40; background: var(--surface); border: 1px solid var(--ink-100); border-radius: 9px; box-shadow: var(--shadow-md); min-width: 220px; overflow: hidden; }
.qa-folder-pop a { display: block; padding: 8px 11px; font-size: 12.5px; border-bottom: 1px solid var(--ink-50); color: var(--accent); }
.qa-folder-pop a:last-child { border-bottom: 0; }
.qa-side-overlay { position: fixed; inset: 0; background: rgba(15, 29, 58, 0.45); backdrop-filter: blur(4px); z-index: 50; }
.qa-side-panel { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw; background: var(--surface); box-shadow: var(--shadow-drawer); z-index: 51; padding: 22px; overflow-y: auto; transform: translateX(100%); transition: transform .18s ease; }
.qa-side-panel.open { transform: translateX(0); }
.qa-side-panel.hidden, .qa-side-overlay.hidden { display: none; }

/* ── Auth gate overlay ───────────────────────────────────────────── */
#auth-gate {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: #0f1d3a; visibility: visible;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#auth-gate .auth-card { width: 380px; max-width: calc(100vw - 32px); background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
#auth-gate .auth-brand { font-size: 18px; font-weight: 700; color: #0f1d3a; margin-bottom: 18px; }
#auth-gate .auth-brand span { color: #4f8df7; }
#auth-gate h2 { margin: 0 0 6px; font-size: 19px; color: #0a0f1c; }
#auth-gate .auth-sub { margin: 0 0 16px; font-size: 13px; color: #4b5563; line-height: 1.5; }
#auth-gate input { width: 100%; box-sizing: border-box; padding: 11px 13px; margin-bottom: 12px; border: 1px solid #d1d5db; border-radius: 9px; font-size: 15px; }
#auth-gate #auth-code { text-align: center; letter-spacing: 8px; font-family: "Courier New", monospace; font-size: 20px; }
#auth-gate .auth-btn { width: 100%; padding: 11px; border: 0; border-radius: 9px; cursor: pointer; background: #4f8df7; color: #fff; font-size: 15px; font-weight: 600; }
#auth-gate .auth-btn:hover { background: #2670e8; }
#auth-gate .auth-link { width: 100%; margin-top: 10px; background: none; border: 0; cursor: pointer; color: #4f8df7; font-size: 13px; }
#auth-gate .auth-link[disabled] { color: #9ca3af; cursor: default; }
#auth-gate .auth-banner { margin-bottom: 14px; padding: 11px 13px; border-radius: 9px; background: #eff6ff; border: 1px solid #4f8df7; color: #1f2937; font-size: 13px; line-height: 1.45; }
#auth-gate .auth-msg { margin-top: 10px; font-size: 12.5px; color: #6b7280; min-height: 16px; }
#auth-gate .auth-blocked h2 { color: #dc2626; }

/* ─── DR-only site (dr.turingcentral.com) ──────────────────────────────────
   Same deploy as the full tracker; index.html sets html[data-app="dr"] before
   boot when the host is dr.* (see js/app-select.mjs, js/dr-main.mjs). These
   rules hide the tracker-only chrome so the page is the Data Requests tab and
   nothing else. Every selector is guarded by [data-app="dr"] so the full
   tracker (no attribute) is completely untouched. */
html[data-app="dr"] .tab-nav { display: none; }
html[data-app="dr"] #gradex-btn { display: none; }
html[data-app="dr"] #export-btn { display: none; }
html[data-app="dr"] #cmdk-btn { display: none; }
html[data-app="dr"] #bell-btn { display: none; }
html[data-app="dr"] #refresh-btn { display: none; }
html[data-app="dr"] #row-count { display: none; }
html[data-app="dr"] #refreshed-at { display: none; }