:root {
  --bg: #0b0d12;
  --panel: #11141b;
  --panel-2: #161a23;
  --line: #1f2430;
  --text: #e6e8ee;
  --muted: #8a93a6;
  --accent-floor: #16a34a;
  --accent-median: #3b82f6;
  --accent-ceiling: #dc2626;
  --accent-btc: #f7931a;
  --accent-strategy: #a855f7;
  --accent-etf-pos: #22c55e;
  --accent-etf-neg: #ef4444;
  --accent-warn: #facc15;
  /* Macro regime severity palette: green = tailwind for BTC,
     yellow = neutral, red = stress/headwind. */
  --regime-tailwind: #16a34a;
  --regime-positive: #65a30d;
  --regime-neutral: #facc15;
  --regime-mild: #f97316;
  --regime-headwind: #dc2626;
  --regime-stress: #991b1b;
  /* Capital S-curve section: trend line and the power-law brake branch. */
  --scurve-trend: #fcd34d;
  --brake: #a78bfa;
  /* Theory Lab: production-cost lines on #price-chart. */
  --theory-cost: #2dd4bf;
  /* Theory Lab price-only models and the Model median. */
  --lab-rainbow: #059669;
  --lab-growth: #fda4af;
  --lab-halving: #38bdf8;
  --lab-s2f: #e879f9;
  --lab-wealth: #f5d0a9;
  --lab-mayer: #818cf8;
  --lab-wma200: #f472b6;
  --lab-pi: #93c5fd;
  --lab-median: #e6e8ee;
  --lab-realized: #a3e635;
  --lab-thermocap: #67e8f9;
  --lab-nvt: #fdba74;
  --lab-metcalfe: #c4b5fd;
  --lab-diffreg: #f0abfc;
  --lab-energy: #fef08a;
  --lab-ribbons: #f87171;
  --lab-options: #fbbf24;
  --lab-futures: #22d3ee;
  --lab-polymarket: #c084fc;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--accent-median); }

header.top {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex-wrap: wrap;
}

/* Brand block: gold-coin logo on the left, two-line wordmark + tagline
   on the right. The logo is the canonical Hashpoint mark (gold
   Bitcoin coin with rim text). Tagline reinforces the publication's
   editorial position. */
header.top .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
header.top .brand-logo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: block;
}
header.top .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
header.top h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
header.top .brand-tagline {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

header.top .as-of {
  color: var(--muted);
  font-size: 13px;
}

header.top .ingest-status {
  color: var(--muted);
  font-size: 13px;
}

/* Explainer-link is the first right-aligned header item; it takes the
   ``margin-left: auto`` slack so itself and the Refresh button both
   sit at the right edge. */
header.top .explainer-link {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
  border-bottom: 1px dotted var(--muted);
  padding-bottom: 1px;
}
header.top .explainer-link:hover {
  color: var(--accent-btc);
  border-bottom-color: var(--accent-btc);
}

header.top button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
header.top button:hover { background: #1d2230; }
header.top button:disabled { opacity: 0.5; cursor: progress; }

main {
  padding: 16px 24px 32px;
  max-width: 1600px;
  margin: 0 auto;
}

/* Live data strip: prominent row at the top that aggregates the
   actually-live values (BTC spot, STRC current, current macro
   prints) with an "updated <ago>" stamp. Visually distinct from
   close-anchored panels via the orange accent + brighter
   background, so the reader can tell at a glance which numbers
   move intraday and which are locked to a daily close. */
.live-strip {
  background: linear-gradient(180deg, #1a1208, #11141b);
  border: 1px solid #4d3a1a;
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-feature-settings: "tnum";
}
.live-strip-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #f7931a;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid #f7931a;
  border-radius: 3px;
  background: rgba(247, 147, 26, 0.08);
}
.live-tile {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.live-tile-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.live-tile-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.live-tile-value.missing { color: var(--muted); font-weight: 400; }
/* The trade date of a daily figure (STRC close, DGS10, VIX), so a number
   that holds between sessions reads as a close, not a stuck quote. */
.live-tile-date {
  font-size: 10px;
  color: var(--muted);
}
.live-strip-timestamp {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}
.live-strip-timestamp.failed { color: var(--accent-etf-neg); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 6px;
}
/* Two-row stat layout: Asset state on top, Network state below.
   The label is small/muted and intentionally subtle; the divider
   between rows is a hairline border that's just enough to read as
   a section break without competing with the panel borders. */
.stat-row-label {
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 4px 4px;
}
.stat-row-anchor {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 0.85;
  margin-left: 6px;
}
.stat-row-divider {
  height: 0;
  border: 0;
  border-top: 1px solid var(--line);
  opacity: 0.6;
  margin: 4px 0 8px;
}
.stat-row-group {
  margin-bottom: 18px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
}
.stat .label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
.stat .value {
  font-size: 18px;
  font-weight: 600;
  font-feature-settings: "tnum";
}
.stat .sub {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.stat.warn .label::after {
  content: " *";
  color: var(--accent-warn);
}
.stat[title] {
  cursor: help;
}

/* STRC stat card additions. Card stays inside the existing
   ``.stat`` skeleton; the .strc-* rules style the extra rows
   without affecting other stat cards. */
.strc-atm-state {
  font-size: 11px;
  font-weight: 600;
  margin: 2px 0;
  font-feature-settings: "tnum";
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.strc-atm-state.open      { color: var(--accent-etf-pos); }
.strc-atm-state.marginal  { color: var(--regime-neutral); }
.strc-atm-state.closed    { color: var(--accent-etf-neg); }
.strc-atm-state.no-data   { color: var(--muted); }
.strc-delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 0;
  font-feature-settings: "tnum";
}
.strc-delta.positive { color: var(--accent-etf-pos); }
.strc-delta.negative { color: var(--accent-etf-neg); }
.strc-delta.neutral  { color: var(--muted); }
.strc-bar {
  display: flex;
  width: 100%;
  height: 6px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--panel-2);
  margin: 6px 0 2px;
}
.strc-bar-above   { background: var(--accent-etf-pos); transition: width 0.3s ease; }
.strc-bar-below   { background: var(--panel-2); transition: width 0.3s ease; }
.strc-bar-label {
  color: var(--muted);
  font-size: 10px;
  font-feature-settings: "tnum";
}

/* Live-spot extensions on the BTC price card. Stays inside the
   existing ``.stat`` skeleton (same border / padding / panel bg)
   so the card visually matches its row neighbours; only the
   internal layout grows to fit the live signals. */
.stat-refresh-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 0 5px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  line-height: 14px;
  float: right;
  margin: -2px -2px 0 0;
}
.stat-refresh-btn:hover {
  background: #1d2230;
  color: var(--text);
}
.stat-refresh-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.stat-delta {
  font-size: 11px;
  font-weight: 600;
  margin: 2px 0 0;
  font-feature-settings: "tnum";
}
.stat-delta.positive { color: var(--accent-etf-pos); }
.stat-delta.negative { color: var(--accent-etf-neg); }
.stat-delta.neutral  { color: var(--muted); }
.intraday-bar {
  display: flex;
  width: 100%;
  height: 6px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--panel-2);
  margin: 6px 0 4px;
}
.intraday-bar-above { background: var(--accent-floor); transition: width 0.3s ease; }
.intraday-bar-below { background: var(--accent-ceiling); transition: width 0.3s ease; }
.intraday-label {
  color: var(--muted);
  font-size: 11px;
  margin: 0;
  font-feature-settings: "tnum";
}
.stat-timestamp {
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
  font-feature-settings: "tnum";
}
.stat-timestamp.failed { color: var(--accent-etf-neg); }
/* Network-state regime hints. Up = positive (e.g. hashrate growing);
   dn = negative (high fees, mempool congestion, hashrate declining);
   mild = elevated but not yet stressed. Subtle left-border accent. */
.stat.up   { border-left: 3px solid var(--accent-etf-pos); }
.stat.dn   { border-left: 3px solid var(--accent-etf-neg); }
.stat.mild { border-left: 3px solid #f97316; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

/* Layout stability. Panels that paint an empty shell first and grow when
   their data lands were shifting everything below them: measured CLS was
   0.221, effectively all of it on section.panel. Each panel below
   reserves the height it settles at once loaded, measured at 1600px
   wide. Charts already reserve their own box, so only the four panels
   that grow with content need a floor, plus the stat row above them.
   A min-height is a floor, never a cap: narrower viewports wrap taller
   and are unaffected. */
.stat-row-group { min-height: 333px; }
.panel-predictions { min-height: 285px; }
.panel-corporate { min-height: 611px; }
/* The synthesis is the one panel whose height depends on how much the
   model wrote: measured between 575px and 662px across recent days, so
   the reservation covers the tallest of them. It is released once the
   commentary has painted and only while the panel is off screen, which
   is where it almost always is at that moment: the reader gets the space
   back without anything moving under their eyes. */
.panel-synthesis { min-height: 662px; }
.panel-synthesis.synthesis-settled { min-height: 0; }
.panel-macro { min-height: 779px; }
.panel-price { min-height: 493px; }
.panel-uber { min-height: 589px; }
.panel-etf, .panel-strategy, .panel-onchain { min-height: 364px; }
.etf-provisional-tag { color: var(--muted); font-style: italic; }
.panel h2 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel .as-of {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 12px;
}

/* On-chain panel headline: the 3-day median hashrate, with the raw daily
   estimate beside it in smaller type. */
.onchain-headline { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 8px; }
.onchain-headline-value { font-size: 22px; font-weight: 600; color: var(--text); }
.onchain-headline-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); }
.onchain-headline-raw { font-size: 12px; color: var(--muted); }

