:root {
  color-scheme: dark;
  --bg: #0a0a0c;
  --card: #141417;
  --border: #26262b;
  --border-soft: #1c1c21;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --dim: #71717a;
  --purple: #7c3aed;
  --purple-lite: #8b5cf6;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text); font-size: 14px; line-height: 1.5;
  max-width: 72rem; margin: 0 auto; padding: 0 1rem 2rem;
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: 1.15rem; font-weight: 700; }
.row { display: flex; gap: .75rem; align-items: center; margin: 1rem 0; }
button {
  font-size: .9rem; padding: .5rem 1.2rem; border-radius: .55rem;
  border: 1px solid var(--border); cursor: pointer;
  background: #161619; color: var(--text); transition: background .15s, border-color .15s;
}
button:hover:not(:disabled) { border-color: #3a3a42; }
button:disabled { opacity: .45; cursor: default; }
select {
  font-size: .9rem; padding: .45rem .55rem; border-radius: .55rem;
  background: #161619; color: var(--text); border: 1px solid var(--border);
}
select:focus, button:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; }
#status { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
       background: #52525b; margin-right: .45rem; vertical-align: middle; }
.dot.live { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dot.ended { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
label { font-size: .8rem; color: var(--muted); }