.quiz-hero { background: #08243b; color: #fff; border-top: 6px solid #f6c443; }
.quiz-hero h1 { color: #fff; }
.quiz-question { min-width: 0; border: 1px solid #ccd4dc; margin: 20px 0; padding: 16px; }
.quiz-question legend { font-size: 1.1rem; font-weight: bold; padding: 0 8px; max-width: 100%; }
.quiz-choice { display: flex; align-items: baseline; gap: 10px; padding: 12px 8px; cursor: pointer; }
.quiz-choice:hover, .quiz-choice:focus-within { background: #eef4f8; }
.quiz-choice input { flex-shrink: 0; }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.quiz-actions a, .quiz-actions button { white-space: normal; }
.quiz-result { border-left: 5px solid #002244; }
.quiz-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.quiz-picker select { padding: 10px; max-width: 100%; min-width: 0; }
.quiz-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.quiz-media-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.quiz-media-choice { align-items: center; border: 2px solid #d8e0e6; border-radius: 6px; flex-direction: column; text-align: center; }
.quiz-media-choice:has(input:checked) { border-color: #0878bd; background: #e8f5fc; }
.quiz-media-choice img { width: 150px; height: 108px; max-width: 100%; object-fit: contain; background: #f2f5f7; }
.quiz-media-choice span { font-weight: bold; }
@media (max-width: 700px) {
    .quiz-directory-grid { grid-template-columns: minmax(0, 1fr); }
    .quiz-picker label { flex-basis: 100%; }
    .quiz-picker select { width: 100%; }
    .quiz-media-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}