:root {
  color-scheme: dark;
  --bg: #0b0e13; --panel: #131820; --panel-2: #1a2029; --border: #252d39;
  --fg: #dfe5ec; --muted: #8893a2; --dim: #5d6775;
  --ct: #6ea8ff; --t: #e7b04b; --ban: #ff5c5c; --pick: #e7b04b; --decider: #44d07b;
  --accent: #e7b04b; --ok: #44d07b;
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.ct { color: var(--ct); } .t { color: var(--t); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .02em; text-decoration: none; }
.brand .logo {
  width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; flex: none;
  background: linear-gradient(135deg, var(--t), #c7782a); color: #111; font-weight: 900;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.pill.live { color: var(--ok); border-color: rgba(68, 208, 123, .4); background: rgba(68, 208, 123, .08); }
.pill.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 1.6s infinite; }
.pill.done { color: var(--fg); }
.pill.gold { color: #111; background: var(--accent); border-color: var(--accent); }
.btn {
  cursor: pointer; background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 14px;
  font-weight: 600; transition: border-color .15s, background .15s, transform .1s;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #111; }
.btn.danger { color: var(--ban); }
.btn.danger:hover { border-color: var(--ban); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
@keyframes pulse { 50% { opacity: .25; } }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }
.enter { animation: enter .45s var(--ease) both; }