:root {
  --bg:#0f1115; --card:#181b22; --card-2:#1f232c; --line:#2a2f3a;
  --text:#e8eaed; --muted:#9aa2af; --green:#34d399; --red:#f87171;
  --gold:#fbbf24; --accent:#60a5fa; --accent-ink:#0b1220;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#f4f5f7; --card:#fff; --card-2:#f0f2f5; --line:#e2e5ea;
    --text:#1a1d23; --muted:#667085; --green:#059669; --red:#dc2626;
    --gold:#b45309; --accent:#2563eb; --accent-ink:#fff;
  }
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* header */
.topbar { background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.topbar-inner {
  max-width:720px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.brand { font-weight:800; font-size:1rem; color:var(--text); }
.topbar nav { display:flex; gap:14px; font-size:.88rem; }
.topbar nav a { color:var(--accent); }
.topbar nav a.muted { color:var(--muted); }

.wrap { max-width:720px; margin:0 auto; padding:20px 16px 72px; }
h1 { font-size:1.4rem; margin:4px 0 2px; }
h2 { font-size:1rem; margin:0 0 12px; }
.sub { color:var(--muted); font-size:.88rem; margin:0 0 16px; }
.lead-week { font-weight:700; font-size:1.05rem; margin:2px 0 16px; }

.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px; }
.flash { background:rgba(52,211,153,.14); color:var(--green); border-radius:10px; padding:10px 12px; font-size:.9rem; margin-bottom:14px; }

.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.stat { background:var(--card-2); border-radius:10px; padding:10px 12px; }
.stat .n { font-size:1.25rem; font-weight:700; }
.stat .l { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }

.row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th,td { text-align:left; padding:8px 6px; border-top:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
td.num,th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr.me td { background:rgba(96,165,250,.12); }

/* deadline banner */
.banner {
  position:sticky; top:44px; z-index:20; margin:-4px -16px 16px; padding:11px 16px;
  background:var(--card-2); border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; font-size:.92rem;
}
.banner.locked { background:rgba(251,191,36,.14); }
.banner .count { color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }

/* pick cards */
.dayhdr { color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; margin:18px 0 8px; }
.game { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; background:var(--card); }
.game .kick { color:var(--muted); font-size:.76rem; margin-bottom:7px; }
.opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.opt {
  position:relative; display:block; text-align:center; padding:11px 6px; border-radius:10px;
  border:1px solid var(--line); background:var(--card-2); cursor:pointer; font-weight:600; line-height:1.2;
}
.opt input { position:absolute; opacity:0; pointer-events:none; }
.opt .s { display:block; font-size:.74rem; color:var(--muted); font-weight:500; margin-top:2px; }
.opt.sel { border-color:var(--accent); background:rgba(96,165,250,.18); color:var(--accent); }
.opt.win { border-color:var(--green); }
.opt.sel.correct { border-color:var(--green); background:rgba(52,211,153,.16); color:var(--green); }
.opt.sel.wrong { border-color:var(--red); background:rgba(248,113,113,.14); color:var(--red); }
.result { font-size:.78rem; color:var(--muted); margin-top:6px; }
.auto { color:var(--gold); }

/* sticky save bar */
.savebar {
  position:sticky; bottom:0; margin:16px -16px 0; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--card); border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.savebar .prog { font-size:.92rem; color:var(--muted); font-variant-numeric:tabular-nums; }

button, .btn {
  background:var(--accent); color:var(--accent-ink); border:0; font-weight:700; font-size:.95rem;
  padding:10px 18px; border-radius:10px; cursor:pointer; display:inline-block; font-family:inherit;
}
.btn.ghost { background:var(--card-2); color:var(--text); border:1px solid var(--line); }
button[disabled] { opacity:.45; cursor:not-allowed; }

.pill { font-size:.68rem; padding:1px 7px; border-radius:999px; font-weight:700; letter-spacing:.03em; }
.pill.open { color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.pill.locked { color:var(--gold); border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.pill.final { color:var(--green); border:1px solid color-mix(in srgb, var(--green) 45%, transparent); }

.paid { color:var(--green); font-weight:600; }
.unpaid { color:var(--red); font-weight:600; }
.muted { color:var(--muted); }
.names { color:var(--muted); font-size:.9rem; }

input,select,textarea {
  display:block; background:var(--card-2); color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:9px 11px; font:inherit; width:100%; max-width:340px; margin-top:4px;
}
input[type=checkbox],input[type=radio] { display:inline; width:auto; margin-top:0; }
label { display:block; margin-bottom:12px; }

.medal { width:1.4em; display:inline-block; }
details.acct summary { cursor:pointer; color:var(--muted); list-style:none; }
details.acct summary::-webkit-details-marker { display:none; }

.linkbox { font-family:ui-monospace,Menlo,monospace; font-size:.82rem; word-break:break-all; }
.wknav { display:flex; flex-wrap:wrap; gap:6px 10px; font-size:.85rem; margin:0 0 12px; }
.wknav a, .wknav strong { padding:2px 4px; }

.foot { color:var(--muted); font-size:.78rem; text-align:center; margin-top:28px; }
.err-box { background:rgba(248,113,113,.14); color:var(--red); border-radius:10px; padding:10px 12px; font-size:.9rem; margin-bottom:14px; }