/* ─────────────────────────────────────────────────────────────────
   D7 v2 — design tokens + components
   Drop-in replacement: existing markup keeps working via aliases.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── New v2 tokens (Linear-evolved D7 navy) ─────────────────── */
  --bg-base:      #08090d;
  --bg-elevated:  #0f1320;
  --bg-overlay:   #161b2c;
  --bg-tinted:    #1c2238;

  --border-subtle:  #1a2038;
  --border-default: #232b48;
  --border-strong:  #34406b;

  --text-primary:    #e8ecf8;
  --text-secondary:  #8b94b8;
  --text-tertiary:   #5d678a;
  --text-disabled:   #3d4566;

  --accent:           #4f7aff;
  --accent-hover:     #6a8eff;
  --accent-active:    #3a64e6;
  --accent-bg-subtle: rgba(79,122,255,0.10);
  --accent-bg-soft:   rgba(79,122,255,0.16);

  --positive:    #34d399;
  --positive-bg: rgba(52,211,153,0.12);
  --negative:    #f87171;
  --negative-bg: rgba(248,113,113,0.12);
  --warning:     #f59e0b;
  --warning-bg:  rgba(245,158,11,0.12);

  --chart-1: #4f7aff;
  --chart-2: #7a98ff;
  --chart-3: #a3b8ff;
  --chart-4: #c8d4ff;
  --chart-5: rgba(79,122,255,0.55);
  --chart-6: rgba(79,122,255,0.30);

  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-display:  48px;
  --text-h1:       32px;
  --text-h2:       20px;
  --text-h3:       15px;
  --text-body:     14px;
  --text-caption:  12px;
  --text-label:    11px;
  --text-mono:     12px;

  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;

  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.30);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.50);
  --shadow-glow: 0 0 0 2px var(--accent);
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);

  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms;
  --dur-base: 150ms;
  --dur-slow: 240ms;

  /* ── BACKWARD COMPAT: old D7 names → new v2 tokens ──────────── */
  /* Gives existing markup an instant visual lift (PR-1) without rewriting classes. */
  --bg:          var(--bg-base);
  --panel:       var(--bg-elevated);
  --panel-soft:  var(--bg-overlay);
  --line:        var(--border-default);
  --text:        var(--text-primary);
  --muted:       var(--text-secondary);
  --accent-soft: var(--chart-2);          /* old #7c97ff → #7a98ff (visually identical) */
  --green:       var(--positive);
  --yellow:      var(--warning);
  --orange:      #fb923c;                  /* keep distinct from yellow — #fb923c reads as orange */
  --red:         var(--negative);
  --info:        var(--accent);
}

/* ─────────────────────────────────────────────────────────────────
   D7 v2 — component primitives (opt-in via .d7v2 wrapper or direct)
   ───────────────────────────────────────────────────────────────── */

.d7v2 {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-base);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
.d7v2 *, .d7v2 *::before, .d7v2 *::after { box-sizing: border-box; }
.d7v2 .num { font-variant-numeric: tabular-nums; }

.d7v2.bg-page {
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(79,122,255,0.08), transparent 60%),
    radial-gradient(50% 50% at 100% 0%, rgba(20,184,166,0.04), transparent 60%),
    var(--bg-base);
}