/* Forecast-generated label sits below .as-of on the v4 panel. Reads as
   muted-gray under 6h, switches to amber (.stale-warning) when ingest
   has run since the morning's forecast — predictions are then older
   than the freshest data. */
.panel .forecast-generated {
  color: var(--muted);
  font-size: 11px;
  margin-top: -8px;
  margin-bottom: 12px;
}
.panel .forecast-generated.stale-warning {
  color: var(--accent-warn);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 10px;
  font-size: 12px;
}
.legend label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.legend input[type="checkbox"] {
  accent-color: var(--accent-median);
}
.legend .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.chart-wrap { position: relative; height: 380px; }
.chart-wrap.small { height: 220px; }
.chart-wrap.medium { height: 280px; }
.chart-wrap.tall { height: 460px; }

/* Uber chart legend subtitle — wedged above the per-series toggles so
   the reader knows the fit-window / N / R² at a glance without
   inspecting the "How to read this" expandable. */
.uber-subtitle {
  color: var(--muted);
  font-size: 11px;
  margin: -4px 0 8px;
  font-feature-settings: "tnum";
}

/* Tiny "(projected)" footer note rendered below the canvas. It avoids
   tooltip clutter while still naming the dashed-zone convention. */
.uber-footnote {
  color: var(--muted);
  font-size: 11px;
  margin-top: 6px;
  text-align: left;
  line-height: 1.5;
}
.uber-footnote em {
  color: #cbb89a;
  font-style: italic;
}
.uber-reset-btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
}
.uber-reset-btn:hover { background: #1d2230; }

.macro-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}
.regime-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  font-feature-settings: "tnum";
  background: rgba(255, 255, 255, 0.02);
}
.regime-badge .ind { color: var(--muted); font-weight: 600; letter-spacing: 0.4px; }
.regime-badge .val { font-weight: 600; color: var(--text); }
.regime-badge .lbl { color: var(--muted); }
.regime-badge .asof { color: var(--muted); font-size: 0.85em; }
.regime-badge[data-severity="tailwind"]  { border-color: var(--regime-tailwind);  color: var(--regime-tailwind); }
.regime-badge[data-severity="positive"]  { border-color: var(--regime-positive);  color: var(--regime-positive); }
.regime-badge[data-severity="neutral"]   { border-color: var(--regime-neutral);   color: var(--regime-neutral); }
.regime-badge[data-severity="mild"]      { border-color: var(--regime-mild);      color: var(--regime-mild); }
.regime-badge[data-severity="headwind"]  { border-color: var(--regime-headwind);  color: var(--regime-headwind); }
.regime-badge[data-severity="stress"]    { border-color: var(--regime-stress);    color: var(--regime-stress); }
.regime-badge[data-severity="tailwind"]  .lbl,
.regime-badge[data-severity="positive"]  .lbl,
.regime-badge[data-severity="neutral"]   .lbl,
.regime-badge[data-severity="mild"]      .lbl,
.regime-badge[data-severity="headwind"]  .lbl,
.regime-badge[data-severity="stress"]    .lbl { color: inherit; }

