:root {
  --navy:#16324f;
  --blue:#0f7b78;
  --blue-dark:#0b5e5b;
  --sky:#eaf8f7;
  --ink:#182230;
  --muted:#667085;
  --line:#d8e2ec;
  --white:#fff;
  --green:#16803c;
  --red:#c93636;
}

*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#f3f7fb;line-height:1.55}
.topbar{background:linear-gradient(120deg,#102a43,var(--navy));color:white;padding:26px max(24px,calc((100% - 980px)/2));display:flex;justify-content:space-between;align-items:center;gap:25px;box-shadow:0 4px 18px #0b1f331f}
.topbar h1{margin:3px 0;font-size:clamp(1.45rem,4vw,2rem)}
.topbar p{margin:0;color:#d9e7f5}
.eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.14em;color:#8fc6ff}
.timer-box{min-width:132px;padding:12px 18px;border:1px solid #ffffff3b;border-radius:13px;text-align:center;background:#ffffff12}
.timer-box small{display:block;font-size:.67rem;letter-spacing:.12em;color:#b9d3ea}
.timer-box strong{font-size:1.65rem;font-variant-numeric:tabular-nums}
.timer-box.danger strong{color:#ffb4b4}
.shell{max-width:980px;margin:34px auto;padding:0 20px}
.panel{background:var(--white);border:1px solid #e1e9f0;border-radius:18px;padding:clamp(22px,5vw,42px);box-shadow:0 12px 38px #17324d12}
.welcome{text-align:center;padding-top:50px;padding-bottom:50px}
.welcome h2,.result h2{font-size:2rem;margin:14px 0 7px;color:var(--navy)}
.welcome>p{max-width:720px;margin:0 auto;color:var(--muted)}
.level-pill,.type-badge{display:inline-block;border-radius:999px;font-size:.74rem;font-weight:800;letter-spacing:.08em}
.level-pill{padding:7px 12px;background:#e6f0ff;color:#1d5bbf}
.stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:550px;margin:30px auto;gap:12px}
.stats div{padding:18px;background:#f8fafc;border:1px solid var(--line);border-radius:12px}
.stats strong{display:block;font-size:1.55rem;color:var(--blue)}
.stats span{font-size:.82rem;color:var(--muted)}
button{border:0;font:inherit;font-weight:750;border-radius:10px;padding:12px 20px;cursor:pointer;transition:.18s}
button:disabled{opacity:.45;cursor:not-allowed}
.primary{background:var(--blue);color:white;box-shadow:0 5px 14px #0f7b7826}
.primary:hover:not(:disabled){background:var(--blue-dark);transform:translateY(-1px)}
.secondary{background:white;color:var(--navy);border:1px solid var(--line)}
.secondary:hover:not(:disabled){background:#f8fafc}
.hidden{display:none!important}
.progress-wrap{margin:0 2px 18px}
.progress-info{display:flex;justify-content:space-between;gap:20px;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:7px}
.progress-track{height:7px;background:#dce5ed;border-radius:99px;overflow:hidden}
#progressBar{width:0;height:100%;background:linear-gradient(90deg,#2ca6a2,var(--blue));transition:width .3s}
.task-card{min-height:480px}
.type-badge{padding:6px 10px;background:var(--sky);color:#2457a7;margin-bottom:10px}
.task-card h2{margin:5px 0 8px;color:var(--navy);font-size:1.45rem}
.instruction{color:var(--muted);margin:0 0 22px}
.prompt-box{padding:22px;border:1px solid var(--line);border-left:4px solid var(--blue);background:#fbfdff;border-radius:10px;font-size:1.05rem;margin:18px 0}
.prep-note{display:inline-flex;gap:7px;align-items:center;color:#825d05;background:#fff8dd;padding:7px 10px;border-radius:8px;font-size:.82rem;font-weight:700}
.recorder{margin-top:22px;padding:16px;background:#f7f9fc;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.record-btn{background:#dc3545;color:white}
.record-btn.recording{background:#891d29;animation:pulse 1.2s infinite}
.record-status{font-size:.86rem;color:var(--muted)}
audio{height:38px;max-width:100%}
@keyframes pulse{50%{box-shadow:0 0 0 6px #dc354523}}
.play-btn{background:#e8f1ff;color:#1759b5}
.answer-input,textarea{display:block;width:100%;border:1px solid #bac8d6;border-radius:10px;padding:13px 14px;font:inherit;color:var(--ink);background:white;outline:none}
.answer-input:focus,textarea:focus{border-color:#4382e5;box-shadow:0 0 0 3px #0f7b7816}
textarea{min-height:190px;resize:vertical;line-height:1.55}
.word-count{text-align:right;font-size:.8rem;color:var(--muted);margin-top:5px}
.visual{margin:18px 0;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff}
.bars{height:190px;display:flex;align-items:flex-end;justify-content:center;gap:30px;border-bottom:2px solid #afbdca;padding-top:12px}
.bar{width:70px;background:linear-gradient(#45b8b4,#0f7b78);border-radius:7px 7px 0 0;position:relative}
.bar::before{content:attr(data-value);position:absolute;top:-27px;width:100%;text-align:center;font-weight:800;color:var(--navy)}
.bar::after{content:attr(data-label);position:absolute;bottom:-29px;width:100%;text-align:center;font-size:.75rem;color:var(--muted)}
.chart-caption{text-align:center;font-size:.85rem;color:var(--muted);margin-top:38px}
.donut-wrap{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap}
.donut{width:180px;height:180px;border-radius:50%;background:conic-gradient(#0f7b78 0 45%,#66c7c4 45% 75%,#bde4e2 75%);display:grid;place-items:center}
.donut::after{content:"Students";width:92px;height:92px;border-radius:50%;background:white;display:grid;place-items:center;font-weight:750;color:var(--navy);font-size:.82rem}
.legend div{margin:7px 0;font-size:.88rem}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}
.line-chart{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;height:170px;border-left:2px solid #aebcc9;border-bottom:2px solid #aebcc9;padding:0 12px;gap:12px}
.point{background:#0f7b78;border-radius:6px 6px 0 0;position:relative}.point span{position:absolute;top:-25px;width:100%;text-align:center;font-size:.75rem;font-weight:700}
.navigation{display:flex;justify-content:space-between;margin-top:18px}
.result{text-align:center}
.score-ring{width:150px;height:150px;margin:25px auto;border-radius:50%;border:12px solid #d8f0ef;display:flex;flex-direction:column;justify-content:center;color:var(--blue)}
.score-ring strong{font-size:2rem}.score-ring span{font-size:.75rem;color:var(--muted)}
.result-details{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:520px;margin:20px auto 28px;text-align:left}
.result-details div{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;font-size:.85rem}
.result-details strong{float:right;color:var(--blue)}
footer{text-align:center;padding:20px;color:#8492a0;font-size:.78rem}
@media(max-width:600px){.topbar{align-items:flex-start;padding:20px}.topbar p{display:none}.timer-box{min-width:103px;padding:9px}.timer-box strong{font-size:1.3rem}.shell{margin:20px auto;padding:0 12px}.panel{border-radius:13px}.stats{gap:6px}.stats div{padding:12px 5px}.bars{gap:12px}.bar{width:50px}.result-details{grid-template-columns:1fr}}