:root {
  --bg: #0f172a; --panel: #111827; --panel-2: #0b1227; --text: #e5e7eb; --muted: #94a3b8;
  --accent: #60a5fa; --good: #10b981; --warn: #f59e0b; --bad: #6b7280; --row-alt: #0d1b2a;
  --border: #1f2937; --chip-bg: #0b223e; --chip-text: #c7e1ff;
  --shadow: 0 8px 30px rgba(0,0,0,.25); --radius: 14px;
}
@media (prefers-color-scheme: light){
  :root {
    --bg:#f1f5f9; --panel:#fff; --panel-2:#fff; --text:#0f172a; --muted:#475569;
    --accent:#2563eb; --good:#059669; --warn:#d97706; --bad:#6b7280; --row-alt:#f8fafc;
    --border:#e5e7eb; --chip-bg:#e8f1ff; --chip-text:#1e3a8a;
    --shadow:0 8px 20px rgba(2,6,23,.08);
  }
}

* { box-sizing: border-box }
body {
  margin:0;
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background: var(--bg);
  color: var(--text);
}
.wrap { max-width:900px; margin:24px auto 48px; padding:0 16px }
header { text-align:center; margin-bottom:10px }

.logo {
  display:inline-flex; gap:10px; align-items:center;
  font-weight:800; letter-spacing:.3px; font-size:clamp(28px,4vw,40px);
  background:linear-gradient(90deg,#e0f2fe,#93c5fd,#a7f3d0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sub { color:var(--muted); font-size:14px; margin-top:6px }

/* NAV */
.nav {
  display:flex; gap:10px; justify-content:center;
  margin:16px auto 22px; flex-wrap:wrap;
}
.nav a {
  text-decoration:none; color:var(--muted); background:transparent;
  border:1px solid var(--border); padding:8px 12px; border-radius:999px;
  transition:.2s; font-weight:600; font-size:14px;
}
.nav a:hover { color:var(--text); border-color:var(--accent) }
.nav a.active { color:var(--text); background:rgba(96,165,250,.12); border-color:var(--accent) }

/* Panels */
.panel {
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px; border-bottom:1px solid var(--border);
}
.asof { color:var(--muted); font-size:14px }
.legend {
  display:flex; gap:10px; align-items:center;
  color:var(--muted); font-size:12px; flex-wrap:wrap;
}
.dot { width:10px; height:10px; border-radius:999px; display:inline-block }
.dot.good { background: var(--good) }
.dot.warn { background: var(--warn) }
.dot.bad { background: var(--bad) }

/* Table */
table { width:100%; border-collapse:separate; border-spacing:0 }
thead th {
  text-align:left; font-size:13px; color:var(--muted);
  padding:14px 16px; border-bottom:1px solid var(--border);
  user-select:none; cursor:pointer;
}
thead th:not(.sortable){ cursor:default }
tbody td { padding:14px 16px; border-bottom:1px solid var(--border); vertical-align:middle }
tbody tr:nth-child(even){ background:var(--row-alt) }
tbody tr:hover{ background:rgba(96,165,250,.08) }
.match { font-weight:600 }
.pick-chip {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--chip-bg); color:var(--chip-text);
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px;
}
.pick-chip .label { opacity:.8; font-weight:600; font-size:12px }

/* Prob bar */
.bar {
  position:relative; height:12px; background:rgba(148,163,184,.2);
  border-radius:999px; overflow:hidden;
}
.bar>.fill {
  position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--bad);
  transition:width .8s cubic-bezier(.22,1,.36,1);
}
.bar.good>.fill { background:var(--good) }
.bar.warn>.fill { background:var(--warn) }
.prob-wrap {
  display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
}
.pct { font-variant-numeric:tabular-nums; min-width:3.5ch; text-align:right; font-weight:700 }
.empty { padding:24px; text-align:center; color:var(--muted) }
.notice { margin-top:12px; color:var(--muted); font-size:12px; text-align:center }

/* Team logos */
.team { display:inline-flex; align-items:center; gap:6px }
.team .logo { width:24px; height:24px; object-fit:contain }
.pick-chip .team .logo { width:18px; height:18px }

/* Responsive */
@media (max-width:560px){
  thead th:nth-child(1), tbody td:nth-child(1){ width:42% }
  thead th:nth-child(2), tbody td:nth-child(2){ width:28% }
  thead th:nth-child(3), tbody td:nth-child(3){ width:30% }
  .toolbar{ flex-direction:column; align-items:flex-start }
}

.footer {
  text-align:center;
  padding:24px 0;
  color:var(--muted);
  font-size:14px;
  margin-top:40px;
  border-top:1px solid var(--border);
}

.content { padding: 24px; }