*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#050608;color:#eee;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.theme-dark{--bg:#0d0f14;--s1:#161a22;--s2:#1f2530;--tx:#eef0f4;--mu:#8d95a6;--ac:#e8b84a;--acx:#15110a;--ok:#3ecf8e;--bad:#ef5b5b;--info:#5aa9ff;--bd:#2a303c;--sh:0 8px 30px #0008}
.theme-light{--bg:#f3f4f8;--s1:#fff;--s2:#eceff4;--tx:#141821;--mu:#667085;--ac:#c28a0a;--acx:#fff;--ok:#16a06a;--bad:#d93f3f;--info:#2b7de0;--bd:#dde1e8;--sh:0 8px 24px #1a233322}

/* ---------- top bar (prototype only) ---------- */
#topbar{height:46px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#0b0c10;border-bottom:1px solid #222733;overflow-x:auto;white-space:nowrap}
#topbar .tag{font-size:12px;color:#8d95a6;margin-right:auto;padding-right:8px}
#topbar .tag b{color:#e8b84a}
.seg{display:flex;background:#161a22;border-radius:10px;padding:3px;gap:2px}
.seg button{padding:6px 12px;border-radius:8px;font-size:13px;color:#aab1c0}
.seg button.on{background:#e8b84a;color:#15110a;font-weight:700}
#stage{height:calc(100% - 46px);display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#1a1f2b,#050608 70%);overflow:hidden}

/* ---------- phone frame ---------- */
.phone{container-type:inline-size;width:var(--pw,390px);height:min(100%,840px);max-height:100%;border:9px solid #000;border-radius:38px;overflow:hidden;box-shadow:0 0 0 2px #2a303c,0 30px 80px #000c;position:relative;background:#000}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);color:var(--tx);font-size:calc(clamp(13px,4.1cqw,17px)*var(--fz,1));overflow:hidden}
@media(max-width:520px){#stage{align-items:stretch}.phone{width:100%!important;height:100%;border:0;border-radius:0;box-shadow:none}.hide-m{display:none!important}}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:1.1em 1.1em 1.4em;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:4px}.scroll::-webkit-scrollbar-thumb{background:var(--bd);border-radius:4px}

/* ---------- shared bits ---------- */
h1{font-size:1.6em;line-height:1.2}h2{font-size:1.2em}h3{font-size:1em}
.mu{color:var(--mu)}.sm{font-size:.82em}.c{text-align:center}.b{font-weight:700}
.card{background:var(--s1);border:1px solid var(--bd);border-radius:1em;padding:1em;margin-bottom:.8em}
.row{display:flex;align-items:center;gap:.7em}.grow{flex:1;min-width:0}.wrap{flex-wrap:wrap}
.btn{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;padding:.85em 1em;border-radius:.9em;background:var(--ac);color:var(--acx);font-weight:700;font-size:1em;transition:.15s}
.btn:active{transform:scale(.97)}.btn.sec{background:var(--s2);color:var(--tx);border:1px solid var(--bd)}.btn.bad{background:var(--bad);color:#fff}.btn.ok{background:var(--ok);color:#06150e}
.btn.sm{padding:.5em .8em;width:auto;font-size:.88em;border-radius:.7em}.btn[disabled]{opacity:.4;pointer-events:none}.btn.ghost{background:none;color:var(--mu);font-weight:500}
.pill{display:inline-block;padding:.15em .6em;border-radius:99px;font-size:.78em;font-weight:700;background:var(--s2);color:var(--mu)}
.pill.ok{background:#3ecf8e22;color:var(--ok)}.pill.bad{background:#ef5b5b22;color:var(--bad)}.pill.ac{background:#e8b84a22;color:var(--ac)}.pill.info{background:#5aa9ff22;color:var(--info)}
.field{margin-bottom:.8em}.field label{display:block;font-size:.8em;color:var(--mu);margin-bottom:.3em}
input[type=text],input[type=tel],input[type=password],input[type=email],input[type=number],input[type=date],select,textarea{width:100%;padding:.75em .85em;border-radius:.8em;border:1px solid var(--bd);background:var(--s2);color:var(--tx);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--ac)}
textarea{resize:vertical;min-height:4.5em}
.bar{height:.5em;border-radius:99px;background:var(--s2);overflow:hidden}.bar>i{display:block;height:100%;background:var(--ac);border-radius:99px;transition:width .4s}
.pw{text-align:center;font-size:.75em;color:var(--mu);padding:.8em 0 .2em}.pw b{color:var(--ac)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111;color:#fff;border:1px solid #333;padding:.7em 1.1em;border-radius:99px;font-size:14px;z-index:99;box-shadow:0 6px 24px #000a;max-width:90vw;text-align:center}

/* ---------- student ---------- */
.tabbar{display:flex;background:var(--s1);border-top:1px solid var(--bd);padding:.35em .3em calc(.35em + env(safe-area-inset-bottom))}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1em;padding:.4em 0;color:var(--mu);font-size:.72em;border-radius:.7em}
.tabbar button span{font-size:1.5em;line-height:1}.tabbar button.on{color:var(--ac);font-weight:700}
.hero{min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:1em;padding:1.4em}
.logo{width:4.2em;height:4.2em;border-radius:1.2em;background:linear-gradient(135deg,var(--ac),#f6dc8c);display:flex;align-items:center;justify-content:center;font-size:2em;box-shadow:0 8px 24px #e8b84a44}
.feat{list-style:none;display:grid;gap:.5em;font-size:.92em}.feat li{display:flex;gap:.6em;align-items:center;color:var(--mu)}
.banner{border-radius:1em;padding:.9em 1em;margin-bottom:.8em;display:flex;gap:.8em;align-items:center}
.banner.ac{background:linear-gradient(135deg,#e8b84a2a,#e8b84a0f);border:1px solid #e8b84a55}
.banner.info{background:#5aa9ff1f;border:1px solid #5aa9ff55}
.banner.bad{background:#ef5b5b1f;border:1px solid #ef5b5b55}
.banner.ok{background:#3ecf8e1f;border:1px solid #3ecf8e55}
.stat{flex:1;background:var(--s1);border:1px solid var(--bd);border-radius:1em;padding:.7em .5em;text-align:center}.stat b{display:block;font-size:1.25em}.stat span{font-size:.72em;color:var(--mu)}
.ring{--p:0;width:4.2em;height:4.2em;border-radius:50%;background:conic-gradient(var(--ac) calc(var(--p)*1%),var(--s2) 0);display:grid;place-items:center;flex:none}
.ring i{width:3.3em;height:3.3em;border-radius:50%;background:var(--s1);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.85em}
.lvl{display:flex;align-items:center;gap:.8em;padding:.9em;border-radius:1em;background:var(--s1);border:1px solid var(--bd);margin-bottom:.6em;width:100%;text-align:left}
.lvl.lock{opacity:.55}.lvl .em{font-size:1.8em}
.unit{display:flex;align-items:center;gap:.8em;padding:.8em;border-radius:.9em;background:var(--s2);margin:.4em 0;width:100%;text-align:left}
.back{display:flex;align-items:center;gap:.4em;color:var(--mu);margin-bottom:.8em;font-size:.95em;padding:.2em 0}
.runner-top{display:flex;align-items:center;gap:.8em;padding:.9em 1.1em .3em}
.xbtn{width:2.2em;height:2.2em;border-radius:50%;background:var(--s2);font-size:1em;color:var(--mu)}
.wcard{text-align:center;padding:1.4em 1em;background:var(--s1);border:1px solid var(--bd);border-radius:1.2em}
.wcard .big{font-size:2.1em;font-weight:800;color:var(--ac);word-break:break-word}
.sent{font-size:1.35em;line-height:1.5;font-weight:600;text-align:center}
.sent span{padding:0 .1em;border-radius:.3em}.sent .ok{color:var(--ok)}.sent .near{color:var(--ac)}.sent .bad{color:var(--bad);text-decoration:underline wavy}
.opts{display:grid;gap:.55em;margin-top:.9em}
.opt{padding:.85em 1em;border-radius:.9em;border:1.5px solid var(--bd);background:var(--s1);text-align:left;font-size:1em;transition:.12s}
.opt:active{transform:scale(.98)}.opt.right{border-color:var(--ok);background:#3ecf8e22}.opt.wrong{border-color:var(--bad);background:#ef5b5b22}
.fillbox{font-size:1.25em;line-height:1.7;text-align:center;font-weight:600}
.fillbox u{display:inline-block;min-width:3.2em;border-bottom:3px solid var(--ac);text-decoration:none;color:var(--ac);padding:0 .2em}
.mic{width:5em;height:5em;border-radius:50%;background:var(--ac);color:var(--acx);font-size:2em;display:grid;place-items:center;margin:0 auto;box-shadow:0 8px 24px #e8b84a44;transition:.15s}
.mic.live{animation:pulse 1s infinite;background:var(--bad);color:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 #ef5b5b88}100%{box-shadow:0 0 0 1.2em #ef5b5b00}}
.fb{padding:.8em 1em;border-radius:1em;margin-top:.9em;font-weight:600}.fb.ok{background:#3ecf8e22;color:var(--ok)}.fb.bad{background:#ef5b5b22;color:var(--bad)}.fb.near{background:#e8b84a22;color:var(--ac)}
.runner-foot{padding:.8em 1.1em calc(.9em + env(safe-area-inset-bottom));border-top:1px solid var(--bd);background:var(--s1)}
.stars{font-size:2.6em;letter-spacing:.1em}
.seg2{display:flex;background:var(--s2);border-radius:.8em;padding:.2em;gap:.15em}.seg2 button{flex:1;padding:.55em .3em;border-radius:.6em;font-size:.88em;color:var(--mu)}.seg2 button.on{background:var(--ac);color:var(--acx);font-weight:700}
.sw{width:2.8em;height:1.6em;border-radius:99px;background:var(--s2);border:1px solid var(--bd);position:relative;flex:none}.sw i{position:absolute;top:.15em;left:.15em;width:1.1em;height:1.1em;border-radius:50%;background:var(--mu);transition:.2s}.sw.on{background:var(--ac)}.sw.on i{left:1.4em;background:var(--acx)}
.acc{border:1px dashed var(--bd);border-radius:.9em;padding:.8em;margin:.5em 0;background:var(--s2)}
.demo{display:flex;gap:.5em;margin-top:.8em}.demo button{flex:1}
.chipw{padding:.5em .9em;border-radius:99px;background:var(--s2);border:1px solid var(--bd);font-weight:600}.chipw:active{background:var(--ac);color:var(--acx)}
.dgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:.4em;margin:.8em 0}.dbtn{aspect-ratio:1;border-radius:.7em;background:var(--s2);border:1.5px solid var(--bd);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9em}.dbtn.done{background:#3ecf8e22;border-color:var(--ok);color:var(--ok)}.dbtn.cur{border-color:var(--ac);color:var(--ac)}.dbtn.lk{opacity:.5}.dbtn.sel{outline:2px solid var(--tx)}
.ico{width:1.15em;height:1.15em;vertical-align:-.2em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;flex:none}
.lvb{display:inline-grid;place-items:center;min-width:2.6em;height:2.6em;border-radius:.8em;background:#e8b84a22;color:var(--ac);font-weight:800;font-size:.8em}
.logo{color:var(--acx)}
.overlay{position:absolute;inset:0;background:var(--bg);z-index:20;display:flex;flex-direction:column;justify-content:center;padding:1.6em;gap:1em;text-align:center}

/* ---------- admin ---------- */
#admin{font-size:calc(15px*var(--fz,1));height:100%;background:var(--bg);color:var(--tx);display:grid;grid-template-columns:15.5em 1fr;overflow:hidden}
.side{background:var(--s1);border-right:1px solid var(--bd);display:flex;flex-direction:column;padding:1em .7em;gap:.2em;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:.6em;padding:.3em .6em 1em;font-weight:800}
.side .brand .logo{width:2.2em;height:2.2em;border-radius:.7em;font-size:1em;box-shadow:none}
.side button.nav{display:flex;align-items:center;gap:.7em;padding:.7em .8em;border-radius:.8em;color:var(--mu);text-align:left;width:100%}
.side button.nav:hover{background:var(--s2)}.side button.nav.on{background:#e8b84a22;color:var(--ac);font-weight:700}
.side .badge{margin-left:auto;background:var(--bad);color:#fff;border-radius:99px;font-size:.75em;padding:.05em .55em}
.main{display:flex;flex-direction:column;min-width:0;height:100%}
.ahead{display:flex;align-items:center;gap:.8em;padding:.8em 1.3em;border-bottom:1px solid var(--bd);background:var(--s1);flex-wrap:wrap}
.ahead h2{margin-right:auto;font-size:1.25em}
.abody{flex:1;overflow:auto;padding:1.3em}
.ib{padding:.45em .75em;border-radius:.7em;background:var(--s2);border:1px solid var(--bd);font-size:.9em}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5em,1fr));gap:.8em;margin-bottom:1em}
.kpi{background:var(--s1);border:1px solid var(--bd);border-radius:1em;padding:1em}.kpi span{font-size:.8em;color:var(--mu)}.kpi b{display:block;font-size:1.7em;margin:.15em 0}.kpi small{color:var(--mu);font-size:.78em}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(19em,1fr));gap:.9em;margin-bottom:1em}
.panel{background:var(--s1);border:1px solid var(--bd);border-radius:1em;padding:1.1em}.panel h3{margin-bottom:.8em}
.chart{display:flex;align-items:flex-end;gap:.35em;height:9em}.chart div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:.7em;color:var(--mu);gap:.25em}.chart i{display:block;width:100%;background:linear-gradient(var(--ac),#e8b84a66);border-radius:.3em .3em 0 0;min-height:2px}
.hb{display:grid;grid-template-columns:8.5em 1fr 2.5em;align-items:center;gap:.6em;margin:.45em 0;font-size:.88em}
.tw{overflow-x:auto;border:1px solid var(--bd);border-radius:1em;background:var(--s1)}
table{width:100%;border-collapse:collapse;font-size:.92em}th{text-align:left;color:var(--mu);font-weight:600;padding:.75em .8em;border-bottom:1px solid var(--bd);white-space:nowrap;font-size:.82em;text-transform:uppercase;letter-spacing:.03em}
td{padding:.7em .8em;border-bottom:1px solid var(--bd);vertical-align:middle}tr:last-child td{border:0}tbody tr.click{cursor:pointer}tbody tr.click:hover{background:var(--s2)}
.filters{display:flex;gap:.6em;flex-wrap:wrap;margin-bottom:.9em}.filters input,.filters select{width:auto;min-width:9em;flex:1}
.modalbg{position:fixed;inset:0;background:#000a;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:4vh 3vw;overflow:auto}
.modal{background:var(--bg);color:var(--tx);border:1px solid var(--bd);border-radius:1.2em;width:min(46em,100%);padding:1.3em;box-shadow:var(--sh);font-size:calc(15px*var(--afz,1))}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(9em,1fr));gap:.6em;margin:.8em 0}.kv div{background:var(--s1);border:1px solid var(--bd);border-radius:.8em;padding:.6em .8em}.kv small{display:block;color:var(--mu);font-size:.75em}
.acts{display:flex;gap:.5em;flex-wrap:wrap;margin:.8em 0}
.alogin{max-width:22em;margin:auto;padding:2em 1.2em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
@media(max-width:800px){#admin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.main{height:auto;min-height:0}.side{flex-direction:row;flex-shrink:0;min-height:3.6em;border-right:0;border-bottom:1px solid var(--bd);padding:.5em;overflow-x:auto;gap:.3em}.side .brand,.side .pw{display:none}.side button.nav{width:auto;white-space:nowrap;padding:.55em .8em}.abody{padding:.9em}.hb{grid-template-columns:6em 1fr 2.2em}}
#stage{height:100%}
body{overscroll-behavior:none}
.splash{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;height:100%;text-align:center;padding:2em}

.pwwrap{position:relative}.pwwrap input{padding-right:3em}.eye{position:absolute;right:.35em;top:50%;transform:translateY(-50%);color:var(--mu);padding:.5em;display:flex;align-items:center;font-size:1.1em}.eye:hover{color:var(--tx)}