/* ─────────────────────────  TOKENS  ───────────────────────── */
:root{
  --bg:#EEF3F7; --surface:#FFFFFF; --surface-2:#F5F9FC; --surface-3:#E9F0F6;
  --line:#D2DEE9; --line-strong:#B2C3D2;
  --text:#152230; --text-dim:#576B7E; --text-faint:#8194A6;
  --accent:#0F7488; --accent-soft:rgba(15,116,136,.10); --accent-line:rgba(15,116,136,.32);
  --gold:#8A6414; --gold-soft:rgba(138,100,20,.10); --gold-line:rgba(138,100,20,.30);
  --good:#1B7A57; --good-soft:rgba(27,122,87,.10);
  --warn:#A2551F; --warn-soft:rgba(162,85,31,.10);
  --bad:#9E2E2A;  --bad-soft:rgba(158,46,42,.10);
  --shadow:0 1px 2px rgba(21,34,48,.06), 0 10px 28px rgba(21,34,48,.07);
  --f-display:Georgia,"Iowan Old Style","Times New Roman",serif;
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --r:7px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0C141D; --surface:#141F2B; --surface-2:#1A2734; --surface-3:#22323F;
    --line:#233444; --line-strong:#374E63;
    --text:#D4E1ED; --text-dim:#8DA4B8; --text-faint:#62798E;
    --accent:#57C9DE; --accent-soft:rgba(87,201,222,.12); --accent-line:rgba(87,201,222,.34);
    --gold:#E7C27B; --gold-soft:rgba(231,194,123,.12); --gold-line:rgba(231,194,123,.32);
    --good:#5FC698; --good-soft:rgba(95,198,152,.13);
    --warn:#E09257; --warn-soft:rgba(224,146,87,.13);
    --bad:#E4736E;  --bad-soft:rgba(228,115,110,.13);
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.38);
  }
}
:root[data-theme="dark"]{
  --bg:#0C141D; --surface:#141F2B; --surface-2:#1A2734; --surface-3:#22323F;
  --line:#233444; --line-strong:#374E63;
  --text:#D4E1ED; --text-dim:#8DA4B8; --text-faint:#62798E;
  --accent:#57C9DE; --accent-soft:rgba(87,201,222,.12); --accent-line:rgba(87,201,222,.34);
  --gold:#E7C27B; --gold-soft:rgba(231,194,123,.12); --gold-line:rgba(231,194,123,.32);
  --good:#5FC698; --good-soft:rgba(95,198,152,.13);
  --warn:#E09257; --warn-soft:rgba(224,146,87,.13);
  --bad:#E4736E;  --bad-soft:rgba(228,115,110,.13);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.38);
}
:root[data-theme="light"]{
  --bg:#EEF3F7; --surface:#FFFFFF; --surface-2:#F5F9FC; --surface-3:#E9F0F6;
  --line:#D2DEE9; --line-strong:#B2C3D2;
  --text:#152230; --text-dim:#576B7E; --text-faint:#8194A6;
  --accent:#0F7488; --accent-soft:rgba(15,116,136,.10); --accent-line:rgba(15,116,136,.32);
  --gold:#8A6414; --gold-soft:rgba(138,100,20,.10); --gold-line:rgba(138,100,20,.30);
  --good:#1B7A57; --good-soft:rgba(27,122,87,.10);
  --warn:#A2551F; --warn-soft:rgba(162,85,31,.10);
  --bad:#9E2E2A;  --bad-soft:rgba(158,46,42,.10);
  --shadow:0 1px 2px rgba(21,34,48,.06), 0 10px 28px rgba(21,34,48,.07);
}

/* ─────────────────────────  BASE  ───────────────────────── */
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:15px; line-height:1.55;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:var(--f-display); font-weight:600; text-wrap:balance; margin:0; letter-spacing:-.01em}
h1{font-size:1.5rem; line-height:1.2}
h2{font-size:1.18rem; line-height:1.25}
h3{font-size:1rem}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer; border:none; background:none}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-faint);
}
.dim{color:var(--text-dim)}
.faint{color:var(--text-faint)}
.hidden{display:none !important}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}

