/* ============================================================
   CBQ Mobile Test Engine — Advanced SaaS UI (v3.9.9)
   Palette: Deep Blue #1e3a8a + Amber #f59e0b + Slate
   Features: palette sheet, strikethrough, font size, swipe,
             zen mode, time warnings, pre-submit summary,
             bookmark, mark-for-review, bilingual support.
   Mobile + tablet only (<= 900px). Pure CSS+JS overlay.
   ============================================================ */

@media (max-width: 900px) {

    /* ── CSS variables scoped to mobile exam ─────────────────── */
    body.cbq-isolated-app {
        --cbq-primary:      #2563eb;   /* vivid blue (per spec) */
        --cbq-primary-600:  #1d4ed8;
        --cbq-primary-50:   #eff6ff;
        --cbq-accent:       #f59e0b;   /* amber */
        --cbq-accent-600:   #d97706;
        --cbq-accent-50:    #fffbeb;
        --cbq-success:      #11af0c;
        --cbq-danger:       #dc2626;
        --cbq-warning:      #d97706;
        --cbq-review:       #f89602;   /* for-review amber — matches MFRN button */
        --cbq-slate-50:     #f8fafc;
        --cbq-slate-100:    #f1f5f9;
        --cbq-slate-200:    #e2e8f0;
        --cbq-slate-400:    #94a3b8;
        --cbq-slate-600:    #475569;
        --cbq-slate-900:    #0f172a;
        --cbq-font-scale:   1;
    }

    /* ── 1. HIDE THEME CHROME ─────────────────────────────────── */
    body.cbq-isolated-app .mcqp-topbar,
    body.cbq-isolated-app .mcqp-sidebar,
    body.cbq-isolated-app .mcqp-breadcrumb,
    body.cbq-isolated-app .mcqp-test-head,
    body.cbq-isolated-app .mcqp-bottom-card,
    body.cbq-isolated-app .cbq-ad-sidebar,
    body.cbq-isolated-app .mcqp-rightbar {
        display: none !important;
    }
    #wpadminbar { display: none !important; }
    html { margin-top: 0 !important; }

    /* Body base */
    body.cbq-isolated-app .mcqp-shell {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        gap: 0 !important;
        max-width: 100% !important;
    }
    body.cbq-isolated-app .mcqp-main {
        gap: 0 !important;
        padding: 0 !important;
        min-height: 100vh;
        display: flex !important;
        flex-direction: column;
        background: var(--cbq-slate-50);
    }
    body.cbq-isolated-app #mcqp-test-view {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: 100vh;
        padding-top: 100px;     /* clear the fixed top bar */
        padding-bottom: 94px;   /* clear sticky bottom bar */
    }

    /* ── 2. TOP BAR (injected) ───────────────────────────────── */
    .cbq-mtop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 90;
        background: var(--cbq-primary);
        color: #fff;
        padding: 10px 14px 0;
        box-shadow: none;
    }
    .cbq-mtop-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .cbq-mtop-back,
    .cbq-mtop-tool {
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,.12);
        border: none;
        color: #fff;
        border-radius: 10px;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        transition: background .15s ease, transform .1s ease;
    }
    .cbq-mtop-back:active,
    .cbq-mtop-tool:active { transform: scale(.94); background: rgba(255,255,255,.2); }

    .cbq-mtop-title-wrap {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    .cbq-mtop-title {
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
    .cbq-mtop-sub {
        font-size: 11px;
        font-weight: 500;
        opacity: .75;
        margin-top: 2px;
        line-height: 1.2;
    }

    /* Timer pill — bottom row, wider */
    .cbq-mtop-timer {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #2563eb;
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        padding: 5px 12px;
        border-radius: 99px;
        letter-spacing: .5px;
        flex-shrink: 0;
        transition: background .2s ease;
        box-shadow: 0 0 0 2px rgba(255,255,255,.25);
    }
    .cbq-mtop-timer.warning {
        background: var(--cbq-accent);
        color: #fff;
        box-shadow: 0 0 0 2px rgba(245,158,11,.3);
    }
    .cbq-mtop-timer.critical {
        background: var(--cbq-danger);
        color: #fff;
        animation: cbq-pulse .9s ease-in-out infinite;
    }
    @keyframes cbq-pulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(220,38,38,.3); }
        50%      { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(220,38,38,.15); }
    }

    /* Q counter chip — bottom row */
    .cbq-mtop-qchip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        /* v4.12.296 — Originally used rgba(255,255,255,.95) bg + blue text,
           which leaned on the bright-white pill standing out against the
           blue top bar. On dark device themes / dim screens the near-white
           bg blooms and the blue text becomes hard to read. Switched to a
           translucent-white pill with white text — the top bar's blue
           always provides the contrast for white text, regardless of
           ambient theme. Same look in both light and dark conditions. */
        background: rgba(255,255,255,.18);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        padding: 4px 10px;
        border-radius: 99px;
    }
    .cbq-mtop-qchip .q-num  { font-size: 13px; }
    .cbq-mtop-qchip .q-sep  { opacity: .5; }

    /* Row 2: chip + progress + timer */
    .cbq-mtop-row2 {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
    }
    .cbq-mtop-prog {
        flex: 1;
        height: 5px;
        background: rgba(255,255,255,.18);
        border-radius: 99px;
        overflow: hidden;
    }
    .cbq-mtop-prog-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--cbq-accent), #fbbf24);
        border-radius: 99px;
        transition: width .4s cubic-bezier(.4,0,.2,1);
    }

    /* Hide native engine top bar since ours replaces it */
    body.cbq-isolated-app .mcqp-progress-bar { display: none !important; }

    /* ── 3. INFO CHIPS ROW — compact rounded rectangles, fit screen ── */
    .cbq-minfo {
        padding: 10px 12px 4px;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }

    /* Action chips — small curved rectangles, auto-fit to screen width */
    .cbq-minfo-chip {
        appearance: none;
        flex: 1 1 0;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: #ffffff;
        border: 1px solid var(--cbq-slate-200);
        color: var(--cbq-slate-600);
        font-family: inherit;
        font-size: 11px;
        font-weight: 700;
        padding: 6px 8px;
        min-height: 32px;
        border-radius: 8px;            /* bit curved, not pill */
        white-space: nowrap;
        letter-spacing: .1px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-tap-highlight-color: transparent;
        transition: transform .12s ease, box-shadow .18s ease, filter .15s ease;
    }
    .cbq-minfo-chip svg {
        width: 13px; height: 13px;
        flex-shrink: 0;
    }
    .cbq-minfo-chip span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cbq-minfo-chip:active { transform: scale(.96); }

    /* Question paper — blue */
    #cbq-minfo-paper {
        background: linear-gradient(135deg, #eff6ff, #dbeafe);
        border-color: #bfdbfe;
        color: #1d4ed8;
        box-shadow: 0 2px 6px -2px rgba(37,99,235,.2);
    }
    #cbq-minfo-paper:hover { filter: brightness(1.03); }
    #cbq-minfo-paper svg   { stroke: #2563eb; }

    /* Instructions — MFRN amber tint */
    #cbq-minfo-instr {
        background: #fff4e0;
        border-color: #fad89a;
        color: #f89602;
        box-shadow: 0 2px 6px -2px rgba(248,150,2,.22);
    }
    #cbq-minfo-instr:hover { filter: brightness(1.03); }
    #cbq-minfo-instr svg   { stroke: #f89602; }

    /* Report — red */
    #cbq-minfo-report {
        background: linear-gradient(135deg, #fef2f2, #fee2e2);
        border-color: #fecaca;
        color: #b91c1c;
        box-shadow: 0 2px 6px -2px rgba(220,38,38,.22);
    }
    #cbq-minfo-report:hover { filter: brightness(1.03); }
    #cbq-minfo-report svg   { stroke: #dc2626; }

    /* Language switcher — fixed-size icon-only square, doesn't shrink */
    .cbq-minfo-chip.cbq-minfo-lang {
        flex: 0 0 36px;
        width: 36px;
        padding: 0;
        background: #ffffff;
        border: 1px solid var(--cbq-slate-200);
        box-shadow: 0 2px 6px -2px rgba(15,23,42,.12);
    }
    .cbq-minfo-chip.cbq-minfo-lang svg { width: 18px; height: 18px; }

    /* ── 4b. INLINE QUESTION NAVIGATOR (horizontal scroll strip) ── */
    .cbq-inav {
        padding: 8px 14px 4px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .cbq-inav-label {
        font-size: 10px;
        font-weight: 800;
        color: var(--cbq-slate-600);
        letter-spacing: .5px;
        text-transform: uppercase;
        padding: 0 2px;
    }
    .cbq-inav-track {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        /* v4.12.205 — Horizontal padding bumped 2px → 6px so the
           current cell's outline (2px solid + 2px outline-offset = 4px
           overflow on each side) doesn't get clipped against the
           scroll container's edges. Vertical padding also bumped so
           the box-shadow has room to breathe. */
        padding: 8px 6px 10px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cbq-inav-track::-webkit-scrollbar { display: none; }

    .cbq-inav-cell {
        flex: 0 0 auto;
        width: 36px; height: 36px;
        border-radius: 8px;
        border: 1.5px solid var(--cbq-slate-200);
        background: #ffffff;
        color: var(--cbq-slate-600);
        font-family: inherit;
        font-size: 13px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform .1s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    }
    .cbq-inav-cell:active { transform: scale(.92); }

    /* Answered = green */
    .cbq-inav-cell.answered {
        background: var(--cbq-success);
        border-color: var(--cbq-success);
        color: #ffffff;
    }
    /* For review = MFRN amber */
    .cbq-inav-cell.review {
        background: #fff4e0;
        border-color: #fad89a;
        color: #f89602;
    }
    /* Answered + review = green cell with amber dot */
    .cbq-inav-cell.review.answered {
        background: var(--cbq-success);
        border-color: var(--cbq-success);
        color: #ffffff;
        position: relative;
    }
    .cbq-inav-cell.review.answered::after {
        content: '';
        position: absolute;
        top: 2px; right: 2px;
        width: 7px; height: 7px;
        border-radius: 50%;
        background: #f89602;
        border: 1.5px solid #ffffff;
    }
    /* Current question = blue outline ring, takes precedence visually */
    .cbq-inav-cell.current {
        outline: 2px solid var(--cbq-primary);
        outline-offset: 2px;
        box-shadow: 0 4px 10px -2px rgba(37,99,235,.35);
    }

    /* ── 4. QUESTION CARD ────────────────────────────────────── */
    body.cbq-isolated-app .mcqp-q-card {
        margin: 10px 12px 0 !important;
        border-radius: 16px !important;
        padding: 18px 16px !important;
        border: 1px solid var(--cbq-slate-200) !important;
        background: #ffffff !important;
        box-shadow: 0 2px 8px -2px rgba(15,23,42,.05);
    }

    /* Top row: category chip (left) + action icons (right) */
    body.cbq-isolated-app .mcqp-q-top {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
        gap: 8px;
    }
    body.cbq-isolated-app .mcqp-cat-badge {
        font-size: 10px !important;
        padding: 4px 10px !important;
        font-weight: 700 !important;
        background: var(--cbq-primary-50) !important;
        color: var(--cbq-primary) !important;
        border-radius: 99px !important;
        letter-spacing: .3px;
        text-transform: uppercase;
    }
    body.cbq-isolated-app .mcqp-q-actions {
        display: flex !important;
        gap: 6px;
        margin-left: auto;
    }
    body.cbq-isolated-app .mcqp-q-action {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        color: var(--cbq-slate-400);
        background: var(--cbq-slate-50) !important;
        border: 1px solid var(--cbq-slate-200) !important;
        border-radius: 10px !important;
    }
    /* Bookmark active — amber (star saved) */
    body.cbq-isolated-app #mcqp-bookmark-btn.is-active {
        color: var(--cbq-accent-600);
        background: var(--cbq-accent-50) !important;
        border-color: var(--cbq-accent) !important;
    }
    /* Review active — MFRN amber */
    body.cbq-isolated-app #mcqp-review-btn.is-active {
        color: #f89602;
        background: #fff4e0 !important;
        border-color: #fad89a !important;
    }
    body.cbq-isolated-app .mcqp-q-action.is-active svg { fill: currentColor; }

    /* Question text */
    body.cbq-isolated-app #mcqp-q-text.mcqp-q-text {
        /* v4.12.206 — 17px → 15px per user request. Kannada strokes still
           readable at this size; the question card no longer dominates the
           viewport on smaller phones. */
        font-size: calc(15px * var(--cbq-font-scale)) !important;
        line-height: 1.6 !important;
        font-weight: 700;
        color: var(--cbq-slate-900);
        margin: 0 0 18px !important;
        word-break: break-word;
    }

    /* ── 5. OPTIONS — engine already prefixes "A. / B. / C. / D." in text ─── */
    body.cbq-isolated-app .mcqp-options {
        display: flex !important;
        flex-direction: column;
        gap: 10px !important;
    }
    body.cbq-isolated-app .mcqp-options .mcqp-option {
        width: 100%;
        padding: 14px 16px !important;
        font-size: calc(15px * var(--cbq-font-scale)) !important;
        min-height: 54px;
        border-radius: 12px !important;
        border: 1.5px solid var(--cbq-slate-200) !important;
        background: #ffffff !important;
        color: var(--cbq-slate-900);
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        font-weight: 500;
        transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }
    body.cbq-isolated-app .mcqp-options .mcqp-option:active { transform: scale(.99); }

    /* Hide engine's radio circle and our old letter badge — the "A. text" prefix is enough */
    body.cbq-isolated-app .mcqp-options .mcqp-option::before { display: none !important; }
    body.cbq-isolated-app .mcqp-options .mcqp-option-radio { display: none !important; }
    body.cbq-isolated-app .mcqp-options .mcqp-option input[type="radio"] { display: none; }

    /* Option text full width, left-aligned */
    body.cbq-isolated-app .mcqp-options .mcqp-option-text {
        flex: 1;
        font-size: calc(15px * var(--cbq-font-scale)) !important;
        line-height: 1.5;
        color: var(--cbq-slate-900);
    }

    /* Selected state — strong blue */
    body.cbq-isolated-app .mcqp-options .mcqp-option.is-selected {
        border-color: var(--cbq-primary) !important;
        background: var(--cbq-primary-50) !important;
        box-shadow: 0 0 0 1px var(--cbq-primary) inset;
    }

    /* Hide engine inline nav + info box */
    body.cbq-isolated-app .mcqp-nav-btns { display: none !important; }
    body.cbq-isolated-app .mcqp-info-box { display: none !important; }

    /* ── 7. STICKY BOTTOM ACTION BAR — 2×2 grid layout ─────── */
    .cbq-bottombar {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #ffffff;
        border-top: 1px solid var(--cbq-slate-200);
        box-shadow: 0 -6px 20px -6px rgba(15,23,42,.08);
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        z-index: 95;
    }
    .cbq-bottombar .bbar-btn {
        appearance: none;
        border: 1.5px solid transparent;
        border-radius: 10px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        padding: 11px 10px;
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background .15s, transform .1s, border-color .15s, box-shadow .15s;
        white-space: nowrap;
    }
    .cbq-bottombar .bbar-btn:active { transform: scale(.97); }
    .cbq-bottombar .bbar-btn:disabled { opacity: .4; cursor: not-allowed; }

    /* Row 1 (top): Previous | Clear */
    .cbq-bottombar .bbar-btn.bbar-prev {
        background: var(--cbq-slate-100);
        color: var(--cbq-slate-600);
        border-color: var(--cbq-slate-200);
    }
    .cbq-bottombar .bbar-btn.bbar-clear {
        background: #ffffff;
        color: var(--cbq-slate-600);
        border-color: var(--cbq-slate-200);
    }

    /* Row 2 (bottom): Mark for Review & Next (soft amber) | Save & Next (green #11af0c) */
    .cbq-bottombar .bbar-btn.bbar-review {
        background: #fff4e0;
        color: #f89602;
        border-color: #fad89a;
        font-size: 12.5px;
    }
    .cbq-bottombar .bbar-btn.bbar-review.is-active {
        background: #ffe8bf;
        border-color: #f89602;
        color: #b36b00;
    }
    .cbq-bottombar .bbar-btn.bbar-next {
        background: #11af0c;
        color: #ffffff;
        border-color: #11af0c;
        box-shadow: 0 3px 10px -2px rgba(17,175,12,.35);
    }
    .cbq-bottombar .bbar-btn.bbar-submit {
        background: linear-gradient(135deg, #dc2626, #b91c1c);
        color: #fff;
        box-shadow: 0 3px 10px -2px rgba(220,38,38,.4);
        display: none;
    }
    .cbq-bottombar.is-last .bbar-btn.bbar-next { display: none; }
    .cbq-bottombar.is-last .bbar-btn.bbar-submit { display: inline-flex; }

    /* ── 8. (Focus mode removed in v4.0.1 — widget icon opens palette) ─ */

    /* ── 9. BOTTOM SHEETS (palette, settings, submit summary) ─ */
    .cbq-sheet-backdrop {
        position: fixed; inset: 0;
        background: rgba(15,23,42,.5);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
        z-index: 119;
    }
    .cbq-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

    .cbq-sheet {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 120;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        max-height: 86vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 -16px 48px -8px rgba(15,23,42,.3);
    }
    .cbq-sheet.is-open { transform: translateY(0); }
    .cbq-sheet-handle {
        width: 40px; height: 4px;
        background: var(--cbq-slate-200);
        border-radius: 99px;
        margin: 10px auto 0;
    }
    .cbq-sheet-head {
        padding: 14px 22px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--cbq-slate-100);
    }
    .cbq-sheet-head h3 {
        margin: 0;
        font-size: 17px;
        font-weight: 800;
        color: var(--cbq-slate-900);
    }
    .cbq-sheet-close {
        background: var(--cbq-slate-100);
        border: none;
        width: 32px; height: 32px;
        border-radius: 50%;
        font-size: 18px;
        color: var(--cbq-slate-600);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cbq-sheet-body {
        padding: 16px 22px 20px;
        overflow-y: auto;
        flex: 1;
    }
    /* v4.12.207 — All Questions sheet items. JS now emits these classes
       (was hardcoded inline color: #0f172a / #1e3a8a / #475569 which were
       invisible against the dark sheet background). Light mode reads near-
       identical to before; the dark-mode override below makes the text
       actually readable. */
    .cbq-pq-item {
        padding: 14px 0;
        border-bottom: 1px solid var(--cbq-slate-100);
    }
    .cbq-pq-item:last-child { border-bottom: 0; }
    .cbq-pq-num {
        margin: 0 0 8px;
        font-size: 13px;
        font-weight: 800;
        color: #1e3a8a;
    }
    .cbq-pq-text {
        font-size: 14px;
        line-height: 1.5;
        color: var(--cbq-slate-900);
        margin-bottom: 6px;
    }
    .cbq-pq-trans {
        font-size: 13px;
        line-height: 1.5;
        color: var(--cbq-slate-600);
    }
    .cbq-sheet-footer {
        padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--cbq-slate-100);
        display: flex;
        gap: 8px;
    }
    .cbq-sheet-cta {
        flex: 1;
        padding: 13px;
        background: var(--cbq-primary);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }
    .cbq-sheet-cta.ghost {
        background: #fff;
        color: var(--cbq-slate-600);
        border: 1.5px solid var(--cbq-slate-200);
    }
    .cbq-sheet-cta.danger {
        background: linear-gradient(135deg, var(--cbq-danger), #b91c1c);
    }

    /* ── 10. PALETTE SHEET (status + grid + legend) ──────────── */
    .cbq-pal-summary {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 16px;
    }
    .cbq-pal-stat {
        text-align: center;
        padding: 10px 6px;
        border-radius: 10px;
        background: var(--cbq-slate-50);
        border: 1px solid var(--cbq-slate-100);
    }
    .cbq-pal-stat b {
        display: block;
        font-size: 20px;
        font-weight: 800;
        line-height: 1;
        color: var(--cbq-slate-900);
        font-variant-numeric: tabular-nums;
    }
    .cbq-pal-stat span {
        display: block;
        font-size: 9px;
        font-weight: 700;
        color: var(--cbq-slate-600);
        text-transform: uppercase;
        letter-spacing: .3px;
        margin-top: 4px;
    }
    .cbq-pal-stat.answered   b { color: var(--cbq-success); }
    .cbq-pal-stat.unanswered b { color: var(--cbq-danger); }
    .cbq-pal-stat.review     b { color: #b58900; }
    .cbq-pal-stat.total      b { color: var(--cbq-primary); }

    .cbq-pal-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        margin-bottom: 16px;
    }
    .cbq-pal-cell {
        aspect-ratio: 1 / 1;
        background: var(--cbq-slate-100);
        color: var(--cbq-slate-600);
        border: none;
        border-radius: 8px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
        transition: transform .1s;
        position: relative;
    }
    .cbq-pal-cell:active { transform: scale(.92); }
    .cbq-pal-cell.answered    { background: var(--cbq-success); color: #fff; }
    .cbq-pal-cell.unanswered  { background: #fecaca; color: #7f1d1d; }
    .cbq-pal-cell.review      { background: #fff4e0; color: #f89602; border: 1px solid #fad89a; }
    .cbq-pal-cell.review.answered {
        background: var(--cbq-success); color: #fff;
    }
    .cbq-pal-cell.review.answered::after {
        content: '';
        position: absolute;
        top: 3px; right: 3px;
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--cbq-review);
        border: 1.5px solid #fff;
    }
    .cbq-pal-cell.current {
        outline: 2px solid var(--cbq-accent);
        outline-offset: 2px;
    }
    .cbq-pal-cell.bookmarked::before {
        content: '★';
        position: absolute;
        top: 1px; right: 3px;
        font-size: 9px;
        color: var(--cbq-accent);
    }

    .cbq-pal-legend {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 12px;
        padding-top: 12px;
        border-top: 1px solid var(--cbq-slate-100);
        font-size: 11px;
        color: var(--cbq-slate-600);
    }
    .cbq-pal-legend .leg {
        display: flex; align-items: center; gap: 6px;
    }
    .cbq-pal-legend .dot {
        width: 12px; height: 12px; border-radius: 3px;
    }
    .cbq-pal-legend .dot.answered   { background: var(--cbq-success); }
    .cbq-pal-legend .dot.unanswered { background: #fecaca; }
    .cbq-pal-legend .dot.review     { background: var(--cbq-review); }
    .cbq-pal-legend .dot.notvisited { background: var(--cbq-slate-100); }

    /* ── 11. SETTINGS SHEET (font size + options) ────────────── */
    .cbq-set-row {
        padding: 14px 0;
        border-bottom: 1px solid var(--cbq-slate-100);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    .cbq-set-row:last-child { border-bottom: none; }
    .cbq-set-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--cbq-slate-900);
    }
    .cbq-set-hint {
        font-size: 11px;
        color: var(--cbq-slate-600);
        font-weight: 500;
        margin-top: 2px;
    }
    .cbq-set-stepper {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--cbq-slate-100);
        border-radius: 10px;
        padding: 4px;
    }
    .cbq-set-stepper button {
        width: 30px; height: 30px;
        border: none;
        background: #fff;
        border-radius: 7px;
        font-size: 16px;
        font-weight: 700;
        color: var(--cbq-primary);
        cursor: pointer;
    }
    .cbq-set-stepper button:disabled { opacity: .3; cursor: not-allowed; }
    .cbq-set-stepper span {
        min-width: 34px;
        text-align: center;
        font-size: 13px;
        font-weight: 800;
        color: var(--cbq-slate-900);
        font-variant-numeric: tabular-nums;
    }

    /* Toggle */
    .cbq-toggle {
        position: relative;
        width: 40px; height: 22px;
        background: var(--cbq-slate-200);
        border-radius: 99px;
        cursor: pointer;
        transition: background .2s;
        flex-shrink: 0;
    }
    .cbq-toggle::after {
        content: '';
        position: absolute;
        top: 2px; left: 2px;
        width: 18px; height: 18px;
        background: #fff;
        border-radius: 50%;
        transition: transform .2s;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
    .cbq-toggle.is-on { background: var(--cbq-primary); }
    .cbq-toggle.is-on::after { transform: translateX(18px); }

    /* ── 12. SUBMIT SUMMARY SHEET ────────────────────────────── */
    .cbq-submit-hero {
        text-align: center;
        padding: 10px 0 20px;
    }
    .cbq-submit-hero-icon {
        width: 56px; height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--cbq-accent-50), #fde68a);
        color: var(--cbq-accent-600);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }
    .cbq-submit-hero h4 {
        margin: 0 0 6px;
        font-size: 17px;
        font-weight: 800;
        color: var(--cbq-slate-900);
    }
    .cbq-submit-hero p {
        margin: 0;
        font-size: 13px;
        color: var(--cbq-slate-600);
        line-height: 1.5;
    }

    /* ── 13. TOAST ───────────────────────────────────────────── */
    .cbq-mtoast {
        position: fixed;
        top: 86px;
        left: 50%;
        transform: translateX(-50%) translateY(-30px);
        background: var(--cbq-slate-900);
        color: #fff;
        padding: 10px 16px;
        border-radius: 99px;
        font-size: 12px;
        font-weight: 700;
        box-shadow: 0 6px 16px -4px rgba(0,0,0,.3);
        opacity: 0;
        transition: opacity .25s, transform .25s;
        z-index: 130;
        pointer-events: none;
    }
    .cbq-mtoast.is-on {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* ── 14. TIME-WARNING BANNER ─────────────────────────────── */
    .cbq-warn-banner {
        position: fixed;
        top: 0; left: 0; right: 0;
        background: linear-gradient(135deg, var(--cbq-accent), var(--cbq-accent-600));
        color: #fff;
        padding: 12px 18px calc(12px + env(safe-area-inset-top));
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        z-index: 140;
        transform: translateY(-100%);
        /* v4.12.294 — `visibility: hidden` keeps the banner out of the
           compositor when it's translated off-screen, so its orange
           drop-shadow doesn't bleed back into view at the top of the
           page. Transition the visibility too so the shadow appears
           in sync with the banner sliding in (default would snap it
           on instantly). */
        visibility: hidden;
        transition: transform .35s cubic-bezier(.4,0,.2,1), visibility 0s linear .35s;
        box-shadow: 0 6px 20px -4px rgba(245,158,11,.5);
    }
    /* v4.12.294 — When the banner is shown via JS adding `is-on`, the
       transition order flips so visibility flips instantly (delay 0)
       and only the transform animates. */
    .cbq-warn-banner.is-on {
        transform: translateY(0);
        visibility: visible;
        transition: transform .35s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
    }
    .cbq-warn-banner.critical {
        background: linear-gradient(135deg, #ef4444, var(--cbq-danger));
        animation: cbq-pulse .9s ease-in-out infinite;
    }

    /* ── 15. DARK THEME ──────────────────────────────────────── */
    html[data-mcqp-theme="dark"] body.cbq-isolated-app .mcqp-main { background: #0b1020; }
    html[data-mcqp-theme="dark"] body.cbq-isolated-app .mcqp-q-card {
        background: #121a32 !important;
        border-color: rgba(51,65,85,.4) !important;
    }
    html[data-mcqp-theme="dark"] body.cbq-isolated-app #mcqp-q-text.mcqp-q-text { color: #f1f5f9; }
    html[data-mcqp-theme="dark"] body.cbq-isolated-app .mcqp-options .mcqp-option {
        background: #1e293b !important;
        border-color: rgba(51,65,85,.6) !important;
        color: #e2e8f0;
    }
    /* v4.12.203 — Force option text + selected text + nested span colors
       to a near-white so options read clearly on the dark navy background.
       The base mobile rule (line ~463) sets color: var(--cbq-slate-900)
       on .mcqp-option-text with 3-class specificity; this match adds an
       explicit dark-mode override at higher specificity. */
    html[data-mcqp-theme="dark"] body.cbq-isolated-app .mcqp-options .mcqp-option,
    html[data-mcqp-theme="dark"] body.cbq-isolated-app .mcqp-options .mcqp-option .mcqp-option-text,
    html[data-mcqp-theme="dark"] body.cbq-isolated-app .mcqp-options .mcqp-option .mcqp-option-text * {
        color: #e2e8f0 !important;
    }
    html[data-mcqp-theme="dark"] body.cbq-isolated-app .mcqp-options .mcqp-option.is-selected,
    html[data-mcqp-theme="dark"] body.cbq-isolated-app .mcqp-options .mcqp-option.is-selected .mcqp-option-text,
    html[data-mcqp-theme="dark"] body.cbq-isolated-app .mcqp-options .mcqp-option.is-selected .mcqp-option-text * {
        color: #f1f5f9 !important;
    }
    html[data-mcqp-theme="dark"] body.cbq-isolated-app .mcqp-options .mcqp-option::before {
        background: #0f172a;
        border-color: #475569;
        color: #cbd5e1;
    }
    html[data-mcqp-theme="dark"] body.cbq-isolated-app .mcqp-options .mcqp-option.is-selected {
        background: rgba(29,78,216,.2) !important;
        border-color: #3b82f6 !important;
    }
    html[data-mcqp-theme="dark"] body.cbq-isolated-app .mcqp-options .mcqp-option.is-selected::before {
        background: #3b82f6;
        border-color: #3b82f6;
    }
    html[data-mcqp-theme="dark"] .cbq-bottombar {
        background: #121a32;
        border-top-color: rgba(51,65,85,.4);
    }
    html[data-mcqp-theme="dark"] .cbq-bottombar .bbar-btn.bbar-prev {
        background: #1e293b;
        color: #cbd5e1;
        border-color: rgba(51,65,85,.5);
    }
    html[data-mcqp-theme="dark"] .cbq-bottombar .bbar-btn.bbar-review {
        background: #1e293b;
        color: #c4b5fd;
    }
    html[data-mcqp-theme="dark"] .cbq-sheet { background: #121a32; }
    html[data-mcqp-theme="dark"] .cbq-sheet-head h3 { color: #f1f5f9; }
    html[data-mcqp-theme="dark"] .cbq-sheet-head { border-bottom-color: rgba(51,65,85,.4); }
    /* v4.12.207 — All Questions sheet items in dark mode. Bright text +
       softer divider so each Q reads cleanly on the dark sheet bg. */
    html[data-mcqp-theme="dark"] .cbq-pq-item {
        border-bottom-color: rgba(51,65,85,.4);
    }
    html[data-mcqp-theme="dark"] .cbq-pq-num {
        color: #93c5fd;
    }
    html[data-mcqp-theme="dark"] .cbq-pq-text {
        color: #f1f5f9;
    }
    html[data-mcqp-theme="dark"] .cbq-pq-trans {
        color: #cbd5e1;
    }
    html[data-mcqp-theme="dark"] .cbq-pal-stat { background: rgba(30,41,59,.5); border-color: rgba(51,65,85,.4); }
    html[data-mcqp-theme="dark"] .cbq-pal-stat b { color: #f1f5f9; }
    html[data-mcqp-theme="dark"] .cbq-pal-cell { background: rgba(30,41,59,.7); color: #cbd5e1; }
    html[data-mcqp-theme="dark"] .cbq-set-row { border-bottom-color: rgba(51,65,85,.3); }
    html[data-mcqp-theme="dark"] .cbq-set-label { color: #f1f5f9; }
    html[data-mcqp-theme="dark"] .cbq-minfo-chip {
        background: rgba(30,41,59,.7);
        color: #cbd5e1;
        border-color: rgba(51,65,85,.5);
    }

    /* Tablet */
    @media (min-width: 600px) {
        body.cbq-isolated-app .mcqp-q-card { margin: 14px 24px 0 !important; }
        .cbq-bottombar { padding-left: 24px; padding-right: 24px; }
    }
}

/* Desktop — hide all mobile-only widgets */
@media (min-width: 901px) {
    .cbq-mtop,
    .cbq-minfo,
    .cbq-bottombar,
    .cbq-sheet,
    .cbq-sheet-backdrop,
    .cbq-mtoast,
    .cbq-warn-banner {
        display: none !important;
    }
}

/* v4.3.8 — In-test Instructions sheet body */
@media (max-width: 900px) {
    .cbq-instr-sheet-list {
        margin: 0;
        padding-left: 22px;
        font-size: 13.5px;
        line-height: 1.65;
        color: #334155;
    }
    .cbq-instr-sheet-list li { margin-bottom: 10px; }
    .cbq-instr-sheet-list li::marker {
        color: #2563eb;
        font-weight: 700;
    }
    .cbq-instr-sheet-custom {
        font-size: 13.5px;
        line-height: 1.65;
        color: #334155;
    }
    .cbq-instr-sheet-custom p { margin: 0 0 10px; }
    .cbq-instr-sheet-custom p:last-child { margin-bottom: 0; }
    .cbq-instr-sheet-custom ul,
    .cbq-instr-sheet-custom ol { margin: 0 0 10px; padding-left: 22px; }
    .cbq-instr-sheet-custom li { margin-bottom: 6px; }
    .cbq-instr-sheet-custom li::marker { color: #2563eb; font-weight: 700; }
    .cbq-instr-sheet-custom strong,
    .cbq-instr-sheet-custom b { color: #0f172a; }
    .cbq-instr-sheet-custom a { color: #2563eb; text-decoration: underline; }
}

/* ============================================================
   v4.4.9 — Dark mode readability for mobile exam UI
   ============================================================ */
@media (max-width: 900px) {
    html[data-mcqp-theme="dark"] .cbq-minfo-chip {
        background: #182240;
        border-color: #233056;
        color: #e2e8f0;
    }
    html[data-mcqp-theme="dark"] #cbq-minfo-paper {
        background: rgba(37,99,235,.15);
        border-color: rgba(37,99,235,.35);
        color: #93c5fd;
    }
    html[data-mcqp-theme="dark"] #cbq-minfo-paper svg { stroke: #93c5fd; }
    html[data-mcqp-theme="dark"] #cbq-minfo-instr {
        background: rgba(248,150,2,.15);
        border-color: rgba(248,150,2,.35);
        color: #fbbf24;
    }
    html[data-mcqp-theme="dark"] #cbq-minfo-instr svg { stroke: #fbbf24; }
    html[data-mcqp-theme="dark"] #cbq-minfo-report {
        background: rgba(239,68,68,.15);
        border-color: rgba(239,68,68,.35);
        color: #fca5a5;
    }
    html[data-mcqp-theme="dark"] #cbq-minfo-report svg { stroke: #fca5a5; }
    html[data-mcqp-theme="dark"] .cbq-minfo-chip.cbq-minfo-lang {
        background: #182240;
        border-color: #233056;
    }

    /* Inline Question Navigator */
    html[data-mcqp-theme="dark"] .cbq-inav {
        background: transparent;
    }
    html[data-mcqp-theme="dark"] .cbq-inav-label { color: #94a3b8; }
    /* v4.12.204 — Bumped cell text to near-white #f1f5f9 (was #cbd5e1).
       The previous value was technically readable (~9:1 contrast against
       #182240) but rendered too dim on real devices. Also bumped border
       a bit brighter for cell separation. */
    html[data-mcqp-theme="dark"] .cbq-inav-cell {
        background: #182240;
        border-color: #2d3a5e;
        color: #f1f5f9 !important;
    }
    html[data-mcqp-theme="dark"] .cbq-inav-cell.answered {
        background: var(--cbq-success);
        border-color: var(--cbq-success);
        color: #fff !important;
    }
    html[data-mcqp-theme="dark"] .cbq-inav-cell.review {
        background: rgba(248,150,2,.2);
        color: #fbbf24 !important;
        border-color: rgba(248,150,2,.4);
    }
    /* Current question cell — make sure the number stays bright too */
    html[data-mcqp-theme="dark"] .cbq-inav-cell.current {
        color: #ffffff !important;
        background: rgba(37,99,235,.18);
    }

    /* Bottom bar buttons (non-review/non-next use light bg) */
    html[data-mcqp-theme="dark"] .cbq-bottombar {
        background: #121a32;
        border-top-color: #233056;
    }
    html[data-mcqp-theme="dark"] .cbq-bottombar .bbar-btn.bbar-prev,
    html[data-mcqp-theme="dark"] .cbq-bottombar .bbar-btn.bbar-clear {
        background: #182240;
        color: #cbd5e1;
        border-color: #233056;
    }

    /* Sheets (Palette / Settings / Report / Instructions) */
    html[data-mcqp-theme="dark"] .cbq-sheet {
        background: #121a32;
        color: #e2e8f0;
    }
    html[data-mcqp-theme="dark"] .cbq-sheet-head {
        border-bottom-color: #233056;
    }
    html[data-mcqp-theme="dark"] .cbq-sheet-head h3 { color: #f8fafc; }
    html[data-mcqp-theme="dark"] .cbq-sheet-close {
        background: #182240;
        color: #cbd5e1;
    }
    html[data-mcqp-theme="dark"] .cbq-sheet-footer {
        border-top-color: #233056;
    }
    html[data-mcqp-theme="dark"] .cbq-pal-cell {
        background: #182240;
        color: #cbd5e1;
    }
    html[data-mcqp-theme="dark"] .cbq-pal-cell.unanswered {
        background: rgba(239,68,68,.2);
        color: #fca5a5;
    }
    html[data-mcqp-theme="dark"] .cbq-pal-cell.review {
        background: rgba(248,150,2,.2);
        color: #fbbf24;
        border-color: rgba(248,150,2,.4);
    }
    html[data-mcqp-theme="dark"] .cbq-pal-legend {
        border-top-color: #233056;
        color: #94a3b8;
    }
    html[data-mcqp-theme="dark"] .cbq-pal-legend .dot.notvisited { background: #233056; }

    /* Instructions sheet body */
    html[data-mcqp-theme="dark"] .cbq-instr-sheet-list { color: #cbd5e1; }
    html[data-mcqp-theme="dark"] .cbq-instr-sheet-list li::marker { color: #60a5fa; }
    html[data-mcqp-theme="dark"] .cbq-instr-sheet-custom { color: #cbd5e1; }
    html[data-mcqp-theme="dark"] .cbq-instr-sheet-custom strong,
    html[data-mcqp-theme="dark"] .cbq-instr-sheet-custom b { color: #f8fafc; }

    /* Report sheet — form inputs */
    html[data-mcqp-theme="dark"] .cbq-report-opt {
        background: #182240;
        border-color: #233056;
        color: #cbd5e1;
    }
    html[data-mcqp-theme="dark"] .cbq-report-textarea {
        background: #0b1020;
        border-color: #233056;
        color: #e2e8f0;
    }

    /* Settings sheet */
    html[data-mcqp-theme="dark"] .cbq-set-row { border-bottom-color: #233056; }
    html[data-mcqp-theme="dark"] .cbq-set-label { color: #e2e8f0; }
    html[data-mcqp-theme="dark"] .cbq-set-desc  { color: #94a3b8; }
    html[data-mcqp-theme="dark"] .cbq-set-scale {
        background: #182240;
        color: #cbd5e1;
        border-color: #233056;
    }

    /* Submit confirmation sheet hero icon */
    html[data-mcqp-theme="dark"] .cbq-submit-hero h4 { color: #f8fafc; }
    html[data-mcqp-theme="dark"] .cbq-submit-hero p  { color: #94a3b8; }
    html[data-mcqp-theme="dark"] .cbq-submit-stats-mini {
        background: #182240;
        border-color: #233056;
    }
    html[data-mcqp-theme="dark"] .cbq-submit-stat-val { color: #f8fafc; }
    html[data-mcqp-theme="dark"] .cbq-submit-stat-lbl { color: #94a3b8; }
}