/* =========================================================================
   Preview Exam v2 — token-based, namespace .pe-*
   - All colors use CSS variables (no hardcoded hex / rgb).
   - rgba() is built from RGB-channel tokens via rgb(var(--token) / alpha)
   - Bootstrap utilities are NOT relied upon — own selectors only.
   ========================================================================= */

:root {
    /* Brand */
    --pe-brand-rgb: 27 20 100;          /* #1b1464 */
    --pe-brand-accent-rgb: 255 189 29;  /* #ffbd1d */
    --pe-brand: rgb(var(--pe-brand-rgb));
    --pe-brand-accent: rgb(var(--pe-brand-accent-rgb));

    /* Surfaces & text */
    --pe-bg-rgb: 250 251 252;
    --pe-surface-rgb: 255 255 255;
    --pe-border-rgb: 229 231 235;
    --pe-border-strong-rgb: 203 213 225;
    --pe-text-rgb: 15 23 42;
    --pe-text-muted-rgb: 100 116 139;
    --pe-shadow-rgb: 15 23 42;

    --pe-bg: rgb(var(--pe-bg-rgb));
    --pe-surface: rgb(var(--pe-surface-rgb));
    --pe-border: rgb(var(--pe-border-rgb));
    --pe-border-strong: rgb(var(--pe-border-strong-rgb));
    --pe-text: rgb(var(--pe-text-rgb));
    --pe-text-muted: rgb(var(--pe-text-muted-rgb));

    /* Status */
    --pe-correct-rgb: 22 163 74;
    --pe-correct-bg-rgb: 220 252 231;
    --pe-wrong-rgb: 220 38 38;
    --pe-wrong-bg-rgb: 254 226 226;
    --pe-locked-rgb: 148 163 184;
    --pe-locked-bg-rgb: 241 245 249;

    /* Maroon (option label circle accent — QB v2 pattern) */
    --pe-maroon-rgb: 91 35 51;          /* #5b2333 */
    --pe-maroon: rgb(var(--pe-maroon-rgb));
    --pe-on-state-rgb: 255 255 255;
    --pe-on-state: rgb(var(--pe-on-state-rgb));
    --pe-maroon-text: var(--pe-on-state);
    --pe-backdrop-rgb: 0 0 0;
    --pe-backdrop-strong: rgb(var(--pe-backdrop-rgb) / 0.7);

    /* Callout surface (used for question text + option cards) */
    --pe-callout-bg-rgb: 248 250 252;   /* #f8fafc — surface-2 */
    --pe-callout-bg: rgb(var(--pe-callout-bg-rgb));

    /* Question accent (blue) — for question/paragraph callout */
    --pe-question-accent-rgb: 59 130 246;
    --pe-question-accent: rgb(var(--pe-question-accent-rgb));
    --pe-question-accent-subtle: rgb(var(--pe-question-accent-rgb) / 0.1);

    --pe-correct: rgb(var(--pe-correct-rgb));
    --pe-correct-bg: rgb(var(--pe-correct-bg-rgb));
    --pe-wrong: rgb(var(--pe-wrong-rgb));
    --pe-wrong-bg: rgb(var(--pe-wrong-bg-rgb));
    --pe-locked: rgb(var(--pe-locked-rgb));
    --pe-locked-bg: rgb(var(--pe-locked-bg-rgb));

    /* Shadows (built from RGB tokens with alpha) */
    --pe-shadow-sm: 0 1px 2px rgb(var(--pe-shadow-rgb) / 0.06);
    --pe-shadow-md: 0 4px 12px rgb(var(--pe-shadow-rgb) / 0.08);
    --pe-shadow-lg: 0 10px 30px rgb(var(--pe-shadow-rgb) / 0.12);

    /* Backdrop / overlay */
    --pe-backdrop: rgb(var(--pe-shadow-rgb) / 0.7);
    --pe-overlay-tint: rgb(var(--pe-brand-rgb) / 0.08);

    /* Geometry */
    --pe-radius-sm: 6px;
    --pe-radius: 10px;
    --pe-radius-lg: 14px;
    --pe-gap-xs: 0.375rem;
    --pe-gap-sm: 0.5rem;
    --pe-gap: 1rem;
    --pe-gap-lg: 1.5rem;
    --pe-pad: 1.25rem;

    /* Typography */
    --pe-font-base: 0.95rem;
    --pe-font-lg: 1.05rem;
    --pe-font-title: 1.5rem;

    /* Motion */
    --pe-tx: 200ms;
    --pe-tx-fast: 150ms;
}

.pe-dark {
    --pe-bg-rgb: 11 13 18;
    --pe-surface-rgb: 22 25 34;
    --pe-border-rgb: 42 47 58;
    --pe-border-strong-rgb: 71 85 105;
    --pe-text-rgb: 226 232 240;
    --pe-text-muted-rgb: 148 163 184;
    --pe-shadow-rgb: 0 0 0;

    --pe-correct-bg-rgb: 5 46 22;
    --pe-wrong-bg-rgb: 69 10 10;
    --pe-locked-bg-rgb: 30 41 59;
    --pe-maroon-rgb: 139 58 74;
    --pe-callout-bg-rgb: 40 53 72;

    --pe-bg: rgb(var(--pe-bg-rgb));
    --pe-surface: rgb(var(--pe-surface-rgb));
    --pe-border: rgb(var(--pe-border-rgb));
    --pe-text: rgb(var(--pe-text-rgb));
    --pe-text-muted: rgb(var(--pe-text-muted-rgb));

    --pe-correct-bg: rgb(var(--pe-correct-bg-rgb));
    --pe-wrong-bg: rgb(var(--pe-wrong-bg-rgb));
    --pe-locked-bg: rgb(var(--pe-locked-bg-rgb));

    --pe-shadow-sm: 0 1px 2px rgb(var(--pe-shadow-rgb) / 0.4);
    --pe-shadow-md: 0 4px 12px rgb(var(--pe-shadow-rgb) / 0.45);
    --pe-shadow-lg: 0 10px 30px rgb(var(--pe-shadow-rgb) / 0.55);

    --pe-overlay-tint: rgb(var(--pe-brand-accent-rgb) / 0.12);
}

/* =========================================================================
   Utilities (own — Bootstrap free)
   ========================================================================= */
.pe-hidden { display: none !important; }

/* =========================================================================
   Info card (above the exam card) — sales-pitch hero + preview/membership
   compare + dual CTA. Goal: pull users into the platform.
   ========================================================================= */
.pe-info-card {
    max-width: 1100px;
    margin: 0 auto var(--pe-gap-lg);
    padding: 0;
    background-color: var(--pe-surface);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-lg);
    box-shadow: var(--pe-shadow-md);
    color: var(--pe-text);
    overflow: hidden;
}

/* Hero band — brand gradient with eyebrow + headline + lede.
   Right padding leaves room for the absolute-positioned theme toggle
   so the headline never collides with it. */
.pe-info-hero {
    padding: 1.5rem 12rem 1.25rem 1.75rem;
    background: linear-gradient(135deg,
        rgb(var(--pe-brand-rgb) / 0.08) 0%,
        rgb(var(--pe-question-accent-rgb) / 0.06) 100%);
    border-bottom: 1px solid var(--pe-border);
    color: var(--pe-text);
}

@media (max-width: 640px) {
    .pe-info-hero {
        padding: 3.5rem 1.25rem 1rem;
    }
}

.pe-dark .pe-info-hero {
    background: linear-gradient(135deg,
        rgb(var(--pe-brand-accent-rgb) / 0.10) 0%,
        rgb(var(--pe-question-accent-rgb) / 0.07) 100%);
}

.pe-info-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background-color: var(--pe-brand);
    color: var(--pe-brand-accent);
    font-size: 0.75rem;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