/* ── Typography ─────────────────────────────────────────────── */
.t-display { font: 600 var(--text-display) / 1.05 var(--font-sans); letter-spacing:-0.5px; font-variant-numeric:tabular-nums; }
.t-h1 { font: 600 var(--text-h1) / 1.2 var(--font-sans); letter-spacing:-0.3px; }
.t-h2 { font: 600 var(--text-h2) / 1.3 var(--font-sans); letter-spacing:-0.2px; }
.t-h3 { font: 600 var(--text-h3) / 1.4 var(--font-sans); }
.t-body { font: 400 var(--text-body) / 1.5 var(--font-sans); }
.t-caption { font: 500 var(--text-caption) / 1.4 var(--font-sans); color: var(--text-secondary); }
.t-label { font: 600 var(--text-label) / 1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.t-mono { font: 400 var(--text-mono) / 1.4 var(--font-mono); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-positive { color: var(--positive); }
.text-negative { color: var(--negative); }
.text-warning { color: var(--warning); }
.text-accent { color: var(--accent); }

/* ── Card ───────────────────────────────────────────────────── */
.v2-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.v2-card.elevated { background: linear-gradient(180deg, var(--bg-elevated), var(--bg-overlay)); box-shadow: var(--shadow-sm); }
.v2-card.hero {
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(79,122,255,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-tinted), var(--bg-elevated));
  border-color: var(--border-strong);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}
.v2-card.inline { background: transparent; border: none; padding: 0; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.card-head .meta { display:flex; align-items:center; gap: var(--sp-3); color: var(--text-secondary); font-size: var(--text-caption); }

/* ── Button ─────────────────────────────────────────────────── */
.v2-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: 500 var(--text-body) / 1 var(--font-sans);
  height: 36px; padding: 0 14px;
  border-radius: var(--r-md); border: 1px solid transparent;
  background: transparent; color: var(--text-primary);
  cursor: pointer; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.v2-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.v2-btn.sm { height: 28px; padding: 0 10px; font-size: 13px; border-radius: var(--r-sm); }
.v2-btn.lg { height: 44px; padding: 0 18px; font-size: 15px; }
.v2-btn.primary   { background: var(--accent); color: #fff; }
.v2-btn.primary:hover   { background: var(--accent-hover); }
.v2-btn.primary:active  { background: var(--accent-active); }
.v2-btn.secondary { background: var(--bg-overlay); border-color: var(--border-default); color: var(--text-primary); }
.v2-btn.secondary:hover { background: var(--bg-tinted); border-color: var(--border-strong); }
.v2-btn.ghost     { color: var(--text-secondary); }
.v2-btn.ghost:hover     { background: var(--bg-overlay); color: var(--text-primary); }
.v2-btn.danger    { background: var(--negative-bg); color: var(--negative); border-color: rgba(248,113,113,0.25); }
.v2-btn.danger:hover    { background: rgba(248,113,113,0.20); }
.v2-btn[disabled], .v2-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ── Segmented Control ──────────────────────────────────────── */
.seg {
  display: inline-flex; padding: 3px;
  background: var(--bg-overlay); border: 1px solid var(--border-default);
  border-radius: var(--r-md); gap: 2px;
}
.seg button {
  background: transparent; border: none; cursor: pointer;
  padding: 6px 12px; height: 28px;
  font: 500 13px/1 var(--font-sans);
  color: var(--text-secondary);
  border-radius: 6px;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base);
  font-variant-numeric: tabular-nums;
}
.seg button:hover { color: var(--text-primary); }
.seg button.active { background: var(--bg-tinted); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ── Pill v2 ─────────────────────────────────────────────────── */
.v2-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 var(--text-label) / 1 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 8px; border-radius: var(--r-pill);
  background: var(--bg-overlay); color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.v2-pill.sm { font-size: 10px; padding: 3px 7px; }
.v2-pill.positive { background: var(--positive-bg); color: var(--positive); border-color: rgba(52,211,153,0.20); }
.v2-pill.negative { background: var(--negative-bg); color: var(--negative); border-color: rgba(248,113,113,0.20); }
.v2-pill.warning  { background: var(--warning-bg);  color: var(--warning);  border-color: rgba(245,158,11,0.22); }
.v2-pill.info     { background: var(--accent-bg-subtle); color: var(--accent); border-color: rgba(79,122,255,0.25); }
.v2-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── MetricCard ─────────────────────────────────────────────── */
.metric { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.metric .label { font: 600 var(--text-label) / 1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.metric .value { font: 600 var(--text-display) / 1.05 var(--font-sans); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.metric.lg .value { font-size: 64px; line-height: 1; letter-spacing: -1px; }
.metric.sm .value { font-size: 28px; }
.metric.xs .value { font-size: 20px; }
.metric .delta { display: inline-flex; align-items: center; gap: 4px; font: 500 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.metric .delta.up { color: var(--positive); }
.metric .delta.down { color: var(--negative); }
.metric .sub { font-size: var(--text-caption); color: var(--text-secondary); }

/* ── DataTable ──────────────────────────────────────────────── */
.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-body); font-variant-numeric: tabular-nums; }
.dt thead th {
  font: 600 var(--text-label) / 1 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-secondary);
  text-align: left; padding: 10px 12px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-default);
  position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
.dt tbody td { padding: 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.dt tbody tr:hover td { background: rgba(79,122,255,0.06); }
.dt tbody tr:last-child td { border-bottom: none; }
.dt .num { text-align: right; font-variant-numeric: tabular-nums; }
.dt .key { color: var(--text-primary); font-weight: 600; }
.dt .dim { color: var(--text-tertiary); }
.dt .total td { background: var(--accent-bg-subtle); border-top: 1px solid var(--accent); font-weight: 600; }
.dt.compact tbody td { padding: 8px 12px; }
.dt th.sortable::after { content: ' ↕'; color: var(--text-tertiary); font-size: 10px; }
.dt th.sorted::after { content: ' ↓'; color: var(--accent); }

/* ── FilterBar ──────────────────────────────────────────────── */
.filterbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(15,19,32,0.85); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-default);
  position: sticky; top: 0; z-index: 30;
}
.filterbar .spacer { flex: 1; }
.v2-input {
  height: 32px; padding: 0 12px;
  background: var(--bg-overlay); border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  font: 400 13px/1 var(--font-sans); color: var(--text-primary);
  transition: border-color var(--dur-base);
  min-width: 200px;
}
.v2-input::placeholder { color: var(--text-tertiary); }
.v2-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg-subtle); }

/* ── TopNav v2 ─────────────────────────────────────────────── */
.v2-topnav {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 0 var(--sp-5); height: 56px;
  background: rgba(8,9,13,0.85); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 40;
}
.v2-topnav .brand { display: flex; align-items: center; gap: 8px; font: 600 15px/1 var(--font-sans); }
.v2-topnav .brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), #9b6dff);
  display: grid; place-items: center; color: #fff; font: 700 13px/1 var(--font-sans);
}
.v2-topnav .nav { display: flex; gap: 2px; }
.v2-topnav .nav a {
  padding: 8px 12px; border-radius: var(--r-md);
  color: var(--text-secondary); font: 500 13px/1 var(--font-sans);
  text-decoration: none; transition: all var(--dur-base);
}
.v2-topnav .nav a:hover { color: var(--text-primary); background: var(--bg-overlay); }
.v2-topnav .nav a.active { color: var(--text-primary); background: var(--bg-overlay); box-shadow: inset 0 0 0 1px var(--border-strong); }
.v2-topnav .meta { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }

