.topic-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 240px;
    gap: var(--space-1);
    align-items: start;
    width: min(100% - 24px, 1920px);
    margin-inline: auto;
    padding: var(--space-4) 0;
}

.topic-sidebar,
.topic-content,
.topic-links,
.mcq-palette-sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.topic-sidebar,
.topic-links,
.mcq-palette-sidebar {
    position: sticky;
    top: 88px;
    height: fit-content;
}

.topic-sidebar {
    padding: var(--space-2);
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-surface-muted);
}

.mcq-palette-sidebar {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 104px);
    overflow: hidden;
}

.mcq-palette-header {
    flex: none;
    padding: var(--space-2) var(--space-2) var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.mcq-palette-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-2);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-surface-muted);
}

.topic-sidebar::-webkit-scrollbar,
.mcq-palette-body::-webkit-scrollbar {
    width: 8px;
}

.topic-sidebar::-webkit-scrollbar-track,
.mcq-palette-body::-webkit-scrollbar-track {
    background: var(--color-surface-muted);
    border-radius: var(--radius);
}

.topic-sidebar::-webkit-scrollbar-thumb,
.mcq-palette-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--radius);
}

.topic-sidebar::-webkit-scrollbar-thumb:hover,
.mcq-palette-body::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

.topic-sidebar h3,
.mcq-palette-header h3 {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: 1.05rem;
}

.mcq-palette-sidebar .mcq-dots {
    max-height: none;
}

.sidebar-toggle {
    display: none;
}

.sidebar-backdrop {
    display: none;
}

.chapter {
    margin-bottom: 8px;
}

.chapter-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--color-surface-muted);
    border: 1px solid transparent;
    padding: 11px;
    border-radius: var(--radius);
    text-align: left;
    cursor: pointer;
    font-weight: 800;
    color: var(--color-text);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.chapter-btn:hover {
    color: var(--color-primary-dark);
    border-color: rgba(15, 118, 110, 0.28);
    box-shadow: var(--shadow-card);
    transform: translateY(-1px);
}

.chapter-badge {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 26px;
    height: 26px;
    color: var(--color-inverse);
    font-size: 0.75rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 6px;
}

.topics {
    display: none;
    padding: 8px 0 0 8px;
}

.topics.active {
    display: block;
}

.topics a {
    display: block;
    padding: 8px;
    margin-bottom: 4px;
    border-radius: 7px;
    color: var(--color-muted);
    font-size: 0.86rem;
    transition: background 180ms ease, color 180ms ease;
}

.topics a:hover {
    background: var(--color-surface-muted);
    color: var(--color-primary-dark);
}

.topics a.is-current {
    color: var(--color-inverse);
    font-weight: 900;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.topics a.is-current:hover {
    color: var(--color-inverse);
}

.topic-content {
    padding: var(--space-3);
}

.topic-content h2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
    color: var(--color-text);
}

.question-count-badge {
    padding: 4px 12px;
    color: var(--color-primary-dark);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--color-surface-muted);
    border-radius: 999px;
}

.reading-progress {
    position: sticky;
    top: 88px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-2);
    padding: 10px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.reading-progress-text {
    flex-shrink: 0;
    color: var(--color-primary-dark);
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.reading-progress-track {
    flex-grow: 1;
    height: 8px;
    overflow: hidden;
    background: var(--color-surface-muted);
    border-radius: 999px;
}

.reading-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 999px;
    transition: width 220ms ease;
}

.content-intro {
    margin-bottom: var(--space-3);
    color: var(--color-muted);
}

.content-empty {
    padding: var(--space-3);
    color: var(--color-muted);
    font-style: italic;
    text-align: center;
    background: var(--color-surface-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}

.question-box {
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: box-shadow 180ms ease, border-color 180ms ease;
}

.question-box:hover {
    border-color: rgba(15, 118, 110, 0.28);
    box-shadow: var(--shadow-card);
}

.question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-weight: 800;
    cursor: pointer;
    transition: color 180ms ease;
}

.question:hover {
    color: var(--color-primary-dark);
}

.question-label {
    flex-grow: 1;
}

.toggle-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--color-inverse);
    font-weight: 900;
    background: var(--color-primary);
    border-radius: 50%;
}

.read-badge {
    display: none;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    color: var(--color-success);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: rgba(22, 163, 74, 0.1);
    border-radius: 999px;
}

.read-badge svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

.question-box.is-read .read-badge {
    display: inline-flex;
}

.question-box.is-read {
    border-color: rgba(22, 163, 74, 0.3);
}

.answer {
    display: grid;
    grid-template-rows: 0fr;
    color: var(--color-muted);
    border-top: 0 solid var(--color-border);
    transition: grid-template-rows 320ms ease, border-color 240ms ease;
}

.answer.active {
    grid-template-rows: 1fr;
    border-top: 1px solid var(--color-border);
}

.answer-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--space-2);
    line-height: 1.7;
    transition: padding 240ms ease;
}

.answer.active .answer-inner {
    padding: var(--space-2);
}

.answer-section {
    margin-bottom: var(--space-3);
}

