:root {
  --navy: #0F1F3D; --navy2: #172B52; --mid: #2A4A80; --gold: #D4AF37; --gold-ink: #7D5F0E;
  --ivory: #F6F3EA; --card: #FFFDF8; --line: #DAD4C4; --ink: #1F2A44; --muted: #4B5670;
  --tint: #E3E7EF; --bad: #9A2E24;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 16px/1.4 'Public Sans', system-ui, sans-serif; }
#app { max-width: 720px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--mid); font-weight: 700; }

header.top { background: var(--navy); color: var(--ivory); padding: 20px 20px 0; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
h1 { font: 600 30px/1.1 'Oswald', sans-serif; margin: 4px 0 0; color: var(--ivory); }
nav.tabs { display: flex; gap: 2px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
nav.tabs a { color: #9AA6BD; text-decoration: none; font-weight: 600; padding: 12px 10px; border-bottom: 3px solid transparent; white-space: nowrap; }
nav.tabs a.on { color: var(--ivory); border-color: var(--gold); }
nav.tabs a.out { margin-left: auto; }

.body { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.label { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--mid); margin-top: 8px; }
.sub { font-size: 13px; color: var(--muted); }
.sub.gold { color: var(--gold-ink); font-weight: 700; }
.err { color: var(--bad); font-weight: 700; margin: 0; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.between { justify-content: space-between; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 600 14px 'Public Sans', sans-serif; padding: 10px 14px; min-height: 44px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.chip.on { background: var(--gold); border-color: var(--gold); color: var(--navy); }

.row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.row.pr { border: 2px solid var(--gold); padding: 9px 11px; }
.row.tint { background: var(--tint); border-color: var(--tint); }
.av { width: 40px; height: 40px; border-radius: 20px; background: var(--navy); color: var(--gold); font: 700 16px 'Oswald', sans-serif; display: flex; align-items: center; justify-content: center; flex: none; }
.grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.name { font-weight: 600; }

input, select { font: inherit; color: var(--navy); background: var(--ivory); border: 1px solid var(--line); border-radius: 10px; min-height: 44px; padding: 0 12px; }
input.num { width: 88px; text-align: center; font-weight: 600; font-size: 20px; }
button { font: inherit; cursor: pointer; }
button.primary { min-height: 52px; border: none; border-radius: 12px; background: var(--navy); color: var(--gold); font: 600 18px 'Oswald', sans-serif; letter-spacing: 1px; width: 100%; }
button.ghost, a.ghost { display: flex; align-items: center; justify-content: center; text-decoration: none; min-height: 44px; border: 1px solid var(--mid); border-radius: 10px; background: transparent; color: var(--navy); font-weight: 600; padding: 0 12px; }
button.link { background: none; border: none; color: var(--mid); font-weight: 700; padding: 10px 4px; min-height: 44px; }
.round { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--mid); background: var(--card); font: 700 20px 'Public Sans', sans-serif; color: var(--navy); flex: none; }
.round.dark { background: var(--navy); color: var(--gold); border: none; }
.dose { font: 700 18px 'Oswald', sans-serif; color: var(--navy); min-width: 52px; text-align: center; }

.foot { position: sticky; bottom: 0; padding: 12px 20px 20px; background: var(--ivory); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.status { font-size: 12px; color: var(--muted); text-align: center; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.tile.dark { background: var(--navy); border-color: var(--navy); }
.tile.dark .sub { color: #C9D1E0; }
.big { font: 700 34px 'Oswald', sans-serif; color: var(--navy); }
.tile.dark .big { color: var(--gold); }

.stack { display: flex; flex-direction: column; gap: 8px; }
.row.col { flex-direction: column; align-items: stretch; gap: 4px; }
.end { justify-content: flex-end; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; }
summary { font-weight: 700; color: var(--mid); min-height: 44px; display: flex; align-items: center; cursor: pointer; }

.login { background: var(--navy); min-height: 100vh; padding: 64px 28px 40px; display: flex; flex-direction: column; gap: 18px; color: #C9D1E0; }
.login h1 { font-size: 40px; }
.login label { font-weight: 600; color: var(--ivory); font-size: 14px; }
.login input, .login select { background: var(--navy2); color: var(--ivory); border-color: var(--mid); min-height: 52px; }
.login input.pin { font: 700 30px 'Oswald', sans-serif; letter-spacing: 18px; text-align: center; border: 2px solid var(--gold); }
.login button.primary { background: var(--gold); color: var(--navy); }
.login .err { color: #F2B8B0; }
.login .sub { color: #9AA6BD; text-align: center; }

.dot { width: 28px; height: 28px; border-radius: 14px; flex: none; box-sizing: border-box; }
.lname { font: 600 20px 'Oswald', sans-serif; color: var(--navy); }
.pct { width: 44px; text-align: right; font-weight: 700; color: var(--mid); }
.rank { width: 28px; font: 700 20px 'Oswald', sans-serif; color: var(--gold-ink); }
.row.me { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.row.me .rank, .row.me .dose { color: var(--gold); }
input.num.wide { width: 100%; }
.tile.dark .name { color: var(--gold); }
a.row { text-decoration: none; color: inherit; font-weight: inherit; }
.row.miss { border-left: 4px solid var(--bad); padding-left: 9px; }
.stage iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: var(--navy); }
.thumb { flex: none; width: 120px; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--navy); cursor: pointer; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }