/* ============================================================
   MCQ Pro — Frontend Dashboard Styles (Pixel-Perfect v2)
   Namespaced under .mcqp-fe to prevent any theme/admin bleed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Baloo+Tamma+2:wght@400;500;600;700;800&display=swap');

.mcqp-fe {
    /* ---- Light theme tokens ---- */
    --mcqp-bg:          #f4f7fc;
    --mcqp-surface:     #ffffff;
    --mcqp-surface-2:   #f6f8fc;
    --mcqp-border:      #e6ebf5;
    --mcqp-border-2:    #eef1f8;
    --mcqp-text:        #0f172a;
    --mcqp-text-muted:  #64748b;
    --mcqp-text-soft:   #94a3b8;

    --mcqp-primary:     #2563eb;
    --mcqp-primary-2:   #3b82f6;
    --mcqp-primary-soft:#e8f0fe;
    --mcqp-primary-soft-2:#dbeafe;
    --mcqp-success:     #11af0c;
    --mcqp-success-soft:#d1fae5;
    --mcqp-warning:     #f59e0b;
    --mcqp-warning-soft:#fef3c7;
    --mcqp-danger:      #ef4444;
    --mcqp-danger-2:    #dc2626;

    --mcqp-radius-sm:   8px;
    --mcqp-radius:      12px;
    --mcqp-radius-lg:   16px;

    --mcqp-shadow-xs:   0 1px 2px rgba(15,23,42,.04);
    --mcqp-shadow-sm:   0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.03);
    --mcqp-shadow:      0 4px 12px -4px rgba(15,23,42,.07);
    --mcqp-shadow-lg:   0 18px 40px -12px rgba(15,23,42,.18);

    font-family: 'Inter', 'Baloo Tamma 2', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--mcqp-text);
    background: var(--mcqp-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    line-height: 1.5;

    /* Disable pinch-zoom + double-tap-zoom site-wide */
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.mcqp-fe *, .mcqp-fe *::before, .mcqp-fe *::after { box-sizing: border-box; touch-action: manipulation; }
.mcqp-fe a { text-decoration: none; }
.mcqp-fe button { font-family: inherit; }
.mcqp-fe ul { list-style: none; padding: 0; margin: 0; }

/* Dark theme */
.mcqp-fe[data-theme="dark"] {
    --mcqp-bg:          #0b1020;
    --mcqp-surface:     #121a32;
    --mcqp-surface-2:   #182240;
    --mcqp-border:      #233056;
    --mcqp-border-2:    #1d2848;
    --mcqp-text:        #e6ebf6;
    --mcqp-text-muted:  #9aa6c2;
    --mcqp-text-soft:   #6b7796;
    --mcqp-primary-soft:#1d2554;
    --mcqp-primary-soft-2:#243068;
    --mcqp-success-soft:#0e2a22;
    --mcqp-warning-soft:#2a1f0c;
    --mcqp-shadow:      0 4px 14px -4px rgba(0,0,0,.45);
}
/* Dark mode — comprehensive text visibility fix for all elements */
.mcqp-fe[data-theme="dark"] h1,
.mcqp-fe[data-theme="dark"] h2,
.mcqp-fe[data-theme="dark"] h3,
.mcqp-fe[data-theme="dark"] h4,
.mcqp-fe[data-theme="dark"] h5,
.mcqp-fe[data-theme="dark"] h6,
.mcqp-fe[data-theme="dark"] p,
.mcqp-fe[data-theme="dark"] span,
.mcqp-fe[data-theme="dark"] label,
.mcqp-fe[data-theme="dark"] td,
.mcqp-fe[data-theme="dark"] th,
.mcqp-fe[data-theme="dark"] li,
.mcqp-fe[data-theme="dark"] div,
.mcqp-fe[data-theme="dark"] a:not(.mcqp-nav a):not([style*="color"]) {
    color: var(--mcqp-text);
}
.mcqp-fe[data-theme="dark"] small,
.mcqp-fe[data-theme="dark"] .desc,
.mcqp-fe[data-theme="dark"] code {
    color: var(--mcqp-text-muted);
}
.mcqp-fe[data-theme="dark"] input,
.mcqp-fe[data-theme="dark"] textarea,
.mcqp-fe[data-theme="dark"] select {
    color: var(--mcqp-text) !important;
    background: var(--mcqp-surface-2) !important;
    border-color: var(--mcqp-border) !important;
}
.mcqp-fe[data-theme="dark"] input::placeholder,
.mcqp-fe[data-theme="dark"] textarea::placeholder {
    color: var(--mcqp-text-soft) !important;
}
.mcqp-fe[data-theme="dark"] .mcqp-breadcrumb a,
.mcqp-fe[data-theme="dark"] .mcqp-breadcrumb-current {
    color: var(--mcqp-text-muted);
}
/* Dark mode dashboard specific overrides */
.mcqp-fe[data-theme="dark"] .dh-hero {
    background: linear-gradient(135deg, #1a2340, #1d2554, #201840) !important;
}
.mcqp-fe[data-theme="dark"] .dh-today {
    background: linear-gradient(135deg, #1d2554, #1a2040) !important;
}
.mcqp-fe[data-theme="dark"] .dh-streak {
    background: var(--mcqp-surface) !important;
    border-color: var(--mcqp-border) !important;
}
.mcqp-fe[data-theme="dark"] .dh-cat {
    background: var(--mcqp-surface) !important;
    border-color: var(--mcqp-border) !important;
}
.mcqp-fe[data-theme="dark"] .dh-cat:hover {
    border-color: var(--mcqp-primary) !important;
}
.mcqp-fe[data-theme="dark"] .dh-topic {
    background: var(--mcqp-surface-2) !important;
}
.mcqp-fe[data-theme="dark"] .dh-qp {
    background: var(--mcqp-surface-2) !important;
    border-color: var(--mcqp-border) !important;
}
.mcqp-fe[data-theme="dark"] .dh-gam {
    background: var(--mcqp-surface-2) !important;
}
.mcqp-fe[data-theme="dark"] .dh-lb {
    background: var(--mcqp-surface) !important;
    border-color: var(--mcqp-border) !important;
}
.mcqp-fe[data-theme="dark"] .dh-lb-row.top {
    background: var(--mcqp-primary-soft) !important;
}
.mcqp-fe[data-theme="dark"] .dh-stats {
    background: var(--mcqp-surface) !important;
    border-color: var(--mcqp-border) !important;
}
/* v4.7.22 — Dark mode for new dashboard sections */
.mcqp-fe[data-theme="dark"] .dh-wallet {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, var(--mcqp-surface) 45%) !important;
    border-color: rgba(251, 191, 36, 0.25) !important;
}
.mcqp-fe[data-theme="dark"] .dh-wallet h3 {
    color: var(--mcqp-text) !important;
}
.mcqp-fe[data-theme="dark"] .dh-wallet-today {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #86efac !important;
}
.mcqp-fe[data-theme="dark"] .dh-wallet-stat {
    background: var(--mcqp-surface-2) !important;
    border-color: var(--mcqp-border) !important;
}
.mcqp-fe[data-theme="dark"] .dh-wallet-balance {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.15)) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}
.mcqp-fe[data-theme="dark"] .dh-wallet-lbl,
.mcqp-fe[data-theme="dark"] .dh-wallet-tx-lbl {
    color: var(--mcqp-text-muted) !important;
}
.mcqp-fe[data-theme="dark"] .dh-wallet-val,
.mcqp-fe[data-theme="dark"] .dh-wallet-tx-reason {
    color: var(--mcqp-text) !important;
}
.mcqp-fe[data-theme="dark"] .dh-wallet-tx {
    border-top-color: rgba(251, 191, 36, 0.3) !important;
}
.mcqp-fe[data-theme="dark"] .dh-recent {
    background: var(--mcqp-surface) !important;
    border-color: var(--mcqp-border) !important;
}
.mcqp-fe[data-theme="dark"] .dh-recent h3 {
    color: var(--mcqp-text) !important;
}
.mcqp-fe[data-theme="dark"] .dh-recent-card {
    background: var(--mcqp-surface-2) !important;
    border-color: var(--mcqp-border) !important;
}
.mcqp-fe[data-theme="dark"] .dh-recent-card:hover {
    border-color: var(--mcqp-primary) !important;
}
.mcqp-fe[data-theme="dark"] .dh-recent-frac {
    color: var(--mcqp-text-muted) !important;
}
.mcqp-fe[data-theme="dark"] .dh-lb-row.is-me {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.18)) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
}
.mcqp-fe[data-theme="dark"] .dh-cats-navbtn {
    background: var(--mcqp-surface-2) !important;
    border-color: var(--mcqp-border) !important;
    color: var(--mcqp-text-muted) !important;
}
.mcqp-fe[data-theme="dark"] .dh-cats-navbtn.act {
    background: var(--mcqp-primary-soft) !important;
    color: var(--mcqp-primary) !important;
    border-color: var(--mcqp-primary) !important;
}
/* Dark mode help page */
.mcqp-fe[data-theme="dark"] .hp-hero {
    background: linear-gradient(135deg, #1a2340, #1d2554, #201840) !important;
}
.mcqp-fe[data-theme="dark"] .hp-pro {
    background: linear-gradient(135deg, var(--mcqp-surface), var(--mcqp-surface-2)) !important;
}
.mcqp-fe[data-theme="dark"] .hp-pro-plan {
    background: var(--mcqp-surface) !important;
    border-color: var(--mcqp-border) !important;
}
.mcqp-fe[data-theme="dark"] .hp-policy {
    background: var(--mcqp-surface-2) !important;
}

/* ============================================================
   TOP BAR — full-width, white, with brand on left
   ============================================================ */
.mcqp-fe .mcqp-topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 20px;
    height: 72px; padding: 0 28px;
    background: var(--mcqp-surface);
    border-bottom: 1px solid var(--mcqp-border);
}

.mcqp-fe .mcqp-brand {
    display: flex; align-items: center; gap: 12px;
    min-width: 240px;
}
.mcqp-fe .mcqp-brand-logo {
    width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 6px 14px -4px rgba(37,99,235,.45);
}
.mcqp-fe .mcqp-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.mcqp-fe .mcqp-brand-name { font-size: 17px; font-weight: 800; color: var(--mcqp-text); letter-spacing: -0.01em; }
.mcqp-fe .mcqp-brand-tag { font-size: 11px; color: var(--mcqp-text-muted); font-weight: 500; margin-top: 2px; }

/* v4.12.202 — Hamburger toggle (mobile only — hidden on desktop where
   the sidebar is always visible). Button reset + icon styling here;
   the mobile show/hide is handled in the @media block below. */
