:root {
            --navy:        #0f1b35;
            --navy-mid:    #162347;
            --navy-light:  #1e3060;
            --gold:        #c9a84c;
            --gold-light:  #e8c86e;
            --gold-pale:   #fdf4e0;
            --cream:       #f7f3ec;
            --white:       #ffffff;
            --ink:         #0f1b35;
            --ink-mid:     #374151;
            --ink-muted:   #6b7280;
            --border:      #e2ddd4;
            --green:       #1a7f5a;
            --green-light: #d1fae5;
            --red:         #c0392b;
            --red-light:   #fce4e4;
            --shadow-sm:   0 1px 3px rgba(15,27,53,0.08);
            --shadow-md:   0 4px 16px rgba(15,27,53,0.12);
            --shadow-lg:   0 12px 40px rgba(15,27,53,0.18);
            --radius:      10px;
            --radius-lg:   16px;
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html.theme-switch-instant *,
        html.theme-switch-instant *::before,
        html.theme-switch-instant *::after {
            transition: none !important;
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--cream);
            color: var(--ink);
            line-height: 1.6;
            min-height: 100vh;
            padding-top: 64px;
        }

        .q-text,
        .option-item,
        .review-q-text,
        .answer-tag,
        .peo-question-text,
        .peo-option-row,
        .pe-question-text,
        .pe-option,
        .daily-quote-track {
            font-family: 'Noto Sans Tibetan', 'Jomolhari', 'DDC Uchen', 'DM Sans', sans-serif;
            font-variant-ligatures: normal;
            font-feature-settings: normal;
            letter-spacing: 0;
            text-transform: none;
        }

        /* ─── LIGHT DECORATIVE BACKGROUND ──────────── */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image:
                radial-gradient(circle at 78% 20%, rgba(255,255,255,0.42) 0 8%, transparent 18%),
                radial-gradient(circle at 22% 72%, rgba(15,27,53,0.18) 0 16%, transparent 30%),
                linear-gradient(135deg, rgba(255, 214, 0, 0.72) 0 49%, rgba(255, 112, 67, 0.62) 50% 100%);
            background-size: cover, cover, cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.18;
            pointer-events: none;
            z-index: 0;
        }

        /* ─── LOADING OVERLAY ───────────────────────── */
        .loading-overlay {
            position: fixed;
            inset: 0;
            background: rgba(247,243,236,0.92);
            backdrop-filter: blur(6px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            z-index: 9999;
            transition: opacity 0.3s;
        }

        .loading-overlay.hidden { opacity: 0; pointer-events: none; }

        .loader-emblem {
            width: 56px;
            height: 56px;
            position: relative;
        }

        .loader-ring {
            width: 56px;
            height: 56px;
            border: 3px solid var(--border);
            border-top-color: var(--gold);
            border-radius: 50%;
            animation: spin 0.9s linear infinite;
            position: absolute;
            inset: 0;
        }

        .loader-dot {
            width: 10px;
            height: 10px;
            background: var(--navy);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        @keyframes spin { to { transform: rotate(360deg); } }

        .loader-label {
            font-size: 13px;
            font-weight: 500;
            color: var(--ink-muted);
            letter-spacing: 0.4px;
        }

        /* ─── HEADER ────────────────────────────────── */
        header {
            background: var(--navy);
            color: var(--white);
            padding: 0 28px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 20px rgba(15,27,53,0.25);
        }

        .header-brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .brand-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .brand-text h1 {
            font-family: 'DM Serif Display', serif;
            font-size: 18px;
            font-weight: 400;
            letter-spacing: 0.3px;
            color: var(--white);
            line-height: 1.2;
        }

        .brand-text p {
            font-size: 11px;
            color: rgba(255,255,255,0.45);
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .timer-badge {
            display: none;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.18);
            padding: 7px 14px;
            border-radius: 7px;
            font-size: 15px;
            font-weight: 600;
            color: var(--white);
            letter-spacing: 1px;
        }

        .timer-badge.urgent { color: #ff6b6b; border-color: rgba(255,107,107,0.4); animation: pulse-timer 1s ease-in-out infinite; }
        .timer-badge.show { display: flex; }

        .timer-icon { font-size: 13px; opacity: 0.7; }

        @keyframes pulse-timer {
            0%,100% { background: rgba(255,107,107,0.12); }
            50%      { background: rgba(255,107,107,0.22); }
        }

        /* ─── BUTTONS ───────────────────────────────── */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            font-family: 'DM Sans', sans-serif;
            font-size: 12.5px;
            font-weight: 600;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            transition: all 0.18s ease;
            letter-spacing: 0.2px;
            white-space: nowrap;
        }

        .btn:disabled { opacity: 0.45; cursor: not-allowed; }
        .btn:not(:disabled):hover { transform: translateY(-1px); }
        .btn:not(:disabled):active { transform: translateY(0); }

        .btn-ghost {
            background: transparent;
            color: rgba(255,255,255,0.85);
            border: 1px solid rgba(255,255,255,0.2);
        }
        .btn-ghost:not(:disabled):hover { background: rgba(255,255,255,0.1); color: white; }

        .btn-gold {
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
            color: var(--navy);
            box-shadow: 0 2px 8px rgba(201,168,76,0.35);
        }
        .btn-gold:not(:disabled):hover { box-shadow: 0 4px 16px rgba(201,168,76,0.45); }

        .btn-navy {
            background: var(--navy);
            color: var(--white);
            box-shadow: var(--shadow-sm);
        }
        .btn-navy:not(:disabled):hover { background: var(--navy-mid); box-shadow: var(--shadow-md); }

        .btn-outline {
            background: transparent;
            color: var(--navy);
            border: 1.5px solid var(--border);
        }
        .btn-outline:not(:disabled):hover { border-color: var(--navy); background: rgba(15,27,53,0.04); }

        .btn-green {
            background: linear-gradient(135deg, #1a7f5a 0%, #22a876 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(26,127,90,0.3);
        }
        .btn-green:not(:disabled):hover { box-shadow: 0 4px 16px rgba(26,127,90,0.4); }

        .btn-danger-sm {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 9px;
            font-size: 11.5px;
            font-weight: 600;
            background: var(--red-light);
            color: var(--red);
            border: 1px solid rgba(192,57,43,0.2);
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.15s;
        }
	        .btn-danger-sm:hover { background: var(--red); color: white; }

	        .btn-view-sm {
	            display: inline-flex;
	            align-items: center;
	            gap: 4px;
	            padding: 4px 10px;
	            font-size: 11.5px;
	            font-weight: 700;
	            background: rgba(15,27,53,0.06);
	            color: var(--navy);
	            border: 1px solid rgba(15,27,53,0.14);
	            border-radius: 5px;
	            cursor: pointer;
	            transition: all 0.15s;
	        }
	        .btn-view-sm:hover { background: var(--navy); color: white; }

        .btn-full { width: 100%; justify-content: center; }

        #start-btn {
            width: min(64%, 260px);
            min-width: 190px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
        }

        /* ─── PANELS / CARDS ────────────────────────── */
        .page-content {
            position: relative;
            z-index: 1;
        }

        #setup-view {
            position: fixed;
            inset: 64px 0 0;
            overflow: hidden;
            z-index: 2;
        }

        .panel {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            padding: 32px 28px;
            max-width: 580px;
            margin: 40px auto;
            animation: fadeUp 0.35s ease both;
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes questionContentFadeIn {
            from { opacity: 0; transform: translateY(2px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .panel-header {
            margin-bottom: 26px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 18px;
        }

        .panel-header h2 {
            font-family: 'DM Serif Display', serif;
            font-size: 22px;
            font-weight: 400;
            color: var(--navy);
        }

        .panel-header p {
            font-size: 13px;
            color: var(--ink-muted);
            margin-top: 4px;
        }

        /* ─── FORMS ─────────────────────────────────── */
        .form-group { margin-bottom: 18px; }

        .form-group label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink-muted);
            text-transform: uppercase;
            letter-spacing: 0.6px;
            margin-bottom: 7px;
        }

        .form-control {
            width: 100%;
            padding: 11px 14px;
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            color: var(--ink);
            background: var(--cream);
            border: 1.5px solid var(--border);
            border-radius: 8px;
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

	        .form-control:focus {
	            border-color: var(--navy);
	            background: var(--white);
	            box-shadow: 0 0 0 3px rgba(15,27,53,0.07);
	        }

	        .form-control[readonly] {
	            cursor: default;
	            color: var(--navy);
	            font-weight: 700;
	        }

	        textarea.form-control { resize: vertical; min-height: 90px; }

	        .form-help {
	            font-size: 12px;
	            color: var(--ink-muted);
	            line-height: 1.55;
	            margin: -8px 0 12px;
	        }

	        .bulk-import-box {
	            padding-top: 2px;
	        }

	        textarea.bulk-textarea {
	            min-height: 260px;
	            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	            font-size: 12px;
	            line-height: 1.5;
	        }

        .row-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        @media (max-width: 500px) { .row-2 { grid-template-columns: 1fr; } }

        /* ─── SETUP CARD ────────────────────────────── */
        .setup-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--gold-pale);
            border: 1px solid rgba(201,168,76,0.3);
            color: #8b6a1e;
            font-size: 12px;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 20px;
            margin-bottom: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .is-hidden { display: none; }
        .is-invisible { visibility: hidden; }
        .panel-narrow { max-width: 520px; }
        .u-mt-6 { margin-top: 6px; }
        .progress-bar-fill-zero { width: 0%; }
        .pe-online-breakdown-text {
            font-size: 12.5px;
            color: #8a92a6;
            margin: -4px 0 18px;
        }
        .q-audio-timer.is-hidden,
        .normal-inline-submit-btn.is-hidden,
        .normal-submit-hint.is-hidden {
            display: none !important;
        }
        .omr-hint-copy {
            opacity: 0.5;
            font-size: 12px;
        }
        .pe-card-thumb {
            width: 44px;
            height: 44px;
            object-fit: cover;
            border-radius: 6px;
            flex-shrink: 0;
        }
        .accent-red { --clr: #f44336; --hover-clr: #f44336; }
        .accent-sky { --clr: #38bdf8; --hover-clr: #38bdf8; }
        .accent-cyan { --clr: #00bcd4; --hover-clr: #00bcd4; }
        .accent-green { --clr: #4caf50; --hover-clr: #4caf50; }
        .accent-purple { --clr: #9c27b0; --hover-clr: #9c27b0; }
        .accent-orange { --clr: #ff9800; --hover-clr: #ff9800; }

        /* ─── EYE-FRIENDLY PUBLIC PORTAL THEME ─────── */
        body.dark-theme {
            background: #111827;
            color: #e5e7eb;
        }

        body.dark-theme::before {
            background-image:
                radial-gradient(circle at 78% 20%, rgba(232,200,110,0.14) 0 9%, transparent 24%),
                radial-gradient(circle at 18% 78%, rgba(56,189,248,0.10) 0 13%, transparent 30%),
                linear-gradient(135deg, rgba(17,24,39,0.98) 0%, rgba(15,23,42,0.96) 54%, rgba(31,41,55,0.98) 100%);
            opacity: 1;
        }

        body.dark-theme #setup-view .panel,
        body.dark-theme .question-card,
        body.dark-theme .sidebar-card,
        body.dark-theme .results-header-card,
        body.dark-theme .result-stat-card,
        body.dark-theme #review-container .question-card {
            background: rgba(17,24,39,0.92);
            border-color: rgba(148,163,184,0.22);
            box-shadow: 0 18px 48px rgba(0,0,0,0.32);
            color: #e5e7eb;
        }

        body.dark-theme #setup-view .panel-header,
        body.dark-theme .nav-actions,
        body.dark-theme .sidebar-card-header {
            border-color: rgba(148,163,184,0.18);
        }

        body.dark-theme #setup-view .panel-header h2,
        body.dark-theme .q-text,
        body.dark-theme .option-item,
        body.dark-theme .stat-num,
        body.dark-theme .score-fraction,
        body.dark-theme .score-pct,
        body.dark-theme .results-title,
        body.dark-theme .review-section-title {
            color: #f8fafc;
        }

        body.dark-theme #setup-view .panel-header p,
        body.dark-theme .form-group label,
        body.dark-theme .stat-lbl,
        body.dark-theme .sidebar-card-header,
        body.dark-theme .results-subtitle,
        body.dark-theme .omr-q-label {
            color: #aab6c8;
        }

        body.dark-theme .form-control,
        body.dark-theme .option-item,
        body.dark-theme .q-image,
        body.dark-theme .q-image-wrap {
            background: rgba(30,41,59,0.78);
            border-color: rgba(148,163,184,0.22);
            color: #f8fafc;
        }

        body.dark-theme .form-control:focus {
            background: rgba(15,23,42,0.95);
            border-color: var(--gold);
            box-shadow: 0 0 0 3px rgba(201,168,76,0.18);
        }

        body.dark-theme .form-control[readonly] {
            color: var(--gold-light);
        }

        body.dark-theme .setup-badge,
        body.dark-theme .q-category-tag {
            background: rgba(201,168,76,0.16);
            border-color: rgba(201,168,76,0.32);
            color: var(--gold-light);
        }

        body.dark-theme .option-item.option-readonly:hover {
            background: rgba(30,41,59,0.78);
            border-color: rgba(148,163,184,0.22);
        }

        body.dark-theme .btn-outline,
        body.dark-theme .peo-btn-prev {
            color: #f8fafc;
            border-color: rgba(226,232,240,0.72);
            background: transparent;
        }

        body.dark-theme .btn:disabled {
            opacity: 0.86;
            color: #dbe5f4;
            border-color: rgba(226,232,240,0.44);
        }

        body.dark-theme .btn-nav-hint,
        body.dark-theme .btn-nav-hint span {
            color: #cbd5e1 !important;
        }

        body.dark-theme .btn-outline:not(:disabled):hover,
        body.dark-theme .peo-btn-prev:not(:disabled):hover {
            background: rgba(255,255,255,0.08);
            border-color: var(--gold-light);
        }

        body.dark-theme .option-item.selected {
            background: rgba(201,168,76,0.16);
            border-color: var(--gold-light);
            color: #fff7d6;
        }

        body.dark-theme .option-alpha,
        body.dark-theme .omr-bubble {
            color: #f8fafc;
            border-color: rgba(226,232,240,0.82);
        }

        body.dark-theme .omr-bubble {
            background: rgba(30,41,59,0.78);
            font-weight: 800;
        }

        body.dark-theme .omr-row {
            border-color: rgba(226,232,240,0.2);
        }

        body.dark-theme .omr-row.active,
        body.dark-theme .stat-cell {
            background: rgba(255,255,255,0.08);
        }

        body.dark-theme .stats-row {
            background: rgba(226,232,240,0.2);
            border-top-color: rgba(226,232,240,0.22);
        }

        body.dark-theme .normal-sidebar-submit-wrap,
        body.dark-theme #normal-question-card > .nav-actions {
            background: rgba(17,24,39,0.96);
        }

        body.dark-theme .stat-num {
            color: #ffffff;
        }

        body.dark-theme .stat-lbl {
            color: #dbe5f4;
        }

        body.dark-theme .sidebar-card-body::-webkit-scrollbar-track {
            background: rgba(15,23,42,0.7);
        }

        .contact-modal-box {
            max-width: 560px;
            max-height: calc(100vh - 32px);
            overflow-y: auto;
            padding: 12px 22px 17px;
        }

        .contact-modal-box .modal-icon {
            width: 42px;
            height: 42px;
            margin: 0 auto 7px;
            border-radius: 10px;
            color: var(--white);
            font-size: 19px;
        }

        .contact-modal-box .modal-title {
            margin-bottom: 7px;
        }

        .contact-form {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px 10px;
        }

        .contact-field {
            display: grid;
            gap: 4px;
        }

        .contact-field label {
            color: var(--ink-mid);
            font-size: 12px;
            font-weight: 700;
        }

        .contact-control {
            width: 100%;
            padding: 8px 10px;
            border: 1.5px solid var(--border);
            border-radius: 7px;
            outline: none;
            background: var(--cream);
            color: var(--ink);
            font-family: 'DM Sans', sans-serif;
            font-size: 13px;
            transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
        }

        .contact-control:focus {
            border-color: var(--green);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(26,127,90,0.1);
        }

        textarea.contact-control {
            min-height: 76px;
            resize: vertical;
        }

        .contact-span-2 { grid-column: 1 / -1; }

        .contact-captcha-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: end;
        }

        .contact-captcha-question {
            min-width: 105px;
            padding: 8px 12px;
            border: 1.5px solid rgba(26,127,90,0.35);
            border-radius: 7px;
            background: var(--green-light);
            color: var(--green);
            font-size: 14px;
            font-weight: 800;
            text-align: center;
        }

        .contact-form-note {
            color: var(--ink-muted);
            font-size: 10.5px;
            line-height: 1.4;
        }

        .contact-precaution {
            grid-column: 1 / -1;
            padding: 8px 10px;
            border: 1px solid rgba(192,57,43,0.25);
            border-radius: 6px;
            background: var(--red-light);
            color: #8f2525;
            font-size: 10.5px;
            font-weight: 600;
            line-height: 1.4;
        }

        .contact-heading-precaution {
            margin-bottom: 10px;
            text-align: left;
        }

        .contact-honey {
            position: absolute !important;
            left: -10000px !important;
            width: 1px !important;
            height: 1px !important;
            overflow: hidden !important;
        }

        @media (max-width: 560px) {
            .contact-modal-box {
                max-height: calc(100vh - 18px);
                padding: 13px 14px 12px;
            }
            .contact-modal-box .modal-icon { display: none; }
            .contact-modal-box .modal-title { font-size: 19px; margin-bottom: 5px; }
            .contact-heading-precaution { margin-bottom: 7px; }
            .contact-form { gap: 6px 8px; }
            .contact-field { gap: 2px; }
            .contact-field label { font-size: 10.5px; }
            .contact-control { padding: 7px 8px; font-size: 12px; }
            textarea.contact-control { min-height: 68px; }
            .contact-captcha-question { min-width: 88px; padding: 7px 8px; font-size: 12px; }
            .contact-precaution { padding: 6px 8px; font-size: 9.5px; line-height: 1.3; }
            .contact-form-note { font-size: 9px; }
            .contact-form .modal-btn-row { margin-top: 1px; }
        }

        .site-copyright {
            position: fixed;
            left: 14px;
            bottom: 10px;
            z-index: 900;
            color: rgba(15,27,53,0.48);
            font-size: 11px;
            letter-spacing: 0.2px;
            pointer-events: none;
            text-shadow: 0 1px 8px rgba(0,0,0,0.35);
        }

        body.dark-theme .site-copyright {
            color: rgba(229,231,235,0.58);
        }

        .daily-quote-strip {
            width: calc(100% - 32px);
            max-width: 900px;
            height: 28px;
            margin: 14px auto 0;
            display: flex;
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        .daily-quote-window {
            min-width: 0;
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
        }

        .daily-quote-track {
            width: max-content;
            min-width: 100%;
            padding-left: 100%;
            display: inline-block;
            color: var(--ink);
            font-size: 15px;
            font-weight: 600;
            animation: dailyQuoteMarquee 18s linear infinite;
            will-change: transform;
        }

        .daily-quote-strip:hover .daily-quote-track { animation-play-state: paused; }
        .daily-quote-track.is-empty { animation: none; padding-left: 0; text-align: center; }
        .daily-quote-track.is-dzongkha {
            font-family: "Noto Sans Tibetan", "Microsoft Himalaya", sans-serif;
            font-size: 17px;
        }

        /* Larger quote text on desktop only. */
        @media (min-width: 561px) {
            .daily-quote-strip {
                height: 34px;
            }

            .daily-quote-track {
                font-size: 18px;
            }

            .daily-quote-track.is-dzongkha {
                font-size: 20px;
            }
        }

        @keyframes dailyQuoteMarquee {
            from { transform: translateX(0); }
            to { transform: translateX(-100%); }
        }

        body.dark-theme .daily-quote-track { color: #f3f4f6; }

        #setup-view > .panel { margin-top: 20px; }

        @media (prefers-reduced-motion: reduce) {
            .daily-quote-track { animation-duration: 90s; }
        }

        @media (max-width: 560px) {
            .daily-quote-strip { width: calc(100% - 20px); height: 26px; margin-top: 8px; }
            .daily-quote-track { font-size: 15px; animation-duration: 16s; }
            #setup-view > .panel { margin-top: 14px; }
        }

        /* ─── EXAM LAYOUT ───────────────────────────── */
        .exam-layout {
            display: none;
            max-width: 1280px;
            margin: 24px auto;
            padding: 0 16px 60px;
            gap: 24px;
            align-items: flex-start;
        }

        .exam-layout.show { display: flex; animation: fadeUp 0.3s ease both; }

        .exam-main { flex: 2.2; min-width: 0; }
        .exam-sidebar { flex: 1; position: sticky; top: 80px; }

        @media (max-width: 900px) {
            .exam-layout { flex-direction: column; }
            .exam-sidebar { position: static; }
        }

        /* Lock the exam screen to the viewport like the PE
           Online Test workspace — the page itself no longer scrolls while
           taking a normal exam (GK, Sports, Music, etc.). Only the OMR
           answer-sheet list scrolls within its own box when there are more
           questions than fit, and the question panel scrolls internally
           if a question+image is unusually tall. */
        @media (min-width: 768px) {
            .exam-layout.show {
                position: fixed;
                inset: 64px 0 0 0;
                margin: 0;
                max-width: none;
                padding: 20px 20px 20px;
                gap: 16px;
                background: var(--cream);
                z-index: 40;
                overflow: hidden;
            }

            .exam-main {
                height: 100%;
                min-height: 0;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                padding-right: 6px;
            }

            .exam-main .progress-bar-wrap {
                flex: 0 0 auto;
                margin-bottom: 18px;
            }

            #questions-container {
                flex: 1;
                min-height: 0;
                display: flex;
            }

            #questions-container .question-card.active {
                width: 100%;
                height: 100%;
                min-height: 0;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }

            #normal-question-stage {
                flex: 1 1 auto;
                min-height: 0;
                overflow: hidden;
            }

            #normal-question-card > .q-meta,
            #normal-question-card > .nav-actions {
                flex: 0 0 auto;
            }

            #normal-question-card > .nav-actions {
                margin-top: 10px;
                padding-top: 12px;
                background: var(--white);
            }

            .normal-inline-submit-btn,
            .normal-submit-hint {
                display: none !important;
            }

            #questions-container .question-card.active .options-grid {
                flex: 0 0 auto;
                overflow: visible;
            }

            #questions-container .question-card.has-image .q-image-wrap {
                flex: 0 0 auto;
                width: min(100%, 780px);
                padding: 0;
                margin-bottom: 8px;
            }

            #questions-container .question-card.has-image .q-image {
                max-height: clamp(200px, 28vh, 300px) !important;
                object-fit: contain;
            }

            #questions-container .question-card.has-image .options-grid {
                gap: 6px !important;
            }

            #questions-container .question-card.has-image .option-item {
                min-height: 34px;
                padding: 4px 10px !important;
                gap: 9px;
                font-size: 13px;
                line-height: 1.22;
            }

            #questions-container .question-card.has-image .option-alpha {
                width: 30px;
                height: 30px;
                font-size: 12px;
            }

            #questions-container .question-card.has-image .q-meta {
                margin-bottom: 8px;
            }

            #questions-container .question-card.has-image .q-text {
                margin-bottom: 7px !important;
            }

            .exam-sidebar {
                position: static;
                top: auto;
                flex: 0 0 clamp(260px, 24vw, 310px);
                height: calc(100% - 23px);
                margin-top: 23px;
                display: flex;
                flex-direction: column;
            }

            .exam-main {
                flex: 1 1 auto;
            }

            .exam-sidebar .sidebar-card-header {
                padding: 10px 14px;
            }

            .exam-sidebar .omr-row {
                display: grid;
                grid-template-columns: 38px auto 8px;
                justify-content: start;
                gap: 8px;
                padding: 7px 12px;
            }

            .exam-sidebar .omr-q-label {
                width: auto;
            }

            .exam-sidebar .omr-bubbles {
                flex: none;
                gap: 7px;
            }

            .exam-sidebar .omr-bubble {
                width: 28px;
                height: 28px;
                font-size: 10px;
            }

            .exam-sidebar .omr-status {
                margin-left: 1px;
            }

            .exam-sidebar .stat-cell {
                padding: 6px 8px;
            }

            .exam-sidebar .stat-num {
                font-size: 15px;
                line-height: 1.15;
            }

            .exam-sidebar .stat-lbl {
                font-size: 9px;
                line-height: 1.2;
            }

            .exam-sidebar .normal-sidebar-submit-wrap {
                padding: 7px 10px 9px;
            }

            .exam-sidebar .normal-sidebar-submit-wrap .normal-submit-btn {
                min-height: 38px;
                padding: 7px 12px;
                font-size: 14px;
            }

            .exam-sidebar .sidebar-card:first-child {
                flex: 1;
                min-height: 0;
                display: flex;
                flex-direction: column;
                margin-bottom: 12px;
            }

            .exam-sidebar .sidebar-card-body {
                flex: 1;
                min-height: 0;
                max-height: none;
            }
        }

        /* ─── PROGRESS BAR ──────────────────────────── */
        .progress-bar-wrap {
            background: var(--border);
            border-radius: 99px;
            height: 5px;
            margin-bottom: 20px;
            overflow: hidden;
        }

        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
            border-radius: 99px;
            transition: width 0.35s ease;
        }

        /* ─── QUESTION CARD ─────────────────────────── */
        .question-card {
            display: none;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 28px;
            box-shadow: var(--shadow-md);
            animation: questionContentFadeIn 0.25s ease both;
        }

        .question-card.active { display: block; }

        .q-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .q-pill {
            font-size: 12px;
            font-weight: 700;
            background: var(--navy);
            color: var(--white);
            padding: 5px 12px;
            border-radius: 6px;
            letter-spacing: 0.3px;
        }

        .q-category-tag {
            font-size: 11px;
            font-weight: 600;
            color: var(--gold);
            background: var(--gold-pale);
            border: 1px solid rgba(201,168,76,0.25);
            padding: 4px 10px;
            border-radius: 5px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .q-text {
            font-size: 17px;
            font-weight: 500;
            color: var(--ink);
            line-height: 1.65;
            margin-bottom: 22px;
            white-space: pre-wrap;
            user-select: none;
            -webkit-user-select: none; /* Safari & iOS */
            -moz-user-select: none;    /* Older Firefox */
            -ms-user-select: none;     /* IE/Edge */
        }

	        .q-image-wrap {
	            width: min(100%, 520px);
	            margin: 0 auto 14px;
	            padding: 0;
	            display: flex;
	            align-items: center;
	            justify-content: center;
	            background: transparent;
	            border: 0;
	            border-radius: 0;
	            box-shadow: none;
	        }

	        .q-image {
	            width: auto;
	            max-width: 100%;
	            max-height: clamp(160px, 28vh, 300px);
	            object-fit: contain;
	            border-radius: 10px;
	            border: 1px solid var(--border);
	            display: block;
	            background: var(--cream);
	            box-shadow: 0 10px 24px rgba(15, 27, 53, 0.16);
	        }

	        .q-audio {
	            width: min(100%, 340px);
	            height: 36px;
	            margin: 0 0 4px;
	            display: block;
	        }

	        .q-audio-wrap {
	            width: min(100%, 340px);
	            margin: 0 0 9px;
	        }

	        .q-audio-timer {
	            font-size: 12px;
	            font-weight: 700;
	            color: var(--gold);
	            background: var(--gold-pale);
	            display: inline-block;
	            padding: 3px 10px;
	            border-radius: 12px;
	        }

	        .question-card.has-image {
	            padding-top: 14px !important;
	        }

	        .question-card.has-image .q-meta {
	            margin-bottom: 12px;
	        }

	        .question-card.has-image .q-text {
	            margin-bottom: 10px !important;
	            line-height: 1.42 !important;
	        }

	        .question-card.has-image .q-image-wrap {
	            width: min(100%, 500px);
	            margin-bottom: 10px;
	        }

	        .question-card.has-image .q-image {
	            max-height: clamp(150px, 26vh, 280px) !important;
	        }

	        .question-card.has-image .options-grid {
	            gap: 7px !important;
	        }

	        .question-card.has-image .option-item {
	            min-height: 46px;
	            padding: 9px 12px !important;
	        }

        /* ─── OPTIONS ───────────────────────────────── */
        .options-grid { display: flex; flex-direction: column; gap: 10px; }

        .option-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 16px;
            background: var(--cream);
            border: 1.5px solid var(--border);
            border-radius: 9px;
            cursor: pointer;
            transition: all 0.18s ease;
            font-size: 14px;
            color: var(--ink);
            user-select: none;
            -webkit-user-select: none; /* Safari & iOS  to make sure user dont highlight the text*/
            -moz-user-select: none;    /* Older Firefoxto make sure user dont highlight the text */
            -ms-user-select: none;     /* IE/Edge to make sure user dont highlight the text*/
        }

        .option-item:hover {
            border-color: var(--navy);
            background: rgba(15,27,53,0.03);
            transform: translateX(3px);
        }

        /* Read-only options — answers only via OMR */
        .option-item.option-readonly {
            cursor: default;
            pointer-events: none;
        }
        .option-item.option-readonly:hover {
            transform: none;
            border-color: var(--border);
            background: var(--cream);
        }
        .option-item.option-readonly.selected {
            pointer-events: none;
        }

        /* Compact question card — no scroll needed */
	        .question-card {
	            padding: 18px 22px 16px !important;
	        }
        .q-text {
            font-size: 15px !important;
            margin-bottom: 14px !important;
        }
        .options-grid {
            gap: 7px !important;
        }
        .option-item {
            padding: 10px 14px !important;
            font-size: 13px !important;
        }
        .nav-actions {
            margin-top: 16px !important;
            padding-top: 14px !important;
        }
        .btn-nav-hint {
            cursor: default !important;
            border-style: dashed !important;
        }

        .option-item.selected {
            background: rgba(15,27,53,0.05);
            border-color: var(--navy);
            color: var(--navy);
            font-weight: 600;
        }

        .option-alpha {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1.5px solid currentColor;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            flex-shrink: 0;
            color: var(--ink-muted);
            transition: all 0.18s;
        }

        .option-item.selected .option-alpha {
            background: var(--navy);
            border-color: var(--navy);
            color: white;
        }

        /* ─── NAV ACTIONS ───────────────────────────── */
        .nav-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 26px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
            gap: 12px;
        }

        /* ─── SIDEBAR CARDS ─────────────────────────── */
        .sidebar-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            margin-bottom: 16px;
        }

        .sidebar-card-header {
            background: var(--navy);
            color: var(--white);
            padding: 12px 16px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sidebar-card-body {
            padding: 0;
            max-height: 62vh;
            overflow-y: auto;
        }

        .sidebar-card-body::-webkit-scrollbar { width: 4px; }
        .sidebar-card-body::-webkit-scrollbar-track { background: var(--cream); }
        .sidebar-card-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

        /* ─── OMR SHEET ─────────────────────────────── */
        .omr-row {
            display: flex;
            align-items: center;
            padding: 9px 14px;
            border-bottom: 1px solid var(--cream);
            transition: background 0.15s;
            gap: 12px;
        }

        .omr-row:last-child { border-bottom: none; }
        .omr-row.active { background: rgba(15,27,53,0.04); }

        .omr-q-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--ink-muted);
            width: 36px;
            cursor: pointer;
            flex-shrink: 0;
        }

        .omr-q-label:hover { color: var(--navy); }

        .omr-bubbles {
            display: flex;
            gap: 7px;
            flex: 1;
        }

        .omr-bubble {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1.5px solid #cbd5e1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            color: var(--ink-muted);
            cursor: pointer;
            transition: all 0.15s;
            background: white;
        }

        .omr-bubble:hover {
            border-color: var(--gold);
            color: var(--navy);
            background: var(--gold-pale);
            transform: scale(1.15);
            box-shadow: 0 0 0 2px rgba(201,168,76,0.25);
        }

        .omr-bubble.filled {
            background: var(--navy);
            border-color: var(--navy);
            color: white;
            transform: scale(1.05);
        }

        /* Pulse the current OMR row bubbles to guide the student */
        .omr-row.active .omr-bubble:not(.filled) {
            animation: bubble-hint 2.2s ease-in-out infinite;
        }

        @keyframes bubble-hint {
            0%,100% { border-color: #cbd5e1; }
            50%      { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,0.2); }
        }

        .omr-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--border);
            flex-shrink: 0;
        }

        .omr-status.answered { background: var(--green); }
       /* MOBILE-OPTIMIZED: CONTEXTUAL DYNAMIC PER-QUESTION OMR
   ========================================================================== */
	     @media (max-width: 767px) {
	        /* Hide the global answer-sheet sidebar on mobile */
	        .exam-sidebar {
	            display: none !important;
	        }

	        .exam-layout.show {
	            position: fixed !important;
	            inset: 64px 0 0 0 !important;
	            display: block !important;
	            margin: 0 !important;
	            max-width: none !important;
	            padding: 10px 10px 12px !important;
	            background: var(--cream) !important;
	            overflow: hidden !important;
	            z-index: 40 !important;
	        }

	        .exam-main {
	            width: 100% !important;
	            height: 100% !important;
	            overflow-y: auto !important;
	            padding-bottom: 4px !important;
	        }

	        .progress-bar-wrap {
	            margin: 8px 0 12px !important;
	        }

	        .question-card {
	            padding: 14px 12px 16px !important;
	            border-radius: 12px !important;
	        }

	        .question-card.has-image {
	            padding: 10px 10px 12px !important;
	        }

	        .q-meta {
	            gap: 8px !important;
	        }

	        .q-text {
	            font-size: 16px !important;
	            line-height: 1.45 !important;
	            margin-bottom: 12px !important;
	        }

	        .question-card.has-image .q-text {
	            font-size: 15px !important;
	            margin-bottom: 8px !important;
	        }

	        .question-card.has-image .q-image-wrap {
	            width: min(100%, 100%);
	            padding: 0;
	            margin-bottom: 8px !important;
	        }

	        .question-card.has-image .q-image {
	            max-height: clamp(120px, 20vh, 180px) !important;
	        }

	        .options-grid {
	            gap: 10px !important;
	        }

	        .question-card.has-image .options-grid {
	            gap: 6px !important;
	        }

	        .option-item {
	            padding: 12px 12px !important;
	            min-height: 56px !important;
	            font-size: 14px !important;
	            line-height: 1.35 !important;
	        }

	        .question-card.has-image .option-item {
	            min-height: 44px !important;
	            padding: 8px 10px !important;
	            font-size: 13px !important;
	        }

	        .option-alpha {
	            width: 34px !important;
	            height: 34px !important;
	            font-size: 13px !important;
	        }

	        .mobile-question-omr {
	            position: sticky !important;
	            bottom: 10px !important;
	            z-index: 20 !important;
	            display: flex !important;
	            flex-direction: column !important;
	            background: rgba(255,255,255,0.96) !important;
	            border: 1.5px solid var(--border, #e2e8f0) !important;
	            border-radius: 12px !important;
	            padding: 11px 12px 12px !important;
	            margin: 16px 0 12px !important;
	            box-shadow: 0 10px 28px rgba(15,27,53,0.16) !important;
	            backdrop-filter: blur(8px) !important;
	        }

	        .mobile-omr-title {
	            font-size: 11px !important;
	            font-weight: 800 !important;
	            color: var(--ink-muted, #64748b) !important;
	            margin-bottom: 8px !important;
	            text-transform: uppercase !important;
	            letter-spacing: 0.4px !important;
	        }

	        .mobile-omr-row {
	            display: grid !important;
	            grid-template-columns: auto 1fr !important;
	            align-items: center !important;
	            gap: 10px !important;
	        }
    
	        .mobile-omr-label {
	            font-size: 14px !important;
	            font-weight: 800 !important;
	            color: var(--ink, #1e293b) !important;
	            white-space: nowrap !important;
	        }

	        .mobile-omr-bubbles {
	            display: grid !important;
	            grid-template-columns: repeat(4, minmax(38px, 1fr)) !important;
	            gap: 8px !important;
	            min-width: 0 !important;
	        }
    
	        .mobile-omr-bubbles .omr-bubble {
	            width: 100% !important;
	            height: 42px !important;
	            min-width: 0 !important;
	            border-radius: 999px !important;
	            font-size: 13px !important;
	            box-shadow: 0 2px 6px rgba(15,27,53,0.08) !important;
	        }

	        .mobile-omr-bubbles .omr-bubble.filled {
	            box-shadow: 0 6px 14px rgba(15,27,53,0.24) !important;
	        }

	        .nav-actions {
	            display: grid !important;
	            grid-template-columns: 1fr 1fr !important;
	            gap: 10px !important;
	            margin-top: 14px !important;
	        }

	        .nav-actions .btn {
	            min-height: 44px !important;
	            padding: 10px 12px !important;
	        }

	        .btn-nav-hint span {
	            font-size: 11px !important;
	        }

	        .toast {
	            left: 12px !important;
	            right: 12px !important;
	            bottom: 14px !important;
	            max-width: none !important;
	        }
	    }

    /* Fallback hiding rule for desktop viewports */
    @media (min-width: 768px) {
        .mobile-question-omr {
            display: none !important;
        }
    }
        /* ─── STATS MINI ────────────────────────────── */
        .stats-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1px;
            background: var(--border);
            border-top: 1px solid var(--border);
        }

        .normal-sidebar-submit-wrap {
            padding: 10px 12px 12px;
            background: var(--white);
        }

        .normal-sidebar-submit-wrap .normal-submit-btn {
            width: 100%;
            min-height: 44px;
            justify-content: center;
            font-size: 15px;
        }

        .stat-cell {
            background: var(--white);
            padding: 12px 10px;
            text-align: center;
        }

        .stat-num {
            font-size: 18px;
            font-weight: 700;
            color: var(--navy);
            font-family: 'DM Serif Display', serif;
        }

        .stat-lbl {
            font-size: 10px;
            font-weight: 600;
            color: var(--ink-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* ─── RESULTS PAGE ──────────────────────────── */
        .results-wrap {
            display: none;
            max-width: 760px;
            margin: 40px auto;
            padding: 0 16px 60px;
        }

        .results-wrap.show { display: block; animation: fadeUp 0.4s ease both; }

        .results-header-card {
            background: var(--navy);
            border-radius: var(--radius-lg);
            padding: 36px 32px;
            text-align: center;
            color: white;
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
        }

        .results-header-card::before {
            content: '';
            position: absolute;
            top: -40px; right: -40px;
            width: 180px; height: 180px;
            background: rgba(201,168,76,0.08);
            border-radius: 50%;
        }

        .results-header-card::after {
            content: '';
            position: absolute;
            bottom: -60px; left: -30px;
            width: 220px; height: 220px;
            background: rgba(255,255,255,0.03);
            border-radius: 50%;
        }

        .score-ring {
            position: relative;
            width: 130px;
            height: 130px;
            margin: 0 auto 20px;
        }

        .score-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }

        .score-ring-track { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 8; }
        .score-ring-fill {
            fill: none;
            stroke: var(--gold);
            stroke-width: 8;
            stroke-linecap: round;
            stroke-dasharray: 345;
            stroke-dashoffset: 345;
            transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1);
        }

        .score-ring-label {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .score-fraction {
            font-family: 'DM Serif Display', serif;
            font-size: 28px;
            font-weight: 400;
            color: white;
            line-height: 1;
        }

        .score-pct {
            font-size: 12px;
            color: var(--gold);
            font-weight: 600;
        }

        .results-title {
            font-family: 'DM Serif Display', serif;
            font-size: 24px;
            margin-bottom: 6px;
            position: relative;
            z-index: 1;
        }

        .results-subtitle {
            font-size: 13px;
            color: rgba(255,255,255,0.55);
            position: relative;
            z-index: 1;
        }

        .results-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }

        .result-stat-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px;
            text-align: center;
            box-shadow: var(--shadow-sm);
        }

        .result-stat-card .num {
            font-family: 'DM Serif Display', serif;
            font-size: 28px;
            font-weight: 400;
        }

        .result-stat-card .lbl {
            font-size: 11px;
            font-weight: 600;
            color: var(--ink-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .result-stat-card.correct .num { color: var(--green); }
        .result-stat-card.wrong   .num { color: var(--red); }
        .result-stat-card.skipped .num { color: var(--ink-muted); }

        .results-actions {
            margin-top: 28px;
            text-align: center;
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .result-action-btn {
            min-width: 168px;
            justify-content: center;
        }

        /* ─── REVIEW ITEMS ───────────────────────────── */
        .review-section-title {
            font-family: 'DM Serif Display', serif;
            font-size: 18px;
            color: var(--navy);
            margin-bottom: 14px;
        }

        .review-item {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 18px 18px 18px 22px;
            margin-bottom: 12px;
            position: relative;
            box-shadow: var(--shadow-sm);
            transition: transform 0.15s;
        }

        .review-item:hover { transform: translateX(3px); }

        .review-item::before {
            content: '';
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: 4px;
            border-radius: 4px 0 0 4px;
        }

        .review-item.correct::before { background: var(--green); }
        .review-item.wrong::before   { background: var(--red); }
        .review-item.skipped::before { background: var(--ink-muted); }

        .review-q-text {
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 10px;
            white-space: pre-wrap;
        }

        .review-answers {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 13px;
        }

        .answer-tag {
            padding: 4px 10px;
            border-radius: 5px;
            font-weight: 500;
        }

        .answer-tag.your-ans    { background: rgba(15,27,53,0.08); color: var(--ink); }
        .answer-tag.correct-ans { background: var(--green-light); color: var(--green); font-weight: 700; }
        .answer-tag.wrong-ans   { background: var(--red-light); color: var(--red); }

        .review-verdict {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .review-verdict.correct { background: var(--green-light); color: var(--green); }
        .review-verdict.wrong   { background: var(--red-light);   color: var(--red); }
        .review-verdict.skipped { background: #f3f4f6; color: var(--ink-muted); }



        /* ─── TOAST NOTIFICATION ────────────────────── */
        .toast {
            position: fixed;
            bottom: 28px;
            right: 28px;
            background: var(--navy);
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            box-shadow: var(--shadow-lg);
            transform: translateY(80px);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
            z-index: 9000;
            max-width: 320px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .toast.show { transform: translateY(0); opacity: 1; }
        .toast.success { border-left: 3px solid var(--green); }
        .toast.error   { border-left: 3px solid var(--red); }
        .toast.info    { border-left: 3px solid var(--gold); }

        /* ─── DIVIDER ───────────────────────────────── */
        .divider {
            height: 1px;
            background: var(--border);
            margin: 22px 0;
        }

        /* ─── SCROLLBAR GLOBAL ──────────────────────── */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: var(--cream); }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #b0b7c3; }

        /* ─── LOADER PROGRESS ───────────────────────── */
        .loader-progress-wrap {
            width: 180px;
            height: 3px;
            background: var(--border);
            border-radius: 99px;
            overflow: hidden;
        }
        .loader-progress-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
            border-radius: 99px;
            transition: width 0.4s ease;
        }

        /* ─── SHARED MODAL ──────────────────────────── */
        .modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(15, 27, 53, 0.55);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 8000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
            padding: 16px;
        }

        .modal-backdrop.open {
            opacity: 1;
            pointer-events: all;
        }

        .modal-box {
            background: var(--white);
            border-radius: var(--radius-lg);
            padding: 36px 32px 28px;
            width: 100%;
            max-width: 480px;
            box-shadow: 0 24px 64px rgba(15,27,53,0.28);
            transform: translateY(20px) scale(0.97);
            transition: transform 0.28s cubic-bezier(0.34,1.3,0.64,1), opacity 0.25s ease;
            opacity: 0;
        }

        .modal-backdrop.open .modal-box {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        .modal-icon {
            width: 52px;
            height: 52px;
            background: var(--navy);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin: 0 auto 18px;
        }

        .modal-title {
            font-family: 'DM Serif Display', serif;
            font-size: 22px;
            font-weight: 400;
            color: var(--navy);
            text-align: center;
            margin-bottom: 6px;
        }

        .modal-subtitle {
            font-size: 13px;
            color: var(--ink-muted);
            text-align: center;
            margin-bottom: 24px;
        }

        .pw-input-wrap {
            position: relative;
            margin-bottom: 8px;
        }

        .otp-box-row {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 8px;
        }

        .otp-digit-input {
            width: 100%;
            aspect-ratio: 1 / 1;
            min-height: 52px;
            text-align: center;
            padding: 0;
            font-family: 'DM Sans', sans-serif;
            font-size: 22px;
            font-weight: 700;
            color: var(--ink);
            background: var(--cream);
            border: 1.5px solid var(--border);
            border-radius: 9px;
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
        }

        .otp-digit-input:focus {
            border-color: var(--navy);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(15,27,53,0.08);
        }

        .otp-digit-input.error-shake {
            border-color: var(--red);
            box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
            animation: shake 0.38s ease;
        }

        @media (max-width: 560px) {
            .modal-box {
                padding: 28px 18px 24px;
            }

            .otp-box-row {
                grid-template-columns: repeat(6, minmax(0, 1fr));
                gap: 5px;
                width: 100%;
            }

            .otp-digit-input {
                min-width: 0;
                min-height: 0;
                height: 42px;
                aspect-ratio: auto;
                border-radius: 7px;
                font-size: 18px;
            }
        }

        .pw-input {
            width: 100%;
            padding: 13px 46px 13px 16px;
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            color: var(--ink);
            background: var(--cream);
            border: 1.5px solid var(--border);
            border-radius: 9px;
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
            letter-spacing: 0.5px;
        }

        .pw-input:focus {
            border-color: var(--navy);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(15,27,53,0.08);
        }

        .pw-input.error-shake {
            border-color: var(--red);
            box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
            animation: shake 0.38s ease;
        }

        @keyframes shake {
            0%,100% { transform: translateX(0); }
            20%      { transform: translateX(-6px); }
            40%      { transform: translateX(6px); }
            60%      { transform: translateX(-4px); }
            80%      { transform: translateX(4px); }
        }

        .pw-toggle {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            font-size: 17px;
            color: var(--ink-muted);
            padding: 4px;
            line-height: 1;
            transition: color 0.15s;
        }

        .pw-toggle:hover { color: var(--navy); }

        .pw-error-msg {
            font-size: 12px;
            color: var(--red);
            font-weight: 600;
            min-height: 18px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 5px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .pw-error-msg.visible { opacity: 1; }

        .modal-btn-row {
            display: grid;
            grid-template-columns: 1fr 1.6fr;
            gap: 10px;
        }

        .btn-modal-cancel {
            background: var(--cream);
            color: var(--ink-mid);
            border: 1.5px solid var(--border);
            font-family: 'DM Sans', sans-serif;
            font-size: 13px;
            font-weight: 600;
            padding: 11px;
            border-radius: 9px;
            cursor: pointer;
            transition: all 0.15s;
        }

        .btn-modal-cancel:hover {
            background: var(--border);
            color: var(--navy);
        }

        .btn-modal-auth {
            background: var(--navy);
            color: white;
            border: none;
            font-family: 'DM Sans', sans-serif;
            font-size: 13px;
            font-weight: 700;
            padding: 11px;
            border-radius: 9px;
            cursor: pointer;
            transition: all 0.18s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            letter-spacing: 0.3px;
        }

        .btn-modal-auth:hover {
            background: var(--navy-mid);
            box-shadow: 0 4px 16px rgba(15,27,53,0.25);
            transform: translateY(-1px);
        }

        .btn-modal-auth:active { transform: translateY(0); }

        .modal-divider {
            height: 1px;
            background: var(--border);
            margin: 22px 0 18px;
        }

        .modal-security-note {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 11px;
            color: var(--ink-muted);
            font-weight: 500;
        }

        /* ══════════════════════════════════════════════════
           PE (PRACTICE ENGINE) — Sidebar Menu Indicator
           Adapted directly from the reference template:
           floating pill sidebar, --clr active highlight,
           data-target panel switching.
        ══════════════════════════════════════════════════ */
        #pe-view {
            position: fixed;
            inset: 64px 0 0 0;
            background: #22252a;
            overflow: hidden;
            z-index: 35;
        }

        .pe-root {
            position: relative;
            height: 100%;
            min-height: 0;
            background: #22252a;
            display: flex;
            justify-content: flex-start;
            align-items: stretch;
            font-family: 'DM Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            isolation: isolate;
        }

        /* Lightweight PE portal background, dimmed so cards/text stay readable */
        .pe-root::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(circle at 18% 12%, rgba(232, 200, 110, 0.68), transparent 28%),
                radial-gradient(circle at 78% 68%, rgba(255, 112, 67, 0.34), transparent 32%),
                linear-gradient(135deg, rgba(44, 48, 56, 0.72) 0%, rgba(57, 64, 76, 0.66) 52%, rgba(22, 26, 34, 0.84) 100%);
            background-size: cover, cover, cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.96;
            filter: saturate(1.32) contrast(1.08);
            z-index: 0;
            pointer-events: none;
        }

        .pe-root::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(20,22,27,0.18), rgba(20,22,27,0.42));
            z-index: 0;
            pointer-events: none;
        }

        .pe-navigation, .pe-content { position: relative; z-index: 1; }

        .pe-navigation {
            position: fixed;
            top: 50%;
            left: 16px;
            transform: translateY(-50%);
            width: 68px;
            min-height: 360px;
            background: #fff;
            transition: width 0.18s ease, box-shadow 0.18s ease;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 16px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 50;
            flex-shrink: 0;
        }

        /* Reserves the same horizontal space in the flex layout so the
           main content doesn't sit underneath the fixed sidebar.
           Its width is kept in sync with .pe-navigation via JS so that
           expanding the sidebar pushes the content over instead of
           covering it. */
        .pe-navigation-spacer {
            width: 100px;
            flex-shrink: 0;
            transition: width 0.24s ease;
        }

        .pe-navigation-spacer.open {
            width: 245px;
        }

        .pe-navigation.open {
            width: 210px;
        }

        .pe-menu-toggle {
            position: absolute;
            top: 14px;
            width: 28px;
            height: 28px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        @media (min-width: 901px) {
            .pe-menu-toggle {
                display: none;
            }
        }

        .pe-menu-toggle::before {
            content: '☰';
            font-size: 1.15rem;
            color: #333;
        }

        .pe-navigation.open .pe-menu-toggle::before {
            content: '✕';
        }

        .pe-list {
            display: flex;
            flex-direction: column;
            width: 100%;
            padding: 0 8px;
            margin-top: 46px;
            list-style: none;
        }

        .pe-list-item {
            position: relative;
            list-style: none;
            width: 100%;
            height: 50px;
            margin: 3px 0;
            z-index: 1;
        }

        .pe-list-item a {
            position: relative;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            height: 100%;
            text-decoration: none;
            color: #333;
            cursor: pointer;
        }

        .pe-list-item a .pe-icon {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 44px;
            height: 44px;
            font-size: 1.15rem;
            transition: 0.3s ease;
            border-radius: 12px;
            z-index: 10;
            flex-shrink: 0;
        }

        .pe-list-item a .pe-text {
            position: relative;
            padding: 0 12px;
            height: 50px;
            line-height: 50px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.24s ease, visibility 0.24s ease;
            white-space: nowrap;
            font-weight: 600;
            font-size: 13px;
        }

        .pe-navigation.open .pe-list-item a .pe-text {
            opacity: 1;
            visibility: visible;
        }

        .pe-list-item.active a .pe-icon {
            color: #fff;
            background: var(--clr);
            box-shadow: 0 5px 15px var(--clr);
        }

        .pe-list-item.active a .pe-text {
            color: var(--clr);
        }

        /* ── Main content area ── */
        .pe-content {
            flex: 1;
            min-width: 0;
            height: 100%;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 32px;
            color: #fff;
        }

        .pe-section {
            display: none;
        }

        .pe-section.active {
            display: block;
            animation: peFadeIn 0.22s ease-out;
        }

        @media (min-width: 861px) {
            #pe-home-panel.active,
            #pe-mock-panel.active,
            #pe-past-panel.active,
            #pe-di-panel.active,
            #pe-online-panel.active {
                width: min(1180px, calc(100% - 96px));
                margin-left: auto;
                margin-right: auto;
            }
        }

        .pe-content:has(#pe-current-affair-panel.active) {
            overflow: hidden;
        }

        #pe-current-affair-panel.active {
            height: 100%;
            overflow: hidden;
        }

        @keyframes peFadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .pe-section h1,
        .pe-section h2 {
            font-family: 'DM Serif Display', serif;
            font-size: 1.9rem;
            margin-bottom: 8px;
            font-weight: 400;
            color: #fff;
        }

        .pe-section-desc {
            color: #aaa;
            margin-bottom: 22px;
            font-size: 0.95rem;
        }

        .pe-home-dashboard-section {
            margin-left: auto;
            margin-right: auto;
        }

        #pe-home-panel.active .pe-home-dashboard-section { width: min(100%, 1180px); }

        .pe-content:has(#pe-home-panel.active) {
            overflow: hidden;
            padding: 16px 24px;
        }

        #pe-home-panel.active {
            height: 100%;
            min-height: 0;
            display: grid;
            grid-template-rows: minmax(0, 1fr);
        }

        #pe-home-panel.active .pe-home-dashboard-section {
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        #pe-home-panel.active h2 {
            margin-bottom: 4px;
            font-size: 1.05rem;
            text-align: center;
        }

        .pe-resource-panel {
            background: #2b2f36;
            border: 1px solid #383d46;
            border-radius: 10px;
            padding: 8px;
        }

        .pe-resource-tabs {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px;
            margin-bottom: 6px;
        }

        .pe-resource-tab {
            border: 1px solid #4a5260;
            background: #1f232b;
            color: #d9dde5;
            border-radius: 6px;
            padding: 5px 9px;
            cursor: pointer;
            font: inherit;
            font-size: 11px;
            font-weight: 700;
        }

        .pe-resource-tab.active { background: #2563eb; border-color: #60a5fa; color: #fff; }
        .pe-resource-panel { min-height: 0; flex: 1 1 auto; overflow: hidden; }
        .pe-resource-panel > h3,
        .pe-resource-panel > .pe-empty-msg { text-align: center; }
        .pe-resource-document { white-space: pre-wrap; color: #e8ebf1; font-size: 12px; line-height: 1.35; }
        .pe-resource-count { align-self: start; padding: 4px 8px; border-radius: 999px; background: #1f232b; color: #aeb4c0; font-size: 11px; }
        .pe-resource-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; margin-top: 7px; }
        .pe-resource-feedback { color: #b8e8c5; font-size: 13px; font-weight: 700; }
        .pe-guide-library { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(165px, 0.72fr) minmax(0, 2.35fr) minmax(230px, 1fr); gap: 12px; align-items: stretch; }
        .pe-formula-library { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 3fr) minmax(200px, 1fr); gap: 12px; align-items: stretch; }
        .pe-guide-current { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 6px; }
        .pe-guide-viewer-heading { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        .pe-guide-viewer-heading .pe-guide-heading,
        .pe-guide-viewer-heading .pe-guide-heading-static { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .pe-guide-heading,
        .pe-guide-heading-static { justify-self: center; margin: 0; padding: 2px 6px; border: 0; background: transparent; color: #f5f7fb; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
        .pe-guide-heading-static { cursor: default; }
        .pe-guide-material { min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; border: 1px solid #4a5260; border-radius: 8px; background: #1f232b; }
        .pe-guide-material > img { width: 100%; max-height: 60%; flex: 0 0 auto; object-fit: contain; background: #151922; }
        .pe-guide-material > img:only-child { height: 100%; max-height: none; }
        .pe-guide-material > img { cursor: zoom-in; }
        .pe-guide-pdf-frame,
        .pe-guide-local-frame { width: 100%; min-height: 100%; flex: 1 0 100%; border: 0; background: #fff; }
        .pe-guide-local-pdf { width: 100%; min-height: 100%; display: grid; align-content: start; justify-items: center; gap: 12px; padding: 8px; background: #292e36; touch-action: pan-x pan-y pinch-zoom; outline: none; }
        .pe-guide-local-pdf:focus-visible { box-shadow: inset 0 0 0 2px #60a5fa; }
        .pe-guide-local-pdf-status { padding: 22px; color: #aeb4c0; text-align: center; }
        .pe-guide-local-pdf-page { position: relative; flex: none; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.28); zoom: var(--pe-local-pdf-zoom, 1); }
        .pe-guide-local-pdf-page canvas { position: absolute; inset: 0; display: block; }
        .pe-guide-local-pdf-text-layer { --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); position: absolute; inset: 0; overflow: clip; color-scheme: only light; opacity: 1; line-height: 1; letter-spacing: normal; word-spacing: normal; text-align: initial; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; user-select: text; -webkit-user-select: text; pointer-events: auto; z-index: 2; }
        .pe-guide-local-pdf-text-layer :is(span, br) { position: absolute; color: transparent; white-space: pre; cursor: text; transform-origin: 0 0; user-select: text; -webkit-user-select: text; }
        .pe-guide-local-pdf-text-layer > :not(.markedContent),
        .pe-guide-local-pdf-text-layer .markedContent span:not(.markedContent) { --font-height: 0; --scale-x: 1; --rotate: 0deg; z-index: 1; font-size: calc(var(--text-scale-factor) * var(--font-height)); transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
        .pe-guide-local-pdf-text-layer .markedContent { display: contents; }
        .pe-guide-local-pdf-text-layer span[role="img"] { cursor: default; user-select: none; -webkit-user-select: none; }
        .pe-guide-local-pdf-text-layer .endOfContent { position: absolute; inset: 100% 0 0; display: block; cursor: default; user-select: none; -webkit-user-select: none; }
        .pe-guide-local-pdf-text-layer.selecting .endOfContent { top: 0; }
        .pe-guide-local-pdf-text-layer ::selection { background: rgba(37,99,235,0.42); }
        .pe-guide-local-pdf-text-layer br::selection { background: transparent; }
        .pe-guide-local-text { min-width: 100%; margin: 0; padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere; color: #e8ebf1; font: inherit; line-height: 1.55; }
        .pe-guide-placeholder { min-height: 180px; display: grid; place-content: center; gap: 8px; color: #aeb4c0; text-align: center; }
        .pe-guide-placeholder i { font-size: 28px; }
        .pe-guide-reading-content { padding: 14px; color: #e8ebf1; text-align: left; line-height: 1.55; }
        .pe-guide-meta { margin: 0; color: #aeb4c0; text-align: center; font-size: 10px; }
        .pe-guide-reading,
        .pe-formula-topics { min-width: 0; min-height: 0; padding: 10px; border: 1px solid #4a5260; border-radius: 8px; background: #1f232b; display: flex; flex-direction: column; }
        .pe-guide-reading > h3,
        .pe-formula-topics > h3 { margin: 0 0 8px; text-align: center; font-size: 14px; }
        .pe-guide-reading-list { min-height: 0; margin: 0; padding: 0 4px 0 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
        .pe-guide-reading-list li { padding: 1px 0; color: #aeb4c0; }
        .pe-guide-reading-item { width: 100%; display: grid; gap: 2px; padding: 7px 3px; border: 0; border-bottom: 1px solid #383d46; background: transparent; color: #e8ebf1; text-align: left; cursor: pointer; }
        .pe-guide-reading-item:hover { color: #fff; background: rgba(96,165,250,0.08); }
        .pe-guide-reading-item.active { color: #93c5fd; }
        .pe-guide-reading-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .pe-guide-reading-item small { color: #aeb4c0; font-size: 10px; }
        .pe-formula-topic-list { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 7px; }
        .pe-formula-topic-item { width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #3f4652; border-radius: 7px; background: #2b2f36; color: #e8ebf1; text-align: left; cursor: pointer; }
        .pe-formula-topic-item.active { border-color: #60a5fa; background: #1f4fa5; }
        .pe-formula-topic-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .pe-formula-topic-item small { margin-left: auto; color: #aeb4c0; font-size: 10px; }
        .pe-guide-file-tools { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding-top: 3px; border-top: 1px solid #383d46; }
        .pe-guide-file-picker,
        .pe-guide-uploaded-file { min-width: 0; min-height: 32px; padding: 3px 7px; border: 1px solid #4a5260; border-radius: 6px; background: #1f232b; color: #e8ebf1; }
        .pe-guide-file-picker { display: grid; place-items: center; cursor: pointer; font-size: 11px; font-weight: 700; }
        .pe-guide-file-picker:hover { border-color: #60a5fa; }
        .pe-guide-file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
        .pe-guide-uploaded-file { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px; }
        .pe-guide-uploaded-file span,
        .pe-guide-uploaded-file small { color: #aeb4c0; font-size: 9px; }
        .pe-guide-uploaded-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
        .pe-guide-uploaded-file small { display: none; }
        .pe-formula-current { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid #4a5260; border-radius: 8px; background: #1f232b; }
        .pe-formula-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: #e8ebf1; }
        .pe-formula-header > strong { font-size: 12px; }
        .pe-formula-question-list { display: grid; gap: 8px; }
        .pe-formula-row { display: grid; gap: 9px; padding: 10px; border: 1px solid #383d46; border-radius: 7px; background: #2b2f36; }
        .pe-formula-question { margin: 0; color: #f5f7fb; text-align: left; }
        .pe-formula-answer-line { display: grid; grid-template-columns: auto minmax(120px, 300px) auto minmax(42px, 1fr); align-items: center; gap: 7px; padding-left: 22px; color: #e8ebf1; }
        .pe-formula-row .pe-resource-answer { width: 100%; min-width: 0; margin: 0; }
        .pe-formula-row .pe-resource-feedback { font-size: 11px; }
        .pe-formula-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
        .pe-guide-notes { min-width: 0; min-height: 0; padding: 10px; border: 1px solid #4a5260; border-radius: 8px; background: #1f232b; display: flex; flex-direction: column; gap: 8px; }
        .pe-guide-notes-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
        .pe-guide-notes-heading h3 { margin: 0; font-size: 14px; }
        .pe-guide-note-actions,
        .pe-guide-note-secondary-actions { display: flex; flex-wrap: wrap; gap: 5px; }
        .pe-note-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px; margin: 0; }
        .pe-note-tool { min-width: 32px; height: 30px; padding: 4px 8px; border: 1px solid #4a5260; border-radius: 5px; background: #1f232b; color: #f5f7fb; cursor: pointer; }
        .pe-note-select { width: min(126px, 100%); height: 30px; padding: 3px 7px; border: 1px solid #4a5260; border-radius: 5px; background: #1f232b; color: #f5f7fb; }
        .pe-note-size { width: auto; }
        .pe-note-color { width: 34px; height: 30px; padding: 3px; border: 1px solid #4a5260; border-radius: 5px; background: #1f232b; cursor: pointer; }
        .pe-note-editor { min-height: 180px; flex: 1 1 auto; overflow-y: auto; padding: 12px; border: 1px solid #4a5260; border-radius: 6px; background: #1f232b; color: #f5f7fb; outline: none; }
        .pe-note-editor:empty::before { content: attr(data-placeholder); color: #8f97a5; pointer-events: none; }
        .pe-note-editor:focus { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96,165,250,0.2); }
        .pe-note-editor ul,
        .pe-note-editor ol {
            margin: 8px 0;
            padding-left: 0;
            list-style-position: inside;
        }
        .pe-note-export-menu { position: relative; align-self: flex-start; }
        .pe-note-export-menu summary { list-style: none; cursor: pointer; }
        .pe-note-export-menu summary::-webkit-details-marker { display: none; }
        .pe-note-export-options { position: absolute; z-index: 5; left: 0; bottom: calc(100% + 4px); display: grid; gap: 4px; min-width: 74px; padding: 5px; border: 1px solid #4a5260; border-radius: 6px; background: #1f232b; box-shadow: 0 8px 20px rgba(0,0,0,0.28); }

        @media (min-width: 901px) {
            .pe-content:has(#pe-home-panel.active #pe-resource-guide:not([hidden])) {
                padding: 16px 12px 16px 8px;
            }

            #pe-home-panel.active:has(#pe-resource-guide:not([hidden])) {
                width: 100%;
                max-width: none;
                margin-left: 0;
                margin-right: 0;
            }

            #pe-home-panel.active:has(#pe-resource-guide:not([hidden])) .pe-home-dashboard-section {
                width: 100%;
                max-width: none;
                margin-left: 0;
                margin-right: 0;
            }

            #pe-resource-guide .pe-guide-library {
                grid-template-columns: minmax(170px, 0.62fr) minmax(0, 2.55fr) minmax(280px, 1.15fr);
                gap: 10px;
            }
        }

        .pe-filter-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #2b2f36;
            border: 1.5px solid #383d46;
            border-radius: 10px;
            padding: 11px 16px;
            margin-bottom: 20px;
            max-width: 480px;
        }

        .pe-filter-icon { color: #8a92a6; font-size: 14px; flex-shrink: 0; }

        .pe-filter-input {
            border: none;
            background: transparent;
            outline: none;
            font-size: 14px;
            color: #fff;
            width: 100%;
        }

        .pe-filter-input::placeholder { color: #6b7280; }

        .pe-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 14px;
        }

        .pe-card {
            background: #2b2f36;
            border: 1px solid #383d46;
            border-radius: 10px;
            padding: 12px 18px;
            display: flex;
            align-items: center;
            gap: 14px;
            min-height: 64px;
            transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
            cursor: pointer;
        }

        .pe-card:hover {
            transform: translateY(-3px);
            background: #343942;
            box-shadow: 0 6px 15px rgba(0,0,0,0.35);
            border-color: var(--hover-clr, #fff);
        }

        .pe-card-icon {
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .pe-card-info { flex: 1; min-width: 0; }

        .pe-card-title {
            font-size: 0.92rem;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff;
        }

        .pe-card-meta {
            font-size: 0.76rem;
            color: #8a92a6;
            margin-top: 2px;
        }

        .pe-empty-msg {
            text-align: center;
            color: #8a92a6;
            padding: 40px 20px;
            grid-column: 1 / -1;
        }

        /* ── Current Affair sticky-note wall inside PE ── */
        .caf-root {
            width: 100%;
            height: calc(100vh - 128px);
            min-height: 0;
            background: transparent;
            border-radius: 0;
            padding: 14px;
            color: #f5f7fb;
            border: 0;
            box-shadow: none;
            overflow: hidden;
        }

        .caf-container {
            width: 100%;
            max-width: 1240px;
            margin: 0 auto;
            height: 100%;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .caf-top-interface {
            position: relative;
            z-index: 40;
            background: rgba(255,255,255,0.12);
            width: 90%;
            max-width: 820px;
            padding: 8px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.22);
            box-shadow: 0 8px 22px rgba(15,27,53,0.1);
            margin: 0 auto 10px;
            backdrop-filter: blur(8px);
            flex-shrink: 0;
        }

        .caf-region-selectors {
            display: flex;
            gap: 6px;
            margin-bottom: 8px;
            align-items: center;
        }

        .caf-region-box {
            flex: 1;
            background: rgba(255,255,255,0.16);
            padding: 7px 10px;
            border-radius: 6px;
            text-align: center;
            font-weight: 800;
            font-size: 13px;
            color: #f8fafc;
            cursor: pointer;
            border: 1px solid rgba(255,255,255,0.22);
            box-shadow: 0 2px 8px rgba(15,27,53,0.1);
            transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.18s ease;
        }

        .caf-region-box:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); }
        .caf-region-box.active {
            border-color: rgba(255,255,255,0.68);
            color: #fff;
            background: rgba(15,27,53,0.46);
        }

        .caf-sub-filter {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 100%;
            position: relative;
            z-index: 30;
        }

        .caf-sub-filter label {
            font-weight: 800;
            font-size: 13px;
            color: #f8fafc;
            text-shadow: 0 1px 2px rgba(15,27,53,0.4);
        }

        .caf-date-dropdown {
            position: relative;
            width: min(100%, 280px);
        }

        .caf-date-trigger {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 7px 10px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.32);
            font-family: inherit;
            font-size: 13px;
            font-weight: 800;
            outline: none;
            cursor: pointer;
            background: rgba(255,255,255,0.88);
            color: #172033;
            box-shadow: 0 3px 10px rgba(15,27,53,0.12);
            transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
        }

        .caf-date-trigger:hover,
        .caf-date-trigger:focus-visible,
        .caf-date-trigger[aria-expanded="true"] {
            background: #fff;
            border-color: rgba(255,255,255,0.7);
            box-shadow: 0 6px 16px rgba(15,27,53,0.18);
        }

        .caf-date-chevron {
            transition: transform 0.16s ease;
        }

        .caf-date-trigger[aria-expanded="true"] .caf-date-chevron {
            transform: rotate(180deg);
        }

        .caf-date-menu {
            position: absolute;
            z-index: 50;
            top: calc(100% + 6px);
            left: 0;
            width: 220px;
            padding: 7px;
            border: 1px solid #d8dde7;
            border-radius: 9px;
            background: #fff;
            color: #172033;
            box-shadow: 0 14px 32px rgba(15,27,53,0.24);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(-5px);
            transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
        }

        .caf-date-menu[hidden] {
            display: none;
        }

        .caf-date-menu.open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
        }

        .caf-date-menu-heading {
            padding: 3px 7px 7px;
            color: #6c7484;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .caf-year-item {
            position: relative;
        }

        .caf-year-row {
            display: flex;
            align-items: stretch;
            gap: 2px;
        }

        .caf-year-option,
        .caf-year-category-toggle,
        .caf-category-option {
            appearance: none;
            border: 0;
            font-family: inherit;
            color: #172033;
            background: transparent;
            cursor: pointer;
        }

        .caf-year-option {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 7px;
            border-radius: 6px 0 0 6px;
            text-align: left;
        }

        .caf-year-label {
            font-size: 13px;
            font-weight: 900;
        }

        .caf-year-count {
            color: #697284;
            font-size: 10px;
            font-weight: 700;
            white-space: nowrap;
        }

        .caf-year-category-toggle {
            width: 30px;
            display: grid;
            place-items: center;
            border-radius: 0 6px 6px 0;
            font-size: 20px;
            font-weight: 800;
        }

        .caf-year-row:hover .caf-year-option,
        .caf-year-row:hover .caf-year-category-toggle,
        .caf-year-row:focus-within .caf-year-option,
        .caf-year-row:focus-within .caf-year-category-toggle,
        .caf-year-item.categories-open .caf-year-option,
        .caf-year-item.categories-open .caf-year-category-toggle {
            background: #eef2f8;
        }

        .caf-year-category-menu {
            position: absolute;
            z-index: 51;
            top: -7px;
            left: calc(100% - 1px);
            width: 245px;
            padding: 7px;
            border: 1px solid #d8dde7;
            border-radius: 9px;
            background: #fff;
            box-shadow: 0 14px 32px rgba(15,27,53,0.22);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateX(-5px);
            transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
        }

        .caf-year-item:hover .caf-year-category-menu,
        .caf-year-item:focus-within .caf-year-category-menu,
        .caf-year-item.categories-open .caf-year-category-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(0);
        }

        .caf-year-category-heading {
            padding: 3px 7px 7px;
            color: #6c7484;
            font-size: 11px;
            font-weight: 800;
        }

        .caf-category-option {
            width: 100%;
            display: block;
            padding: 8px 9px;
            border-radius: 6px;
            text-align: left;
            font-size: 12px;
            font-weight: 750;
        }

        .caf-category-option:hover,
        .caf-category-option:focus-visible {
            background: #eef2f8;
        }

        .caf-date-empty {
            padding: 9px 7px;
            color: #6c7484;
            font-size: 11px;
            font-weight: 700;
        }

        .caf-legacy-category-select {
            display: none !important;
        }

        .caf-carousel-wrapper {
            position: relative;
            width: 100%;
            padding: 0 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        .caf-page-indicator {
            font-size: 13px;
            font-weight: 800;
            color: var(--navy);
            background: rgba(255,255,255,0.88);
            padding: 5px 14px;
            border-radius: 20px;
            margin-bottom: 10px;
            border: 1px solid rgba(15,27,53,0.08);
            box-shadow: 0 4px 12px rgba(15,27,53,0.06);
            flex-shrink: 0;
        }

        .caf-slider-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(15,27,53,0.62);
            color: white;
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 8px 18px rgba(15,27,53,0.14);
            opacity: 0.72;
            transition: background 0.2s, opacity 0.2s, transform 0.16s ease, box-shadow 0.2s ease;
            user-select: none;
            z-index: 10;
        }

        .caf-slider-btn:active { transform: translateY(-50%) scale(0.92); }
        #caf-slide-left { left: 0; }
        #caf-slide-right { right: 0; }
        .caf-slider-btn:hover { background: var(--navy-mid); box-shadow: 0 10px 24px rgba(15,27,53,0.22); opacity: 1; }
        .caf-slider-btn:disabled { background: #bbb; opacity: 0.4; cursor: not-allowed; }

        .caf-wall-grid {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: calc((100% - 36px) / 3);
            grid-template-rows: repeat(2, minmax(0, 1fr));
            gap: 18px 18px;
            width: 100%;
            flex: 1;
            min-height: 0;
            overflow-x: auto;
            overflow-y: hidden;
            overscroll-behavior-inline: contain;
            scroll-behavior: smooth;
            scroll-snap-type: x proximity;
            padding: 8px 4px 12px;
            scrollbar-width: thin;
            scrollbar-color: rgba(15,27,53,0.34) rgba(255,255,255,0.45);
        }

        .caf-wall-grid::-webkit-scrollbar { height: 8px; }
        .caf-wall-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.45); border-radius: 999px; }
        .caf-wall-grid::-webkit-scrollbar-thumb { background: rgba(15,27,53,0.34); border-radius: 999px; }

        .caf-card-entry { animation: cafCardEntrance 0.42s cubic-bezier(0.2, 0.85, 0.28, 1.15) both; }
        @keyframes cafCardEntrance {
            0% { transform: scale(0.93) rotate(var(--base-rot, 0deg)); opacity: 0; }
            100% { transform: scale(1) rotate(var(--base-rot, 0deg)); opacity: 1; }
        }

        .caf-card-container {
            width: 100%;
            height: 100%;
            min-height: 154px;
            cursor: pointer;
            transform-origin: center center;
            scroll-snap-align: start;
        }

        .caf-card-container:nth-child(6n+1) { --base-rot: -1.8deg; transform: rotate(-1.8deg); }
        .caf-card-container:nth-child(6n+2) { --base-rot: 1.4deg; transform: rotate(1.4deg); }
        .caf-card-container:nth-child(6n+3) { --base-rot: -1.1deg; transform: rotate(-1.1deg); }
        .caf-card-container:nth-child(6n+4) { --base-rot: 1.6deg; transform: rotate(1.6deg); }
        .caf-card-container:nth-child(6n+5) { --base-rot: -1.5deg; transform: rotate(-1.5deg); }
        .caf-card-container:nth-child(6n+6) { --base-rot: 1.2deg; transform: rotate(1.2deg); }

        .caf-hanging-card {
            width: 100%;
            height: 100%;
            position: relative;
            transition: filter 0.14s ease, transform 0.12s ease;
        }

        .caf-card-container.flipped .caf-hanging-card {
            transform: scale(1.01);
        }
        .caf-card-container:hover .caf-hanging-card { filter: drop-shadow(0 16px 22px rgba(15,27,53,0.16)); }

        .caf-card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 8px;
            padding: 14px;
            box-shadow: 0 10px 24px rgba(15,27,53,0.11), 0 1px 0 rgba(255,255,255,0.72) inset;
            border: 1px solid rgba(15,27,53,0.08);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transform: scale(0.985);
            transition: opacity 0.12s ease-out, transform 0.12s ease-out;
        }

        .caf-card-container:not(.flipped) .caf-card-front,
        .caf-card-container.flipped .caf-card-back {
            opacity: 1;
            pointer-events: auto;
            transform: scale(1);
        }

        .caf-card-face::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 18px 18px 0;
            border-color: transparent transparent rgba(15,27,53,0.12) transparent;
            box-shadow: -2px 2px 5px rgba(15,27,53,0.08);
            border-bottom-left-radius: 5px;
        }

        .caf-card-front {
            border-top: 4px solid var(--navy);
            background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent 46%), linear-gradient(225deg, transparent 13px, var(--front-bg, #fff) 14px);
            background-color: var(--front-bg);
        }

        .caf-card-back {
            border-top: 4px solid #1a7f5a;
            background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent 46%), linear-gradient(225deg, transparent 13px, var(--back-bg, #f8fafc) 14px);
            background-color: var(--back-bg);
        }

        .caf-note-color-0 { --front-bg: #fff8d7; --back-bg: #eaf3ff; }
        .caf-note-color-1 { --front-bg: #ffe8e3; --back-bg: #ecfdf5; }
        .caf-note-color-2 { --front-bg: #e6f7ff; --back-bg: #fff3e4; }
        .caf-note-color-3 { --front-bg: #eaf8e9; --back-bg: #f5efff; }
        .caf-note-color-4 { --front-bg: #f2ecff; --back-bg: #fff8df; }
        .caf-note-color-5 { --front-bg: #ffeeda; --back-bg: #e9fbf4; }

        .caf-hanging-card::before {
            content: "";
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 10px;
            height: 10px;
            background: linear-gradient(135deg, #d44b4b, #8f1d1d);
            border-radius: 50%;
            box-shadow: 0 2px 6px rgba(15,27,53,0.28);
            z-index: 5;
        }

        .caf-hanging-card::after {
            content: "";
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 8px;
            background: rgba(15,27,53,0.38);
            z-index: 4;
        }

        .caf-card-number {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--navy);
            background: rgba(15,27,53,0.08);
            padding: 3px 7px;
            border-radius: 8px;
            align-self: flex-start;
            font-weight: 800;
            margin-bottom: 4px;
        }

        .caf-card-back .caf-card-number { color: #1a7f5a; background: rgba(26,127,90,0.1); }
        .caf-question-wrapper,
        .caf-answer-wrapper {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px 0;
        }

        .caf-question-text,
        .caf-answer-text {
            font-size: 13.5px;
            font-weight: 700;
            color: #172033;
            line-height: 1.45;
            text-align: center;
            width: 100%;
            max-height: 110px;
            overflow-y: auto;
        }

        .caf-card-footer {
            padding-top: 6px;
            border-top: 1px solid rgba(15,27,53,0.08);
            display: flex;
            justify-content: space-between;
            gap: 8px;
            font-size: 10px;
            color: #4b5563;
            font-weight: 700;
        }

        .caf-empty-wall {
            grid-column: 1 / -1;
            grid-row: 1 / -1;
            text-align: center;
            padding: 40px;
            background: rgba(255,255,255,0.5);
            border-radius: 12px;
            border: 2px dashed #bbb;
            color: #666;
            font-size: 15px;
            align-self: center;
        }

        @media (max-width: 900px) {
            .caf-wall-grid { grid-auto-columns: calc((100% - 18px) / 2); }
        }

        @media (max-width: 560px) {
            .caf-root { height: calc(100vh - 114px); padding: 7px; border-radius: 0; }
            .caf-top-interface { width: 100%; padding: 6px; margin-bottom: 6px; }
            .caf-region-selectors { flex-wrap: nowrap; gap: 4px; margin-bottom: 5px; }
            .caf-region-box { min-width: 0; font-size: 11px; padding: 5px 4px; }
            .caf-sub-filter { flex-direction: row; align-items: center; gap: 6px; }
            .caf-sub-filter label,
            .caf-date-trigger { font-size: 11px; }
            .caf-date-dropdown { width: min(100%, 190px); }
            .caf-date-trigger { padding: 5px 8px; }
            .caf-date-menu { width: 100%; }
            .caf-year-category-menu {
                position: static;
                display: none;
                width: 100%;
                max-height: min(42vh, 300px);
                margin: 2px 0 4px;
                overflow-y: auto;
                transform: none;
            }
            .caf-year-item.categories-open .caf-year-category-menu {
                display: block;
                transform: none;
            }
            .caf-carousel-wrapper { padding: 0; }
            .caf-page-indicator { font-size: 11px; padding: 4px 10px; margin-bottom: 6px; }
            .caf-slider-btn { display: none; }
            .caf-slider-btn:active { transform: translateY(-50%) scale(0.92); }
            #caf-slide-left { left: 0; }
            #caf-slide-right { right: 0; }
            .caf-wall-grid {
                grid-auto-flow: row;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-template-rows: none;
                grid-auto-rows: clamp(150px, 27vh, 190px);
                gap: 12px 8px;
                overflow-x: hidden;
                overflow-y: auto;
                overscroll-behavior-block: contain;
                scroll-snap-type: y proximity;
                padding: 8px 3px 14px;
            }
            .caf-wall-grid::-webkit-scrollbar { width: 5px; height: 0; }
            .caf-card-container { height: 100%; min-height: 0; }
            .caf-card-face { padding: 9px 8px; border-radius: 7px; }
            .caf-card-number { font-size: 8px; padding: 2px 5px; margin-bottom: 2px; }
            .caf-question-wrapper,
            .caf-answer-wrapper { padding: 2px 0; }
            .caf-question-text,
            .caf-answer-text { font-size: 12px; line-height: 1.3; max-height: none; }
            .caf-card-footer { padding-top: 4px; gap: 4px; font-size: 8px; }
        }

        /* ── Online Test landing panel ── */
        .pe-online-card {
            background: #2b2f36;
            border: 1px solid #383d46;
            border-radius: 14px;
            padding: 28px;
            max-width: 480px;
        }

        .pe-online-stat {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 18px;
        }

        .pe-online-stat i {
            font-size: 1.6rem;
            color: #ff9800;
            width: 40px;
            text-align: center;
            flex-shrink: 0;
        }

        .pe-online-stat-val {
            font-size: 1.2rem;
            font-weight: 700;
            color: #fff;
        }

        .pe-online-stat-lbl {
            font-size: 0.78rem;
            color: #8a92a6;
        }

        .pe-online-note {
            font-size: 0.82rem;
            color: #aaa;
            line-height: 1.5;
            margin: 6px 0 20px;
            padding: 12px 14px;
            background: #20232a;
            border-left: 3px solid #ff9800;
            border-radius: 6px;
        }

        .pe-online-start-btn {
            width: 100%;
            background: #ff9800;
            color: #1a1a1a;
            border: none;
            padding: 11px 16px;
            border-radius: 10px;
            font-size: 13.5px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }

        .pe-online-start-btn:hover {
            background: #ffac33;
            transform: translateY(-1px);
        }

        /* ══════════════════════════════════════════════════
           PE ONLINE TEST — SPLIT-SCREEN WORKSPACE
           Adapted from the OMR-Driven Sticky Mobile Testing Engine
           reference: graph panel stays hidden by default and expands
           above the question automatically for DI questions.
        ══════════════════════════════════════════════════ */
        .peo-test-workspace {
            position: fixed;
            inset: 64px 0 0 0;
            background: var(--cream);
            display: none;
            padding: 20px;
            gap: 20px;
            z-index: 40;
            overflow: hidden;
        }

        .peo-mobile-top-wrapper {
            display: flex;
            flex: 1 1 auto;
            min-width: 0;
            min-height: 0;
            height: 100%;
            flex-direction: column;
            gap: 14px;
        }

        .peo-graph-panel {
            width: 0%;
            opacity: 0;
            visibility: hidden;
            background: transparent;
            border-radius: 0;
            border: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 15px;
            flex: 0 0 0%;
            transition: flex-basis 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.3s ease,
                        padding 0.4s ease;
        }

        .peo-test-workspace.split-mode .peo-graph-panel {
            flex: 0 0 auto;
            width: 100%;
            height: 46%;
            min-height: 240px;
            max-height: 46%;
            opacity: 1;
            visibility: visible;
            padding: 22px;
        }

        .peo-graph-title { font-weight: 700; color: var(--navy); font-size: 14px; }
        .peo-graph-image-box {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }
        .peo-graph-image-box img {
            height: 100%;
            width: 100%;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 6px;
            border: 0;
            filter: drop-shadow(0 10px 18px rgba(15, 27, 53, 0.18));
            transition: opacity 0.2s ease;
        }

        .peo-question-panel {
            flex: 1 1 100%;
            min-width: 0;
            background: #fff;
            border-radius: 12px;
            border: 1px solid var(--border);
            padding: 32px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow-y: auto;
            transition: flex-basis 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
        }

        .peo-test-workspace.split-mode .peo-question-panel {
            flex: 1 1 auto;
            width: 100%;
            min-height: 0;
        }

        @media (min-width: 769px) {
            .peo-test-workspace.split-mode .peo-graph-panel {
                height: 58%;
                max-height: 58%;
                padding: 18px;
            }

            .peo-test-workspace.split-mode .peo-question-panel {
                padding: 16px 22px;
            }

            .peo-test-workspace.split-mode .peo-badge-row {
                margin-bottom: 8px;
            }

            .peo-test-workspace.split-mode .peo-question-text {
                font-size: 14px;
                line-height: 1.34;
                margin-bottom: 10px;
            }

            .peo-test-workspace.split-mode .peo-options-container {
                gap: 6px;
            }

            .peo-test-workspace.split-mode .peo-option-row {
                min-height: 34px;
                padding: 7px 9px;
                font-size: 13px;
                line-height: 1.25;
            }

            .peo-test-workspace.split-mode .peo-footer-nav {
                margin-top: 10px;
                padding-top: 8px;
            }

            .peo-test-workspace.split-mode .peo-option-letter {
                width: 20px;
                height: 20px;
                margin-right: 8px;
                font-size: 11px;
            }
        }

        /* Fades the question content in on every render (new question or
           a split-mode switch), so swaps feel smooth instead of an
           instant content snap. */
        @keyframes peoContentFadeIn {
            from { opacity: 0; transform: translateY(4px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .peo-question-panel #peo-question-content {
            animation: peoContentFadeIn 0.25s ease both;
        }

        .peo-badge-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 8px; }
        .peo-q-badge { background: var(--navy); color: #fff; padding: 6px 14px; border-radius: 6px; font-weight: 700; font-size: 13px; }
        .peo-cat-badge { background: var(--gold-pale, #f5ecd0); color: var(--gold); padding: 6px 12px; border-radius: 6px; font-weight: 700; font-size: 12px; letter-spacing: 0.3px; }
        .peo-question-text { font-size: 15.5px; font-weight: 600; line-height: 1.6; margin-bottom: 26px; color: var(--ink); white-space: pre-wrap; }

        .peo-options-container { display: grid; grid-template-columns: 1fr; gap: 12px; }
        .peo-test-workspace.split-mode .peo-options-container {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            align-items: stretch;
        }
        .peo-option-row {
            display: flex; align-items: center;
            background: var(--cream); border: 1px solid var(--border);
            border-radius: 8px; padding: 14px 18px; min-height: 50px;
            cursor: default;
            user-select: none;
            pointer-events: none;
            color: #1f2937;
            font-weight: 650;
        }
        .peo-test-workspace.split-mode .peo-option-row {
            justify-content: flex-start;
            min-width: 0;
        }
        .peo-option-letter {
            width: 24px; height: 24px; border: 1px solid #a8a29e; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; margin-right: 14px; background: #fff; flex-shrink: 0; font-size: 12px;
            color: #374151;
        }
        .peo-option-row.selected { background: var(--gold-pale, #fdf4e3); border-color: var(--gold); }
        .peo-option-row.selected .peo-option-letter { background: var(--navy); color: #fff; border-color: var(--navy); }

        .peo-footer-nav { display: flex; margin-top: 26px; border-top: 1px solid var(--border); padding-top: 18px; }
        .peo-btn-prev {
            padding: 8px 18px; border: 1px solid var(--border); background: #fff;
            border-radius: 8px; font-weight: 600; cursor: pointer; color: var(--ink-muted);
        }
        .peo-btn-prev:disabled { opacity: 0.4; cursor: not-allowed; }

        .peo-omr-panel {
            width: 230px; flex-shrink: 0;
            background: #fff; border-radius: 12px; border: 1px solid var(--border);
            display: flex; flex-direction: column;
        }
        .peo-omr-header { background: var(--navy); color: #fff; padding: 14px; border-radius: 11px 11px 0 0; font-weight: 700; text-align: center; font-size: 13px; }
        .peo-omr-rows-container { flex: 1; overflow-y: auto; padding: 10px; }
        .peo-omr-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 8px 6px; border-bottom: 1px solid #f1f1f1; border-radius: 6px; cursor: default;
        }
        .peo-omr-row.focused-row { background: var(--cream); border-left: 4px solid var(--navy); padding-left: 6px; }
        .peo-omr-q-num { font-weight: 700; color: var(--ink-muted); width: 30px; cursor: pointer; font-size: 12.5px; }
        .peo-omr-bubbles { display: flex; gap: 5px; }
        .peo-bubble {
            width: 26px; height: 26px; border: 1px solid #cbd5e1; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 11.5px; cursor: pointer; background: #fff;
            color: #374151;
        }
        .peo-bubble.active {
            background: var(--navy);
            border-color: var(--navy);
            color: #fff;
            transform: scale(1.05);
        }

        .peo-omr-footer-area { border-top: 1px solid var(--border); background: var(--cream); display: flex; flex-direction: column; border-radius: 0 0 11px 11px; }
        .peo-omr-summary-bar { padding: 10px 5px; display: flex; justify-content: space-around; text-align: center; font-size: 12px; }
        .peo-summary-val { font-weight: 700; color: var(--navy); }
        .peo-submit-btn-container { padding: 0 12px 12px; }
        .peo-btn-submit { width: 100%; padding: 10px; background: #2f9e44; color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; }

        body.dark-theme .exam-layout.show,
        body.dark-theme .peo-test-workspace {
            background: #111827 !important;
        }

        body.dark-theme .peo-question-panel,
        body.dark-theme .peo-graph-panel,
        body.dark-theme .peo-omr-panel {
            background: rgba(17,24,39,0.94);
            border-color: rgba(148,163,184,0.24);
            color: #f8fafc;
        }

        body.dark-theme .peo-graph-panel {
            background: transparent;
            border: 0;
        }

        body.dark-theme .peo-question-text,
        body.dark-theme .peo-option-row,
        body.dark-theme .peo-graph-title,
        body.dark-theme .peo-omr-q-num,
        body.dark-theme .peo-omr-summary-bar {
            color: #f8fafc;
        }

        body.dark-theme .peo-option-row,
        body.dark-theme .peo-omr-row,
        body.dark-theme .peo-omr-footer-area {
            background: rgba(30,41,59,0.82);
            border-color: rgba(148,163,184,0.22);
        }

        body.dark-theme .peo-option-letter,
        body.dark-theme .peo-bubble {
            background: rgba(15,23,42,0.9);
            border-color: rgba(203,213,225,0.62);
            color: #dbe5f4;
        }

        body.dark-theme .peo-option-row.selected {
            background: rgba(201,168,76,0.18);
            border-color: var(--gold-light);
        }

        body.dark-theme .peo-cat-badge,
        body.dark-theme .q-audio-timer {
            background: rgba(201,168,76,0.18);
            color: var(--gold-light);
            border: 1px solid rgba(201,168,76,0.28);
        }

        body.dark-theme .peo-bubble.active,
        body.dark-theme .omr-bubble.filled {
            background: var(--gold-light);
            border-color: var(--gold-light);
            color: #111827;
        }

        body.dark-theme .peo-summary-val {
            color: var(--gold-light);
        }

        @media (max-width: 768px) {
            .peo-test-workspace {
                flex-direction: column;
                padding: 8px 8px 126px;
                gap: 8px;
                overflow: hidden;
            }

            .peo-mobile-top-wrapper {
                display: flex;
                flex: 1 1 auto;
                min-height: 0;
                height: 100%;
                flex-direction: column;
                gap: 8px;
            }

            .peo-graph-panel,
            .peo-question-panel {
                border-radius: 8px;
                height: 100%;
                min-height: 0;
                overflow-y: auto;
            }

            .peo-graph-panel { display: none; }
            .peo-question-panel { flex: 1 1 100%; padding: 14px; }

            .peo-test-workspace.split-mode .peo-mobile-top-wrapper {
                flex-direction: column;
            }

            .peo-test-workspace.split-mode .peo-graph-panel {
                display: flex;
                flex: 0 0 auto;
                width: 100% !important;
                height: auto;
                max-height: 42%;
                opacity: 1;
                visibility: visible;
                padding: 8px 8px 10px;
            }

            .peo-test-workspace.split-mode .peo-question-panel {
                flex: 1 1 auto;
                width: 100% !important;
                min-height: 0;
                height: auto;
                padding: 10px 12px;
            }

            .peo-graph-title {
                font-size: 11px;
                line-height: 1.2;
            }

            .peo-graph-image-box {
                flex: 1;
                min-height: 0;
                align-items: center;
            }

            .peo-graph-image-box img {
                width: 100%;
                height: min(32vh, 240px);
                max-width: 100%;
                object-fit: contain;
            }

            .peo-badge-row { margin-bottom: 10px; }
            .peo-q-badge,
            .peo-cat-badge {
                padding: 5px 8px;
                font-size: 10.5px;
            }
            .peo-question-text {
                font-size: 13px;
                line-height: 1.45;
                margin-bottom: 12px;
            }
            .peo-options-container { gap: 8px; }
            .peo-test-workspace.split-mode .peo-options-container {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 6px;
            }
            .peo-option-row {
                padding: 9px 10px;
                min-height: 38px;
                font-size: 12.5px;
                line-height: 1.35;
            }
            .peo-test-workspace.split-mode .peo-option-row {
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 4px;
                min-height: 54px;
                padding: 7px 5px;
                text-align: center;
                font-size: 11px;
            }
            .peo-option-letter {
                width: 22px;
                height: 22px;
                margin-right: 9px;
                font-size: 11px;
            }
            .peo-test-workspace.split-mode .peo-option-letter {
                margin-right: 0;
            }
            .peo-footer-nav {
                margin-top: 12px;
                padding-top: 10px;
            }
            .peo-btn-prev {
                padding: 8px 12px;
                font-size: 12px;
            }

            .peo-omr-panel {
                position: fixed;
                left: 8px;
                right: 8px;
                bottom: 8px;
                width: auto;
                min-height: 106px;
                max-height: 124px;
                z-index: 90;
                border-radius: 8px;
                box-shadow: 0 -6px 24px rgba(15,27,53,0.16);
            }
            .peo-omr-header {
                padding: 6px 10px;
                border-radius: 7px 7px 0 0;
                font-size: 11px;
                line-height: 1;
            }
            .peo-omr-rows-container {
                overflow-y: auto;
                padding: 7px 8px;
                max-height: 48px;
                scrollbar-width: thin;
            }
            .peo-omr-row {
                display: none;
                border-bottom: none;
                padding: 0;
                background: var(--cream);
                border: 1px solid var(--border);
                border-radius: 8px;
                gap: 8px;
            }
            .peo-omr-row.focused-row {
                display: flex;
                align-items: center;
            }
            .peo-omr-q-num {
                width: 38px;
                margin: 0;
                text-align: left;
                font-size: 11.5px;
            }
            .peo-omr-row.focused-row {
                background: var(--gold-pale, #fef3c7);
                border-color: var(--gold);
                border-left: 1px solid var(--gold);
            }
            .peo-omr-bubbles {
                flex: 1;
                display: grid;
                grid-template-columns: repeat(4, minmax(28px, 1fr));
                gap: 6px;
            }
            .peo-bubble {
                width: 100%;
                height: 30px;
                border-radius: 999px;
            }
            .peo-omr-footer-area {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 8px;
                border-radius: 0 0 7px 7px;
            }
            .peo-omr-summary-bar {
                flex: 1;
                padding: 6px 8px;
                justify-content: space-between;
                font-size: 11px;
                gap: 8px;
            }
            .peo-submit-btn-container {
                padding: 6px 8px 6px 0;
                width: 116px;
                flex-shrink: 0;
            }
            .peo-btn-submit {
                padding: 9px 8px;
                min-height: 34px;
                font-size: 12px;
            }
        }

        .pe-back-link {
            background: none;
            border: none;
            color: #8a92a6;
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
            padding: 6px 0;
            margin-bottom: 16px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .pe-back-link:hover { color: #fff; }

        .pe-content:has(#pe-di-viewer-screen.active) {
            overflow: hidden;
            padding-top: 0;
        }

        #pe-di-viewer-screen.active {
            height: 100%;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        #pe-di-viewer-screen > .pe-back-link {
            flex: 0 0 auto;
            position: sticky;
            top: 0;
            z-index: 24;
            align-self: flex-start;
            margin-bottom: 4px;
            padding: 8px 0 4px;
            line-height: 1.1;
        }

        /* ── Data Interpretation: GMAT/GRE-style split screen ──
           Left pane: chart image, sticky/fixed in place.
           Right pane: one question at a time, scrolls independently. ── */
        .pe-di-split {
            display: flex;
            gap: 16px;
            align-items: stretch;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

        .pe-di-split-left {
            flex: 0 0 min(46vw, 680px);
            min-width: 0;
            position: relative;
            background: #2b2f36;
            border: 1px solid #383d46;
            border-radius: 14px;
            padding: 18px;
            height: calc(100% - 32px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .pe-di-split.is-standalone {
            flex-direction: column;
            gap: 0;
        }

        .pe-di-split.is-standalone .pe-di-split-left {
            flex: 0 0 auto;
            width: 100%;
            height: auto;
            padding: 0;
            overflow: visible;
            background: transparent;
            border: 0;
        }

        .pe-di-split.is-standalone .pe-di-chart-wrap,
        .pe-di-split.is-standalone .pe-di-set-title {
            display: none;
        }

        .pe-di-split.is-standalone .pe-di-graph-controls {
            margin: 0 0 8px;
        }

        .pe-di-split.is-standalone .pe-di-split-right {
            width: 100%;
            height: auto;
            min-height: 0;
            flex: 1 1 0;
        }

        .pe-di-chart-wrap {
            background: #fff;
            border-radius: 8px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1 1 0;
            min-height: 0;
            height: auto;
            overflow: hidden;
            box-sizing: border-box;
            contain: layout paint;
        }

        .pe-di-chart-wrap img {
            width: 100%;
            height: 100%;
            min-width: 0;
            min-height: 0;
            max-width: 100%;
            max-height: 100%;
            display: block;
            object-fit: contain;
            object-position: center;
            border-radius: 4px;
            opacity: 1;
            transition: opacity 0.16s ease-out;
        }

        .pe-di-chart-wrap img.is-loading {
            opacity: 0;
            pointer-events: none;
        }

        .pe-di-set-title {
            margin-top: 8px;
            font-size: 13px;
            font-weight: 700;
            color: #c9ccd2;
            text-align: center;
        }

        .pe-di-graph-controls {
            margin-top: 6px;
            min-height: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

        @media (prefers-reduced-motion: reduce) {
            .pe-di-chart-wrap img {
                transition: none;
            }
        }

        .pe-di-graph-count {
            font-size: 7px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #aeb4c0;
        }

        .pe-di-graph-buttons {
            display: flex;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .pe-di-graph-btn {
            border: 1px solid #4a5260;
            background: #1f232b;
            color: #f5f7fb;
            border-radius: 999px;
            padding: 6px 10px;
            font-size: 8px;
            font-weight: 800;
            cursor: pointer;
            transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
        }

        .pe-di-graph-btn:hover:not(:disabled) {
            background: #2b313c;
            border-color: #7c8594;
            transform: translateY(-1px);
        }

        .pe-di-graph-btn.primary {
            background: #2563eb;
            border-color: #60a5fa;
        }

        .pe-di-graph-btn.primary:hover:not(:disabled) {
            background: #1d4ed8;
        }

        .pe-di-graph-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .pe-di-split-right {
            flex: 1;
            min-width: 0;
            height: 100%;
            max-height: none;
            overflow-y: auto;
            padding-right: 8px;
            scroll-behavior: smooth;
        }

        .pe-di-split-right::-webkit-scrollbar {
            width: 8px;
        }

        .pe-di-split-right::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.04);
            border-radius: 999px;
        }

        .pe-di-split-right::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.22);
            border-radius: 999px;
        }

        @media (max-width: 860px) {
            .pe-content:has(#pe-home-panel.active) {
                overflow-y: auto;
                padding: 18px 14px 86px;
            }

            #pe-home-panel.active {
                height: auto;
                min-height: 0;
                display: block;
            }

            #pe-home-panel.active .pe-home-dashboard-section { display: block; }
            .pe-resource-panel { min-height: 220px; overflow-y: visible; }
            .pe-formula-library { height: auto; grid-template-columns: 1fr; }
            .pe-formula-topic-list { overflow-y: visible; }
            .pe-formula-answer-line { grid-template-columns: auto minmax(0, 1fr) auto; padding-left: 0; }
            .pe-formula-answer-line .pe-resource-feedback { grid-column: 2 / -1; }

            .pe-content:has(#pe-di-viewer-screen.active) {
                overflow-y: auto;
                padding-top: 6px;
            }

            #pe-di-viewer-screen.active {
                height: auto;
                min-height: 100%;
            }

            #pe-di-viewer-screen > .pe-back-link {
                position: sticky;
                top: 0;
                z-index: 24;
                width: auto;
                align-self: flex-start;
                margin-bottom: 2px;
                padding: 0 0 2px;
                line-height: 1.1;
                background: transparent;
                backdrop-filter: none;
            }

            .pe-di-split {
                flex: 0 0 auto;
                flex-direction: column;
                gap: 2px;
                overflow: visible;
                margin-top: 0;
            }
            .pe-di-split-left {
                position: sticky;
                top: 18px;
                z-index: 22;
                max-height: none;
                height: auto;
                width: 100%;
                padding: 8px;
                overflow: visible;
                box-shadow: 0 10px 24px rgba(0,0,0,0.28);
            }

            .pe-di-split.is-standalone .pe-di-split-left {
                position: static;
                box-shadow: none;
            }

            .pe-di-chart-wrap {
                flex: none;
                height: clamp(170px, 26vh, 260px);
                max-height: none;
                padding: 6px;
                overflow: hidden;
            }

            .pe-di-chart-wrap img {
                width: 100%;
                height: 100%;
                max-height: 100%;
                object-fit: contain;
            }

            .pe-di-set-title {
                margin-top: 3px;
                font-size: 12.5px;
                line-height: 1.2;
            }

            .pe-di-graph-controls {
                margin-top: 4px;
                margin-bottom: 0;
                gap: 3px;
            }

            .pe-di-graph-buttons {
                gap: 4px;
            }

            .pe-di-graph-btn {
                padding: 5px 8px;
                font-size: 8px;
                line-height: 1.15;
            }

            .pe-di-split-right {
                width: 100%;
                height: auto;
                max-height: none;
                overflow-y: visible;
                padding-right: 0;
            }

            .pe-di-split-right .pe-question-card {
                padding: 13px;
                margin-bottom: 8px;
                border-radius: 10px;
            }

            .pe-di-split-right .pe-question-meta {
                gap: 6px;
                margin-bottom: 8px;
            }

            .pe-di-split-right .pe-question-text {
                font-size: 14px;
                line-height: 1.4;
                margin-bottom: 10px;
            }

            .pe-di-split-right .pe-options-grid {
                grid-template-columns: 1fr;
                gap: 6px;
                margin-bottom: 8px;
            }

            .pe-di-split-right .pe-option {
                padding: 8px 10px;
                font-size: 12.5px;
                line-height: 1.3;
            }

            .pe-di-split-right .pe-feedback-msg {
                padding: 3px 0;
                font-size: 12px;
            }

            .pe-di-split-right .pe-solution-box {
                padding: 10px;
                margin-top: 8px;
            }
        }

        /* ── Question attempt cards ── */
        .pe-question-card {
            background: #2b2f36;
            border: 1px solid #383d46;
            border-radius: 14px;
            padding: 22px;
            margin-bottom: 18px;
        }

        .pe-question-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }

        .pe-question-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            background: var(--clr, #4caf50);
            color: white;
            border-radius: 50%;
            font-weight: 700;
            font-size: 12px;
            flex-shrink: 0;
        }

        .pe-question-tag {
            display: inline-block;
            background: #383d46;
            color: #c9ccd2;
            font-size: 10.5px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }

        .pe-question-text {
            font-size: 15.5px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 16px;
            line-height: 1.5;
            white-space: pre-wrap;
        }

        .pe-question-image {
            max-width: 100%;
            max-height: 240px;
            border-radius: 8px;
            margin-bottom: 16px;
            display: block;
        }

        .pe-options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            margin-bottom: 14px;
        }

        .pe-written-answer {
            display: grid;
            gap: 6px;
            max-width: 440px;
            margin-bottom: 14px;
        }

        .pe-written-answer label {
            color: #cbd2dd;
            font-size: 12px;
            font-weight: 800;
        }

        .pe-written-answer input {
            min-height: 38px;
            padding: 8px 10px;
            border: 1.5px solid #383d46;
            border-radius: 7px;
            background: #20232a;
            color: #f5f7fb;
            font: inherit;
            font-size: 13px;
        }

        .pe-written-answer input:focus {
            outline: none;
            border-color: var(--clr, #4caf50);
        }

        .pe-option {
            padding: 11px 14px;
            border: 1.5px solid #383d46;
            border-radius: 8px;
            background: #20232a;
            color: #e4e6ea;
            font-size: 13.5px;
            line-height: 1.4;
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
            font-family: inherit;
            width: 100%;
        }

        .pe-option:hover:not(.pe-locked) {
            border-color: var(--clr, #4caf50);
            background: #262a32;
        }

        .pe-option.pe-correct {
            border-color: #2f9e44;
            background: #163d22;
            color: #6ee08c;
            font-weight: 600;
        }

        .pe-option.pe-correct::before { content: '✓ '; font-weight: 700; }

        .pe-option.pe-incorrect {
            border-color: #e03131;
            background: #3d1616;
            color: #ff8a8a;
            font-weight: 600;
        }

        .pe-option.pe-incorrect::before { content: '✕ '; font-weight: 700; }

        .pe-option.pe-locked { cursor: default; }

        .pe-option.pe-locked.pe-selected {
            cursor: pointer;
        }

        .pe-option.pe-locked.pe-selected:hover,
        .pe-option.pe-locked.pe-selected:focus-visible {
            filter: brightness(1.08);
            transform: translateY(-1px);
        }

        .pe-question-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .pe-answer-toggle {
            border: 1px solid #4a5260;
            background: #20232a;
            color: #f5f7fb;
            border-radius: 999px;
            padding: 8px 13px;
            font-size: 12.5px;
            font-weight: 800;
            cursor: pointer;
            transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
        }

        .pe-answer-toggle:hover {
            background: #2b313c;
            border-color: var(--clr, #4caf50);
            transform: translateY(-1px);
        }

        .pe-feedback-msg { font-size: 13px; font-weight: 700; padding: 6px 0; }
        .pe-feedback-msg.correct { color: #6ee08c; }
        .pe-feedback-msg.incorrect { color: #ff8a8a; }

        .pe-solution-box {
            background: #20232a;
            border-left: 4px solid var(--clr, #4caf50);
            padding: 16px;
            border-radius: 8px;
            margin-top: 14px;
            display: none;
        }

        .pe-solution-box.open {
            display: block;
            animation: peSlideDown 0.25s ease;
        }

        .pe-solution-title {
            font-weight: 700;
            color: #fff;
            margin-bottom: 8px;
            font-size: 13px;
        }

        .pe-solution-text {
            color: #c9ccd2;
            font-size: 13.5px;
            line-height: 1.6;
        }

        .pe-solution-copy {
            white-space: pre-wrap;
        }

        .pe-solution-inline-link {
            color: #7dd3fc;
            overflow-wrap: anywhere;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .pe-solution-resources {
            border-top: 1px solid #ffffff1f;
            margin-top: 14px;
            padding-top: 12px;
        }

        .pe-solution-resources-label {
            color: #8f96a3;
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 0.09em;
            margin-bottom: 8px;
            text-transform: uppercase;
        }

        .pe-solution-resource {
            align-items: center;
            background: #292d35;
            border: 1px solid #3a3f49;
            border-radius: 8px;
            color: #eef0f3;
            display: flex;
            gap: 10px;
            margin-top: 7px;
            min-width: 0;
            padding: 10px 11px;
            text-decoration: none;
            transition: border-color 0.18s ease, background 0.18s ease;
        }

        .pe-solution-resource:hover,
        .pe-solution-resource:focus-visible {
            background: #30353e;
            border-color: var(--clr, #4caf50);
        }

        .pe-solution-resource-icon {
            align-items: center;
            background: #3a414b;
            border-radius: 7px;
            color: #8ee3af;
            display: flex;
            flex: 0 0 32px;
            font-size: 13px;
            height: 32px;
            justify-content: center;
        }

        .pe-solution-resource.youtube .pe-solution-resource-icon {
            background: #4a3032;
            color: #ff8a8a;
        }

        .pe-solution-resource-copy {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            min-width: 0;
        }

        .pe-solution-resource-copy strong {
            color: #f4f5f6;
            font-size: 12.5px;
        }

        .pe-solution-resource-copy span {
            color: #9ca3ae;
            font-size: 11px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pe-solution-resource-arrow {
            color: #8f96a3;
            flex: 0 0 auto;
            font-size: 14px;
        }

        @keyframes peSlideDown {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 700px) {
            .pe-root { flex-direction: column; }
            .pe-navigation-spacer { display: none; }
            .pe-navigation {
                position: sticky;
                top: 0;
                left: 0;
                transform: none;
                width: 100%;
                min-height: auto;
                flex-direction: row;
                border-radius: 0;
                margin: 0;
                padding: 5px 4px;
            }
            .pe-navigation.open { width: 100%; }
            .pe-menu-toggle { display: none; }
            .pe-list {
                flex-direction: row;
                margin-top: 0;
                padding: 0;
                justify-content: space-around;
            }
            .pe-list-item { height: auto; margin: 0; flex: 1; }
            .pe-list-item a { flex-direction: column; gap: 1px; padding: 4px 1px; }
            .pe-list-item a .pe-icon { min-width: auto; height: auto; font-size: 16px; background: none !important; box-shadow: none !important; color: inherit; }
            .pe-list-item.active a .pe-icon { color: var(--clr); }
            .pe-list-item a .pe-text {
                opacity: 1; visibility: visible; padding: 0; height: auto; line-height: 1.2;
                font-size: 8.7px; text-align: center;
            }
            .pe-content { padding: 18px 14px 86px; height: auto; min-height: 0; overflow-y: auto; }
            .pe-content:has(#pe-current-affair-panel.active) { padding: 7px; overflow: hidden; }
            .pe-content:has(#pe-current-affair-panel.active) .caf-root { height: 100%; }
            .pe-options-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 560px) {
            .pe-content:has(#pe-current-affair-panel.active) .caf-root { height: 100%; }
        }

        /* Compact public header so every entry action remains visible on phones. */
        @media (max-width: 560px) {
            body { padding-top: 50px; }

            header {
                height: 50px;
                padding: 0 6px;
                gap: 5px;
            }

            .header-brand {
                gap: 6px;
                min-width: 0;
                flex: 0 1 auto;
            }

            .brand-icon {
                width: 28px;
                height: 28px;
                border-radius: 6px;
                font-size: 14px;
            }

            .brand-text { min-width: 0; }

            .brand-text h1 {
                font-size: 14px;
                line-height: 1.05;
                letter-spacing: 0;
            }

            .brand-text p {
                max-width: 82px;
                margin-top: 2px;
                font-size: 7.5px;
                line-height: 1.15;
                letter-spacing: 0.35px;
            }

            .header-right {
                gap: 4px;
                flex: 0 0 auto;
            }

            .header-right .btn {
                min-height: 30px;
                padding: 5px 7px;
                gap: 3px;
                border-radius: 5px;
                font-size: 10px;
                letter-spacing: 0;
            }

            .timer-badge {
                gap: 4px;
                padding: 5px 7px;
                font-size: 11px;
                letter-spacing: 0.4px;
            }

            #setup-view,
            #pe-view,
            .peo-test-workspace {
                inset: 50px 0 0 0;
            }

            .exam-layout.show {
                inset: 50px 0 0 0 !important;
            }
        }

        /* Popup content colors; the single prism surface is defined last. */
        .modal-backdrop .modal-title,
        .modal-backdrop .modal-subtitle,
        .modal-backdrop .modal-security-note { color: #f5f8f8; }
        .modal-backdrop .contact-field label,
        .modal-backdrop .contact-form-note { color: #e7eeee; }
        .modal-backdrop .contact-precaution {
            background: rgba(139, 211, 200, 0.10);
            border-color: rgba(226, 242, 240, 0.28);
            color: #f1f6f5;
        }
        #setup-view > .panel .setup-badge {
            background: rgba(221, 240, 237, 0.10);
            border-color: rgba(226, 242, 240, 0.38);
        }
        #setup-view > .panel .form-control,
        .modal-backdrop .pw-input,
        .modal-backdrop .otp-digit-input {
            background: rgba(242, 247, 247, 0.88);
            border-color: rgba(255,255,255,0.48);
        }

        @media (max-width: 560px) {
            #setup-view > .panel,
            .modal-backdrop .modal-box {
                border-radius: 15px;
                -webkit-backdrop-filter: blur(20px) saturate(125%);
                backdrop-filter: blur(20px) saturate(125%);
            }
        }

        /* Keep glass on the popup only; retain the original public backdrop. */
        #setup-view { background: transparent; }
        .modal-backdrop {
            background: rgba(15, 27, 53, 0.55);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
        }

        @media (max-width: 360px) {
            .brand-text p { display: none; }
            .header-right .btn { padding-left: 6px; padding-right: 6px; }
        }

        #pe-di-chart-img,
        #peo-graph-img,
        .q-image,
        .pe-question-image {
            cursor: zoom-in;
            touch-action: manipulation;
        }

        body.image-zoom-open {
            overflow: hidden;
        }

        .image-zoom-overlay {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(12px, 3vw, 32px);
            background: rgba(7, 12, 24, 0.86);
            cursor: zoom-out;
        }

        .image-zoom-img {
            display: block;
            max-width: 96vw;
            max-height: 92vh;
            object-fit: contain;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
        }

        /* Entry-card content colors used for both setup stages. */
        #setup-view > .panel {
            color: #f7f8fb;
        }

        #setup-view > .panel .panel-header { border-color: rgba(207, 211, 221, 0.35); }
        #setup-view > .panel .panel-header h2,
        #setup-view > .panel .panel-header p,
        #setup-view > .panel .form-group label { color: #f7f8fb; }
        #setup-view > .panel .setup-badge {
            background: rgba(21, 30, 51, 0.72);
            border-color: rgba(220, 224, 233, 0.56);
            color: #ffffff;
        }
        #setup-view > .panel .form-control {
            background: #e8e9eb;
            border-color: rgba(226, 229, 235, 0.72);
            color: #172033;
        }
        #setup-view > .panel .form-control:focus {
            background: #ffffff;
            border-color: #d5b36a;
            box-shadow: 0 0 0 3px rgba(213, 179, 106, 0.20);
        }

        @media (max-width: 860px) {
            .pe-formula-library {
                height: min(680px, calc(100svh - 178px));
                min-height: 440px;
                grid-template-columns: minmax(0, 1fr);
                grid-template-rows: minmax(120px, 30%) minmax(0, 1fr);
                overflow: hidden;
            }

            .pe-guide-library {
                height: auto;
                min-height: 0;
                grid-template-columns: minmax(0, 1fr);
                grid-template-rows: minmax(130px, 22svh) minmax(380px, 58svh) minmax(360px, 58svh);
                overflow: visible;
            }

            .pe-guide-reading { order: 1; overflow: hidden; }
            .pe-guide-current { order: 2; min-height: 0; overflow: hidden; }
            .pe-guide-notes { order: 3; min-height: 0; overflow: hidden; }

            .pe-formula-topics {
                order: 1;
                overflow: hidden;
            }

            .pe-formula-current {
                order: 2;
                min-height: 0;
                overflow-y: auto;
                overscroll-behavior: contain;
            }

            .pe-guide-reading-list,
            .pe-formula-topic-list {
                min-height: 0;
                overflow-y: auto;
                overscroll-behavior: contain;
                -webkit-overflow-scrolling: touch;
            }

            .pe-guide-material {
                min-height: 0;
                overflow: auto;
                overscroll-behavior: contain;
                -webkit-overflow-scrolling: touch;
            }
        }

        @media (max-width: 560px) {
            #setup-view > .panel {
                width: calc(100% - 20px);
                max-height: calc(100svh - 82px);
                margin: 10px auto 0;
                padding: 18px 14px 16px;
                overflow-y: auto;
            }
            #setup-view > .panel .panel-header { margin-bottom: 14px; padding-bottom: 11px; }
            #setup-view > .panel .panel-header h2 { font-size: 19px; }
            #setup-view > .panel .panel-header p { font-size: 11px; }
            #setup-view > .panel .form-group { margin-bottom: 12px; }
            #setup-view > .panel .form-control { min-height: 40px; padding: 9px 11px; }

            .pe-formula-library {
                height: calc(100svh - 164px);
                min-height: 410px;
                gap: 8px;
                grid-template-rows: minmax(118px, 29%) minmax(0, 1fr);
            }
            .pe-guide-library {
                gap: 8px;
                grid-template-rows: 132px minmax(390px, 62svh) minmax(390px, 62svh);
            }
            .pe-guide-reading,
            .pe-formula-topics { padding: 8px; }
            .pe-guide-reading > h3,
            .pe-formula-topics > h3 { margin-bottom: 6px; font-size: 12px; }
            .pe-guide-reading-item { padding: 6px 2px; }
            .pe-formula-topic-item { padding: 7px; }
            .pe-guide-file-tools { grid-template-columns: minmax(0, 1fr); }
            .pe-guide-notes-heading { align-items: flex-start; }
            .pe-formula-current { padding: 9px; }
        }

        /* Preserve the existing mobile navigation appearance; only allow the
           row to move sideways when more categories exist than can fit. */
        @media (max-width: 700px) {
            .pe-navigation { overflow: hidden; }
            .pe-list {
                flex-wrap: nowrap;
                justify-content: flex-start;
                overflow-x: auto;
                overflow-y: hidden;
                overscroll-behavior-inline: contain;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .pe-list::-webkit-scrollbar { display: none; }
            .pe-list-item {
                flex: 0 0 25%;
                min-width: 25%;
            }
        }

        /* Authoritative prism-glass surface for public entry and modal popups. */
        body #setup-view > .panel.panel-narrow,
        body .modal-backdrop .modal-box {
            position: relative;
            isolation: isolate;
            background:
                linear-gradient(135deg, rgba(255,255,255,0.10), transparent 40%),
                rgba(19, 24, 28, 0.38);
            border: 1px solid rgba(226, 242, 240, 0.38);
            -webkit-backdrop-filter: blur(24px) saturate(130%);
            backdrop-filter: blur(24px) saturate(130%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -1px 0 rgba(255,255,255,0.05), 0 24px 64px rgba(0,0,0,0.32);
            /* Popup copy must not reflow when deferred web fonts arrive. */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
            text-rendering: optimizeLegibility;
        }
        body #setup-view > .panel.panel-narrow {
            animation: none;
        }
        body #setup-view > .panel.panel-narrow :where(p, label, input, select, button, span),
        body .modal-backdrop .modal-box :where(p, label, input, select, textarea, button, span) {
            font-family: inherit;
        }
        body #setup-view > .panel.panel-narrow :where(h1, h2, h3),
        body .modal-backdrop .modal-box :where(h1, h2, h3) {
            font-family: Georgia, "Times New Roman", serif;
        }
        body #setup-view > .panel.panel-narrow::before,
        body .modal-backdrop .modal-box::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 5;
            padding: 1px;
            border-radius: inherit;
            pointer-events: none;
            background: conic-gradient(from 210deg, rgba(127,221,211,0.86), rgba(255,255,255,0.22), rgba(224,181,102,0.80), rgba(147,211,232,0.72), rgba(127,221,211,0.86));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }
        body #setup-view > .panel.panel-narrow::after,
        body .modal-backdrop .modal-box::after {
            content: "";
            position: absolute;
            z-index: 5;
            left: 10%;
            right: 10%;
            top: 0;
            height: 1px;
            pointer-events: none;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent);
        }

        /* Terms gate: displayed only after the unchanged name-entry step. */
        body.terms-modal-open {
            overflow: hidden;
        }

        .terms-modal-box {
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
            width: min(680px, 100%);
            max-width: 680px;
            max-height: calc(100dvh - 32px);
            padding: 18px 24px 20px;
            overflow: hidden;
        }

        .terms-modal-heading .modal-title {
            margin: 0 0 5px;
        }

        .terms-modal-heading .modal-subtitle {
            margin-bottom: 12px;
        }

        .terms-reader {
            min-height: 180px;
            max-height: min(52dvh, 430px);
            padding: 4px 15px 14px;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            border: 1px solid rgba(226, 242, 240, 0.30);
            border-radius: 10px;
            background: rgba(8, 18, 25, 0.30);
            color: #eef5f4;
            text-align: left;
            scrollbar-color: rgba(127, 221, 211, 0.70) rgba(255,255,255,0.08);
            scrollbar-width: thin;
        }

        .terms-reader:focus {
            outline: 2px solid rgba(127, 221, 211, 0.72);
            outline-offset: 2px;
        }

        .terms-reader::-webkit-scrollbar {
            width: 8px;
        }

        .terms-reader::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.08);
            border-radius: 99px;
        }

        .terms-reader::-webkit-scrollbar-thumb {
            background: rgba(127, 221, 211, 0.70);
            border-radius: 99px;
        }

        .terms-section {
            padding: 12px 0;
            border-bottom: 1px solid rgba(226, 242, 240, 0.16);
        }

        .terms-section:last-child {
            border-bottom: 0;
        }

        .terms-section h3 {
            margin: 0 0 5px;
            color: #ffffff;
            font-size: 14px;
            line-height: 1.3;
        }

        .terms-section p {
            margin: 0;
            color: #e7eeee;
            font-size: 12px;
            line-height: 1.55;
        }

        .terms-section a {
            color: #9ce7de;
            font-weight: 700;
        }

        .terms-footer {
            display: grid;
            gap: 10px;
            padding-top: 14px;
        }

        .terms-agreement {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            color: #f5f8f8;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.4;
            cursor: pointer;
        }

        .terms-agreement input {
            width: 17px;
            height: 17px;
            flex: 0 0 auto;
            margin: 0;
            accent-color: var(--green);
            cursor: pointer;
        }

        .terms-continue-btn {
            width: 100%;
        }

        .terms-continue-btn:disabled {
            cursor: not-allowed;
            opacity: 0.48;
        }

        @media (max-width: 560px) {
            .terms-modal-box {
                max-height: calc(100dvh - 18px);
                padding: 14px 14px 13px;
            }

            .terms-modal-heading .modal-title {
                font-size: 19px;
            }

            .terms-modal-heading .modal-subtitle {
                margin-bottom: 10px;
                font-size: 11px;
            }

            .terms-reader {
                max-height: 55dvh;
                padding: 2px 11px 10px;
            }

            .terms-section {
                padding: 10px 0;
            }

            .terms-section h3 {
                font-size: 13px;
            }

            .terms-section p,
            .terms-agreement {
                font-size: 11px;
            }
        }