/* ── EmptyState ─────────────────────────────────────────────── */
.v2-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5); text-align: center;
  border: 1px dashed var(--border-default); border-radius: var(--r-lg);
  background: var(--bg-elevated);
}
.v2-empty .empty-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-bg-subtle); color: var(--accent);
  display: grid; place-items: center; font-size: 20px;
}
.v2-empty .empty-title { font: 600 var(--text-h3) / 1.4 var(--font-sans); }
.v2-empty .empty-desc { font-size: var(--text-caption); color: var(--text-secondary); max-width: 320px; }

/* ── Skeleton v2 ───────────────────────────────────────────── */
.sk {
  display: inline-block; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--bg-overlay) 0%, var(--bg-tinted) 50%, var(--bg-overlay) 100%);
  background-size: 200% 100%;
  animation: d7-shimmer 1.4s infinite linear;
}
.sk.line { height: 12px; width: 100%; }
.sk.metric { height: 40px; width: 160px; }
@keyframes d7-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── DQ status pill ────────────────────────────────────────── */
.dq {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--bg-overlay); border: 1px solid var(--border-default);
  font: 500 12px/1 var(--font-sans);
}
.dq .dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.dq.ok .dot { background: var(--positive); color: var(--positive); }
.dq.warn .dot { background: var(--warning); color: var(--warning); }
.dq.bad .dot  { background: var(--negative); color: var(--negative); }

/* ── Verdict pill (in tables) ───────────────────────────────── */
.v2-verdict { font-size: 11px; padding: 3px 7px; border-radius: var(--r-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.v2-verdict.scale { background: var(--positive-bg); color: var(--positive); }
.v2-verdict.hold  { background: var(--bg-overlay); color: var(--text-secondary); }
.v2-verdict.coach { background: var(--warning-bg); color: var(--warning); }
.v2-verdict.off   { background: var(--negative-bg); color: var(--negative); }

/* ── Score ring ─────────────────────────────────────────────── */
.score-cell { display: inline-flex; align-items: center; gap: 8px; }
.score-num { font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.score-bar {
  width: 56px; height: 6px; border-radius: var(--r-pill);
  background: var(--bg-overlay); position: relative; overflow: hidden;
}
.score-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }

/* ── Mobile bottom nav ──────────────────────────────────────── */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(8,9,13,0.95); backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-default);
  height: 56px; z-index: 50;
}
.bottomnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text-tertiary); text-decoration: none;
  font: 500 10px/1 var(--font-sans);
}
.bottomnav a.active { color: var(--accent); }
.bottomnav .icon { font-size: 18px; }

