:root{
  --bg:#0b1220; --surface:#121c30; --surface-2:#0e1828; --border:#1f2c46;
  --text:#e8edf6; --muted:#9aa7bd; --muted-2:#7d8aa3;
  --mint:#7fe7c4; --gold:#ffd54a; --violet:#c9a7ff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;}
.container{max-width:620px;margin:0 auto;padding:18px}
.container.narrow{max-width:380px;padding-top:12vh}
.muted{color:var(--muted)}
.error{color:#ff8585;background:#2a1620;border:1px solid #5a2230;padding:8px 12px;border-radius:8px}
a{color:var(--text);text-decoration:none}

/* top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--border);background:#0d1526}
.brand{font-weight:800;letter-spacing:.5px}
.brand-lg{font-weight:800;font-size:28px;margin:0 0 4px}
.navlinks{display:flex;gap:16px;align-items:center;font-size:13px}
.navlinks a.active{color:var(--mint);border-bottom:2px solid var(--mint);padding-bottom:12px}
.who{display:flex;align-items:center;gap:6px;color:var(--muted)}
.avatar{width:22px;height:22px;border-radius:99px;background:#22324f;color:var(--mint);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.inline{display:inline}
.linkbtn{background:none;border:none;color:var(--muted-2);cursor:pointer;font-size:13px}

/* cards / forms */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px}
.stack{display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
input,select{background:var(--bg);border:1px solid #2d3b5a;border-radius:8px;
  color:var(--text);padding:9px 11px;font-size:14px}
button.primary,.primary{background:var(--mint);color:#08110a;font-weight:800;border:none;
  border-radius:8px;padding:10px 16px;cursor:pointer}

/* fixtures */
.datehead{font-size:11px;letter-spacing:1px;color:var(--muted-2);text-transform:uppercase;
  padding:14px 4px 6px}
.match{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:13px 14px;margin-bottom:10px}
.match.finished{background:var(--surface-2);opacity:.92}
.match .meta{display:flex;justify-content:space-between;font-size:9px;color:var(--muted-2);margin-bottom:9px}
.tag{padding:2px 7px;border-radius:99px;background:#1b2740;color:var(--mint)}
.tag.ko{background:#2a1f40;color:var(--violet)}
.tag.fin{background:#16223a;color:var(--muted)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:600}
.row .team{flex:1}
.row .team.away{text-align:right}
.scoreinputs{display:flex;gap:6px;align-items:center}
.scoreinputs input{width:34px;text-align:center;color:var(--mint);padding:6px 0}
.sep{color:#56678a}
.score{font-size:16px;font-weight:800;letter-spacing:2px}
.badge{background:var(--mint);color:#08110a;font-size:11px;font-weight:800;padding:6px 12px;border-radius:8px}
.progress{margin-top:11px;padding-top:11px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px;font-size:11px}
.pill{padding:5px 12px;border-radius:99px;border:1px solid #2d3b5a;color:var(--muted-2);cursor:pointer}
.pill.sel{background:#1b2740;color:var(--mint)}

/* champion banner */
.champion{margin:16px 0;padding:14px 16px;border:1px dashed #2d3b5a;border-radius:12px;
  background:linear-gradient(135deg,#101a2e,#13233f);display:flex;justify-content:space-between;align-items:center}
.champion .label{font-size:10px;letter-spacing:1px;color:var(--gold);text-transform:uppercase}

/* leaderboard */
.podium{display:flex;gap:10px;justify-content:center;align-items:flex-end;padding:18px 0}
.podium .col{text-align:center;flex:1}
.podium .bar{border:1px solid var(--border);border-radius:10px 10px 0 0;margin-top:6px;background:#16223a}
.lbtable{width:100%;border-collapse:collapse;font-size:13px}
.lbtable th{font-size:9px;letter-spacing:1px;color:var(--muted-2);text-transform:uppercase;
  text-align:left;padding:8px 10px}
.lbtable td{padding:11px 10px;border-top:1px solid #16223a}
.lbtable td.num,.lbtable th.num{text-align:center}
.lbtable td.pts,.lbtable th.pts{text-align:right;font-weight:800}
.lbtable tr.you td{background:#13233f}
.lbtable tr.you td:first-child{border-left:3px solid var(--mint)}
.youtag{font-size:9px;background:#1b2740;padding:1px 6px;border-radius:99px;color:var(--mint)}
.rank-1{color:var(--gold);font-weight:800}