:root{
  --bg:#0b1220; --panel:#131c2e; --panel2:#1a2540; --line:#25324d;
  --ink:#e8eef7; --muted:#9fb0c9; --brand:#3ea6ff; --brand2:#1e6fd0;
  --ok:#2fbf71; --err:#ef5350; --gold:#ffcb47; --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,#0a1020,#0b1220 40%);
  color:var(--ink); font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:100%; max-width:960px; margin:0 auto; padding:0 20px}
main.wrap{flex:1 0 auto; padding-top:28px; padding-bottom:56px}

/* Top bar */
.topbar{background:rgba(10,16,32,.85); border-bottom:1px solid var(--line); backdrop-filter:blur(6px); position:sticky; top:0; z-index:10}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{font-weight:800; font-size:20px; color:var(--ink)}
.brand span{color:var(--brand)}
.brand:hover{text-decoration:none}
.nav{display:flex; align-items:center; gap:18px}
.nav a{color:var(--muted); font-weight:600}
.nav a:hover{color:var(--ink); text-decoration:none}
.inline{display:inline}
.linklike{background:none; border:0; color:var(--muted); font:inherit; font-weight:600; cursor:pointer; padding:0}
.linklike:hover{color:var(--ink)}

/* Buttons */
.btn{display:inline-block; background:linear-gradient(180deg,var(--brand),var(--brand2)); color:#fff; font-weight:700;
  padding:11px 18px; border-radius:10px; border:0; cursor:pointer; font-size:15px}
.btn:hover{filter:brightness(1.07); text-decoration:none}
.btn-sm{padding:7px 13px; font-size:14px}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}
.btn-block{display:block; width:100%; text-align:center}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* Panels / cards */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:20px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}

h1{font-size:30px; margin:0 0 6px; line-height:1.2}
h2{font-size:21px; margin:0 0 12px}
h3{font-size:17px; margin:0 0 8px}
.muted{color:var(--muted)}
.lead{font-size:18px; color:var(--muted); margin:0 0 20px}
.center{text-align:center}
.mt{margin-top:18px}.mb{margin-bottom:18px}

/* Hero */
.hero{text-align:center; padding:44px 0 12px}
.hero h1{font-size:40px; letter-spacing:-.5px}
.hero .lead{max-width:620px; margin:12px auto 24px}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.pill{display:inline-block; background:var(--panel2); border:1px solid var(--line); color:var(--muted);
  padding:5px 12px; border-radius:999px; font-size:13px; font-weight:600; margin-bottom:14px}

/* Forms */
.form label{display:block; font-weight:600; margin:14px 0 6px; font-size:14px}
.form input[type=text],.form input[type=email],.form input[type=password]{
  width:100%; padding:11px 13px; background:var(--panel2); border:1px solid var(--line);
  border-radius:9px; color:var(--ink); font-size:15px}
.form input:focus{outline:none; border-color:var(--brand)}
.form .hint{color:var(--muted); font-size:13px; margin-top:5px}
.form-narrow{max-width:420px; margin:0 auto}

/* Flash */
.flash{margin:14px 0 0; padding:12px 16px; border-radius:10px; font-weight:600}
.flash-ok{background:rgba(47,191,113,.14); border:1px solid rgba(47,191,113,.4); color:#8ef0bd}
.flash-err{background:rgba(239,83,80,.14); border:1px solid rgba(239,83,80,.4); color:#ffb3b1}

/* Tables */
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.04em}
tr:last-child td{border-bottom:0}
.rank{font-weight:800; color:var(--muted); width:36px}
.rank-1{color:var(--gold)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* Games / picks */
.game{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line)}
.game:last-child{border-bottom:0}
.matchup{font-weight:600}
.kick{color:var(--muted); font-size:13px}
.teampick{display:flex; gap:10px; flex-wrap:wrap}
.teamopt{position:relative}
.teamopt input{position:absolute; opacity:0}
.teamopt label{display:inline-block; padding:9px 14px; border:1px solid var(--line); border-radius:9px;
  background:var(--panel2); cursor:pointer; font-weight:700; margin:0}
.teamopt input:checked + label{border-color:var(--brand); background:rgba(62,166,255,.16); color:#cfe6ff}
.teamopt input:disabled + label{opacity:.5; cursor:not-allowed}
.locked{color:var(--err); font-size:12px; font-weight:700; text-transform:uppercase}
.final{color:var(--muted); font-size:13px}
.result-win{color:var(--ok); font-weight:700}
.result-loss{color:var(--err); font-weight:700}

.badge{display:inline-block; background:var(--panel2); border:1px solid var(--line); border-radius:6px;
  padding:2px 8px; font-size:12px; font-weight:700; color:var(--muted)}
.copy-row{display:flex; gap:8px; align-items:center}
.copy-row input{flex:1}
.stat{font-size:32px; font-weight:800}
.stat-label{color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.04em}

/* Footer */
.footer{flex-shrink:0; border-top:1px solid var(--line); padding:22px 0; color:var(--muted)}
.footer-inner{display:flex; justify-content:space-between; align-items:center}
.footer a{color:var(--muted); margin-left:16px}
.weeknav{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px}
.weeknav a{padding:5px 10px; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:13px; font-weight:700}
.weeknav a.on{background:var(--brand); color:#fff; border-color:var(--brand)}