.pe-info-eyebrow span {
    font-weight: 700 !important;
}

.pe-info-eyebrow i {
    font-size: 0.75rem;
}

.pe-info-headline {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 800 !important;
    color: var(--pe-text);
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .pe-info-headline { font-size: 1.75rem; }
}

/* Lede uses base text colour (not muted) so the theme cannot wash it out;
   font-weight is forced because the site theme aggressively normalizes it. */
.pe-info-lede {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--pe-text);
    font-weight: 400 !important;
    max-width: 70ch;
}

.pe-info-lede strong {
    color: var(--pe-text);
    font-weight: 800 !important;
}

/* Compare grid — two stand-alone cards with breathing room between them.
   Mobile: stacked single column; ≥768px: two cards side by side. */
.pe-info-compare {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pe-gap);
    padding: 1.25rem 1.5rem;
    background-color: transparent;
}

@media (min-width: 768px) {
    .pe-info-compare { grid-template-columns: 1fr 1fr; }
}

.pe-info-compare-col {
    padding: 1.25rem;
    border: 1px solid var(--pe-border-strong);
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow-sm);
    background-color: var(--pe-surface);
    color: var(--pe-text);
    position: relative;
    overflow: hidden;
}

.pe-info-compare-preview {
    background-color: var(--pe-callout-bg);
}

.pe-dark .pe-info-compare-preview {
    background-color: rgb(var(--pe-callout-bg-rgb));
}

.pe-info-compare-full {
    background-color: var(--pe-surface);
}

.pe-dark .pe-info-compare-full {
    background-color: rgb(var(--pe-surface-rgb));
    border-color: var(--pe-brand-accent);
}

.pe-info-compare-full::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pe-brand) 0%, var(--pe-brand-accent) 100%);
}

.pe-info-compare-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--pe-border);
}

.pe-info-compare-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700 !important;
    color: var(--pe-text);
}

.pe-info-compare-preview .pe-info-compare-head i {
    color: var(--pe-text-muted);
}

.pe-info-compare-full .pe-info-compare-head i {
    color: var(--pe-brand-accent);
}

.pe-dark .pe-info-compare-full .pe-info-compare-head i {
    color: var(--pe-brand-accent);
}

.pe-info-compare-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Compare list — readable text. The site theme normalizes font-weight so
   we lock in 500 here. Both columns use base text colour (no muted) so
   light + dark themes stay legible. */
.pe-info-compare-col li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--pe-text);
    font-weight: 400 !important;
}

.pe-info-compare-col li i {
    flex-shrink: 0;
    margin-top: 0.2rem;
    width: 1rem;
    text-align: center;
    color: var(--pe-correct);
}

.pe-info-compare-col li i.pe-info-compare-na {
    color: var(--pe-wrong);
    opacity: 0.85;
}

.pe-info-compare-preview li {
    color: var(--pe-text);
}

/* CTA row — bottom band with two prominent buttons */
.pe-info-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pe-gap-sm);
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    background-color: var(--pe-callout-bg);
    border-top: 1px solid var(--pe-border);
}

.pe-dark .pe-info-cta-row {
    background-color: rgb(var(--pe-bg-rgb) / 0.5);
}

.pe-btn-cta-large {
    min-height: 52px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: var(--pe-shadow-md);
    gap: 0.625rem;
}

.pe-btn-cta-large i:last-child {
    transition: transform var(--pe-tx);
}

.pe-btn-cta-large:hover i:last-child {
    transform: translateX(3px);
}

.pe-btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 52px;
    padding: 0.75rem 1.25rem;
    background-color: var(--pe-surface);
    color: var(--pe-text);
    border: 1.5px solid var(--pe-border-strong);
    border-radius: var(--pe-radius);
    font-size: 0.95rem;
    font-weight: 700 !important;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--pe-tx), border-color var(--pe-tx), color var(--pe-tx);
}

.pe-btn-cta-secondary span {
    color: inherit;
    font-weight: 700 !important;
}

.pe-btn-cta-secondary:hover {
    background-color: var(--pe-surface);
    border-color: var(--pe-brand);
    color: var(--pe-brand);
    text-decoration: none;
}

.pe-dark .pe-btn-cta-secondary:hover {
    border-color: var(--pe-brand-accent);
    color: var(--pe-brand-accent);
}

.pe-btn-link {
    text-decoration: none;
}

.pe-btn-link:hover {
    text-decoration: none;
}

/* =========================================================================
   Section / container
   ========================================================================= */
.pe-section {
    background-color: var(--pe-bg);
    color: var(--pe-text);
    padding: var(--pe-gap-lg) 0 60px;
    transition: background-color var(--pe-tx), color var(--pe-tx);
    position: relative;
    font-weight: 400;
}

/* Force every plain text element inside the preview surface to weight 400 by
   default — site theme aggressively pushes 500/600 onto generic tags, which
   makes long-form copy feel artificially bold. Bold elements still win via
   their own explicit !important rules below. */
.pe-section,
.pe-section p,
.pe-section li,
.pe-section span,
.pe-section a {
    font-weight: 400;
}

/* Browsers ship native button / input / textarea / select with their own
   font-family (e.g. Helvetica on macOS) instead of inheriting from <body>.
   Force every control inside the preview surface to use the page's font
   so the page matches the rest of the site. */
.pe-section button,
.pe-section input,
.pe-section textarea,
.pe-section select,
.pe-section .pe-choice,
.pe-section .pe-btn-primary,
.pe-section .pe-btn-mark,
.pe-section .pe-btn-result,
.pe-section .pe-btn-cta-secondary,
.pe-section .pe-section-tab,
.pe-section .pe-nav-prev,
.pe-section .pe-nav-next,
.pe-section .pe-nav-item,
.pe-section .pe-theme-toggle-floating {
    font-family: inherit;
}

/* SweetAlert2 popup loads its own font stack — pin it back to the page font. */
.pe-result-swal-popup,
.pe-result-swal-popup .swal2-title,
.pe-result-swal-popup .swal2-html-container,
.pe-result-swal-popup .swal2-actions,
.pe-result-swal-popup button {
    font-family: inherit !important;
}

/* Theme toggle — pill-shaped button anchored to the top-right corner of the
   info card. Sits absolute inside the card so it scrolls with the card,
   stays out of the exam container, and is always near the page hero. */
.pe-info-card { position: relative; }

.pe-theme-toggle-floating {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    min-height: 40px;
    background-color: var(--pe-brand);
    color: var(--pe-brand-accent) !important;
    border: 2px solid var(--pe-brand-accent);
    border-radius: var(--pe-radius);
    font-size: 0.875rem;
    font-weight: 700 !important;
    cursor: pointer;
    box-shadow: var(--pe-shadow-md);
    transition: background-color var(--pe-tx), border-color var(--pe-tx), transform var(--pe-tx-fast), box-shadow var(--pe-tx);
}

.pe-theme-toggle-floating .pe-theme-toggle-label {
    color: var(--pe-brand-accent) !important;
    font-weight: 700 !important;
}

.pe-theme-toggle-floating i {
    color: var(--pe-brand-accent) !important;
    font-size: 0.95rem;
}

.pe-theme-toggle-floating:hover {
    background-color: var(--pe-brand);
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgb(var(--pe-brand-accent-rgb) / 0.30), var(--pe-shadow-md);
    filter: brightness(1.05);
}

.pe-theme-toggle-floating:focus-visible {
    outline: 3px solid var(--pe-brand-accent);
    outline-offset: 2px;
}

.pe-dark .pe-theme-toggle-floating {
    background-color: var(--pe-surface);
    border-color: var(--pe-brand-accent);
}