.answer-section:last-child {
    margin-bottom: 0;
}

.answer-section p {
    margin-bottom: 8px;
}

.answer-section p:last-child {
    margin-bottom: 0;
}

.answer h4 {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 10px;
    color: var(--color-primary-dark);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--color-surface-muted);
    border-radius: 6px;
}

/* Groups a section body into labeled sub-lists (e.g. Security / Portability
   / Robustness within one Key Points block). */
.answer h5 {
    margin: 12px 0 6px;
    color: var(--color-secondary);
    font-size: 0.82rem;
    font-weight: 800;
}

.answer h5:first-child {
    margin-top: 0;
}

/* Lead answer gets a quote-style emphasis so it reads as the key takeaway */
.answer-section-interview-answer-short p {
    padding-left: 14px;
    color: var(--color-text);
    font-size: 1.02rem;
    border-left: 3px solid var(--color-primary);
}

/* Key Points callout */
.answer-section-key-points {
    padding: var(--space-2);
    background: rgba(67, 56, 202, 0.06);
    border: 1px solid rgba(67, 56, 202, 0.22);
    border-radius: var(--radius);
}

.answer-section-key-points h4 {
    padding: 0;
    color: var(--color-secondary);
    background: transparent;
}

.answer-section-key-points li::before {
    background: var(--color-secondary);
}

/* Interview Tips callout */
.answer-section-interview-tips {
    padding: var(--space-2);
    background: rgba(2, 132, 199, 0.07);
    border: 1px solid rgba(2, 132, 199, 0.25);
    border-radius: var(--radius);
}

.answer-section-interview-tips h4 {
    padding: 0;
    color: #0369a1;
    background: transparent;
}

.answer-section-interview-tips li::before {
    background: #0284c7;
}

/* Common Mistakes callout */
.answer-section-common-mistakes {
    padding: var(--space-2);
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: var(--radius);
}

.answer-section-common-mistakes h4 {
    padding: 0;
    color: #b91c1c;
    background: transparent;
}

.answer-section-common-mistakes li::before {
    background: #dc2626;
}

/* Real-world Use Cases callout */
.answer-section-real-world-use-cases {
    padding: var(--space-2);
    background: rgba(22, 163, 74, 0.06);
    border: 1px solid rgba(22, 163, 74, 0.22);
    border-radius: var(--radius);
}

.answer-section-real-world-use-cases h4 {
    padding: 0;
    color: var(--color-success);
    background: transparent;
}

.answer-section-real-world-use-cases li::before {
    background: var(--color-success);
}

/* Summary callout */
.answer-section-summary {
    padding: var(--space-2);
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: var(--radius);
}

.answer-section-summary h4 {
    padding: 0;
    color: #6d28d9;
    background: transparent;
}

.answer-section-summary li::before {
    background: #7c3aed;
}

.answer pre {
    padding: 14px;
    color: var(--color-inverse);
    background: #0f172a;
    border-radius: var(--radius);
    overflow-x: auto;
    margin-top: 0;
}

.table-scroll {
    margin: 10px 0;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.answer table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.answer th,
.answer td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.answer thead th {
    padding: 12px 16px;
    color: var(--color-inverse);
    font-weight: 800;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.answer thead th:first-child {
    border-top-left-radius: var(--radius);
}

.answer thead th:last-child {
    border-top-right-radius: var(--radius);
}

.answer tbody td {
    padding: 11px 16px;
    color: var(--color-text);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}

.answer tbody tr:last-child td {
    border-bottom: none;
}

.answer tbody tr:nth-child(even) {
    background: var(--color-surface-muted);
}

.answer tbody tr:hover {
    background: rgba(15, 118, 110, 0.1);
}

.answer code {
    font-family: "Courier New", Consolas, monospace;
    font-size: 0.88rem;
}

.code-block {
    position: relative;
    margin-top: 10px;
}

.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    transition: background 180ms ease, color 180ms ease;
}

.copy-btn:hover {
    color: var(--color-inverse);
    background: rgba(255, 255, 255, 0.2);
}

.copy-btn.copied {
    color: var(--color-inverse);
    background: var(--color-success);
    border-color: var(--color-success);
}

.answer ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.answer li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 22px;
}

.answer li:last-child {
    margin-bottom: 0;
}

.answer li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 2px;
    width: 7px;
    height: 7px;
    background: var(--color-primary);
    border-radius: 50%;
}

.answer strong {
    color: var(--color-text);
}

.content-ad {
    margin: var(--space-3) 0;
}

.topic-links {
    padding: var(--space-2);
}

.topic-links h3 {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: 1.05rem;
}

.quick-link-list {
    display: grid;
    gap: 8px;
}

.quick-link-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
    color: var(--color-primary-dark);
    font-weight: 800;
    font-size: 0.92rem;
    background: var(--color-surface-muted);
    border: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: var(--radius);
    transition: transform 180ms ease, border-color 180ms ease;
}

.quick-link-list a svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
}

.quick-link-list a:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 118, 110, 0.38);
}

.topic-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

.pager-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-2);
    color: var(--color-text);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.pager-link:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 118, 110, 0.28);
    box-shadow: var(--shadow-card);
}

.pager-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-primary);
}

.pager-next {
    justify-content: flex-end;
    text-align: right;
}

.pager-link small {
    display: block;
    color: var(--color-muted);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.topic-pager-compact {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 var(--space-2);
}

.topic-pager-compact .pager-link {
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 700;
}

.topic-pager-compact .pager-link small {
    display: none;
}

.topic-pager-compact .pager-link svg {
    width: 16px;
    height: 16px;
}

.topic-pager-compact .pager-disabled {
    display: none;
}

.pager-disabled {
    visibility: hidden;
}

@media (max-width: 1100px) {
    .topic-layout {
        grid-template-columns: 1fr;
    }

    .topic-links {
        display: none;
    }

    .mcq-palette-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        z-index: 210;
        width: min(85vw, 320px);
        height: 100vh;
        height: 100svh;
        max-height: 100vh;
        max-height: 100svh;
        margin: 0;
        border-radius: 0;
        overflow: hidden;
        transform: translateX(100%);
        transition: transform 280ms ease;
    }

    .mcq-palette-sidebar.is-open {
        transform: translateX(0);
    }

    .mcq-palette-sidebar .mcq-dots {
        max-height: none;
    }

    .sidebar-toggle {
        position: sticky;
        top: 78px;
        z-index: 60;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        margin-bottom: var(--space-2);
        padding: 10px 16px;
        color: var(--color-inverse);
        font-weight: 800;
        font-size: 0.86rem;
        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
        border: none;
        border-radius: 999px;
        box-shadow: var(--shadow-card);
        cursor: pointer;
        transition: transform 180ms ease;
    }

    .sidebar-toggle:hover {
        transform: translateY(-1px);
    }

    .sidebar-toggle svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        fill: currentColor;
    }

    .mcq-palette-toggle-badge {
        padding: 2px 9px;
        font-size: 0.72rem;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 999px;
    }

    .topic-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 210;
        width: min(85vw, 320px);
        height: 100vh;
        height: 100svh;
        max-height: 100vh;
        max-height: 100svh;
        margin: 0;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 280ms ease;
    }

    .topic-sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: block;
        background: rgba(15, 23, 42, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 280ms ease;
    }

    .sidebar-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    body.sidebar-open {
        overflow: hidden;
    }
}

@media (max-width: 760px) {
    .topic-pager {
        grid-template-columns: 1fr;
    }

    .pager-next {
        justify-content: flex-start;
        text-align: left;
    }
}

/* ==================== Question section header actions ==================== */

.question-section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.question-section-actions .content-intro {
    margin-bottom: 0;
}

.mcq-start-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.mcq-tool button:focus-visible,
.mcq-option-input:focus-visible + .mcq-option-letter {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .question-section-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mcq-start-button {
        justify-content: center;
    }
}

/* ==================== MCQ tool (shared by the dedicated MCQ test page) ==================== */

.mcq-tool {
    margin-top: var(--space-2);
}

/* ---- Difficulty filter (sits inside .mcq-topbar-controls, on the right
   side of the topbar's title row - see .mcq-topbar-controls further down) ---- */

.mcq-difficulty-filter {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mcq-difficulty-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.mcq-difficulty-btn:hover {
    border-color: rgba(15, 118, 110, 0.35);
}

.mcq-difficulty-btn.is-active {
    color: var(--color-inverse);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.mcq-difficulty-count {
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
}

.mcq-difficulty-btn:not(.is-active) .mcq-difficulty-count {
    color: var(--color-primary-dark);
    background: var(--color-surface);
}

.mcq-difficulty-badge {
    padding: 3px 10px;
    color: var(--color-primary-dark);
    font-size: 0.76rem;
    font-weight: 800;
    background: var(--color-surface-muted);
    border-radius: 999px;
}

@media (max-width: 560px) {
    /* Below this width the difficulty buttons wrap into their own 2x2
       block instead of squeezing onto one line with the other controls.
       Grid (not flex-basis) is used here because .mcq-topbar-controls sizes
       itself to content (shrink-to-fit) - a flex-basis percentage on the
       buttons resolves against that same ambiguous auto width and never
       actually wraps, letting the pills overflow off-screen instead. */
    .mcq-topbar-controls {
        width: 100%;
    }

    .mcq-difficulty-filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
    }

    .mcq-difficulty-btn {
        justify-content: center;
        min-width: 0;
    }
}

.mcq-panel {
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.mcq-title {
    margin-bottom: 6px;
    color: var(--color-text);
}

.mcq-header-progress-track {
    flex-grow: 1;
    min-width: 90px;
}

.mcq-question-counter {
    color: var(--color-primary-dark);
    font-weight: 800;
    font-size: 0.9rem;
}

.mcq-timer {
    padding: 4px 10px;
    font-weight: 800;
    border-radius: 999px;
}

.mcq-timer {
    color: var(--color-inverse);
    font-variant-numeric: tabular-nums;
    background: var(--color-text);
}

.mcq-progress-track {
    height: 8px;
    overflow: hidden;
    background: var(--color-surface-muted);
    border-radius: 999px;
}

.mcq-progress-fill {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 999px;
    transition: width 220ms ease;
}

.mcq-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: mcq-progress-shine 2.2s ease-in-out infinite;
}

@keyframes mcq-progress-shine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mcq-progress-fill::after {
        animation: none;
    }
}

