.quiz          { width: 100%; height: 100%;
                 display: flex; flex-direction: column;
                 gap: 16px; justify-content: center; }
.quiz-question { margin: 0; font-size: 15px; font-weight: 400;
                 color: var(--color-foreground); line-height: 1.4; }
.quiz-options  { list-style: none; padding: 0; margin: 0;
                 display: flex; flex-direction: column; gap: 10px; }
.quiz-option   { background: var(--color-accent); border-radius: var(--radius-md);
                 padding: 12px; display: flex; align-items: center; gap: 12px;
                 cursor: pointer; user-select: none; }
.quiz-option.graded { cursor: default; }
.opt-leading   { width: 14px; height: 14px; flex-shrink: 0;
                 display: flex; align-items: center; justify-content: center; }
.opt-leading .ring { width: 11.5px; height: 11.5px; border-radius: 50%;
                     border: 1.5px solid var(--color-muted-foreground);
                     background: transparent; }
.opt-leading svg { width: 14px; height: 14px; }
.opt-label     { font-size: 14px; color: var(--color-foreground); line-height: 1.4; }

.quiz-option.selected .opt-leading .ring { background: var(--color-foreground);
                                           border-color: var(--color-foreground); }
.quiz-option.correct   .opt-leading,
.quiz-option.correct   .opt-label       { color: #27AE52; }
.quiz-option.correct   .opt-leading svg { stroke: #27AE52; }
.quiz-option.incorrect .opt-leading,
.quiz-option.incorrect .opt-label       { color: #EE4444; }
.quiz-option.incorrect .opt-leading svg { stroke: #EE4444; }

.quiz-footer            { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.quiz-footer .quiz-check { margin-left: auto; }
.quiz-status            { background: var(--color-accent); border-radius: 999px;
                          padding: 6px 12px; display: inline-flex; align-items: center;
                          gap: 6px; font-size: 13px; font-weight: 500; }
.quiz-status[hidden]    { display: none; }
.quiz-status svg        { width: 14px; height: 14px; }
.quiz-status.correct    { color: #27AE52; }
.quiz-status.incorrect  { color: #EE4444; }
.quiz-check             { background: var(--color-foreground); color: var(--color-background);
                          border: none; border-radius: 999px; padding: 8px 18px;
                          font-family: inherit; font-size: 13px; font-weight: 500;
                          cursor: pointer; }
.quiz-check:disabled    { background: var(--color-muted); color: var(--color-muted-foreground);
                          cursor: not-allowed; }