/* Moyako Training — app styles (standalone). Corrected live tokens per doc/DESIGN-RULES.md. */
:root{
  --bg-primary:#0F1729; --bg-surface:#1A2744; --bg-raised:#22304f;
  --action:#4CAF50; --accent:#FF9800; --danger:#EF5350; --info:#42A5F5; --cyan:#26C6DA;
  --text:#EAF0FA; --muted:#8FA1BE; --line:#2C3B5C; --radius:16px; --gap:16px;
  --band-warm:#8FA1BE; --band-train:#42A5F5; --band-fit:#26C6DA; --band-peak:#4CAF50;
}
*{box-sizing:border-box}
body[data-moyako-v2]{margin:0;background:var(--bg-primary);color:var(--text);
  font-family:-apple-system,Segoe UI,Roboto,system-ui,sans-serif;line-height:1.45}
.page{min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}

/* header + bottom nav */
.header{height:58px;display:flex;align-items:center;gap:12px;padding:0 18px;background:var(--bg-surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.header .logo{font-weight:800;font-size:17px}.header .logo b{color:var(--action)}
.header .spacer{flex:1}
.pill{background:var(--bg-raised);border:1px solid var(--line);border-radius:20px;padding:5px 12px;
  font-size:12px;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.pill b{color:var(--text)}
.bottom-nav{height:62px;display:flex;background:var(--bg-surface);border-top:1px solid var(--line);position:sticky;bottom:0}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:11px}
.bottom-nav a.active{color:var(--action)}.bottom-nav .ic{font-size:19px}
.body{flex:1;padding:20px;max-width:1120px;width:100%;margin:0 auto}

/* cards + type */
.moyako-card{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.moyako-card.raised{background:var(--bg-raised)}
.row{display:flex;gap:var(--gap)}.col{flex:1}.wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.muted{color:var(--muted)}.small{font-size:12px}.tiny{font-size:11px}.center{text-align:center}
.kpi{font-size:28px;font-weight:800;color:#fff}
.tag{display:inline-block;font-size:11px;padding:2px 9px;border-radius:12px;background:var(--bg-raised);border:1px solid var(--line);color:var(--muted)}
.tag.H{color:#ffb74d;border-color:#8a5a1c}.tag.F{color:#7ec8ff;border-color:#2b5a80}
h1,h2,h3{margin:0 0 .4em}.h-sec{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:6px 0 10px}

/* buttons */
.btn-primary,.btn-secondary,.btn-ghost{border:none;border-radius:12px;padding:12px 16px;font-weight:700;font-size:14px;cursor:pointer;display:inline-block;text-align:center}
.btn-primary{background:var(--action);color:#08210c}.btn-primary.block,.btn-secondary.block{width:100%}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost{background:var(--bg-raised);color:var(--text);border:1px solid var(--line);font-weight:600;font-size:13px;padding:8px 12px}
.btn-primary[disabled]{opacity:.5;cursor:not-allowed}

/* two-pane */
.two-pane{display:flex;gap:var(--gap);align-items:stretch}
.two-pane .pane{flex:1;display:flex;flex-direction:column;gap:var(--gap)}
.two-pane .pane.right{flex:0 0 380px}
@media (max-width:820px){ .two-pane{flex-direction:column} .two-pane .pane.right{flex:1} .grid2{grid-template-columns:1fr} }

/* MTS ring */
.ring{--pct:0;--band:var(--band-train);width:132px;height:132px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--band) calc(var(--pct)*1%),#20304d 0);display:flex;align-items:center;justify-content:center;position:relative}
.ring.sm{width:104px;height:104px}
.ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--bg-surface)}
.ring .val{position:relative;text-align:center}.ring .val b{font-size:30px;color:#fff}.ring.sm .val b{font-size:24px}
.ring .val span{display:block;font-size:11px;color:var(--muted)}

/* mastery bars */
.bar{margin:10px 0}.bar .lab{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.bar .lab a{color:var(--accent)}
.bar .track{height:9px;background:#20304d;border-radius:6px;overflow:hidden}
.bar .fill{height:100%;border-radius:6px;background:var(--action)}
.bar .fill.mid{background:var(--accent)}.bar .fill.low{background:var(--danger)}
.bar.locked{opacity:.5}

/* progress */
.qprog{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.qprog .track{flex:1;height:8px;background:#20304d;border-radius:6px;overflow:hidden}
.qprog .fill{height:100%;background:var(--action);border-radius:6px;transition:width .3s}

/* question player */
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.stem{font-size:25px;color:#fff;margin:10px 0 8px;min-height:40px}
.mascot{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#dbe6f7}.mascot .face{font-size:22px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg-raised);cursor:pointer;font-size:17px}
.opt:hover{border-color:#3d5a80}
.opt .k{width:26px;height:26px;border-radius:7px;background:#2c3b5c;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:0 0 auto}
.opt.correct{border-color:var(--action);background:#12331a}.opt.correct .k{background:var(--action);color:#08210c}
.opt.wrong{border-color:var(--danger);background:#331416}.opt.wrong .k{background:var(--danger);color:#2a0708}
.answer-box{font-size:30px;font-weight:700;color:#fff;background:var(--bg-primary);border:2px solid var(--line);border-radius:12px;padding:14px 18px;min-height:62px;display:flex;align-items:center;justify-content:flex-end}
.answer-box.ok{border-color:var(--action)}.answer-box.no{border-color:var(--danger)}
.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.keypad button{background:var(--bg-raised);border:1px solid var(--line);color:var(--text);border-radius:11px;padding:16px 0;font-size:18px;cursor:pointer}
.keypad button:hover{border-color:var(--action)}.keypad button.fn{color:var(--accent)}.keypad button.act{background:var(--action);color:#08210c;font-weight:700}.keypad button.del{color:var(--danger)}
.fb{border-radius:12px;padding:14px 16px;font-size:14px;display:none}.fb.show{display:block}
.fb.right{background:#12331a;border:1px solid var(--action)}.fb.wrongfb{background:#331416;border:1px solid var(--danger)}
.fb .em{color:var(--accent);font-weight:700}

/* exam-sim */
.exam-bar{display:flex;align-items:center;gap:12px;background:var(--bg-surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;flex-wrap:wrap}
.timer{font-variant-numeric:tabular-nums;font-weight:800;color:#fff}
.qgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.qgrid .n{aspect-ratio:1;border:1px solid var(--line);border-radius:7px;background:var(--bg-raised);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer}
.qgrid .n.done{background:#12331a;border-color:var(--action)}.qgrid .n.flag{background:#3a2a10;border-color:var(--accent)}.qgrid .n.cur{outline:2px solid var(--info)}

/* onboarding + settings */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{background:var(--bg-raised);border:none;color:var(--muted);padding:8px 14px;font-size:13px;cursor:pointer}
.seg button.on{background:var(--action);color:#08210c;font-weight:700}
.choice{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg-raised);cursor:pointer;margin:8px 0;display:flex;justify-content:space-between;align-items:center}
.choice.on{border-color:var(--action);background:#12331a}
.choice.soon{opacity:.5;cursor:not-allowed}
.setrow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:none}
.lock{color:var(--muted);font-size:12px}
.demo-note{max-width:1120px;margin:14px auto 0;color:var(--muted);font-size:12px}
.stat{display:flex;flex-direction:column;gap:2px}.stat .kpi{font-size:24px}