@media (max-width: 760px) {
    .topic-content {
        padding: var(--space-2);
    }

    .mcq-panel {
        padding: var(--space-2);
    }

    .mcq-option {
        padding: 10px 12px;
    }

    .mcq-question-text,
    .mcq-option-text,
    .mcq-topbar-title,
    .mcq-review-head-question,
    .mcq-review-question {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* ---- Question navigation palette (always visible in .mcq-palette-sidebar;
   wraps into a grid, never scrolls horizontally) ---- */

.mcq-dots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
    gap: 6px;
    margin-top: 10px;
    max-height: 220px;
    overflow-y: auto;
    padding: 2px;
}

.mcq-sidebar-retake-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: var(--space-2);
}

.mcq-sidebar-retake-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
}

.mcq-dot {
    display: grid;
    position: relative;
    flex-shrink: 0;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.mcq-dot.is-answered {
    color: var(--color-inverse);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.mcq-dot.is-answered::after {
    content: "\2713";
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    color: var(--color-inverse);
    font-size: 0.6rem;
    background: var(--color-success);
    border-radius: 50%;
    border: 1px solid var(--color-surface);
}

.mcq-dot.is-current {
    color: var(--color-text);
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
    box-shadow: var(--shadow-card);
}

.mcq-dot.is-correct {
    color: var(--color-inverse);
    background: var(--color-success);
    border-color: var(--color-success);
}

.mcq-dot.is-wrong {
    color: var(--color-inverse);
    background: #dc2626;
    border-color: #dc2626;
}

.mcq-dot.is-skipped {
    color: var(--color-muted);
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    border-style: dashed;
}

.mcq-dot.is-active {
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
}

/* Marked-for-review indicator: a small flag dot at the top-left corner,
   layered on top of whichever fill color (answered/correct/wrong/skipped)
   the dot already has - kept on the opposite corner from the green
   "answered" checkmark (::after) so the two never collide. */
.mcq-dot.is-marked::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    width: 12px;
    height: 12px;
    background: var(--color-secondary);
    border: 1px solid var(--color-surface);
    border-radius: 50%;
}

/* ---- Question card ---- */

.mcq-question-card {
    position: relative;
    margin-bottom: var(--space-2);
}

.mcq-question-number-badge {
    display: inline-block;
    padding: 4px 10px;
    color: var(--color-primary-dark);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--color-surface-muted);
    border-radius: 6px;
}

.mcq-question-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* ---- Difficulty tag: shown per-question (quiz header + answer review) ---- */

.mcq-difficulty-tag {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 6px;
}

.mcq-difficulty-tag:empty {
    display: none;
}

.mcq-difficulty-tag.is-easy {
    color: var(--color-success);
    background: rgba(22, 163, 74, 0.12);
}

.mcq-difficulty-tag.is-medium {
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
}

.mcq-difficulty-tag.is-hard {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.12);
}

.mcq-review-head-text .mcq-difficulty-tag {
    flex-shrink: 0;
}

.mcq-question-text {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.6;
}

/* Renders an embedded Java snippet (e.g. "What is printed? class Demo {...}")
   as its own multi-line, monospaced block instead of one run-on sentence,
   reusing the site's existing .code-block/.copy-btn component (see
   topicRenderCodeBlock()) so it gets the same dark card and Copy button as
   every other code sample on the site. Shared across every MCQ chapter page
   so any bank with code-bearing questions gets this for free. Lives inside
   .mcq-question-scroll-area (not the fixed header above it) and caps its
   own height with overflow-y:auto, so a long snippet scrolls internally
   instead of growing the fixed header past the panel's height and clipping
   the Prev/Next/Submit buttons below it. */
.mcq-question-code-block,
.mcq-review-question-code-block {
    margin: 0 0 var(--space-2);
}

.mcq-question-code,
.mcq-review-question-code {
    max-height: 260px;
    margin: 0;
    padding: 40px 14px 14px;
    color: var(--color-inverse);
    font-family: "Courier New", Consolas, monospace;
    font-size: 0.86rem;
    line-height: 1.6;
    white-space: pre;
    background: #0f172a;
    border-radius: var(--radius);
    overflow: auto;
}

/* A question can have prose both before AND after an embedded code block
   (e.g. "What happens in <code> when unrelated package b code tries
   ...?"). The trailing fragment renders at normal weight, not the bold
   headline weight of the main question text above it, so it reads as a
   continuation rather than a second, competing heading. */
.mcq-question-text-extra {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.6;
}

.mcq-options {
    display: grid;
    gap: 10px;
}

