:root{
  --bg:#0a1330; --bg-2:#0f1c48; --surface:#0f1420; --surface-2:#161d2e; --border:#28304a;
  --text:#f2f4fb; --text-dim:#9aa4c4;
  --yellow:#ffd400; --yellow-ink:#12141c;
  --gold:#c9a227; --gold-soft:#e9c85c;
  --blue-accent:#4c8dff;
  --good:#2fbf71; --bad:#ef4a63; --warn:#e0a527;
  --font-display:'Rajdhani',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
  --radius:10px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#eef1fb; --bg-2:#dde4fb; --surface:#ffffff; --surface-2:#f3f5fb; --border:#d7ddf0;
    --text:#101527; --text-dim:#4f597a;
    --yellow:#e8b700; --yellow-ink:#12141c;
    --gold:#a8801c; --gold-soft:#caa23a;
    --blue-accent:#1f5fd6;
    --good:#1f9d5c; --bad:#d63a49; --warn:#a8720a;
  }
}
:root[data-theme="light"]{
  --bg:#eef1fb; --bg-2:#dde4fb; --surface:#ffffff; --surface-2:#f3f5fb; --border:#d7ddf0;
  --text:#101527; --text-dim:#4f597a;
  --yellow:#e8b700; --yellow-ink:#12141c;
  --gold:#a8801c; --gold-soft:#caa23a;
  --blue-accent:#1f5fd6;
  --good:#1f9d5c; --bad:#d63a49; --warn:#a8720a;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg);
  background-image:linear-gradient(180deg, var(--bg-2), var(--bg) 420px);
  color:var(--text); font-family:var(--font-body); line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1040px; margin:0 auto; padding:0 16px 72px;}
h1,h2,h3{font-family:var(--font-display); font-weight:700; text-wrap:balance; margin:0;}

header.site-header{
  background:linear-gradient(180deg, var(--bg-2), color-mix(in srgb, var(--bg-2) 60%, var(--bg)));
  border-bottom:2px solid var(--gold);
  padding:22px 16px 20px;
  margin-bottom:26px;
}
.site-header-inner{max-width:1040px; margin:0 auto; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.wordmark{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,4.5vw,36px); letter-spacing:.01em; color:var(--text); margin:0;}
.wordmark .accent{color:var(--yellow);}
.tagline{font-size:12.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--gold-soft); font-weight:600; margin-top:4px;}
.event-meta{font-size:13px; color:var(--text-dim); text-align:right;}
.admin-flag{display:inline-block; margin-top:4px; font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--gold); color:var(--yellow-ink); padding:3px 10px; border-radius:4px;}

nav.tabs{display:flex; gap:4px; overflow-x:auto; padding-bottom:2px; margin-bottom:24px; border-bottom:1px solid var(--border);}
nav.tabs button{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.02em; background:none; border:none; color:var(--text-dim); padding:10px 16px; cursor:pointer; white-space:nowrap; border-bottom:3px solid transparent; margin-bottom:-1px; transition:color .15s;}
nav.tabs button.active{color:var(--yellow); border-bottom-color:var(--yellow);}
nav.tabs button:hover{color:var(--text);}

.card{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border); border-radius:var(--radius); padding:18px;}
.card.state-open{border-left-color:var(--blue-accent);}
.card.state-done{border-left-color:var(--good);}
.card.state-locked{border-left-color:var(--warn);}

.grid-groups{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:680px){ .grid-groups{grid-template-columns:1fr;} }

.group-card h3{font-size:19px; display:flex; align-items:center; gap:10px;}
.group-badge{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:5px; background:var(--yellow); color:var(--yellow-ink); font-family:var(--font-display); font-weight:700; font-size:14px;}
.progress-pill{margin-left:auto; font-size:11px; font-weight:600; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px 10px;}
.progress-pill.done{color:var(--good); border-color:var(--good);}

