:root{
  --bg:#070b12; --ink:#e9eef7; --mute:#9aa8bf; --acc:#ff6b81; --acc2:#4cc9f0; --ok:#4ade80; --warn:#fbbf24;
  --glass:rgba(14,20,32,.72); --line:rgba(255,255,255,.10);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);overflow:hidden}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
.glass{background:var(--glass);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.45)}

#topbar{position:fixed;top:0;left:0;right:0;height:58px;display:flex;align-items:center;gap:18px;padding:0 18px;z-index:10;
  background:linear-gradient(180deg,rgba(7,11,18,.92),rgba(7,11,18,.0));pointer-events:none}
#topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand b{font-size:15px;letter-spacing:.2px}
.brand small{color:var(--mute);font-size:11px;border-left:1px solid var(--line);padding-left:10px}
.logo{width:22px;height:22px;border-radius:50%;background:conic-gradient(from 20deg,#ff6b81,#ffb199,#4cc9f0,#ff6b81);box-shadow:0 0 18px rgba(255,107,129,.6)}
#nav{display:flex;gap:6px;margin:0 auto;overflow-x:auto;scrollbar-width:none}
#nav button{all:unset;cursor:pointer;font-size:12px;padding:7px 12px;border-radius:999px;color:var(--mute);border:1px solid transparent;white-space:nowrap;transition:.2s}
#nav button:hover{color:var(--ink);background:rgba(255,255,255,.06)}
#nav button.on{color:#fff;background:rgba(255,107,129,.18);border-color:rgba(255,107,129,.5)}
#nav button.done::after{content:" ✓";color:var(--ok)}
#score{font-size:12px;color:var(--mute);white-space:nowrap}
#score b{color:var(--warn)}

#panel{position:fixed;top:68px;right:14px;bottom:14px;width:min(440px,92vw);z-index:9;padding:20px 20px 24px;overflow-y:auto;scrollbar-width:thin;transition:transform .35s ease,opacity .35s}
#panel.hide{transform:translateX(110%);opacity:0;pointer-events:none}
#panelToggle{position:fixed;right:14px;bottom:14px;z-index:11;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--ink);font-size:18px;cursor:pointer;display:none}
@media (max-width:900px){#panelToggle{display:block}#panel{top:auto;height:52vh;width:auto;left:10px;right:10px;bottom:62px}#panel.hide{transform:translateY(120%)}.brand small{display:none}}

#panel h1{font-size:22px;margin:0 0 4px;line-height:1.2}
#panel h2{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;color:var(--acc2);margin:22px 0 8px}
#panel .qtag{display:inline-block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
#panel p,#panel li{font-size:13.5px;line-height:1.6;color:#cfd8e8}
#panel ul{padding-left:18px;margin:6px 0}
#panel b,#panel strong{color:#fff}
.sub{color:var(--mute);font-size:13px;margin:0 0 12px}

.row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.btn{all:unset;box-sizing:border-box;cursor:pointer;font-size:13px;padding:9px 14px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--ink);transition:.15s;text-align:center}
.btn:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.btn.on{background:rgba(255,107,129,.2);border-color:var(--acc);color:#fff}
.btn.primary{background:linear-gradient(135deg,#ff6b81,#ff8e72);border:none;color:#1a0b10;font-weight:700}
.btn.sm{font-size:12px;padding:6px 10px}
.btn.ok{background:rgba(74,222,128,.18);border-color:var(--ok)}
.btn.bad{background:rgba(255,80,80,.18);border-color:#ff5a5a}
.btn[disabled]{opacity:.4;pointer-events:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

.card{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0}
.card h3{margin:0 0 6px;font-size:14px}
.card p{margin:4px 0}
.chip{display:inline-block;font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(76,201,240,.15);color:#a8e6fb;margin:2px 4px 2px 0}
.chip.r{background:rgba(255,107,129,.16);color:#ffc1cb}
.chip.g{background:rgba(74,222,128,.15);color:#b8f3cf}
.chip.y{background:rgba(251,191,36,.15);color:#fde7a3}

.slider{width:100%;accent-color:var(--acc);margin:6px 0}
.sl-head{display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);margin:6px 0;cursor:pointer;font-size:13px}
.switch input{accent-color:var(--acc);width:18px;height:18px}
.switch small{display:block;color:var(--mute);font-size:11px}

.meter{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin:4px 0 10px}
.meter>i{display:block;height:100%;background:linear-gradient(90deg,#4cc9f0,#4ade80);border-radius:99px;transition:width .4s}
.meter.warn>i{background:linear-gradient(90deg,#ff6b81,#fbbf24)}
.kv{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mute);margin-top:8px}
.kv b{color:#fff}

.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:8px 0}
.phases button{all:unset;cursor:pointer;text-align:center;font-size:11px;padding:8px 2px;border-radius:8px;background:rgba(255,255,255,.05);border-bottom:3px solid transparent;color:var(--mute)}
.phases button.on{color:#fff;background:rgba(255,255,255,.1);border-color:var(--acc)}

.stepper{display:flex;gap:4px;margin:8px 0}
.stepper i{flex:1;height:5px;border-radius:9px;background:rgba(255,255,255,.12);cursor:pointer}
.stepper i.on{background:var(--acc)}
.stepper i.cur{background:var(--acc2)}

.quiz{margin-top:16px;border:1px dashed rgba(255,255,255,.2);border-radius:14px;padding:12px 14px}
.quiz .q{font-weight:600;margin:6px 0 10px;font-size:14px}
.quiz .opt{display:block;width:100%;margin:6px 0;text-align:left}
.quiz .fb{font-size:12.5px;margin-top:8px;color:var(--mute)}
canvas.chart{width:100%;height:130px;background:rgba(0,0,0,.25);border-radius:10px;border:1px solid var(--line)}

#labels{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.lbl{position:absolute;transform:translate(-50%,-100%);font-size:11.5px;padding:3px 8px;border-radius:8px;background:rgba(10,14,24,.82);border:1px solid rgba(255,255,255,.25);color:#fff;white-space:nowrap;pointer-events:auto;cursor:default;transition:opacity .2s}
.lbl::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:14px;background:rgba(255,255,255,.4)}
.lbl.click{cursor:pointer;border-color:var(--acc2)}
.lbl.click:hover{background:var(--acc2);color:#04121a}
.lbl.off{opacity:0;pointer-events:none}

#hint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:8;padding:8px 16px;font-size:12px;color:var(--mute);border-radius:99px;max-width:70vw;text-align:center}
#toast{position:fixed;left:50%;top:70px;transform:translate(-50%,-30px);opacity:0;z-index:20;padding:10px 18px;font-size:13px;transition:.35s;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
#loading{position:fixed;inset:0;z-index:50;background:#070b12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--mute);transition:opacity .6s}
#loading.gone{opacity:0;pointer-events:none}
.spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--acc);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.legend{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:12px;color:var(--mute);margin:6px 0}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:-1px}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
table.t td,table.t th{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.t th{color:var(--acc2);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.8px}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.badge{text-align:center;padding:10px 4px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:11px;color:var(--mute);filter:grayscale(1);opacity:.55}
.badge.got{filter:none;opacity:1;color:#fff;border-color:var(--warn);background:rgba(251,191,36,.1)}
.badge span{display:block;font-size:24px}