.quiz-page { min-height: 100vh; }
.quiz-back { color: var(--text-muted); font-size: .92rem; transition: color var(--transition); }
.quiz-back:hover { color: var(--accent); }
.quiz-main { max-width: 820px; padding-top: 64px; padding-bottom: 80px; }
.quiz-heading { margin-bottom: 34px; }
.quiz-heading .section-tag { color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
.quiz-heading h1 { margin: 10px 0 12px; font: 700 clamp(2rem, 5vw, 3.2rem)/1.15 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.quiz-heading > p:not(.section-tag) { color: var(--text-muted); }
.quiz-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; color: var(--text-muted); font-size: .85rem; }
.student-field, .question-card { margin-bottom: 18px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.student-field label { display: block; margin-bottom: 8px; font-weight: 600; }
.student-field input { width: 100%; padding: 12px 14px; color: var(--text); font: inherit; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 9px; }
.student-field input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.question-card { min-width: 0; }
.question-card legend { width: 100%; margin-bottom: 16px; font-weight: 650; line-height: 1.5; }
.question-number { display: inline-grid; width: 32px; height: 32px; margin-right: 8px; place-items: center; color: var(--accent); background: rgba(52,211,153,.1); border-radius: 9px; font-size: .78rem; }
.answer { display: flex; align-items: center; gap: 11px; margin-top: 9px; padding: 11px 13px; color: var(--text-muted); background: var(--bg-alt); border: 1px solid transparent; border-radius: 9px; cursor: pointer; transition: border-color var(--transition), color var(--transition); }
.answer:hover { color: var(--text); border-color: var(--border); }
.answer input { accent-color: var(--accent); }
.answer.correct-answer { color: var(--accent); border-color: rgba(52,211,153,.55); background: rgba(52,211,153,.08); }
.answer.wrong-answer { color: #fb7185; border-color: rgba(251,113,133,.65); background: rgba(251,113,133,.1); }
.answer-feedback { min-height: 0; margin-top: 8px; color: var(--text-muted); font-size: .85rem; }
.answer-feedback:empty { display: none; }
.quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.quiz-error { flex-basis: 100%; color: #fb7185; }
.quiz-result { margin-top: 30px; padding: 28px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius-lg); }
.quiz-result h2 { margin: 4px 0; font: 700 2rem "Space Grotesk", sans-serif; }
.quiz-result > p:not(.section-tag) { color: var(--text-muted); }
.score-track { height: 10px; margin: 20px 0 12px; overflow: hidden; background: var(--bg-alt); border-radius: 99px; }
.score-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; transition: width .5s ease; }
.correction-note { font-size: .88rem; }
.gradebook { margin-top: 54px; padding-top: 32px; border-top: 1px solid var(--border); }
.gradebook h2 { margin: 5px 0 8px; font: 700 1.7rem "Space Grotesk", sans-serif; }
.gradebook-intro, .gradebook-empty { color: var(--text-muted); }
.gradebook-empty { margin-top: 18px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.gradebook-table-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.gradebook-table { width: 100%; border-collapse: collapse; background: var(--surface); text-align: left; }
.gradebook-table th, .gradebook-table td { padding: 13px 15px; border-bottom: 1px solid var(--border); vertical-align: top; }
.gradebook-table thead { color: var(--accent); font-size: .82rem; }
.gradebook-table tbody th { font-weight: 600; }
.gradebook-table tbody td:last-child { min-width: 240px; color: var(--text-muted); font-size: .85rem; }
.gradebook-delete { padding: 8px 11px; color: #fb7185; font: inherit; font-size: .85rem; background: transparent; border: 1px solid rgba(251,113,133,.5); border-radius: 8px; cursor: pointer; }
.gradebook-delete:hover { color: var(--bg); background: #fb7185; }
.gradebook-delete:focus-visible { outline: 2px solid #fb7185; outline-offset: 2px; }
.gradebook-table tbody tr:last-child th, .gradebook-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
  .quiz-main { padding-top: 38px; }
  .student-field, .question-card, .quiz-result { padding: 18px; }
  .quiz-actions .btn { width: 100%; }
}