@media (max-width: 640px) {
    .pe-theme-toggle-floating {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
        min-height: 36px;
    }
    /* Hide the label on very small screens — keep the icons only.
       The button's data-tip still surfaces "Temayı değiştir" on long press. */
    .pe-theme-toggle-floating .pe-theme-toggle-label {
        display: none;
    }
}

.pe-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--pe-pad);
    background-color: var(--pe-surface);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-lg);
    box-shadow: var(--pe-shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--pe-gap);
}

/* =========================================================================
   Divider
   ========================================================================= */
.pe-divider {
    border: 0;
    border-top: 1px solid var(--pe-border-strong);
    margin: 0;
    width: 100%;
    background-color: transparent;
    opacity: 1;
}

/* =========================================================================
   Header band
   ========================================================================= */
.pe-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pe-gap);
    flex-wrap: wrap;
}

.pe-header-text {
    display: flex;
    flex-direction: column;
    gap: var(--pe-gap-xs);
    min-width: 0;
}

.pe-title {
    font-size: var(--pe-font-title);
    font-weight: 700;
    color: var(--pe-text);
    margin: 0;
    line-height: 1.25;
}

.pe-subtitle {
    margin: 0;
    color: var(--pe-text-muted);
    font-size: var(--pe-font-base);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--pe-gap-xs);
}

.pe-subtitle-name {
    color: var(--pe-text);
    font-weight: 600;
}

.pe-subtitle-sep {
    color: var(--pe-text-muted);
    opacity: 0.7;
}

.pe-subtitle-count {
    color: var(--pe-brand);
    font-weight: 700;
}

.pe-dark .pe-subtitle-count {
    color: var(--pe-brand-accent);
}

/* Header actions container — view-results button + theme toggle */
.pe-header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--pe-gap-sm);
    flex-wrap: wrap;
}

.pe-btn-result {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    min-height: 44px;
    background-color: var(--pe-callout-bg);
    color: var(--pe-text);
    border: 1px solid var(--pe-border-strong);
    border-radius: var(--pe-radius);
    font-size: 0.9rem;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background-color var(--pe-tx), border-color var(--pe-tx), color var(--pe-tx);
}

.pe-btn-result span {
    color: var(--pe-text);
    font-weight: 600 !important;
}

.pe-btn-result i {
    color: var(--pe-question-accent);
}

.pe-btn-result:hover {
    background-color: var(--pe-question-accent-subtle);
    border-color: var(--pe-question-accent);
    color: var(--pe-text);
}

.pe-dark .pe-btn-result {
    background-color: var(--pe-surface);
    border-color: var(--pe-border-strong);
    color: var(--pe-text);
}

.pe-dark .pe-btn-result:hover {
    background-color: rgb(var(--pe-question-accent-rgb) / 0.15);
    border-color: var(--pe-question-accent);
}

.pe-btn-result:focus-visible {
    outline: 2px solid var(--pe-question-accent);
    outline-offset: 2px;
}

/* Theme toggle */
.pe-theme-toggle {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 1px solid var(--pe-border);
    background-color: var(--pe-surface);
    color: var(--pe-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--pe-tx), border-color var(--pe-tx), transform var(--pe-tx-fast), color var(--pe-tx);
}

.pe-theme-toggle:hover {
    background-color: var(--pe-overlay-tint);
    border-color: var(--pe-brand);
    color: var(--pe-brand);
}

.pe-dark .pe-theme-toggle:hover {
    color: var(--pe-brand-accent);
    border-color: var(--pe-brand-accent);
}

.pe-theme-toggle:focus-visible {
    outline: 2px solid var(--pe-brand);
    outline-offset: 2px;
}

.pe-theme-toggle:active {
    transform: scale(0.96);
}

.pe-theme-icon {
    font-size: 1rem;
}

/* =========================================================================
   Section tabs (underline)
   ========================================================================= */
.pe-section-tabs {
    display: flex;
    gap: var(--pe-gap-lg);
    flex-wrap: wrap;
    align-items: stretch;
    min-height: 44px;
}

.pe-section-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--pe-text-muted);
    font-size: var(--pe-font-base);
    font-weight: 600;
    padding: var(--pe-gap-sm) var(--pe-gap-xs);
    min-height: 44px;
    cursor: pointer;
    transition: color var(--pe-tx), border-color var(--pe-tx), background-color var(--pe-tx);
    position: relative;
}

.pe-section-tab:hover {
    color: var(--pe-text);
    background-color: var(--pe-overlay-tint);
}

.pe-section-tab.pe-active,
.pe-section-tab[aria-selected="true"] {
    color: var(--pe-brand);
    border-bottom-color: var(--pe-brand);
}

.pe-dark .pe-section-tab.pe-active,
.pe-dark .pe-section-tab[aria-selected="true"] {
    color: var(--pe-brand-accent);
    border-bottom-color: var(--pe-brand-accent);
}

.pe-section-tab:focus-visible {
    outline: 2px solid var(--pe-brand);
    outline-offset: 2px;
    border-radius: var(--pe-radius-sm);
}

/* =========================================================================
   Question stack — wraps header + body + choices + action + indicator.
   Opacity transition for smooth question-to-question swap (no blink).
   ========================================================================= */
.pe-question-stack {
    display: flex;
    flex-direction: column;
    gap: var(--pe-gap);
    opacity: 1;
    transition: opacity 180ms ease-in-out;
}

.pe-question-stack.pe-question-fading {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pe-question-stack {
        transition: none;
    }
}

/* =========================================================================
   Question header
   ========================================================================= */
.pe-question-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pe-gap);
}

.pe-q-title {
    display: inline-flex;
    align-items: center;
    gap: var(--pe-gap-sm);
}

.pe-q-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pe-text);
}

.pe-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pe-gap-sm);
}

.pe-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--pe-gap-xs);
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--pe-radius-sm);
    background-color: var(--pe-overlay-tint);
    color: var(--pe-brand);
    border: 1px solid transparent;
    white-space: nowrap;
}

.pe-dark .pe-badge {
    color: var(--pe-brand-accent);
}

.pe-badge-topic {
    background-color: transparent;
    color: var(--pe-text-muted);
    border-color: var(--pe-border);
}

.pe-badge-public {
    color: var(--pe-correct);
    background-color: var(--pe-correct-bg);
    border-color: transparent;
}

.pe-badge-public.pe-badge-private {
    color: var(--pe-wrong);
    background-color: var(--pe-wrong-bg);
}

.pe-btn-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--pe-gap-xs);
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    background-color: transparent;
    color: var(--pe-text);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--pe-tx), border-color var(--pe-tx), color var(--pe-tx), transform var(--pe-tx-fast);
}

.pe-btn-mark:hover {
    background-color: var(--pe-overlay-tint);
    border-color: var(--pe-brand);
    color: var(--pe-brand);
}

.pe-dark .pe-btn-mark:hover {
    color: var(--pe-brand-accent);
    border-color: var(--pe-brand-accent);
}

.pe-btn-mark:focus-visible {
    outline: 2px solid var(--pe-brand);
    outline-offset: 2px;
}

.pe-btn-mark:active {
    transform: scale(0.97);
}

.pe-btn-mark-active {
    background-color: var(--pe-overlay-tint);
    color: var(--pe-brand);
    border-color: var(--pe-brand);
}

.pe-dark .pe-btn-mark-active {
    color: var(--pe-brand-accent);
    border-color: var(--pe-brand-accent);
}

/* =========================================================================
   Question body
   ========================================================================= */
.pe-question-body {
    display: flex;
    flex-direction: column;
    gap: var(--pe-gap);
    color: var(--pe-text);
    font-size: var(--pe-font-lg);
    line-height: 1.5;
}

.pe-image-render {
    display: flex;
    flex-direction: column;
    gap: var(--pe-gap);
    align-items: center;
    width: 100%;
}