.mcq-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.mcq-option:hover {
    border-color: rgba(15, 118, 110, 0.35);
    transform: translateY(-1px);
}

.mcq-option.is-selected {
    background: rgba(15, 118, 110, 0.1);
    border-color: var(--color-primary);
}

.mcq-option-input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.mcq-option-letter {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 26px;
    height: 26px;
    color: var(--color-inverse);
    font-size: 0.78rem;
    font-weight: 900;
    background: var(--color-primary);
    border-radius: 50%;
}

.mcq-option.is-selected .mcq-option-letter {
    background: var(--color-secondary);
}

.mcq-option-text {
    color: var(--color-text);
}

.mcq-unanswered-hint {
    margin-bottom: var(--space-2);
    padding: 8px 12px;
    color: #b91c1c;
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: var(--radius);
}

.mcq-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mcq-nav .button {
    flex: 1;
    justify-content: center;
    min-width: 140px;
}

.mcq-nav .button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

.mcq-mark-btn[aria-pressed="true"] {
    color: var(--color-inverse);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* ============================================================
   MCQ exam app shell (introduction-mcq.php only)
   Everything below is scoped under .mcq-app-shell / .mcq-topbar /
   .mcq-main-layout so it never touches the shared .topic-layout
   article layout used by the other java-interview-preparation pages.
   ============================================================ */

body.mcq-exam-active .site-footer {
    display: none;
}

/* Defense in depth: on desktop/tablet the exam is meant to be single-
   screen with no page-level scroll. If anything ever miscalculates a
   height again (e.g. a very long options list), this stops the page
   itself from scrolling and hiding the topbar/nav bar - the affected
   panel's own internal overflow-y:auto is what should scroll instead. */
@media (min-width: 761px) {
    body.mcq-exam-active {
        overflow: hidden;
    }
}

/* ---- Focus Mode: hides the site chrome and lets the exam use the full
   viewport. Fullscreen API is only a progressive enhancement layered on
   top by JS - this CSS state works identically with or without it. ---- */
html.mcq-focus-mode .site-header {
    display: none;
}

html.mcq-focus-mode .mcq-app-shell {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
}

.mcq-app-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(100% - 16px, 1920px);
    margin-inline: auto;
    padding: 8px 0 8px;
    height: calc(100vh - 73px);
    height: calc(100svh - 73px);
    height: calc(100dvh - 73px);
}

/* ---- Compact topbar (replaces the old hero + big page heading) ---- */

.mcq-topbar {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.mcq-topbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.mcq-topbar-row-main {
    justify-content: space-between;
}

.mcq-topbar-row-stats {
    font-size: 0.82rem;
}

.mcq-topbar-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mcq-topbar-back {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--color-muted);
    background: var(--color-surface-muted);
    border-radius: 50%;
    transition: color 160ms ease, background 160ms ease;
}

.mcq-topbar-back:hover {
    color: var(--color-primary-dark);
    background: rgba(15, 118, 110, 0.12);
}

.mcq-topbar-back svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.mcq-topbar-title {
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcq-topbar-controls {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.mcq-focus-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.mcq-focus-toggle:hover {
    border-color: rgba(15, 118, 110, 0.35);
}

.mcq-focus-toggle[aria-pressed="true"] {
    color: var(--color-inverse);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.mcq-focus-toggle svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
}

.mcq-focus-toggle-label {
    white-space: nowrap;
}

/* The palette toggle now lives inline in the topbar instead of its own
   sticky row - neutralize the sticky/margin positioning it inherits from
   the shared .sidebar-toggle rule (used elsewhere for the article TOC). */
.mcq-topbar .mcq-palette-toggle {
    position: static;
    width: auto;
    margin-bottom: 0;
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* ---- Two-column exam layout: question panel + palette/status sidebar ---- */

.mcq-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    /* Without an explicit row size, the implicit row defaults to `auto`,
       which sizes to fit content (e.g. all ~500 palette dots at once)
       instead of respecting this container's actual available height.
       minmax(0, 1fr) forces the row - and both grid items in it - to stay
       within that height, so each item's own overflow-y:auto is what
       scrolls instead of the row silently growing past the viewport. */
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "main palette";
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
}

.mcq-question-panel,
.mcq-result-panel {
    grid-area: main;
    min-height: 0;
}

.mcq-palette-sidebar {
    grid-area: palette;
    /* Without this, a grid item's default min-height:auto makes the row
       (and the whole page) grow to fit ALL ~500 dots' intrinsic height
       instead of respecting the row's actual available height - which
       silently turns the entire page scrollable and pushes the fixed
       topbar/nav bar (including Submit Test) out of view. The dot grid's
       own .mcq-palette-body already scrolls internally once this is set. */
    min-height: 0;
}

.mcq-question-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The question number/text stay fixed at the top of the panel (never
   scroll) - only the options list below scrolls, per .mcq-question-
   scroll-area further down. */
/* The active question always gets its own tinted card + accent bar (not
   just a transient flash) so it reads as the clear focal point of the
   screen at a glance, not just another block of text among the options. */
.mcq-question-fixed {
    flex: none;
    margin-bottom: 10px;
    padding: 12px 14px;
    background: rgba(15, 118, 110, 0.07);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
}

/* Extra highlight pulse layered on top when a question is navigated to
   (Next/Previous, palette jump, Mark/Clear) so the change itself is
   immediately obvious even when the new question's text looks similar to
   the one before it. */
.mcq-question-fixed.is-flash {
    animation: mcq-question-highlight 900ms ease-out;
}

@keyframes mcq-question-highlight {
    0% {
        box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.55);
        background: rgba(15, 118, 110, 0.16);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(15, 118, 110, 0);
        background: rgba(15, 118, 110, 0.07);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mcq-question-fixed.is-flash {
        animation: none;
    }
}

.mcq-question-fixed .mcq-question-text {
    margin-bottom: 0;
}

.mcq-question-scroll-area {
    /* Grows to use the space left after the fixed question above and the
       nav bar below, and scrolls internally (overflow-y:auto) only when
       the options genuinely don't fit - they never push the nav bar out
       of view or force the page itself to scroll. */
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 4px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-surface-muted);
}

.mcq-question-scroll-area::-webkit-scrollbar {
    width: 8px;
}

.mcq-question-scroll-area::-webkit-scrollbar-track {
    background: var(--color-surface-muted);
    border-radius: var(--radius);
}

.mcq-question-scroll-area::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--radius);
}