@media (max-width: 700px) {
  .bottomnav { display: grid; }
}

/* ── Mobile row-card (table replacement) ────────────────────── */
.row-card {
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--r-lg); padding: var(--sp-4);
  display: grid; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.row-card .top { display: flex; justify-content: space-between; align-items: baseline; }
.row-card .date { font-size: 13px; color: var(--text-secondary); }
.row-card .profit { font: 600 24px/1 var(--font-sans); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.row-card .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--border-subtle); }
.row-card .stat .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); }
.row-card .stat .val { font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ── Geo pill ───────────────────────────────────────────────── */
.geo { font-size: 11px; padding: 2px 6px; border-radius: var(--r-sm); background: var(--bg-overlay); color: var(--text-secondary); border: 1px solid var(--border-subtle); display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }

/* ─────────────────────────────────────────────────────────────────
   PR-2 SWEEP — upgrade existing class names to v2 styling
   No markup changes; CSS cascade order ensures these win over inline.
   ───────────────────────────────────────────────────────────────── */

/* TopNav — universal across all 8 pages */
.topnav {
  background: rgba(8,9,13,0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 var(--sp-5);
  height: 52px;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  position: sticky;
  top: 0;
  z-index: 40;
  flex-wrap: nowrap;
}
.topnav .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font: 700 14px/1 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-right: var(--sp-3);
}
.topnav .brand::before {
  content: 'D7';
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), #9b6dff);
  color: #fff;
  display: grid; place-items: center;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0;
}
.topnav a {
  color: var(--text-secondary);
  padding: 7px 11px;
  border-radius: var(--r-md);
  text-decoration: none;
  font: 500 13px/1 var(--font-sans);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base);
}
.topnav a:hover { color: var(--text-primary); background: var(--bg-overlay); }
.topnav a.active {
  color: var(--text-primary);
  background: var(--bg-overlay);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.topnav .spacer { flex: 1; }
.topnav .right { color: var(--text-tertiary); font-size: 12px; display: inline-flex; align-items: center; gap: var(--sp-3); }

/* Filters — buying.html (and any future filter rows) */
.filters {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}
.filters select,
.filters input,
.filters button {
  background: var(--bg-overlay);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 0 12px;
  height: 32px;
  font: 500 13px/1 var(--font-sans);
  font-family: inherit;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base);
}
.filters input { min-width: 200px; }
.filters select:focus,
.filters input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg-subtle);
}
.filters button {
  cursor: pointer;
  color: var(--text-secondary);
}
.filters button:hover {
  background: var(--bg-tinted);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.filters button.refresh {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.filters button.refresh:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.filters button:disabled { opacity: 0.4; cursor: not-allowed; }
.filters label { color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.filters button:focus-visible,
.filters select:focus-visible,
.filters input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Project tabs / Geo tabs — segmented control (buying.html) */
.project-tabs {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  gap: 2px;
  flex-wrap: nowrap;
  margin-bottom: var(--sp-3);
  width: fit-content;
}
.project-tabs button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  height: 28px;
  font: 500 13px/1 var(--font-sans);
  color: var(--text-secondary);
  border-radius: var(--r-sm);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base);
  font-variant-numeric: tabular-nums;
}
.project-tabs button:hover {
  color: var(--text-primary);
  background: transparent;
  border-color: transparent;
}
.project-tabs button.active {
  background: var(--bg-tinted);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  border: none;
}
.project-tabs button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Pill — universal status pill (buying, finance, cohort, help) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font: 600 11px/1.4 var(--font-sans);
  letter-spacing: 0.02em;
  background: var(--bg-overlay);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  white-space: nowrap;
}
.pill.good, .pill.positive { background: var(--positive-bg); color: var(--positive); border-color: rgba(52,211,153,0.20); }
.pill.bad,  .pill.negative { background: var(--negative-bg); color: var(--negative); border-color: rgba(248,113,113,0.20); }
.pill.warn, .pill.warning  { background: var(--warning-bg);  color: var(--warning);  border-color: rgba(245,158,11,0.22); }
.pill.info                 { background: var(--accent-bg-subtle); color: var(--accent); border-color: rgba(79,122,255,0.25); }
.pill.dq                   { background: rgba(251,146,60,0.12); color: #fb923c; border-color: rgba(251,146,60,0.25); }
.pill.fallback             { background: var(--accent-bg-subtle); color: var(--accent); border-color: rgba(79,122,255,0.20); }

/* Card — refine borders to v2 spec */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
}
.card h2 {
  font: 600 var(--text-h3) / 1.4 var(--font-sans);
}
.card .help {
  background: var(--bg-overlay);
  color: var(--text-tertiary);
  border-radius: var(--r-sm);
}
.card.morning-digest {
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(79,122,255,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-tinted), var(--bg-elevated));
  border-color: var(--border-strong);
  border-radius: var(--r-xl);
}

