:root {
  --bg:#f3f6fb; --card:#fff; --text:#16202e; --muted:#5d6b7e; --line:#e1e7f0;
  --accent:#1a5cff; --accent-soft:#e8efff; --accent2:#0fa88a; --ok:#168a4a; --bad:#d4303a;
  --shadow:0 1px 2px rgba(20,40,80,.06), 0 6px 18px rgba(20,40,80,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f1520; --card:#18212f; --text:#e8edf5; --muted:#93a1b5; --line:#27344a;
    --accent:#5b8dff; --accent-soft:#1d2c4d; --accent2:#2ec9a8; --ok:#4cc27f; --bad:#ff6b73;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 "Segoe UI", system-ui, -apple-system, "Heebo", Arial, sans-serif; }
a { color:var(--accent); }
.hidden { display:none !important; }
.loading #intro, .loading #login { visibility:hidden; }
main { max-width:680px; margin:0 auto; padding:0 16px 48px; }

/* top bar */
.topbar { background:var(--card); border-bottom:1px solid var(--line); }
.topbar-in { max-width:680px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.brand { font-weight:800; font-size:1.1rem; color:var(--text); text-decoration:none; margin-inline-end:auto; }
.nav { display:flex; gap:4px; }
.nav a { padding:6px 12px; border-radius:999px; text-decoration:none; color:var(--muted); font-weight:600; font-size:.95rem; }
.nav a:hover { background:var(--accent-soft); }
.nav a.on { background:var(--accent-soft); color:var(--accent); }
#userbox { font-size:.9rem; color:var(--muted); }

/* hero */
.hero { margin:20px 0; padding:28px 22px; border-radius:20px; color:#fff;
  background:linear-gradient(135deg,#1346c9 0%,#2f7bff 100%); box-shadow:var(--shadow); }
.hero h1 { margin:0 0 6px; font-size:1.9rem; line-height:1.2; }
.hero p { margin:0; opacity:.95; font-size:1.05rem; }
.steps { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px; }
.steps li { display:flex; gap:12px; align-items:flex-start; }
.steps b { flex:none; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.2);
  display:grid; place-items:center; font-weight:800; }
.steps span { opacity:.95; }
.steps small { display:block; opacity:.8; }

/* cards */
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; margin:16px 0; box-shadow:var(--shadow); }
.card h2 { font-size:1.2rem; margin:0 0 4px; }
.sub { color:var(--muted); font-size:.92rem; margin:0 0 12px; }
.muted { color:var(--muted); font-size:.9rem; }

/* buttons */
button { font:inherit; font-weight:700; border:0; border-radius:12px; padding:11px 20px; background:var(--accent); color:#fff; cursor:pointer; transition:transform .06s, opacity .15s; }
button:hover:not(:disabled) { opacity:.92; }
button:active:not(:disabled) { transform:scale(.98); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.secondary { background:transparent; color:var(--accent); border:1.5px solid var(--accent); }
a.btn { text-decoration:none; }
.login-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* seat rows */
.seatbar { position:sticky; top:0; z-index:5; background:var(--card); padding:10px 0 12px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.seatbar .nums { display:flex; justify-content:space-between; font-weight:800; margin-bottom:6px; }
.seatbar .nums.ok { color:var(--ok); } .seatbar .nums.bad { color:var(--muted); }
.progress { height:10px; background:var(--accent-soft); border-radius:999px; overflow:hidden; }
.progress > div { height:100%; width:0; background:var(--accent); border-radius:999px; transition:width .15s, background .15s; }
.progress.full > div { background:var(--ok); }
.progress.over > div { background:var(--bad); }
.row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 10px; padding:12px 8px; border-radius:12px; }
.row + .row { border-top:1px solid transparent; }
.row .name { font-weight:600; }
.ctl { display:flex; align-items:center; gap:6px; }
.row input[type=number] { width:4.2rem; font:inherit; font-weight:800; font-size:1.1rem; padding:6px; text-align:center;
  border:1.5px solid var(--line); border-radius:10px; background:var(--bg); color:var(--text); }
.row input[type=number]:focus { outline:2px solid var(--accent); border-color:transparent; }
.step { width:38px; height:38px; padding:0; font-size:1.3rem; line-height:1; border-radius:50%; }
.slider { grid-column:1 / -1; width:100%; margin:0; accent-color:var(--accent); }
.hint { display:none; grid-column:1 / -1; font-size:.85rem; color:var(--bad); }
.row.invalid { background:color-mix(in srgb, var(--bad) 10%, transparent); outline:1.5px solid var(--bad); }
.row.invalid .hint { display:block; }
.row.invalid input[type=number] { border-color:var(--bad); }
.row.invalid .slider { accent-color:var(--bad); }
#guessMsg { color:var(--bad); font-size:.9rem; min-height:1.2em; }

/* vote */
label.opt { display:flex; align-items:center; gap:10px; padding:9px 4px; cursor:pointer; }
label.opt input { width:18px; height:18px; accent-color:var(--accent); }
#partyBox { padding-inline-start:26px; }
#partyErr { color:var(--bad); font-size:.9rem; margin:4px 0; }

/* save bar */
.savebar { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:8px; }
.savebar button { padding:13px 26px; font-size:1.05rem; }
#saveMsg { flex:1; min-width:12rem; font-size:.9rem; color:var(--muted); }
#saveMsg ul { margin:0; padding-inline-start:1.2rem; }
#saveMsg.ok { color:var(--ok); font-weight:700; }

/* results charts */
.res { display:grid; grid-template-columns:minmax(7rem,12rem) 1fr 3.2rem; align-items:center; gap:10px; padding:5px 0; font-size:.95rem; }
.res.has-mine { grid-template-columns:minmax(7rem,12rem) 1fr 3.2rem 3rem; }
.res .pn { overflow-wrap:anywhere; }
.res .track { height:12px; background:var(--accent-soft); border-radius:999px; overflow:hidden; }
.res .fill { height:100%; min-width:2px; background:var(--accent); border-radius:999px; }
.res .fill.v { background:var(--accent2); }
.res .num { text-align:left; font-variant-numeric:tabular-nums; font-weight:800; }
.res .mine { text-align:left; font-variant-numeric:tabular-nums; color:var(--muted); }
.res.head { color:var(--muted); font-size:.8rem; padding-bottom:0; }
.total-line { margin-top:8px; padding-top:8px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-weight:700; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.fact { background:var(--bg); border-radius:12px; padding:10px; text-align:center; }
.fact b { display:block; font-size:1.3rem; }
.fact span { font-size:.8rem; color:var(--muted); }
.empty { text-align:center; color:var(--muted); padding:18px 0; }
.cta { text-align:center; margin:22px 0; }
.notice { background:var(--accent-soft); border-radius:12px; padding:12px 14px; margin:16px 0 0; font-size:.92rem; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 8px; }
.tabs button { background:var(--card); color:var(--muted); border:1.5px solid var(--line); border-radius:999px; padding:7px 14px; font-size:.9rem; }
.tabs button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.tabs button span { opacity:.8; font-weight:600; }

footer { text-align:center; color:var(--muted); font-size:.85rem; margin-top:28px; }
footer a { color:var(--muted); }

@media (max-width:480px) {
  .hero { padding:22px 18px; } .hero h1 { font-size:1.6rem; }
  .res { grid-template-columns:7.5rem 1fr 3rem; font-size:.88rem; }
  .res.has-mine { grid-template-columns:7.5rem 1fr 3rem 2.6rem; }
}

/* display name */
#nick { width:100%; font:inherit; padding:11px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--bg); color:var(--text); }
#nick:focus { outline:2px solid var(--accent); border-color:transparent; }