.pe-question-image-wrap {
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

@media (min-width: 1200px) { .pe-question-image-wrap { max-width: 720px; } }
@media (min-width: 1600px) { .pe-question-image-wrap { max-width: 820px; } }
@media (min-width: 1920px) { .pe-question-image-wrap { max-width: 920px; } }

.pe-image-render img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pe-radius);
    border: 2px solid transparent;
    background-color: var(--pe-surface);
    cursor: zoom-in;
    transition: border-color var(--pe-tx), box-shadow var(--pe-tx), transform var(--pe-tx);
    user-select: none;
}

/* QB v2 cropped-image hover pattern: outer ring + scale */
.pe-image-render img:hover {
    border-color: var(--pe-question-accent);
    box-shadow: 0 0 0 3px var(--pe-question-accent-subtle);
    transform: scale(1.02);
}

.pe-text-render {
    color: var(--pe-text);
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: left;
}

/* Paragraph callout — blue accent (QB v2 .text-render-paragraph). Full-width, left-aligned. */
.pe-text-render-paragraph {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: var(--pe-gap);
    padding: var(--pe-gap) 1.25rem;
    border-left: 4px solid var(--pe-question-accent);
    background-color: var(--pe-callout-bg);
    border-radius: var(--pe-radius);
    color: var(--pe-text);
    white-space: pre-wrap;
    word-break: break-word;
    width: 100%;
    text-align: left;
}

/* Question text callout — blue accent (QB v2 .text-render-question). Full-width, left-aligned. */
.pe-text-render-question {
    font-size: 1.05rem;
    line-height: 1.5;
    margin-bottom: var(--pe-gap);
    padding: var(--pe-gap) 1.25rem;
    border-left: 4px solid var(--pe-question-accent);
    background-color: var(--pe-callout-bg);
    border-radius: var(--pe-radius);
    color: var(--pe-text);
    white-space: pre-wrap;
    word-break: break-word;
    width: 100%;
    text-align: left;
}

.pe-text-render p {
    margin: 0 0 var(--pe-gap-sm) 0;
}

.pe-text-render img,
.pe-text-render-paragraph img,
.pe-text-render-question img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pe-radius-sm);
}

/* Cropped image inside callout — block (QB v2 .text-render-cropped-block).
   Centered with a hard 400px ceiling so it never blows out the layout. */
.pe-text-render-cropped-block {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.75rem auto;
    width: 100%;
}

.pe-text-render-cropped-img {
    max-width: 400px !important;
    width: auto;
    max-height: 360px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--pe-radius);
    border: 2px solid transparent;
    background-color: var(--pe-surface);
    cursor: zoom-in;
    transition: border-color var(--pe-tx), box-shadow var(--pe-tx), transform var(--pe-tx);
}

/* Mirror the image-render hover treatment (outer ring + slight scale) */
.pe-text-render-cropped-img:hover {
    border-color: var(--pe-question-accent);
    box-shadow: 0 0 0 3px var(--pe-question-accent-subtle);
    transform: scale(1.02);
}

/* Cropped image inline (inside choices) — small thumb, never larger than 120px */
.pe-text-render-cropped-inline {
    display: inline-block;
    vertical-align: middle;
    max-width: 120px !important;
    max-height: 80px;
    width: auto;
    height: auto;
    border-radius: var(--pe-radius-sm);
    border: 2px solid transparent;
    cursor: zoom-in;
    margin: 0 0.25rem;
    transition: border-color var(--pe-tx), box-shadow var(--pe-tx), transform var(--pe-tx);
}

.pe-text-render-cropped-inline:hover {
    border-color: var(--pe-question-accent);
    box-shadow: 0 0 0 2px var(--pe-question-accent-subtle);
    transform: scale(1.05);
}

/* Lock placeholder */
.pe-lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--pe-gap-sm);
    padding: var(--pe-gap-lg);
    background-color: var(--pe-locked-bg);
    border: 1px dashed var(--pe-border);
    border-radius: var(--pe-radius);
    color: var(--pe-locked);
    text-align: center;
    min-height: 160px;
}

.pe-lock-icon {
    font-size: 2rem;
    color: var(--pe-locked);
}

.pe-lock-text {
    margin: 0;
    color: var(--pe-text-muted);
    font-weight: 600;
}

/* =========================================================================
   Choices
   ========================================================================= */
/* Choices container — 2-column grid (QB v2 pattern), single column on mobile.
   Long-text choices and image-only choices both use the same maroon-callout card. */
.pe-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pe-gap-sm);
    margin-top: var(--pe-gap);
}

/* Image-render: pack 4 short letter-only choices in a centered single row on
   desktop, wrap on narrow widths. Card width auto, label centered. */
.pe-choices[data-layout="image"] {
    grid-template-columns: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pe-gap-sm);
}

@media (max-width: 991.98px) {
    .pe-choices { grid-template-columns: 1fr; }
}

/* Maroon-callout card — base style (matches QB v2 .text-render-opt) */
.pe-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    min-height: 56px;
    background-color: var(--pe-callout-bg);
    color: var(--pe-text);
    border: 2px solid transparent;
    border-left: 4px solid var(--pe-maroon);
    border-top-color: var(--pe-border);
    border-right-color: var(--pe-border);
    border-bottom-color: var(--pe-border);
    border-radius: var(--pe-radius);
    font-size: var(--pe-font-base);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--pe-tx), border-color var(--pe-tx), transform var(--pe-tx-fast);
}

/* Image-render letter-only card: compact, centered label, no left text gap */
.pe-choices[data-layout="image"] .pe-choice {
    min-height: 56px;
    min-width: 88px;
    padding: 0.5rem 1.25rem;
    justify-content: center;
    gap: 0;
}

/* Hide native radio inside choice label — selection is purely visual via CSS state classes */
.pe-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

/* Maroon circle label (QB v2 .text-render-opt-label) */
.pe-choice-label,
.pe-choice-letter {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background-color: var(--pe-maroon);
    color: var(--pe-maroon-text);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    transition: background-color var(--pe-tx), color var(--pe-tx);
}

.pe-choice-text,
.pe-choice-body {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.6;
    word-break: break-word;
    color: var(--pe-text);
    text-align: left;
}

.pe-choices[data-layout="image"] .pe-choice-label {
    width: 32px;
    height: 32px;
    font-size: 1rem;
}

.pe-choice:hover:not(.pe-choice-disabled) {
    background-color: rgb(var(--pe-callout-bg-rgb) / 0.6);
    transform: translateX(2px);
}

.pe-choice:focus-visible {
    outline: 2px solid var(--pe-brand);
    outline-offset: 2px;
}

.pe-choice:active:not(.pe-choice-disabled) {
    transform: scale(0.995);
}

/* Selected (user pick) — primary border + subtle bg, label switches to brand */
.pe-choice.pe-choice-active,
.pe-choice.pe-choice-selected {
    border-color: var(--pe-brand);
    border-left-color: var(--pe-brand);
    background-color: var(--pe-overlay-tint);
}

.pe-choice.pe-choice-active .pe-choice-label,
.pe-choice.pe-choice-selected .pe-choice-label {
    background-color: var(--pe-brand);
    color: var(--pe-brand-accent);
}

.pe-dark .pe-choice.pe-choice-active,
.pe-dark .pe-choice.pe-choice-selected {
    border-color: var(--pe-brand-accent);
    border-left-color: var(--pe-brand-accent);
}

.pe-choice.pe-choice-disabled {
    cursor: not-allowed;
    opacity: 0.95;
    transform: none;
}

.pe-choice.pe-choice-disabled:hover {
    transform: none;
}

/* Correct — green wraps card, label green circle */
.pe-choice.pe-choice-correct,
.pe-choice.pe-choice-correct-outline {
    border-color: var(--pe-correct);
    border-left-color: var(--pe-correct);
    background-color: var(--pe-correct-bg);
}