/* Table — v2 polish */
table { font-variant-numeric: tabular-nums; }
th { background: var(--bg-elevated); border-bottom: 1px solid var(--border-default); }
tr:hover td { background: rgba(79,122,255,0.06); }

/* Empty / loading / error */
.empty {
  color: var(--text-secondary);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  font-style: normal;
  font-size: 13px;
  border: 1px dashed var(--border-default);
  border-radius: var(--r-md);
  background: rgba(15,19,32,0.4);
}
.loading {
  color: var(--text-tertiary);
  padding: var(--sp-5);
  text-align: center;
  font-size: 13px;
}
.error {
  color: var(--negative);
  background: var(--negative-bg);
  border: 1px solid rgba(248,113,113,0.20);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  text-align: center;
  font-size: 13px;
}

/* Skeleton — restyled to v2 tokens */
.skeleton {
  display: inline-block;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--bg-overlay) 0%, var(--bg-tinted) 50%, var(--bg-overlay) 100%);
  background-size: 200% 100%;
  animation: d7-shimmer 1.4s infinite linear;
}

/* Verdict pills — already use semantic vars, just refine borders */
.verdict { padding: 3px 8px; border-radius: var(--r-sm); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 4px; }

/* DQ indicator (top nav health pill) */
.dq-pill, .dq-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--bg-overlay); border: 1px solid var(--border-default);
  font: 500 12px/1 var(--font-sans);
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────
   PR-3 LAYOUT — 8-pt grid, sticky table headers, hero unification,
   chart-wrap polish, row-actions ghost buttons.
   ───────────────────────────────────────────────────────────────── */

/* Main container — 8-pt grid spacing */
main {
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
  max-width: 1500px;
  margin: 0 auto;
}

/* Header (sticky filter row) — 8-pt grid + offset below topnav */
header {
  padding: var(--sp-3) var(--sp-5);
  gap: var(--sp-3);
  /* When sticky (set in inline CSS), offset below topnav 52px so they stack vertically */
  top: 52px;
  z-index: 30;             /* below topnav z:40, above table th z:5 */
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-default);
}
header h1 {
  font: 600 18px/1.2 var(--font-sans);
  letter-spacing: -0.2px;
}
header h1 .accent { color: var(--accent); }

/* Row grid — gap 24px, section gap 32px */
.row {
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

/* Card — consistent 24px padding (some inline have 16px 18px) */
.card { padding: var(--sp-5); }

/* Tables — sticky header below topnav + filter header */
table th {
  position: sticky;
  top: 110px;           /* below 52px topnav + ~58px sticky filter header */
  z-index: 5;
  white-space: nowrap;
}
table th, table td {
  padding: 10px 12px;
}
table tr:last-child td { border-bottom: none; }

/* Sortable th — accent on hover */
table th.sortable:hover { color: var(--accent); }
table th.sortable.active .arrow { color: var(--accent); }

/* Row actions (campaign rows in buying.html) — ghost button styling */
.row-actions { display: inline-flex; gap: var(--sp-1); }
.row-actions button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  height: 26px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font: 500 11px/1 var(--font-sans);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.row-actions button:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg-subtle);
}
.row-actions button.copied {
  color: var(--positive);
  border-color: var(--positive);
  background: var(--positive-bg);
}

/* Chart wrapper — clean v2 frame */
.chart-wrap {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-top: var(--sp-3);
}
.chart-wrap .chart-title {
  font: 600 var(--text-label) / 1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}