/* ─────────────────────────  SHARED CONTROLS  ───────────────────────── */
.btn{
  background:var(--accent); color:var(--bg); border-radius:5px;
  padding:10px 14px; font-weight:600; font-size:.9rem;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:filter .15s;
}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line-strong)}
.btn.ghost:hover{background:var(--surface-2); filter:none}
.btn.gold{background:var(--gold); color:var(--bg)}
.btn.sm{padding:5px 10px; font-size:.8rem}
.btn:disabled{opacity:.45; cursor:not-allowed}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint)}
.input{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; padding:9px 11px; width:100%;
}
.input:focus{border-color:var(--accent-line); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.err{color:var(--bad); font-size:.82rem; min-height:1.1em}
.hint{
  font-size:.78rem; color:var(--text-faint); background:var(--surface-2);
  border:1px dashed var(--line); border-radius:5px; padding:8px 10px;
}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:13px 15px; border-bottom:1px solid var(--line)}
.card-h .spacer{margin-left:auto}
.card-b{padding:15px}
.row{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.divider{height:1px; background:var(--line); border:none; margin:0}
.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase;
  padding:2px 7px; border-radius:20px; border:1px solid var(--line); color:var(--text-dim); white-space:nowrap;
}
.pill.good{color:var(--good); background:var(--good-soft); border-color:transparent}
.pill.warn{color:var(--warn); background:var(--warn-soft); border-color:transparent}
.pill.bad{color:var(--bad); background:var(--bad-soft); border-color:transparent}
.pill.acc{color:var(--accent); background:var(--accent-soft); border-color:transparent}
.pill.gold{color:var(--gold); background:var(--gold-soft); border-color:transparent}
.tag{
  font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.06em;
  padding:1px 5px; border-radius:3px; border:1px solid var(--line-strong); color:var(--text-dim);
}
.avatar{
  width:21px; height:21px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
  font-family:var(--f-mono); font-size:.6rem; font-weight:700;
}
.crest{
  width:29px; height:29px; border-radius:50%; flex:none;
  border:1px solid var(--gold-line); background:var(--gold-soft);
  display:grid; place-items:center; font-size:14px;
}
.icon-btn{
  width:31px; height:31px; border-radius:5px; border:1px solid var(--line);
  background:var(--surface-2); display:grid; place-items:center; font-size:.85rem;
}
.icon-btn:hover{border-color:var(--line-strong)}
.tw{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.85rem}
th,td{padding:8px 10px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--line)}
th{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); font-weight:500; position:sticky; top:0; background:var(--surface); z-index:1;
}
th.s{cursor:pointer; user-select:none}
th.s:hover{color:var(--text)}
th.s.act{color:var(--accent)}
td.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right}
th.num{text-align:right}
tbody tr:hover{background:var(--surface-2)}
tbody tr.me{background:var(--accent-soft)}
tbody tr.me td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.empty{padding:26px 15px; text-align:center; color:var(--text-faint); font-size:.88rem}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{padding:4px 10px; border-radius:20px; border:1px solid var(--line); background:var(--surface-2); font-size:.78rem; color:var(--text-dim)}
.chip.on{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); font-weight:600}

/* ─────────────────────────  PUBLIC LANDING  ───────────────────────── */
#public{display:none}
#public.on{display:block}
.pub-bar{
  position:sticky; top:0; z-index:30; background:var(--surface);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; padding:10px 14px;
}
.pub-wrap{max-width:940px; margin:0 auto; padding:0 14px 60px}
.hero{padding:38px 0 26px; display:flex; flex-direction:column; gap:14px; max-width:62ch}
.hero h1{font-size:2.15rem; line-height:1.1}
@media (min-width:700px){.hero h1{font-size:2.7rem} .hero{padding:56px 0 34px}}
.hero p{font-size:1.02rem; color:var(--text-dim)}
.pub-sec{padding-top:30px; display:flex; flex-direction:column; gap:13px}
.steps{display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px}
.step-n{
  font-family:var(--f-mono); font-size:.72rem; color:var(--accent);
  border:1px solid var(--accent-line); background:var(--accent-soft);
  width:23px; height:23px; border-radius:50%; display:grid; place-items:center; margin-bottom:9px;
}
.gcards{display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.gcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:15px; text-align:left; display:flex; flex-direction:column; gap:6px; height:100%;
}
.gcard:hover{border-color:var(--accent-line); background:var(--accent-soft)}

/* ─────────────────────────  SIGN-IN MODAL  ───────────────────────── */
#gate{
  position:fixed; inset:0; z-index:100; background:rgba(8,14,20,.62);
  display:flex; align-items:center; justify-content:center; padding:18px; overflow-y:auto;
}
#gate.hidden{display:none !important}
.gate-card{
  width:100%; max-width:380px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:22px; display:flex; flex-direction:column; gap:15px;
}
.gate-step{display:none; flex-direction:column; gap:14px}
.gate-step.on{display:flex}
.pick-list{display:flex; flex-direction:column; gap:7px; max-height:46vh; overflow-y:auto}
.pick{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:9px 11px;
}
.pick:hover{border-color:var(--accent-line); background:var(--accent-soft)}