.macro-reference { margin-top: 14px; }
.macro-reference summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 0;
  user-select: none;
}
.macro-reference summary:hover { color: var(--text); }
.macro-reference[open] summary { color: var(--text); margin-bottom: 8px; }
.macro-reference .reference-body {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  background: var(--panel-2);
  font-size: 12px;
  line-height: 1.55;
}
.macro-reference table {
  border-collapse: collapse;
  width: 100%;
  margin: 6px 0 10px;
}
.macro-reference th, .macro-reference td {
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-feature-settings: "tnum";
}
.macro-reference th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.macro-reference .ref-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.macro-reference .ref-note {
  color: var(--muted);
  font-style: italic;
  margin-top: 8px;
}

footer {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.error {
  color: var(--accent-ceiling);
  font-size: 12px;
  padding: 4px 0;
}

/* Predictions panel: v2-spi forecasts at four horizons. Confidence is
   coded by mean abs log error band — see PREDICTION_CONFIDENCE in JS.
   Cards intentionally read coldest (red 365d) to warmest (green 7d)
   so the panel can't be skimmed without seeing the long-horizon
   downgrade.  */
.predictions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 4px 0 12px;
}
.prediction-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 5px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prediction-card .horizon {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  font-weight: 600;
}
.prediction-card .target-date {
  color: var(--muted);
  font-size: 11px;
  font-feature-settings: "tnum";
}
.prediction-card .price {
  font-size: 20px;
  font-weight: 600;
  font-feature-settings: "tnum";
}
.prediction-card .change {
  font-size: 14px;
  font-weight: 600;
  font-feature-settings: "tnum";
}
.prediction-card .change.up { color: var(--accent-etf-pos); }
.prediction-card .change.dn { color: var(--accent-etf-neg); }
.prediction-card .confidence-bar {
  height: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 2px;
}
.prediction-card .confidence-fill {
  height: 100%;
}
.prediction-card .mae {
  font-size: 11px;
  color: var(--muted);
  font-feature-settings: "tnum";
}
.prediction-card[data-confidence="strong"]   { border-left-color: #16a34a; }
.prediction-card[data-confidence="moderate"] { border-left-color: #facc15; }
.prediction-card[data-confidence="weak"]     { border-left-color: #f97316; }
.prediction-card[data-confidence="poor"]     { border-left-color: #dc2626; }
.prediction-card[data-confidence="strong"]   .confidence-fill { background: #16a34a; }
.prediction-card[data-confidence="moderate"] .confidence-fill { background: #facc15; }
.prediction-card[data-confidence="weak"]     .confidence-fill { background: #f97316; }
.prediction-card[data-confidence="poor"]     .confidence-fill { background: #dc2626; }

/* v4 model badge + experimental flag.
   Visually surfaces which v4 sub-model (or v3 fallback) the router
   selected for this slot. The experimental treatment for v4-era3 is
   deliberately prominent — Era 3's training window is ~286 days and
   the dashboard must not let a reader take those predictions at face
   value without seeing the caveat. */
.prediction-card .model-badge {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(96, 165, 250, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.35);
  margin-left: 6px;
  font-weight: 600;
}
.prediction-card.is-experimental {
  border-left-color: #facc15 !important;
  background: linear-gradient(
    180deg,
    rgba(250, 204, 21, 0.06),
    var(--panel-2) 60%
  );
}
.prediction-card.is-experimental .model-badge {
  background: rgba(250, 204, 21, 0.18);
  color: #fde047;
  border-color: rgba(250, 204, 21, 0.55);
}
.prediction-card.is-v3-baseline {
  border-left-color: #6b7280 !important;
  background: var(--panel-2);
  opacity: 0.92;
}
.prediction-card.is-v3-baseline .model-badge {
  background: rgba(107, 114, 128, 0.18);
  color: #d1d5db;
  border-color: rgba(107, 114, 128, 0.45);
}
.prediction-card.is-data-pending {
  border-left-color: #6b7280 !important;
  background: var(--panel-2);
  opacity: 0.6;
}
.prediction-card.is-data-pending .price { color: var(--muted); }

/* Daily Synthesis panel: AI commentary on the dashboard. The disclaimer
   at the bottom is permanent, mandatory, and pointed back at the
   underlying numbers — synthesis is commentary, not prediction. */
.synthesis-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.synthesis-header h2 { margin: 0; }
.synthesis-header .subtitle {
  color: var(--muted);
  font-size: 11px;
}
.synthesis-header button {
  margin-left: auto;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.synthesis-header button:hover { background: #1d2230; }
.synthesis-header button:disabled { opacity: 0.5; cursor: progress; }
.synthesis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin: 8px 0;
}
.synthesis-section {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 10px 12px;
}
.synthesis-section .section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.synthesis-section .section-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.synthesis-disclaimer {
  background: rgba(250, 204, 21, 0.06);
  border: 1px solid rgba(250, 204, 21, 0.35);
  color: #facc15;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 11px;
  margin-top: 8px;
  font-style: italic;
}
.synthesis-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 8px 0;
}

/* Corporate holdings panel: aggregate from bitcointreasuries.net.
   Layout = a horizontal row of by-type tiles above a top-10 table. */
.corp-by-type {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}
.corp-tile {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 10px;
}
.corp-tile .ind {
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.corp-tile .val {
  font-size: 16px;
  font-weight: 600;
  font-feature-settings: "tnum";
  margin-top: 2px;
}
.corp-tile .sub {
  font-size: 11px;
  color: var(--muted);
  font-feature-settings: "tnum";
}
.corp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-feature-settings: "tnum";
}
.corp-table th, .corp-table td {
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid var(--line);
}
.corp-table th:first-child, .corp-table td:first-child,
.corp-table th:nth-child(2), .corp-table td:nth-child(2),
.corp-table th:nth-child(3), .corp-table td:nth-child(3) {
  text-align: left;
}
.holdings-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 0 6px 0;
  margin-top: 8px;
}
.holdings-divider {
  border-top: 1px solid var(--line);
  margin: 16px 0 4px 0;
}
.corp-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.corp-table td.up { color: var(--accent-etf-pos); }
.corp-table td.dn { color: var(--accent-etf-neg); }
.corp-source {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}

/* Paired macro+BTC charts: two .panel blocks stacked with a small gap,
   their plot areas pixel-aligned so the same date sits at the same
   x-pixel on both. Inspired by price+volume on a financial terminal.
   Alignment is enforced by `afterFit` locking each chart's left/right
   axis widths to the same pixel value.  */
/* Two-chart layout inside the single combined macro+BTC panel.
   Each chart sits in its own ``.macro-pair-panel`` for the overlay
   canvas positioning, with a small gap between them. The macro
   chart's afterFit-locked axis widths and the BTC chart's matching
   padding.right give both charts identical chartArea.left and
   chartArea.right, so dates align vertically between the two. */
.macro-pair-panel {
  position: relative;
}
.macro-pair-panel + .paired-caption {
  margin: 10px 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-feature-settings: "tnum";
}
/* Crosshair canvas overlay sits exactly on top of each chart canvas. */
.macro-pair-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.macro-pair-tooltip {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(11, 13, 18, 0.92);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 11px;
  font-feature-settings: "tnum";
  pointer-events: none;
  z-index: 3;
  display: none;
  min-width: 180px;
  line-height: 1.5;
}
.macro-pair-tooltip.visible { display: block; }
.macro-pair-tooltip.left { left: 8px; right: auto; }
/* Tooltip variant for the two power-law charts: pinned to the top-
   left but shifted right far enough to clear the y-axis price labels.
   The user prefers blocking part of the deep-history (left edge of
   the time-axis is the oldest data) over blocking the y-axis. */
.macro-pair-tooltip.chart-pin { left: 80px; right: auto; }
.macro-pair-tooltip .row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.macro-pair-tooltip .row.title {
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  margin-bottom: 4px;
  font-weight: 600;
}
.macro-pair-tooltip .label { color: var(--muted); }
.macro-pair-tooltip .value { color: var(--text); }
.macro-pair-tooltip .value.btc      { color: #d97706; }
.macro-pair-tooltip .value.dgs10    { color: #60a5fa; }
.macro-pair-tooltip .value.dgs2     { color: #22d3ee; }
.macro-pair-tooltip .value.dxy      { color: #f59e0b; }
.macro-pair-tooltip .value.vix      { color: #a78bfa; }
/* Colored dot next to a tooltip row's label — used by both power-
   law chart tooltips so each row visually matches its line color. */
.macro-pair-tooltip .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* ---- S-curve & FOMO -------------------------------------------------- */
/* Dropdown row shared by the #price-chart Window control and the
   scenario controls in the S-curve section. */
.scurve-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 10px;
  align-items: flex-end;
}
.scurve-controls label {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}
.scurve-controls label > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.scurve-controls select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12.5px;
  padding: 4px 6px;
  max-width: 100%;
}
.panel .as-of a { color: var(--accent-median); }
.scurve-section { margin-bottom: 18px; }
.scurve-section > .stat-row-label { margin-bottom: 8px; }
.scurve-help details > summary {
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scurve-help details > summary::-webkit-details-marker { display: none; }
.scurve-help .caret {
  display: inline-block;
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.scurve-help details[open] .caret { transform: rotate(90deg); }
.scurve-help-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.55;
}
.scurve-help h3 {
  margin: 10px 0 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.scurve-help p { margin: 0 0 6px; }
.scurve-help ol, .scurve-help ul { margin: 0; padding-left: 20px; }
.scurve-help li { margin-bottom: 4px; }
.scurve-help ul.line-key { list-style: none; padding-left: 0; }
.scurve-help .line-sample { vertical-align: middle; margin-right: 6px; }
.scurve-help .keep-in-mind { color: var(--muted); }
.scurve-stats { margin-bottom: 18px; }
.scurve-stats .warn-text { color: var(--accent-warn); }
.scurve-stats .src { font-size: 11px; opacity: 0.8; }
.scurve-cards { margin-top: 12px; }
.scurve-card[data-band="tailwind"] { border-left-color: var(--regime-tailwind); }
.scurve-card[data-band="neutral"]  { border-left-color: var(--regime-neutral); }
.scurve-card[data-band="mild"]     { border-left-color: var(--regime-mild); }
.scurve-card[data-band="headwind"] { border-left-color: var(--regime-headwind); }
.scurve-card[data-band="tailwind"] .confidence-fill { background: var(--regime-tailwind); }
.scurve-card[data-band="neutral"]  .confidence-fill { background: var(--regime-neutral); }
.scurve-card[data-band="mild"]     .confidence-fill { background: var(--regime-mild); }
.scurve-card[data-band="headwind"] .confidence-fill { background: var(--regime-headwind); }
/* Four tracks at most: the Adoption curves panel spans the row below the
   other four, where its chart and table have room. */
.scurve-small-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(260px, calc((100% - 54px) / 4)), 1fr));
  gap: 0 18px;
}
.chart-wrap.scurve-small { height: 260px; }
.chart-wrap.scurve-supply { height: 150px; }
#scurve-adoption-panel { grid-column: 1 / -1; }
.adoption-body {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 0 24px;
  align-items: start;
}
.adoption-legend { gap: 8px 10px; font-size: 11px; margin: 0 0 8px; }
.adoption-legend span { display: inline-flex; align-items: center; gap: 5px; }
.adoption-table { font-size: 11px; }
.adoption-table.corp-table th, .adoption-table.corp-table td { padding: 3px 4px; text-align: right; }
.adoption-table.corp-table th:first-child, .adoption-table.corp-table td:first-child { text-align: left; }
.adoption-table th { color: var(--muted); font-weight: 500; }
.adoption-table td:last-child { color: var(--muted); }
.supply-caption { font-size: 12px; color: var(--muted); margin: 6px 0 4px; }
.supply-stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.supply-stat .k { color: var(--muted); }
.supply-stat .v { font-feature-settings: "tnum"; text-align: right; }
.tripwire-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 2fr) minmax(0, 3fr) 72px;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.tripwire-row:first-child { border-top: 0; }
.tripwire-row .tw-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  align-self: center;
}
.tripwire-row .tw-reading { color: var(--muted); font-feature-settings: "tnum"; }
.tripwire-row .tw-state {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}
.tripwire-row[data-state="watch"] .tw-dot   { background: var(--accent-warn); }
.tripwire-row[data-state="watch"] .tw-state { color: var(--accent-warn); }
.tripwire-row[data-state="lit"] .tw-dot     { background: var(--regime-headwind); }
.tripwire-row[data-state="lit"] .tw-state   { color: var(--regime-headwind); }
@media (max-width: 760px) {
  .scurve-help-body { grid-template-columns: 1fr; }
  .adoption-body { grid-template-columns: 1fr; }
  .adoption-table { margin-top: 10px; }
  .tripwire-row { grid-template-columns: 12px minmax(0, 1fr) 64px; }
  .tripwire-row .tw-reading { grid-column: 2 / 4; grid-row: 2; }
  .chart-wrap.tall.scurve-main { height: 380px; }
}

/* ---- Theory Lab: shared header pieces, the dashboard tile, chart menus -- */
header.top .lab-nav-link { margin-left: 0; }
.lab-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 14px;
}
.lab-head-text { flex: 1 1 420px; min-width: 0; }
.lab-kicker {
  font-size: 11px; letter-spacing: 1.2px; font-weight: 600;
  color: var(--accent-btc); margin-bottom: 4px;
}
.lab-title { margin: 0 0 6px; font-size: 20px; line-height: 1.25; color: var(--text); }
.lab-lede { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 760px; }
.lab-status {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
  flex: 0 1 auto; max-width: 100%;
}
.lab-status li {
  font-size: 11.5px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 3px 10px; white-space: nowrap;
}
.lab-status li .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.lab-open-link {
  font-size: 12px; color: var(--muted); text-decoration: none;
  border-bottom: 1px dotted var(--muted); align-self: center; white-space: nowrap;
}
.lab-open-link:hover { color: var(--accent-btc); border-bottom-color: var(--accent-btc); }

/* The dashboard's door into /lab: text and three live facts on the left,
   a year of price against the family median on the right. */
.lab-tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px 28px;
  align-items: center;
  margin: 28px 0 32px;
  padding: 20px 22px;
  background: linear-gradient(135deg, #10151f 0%, #0e121c 60%, #141018 100%);
  border: 1px solid #262c3b;
  border-top: 2px solid var(--accent-btc);
  border-radius: 8px;
}
.lab-tile-anchor { position: absolute; top: -12px; }
.lab-tile-title { margin: 0 0 6px; font-size: 20px; line-height: 1.25; }
.lab-tile-lede { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; max-width: 620px; }
.lab-tile-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px;
}
.lab-tile-facts > div {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; min-width: 0;
}
.lab-tile-facts dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.lab-tile-facts dd { margin: 2px 0 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lab-tile-facts dd.sub { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.lab-tile-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-btc); color: #0b0d12; font-weight: 600; font-size: 14px;
  padding: 9px 18px; border-radius: 6px; text-decoration: none;
}
.lab-tile-cta:hover { background: #ffa53d; }
.lab-tile-cta:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.lab-tile-figure { margin: 0; min-width: 0; }
.lab-tile-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.lab-tile-legend .swatch { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.lab-tile-chart {
  height: 160px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden; touch-action: pan-y;
}
.lab-tile-readout { font-size: 11.5px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; min-height: 1.5em; }
@media (prefers-reduced-motion: no-preference) {
  .lab-tile-cta { transition: background 0.12s; }
}
@media (max-width: 900px) {
  .lab-tile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .lab-tile { padding: 16px 14px; }
  .lab-tile-title { font-size: 18px; }
  .lab-tile-facts { grid-template-columns: minmax(0, 1fr); }
  .lab-tile-cta { width: 100%; justify-content: center; }
}

/* The Models menu on each power-law chart: closed by default, the switches
   open in a panel below it. */
.lab-menu { position: relative; }
.lab-menu > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2);
}
.lab-menu > summary::-webkit-details-marker { display: none; }
.lab-menu > summary:focus-visible { outline: 2px solid var(--accent-median); outline-offset: 2px; }
.lab-menu-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.lab-chev {
  width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
}
.lab-menu[open] > summary .lab-chev, details[open] > summary .lab-chev { transform: rotate(225deg) translate(-2px, -2px); }
.lab-menu-pop {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  width: min(560px, calc(100vw - 64px));
  background: var(--panel); border: 1px solid #2c3345; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); padding: 12px 14px;
}
.lab-menu-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 12px; margin-bottom: 10px;
}
.lab-menu-list label { display: flex; align-items: center; gap: 6px; cursor: pointer; min-width: 0; }
.lab-menu-list .swatch { flex: 0 0 auto; }
@media (max-width: 520px) {
  .lab-menu-list { grid-template-columns: minmax(0, 1fr); }
}

/* Family groups inside the Models list. */
.lab-sub { border-top: 1px solid var(--line); }
.lab-sub:first-child { border-top: 0; }
.lab-sub > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 8px 0;
}
.lab-sub > summary::-webkit-details-marker { display: none; }
.lab-sub > summary::after {
  content: ""; margin-left: 8px; width: 6px; height: 6px; flex: 0 0 auto;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg);
}
.lab-sub[open] > summary::after { transform: rotate(225deg); }
.lab-sub > summary:focus-visible { outline: 2px solid var(--accent-median); outline-offset: 2px; }
.lab-sub-title { font-weight: 600; font-size: 13px; }
.lab-sub-sum { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.lab-models-list { list-style: none; margin: 0 0 6px; padding: 0 0 0 4px; }
@media (max-width: 760px) {
  .lab-title { font-size: 18px; }
  .lab-status { justify-content: flex-start; }
}

/* ---- Theory Lab ------------------------------------------------------ */
/* One row per price theory, each switching its lines on #price-chart,
   then the production-cost settings. Reuses the S-curve help panel. */
.lab-models { list-style: none; margin: 0; padding: 0; }
.lab-model {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.lab-model:first-child { border-top: 0; }
.lab-model .lab-name { font-weight: 600; }
.lab-model .lab-desc { color: var(--muted); font-size: 12.5px; }
.lab-model .lab-tag {
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1px 8px;
}
.lab-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.lab-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.lab-switch .track {
  position: absolute; inset: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: background 0.15s;
  cursor: pointer;
}
.lab-switch .track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s, background 0.15s;
}
.lab-switch input:checked + .track { background: #1d3b38; border-color: var(--theory-cost); }
.lab-switch input:checked + .track::after { transform: translateX(16px); background: var(--text); }
.lab-switch input:focus-visible + .track { outline: 2px solid var(--accent-median); outline-offset: 2px; }
.lab-switch input:disabled + .track { opacity: 0.4; cursor: not-allowed; }
.lab-cost-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 28px;
}
.lab-slider { display: block; margin-bottom: 14px; }
.lab-slider .lab-slider-head {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted);
}
.lab-slider output { color: var(--text); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; font-size: 13px; }
.lab-slider input[type="range"] { width: 100%; accent-color: var(--theory-cost); margin: 6px 0 0; }
.lab-slider-note { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
.lab-anchors { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lab-anchors caption { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); padding-bottom: 6px; }
.lab-anchors th, .lab-anchors td { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.lab-anchors th { color: var(--muted); font-weight: 500; }
.lab-anchors input {
  width: 80px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px;
  font-size: 12.5px; padding: 3px 6px;
}
.lab-anchors input:read-only { color: var(--muted); }
.lab-reset { margin-top: 8px; }
.lab-model .lab-origin { color: var(--muted); font-size: 11.5px; }
/* The badges always sit in the last grid column, right-aligned, so a
   row never drops them into the switch column. */
.lab-model .lab-tags {
  grid-column: 3; justify-self: end;
  display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end;
}
.lab-models-next { color: var(--muted); font-size: 12.5px; margin: 0; padding: 8px 0 2px; border-top: 1px solid var(--line); }
.lab-model .lab-tag.warn { color: var(--accent-warn); border-color: #5c4a12; }
/* Zoom presets, Reset and Log time above #price-chart and #scurve-chart. */
.chart-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 8px;
  font-size: 12px;
}
.chart-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.chart-presets .uber-reset-btn { margin-left: 0; padding: 3px 8px; }
.chart-presets .uber-reset-btn[aria-pressed="true"] { border-color: var(--accent-median); color: var(--text); background: #16213a; }
.chart-tools label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.chart-tools input[type="checkbox"] { accent-color: var(--accent-median); }
.chart-hint { color: var(--muted); font-size: 11px; }
/* Model switches under each power-law chart; same look as .legend. */
.lab-chips { display: block; border-top: 1px dashed var(--line); padding-top: 8px; }
.lab-chips .lab-chips-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted);
  align-self: center;
}
/* One finger scrolls the page vertically; horizontal drag pans and two
   fingers pinch-zoom. Overrides the touch-action hammerjs writes. */
#price-chart, #scurve-chart { touch-action: pan-y !important; }
.macro-pair-tooltip .row.note { color: var(--muted); font-size: 10.5px; display: block; }
.lab-settings-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 28px;
}
.lab-settings-body h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted);
  margin: 0 0 8px; font-weight: 600;
}
.lab-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 10px; cursor: pointer; }
.lab-check input { accent-color: var(--accent-median); }
.lab-select {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px;
  font-size: 12.5px; padding: 4px 6px; margin: 4px 0 12px; max-width: 100%;
}
.lab-points input[type="date"] { width: 132px; }
.lab-points input[type="number"] { width: 92px; }
.lab-points td.src { color: var(--muted); font-size: 11px; }
.lab-table-wrap { overflow-x: auto; max-width: 100%; }
.lab-score { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lab-score th, .lab-score td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.lab-score th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.lab-score td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-score td.origin { color: var(--muted); font-size: 11.5px; }
.lab-score tr.lab-score-total td { border-top: 1px solid var(--muted); }
.lab-score td.lab-score-skip { color: var(--muted); font-size: 11.5px; }
.lab-families { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-size: 12px; margin-top: 4px; }
.lab-families .fam { color: var(--muted); }
.lab-families .val { text-align: right; font-variant-numeric: tabular-nums; }
.lab-market-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lab-market-table th, .lab-market-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.lab-market-table th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.lab-market-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-market-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; }
.lab-market-grid h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 0 0 6px; font-weight: 600; }
@media (max-width: 1000px) { .lab-market-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) {
  .lab-settings-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .lab-settings-body { grid-template-columns: minmax(0, 1fr); }
  .lab-points th:last-child, .lab-points td.src { display: none; }
  .lab-points input[type="date"] { width: 124px; }
  .chart-hint { flex-basis: 100%; }
  .lab-score td.origin { display: none; }
  .lab-score th.origin { display: none; }
  .lab-cost-body { grid-template-columns: 1fr; }
  .lab-model { grid-template-columns: 44px minmax(0, 1fr); }
  .lab-model .lab-tags { grid-column: 2; justify-self: end; }
}