.pe-choice.pe-choice-correct .pe-choice-label,
.pe-choice.pe-choice-correct-outline .pe-choice-label {
    background-color: var(--pe-correct);
    color: var(--pe-on-state);
}

/* Wrong — red wraps card, label red circle */
.pe-choice.pe-choice-wrong {
    border-color: var(--pe-wrong);
    border-left-color: var(--pe-wrong);
    background-color: var(--pe-wrong-bg);
}

.pe-choice.pe-choice-wrong .pe-choice-label {
    background-color: var(--pe-wrong);
    color: var(--pe-on-state);
}

/* =========================================================================
   Action row
   ========================================================================= */
.pe-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--pe-gap);
    flex-wrap: wrap;
}

.pe-action-row .pe-btn-mark {
    margin-right: auto;
}

.pe-action-row .pe-btn-primary {
    margin-left: auto;
}

.pe-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pe-gap-xs);
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    background-color: var(--pe-brand);
    color: var(--pe-brand-accent) !important;
    border: 1px solid var(--pe-brand);
    border-radius: var(--pe-radius);
    font-size: var(--pe-font-base);
    font-weight: 700 !important;
    cursor: pointer;
    transition: background-color var(--pe-tx), border-color var(--pe-tx), transform var(--pe-tx-fast), box-shadow var(--pe-tx);
    text-decoration: none;
}

.pe-btn-primary span,
.pe-btn-primary i {
    color: var(--pe-brand-accent) !important;
}

.pe-btn-primary:hover:not(:disabled),
.pe-btn-primary:hover:not(:disabled) span,
.pe-btn-primary:hover:not(:disabled) i {
    color: var(--pe-brand-accent) !important;
}

.pe-btn-primary:hover:not(:disabled) {
    background-color: var(--pe-brand);
    border-color: var(--pe-brand-accent);
    box-shadow: 0 0 0 2px rgb(var(--pe-brand-accent-rgb) / 0.35), var(--pe-shadow-md);
    filter: brightness(1.05);
}

.pe-btn-primary:focus-visible {
    outline: 2px solid var(--pe-brand-accent);
    outline-offset: 2px;
}

.pe-btn-primary:active:not(:disabled) {
    transform: scale(0.98);
}

.pe-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =========================================================================
   Indicator bar (post-submit)
   ========================================================================= */
/* Answer indicator bar — QB v2 .text-render-answer-indicator pattern.
   Centered (margin auto), fit-content, callout surface, vertical separators between items. */
.pe-indicator {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    width: fit-content;
    max-width: 100%;
    margin: 0.75rem auto 0;
    padding: 0.5rem 0.875rem;
    border-radius: var(--pe-radius);
    background-color: var(--pe-callout-bg);
    border: 1px solid var(--pe-border);
    font-size: 0.85rem;
    color: var(--pe-text-muted);
}

.pe-indicator-item {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.pe-indicator-item strong {
    color: var(--pe-text);
    font-weight: 700;
}

.pe-indicator-sep {
    width: 1px;
    height: 14px;
    background-color: var(--pe-border-strong);
    flex-shrink: 0;
}

.pe-indicator-icon-correct {
    color: var(--pe-correct);
}

.pe-indicator-icon-user {
    color: var(--pe-text-muted);
}

/* Status segment — green/red text based on container state class */
.pe-indicator.pe-indicator-correct .pe-indicator-status {
    color: var(--pe-correct);
}

.pe-indicator.pe-indicator-correct .pe-indicator-status strong {
    color: var(--pe-correct);
}

.pe-indicator.pe-indicator-wrong .pe-indicator-status {
    color: var(--pe-wrong);
}

.pe-indicator.pe-indicator-wrong .pe-indicator-status strong {
    color: var(--pe-wrong);
}

/* =========================================================================
   Bottom navigation
   ========================================================================= */
.pe-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--pe-gap);
}

.pe-nav-prev,
.pe-nav-next {
    display: inline-flex;
    align-items: center;
    gap: var(--pe-gap-xs);
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    background: transparent;
    color: var(--pe-text);
    border: 1px solid transparent;
    border-radius: var(--pe-radius-sm);
    font-size: var(--pe-font-base);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--pe-tx), border-color var(--pe-tx), color var(--pe-tx), transform var(--pe-tx-fast);
}

.pe-nav-prev:hover:not(:disabled),
.pe-nav-next:hover:not(:disabled) {
    color: var(--pe-brand);
    background-color: var(--pe-overlay-tint);
    border-color: var(--pe-brand);
}

.pe-dark .pe-nav-prev:hover:not(:disabled),
.pe-dark .pe-nav-next:hover:not(:disabled) {
    color: var(--pe-brand-accent);
    border-color: var(--pe-brand-accent);
}

.pe-nav-prev:focus-visible,
.pe-nav-next:focus-visible {
    outline: 2px solid var(--pe-brand);
    outline-offset: 2px;
}

.pe-nav-prev:disabled,
.pe-nav-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pe-nav-prev:active:not(:disabled),
.pe-nav-next:active:not(:disabled) {
    transform: scale(0.97);
}

/* Center group */
.pe-nav-center {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--pe-gap-xs);
    padding: var(--pe-gap-xs) var(--pe-gap-sm);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    background-color: var(--pe-surface);
    transition: border-color var(--pe-tx), background-color var(--pe-tx);
}

.pe-nav-center:hover {
    border-color: var(--pe-brand);
}

.pe-dark .pe-nav-center:hover {
    border-color: var(--pe-brand-accent);
}

.pe-nav-label {
    color: var(--pe-text-muted);
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0;
}

.pe-nav-input {
    width: 3.5rem;
    min-height: 36px;
    padding: 0.25rem 0.5rem;
    background-color: var(--pe-bg);
    color: var(--pe-text);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-sm);
    text-align: center;
    font-weight: 700;
    font-size: var(--pe-font-base);
    transition: border-color var(--pe-tx), background-color var(--pe-tx);
}

.pe-nav-input:focus-visible {
    outline: 2px solid var(--pe-brand);
    outline-offset: 1px;
    border-color: var(--pe-brand);
}

.pe-nav-total {
    color: var(--pe-text-muted);
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Overlay grid (hover-shown panel above center).
   Parent .pe-nav-center is the hover container. Overlay attaches at bottom:100%
   (no gap) and includes an invisible "bridge" via ::before so the cursor can
   travel from input → overlay without crossing dead pixels. */
.pe-nav-overlay {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--pe-surface);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow-lg);
    padding: var(--pe-gap-sm);
    grid-template-columns: repeat(10, auto);
    gap: var(--pe-gap-xs);
    z-index: 50;
    max-width: min(95vw, 640px);
    margin-bottom: 0.5rem;
}

.pe-nav-overlay::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.5rem;
    height: 0.5rem;
}

@media (hover: hover) and (pointer: fine) {
    .pe-nav-center:hover .pe-nav-overlay,
    .pe-nav-center:focus-within .pe-nav-overlay {
        display: grid;
    }
}

.pe-nav-overlay.pe-active {
    display: grid;
}

.pe-nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--pe-radius-sm);
    border: 1px solid var(--pe-border);
    background-color: var(--pe-surface);
    color: var(--pe-text);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--pe-tx), border-color var(--pe-tx), color var(--pe-tx), transform var(--pe-tx-fast);
    user-select: none;
    box-shadow: 0 1px 2px rgb(var(--pe-shadow-rgb) / 0.08);
}

.pe-nav-item:hover:not(.pe-nav-item-active):not(.pe-nav-item-disabled) {
    background-color: var(--pe-overlay-tint);
    border-color: var(--pe-brand);
    color: var(--pe-brand);
}

