:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --text:#16181d;
  --muted:#69707d;
  --border:#e3e6eb;
  --accent:#22262d;
  --danger:#b42318;
  --ok:#147a4b;
  --warn:#a15c00;
  --radius:18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
button,input,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.container{width:min(720px,100%);margin:0 auto;padding:24px 16px 60px}
.topbar{
  position:sticky;top:0;z-index:20;
  min-height:64px;padding:10px 14px;
  display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;
  background:rgba(255,255,255,.96);border-bottom:1px solid var(--border)
}
.icon-btn,.link-btn{border:0;background:transparent;padding:10px}
.icon-btn{font-size:24px}
.topbar-title{display:flex;flex-direction:column;min-width:0}
.topbar-title small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.login-card,.result-card,.panel,.hero{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;
}
.login-card{margin:8vh auto 0;max-width:460px}
.brand-mark{
  width:58px;height:58px;border-radius:16px;background:var(--accent);color:white;
  display:grid;place-items:center;font-weight:800;font-size:21px
}
h1,h2,h3,p{margin-top:0}
h1{margin:16px 0 4px}
h2{margin-bottom:6px}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:6px}
.muted{color:var(--muted)}
label{display:block;font-size:13px;font-weight:700;margin:16px 0 7px}
input,select{
  width:100%;border:1px solid var(--border);background:white;border-radius:12px;padding:13px 14px;outline:none
}
input:focus,select:focus{border-color:#9298a3}
.primary,.secondary,.danger-outline{
  border-radius:12px;padding:13px 16px;font-weight:750;border:1px solid transparent
}
.primary{background:var(--accent);color:white}
.secondary{background:white;color:var(--text);border-color:var(--border)}
.danger-outline{background:white;color:var(--danger);border-color:#f2b8b5}
.full{width:100%;margin-top:12px}
.message{min-height:20px;margin-top:12px;font-size:14px;color:var(--danger)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.section-head .secondary{white-space:nowrap}
.card-list{display:grid;gap:10px}
.item-card{
  width:100%;text-align:left;background:white;border:1px solid var(--border);
  border-radius:15px;padding:16px;display:flex;justify-content:space-between;align-items:center;gap:12px
}
.item-card:hover{border-color:#bdc2ca}
.item-main{min-width:0}
.item-main strong{display:block}
.item-main small{display:block;color:var(--muted);margin-top:4px}
.chevron{font-size:22px;color:#959ba5}
.status{font-size:12px;font-weight:800;border-radius:999px;padding:6px 9px;white-space:nowrap}
.status.pending{background:#f0f1f3;color:#565d68}
.status.done{background:#e7f5ed;color:var(--ok)}
.status.review{background:#fff1db;color:var(--warn)}
.student-header{background:white;border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:14px}
.evaluation-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.timer{font-size:34px;font-weight:900;font-variant-numeric:tabular-nums}
.recording-row{display:flex;align-items:center;gap:8px;margin:12px 0 16px;color:var(--muted)}
.record-dot{width:10px;height:10px;border-radius:50%;background:#c9cdd3}
.record-dot.on{background:#d92d20;box-shadow:0 0 0 5px rgba(217,45,32,.10)}
.instruction-box{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:14px;font-size:14px;line-height:1.45}
.words-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.word-btn{
  border:1px solid var(--border);background:white;border-radius:12px;padding:12px 10px;
  display:flex;gap:8px;align-items:center;text-align:left
}
.word-btn .n{font-size:11px;color:var(--muted);min-width:22px}
.word-btn.error{background:#fff0ef;border-color:#e78f89;color:#8d1b13}
.panel{margin-top:16px}
.result-preview,.result-details{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.result-preview div,.result-details div{
  background:#f7f8fa;border-radius:12px;padding:12px;text-align:center
}
.result-preview span,.result-details span{display:block;font-size:11px;color:var(--muted)}
.result-preview strong,.result-details strong{font-size:20px}
.big-result{text-align:center;padding:26px 0 14px}
.big-result strong{display:block;font-size:64px;line-height:1}
.big-result span{color:var(--muted)}
.badge{width:max-content;margin:4px auto 18px;border-radius:999px;padding:9px 13px;background:#eef0f3;font-weight:850}
.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat-card{background:white;border:1px solid var(--border);border-radius:15px;padding:16px}
.stat-card span,.stat-card small{display:block;color:var(--muted);font-size:12px}
.stat-card strong{display:block;font-size:28px;margin:4px 0}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:#17191d;color:white;padding:11px 16px;border-radius:12px;z-index:50;
  max-width:calc(100% - 30px);text-align:center
}
.loading{
  position:fixed;inset:0;background:rgba(255,255,255,.75);z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px
}
.spinner{width:34px;height:34px;border:4px solid #ddd;border-top-color:#222;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:620px){
  .words-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .summary-grid{grid-template-columns:repeat(3,1fr)}
}