.mcq-question-panel .mcq-nav {
    flex: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

.mcq-result-panel {
    overflow-y: auto;
}

@media (min-width: 1101px) {
    .mcq-main-layout .mcq-palette-sidebar {
        position: relative;
        top: 0;
        /* The shared rule this inherits from (used by the article-page TOC
           sidebar) sets height: fit-content, which sizes the sidebar to its
           own content (all ~500 dots at once) instead of the grid row's
           actual height - silently blowing the whole layout past the
           viewport. Overriding it back to 100% is what makes the fixed
           row height (see .mcq-main-layout) - and this element's own
           internal scrolling - actually take effect. */
        height: 100%;
        max-height: none;
        overflow: hidden;
    }
}

.mcq-palette-legend {
    display: flex;
    flex-wrap: wrap;
    flex: none;
    gap: 10px;
    padding: 8px 12px;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 700;
    border-top: 1px solid var(--color-border);
}

.mcq-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mcq-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 3px;
}

.mcq-legend-swatch.is-current {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.mcq-legend-swatch.is-answered {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.mcq-legend-swatch.is-marked {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

@media (max-width: 1100px) {
    .mcq-main-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "main";
    }
}

@media (max-width: 760px) {
    .mcq-app-shell {
        height: auto;
        min-height: calc(100dvh - 65px);
        min-height: calc(100svh - 65px);
        padding: 8px 0 10px;
    }

    .mcq-topbar-title {
        max-width: 46vw;
    }

    .mcq-topbar-back {
        width: 26px;
        height: 26px;
    }

    .mcq-focus-toggle-label {
        display: none;
    }

    .mcq-main-layout {
        flex: 1 1 auto;
        min-height: 0;
    }

    .mcq-question-panel {
        min-height: 0;
    }

    /* Below this width the exam page allows real page scroll (see
       .mcq-app-shell above), so without this the question counter, timer,
       and progress bar would scroll out of view while reading a long
       question. Only THIS row is pinned - the title and difficulty-filter
       rows above it are left to scroll away normally, so the question and
       its options still get most of the screen instead of a tall pinned
       header eating into it.

       This has to be position:fixed, not sticky: its containing block
       (.mcq-topbar) is only as tall as the topbar itself, so a sticky row
       can only "stick" for as many pixels as the topbar has left above it -
       once the whole topbar has scrolled past, a sticky child scrolls away
       with it. Fixed avoids that, at the cost of needing the spacer below
       to reserve its (variable, wrap-dependent) height in the flow. */
    .mcq-topbar-row-stats {
        position: fixed;
        top: 65px;
        left: 8px;
        right: 8px;
        /* Below .site-header's z-index:50 (styles.css) on purpose: the mobile
           menu button opens a fixed .nav-links dropdown that isn't given its
           own z-index, so it inherits the header's stacking context - a
           higher value here would render this bar (and the palette toggle
           below) on top of that open menu instead of under it. */
        z-index: 40;
        margin: 0;
        padding: 8px 14px;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-card);
    }

    html.mcq-focus-mode .mcq-topbar-row-stats {
        top: 8px;
    }

    /* Kept in sync with the fixed row's real rendered height by JS
       (ResizeObserver) since it isn't a fixed number of lines - the
       progress bar wraps onto its own line below ~560px width. */
    .mcq-topbar-stats-spacer {
        flex: none;
        height: 0;
    }

    /* The palette toggle lives in the title row, which scrolls away above -
       pin it independently, below the fixed stats row, so it's still
       always reachable without needing the whole topbar pinned. */
    .mcq-topbar .mcq-palette-toggle {
        position: fixed;
        top: 175px;
        right: 12px;
        /* Same reasoning as .mcq-topbar-row-stats above: stay under the site
           header's mobile dropdown menu (z-index:50, styles.css). */
        z-index: 45;
        box-shadow: var(--shadow-card);
    }

    html.mcq-focus-mode .mcq-topbar .mcq-palette-toggle {
        top: 118px;
    }

    .mcq-palette-toggle-label {
        display: none;
    }
}

.mcq-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: var(--space-2);
    background: rgba(15, 23, 42, 0.55);
    animation: mcq-confirm-fade 180ms ease;
}