.pe-dark .pe-nav-item:hover:not(.pe-nav-item-active):not(.pe-nav-item-disabled) {
    color: var(--pe-brand-accent);
    border-color: var(--pe-brand-accent);
}

.pe-nav-item:focus-visible {
    outline: 2px solid var(--pe-brand);
    outline-offset: 2px;
}

.pe-nav-item.pe-nav-item-solved {
    border-color: var(--pe-brand);
    color: var(--pe-brand);
}

.pe-dark .pe-nav-item.pe-nav-item-solved {
    border-color: var(--pe-brand-accent);
    color: var(--pe-brand-accent);
}

.pe-nav-item.pe-nav-item-correct {
    border-color: var(--pe-correct);
    color: var(--pe-correct);
    background-color: var(--pe-correct-bg);
}

.pe-nav-item.pe-nav-item-wrong {
    border-color: var(--pe-wrong);
    color: var(--pe-wrong);
    background-color: var(--pe-wrong-bg);
}

.pe-nav-item.pe-nav-item-empty {
    color: var(--pe-text-muted);
    border-style: dashed;
}

.pe-nav-item.pe-nav-item-active {
    background-color: var(--pe-brand);
    border-color: var(--pe-brand);
    color: var(--pe-brand-accent);
    cursor: default;
}

.pe-nav-item.pe-nav-item-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pe-nav-item-bookmark {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pe-brand-accent);
    font-size: 0.75rem;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgb(var(--pe-shadow-rgb) / 0.3));
}

.pe-nav-item-eye {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 0.625rem;
    color: var(--pe-text-muted);
    opacity: 0.6;
    pointer-events: none;
}

/* =========================================================================
   Lightbox
   ========================================================================= */
.pe-lightbox {
    position: fixed;
    inset: 0;
    background-color: var(--pe-backdrop);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--pe-gap);
    cursor: zoom-out;
}

.pe-lightbox.pe-active {
    display: flex;
}

.pe-lightbox-img {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow-lg);
    background-color: var(--pe-surface);
    cursor: default;
}

.pe-lightbox-close {
    position: absolute;
    top: var(--pe-gap);
    right: var(--pe-gap);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--pe-surface);
    color: var(--pe-text);
    border: 1px solid var(--pe-border);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--pe-tx), color var(--pe-tx), transform var(--pe-tx-fast);
}

.pe-lightbox-close:hover {
    background-color: var(--pe-wrong);
    color: var(--pe-surface);
    border-color: var(--pe-wrong);
}

.pe-lightbox-close:focus-visible {
    outline: 2px solid var(--pe-brand-accent);
    outline-offset: 2px;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
    .pe-container {
        max-width: 100%;
        margin: 0 var(--pe-gap-sm);
    }

    .pe-nav-overlay {
        grid-template-columns: repeat(8, minmax(40px, auto));
    }
}

@media (max-width: 640px) {
    .pe-section {
        padding: var(--pe-gap) 0;
    }

    .pe-container {
        margin: 0 var(--pe-gap-xs);
        padding: var(--pe-gap);
        gap: var(--pe-gap-sm);
    }

    .pe-title {
        font-size: 1.25rem;
    }

    .pe-header {
        gap: var(--pe-gap-sm);
    }

    .pe-section-tabs {
        gap: var(--pe-gap-sm);
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }

    .pe-section-tab {
        white-space: nowrap;
    }

    .pe-question-header {
        gap: var(--pe-gap-sm);
    }

    .pe-choice {
        font-size: 0.95rem;
        padding: 0.75rem 0.875rem;
    }

    .pe-action-row {
        justify-content: stretch;
    }

    .pe-btn-primary {
        width: 100%;
    }

    .pe-indicator {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0.375rem;
    }

    .pe-indicator-sep {
        display: none;
    }

    .pe-bottom-nav {
        gap: var(--pe-gap-sm);
        justify-content: space-between;
    }

    .pe-nav-prev span,
    .pe-nav-next span {
        display: none;
    }

    .pe-nav-overlay {
        grid-template-columns: repeat(5, minmax(40px, auto));
        max-width: 90vw;
    }

    /* Mobile: hover unreliable — open via .pe-active toggle (JS) */
    .pe-nav-center:hover .pe-nav-overlay {
        display: none;
    }

    .pe-nav-overlay.pe-active {
        display: grid;
    }

    .pe-nav-item {
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
    }

    .pe-lightbox-close {
        top: var(--pe-gap-sm);
        right: var(--pe-gap-sm);
    }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .pe-section,
    .pe-theme-toggle,
    .pe-section-tab,
    .pe-btn-mark,
    .pe-choice,
    .pe-btn-primary,
    .pe-nav-prev,
    .pe-nav-next,
    .pe-nav-center,
    .pe-nav-input,
    .pe-nav-item,
    .pe-image-render img,
    .pe-lightbox-close {
        transition: none !important;
    }

    .pe-theme-toggle:active,
    .pe-btn-mark:active,
    .pe-choice:active,
    .pe-btn-primary:active,
    .pe-nav-prev:active,
    .pe-nav-next:active,
    .pe-nav-item:active {
        transform: none;
    }
}

/* =========================================================================
   Lock placeholder action row + result modal
   ========================================================================= */
.pe-lock-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pe-gap-sm);
    margin-top: var(--pe-gap);
}

/* Result modal (rendered inside SweetAlert2 popup). SweetAlert applies its
   own light-themed defaults; override every text/control surface with our
   tokens so it adapts automatically to dark mode. */
.pe-result-swal-popup {
    border-radius: var(--pe-radius-lg) !important;
    background-color: var(--pe-surface) !important;
    color: var(--pe-text) !important;
    border: 1px solid var(--pe-border-strong) !important;
}

.pe-result-swal-popup .swal2-title,
.pe-result-swal-popup .swal2-html-container {
    color: var(--pe-text) !important;
}

.pe-result-swal-popup .swal2-close {
    color: var(--pe-text-muted) !important;
}

.pe-result-swal-popup .swal2-close:hover {
    color: var(--pe-wrong) !important;
}

/* Dark variant — popup gets `.pe-dark` class via Swal didOpen callback so
   the same token override scope applies as on the rest of the page. */
.pe-dark .pe-result-swal-popup,
.pe-result-swal-popup.pe-dark {
    background-color: var(--pe-surface) !important;
    color: var(--pe-text) !important;
    border-color: var(--pe-border-strong) !important;
}

.pe-result-swal-popup.pe-dark .swal2-title,
.pe-result-swal-popup.pe-dark .swal2-html-container {
    color: var(--pe-text) !important;
}

.pe-result-swal-popup.pe-dark .swal2-close {
    color: var(--pe-text-muted) !important;
}

.pe-result-swal-popup.pe-dark .pe-result-modal,
.pe-result-swal-popup.pe-dark .pe-result-modal-section-name,
.pe-result-swal-popup.pe-dark .pe-result-modal-cta h3 {
    color: var(--pe-text) !important;
}

.pe-result-swal-popup.pe-dark .pe-result-modal-empty,
.pe-result-swal-popup.pe-dark .pe-result-modal-section-total,
.pe-result-swal-popup.pe-dark .pe-result-modal-bar-label,
.pe-result-swal-popup.pe-dark .pe-result-modal-cta p {
    color: var(--pe-text-muted) !important;
}

.pe-result-swal-popup.pe-dark .pe-result-modal-section {
    background-color: var(--pe-callout-bg) !important;
    border-color: var(--pe-border) !important;
}

.pe-result-swal-popup.pe-dark .pe-result-modal-section-head {
    border-bottom-color: var(--pe-border) !important;
}

.pe-result-swal-popup.pe-dark .pe-result-modal-bar {
    background-color: var(--pe-surface) !important;
    border-color: var(--pe-border) !important;
}