/* ─────────────────────────  APP SHELL  ───────────────────────── */
#app{display:none}
#app.on{display:block}
.topbar{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; padding:10px 14px;
}
.brand{display:flex; align-items:center; gap:9px; min-width:0}
.brand-txt{min-width:0}
.brand-txt strong{font-family:var(--f-display); font-size:.95rem; display:block; line-height:1.15}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:8px}
.whoami{
  display:flex; align-items:center; gap:7px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:20px; padding:4px 10px 4px 6px;
  font-size:.8rem; max-width:200px;
}
.layout{display:flex; max-width:1180px; margin:0 auto; gap:22px; padding:0 14px}
.rail{display:none}
main{flex:1; min-width:0; padding:18px 0 84px}
.tabs{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:var(--surface); border-top:1px solid var(--line);
  display:flex; padding:5px 4px calc(5px + env(safe-area-inset-bottom));
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 1px; border-radius:6px; color:var(--text-faint);
  font-size:.58rem; letter-spacing:.03em; text-transform:uppercase; font-family:var(--f-mono);
}
.tab .ti{font-size:1.05rem; line-height:1}
.tab.on{color:var(--accent); background:var(--accent-soft)}
@media (min-width:860px){
  .tabs{display:none}
  .rail{display:block; width:198px; flex:none; position:sticky; top:64px; align-self:flex-start; padding:18px 0}
  .rail-item{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    padding:8px 11px; border-radius:6px; color:var(--text-dim); font-size:.88rem; border:1px solid transparent;
  }
  .rail-item:hover{background:var(--surface-2); color:var(--text)}
  .rail-item.on{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); font-weight:600}
  .rail-item .ti{font-size:1rem; width:18px; text-align:center}
  main{padding:22px 0 60px}
}
.screen{display:none; flex-direction:column; gap:16px}
.screen.on{display:flex}
.section-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.section-head .spacer{margin-left:auto}

/* ─────────────────────────  BLOCKS  ───────────────────────── */
.meters{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:13px}
.meter .mv{font-family:var(--f-mono); font-size:1.24rem; font-variant-numeric:tabular-nums; line-height:1.2}
.bar{height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden; margin-top:7px}
.bar span{display:block; height:100%; background:var(--accent); border-radius:3px}
.bar.g span{background:var(--good)} .bar.w span{background:var(--warn)} .bar.gd span{background:var(--gold)}

.ann{display:flex; gap:11px; padding:12px 15px; border-bottom:1px solid var(--line)}
.ann:last-child{border-bottom:none}
.ann-mark{width:3px; border-radius:2px; background:var(--line-strong); flex:none}
.ann.pinned .ann-mark{background:var(--gold)}

.ev{display:flex; gap:12px; align-items:flex-start; padding:12px 15px; border-bottom:1px solid var(--line); width:100%; text-align:left}
.ev:last-child{border-bottom:none}
.ev:hover{background:var(--surface-2)}
.ev-when{flex:none; width:74px; text-align:center; border:1px solid var(--line); border-radius:5px; padding:5px 3px; background:var(--surface-2)}
.ev-when .d{font-family:var(--f-mono); font-size:1.05rem; line-height:1.1}
.ev-when .m{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint)}
.cd{font-family:var(--f-mono); font-size:.78rem; color:var(--accent); font-variant-numeric:tabular-nums}
.cd.live{color:var(--good)}

.sp-row{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line)}
.sp-row:last-child{border-bottom:none}
.dhm{display:flex; gap:5px}
.dhm .u{position:relative}
.dhm input{
  width:62px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; padding:7px 20px 7px 8px;
  font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right;
}
.dhm input:focus{border-color:var(--accent-line); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.dhm .u::after{
  content:attr(data-u); position:absolute; right:7px; top:50%; transform:translateY(-50%);
  font-family:var(--f-mono); font-size:.68rem; color:var(--text-faint); pointer-events:none;
}

.titles{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:12px}
.title-card{border-color:var(--gold-line)}
.title-card .card-h{background:var(--gold-soft)}
.holder{display:flex; align-items:center; gap:10px; padding:11px 15px; border-bottom:1px solid var(--line)}
.q-item{display:flex; align-items:center; gap:9px; padding:9px 15px; border-bottom:1px solid var(--line)}
.q-item:last-child{border-bottom:none}
.q-n{width:19px; height:19px; flex:none; border-radius:50%; background:var(--surface-3); display:grid; place-items:center; font-family:var(--f-mono); font-size:.66rem; color:var(--text-dim)}

.rally{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.rally-h{display:flex; align-items:center; gap:10px; padding:10px 13px; background:var(--surface-2); border-bottom:1px solid var(--line)}
.slot{display:flex; align-items:center; gap:9px; padding:7px 13px; border-bottom:1px solid var(--line); font-size:.86rem}
.slot:last-child{border-bottom:none}
.slot.empty{color:var(--text-faint); font-style:italic}

.guide-body{display:flex; flex-direction:column; gap:12px; font-size:.94rem; line-height:1.68; max-width:68ch}
.guide-body h3{font-family:var(--f-display); margin-top:6px; font-size:1.06rem}
.guide-body ul{margin:0; padding-left:19px; display:flex; flex-direction:column; gap:5px}
.guide-body .callout{border-left:3px solid var(--accent); background:var(--accent-soft); padding:10px 13px; border-radius:0 5px 5px 0}

#toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(20px);
  bottom:78px; z-index:110; background:var(--text); color:var(--bg);
  padding:9px 15px; border-radius:20px; font-size:.85rem; font-weight:500;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
@media (min-width:860px){#toast{bottom:26px}}