/* Card head pattern — h2 + count + help (consistent across cards) */
.card h2 {
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.card h2 .count {
  font-weight: 400;
  font-size: var(--text-caption);
  color: var(--text-secondary);
}
.card h2 .help {
  margin-left: auto;
  font-size: var(--text-label);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Verdict spans — fixed 4 verdicts (already in PR-2 but unify here) */
.verdict.scale { background: var(--positive-bg); color: var(--positive); }
.verdict.hold  { background: var(--bg-overlay); color: var(--text-secondary); }
.verdict.coach { background: var(--warning-bg); color: var(--warning); }
.verdict.off, .verdict.off-board { background: var(--negative-bg); color: var(--negative); }
.verdict.no_attribution { background: var(--accent-bg-subtle); color: var(--accent); }

/* Modal — v2 polish */
.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.modal h3 {
  font: 600 var(--text-h2) / 1.3 var(--font-sans);
  letter-spacing: -0.2px;
  margin: 0 0 var(--sp-4);
}
.modal h4 {
  font: 600 var(--text-label) / 1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: var(--sp-4) 0 var(--sp-2);
}
.modal-close {
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.modal-close:hover { color: var(--text-primary); background: var(--bg-tinted); border-color: var(--border-strong); }

/* Mobile-tablet spacing — preserve compact density */
@media (max-width: 900px) {
  main { padding: var(--sp-4) var(--sp-3) var(--sp-7); }
  header { padding: var(--sp-2) var(--sp-3); top: 48px; }
  .topnav { padding: 0 var(--sp-3); height: 48px; }
  .row { gap: var(--sp-4); margin-bottom: var(--sp-5); }
  .card { padding: var(--sp-4); }
  table th, table td { padding: 8px 10px; }
  table th { top: 98px; }            /* 48px topnav + ~50px header */
}

/* Sticky table head — fallback for legacy browsers (last 2 majors all support) */
@supports not (position: sticky) {
  table th { position: static; }
}

/* ─────────────────────────────────────────────────────────────────
   PR-4 MOBILE — bottomnav, hide topnav on phones, table polish
   ───────────────────────────────────────────────────────────────── */

/* Mobile breakpoint @ 700px = phone */
@media (max-width: 700px) {
  /* Topnav: collapse to slim 40px brand-only header on mobile */
  .topnav { height: 40px; padding: 0 var(--sp-3); }
  .topnav a:not(.brand) { display: none; }     /* hide nav links — bottomnav takes over */
  .topnav .right { font-size: 11px; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Header (sticky filter row): adjust offset because topnav is now 40px */
  header { top: 40px; padding: var(--sp-2) var(--sp-3); }
  header h1 { font-size: 16px; }

  /* Tables sticky offset: 40 topnav + ~50 header = 90 */
  table th { top: 90px; padding: 6px 8px; }
  table td { padding: 6px 8px; font-size: 12px; }

  /* Body: leave room for bottomnav (56px) + iPhone Home indicator safe area */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* Compact card padding */
  .card { padding: var(--sp-3); border-radius: var(--r-md); }
  .card h2 { font-size: 14px; margin-bottom: var(--sp-2); }

  /* Compact filterbar — vertical stack for filter inputs */
  .filters { gap: var(--sp-1); }
  .filters input { min-width: 100%; flex: 1; }
  .filters select { flex: 1; min-width: 0; }

  /* Hide-on-mobile utility (already used in buying.html for select columns) */
  .hide-mobile { display: none !important; }

  /* Project tabs: smaller buttons */
  .project-tabs button { padding: 4px 8px; font-size: 12px; }

  /* Modal full-width on mobile */
  .modal { border-radius: var(--r-md); margin: var(--sp-3); padding: var(--sp-4); }

  /* Chart-wrap: less padding */
  .chart-wrap { padding: var(--sp-2); }

  /* Smaller pill */
  .pill { font-size: 10px; padding: 2px 6px; }

  /* row-card: visible on mobile (already styled in d7v2.css base) */
  .row-card { display: grid; }

  /* Stat blocks (.kpi-card / .stat) — smaller value */
  .stat .val, .kpi-card .val { font-size: 20px; }
}

/* Tablet breakpoint @ 700-900px — keep topnav visible, simplify */
@media (min-width: 701px) and (max-width: 900px) {
  .hide-tablet { display: none !important; }
}

/* Bottomnav — visible only on phone */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(8,9,13,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-default);
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 50;
}
.bottomnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-tertiary); text-decoration: none;
  font: 500 10px/1 var(--font-sans);
  padding: 0 var(--sp-1);
  transition: color var(--dur-base);
}
.bottomnav a.active { color: var(--accent); }
@media (max-width: 700px) {
  .bottomnav { display: grid; }
}