/* Fear & Greed section: two gauges under the stat rows, a history
   chart below. Zone colors reuse the macro regime palette; the zone
   cutoffs themselves arrive with the API payload. */
:root {
  --fg-mood: #60a5fa;
  --fg-structure: #a78bfa;
}
.fg-section { margin-bottom: 18px; }
.fg-section > .stat-row-label { margin-bottom: 8px; }
.fg-gauges {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 18px;
}
.fg-card { min-height: 533px; }
.fg-gauge { max-width: 320px; margin: 0 auto; }
.fg-gauge svg { display: block; width: 100%; height: auto; }
.fg-gauge .fg-num { font-size: 34px; font-weight: 600; fill: var(--text); font-feature-settings: "tnum"; }
.fg-gauge .fg-end { font-size: 10px; fill: var(--muted); }
.fg-label {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 2px 0 10px;
}
.fg-label .dot, .fg-zone-key .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: baseline;
}
.fg-lookbacks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  text-align: center;
}
.fg-lookbacks .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; }
.fg-lookbacks .v { font-size: 15px; font-weight: 600; font-feature-settings: "tnum"; }
.fg-lookbacks .s { color: var(--muted); font-size: 11px; }
.fg-range { color: var(--muted); font-size: 11px; text-align: center; margin: 8px 0 4px; font-feature-settings: "tnum"; }
.fg-attrib { text-align: center; }
.fg-components { margin-top: 8px; }
.fg-comp {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 32px;
  gap: 10px;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}