.match-card{display:flex; gap:0; margin:9px 0; border-radius:8px; overflow:hidden; border:1.5px solid var(--border);}
.team-slot{flex:1; padding:10px 12px; background:var(--surface-2); font-weight:600; font-size:14px; cursor:pointer; border:none; text-align:left; color:var(--text); font-family:var(--font-body); transition:background .12s, color .12s;}
.team-slot:not(:last-child){border-right:1.5px solid var(--border);}
.team-slot.selected{background:var(--yellow); color:var(--yellow-ink);}
.team-slot:disabled{cursor:default; opacity:.55;}
.round-label{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.07em; margin:14px 0 6px; font-weight:600;}

.standings{margin-top:12px; padding-top:12px; border-top:1px dashed var(--border);}
.standings-title{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); font-weight:600; margin-bottom:8px;}
.standing-row{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13.5px;}
.standing-rank{font-family:var(--font-display); font-weight:700; width:20px; color:var(--text-dim);}
.standing-tag{margin-left:auto; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim);}

.bracket-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:680px){ .bracket-cols{grid-template-columns:1fr;} }
.bracket-col-title{font-family:var(--font-display); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--blue-accent); margin:16px 0 8px;}
.bracket-col-title.lower{color:var(--gold-soft);}

.grand-final-card{margin-top:24px; padding:22px; border-radius:14px; background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 20%, var(--surface)), var(--surface)); border:2px solid var(--gold); text-align:center;}
.grand-final-card h3{font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-soft); margin-bottom:14px;}
.grand-final-card .match-card{max-width:440px; margin:0 auto;}

.btn{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.02em; background:var(--yellow); color:var(--yellow-ink); border:none; border-radius:8px; padding:12px 20px; cursor:pointer; transition:filter .12s;}
.btn:hover{filter:brightness(1.08);}
.btn.secondary{background:var(--surface-2); color:var(--text); border:1.5px solid var(--border);}
.btn.gold{background:var(--gold);}
.btn:disabled{opacity:.5; cursor:not-allowed;}

.section-title{font-size:23px; margin-bottom:4px;}
.subtle{color:var(--text-dim); font-size:13.5px;}
input[type=text],input[type=password]{font-family:var(--font-body); font-size:14px; padding:11px 13px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface-2); color:var(--text); width:100%;}
.picker-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

.banner{padding:12px 14px; border-radius:8px; font-size:13.5px; margin-bottom:16px;}
.banner.warn{background:color-mix(in srgb, var(--warn) 18%, var(--surface)); border:1px solid var(--warn); color:var(--warn);}
.banner.good{background:color-mix(in srgb, var(--good) 16%, var(--surface)); border:1px solid var(--good); color:var(--good);}
.banner.bad{background:color-mix(in srgb, var(--bad) 16%, var(--surface)); border:1px solid var(--bad); color:var(--bad);}

.lb-row{display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border);}
.lb-row:last-child{border-bottom:none;}
.lb-rank{font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--text-dim);}
.lb-rank.first{color:var(--gold);}
.lb-name{font-weight:600;}
.lb-breakdown{font-size:11.5px; color:var(--text-dim); font-variant-numeric:tabular-nums;}
.lb-score{text-align:right; font-family:var(--font-display); font-weight:700; font-size:20px; font-variant-numeric:tabular-nums;}
.lb-pct{font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums;}

table.scoring{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:10px;}
table.scoring th, table.scoring td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--border);}
table.scoring th{color:var(--text-dim); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em;}
.num{font-variant-numeric:tabular-nums; text-align:right;}

.step-label{font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--gold-soft); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;}
.stack{display:flex; flex-direction:column; gap:16px;}
.admin-entry{border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:8px; font-size:13px;}
.admin-entry .name{font-weight:700; font-family:var(--font-display); font-size:15px;}

.pin-gate{max-width:360px; margin:60px auto; text-align:center;}
.pin-gate .card{text-align:left;}

footer.note{margin-top:36px; color:var(--text-dim); font-size:12.5px; border-top:1px solid var(--border); padding-top:14px;}