:root{
  --bg:#0f1923; --card:#1a2535; --card2:#1f2d40;
  --coral:#ff6b6b; --mint:#4ecdc4; --gold:#ffd93d;
  --text:#f0f4f8; --muted:#8a9bb0; --border:#2a3a50;
  --success:#6bcb77; --wrong:#ff6b6b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Nunito',system-ui,sans-serif;background:var(--bg);color:var(--text);
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;
  background-image:
    radial-gradient(ellipse at 20% 20%,rgba(78,205,196,.08) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 80%,rgba(255,107,107,.08) 0%,transparent 50%);
}
.app{width:100%;max-width:480px}
.screen{display:none;flex-direction:column;gap:16px;text-align:center}
.screen.active{display:flex}
.title{font-size:1.9rem;font-weight:800}
.subtitle{color:var(--muted);font-size:1.05rem}

/* student cards */
.student-cards{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.student-card{
  background:var(--card);border:2px solid var(--border);border-radius:20px;
  padding:26px 20px;cursor:pointer;transition:.15s;font-size:1.4rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:12px;min-height:84px;
}
.student-card:active{transform:scale(.97)}
.student-card .grade{font-size:.85rem;color:var(--muted);font-weight:600}
.student-card.minh{border-color:var(--mint)}
.student-card.mai{border-color:var(--coral)}

/* buttons */
.btn-primary{
  background:var(--mint);color:#08221f;border:none;border-radius:16px;
  padding:16px;font-size:1.15rem;font-weight:800;cursor:pointer;min-height:54px;
}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{
  background:transparent;color:var(--muted);border:none;padding:12px;
  font-size:1rem;cursor:pointer;font-weight:600;
}
.portal-link{color:var(--muted);text-decoration:none;font-size:.95rem;margin-top:6px}
.parent-link{opacity:.5;font-size:.85rem;margin-top:18px}
.drill-clock{display:flex;justify-content:space-between;align-items:center;margin:4px 0 8px;font-size:.95rem}
.clock{color:#aab4c0;font-variant-numeric:tabular-nums}
.pace{font-size:.85rem;font-weight:600}
.pace.good{color:#5fd97a}
.pace.warn{color:#ff6b6b}
.pace-banner{padding:10px 14px;border-radius:10px;font-weight:700;margin-bottom:10px;text-align:center}
.pace-banner.good{background:rgba(95,217,122,.15);color:#5fd97a}
.pace-banner.warn{background:rgba(255,107,107,.15);color:#ff6b6b}
.budget-text{color:#8b97a5;font-size:.82rem;flex:1;text-align:center}
.mute-btn{background:transparent;border:none;font-size:1.1rem;cursor:pointer;padding:2px 6px}
.levelup{text-align:center;color:#ffd93d;font-weight:800;font-size:1.1rem;margin:6px 0}
.levelup.pop{animation:hkpop .5s ease}
@keyframes hkpop{0%{transform:scale(.6);opacity:0}50%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.parent-label{display:block;color:var(--muted);font-size:.9rem;margin:10px 0 4px}
.hidden{display:none!important}

/* PIN */
.pin-input,.num-input{
  background:var(--card2);border:2px solid var(--border);border-radius:16px;
  color:var(--text);font-size:2rem;text-align:center;padding:16px;width:100%;
  letter-spacing:.4em;font-weight:800;
}
.num-input{letter-spacing:normal}
.num-input:focus,.pin-input:focus{outline:none;border-color:var(--mint)}
.pin-error{color:var(--wrong);min-height:1.2em;font-weight:700}

/* drill */
.drill-top{display:flex;align-items:center;gap:10px}
.who{font-weight:800;white-space:nowrap}
.counter{font-size:.9rem;color:var(--muted);white-space:nowrap}
.progress{flex:1;height:10px;background:var(--card2);border-radius:99px;overflow:hidden}
.progress-bar{height:100%;width:0;background:var(--mint);transition:width .25s}
.skill-label{color:var(--gold);font-weight:700;font-size:.95rem}
.prompt{
  background:var(--card);border:2px solid var(--border);border-radius:20px;
  padding:22px 18px;font-size:1.25rem;font-weight:700;line-height:1.5;min-height:80px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;
  text-align:left;
}
.prompt > div{width:100%}                       /* each \n line is its own stacked row */
.answer-area{display:none;flex-direction:column;gap:12px}
.answer-area.active{display:flex}
.choice-area{display:none}
.choice-area.active{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice-btn{
  background:var(--card2);border:2px solid var(--border);border-radius:16px;
  color:var(--text);padding:20px;font-size:1.2rem;font-weight:800;cursor:pointer;min-height:64px;
}
.choice-btn:active{transform:scale(.97)}
.feedback{min-height:2.4em;font-weight:700;font-size:1.05rem}
.feedback.ok{color:var(--success)}
.feedback.no{color:var(--wrong)}
.feedback .explain{display:block;color:var(--muted);font-weight:600;font-size:.95rem;margin-top:6px}

/* math + figure */
.figure{display:flex;justify-content:center;margin-bottom:4px}
.figure.hidden{display:none}
.prompt .katex{font-size:1.05em;vertical-align:baseline}  /* match prose size */
.feedback .explain .katex{font-size:1em}
.katex{color:inherit}                          /* inherit theme text color on dark bg */

/* summary */
.summary{
  background:var(--card);border:2px solid var(--border);border-radius:20px;
  padding:20px;text-align:left;display:flex;flex-direction:column;gap:10px;
}
.summary .big{font-size:2rem;font-weight:800;text-align:center;color:var(--mint)}
.summary .row{display:flex;justify-content:space-between;color:var(--muted)}
.summary .row b{color:var(--text)}
/* tutor report (screenshot target) */
.summary .report-head{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);
  font-weight:800;color:var(--gold);font-size:1rem}
.summary .report-meta{color:var(--muted);font-size:.85rem;margin-bottom:4px}
.summary .report-row{display:flex;justify-content:space-between;gap:10px;font-size:.95rem}
.summary .rs-skill{color:var(--text);font-weight:600}
.summary .rs-score{color:var(--mint);font-weight:700;white-space:nowrap}