.mcq-confirm-overlay[hidden] {
    display: none;
}

/* Defensive [hidden] override for the whole MCQ tool: several rules above
   set display:flex/inline-flex on elements (.mcq-question-panel, .button,
   etc.) with the same specificity as the browser's default [hidden]{display:
   none}. Author CSS always wins over that default regardless of specificity,
   so without this rule, "hidden" buttons/panels (Submit Test before the
   last question, the quiz panel once results are shown) stay visible and
   overlap the content that should be showing instead. */
#mcqTool [hidden] {
    display: none !important;
}

.mcq-confirm-banner {
    position: relative;
    z-index: 301;
    width: min(92vw, 420px);
    max-height: min(85vh, 560px);
    max-height: min(85svh, 560px);
    overflow-y: auto;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
    animation: mcq-confirm-pop 180ms ease;
}

@keyframes mcq-confirm-fade {
    from {
        opacity: 0;
    }
}

@keyframes mcq-confirm-pop {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mcq-confirm-overlay,
    .mcq-confirm-banner {
        animation: none;
    }
}

body.mcq-confirm-open {
    overflow: hidden;
}

.mcq-confirm-banner p {
    margin-bottom: 10px;
    color: var(--color-text);
    font-weight: 700;
}

.mcq-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mcq-confirm-actions .button {
    flex: 1;
    justify-content: center;
    min-width: 140px;
}

/* ---- Result screen ---- */

.mcq-result-score-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.mcq-score-ring {
    --mcq-score-pct: 0;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(var(--color-primary) calc(var(--mcq-score-pct) * 1%), var(--color-surface-muted) 0);
}

.mcq-score-ring-value {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    color: var(--color-primary-dark);
    font-size: 1.4rem;
    font-weight: 900;
    background: var(--color-surface);
    border-radius: 50%;
}

.mcq-result-headline {
    min-width: 200px;
}

.mcq-result-score {
    margin-bottom: 4px;
    color: var(--color-primary-dark);
    font-size: 2rem;
    font-weight: 900;
}

.mcq-result-message {
    margin-bottom: 4px;
    color: var(--color-text);
    font-weight: 800;
}

.mcq-result-improvement {
    color: var(--color-muted);
}

.mcq-result-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: var(--space-3);
}

.mcq-stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    text-align: center;
    background: var(--color-surface-muted);
    border-radius: var(--radius);
}

.mcq-stat-value {
    color: var(--color-primary-dark);
    font-size: 1.3rem;
    font-weight: 900;
}

.mcq-stat-label {
    color: var(--color-muted);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.mcq-stat-card.is-pass .mcq-stat-value {
    color: var(--color-success);
}

.mcq-stat-card.is-fail .mcq-stat-value {
    color: #b91c1c;
}

.mcq-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--space-3);
}

.mcq-result-actions .button {
    flex: 1;
    justify-content: center;
    min-width: 180px;
}

/* ---- Study suggestions (weak-topic recommendations) ---- */

.mcq-suggestions {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3) var(--space-3);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.mcq-suggestions-title {
    margin-bottom: 10px;
    color: var(--color-text);
}

.mcq-suggestions-empty {
    color: var(--color-muted);
}

.mcq-suggestions-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mcq-suggestion-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.mcq-suggestion-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

.mcq-suggestion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mcq-suggestion-label {
    color: var(--color-text);
    font-weight: 800;
}

.mcq-suggestion-score {
    flex-shrink: 0;
    color: #b45309;
    font-weight: 900;
}

.mcq-suggestion-track {
    height: 6px;
}

