:root {
  --bg: #0f1216;
  --panel: #171b21;
  --border: #2a2f38;
  --text: #e6e9ee;
  --text-dim: #9aa4b2;
  --accent: #4f8cff;
  --tier1: #2fbf71;
  --tier2: #d4a72c;
  --tier3: #b06ad6;
  --no-pick: #5a6270;
  --warn-bg: #5c3b12;
  --warn-border: #d98b2a;
  --warn-text: #ffd699;
  --error-bg: #5c1f1f;
  --error-border: #d94a4a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

header {
  padding: 1.5rem 2rem 1rem;
  border-bottom: 1px solid var(--border);
}

header h1 {
  margin: 0 0 0.25rem;
  font-size: 1.4rem;
}

.race-heading {
  color: var(--text-dim);
  font-size: 0.95rem;
}

.key-gate {
  max-width: 480px;
  margin: 3rem auto;
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.key-gate form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.key-gate input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}

.key-gate button {
  padding: 0.5rem 1rem;
  background: var(--accent);
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-weight: 600;
}

main {
  padding: 1.5rem 2rem 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.error-banner {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.markets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 800px) {
  .markets { grid-template-columns: 1fr; }
}

.market-column h2 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.35rem;
}

.tier-breakdown {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.tier-chip {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--border);
}

.tier-chip.Tier1 { background: rgba(47, 191, 113, 0.18); color: var(--tier1); border-color: var(--tier1); }
.tier-chip.Tier2 { background: rgba(212, 167, 44, 0.18); color: var(--tier2); border-color: var(--tier2); }
.tier-chip.Tier3 { background: rgba(176, 106, 214, 0.18); color: var(--tier3); border-color: var(--tier3); }
.tier-chip.no_pick { background: rgba(90, 98, 112, 0.18); color: var(--no-pick); border-color: var(--no-pick); }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

th {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

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

.tier-cell {
  font-weight: 700;
}
.tier-cell.Tier1 { color: var(--tier1); }
.tier-cell.Tier2 { color: var(--tier2); }
.tier-cell.Tier3 { color: var(--tier3); }
.tier-cell.no_pick { color: var(--no-pick); }

.analytics h2 {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.35rem;
  margin-bottom: 1rem;
}

.market-report {
  margin-bottom: 2rem;
}

.market-report h3 {
  font-size: 1rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.market-report h4 {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin: 1rem 0 0.4rem;
}

/* Sample-size honesty: the warning badge is rendered at the SAME
   font-size/weight as the value it sits next to -- never smaller, never
   a tooltip. This is a deliberate, explicit requirement (see Step 13
   design discussion), not a default style choice -- a nicer visual
   presentation must not quietly bury the honesty the underlying data
   (core/analytics/performance.py's sample_too_small flag) already has. */
.stat-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.stat-value {
  font-size: 0.9rem;
  font-weight: 600;
}

.small-sample-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
  font-size: 0.9rem;   /* same size as .stat-value, not smaller */
  font-weight: 600;    /* same weight as .stat-value, not lighter */
  white-space: nowrap;
}

.empty-state {
  color: var(--text-dim);
  font-style: italic;
  padding: 1rem;
}

.chart-wrap {
  max-width: 640px;
  margin: 0.5rem 0 1.5rem;
}