:root{--bg:#0f1720;--card:#18222e;--fg:#e8eef4;--mut:#8aa0b4;--ok:#3ecf8e;--bad:#ef6b6b;--acc:#4da3ff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,sans-serif}
main,#login{max-width:520px;margin:0 auto;padding:16px}.hidden{display:none!important}
header{display:flex;justify-content:space-between;align-items:center}h1{font-size:22px;margin:8px 0}h2{font-size:15px;margin:0 0 8px;color:var(--mut);font-weight:600}
.pill{background:var(--card);padding:4px 10px;border-radius:99px;font-size:13px;color:var(--acc)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}.stat{background:var(--card);border-radius:12px;padding:12px;text-align:center}
.stat b{display:block;font-size:26px}.stat small{color:var(--mut)}
.bar{height:8px;background:var(--card);border-radius:99px;overflow:hidden;margin-bottom:12px}#bar{height:100%;width:0;background:var(--ok);transition:width .4s}
.card{background:var(--card);border-radius:14px;padding:14px;margin:12px 0}
button,input,select{font:inherit;border-radius:10px;border:1px solid #2c3b4b;background:#0f1720;color:var(--fg);padding:10px 12px}
button.primary{background:var(--acc);border-color:var(--acc);color:#04121f;font-weight:700}button.danger{background:var(--bad);border-color:var(--bad);color:#200}
button.ghost{background:transparent;margin:6px 0}button.big{width:100%;padding:16px;font-size:18px;margin-top:8px}
input{width:100%;margin:6px 0}label{display:block;margin-top:8px;color:var(--mut)}label input,label select{width:auto}
.topic{font-weight:600;margin-bottom:6px}.status{color:var(--mut);min-height:20px;margin-top:8px}.timer{font-size:28px;text-align:center;font-variant-numeric:tabular-nums}
.live{max-height:180px;overflow:auto;font-size:14px;color:var(--mut);margin-top:8px}.live .u{color:var(--fg)}.hint{font-size:12px;color:var(--mut)}
.err{color:var(--bad)}.list{padding-left:18px;margin:0}.list li{margin:6px 0}.list s{color:var(--bad)}.list em{color:var(--ok);font-style:normal}
svg text{fill:var(--mut);font-size:9px}svg rect{fill:var(--acc)}svg line{stroke:#2c3b4b}svg .goal{stroke:var(--ok);stroke-dasharray:3 3}
/* UX pass */
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-tap-highlight-color:transparent}
.login{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px}
.login-card{width:100%;max-width:400px;padding:22px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}.brand h1{margin:0}.brand small{color:var(--mut)}
.logo{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--acc);color:#04121f;font-weight:800;font-size:16px}
header{margin-bottom:4px}.hdr-right{display:flex;align-items:center;gap:8px}
button.icon{width:44px;height:44px;padding:0;font-size:20px;background:var(--card)}
button,input,select{min-height:44px}
button.small{min-height:44px;padding:0 14px;margin:0}
.pwrow{display:flex;gap:8px;align-items:center}.pwrow input{margin:6px 0}
label{font-size:14px}
.login-card .big{margin-top:14px}
.warn{background:#3a2a12;border:1px solid #8a6a1f;color:#ffd98a;border-radius:12px;padding:12px;margin:10px 0}
.warn button{margin-top:8px;min-height:40px}
.hero{text-align:center;padding:20px 14px}
.hero .topic{font-size:18px;margin-bottom:10px}
.tips{list-style:none;margin:14px 0 0;padding:0;color:var(--mut);font-size:13px;text-align:left}.tips li{margin:4px 0}
.tips li::before{content:"• "}
.stats{margin-top:4px}
details.card summary{cursor:pointer;font-weight:600;color:var(--fg);min-height:28px;display:flex;align-items:center}
details.card[open] summary{margin-bottom:8px}
details.card h2{margin-top:14px}
.orb{width:84px;height:84px;margin:10px auto;display:grid;place-items:center}
.orb i{width:36px;height:36px;border-radius:50%;background:var(--ok);transition:transform .08s,opacity .2s;opacity:.85;box-shadow:0 0 0 0 rgba(62,207,142,.5)}
.orb.talk i{background:var(--acc)}
.status.busy::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;border:2px solid var(--mut);border-top-color:transparent;border-radius:50%;vertical-align:-2px;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
button:disabled{opacity:.5}
button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.live{text-align:left;max-height:34vh}
.live div{margin:4px 0}
@media (prefers-reduced-motion:reduce){.status.busy::before{animation:none}}
@media (min-width:760px){main{max-width:640px}}

.brand h1,header h1{white-space:nowrap}
.pill{white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
#errors,#vocab{list-style:none;padding:0}
.err-item{display:flex;gap:12px;align-items:flex-start}
.err-item input{width:22px;height:22px;min-height:0;margin:2px 0 0;flex:none}
.err-item small{color:var(--mut)}.cnt{color:var(--mut);font-size:13px}

.ph{display:flex;justify-content:space-between;align-items:center}.ph h2{margin:0}
.pill.ok{color:var(--ok)}
h3{font-size:14px;margin:14px 0 6px;color:var(--fg)}
.reading{font-size:17px;line-height:1.55;background:#0f1720;border-radius:10px;padding:12px;margin:6px 0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}.row .primary{font-weight:700}
.plist{list-style:none;padding:0;margin:0}.plist li{background:#0f1720;border-radius:10px;padding:10px 12px;margin:8px 0}
.rres{color:var(--mut);font-size:13px}.okc{color:var(--ok)}
.presult{min-height:24px;margin:8px 0}

.ptopic{font-size:1.15rem;font-weight:700;margin:.2rem 0 0;line-height:1.3}
.pq{margin:.5rem 0;padding-left:1.1rem;color:var(--muted,#9fb0c3);font-size:.92rem}.pq li{margin:.2rem 0}
.steps{margin:.6rem 0;padding-left:1.1rem;font-size:.88rem;color:var(--muted,#9fb0c3)}.steps li{margin:.2rem 0}
.weak{margin:.6rem 0;font-size:.85rem;color:var(--muted,#9fb0c3)}
.wchip{display:inline-block;margin:.15rem .25rem .15rem 0;padding:.1rem .5rem;border-radius:999px;background:#3a1f26;color:#ff9aa8}
.rvcard{background:#0f1923;border-radius:12px;padding:.9rem;margin-top:.5rem}
.rvterm{font-size:1.3rem;font-weight:700;margin-bottom:.4rem}.rvmeaning{margin-bottom:.6rem;color:#cfe3f7}