.mcq-suggestion-track .mcq-progress-fill {
    background: linear-gradient(90deg, var(--color-accent), #dc2626);
}

.mcq-suggestion-meta {
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

/* ---- Answer review ---- */

.mcq-review-title {
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.mcq-review-list {
    display: grid;
    gap: 10px;
}

.mcq-review-item {
    min-width: 0;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
    border-radius: var(--radius);
    transition: box-shadow 300ms ease;
}

.mcq-review-item.is-flash {
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.35);
}

.mcq-review-item[open] {
    box-shadow: var(--shadow-card);
}

.mcq-review-item.is-correct {
    border-left-color: var(--color-success);
}

.mcq-review-item.is-wrong {
    border-left-color: #dc2626;
}

.mcq-review-item.is-skipped {
    border-left-color: var(--color-muted);
    border-left-style: dashed;
}

.mcq-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: var(--space-2);
    cursor: pointer;
    list-style: none;
}

.mcq-review-head::-webkit-details-marker {
    display: none;
}

.mcq-review-head-text {
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

.mcq-review-number {
    flex-shrink: 0;
    color: var(--color-muted);
    font-weight: 800;
    font-size: 0.82rem;
}

.mcq-review-head-question {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--color-text);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcq-review-status {
    flex-shrink: 0;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 999px;
}

.mcq-review-item.is-correct .mcq-review-status {
    color: var(--color-success);
    background: rgba(22, 163, 74, 0.12);
}

.mcq-review-item.is-wrong .mcq-review-status {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.1);
}

.mcq-review-item.is-skipped .mcq-review-status {
    color: var(--color-muted);
    background: var(--color-surface-muted);
}

.mcq-review-body {
    padding: 0 var(--space-2) var(--space-2);
    border-top: 1px solid var(--color-border);
}

.mcq-review-question {
    margin: var(--space-2) 0 10px;
    color: var(--color-text);
    font-weight: 700;
}

.mcq-review-options {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.mcq-review-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 0.88rem;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.mcq-review-option-letter {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--color-inverse);
    font-size: 0.72rem;
    font-weight: 900;
    background: var(--color-muted);
    border-radius: 50%;
}

.mcq-review-option-text {
    flex-grow: 1;
    color: var(--color-text);
}

.mcq-review-option-tag {
    flex-shrink: 0;
    padding: 2px 8px;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 999px;
}

.mcq-review-option.is-correct-option {
    border-color: rgba(22, 163, 74, 0.35);
}

.mcq-review-option.is-correct-option .mcq-review-option-letter {
    background: var(--color-success);
}

.mcq-review-option.is-correct-option .mcq-review-option-tag {
    color: var(--color-success);
    background: rgba(22, 163, 74, 0.14);
}

.mcq-review-option.is-wrong-option {
    border-color: rgba(220, 38, 38, 0.35);
}

.mcq-review-option.is-wrong-option .mcq-review-option-letter {
    background: #dc2626;
}

.mcq-review-option.is-wrong-option .mcq-review-option-tag {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.12);
}

.mcq-review-answer-line {
    margin: 0 0 10px;
    padding: 10px 12px;
    color: var(--color-muted);
    font-size: 0.86rem;
    font-style: italic;
    background: var(--color-surface-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}

/* ---- Explanation trigger (answer review only, sits beside the correct-
   answer row - see .mcq-review-option.is-correct-option) and the single
   shared popup it opens (see "Explanation popup" further down). Both are
   only ever built/shown by JS after the test finishes, so neither exists
   in the DOM during an active attempt. ---- */

.mcq-review-option {
    flex-wrap: wrap;
}

.mcq-explanation-toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 5px 12px;
    color: var(--color-primary-dark);
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    background: var(--color-surface);
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.mcq-explanation-toggle:hover {
    color: var(--color-inverse);
    background: var(--color-primary);
}

/* ---- Explanation popup: one shared dialog reused for every question
   (built once in HTML, filled in by JS) rather than one panel per
   question - keeps the DOM light across a 300+ question review list. ---- */

.mcq-explanation-overlay {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    background: rgba(15, 23, 42, 0.55);
    animation: mcq-confirm-fade 180ms ease;
}

.mcq-explanation-overlay[hidden] {
    display: none;
}

.mcq-explanation-modal {
    display: flex;
    flex-direction: column;
    width: min(92vw, 520px);
    max-height: min(80vh, 560px);
    max-height: min(80svh, 560px);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.38);
    animation: mcq-confirm-pop 180ms ease;
}

.mcq-explanation-modal-head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px var(--space-2);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.mcq-explanation-modal-head h3 {
    margin: 0;
    color: var(--color-inverse);
    font-size: 1rem;
}

.mcq-explanation-modal-close {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--color-inverse);
    background: rgba(255, 255, 255, 0.18);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 160ms ease;
}

.mcq-explanation-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.mcq-explanation-modal-close svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.mcq-explanation-modal-body {
    padding: var(--space-2);
    overflow-y: auto;
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.7;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-line;
}

/* A ```-fenced code snippet inside an explanation renders as its own
   paragraph plus a .mcq-question-code-block (see renderExplanationBody) -
   these margins keep that split from adding extra gaps versus the plain
   textContent it replaces. */
.mcq-explanation-text {
    margin: 0 0 var(--space-2);
}

.mcq-explanation-text:last-child {
    margin-bottom: 0;
}

body.mcq-explanation-open {
    overflow: hidden;
}

@media (max-width: 760px) {
    .mcq-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mcq-nav .button,
    .mcq-confirm-actions .button,
    .mcq-result-actions .button {
        min-width: 100%;
    }

    .mcq-explanation-toggle {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .mcq-explanation-modal {
        width: 100%;
        max-height: 85vh;
        max-height: 85svh;
    }

    .mcq-result-score-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .mcq-suggestions-list {
        grid-template-columns: 1fr;
    }

    .mcq-topbar-row-stats {
        flex-wrap: wrap;
    }

    .mcq-header-progress-track {
        order: 1;
        flex-basis: 100%;
    }
}