.mcqp-fe .mcqp-sidebar-toggle {
    display: none;
    width: 40px; height: 40px;
    padding: 0; border: 0;
    background: transparent;
    color: var(--mcqp-text, #0f172a);
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
.mcqp-fe .mcqp-sidebar-toggle:hover,
.mcqp-fe .mcqp-sidebar-toggle:active {
    background: var(--mcqp-surface-2, #f6f8fc);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-sidebar-toggle:hover,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-sidebar-toggle:active {
    background: rgba(148, 163, 184, .14);
}

.mcqp-fe .mcqp-search {
    flex: 1; max-width: 560px; margin: 0 auto;
    position: relative; display: flex; align-items: center;
    background: var(--mcqp-surface-2);
    border: 1px solid var(--mcqp-border);
    border-radius: 999px; padding: 0 14px 0 18px; height: 42px;
    transition: border-color .15s, box-shadow .15s;
}
.mcqp-fe .mcqp-search:focus-within {
    border-color: var(--mcqp-primary);
    box-shadow: 0 0 0 4px var(--mcqp-primary-soft);
}
.mcqp-fe .mcqp-search svg { color: var(--mcqp-text-soft); flex-shrink: 0; }
.mcqp-fe .mcqp-search input {
    background: transparent; border: 0; outline: 0;
    width: 100%; height: 100%; margin-left: 10px;
    color: var(--mcqp-text); font-size: 14px;
    font-family: inherit;
}
.mcqp-fe .mcqp-search input::placeholder { color: var(--mcqp-text-soft); }
.mcqp-fe .mcqp-kbd {
    font-family: inherit; font-size: 11px; font-weight: 600;
    color: var(--mcqp-text-soft);
    background: var(--mcqp-surface);
    border: 1px solid var(--mcqp-border);
    border-radius: 6px; padding: 2px 7px;
    margin-left: 8px;
}

.mcqp-fe .mcqp-topbar-actions { display: flex; align-items: center; gap: 12px; }

.mcqp-fe .mcqp-theme-pill {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 10px; height: 36px;
    background: var(--mcqp-surface-2);
    border: 1px solid var(--mcqp-border);
    border-radius: 999px;
    color: var(--mcqp-text-muted);
    cursor: pointer;
    transition: all .15s;
}
.mcqp-fe .mcqp-theme-pill:hover { color: var(--mcqp-primary); border-color: var(--mcqp-primary); }
.mcqp-fe .mcqp-theme-pill svg + svg { opacity: .55; }

.mcqp-fe .mcqp-icon-btn {
    width: 38px; height: 38px; border-radius: 10px;
    background: transparent; border: 0;
    display: grid; place-items: center; cursor: pointer;
    color: var(--mcqp-text-muted); position: relative;
    transition: all .15s;
}
.mcqp-fe .mcqp-icon-btn:hover { color: var(--mcqp-primary); background: var(--mcqp-primary-soft); }
.mcqp-fe .mcqp-bell { position: relative; }
.mcqp-fe .mcqp-notif-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--mcqp-danger); color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: 999px;
    display: grid; place-items: center;
    border: 2px solid var(--mcqp-surface);
}

/* v4.12.189 — In-app notification dropdown panel */
.mcqp-fe .mcqp-notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-width: calc(100vw - 24px);
    /* v4.12.331 — Bumped 480px → 75vh so users see most of their
       20-item feed without scrolling. Body still scrolls if items
       overflow this larger height. */
    max-height: 75vh;
    background: var(--mcqp-surface, #fff);
    border: 1px solid var(--mcqp-border, #e6ebf5);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0,0,0,.12);
    z-index: 200;
    overflow: hidden;
    display: flex; flex-direction: column;
    /* v4.12.331 — Slide-in-from-right animation. Starts off-screen right
       (transform translateX) with opacity 0; .is-open class triggers
       slide. Keeps display:none → block toggle (existing JS) compatible
       by combining with visibility/opacity. The transition only runs
       when the panel is being shown — closing reverses it. */
    transform: translateX(24px);
    opacity: 0;
    transition: transform .22s cubic-bezier(.2, .9, .3, 1.2),
                opacity .18s ease;
    pointer-events: none;
}
.mcqp-fe .mcqp-notif-panel.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
/* v4.12.194 — Mobile: anchor the panel to the viewport, not the bell.
   Absolute-positioned `right: 0` on a wrapper near the viewport edge
   was pushing the panel's left edge off-screen. Fixed positioning with
   viewport-relative right + width fixes it cleanly.
   v4.12.331 — Mobile slide-in from right: keep left edge anchored 12px
   from right edge (not stretched edge-to-edge anymore — gives a
   proper drawer feel rather than a fullscreen overlay). */
@media (max-width: 720px) {
    .mcqp-fe .mcqp-notif-panel {
        position: fixed;
        top: 68px;
        right: 12px;
        left: auto;
        width: calc(100vw - 24px);
        max-width: 420px;
        /* Reserve ~80px at the bottom for the fixed bottom-nav + breathing room */
        max-height: calc(100vh - 148px);
        transform: translateX(20px);
    }
    .mcqp-fe .mcqp-notif-panel.is-open {
        transform: translateX(0);
    }
}
.mcqp-fe .mcqp-notif-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mcqp-border, #e6ebf5);
    font-weight: 700;
    font-size: 14px;
    color: var(--mcqp-text, #0f172a);
    flex-shrink: 0;
}
.mcqp-fe .mcqp-notif-close {
    color: var(--mcqp-text-muted, #64748b);
    text-decoration: none;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    border-radius: 4px;
}
.mcqp-fe .mcqp-notif-close:hover { background: var(--mcqp-surface-2, #f6f8fc); color: var(--mcqp-text, #0f172a); }
.mcqp-fe .mcqp-notif-body { overflow-y: auto; flex: 1; }
.mcqp-fe .mcqp-notif-item {
    display: flex; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mcqp-border, #e6ebf5);
    color: inherit;
    text-decoration: none;
    transition: background .12s;
    cursor: pointer;
    position: relative;
}
.mcqp-fe .mcqp-notif-item:last-child { border-bottom: 0; }
.mcqp-fe .mcqp-notif-item:hover { background: var(--mcqp-surface-2, #f6f8fc); }
.mcqp-fe .mcqp-notif-item.is-unread { background: rgba(37, 99, 235, 0.04); }
.mcqp-fe .mcqp-notif-item.is-unread::before {
    content: '';
    position: absolute;
    left: 6px; top: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--mcqp-primary, #2563eb);
    transform: translateY(-50%);
}
/* v4.12.331 — Per-item delete button. Hidden by default (low visual
   noise on the feed), revealed on item hover or always visible on
   touch devices (no hover state). Click stops propagation so the
   item's own click-handler (mark-read + navigate) doesn't fire. */
.mcqp-fe .mcqp-notif-delete {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--mcqp-text-muted, #64748b);
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.mcqp-fe .mcqp-notif-item:hover .mcqp-notif-delete,
.mcqp-fe .mcqp-notif-item:focus-within .mcqp-notif-delete {
    opacity: 1;
}
.mcqp-fe .mcqp-notif-delete:hover {
    background: rgba(239, 68, 68, .08);
    color: #dc2626;
}
.mcqp-fe .mcqp-notif-delete:focus-visible {
    outline: 2px solid rgba(37, 99, 235, .4);
    outline-offset: 1px;
    opacity: 1;
}
/* Touch devices: always visible (no hover state) */
@media (hover: none) {
    .mcqp-fe .mcqp-notif-delete { opacity: .6; }
}
/* Item being deleted — fade-out + collapse animation */
.mcqp-fe .mcqp-notif-item.is-deleting {
    overflow: hidden;
    transition: opacity .18s ease, max-height .22s ease, padding .22s ease, margin .22s ease;
    opacity: 0;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0;
}
.mcqp-fe .mcqp-notif-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: var(--mcqp-surface-2, #f1f5f9);
    color: var(--mcqp-primary, #2563eb);
}
.mcqp-fe .mcqp-notif-icon.tone-violet  { background: rgba(139, 92, 246, .12); color: #7c3aed; }
.mcqp-fe .mcqp-notif-icon.tone-amber   { background: rgba(245, 158, 11, .14); color: #d97706; }
.mcqp-fe .mcqp-notif-icon.tone-emerald { background: rgba(16, 185, 129, .14); color: #059669; }
.mcqp-fe .mcqp-notif-icon.tone-rose    { background: rgba(244, 63, 94, .12);  color: #e11d48; }
.mcqp-fe .mcqp-notif-icon.tone-orange  { background: rgba(249, 115, 22, .14); color: #ea580c; }
.mcqp-fe .mcqp-notif-icon.tone-blue    { background: rgba(37, 99, 235, .10);  color: #2563eb; }
.mcqp-fe .mcqp-notif-content { flex: 1; min-width: 0; }
.mcqp-fe .mcqp-notif-title {
    font-size: 13.5px; font-weight: 600;
    color: var(--mcqp-text, #0f172a);
    margin: 0 0 2px;
    line-height: 1.35;
}
.mcqp-fe .mcqp-notif-text {
    font-size: 12.5px;
    color: var(--mcqp-text-muted, #64748b);
    margin: 0 0 4px;
    line-height: 1.4;
}
.mcqp-fe .mcqp-notif-time {
    font-size: 11.5px;
    color: var(--mcqp-text-muted, #94a3b8);
}
/* v4.12.191 — optional thumbnail image inside a notification item */
.mcqp-fe .mcqp-notif-image {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin: 6px 0 4px;
    display: block;
}

/* Dark mode */
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-notif-panel,
.mcqp-fe[data-theme="dark"] .mcqp-notif-panel {
    background: #111827;
    border-color: rgba(148,163,184,.14);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-notif-header,
.mcqp-fe[data-theme="dark"] .mcqp-notif-header {
    border-bottom-color: rgba(148,163,184,.14);
    color: #f1f5f9;
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-notif-item,
.mcqp-fe[data-theme="dark"] .mcqp-notif-item {
    border-bottom-color: rgba(148,163,184,.14);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-notif-item:hover,
.mcqp-fe[data-theme="dark"] .mcqp-notif-item:hover {
    background: rgba(148,163,184,.08);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-notif-item.is-unread,
.mcqp-fe[data-theme="dark"] .mcqp-notif-item.is-unread {
    background: rgba(59, 130, 246, 0.08);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-notif-icon,
.mcqp-fe[data-theme="dark"] .mcqp-notif-icon {
    background: rgba(148,163,184,.10);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-notif-title,
.mcqp-fe[data-theme="dark"] .mcqp-notif-title { color: #f1f5f9; }
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-notif-text,
.mcqp-fe[data-theme="dark"] .mcqp-notif-text { color: #cbd5e1; }

.mcqp-fe .mcqp-profile {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 12px 4px 4px;
    cursor: pointer; transition: all .15s;
    border-radius: 999px;
}
.mcqp-fe .mcqp-profile:hover { background: var(--mcqp-surface-2); }
.mcqp-fe .mcqp-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff; font-weight: 700; font-size: 14px;
    overflow: hidden;
}
.mcqp-fe .mcqp-profile-name { font-size: 14px; font-weight: 600; color: var(--mcqp-text); }
.mcqp-fe .mcqp-profile svg { color: var(--mcqp-text-soft); }

/* ============================================================
   SHELL LAYOUT
   ============================================================ */
.mcqp-fe .mcqp-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 280px;
    gap: 24px;
    padding: 16px 28px 24px;
    align-items: start;
    max-width: 1600px;
    margin: 0 auto;
}

/* v4.12.333 — Current Affairs archive page sidebar alignment fix.
   Diagnosis (Claude Chrome ext live data):
     - topbar bottom: 72px
     - shell padding-top: 16px
     - sidebar resting top: 88px (= 72 + 16)
     - sidebar sticky top: 96px (kicks in on scroll)
   At rest (scrollY=0), sidebar sits 8px HIGHER than its sticky
   target. The 8px snap on first scroll reads as "sidebar shifted
   up". Other pages don't show this because hero/extra row in
   shell column 2 adds vertical room — sidebar grid item starts
   lower naturally. CA archive's column 2 starts immediately with
   the test list, so column 1's sidebar pins to row top = shell
   padding-top.
   Fix: bump shell padding-top to 24px ONLY on CA archive so
   resting top = 72 + 24 = 96px — matches sticky target exactly,
   no snap. Scoped via [data-active-nav="current_affairs"] (added
   in v333 to shared-shell.php), so other pages stay untouched.

   v4.12.334 — User-confirmed grouping after v333 install:
   Group A (no shift, sidebar correctly at 96px at rest):
     - Home, Planner, Current Affairs (post-v333), Performance,
       Analytics — all have hero / page-header content above the
       test list, pushing column-1 sidebar grid-item to row top
       at ~96px naturally.
   Group B (8px snap on scroll):
     - Pro Test, Test Series, Explore Exams, GK Tests, Bookmarks
       — these pages start their column-2 content directly
       without a hero card, so the sidebar pins to shell
       padding-top + topbar = 88px (8px shy of sticky's 96px).
   Same v333 pattern extended via comma list. Mock Tests not
   verified yet by user — left untouched, will add if needed.

   v4.12.335 — User confirmed Mock Tests catalog (/mock-exams/)
   also exhibits the Group B shift. Added 'mock_tests' to the
   selector list. All 6 catalog/list pages without a hero row
   now correctly align at 96px at rest. */
.mcqp-fe .mcqp-shell[data-active-nav="current_affairs"],
.mcqp-fe .mcqp-shell[data-active-nav="pro_test"],
.mcqp-fe .mcqp-shell[data-active-nav="test_series"],
.mcqp-fe .mcqp-shell[data-active-nav="explore_exams"],
.mcqp-fe .mcqp-shell[data-active-nav="topic_tests"],
.mcqp-fe .mcqp-shell[data-active-nav="mock_tests"],
.mcqp-fe .mcqp-shell[data-active-nav="bookmarks"] {
    padding-top: 24px;
}

/* ============================================================
   LEFT SIDEBAR — flat white panel, full-width pill active
   ============================================================ */
.mcqp-fe .mcqp-sidebar {
    position: sticky; top: 96px;
    background: transparent;
    padding: 0 4px;
    display: flex; flex-direction: column; gap: 18px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    /* v4.12.330 — Reserve scrollbar gutter so the sidebar doesn't snap
       horizontally when its scrollbar appears/disappears across the load
       timeline. Sidebar height fluctuates by 15px during font swaps,
       making the scrollbar toggle visibility — visible as a snap. With
       scrollbar-gutter:stable the gutter space is reserved either way. */
    scrollbar-gutter: stable;
}
.mcqp-fe .mcqp-nav { display: flex; flex-direction: column; gap: 4px; }
.mcqp-fe .mcqp-nav a {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; border-radius: 10px;
    color: var(--mcqp-text-muted);
    font-size: 14px; font-weight: 500;
    transition: all .15s; position: relative;
}
.mcqp-fe .mcqp-nav a:hover { background: var(--mcqp-surface); color: var(--mcqp-text); }
.mcqp-fe .mcqp-nav a.is-active {
    background: var(--mcqp-primary-soft);
    color: var(--mcqp-primary);
    font-weight: 600;
}
.mcqp-fe .mcqp-nav a svg { flex-shrink: 0; }

.mcqp-fe .mcqp-premium-card {
    margin-top: 12px;
    background: var(--mcqp-surface);
    border: 1px solid var(--mcqp-border);
    border-radius: var(--mcqp-radius);
    padding: 18px;
    box-shadow: var(--mcqp-shadow-xs);
}
.mcqp-fe .mcqp-premium-icon {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--mcqp-primary-soft);
    color: var(--mcqp-primary);
    display: grid; place-items: center;
    margin-bottom: 12px;
}
.mcqp-fe .mcqp-premium-card h4 {
    margin: 0 0 6px;
    font-size: 15px; font-weight: 700;
    color: var(--mcqp-text);
}
.mcqp-fe .mcqp-premium-card p {
    margin: 0 0 14px;
    font-size: 12.5px;
    color: var(--mcqp-text-muted);
    line-height: 1.5;
}
.mcqp-fe .mcqp-premium-card button {
    width: 100%; padding: 10px 14px;
    border-radius: 8px; border: 0;
    background: linear-gradient(135deg, var(--mcqp-primary-2), var(--mcqp-primary));
    color: #fff; font-weight: 600; font-size: 13px;
    cursor: pointer;
    box-shadow: 0 6px 14px -4px rgba(37,99,235,.45);
    transition: transform .15s;
}
.mcqp-fe .mcqp-premium-card button:hover { transform: translateY(-1px); }

.mcqp-fe .mcqp-help-link {
    margin-top: auto;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    color: var(--mcqp-text-muted);
    font-size: 13.5px; font-weight: 500;
    border-radius: 10px;
    transition: all .15s;
}
.mcqp-fe .mcqp-help-link:hover { background: var(--mcqp-surface); color: var(--mcqp-text); }
.mcqp-fe .mcqp-help-link span { flex: 1; }
.mcqp-fe .mcqp-help-arrow { color: var(--mcqp-text-soft); }

/* ============================================================
   MAIN PANEL
   ============================================================ */
.mcqp-fe .mcqp-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* Breadcrumb */
.mcqp-fe .mcqp-breadcrumb {
    /* Visually hidden but accessible to search engines (schema/structured data intact) */
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.mcqp-fe .mcqp-breadcrumb a {
    color: var(--mcqp-text-muted);
    transition: color .15s;
}
.mcqp-fe .mcqp-breadcrumb a:hover { color: var(--mcqp-primary); }
.mcqp-fe .mcqp-breadcrumb-sep { color: var(--mcqp-text-soft); }
.mcqp-fe .mcqp-breadcrumb-current { color: var(--mcqp-text); font-weight: 600; }

.mcqp-fe .mcqp-card {
    background: var(--mcqp-surface);
    border: 1px solid var(--mcqp-border);
    border-radius: var(--mcqp-radius-lg);
    padding: 22px 26px;
    box-shadow: var(--mcqp-shadow-xs);
}

/* Test header - title left, stats right */
.mcqp-fe .mcqp-test-head {
    display: flex; align-items: center; gap: 24px; justify-content: space-between;
    flex-wrap: wrap;
}
.mcqp-fe .mcqp-test-head-left { flex: 1; min-width: 280px; }
.mcqp-fe .mcqp-test-title-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.mcqp-fe .mcqp-test-title {
    margin: 0;
    font-size: 24px; font-weight: 800;
    color: var(--mcqp-text);
    letter-spacing: -0.01em;
}
.mcqp-fe .mcqp-tag {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: var(--mcqp-primary-soft);
    color: var(--mcqp-primary);
    font-size: 12px; font-weight: 600;
}
.mcqp-fe .mcqp-test-desc {
    color: var(--mcqp-text-muted);
    font-size: 13.5px;
    margin: 6px 0 0;
    line-height: 1.55;
    max-width: 480px;
}

.mcqp-fe .mcqp-stats {
    display: flex; gap: 10px;
    background: var(--mcqp-surface);
    border: 1px solid var(--mcqp-border);
    border-radius: var(--mcqp-radius);
    padding: 10px 14px;
}
.mcqp-fe .mcqp-stat {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 4px 14px;
    border-right: 1px solid var(--mcqp-border-2);
}
.mcqp-fe .mcqp-stat:last-child { border-right: 0; }
.mcqp-fe .mcqp-stat-icon {
    width: 26px; height: 26px;
    color: var(--mcqp-text-muted);
    display: grid; place-items: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.mcqp-fe .mcqp-stat-label {
    font-size: 12px;
    color: var(--mcqp-text-muted);
    font-weight: 500;
    line-height: 1.2;
}
.mcqp-fe .mcqp-stat-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--mcqp-text);
    margin-top: 4px;
    line-height: 1.1;
}

/* Progress + timer bar */
.mcqp-fe .mcqp-progress-bar {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center; gap: 16px;
    padding: 16px 24px;
}
.mcqp-fe .mcqp-progress-meta {
    font-size: 14px; color: var(--mcqp-text);
    white-space: nowrap; font-weight: 600;
}
.mcqp-fe .mcqp-progress-meta b { color: var(--mcqp-text); font-weight: 700; }
.mcqp-fe .mcqp-progress-track {
    height: 10px;
    background: var(--mcqp-surface-2);
    border-radius: 999px; overflow: hidden;
}
.mcqp-fe .mcqp-progress-fill {
    height: 100%; width: 0%; border-radius: 999px;
    background: linear-gradient(90deg, var(--mcqp-primary), var(--mcqp-primary-2));
    transition: width .35s cubic-bezier(.4,0,.2,1);
}
.mcqp-fe .mcqp-progress-pct {
    font-size: 13px; font-weight: 700;
    color: var(--mcqp-text-muted);
    min-width: 38px; text-align: right;
}

.mcqp-fe .mcqp-timer-wrap {
    display: flex; align-items: center; gap: 6px;
    color: var(--mcqp-primary);
    font-weight: 700; font-size: 15px;
    font-variant-numeric: tabular-nums;
    padding-left: 12px;
    border-left: 1px solid var(--mcqp-border);
}
.mcqp-fe .mcqp-timer-wrap.is-warning { color: var(--mcqp-warning); }
.mcqp-fe .mcqp-timer-wrap.is-danger  { color: var(--mcqp-danger);  }

/* v4.12.231 — Timer style variants. The active variant is selected by
   the admin in Settings → Test Engine; PHP applies data-timer-style="x"
   to .mcqp-timer-wrap and the rules below take over. The default
   (data-timer-style="inline") inherits the base rule above. */

/* Pill — soft-blue filled rounded pill */
.mcqp-fe .mcqp-timer-wrap[data-timer-style="pill"] {
    padding: 5px 14px;
    background: var(--mcqp-primary-soft);
    border: 1px solid rgba(37, 99, 235, .25);
    border-left: 1px solid rgba(37, 99, 235, .25); /* override base border-left */
    border-radius: 999px;
    color: var(--mcqp-primary);
    font-size: 14px;
    font-weight: 800;
}
.mcqp-fe .mcqp-timer-wrap[data-timer-style="pill"].is-warning {
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .35);
    color: var(--mcqp-warning);
}
.mcqp-fe .mcqp-timer-wrap[data-timer-style="pill"].is-danger {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .35);
    color: var(--mcqp-danger);
}

/* Split card — labeled "Time | 12:34" boxed */
.mcqp-fe .mcqp-timer-wrap[data-timer-style="split"] {
    padding: 0;
    border: 1px solid var(--mcqp-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    gap: 0;
    color: var(--mcqp-text);
}
.mcqp-fe .mcqp-timer-wrap[data-timer-style="split"] .mcqp-timer-label {
    padding: 5px 10px;
    background: var(--mcqp-bg-2);
    color: var(--mcqp-text-muted);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    border-right: 1px solid var(--mcqp-border);
}
.mcqp-fe .mcqp-timer-wrap[data-timer-style="split"] #mcqp-timer {
    padding: 5px 12px;
    color: var(--mcqp-text);
    font-weight: 800; font-size: 14px;
}
.mcqp-fe .mcqp-timer-wrap[data-timer-style="split"].is-warning #mcqp-timer { color: var(--mcqp-warning); }
.mcqp-fe .mcqp-timer-wrap[data-timer-style="split"].is-danger #mcqp-timer  { color: var(--mcqp-danger);  }

/* Circular ring — animated countdown ring next to time */
.mcqp-fe .mcqp-timer-wrap[data-timer-style="ring"] {
    position: relative;
    padding-left: 36px; /* room for the ring */
    border-left: 1px solid var(--mcqp-border);
}
.mcqp-fe .mcqp-timer-wrap[data-timer-style="ring"]::before {
    content: '';
    position: absolute;
    left: 12px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 3px solid var(--mcqp-primary-soft);
    border-top-color: var(--mcqp-primary);
    /* The fill % is set via the --ring-pct CSS var that JS updates;
       fallback static rotation looks like an active ring */
    transform: translateY(-50%) rotate(calc(var(--ring-pct, 100) * 3.6deg - 90deg));
    transition: transform .5s linear, border-color .2s;
}
.mcqp-fe .mcqp-timer-wrap[data-timer-style="ring"] svg { display: none; }
.mcqp-fe .mcqp-timer-wrap[data-timer-style="ring"].is-warning::before { border-top-color: var(--mcqp-warning); }
.mcqp-fe .mcqp-timer-wrap[data-timer-style="ring"].is-danger::before  { border-top-color: var(--mcqp-danger);  }

/* Bold dark — premium dark gradient with gold clock */
.mcqp-fe .mcqp-timer-wrap[data-timer-style="bold"] {
    padding: 7px 16px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 0;
    border-left: 0; /* override base */
    border-radius: 8px;
    color: #93c5fd;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, .4);
    letter-spacing: .02em;
}
.mcqp-fe .mcqp-timer-wrap[data-timer-style="bold"] svg { color: #fbbf24; }
.mcqp-fe .mcqp-timer-wrap[data-timer-style="bold"].is-warning { color: #fcd34d; }
.mcqp-fe .mcqp-timer-wrap[data-timer-style="bold"].is-warning svg { color: #fbbf24; }
.mcqp-fe .mcqp-timer-wrap[data-timer-style="bold"].is-danger  {
    color: #fca5a5;
    background: linear-gradient(135deg, #7f1d1d 0%, #450a0a 100%);
}
.mcqp-fe .mcqp-timer-wrap[data-timer-style="bold"].is-danger svg { color: #fca5a5; }

/* Urgency — same as inline but with a gradient bar that empties.
   The bar's fill width is controlled by JS via --urgency-pct. */
.mcqp-fe .mcqp-timer-wrap[data-timer-style="urgency"] {
    position: relative;
    padding-bottom: 8px; /* room for the bar */
}
.mcqp-fe .mcqp-timer-urgency-bar {
    position: absolute;
    left: 12px; right: 0; bottom: 0;
    height: 3px;
    background: var(--mcqp-bg-2);
    border-radius: 999px;
    overflow: hidden;
}
.mcqp-fe .mcqp-timer-urgency-bar > span {
    display: block;
    height: 100%;
    width: var(--urgency-pct, 100%);
    background: linear-gradient(90deg, #10b981 0%, #f59e0b 70%, #ef4444 100%);
    border-radius: inherit;
    transition: width 1s linear;
}

.mcqp-fe .mcqp-pause-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    background: var(--mcqp-primary-soft);
    border: 1px solid transparent;
    color: var(--mcqp-primary);
    border-radius: 8px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.mcqp-fe .mcqp-pause-btn:hover { background: var(--mcqp-primary-soft-2); }

/* ============================================================
   QUESTION CARD
   ============================================================ */
.mcqp-fe .mcqp-q-card {
    padding: 26px 28px;
    border: 1px solid var(--mcqp-border);
    /* v4.12.308 — Reserve vertical space so the card's height doesn't
       jump when JS replaces the "Loading question…" placeholder with
       the actual question text + 4 options. Without this, initial
       paint = ~80px tall placeholder; after renderQuestion() runs the
       card grows to ~340-440px → visible CLS shake on every page load.
       380px = empirical typical question card height (4 options +
       category badge + question text 1-2 lines). Real questions
       longer than that just expand naturally; shorter ones leave
       a small white gap below options for the first frame, which is
       acceptable vs the alternative of a layout-shift jolt. */
    min-height: 380px;
}
.mcqp-fe .mcqp-q-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.mcqp-fe .mcqp-cat-badge {
    display: inline-block; padding: 5px 14px; border-radius: 999px;
    background: var(--mcqp-primary-soft);
    color: var(--mcqp-primary);
    font-size: 12px; font-weight: 600;
    flex-shrink: 0;
    margin-right: auto;   /* push everything after it to the right */
}
.mcqp-fe .mcqp-q-actions { display: flex; flex-direction: row; gap: 8px; }

/* v4.2.0 — Info chips (Paper / Instructions / Report) beside bookmark on desktop */
.mcqp-fe .mcqp-q-info-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.mcqp-fe .mcqp-q-info-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--mcqp-border);
    border-radius: 8px;
    background: var(--mcqp-surface);
    color: var(--mcqp-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.mcqp-fe .mcqp-q-info-chip svg { flex-shrink: 0; }
.mcqp-fe .mcqp-q-info-chip:hover { transform: translateY(-1px); }

.mcqp-fe .mcqp-q-info-paper {
    background: var(--mcqp-primary-soft);
    border-color: var(--mcqp-primary-soft-2);
    color: var(--mcqp-primary);
}
.mcqp-fe .mcqp-q-info-paper:hover { background: var(--mcqp-primary-soft-2); border-color: var(--mcqp-primary); }

.mcqp-fe .mcqp-q-info-instr {
    background: #fff4e0;
    border-color: #fad89a;
    color: #f89602;
}
.mcqp-fe .mcqp-q-info-instr:hover { background: #ffe8bf; border-color: #f89602; }

.mcqp-fe .mcqp-q-info-report {
    background: #fee2e2;
    border-color: #fecaca;
    color: var(--mcqp-danger-2);
}
.mcqp-fe .mcqp-q-info-report:hover { background: #fecaca; border-color: var(--mcqp-danger); }

/* Hide desktop chips on mobile — the mobile exam controller builds its own below-topbar row */
@media (max-width: 900px) {
    .mcqp-fe .mcqp-q-info-chips { display: none; }
}
.mcqp-fe .mcqp-q-action {
    width: 36px; height: 36px;
    background: #f8fafc; border: 1px solid var(--mcqp-border);
    color: var(--mcqp-text-soft);
    display: grid; place-items: center; cursor: pointer;
    border-radius: 10px;
    transition: all .15s;
}
.mcqp-fe .mcqp-q-action:hover {
    color: var(--mcqp-primary);
    background: var(--mcqp-primary-soft);
    border-color: var(--mcqp-primary);
    transform: translateY(-1px);
}
.mcqp-fe .mcqp-q-action.is-active {
    color: var(--mcqp-primary);
    background: var(--mcqp-primary-soft);
    border-color: var(--mcqp-primary);
}
.mcqp-fe .mcqp-q-action.is-active svg { fill: currentColor; }
.mcqp-fe #mcqp-review-btn.is-active {
    color: #f89602;
    background: #fff4e0;
    border-color: #fad89a;
}

.mcqp-fe .mcqp-q-text {
    margin: 0 0 22px;
    font-size: 18px; font-weight: 700;
    line-height: 1.55;
    color: var(--mcqp-text);
}

/* ---- Options: white card with circle radio on left ---- */
.mcqp-fe .mcqp-options {
    display: flex; flex-direction: column; gap: 12px;
}
.mcqp-fe .mcqp-option {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
    border-radius: var(--mcqp-radius);
    background: var(--mcqp-surface);
    border: 1.5px solid var(--mcqp-border);
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}
.mcqp-fe .mcqp-option:hover {
    border-color: var(--mcqp-primary);
    background: var(--mcqp-primary-soft);
}
.mcqp-fe .mcqp-option-radio {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: var(--mcqp-surface);
    flex-shrink: 0;
    position: relative;
    transition: all .15s;
}
.mcqp-fe .mcqp-option-text {
    flex: 1;
    font-size: 15px;
    color: var(--mcqp-text);
    line-height: 1.5;
    font-weight: 500;
}
.mcqp-fe .mcqp-option.is-selected {
    border-color: var(--mcqp-primary);
    background: var(--mcqp-primary-soft);
    box-shadow: 0 0 0 1px var(--mcqp-primary);
}
.mcqp-fe .mcqp-option.is-selected .mcqp-option-radio {
    border-color: var(--mcqp-primary);
    background: var(--mcqp-primary);
}
.mcqp-fe .mcqp-option.is-selected .mcqp-option-radio::after {
    content: ""; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: #fff;
}

/* ---- Did you know info box (light blue) ---- */
/* v4.9.1 — Explanation box redesigned with glassmorphism aesthetic
   in very light blue. Fallback (browsers without backdrop-filter):
   solid #eff6ff which reads the same way visually. */
.mcqp-fe .mcqp-info-box {
    margin-top: 22px;
    padding: 16px 20px;
    background: rgba(219, 234, 254, 0.55);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(147, 197, 253, 0.4);
    border-radius: var(--mcqp-radius);
    box-shadow:
        0 6px 16px -8px rgba(37, 99, 235, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    display: flex; gap: 12px; align-items: flex-start;
}
.mcqp-fe .mcqp-info-box-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    color: #2563eb;
    display: grid; place-items: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.mcqp-fe .mcqp-info-box-body {
    /* v4.9.3 — Larger, justified.
       v4.9.6 — English base 18px; Kannada spans (JS-wrapped) override to 14px.
       v4.9.7 — Line-height 1.8 → 1.4 per user spec.
       v4.12.167 — English base 18px → 15px. PYQ already has its own
       override at 15px (v4.12.163); this brings GK / MCQ Pro / CA in
       line per user feedback. */
    font-size: 15px;
    color: #0f172a;
    line-height: 1.4;
    text-align: justify;
    text-justify: inter-word;
}
.mcqp-fe .mcqp-info-box-body .cbq-kn,
.mcqp-fe .mcqp-info-box-body :lang(kn) { font-size: 14px; }
/* v4.9.7 — Option-letter prefix 14px */
.mcqp-fe .mcqp-info-box-body .cbq-opt-prefix { font-size: 14px; font-weight: 700; margin-right: 2px; }
.mcqp-fe .mcqp-info-box-body p { margin: 6px 0; }
.mcqp-fe .mcqp-info-box-body p:first-child { margin-top: 0; }
.mcqp-fe .mcqp-info-box-body p:last-child { margin-bottom: 0; }
.mcqp-fe .mcqp-info-box-body h3,
.mcqp-fe .mcqp-info-box-body h4 {
    margin: 16px 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #2563eb;
    line-height: 1.4;
    text-align: left;
}
.mcqp-fe .mcqp-info-box-body h3:first-child,
.mcqp-fe .mcqp-info-box-body h4:first-child { margin-top: 0; }
.mcqp-fe .mcqp-info-box-body ul,
.mcqp-fe .mcqp-info-box-body ol {
    padding-left: 26px; margin: 10px 0;
    list-style-type: disc; list-style-position: outside;
    text-align: left;
}
.mcqp-fe .mcqp-info-box-body ol { list-style-type: decimal; }
.mcqp-fe .mcqp-info-box-body li { padding-left: 4px; margin: 4px 0; }
.mcqp-fe .mcqp-info-box-body li::marker { color: #11af0c; font-weight: 700; }
/* v4.9.4 — Bolded terms stay black (body color); only subheads are blue */
.mcqp-fe .mcqp-info-box-body b,
.mcqp-fe .mcqp-info-box-body strong { color: #0f172a; font-weight: 700; }
/* v4.9.4 — Hide legacy sections from pre-v4.9.4 explanations */
.mcqp-fe .cbq-expl-legacy-hide { display: none !important; }

.mcqp-fe .mcqp-nav-btns {
    display: flex; justify-content: space-between; gap: 12px;
    margin-top: 26px;
}

/* Buttons */
.mcqp-fe .mcqp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; border-radius: 10px;
    font-family: inherit; font-size: 14px; font-weight: 500;
    border: 1px solid transparent; cursor: pointer;
    transition: all .15s;
}
.mcqp-fe .mcqp-btn:disabled { opacity: .4; cursor: not-allowed; }
.mcqp-fe .mcqp-btn-secondary {
    background: var(--mcqp-surface);
    border-color: var(--mcqp-border);
    color: var(--mcqp-text);
}
.mcqp-fe .mcqp-btn-secondary:hover:not(:disabled) { background: var(--mcqp-surface-2); border-color: var(--mcqp-text-soft); }
.mcqp-fe .mcqp-btn-primary {
    background: var(--mcqp-primary);
    color: #fff;
    box-shadow: 0 6px 14px -4px rgba(37,99,235,.4);
    padding: 11px 28px;
}
.mcqp-fe .mcqp-btn-primary:hover:not(:disabled) {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 10px 18px -4px rgba(37,99,235,.5);
}

/* v4.2.0 — Button variants aligned to website theme tokens */
.mcqp-fe .mcqp-btn-ghost {
    background: #ffffff;
    border-color: var(--mcqp-border);
    color: var(--mcqp-text-soft);
    font-weight: 500;
}
.mcqp-fe .mcqp-btn-ghost:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Mark for Review & Next — soft amber tint (#f89602) */
.mcqp-fe .mcqp-btn-yellow {
    background: #fff4e0;
    color: #f89602;
    border-color: #fad89a;
    font-weight: 500;
}
.mcqp-fe .mcqp-btn-yellow:hover:not(:disabled) {
    background: #ffe8bf;
    border-color: #f89602;
    color: #b36b00;
    transform: translateY(-1px);
}

/* Save & Next inside .mcqp-nav-btns — solid green #11af0c */
.mcqp-fe .mcqp-nav-btns .mcqp-btn-primary {
    background: #11af0c;
    color: #ffffff;
    border-color: #11af0c;
    font-weight: 500;
    box-shadow: 0 4px 10px -3px rgba(17,175,12,.35);
}
.mcqp-fe .mcqp-nav-btns .mcqp-btn-primary:hover:not(:disabled) {
    background: #0d8f0a;
    color: #ffffff;
    border-color: #0d8f0a;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -3px rgba(17,175,12,.45);
}

/* Base nav button weight overrides — Previous + others regular */
.mcqp-fe .mcqp-nav-btns .mcqp-btn,
.mcqp-fe .mcqp-nav-btns .mcqp-btn-secondary {
    font-weight: 500;
}

/* Nav layout: Prev · MFRN · Clear  [———gap———]  Save & Next (right) */
.mcqp-fe .mcqp-nav-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 26px;
}
.mcqp-fe #mcqp-next-btn { margin-left: auto; }
.mcqp-fe .mcqp-btn-danger {
    background: var(--mcqp-danger);
    color: #fff;
    box-shadow: 0 6px 14px -4px rgba(239,68,68,.4);
}
.mcqp-fe .mcqp-btn-danger:hover:not(:disabled) {
    background: var(--mcqp-danger-2);
    transform: translateY(-1px);
}

/* ============================================================
   BOTTOM CARD — v4.7.47
   Previously held the "Why MCQ Pro / Popular Subjects" panel;
   now reserved for the Google AdSense bottom slot. Styling is
   transparent + minimal so the slot looks native and, when the
   admin hasn't enabled an ad, nothing is rendered here at all
   (no empty coloured box overlapping the test area).
   ============================================================ */
.mcqp-fe .mcqp-bottom-card { background: var(--mcqp-primary-soft); border-color: var(--mcqp-primary-soft-2); }
.mcqp-fe .mcqp-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
}

/* Ad variant of the bottom card — softer background, tighter padding */
.mcqp-fe .mcqp-bottom-ad-card {
    background: #ffffff;
    border: 1px solid var(--mcqp-border, #e2e8f0);
    padding: 14px 16px;
}
.mcqp-fe .mcqp-bottom-ad-card .cbq-ad-test-engine-bottom { width: 100%; }
.mcqp-fe .mcqp-bottom-ad-card .cbq-ad-slot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.mcqp-fe .mcqp-bottom-ad-card .cbq-ad-slot-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    font-weight: 600;
}
.mcqp-fe .mcqp-bottom-ad-card .adsbygoogle {
    display: block;
    width: 100%;
    min-height: 90px;
}

.mcqp-fe .mcqp-panel-title {
    margin: 0 0 14px;
    font-size: 14px; font-weight: 700;
    color: var(--mcqp-text);
    display: flex; align-items: center; gap: 8px;
}
.mcqp-fe .mcqp-panel-icon {
    width: 24px; height: 24px; border-radius: 6px;
    background: rgba(37,99,235,.15);
    color: var(--mcqp-primary);
    display: grid; place-items: center;
}
.mcqp-fe .mcqp-panel-title--plain { padding-left: 0; }

.mcqp-fe .mcqp-why-list {
    display: flex; flex-direction: column; gap: 10px;
}
.mcqp-fe .mcqp-why-list li {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px;
    color: var(--mcqp-text);
    font-weight: 500;
}
.mcqp-fe .mcqp-check {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--mcqp-success);
    color: #fff;
    display: grid; place-items: center;
    flex-shrink: 0;
}

.mcqp-fe .mcqp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;          /* row-gap 10px, column-gap 12px — breathing room between rows */
    margin-top: 12px;
}
.mcqp-fe .mcqp-chip {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .18s ease;
    border: 1px solid transparent;
    line-height: 1.3;
    letter-spacing: .2px;
}
.mcqp-fe .mcqp-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(15,23,42,.18);
}
.mcqp-fe .mcqp-chip--blue   { background: #dbeafe; color: #1d4ed8; }
.mcqp-fe .mcqp-chip--green  { background: #d1fae5; color: #047857; }
.mcqp-fe .mcqp-chip--orange { background: #fed7aa; color: #c2410c; }
.mcqp-fe .mcqp-chip--pink   { background: #fce7f3; color: #be185d; }
.mcqp-fe .mcqp-chip--red    { background: #fee2e2; color: #b91c1c; }
.mcqp-fe .mcqp-chip--yellow { background: #fef3c7; color: #a16207; }
.mcqp-fe .mcqp-chip--teal   { background: #ccfbf1; color: #0f766e; }
.mcqp-fe .mcqp-chip--purple { background: #ede9fe; color: #6d28d9; }

/* ============================================================
   RIGHT SIDEBAR
   ============================================================ */
.mcqp-fe .mcqp-rightbar {
    position: sticky; top: 96px;
    display: flex; flex-direction: column; gap: 18px;
}
.mcqp-fe .mcqp-rightcard { padding: 20px; }
.mcqp-fe .mcqp-rightcard-title {
    margin: 0 0 14px;
    font-size: 15px; font-weight: 700;
    color: var(--mcqp-text);
}

/* Question navigator */
.mcqp-fe .mcqp-qnav-legend {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--mcqp-text-muted);
}
.mcqp-fe .mcqp-qnav-legend span { display: flex; align-items: center; gap: 6px; }
.mcqp-fe .mcqp-qnav-legend i {
    width: 9px; height: 9px; border-radius: 50%;
    display: inline-block;
}
.mcqp-fe .dot-success { background: var(--mcqp-success); }
.mcqp-fe .dot-primary { background: var(--mcqp-primary); }
.mcqp-fe .dot-warning { background: #f89602; }
.mcqp-fe .dot-muted   { background: #cbd5e1; }

.mcqp-fe .mcqp-qnav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.mcqp-fe .mcqp-qnav-cell {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: var(--mcqp-surface-2);
    border: 1.5px solid transparent;
    color: var(--mcqp-text-muted);
    font-weight: 700; font-size: 13px;
    display: grid; place-items: center;
    cursor: pointer;
    transition: all .15s;
}
.mcqp-fe .mcqp-qnav-cell:hover { transform: translateY(-1px); }
.mcqp-fe .mcqp-qnav-cell.is-answered {
    background: var(--mcqp-success);
    color: #fff;
}
.mcqp-fe .mcqp-qnav-cell.is-review {
    background: #fff4e0;
    color: #f89602;
    border-color: #fad89a;
}
.mcqp-fe .mcqp-qnav-cell.is-current {
    background: var(--mcqp-surface);
    color: var(--mcqp-primary);
    border-color: var(--mcqp-primary);
    box-shadow: 0 0 0 2px var(--mcqp-primary-soft);
}
.mcqp-fe .mcqp-qnav-cell.is-answered.is-current {
    background: var(--mcqp-success);
    color: #fff;
    border-color: var(--mcqp-primary);
    box-shadow: 0 0 0 2px var(--mcqp-primary-soft);
}

/* Test overview rows */
.mcqp-fe .mcqp-overview-list {
    display: flex; flex-direction: column;
    margin-bottom: 18px;
}
.mcqp-fe .mcqp-overview-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mcqp-border-2);
    font-size: 14px;
    color: var(--mcqp-text);
}
.mcqp-fe .mcqp-overview-row:last-child { border-bottom: 0; }
.mcqp-fe .mcqp-overview-row .ov-label { flex: 1; color: var(--mcqp-text); font-weight: 500; }
.mcqp-fe .mcqp-overview-row b { font-weight: 700; color: var(--mcqp-text); font-variant-numeric: tabular-nums; }
.mcqp-fe .ov-ico {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.mcqp-fe .ov-ico-success { color: var(--mcqp-success); }
.mcqp-fe .ov-ico-warning { color: var(--mcqp-warning); }
.mcqp-fe .ov-ico-muted   { color: var(--mcqp-text-soft); }

.mcqp-fe .mcqp-submit-btn {
    width: 100%;
    padding: 13px;
    font-size: 14px;
}
.mcqp-fe .mcqp-submit-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: var(--mcqp-text-muted);
    text-align: center;
}

/* ============================================================
   RESULT
   ============================================================ */
.mcqp-fe .mcqp-result { text-align: center; padding: 40px 32px; }
.mcqp-fe .mcqp-score-circle {
    width: 130px; height: 130px; border-radius: 50%;
    margin: 0 auto 22px;
    background: conic-gradient(var(--mcqp-primary) calc(var(--mcqp-score, 0) * 1%), var(--mcqp-surface-2) 0);
    display: grid; place-items: center;
    position: relative;
}
.mcqp-fe .mcqp-score-circle::before {
    content: ""; position: absolute; inset: 8px; border-radius: 50%;
    background: var(--mcqp-surface);
}
.mcqp-fe .mcqp-score-circle span {
    position: relative; font-size: 26px; font-weight: 800; color: var(--mcqp-primary);
}
/* v4.12.295 — Dark mode score-circle text override.
   The base rule above sets color to var(--mcqp-primary) (#2563eb), which on
   the dark surface (#121a32) gives ~3.5:1 contrast — readable on a backlit
   monitor in normal lighting, but barely visible on mobile under bright/dim
   conditions. User reported "1/25" was unreadable. Switching to a lighter
   blue (#93c5fd, same shade already used for the result-pct "good" band on
   line 1437) lifts contrast to ~9:1 while keeping the blue brand identity.
   Two selectors so we cover both theme-attribute conventions used in this
   file (html[data-mcqp-theme] and .mcqp-fe[data-theme]). */
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-score-circle span,
.mcqp-fe[data-theme="dark"] .mcqp-score-circle span {
    color: #93c5fd;
}
/* v4.12.215 — Percentage display below score circle.
   Color band is set via data-band attribute by JS — tints the
   number so the user reads pass/fail at a glance. */
.mcqp-fe .mcqp-result-pct {
    margin: 6px auto 14px;
    font-size: 18px;
    font-weight: 800;
    color: var(--mcqp-text-muted);
    letter-spacing: 0.01em;
    line-height: 1;
    text-align: center;
}
.mcqp-fe .mcqp-result-pct[data-band="high"]  { color: #059669; }
.mcqp-fe .mcqp-result-pct[data-band="good"]  { color: var(--mcqp-primary); }
.mcqp-fe .mcqp-result-pct[data-band="fair"]  { color: #d97706; }
.mcqp-fe .mcqp-result-pct[data-band="low"]   { color: #dc2626; }
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-result-pct[data-band="high"] { color: #34d399; }
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-result-pct[data-band="good"] { color: #93c5fd; }
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-result-pct[data-band="fair"] { color: #fbbf24; }
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-result-pct[data-band="low"]  { color: #fca5a5; }
.mcqp-fe .mcqp-result h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; }
.mcqp-fe .mcqp-result > p { color: var(--mcqp-text-muted); margin: 0 0 24px; }
.mcqp-fe .mcqp-result-stats {
    /* v4.12.209 — Was repeat(3,1fr); now 4 stats including Time Taken.
       The mobile rule below (≤720) keeps it at 2-col so tiles stay
       readable on small screens. */
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin-bottom: 26px;
}
.mcqp-fe .mcqp-result-stats > div {
    padding: 14px; border-radius: var(--mcqp-radius);
    background: var(--mcqp-surface-2); border: 1px solid var(--mcqp-border-2);
}
.mcqp-fe .mcqp-result-stats span { display: block; font-size: 12px; color: var(--mcqp-text-muted); margin-bottom: 4px; }
.mcqp-fe .mcqp-result-stats b { font-size: 22px; font-weight: 800; color: var(--mcqp-text); }

/* ============================================================
   v4.12.332 — RESULT ACTION BUTTONS (DESKTOP + TABLET)
   All 5 buttons (Back, Share, Challenge, Leaderboard, Re-attempt)
   on a single horizontal line, auto-shrinking to fit available
   width. Mobile (≤720px) keeps the existing 2-column grid.

   Strategy:
   - flex container with nowrap so buttons never wrap
   - flex-wrap is NOWRAP so the row stays single-line
   - each button uses flex: 0 1 auto so it shrinks proportionally
     when the container narrows; no flex:1 (would force equal
     widths even when text is short)
   - min-width: 0 lets buttons shrink below their content's
     intrinsic size if needed
   - white-space: nowrap inside buttons keeps text on one line
   - padding shrinks below 1100px (tablet landscape) to give
     buttons more room
   ============================================================ */
.mcqp-fe .mcqp-result-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}
.mcqp-fe .mcqp-result-actions .mcqp-btn {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}
/* Tablet landscape / smaller desktop — tighten padding so all
   5 fit comfortably without overflow. Below 720px the mobile
   @media block (further down) takes over with the 2-column grid
   layout. Tablet portrait (~768px) sits between the two: buttons
   may wrap to a 3+2 line — accepted trade-off per user. */
@media (max-width: 1100px) {
    .mcqp-fe .mcqp-result-actions {
        gap: 8px;
    }
    .mcqp-fe .mcqp-result-actions .mcqp-btn {
        padding: 10px 14px;
        font-size: 13px;
    }
    .mcqp-fe .mcqp-result-actions .mcqp-btn-primary {
        padding: 10px 16px;
    }
    .mcqp-fe .mcqp-result-actions .mcqp-btn svg {
        width: 13px;
        height: 13px;
    }
}

/* ============================================================
   v4.12.218 — DOWNLOADABLE RESULT CARD (PNG / WhatsApp Status)
   ============================================================ */

/* Top-right floating corner actions on result screen.
   v4.12.218 introduced the Download button as a single floating button.
   v4.12.297 — Restructured into a vertical stack so we can layer multiple
   compact icon-buttons (Download, Share). Same visual treatment for each
   button (small rounded square), centered on a flex-column container. */
.mcqp-fe .mcqp-result { position: relative; }
.mcqp-fe .mcqp-result-corner-actions {
    position: absolute;
    top: 16px; right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 5;
}
.mcqp-fe .mcqp-result-corner-btn,
.mcqp-fe .mcqp-result-download {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--mcqp-surface-2, #f6f8fc);
    border: 1px solid var(--mcqp-border-2, #e6ebf5);
    border-radius: 10px;
    color: var(--mcqp-text, #0f172a);
    cursor: pointer;
    transition: background .15s, transform .12s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}
.mcqp-fe .mcqp-result-corner-btn:hover,
.mcqp-fe .mcqp-result-download:hover {
    background: var(--mcqp-surface, #fff);
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .15);
}
.mcqp-fe .mcqp-result-corner-btn:active,
.mcqp-fe .mcqp-result-download:active { transform: scale(.95); }
.mcqp-fe .mcqp-result-corner-btn.is-loading,
.mcqp-fe .mcqp-result-download.is-loading { opacity: .55; pointer-events: none; }
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-result-corner-btn,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-result-download {
    background: rgba(30, 41, 59, .6);
    border-color: rgba(51, 65, 85, .5);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-result-corner-btn:hover,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-result-download:hover {
    background: rgba(51, 65, 85, .7);
}

/* The offscreen card the canvas captures from. Must be at its real
   1080×1920 size for crisp output. Hidden via translate, NOT display:none
   (display:none breaks html2canvas). */
.cbq-dlcard-stage {
    position: fixed;
    left: 0; top: 0;
    width: 1080px;
    height: 1920px;
    pointer-events: none;
    transform: translate(-200vw, -200vh);
    z-index: -1;
    /* Reset inheritance from page styles */
    color: #0f172a;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.cbq-dlcard {
    width: 1080px; height: 1920px;
    box-sizing: border-box;
    padding: 90px 70px 70px;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, #ffffff 0%, #ffffff 30%, #93c5fd 80%, #2563eb 100%);
    color: #0f172a;
    position: relative;
    overflow: hidden;
}

/* Confetti — scattered SVG bits across the upper half */
.cbq-dlcard-confetti {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 60%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.cbq-dlcard-confetti span {
    position: absolute;
    display: block;
    border-radius: 4px;
}

/* v4.12.223 — Card content sits above the confetti layer.
   The keep-out zone in buildConfettiHtml() prevents bits from spawning
   inside the avatar, but explicit z-index belt-and-braces is cheaper than
   debugging an edge-case overlap. */
.cbq-dlcard-topbar,
.cbq-dlcard-candidate,
.cbq-dlcard-test-title,
.cbq-dlcard-score,
.cbq-dlcard-pct,
.cbq-dlcard-rewards,
.cbq-dlcard-foot {
    position: relative;
    z-index: 1;
}

.cbq-dlcard-topbar {
    display: flex; align-items: center; gap: 22px;
    margin-bottom: 30px;
}
.cbq-dlcard-logo {
    width: 88px; height: 88px;
    border-radius: 22px;
    background: #2563eb;
    display: grid; place-items: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px -8px rgba(37, 99, 235, .35);
}
.cbq-dlcard-logo svg { width: 50px; height: 50px; color: #fff; }
.cbq-dlcard-brand-text { line-height: 1.05; }
.cbq-dlcard-brand-name {
    font-size: 38px; font-weight: 800; letter-spacing: -.02em;
    color: #0f172a;
}
.cbq-dlcard-brand-tag {
    font-size: 24px; font-weight: 500;
    color: #64748b;
    letter-spacing: 0.01em;
    margin-top: 6px;
}

.cbq-dlcard-candidate {
    display: flex; flex-direction: column; align-items: center;
    gap: 28px;
    margin: 50px 0 30px;
}
/* v4.12.221 — Avatar restructured for html2canvas.
   Issues fixed:
   - `display: grid; place-items: center` rendered text top-left
     instead of centered; switched to flexbox + explicit alignment.
   - The orange drop-shadow rendered as a blob artifact in bottom-left;
     dropped it entirely — the white border + main gradient give plenty
     of visual presence.
   - `border: 12px solid #fff` on a circular element with overflow:hidden
     captured inconsistently. Switched to a wrapper-as-ring pattern: an
     outer 320px white circle + an inner 296px gradient circle absolutely
     centered inside it. */
.cbq-dlcard-avatar {
    width: 320px; height: 320px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* No box-shadow — caused capture artifacts. The high-contrast
       gradient on the inner circle is the visual hook. */
}
.cbq-dlcard-avatar-inner {
    width: 296px; height: 296px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 160px;
    font-weight: 800;
    line-height: 1;
    /* Crisp letter centering — text-align centers horizontally;
       flex centers vertically. line-height: 1 prevents font ascender
       drift, which was causing the off-center capture in v4.12.218. */
    text-align: center;
    text-transform: uppercase;
}
/* v4.12.222 — Avatar image (when user has uploaded one or has a gravatar).
   Renders as a circular image that fills the inner circle slot.
   Same 296×296 dimensions so the white ring on the outer wrapper
   stays the same width. */
.cbq-dlcard-avatar-img {
    width: 296px; height: 296px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.cbq-dlcard-name {
    font-size: 64px; font-weight: 800; color: #0f172a;
    letter-spacing: -.02em;
    line-height: 1.1;
    text-align: center;
}
.cbq-dlcard-eyebrow {
    font-size: 22px; font-weight: 700; letter-spacing: .26em;
    text-transform: uppercase;
    color: #2563eb;
    margin-top: 6px;
    text-align: center;
}

.cbq-dlcard-test-title {
    font-size: 76px; font-weight: 800; text-align: center;
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -.015em;
    margin: 36px 30px 36px;
}

/* v4.12.220 — Score ring switched from conic-gradient to inline SVG
   because html2canvas 1.4.1 doesn't capture conic-gradient. The SVG
   sits absolutely inside the container; the score number sits centered
   on top via the absolute-positioned span. */
.cbq-dlcard-score {
    width: 320px; height: 320px;
    border-radius: 50%;
    display: block;
    position: relative;
    margin: 0 auto;
}
.cbq-dlcard-score-svg {
    width: 100%; height: 100%;
    display: block;
}
.cbq-dlcard-score-num {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 76px; font-weight: 800; color: #2563eb;
    letter-spacing: -.02em;
}
.cbq-dlcard-pct {
    text-align: center; font-size: 80px; font-weight: 800; color: #2563eb;
    margin-top: 36px;
    letter-spacing: -.02em;
}

.cbq-dlcard-rewards {
    display: flex; justify-content: center; gap: 20px;
    margin: 50px 0 0;
    flex-wrap: wrap;
}
.cbq-dlcard-chip {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 22px 36px;
    background: rgba(255, 255, 255, .96);
    border-radius: 999px;
    font-size: 32px; font-weight: 800;
    border: 2px solid rgba(15, 23, 42, .08);
    box-shadow: 0 6px 18px -6px rgba(15, 23, 42, .12);
}
.cbq-dlcard-chip.coin { color: #b45309; }
.cbq-dlcard-chip.streak { color: #b91c1c; }

.cbq-dlcard-foot {
    margin-top: auto;
    text-align: center;
    font-size: 26px; font-weight: 600;
    color: rgba(255, 255, 255, .92);
    border-top: 2px solid rgba(255, 255, 255, .25);
    padding-top: 28px;
}
.cbq-dlcard-foot b { color: #fef3c7; font-weight: 800; }

/* Toast for download status */
.cbq-dl-toast {
    position: fixed;
    left: 50%; bottom: 90px;
    transform: translateX(-50%);
    padding: 12px 20px;
    background: #0f172a; color: #fff;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 600;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .35);
    z-index: 99999;
    transition: opacity .25s;
}
.cbq-dl-toast.is-error { background: #dc2626; }

/* v4.12.224 — Download success modal.
   Replaces the small toast on success with a proper celebration card
   showing the file location + WhatsApp Status share CTA. */
.cbq-dl-success-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(15, 23, 42, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    animation: cbq-dl-fade-in .2s ease-out;
}
.cbq-dl-success-overlay.is-closing { animation: cbq-dl-fade-out .18s ease-in forwards; }
@keyframes cbq-dl-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes cbq-dl-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.cbq-dl-success-modal {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 50px -12px rgba(15, 23, 42, .4);
    overflow: hidden;
    animation: cbq-dl-pop .4s cubic-bezier(.34, 1.56, .64, 1);
    font-family: "Inter", "Baloo Tamma 2", system-ui, sans-serif;
}
@keyframes cbq-dl-pop {
    0%   { opacity: 0; transform: translateY(12px) scale(.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.cbq-dl-success-head {
    padding: 28px 24px 18px;
    text-align: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
    border-bottom: 1px solid rgba(16, 185, 129, .2);
}
.cbq-dl-success-check {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    margin: 0 auto 12px;
    display: grid; place-items: center;
    box-shadow: 0 8px 24px -6px rgba(16, 185, 129, .4);
    animation: cbq-dl-check-pop .5s cubic-bezier(.34, 1.56, .64, 1) .1s both;
}
@keyframes cbq-dl-check-pop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}
.cbq-dl-success-check svg { width: 30px; height: 30px; color: #fff; }
.cbq-dl-success-head h3 {
    margin: 0 0 4px;
    font-size: 18px; font-weight: 800;
    color: #0f172a;
    letter-spacing: -.01em;
}
.cbq-dl-success-head p {
    margin: 0;
    font-size: 13px;
    color: #475569;
    font-weight: 500;
}

.cbq-dl-success-body {
    padding: 18px 24px 22px;
}
.cbq-dl-path-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 14px;
}
.cbq-dl-path-row svg { flex-shrink: 0; color: #64748b; }
.cbq-dl-path-text { flex: 1; min-width: 0; }
.cbq-dl-path-label {
    font-size: 13px;
    color: #0f172a;
    font-weight: 700;
}
.cbq-dl-path-name {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 11.5px;
    color: #64748b;
    margin-top: 2px;
    word-break: break-all;
    line-height: 1.4;
}

.cbq-dl-success-msg {
    text-align: center;
    margin: 0 0 16px;
    padding: 16px 14px;
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #78350f;
    line-height: 1.5;
}
.cbq-dl-emojis {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
    letter-spacing: 4px;
}

/* v4.12.225 — WhatsApp Status text in WhatsApp brand green.
   #25D366 is the official WhatsApp green. Bold weight + slight
   horizontal padding so it reads as a callout within the Kannada
   sentence. */
.cbq-dl-wa {
    color: #25D366;
    font-weight: 800;
    white-space: nowrap;
}

.cbq-dl-success-close {
    width: 100%;
    padding: 12px;
    background: #2563eb;
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .1s;
    font-family: inherit;
}
.cbq-dl-success-close:hover { background: #1d4ed8; }
.cbq-dl-success-close:active { transform: scale(.98); }

/* Mobile */
@media (max-width: 480px) {
    .cbq-dl-success-modal { max-width: 100%; }
    .cbq-dl-success-head { padding: 22px 18px 14px; }
    .cbq-dl-success-head h3 { font-size: 16px; }
    .cbq-dl-success-body { padding: 14px 18px 18px; }
    .cbq-dl-success-msg { font-size: 13px; padding: 14px 12px; }
}

/* Dark mode */
html[data-mcqp-theme="dark"] .cbq-dl-success-modal {
    background: #1e293b;
    border-color: rgba(51, 65, 85, .6);
}
html[data-mcqp-theme="dark"] .cbq-dl-success-head {
    background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(14, 165, 233, .1));
    border-bottom-color: rgba(16, 185, 129, .25);
}
html[data-mcqp-theme="dark"] .cbq-dl-success-head h3 { color: #f1f5f9; }
html[data-mcqp-theme="dark"] .cbq-dl-success-head p  { color: #cbd5e1; }
html[data-mcqp-theme="dark"] .cbq-dl-path-row {
    background: rgba(15, 23, 42, .5);
    border-color: rgba(51, 65, 85, .5);
}
html[data-mcqp-theme="dark"] .cbq-dl-path-row svg { color: #94a3b8; }
html[data-mcqp-theme="dark"] .cbq-dl-path-label { color: #f1f5f9; }
html[data-mcqp-theme="dark"] .cbq-dl-path-name  { color: #94a3b8; }
html[data-mcqp-theme="dark"] .cbq-dl-success-msg {
    background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(234, 179, 8, .12));
    border-color: rgba(245, 158, 11, .35);
    color: #fde68a;
}
/* Slightly lighter green on dark backgrounds for legibility */
html[data-mcqp-theme="dark"] .cbq-dl-wa { color: #4ade80; }


   Share + Challenge buttons on the result screen, plus a
   "challenge result" comparison banner shown to the friend
   who took up a challenge.
   ============================================================ */
.mcqp-fe .mcqp-btn-share svg,
.mcqp-fe .mcqp-btn-challenge svg,
.mcqp-fe .mcqp-btn-leaderboard svg {
    flex-shrink: 0;
}

/* v4.12.245 — Action button palette refresh.
   Share = neutral filled. Challenge = purple gradient. Leaderboard
   = gold/amber gradient. All three previously had outline-only
   styles which felt washed out and the red Challenge tint clashed
   with the celebratory result screen (red reads as "destructive").
   The two filled gradients lean into the celebration energy and
   tie semantically to their actions (purple = social/competitive,
   gold = achievement/trophy). */

.mcqp-fe .mcqp-btn-share {
    color: #334155;
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.mcqp-fe .mcqp-btn-share:hover:not(:disabled) {
    background: #e2e8f0;
    border-color: #94a3b8;
}

.mcqp-fe .mcqp-btn-challenge {
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border-color: transparent;
    box-shadow: 0 2px 8px -2px rgba(124, 58, 237, .4);
}
.mcqp-fe .mcqp-btn-challenge:hover:not(:disabled) {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    border-color: transparent;
    box-shadow: 0 4px 12px -2px rgba(124, 58, 237, .5);
}

/* v4.12.242 — Leaderboard button. v4.12.245 — promoted from outline
   to filled gold gradient to match the Challenge button's confidence. */
.mcqp-fe .mcqp-btn-leaderboard {
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: transparent;
    box-shadow: 0 2px 8px -2px rgba(217, 119, 6, .4);
}
.mcqp-fe .mcqp-btn-leaderboard:hover:not(:disabled) {
    background: linear-gradient(135deg, #d97706, #b45309);
    border-color: transparent;
    box-shadow: 0 4px 12px -2px rgba(217, 119, 6, .5);
}

.mcqp-fe .mcqp-btn-share.is-loading,
.mcqp-fe .mcqp-btn-challenge.is-loading,
.mcqp-fe .mcqp-btn-leaderboard.is-loading { opacity: .7; pointer-events: none; }

.mcqp-btn-spinner {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: mcqp-share-spin .8s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}
@keyframes mcqp-share-spin {
    to { transform: rotate(360deg); }
}

/* Challenge result banner — shown to the friend after they finish a
   challenge they were sent. Slots in between the result message and
   the rewards panel. */
.mcqp-fe .mcqp-challenge-result {
    margin: 16px auto 20px;
    max-width: 480px;
    padding: 18px 20px;
    border-radius: 14px;
    text-align: center;
    background: linear-gradient(135deg, rgba(220, 38, 38, .06), rgba(245, 158, 11, .06));
    border: 1px solid rgba(220, 38, 38, .25);
    animation: mcqp-cr-pop .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes mcqp-cr-pop {
    0%   { opacity: 0; transform: translateY(8px) scale(.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.mcqp-fe .mcqp-challenge-result.win {
    background: linear-gradient(135deg, rgba(16, 185, 129, .08), rgba(34, 197, 94, .06));
    border-color: rgba(16, 185, 129, .35);
}
.mcqp-fe .mcqp-challenge-result.lose {
    background: linear-gradient(135deg, rgba(245, 158, 11, .08), rgba(220, 38, 38, .06));
    border-color: rgba(245, 158, 11, .3);
}
.mcqp-fe .mcqp-challenge-result.tie {
    background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(139, 92, 246, .06));
    border-color: rgba(99, 102, 241, .3);
}
.mcqp-fe .mcqp-cr-head {
    font-size: 12px;
    font-weight: 800;
    color: #b91c1c;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.mcqp-fe .mcqp-challenge-result.win .mcqp-cr-head  { color: #047857; }
.mcqp-fe .mcqp-challenge-result.lose .mcqp-cr-head { color: #b45309; }
.mcqp-fe .mcqp-challenge-result.tie .mcqp-cr-head  { color: #4338ca; }
.mcqp-fe .mcqp-cr-row {
    font-size: 14px;
    color: var(--mcqp-text);
    margin: 4px 0;
}
.mcqp-fe .mcqp-cr-row b { color: var(--mcqp-text); }
.mcqp-fe .mcqp-cr-verdict {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, .08);
    font-size: 14px;
    font-weight: 700;
    color: var(--mcqp-text);
}

/* Dark mode */
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-challenge-result {
    background: linear-gradient(135deg, rgba(220, 38, 38, .14), rgba(30, 41, 59, .6));
    border-color: rgba(220, 38, 38, .35);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-challenge-result.win {
    background: linear-gradient(135deg, rgba(16, 185, 129, .18), rgba(30, 41, 59, .6));
    border-color: rgba(16, 185, 129, .4);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-challenge-result.lose {
    background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(30, 41, 59, .6));
    border-color: rgba(245, 158, 11, .35);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-challenge-result.tie {
    background: linear-gradient(135deg, rgba(99, 102, 241, .14), rgba(30, 41, 59, .6));
    border-color: rgba(99, 102, 241, .35);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-cr-head { color: #fca5a5; }
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-challenge-result.win .mcqp-cr-head  { color: #6ee7b7; }
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-challenge-result.lose .mcqp-cr-head { color: #fbbf24; }
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-challenge-result.tie .mcqp-cr-head  { color: #a5b4fc; }
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-cr-verdict {
    border-top-color: rgba(255, 255, 255, .08);
}
/* v4.12.245 — Dark mode tweaks for the new filled-gradient palette.
   Purple + gold gradients hold up well on dark bg, so just adjust
   the neutral Share button (which uses light slate fills) and the
   shadow weights (drop-shadows on dark bg should be deeper). */
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-btn-share {
    color: #cbd5e1;
    background: rgba(148, 163, 184, .12);
    border-color: rgba(148, 163, 184, .25);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-btn-share:hover {
    background: rgba(148, 163, 184, .2);
    border-color: rgba(148, 163, 184, .4);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-btn-challenge {
    box-shadow: 0 2px 10px -2px rgba(124, 58, 237, .55);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-btn-challenge:hover {
    box-shadow: 0 4px 14px -2px rgba(124, 58, 237, .65);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-btn-leaderboard {
    box-shadow: 0 2px 10px -2px rgba(217, 119, 6, .55);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-btn-leaderboard:hover {
    box-shadow: 0 4px 14px -2px rgba(217, 119, 6, .65);
}


/* ============================================================
   v4.12.214 — RESULT SCREEN REWARD CHIPS
   The renderRewards() JS in frontend-scripts.js (added v4.7.49)
   was emitting chip markup with no matching CSS — chips rendered
   as bare icon + plain "+N label" text. This adds the chip card
   styling, count-up animation, and per-type tints.
   ============================================================ */
.mcqp-fe .mcqp-rewards {
    margin: 0 auto 24px;
    max-width: 600px;
}
.mcqp-fe .mcqp-rewards-note {
    text-align: center;
    color: var(--mcqp-text-muted);
    font-size: 13.5px;
    margin: 0 0 20px;
    font-style: italic;
}
.mcqp-fe .mcqp-reward-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 4px;
}
.mcqp-fe .mcqp-reward-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
    background: var(--mcqp-surface);
    border: 1px solid var(--mcqp-border-2);
    border-radius: 999px;
    box-shadow: 0 2px 8px -4px rgba(15, 23, 42, .08);
    /* Animated entrance: chips fade up + scale into view */
    opacity: 0;
    transform: translateY(8px) scale(.95);
    transition: opacity .35s cubic-bezier(.34, 1.56, .64, 1),
                transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.mcqp-fe .mcqp-reward-chip.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.mcqp-fe .mcqp-reward-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}
.mcqp-fe .mcqp-reward-icon svg { width: 18px; height: 18px; }
.mcqp-fe .mcqp-reward-body {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.mcqp-fe .mcqp-reward-value {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.mcqp-fe .mcqp-reward-plus {
    font-size: 14px;
    font-weight: 700;
    margin-right: 1px;
}
.mcqp-fe .mcqp-reward-num {
    font-variant-numeric: tabular-nums;
}
.mcqp-fe .mcqp-reward-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mcqp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* Per-type colors — coin (gold), xp (blue), streak (orange/red) */
.mcqp-fe .mcqp-reward-chip--coin .mcqp-reward-icon {
    background: rgba(245, 158, 11, .15);
    color: #d97706;
}
.mcqp-fe .mcqp-reward-chip--coin .mcqp-reward-value { color: #b45309; }

.mcqp-fe .mcqp-reward-chip--xp .mcqp-reward-icon {
    background: rgba(99, 102, 241, .15);
    color: #4f46e5;
}
.mcqp-fe .mcqp-reward-chip--xp .mcqp-reward-value { color: #4338ca; }

.mcqp-fe .mcqp-reward-chip--streak .mcqp-reward-icon {
    background: rgba(239, 68, 68, .15);
    color: #ef4444;
    animation: mcqp-flame-pulse 1.6s ease-in-out infinite;
}
.mcqp-fe .mcqp-reward-chip--streak .mcqp-reward-value { color: #b91c1c; }
@keyframes mcqp-flame-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

/* "New best streak!" — gold border + sparkle */
.mcqp-fe .mcqp-reward-chip--streak.is-best {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fffbeb 0%, var(--mcqp-surface) 60%);
    box-shadow: 0 4px 16px -6px rgba(251, 191, 36, .4);
}
.mcqp-fe .mcqp-reward-chip--streak.is-best .mcqp-reward-label {
    color: #b45309;
    font-weight: 700;
}

/* Coin sparkle host (existing JS spawns sparkles inside) */
.mcqp-fe .mcqp-coin-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

/* Mobile */
@media (max-width: 540px) {
    .mcqp-fe .mcqp-reward-grid { gap: 8px; }
    .mcqp-fe .mcqp-reward-chip { padding: 8px 14px 8px 10px; gap: 8px; }
    .mcqp-fe .mcqp-reward-icon { width: 28px; height: 28px; }
    .mcqp-fe .mcqp-reward-icon svg { width: 16px; height: 16px; }
    .mcqp-fe .mcqp-reward-value { font-size: 16px; }
    .mcqp-fe .mcqp-reward-label { font-size: 10.5px; }
}

/* Dark mode */
.mcqp-fe[data-theme="dark"] .mcqp-reward-chip,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-reward-chip {
    background: rgba(30, 41, 59, .6);
    border-color: rgba(51, 65, 85, .5);
}
.mcqp-fe[data-theme="dark"] .mcqp-reward-chip--coin .mcqp-reward-icon,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-reward-chip--coin .mcqp-reward-icon {
    background: rgba(245, 158, 11, .22); color: #fbbf24;
}
.mcqp-fe[data-theme="dark"] .mcqp-reward-chip--coin .mcqp-reward-value,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-reward-chip--coin .mcqp-reward-value { color: #fcd34d; }
.mcqp-fe[data-theme="dark"] .mcqp-reward-chip--xp .mcqp-reward-icon,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-reward-chip--xp .mcqp-reward-icon {
    background: rgba(99, 102, 241, .25); color: #a5b4fc;
}
.mcqp-fe[data-theme="dark"] .mcqp-reward-chip--xp .mcqp-reward-value,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-reward-chip--xp .mcqp-reward-value { color: #c4b5fd; }
.mcqp-fe[data-theme="dark"] .mcqp-reward-chip--streak .mcqp-reward-icon,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-reward-chip--streak .mcqp-reward-icon {
    background: rgba(239, 68, 68, .25); color: #fca5a5;
}
.mcqp-fe[data-theme="dark"] .mcqp-reward-chip--streak .mcqp-reward-value,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-reward-chip--streak .mcqp-reward-value { color: #fca5a5; }
.mcqp-fe[data-theme="dark"] .mcqp-reward-chip--streak.is-best,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-reward-chip--streak.is-best {
    background: linear-gradient(135deg, rgba(251, 191, 36, .15) 0%, rgba(30, 41, 59, .6) 60%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mcqp-fe .mcqp-reward-chip {
        opacity: 1; transform: none;
    }
    .mcqp-fe .mcqp-reward-chip--streak .mcqp-reward-icon { animation: none; }
}

/* ============================================================
   v4.12.241 — TEST LEADERBOARD CARD
   v4.12.243 — Converted to MODAL POPUP. Was an inline card between
   the ad placement and Review Answers; now a fixed-position dialog
   that escapes the page's sticky-header overlap and any layout
   constraints. Triggered by the "Leaderboard" button in the result
   actions row.
   ============================================================ */

/* Modal wrapper — full viewport overlay. Hidden by default via
   the `hidden` attribute; .is-open class triggers the fade-in. */
.mcqp-fe .mcqp-tlb-modal,
.mcqp-tlb-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    /* Fade-in transition */
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    /* Reset any inherited typography from the page; the dialog
       child carries the .mcqp-fe styling context for inner rules */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #0f172a;
}
.mcqp-fe .mcqp-tlb-modal.is-open,
.mcqp-tlb-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Backdrop — clickable area that closes the modal */
.mcqp-tlb-modal .mcqp-tlb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Dialog box — the actual leaderboard panel */
.mcqp-tlb-modal .mcqp-tlb-dialog {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5),
                0 12px 28px -8px rgba(0, 0, 0, .25);
    /* Slide-up + scale entrance */
    transform: translateY(12px) scale(.96);
    transition: transform .22s cubic-bezier(.2, .9, .25, 1.05);
}
.mcqp-tlb-modal.is-open .mcqp-tlb-dialog {
    transform: translateY(0) scale(1);
}

/* Close button — top-right corner */
.mcqp-tlb-modal .mcqp-tlb-close {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(15, 23, 42, .1);
    color: #475569;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s, border-color .15s, color .15s;
    box-shadow: 0 2px 6px -2px rgba(15, 23, 42, .1);
}
.mcqp-tlb-modal .mcqp-tlb-close:hover {
    background: #fff;
    color: #0f172a;
    border-color: rgba(15, 23, 42, .25);
}

/* Hero header — same warm amber gradient as before, now inside modal */
.mcqp-tlb-modal .mcqp-tlb-head {
    padding: 18px 22px 16px;
    padding-right: 56px; /* leave room for the close X button */
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 60%, #fff7ed 100%);
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; gap: 14px;
    border-bottom: 1px solid rgba(217, 119, 6, .15);
    flex-shrink: 0;
}
.mcqp-tlb-modal .mcqp-tlb-head::before {
    content: '';
    position: absolute;
    top: -30px; right: 40px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(217, 119, 6, .18), transparent 70%);
    pointer-events: none;
}
.mcqp-fe .mcqp-tlb-head-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 4px 12px -4px rgba(217, 119, 6, .5);
    flex-shrink: 0;
    position: relative;
}
.mcqp-fe .mcqp-tlb-head-text {
    flex: 1; min-width: 0;
    position: relative;
}
.mcqp-fe .mcqp-tlb-title {
    margin: 0;
    font-size: 18px; font-weight: 800;
    color: var(--mcqp-text);
    letter-spacing: -.02em;
}
.mcqp-fe .mcqp-tlb-sub {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: #92400e;
    font-weight: 500;
}
/* "Your rank" pill — far right of header */
.mcqp-fe .mcqp-tlb-myrank {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center;
    border-radius: 14px;
    padding: 6px 16px;
    line-height: 1;
    position: relative;
    background: linear-gradient(135deg, #ffffff, #fef3c7);
    border: 1px solid #fcd34d;
}
.mcqp-fe .mcqp-tlb-myrank-num {
    font-size: 20px; font-weight: 800;
    color: #b45309;
    font-variant-numeric: tabular-nums;
}
.mcqp-fe .mcqp-tlb-myrank-lbl {
    font-size: 9.5px;
    color: #92400e;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 3px;
}

/* Body — rank list */
.mcqp-fe .mcqp-tlb-body {
    padding: 0;
    /* Inside the modal dialog, this is the scrollable area when the
       leaderboard is long. The dialog flex-column layout + max-height
       on the dialog ensures only this body scrolls, not the whole modal. */
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}
.mcqp-fe .mcqp-tlb-loading,
.mcqp-fe .mcqp-tlb-empty {
    padding: 28px 14px;
    text-align: center;
    color: var(--mcqp-text-muted);
    font-size: 13px;
    font-weight: 600;
}

/* v4.12.244 — Podium (top-3 cards). Visual order: 2nd, 1st, 3rd.
   First-place card lifts up + has the gold "RANK 1" star + amber pill. */
.mcqp-fe .mcqp-tlb-podium {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 14px 14px 6px;
}
.mcqp-fe .mcqp-tlb-podium-card {
    background: var(--mcqp-surface-2, #f8fafc);
    border: 1.5px solid var(--mcqp-border-2, #e2e8f0);
    border-radius: 12px;
    padding: 14px 8px 10px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.mcqp-fe .mcqp-tlb-podium-card.rank-1 {
    background: linear-gradient(180deg, #fffbeb 0%, #fff 90%);
    border-color: #fcd34d;
    transform: translateY(-4px);
    box-shadow: 0 6px 16px -8px rgba(217, 119, 6, .35);
}
.mcqp-fe .mcqp-tlb-podium-card.rank-2 { border-color: #cbd5e1; }
.mcqp-fe .mcqp-tlb-podium-card.rank-3 { border-color: #fdba74; }
.mcqp-fe .mcqp-tlb-podium-card.is-me {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .35);
}
.mcqp-fe .mcqp-tlb-rank1-star {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #fff;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
    display: inline-flex; align-items: center; gap: 3px;
    box-shadow: 0 4px 10px -2px rgba(217, 119, 6, .5);
    white-space: nowrap;
}
.mcqp-fe .mcqp-tlb-podium-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    color: #fff;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
}
.mcqp-fe .mcqp-tlb-podium-name {
    font-size: 12.5px; font-weight: 800;
    color: var(--mcqp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.mcqp-fe .mcqp-tlb-podium-time {
    font-size: 11px;
    color: var(--mcqp-text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.mcqp-fe .mcqp-tlb-podium-pill {
    margin-top: 2px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    background: var(--mcqp-surface, #fff);
    color: var(--mcqp-text);
    border: 1px solid var(--mcqp-border-2, #e2e8f0);
}
.mcqp-fe .mcqp-tlb-podium-pill.rank-1 {
    background: linear-gradient(135deg, #fef3c7, #fcd34d);
    border-color: #f59e0b;
    color: #78350f;
}
.mcqp-fe .mcqp-tlb-podium-pill.rank-2 {
    background: linear-gradient(135deg, #f8fafc, #cbd5e1);
    border-color: #94a3b8;
    color: #1e293b;
}
.mcqp-fe .mcqp-tlb-podium-pill.rank-3 {
    background: linear-gradient(135deg, #fed7aa, #fb923c);
    border-color: #ea580c;
    color: #7c2d12;
}

/* Table (ranks 4+) */
.mcqp-fe .mcqp-tlb-table {
    padding: 8px 0 4px;
}
.mcqp-fe .mcqp-tlb-thead {
    display: grid;
    grid-template-columns: 36px 1fr 56px 56px;
    gap: 10px;
    padding: 8px 14px 6px;
    font-size: 9.5px;
    font-weight: 800;
    color: var(--mcqp-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--mcqp-border, #f1f5f9);
}
.mcqp-fe .mcqp-tlb-thead > span:nth-child(3),
.mcqp-fe .mcqp-tlb-thead > span:nth-child(4) {
    text-align: right;
}
.mcqp-fe .mcqp-tlb-tr {
    display: grid;
    grid-template-columns: 36px 1fr 56px 56px;
    gap: 10px;
    padding: 10px 14px;
    align-items: center;
    border-bottom: 1px solid var(--mcqp-border, #f1f5f9);
}
.mcqp-fe .mcqp-tlb-tr:last-child { border-bottom: 0; }
.mcqp-fe .mcqp-tlb-tr.is-me {
    background: linear-gradient(90deg, var(--mcqp-primary-soft, #eff6ff), var(--mcqp-surface));
    border: 1px solid rgba(37, 99, 235, .3);
    border-radius: 10px;
    margin: 6px 8px;
    padding: 10px 12px;
    grid-template-columns: 36px 1fr 56px 56px;
}
.mcqp-fe .mcqp-tlb-tr-rank {
    font-size: 13px; font-weight: 800;
    color: var(--mcqp-text-muted);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.mcqp-fe .mcqp-tlb-tr.is-me .mcqp-tlb-tr-rank { color: var(--mcqp-primary, #2563eb); }
.mcqp-fe .mcqp-tlb-tr-user {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
}
.mcqp-fe .mcqp-tlb-tr-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    color: #fff;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
}
.mcqp-fe .mcqp-tlb-initials {
    color: #fff;
    font-weight: 800;
}
.mcqp-fe .mcqp-tlb-tr-meta { min-width: 0; }
.mcqp-fe .mcqp-tlb-tr-name {
    font-size: 13px; font-weight: 700;
    color: var(--mcqp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcqp-fe .mcqp-tlb-row-sub {
    font-size: 10.5px;
    color: var(--mcqp-text-muted);
    font-weight: 600;
    margin-top: 1px;
}
.mcqp-fe .mcqp-tlb-me-badge {
    display: inline-block;
    padding: 1px 6px;
    background: var(--mcqp-primary, #2563eb);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
    vertical-align: middle;
}
.mcqp-fe .mcqp-tlb-tr-time {
    font-size: 12.5px;
    color: var(--mcqp-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.mcqp-fe .mcqp-tlb-tr-score {
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.mcqp-fe .mcqp-tlb-tr-score.score-green { color: #059669; }
.mcqp-fe .mcqp-tlb-tr-score.score-amber { color: #d97706; }
.mcqp-fe .mcqp-tlb-tr-score.score-red   { color: #dc2626; }
.mcqp-fe .mcqp-tlb-divider {
    text-align: center;
    color: var(--mcqp-text-muted);
    font-size: 18px;
    line-height: 1;
    padding: 6px 0;
    letter-spacing: 4px;
    user-select: none;
}

/* Mobile */
@media (max-width: 540px) {
    /* v4.12.398 — Mobile: render as a full-screen "app", not a modal popup.
       v4.12.399 — Stronger override. Previously the dialog was still being
       centered by the modal's flex layout (display:flex; align-items:center;
       justify-content:center on .mcqp-tlb-modal), so when the dialog's
       content was shorter than the viewport, the dialog shrank to fit its
       content and got centered vertically — leaving big empty bands above
       and below that showed the underlying page through. Fix: kill the
       centering AND force the dialog to inset:0 so it's locked to all four
       viewport edges regardless of content height. */
    .mcqp-tlb-modal {
        padding: 0;
        align-items: stretch;       /* v4.12.399 — was center via base rule */
        justify-content: stretch;
    }
    .mcqp-tlb-modal .mcqp-tlb-backdrop {
        /* No translucent overlay — the dialog covers everything below it
           anyway, so an extra dark layer just makes it feel "popup-y". */
        display: none;
    }
    .mcqp-tlb-modal .mcqp-tlb-dialog {
        /* v4.12.399 — Lock to all four edges of the viewport. The modal
           is already position:fixed; inset:0 on the body, so the dialog
           inheriting full width + height via stretch (above) plus an
           explicit min-height fallback guarantees it fills the screen
           even if a parent flex setup misbehaves. */
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        transform: none !important;
        transition: none !important;
    }
    /* v4.12.400 — Close button removed on mobile. The leaderboard is now
       a "page" — user dismisses via the browser back button / swipe gesture
       (wired up in frontend-scripts.js via history.pushState + popstate). */
    .mcqp-tlb-modal .mcqp-tlb-close {
        display: none !important;
    }
    /* v4.12.398 — Header layout reworked so the title stays on ONE line
       and the subtitle clamps to a max of TWO lines. Previously
       flex-wrap:wrap pushed the my-rank pill onto its own line and
       narrowed the title column too much, causing "Test Leaderboard"
       to break into "Test\nLeaderboard". Now the head is a 3-column
       horizontal flex (icon | text | my-rank), nowrap.
       v4.12.400 — Right padding reduced from 50px to 14px since the
       close button no longer occupies that space. */
    .mcqp-tlb-modal .mcqp-tlb-head {
        flex-wrap: nowrap;
        padding: 14px 14px;
        align-items: flex-start;
        gap: 10px;
    }
    .mcqp-fe .mcqp-tlb-head-text {
        min-width: 0; /* allows children to truncate inside flex */
    }
    .mcqp-fe .mcqp-tlb-title {
        font-size: 17px;            /* slightly smaller for narrow viewports */
        line-height: 1.15;
        white-space: nowrap;        /* v4.12.398 — never wrap to a 2nd line */
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Subtitle: clamp to MAX 2 lines. Uses -webkit-line-clamp which is
       supported in every modern mobile browser (Chrome, Safari, Firefox,
       Samsung Internet). Falls back to ellipsis at the end of line 2. */
    .mcqp-fe .mcqp-tlb-sub {
        font-size: 12px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* My-rank pill stays on the right side of the head (NOT pushed below
       the text by wrap). Slightly smaller padding to fit narrow widths. */
    .mcqp-fe .mcqp-tlb-myrank {
        margin: 0;
        padding: 5px 12px;
        flex-shrink: 0;
    }
    .mcqp-fe .mcqp-tlb-myrank-num { font-size: 17px; }
    .mcqp-fe .mcqp-tlb-myrank-lbl { font-size: 8.5px; }

    .mcqp-fe .mcqp-tlb-body { padding: 0; }
    /* Tighter podium on small screens */
    .mcqp-fe .mcqp-tlb-podium { padding: 12px 10px 4px; gap: 6px; }
    .mcqp-fe .mcqp-tlb-podium-card { padding: 12px 6px 8px; gap: 4px; }
    .mcqp-fe .mcqp-tlb-podium-avatar { width: 38px; height: 38px; font-size: 12px; }
    .mcqp-fe .mcqp-tlb-podium-name { font-size: 11.5px; }
    .mcqp-fe .mcqp-tlb-podium-time { font-size: 10.5px; }
    .mcqp-fe .mcqp-tlb-podium-pill { font-size: 10px; padding: 2px 8px; }
    .mcqp-fe .mcqp-tlb-rank1-star { font-size: 9px; padding: 2px 7px 2px 5px; }
    /* Tighter table */
    .mcqp-fe .mcqp-tlb-thead,
    .mcqp-fe .mcqp-tlb-tr { grid-template-columns: 28px 1fr 50px 50px; padding: 9px 12px; gap: 8px; }
    .mcqp-fe .mcqp-tlb-tr.is-me { margin: 6px 6px; padding: 9px 10px; grid-template-columns: 28px 1fr 50px 50px; }
    .mcqp-fe .mcqp-tlb-tr-avatar { width: 26px; height: 26px; font-size: 10.5px; }
    .mcqp-fe .mcqp-tlb-tr-name { font-size: 12.5px; }
    .mcqp-fe .mcqp-tlb-tr-time,
    .mcqp-fe .mcqp-tlb-tr-score { font-size: 11.5px; }
    .mcqp-fe .mcqp-tlb-row-sub { font-size: 10px; }
}

/* Dark mode */
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-tlb-head,
.mcqp-fe[data-theme="dark"] .mcqp-tlb-head {
    background: linear-gradient(135deg, rgba(217, 119, 6, .12) 0%, rgba(245, 158, 11, .08) 60%, rgba(251, 191, 36, .06) 100%);
    border-bottom-color: rgba(245, 158, 11, .2);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-tlb-sub,
.mcqp-fe[data-theme="dark"] .mcqp-tlb-sub { color: #fbbf24; }

/* ============================================================
   v4.12.239 — AD PLACEMENT (between result + review)
   Wrapper card matches the surrounding result/review cards in spacing
   and shape. The ad slot inside is rendered as-is from admin-pasted
   code; we wrap it but don't restyle the inner ad markup.
   ============================================================ */
.mcqp-fe .mcqp-ad-card {
    padding: 12px 16px;
    margin-bottom: 14px;
    background: var(--mcqp-surface);
    border: 1px solid var(--mcqp-border-2);
    border-radius: 14px;
    overflow: hidden;
    /* "Advertisement" eyebrow above the ad keeps things FTC-tidy */
    position: relative;
}
.mcqp-fe .mcqp-ad-card::before {
    content: 'Advertisement';
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mcqp-text-muted);
    margin-bottom: 6px;
    text-align: center;
    opacity: .7;
}
.mcqp-fe .cbq-ad-slot {
    /* Centered + min-height so empty/loading slots don't collapse to 0 */
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.mcqp-fe .cbq-ad-slot ins.adsbygoogle {
    /* Common AdSense unit width-fill */
    display: block;
    width: 100%;
    max-width: 100%;
}

/* ============================================================
   v4.12.210 — REVIEW ANSWERS SCREEN
   Pure-client section that becomes visible when the user clicks
   "Review Answers" on the result screen. Each Q renders with its
   user-answer status, the 4 options (correct highlighted, user's
   wrong pick highlighted), and a collapsible explanation.
   ============================================================ */
.mcqp-fe .mcqp-review-section {
    padding: 22px 22px 26px;
}
/* v4.12.237 — Gradient hero header for Review Answers section.
   Replaces the v4.12.210 plain bold-text header. Sits on the same
   .mcqp-card wrapper but the .mcqp-review-head now extends edge-to-edge
   inside it via negative margins so the gradient looks intentional
   instead of a stripe. */
.mcqp-fe .mcqp-review-head {
    /* Pull the head out to the card's padded edge — assumes the parent
       .mcqp-card has 16-22px padding. Negative margin equal to that
       padding lets the gradient go full-width. */
    margin: -22px -22px 18px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 60%, #f0f9ff 100%);
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; gap: 14px;
    border-bottom: 1px solid rgba(37, 99, 235, .12);
}
/* Decorative radial accent in the top-right of the header */
.mcqp-fe .mcqp-review-head::before {
    content: '';
    position: absolute;
    top: -30px; right: -20px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(37, 99, 235, .18), transparent 70%);
    pointer-events: none;
}
.mcqp-fe .mcqp-review-head-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--mcqp-primary);
    color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 4px 12px -4px rgba(37, 99, 235, .5);
    flex-shrink: 0;
    position: relative;
}
.mcqp-fe .mcqp-review-head-text {
    flex: 1; min-width: 0;
    position: relative;
}
.mcqp-fe .mcqp-review-title {
    margin: 0;
    font-size: 18px; font-weight: 800;
    color: var(--mcqp-text);
    letter-spacing: -.02em;
}
.mcqp-fe .mcqp-review-sub {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--mcqp-text-muted);
    font-weight: 500;
    /* v4.12.401 — Clamp to MAX 2 lines at any viewport width. The Kannada
       text "ಪ್ರತಿ ಪ್ರಶ್ನೆಯನ್ನೂ ಗಮನಿಸಿ, ನಿಮ್ಮ ತಪ್ಪುಗಳನ್ನು ಕಂಡುಕೊಳ್ಳಿ." can
       wrap to 3 lines on narrow phones; this caps it at 2 lines with an
       ellipsis fallback. -webkit-line-clamp is supported in every modern
       browser including all mobile Chrome/Safari/Firefox/Samsung Internet.
       v4.12.402 — Line-height bumped to 1.6 so Kannada matras (top vowel
       marks) and descenders have breathing room — was clipping with 1.35.
       Padding-bottom 2px keeps the last line's descenders from being cut
       by the clamp's overflow:hidden. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
    padding-bottom: 2px;
}
/* Accuracy badge — auto-tinted by data-band attr. Default = high (emerald) */
.mcqp-fe .mcqp-review-acc {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center;
    border-radius: 14px;
    padding: 6px 16px;
    line-height: 1;
    position: relative;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #86efac;
}
.mcqp-fe .mcqp-review-acc-pct {
    font-size: 22px; font-weight: 800;
    color: #059669;
    font-variant-numeric: tabular-nums;
}
.mcqp-fe .mcqp-review-acc-lbl {
    font-size: 9.5px;
    color: #047857;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 3px;
}
/* Band variants — match v4.12.215 result-pct band logic so review
   header tint is consistent with the result percentage colors. */
.mcqp-fe .mcqp-review-acc[data-band="good"] {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: rgba(37, 99, 235, .35);
}
.mcqp-fe .mcqp-review-acc[data-band="good"] .mcqp-review-acc-pct { color: #2563eb; }
.mcqp-fe .mcqp-review-acc[data-band="good"] .mcqp-review-acc-lbl { color: #1d4ed8; }

.mcqp-fe .mcqp-review-acc[data-band="fair"] {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-color: #fcd34d;
}
.mcqp-fe .mcqp-review-acc[data-band="fair"] .mcqp-review-acc-pct { color: #d97706; }
.mcqp-fe .mcqp-review-acc[data-band="fair"] .mcqp-review-acc-lbl { color: #92400e; }

.mcqp-fe .mcqp-review-acc[data-band="low"] {
    background: linear-gradient(135deg, #fff1f2, #ffe4e6);
    border-color: #fda4af;
}
.mcqp-fe .mcqp-review-acc[data-band="low"] .mcqp-review-acc-pct { color: #dc2626; }
.mcqp-fe .mcqp-review-acc[data-band="low"] .mcqp-review-acc-lbl { color: #9f1239; }

/* Mobile reflow — accuracy badge wraps below */
@media (max-width: 540px) {
    .mcqp-fe .mcqp-review-head { flex-wrap: wrap; }
    .mcqp-fe .mcqp-review-acc {
        margin-left: 54px; /* aligns under the title (icon width 40 + gap 14) */
        margin-top: 8px;
    }
}

/* Dark mode */
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-review-head,
.mcqp-fe[data-theme="dark"] .mcqp-review-head {
    background: linear-gradient(135deg, rgba(37, 99, 235, .15) 0%, rgba(96, 165, 250, .1) 60%, rgba(14, 165, 233, .08) 100%);
    border-bottom-color: rgba(96, 165, 250, .2);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-review-head::before,
.mcqp-fe[data-theme="dark"] .mcqp-review-head::before {
    background: radial-gradient(circle, rgba(96, 165, 250, .25), transparent 70%);
}

.mcqp-fe .mcqp-btn-ghost {
    background: transparent;
    border: 1px solid var(--mcqp-border-2);
    color: var(--mcqp-text);
    padding: 7px 12px;
    border-radius: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; font-size: 13px; font-weight: 600;
}
.mcqp-fe .mcqp-btn-ghost:hover { background: var(--mcqp-surface-2); }

/* Filter pills */
.mcqp-fe .mcqp-review-filter {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mcqp-border-2);
}
.mcqp-fe .mcqp-rfilter {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    background: var(--mcqp-surface-2);
    border: 1px solid var(--mcqp-border-2);
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    color: var(--mcqp-text);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.mcqp-fe .mcqp-rfilter:hover {
    background: var(--mcqp-surface-3, var(--mcqp-surface-2));
}
.mcqp-fe .mcqp-rfilter.is-active {
    background: var(--mcqp-primary);
    border-color: var(--mcqp-primary);
    color: #fff;
}
.mcqp-fe .mcqp-rfilter-n {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: rgba(15, 23, 42, .08);
    border-radius: 9px;
    font-size: 11px; font-weight: 700;
    line-height: 1;
}
.mcqp-fe .mcqp-rfilter.is-active .mcqp-rfilter-n {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* Body */
.mcqp-fe .mcqp-review-body {
    display: flex; flex-direction: column; gap: 16px;
}
.mcqp-fe .mcqp-r-empty {
    text-align: center; color: var(--mcqp-text-muted);
    padding: 40px 20px; margin: 0;
}

/* Per-question card */
.mcqp-fe .mcqp-r-item {
    padding: 16px 16px 14px;
    border: 1px solid var(--mcqp-border-2);
    border-radius: 14px;
    background: var(--mcqp-surface);
    position: relative; /* anchor for v4.12.227 .mcqp-r-time-badge */
}
.mcqp-fe .mcqp-r-item[data-status="correct"] {
    border-left: 4px solid #10b981;
}
.mcqp-fe .mcqp-r-item[data-status="wrong"] {
    border-left: 4px solid #ef4444;
}
.mcqp-fe .mcqp-r-item[data-status="skipped"] {
    border-left: 4px solid #94a3b8;
}

/* v4.12.227 — Time-vs-topper badge.
   v4.12.228 — Tucked inside the card (top: 12px instead of -12px) and
   recolored to primary blue tint to match the rest of the focus
   palette instead of the amber gold.
   v4.12.230 — Reverted background to the original white→amber gradient
   per design feedback. The amber tint cues "achievement" better than
   the focus blue did, while the gold "topper" label (added in v4.12.229)
   anchors the meaning. */
.mcqp-fe .mcqp-r-time-badge {
    position: absolute;
    top: 12px; right: 14px;
    background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-radius: 999px;
    padding: 4px 10px 4px 5px;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    max-width: calc(100% - 28px); /* prevent overflow on narrow screens */
    overflow: hidden;
}
.mcqp-fe .mcqp-r-time-icon {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(217, 119, 6, .15);
    display: grid; place-items: center;
    color: #d97706;
    flex-shrink: 0;
}
.mcqp-fe .mcqp-r-time-icon svg { width: 12px; height: 12px; }
.mcqp-fe .mcqp-r-time-you {
    color: var(--mcqp-text);
    font-weight: 800;
}
.mcqp-fe .mcqp-r-time-lbl {
    color: #d97706; /* v4.12.229 — gold for "topper" label, signals achievement */
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-left: 3px;
}
.mcqp-fe .mcqp-r-time-top {
    color: #b45309; /* v4.12.230 — amber to harmonize with gradient bg */
    font-weight: 800;
}
.mcqp-fe .mcqp-r-time-delta {
    display: inline-flex; align-items: center; gap: 2px;
    color: #dc2626;
    font-size: 9.5px;
    font-weight: 800;
    padding: 1px 5px;
    background: rgba(239, 68, 68, .1);
    border-radius: 4px;
}
.mcqp-fe .mcqp-r-time-delta.faster {
    color: #059669;
    background: rgba(16, 185, 129, .12);
}
.mcqp-fe .mcqp-r-time-delta.tie {
    color: #4338ca;
    background: rgba(99, 102, 241, .12);
}

/* No-topper-data variant — neutral gray */
.mcqp-fe .mcqp-r-time-badge.is-no-data {
    background: var(--mcqp-surface);
    border-color: var(--mcqp-border-2);
}
.mcqp-fe .mcqp-r-time-badge.is-no-data .mcqp-r-time-icon {
    background: rgba(100, 116, 139, .12);
    color: #64748b;
}
.mcqp-fe .mcqp-r-time-badge.is-no-data .mcqp-r-time-lbl {
    color: var(--mcqp-text-muted);
    opacity: 1;
}
.mcqp-fe .mcqp-r-time-badge.is-no-data .mcqp-r-time-top {
    color: #94a3b8;
    font-weight: 600;
}

/* Push the question header rightward so it doesn't collide with the
   badge sitting at top-right of the card */
.mcqp-fe .mcqp-r-item-head {
    padding-right: 110px; /* badge max width safe zone */
    min-height: 28px;
}

/* v4.12.232 — Time badge style variants. Driven by data-time-style attr.
   The default (amber) inherits from the base rules above; these blocks
   only override the bits that differ. */

/* ── Focus blue pill ── */
.mcqp-fe .mcqp-r-time-badge[data-time-style="blue"] {
    background: var(--mcqp-primary-soft);
    border-color: rgba(37, 99, 235, .25);
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="blue"] .mcqp-r-time-icon {
    background: rgba(37, 99, 235, .15);
    color: var(--mcqp-primary);
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="blue"] .mcqp-r-time-lbl {
    color: var(--mcqp-primary);
    opacity: .75;
    font-weight: 700;
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="blue"] .mcqp-r-time-top {
    color: var(--mcqp-primary);
}

/* ── Minimal text — no pill, no border ── */
.mcqp-fe .mcqp-r-time-badge[data-time-style="minimal"] {
    background: transparent;
    border: 0;
    padding: 4px 6px;
    gap: 6px;
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="minimal"] .mcqp-r-time-icon {
    width: 14px; height: 14px;
    background: transparent;
    color: var(--mcqp-text-muted);
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="minimal"] .mcqp-r-time-icon svg {
    width: 100%; height: 100%;
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="minimal"] .mcqp-r-time-lbl {
    color: var(--mcqp-text-muted);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="minimal"] .mcqp-r-time-top {
    color: #d97706;
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="minimal"] .mcqp-r-time-delta {
    background: transparent;
    padding: 0;
}

/* ── Dark badge — premium / achievement-coded ── */
.mcqp-fe .mcqp-r-time-badge[data-time-style="dark"] {
    background: #0f172a;
    border: 0;
    padding: 4px 11px 4px 6px;
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .4);
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="dark"] .mcqp-r-time-icon {
    width: 18px; height: 18px;
    background: rgba(96, 165, 250, .2);
    color: #93c5fd;
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="dark"] .mcqp-r-time-you {
    color: #93c5fd;
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="dark"] .mcqp-r-time-lbl {
    color: #fbbf24;
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="dark"] .mcqp-r-time-top {
    color: #fde68a;
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="dark"] .mcqp-r-time-delta {
    color: #fca5a5;
    background: rgba(248, 113, 113, .18);
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="dark"] .mcqp-r-time-delta.faster {
    color: #6ee7b7;
    background: rgba(110, 231, 183, .18);
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="dark"] .mcqp-r-time-delta.tie {
    color: #c7d2fe;
    background: rgba(199, 210, 254, .18);
}

/* No-data state for variants — kept neutral, doesn't fight the variant tone */
.mcqp-fe .mcqp-r-time-badge[data-time-style="blue"].is-no-data,
.mcqp-fe .mcqp-r-time-badge[data-time-style="minimal"].is-no-data,
.mcqp-fe .mcqp-r-time-badge[data-time-style="dark"].is-no-data {
    background: var(--mcqp-surface);
    border: 1px solid var(--mcqp-border-2);
    box-shadow: none;
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="blue"].is-no-data .mcqp-r-time-icon,
.mcqp-fe .mcqp-r-time-badge[data-time-style="minimal"].is-no-data .mcqp-r-time-icon,
.mcqp-fe .mcqp-r-time-badge[data-time-style="dark"].is-no-data .mcqp-r-time-icon {
    background: rgba(100, 116, 139, .12);
    color: #64748b;
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="blue"].is-no-data .mcqp-r-time-you,
.mcqp-fe .mcqp-r-time-badge[data-time-style="minimal"].is-no-data .mcqp-r-time-you,
.mcqp-fe .mcqp-r-time-badge[data-time-style="dark"].is-no-data .mcqp-r-time-you {
    color: var(--mcqp-text);
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="blue"].is-no-data .mcqp-r-time-lbl,
.mcqp-fe .mcqp-r-time-badge[data-time-style="minimal"].is-no-data .mcqp-r-time-lbl,
.mcqp-fe .mcqp-r-time-badge[data-time-style="dark"].is-no-data .mcqp-r-time-lbl {
    color: var(--mcqp-text-muted);
    opacity: 1;
}
.mcqp-fe .mcqp-r-time-badge[data-time-style="blue"].is-no-data .mcqp-r-time-top,
.mcqp-fe .mcqp-r-time-badge[data-time-style="minimal"].is-no-data .mcqp-r-time-top,
.mcqp-fe .mcqp-r-time-badge[data-time-style="dark"].is-no-data .mcqp-r-time-top {
    color: #94a3b8;
    font-weight: 600;
}

/* Mobile — compact + reflow */
@media (max-width: 540px) {
    .mcqp-fe .mcqp-r-item-head {
        /* v4.12.306 — Removed `padding-right: 0` because the badge stays
           absolutely positioned top-right on mobile now (was static-flow
           below the header in v4.12.227). The header still needs right-
           padding to keep its text from running under the badge.
           v4.12.307 — Bumped from 100px → 150px to match the badge's
           wider max-width (was clipping "topper" label + value). */
        padding-right: 150px;
    }
    .mcqp-fe .mcqp-r-time-badge {
        /* v4.12.306 — Restored absolute top-right positioning on mobile
           per user request. Previous mobile rule moved it to static flow
           which placed it on the LEFT under the header chips. The badge
           is compact enough (~70-90px wide) to fit alongside the Q##/
           filter chips at the top-right of every modern phone width
           (≥360px). On extremely narrow screens it may compress text
           but won't break layout.
           v4.12.307 — max-width raised from 95px → 140px because the
           badge content (icon + user time + "topper" label + topper
           value [+ delta]) was being clipped at 95px — only "1s
           TOPPER" was visible, the trailing "—" / time / delta was
           cropped off-screen. 140px fits all 5 inner spans on a
           360px+ viewport without wrapping, including delta variants. */
        position: absolute;
        top: 12px; right: 14px;
        margin: 0;
        font-size: 10.5px;
        gap: 6px;
        padding: 4px 9px 4px 4px;
        max-width: 140px;
    }
    .mcqp-fe .mcqp-r-time-icon {
        width: 18px; height: 18px;
    }
    .mcqp-fe .mcqp-r-time-icon svg { width: 11px; height: 11px; }
    .mcqp-fe .mcqp-r-time-lbl { font-size: 9px; }
    .mcqp-fe .mcqp-r-time-delta { font-size: 9px; padding: 1px 4px; }
}

/* Dark mode */
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-time-badge,
.mcqp-fe[data-theme="dark"] .mcqp-r-time-badge {
    background: linear-gradient(135deg, rgba(30, 41, 59, .85) 0%, rgba(245, 158, 11, .15) 100%);
    border-color: rgba(245, 158, 11, .35);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-time-icon,
.mcqp-fe[data-theme="dark"] .mcqp-r-time-icon {
    background: rgba(245, 158, 11, .22);
    color: #fcd34d;
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-time-you,
.mcqp-fe[data-theme="dark"] .mcqp-r-time-you { color: #f1f5f9; }
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-time-lbl,
.mcqp-fe[data-theme="dark"] .mcqp-r-time-lbl { color: #fbbf24; }
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-time-top,
.mcqp-fe[data-theme="dark"] .mcqp-r-time-top { color: #fcd34d; }
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-time-delta.faster,
.mcqp-fe[data-theme="dark"] .mcqp-r-time-delta.faster {
    color: #6ee7b7; background: rgba(16, 185, 129, .18);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-time-delta.slower,
.mcqp-fe[data-theme="dark"] .mcqp-r-time-delta.slower {
    color: #fca5a5; background: rgba(239, 68, 68, .18);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-time-delta.tie,
.mcqp-fe[data-theme="dark"] .mcqp-r-time-delta.tie {
    color: #a5b4fc; background: rgba(99, 102, 241, .18);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-time-badge.is-no-data,
.mcqp-fe[data-theme="dark"] .mcqp-r-time-badge.is-no-data {
    background: rgba(30, 41, 59, .7);
    border-color: rgba(51, 65, 85, .6);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-time-badge.is-no-data .mcqp-r-time-icon,
.mcqp-fe[data-theme="dark"] .mcqp-r-time-badge.is-no-data .mcqp-r-time-icon {
    background: rgba(100, 116, 139, .25);
    color: #94a3b8;
}
.mcqp-fe .mcqp-r-item-head {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 10px;
}
.mcqp-fe .mcqp-r-qnum {
    font-size: 13px; font-weight: 800;
    color: var(--mcqp-primary);
    letter-spacing: 0.02em;
}
.mcqp-fe .mcqp-r-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    line-height: 1.4;
}
.mcqp-fe .mcqp-r-badge.ok      { background: rgba(16,185,129,.14);  color: #047857; }
.mcqp-fe .mcqp-r-badge.bad     { background: rgba(239,68,68,.14);   color: #b91c1c; }
.mcqp-fe .mcqp-r-badge.skipped { background: rgba(148,163,184,.18); color: #475569; }
.mcqp-fe .mcqp-r-qtext {
    font-size: 15px; line-height: 1.55; font-weight: 600;
    color: var(--mcqp-text);
    margin: 0 0 6px;
    word-break: break-word;
}
.mcqp-fe .mcqp-r-qtrans {
    font-size: 13.5px; line-height: 1.5;
    color: var(--mcqp-text-muted);
    margin: 0 0 12px;
    word-break: break-word;
}

/* Options */
.mcqp-fe .mcqp-r-opts {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 10px;
}
.mcqp-fe .mcqp-r-opt {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mcqp-border-2);
    border-radius: 10px;
    background: var(--mcqp-surface-2);
    font-size: 14px; line-height: 1.45;
    color: var(--mcqp-text);
}
.mcqp-fe .mcqp-r-opt-letter {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    background: var(--mcqp-surface);
    border: 1px solid var(--mcqp-border-2);
    border-radius: 50%;
    font-size: 11px; font-weight: 800;
    color: var(--mcqp-text-muted);
}
.mcqp-fe .mcqp-r-opt-text { flex: 1; min-width: 0; word-break: break-word; }
.mcqp-fe .mcqp-r-mark {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 13px; font-weight: 800;
    line-height: 1;
}
.mcqp-fe .mcqp-r-mark.ok  { background: #10b981; color: #fff; }
.mcqp-fe .mcqp-r-mark.bad { background: #ef4444; color: #fff; }

/* Highlighted states */
.mcqp-fe .mcqp-r-opt.is-correct {
    background: rgba(16,185,129,.10);
    border-color: rgba(16,185,129,.45);
    color: #064e3b;
}
.mcqp-fe .mcqp-r-opt.is-correct .mcqp-r-opt-letter {
    background: #10b981; color: #fff; border-color: #10b981;
}
.mcqp-fe .mcqp-r-opt.is-user-wrong {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.45);
    color: #7f1d1d;
}
.mcqp-fe .mcqp-r-opt.is-user-wrong .mcqp-r-opt-letter {
    background: #ef4444; color: #fff; border-color: #ef4444;
}
/* If user picked the correct one, the .is-correct already styles it. */

/* Explanation */
.mcqp-fe .mcqp-r-expl {
    margin-top: 12px;
    background: rgba(99,102,241,.06);
    border: 1px solid rgba(99,102,241,.2);
    border-radius: 10px;
    padding: 0;
}
.mcqp-fe .mcqp-r-expl > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    font-size: 13px; font-weight: 700;
    color: #4338ca;
    display: flex; align-items: center; gap: 6px;
    user-select: none;
}
.mcqp-fe .mcqp-r-expl > summary::-webkit-details-marker { display: none; }
.mcqp-fe .mcqp-r-expl > summary::before {
    content: '';
    width: 0; height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s;
}
.mcqp-fe .mcqp-r-expl[open] > summary::before {
    transform: rotate(90deg);
}
.mcqp-fe .mcqp-r-expl-body {
    padding: 0 12px 12px;
    font-size: 13.5px; line-height: 1.6;
    color: var(--mcqp-text);
}

/* Dark theme */
.mcqp-fe[data-theme="dark"] .mcqp-r-opt.is-correct,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-opt.is-correct {
    background: rgba(16,185,129,.18);
    border-color: rgba(16,185,129,.5);
    color: #6ee7b7;
}
.mcqp-fe[data-theme="dark"] .mcqp-r-opt.is-user-wrong,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-opt.is-user-wrong {
    background: rgba(239,68,68,.18);
    border-color: rgba(239,68,68,.5);
    color: #fca5a5;
}
.mcqp-fe[data-theme="dark"] .mcqp-r-badge.ok,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-badge.ok {
    background: rgba(16,185,129,.22); color: #6ee7b7;
}
.mcqp-fe[data-theme="dark"] .mcqp-r-badge.bad,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-badge.bad {
    background: rgba(239,68,68,.22); color: #fca5a5;
}
.mcqp-fe[data-theme="dark"] .mcqp-r-badge.skipped,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-badge.skipped {
    background: rgba(148,163,184,.22); color: #cbd5e1;
}
.mcqp-fe[data-theme="dark"] .mcqp-r-expl,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-expl {
    background: rgba(99,102,241,.12);
    border-color: rgba(99,102,241,.3);
}
.mcqp-fe[data-theme="dark"] .mcqp-r-expl > summary,
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-r-expl > summary {
    color: #a5b4fc;
}

/* Mobile tightening */
@media (max-width: 720px) {
    .mcqp-fe .mcqp-review-section { padding: 16px 14px 20px; }
    /* v4.12.237 — mobile section padding is 14px not 22px, so the
       gradient hero needs matching negative margins to reach the edge */
    .mcqp-fe .mcqp-review-head {
        margin: -16px -14px 14px;
        padding: 14px;
    }
    .mcqp-fe .mcqp-review-title { font-size: 16px; }
    .mcqp-fe .mcqp-review-sub { font-size: 11.5px; }
    .mcqp-fe .mcqp-r-item { padding: 14px 12px 12px; }
    .mcqp-fe .mcqp-r-qtext { font-size: 14.5px; }
    .mcqp-fe .mcqp-r-opt { padding: 9px 10px; font-size: 13.5px; }
    .mcqp-fe .mcqp-rfilter { padding: 6px 10px; font-size: 12.5px; }
}

/* ============================================================
   BADGE UNLOCK MODAL (v4.10.90) — Phase 5a
   Full-screen overlay that celebrates a new achievement with a
   medal pop-in + confetti burst. Intentionally loud: this is the
   user's reward moment and should feel special. Prefers-reduced-
   motion users get a gentle fade-in with no confetti.
   ============================================================ */
body.mcqp-badge-locked { overflow: hidden; }

.mcqp-badge-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: mcqp-badge-overlay-in 0.25s ease-out both;
    font-family: 'Inter', 'Baloo Tamma 2', system-ui, sans-serif;
}
.mcqp-badge-overlay.is-closing { animation: mcqp-badge-overlay-out 0.22s ease-in both; }
@keyframes mcqp-badge-overlay-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mcqp-badge-overlay-out { from { opacity: 1; } to { opacity: 0; } }

.mcqp-badge-overlay-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 35%, rgba(251,191,36,.15) 0%, rgba(15,23,42,.85) 55%, rgba(15,23,42,.92) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}
.mcqp-badge-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
/* v4.12.209 — Result-screen confetti.
   v4.12.213 — Was anchored to .mcqp-result (a card section) with
   overflow:hidden, which clipped bits within ~400px of fall — invisible.
   The bits' keyframe drops them 110vh, so the host MUST be full-viewport
   (fixed positioning) to let them fall the full height. Same approach as
   .mcqp-badge-confetti but the badge overlay was already full-screen by
   default. */
.mcqp-result-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}

.mcqp-badge-card {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 24px;
    padding: 36px 32px 28px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 30px 80px -20px rgba(15,23,42,.55), 0 0 0 1px rgba(15,23,42,.05);
    animation: mcqp-badge-card-in 0.4s cubic-bezier(.34, 1.2, .64, 1) both;
}
@keyframes mcqp-badge-card-in {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mcqp-badge-eyebrow {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #9a3412;
    background: linear-gradient(90deg, #fbbf24, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.mcqp-badge-medal-wrap { margin-bottom: 22px; }
.mcqp-badge-medal {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 16px 40px -10px rgba(0,0,0,.3);
}
.mcqp-badge-medal::before,
.mcqp-badge-medal::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    pointer-events: none;
}
.mcqp-badge-medal::before {
    background: radial-gradient(circle, rgba(251,191,36,.35), transparent 65%);
    animation: mcqp-badge-halo 2.5s ease-in-out infinite;
}
.mcqp-badge-medal::after {
    inset: -4px;
    border: 2px solid currentColor;
    opacity: .4;
    animation: mcqp-badge-ring 1.4s ease-out infinite;
}
@keyframes mcqp-badge-halo {
    0%,100% { opacity: .5; transform: scale(1); }
    50%     { opacity: 1;  transform: scale(1.08); }
}
@keyframes mcqp-badge-ring {
    0%   { inset: -4px;  opacity: .5; }
    100% { inset: -24px; opacity: 0; }
}

/* Tier gradients */
.mcqp-badge-medal[data-tier="bronze"] { background: linear-gradient(140deg, #d97706, #b45309, #92400e); color: #fff3d9; }
.mcqp-badge-medal[data-tier="silver"] { background: linear-gradient(140deg, #e5e7eb, #9ca3af, #6b7280); color: #1f2937; }
.mcqp-badge-medal[data-tier="gold"]   { background: linear-gradient(140deg, #fde68a, #fbbf24, #d97706); color: #78350f; }

.mcqp-badge-medal-wrap.is-pop .mcqp-badge-medal {
    animation: mcqp-badge-medal-pop 0.6s cubic-bezier(.34, 1.4, .64, 1) both;
}
@keyframes mcqp-badge-medal-pop {
    0%   { transform: scale(0) rotate(-180deg); }
    60%  { transform: scale(1.18) rotate(15deg); }
    100% { transform: scale(1) rotate(0); }
}

.mcqp-badge-medal-icon {
    font-size: 44px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.mcqp-badge-name {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.02em;
    margin-bottom: 8px;
}
.mcqp-badge-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 12px;
}
.mcqp-badge-tier {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 4px 10px;
    border-radius: 99px;
    margin-bottom: 20px;
}
.mcqp-badge-tier[data-tier="bronze"] { background: rgba(217,119,6,.14);  color: #9a3412; }
.mcqp-badge-tier[data-tier="silver"] { background: rgba(107,114,128,.14); color: #374151; }
.mcqp-badge-tier[data-tier="gold"]   { background: rgba(251,191,36,.2);  color: #92400e; }

.mcqp-badge-progress {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}
.mcqp-badge-progress:empty { margin-bottom: 0; }

.mcqp-badge-cta {
    width: 100%;
    background: #0f172a;
    color: #fff;
    border: 0;
    padding: 13px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, transform .15s;
}
.mcqp-badge-cta:hover { background: #1e293b; transform: translateY(-1px); }

/* Dark mode */
.mcqp-fe[data-theme="dark"] ~ .mcqp-badge-overlay .mcqp-badge-card,
body[data-mcqp-theme="dark"] .mcqp-badge-card {
    background: #111827;
}
.mcqp-fe[data-theme="dark"] ~ .mcqp-badge-overlay .mcqp-badge-name,
body[data-mcqp-theme="dark"] .mcqp-badge-name { color: #f1f5f9; }
.mcqp-fe[data-theme="dark"] ~ .mcqp-badge-overlay .mcqp-badge-desc,
body[data-mcqp-theme="dark"] .mcqp-badge-desc { color: #cbd5e1; }

/* Confetti bits */
.mcqp-confetti-bit {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    transform-origin: center;
    animation: mcqp-confetti-fall linear forwards;
    pointer-events: none;
}
.mcqp-confetti-bit:nth-child(3n)   { width: 6px;  height: 6px;  border-radius: 50%; }
.mcqp-confetti-bit:nth-child(4n+1) { width: 4px;  height: 18px; }
@keyframes mcqp-confetti-fall {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate3d(var(--drift, 0), 110vh, 0) rotate(var(--rot, 360deg)); opacity: 0; }
}

/* Responsive */
@media (max-width: 480px) {
    .mcqp-badge-card { padding: 28px 22px 22px; border-radius: 20px; }
    .mcqp-badge-medal { width: 86px; height: 86px; }
    .mcqp-badge-medal-icon { font-size: 36px; }
    .mcqp-badge-name { font-size: 20px; }
}

/* Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .mcqp-badge-card,
    .mcqp-badge-medal-wrap.is-pop .mcqp-badge-medal,
    .mcqp-badge-medal::before,
    .mcqp-badge-medal::after { animation: none !important; }
    .mcqp-confetti-bit { display: none !important; }
}

/* ============================================================
   RESPONSIVE BASELINE (v4.10.99) — Global mobile/tablet rules
   ============================================================
   Covers 3 breakpoints:
     - Tablet (≤ 960px): sidebar collapses to drawer, right panel
       moves below content, fewer columns in grids
     - Mobile (≤ 540px): single-column everywhere, hamburger menu,
       stat grids 2-column, reduced padding
     - Small mobile (≤ 380px): tightest — 1-col grids, smallest
       fonts

   The existing sidebar toggle JS already listens to (max-width:860px)
   but the CSS never actually collapses the grid, so the 3-column
   shell spills off-screen. These rules fix that + a raft of other
   overflow issues on every plugin page that uses .mcqp-shell.
   ============================================================ */

/* Prevent any horizontal scroll at body level.
   v4.12.182 — Switched from `overflow-x: hidden` to `overflow-x: clip`.
   `hidden` creates a new scroll container, which breaks
   `position: sticky` for ALL descendants (topbar, sidebar, rightbar
   weren't actually sticking). `clip` prevents the same horizontal
   overflow without creating a new scroll container, so sticky
   children work correctly. Supported in all modern browsers
   (Chrome 90+, Safari 16+, Firefox 81+). */
html, body { max-width: 100vw; overflow-x: clip; }

/* --------------------------------------------
   TABLET (≤ 960px) — collapse to 2 columns;
   right sidebar drops below main content.
   -------------------------------------------- */
@media (max-width: 960px) {
    .mcqp-fe .mcqp-shell {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 18px;
        padding: 14px 18px 20px;
    }
    .mcqp-fe .mcqp-rightbar {
        grid-column: 1 / -1;
        margin-top: 8px;
    }
    .mcqp-fe .mcqp-topbar {
        padding: 10px 18px;
    }
    .mcqp-fe .mcqp-search {
        max-width: 360px;
    }
    /* v4.12.209 — Result-stats: was 3-col by default and got smaller padding
       on this breakpoint. Now 4 stats by default (added Time tile) — drop
       to 2x2 on mobile so tiles stay readable. */
    .mcqp-fe .mcqp-result-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .mcqp-fe .mcqp-result-stats > div { padding: 12px 10px; }
}

/* --------------------------------------------
   MOBILE (≤ 720px) — sidebar becomes a slide-in drawer.
   The existing JS toggles .is-sidebar-open on #mcqp-fe-root;
   we use that state to translate the sidebar into view.
   -------------------------------------------- */
@media (max-width: 720px) {
    /* Show the hamburger toggle button, move it to the very start
       of the topbar (before brand) using flex order — standard
       mobile-app pattern that users expect. */
    .mcqp-fe .mcqp-sidebar-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        order: -2;
        margin-right: 4px;
        flex-shrink: 0;
    }

    /* Topbar becomes tighter; allow children to shrink/wrap. */
    .mcqp-fe .mcqp-topbar {
        padding: 10px 12px;
        gap: 8px;
        height: auto;
        min-height: 56px;
    }
    .mcqp-fe .mcqp-brand-tag { display: none; }
    .mcqp-fe .mcqp-brand-name {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }
    .mcqp-fe .mcqp-brand-logo { width: 32px; height: 32px; }
    .mcqp-fe .mcqp-brand {
        gap: 8px;
        min-width: 0;
        flex-shrink: 1;
        order: -1;
    }

    /* Hide search bar on very small widths — keep the icon
       on topbar so it can still be invoked via the global-search
       modal trigger, but the inline bar wastes space.
       Display:none-ing the flex:1 search means actions need
       margin-left:auto to still hug the right edge. */
    .mcqp-fe .mcqp-search { display: none; }

    /* Topbar actions: never wrap to a second line; make icons
       compact so bell + profile remain visible. Push to the right
       edge via margin-left:auto since the flex:1 search is gone. */
    .mcqp-fe .mcqp-topbar-actions {
        gap: 6px;
        flex-shrink: 0;
        margin-left: auto;
        order: 10;
    }
    /* v4.12.202 — Hide the theme toggle pill on mobile. Theme can still
       be switched from the profile dropdown's Dark/Light row, so we don't
       lose the feature — just declutter the topbar where space is tight. */
    .mcqp-fe .mcqp-topbar-actions #mcqp-theme-btn,
    .mcqp-fe .mcqp-topbar-actions .mcqp-theme-pill {
        display: none !important;
    }
    .mcqp-fe .mcqp-topbar-actions > button,
    .mcqp-fe .mcqp-topbar-actions > .mcqp-profile {
        flex-shrink: 0;
    }
    .mcqp-fe .mcqp-theme-pill,
    .mcqp-fe .mcqp-icon-btn {
        padding: 6px 8px;
    }
    /* Profile dropdown: show avatar only, hide name + chevron */
    .mcqp-fe .mcqp-profile-name,
    .mcqp-fe .mcqp-profile-arrow,
    .mcqp-fe .mcqp-profile svg { display: none; }
    .mcqp-fe .mcqp-profile-toggle,
    .mcqp-fe #mcqp-profile-toggle {
        padding: 4px;
        gap: 0;
    }

    /* Logged-out auth buttons — compact to icon + single short
       label, or just icon on very narrow screens. The buttons
       use inline styles so we need !important to win. */
    .mcqp-fe .mcqp-topbar a[href*="login"],
    .mcqp-fe .mcqp-topbar a[href*="#register"] {
        padding: 8px 12px !important;
        font-size: 12.5px !important;
        gap: 4px !important;
    }
    .mcqp-fe .mcqp-topbar a[href*="login"] svg,
    .mcqp-fe .mcqp-topbar a[href*="#register"] svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Shell becomes single-column; sidebar overlays. */
    .mcqp-fe .mcqp-shell {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px 14px 18px;
        gap: 14px;
    }

    /* Sidebar as a slide-in drawer */
    .mcqp-fe .mcqp-sidebar {
        position: fixed;
        top: 0; left: 0;
        width: min(280px, 82vw);
        height: 100vh;
        background: var(--mcqp-surface);
        padding: 20px 14px 18px;
        margin: 0;
        box-shadow: 8px 0 24px -10px rgba(15,23,42,.25);
        transform: translateX(-105%);
        transition: transform .25s ease;
        z-index: 1000;
        max-height: none;
        overflow-y: auto;
    }
    .mcqp-fe.is-sidebar-open .mcqp-sidebar {
        transform: translateX(0);
    }
    /* Backdrop while drawer is open */
    .mcqp-fe.is-sidebar-open::before {
        content: '';
        position: fixed; inset: 0;
        background: rgba(15,23,42,.5);
        z-index: 999;
    }

    /* Right sidebar: hide entirely on mobile; relevant cards
       (ads, leaderboard etc.) are either non-critical or shown
       elsewhere. Themes that need them can override. */
    .mcqp-fe .mcqp-rightbar { display: none; }

    /* Result-stats on a 3-column row get tight — keep them
       readable without stacking, but shrink label/num. */
    .mcqp-fe .mcqp-result-stats b { font-size: 18px; }
    .mcqp-fe .mcqp-result-stats span { font-size: 10.5px; }

    /* Hero cards / big marketing card should stack, not overlap */
    .mcqp-fe .mcqp-bottom-card {
        padding: 16px;
    }

    /* Test engine question card padding tighten */
    .mcqp-fe .mcqp-q-text { font-size: 15.5px; }
    .mcqp-fe .mcqp-option { padding: 12px 14px; font-size: 14px; }

    /* Bottom action buttons full-width stack */
    .mcqp-fe .mcqp-q-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    /* v4.12.297 — Result-actions on mobile: 2-button-per-row grid with
       proper spacing instead of stuck-together full-width column.
       The last button (Re-attempt — primary) lives on its own row by
       being full-width when its grid cell is the only one in the row
       (handled by :nth-child(odd):last-child via grid-column span). */
    .mcqp-fe .mcqp-result-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .mcqp-fe .mcqp-result-actions .mcqp-btn {
        width: 100%;
        margin: 0; /* override any inherited row margins */
    }
    /* If the total number of buttons is odd, the last one spans both
       columns (looks like a primary action footer). */
    .mcqp-fe .mcqp-result-actions .mcqp-btn:nth-child(odd):last-child {
        grid-column: 1 / -1;
    }

    /* Any stat row with 4+ items — wrap to 2 columns on mobile.
       This is a defensive catch-all for pages we haven't touched
       individually yet (analytics, performance etc.). */
    .mcqp-fe .up-stat-row,
    .mcqp-fe .cbq-stat-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Tables — let them scroll horizontally rather than break
       the page layout. Wrap content in overflow containers is
       ideal but many pages use raw <table>. */
    .mcqp-fe table { display: block; max-width: 100%; overflow-x: auto; }
}

/* --------------------------------------------
   VERY NARROW (≤ 420px) — Sign In/Up icon-only
   -------------------------------------------- */
@media (max-width: 420px) {
    /* Collapse auth button labels to icon-only on narrow phones
       so both buttons still fit next to the hamburger + brand. */
    .mcqp-fe .mcqp-topbar a[href*="login"],
    .mcqp-fe .mcqp-topbar a[href*="#register"] {
        padding: 8px !important;
        font-size: 0 !important;        /* hide text */
        width: 36px;
        height: 36px;
        justify-content: center !important;
    }
    .mcqp-fe .mcqp-topbar a[href*="login"] svg,
    .mcqp-fe .mcqp-topbar a[href*="#register"] svg {
        width: 16px !important;
        height: 16px !important;
    }
    /* v4.12.208 — Brand name kept visible on narrow phones. The previous
       `display: none` from earlier was meant to save room for desktop-style
       auth buttons, but post-v4.12.202 (hamburger restored, theme pill
       removed) there's plenty of space. The mobile rule at line ~1614
       already truncates with ellipsis at max-width 120px so this stays
       safe on very narrow viewports.
       (Was: .mcqp-fe .mcqp-brand-name { display: none; }) */
}

/* --------------------------------------------
   SMALL MOBILE (≤ 380px) — tightest bucket
   -------------------------------------------- */
@media (max-width: 380px) {
    .mcqp-fe .mcqp-shell { padding: 10px 10px 14px; }
    .mcqp-fe .mcqp-topbar { padding: 8px 10px; }
    .mcqp-fe .mcqp-brand-name { font-size: 14px; }
    .mcqp-fe .mcqp-result-stats {
        grid-template-columns: 1fr;
    }
    .mcqp-fe .mcqp-result-stats > div { padding: 10px 12px; }

    /* 2-col stat rows go 1-col on tiny screens */
    .mcqp-fe .up-stat-row,
    .mcqp-fe .cbq-stat-row {
        grid-template-columns: 1fr !important;
    }
}

/* --------------------------------------------
   DASHBOARD-SPECIFIC MOBILE FIXES (≤ 720px)
   -------------------------------------------- */
@media (max-width: 720px) {
    /* Common dashboard patterns: "Resume Your Tests" cards,
       "Master Various Exam Categories" hero, Exam Category
       chip grids. Classes vary across versions so we use
       broad selectors against the known dashboard root. */
    .mcqp-fe .mcqp-hero-card,
    .mcqp-fe .mcqp-master-card,
    .mcqp-fe [class*="hero"] > .mcqp-card {
        padding: 20px 18px !important;
    }
    .mcqp-fe .mcqp-master-card h2,
    .mcqp-fe [class*="hero"] h2 {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    /* Resume Your Tests — 3 cards horizontal grid → 1-col stack */
    .mcqp-fe .mcqp-resume-grid,
    .mcqp-fe [class*="resume"][class*="grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Exam Category chips — let them wrap nicely */
    .mcqp-fe .mcqp-exam-cat-grid,
    .mcqp-fe [class*="exam-cat-grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Streak card / review-queue card — already cards so just
       tighten padding and let them breathe */
    .mcqp-fe .mcqp-card {
        padding: 16px 14px;
    }

    /* Any "Daily Test / Previous Tests / All Tests" tab row —
       allow horizontal scroll if it doesn't fit */
    .mcqp-fe .mcqp-tabs,
    .mcqp-fe [role="tablist"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }
    .mcqp-fe .mcqp-tabs::-webkit-scrollbar,
    .mcqp-fe [role="tablist"]::-webkit-scrollbar { display: none; }

    /* Popular Topics chip grid 2-col */
    .mcqp-fe .mcqp-popular-topics-grid,
    .mcqp-fe [class*="popular-topics"] [class*="grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================================
   UNIFIED AUTH BUTTON (v4.11.2) — single attractive button for
   logged-out users. Replaces the old two-button Sign In / Sign Up
   pair. Clicks lead to the login page which already has both
   Login and Register tabs, so one CTA is enough.
   ============================================================ */
.mcqp-fe .mcqp-auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    box-shadow: 0 4px 12px -4px rgba(79,70,229,.45);
    transition: transform .15s, box-shadow .2s;
    border: 1px solid rgba(255,255,255,.1);
}
.mcqp-fe .mcqp-auth-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(79,70,229,.6);
}
.mcqp-fe .mcqp-auth-btn-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mcqp-fe .mcqp-auth-btn-label {
    white-space: nowrap;
}
@media (max-width: 420px) {
    /* Narrow phones — condense to avatar-only circle */
    .mcqp-fe .mcqp-auth-btn {
        padding: 4px;
        gap: 0;
    }
    .mcqp-fe .mcqp-auth-btn-label { display: none; }
    .mcqp-fe .mcqp-auth-btn-avatar {
        width: 32px; height: 32px;
    }
}

/* ============================================================
   MOBILE BOTTOM NAV (v4.11.4, fixed in v4.11.5) — 5-item tab bar
   ============================================================
   IMPORTANT: The <nav class="mcqp-bottom-nav"> is rendered AFTER
   #mcqp-fe-root closes (inside the shell 'close' partial), so it
   is NOT inside .mcqp-fe. Selectors must target it directly, not
   as a descendant of .mcqp-fe, or nothing matches.
   ============================================================ */
.mcqp-bottom-nav { display: none; }

@media (max-width: 720px) {
    nav.mcqp-bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        position: fixed !important;
        left: 0; right: 0; bottom: 0;
        background: #ffffff;
        border-top: 1px solid #e6ebf5;
        /* v4.12.195 — rounded top corners */
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        z-index: 900;
        box-shadow: 0 -4px 16px -8px rgba(15,23,42,.12);
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        transform: translateY(0);
        transition: transform .25s ease;
        overflow: hidden;
    }
    /* Dark theme — key off the <html> data-mcqp-theme attribute
       since the nav sits outside #mcqp-fe-root's data-theme. */
    html[data-mcqp-theme="dark"] nav.mcqp-bottom-nav {
        background: #0f172a;
        border-top-color: rgba(148,163,184,.14);
    }
    /* Auto-hide: JS toggles .is-hidden on scroll-down, removes
       on scroll-up. Purely CSS-driven transform so it's smooth. */
    nav.mcqp-bottom-nav.is-hidden {
        transform: translateY(100%);
    }

    nav.mcqp-bottom-nav .mcqp-bn-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 6px 4px !important;
        text-decoration: none !important;
        color: #64748b;
        font-size: 10.5px;
        font-weight: 500;
        border-radius: 8px;
        transition: color .15s;
        -webkit-tap-highlight-color: transparent;
        min-height: 48px;
        background: transparent;
        border: 0;
    }
    nav.mcqp-bottom-nav .mcqp-bn-item svg {
        flex-shrink: 0;
        width: 22px; height: 22px;
        stroke: currentColor;
        transition: stroke .15s;
    }
    nav.mcqp-bottom-nav .mcqp-bn-item span {
        line-height: 1.1;
        white-space: nowrap;
        text-decoration: none;
    }
    nav.mcqp-bottom-nav .mcqp-bn-item:hover,
    nav.mcqp-bottom-nav .mcqp-bn-item:active {
        color: #0f172a;
    }
    html[data-mcqp-theme="dark"] nav.mcqp-bottom-nav .mcqp-bn-item {
        color: #94a3b8;
    }
    html[data-mcqp-theme="dark"] nav.mcqp-bottom-nav .mcqp-bn-item:hover {
        color: #e2e8f0;
    }
    nav.mcqp-bottom-nav .mcqp-bn-item.is-active {
        color: #2563eb !important;
        font-weight: 600;
    }
    nav.mcqp-bottom-nav .mcqp-bn-item.is-active svg {
        stroke: #2563eb !important;
    }
    html[data-mcqp-theme="dark"] nav.mcqp-bottom-nav .mcqp-bn-item.is-active {
        color: #60a5fa !important;
    }
    html[data-mcqp-theme="dark"] nav.mcqp-bottom-nav .mcqp-bn-item.is-active svg {
        stroke: #60a5fa !important;
    }

    /* v4.12.201 — Duolingo-style tap jiggle. JS adds .is-jiggling on
       pointerdown; CSS keyframe punches the icon down + back with a
       tiny rotation pulse. Pairs with navigator.vibrate(10) on Android.
       Auto-removes via animationend listener in JS. */
    nav.mcqp-bottom-nav .mcqp-bn-item.is-jiggling svg {
        animation: mcqp-bn-jiggle .35s cubic-bezier(.36, 0, .24, 1.55);
    }
    @keyframes mcqp-bn-jiggle {
        0%   { transform: scale(1) rotate(0deg); }
        25%  { transform: scale(.85) rotate(-4deg); }
        50%  { transform: scale(1.08) rotate(3deg); }
        75%  { transform: scale(.96) rotate(-1deg); }
        100% { transform: scale(1) rotate(0deg); }
    }
    @media (prefers-reduced-motion: reduce) {
        nav.mcqp-bottom-nav .mcqp-bn-item.is-jiggling svg { animation: none; }
    }

    /* v4.12.197 — Pro Test item — golden "PRO" pill inline with the label.
       Matches the pt-card-source treatment used on Pro Test course cards
       (gradient + shimmer + sheen sweep) but compact-sized for the bottom
       nav's tight footprint. */
    nav.mcqp-bottom-nav .mcqp-bn-pro .mcqp-bn-pro-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        line-height: 1;
        /* Force the label to grow evenly around its center even when wider
           than the column's content box. Without this, the inline-flex sits
           inside the padding and looks left-shifted vs the icon above. */
        width: max-content;
        margin-left: auto;
        margin-right: auto;
    }
    /* Pro Test column gets minimal horizontal padding so its wider
       label has room to breathe and stays optically centered with the icon. */
    nav.mcqp-bottom-nav .mcqp-bn-pro {
        padding: 6px 0 !important;
    }
    nav.mcqp-bottom-nav .mcqp-bn-pro .mcqp-bn-pro-pill {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 2px 5px 2px;
        border-radius: 999px;
        background: linear-gradient(135deg, #fbbf24, #f59e0b 50%, #d97706);
        background-size: 200% 200%;
        color: #1f1205 !important;
        font-weight: 800;
        font-size: 8.5px;
        letter-spacing: 0.04em;
        line-height: 1;
        border: 0.5px solid rgba(255, 255, 255, 0.5);
        box-shadow:
            0 1px 3px rgba(245, 158, 11, .45),
            inset 0 0.5px 0 rgba(255, 255, 255, .55);
        overflow: hidden;
        animation: mcqp-bn-pro-shimmer 3s ease-in-out infinite;
        /* v4.12.200 — nudge the pill down 1px to optically center it with
           "Test" text (the smaller font + asymmetric padding made it sit high) */
        transform: translateY(1px);
    }
    /* Diagonal sheen sweep across the pill */
    nav.mcqp-bottom-nav .mcqp-bn-pro .mcqp-bn-pro-pill::after {
        content: '';
        position: absolute;
        top: 0; left: -60%;
        width: 50%; height: 100%;
        background: linear-gradient(
            120deg,
            transparent 30%,
            rgba(255, 255, 255, 0.55) 50%,
            transparent 70%
        );
        animation: mcqp-bn-pro-sheen 3s ease-in-out infinite;
    }
    @keyframes mcqp-bn-pro-shimmer {
        0%, 100% { background-position: 0% 50%; }
        50%      { background-position: 100% 50%; }
    }
    @keyframes mcqp-bn-pro-sheen {
        0%   { left: -60%; }
        45%  { left: 130%; }
        100% { left: 130%; }
    }
    /* When Pro Test is the active tab, neutralise the parent's blue color
       on the PRO pill text so the gold reads correctly. */
    nav.mcqp-bottom-nav .mcqp-bn-pro.is-active .mcqp-bn-pro-pill {
        color: #1f1205 !important;
    }
    /* Dark mode: pill stays gold (the gradient already reads in both). */

    /* Push page content up so the fixed nav never covers real content. */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

    /* HIDE ON TEST ENGINE — when the engine is active we don't want
       the bottom nav competing with the question/submit UI. The test
       engine adds .cbq-exam-engine-body to <body>, or we can match
       on the presence of .mcqp-exam-screen / cbq-questions page. */
    body.cbq-exam-engine-body nav.mcqp-bottom-nav,
    body.cbq-in-test nav.mcqp-bottom-nav,
    body.cbq-pretest-gate nav.mcqp-bottom-nav,
    .mcqp-exam-screen ~ nav.mcqp-bottom-nav {
        display: none !important;
    }
    body.cbq-exam-engine-body,
    body.cbq-in-test,
    body.cbq-pretest-gate {
        padding-bottom: 0;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   v4.12.139 — PYQ TESTS ONLY: purple primary, scoped to test engine.
   ─────────────────────────────────────────────────────────────────────
   v4.12.141 — Tightened scope. Earlier version applied the override at
   the #mcqp-fe-root level, which leaked onto shell elements (sidebar
   logo, sidebar nav active state, Upgrade Now button) since they all
   share the .mcqp-fe wrapper. Now every override is scoped to the
   engine area only — that's .mcqp-main (question card + buttons) +
   .mcqp-rightbar (Question Navigator + Test Overview). Topbar and
   left sidebar are completely outside the scope, so logo, sidebar
   nav active state, Upgrade Now button stay blue.
   ───────────────────────────────────────────────────────────────────── */

/* Engine "Did you know?" info box — light purple instead of light blue */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-info-box {
    background: rgba(237, 233, 254, 0.55);
    border-color: rgba(196, 181, 253, 0.4);
    box-shadow:
        0 6px 16px -8px rgba(124, 58, 237, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-info-box-icon {
    color: #7c3aed;
}
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-info-box-body h3,
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-info-box-body h4 {
    color: #7c3aed;
}

/* Engine primary buttons — purple shadow + darker purple hover.
   Save & Next button has its own green styling further up the file
   (.mcqp-nav-btns .mcqp-btn-primary) and is intentionally untouched. */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-btn-primary:not(.mcqp-nav-btns *) {
    background: #7c3aed;
    box-shadow: 0 6px 14px -4px rgba(124,58,237,.4);
}
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-btn-primary:not(.mcqp-nav-btns *):hover:not(:disabled) {
    background: #6d28d9;
    box-shadow: 0 10px 18px -4px rgba(124,58,237,.5);
}

/* Engine + right-rail panel icons (Question Navigator / Test Overview headers) */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-panel-icon,
.mcqp-fe[data-test-type="pyq_test"] .mcqp-rightbar .mcqp-panel-icon {
    background: rgba(124,58,237,.15);
    color: #7c3aed;
}

/* Engine progress-bar FILL only (not the whole bar container — that
   would paint sibling div children like meta/pct/timer with the
   gradient too, which was the v4.12.141 bug). */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-progress-fill {
    background: linear-gradient(90deg, #7c3aed, #8b5cf6);
}
/* Engine timer color (matches purple primary) */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-timer-wrap {
    color: #7c3aed;
}
/* Question category badge (the small "KAS 2023" / source pill).
   v4.12.150 — User wants this red instead of purple, distinct from the
   primary engine accent. Same soft-tinted-pill format. */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-cat-badge {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fee2e2;
}
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-main .mcqp-cat-badge {
    background: rgba(220, 38, 38, 0.15);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.3);
}
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-breadcrumb a:hover {
    color: #7c3aed;
}
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-q-info-paper {
    background: #f5f3ff;
    border-color: #ede9fe;
    color: #7c3aed;
}
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-q-info-paper:hover {
    background: #ede9fe;
    border-color: #7c3aed;
}
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-pause-btn {
    background: #f5f3ff;
    color: #7c3aed;
}
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-pause-btn:hover {
    background: #ede9fe;
}


/* Question Navigator — current cell needs purple background + border + ring.
   v4.12.144 — Earlier version only set background; the border + shadow
   ring still inherited blue from var(--mcqp-primary). Now all three are
   purple. Also covers .is-answered.is-current (answered + currently
   active) — keeps the green answered fill but recolors its current
   border + ring purple. */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-rightbar .mcqp-qnav-cell.is-current {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}
.mcqp-fe[data-test-type="pyq_test"] .mcqp-rightbar .mcqp-qnav-cell.is-answered.is-current {
    /* Keep green fill (answered) but recolor the active border + ring */
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}
.mcqp-fe[data-test-type="pyq_test"] .mcqp-rightbar .dot-primary {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}


/* ═════════════════════════════════════════════════════════════════════
   v4.12.140 — PYQ TESTS ONLY: A/B/C/D circle letter badges.
   ─────────────────────────────────────────────────────────────────────
   Other test types keep the standard small radio-dot circle. PYQ Tests
   gets a 30×30 letter badge that fills purple + white letter when
   selected. The letter is injected via CSS counters so the existing
   .mcqp-option-radio element doesn't need any markup changes — and
   matching JS in frontend-scripts.js drops the "A. " text prefix only
   when test_type === 'pyq_test' so we don't double up the letter.
   ───────────────────────────────────────────────────────────────────── */

/* Set up a counter for the option list */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-options {
    counter-reset: pyqt-opt;
}

/* Each option row increments the counter and uses it for the letter */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-option {
    counter-increment: pyqt-opt;
}

/* Replace the small radio-dot circle with a 30×30 letter badge */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-option-radio {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--mcqp-border);
    background: var(--mcqp-surface-2);
    color: var(--mcqp-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    transition: all .2s ease;
}
/* v4.12.165 — Letter sat slightly above geometric center because the
   ::before pseudo-element inherited the parent's default line-height
   (which adds vertical padding above and below the glyph baseline).
   Force line-height: 1 so the glyph occupies exactly its em box,
   centered by the parent's flex align-items: center. */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-option-radio::before {
    line-height: 1;
    display: block;
}

/* Inject A/B/C/D as the badge content */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-option:nth-child(1) .mcqp-option-radio::before { content: "A"; }
.mcqp-fe[data-test-type="pyq_test"] .mcqp-option:nth-child(2) .mcqp-option-radio::before { content: "B"; }
.mcqp-fe[data-test-type="pyq_test"] .mcqp-option:nth-child(3) .mcqp-option-radio::before { content: "C"; }
.mcqp-fe[data-test-type="pyq_test"] .mcqp-option:nth-child(4) .mcqp-option-radio::before { content: "D"; }
.mcqp-fe[data-test-type="pyq_test"] .mcqp-option:nth-child(5) .mcqp-option-radio::before { content: "E"; }
.mcqp-fe[data-test-type="pyq_test"] .mcqp-option:nth-child(6) .mcqp-option-radio::before { content: "F"; }

/* Selected state — fill purple gradient + white letter + soft glow.
   This OVERRIDES the global .is-selected .mcqp-option-radio rules
   (which use ::after for a small dot). We zero out that ::after for
   PYQ since the badge already shows the letter; otherwise the dot
   would render on top. */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-option.is-selected .mcqp-option-radio {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.4);
}
.mcqp-fe[data-test-type="pyq_test"] .mcqp-option.is-selected .mcqp-option-radio::after {
    content: none;
}

/* Soft glow ring around the entire selected option row, matching the
   v4.12.132 / .133 PYQ aesthetic. */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-option.is-selected {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

/* Dark mode: brighten the badge background + text for contrast */
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-option-radio {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--mcqp-border);
    color: var(--mcqp-text-muted);
}
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-option.is-selected {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

/* ═════════════════════════════════════════════════════════════════════
   v4.12.142 — PYQ TESTS ONLY: fix two missed engine-area elements that
   stayed blue after v4.12.141 because they read var(--mcqp-primary)
   without explicit override rules.
   ─────────────────────────────────────────────────────────────────────
   1. Selected option border + soft background + 1px shadow
   2. "PYQ Test" tag pill next to the test title
   Both live inside .mcqp-main, so scope to that.
   ───────────────────────────────────────────────────────────────────── */

/* Selected option row — purple border + light purple bg + thin glow.
   v4.12.144 — Border + glow combined was reading too thick (~5.5px
   total ring zone). Thinned the soft glow from 4px to 2px so the
   border looks like a single crisp purple line, not a stack of rings.
   The 1.5px native border + 2px glow = ~3.5px total which is the
   sweet spot for visual emphasis without looking heavy. */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-option.is-selected {
    border-color: #7c3aed;
    background: #f5f3ff;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-main .mcqp-option.is-selected {
    border-color: #a78bfa;
    background: rgba(124, 58, 237, 0.18);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.22);
}

/* Test header tag pill ("PYQ Test") — purple tint */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-tag {
    background: #f5f3ff;
    color: #7c3aed;
}
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-main .mcqp-tag {
    background: rgba(124, 58, 237, 0.18);
    color: #c4b5fd;
}

/* ═════════════════════════════════════════════════════════════════════
   v4.12.144 — PYQ TESTS ONLY: focus-state overrides.
   ─────────────────────────────────────────────────────────────────────
   Browser's default focus outline is blue (UA default). When a user
   clicks an option row or a Question Navigator cell, the focus
   outline can flash blue, especially noticeable on keyboard nav.
   Replace it with a purple outline scoped to PYQ Tests engine area.
   ───────────────────────────────────────────────────────────────────── */

/* Option rows */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-option:focus,
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-option:focus-visible {
    outline: 2px solid rgba(124, 58, 237, 0.45);
    outline-offset: 1px;
}

/* Question Navigator cells */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-rightbar .mcqp-qnav-cell:focus,
.mcqp-fe[data-test-type="pyq_test"] .mcqp-rightbar .mcqp-qnav-cell:focus-visible {
    outline: 2px solid rgba(124, 58, 237, 0.45);
    outline-offset: 2px;
}

/* Engine action buttons (Pause / Question paper / Instructions / Report error / Bookmark / Flag) */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main button:focus-visible,
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main a:focus-visible {
    outline: 2px solid rgba(124, 58, 237, 0.45);
    outline-offset: 2px;
}

/* v4.12.146 — Option row hover state was reading var(--mcqp-primary)
   which resolves to blue everywhere except where a token override is
   active. Since v4.12.141 deliberately dropped the root-level token
   override (to keep the shell blue), the hover tint stayed blue on
   PYQ pages. Override here, scoped to .mcqp-main only. */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-option:hover {
    border-color: #7c3aed;
    background: #f5f3ff;
}
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-main .mcqp-option:hover {
    border-color: #a78bfa;
    background: rgba(124, 58, 237, 0.12);
}

/* v4.12.147 — "Did you know?" info box font size was 18px (English) /
   14px (Kannada) per v4.9.6 spec. User feedback: too large on PYQ.
   Scale down to 14px / 13px scoped to PYQ engine only.
   v4.12.148 — Bumped Kannada 13px → 14px to match English.
   v4.12.163 — User feedback: bump to 15px for readability. */
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-info-box-body {
    font-size: 15px;
}
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-info-box-body .cbq-kn,
.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-info-box-body :lang(kn) {
    font-size: 15px;
}

/* ═════════════════════════════════════════════════════════════════════
   v4.12.151 — PYQ TESTS ONLY: legacy intro card design.
   ─────────────────────────────────────────────────────────────────────
   Replaces the unified CBQ_Pretest_Gate's long instructions card with
   the legacy bespoke PYQ intro: badges + title + 4-stat grid + Begin
   Test. Markup is wrapped in #cbq-pretest-gate so the existing
   cbq-pretest-gate.js controller (pause engine → click → fade →
   resume) wires up unchanged. CSS scoped to .cbq-pretest-gate--pyq so
   other test types' pretest gates are unaffected.

   The .cbq-pretest-gate overlay (fixed + backdrop blur + centered) is
   inherited from assets/css/cbq-pretest-gate.css unchanged. We override
   the card sizing + contents below.
   ───────────────────────────────────────────────────────────────────── */

/* Tighten the card to legacy proportions */
.cbq-pretest-gate--pyq .cbq-pretest-card--pyq {
    max-width: 720px;
    padding: 0;
    background: var(--mcqp-surface, #ffffff);
}

.cbq-pretest-gate--pyq .pyqt-take {
    background: transparent;
    border: 0;
    border-radius: 16px;
    padding: 36px 28px 32px;
    box-shadow: none;
}
.cbq-pretest-gate--pyq .pyqt-take--intro {
    text-align: center;
}

/* Badges row (Mode / Exam / Topic) */
.cbq-pretest-gate--pyq .pyqt-take-badges {
    display: inline-flex;
    gap: 6px;
    margin-bottom: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.cbq-pretest-gate--pyq .pyqt-badge-mode,
.cbq-pretest-gate--pyq .pyqt-badge-exam,
.cbq-pretest-gate--pyq .pyqt-badge-topic {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cbq-pretest-gate--pyq .pyqt-badge-mode  { background: #ede9fe; color: #6b21a8; }
.cbq-pretest-gate--pyq .pyqt-badge-mode-b{ background: #dbeafe; color: #1e40af; }
.cbq-pretest-gate--pyq .pyqt-badge-exam  { background: #fef3c7; color: #92400e; }
.cbq-pretest-gate--pyq .pyqt-badge-topic { background: #d1fae5; color: #065f46; }

html[data-mcqp-theme="dark"] .cbq-pretest-gate--pyq .pyqt-badge-mode  { background: rgba(139,92,246,.18); color: #ddd6fe; }
html[data-mcqp-theme="dark"] .cbq-pretest-gate--pyq .pyqt-badge-mode-b{ background: rgba(59,130,246,.18); color: #bfdbfe; }
html[data-mcqp-theme="dark"] .cbq-pretest-gate--pyq .pyqt-badge-exam  { background: rgba(217,119,6,.18);  color: #fde68a; }
html[data-mcqp-theme="dark"] .cbq-pretest-gate--pyq .pyqt-badge-topic { background: rgba(5,150,105,.18);  color: #a7f3d0; }

/* Title + description */
.cbq-pretest-gate--pyq .pyqt-take--intro h1 {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--mcqp-text, #0f172a);
    line-height: 1.25;
}
.cbq-pretest-gate--pyq .pyqt-take-desc {
    font-size: 14px;
    color: var(--mcqp-text-muted, #64748b);
    max-width: 560px;
    margin: 0 auto 18px;
    line-height: 1.6;
}

/* 4-stat grid */
.cbq-pretest-gate--pyq .pyqt-take-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 640px;
    margin: 0 auto 20px;
}
@media (max-width: 640px) {
    .cbq-pretest-gate--pyq .pyqt-take-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.cbq-pretest-gate--pyq .pyqt-take-stat {
    padding: 16px 12px;
    background: var(--mcqp-surface-2, #f6f8fc);
    border-radius: 12px;
    text-align: center;
}
.cbq-pretest-gate--pyq .pyqt-take-stat .v {
    font-size: 22px;
    font-weight: 800;
    color: #7c3aed;
    line-height: 1;
}
.cbq-pretest-gate--pyq .pyqt-take-stat .l {
    font-size: 10px;
    font-weight: 700;
    color: var(--mcqp-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 6px;
}

/* Login warning */
.cbq-pretest-gate--pyq .pyqt-take-login-warn {
    max-width: 560px;
    margin: 0 auto 18px;
    padding: 12px 16px;
    background: #fef2f2;
    border-radius: 10px;
    color: #991b1b;
    font-size: 13px;
    line-height: 1.5;
}
.cbq-pretest-gate--pyq .pyqt-take-login-warn a {
    color: #991b1b;
    font-weight: 700;
    text-decoration: underline;
}
html[data-mcqp-theme="dark"] .cbq-pretest-gate--pyq .pyqt-take-login-warn {
    background: rgba(239,68,68,.1);
    color: #fca5a5;
}
html[data-mcqp-theme="dark"] .cbq-pretest-gate--pyq .pyqt-take-login-warn a {
    color: #fca5a5;
}

/* Begin Test button — purple gradient (matches the overall PYQ palette) */
.cbq-pretest-gate--pyq .pyqt-take-start {
    padding: 14px 36px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    box-shadow: 0 6px 16px -6px rgba(124,58,237,.5);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cbq-pretest-gate--pyq .pyqt-take-start:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(124,58,237,.55);
}
.cbq-pretest-gate--pyq .pyqt-take-start:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ═════════════════════════════════════════════════════════════════════
   v4.12.152 — PYQ TESTS intro ad slot.
   ─────────────────────────────────────────────────────────────────────
   Renders below the Begin Test button. Shape is a tasteful card so
   AdSense's responsive ad fits well, with a small "Sponsored" label
   above the content (transparency / a11y best practice).
   ───────────────────────────────────────────────────────────────────── */
.cbq-pretest-gate--pyq .pyqt-intro-ad-slot {
    margin: 22px auto 0;
    max-width: 560px;
    padding: 14px 16px 16px;
    background: var(--mcqp-surface-2, #f6f8fc);
    border: 1px solid var(--mcqp-border-2, #eef1f8);
    border-radius: 12px;
    text-align: center;
}
.cbq-pretest-gate--pyq .pyqt-intro-ad-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--mcqp-text-soft, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 8px;
}
.cbq-pretest-gate--pyq .pyqt-intro-ad-content {
    /* AdSense's responsive <ins> element manages its own sizing — we
       just provide a sane container. min-height keeps the slot from
       collapsing while AdSense lazy-loads. */
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cbq-pretest-gate--pyq .pyqt-intro-ad-content > * {
    max-width: 100%;
}

/* Sample placeholder shown when toggle is on but no HTML pasted */
.cbq-pretest-gate--pyq .pyqt-intro-ad-sample {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
    border: 1px dashed #c4b5fd;
    border-radius: 10px;
    text-align: left;
}
.cbq-pretest-gate--pyq .pyqt-intro-ad-sample-icon {
    font-size: 28px;
    flex-shrink: 0;
}
.cbq-pretest-gate--pyq .pyqt-intro-ad-sample-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #6b21a8;
    margin-bottom: 2px;
}
.cbq-pretest-gate--pyq .pyqt-intro-ad-sample-desc {
    font-size: 11.5px;
    color: var(--mcqp-text-muted, #64748b);
    line-height: 1.5;
}
.cbq-pretest-gate--pyq .pyqt-intro-ad-sample-desc em {
    color: #7c3aed;
    font-weight: 700;
    font-style: normal;
}

/* Dark mode */
html[data-mcqp-theme="dark"] .cbq-pretest-gate--pyq .pyqt-intro-ad-slot {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.08);
}
html[data-mcqp-theme="dark"] .cbq-pretest-gate--pyq .pyqt-intro-ad-sample {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(167, 139, 250, 0.4);
}
html[data-mcqp-theme="dark"] .cbq-pretest-gate--pyq .pyqt-intro-ad-sample-title { color: #ddd6fe; }
html[data-mcqp-theme="dark"] .cbq-pretest-gate--pyq .pyqt-intro-ad-sample-desc em { color: #c4b5fd; }

/* ═════════════════════════════════════════════════════════════════════
   v4.12.153 — Desktop modal (cbq-dmodal) styles.
   ─────────────────────────────────────────────────────────────────────
   The unified engine's frontend-scripts.js builds an inline modal
   (cbqOpenModal) for the Question Paper, Instructions, and Report
   Error chips on desktop. The matching CSS was missing from this
   stylesheet entirely — the modal opened but rendered unstyled (broken
   layout, no backdrop, no card). Adding the styles here fixes the
   modal across ALL test types, not just PYQ.
   ───────────────────────────────────────────────────────────────────── */
.cbq-dmodal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    font-family: 'Inter', 'Baloo Tamma 2', system-ui, -apple-system, sans-serif;
}
.cbq-dmodal[hidden] { display: none; }
.cbq-dmodal.is-open {
    opacity: 1;
    pointer-events: auto;
}
.cbq-dmodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.cbq-dmodal-card {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 48px);
    background: var(--mcqp-surface, #ffffff);
    border-radius: 16px;
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .5), 0 10px 30px -8px rgba(15, 23, 42, .2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(8px) scale(.98);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.cbq-dmodal.is-open .cbq-dmodal-card {
    transform: translateY(0) scale(1);
}
.cbq-dmodal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--mcqp-border, #e6ebf5);
    flex-shrink: 0;
}
.cbq-dmodal-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--mcqp-text, #0f172a);
    letter-spacing: -0.01em;
}
.cbq-dmodal-close {
    background: transparent;
    border: 0;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 24px;
    line-height: 1;
    color: var(--mcqp-text-muted, #64748b);
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, color .15s ease;
}
.cbq-dmodal-close:hover {
    background: var(--mcqp-surface-2, #f6f8fc);
    color: var(--mcqp-text, #0f172a);
}
.cbq-dmodal-body {
    padding: 20px 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    color: var(--mcqp-text, #0f172a);
    font-size: 14px;
    line-height: 1.6;
}
.cbq-dmodal-foot {
    padding: 14px 22px 18px;
    border-top: 1px solid var(--mcqp-border, #e6ebf5);
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.cbq-dmodal-foot:empty {
    display: none;
}

/* Buttons inside the modal footer */
.cbq-dmodal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.cbq-dmodal-btn-primary {
    background: var(--mcqp-primary, #2563eb);
    color: #fff;
}
.cbq-dmodal-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(37, 99, 235, .5);
}
.cbq-dmodal-btn-secondary {
    background: var(--mcqp-surface, #fff);
    border-color: var(--mcqp-border, #e6ebf5);
    color: var(--mcqp-text, #0f172a);
}
.cbq-dmodal-btn-secondary:hover {
    background: var(--mcqp-surface-2, #f6f8fc);
    border-color: var(--mcqp-text-soft, #94a3b8);
}
.cbq-dmodal-btn-danger {
    background: #dc2626;
    color: #fff;
}
.cbq-dmodal-btn-danger:hover {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(220, 38, 38, .55);
}

/* Question Paper modal — list of all questions */
.cbq-dmodal-q {
    padding: 14px 0;
    border-bottom: 1px solid var(--mcqp-border-2, #eef1f8);
}
.cbq-dmodal-q:first-child { padding-top: 0; }
.cbq-dmodal-q:last-child  { border-bottom: 0; padding-bottom: 0; }
.cbq-dmodal-q h4 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mcqp-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cbq-dmodal-q-en {
    font-size: 14.5px;
    color: var(--mcqp-text, #0f172a);
    line-height: 1.55;
}
.cbq-dmodal-q-kn {
    margin-top: 4px;
    font-size: 13.5px;
    color: var(--mcqp-text-muted, #64748b);
    line-height: 1.6;
}

/* Instructions modal — ordered list */
.cbq-dmodal-list {
    margin: 0;
    padding-left: 22px;
    color: var(--mcqp-text, #0f172a);
}
.cbq-dmodal-list li {
    margin: 8px 0;
    line-height: 1.6;
    font-size: 14px;
}

/* Report Error modal — radio group + textarea */
.cbq-dmodal-radios {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.cbq-dmodal-radios label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mcqp-border, #e6ebf5);
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--mcqp-text, #0f172a);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.cbq-dmodal-radios label:hover {
    border-color: var(--mcqp-text-soft, #94a3b8);
    background: var(--mcqp-surface-2, #f6f8fc);
}
.cbq-dmodal-radios input[type="radio"] {
    flex-shrink: 0;
    accent-color: var(--mcqp-primary, #2563eb);
    cursor: pointer;
}
.cbq-dmodal-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--mcqp-border, #e6ebf5);
    border-radius: 9px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--mcqp-text, #0f172a);
    background: var(--mcqp-surface, #fff);
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}
.cbq-dmodal-textarea:focus {
    outline: none;
    border-color: var(--mcqp-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* Dark mode */
.mcqp-fe[data-theme="dark"] .cbq-dmodal-backdrop,
html[data-mcqp-theme="dark"] .cbq-dmodal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}
.mcqp-fe[data-theme="dark"] .cbq-dmodal-card,
html[data-mcqp-theme="dark"] .cbq-dmodal-card {
    background: #121a32;
    color: #e6ebf6;
}
.mcqp-fe[data-theme="dark"] .cbq-dmodal-head,
.mcqp-fe[data-theme="dark"] .cbq-dmodal-foot,
html[data-mcqp-theme="dark"] .cbq-dmodal-head,
html[data-mcqp-theme="dark"] .cbq-dmodal-foot {
    border-color: #233056;
}

/* Mobile */
@media (max-width: 640px) {
    .cbq-dmodal { padding: 12px; align-items: flex-end; }
    .cbq-dmodal-card { max-height: calc(100vh - 24px); border-radius: 14px 14px 0 0; }
}

/* PYQ Tests — purple tint on the modal primary button + radio focus,
   so the modal feels native to the rest of the engine. Modal renders
   attached to <body> (outside #mcqp-fe-root), so we scope via the
   body.cbq-pyq-test-active class set by frontend-scripts.js when
   cfg.test_type === 'pyq_test'. Other test types keep blue. */
body.cbq-pyq-test-active .cbq-dmodal .cbq-dmodal-btn-primary {
    background: #7c3aed;
}
body.cbq-pyq-test-active .cbq-dmodal .cbq-dmodal-btn-primary:hover {
    background: #6d28d9;
    box-shadow: 0 8px 20px -8px rgba(124, 58, 237, .55);
}
body.cbq-pyq-test-active .cbq-dmodal-radios input[type="radio"] {
    accent-color: #7c3aed;
}
body.cbq-pyq-test-active .cbq-dmodal-textarea:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

/* ═════════════════════════════════════════════════════════════════════
   v4.12.154 — Sticky footer button row.
   ─────────────────────────────────────────────────────────────────────
   v4.12.162 — Combine BOTH approaches:
     - flex margin-top: auto pushes the bar to the card's bottom on
       short questions (card already stretches to viewport via JS)
     - position: sticky bottom: 0 keeps the bar pinned to the
       VIEWPORT bottom while the user scrolls a long question

   On short questions: card is exactly viewport-tall; no scroll
   needed; flex pushes bar to card-bottom which equals viewport-bottom.
   On long questions: page scrolls; sticky keeps bar at viewport-
   bottom even as the rest of the card content scrolls past it.

   Applies to all test types — pure UX polish.
   ───────────────────────────────────────────────────────────────────── */

.mcqp-fe .mcqp-q-card {
    display: flex;
    flex-direction: column;
}
.mcqp-fe #mcqp-q-card-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.mcqp-fe .mcqp-nav-btns {
    /* margin-top: auto handles short questions: card is viewport-tall,
       inner stretches, bar gets pushed to bottom of inner = viewport
       bottom. */
    margin-top: auto;
    /* position: sticky handles long questions: while page scrolls,
       bar stays pinned at viewport bottom even though it's nominally
       at the bottom of the card. */
    position: sticky;
    bottom: 0;
    z-index: 20;
    /* Negative margins extend the row to the .mcqp-q-card edges
       (cancels the card's 26×28 padding); inner padding restored
       below so buttons keep their breathing room. */
    margin-left: -28px;
    margin-right: -28px;
    margin-bottom: -26px;
    padding: 14px 28px;
    background: var(--mcqp-surface, #ffffff);
    border-top: 1px solid var(--mcqp-border-2, #eef1f8);
    border-bottom-left-radius: var(--mcqp-radius-lg, 16px);
    border-bottom-right-radius: var(--mcqp-radius-lg, 16px);
}

/* Dark mode */
.mcqp-fe[data-theme="dark"] .mcqp-nav-btns {
    background: var(--mcqp-surface, #121a32);
    border-top-color: var(--mcqp-border, #233056);
}

/* Mobile — tighter padding + safe-area inset for notch / home-bar */
@media (max-width: 720px) {
    .mcqp-fe .mcqp-nav-btns {
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: -20px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* ═════════════════════════════════════════════════════════════════════
   v4.12.170 — Dark mode visibility fixes.
   ─────────────────────────────────────────────────────────────────────
   Several elements had light-mode-tuned colors with no dark overrides:
     1. .mcqp-cat-badge (PYQ "KAS 2023" red pill) — red text barely
        readable on dark
     2. .mcqp-q-info-paper / -instr / -report (the three chips) — all
        had pastel light backgrounds that washed out on dark, with
        text colors that lost contrast
     3. .mcqp-info-box-body — color: #0f172a (near-black) was invisible
        on dark surface
   Each gets a translucent tinted background + brighter accent text
   when on dark theme.
   ───────────────────────────────────────────────────────────────────── */

/* "Did you know?" body text — light text on dark surface */
.mcqp-fe[data-theme="dark"] .mcqp-info-box-body {
    color: #e6ebf6;
}

/* Question paper chip — translucent blue + brighter blue text */
.mcqp-fe[data-theme="dark"] .mcqp-q-info-paper {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}
.mcqp-fe[data-theme="dark"] .mcqp-q-info-paper:hover {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(59, 130, 246, 0.55);
    color: #bfdbfe;
}

/* Instructions chip — translucent amber + brighter amber text */
.mcqp-fe[data-theme="dark"] .mcqp-q-info-instr {
    background: rgba(248, 150, 2, 0.15);
    border-color: rgba(248, 150, 2, 0.35);
    color: #fbbf24;
}
.mcqp-fe[data-theme="dark"] .mcqp-q-info-instr:hover {
    background: rgba(248, 150, 2, 0.22);
    border-color: rgba(248, 150, 2, 0.55);
    color: #fcd34d;
}

/* Report error chip — translucent red + brighter red text */
.mcqp-fe[data-theme="dark"] .mcqp-q-info-report {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.35);
    color: #fca5a5;
}
.mcqp-fe[data-theme="dark"] .mcqp-q-info-report:hover {
    background: rgba(220, 38, 38, 0.22);
    border-color: rgba(220, 38, 38, 0.55);
    color: #fecaca;
}

/* PYQ-specific overrides for these chips — when in PYQ test (purple
   theme) on dark mode, the Question paper chip should pick up the
   purple accent instead of blue. The other two stay as their semantic
   colors (orange for instructions, red for errors).
   Specificity matches the existing PYQ light-mode overrides
   (.mcqp-fe[data-test-type="pyq_test"] .mcqp-main .mcqp-q-info-paper)
   plus [data-theme="dark"] so the dark variant wins. */
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-main .mcqp-q-info-paper {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.35);
    color: #c4b5fd;
}
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-main .mcqp-q-info-paper:hover {
    background: rgba(124, 58, 237, 0.22);
    border-color: rgba(124, 58, 237, 0.55);
    color: #ddd6fe;
}
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-main .mcqp-q-info-instr {
    background: rgba(248, 150, 2, 0.15);
    border-color: rgba(248, 150, 2, 0.35);
    color: #fbbf24;
}
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-main .mcqp-q-info-instr:hover {
    background: rgba(248, 150, 2, 0.22);
    border-color: rgba(248, 150, 2, 0.55);
    color: #fcd34d;
}
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-main .mcqp-q-info-report {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.35);
    color: #fca5a5;
}
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-main .mcqp-q-info-report:hover {
    background: rgba(220, 38, 38, 0.22);
    border-color: rgba(220, 38, 38, 0.55);
    color: #fecaca;
}

/* ═════════════════════════════════════════════════════════════════════
   v4.12.171 — Dark mode pause button visibility.
   ─────────────────────────────────────────────────────────────────────
   .mcqp-pause-btn used a light-purple bg + purple text (var-driven for
   GK/MCQ/CA, hardcoded for PYQ). On dark theme the contrast collapsed
   — text barely readable. Added translucent tinted bg + brighter text
   for both the generic case (blue accent) and the PYQ override
   (purple accent).
   ───────────────────────────────────────────────────────────────────── */
.mcqp-fe[data-theme="dark"] .mcqp-pause-btn {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}
.mcqp-fe[data-theme="dark"] .mcqp-pause-btn:hover {
    background: rgba(59, 130, 246, 0.22);
    color: #bfdbfe;
}

/* PYQ — purple accent on dark */
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-main .mcqp-pause-btn {
    background: rgba(124, 58, 237, 0.15);
    color: #c4b5fd;
}
.mcqp-fe[data-test-type="pyq_test"][data-theme="dark"] .mcqp-main .mcqp-pause-btn:hover {
    background: rgba(124, 58, 237, 0.22);
    color: #ddd6fe;
}

/* ═════════════════════════════════════════════════════════════════════
   v4.12.176 — Collapse shell grid to 2 columns when ad sidebar is empty
   ─────────────────────────────────────────────────────────────────────
   v4.12.179 — REVERTED: rightbar is now always present (real ad OR
   placeholder card) so the grid stays 3-column. Rule kept as a no-op
   for any rare ext page that still wants the collapse behavior.
   ───────────────────────────────────────────────────────────────────── */
.mcqp-fe .mcqp-shell.mcqp-shell--no-rightbar {
    grid-template-columns: 240px minmax(0, 1fr);
}

/* ═════════════════════════════════════════════════════════════════════
   v4.12.179 — Ad sidebar placeholder card
   ─────────────────────────────────────────────────────────────────────
   When CBQ_Ad_Manager doesn't return real ad HTML for the current
   page (no client configured, page disabled, logged-out user, etc.),
   cbq_wrap_in_shell renders a placeholder aside instead — so the
   slot is always visibly reserved on every shell-wrapped page
   (Dashboard / CA / Test Series / Bookmarks / Performance / Analytics
   / Explore Exams / Topic Tests / etc.).

   The exam engine has its own template and is unaffected by this.
   ───────────────────────────────────────────────────────────────────── */
.mcqp-fe .cbq-ad-slot--placeholder {
    min-height: 600px;
    background: var(--mcqp-surface-2, #f6f8fc);
    border: 1px dashed var(--mcqp-border, #e6ebf5);
}
.mcqp-fe .cbq-ad-placeholder-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: var(--mcqp-text-muted, #64748b);
    text-align: center;
}
.mcqp-fe .cbq-ad-placeholder-title {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--mcqp-text, #0f172a);
}
.mcqp-fe .cbq-ad-placeholder-sub {
    margin: 0;
    font-size: 12px;
    color: var(--mcqp-text-soft, #94a3b8);
    letter-spacing: 0.2px;
}
.mcqp-fe[data-theme="dark"] .cbq-ad-slot--placeholder {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ═════════════════════════════════════════════════════════════════════
   v4.12.177 — Reinforce sticky topbar / left sidebar / ad sidebar
   ─────────────────────────────────────────────────────────────────────
   The base rules already declare position: sticky on each of these
   elements. This block reinforces them with !important to override
   any theme CSS that might be coercing them to position: static.
   Also ensures z-index stacking is high enough that sticky layers
   sit above main content during scroll.

   v4.12.178 — Removed .mcqp-rightbar from this block. The test
   engine's right column (Question Navigator + Test Overview) was
   never broken and the !important + overflow-y: auto + max-height
   added in v4.12.177 was interfering with it. The engine handles
   its own rightbar layout.

   v4.12.193 — Wrapped the .mcqp-sidebar / .cbq-ad-sidebar assertions
   in a `min-width: 721px` media query. Without this, the !important
   sticky declaration was overriding the mobile rule that uses
   position: fixed for the drawer pattern. Result: on mobile the left
   sidebar was sitting in normal flow as a sticky grid item (~700px
   tall via max-height: calc(100vh - 110px)), pushing all main content
   down by a viewport-tall blank space. Topbar stays sticky on every
   width — that one's correct everywhere.
   ───────────────────────────────────────────────────────────────────── */
.mcqp-fe .mcqp-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
}
@media (min-width: 721px) {
    .mcqp-fe .mcqp-sidebar {
        position: sticky !important;
        top: 96px !important;
        align-self: start;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        z-index: 10;
    }
    /* Ad sidebar (archive pages only — Dashboard / CA / TS / Bookmarks).
       The test engine's .mcqp-rightbar is intentionally NOT included
       here — the engine owns its own right column layout. */
    .mcqp-fe .cbq-ad-sidebar {
        position: sticky !important;
        top: 96px !important;
        align-self: start;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        z-index: 10;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   v4.12.186 — Topbar search wrapper (hosts CBQ_Hero_Search component)
   ─────────────────────────────────────────────────────────────────────
   The Hero Search component (CBQ_Hero_Search::render) was originally
   designed for the dashboard hero (margin-top: 18px, full width).
   When dropped into the topbar, we override that margin and constrain
   the wrapper to act as the flex spacer between brand and topbar
   actions, mirroring the old .mcqp-search layout.
   ───────────────────────────────────────────────────────────────────── */
.mcqp-fe .mcqp-topbar-search {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}
.mcqp-fe .mcqp-topbar-search .chs-wrap {
    margin: 0;
    width: 100%;
    max-width: 560px;
}
/* Slightly tighter padding so the search bar fits the 72px topbar
   height nicely. */
.mcqp-fe .mcqp-topbar-search .chs-bar {
    padding: 8px 14px;
}

/* Mobile (≤720px) — hide the search to keep the topbar clean.
   Users still have the bottom nav for navigation; full search can
   come back in a later mobile-specific design pass. */
@media (max-width: 720px) {
    .mcqp-fe .mcqp-topbar-search {
        display: none;
    }
}

/* ============================================================
   v4.12.435 — Immediate-mode option states
   ============================================================
   When admin sets explanation mode = 'immediate', the user's first
   click on an option locks the question and reveals the answer.
   These classes paint the visual feedback. */
.mcqp-fe .mcqp-option.is-locked {
    pointer-events: none;
    cursor: default;
}
.mcqp-fe .mcqp-option.is-correct {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.08);
    box-shadow: 0 0 0 1px #16a34a;
}
.mcqp-fe .mcqp-option.is-correct .mcqp-option-radio {
    border-color: #16a34a;
    background: #16a34a;
}
.mcqp-fe .mcqp-option.is-correct .mcqp-option-radio::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 10px; height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -65%) rotate(-45deg);
    border-radius: 0;
    background: transparent;
}
.mcqp-fe .mcqp-option.is-incorrect {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
    box-shadow: 0 0 0 1px #dc2626;
}
.mcqp-fe .mcqp-option.is-incorrect .mcqp-option-radio {
    border-color: #dc2626;
    background: #dc2626;
}
.mcqp-fe .mcqp-option.is-incorrect .mcqp-option-radio::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 8px;
    background: transparent;
    border-radius: 0;
    /* X mark (two crossing strokes) */
    background-image: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%),
                      linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
}
/* Dark mode variants */
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-option.is-correct,
.mcqp-fe[data-theme="dark"] .mcqp-option.is-correct {
    background: rgba(22, 163, 74, 0.15);
}
html[data-mcqp-theme="dark"] .mcqp-fe .mcqp-option.is-incorrect,
.mcqp-fe[data-theme="dark"] .mcqp-option.is-incorrect {
    background: rgba(220, 38, 38, 0.12);
}