:root {
  color-scheme: dark;
  --bg: #071019;
  --panel: #0d1a25;
  --line: #203342;
  --cyan: #55e6d1;
  --text: #edf6f7;
  --muted: #89a0aa;
  --red: #ff7c86;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at 80% 0, #12323b 0, transparent 35%), var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
}
main { max-width: 1180px; margin: auto; padding: 32px 20px; }
header, .section-head, .direction-card { display: flex; justify-content: space-between; align-items: center; }
h1 { font-size: clamp(28px, 5vw, 54px); margin: 4px 0 28px; letter-spacing: -.04em; }
.eyebrow, label { font-size: 11px; letter-spacing: .15em; color: var(--cyan); }
#status { border: 1px solid var(--line); padding: 8px 12px; border-radius: 99px; color: var(--cyan); }
.summary, article, .twap-panel, .expectancy-panel, .validation-panel, .spot-panel {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-radius: 16px;
  padding: 20px;
}
.summary { font-size: 18px; line-height: 1.65; }
.bottom-summary { margin-top: 12px; color: var(--muted); font-size: 14px; }
.expectancy-panel { margin-top: 12px; overflow: hidden; }
.validation-panel { margin-top: 12px; overflow: hidden; }
.spot-panel { margin: 12px 0; overflow: hidden; }
.spot-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.spot-metric { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #0b1822; }
.spot-metric span { display: block; color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.spot-metric strong { display: block; margin-top: 7px; overflow: hidden; font-size: 17px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.spot-metric small { min-height: 2.7em; line-height: 1.35; }
.validation-panel h3 { margin: 0 0 8px; font-size: 15px; }
.validation-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.validation-panel table { font-size: 12px; }
.validation-panel td small { margin-top: 4px; }
.metric-good { color: var(--cyan); }
.metric-warn { color: #f2c66d; }
.accuracy-monitor {
  margin: 18px 0 20px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line));
  border-radius: 12px;
  background: #0a1721;
}
.accuracy-monitor .section-head h3 { margin: 4px 0; font-size: 18px; }
.accuracy-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 18px;
}
.research-monitor { margin: 0 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #08141d; }
.research-monitor .section-head h3 { margin: 4px 0; font-size: 16px; }
.research-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.accuracy-metric {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0b1822;
}
.accuracy-metric span { display: block; color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.accuracy-metric strong { display: block; margin-top: 7px; font-size: 16px; font-variant-numeric: tabular-nums; }
.accuracy-metric small { min-height: 2.7em; line-height: 1.35; }
.expectancy-panel[data-direction="up"] { box-shadow: inset 4px 0 var(--cyan); }
.expectancy-panel[data-direction="down"] { box-shadow: inset 4px 0 var(--red); }
.direction-card { gap: 24px; }
.direction-overview { flex: 1; min-width: 0; }
.direction-card h2 { margin: 4px 0 8px; font-size: clamp(26px, 4vw, 42px); }
.direction-card p { max-width: 760px; line-height: 1.6; margin-bottom: 0; }
.horizon-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.horizon-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #0b1822; }
.horizon-card span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .06em; }
.horizon-card strong { display: block; margin-top: 8px; font-size: 20px; line-height: 1.3; }
.horizon-card small { margin-top: 6px; line-height: 1.4; }
.horizon-card[data-direction="up"] { border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); }
.horizon-card[data-direction="up"] strong { color: var(--cyan); }
.horizon-card[data-direction="down"] { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.horizon-card[data-direction="down"] strong { color: var(--red); }
.subsection-label { margin-top: 18px !important; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.direction-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.direction-detail-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #0b1822; }
.direction-detail-card span { display: block; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.direction-detail-card strong { display: block; margin-top: 7px; overflow: hidden; font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.direction-detail-card small { min-height: 2.7em; margin-top: 5px; line-height: 1.35; }
.direction-detail-card[data-side="up"] strong { color: var(--cyan); }
.direction-detail-card[data-side="down"] strong { color: var(--red); }
.signed-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.positive-value { color: var(--cyan); }
.negative-value { color: var(--red); }
.neutral-value { color: var(--text); }
.signed-value.positive-value { color: var(--cyan); }
.signed-value.negative-value { color: var(--red); }
.signed-value.neutral-value { color: var(--text); }
.direction-score { min-width: 130px; text-align: right; }
.direction-score span, .expectancy-meta span { display: block; color: var(--muted); font-size: 11px; }
.direction-score strong { display: block; font-size: 38px; font-variant-numeric: tabular-nums; }
.expectancy-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 20px -20px 0; background: var(--line); border-block: 1px solid var(--line); }
.expectancy-meta div { padding: 16px 20px; background: #0b1822; }
.expectancy-meta strong { display: block; margin-top: 5px; font-size: 20px; font-variant-numeric: tabular-nums; }
.expectancy-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 24px; padding-top: 18px; }
.expectancy-body h3 { margin: 0 0 8px; font-size: 15px; }
.compact { margin: 0 0 12px; font-size: 12px; }
.model-note { margin: 18px 0 -4px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.feature { margin: 0 0 14px; }
.feature > div:first-child { display: flex; justify-content: space-between; font-size: 12px; }
.feature-track { position: relative; height: 5px; margin: 6px 0; border-radius: 9px; background: #182b36; overflow: hidden; }
.feature-track::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #58707b; }
.feature-track i { position: absolute; top: 0; bottom: 0; width: calc(var(--value) / 2); background: var(--cyan); }
.feature-track i[style*="--side:-1"] { right: 50%; background: var(--red); }
.feature-track i[style*="--side:1"] { left: 50%; }
.feature small { margin: 0; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0; }
.grid strong { display: block; font-size: 25px; margin-top: 12px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.split article { min-height: 230px; }
.twap-panel { margin-top: 12px; }
h2 { font-size: 16px; }
.section-head h2 { font-size: 22px; margin: 4px 0; }
.muted { color: var(--muted); }
dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
dt { color: var(--muted); }
dd { text-align: right; margin: 0; font-variant-numeric: tabular-nums; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
th, td { text-align: right; padding: 12px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 500; }
.buy, tr.positive td:nth-last-child(-n+2) { color: var(--cyan); }
.sell, tr.negative td:nth-last-child(-n+2) { color: var(--red); }
small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
footer { color: var(--muted); font-size: 12px; margin: 24px 4px; line-height: 1.6; }
@media (max-width: 800px) {
  .expectancy-body, .validation-body { grid-template-columns: 1fr; }
  .expectancy-meta { grid-template-columns: 1fr 1fr; }
  .direction-summary-grid { grid-template-columns: 1fr 1fr; }
  .horizon-summary-grid { grid-template-columns: 1fr; }
  .spot-metrics { grid-template-columns: 1fr 1fr; }
  .accuracy-summary-grid { grid-template-columns: 1fr 1fr; }
  .research-summary-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  header, .direction-card { align-items: flex-start; gap: 10px; }
  .direction-card { flex-direction: column; }
  .direction-score { text-align: left; }
  .direction-summary-grid { grid-template-columns: 1fr; }
  .spot-metrics { grid-template-columns: 1fr; }
  .accuracy-summary-grid { grid-template-columns: 1fr; }
  .research-summary-grid { grid-template-columns: 1fr; }
  #status { font-size: 10px; }
}

/* Plain-language verdict panel: the one thing a first-time reader should get. */
.verdict-panel {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.4fr);
  gap: 24px;
  align-items: center;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 12px;
}
.verdict-panel[data-direction="up"] { box-shadow: inset 5px 0 var(--cyan); }
.verdict-panel[data-direction="down"] { box-shadow: inset 5px 0 var(--red); }
.verdict-eyebrow { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.verdict-headline { display: flex; align-items: center; gap: 16px; }
.verdict-arrow { font-size: 46px; line-height: 1; color: var(--muted); }
.verdict-panel[data-direction="up"] .verdict-arrow { color: var(--cyan); }
.verdict-panel[data-direction="down"] .verdict-arrow { color: var(--red); }
.verdict-headline strong { display: block; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.02em; }
.verdict-headline small { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.verdict-headline small span { white-space: nowrap; }
.verdict-headline small b { letter-spacing: .15em; color: var(--text); }
.verdict-runs-title { margin: 0 0 14px; font-size: 14px; color: var(--text); }
.verdict-runs-title small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.run-row { display: grid; grid-template-columns: 82px 1fr 76px; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 14px; }
.run-row span { color: var(--muted); }
.run-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.run-bar { height: 14px; border-radius: 99px; background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; }
.run-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--cyan); transition: width .4s ease; }
.run-bar i.down { background: var(--red); }
.verdict-note { margin: 12px 0 0; font-size: 14px; line-height: 1.6; }
.verdict-sample { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.reach-table { margin-bottom: 16px; }
@media (max-width: 720px) {
  .verdict-panel { grid-template-columns: 1fr; padding: 20px; }
}