.pe-result-swal-popup.pe-dark .pe-result-modal-bar-correct {
    border-color: var(--pe-correct) !important;
    background-color: var(--pe-correct-bg) !important;
}

.pe-result-swal-popup.pe-dark .pe-result-modal-bar-wrong {
    border-color: var(--pe-wrong) !important;
    background-color: var(--pe-wrong-bg) !important;
}

.pe-result-swal-popup.pe-dark .pe-result-modal-bar-value {
    color: var(--pe-text) !important;
}

.pe-result-swal-popup.pe-dark .pe-result-modal-bar-correct .pe-result-modal-bar-value {
    color: var(--pe-correct) !important;
}

.pe-result-swal-popup.pe-dark .pe-result-modal-bar-wrong .pe-result-modal-bar-value {
    color: var(--pe-wrong) !important;
}

.pe-result-swal-popup.pe-dark .pe-result-modal-cta {
    border-top-color: var(--pe-border-strong) !important;
}

/* Backdrop also needs darkening so the popup edge doesn't glow. */
.pe-dark .swal2-container.swal2-backdrop-show {
    background-color: var(--pe-backdrop-strong) !important;
}

/* =========================================================================
   GLOBAL DARK-MODE OVERRIDES — every preview surface, force-overridden so
   the host theme cannot bleed light colours into the page in dark mode.
   ========================================================================= */

/* The host site applies `body { background: #f5f5f5; }` which leaves the
   gutters around our page light even when the user toggles dark mode.
   Force the entire body surface to our dark page background while leaving
   text/header/footer styling to the layout. */
body.pe-dark {
    background-color: var(--pe-bg) !important;
    color: var(--pe-text) !important;
}

/* Re-declare every dark token directly on the .pe-section subtree so the
   host theme's :root variables can never bleed through to our elements.
   This is the single source of truth for dark mode token resolution. */
html.pe-dark .pe-section,
body.pe-dark .pe-section,
.pe-section.pe-dark,
html.pe-dark .swal2-container,
body.pe-dark .swal2-container {
    --pe-bg-rgb: 11 13 18;
    --pe-surface-rgb: 22 25 34;
    --pe-border-rgb: 42 47 58;
    --pe-border-strong-rgb: 71 85 105;
    --pe-text-rgb: 226 232 240;
    --pe-text-muted-rgb: 148 163 184;
    --pe-shadow-rgb: 0 0 0;
    --pe-correct-bg-rgb: 5 46 22;
    --pe-wrong-bg-rgb: 69 10 10;
    --pe-locked-bg-rgb: 30 41 59;
    --pe-maroon-rgb: 139 58 74;
    --pe-callout-bg-rgb: 40 53 72;

    --pe-bg: rgb(var(--pe-bg-rgb));
    --pe-surface: rgb(var(--pe-surface-rgb));
    --pe-border: rgb(var(--pe-border-rgb));
    --pe-border-strong: rgb(var(--pe-border-strong-rgb));
    --pe-text: rgb(var(--pe-text-rgb));
    --pe-text-muted: rgb(var(--pe-text-muted-rgb));
    --pe-correct-bg: rgb(var(--pe-correct-bg-rgb));
    --pe-wrong-bg: rgb(var(--pe-wrong-bg-rgb));
    --pe-locked-bg: rgb(var(--pe-locked-bg-rgb));
    --pe-maroon: rgb(var(--pe-maroon-rgb));
    --pe-callout-bg: rgb(var(--pe-callout-bg-rgb));
    --pe-shadow-sm: 0 1px 2px rgb(var(--pe-shadow-rgb) / 0.4);
    --pe-shadow-md: 0 4px 12px rgb(var(--pe-shadow-rgb) / 0.45);
    --pe-shadow-lg: 0 10px 30px rgb(var(--pe-shadow-rgb) / 0.55);
    --pe-overlay-tint: rgb(var(--pe-brand-accent-rgb) / 0.12);
}

