#quiz-view { max-width: 936px; margin: 0 auto; }
.quiz-shell { width: 520px; max-width: 100%; margin: 0 auto; padding: 20px; border: 1px solid #c6e0f1; border-radius: 8px; background: #eff9ff; }
.quiz-card { padding: 20px 22px; border: 1px solid var(--border); border-radius: 7px; background: white; }
#quiz-progress { margin: 0 0 10px; text-align: center; font-size: 20px; font-weight: 700; }
.quiz-progress-track { height: 12px; overflow: hidden; border-radius: 999px; background: #dce5ed; }
#quiz-progress-bar { display: block; height: 100%; border-radius: inherit; background: var(--navy); transition: width 160ms ease; }
#quiz-question { margin: 40px 0 28px; text-align: center; font-size: 30px; line-height: 1.45; overflow-wrap: anywhere; }
.quiz-choices { display: grid; gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.quiz-choice { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 7px; background: white; font-size: 18px; cursor: pointer; }
.quiz-choice:has(input:checked) { border-color: #9ec9e6; background: #e7f5ff; }
.quiz-choice:has(input:not(:disabled)):hover { border-color: #608bac; background: #f5faff; }
.quiz-choice:has(input:focus-visible) { outline: 3px solid #376c9f; outline-offset: 3px; }
.quiz-choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--navy); }
.quiz-choice input:focus-visible { outline: 0; }
.quiz-choice:has(input:disabled) { cursor: default; }
.quiz-answer-actions { display: grid; gap: 9px; margin-top: 32px; }
.quiz-button { display: grid; place-items: center; min-height: 52px; padding: 10px 18px; border: 1px solid #9ec9e6; border-radius: 7px; background: white; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.quiz-primary { border-color: var(--navy); background: var(--navy); color: white; }
.quiz-button:not(:disabled):hover { border-color: #608bac; background: #f5faff; }
.quiz-primary:not(:disabled):hover { background: #184570; color: white; }
.quiz-button:disabled { border-color: #d6dee5; background: #e8edf1; color: #7b8792; cursor: default; }
.quiz-feedback { margin-top: 18px; padding: 16px; border: 1px solid #b8ddf3; border-radius: 7px; background: #eaf7ff; }
.quiz-feedback p { margin: 0; }
.quiz-feedback p + p { margin-top: 10px; }
.quiz-judgement { font-weight: 700; }
.quiz-judgement--correct { color: #216342; }
.quiz-judgement--incorrect { color: #9a3543; }
.quiz-correct-answer { font-size: 19px; font-weight: 700; }
.quiz-example { display: grid; gap: 2px; }
.quiz-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
@media (max-width: 600px) {
  .quiz-shell { padding: 12px; }
  .quiz-card { padding: 18px 12px; }
  #quiz-progress { font-size: 18px; }
  #quiz-question { margin: 28px 0 22px; font-size: 24px; }
  .quiz-choice { min-height: 48px; padding: 8px 12px; font-size: 16px; }
  .quiz-answer-actions { margin-top: 24px; }
  .quiz-navigation { gap: 10px; margin-top: 12px; }
  .quiz-button { min-height: 48px; padding: 8px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #quiz-progress-bar { transition: none; }
}