/* Quiz and practice share the theme palette in both light and dark mode. */
.sp-quiz-article { --sp-quiz-radius: 20px; }
.sp-quiz-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border: 1px solid var(--sp-border);
    border-radius: 14px;
    background: var(--sp-surface);
}
.sp-quiz { margin: 1.25rem 0; scroll-margin-top: 6rem; }
.sp-quiz__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-quiz-radius);
    background: linear-gradient(145deg, rgba(var(--sp-primary-rgb), .05), transparent 65%), var(--sp-surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .04);
}
.sp-quiz__mode {
    color: var(--sp-primary);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 1rem;
}
.sp-quiz__intro-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.4;
    color: var(--sp-text);
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}
.sp-quiz__intro-details { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; }
.sp-quiz__intro-details span {
    padding: .4rem .8rem;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    background: var(--sp-surface);
    color: var(--sp-text-secondary);
    font-size: .85rem;
}
.sp-quiz__start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .9rem 1.75rem;
    background: var(--sp-primary);
    color: #fff;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(var(--sp-primary-rgb), .18);
}
.sp-quiz__start-btn:hover { background: var(--sp-primary-hover); }
.sp-quiz__session-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.sp-quiz__progress-copy { color: var(--sp-text-muted); font-size: .85rem; }
.sp-quiz__focus-toggle {
    margin-left: auto;
    padding: .5rem .75rem;
    min-height: 44px;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    background: var(--sp-surface);
    color: var(--sp-text-secondary);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.sp-quiz__progress { display: block; width: 100%; height: 6px; border: 0; border-radius: 8px; overflow: hidden; background: var(--sp-border); accent-color: var(--sp-primary); }
.sp-quiz__progress::-webkit-progress-bar { background: var(--sp-border); }
.sp-quiz__progress::-webkit-progress-value { background: var(--sp-primary); border-radius: 8px; transition: width .2s ease; }
.sp-quiz__progress::-moz-progress-bar { background: var(--sp-primary); border-radius: 8px; }
.sp-quiz__pagination { padding: .25rem .25rem .85rem; gap: .6rem; }
.sp-quiz__page-btn { width: 44px; height: 44px; border-radius: 12px; background: var(--sp-surface); }
.sp-quiz__page-btn--viewed { background: var(--sp-surface-alt); color: var(--sp-text); }
.sp-quiz__page-btn--correct { background: var(--sp-success); color: #fff; }
.sp-quiz__page-btn--wrong { background: var(--sp-primary); color: #fff; }
.sp-quiz__page-btn--active { outline: 2px solid var(--sp-text); outline-offset: 3px; }
.sp-quiz__page-btn--active::after { display: none; }
.sp-quiz__card-left, .sp-quiz__card-right { min-width: 0; }
.sp-quiz__card-left, .sp-quiz__results {
    padding: clamp(1.1rem, 3vw, 2rem);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-quiz-radius);
    background: var(--sp-surface);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .035);
}
.sp-quiz__question-number { background: var(--sp-surface-alt); color: var(--sp-text-muted); font-size: .8rem; border-radius: 6px; margin-bottom: 1.25rem; }
.sp-quiz__question { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.65; overflow-wrap: anywhere; }
.sp-quiz__options { gap: .75rem; }
.sp-quiz__option { min-height: 62px; padding: .85rem 1rem; border-radius: 12px; }
.sp-quiz__option:hover:not(.sp-quiz__option--disabled) { transform: none; background: var(--sp-surface-alt); }
.sp-quiz__option-letter { width: 34px; height: 34px; border-radius: 9px; }
.sp-quiz__option-text { min-width: 0; overflow-wrap: anywhere; line-height: 1.65; }
.sp-quiz__option--disabled { opacity: 1; }
.sp-quiz__feedback { padding: .9rem 1rem; background: var(--sp-surface-alt); border: 1px solid var(--sp-border); border-radius: 12px; color: var(--sp-text); font-weight: 600; margin-bottom: 1rem; }
.sp-quiz__feedback:empty { display: none; }
.sp-quiz__after-answer { margin-top: 1.25rem; }
.sp-quiz__after-answer > div { padding: 1.1rem 1.25rem; border-radius: 12px; margin-bottom: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.sp-quiz__confusion-points { background: rgba(217, 119, 6, .07); border-left: 3px solid #d97706; }
.sp-quiz__memory-tips { background: rgba(5, 150, 105, .07); border-left: 3px solid #059669; }
/* Learning panels: clear section icons and aligned, semantic lists. */
.sp-quiz__after-answer > div {
    --sp-panel-color: var(--sp-accent);
    --sp-panel-tint: var(--sp-accent-light);
    border: 1px solid var(--sp-border);
    border-inline-start: 3px solid var(--sp-panel-color);
    background: var(--sp-surface);
    padding: 1.25rem;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .025);
}
.sp-quiz__after-answer > .sp-quiz__key-points,
.sp-quiz__after-answer > .sp-quiz__memory-tips {
    --sp-panel-color: #047857;
    --sp-panel-tint: rgba(5, 150, 105, .1);
}
.sp-quiz__after-answer > .sp-quiz__confusion-points {
    --sp-panel-color: #b45309;
    --sp-panel-tint: rgba(217, 119, 6, .1);
}
.sp-quiz__after-answer > .sp-quiz__additional-info {
    --sp-panel-color: #2563eb;
    --sp-panel-tint: rgba(59, 130, 246, .1);
}
.sp-quiz__after-answer .sp-quiz__explanation-label,
.sp-quiz__after-answer .sp-quiz__section-label {
    gap: .65rem;
    margin: 0 0 .9rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--sp-border);
    color: var(--sp-text);
    font-size: 1rem;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: normal;
}
.sp-quiz__after-answer .sp-quiz__section-label[style] { color: var(--sp-text) !important; }
.sp-quiz__explanation-label > svg,
.sp-quiz__section-label > svg {
    box-sizing: content-box;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: .5rem;
    border-radius: 10px;
    background: var(--sp-panel-tint);
    color: var(--sp-panel-color);
    stroke-width: 1.8;
}
.sp-quiz__after-answer p,
.sp-quiz__after-answer .sp-quiz__additional-info-content {
    color: var(--sp-text-secondary);
    font-size: .96rem;
    line-height: 1.85;
}
.sp-quiz__explanation > p { white-space: pre-line; }
.sp-quiz__after-answer ul[role="list"] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sp-quiz__after-answer ul[role="list"] > li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .75rem 0;
    font-size: .94rem;
    line-height: 1.8;
    color: var(--sp-text-secondary);
}
.sp-quiz__after-answer ul[role="list"] > li + li { border-top: 1px solid var(--sp-border); }
.sp-quiz__after-answer ul[role="list"] > li:first-child { padding-top: 0; }
.sp-quiz__after-answer ul[role="list"] > li:last-child { padding-bottom: 0; }
.sp-quiz__bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    height: 22px;
    margin-top: .2rem;
    border-radius: 50%;
    background: var(--sp-panel-tint);
    color: var(--sp-panel-color);
    font: 700 .8rem/1 var(--sp-font-sans);
}
.sp-quiz__bullet::before { content: '\2022'; }
.sp-quiz__key-points .sp-quiz__bullet::before {
    content: '';
    width: 8px;
    height: 5px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-1px) rotate(-45deg);
}
.sp-quiz__confusion-points .sp-quiz__bullet::before { content: '!'; }
.sp-quiz__memory-tips .sp-quiz__bullet::before { content: '\2726'; }
.sp-quiz__additional-info .sp-quiz__bullet::before { content: 'i'; }
.sp-quiz__after-answer li > span:last-child { min-width: 0; }
[data-theme="dark"] .sp-quiz__after-answer > div { --sp-panel-color: #7dd3fc; }
[data-theme="dark"] .sp-quiz__after-answer > .sp-quiz__key-points,
[data-theme="dark"] .sp-quiz__after-answer > .sp-quiz__memory-tips { --sp-panel-color: #6ee7b7; }
[data-theme="dark"] .sp-quiz__after-answer > .sp-quiz__confusion-points { --sp-panel-color: #fbbf24; }
[data-theme="dark"] .sp-quiz__after-answer > .sp-quiz__additional-info { --sp-panel-color: #93c5fd; }
.sp-quiz__nav { margin-top: 1.5rem; }
.sp-quiz__next-btn, .sp-quiz__finish-btn, .sp-quiz__retry-btn { min-height: 48px; border-radius: 10px; }
.sp-quiz button:focus-visible, .sp-quiz__question:focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 4px; }
.sp-quiz__results { max-width: 700px; margin: 0 auto; }
.sp-quiz__extra-content { max-width: 100%; overflow-wrap: anywhere; }
body.sp-quiz-fullscreen-mode { background: var(--sp-bg); }
body.sp-quiz-fullscreen-mode .sp-quiz-toolbar { max-width: 1152px; margin: 1.5rem auto 0; }
body.sp-quiz-fullscreen-mode .sp-quiz { min-height: auto; padding: 1.5rem; max-width: 1200px; }

@media (min-width: 1024px) {
    body.sp-quiz-fullscreen-mode #sp-quiz-main { display: block !important; }
    body.sp-quiz-fullscreen-mode .sp-quiz__questions { display: block; }
    body.sp-quiz-fullscreen-mode .sp-quiz__card.sp-quiz__card--active { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
    body.sp-quiz-fullscreen-mode .sp-quiz__card:not(.sp-quiz__card--answered).sp-quiz__card--active { grid-template-columns: minmax(0, 760px); justify-content: center; }
    body.sp-quiz-fullscreen-mode .sp-quiz__card-left, body.sp-quiz-fullscreen-mode .sp-quiz__card-right { grid-column: auto; grid-row: auto; }
    body.sp-quiz-fullscreen-mode .sp-quiz__card-right .sp-quiz__after-answer { margin-top: 0; }
}
@media (max-width: 600px) {
    body.sp-quiz-fullscreen-mode .sp-quiz { padding: 1rem .75rem; }
    .sp-quiz__option { padding: .75rem; gap: .6rem; }
    .sp-quiz__option-icon { width: 16px; }
    .sp-quiz__nav > button, .sp-quiz__start-btn { width: 100%; justify-content: center; }
    .sp-quiz__intro-details { gap: .4rem; }
}