.fg-comp .k { color: var(--muted); }
.fg-comp .bar { height: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.fg-comp .fill { height: 100%; border-radius: 2px; }
.fg-comp .v { text-align: right; font-feature-settings: "tnum"; }
.fg-divergence {
  font-size: 12.5px;
  margin: -6px 4px 18px;
  font-feature-settings: "tnum";
}
.fg-divergence .k { color: var(--muted); margin-right: 6px; }
.fg-range-buttons { display: flex; gap: 0; margin: 0 0 10px; }
.fg-range-buttons .uber-reset-btn { margin-left: 0; margin-right: 6px; padding: 3px 10px; }
.fg-range-buttons .uber-reset-btn.active { border-color: var(--accent-median); color: var(--text); background: #1d2230; }
.scurve-help ul.fg-zone-key { list-style: none; padding-left: 0; }
@media (max-width: 760px) {
  .fg-gauges { grid-template-columns: minmax(0, 1fr); }
  .fg-card { min-height: 0; }
}

/* Holdings modal */
.holdings-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.holdings-modal-overlay.open { display: flex; }
.holdings-modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 680px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.holdings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.holdings-modal-header h3 { margin: 0; font-size: 14px; color: var(--text); }
.holdings-modal-header .modal-meta { font-size: 11px; color: var(--muted); }
.holdings-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.holdings-modal-close:hover { color: var(--text); }
.holdings-modal-body {
  overflow-y: auto;
  padding: 12px 20px 20px;
}
.holdings-modal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.holdings-modal-body th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.holdings-modal-body td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.holdings-modal-body tr:last-child td { border-bottom: none; }
.holdings-modal-body .up { color: var(--accent-etf-pos); }
.holdings-modal-body .dn { color: var(--accent-etf-neg); }
.noscript-note {
  margin: 0;
  padding: 14px 18px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.corp-tile { cursor: pointer; }
.corp-tile:hover { background: var(--panel-2); border-color: var(--accent-btc); }