@font-face {
  font-family: "Inter Display";
  src: url("/fonts/InterDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("/fonts/InterDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("/fonts/InterDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #172332;
  --muted: #637081;
  --line: #dce2e7;
  --surface: #ffffff;
  --wash: #f4f7f6;
  --navy: #173a4b;
  --green: #16815d;
  --green-soft: #e4f3ed;
  --red: #b03a46;
  --red-soft: #fae9eb;
  --amber: #966715;
  --amber-soft: #fff2d8;
  --focus: #0969da;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--wash); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--wash);
  font: 400 16px/1.5 "Inter Display", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

button, input, select { font: inherit; }

a { color: inherit; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 20;
  padding: 10px 14px;
  background: var(--surface);
  border: 2px solid var(--focus);
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  min-height: 68px;
  padding: 12px clamp(18px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #fff;
  background: var(--navy);
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }

.brand-mark {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  color: var(--navy);
  background: #d6f2e6;
  border-radius: 50%;
}

.header-status { display: flex; align-items: center; gap: 14px; color: #d6e0e4; font-size: 14px; }

.safety-chip {
  min-height: 32px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d8f8e9;
  border: 1px solid #4d806f;
  border-radius: 4px;
  font-weight: 600;
}

.safety-chip span { color: #42cf91; font-size: 11px; }

main { width: min(1560px, 100%); margin: 0 auto; padding: 48px clamp(18px, 4vw, 64px) 64px; }

.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 390px); gap: 48px; align-items: end; }

.eyebrow { margin: 0 0 6px; color: var(--green); font-size: 14px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }

h1, h2 { margin: 0; color: var(--navy); line-height: 1.08; letter-spacing: -.035em; }

h1 { max-width: 780px; font-size: clamp(36px, 5vw, 66px); }

h2 { font-size: clamp(25px, 3vw, 34px); }

.lede { max-width: 70ch; margin: 18px 0 0; color: var(--muted); font-size: clamp(17px, 1.5vw, 20px); }

.model-note { padding-left: 18px; border-left: 3px solid var(--green); display: grid; gap: 4px; }

.model-note span { color: var(--muted); font-size: 14px; }

.page-status { min-height: 24px; margin: 26px 0 14px; color: var(--muted); font-size: 14px; }

.page-status.error { padding: 12px 14px; color: #7f202b; background: var(--red-soft); border-left: 3px solid var(--red); }

.scanner { margin-bottom: 24px; padding: clamp(22px, 3vw, 34px); background: var(--surface); border: 1px solid var(--line); }

.scanner-summary { min-height: 32px; padding: 5px 10px; display: inline-flex; align-items: center; color: var(--navy); background: #eef3f2; border: 1px solid var(--line); font-weight: 600; }

.scanner-table-wrap { margin-top: 18px; }

.scanner-table { min-width: 880px; }

.scanner .cell-sub { font-size: 14px; }

.saver-state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 700; }
.saver-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8b98a3; }
.saver-state.collecting { color: var(--green); }
.saver-state.collecting::before { background: var(--green); }
.saver-state.starting { color: var(--amber); }
.saver-state.starting::before { background: #d89c27; }
.saver-state.blocked, .saver-state.error, .saver-state.stale { color: var(--red); }
.saver-state.blocked::before, .saver-state.error::before, .saver-state.stale::before { background: var(--red); }

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--surface); }

.kpi { min-width: 0; min-height: 144px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); }

.kpi:last-child { border-right: 0; }

.kpi-primary { color: #fff; background: var(--navy); }

.kpi-label { color: var(--muted); font-size: 14px; font-weight: 600; }

.kpi-primary .kpi-label, .kpi-primary > span:last-child { color: #c5d2d8; }

.kpi strong { display: block; margin: 8px 0 4px; font-size: clamp(28px, 3vw, 40px); font-variant-numeric: tabular-nums; line-height: 1; }

.kpi > span:last-child { color: var(--muted); font-size: 14px; }

.performance, .predictions { margin-top: 42px; padding: clamp(22px, 3vw, 34px); background: var(--surface); border: 1px solid var(--line); }

.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }

.button-link, .button-secondary {
  min-height: 44px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid #9ba8b1;
  border-radius: 3px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button-link:hover, .button-secondary:hover { background: #eef3f2; border-color: var(--navy); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.takeaway { margin: 18px 0 0; max-width: 75ch; color: var(--muted); }

.chart-frame { position: relative; height: 330px; margin-top: 18px; }

.chart-frame canvas { width: 100% !important; height: 100% !important; }

.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--line); background: #fafcfb; }

.chart-empty[hidden] { display: none; }

.chart-data { margin-top: 14px; color: var(--muted); }

.chart-data summary { min-height: 44px; display: flex; align-items: center; width: fit-content; color: var(--navy); cursor: pointer; font-weight: 600; }

.filters { margin: 24px 0 20px; display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(145px, 1fr)) auto; gap: 12px; align-items: end; }

.filters label { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 14px; font-weight: 600; }

input, select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid #9ba8b1;
  border-radius: 3px;
}

.input-suffix { position: relative; }
.input-suffix input { padding-right: 32px; }
.input-suffix span { position: absolute; right: 11px; top: 11px; color: var(--muted); font-weight: 400; }

.result-count { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); }

.table-scroll-compact { width: min(560px, 100%); margin-top: 6px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

.odds-table { min-width: 1120px; }

th { padding: 12px 14px; color: #52606e; background: #f1f5f4; border-bottom: 1px solid var(--line); font-weight: 600; text-align: left; white-space: nowrap; }

td { padding: 14px; border-bottom: 1px solid #e7ebee; vertical-align: top; }

tbody tr:last-child td { border-bottom: 0; }

tbody tr:hover { background: #f8faf9; }

.numeric { text-align: right; font-variant-numeric: tabular-nums; }

.cell-main { display: block; color: var(--ink); font-weight: 600; }

.cell-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.35; }

.edge { display: inline-flex; min-width: 62px; padding: 4px 8px; justify-content: flex-end; color: var(--ink); background: #edf1f2; border-radius: 3px; font-weight: 700; }

.edge.positive { color: #0b6548; background: var(--green-soft); }
.edge.negative { color: #892934; background: var(--red-soft); }

.state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8b98a3; }
.state.paper-open { color: var(--amber); }
.state.paper-open::before { background: #d89c27; }
.state.settled { color: var(--green); }
.state.settled::before { background: var(--green); }

.pnl-positive { color: var(--green); font-weight: 700; }
.pnl-negative { color: var(--red); font-weight: 700; }
.empty-cell { padding: 42px 16px; color: var(--muted); text-align: center; }

.table-note { max-width: 75ch; margin: 14px 0 0; color: var(--muted); font-size: 14px; }

footer { padding: 22px clamp(18px, 4vw, 64px); display: flex; justify-content: space-between; gap: 18px; color: #cbd5da; background: var(--navy); font-size: 14px; }

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .kpi { border-bottom: 1px solid var(--line); }
  .kpi:nth-child(3) { border-right: 0; }
  .kpi:nth-child(n+4) { border-bottom: 0; }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .site-header { align-items: flex-start; }
  .header-status { align-items: flex-end; flex-direction: column; gap: 5px; text-align: right; }
  .intro { grid-template-columns: 1fr; gap: 26px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { min-height: 132px; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line) !important; }
  .kpi:nth-child(even) { border-right: 0; }
  .kpi:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .scanner, .performance, .predictions { padding: 20px 16px; }
  .performance, .predictions { margin-top: 28px; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters label:first-child { grid-column: 1 / -1; }
  .chart-frame { height: 270px; }
  footer { flex-direction: column; }
}

@media (max-width: 430px) {
  main { padding-top: 34px; }
  .site-header { padding-inline: 16px; }
  .brand > span:last-child { display: none; }
  .kpi strong { font-size: 30px; }
  .filters { grid-template-columns: 1fr; }
  .filters label:first-child { grid-column: auto; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .button-link { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}