:root{
  --bg:#15202b;--card:#1e2a38;--text:#f5f8fa;--hint:#8b98a5;--link:#4da3ff;
  --btn:#2f7cf6;--btn2:#243447;--line:#2f3b4a;--sec:#192734;
  --ok:#34c759;--warn:#f0ad4e;--danger:#ff5c5c;--accent:#1d9bf0;
  --home:#2f7cf6;--draw:#8b98a5;--away:#e74c3c;
  --max:430px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font:15px/1.45 -apple-system,"Noto Sans SC","PingFang SC",system-ui,sans-serif}
.wrap{max-width:var(--max);margin:0 auto;min-height:100vh;padding-bottom:64px}
.top{position:sticky;top:0;z-index:5;background:rgba(21,32,43,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:10px 14px 0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
h1{font-size:17px;margin:0;font-weight:650}
.badge{font-size:11px;color:#fff;background:#d9534f;border-radius:4px;padding:2px 7px}
.tabs{display:flex;gap:0;margin-top:8px}
.tabs a{flex:1;text-align:center;padding:10px 0 9px;color:var(--hint);font-size:13px;
  text-decoration:none;border-bottom:2px solid transparent}
.tabs a.on{color:var(--link);border-bottom-color:var(--link);font-weight:650}
.sec{margin:12px 14px}
.ttl{color:var(--hint);font-size:12.5px;margin:0 2px 8px;letter-spacing:.02em}
.card{background:var(--card);border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  border-bottom:1px solid var(--line);gap:10px}
.row:last-child{border-bottom:0}
.sub{color:var(--hint);font-size:12.5px}
.big{font-size:28px;font-weight:700;letter-spacing:.02em}
.pill{display:inline-block;font-size:11px;padding:2px 7px;border-radius:999px;
  background:var(--sec);color:var(--hint);border:1px solid var(--line)}
.pill.demo{color:#ffd1a1;border-color:#6a4a2a;background:#2a2118}
.pill.ai{color:#a8d4ff;border-color:#2a5080;background:#182636}
.match{padding:14px}
.match .teams{font-size:16px;font-weight:650;margin:4px 0 2px}
.match .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.bars{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 0 4px}
.bar{background:var(--sec);border-radius:10px;padding:10px 8px;text-align:center;border:1px solid var(--line)}
.bar b{display:block;font-size:18px;margin-top:2px}
.bar.home b{color:var(--home)}.bar.draw b{color:#cfd6dd}.bar.away b{color:var(--away)}
.reasons{margin:8px 0 0;padding:0 0 0 16px;color:var(--hint);font-size:12.5px}
.reasons li{margin:3px 0}
.picks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.pick{appearance:none;border:1px solid var(--line);background:var(--btn2);color:var(--text);
  border-radius:12px;padding:12px 8px;font-size:14px;font-weight:650;cursor:pointer}
.pick.on{background:var(--btn);border-color:var(--btn);color:#fff;box-shadow:0 0 0 1px rgba(47,124,246,.35)}
.pick:active{transform:scale(.98)}
.foot{margin:14px;color:var(--hint);font-size:12px;text-align:center;line-height:1.5}
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--max);
  display:flex;background:rgba(30,42,56,.96);border-top:1px solid var(--line);backdrop-filter:blur(8px)}
.nav a{flex:1;text-align:center;padding:10px 4px 12px;color:var(--hint);text-decoration:none;font-size:11px}
.nav a.on{color:var(--link)}
.nav a span{display:block;font-size:16px;line-height:1.2;margin-bottom:2px}
.stat{display:flex;gap:8px}
.stat .card{flex:1;text-align:center;padding:14px 8px}
.stat .card .big{font-size:22px}
.checkin{display:flex;align-items:center;justify-content:space-between;gap:10px}
.btn{border:0;border-radius:12px;background:var(--btn);color:#fff;padding:10px 16px;
  font-size:14px;font-weight:650;cursor:pointer}
.btn:disabled{opacity:.45;cursor:default}
.rank-n{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:var(--sec);font-size:13px;font-weight:700;flex:none}
.rank-n.t1{background:#f0ad4e;color:#1a1200}.rank-n.t2{background:#9aa4af;color:#111}
.rank-n.t3{background:#c47a4a;color:#1a0e00}
.me{outline:1px solid var(--link);background:#1a2838}
.hint-banner{margin:10px 14px 0;padding:8px 12px;border-radius:10px;background:#2a2118;
  color:#ffd1a1;font-size:12.5px;border:1px solid #6a4a2a}

/* production SPA extras */
#toast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);
  background:#243447;color:#fff;padding:10px 14px;border-radius:10px;
  font-size:13px;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s;
  max-width:min(90vw,400px);text-align:center;border:1px solid var(--line)}
#toast.show{opacity:1}
.view{display:none}.view.on{display:block}
.empty{padding:28px 14px;text-align:center;color:var(--hint);font-size:13.5px}
.loading{padding:24px;text-align:center;color:var(--hint)}
.err{margin:10px 14px;padding:10px 12px;border-radius:10px;background:#2a1818;
  color:#ffb4b4;font-size:13px;border:1px solid #6a2a2a}
.pick:disabled{opacity:.55}
.row.clickable{cursor:pointer}
.row.clickable:active{background:#243447}