:root{--panel:rgba(15,26,36,.9);--ink:#E9F1F5;--mute:#8FA4B2;--hr:#3EE07A;--sp:#3CC8F0;--bp:#FF6A5C;--rr:#F5D547;--good:#3EE07A;--bad:#FF5C5C;--warn:#FFB454;--line:rgba(233,241,245,.14)}
[hidden]{display:none!important}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b1218;color:var(--ink);font:16px/1.35 'Barlow Semi Condensed',system-ui,sans-serif;overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:10px;padding:8px 12px;min-height:40px}
button:hover{background:rgba(255,255,255,.14)}button:focus-visible{outline:3px solid var(--sp);outline-offset:2px}
#app,#gl{position:fixed;inset:0;width:100%;height:100%}#gl{display:block;touch-action:none}
#vignette{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity 1.5s;background:radial-gradient(ellipse at center,transparent 50%,rgba(180,40,20,.55) 100%)}
#vignette.pulse{animation:pulse 2s ease-in-out infinite}@keyframes pulse{50%{filter:brightness(1.6)}}
#hud{position:fixed;top:0;left:0;right:0;display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:calc(8px + env(safe-area-inset-top)) 10px 0;pointer-events:none}
#hud>*{pointer-events:auto;background:var(--panel);border-radius:12px;padding:6px 8px}
.clockbox{display:flex;gap:8px;align-items:center}#clock{font-size:24px;font-variant-numeric:tabular-nums;min-width:62px}
#vit{display:flex;gap:12px;font-variant-numeric:tabular-nums;align-items:baseline;flex-wrap:wrap;justify-content:center}#vit span{white-space:nowrap}#vit b{font-size:22px}#vit small{color:var(--mute);font-size:12px;margin-right:2px}
.hbtns{display:flex;gap:6px}
#hot{position:fixed;inset:0;pointer-events:none}
.hs{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:22px;background:rgba(15,26,36,.78);border:1px solid rgba(255,255,255,.35);font-size:14px;min-height:36px;white-space:nowrap}
.hs i{width:26px;height:26px;border-radius:50%;background:#fff;color:#0F1A24;font-style:normal;font-weight:700;display:grid;place-items:center;font-size:14px}
.hs.glow{animation:glow 1.2s ease-in-out 3}@keyframes glow{50%{box-shadow:0 0 0 8px rgba(60,200,240,.45)}}
#notes{position:fixed;left:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:min(300px,44vw);max-height:42vh;display:flex;flex-direction:column;background:var(--panel);border-radius:12px;overflow:hidden}
#notesHead{border:0;border-radius:0;text-align:left;font-weight:700;background:transparent}#noteCount{color:var(--mute);font-weight:400}
#noteList{list-style:none;margin:0;padding:0 10px 8px;overflow:auto;font-size:14px}#noteList li{padding:4px 0;border-top:1px solid var(--line)}#noteList li small{color:var(--mute);margin-right:6px}
#notes.closed #noteList{display:none}
#views{position:fixed;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;gap:6px;background:var(--panel);padding:6px;border-radius:12px}
#views button.on{background:var(--sp);color:#0F1A24;border-color:var(--sp)}
#bubble{position:fixed;left:50%;top:84px;transform:translateX(-50%);max-width:min(520px,90vw);background:#fff;color:#14202a;padding:10px 14px;border-radius:14px;font-size:18px;box-shadow:0 6px 20px rgba(0,0,0,.4)}
#bubble:before{content:'🗨 ';}
#toast{position:fixed;left:50%;top:140px;transform:translateX(-50%);background:var(--panel);padding:8px 14px;border-radius:10px;opacity:0;transition:opacity .3s;pointer-events:none;max-width:90vw;text-align:center}#toast.on{opacity:1}#toast.bad{border:2px solid var(--bad);color:#ffd6d6;font-weight:700}
#sheet{position:fixed;left:50%;bottom:calc(70px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(420px,94vw);background:var(--panel);border-radius:14px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#sheetTitle{font-weight:700;margin:0 4px 6px;display:flex;justify-content:space-between}#sheetBtns{display:grid;gap:6px}
#sheetBtns button{text-align:left;display:flex;justify-content:space-between;gap:8px}#sheetBtns button small{color:var(--mute)}
#ov{position:fixed;inset:0;display:none;place-items:center;background:rgba(6,12,18,.55);backdrop-filter:blur(3px);padding:16px;overflow:auto}#ov.on{display:grid}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto}
.card h1{margin:0 0 4px;font-size:34px}.card h2{margin:0 0 8px}.card p{margin:6px 0}.muted{color:var(--mute)}
.cases{display:grid;gap:10px;margin:12px 0}.cases button{text-align:left;padding:12px}.cases button[disabled]{opacity:.45}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.primary{background:var(--sp);color:#0F1A24;border-color:var(--sp);font-weight:700}
.pick{display:grid;gap:6px;margin:8px 0}.pick button.sel{background:rgba(60,200,240,.25);border-color:var(--sp)}
.bars{display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:center;margin:8px 0}.bar{height:10px;background:var(--line);border-radius:5px;overflow:hidden}.bar i{display:block;height:100%;background:var(--sp)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:14px}.cols ol{margin:0;padding-left:18px}.cols li{margin:3px 0}
.k-ok{color:var(--good)}.k-unsafe{color:var(--bad)}.k-late{color:var(--warn)}.k-extra{color:var(--mute)}
.rule{font-weight:700;font-size:18px;border-left:4px solid var(--sp);padding-left:10px;margin:10px 0}
canvas.spark{width:100%;height:90px;background:rgba(0,0,0,.25);border-radius:8px}
.tabs{display:flex;gap:6px;margin-bottom:8px}.tabs button.on{background:var(--sp);color:#0F1A24}
.loadbar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:12px}.loadbar i{display:block;height:100%;width:0;background:var(--hr)}
@media (max-width:640px){#vit{gap:6px}#vit b{font-size:17px}#vit small{font-size:10px}#clock{font-size:19px;min-width:48px}#hud{gap:4px;padding-left:6px;padding-right:6px}#hud>*{padding:4px 5px}
 button{padding:6px 8px;min-height:36px}.hbtns button{padding:6px}#waitBtn{padding:6px}.cols{grid-template-columns:1fr}.hs{font-size:12px}#notes{width:52vw}#views{padding:4px;gap:3px}#views button{padding:4px 7px}}
@media (prefers-reduced-motion:reduce){#vignette.pulse{animation:none}.hs.glow{animation:none;box-shadow:0 0 0 4px rgba(60,200,240,.45)}}
#vit .hx small{color:#cfe3ee;font-size:12px}
@media (max-width:640px){#bubble{top:128px;font-size:16px}#vit .hx small{font-size:10px}}