body.pe-dark .pe-section {
    background-color: var(--pe-bg) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-container,
body.pe-dark .pe-info-card {
    background-color: var(--pe-surface) !important;
    border-color: var(--pe-border) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-btn-cta-secondary {
    background-color: var(--pe-surface) !important;
    border-color: var(--pe-border-strong) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-btn-result {
    background-color: var(--pe-surface) !important;
    border-color: var(--pe-border-strong) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-choice,
body.pe-dark .pe-choice.pe-choice-text {
    background-color: var(--pe-callout-bg) !important;
    border-top-color: var(--pe-border) !important;
    border-right-color: var(--pe-border) !important;
    border-bottom-color: var(--pe-border) !important;
    border-left-color: var(--pe-maroon) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-nav-center {
    background-color: var(--pe-surface) !important;
    border-color: var(--pe-border) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-nav-input {
    background-color: var(--pe-bg) !important;
    border-color: var(--pe-border) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-badge {
    background-color: var(--pe-callout-bg) !important;
    color: var(--pe-text) !important;
    border-color: var(--pe-border) !important;
}

body.pe-dark .pe-text-render-question,
body.pe-dark .pe-text-render-paragraph {
    background-color: var(--pe-callout-bg) !important;
    border-left-color: var(--pe-question-accent) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-divider {
    border-top-color: var(--pe-border-strong) !important;
}

body.pe-dark .pe-title,
body.pe-dark .pe-q-number,
body.pe-dark .pe-info-headline {
    color: var(--pe-text) !important;
}

body.pe-dark .pe-subtitle,
body.pe-dark .pe-subtitle-count-label {
    color: var(--pe-text-muted) !important;
}

body.pe-dark .pe-badge {
    background-color: var(--pe-callout-bg) !important;
    color: var(--pe-text) !important;
    border-color: var(--pe-border) !important;
}

body.pe-dark .pe-badge-public {
    border-color: var(--pe-correct) !important;
    color: var(--pe-correct) !important;
}

body.pe-dark .pe-badge-public.pe-badge-private {
    border-color: var(--pe-locked) !important;
    color: var(--pe-locked) !important;
}

body.pe-dark .pe-question-body,
body.pe-dark .pe-image-render,
body.pe-dark .pe-text-render {
    background-color: transparent !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-image-render img {
    background-color: var(--pe-surface) !important;
    border-color: transparent !important;
}

body.pe-dark .pe-text-render-paragraph,
body.pe-dark .pe-text-render-question {
    background-color: var(--pe-callout-bg) !important;
    border-left-color: var(--pe-question-accent) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-lock {
    background-color: var(--pe-locked-bg) !important;
    border-color: var(--pe-border-strong) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-lock-text {
    color: var(--pe-text) !important;
}

body.pe-dark .pe-lock-subtext,
body.pe-dark .pe-lock-inline-eye {
    color: var(--pe-text-muted) !important;
}

body.pe-dark .pe-choice {
    background-color: var(--pe-callout-bg) !important;
    border-top-color: var(--pe-border) !important;
    border-right-color: var(--pe-border) !important;
    border-bottom-color: var(--pe-border) !important;
    border-left-color: var(--pe-maroon) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-choice.pe-choice-active,
body.pe-dark .pe-choice.pe-choice-selected {
    background-color: rgb(var(--pe-brand-accent-rgb) / 0.12) !important;
    border-color: var(--pe-brand-accent) !important;
    border-left-color: var(--pe-brand-accent) !important;
}

body.pe-dark .pe-choice.pe-choice-correct,
body.pe-dark .pe-choice.pe-choice-correct-outline {
    background-color: var(--pe-correct-bg) !important;
    border-color: var(--pe-correct) !important;
    border-left-color: var(--pe-correct) !important;
}

body.pe-dark .pe-choice.pe-choice-wrong {
    background-color: var(--pe-wrong-bg) !important;
    border-color: var(--pe-wrong) !important;
    border-left-color: var(--pe-wrong) !important;
}

body.pe-dark .pe-section-tabs {
    background-color: transparent !important;
}

body.pe-dark .pe-section-tab {
    color: var(--pe-text-muted) !important;
    background-color: transparent !important;
}

body.pe-dark .pe-section-tab:hover {
    color: var(--pe-text) !important;
    background-color: var(--pe-overlay-tint) !important;
}

body.pe-dark .pe-bottom-nav {
    background-color: transparent !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-nav-prev,
body.pe-dark .pe-nav-next {
    background-color: transparent !important;
    color: var(--pe-text) !important;
    border-color: var(--pe-border) !important;
}

body.pe-dark .pe-nav-center {
    background-color: var(--pe-surface) !important;
    border-color: var(--pe-border) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-nav-label,
body.pe-dark .pe-nav-total {
    color: var(--pe-text-muted) !important;
}

body.pe-dark .pe-nav-input {
    background-color: var(--pe-bg) !important;
    border-color: var(--pe-border) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-nav-overlay {
    background-color: var(--pe-surface) !important;
    border-color: var(--pe-border) !important;
}

body.pe-dark .pe-nav-item {
    background-color: var(--pe-surface) !important;
    border-color: var(--pe-border) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-nav-item.pe-nav-item-correct {
    background-color: var(--pe-correct-bg) !important;
    border-color: var(--pe-correct) !important;
    color: var(--pe-correct) !important;
}

body.pe-dark .pe-nav-item.pe-nav-item-wrong {
    background-color: var(--pe-wrong-bg) !important;
    border-color: var(--pe-wrong) !important;
    color: var(--pe-wrong) !important;
}

body.pe-dark .pe-nav-item.pe-nav-item-active {
    background-color: var(--pe-brand) !important;
    border-color: var(--pe-brand-accent) !important;
    color: var(--pe-brand-accent) !important;
}

body.pe-dark .pe-indicator {
    background-color: var(--pe-callout-bg) !important;
    border-color: var(--pe-border) !important;
    color: var(--pe-text-muted) !important;
}

body.pe-dark .pe-indicator-item strong {
    color: var(--pe-text) !important;
}

body.pe-dark .pe-indicator-sep {
    background-color: var(--pe-border-strong) !important;
}

body.pe-dark .pe-info-eyebrow {
    background-color: var(--pe-brand) !important;
    color: var(--pe-brand-accent) !important;
}

body.pe-dark .pe-info-lede {
    color: var(--pe-text) !important;
}

body.pe-dark .pe-info-compare-col li {
    color: var(--pe-text) !important;
}

body.pe-dark .pe-btn-mark {
    background-color: var(--pe-callout-bg) !important;
    border-color: var(--pe-border-strong) !important;
    color: var(--pe-text) !important;
}

body.pe-dark .pe-btn-result {
    background-color: var(--pe-surface) !important;
    border-color: var(--pe-border-strong) !important;
    color: var(--pe-text) !important;
}

/* =========================================================================
   Dark-mode override for SweetAlert2's own class names. The custom popup
   class (.pe-result-swal-popup) sometimes loses to Swal's internal cascade,
   so target Swal's primitives directly under body.pe-dark too.
   ========================================================================= */
body.pe-dark .swal2-popup {
    background-color: var(--pe-surface) !important;
    color: var(--pe-text) !important;
    border: 1px solid var(--pe-border-strong) !important;
}

body.pe-dark .swal2-title,
body.pe-dark .swal2-html-container {
    color: var(--pe-text) !important;
}

body.pe-dark .swal2-close {
    color: var(--pe-text-muted) !important;
}

body.pe-dark .swal2-close:hover {
    color: var(--pe-wrong) !important;
}

body.pe-dark .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--pe-correct) !important;
}

body.pe-dark .swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--pe-correct) !important;
}

body.pe-dark .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--pe-wrong) !important;
}

body.pe-dark .swal2-icon.swal2-error {
    border-color: var(--pe-wrong) !important;
    color: var(--pe-wrong) !important;
}

body.pe-dark .swal2-icon.swal2-info {
    border-color: var(--pe-question-accent) !important;
    color: var(--pe-question-accent) !important;
}

body.pe-dark .swal2-styled.swal2-confirm,
body.pe-dark .swal2-actions .pe-btn-primary {
    background-color: var(--pe-brand) !important;
    color: var(--pe-brand-accent) !important;
    border-color: var(--pe-brand) !important;
}

body.pe-dark .swal2-container.swal2-backdrop-show {
    background-color: var(--pe-backdrop-strong) !important;
}

.pe-result-modal {
    text-align: left;
    color: var(--pe-text);
}

.pe-result-modal-empty {
    color: var(--pe-text-muted);
    text-align: center;
    margin: var(--pe-gap) 0;
}

.pe-result-modal-stats {
    display: flex;
    flex-direction: column;
    gap: var(--pe-gap-sm);
    margin-bottom: var(--pe-gap);
}

.pe-result-modal-section {
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    background-color: var(--pe-callout-bg);
    padding: 0.75rem 1rem;
}

.pe-result-modal-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--pe-border);
}

.pe-result-modal-section-name {
    font-weight: 700;
    color: var(--pe-text);
    font-size: 0.95rem;
}

.pe-result-modal-section-total {
    font-size: 0.8rem;
    color: var(--pe-text-muted);
}

.pe-result-modal-bars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.pe-result-modal-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    border-radius: var(--pe-radius-sm);
    border: 1px solid var(--pe-border);
    background-color: var(--pe-surface);
}

.pe-result-modal-bar-label {
    font-size: 0.75rem;
    color: var(--pe-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pe-result-modal-bar-value {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0.125rem;
}

.pe-result-modal-bar-correct .pe-result-modal-bar-value {
    color: var(--pe-correct);
}

.pe-result-modal-bar-correct {
    border-color: var(--pe-correct);
    background-color: var(--pe-correct-bg);
}

.pe-result-modal-bar-wrong .pe-result-modal-bar-value {
    color: var(--pe-wrong);
}

.pe-result-modal-bar-wrong {
    border-color: var(--pe-wrong);
    background-color: var(--pe-wrong-bg);
}

.pe-result-modal-bar-empty .pe-result-modal-bar-value {
    color: var(--pe-text-muted);
}

.pe-result-modal-cta {
    margin-top: var(--pe-gap);
    padding-top: var(--pe-gap);
    border-top: 1px solid var(--pe-border-strong);
    text-align: center;
}

.pe-result-modal-cta h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pe-text);
}

.pe-result-modal-cta p {
    margin: 0 0 var(--pe-gap);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--pe-text-muted);
}

.pe-result-modal-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pe-gap-sm);
}

/* Error card — sinav verisi yuklenemediginde sinav konteyneri d-none, bu kart gorunur. */
.pe-error-card {
    margin: 48px auto;
    max-width: 560px;
    padding: 40px 32px;
    text-align: center;
    background: var(--pe-surface);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-lg);
    color: var(--pe-text);
    box-shadow: var(--pe-shadow-md);
}

.pe-error-icon {
    font-size: 48px;
    color: var(--pe-wrong);
    margin-bottom: 16px;
    display: inline-block;
}

.pe-error-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--pe-text);
}

.pe-error-text {
    font-size: 15px;
    line-height: 1.5;
    color: var(--pe-text-muted);
    margin: 0 0 24px;
}

.pe-error-back {
    display: inline-block;
    padding: 10px 24px;
    background: var(--pe-brand);
    color: var(--pe-on-state);
    text-decoration: none;
    border-radius: var(--pe-radius-sm);
    font-weight: 600;
    transition: filter 0.15s ease;
}

.pe-error-back:hover,
.pe-error-back:focus-visible {
    filter: brightness(0.92);
    color: var(--pe-on-state);
}