/**
 * SSC / Banking Exam UI — wireframe layout
 * Scoped to .quizSEO_ssc_official only. Does not alter non-SSC views.
 */

html.quizSEO_ssc_page .ssc-fullwidth-parent {
    max-width: none !important;
    width: 100% !important;
}

.quizSEO_ssc_official {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border: 2px solid var(--ssc-brand);
    background: var(--ssc-surface);
    box-shadow: 0 2px 12px rgba(15, 61, 76, 0.08);
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.quizSEO_ssc_official *,
.quizSEO_ssc_official *::before,
.quizSEO_ssc_official *::after {
    box-sizing: border-box;
}

/* Hide default h2 title — shown in header row */
.quizSEO_ssc_official > h2 {
    display: none !important;
}

/* ========== TOP BAR (3 rows) ========== */
.quizSEO_ssc_official .ssc-topbar {
    border-bottom: 2px solid var(--ssc-brand);
    background: var(--ssc-surface-alt);
}

.quizSEO_ssc_official .ssc-topbar__row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: 8px 16px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--ssc-line);
    min-height: 42px;
}

.quizSEO_ssc_official .ssc-topbar__row:last-child {
    border-bottom: none;
}

.quizSEO_ssc_official .ssc-topbar__quiz-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--ssc-head);
}

/* Zoom (+)/(−) — desktop only, same top-left spot (beside the quiz name)
   as the Eduquity theme's Zoom controls. Wrapping .ssc-topbar__name-group
   keeps the quiz-name + zoom pair together in the row's first grid column,
   so the existing 1fr 1fr auto layout (name | blank | time) is untouched. */
.quizSEO_ssc_official .ssc-topbar__name-group {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.quizSEO_ssc_official .ssc-topbar__name-group .ssc-topbar__quiz-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quizSEO_ssc_official .ssc-zoom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
/* Same adjustable quiz colour as every other SSC action button (Back,
   Save & Next, Submit, etc.): custom quiz colour first if the admin also
   opted into recolouring the SSC skin, else the SSC theme's own accent,
   else the default SSC brand blue. Mirrors the cascade already used a few
   hundred lines down for .quizSEO_instrBack. */
.quizSEO_ssc_official .ssc-zoom-btn {
    appearance: none;
    -webkit-appearance: none;
    background: var(--quizseo-btn-bg, var(--ssc-accent, var(--ssc-brand, #1e5a8a))) !important;
    background-color: var(--quizseo-btn-bg, var(--ssc-accent, var(--ssc-brand, #1e5a8a))) !important;
    color: var(--quizseo-btn-text, var(--ssc-accent-text, var(--ssc-on-brand, #fff))) !important;
    border: 1px solid var(--quizseo-btn-bg, var(--ssc-accent, var(--ssc-brand, #1e5a8a))) !important;
    border-radius: 3px;
    height: 25px;
    min-width: 70px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none !important;
}
.quizSEO_ssc_official .ssc-zoom-btn:hover {
    background: var(--quizseo-btn-hover, var(--ssc-brand-dark, #164a72)) !important;
    background-color: var(--quizseo-btn-hover, var(--ssc-brand-dark, #164a72)) !important;
    border-color: var(--quizseo-btn-hover, var(--ssc-brand-dark, #164a72)) !important;
    color: var(--quizseo-btn-text, var(--ssc-on-brand, #fff)) !important;
}

/* Question-paper zoom target, mirrors Eduquity's .eduquity-paper-scale. */
.quizSEO_ssc_official .ssc-paper-scale {
    width: 100%;
}

/* Desktop only, per spec — hidden on phones regardless of which layout
   mode (running test / mobile-header / review) the row is in. */
@media (max-width: 768px) {
    .quizSEO_ssc_official .ssc-zoom {
        display: none !important;
    }

    /* HY-CHANGE 2026-08-26 (SSC mobile bottom buttons):
       Kill any transform on the zoom host on mobile. transform creates a
       containing block, so the fixed action bar (bottom:0) was pinning to
       the paper box mid-screen instead of the viewport. Desktop zoom
       (transform:scale) is untouched — this media query only runs ≤768px.
       Scoped to .quizSEO_ssc_official only; Eduquity / Default unaffected. */
    .quizSEO_ssc_official .ssc-paper-scale {
        transform: none !important;
        -webkit-transform: none !important;
        width: 100% !important;
    }
}

.quizSEO_ssc_official .ssc-topbar__label {
    font-weight: 600;
    font-size: 13px;
    color: var(--ssc-text);
    white-space: nowrap;
}

/* "Section Time:" (desktop) vs "Sec Time:" (mobile), and each language
   button's full name (desktop) vs short code (mobile) — same technique,
   same breakpoint, everywhere in the combined Ques/Section-Time/language
   line. Desktop shows the full span; the @media block further down (inside
   .ssc-mobile-header, right next to where qmeta itself relocates) flips
   which one is visible. Keeping both in the DOM avoids re-fetching or
   re-computing text on resize — it's a pure display:none/inline toggle. */
.quizSEO_ssc_official .ssc-lbl-short { display: none; }
.quizSEO_ssc_official .ssc-lbl-full { display: inline; }

.quizSEO_ssc_official .ssc-topbar__global-time,
.quizSEO_ssc_official .ssc-topbar__cat-time {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

/* Per-question language switcher: hidden here, not because it stopped
   working, but because a persistent clone of it now lives beside "Ques X
   of Y" and "Section Time" in .ssc-topbar__qmeta (built once in
   ssc-exam-template.js's buildShellInner()). The original stays in the DOM
   exactly where it always was — still fully functional, still the thing
   quizSEO_i18n.js's delegated listener matches on the way real switching
   happens — this only stops it from being drawn a second time next to the
   question text now that the topbar has its own copy. */
.quizSEO_ssc_official .quizSEO_listItem .quizSEO_langBar[data-quizseo-langbar] {
    display: none;
}

/* Desktop qmeta row layout (running test + View Answers):
   Left:  "Ques X of Y" (+ marks)
   Right: [Night/Day/Eye]  [Full screen]  [Section Time: mm:ss]  [Lang]
   margin-left:auto on .ssc-topbar__cat-time (which hosts theme + FS +
   section clock) pulls that whole group to the right; language sits after
   it with a fixed gap. Mobile keeps its own rules under .ssc-mobile-header. */
.quizSEO_ssc_official .ssc-topbar__qmeta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}
.quizSEO_ssc_official .ssc-topbar__qmeta .ssc-topbar__cat-time {
    margin-left: auto;
    flex: 0 0 auto;
    gap: 10px;
}
.quizSEO_ssc_official .ssc-topbar__qmeta .quizSEO_langBar {
    margin-left: 0;
    flex: 0 0 auto;
}
/* Hide the empty spacer fsEnsureUi() used to park the FS button in the
   qmeta row grid; FS now lives inside .ssc-topbar__cat-time on desktop. */
.quizSEO_ssc_official .ssc-fs-spacer {
    display: none !important;
}

.quizSEO_ssc_official .ssc-topbar .quizSEO_time_limit {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    float: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1.15 !important;
}

/* Kill quizSEO_front.css .quizSEO_time_limit .time { margin-top/bottom: 5px }
   which adds empty space under/above the total Time value in the topbar. */
.quizSEO_ssc_official .ssc-topbar .quizSEO_time_limit .time {
    font-weight: 700 !important;
    font-size: 0 !important; /* hide "Time limit:" text */
    color: var(--ssc-head) !important;
    font-variant-numeric: tabular-nums !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
}
.quizSEO_ssc_official .ssc-topbar .quizSEO_time_limit .time span {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
    vertical-align: middle !important;
}

.quizSEO_ssc_official .ssc-topbar .quizSEO_time_limit .quizSEO_progress {
    display: none !important;
}

/* Category tabs row */
.quizSEO_ssc_official .ssc-topbar__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.quizSEO_ssc_official .quizSEO_allCategoriesNav {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    float: none !important;
}

.quizSEO_ssc_official .quizSEO_categoryTab {
    display: inline-block !important;
    padding: 6px 12px !important;
    margin: 0 4px 0 0 !important;
    border: 1px solid var(--ssc-line-strong) !important;
    border-radius: 4px !important;
    background: var(--ssc-surface) !important;
    color: var(--ssc-head) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
}

.quizSEO_ssc_official .quizSEO_categoryTabActive,
.quizSEO_ssc_official .quizSEO_categoryTab.quizSEO_categoryTabActive {
    /* Every quiz button already resolves through --quizseo-btn-bg (see the
       RECONCILIATION block in ssc-theme.css), so the active tab should too -
       otherwise a custom button colour recolours every button in the SSC
       skin except this one. --quizseo-btn-bg is only ever printed when the
       admin turns "Use custom button colors" on, so it takes priority when
       present; --ssc-accent (the separate "Also recolor the SSC Official
       skin" opt-in) is kept as a fallback for anyone who set that flag
       without full colours enabled, and --ssc-brand is the original exam
       blue when no colour has been configured at all. */
    background: var(--quizseo-btn-bg, var(--ssc-accent, var(--ssc-brand))) !important;
    color: var(--quizseo-btn-text, var(--ssc-accent-text, var(--ssc-on-brand))) !important;
    border-color: var(--quizseo-btn-bg, var(--ssc-accent, var(--ssc-brand))) !important;
}

/* Question meta row — spans full topbar; right tools use margin-left:auto
   on .ssc-topbar__cat-time (see rules above). */
.quizSEO_ssc_official .ssc-topbar__qmeta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px 14px;
    grid-column: 1 / -1;
}

.quizSEO_ssc_official .ssc-topbar__qnum {
    font-weight: 600;
    font-size: 14px;
    color: var(--ssc-head);
}

.quizSEO_ssc_official .ssc-topbar__marks {
    font-size: 14px;
    font-weight: 600;
}

.quizSEO_ssc_official .ssc-mark-pos {
    color: var(--ssc-ok-text, var(--ssc-ok));
    margin-right: 8px;
}

.quizSEO_ssc_official .ssc-mark-neg {
    color: var(--ssc-bad-text, var(--ssc-bad));
}

/* ========== MAIN 3-COLUMN GRID ========== */
.quizSEO_ssc_official .ssc-exam-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    min-height: 420px;
    border-bottom: 2px solid var(--ssc-brand);
}

.quizSEO_ssc_official .ssc-exam-main {
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid var(--ssc-line);
}

.quizSEO_ssc_official .ssc-exam-sidebar {
    min-width: 0;
    padding: 12px;
    background: var(--ssc-surface-alt);
    border-left: 1px solid var(--ssc-line);
}

/* Passage split inside question */
.quizSEO_ssc_official .ssc-passage-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 320px;
}

.quizSEO_ssc_official .ssc-passage-left {
    padding: 12px 14px;
    border-right: 1px solid var(--ssc-line);
    overflow: auto;
    max-height: 70vh;
    background: var(--ssc-surface);
}

.quizSEO_ssc_official .ssc-passage-right {
    padding: 12px 14px;
    overflow: auto;
    max-height: 70vh;
}

.quizSEO_ssc_official .ssc-passage-left .quizSEO_question_description {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.quizSEO_ssc_official .ssc-passage-left img,
.quizSEO_ssc_official .ssc-passage-left table {
    max-width: 100% !important;
    height: auto !important;
}

/* No passage: single question column */
.quizSEO_ssc_official .quizSEO_listItem {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.quizSEO_ssc_official .quizSEO_question {
    margin: 0 !important;
}

.quizSEO_ssc_official .quizSEO_questionList {
    list-style: none !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.quizSEO_ssc_official .quizSEO_questionListItem {
    margin: 0 0 8px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--ssc-line-soft) !important;
    border-radius: 8px !important;
    background: var(--ssc-surface) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Single/multiple: whole option row is the click target (padding on label) */
.quizSEO_ssc_official .quizSEO_questionList[data-type="single"] .quizSEO_questionListItem,
.quizSEO_ssc_official .quizSEO_questionList[data-type="multiple"] .quizSEO_questionListItem {
    padding: 0 !important;
    cursor: pointer;
}
.quizSEO_ssc_official .quizSEO_questionList[data-type="single"] .quizSEO_questionListItem > label,
.quizSEO_ssc_official .quizSEO_questionList[data-type="multiple"] .quizSEO_questionListItem > label {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    cursor: pointer;
}

.quizSEO_ssc_official .quizSEO_questionListItem:hover {
    border-color: var(--ssc-line-hover) !important;
    background: var(--ssc-surface) !important;
}

/* ========== SIDEBAR / CATEGORY PALETTE ========== */
/* Two lines × two columns (desktop + mobile drawer) */
.quizSEO_ssc_official .ssc-palette-legend {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 6px 10px !important;
    margin: 0 0 12px !important;
    font-size: 11px !important;
    color: var(--ssc-muted-cool);
    width: 100% !important;
    box-sizing: border-box !important;
}

.quizSEO_ssc_official .ssc-palette-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}

.quizSEO_ssc_official .ssc-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.quizSEO_ssc_official .ssc-dot--answered { background: var(--ssc-ok); }
.quizSEO_ssc_official .ssc-dot--notanswered { background: var(--ssc-bad); }
.quizSEO_ssc_official .ssc-dot--notvisited { background: var(--ssc-none); }
.quizSEO_ssc_official .ssc-dot--marked { background: var(--ssc-warn); }
.quizSEO_ssc_official .ssc-dot--answered-marked { background: var(--ssc-mark); }

.quizSEO_ssc_official .ssc-sidebar-section-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--ssc-head);
    margin: 0 0 8px;
    padding: 6px 8px;
    border: 1px solid var(--ssc-brand);
    border-radius: 4px;
    background: var(--ssc-surface);
    text-align: center;
}

.quizSEO_ssc_official .quizSEO_reviewDiv {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    float: none !important;
    width: 100% !important;
}

.quizSEO_ssc_official .quizSEO_reviewQuestion {
    margin: 0 !important;
    padding: 0 !important;
}

.quizSEO_ssc_official .quizSEO_reviewQuestion ol {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    counter-reset: none !important;
    /* Match category palette: fixed 30px boxes, not stretched 1fr columns */
    grid-template-columns: none !important;
}

.quizSEO_ssc_official .quizSEO_reviewQuestion li {
    /* Same size as .quizSEO_questionPaletteButton (category palette) */
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 3px !important;
    border: 1px solid var(--ssc-line-neutral) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: normal !important;
    cursor: pointer !important;
    /* default only — JS sets answered/review/skipped colors (do not use !important) */
    background: var(--ssc-surface);
    color: var(--ssc-text-neutral);
    float: none !important;
    box-sizing: border-box !important;
    flex: 0 0 30px !important;
}
.quizSEO_ssc_official .quizSEO_reviewQuestion li.ssc-pal-answered {
    background: var(--ssc-ok) !important;
    color: var(--ssc-on-status) !important;
    border-color: var(--ssc-ok) !important;
}
.quizSEO_ssc_official .quizSEO_reviewQuestion li.ssc-pal-skipped {
    background: var(--ssc-bad) !important;
    color: var(--ssc-on-status) !important;
    border-color: var(--ssc-bad) !important;
}
.quizSEO_ssc_official .quizSEO_reviewQuestion li.ssc-pal-review {
    background: var(--ssc-warn) !important;
    color: var(--ssc-on-warn) !important;
    border-color: var(--ssc-warn) !important;
}
.quizSEO_ssc_official .quizSEO_reviewQuestion li.ssc-pal-current {
    background: var(--quizseo-current, var(--ssc-current)) !important;
    color: var(--quizseo-current-text, var(--ssc-on-brand)) !important;
    border-color: var(--quizseo-current, var(--ssc-current)) !important;
}

.quizSEO_ssc_official .ssc-sidebar-actions {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quizSEO_ssc_official .ssc-sidebar-actions input.quizSEO_button,
.quizSEO_ssc_official .ssc-sidebar-actions input[type="button"] {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    background: var(--ssc-brand) !important;
    color: var(--ssc-on-brand) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

/* ========== FOOTER ACTION BAR ========== */
.quizSEO_ssc_official .ssc-footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--ssc-surface-foot);
    border-top: 1px solid var(--ssc-line);
}

.quizSEO_ssc_official .ssc-footer-bar__left,
.quizSEO_ssc_official .ssc-footer-bar__right {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.quizSEO_ssc_official .ssc-question-action-bar {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 8px 0 0;
    margin: 12px 0 0;
    border: none;
    background: transparent;
    clear: both;
}

.quizSEO_ssc_official .ssc-qbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.quizSEO_ssc_official .ssc-qbar-row--primary {
    justify-content: space-between;
}

.quizSEO_ssc_official .ssc-qbar-left,
.quizSEO_ssc_official .ssc-qbar-right {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Desktop: hide secondary row (mobile-only Mark/Submit row) */
.quizSEO_ssc_official .ssc-qbar-row--secondary {
    display: none !important;
}

.quizSEO_ssc_official .ssc-question-action-bar input.quizSEO_button,
.quizSEO_ssc_official .ssc-question-action-bar input.quizSEO_QuestionButton,
.quizSEO_ssc_official .ssc-question-action-bar input[type="button"],
.quizSEO_ssc_official .ssc-footer-bar input.quizSEO_button,
.quizSEO_ssc_official .ssc-footer-bar input[type="button"] {
    float: none !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 100px;
    margin: 0 !important;
    padding: 9px 14px !important;
    border-radius: 6px !important;
    border: 1px solid var(--ssc-brand) !important;
    background: var(--ssc-surface) !important;
    color: var(--ssc-head) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.quizSEO_ssc_official .ssc-question-action-bar input[name="next"],
.quizSEO_ssc_official .ssc-footer-bar input[name="next"] {
    background: var(--ssc-brand) !important;
    color: var(--ssc-on-brand) !important;
}

/* Start page untouched inside frame */
.quizSEO_ssc_official .quizSEO_text {
    padding: 24px 16px;
}

.quizSEO_ssc_official.ssc-quiz-started .quizSEO_text {
    display: none !important;
}

/* HY-CHANGE 2026-08-26 (Restart → Start page):
   Before the exam has started, only the Start Test / language screen should
   show — not empty exam chrome (category tabs + running timers). Without this,
   Restart left the topbar visible while .quizSEO_text stayed hidden if
   .ssc-quiz-started was briefly re-added by the MutationObserver. */
/* HY-CHANGE 2026-08-26d: :not(.ssc-review-mode) so View Answers keeps chrome
   and the fixed mobile All Question Palette at the bottom. */
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-review-mode) .ssc-exam-body,
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-review-mode) .ssc-footer-bar,
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-review-mode) .ssc-topbar__row--qmeta,
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-review-mode) .ssc-topbar__row--cats,
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-review-mode) .ssc-cats-slot,
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-review-mode) .ssc-topbar__global-time,
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-review-mode) .ssc-topbar__cat-time,
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-review-mode) .quizSEO_allCategoriesNav,
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-review-mode) .quizSEO_categoryTabs,
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-review-mode) .quizSEO_categoryTab,
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-review-mode) .ssc-timer-slot,
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-review-mode) .category-timer-display {
    display: none !important;
}

/* When truly on the start screen, force instructions visible even if a
   leftover inline style tried to hide them. */
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-quiz-finished) > .quizSEO_text,
.quizSEO_ssc_official:not(.ssc-quiz-started):not(.ssc-quiz-finished) .quizSEO_text {
    display: block !important;
    visibility: visible !important;
}

.quizSEO_ssc_official .ssc-mobile-palette-toggle {
    display: none !important;
}

/* Mobile horizontal palette strip — hidden on desktop; activated by JS */
.quizSEO_ssc_official .ssc-mobile-palette-strip {
    display: none;
    margin: 0 0 10px;
    padding: 6px 0;
    background: transparent;
    border: none;
    border-radius: 0;
    /* Do not affect question box height: strip is outside .quizSEO_question */
}

.quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip {
    display: block;
}


/* ========== RESPONSIVE ========== */
@media (max-width: 960px) {
    /* Passage splits stack; exam body stays 2-col until mobile (768) */
    .quizSEO_ssc_official .ssc-passage-layout {
        grid-template-columns: 1fr;
    }
    .quizSEO_ssc_official .ssc-passage-left {
        border-right: none;
        border-bottom: 1px solid var(--ssc-line);
        max-height: 40vh;
    }
    .quizSEO_ssc_official .ssc-mobile-palette-toggle {
        display: none !important;
    }
    .quizSEO_ssc_official .ssc-topbar__row {
        grid-template-columns: 1fr;
    }
}

/* Mobile: single column — footer bar is desktop-only */
@media (max-width: 768px) {
    .quizSEO_ssc_official .ssc-exam-body,
    .quizSEO_ssc_official.ssc-has-active-passage .ssc-exam-body {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
    .quizSEO_ssc_official .ssc-exam-main,
    .quizSEO_ssc_official .ssc-exam-sidebar {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .quizSEO_ssc_official .ssc-exam-sidebar {
        border-left: none;
        border-top: 1px solid var(--ssc-line);
        display: block !important;
    }
    .quizSEO_ssc_official .ssc-footer-bar {
        display: none !important;
    }
    .quizSEO_ssc_official .ssc-sidebar-scroll {
        overflow: visible !important;
        flex: none !important;
        min-height: 0 !important;
    }
    .quizSEO_ssc_official .ssc-exam-sidebar {
        overflow: visible !important;
    }

    .quizSEO_ssc_official .ssc-question-action-bar.ssc-qbar--desktop-hidden {
        position: static !important;
        width: auto !important;
        height: auto !important;
        padding: 8px 0 !important;
        margin: 12px 0 0 !important;
        overflow: visible !important;
        clip: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* ---- Mobile: category palette ABOVE question = single horizontal row ----
       Buttons live inside .quizSEO_paletteButtons which has inline flex-wrap:wrap;
       override that so the strip is one scrollable row. Question box size untouched. */
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 10px 0 !important;
        padding: 6px 0 4px !important;
        background: transparent !important;
        border: none !important;
        border-top: 1px solid var(--ssc-line-soft-cool) !important;
        border-bottom: 1px solid var(--ssc-line-soft-cool) !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    .quizSEO_ssc_official .ssc-mobile-palette-strip .quizSEO_questionPalette {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* THE actual button row — must override inline flex-wrap:wrap */
    .quizSEO_ssc_official .ssc-mobile-palette-strip .quizSEO_paletteButtons,
    .quizSEO_ssc_official .ssc-mobile-palette-strip .quizSEO_questionPalette > div {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 10px 4px !important;
        white-space: nowrap !important;
        scrollbar-width: thin;
    }

    .quizSEO_ssc_official .ssc-mobile-palette-strip .quizSEO_questionPaletteButton {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        margin: 0 !important;
        scroll-snap-align: start;
        white-space: nowrap !important;
    }

    /* When main palette is the ABOVE strip fallback */
    .quizSEO_ssc_official .ssc-mobile-palette-strip .quizSEO_reviewQuestion {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        max-height: none !important;
        overflow: visible !important;
        float: none !important;
        width: 100% !important;
    }

    .quizSEO_ssc_official .ssc-mobile-palette-strip .quizSEO_reviewQuestion ol {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 10px 4px !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    .quizSEO_ssc_official .ssc-mobile-palette-strip .quizSEO_reviewQuestion li {
        flex: 0 0 auto !important;
        float: none !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mobile strip active: hide ALL sidebar palettes — only the strip shows one palette */
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-exam-sidebar .ssc-section-palette-wrap,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-exam-sidebar .ssc-sidebar-section-title,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-exam-sidebar .ssc-palette-subtitle--cat,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-exam-sidebar .ssc-cat-palette-slot,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-exam-sidebar .ssc-palette-subtitle--all,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-exam-sidebar .ssc-main-palette-slot,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-exam-sidebar .quizSEO_reviewQuestion,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-exam-sidebar .quizSEO_questionPalette {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

}


/* ===== SSC UI layout fixes (Submit once, mobile two-row actions, Section Palette) ===== */

/* Hide duplicate Confirm / finish buttons outside the single sidebar Submit Test */
.quizSEO_ssc_official input[name="endQuizSummary"],
.quizSEO_ssc_official input[name="endInfopage"],
.quizSEO_ssc_official input[name="finishQuiz"],
.quizSEO_ssc_official input[name="checkSingle"] {
    display: none !important;
}

/* Hide plugin-cloned Mark/Submit pairs that sit above content */
.quizSEO_ssc_official .quizSEO_actionButtons,
.quizSEO_ssc_official .quizSEO_actionButtonsAbove {
    display: none !important;
}

/* Single Submit Test under Section Palette */
.quizSEO_ssc_official .ssc-sidebar-actions {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quizSEO_ssc_official .ssc-sidebar-actions .ssc-submit-test-btn,
.quizSEO_ssc_official .ssc-sidebar-actions input[name="quizSummary"] {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    background: var(--ssc-brand) !important;
    color: var(--ssc-on-brand) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

/* Category (section) palette in sidebar */
.quizSEO_ssc_official .ssc-exam-sidebar .quizSEO_questionPalette {
    margin: 8px 0 0 !important;
    padding: 8px !important;
    border: 1px solid var(--ssc-line-soft-warm) !important;
    border-radius: 6px !important;
    background: var(--ssc-surface-alt) !important;
}

/* Mobile: two equal-width rows — original SSC mobile arrangement
   Row 1: Previous | Clear Response | Save & Next
   Row 2: Mark for Review | Submit Test
   Desktop rules (min-width: 769px) are unchanged. */
@media (max-width: 768px) {
    .quizSEO_ssc_official .ssc-qbar-row--primary {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        align-items: stretch !important;
    }
    /* Flatten left/right groups so all primary buttons share one flex row */
    .quizSEO_ssc_official .ssc-qbar-row--primary .ssc-qbar-left,
    .quizSEO_ssc_official .ssc-qbar-row--primary .ssc-qbar-right {
        display: contents !important;
    }
    .quizSEO_ssc_official .ssc-qbar-row--primary input[name="back"],
    .quizSEO_ssc_official .ssc-qbar-row--primary input[name="clearResponse"],
    .quizSEO_ssc_official .ssc-qbar-row--primary input[name="next"],
    .quizSEO_ssc_official .ssc-qbar-row--primary input[name="check"] {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 9px 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: center !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
        height: auto !important;
        line-height: 1.3 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    /* Tip / Skip stay off primary row on mobile; Review lives on secondary */
    .quizSEO_ssc_official .ssc-qbar-row--primary input[name="tip"],
    .quizSEO_ssc_official .ssc-qbar-row--primary input[name="skip"],
    .quizSEO_ssc_official .ssc-qbar-row--primary input[name="review"] {
        display: none !important;
    }

    .quizSEO_ssc_official .ssc-qbar-row--secondary {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        margin-top: 6px !important;
        align-items: stretch !important;
    }
    .quizSEO_ssc_official .ssc-qbar-row--secondary input,
    .quizSEO_ssc_official .ssc-qbar-row--secondary .ssc-mobile-submit {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 9px 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: center !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
        height: auto !important;
        line-height: 1.3 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Ensure the in-question bar is visible on mobile (not desktop-hidden) */
    .quizSEO_ssc_official .ssc-question-action-bar.ssc-qbar--desktop-hidden {
        position: static !important;
        width: auto !important;
        height: auto !important;
        padding: 8px 0 !important;
        margin: 12px 0 0 !important;
        overflow: visible !important;
        clip: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: block !important;
    }

    /* Sidebar Submit keeps normal SSC button look */
    .quizSEO_ssc_official .ssc-sidebar-actions input.quizSEO_button,
    .quizSEO_ssc_official .ssc-sidebar-actions input[type="button"],
    .quizSEO_ssc_official .ssc-sidebar-actions .ssc-submit-test-btn,
    .quizSEO_ssc_official .ssc-sidebar-actions input[name="quizSummary"] {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        transition: none !important;
        transform: none !important;
    }
}



/* Section palette: hide main numbered list when category palette is present */
.quizSEO_ssc_official .ssc-exam-sidebar .quizSEO_reviewQuestion {
    /* toggled by JS; default visible only as fallback */
}
.quizSEO_ssc_official.ssc-has-section-palette .ssc-exam-sidebar .quizSEO_reviewQuestion {
    display: none !important;
}
.quizSEO_ssc_official.ssc-has-section-palette .ssc-exam-sidebar .quizSEO_questionPalette {
    display: block !important;
}


/* Mobile: when category palette is above the question, SHOW main palette below
   (overrides .ssc-has-section-palette .quizSEO_reviewQuestion { display:none }). */
@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"].ssc-has-section-palette .ssc-exam-sidebar .quizSEO_reviewQuestion,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"] .ssc-exam-sidebar .ssc-main-palette-slot .quizSEO_reviewQuestion,
/* removed force-show main under category strip */

/* removed force-show main under category strip */

    /* Main palette grid can wrap normally BELOW; only the ABOVE strip is single-row */
/* removed force-show main under category strip */
}

/* Force: no question palette under top category tabs */
.quizSEO_ssc_official .ssc-topbar .quizSEO_questionPalette,
.quizSEO_ssc_official .ssc-cats-slot .quizSEO_questionPalette,
.quizSEO_ssc_official .quizSEO_allCategoriesNav + .quizSEO_questionPalette,
.quizSEO_ssc_official .ssc-topbar__row--cats + .quizSEO_questionPalette {
    display: none !important;
}

/* Section palette in sidebar only */
.quizSEO_ssc_official.ssc-has-section-palette .ssc-exam-sidebar .quizSEO_reviewQuestion {
    display: none !important;
}
.quizSEO_ssc_official.ssc-has-section-palette .ssc-exam-sidebar .quizSEO_questionPalette {
    display: block !important;
}


/* Mobile: when category palette is above the question, SHOW main palette below
   (overrides .ssc-has-section-palette .quizSEO_reviewQuestion { display:none }). */
@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"].ssc-has-section-palette .ssc-exam-sidebar .quizSEO_reviewQuestion,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"] .ssc-exam-sidebar .ssc-main-palette-slot .quizSEO_reviewQuestion,
/* removed force-show main under category strip */

/* removed force-show main under category strip */

    /* Main palette grid can wrap normally BELOW; only the ABOVE strip is single-row */
/* removed force-show main under category strip */
}

/* Desktop: Mark for Review must be visible in primary row (mobile secondary row) */
@media (min-width: 769px) {
    .quizSEO_ssc_official .ssc-qbar-row--primary input[name="review"],
    .quizSEO_ssc_official .ssc-qbar-left input[name="review"] {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .quizSEO_ssc_official .ssc-qbar-row--secondary {
        display: none !important;
    }
}

/* ==========================================================================
   DESKTOP REAL-EXAM FOOTER (min-width 769px)
   --------------------------------------------------------------------------
   Classic SSC CBT layout:

     Left column bottom : Previous | Clear Response | Mark for Review | Save & Next
     Right column bottom: Submit Test only

   The footer is a grid row under the left column only. Proxy buttons live
   there so the bar never scrolls away. Real inputs stay inside .quizSEO_listItem
   (hidden) so plugin lookups keep working.

   Mobile is untouched.
   ========================================================================== */
@media (min-width: 769px) {
    /* Body = question area + sidebar + footer under left column */
    .quizSEO_ssc_official .ssc-exam-body {
        display: grid !important;
        grid-template-columns: 1fr 280px !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        align-items: stretch;
        min-height: 420px;
    }

    .quizSEO_ssc_official .ssc-exam-main {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: 8px;
    }

    .quizSEO_ssc_official .ssc-exam-sidebar {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-width: 0;
        min-height: 0;
        display: flex !important;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        border-left: 1px solid var(--ssc-line);
    }

    /* Footer under LEFT column only — real exam action strip */
    .quizSEO_ssc_official .ssc-footer-bar {
        grid-column: 1;
        grid-row: 2;
        display: none; /* shown when .ssc-footer-bar--active is set by JS */
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        /* 11px, not 10px: this strip sits beside the palette column footer,
           and one pixel less made the two rows sit visibly off each other. */
        padding: 11px 14px;
        background: var(--ssc-surface-raised);
        border-top: 1px solid var(--ssc-line-cool);
        box-shadow: none;
        z-index: 5;
    }

    .quizSEO_ssc_official .ssc-footer-bar.ssc-footer-bar--active {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
        gap: 12px;
    }

    .quizSEO_ssc_official .ssc-footer-bar__left {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Save & Next sits on the right edge of the left column */
    .quizSEO_ssc_official .ssc-footer-bar__right {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .quizSEO_ssc_official .ssc-footer-bar input.quizSEO_button,
    .quizSEO_ssc_official .ssc-footer-bar input.ssc-proxy-btn,
    .quizSEO_ssc_official .ssc-footer-bar input[type="button"] {
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: auto !important;
        min-width: 120px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 4px !important;
        border: 1px solid var(--ssc-brand) !important;
        background: var(--ssc-surface) !important;
        color: var(--ssc-head) !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        cursor: pointer !important;
        box-shadow: none !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        transition: none !important;
        transform: none !important;
    }

    .quizSEO_ssc_official .ssc-footer-bar input.ssc-proxy-btn--primary,
    .quizSEO_ssc_official .ssc-footer-bar input[data-proxy-for="next"],
    .quizSEO_ssc_official .ssc-footer-bar input[data-proxy-for="check"] {
        background: var(--ssc-brand) !important;
        color: var(--ssc-on-brand) !important;
        border-color: var(--ssc-brand-dark) !important;
    }

    /* Real in-question bars are replaced by the footer on desktop */
    .quizSEO_ssc_official .ssc-question-action-bar.ssc-qbar--desktop-hidden {
        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;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /*
     * Prevent FOUC: as soon as the exam is started on desktop, hide the
     * in-question nav controls (wrapped bars AND raw inputs not yet moved).
     * Footer proxies (outside .quizSEO_listItem) stay visible.
     * Stops "buttons appear above, then jump to bottom" on start.
     */
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-question-action-bar,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .quizSEO_listItem > input[name="next"],
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .quizSEO_listItem > input[name="back"],
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .quizSEO_listItem > input[name="check"],
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .quizSEO_listItem > input[name="clearResponse"],
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .quizSEO_listItem > input[name="review"],
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .quizSEO_listItem > input[name="skip"],
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .quizSEO_listItem > input[name="tip"],
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-question-action-bar input[name="next"],
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-question-action-bar input[name="back"],
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-question-action-bar input[name="check"],
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-question-action-bar input[name="clearResponse"],
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-question-action-bar input[name="review"],
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-question-action-bar input[name="skip"],
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-question-action-bar input[name="tip"] {
        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;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Sidebar: scrollable palette ABOVE, Submit locked BELOW (not sticky).
       Content can never paint under or below the Submit button. */
    .quizSEO_ssc_official .ssc-exam-sidebar {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important; /* scroll lives only in .ssc-sidebar-scroll */
    }

    .quizSEO_ssc_official .ssc-sidebar-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .quizSEO_ssc_official .ssc-sidebar-actions {
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        position: relative !important; /* not sticky — outside the scroll pane */
        bottom: auto !important;
        z-index: 8;
        background: var(--ssc-surface-alt) !important;
        padding: 10px !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-bottom: -12px !important;
        border-top: 1px solid var(--ssc-line) !important;
        box-shadow: none !important;
        isolation: isolate;
    }

    .quizSEO_ssc_official .ssc-sidebar-actions::before {
        display: none !important;
    }

    .quizSEO_ssc_official .ssc-sidebar-actions .ssc-submit-test-btn,
    .quizSEO_ssc_official .ssc-sidebar-actions input[name="quizSummary"] {
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 12px !important;
        position: relative;
        z-index: 1;
        box-sizing: border-box !important;
        transition: none !important;
    }
}

/* Fullscreen desktop: fill the viewport height so the footer sits at the bottom */
@media (min-width: 769px) {
    .quizSEO_ssc_official.ssc-is-fullscreen .ssc-exam-body {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
    }

    .quizSEO_ssc_official.ssc-is-fullscreen .ssc-exam-main,
    .quizSEO_ssc_official.ssc-is-fullscreen .ssc-exam-sidebar {
        overflow-y: auto;
    }

    .quizSEO_ssc_official.ssc-is-fullscreen .ssc-footer-bar {
        flex: 0 0 auto;
    }
}

/* Dual Section Palette: Category + All (scrollable) */
.quizSEO_ssc_official .ssc-section-palette-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.quizSEO_ssc_official .ssc-palette-subtitle {
    font-size: 12px;
    font-weight: 700;
    color: var(--ssc-head);
    margin: 6px 0 2px;
    letter-spacing: 0.02em;
}

/* HY-CHANGE 2026-08-30g — hide static chrome labels (desktop + mobile)
   "Section Palette" + "Category Question Palette" */
.quizSEO_ssc_official .ssc-sidebar-section-title,
.quizSEO_ssc_official .ssc-palette-subtitle--cat {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
}
.quizSEO_ssc_official .ssc-cat-palette-slot .quizSEO_questionPalette {
    display: block !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid var(--ssc-line-soft-warm) !important;
    border-radius: 6px !important;
    background: var(--ssc-surface-alt) !important;
    max-height: none;
}
.quizSEO_ssc_official .ssc-main-palette-slot {
    /* 6 rows of 30px buttons + 5 gaps of 6px + 12px padding ≈ 222px */
    max-height: 228px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--ssc-line-soft-warm);
    border-radius: 6px;
    background: var(--ssc-surface);
    padding: 6px;
}
.quizSEO_ssc_official .ssc-main-palette-slot .quizSEO_reviewQuestion {
    display: block !important;
    margin: 0 !important;
    /* Override quizSEO_front.css max-height:100px (~3 rows) so the slot
       controls height and can show ~6 rows before scrolling. */
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
}
.quizSEO_ssc_official .ssc-main-palette-slot .quizSEO_reviewQuestion ol {
    margin: 0;
    padding: 0;
}
/* Override earlier rule that hid main list when section palette present */
.quizSEO_ssc_official.ssc-has-section-palette .ssc-exam-sidebar .quizSEO_reviewQuestion {
    display: block !important;
}
.quizSEO_ssc_official.ssc-has-section-palette .ssc-exam-sidebar .ssc-main-palette-slot .quizSEO_reviewQuestion {
    display: block !important;
}

/* SSC Submit confirmation popup */
.quizSEO_ssc_official .ssc-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(15, 61, 76, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.quizSEO_ssc_official .ssc-confirm-modal {
    background: var(--ssc-surface);
    border-radius: 10px;
    max-width: 420px;
    width: 100%;
    padding: 22px 20px 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    border: 1px solid var(--ssc-line-soft-warm);
}
.quizSEO_ssc_official .ssc-confirm-modal__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ssc-head);
    margin: 0 0 10px;
}
.quizSEO_ssc_official .ssc-confirm-modal__body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ssc-text);
    margin-bottom: 18px;
}
.quizSEO_ssc_official .ssc-confirm-modal__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ssc-text);
    margin-bottom: 6px;
}
.quizSEO_ssc_official .ssc-confirm-modal__select {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--ssc-line);
    border-radius: 5px;
    background: var(--ssc-surface);
    color: var(--ssc-text);
    margin-bottom: 14px;
    box-sizing: border-box;
}
.quizSEO_ssc_official .ssc-confirm-modal__warning {
    font-size: 13px;
    font-weight: 700;
    color: #cc0000;
    background: #fff3f3;
    border: 1px solid #f3c2c2;
    border-radius: 5px;
    padding: 8px 10px;
    margin-bottom: 12px;
}
.quizSEO_ssc_official .ssc-confirm-modal__ack {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #cc0000;
    margin-bottom: 18px;
    cursor: pointer;
}
.quizSEO_ssc_official .ssc-confirm-modal__ack input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}
.quizSEO_ssc_official .ssc-confirm-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.quizSEO_ssc_official .ssc-confirm-modal__cancel,
.quizSEO_ssc_official .ssc-confirm-modal__ok {
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--ssc-brand);
}
.quizSEO_ssc_official .ssc-confirm-modal__cancel {
    background: var(--ssc-surface);
    color: var(--ssc-head);
}
.quizSEO_ssc_official .ssc-confirm-modal__ok {
    background: var(--ssc-brand);
    color: var(--ssc-on-brand);
    border-color: var(--ssc-brand);
}
.quizSEO_ssc_official .ssc-confirm-modal__ok:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* SSC: never show the default check-page question palette UI */
.quizSEO_ssc_official .quizSEO_checkPage {
    display: none !important;
}
.quizSEO_ssc_official .quizSEO_checkPage .quizSEO_box,
.quizSEO_ssc_official .quizSEO_checkPage ol {
    display: none !important;
}

/* After submit: hide category tabs + category timers */
.quizSEO_ssc_official.ssc-quiz-finished .ssc-topbar__row--cats,
.quizSEO_ssc_official.ssc-quiz-finished .ssc-topbar__cat-time,
.quizSEO_ssc_official.ssc-quiz-finished .ssc-cats-slot,
.quizSEO_ssc_official.ssc-quiz-finished .ssc-topbar__global-time,
.quizSEO_ssc_official.ssc-quiz-finished .ssc-topbar__row--qmeta,
.quizSEO_ssc_official.ssc-quiz-finished .ssc-exam-body,
.quizSEO_ssc_official.ssc-quiz-finished .ssc-footer-bar,
.quizSEO_ssc_official.ssc-quiz-finished .quizSEO_allCategoriesNav,
.quizSEO_ssc_official.ssc-quiz-finished .quizSEO_categoryTabs,
.quizSEO_ssc_official.ssc-quiz-finished .quizSEO_categoryTab,
.quizSEO_ssc_official.ssc-quiz-finished .category-timer-display,
.quizSEO_ssc_official.ssc-quiz-finished .ssc-section-palette-wrap,
.quizSEO_ssc_official.ssc-quiz-finished .ssc-sidebar-actions {
    display: none !important;
}

/* SSC UI already shows "Question X of Y" in the topbar (.ssc-topbar__qnum,
   via updateQuestionMeta()). The plugin's normal per-question label above
   every question would otherwise print the same text a second time, right
   above the question. Scoped to SSC only — Default view is untouched. */
.quizSEO_ssc_official .quizSEO_question_page {
    display: none !important;
}

/* Default view: same rule when finished */
.quizSEO-quiz-finished .quizSEO_allCategoriesNav,
.quizSEO-quiz-finished .quizSEO_categoryTabs,
.quizSEO-quiz-finished .quizSEO_categoryTab,
.quizSEO-quiz-finished .category-timer-display,
.quizSEO-quiz-finished [id^="timer-category-"] {
    display: none !important;
}

/* Results must remain visible after submit (moved outside exam body) */
.quizSEO_ssc_official.ssc-quiz-finished .quizSEO_results {
    display: block !important;
    visibility: visible !important;
    padding: 16px;
}
.quizSEO_ssc_official.ssc-quiz-finished .ssc-topbar__row--name {
    display: flex !important;
}

/* ==========================================================================
   ANALYSIS / RESULTS PAGE — always allow document scroll
   --------------------------------------------------------------------------
   After Submit Test the candidate lands on the analysis page (score summary
   + View Answers). Several exam/contest paths leave overflow:hidden locks on
   <html>/<body>, or leave the root/shell position:fixed + height:100%.
   JS unlocks those in onQuizFinished(); this CSS is the safety net so the
   analysis page scrolls on every device even if a late timer re-adds a lock
   class. Review mode (.ssc-review-mode) is excluded: View Answers re-enters
   a fixed exam chrome with its own internal scroll on purpose.
   ========================================================================== */
html:has(.quizSEO_ssc_official.ssc-quiz-finished:not(.ssc-review-mode)),
html:has(.quizSEO_ssc_official.ssc-quiz-finished:not(.ssc-review-mode)) body {
    overflow: auto !important;
    height: auto !important;
    position: static !important;
}
.quizSEO_ssc_official.ssc-quiz-finished:not(.ssc-review-mode) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
}
html:has(.quizSEO_ssc_official.ssc-quiz-finished:not(.ssc-review-mode)) .quizseo-contest-exam-shell {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    overflow: visible !important;
    z-index: auto !important;
}

/* Question text in black */
.quizSEO_ssc_official .ssc-exam-main,
.quizSEO_ssc_official .ssc-exam-main .quizSEO_question,
.quizSEO_ssc_official .ssc-exam-main .quizSEO_question_text,
.quizSEO_ssc_official .ssc-exam-main .quizSEO_questionList,
.quizSEO_ssc_official .ssc-exam-main .quizSEO_questionListItem,
.quizSEO_ssc_official .ssc-exam-main .quizSEO_questionListItem label,
.quizSEO_ssc_official .ssc-exam-main .quizSEO_questionListItem span,
.quizSEO_ssc_official .ssc-exam-main p,
.quizSEO_ssc_official .ssc-exam-main li {
    color: var(--ssc-text-strong) !important;
}

/* Attempt summary above legend */
.quizSEO_ssc_official .ssc-attempt-summary {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--ssc-line);
    border-radius: 6px;
    background: var(--ssc-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--ssc-text-strong);
    line-height: 1.4;
}
.quizSEO_ssc_official .ssc-attempt-summary strong {
    color: var(--ssc-link, var(--ssc-brand));
}

/* ==========================================================================
   TRUE FULLSCREEN (F11-style) — opt-in per quiz
   --------------------------------------------------------------------------
   Every rule here is scoped to either a :fullscreen pseudo-class or the
   .ssc-pseudo-fullscreen fallback class, so none of it can apply to a quiz
   that has the option switched off, and none of it can reach a Default or
   Custom View quiz at all.

   The vendor-prefixed selectors are written as SEPARATE rule blocks on
   purpose. A browser that does not recognise one pseudo-class in a comma
   separated selector list discards the WHOLE rule, which would silently drop
   the layout in whichever engine came first.
   ========================================================================== */

/* --- Toggle button in the top bar ---------------------------------------- */
.quizSEO_ssc_official .ssc-fs-toggle {
    justify-self: end;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ssc-head);
    background: var(--ssc-chip);
    border: 1px solid var(--ssc-line-strong);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.quizSEO_ssc_official .ssc-fs-toggle:hover {
    background: var(--ssc-chip-hover);
    border-color: var(--ssc-brand);
}

/* Hidden until the test is actually running, and again once it is submitted. */
.quizSEO_ssc_official:not(.ssc-quiz-started) .ssc-fs-toggle,
.quizSEO_ssc_official.ssc-quiz-finished .ssc-fs-toggle {
    display: none !important;
}

/* --- AdSense placements (top / main / footer) ----------------------------- */
/* Hidden whenever true fullscreen lockdown is active, if the admin setting
   "Hide ads in fullscreen" is enabled - controlled by adding this class only
   when quizSEOAdSettings.hideFullscreen was true at build time (see JS). */
.quizSEO_ssc_official.ssc-is-fullscreen .quizseo-ad-slot--hide-in-fs {
    display: none !important;
}

@media (max-width: 768px) {
    .quizseo-ad-slot--top,
    .quizseo-ad-slot--main,
    .quizseo-ad-slot--footer {
        margin-left: 8px;
        margin-right: 8px;
    }
}

/* --- Shared fullscreen layout -------------------------------------------- */
.quizSEO_ssc_official.ssc-is-fullscreen {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--ssc-surface);
}

.quizSEO_ssc_official.ssc-is-fullscreen .ssc-exam-body {
    flex: 1 1 auto;
    min-height: 0;
}

.quizSEO_ssc_official.ssc-is-fullscreen .ssc-exam-main,
.quizSEO_ssc_official.ssc-is-fullscreen .ssc-exam-sidebar {
    overflow-y: auto;
}

.quizSEO_ssc_official.ssc-is-fullscreen .quizSEO_results,
.quizSEO_ssc_official.ssc-is-fullscreen .quizSEO_text {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.quizSEO_ssc_official.ssc-is-fullscreen .ssc-footer-bar {
    flex: 0 0 auto;
}

/* Give the passage split the extra height fullscreen just freed up. */
.quizSEO_ssc_official.ssc-is-fullscreen .ssc-passage-left,
.quizSEO_ssc_official.ssc-is-fullscreen .ssc-passage-right {
    max-height: none;
}

/* --- Native fullscreen: backdrop + sizing, one block per engine ----------- */
.quizSEO_ssc_official:fullscreen {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    margin: 0 !important;
    background: var(--ssc-surface);
}
.quizSEO_ssc_official:-webkit-full-screen {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    margin: 0 !important;
    background: var(--ssc-surface);
}
.quizSEO_ssc_official:-moz-full-screen {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    margin: 0 !important;
    background: var(--ssc-surface);
}
.quizSEO_ssc_official:-ms-fullscreen {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    margin: 0 !important;
    background: var(--ssc-surface);
}

.quizSEO_ssc_official::backdrop {
    background: var(--ssc-surface);
}

/* --- Fallback for engines with no element fullscreen (iPhone Safari) ------ */
.quizSEO_ssc_official.ssc-pseudo-fullscreen {
    position: fixed;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999998;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

html.quizSEO_ssc_fs_lock,
html.quizSEO_ssc_fs_lock body {
    overflow: hidden !important;
}

/* ==========================================================================
   MOBILE — pin the question action bar to the bottom of the screen
   --------------------------------------------------------------------------
   The action bar is built by styleQuestionActionBars() as the last child of
   each .quizSEO_listItem, so on mobile - where .ssc-exam-body collapses to a
   single column - it sits at the end of the question and scrolls out of reach
   on long passages.

   position: sticky rather than fixed, deliberately:

   - No DOM move. The real next / back / clearResponse inputs stay inside
     .quizSEO_listItem, so the nine currentQuestion.find('input[name="next"]')
     lookups in quizSEO_front.js keep resolving. Moving them makes the plugin
     think navigation is missing and call createDynamicNextSectionButton(),
     which spawns duplicate buttons.
   - Sticky is scoped to its own .quizSEO_listItem, so a quiz with
     questions_per_page > 1 gets one bar per question instead of several
     fixed bars stacked on top of each other.
   - position: fixed resolves against the nearest transformed ancestor rather
     than the viewport. buildShellInner() already walks up through page-builder
     wrappers (Elementor, Astra), any of which may carry a transform.

   Failure mode if a theme wrapper does clip overflow: the bar simply stops
   sticking and behaves exactly as it does today. Nothing breaks.

   Everything here lives inside the mobile breakpoint, so desktop is untouched
   by construction.
   ========================================================================== */

@media (max-width: 768px) {
    .quizSEO_ssc_official .ssc-question-action-bar {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: var(--ssc-surface);
        border-top: 1px solid var(--ssc-line);
        margin: 12px 0 0;
        padding: 8px 0;
        box-shadow: 0 -2px 6px rgba(15, 61, 76, 0.12);
    }

    /* Clears the home indicator on notched iPhones. Separate declaration so
       browsers without env() keep the plain padding above. */
    .quizSEO_ssc_official .ssc-question-action-bar {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    /* Sticky is cancelled silently by any ancestor that clips overflow.
       .ssc-exam-main is deliberately excluded: in fullscreen it owns the
       scroll (.ssc-is-fullscreen .ssc-exam-main { overflow-y: auto }) and
       forcing it visible here would break that. */
    .quizSEO_ssc_official .quizSEO_quiz,
    .quizSEO_ssc_official .quizSEO_list,
    .quizSEO_ssc_official .quizSEO_listItem {
        overflow: visible;
    }

    /* Keeps the last option clear of the bar when it is resting in flow. */
    .quizSEO_ssc_official .quizSEO_listItem .quizSEO_question {
        padding-bottom: 4px;
    }
}

/* ==========================================================================
   MOBILE + FULLSCREEN — scroll the whole exam, not a squeezed inner pane
   --------------------------------------------------------------------------
   The desktop fullscreen layout above makes .ssc-exam-main its own scroll
   container so the palette and the question scroll independently beside each
   other. On mobile that assumption collapses: .ssc-exam-body drops to a single
   column, the stacked topbar takes ~450px of an ~900px screen, and
   .ssc-exam-main - being flex: 1 1 auto inside what is left - is squeezed to a
   couple of hundred pixels.

   The sticky action bar then correctly pinned itself to the bottom of THAT
   scrollport, which lands in the middle of the screen on top of the question
   text still scrolling underneath it.

   Fix: on mobile, stop .ssc-exam-main being a scroll container at all and let
   the root scroll the whole document. The action bar's nearest scrollport
   becomes the root, so bottom: 0 resolves to the actual bottom of the screen.

   .ssc-topbar becomes sticky to compensate - with the root scrolling, the
   timer and section tabs would otherwise scroll out of sight mid-exam.
   ========================================================================== */

@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-is-fullscreen .ssc-exam-body {
        flex: 0 0 auto;
    }

    .quizSEO_ssc_official.ssc-is-fullscreen .ssc-exam-main,
    .quizSEO_ssc_official.ssc-is-fullscreen .ssc-exam-sidebar,
    .quizSEO_ssc_official.ssc-is-fullscreen .quizSEO_results,
    .quizSEO_ssc_official.ssc-is-fullscreen .quizSEO_text {
        overflow: visible;
    }

    .quizSEO_ssc_official.ssc-is-fullscreen .ssc-topbar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 6;
        background: var(--ssc-surface-alt);
    }

    /* The topbar stacks to one column at <=960px, so every row costs three
       lines. Tighten it so it does not eat half the screen. */
    .quizSEO_ssc_official .ssc-topbar__row {
        padding: 5px 10px;
        min-height: 0;
        gap: 4px 10px;
    }

    /* Keep "Question n of m" and the fullscreen toggle on one line instead of
       letting the JS-inserted spacer push the button onto its own row. */
    .quizSEO_ssc_official .ssc-fs-spacer {
        display: none;
    }

    .quizSEO_ssc_official .ssc-topbar__row--qmeta {
        grid-template-columns: 1fr auto;
    }

    .quizSEO_ssc_official .ssc-fs-toggle {
        justify-self: end;
        padding: 3px 10px;
        font-size: 11px;
    }
}

/* ==========================================================================
   MOBILE HEADER — official-exam-style single strip
   --------------------------------------------------------------------------
   Paired with applyMobileHeader() in ssc-exam-template.js, which adds
   .ssc-mobile-header and moves the timer, fullscreen toggle, section time and
   question meta out of their original rows. Both the class and the moves are
   reverted above 768px, so nothing here can reach desktop.
   ========================================================================== */

@media (max-width: 768px) {
    /* Quiz name and the old question-meta row are gone: their contents now
       live in the tabs strip and next to the question respectively. */
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__row--name,
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__row--qmeta {
        display: none !important;
    }

    /* Grid layout: tabs strip occupies the left column (spans both rows,
       scrolls sideways), Time and the fullscreen toggle stack in the right
       column - Time on top, the button underneath, both right-aligned.

       Grid instead of flex on purpose: the later "MOBILE - horizontally
       scrolling section strip" rule also targets .ssc-topbar__cats and sets
       flex/flex-wrap properties. Under a flex parent those fought whatever
       was declared here. Under a grid parent, "flex" and "flex-wrap" are
       simply ignored on a grid item, so that rule's overflow-x/background
       styling still applies but can no longer fight this layout. */
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__row--cats {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 10px;
        row-gap: 2px;
        padding: 5px 8px;
        min-height: 0;
        /* Safety net: the "auto" column below is sized to fit the Time
           label, and the "1fr" column is allowed to shrink toward 0 to make
           room for it — that should always be enough on its own. This is a
           second line of defence in case some ancestor container is ever
           narrower than both columns combined: instead of the row's overflow
           being silently clipped (which is what could make "Time:" disappear
           on an especially narrow phone), the row itself scrolls a few
           pixels so the label stays reachable rather than invisible. */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* The old grid spacers from the desktop layout are dead weight here. */
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__row--cats > div:empty {
        display: none;
    }

    /* Tabs: left column, spans both rows, scrolls sideways. */
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__cats {
        grid-column: 1;
        grid-row: 1 / 3;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__cats::-webkit-scrollbar {
        display: none;
    }

    /* Time: right column, top row, right-aligned. flex-shrink:0 + min-width
       explicitly protect this from ever being compressed to nothing, on top
       of the "auto" grid track already sizing to its content — belt and
       suspenders specifically because this must never be allowed to
       disappear on any screen size. */
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__global-time {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        display: flex;
        flex-shrink: 0;
        align-items: baseline;
        gap: 4px;
        white-space: nowrap;
        min-width: max-content;
    }

    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__global-time .ssc-topbar__label {
        display: inline;
        font-size: 11px;
        color: var(--ssc-muted-warm);
    }

    /* "English"/"हिन्दी" -> "Eng"/"Hindi" on mobile — same breakpoint as the
       qmeta relocation above, so the label swap and the layout change
       always happen together, never one without the other. Section Time
       has its own rule below: removed entirely on mobile per updated
       request, rather than abbreviated like the language labels. */
    .quizSEO_ssc_official.ssc-mobile-header .ssc-lbl-full { display: none; }
    .quizSEO_ssc_official.ssc-mobile-header .ssc-lbl-short { display: inline; }

    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__qmeta {
        gap: 8px;
        flex-wrap: nowrap;
    }
    /* Section Time: removed from the mobile row (desktop is unaffected —
       this rule only exists inside the max-width:768px block). The element
       stays in the DOM (still updated with the live value under the hood)
       so no other logic needs to change; it simply isn't shown here. */
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__qmeta .ssc-topbar__cat-time {
        display: none !important;
    }
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__qmeta .quizSEO_langBar .quizSEO_langBtn {
        padding: 3px 8px;
        font-size: 11px;
    }

    .quizSEO_ssc_official.ssc-mobile-header .quizSEO_time_limit {
        gap: 4px !important;
    }
    .quizSEO_ssc_official.ssc-mobile-header .quizSEO_time_limit .time span {
        font-size: 13px;
    }

    /* Exit full screen / Full screen: right column, bottom row, right-aligned. */
    .quizSEO_ssc_official.ssc-mobile-header .ssc-fs-toggle {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        width: max-content;
    }

    /* Question meta above the question (running test + review on mobile).
       Line: [ Q x/y ] [Save] [Report] [Eng | हिंदी] — full content width. */
    .quizSEO_ssc_official.ssc-mobile-header .ssc-exam-main > .ssc-topbar__qmeta,
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar > .ssc-topbar__qmeta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 0 8px !important;
        padding: 0 0 6px !important;
        font-size: 11px;
        color: var(--ssc-muted-warm);
        border-bottom: 1px solid var(--ssc-line-soft-cool);
        overflow-x: hidden !important;
    }

    /* Tight top padding under sticky header (tabs + Q strip). */
    .quizSEO_ssc_official.ssc-mobile-header .ssc-exam-main {
        padding-top: 4px;
    }

    /* One thin line under sticky header; tighten gaps around palette strip. */
    .quizSEO_ssc_official.ssc-mobile-header.ssc-mobile-palette-above .ssc-mobile-palette-strip {
        border-top: none !important;
        margin: 0 0 4px 0 !important;
        padding: 2px 0 2px !important;
    }

    /* Tighten gap above/below "X. Question + Night mode + timer" row */
    .quizSEO_ssc_official.ssc-mobile-header .quizSEO_listItem .quizSEO_sectionRow {
        margin: 0 0 4px !important;
        padding: 2px 0 !important;
    }

    .quizSEO_ssc_official.ssc-mobile-header .ssc-exam-main > .ssc-topbar__qmeta .ssc-topbar__qnum {
        font-weight: 600;
        color: var(--ssc-head);
        flex: 0 1 auto;
        min-width: 0;
        max-width: 42%;
    }

    .quizSEO_ssc_official.ssc-mobile-header .ssc-exam-main > .ssc-topbar__qmeta .qsQtools {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        gap: 6px !important;
        margin: 0 !important;
        margin-left: auto !important;
    }

    .quizSEO_ssc_official.ssc-mobile-header .ssc-exam-main > .ssc-topbar__qmeta .quizSEO_langBar {
        flex: 0 0 auto;
        margin-left: 0 !important;
        max-width: 45%;
    }

    .quizSEO_ssc_official.ssc-mobile-header .ssc-exam-main > .ssc-topbar__qmeta .ssc-topbar__cat-time {
        display: none !important; /* section time stays off the mobile Ques line */
    }

    /* Running test (mobile): Save / Report live on the Ques line only.
       Hide any copy left on the question card so the strip is the single source. */
    .quizSEO_ssc_official.ssc-mobile-header .quizSEO_sectionRow > .qsQtools,
    .quizSEO_ssc_official.ssc-mobile-header .quizSEO_listItem > .qsQtools,
    .quizSEO_ssc_official.ssc-mobile-header .quizSEO_questionList ~ .qsQtools {
        display: none !important;
    }
    .quizSEO_ssc_official.ssc-mobile-header .ssc-exam-main > .ssc-topbar__qmeta > .qsQtools,
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar > .ssc-topbar__qmeta > .qsQtools,
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__qmeta > .qsQtools {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        margin-left: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ==========================================================================
   MOBILE — horizontally scrolling section strip
   --------------------------------------------------------------------------
   With four or more sections the tabs no longer fit on one line. They scroll
   sideways instead of wrapping, which is what kept the header short.

   The !important flags are not decoration: QuizSEO_View_FrontQuiz.php prints
   style="display: flex; flex-wrap: wrap; gap: 5px;" INLINE on
   .quizSEO_categoryTabs. Inline styles outrank a stylesheet, so without these
   the tabs wrap to a second row and the strip never scrolls at all. That went
   unnoticed while the test paper had only two sections.

   The edge shadows use background-attachment: local, so they appear only on
   the side that actually has more content and disappear at each end. A static
   fade would keep promising more tabs on a two-section paper; this does not,
   and it needs no JavaScript to work out which.
   ========================================================================== */

@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__cats {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        background-image:
            linear-gradient(to right, var(--ssc-surface-alt), var(--ssc-surface-alt-fade)),
            linear-gradient(to left, var(--ssc-surface-alt), var(--ssc-surface-alt-fade)),
            linear-gradient(to right, rgba(15, 61, 76, 0.22), rgba(15, 61, 76, 0)),
            linear-gradient(to left, rgba(15, 61, 76, 0.22), rgba(15, 61, 76, 0));
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 18px 100%, 18px 100%, 9px 100%, 9px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__cats::-webkit-scrollbar {
        display: none;
    }

    /* Overrides the inline flex-wrap: wrap printed by the view. */
    .quizSEO_ssc_official.ssc-mobile-header .quizSEO_allCategoriesNav,
    .quizSEO_ssc_official.ssc-mobile-header .quizSEO_categoryTabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        margin: 0 !important;
        width: auto !important;
    }

    /* Tabs keep their natural width instead of being squeezed to fit. */
    .quizSEO_ssc_official.ssc-mobile-header .quizSEO_categoryTab {
        flex: 0 0 auto !important;
        margin: 0 !important;
        white-space: nowrap !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
    }
}


/* Admin "Main Question Palette" unchecked → hide on all devices in SSC UI */
.quizSEO_ssc_official[data-show-main-palette="0"] .quizSEO_reviewQuestion,
.quizSEO_ssc_official[data-show-main-palette="0"] .ssc-main-palette-slot,
.quizSEO_ssc_official[data-show-main-palette="0"] .ssc-palette-subtitle--all,
.quizSEO_content[data-show-main-palette="0"].quizSEO_ssc_official .quizSEO_reviewQuestion,
.quizSEO_content[data-show-main-palette="0"] .ssc-main-palette-slot,
.quizSEO_content[data-show-main-palette="0"] .ssc-palette-subtitle--all {
    display: none !important;
}


/* ========== MOBILE STRIP SINGLE-PALETTE FINAL ========== */
@media (max-width: 768px) {
    /* Open left/right ends — smooth fade, not a closed box.
       Back to original behaviour: scrolls away with the question content,
       exactly as it was before the bottom-fixed experiment. That version
       now lives in review/View Answers mode only — see
       .ssc-review-mode .ssc-mobile-palette-strip further down. */
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 6px 0 4px !important;
        background: transparent !important;
        border: none !important;
        border-top: 1px solid var(--ssc-line-soft-cool) !important;
        border-bottom: 1px solid var(--ssc-line-soft-cool) !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* Soft fade at left + right so the row does not look cut/closed */
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip::before,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 18px !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip::before {
        left: 0 !important;
        background: linear-gradient(to right, var(--ssc-surface) 0%, var(--ssc-surface-fade) 100%) !important;
    }
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip::after {
        right: 0 !important;
        background: linear-gradient(to left, var(--ssc-surface) 0%, var(--ssc-surface-fade) 100%) !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_questionPalette,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_reviewQuestion {
        display: block !important;
        visibility: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        max-height: none !important;
        overflow: visible !important;
        float: none !important;
        width: 100% !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_paletteButtons,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_questionPalette > div {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        white-space: nowrap !important;
        gap: 8px !important;
        padding: 2px 14px 4px !important;
        box-sizing: border-box !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_paletteButtons::-webkit-scrollbar,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_questionPalette > div::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_questionPaletteButton {
        flex: 0 0 auto !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_reviewQuestion ol {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 8px 4px !important;
        gap: 8px !important;
        float: none !important;
        width: 100% !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_reviewQuestion li {
        flex: 0 0 auto !important;
        float: none !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        margin: 0 !important;
    }

    /* Default: hide sidebar category palette when strip is active.
       Main-below is handled by [data-mobile-main-below] rules below. */
    .quizSEO_ssc_official.ssc-mobile-palette-above:not([data-mobile-main-below="1"]) .ssc-exam-sidebar .ssc-section-palette-wrap,
    .quizSEO_ssc_official.ssc-mobile-palette-above:not([data-mobile-main-below="1"]) .ssc-exam-sidebar .ssc-sidebar-section-title,
    .quizSEO_ssc_official.ssc-mobile-palette-above:not([data-mobile-main-below="1"]) .ssc-exam-sidebar .quizSEO_reviewQuestion,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-exam-sidebar .quizSEO_questionPalette {
        display: none !important;
        visibility: hidden !important;
    }
}


/* Sidebar palette rules when mobile strip is active */
@media (max-width: 768px) {
    /* Category in strip + main BELOW (near Submit): hide only category slot */
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"][data-mobile-main-below="1"] .ssc-exam-sidebar .ssc-cat-palette-slot,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"][data-mobile-main-below="1"] .ssc-exam-sidebar .ssc-palette-subtitle--cat,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"][data-mobile-main-below="1"] .ssc-exam-sidebar .quizSEO_questionPalette {
        display: none !important;
        visibility: hidden !important;
    }

    /* Category in strip + main BELOW: force-show main palette near Submit */
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"][data-mobile-main-below="1"] .ssc-exam-sidebar .ssc-section-palette-wrap,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"][data-mobile-main-below="1"] .ssc-exam-sidebar .ssc-sidebar-section-title,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"][data-mobile-main-below="1"] .ssc-exam-sidebar .ssc-main-palette-slot,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"][data-mobile-main-below="1"] .ssc-exam-sidebar .ssc-palette-subtitle--all,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"][data-mobile-main-below="1"] .ssc-exam-sidebar .quizSEO_reviewQuestion {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Category in strip, main NOT below (main disabled): hide all sidebar palette UI */
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"]:not([data-mobile-main-below="1"]) .ssc-exam-sidebar .ssc-section-palette-wrap,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"]:not([data-mobile-main-below="1"]) .ssc-exam-sidebar .ssc-sidebar-section-title,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"]:not([data-mobile-main-below="1"]) .ssc-exam-sidebar .ssc-main-palette-slot,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"]:not([data-mobile-main-below="1"]) .ssc-exam-sidebar .quizSEO_reviewQuestion,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"]:not([data-mobile-main-below="1"]) .ssc-exam-sidebar .ssc-cat-palette-slot,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="category"]:not([data-mobile-main-below="1"]) .ssc-exam-sidebar .quizSEO_questionPalette {
        display: none !important;
        visibility: hidden !important;
    }

    /* Main-only in strip: hide all sidebar palette UI */
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="main"] .ssc-exam-sidebar .ssc-section-palette-wrap,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="main"] .ssc-exam-sidebar .ssc-sidebar-section-title,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="main"] .ssc-exam-sidebar .ssc-main-palette-slot,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="main"] .ssc-exam-sidebar .quizSEO_reviewQuestion,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="main"] .ssc-exam-sidebar .ssc-cat-palette-slot,
    .quizSEO_ssc_official.ssc-mobile-palette-above[data-mobile-palette="main"] .ssc-exam-sidebar .quizSEO_questionPalette {
        display: none !important;
        visibility: hidden !important;
    }
}


/* Mobile only: section/category name + tabs sized like "Ques X of X" (14px). Desktop untouched. */
@media (max-width: 768px) {
    .quizSEO_ssc_official .ssc-topbar__qnum {
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    /* Keep category tabs same design/size as desktop SSC */
    .quizSEO_ssc_official .quizSEO_categoryTab,
    .quizSEO_ssc_official.ssc-mobile-header .quizSEO_categoryTab {
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 6px 12px !important;
        margin: 0 4px 0 0 !important;
        line-height: normal !important;
        border-radius: 4px !important;
    }

    /* Category name title inside the mobile palette strip */
    .quizSEO_ssc_official .ssc-mobile-palette-strip .quizSEO_questionPalette > div:first-child {
        font-size: 12px !important;
        font-weight: 600 !important;
        margin-bottom: 4px !important;
        padding: 0 8px !important;
        color: var(--ssc-head) !important;
        line-height: 1.3 !important;
    }

    .quizSEO_ssc_official .ssc-mobile-palette-strip .quizSEO_questionPaletteButton {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        font-size: 12px !important;
    }

    /* Section palette title in sidebar (when main below) */
    .quizSEO_ssc_official .ssc-sidebar-section-title {
        font-size: 12px !important;
    }

    .quizSEO_ssc_official .ssc-palette-subtitle {
        font-size: 11px !important;
    }
}

/* HY-CHANGE 2026-08-30h — desktop side-palette category name (not oversized) */
.quizSEO_ssc_official .ssc-exam-sidebar .quizSEO_paletteCategoryTitle,
.quizSEO_ssc_official .ssc-cat-palette-slot .quizSEO_paletteCategoryTitle,
.quizSEO_ssc_official .ssc-section-palette-wrap .quizSEO_paletteCategoryTitle {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    color: var(--ssc-head) !important;
    letter-spacing: normal !important;
}

@media (max-width: 768px) {
    .quizSEO_ssc_official .quizSEO_paletteCategoryTitle,
    .quizSEO_ssc_official .ssc-mobile-palette-strip .quizSEO_paletteCategoryTitle {
        font-size: 12px !important;
        font-weight: 600 !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
        color: var(--ssc-head) !important;
    }
}


/* ========== MOBILE: action buttons fixed at bottom of viewport ==========
   Desktop is untouched (footer bar system stays as-is).
   Only the visible question's bar is fixed — hidden listItems are display:none
   so their bars do not appear. */
@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-question-action-bar,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-question-action-bar.ssc-qbar--desktop-hidden {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        z-index: 9990 !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--ssc-surface) !important;
        border-top: 1px solid var(--ssc-line) !important;
        border-bottom: none !important;
        box-shadow: 0 -4px 16px rgba(15, 61, 76, 0.12) !important;
        box-sizing: border-box !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        clip: auto !important;
        overflow: visible !important;
        height: auto !important;
        transform: none !important;
    }

    /* Keep two-row layout inside the fixed bar */
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-question-action-bar .ssc-qbar-row--primary,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-question-action-bar .ssc-qbar-row--secondary {
        width: 100% !important;
    }

    /* Space so last content is not hidden behind the fixed bar (~2 rows) */
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-exam-main {
        padding-bottom: 130px !important;
    }
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-exam-sidebar {
        padding-bottom: 130px !important;
    }
}


/* Mobile: only ONE Submit Test — the one in the fixed bottom bar (.ssc-mobile-submit).
   Hide the sidebar / other Submit copies. Desktop unchanged. */
@media (max-width: 768px) {
    .quizSEO_ssc_official .ssc-sidebar-actions,
    .quizSEO_ssc_official .ssc-sidebar-actions .ssc-submit-test-btn,
    .quizSEO_ssc_official .ssc-sidebar-actions input[name="quizSummary"],
    .quizSEO_ssc_official .ssc-exam-sidebar input[name="quizSummary"],
    .quizSEO_ssc_official .ssc-footer-bar input[name="quizSummary"],
    .quizSEO_ssc_official input[name="quizSummary"]:not(.ssc-mobile-submit) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* Keep the bottom-bar Submit visible */
    .quizSEO_ssc_official .ssc-qbar-row--secondary .ssc-mobile-submit,
    .quizSEO_ssc_official .ssc-question-action-bar .ssc-mobile-submit {
        display: inline-block !important;
        visibility: visible !important;
        height: auto !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }
}


/* Per-question timer sits on the Section row (right side) — all devices */
.quizSEO_ssc_official .quizSEO_sectionRow {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-weight: 700 !important;
    padding: 4px 0 !important;
    margin: 0 0 6px !important;
}

/* Mobile: night switcher + per-question timer stay on ONE line (also after
   exit full screen when the content box gets slightly narrower). */
@media (max-width: 768px) {
    .quizSEO_ssc_official .quizSEO_sectionRow {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    .quizSEO_ssc_official .quizSEO_sectionRow .quizSEO_sectionName {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    /* Right cluster: theme toggle then timer — never wrap between them */
    .quizSEO_ssc_official .quizSEO_sectionRow .ssc-theme-toggle {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        max-width: none !important;
    }
    .quizSEO_ssc_official .quizSEO_sectionRow .quizSEO_perQuestionTimer {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        white-space: nowrap !important;
    }
    .quizSEO_ssc_official .quizSEO_sectionRow .qsQtools {
        flex: 0 0 auto !important;
    }
    /* Slightly tighter theme chips so the pair fits narrow phones */
    .quizSEO_ssc_official .quizSEO_sectionRow .ssc-theme-toggle {
        padding: 1px !important;
        gap: 1px !important;
    }
    .quizSEO_ssc_official .quizSEO_sectionRow .ssc-theme-btn {
        width: 22px !important;
        height: 20px !important;
    }
}
.quizSEO_ssc_official .quizSEO_sectionRow .quizSEO_sectionName {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.quizSEO_ssc_official .quizSEO_sectionRow .quizSEO_perQuestionTimer {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ssc-muted-slate) !important;
    white-space: nowrap !important;
}
.quizSEO_ssc_official .quizSEO_sectionRow .quizSEO_perQuestionTimerIcon {
    width: 12px !important;
    height: 12px !important;
    opacity: 0.75 !important;
}


/* ========== Stable timer sizes (no layout jump while counting) ========== */
.quizSEO_time_limit .time,
.quizSEO_time_limit .time span,
.quizSEO_ssc_official .ssc-topbar .quizSEO_time_limit .time span,
.quizSEO_ssc_official .ssc-topbar__global-time,
.quizSEO_ssc_official .ssc-topbar__cat-time,
.category-timer-display,
.quizSEO_categoryTimer,
.quizSEO_perQuestionTimer,
.quizSEO_perQuestionTimer .quizSEO_timerDisplay,
.quizSEO_sectionRow .quizSEO_perQuestionTimer,
.quizSEO_sectionRow .quizSEO_timerDisplay {
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
    font-family: "Courier New", Courier, ui-monospace, monospace !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Main quiz timer digits */
.quizSEO_time_limit .time span,
.quizSEO_ssc_official .ssc-topbar .quizSEO_time_limit .time span {
    display: inline-block !important;
    min-width: 7.2ch !important; /* HH:MM:SS */
    text-align: right !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Category timer under tabs / displays */
.category-timer-display,
.quizSEO_categoryTimer {
    display: inline-block !important;
    min-width: 5.2ch !important; /* MM:SS */
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

/* Per-question timer on section row */
.quizSEO_perQuestionTimer,
.quizSEO_sectionRow .quizSEO_perQuestionTimer {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 6.5ch !important;
    justify-content: flex-end !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}
.quizSEO_perQuestionTimer .quizSEO_timerDisplay,
.quizSEO_sectionRow .quizSEO_timerDisplay {
    display: inline-block !important;
    min-width: 5.2ch !important; /* MM:SS */
    text-align: right !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

/* SSC topbar time containers keep stable footprint */
.quizSEO_ssc_official .ssc-topbar__global-time,
.quizSEO_ssc_official .ssc-topbar__cat-time {
    min-width: 7.5ch !important;
    justify-content: flex-end !important;
}

/* ==========================================================================
   CONTEST: immediate full-window shell (no wait for first answer click)
   ========================================================================== */
html.quizSEO_ssc_fs_lock,
html.quizSEO_ssc_page.quizSEO_ssc_fs_lock {
    overflow: hidden !important;
}
html.quizSEO_ssc_fs_lock body,
body.quizseo-contest-playing {
    overflow: hidden !important;
}
/* Contest shell is full-window as soon as the playing phase HTML is painted —
   classes are printed server-side so theme header/footer bars never flash. */
.quizseo-contest-exam-shell.ssc-pseudo-fullscreen,
.quizseo-contest-exam-shell.ssc-is-fullscreen,
html.quizSEO_ssc_fs_lock .quizseo-contest-exam-shell,
body.quizseo-contest-playing .quizseo-contest-exam-shell {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2147483000 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--ssc-surface, #fff) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* Quiz root inside contest shell also pins full viewport */
html.quizSEO_ssc_fs_lock .quizseo-contest-exam-shell .quizSEO_ssc_official,
body.quizseo-contest-playing .quizseo-contest-exam-shell .quizSEO_ssc_official,
.quizseo-contest-exam-shell .quizSEO_ssc_official.ssc-pseudo-fullscreen,
.quizseo-contest-exam-shell .quizSEO_ssc_official.ssc-is-fullscreen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 1 !important;
}
/* Hide WP admin bar under contest full-window (if present for logged-in users) */
html.quizSEO_ssc_fs_lock #wpadminbar,
body.quizseo-contest-playing #wpadminbar {
    display: none !important;
}
html.quizSEO_ssc_fs_lock.admin-bar,
body.quizseo-contest-playing.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* NOTE: the exam body / footer / qmeta are intentionally NOT force-shown here.
   They stay hidden until the quiz engine really sets .ssc-quiz-started.
   Revealing them early made the guard's own "questionsVisible" probe return
   true before the engine had started, so tryAutoStart() never ran — the exam
   rendered fully but no handlers were bound and every click was dead. */
/* Keep the two-column exam grid intact in contest fullscreen. */
html.quizSEO_ssc_fs_lock .quizSEO_ssc_official .ssc-exam-body {
    display: grid !important;
}

/* --- Grabbable palette / sidebar scrollbars (desktop) ---------------------
   The palette scroll pane used the browser default scrollbar, which is only
   a few pixels wide on Windows/Chrome and effectively impossible to catch
   with the mouse. Widen the track and give the thumb a real hit area.
   Desktop only: touch scrolling on mobile does not need a visible bar, and
   the mobile palette strip keeps its hidden-scrollbar rules. */
@media (min-width: 769px) {
    .quizSEO_ssc_official .ssc-main-palette-slot,
    .quizSEO_ssc_official .ssc-sidebar-scroll,
    .quizSEO_ssc_official .ssc-cat-palette-slot,
    .quizSEO_ssc_official .quizSEO_reviewQuestion,
    .quizSEO_ssc_official .ssc-exam-sidebar {
        /* Firefox */
        scrollbar-width: auto;
        scrollbar-color: var(--ssc-line-strong, #9aa3af) var(--ssc-surface-alt, #f1f2f4);
    }

    .quizSEO_ssc_official .ssc-main-palette-slot::-webkit-scrollbar,
    .quizSEO_ssc_official .ssc-sidebar-scroll::-webkit-scrollbar,
    .quizSEO_ssc_official .ssc-cat-palette-slot::-webkit-scrollbar,
    .quizSEO_ssc_official .quizSEO_reviewQuestion::-webkit-scrollbar,
    .quizSEO_ssc_official .ssc-exam-sidebar::-webkit-scrollbar {
        width: 14px;
        height: 14px;
    }

    .quizSEO_ssc_official .ssc-main-palette-slot::-webkit-scrollbar-track,
    .quizSEO_ssc_official .ssc-sidebar-scroll::-webkit-scrollbar-track,
    .quizSEO_ssc_official .ssc-cat-palette-slot::-webkit-scrollbar-track,
    .quizSEO_ssc_official .quizSEO_reviewQuestion::-webkit-scrollbar-track,
    .quizSEO_ssc_official .ssc-exam-sidebar::-webkit-scrollbar-track {
        background: var(--ssc-surface-alt, #f1f2f4);
        border-radius: 8px;
    }

    .quizSEO_ssc_official .ssc-main-palette-slot::-webkit-scrollbar-thumb,
    .quizSEO_ssc_official .ssc-sidebar-scroll::-webkit-scrollbar-thumb,
    .quizSEO_ssc_official .ssc-cat-palette-slot::-webkit-scrollbar-thumb,
    .quizSEO_ssc_official .quizSEO_reviewQuestion::-webkit-scrollbar-thumb,
    .quizSEO_ssc_official .ssc-exam-sidebar::-webkit-scrollbar-thumb {
        background: var(--ssc-line-strong, #9aa3af);
        border-radius: 8px;
        /* Inset keeps the visible thumb slim while the grab area stays 14px */
        border: 3px solid var(--ssc-surface-alt, #f1f2f4);
        min-height: 44px;
    }

    .quizSEO_ssc_official .ssc-main-palette-slot::-webkit-scrollbar-thumb:hover,
    .quizSEO_ssc_official .ssc-sidebar-scroll::-webkit-scrollbar-thumb:hover,
    .quizSEO_ssc_official .ssc-cat-palette-slot::-webkit-scrollbar-thumb:hover,
    .quizSEO_ssc_official .quizSEO_reviewQuestion::-webkit-scrollbar-thumb:hover,
    .quizSEO_ssc_official .ssc-exam-sidebar::-webkit-scrollbar-thumb:hover {
        background: var(--ssc-head, #4b5563);
        border-width: 2px;
    }

    .quizSEO_ssc_official .ssc-main-palette-slot::-webkit-scrollbar-thumb:active,
    .quizSEO_ssc_official .ssc-sidebar-scroll::-webkit-scrollbar-thumb:active,
    .quizSEO_ssc_official .ssc-cat-palette-slot::-webkit-scrollbar-thumb:active,
    .quizSEO_ssc_official .quizSEO_reviewQuestion::-webkit-scrollbar-thumb:active,
    .quizSEO_ssc_official .ssc-exam-sidebar::-webkit-scrollbar-thumb:active {
        background: var(--ssc-accent, var(--ssc-brand, #34a2ce));
        border-width: 2px;
    }

    /* The slot clips its own overflow; make sure the wider bar is not
       overlapped by the palette buttons sitting flush to the right edge. */
    .quizSEO_ssc_official .ssc-main-palette-slot {
        padding-right: 2px;
        scroll-behavior: smooth;
    }
}

/* --- Footer bar stability (desktop) --------------------------------------
   Stops bottom buttons shrinking then expanding on first paint.
   Causes: (1) global .quizSEO_button padding from front.css, (2) real
   in-question bars visible until JS moves them to the footer proxies. */
@media (min-width: 769px) {
    /* Hide in-question action bars as soon as the quiz has started so the
       user never sees the small real inputs before footer proxies appear. */
    .quizSEO_ssc_official.ssc-quiz-started .ssc-question-action-bar {
        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;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .quizSEO_ssc_official .ssc-footer-bar.ssc-footer-bar--active,
    .quizSEO_ssc_official.ssc-quiz-started .ssc-footer-bar {
        min-height: 56px !important;
        box-sizing: border-box !important;
    }

    .quizSEO_ssc_official .ssc-footer-bar__left,
    .quizSEO_ssc_official .ssc-footer-bar__right {
        min-height: 40px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Beat front.css [id^=quizSEO_] .quizSEO_button { padding:10px } cascade */
    .quizSEO_ssc_official .ssc-footer-bar input.quizSEO_button,
    .quizSEO_ssc_official .ssc-footer-bar input.ssc-proxy-btn,
    .quizSEO_ssc_official .ssc-footer-bar input[type="button"],
    .quizSEO_ssc_official .ssc-footer-bar input.quizSEO_button.ssc-proxy-btn,
    [id^="quizSEO_"].quizSEO_ssc_official .ssc-footer-bar input.quizSEO_button,
    [id^="quizSEO_"].quizSEO_ssc_official .ssc-footer-bar input.ssc-proxy-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: auto !important;
        min-width: 120px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 16px !important;
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        transition: none !important;
        transform: none !important;
        vertical-align: middle !important;
    }

    .quizSEO_ssc_official .ssc-footer-bar input.ssc-proxy-btn--primary,
    .quizSEO_ssc_official .ssc-footer-bar input[data-proxy-for="next"],
    .quizSEO_ssc_official .ssc-footer-bar input[data-proxy-for="check"] {
        min-width: 132px !important;
    }

    .quizSEO_ssc_official .ssc-footer-bar input.ssc-proxy-btn:active,
    .quizSEO_ssc_official .ssc-footer-bar input.ssc-proxy-btn:focus,
    .quizSEO_ssc_official .ssc-footer-bar input.quizSEO_button:active,
    .quizSEO_ssc_official .ssc-footer-bar input.quizSEO_button:focus {
        transform: none !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 16px !important;
        border-width: 1px !important;
        outline-offset: -2px;
    }
}

/* Contest playing: never show quiz start-screen share bar inside the exam */
body.quizseo-contest-playing .quizSEO_shareBox,
body.quizseo-contest-playing .quizseo-contest-share,
html.quizSEO_ssc_fs_lock .quizSEO_shareBox,
.quizSEO_ssc_official.ssc-quiz-started .quizSEO_shareBox,
.quizSEO_ssc_official.ssc-quiz-started .quizSEO_startQuizWrap,
.quizSEO_ssc_official.ssc-quiz-started .quizSEO_text {
    display: none !important;
    visibility: hidden !important;
}

/* =====================================================================
   v1.9.83 — MOBILE TAP-SHAKE FIX
   Symptom: tapping any button made the whole screen twitch; the night-mode
   toggle and per-question timer in the sticky topbar visibly jerked with it.
   The JS side is fixed in ssc-exam-template.js (idempotent topbar writes +
   working churn guards). These rules remove the remaining geometric causes.
   ===================================================================== */

/* 1. The topbar row is `grid-template-columns: 1fr 1fr auto`, so the third
      (auto) column — which holds the theme toggle and the timer — is sized by
      its own content. Proportional digits mean 11:11 and 10:00 are different
      widths, so the toggle slides a pixel or two every second. Tabular figures
      give every digit the same advance width. */
.quizSEO_ssc_official .ssc-topbar__row,
.quizSEO_ssc_official .ssc-topbar__qmeta,
.quizSEO_ssc_official .ssc-topbar__marks,
.quizSEO_ssc_official .ssc-topbar__qnum,
.quizSEO_ssc_official .quizSEO_time_limit,
.quizSEO_ssc_official .quizSEO_question_timer,
.quizSEO_ssc_official .ssc-topbar__timer {
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}

/* 2. Reserve the marks slot. It is emptied and refilled as questions change;
      with no reserved box the row collapses by one line-height and everything
      below jumps up, then back. */
.quizSEO_ssc_official .ssc-topbar__marks {
    min-height: 18px;
    line-height: 18px;
    display: inline-block;
}

/* 3. Pin the topbar's own height so nothing inside it can resize the bar. */
.quizSEO_ssc_official .ssc-topbar__qmeta {
    min-height: 26px;
}

/* 4. Scroll anchoring is what turns a small height change in the action bar
      into a full-page lurch: the browser "helpfully" adjusts scrollTop to keep
      content in place and overshoots. Switch it off for the exam shell. */
.quizSEO_ssc_official,
.quizSEO_ssc_official .ssc-exam-body,
.quizSEO_ssc_official .ssc-exam-main,
.quizSEO_ssc_official .quizSEO_list,
.quizSEO_ssc_official .quizSEO_listItem,
.quizSEO_ssc_official .ssc-question-action-bar {
    overflow-anchor: none;
}

/* 5. The strip is the element that was collapsing. The JS no longer remounts it
      on every tap, but reserving its height means even a legitimate remount
      (section change) cannot move the question underneath it. */
@media (max-width: 768px) {
    .quizSEO_ssc_official .ssc-mobile-palette-strip {
        overflow-anchor: none;
    }
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip {
        min-height: 44px;
    }
}

/* 6. Buttons must not resize themselves on :active / :focus — a 1px border or
      padding change on tap reads exactly like a shake. */
.quizSEO_ssc_official .quizSEO_button:active,
.quizSEO_ssc_official .quizSEO_button:focus,
.quizSEO_ssc_official input[type="button"]:active,
.quizSEO_ssc_official input[type="button"]:focus {
    transform: none;
    outline-offset: -2px;
}

/* ==========================================================================
   REVIEW MODE — "All Question Palette" pinned above the action bar.
   Mobile only (max-width: 768px), .ssc-quiz-finished only. Every rule here
   is scoped to that combination, so the running exam is completely
   untouched — .ssc-quiz-finished is only ever added once the exam is over
   (see onQuizFinished() in ssc-exam-template.js).

   IMPORTANT — verified against the real markup this time, not assumed:
   the "All Question Palette" (.ssc-main-palette-slot's content) is
   .quizSEO_reviewQuestion, an <ol>/<li> list with the <li>s float:left
   (css/quizSEO_front.css) — a completely different element from
   .quizSEO_questionPalette (the category palette, untouched by this
   block). An earlier attempt targeted the wrong class names here, which
   matched nothing, so the outer slot became position:fixed while its
   un-converted, float-based multi-row content stayed at its natural
   (potentially large) height — a fixed-position block that size can cover
   most of the screen, blocking clicks and scrolling underneath it. Two
   things prevent a repeat: (1) the actual real classes below, confirmed
   against css/quizSEO_front.css, and (2) a hard max-height safety cap on
   the fixed element itself, so even if the flex conversion below ever
   fails to apply for any reason, the box can only ever be one short row
   tall — never tall enough to cover the screen again.
   ========================================================================== */
@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-quiz-finished .ssc-palette-subtitle--all {
        display: none;
    }

    /* The outer palette container: was max-height:100px + overflow:scroll
       (vertical) — now fixed to the viewport bottom, horizontal scroll only.
       max-height is the hard safety cap described above. bottom is a fixed,
       conservative offset (not dynamically measured) matching the action
       bar's typical height, so the palette sits above it rather than
       overlapping it — deliberately not using JS to measure and publish
       this value this time, to keep this fix entirely CSS-only with no
       observer interaction of any kind. */
    .quizSEO_ssc_official.ssc-quiz-finished .ssc-main-palette-slot .quizSEO_reviewQuestion {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 58px !important;
        z-index: 30 !important;
        max-height: 54px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: var(--ssc-surface) !important;
        border: none !important;
        border-top: 1px solid var(--ssc-line-soft-cool) !important;
        border-bottom: 1px solid var(--ssc-line-soft-cool) !important;
        box-shadow: 0 -2px 6px rgba(15, 61, 76, 0.08) !important;
        margin: 0 !important;
    }

    /* The drag/resize handle only made sense on the original small scrolling
       box; it has no purpose on a fixed horizontal strip. */
    .quizSEO_ssc_official.ssc-quiz-finished .ssc-main-palette-slot .quizSEO_reviewQuestion > div {
        display: none !important;
    }

    /* The <ol> itself is what actually holds the floated <li> buttons — this
       is the element that needs to become a single flex row. */
    .quizSEO_ssc_official.ssc-quiz-finished .ssc-main-palette-slot .quizSEO_reviewQuestion ol {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: max-content !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 8px 14px !important;
        white-space: nowrap !important;
    }

    /* Override float:left (css/quizSEO_front.css) — a floated element inside
       a flex container has its float ignored by spec, but setting it
       explicitly here documents the intent and keeps this robust even if
       that base rule is ever restructured. */
    .quizSEO_ssc_official.ssc-quiz-finished .ssc-main-palette-slot .quizSEO_reviewQuestion li {
        float: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    /* Reserve room at the bottom of the scrollable question column so the
       tail of a long explanation is never hidden behind the now-floating
       palette (54px tall, starting 58px above the bottom) plus the action
       bar below it. */
    .quizSEO_ssc_official.ssc-quiz-finished .ssc-exam-main {
        padding-bottom: 130px !important;
    }
}



/* Hide list-item "Q X of Y" on SSC mobile — qmeta already shows it on one line with tools */
@media (max-width: 768px) {
    .quizSEO_ssc_official .quizSEO_listItem > .quizSEO_question_page {
        display: none !important;
    }
    .quizSEO_ssc_official .ssc-topbar__qmeta,
    .quizSEO_ssc_official.ssc-mobile-header .ssc-exam-main > .ssc-topbar__qmeta,
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar > .ssc-topbar__qmeta {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px 8px !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .quizSEO_ssc_official .ssc-topbar__qmeta .ssc-topbar__qnum {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }
}

/* =========================================================================
   Instructions page (SSC Official): Back button + Language selector
   -------------------------------------------------------------------------
   Site/theme global `button` rules were painting the Back control blue and
   sometimes tainting the closed <select> when no language was chosen.
   Scope ONLY under .quizSEO_ssc_official so Eduquity / default skins stay
   untouched. Unselected language controls stay white; Back matches the
   same primary colour as every other quiz action button.
   ========================================================================= */

/* Back — same fill as quiz primary buttons (Save & Next, Submit, Start Test) */
.quizSEO_ssc_official .quizSEO_instrBack,
.quizSEO_ssc_official.quizSEO_instrOverlay .quizSEO_instrBack,
.quizSEO_ssc_official .quizSEO_instrInline .quizSEO_instrBack,
.quizSEO_ssc_official .quizSEO_instrStep .quizSEO_instrBack {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--quizseo-btn-bg, var(--ssc-accent, var(--ssc-brand, #1e5a8a))) !important;
    background-color: var(--quizseo-btn-bg, var(--ssc-accent, var(--ssc-brand, #1e5a8a))) !important;
    color: var(--quizseo-btn-text, var(--ssc-accent-text, var(--ssc-on-brand, #fff))) !important;
    border: 1px solid var(--quizseo-btn-bg, var(--ssc-accent, var(--ssc-brand, #1e5a8a))) !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 11px 26px !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.quizSEO_ssc_official .quizSEO_instrBack:hover,
.quizSEO_ssc_official.quizSEO_instrOverlay .quizSEO_instrBack:hover,
.quizSEO_ssc_official .quizSEO_instrInline .quizSEO_instrBack:hover {
    background: var(--quizseo-btn-hover, var(--ssc-brand-dark, #164a72)) !important;
    background-color: var(--quizseo-btn-hover, var(--ssc-brand-dark, #164a72)) !important;
    border-color: var(--quizseo-btn-hover, var(--ssc-brand-dark, #164a72)) !important;
    color: var(--quizseo-btn-text, var(--ssc-on-brand, #fff)) !important;
}

/* Language <select> — unselected / closed state must stay white (not blue) */
.quizSEO_ssc_official .quizSEO_instrLangSelect,
.quizSEO_ssc_official .quizSEO_instrLangSelect--required,
.quizSEO_ssc_official.quizSEO_instrOverlay .quizSEO_instrLangSelect,
.quizSEO_ssc_official .quizSEO_instrInline .quizSEO_instrLangSelect,
.quizSEO_ssc_official .quizSEO_instrStep .quizSEO_instrLangSelect,
.quizSEO_ssc_official .quizSEO_instrBar .quizSEO_instrLangSelect {
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
    color: #1f2a33 !important;
    border: 1px solid #d7dee8 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* Placeholder option and invalid state — still not a blue fill */
.quizSEO_ssc_official .quizSEO_instrLangSelect option[value=""],
.quizSEO_ssc_official .quizSEO_instrLangSelect option:disabled {
    color: #94a3b8 !important;
    background-color: #ffffff !important;
}

.quizSEO_ssc_official .quizSEO_instrLangSelect--invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px #dc2626 !important;
    background-color: #ffffff !important;
}

/* Segment language buttons: only .is-active is brand blue; rest stay white */
.quizSEO_ssc_official button.quizSEO_langBtn:not(.is-active),
.quizSEO_ssc_official .quizSEO_langSeg button.quizSEO_langBtn:not(.is-active) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    box-shadow: none !important;
}

.quizSEO_ssc_official button.quizSEO_langBtn:not(.is-active):hover {
    background: #eef3f8 !important;
    background-color: #eef3f8 !important;
    color: #334155 !important;
}

/* Category / section tabs (e.g. English | Maths): unselected = white surface */
.quizSEO_ssc_official .quizSEO_categoryTab:not(.quizSEO_categoryTabActive) {
    background: var(--ssc-surface, #ffffff) !important;
    background-color: var(--ssc-surface, #ffffff) !important;
    color: var(--ssc-head, #334155) !important;
    border-color: var(--ssc-line-strong, #c5d0e0) !important;
}

/* ==========================================================================
   HY-CHANGE 2026-08-27 — SSC OFFICIAL: PROFESSIONAL FONTS
   --------------------------------------------------------------------------
   Purpose: make the question/passage text, the answer options, the two
   sidebar submit buttons (Submit Section / Submit Test) and the
   "N. Question  Section: X" heading read consistently and professionally
   in the SSC Official UI.

   Safety / scope (per the no-side-effects, no-conflict requirement):
   - EVERY selector is prefixed with .quizSEO_ssc_official, so the Default
     and Eduquity themes are not touched at all.
   - The submit-button and section-heading rules are wrapped in
     @media (min-width:769px) so the SSC MOBILE layout is left exactly as it
     was (the user asked for the desktop UI specifically).
   - Only typography is set here (font-size / weight / line-height / colour
     via the theme's own --ssc-* tokens). No layout, colours-of-boxes,
     spacing of containers, or the Save/Report toolbar are altered.
   - Appended at end of file = latest source order, so these win cleanly
     without needing to out-specify anything elsewhere.
   ========================================================================== */

/* 1) Question / passage text — clean, readable body size (all widths) */
.quizSEO_ssc_official .quizSEO_question,
.quizSEO_ssc_official .quizSEO_question_text,
.quizSEO_ssc_official .quizSEO_question_description,
.quizSEO_ssc_official .quizSEO_question_description p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
}

/* 2) Answer options — one step down from the question for a calm hierarchy */
.quizSEO_ssc_official .quizSEO_questionList .quizSEO_questionListItem > label,
.quizSEO_ssc_official .quizSEO_questionList .quizSEO_questionListItem .quizSEO_answerText {
    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
}

@media (min-width: 769px) {
    /* 3) Submit Section / Submit Test (sidebar) — desktop only.
          Was 13px/700 and cramped; give it a professional 15px/600 with a
          touch more padding. Width, colours, radius stay from the base rule. */
    .quizSEO_ssc_official .ssc-sidebar-actions input.quizSEO_button,
    .quizSEO_ssc_official .ssc-sidebar-actions input[type="button"] {
        font-size: 15px !important;
        font-weight: 400 !important;
        letter-spacing: .2px !important;
        line-height: 1.3 !important;
        padding: 12px 16px !important;
    }
}
/* ===================== END HY-CHANGE 2026-08-27 ===================== */

/* ==========================================================================
   HY-CHANGE 2026-08-27 (b) — SSC OFFICIAL: BUTTONS NOT BOLD
   --------------------------------------------------------------------------
   Normal (400) weight on every action button in the SSC Official UI.
   Scope: .quizSEO_ssc_official only. The selectors mirror the plugin's own
   button groups (same [id^="quizSEO_"] anchor it uses) at >= their
   specificity and are appended last, so they win deterministically by
   source order without inventing a specificity war. Only font-weight is set.
   ========================================================================== */
html body [id^="quizSEO_"].quizSEO_ssc_official .quizSEO_button,
html body [id^="quizSEO_"].quizSEO_ssc_official input.quizSEO_button,
html body [id^="quizSEO_"].quizSEO_ssc_official input[type="button"],
html body [id^="quizSEO_"].quizSEO_ssc_official input[type="submit"],
html body [id^="quizSEO_"].quizSEO_ssc_official a.quizSEO_button,
html body [id^="quizSEO_"].quizSEO_ssc_official button.quizSEO_button,
html body [id^="quizSEO_"].quizSEO_ssc_official .ssc-proxy-btn,
html body [id^="quizSEO_"].quizSEO_ssc_official .quizSEO_categoryTab,
html body [id^="quizSEO_"].quizSEO_ssc_official .ssc-sidebar-actions input.quizSEO_button,
html body [id^="quizSEO_"].quizSEO_ssc_official .ssc-question-action-bar input.quizSEO_button,
html body [id^="quizSEO_"].quizSEO_ssc_official .ssc-footer-bar input.quizSEO_button,
html body [id^="quizSEO_"].quizSEO_ssc_official .ssc-footer-bar input.ssc-proxy-btn,
html body [id^="quizSEO_"].quizSEO_ssc_official .ssc-footer-bar input.quizSEO_button.ssc-proxy-btn {
    font-weight: 400 !important;
}
/* ===================== END HY-CHANGE 2026-08-27 (b) ===================== */

/* ==========================================================================
   HY-CHANGE 2026-08-27 (c) — SSC OFFICIAL: SECTION HEADING SIZE (ALL WIDTHS)
   --------------------------------------------------------------------------
   "N. Question" and "Section: X" must read at the SAME font size (the label
   was inheriting the larger body size on mobile, so "Section: X" looked
   oversized next to the question number). Unify both to one size, keep bold,
   in the theme's head colour. Applies at every width (this replaces the
   earlier desktop-only version). Scope: .quizSEO_ssc_official only; text
   typography only — the ellipsis/nowrap layout on mobile is untouched.
   ========================================================================== */
.quizSEO_ssc_official .quizSEO_sectionRow .quizSEO_questionNumber,
.quizSEO_ssc_official .quizSEO_sectionRow .quizSEO_questionNumber span,
.quizSEO_ssc_official .quizSEO_sectionRow .quizSEO_sectionName {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    color: var(--ssc-head) !important;
    margin: 0 !important;
}
/* ===================== END HY-CHANGE 2026-08-27 (c) ===================== */

/* ==========================================================================
   HY-CHANGE 2026-08-30 — SSC Demo A: mobile palette rail + side drawer
   Running test only (not review). Matches Eduquity Demo K/A UX.
   Strip stays ABOVE the question; white ☰ rail on the RIGHT.
   Opens REAL .ssc-exam-sidebar as fixed right drawer (desktop content).
   HY-CHANGE 2026-08-30f: title above numbers; rail aligned to number row;
   slightly shaded rail; smooth slide-in drawer (no chip morph).
   ========================================================================== */
@media (max-width: 768px) {
    /* Strip: title row full width, then numbers+rail row */
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished).ssc-mobile-palette-above .ssc-mobile-palette-strip,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        touch-action: pan-y !important;
        padding: 4px 0 0 0 !important;
        min-height: 44px !important;
        gap: 0 !important;
    }

    /* Palette column: title on its own line, then horizontal numbers */
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_questionPalette,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_reviewQuestion {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: calc(100% - 44px) !important;
        height: auto !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 0 0 8px !important;
        box-sizing: border-box !important;
    }

    /* Category label on its own line — skip when tools host is on the title row */
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_paletteCategoryTitle:not(:has(.ssc-palette-cat-tools)),
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .ssc-palette-subtitle,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .ssc-palette-subtitle--cat {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        float: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 0 4px 0 !important;
        padding: 0 8px 0 0 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        color: var(--ssc-head, #1e293b) !important;
        order: 0 !important;
    }

    /* Numbers row only scrolls horizontally */
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_paletteButtons,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_questionPalette > div.quizSEO_paletteButtons,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_reviewQuestion ol {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 2px 4px 6px 0 !important;
        list-style: none !important;
        float: none !important;
        order: 1 !important;
    }

    /* Demo A rail — aligned with number row (flex-end), slightly shaded */
    .quizSEO_ssc_official .ssc-mobile-palette-rail {
        display: none;
    }
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-rail {
        display: inline-flex !important;
        flex: 0 0 42px !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: flex-end !important;
        position: relative !important;
        z-index: 2 !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 0 2px 0 !important;
        padding: 0 !important;
        border: none !important;
        border-left: 1px solid #e2e8f0 !important;
        border-radius: 0 !important;
        background: #f1f5f9 !important;
        color: #334155 !important;
        box-shadow: none !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        order: 99 !important;
    }
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-rail::before {
        content: "" !important;
        position: absolute !important;
        left: -20px !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 20px !important;
        background: linear-gradient(to right, rgba(241,245,249,0), #f1f5f9) !important;
        pointer-events: none !important;
    }
    .quizSEO_ssc_official .ssc-mobile-palette-rail__ham {
        display: inline-flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 18px !important;
        height: 14px !important;
    }
    .quizSEO_ssc_official .ssc-mobile-palette-rail__ham i {
        display: block !important;
        width: 18px !important;
        height: 2px !important;
        border-radius: 1px !important;
        background: #334155 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Scrim — simple fade only */
    .quizSEO_ssc_official .ssc-mobile-palette-scrim {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 10045 !important;
        background: rgba(15, 23, 42, 0.4) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .28s ease, visibility .28s ease !important;
    }
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-mobile-palette-scrim {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Close button inside drawer */
    .quizSEO_ssc_official .ssc-mobile-palette-close {
        display: none !important;
    }
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-mobile-palette-close {
        display: flex !important;
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        z-index: 2 !important;
        width: 32px !important;
        height: 32px !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid var(--ssc-line, #c5d0d8) !important;
        border-radius: 6px !important;
        background: #fff !important;
        color: #64748b !important;
        font-size: 18px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /*
     * Drawer closed: full-size panel parked off-screen to the RIGHT
     * (no tiny-chip morph — only translateX slide).
     */
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-exam-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: 82% !important;
        max-width: 320px !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 44px 12px 12px !important;
        border: none !important;
        border-left: 1px solid var(--ssc-line, #c5d0d8) !important;
        border-radius: 0 !important;
        background: var(--ssc-surface-alt, #f4f7fa) !important;
        box-shadow: -8px 0 28px rgba(15, 23, 42, 0.18) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        grid-column: auto !important;
        grid-row: auto !important;
        z-index: 10050 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
        transform: translateX(105%) !important;
        transition: transform .3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        will-change: transform !important;
    }

    /* Open: slide in from the right */
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar,
    .quizSEO_ssc_official.ssc-is-fullscreen.ssc-mobile-palette-open .ssc-exam-sidebar,
    .quizSEO_ssc_official.ssc-pseudo-fullscreen.ssc-mobile-palette-open .ssc-exam-sidebar {
        transform: translateX(0) !important;
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-sidebar-scroll {
        display: block !important;
        overflow-y: auto !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-section-palette-wrap,
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-sidebar-total,
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-cat-palette-slot,
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .quizSEO_questionPalette {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Keep chrome labels hidden even when drawer forces visibility */
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-sidebar-section-title,
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-palette-subtitle--cat {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: none !important;
    }

    /* Legend: 2-col grid on mobile (5 items wrap to 3 rows; do not force display:block) */
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-palette-legend {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
        gap: 6px 10px !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 0 12px !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-open.ssc-has-section-palette .ssc-exam-sidebar .ssc-main-palette-slot,
    .quizSEO_ssc_official.ssc-mobile-palette-open.ssc-has-section-palette .ssc-exam-sidebar .quizSEO_reviewQuestion,
    .quizSEO_ssc_official.ssc-mobile-palette-open.ssc-has-section-palette .ssc-exam-sidebar .ssc-palette-subtitle--all {
        display: none !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-sidebar-actions {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: auto !important;
    }

    /* Keep strip visible under scrim? Hide while open for clarity */
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-mobile-palette-strip {
        /* stay in place; scrim covers it — no extra strip animation */
        pointer-events: none !important;
    }
}

/* Desktop: never show rail / scrim / close */
@media (min-width: 769px) {
    .quizSEO_ssc_official .ssc-mobile-palette-rail,
    .quizSEO_ssc_official .ssc-mobile-palette-scrim,
    .quizSEO_ssc_official .ssc-mobile-palette-close {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}
/* ===================== END HY-CHANGE 2026-08-30 Demo A (running) ===================== */


/* ==========================================================================
   HY-CHANGE 2026-08-30i — Side palette boxes stretch to full width (6 cols)
   Desktop sidebar + mobile open drawer. Equal gaps. No horizontal scroll.
   Mobile ABOVE-question strip stays horizontal scroll (unchanged).
   ========================================================================== */

/* Desktop sidebar: category palette buttons */
.quizSEO_ssc_official .ssc-exam-sidebar .quizSEO_paletteButtons,
.quizSEO_ssc_official .ssc-exam-sidebar .quizSEO_questionPalette > div.quizSEO_paletteButtons,
.quizSEO_ssc_official .ssc-cat-palette-slot .quizSEO_paletteButtons {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: unset !important;
    flex-direction: unset !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    white-space: normal !important;
    margin: 0 !important;
    padding: 0 !important;
}

.quizSEO_ssc_official .ssc-exam-sidebar .quizSEO_questionPaletteButton,
.quizSEO_ssc_official .ssc-cat-palette-slot .quizSEO_questionPaletteButton {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    flex: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
}

/* Desktop sidebar: main / all-questions list */
.quizSEO_ssc_official .ssc-exam-sidebar .quizSEO_reviewQuestion ol,
.quizSEO_ssc_official .ssc-main-palette-slot .quizSEO_reviewQuestion ol {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: visible !important;
    flex-wrap: unset !important;
}

.quizSEO_ssc_official .ssc-exam-sidebar .quizSEO_reviewQuestion li,
.quizSEO_ssc_official .ssc-main-palette-slot .quizSEO_reviewQuestion li {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    flex: none !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Mobile drawer open: same stretch grid, no horizontal scroll */
@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .quizSEO_paletteButtons,
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .quizSEO_questionPalette > div.quizSEO_paletteButtons,
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .quizSEO_reviewQuestion ol {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        flex-wrap: unset !important;
        flex-direction: unset !important;
        white-space: normal !important;
        -webkit-overflow-scrolling: auto !important;
        touch-action: manipulation !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .quizSEO_questionPaletteButton,
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .quizSEO_reviewQuestion li {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 30px !important;
        min-height: 30px !important;
        flex: none !important;
        float: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .quizSEO_questionPalette,
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .quizSEO_reviewQuestion {
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* ===================== END HY-CHANGE 2026-08-30i ===================== */

/* ==========================================================================
   HY-CHANGE 2026-08-30j — Fixed ABOVE-question strip: isolate from drawer grid
   Drawer stretch (6-col) must NEVER affect .ssc-mobile-palette-strip.
   Strip = title + horizontal scroll of fixed 30×30 boxes + right rail.
   ========================================================================== */
@media (max-width: 768px) {
    /* Strip itself */
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-end !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Palette column inside strip — NOT a 6-col grid */
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_questionPalette,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_reviewQuestion,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_questionPalette,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_reviewQuestion {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: calc(100% - 44px) !important;
        overflow: visible !important;
        grid-template-columns: none !important;
    }

    /* Numbers row: horizontal scroll only */
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_paletteButtons,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_questionPalette > div,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_reviewQuestion ol,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_paletteButtons,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_questionPalette > div,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_reviewQuestion ol {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }

    /* Fixed 30×30 boxes — beat any leftover width:100% from drawer */
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_questionPaletteButton,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_reviewQuestion li,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_questionPaletteButton,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_reviewQuestion li {
        flex: 0 0 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    /* Stretch grid ONLY inside sidebar — never strip */
    .quizSEO_ssc_official .ssc-mobile-palette-strip .quizSEO_paletteButtons,
    .quizSEO_ssc_official .ssc-mobile-palette-strip .quizSEO_reviewQuestion ol {
        grid-template-columns: none !important;
    }
}
/* ===================== END HY-CHANGE 2026-08-30j ===================== */

/* ==========================================================================
   HY-CHANGE 2026-08-30k — Strip box NUMBERS always visible & unconflicted
   Fixed 30×30, centered digit, no clipping, no double ::before from review CSS.
   ========================================================================== */
@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_questionPaletteButton,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_reviewQuestion li,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_questionPaletteButton,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_reviewQuestion li {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
        overflow: visible !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        /* Do not force color — status classes (answered/skipped/etc.) own it */
    }

    /* Live strip: never use review data-ssc-n ::before (would double the digit) */
    .quizSEO_ssc_official:not(.ssc-review-mode) .ssc-mobile-palette-strip .quizSEO_reviewQuestion li[data-ssc-n]::before,
    .quizSEO_ssc_official:not(.ssc-review-mode) .ssc-mobile-palette-strip .quizSEO_questionPaletteButton[data-ssc-n]::before {
        content: none !important;
        display: none !important;
    }

    /* Ensure button text node is visible */
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_questionPaletteButton,
    .quizSEO_ssc_official.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip .quizSEO_questionPaletteButton {
        color: inherit;
        opacity: 1 !important;
        visibility: visible !important;
    }
}
/* ===================== END HY-CHANGE 2026-08-30k ===================== */

/* ==========================================================================
   HY-CHANGE 2026-08-30t — Mobile side drawer: show Submit Section + Submit Test
   (same as desktop sidebar). Outside the drawer they stay hidden on mobile.
   SSC only — Eduquity not affected.
   ========================================================================== */
@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-sidebar-actions {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
        margin-top: auto !important;
        margin-bottom: 0 !important;
        padding: 12px 0 8px !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-sidebar-actions .ssc-submit-section-btn,
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-sidebar-actions .ssc-submit-test-btn,
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-sidebar-actions input[name="quizSummary"],
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-sidebar-actions input.quizSEO_button,
    .quizSEO_ssc_official.ssc-mobile-palette-open .ssc-exam-sidebar .ssc-sidebar-actions input[type="button"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 12px !important;
        pointer-events: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }
}
/* ===================== END HY-CHANGE 2026-08-30t ===================== */

/* ==========================================================================
   HY-CHANGE 2026-09-02 — SSC OFFICIAL: SOLUTION TEXT MATCHES QUESTION
   --------------------------------------------------------------------------
   Match solution / response / explanation typography to the question text
   (16px / 1.7 / 400 / system stack). Scoped only to .quizSEO_ssc_official.
   No layout, colour, spacing, or non-SSC theme changes.
   ========================================================================== */
.quizSEO_ssc_official .quizSEO_response,
.quizSEO_ssc_official .quizSEO_response p,
.quizSEO_ssc_official .quizSEO_response .quizSEO_correct,
.quizSEO_ssc_official .quizSEO_response .quizSEO_incorrect,
.quizSEO_ssc_official .quizSEO_response .quizSEO_correct p,
.quizSEO_ssc_official .quizSEO_response .quizSEO_incorrect p,
.quizSEO_ssc_official .quizSEO_answerExplanationSection,
.quizSEO_ssc_official .quizSEO_answerExplanationSection div,
.quizSEO_ssc_official .quizSEO_answerExplanationSection p,
.quizSEO_ssc_official .quizSEO_tipp,
.quizSEO_ssc_official .quizSEO_tipp > div,
.quizSEO_ssc_official .quizSEO_tipp p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Keep the Correct/Incorrect label span bold (status word only) */
.quizSEO_ssc_official .quizSEO_response .quizSEO_respone_span {
    font-weight: 700 !important;
}
/* ===================== END HY-CHANGE 2026-09-02 (SSC solution fonts) ===================== */


/* ==========================================================================
   MOBILE Q META INSIDE TOPBAR (SSC Official)
   --------------------------------------------------------------------------
   Q x/y + Save + Report + language is appended into .ssc-topbar on mobile so
   it shares the same sticky layer as the section tabs. They scroll-stick and
   overscroll-bounce together — no separate fixed layer, no gap for content
   to show through between the two strips.
   ========================================================================== */
@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-mobile-header.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-topbar {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 6 !important;
        background: var(--ssc-surface-alt, var(--ssc-surface, #fff)) !important;
        background-color: var(--ssc-surface-alt, var(--ssc-surface, #fff)) !important;
    }

    .quizSEO_ssc_official.ssc-mobile-header.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-exam-main,
    .quizSEO_ssc_official.ssc-mobile-header.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-exam-body,
    .quizSEO_ssc_official.ssc-mobile-header.ssc-quiz-started:not(.ssc-quiz-finished) .quizSEO_text,
    .quizSEO_ssc_official.ssc-mobile-header.ssc-quiz-started:not(.ssc-quiz-finished) .quizSEO_list {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .quizSEO_ssc_official.ssc-mobile-header.ssc-quiz-started:not(.ssc-quiz-finished) {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Q strip as a full-width row under the tabs, inside the sticky topbar */
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar > .ssc-topbar__qmeta {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 4px 14px !important;
        font-size: 11px;
        color: var(--ssc-muted-warm);
        border-top: 1px solid var(--ssc-line-soft-cool);
        border-bottom: 1px solid var(--ssc-line-soft-cool);
        background: var(--ssc-surface, #fff) !important;
        background-color: var(--ssc-surface, #fff) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar > .ssc-topbar__qmeta .ssc-topbar__qnum {
        font-weight: 600;
        color: var(--ssc-head);
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar > .ssc-topbar__qmeta .qsQtools {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        gap: 6px !important;
        margin: 0 !important;
        margin-left: auto !important;
    }

    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar > .ssc-topbar__qmeta .quizSEO_langBar {
        flex: 0 0 auto;
        margin-left: 0 !important;
    }

    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar > .ssc-topbar__qmeta .ssc-topbar__cat-time {
        display: none !important;
    }
}

/* Start page terms checkbox — SSC brand fill */
.quizSEO_ssc_official input.quizSEO_termsAgree[type="checkbox"]:checked,
.quizSEO_ssc_official .quizSEO_instrTerms input[type="checkbox"]:checked,
.quizSEO_ssc_official .quizSEO_termsLabel input[type="checkbox"]:checked {
    background: var(--ssc-brand, var(--quizseo-btn-bg, #1e5a8a)) !important;
    background-color: var(--ssc-brand, var(--quizseo-btn-bg, #1e5a8a)) !important;
    border-color: var(--ssc-brand, var(--quizseo-btn-bg, #1e5a8a)) !important;
}


/* ==========================================================================
   Palette title tools — aligned line, matched boxes (mobile)
   --------------------------------------------------------------------------
   [ Category name ……………… ] [ timer box ] [ night mode box ]
   Same height/border/radius for timer and theme; timer always before theme.
   ========================================================================== */
@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .quizSEO_listItem .quizSEO_sectionRow {
        display: none !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_paletteCategoryTitle {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 6px 0 !important;
        padding: 0 2px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        min-width: 0 !important;
        min-height: 30px !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .ssc-palette-cat-label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--ssc-head) !important;
        line-height: 1.2 !important;
    }

    /* Unified control capsule: timer + theme share one aligned row */
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .ssc-palette-cat-tools {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 28px !important;
    }

    /* Shared box metrics for timer AND theme (same type / size) */
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-palette-cat-tools .ssc-theme-toggle,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-palette-cat-tools .quizSEO_perQuestionTimer {
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        margin: 0 !important;
        border: 1px solid var(--ssc-line, #cfd8e3) !important;
        border-radius: 6px !important;
        background: var(--ssc-surface, #fff) !important;
        background-color: var(--ssc-surface, #fff) !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-palette-cat-tools .ssc-theme-toggle {
        padding: 2px !important;
        gap: 1px !important;
        transform: none !important;
        line-height: 0 !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-palette-cat-tools .ssc-theme-btn {
        width: 24px !important;
        height: 22px !important;
        border-radius: 4px !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-palette-cat-tools .quizSEO_perQuestionTimer {
        gap: 4px !important;
        padding: 0 8px !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        color: var(--ssc-muted-slate, #5b6b7c) !important;
        font-variant-numeric: tabular-nums !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-palette-cat-tools .quizSEO_perQuestionTimerIcon,
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-palette-cat-tools .quizSEO_perQuestionTimer svg {
        width: 12px !important;
        height: 12px !important;
        opacity: 0.75 !important;
        flex-shrink: 0 !important;
    }

    /* RIGHT-SIDE PIN: night mode + per-q timer flush to the right of the strip
       (beats older display:block on .quizSEO_paletteCategoryTitle). */
    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .ssc-mobile-palette-strip .quizSEO_paletteCategoryTitle {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: 30px !important;
        padding-right: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
        float: none !important;
    }
    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .ssc-mobile-palette-strip .ssc-palette-cat-label {
        display: block !important;
        max-width: calc(100% - 140px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }
    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .ssc-mobile-palette-strip .quizSEO_paletteCategoryTitle > .ssc-palette-cat-tools {
        position: static !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        display: inline-flex !important;
        margin-left: auto !important;
        height: 28px !important;
    }

}


/* Total Time chip — same shape language as Exit FS, light-red gradient */
@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__global-time {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        padding: 3px 10px !important;
        margin: 0 !important;
        min-height: 0 !important;
        line-height: 1.35 !important;
        border: 1px solid #f0b4b4 !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #fff5f5 0%, #ffe4e4 55%, #ffd6d6 100%) !important;
        background-color: #ffe8e8 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__global-time .ssc-topbar__label {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.35 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #9f2a2a !important;
    }
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__global-time .quizSEO_time_limit,
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar .quizSEO_time_limit {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        line-height: 1.35 !important;
        align-items: center !important;
        gap: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__global-time .quizSEO_time_limit .time,
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar .quizSEO_time_limit .time {
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        line-height: 1.35 !important;
        font-size: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar__global-time .quizSEO_time_limit .time span,
    .quizSEO_ssc_official.ssc-mobile-header .ssc-topbar .quizSEO_time_limit .time span {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.35 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #8b1e1e !important;
        font-variant-numeric: tabular-nums !important;
    }

    /* Exit FS: match chip height/radius so the pair looks like one control set */
    .quizSEO_ssc_official.ssc-mobile-header .ssc-fs-toggle {
        padding: 3px 10px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        border-radius: 4px !important;
        margin: 0 !important;
    }
}


/* Tools live inside category title row (flex) — no strip absolute host */
@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip > .ssc-palette-cat-tools {
        display: none !important; /* leftover strip host hidden */
    }
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_paletteCategoryTitle {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        padding-right: 0 !important;
    }
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip .quizSEO_paletteCategoryTitle > .ssc-palette-cat-tools {
        position: static !important;
        display: inline-flex !important;
        margin-left: auto !important;
        flex: 0 0 auto !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
    }
}


/* ==========================================================================
   Option D — full-width category title + tools at screen right
   --------------------------------------------------------------------------
   Title row spans 100% of the strip (timer + night mode at true right).
   Number buttons stay in calc(100% - 44px); ☰ rail stays on the number row.
   Uses display:contents on the palette so title/buttons participate in strip flex.
   ========================================================================== */
@media (max-width: 768px) {
    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished) .ssc-mobile-palette-strip {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        position: relative !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        padding: 4px 0 0 0 !important;
    }

    /* Children of palette become strip flex items */
    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .ssc-mobile-palette-strip > .quizSEO_questionPalette,
    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .ssc-mobile-palette-strip > .quizSEO_reviewQuestion {
        display: contents !important;
        max-width: none !important;
        width: auto !important;
        flex: unset !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* TITLE = full strip width (true right edge for tools) */
    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .ssc-mobile-palette-strip .quizSEO_paletteCategoryTitle {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        order: 0 !important;
        box-sizing: border-box !important;
        margin: 0 0 4px 0 !important;
        padding: 0 10px !important;
        min-height: 30px !important;
        float: none !important;
        position: relative !important;
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .ssc-mobile-palette-strip .ssc-palette-cat-label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 8px 0 0 !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .ssc-mobile-palette-strip .quizSEO_paletteCategoryTitle > .ssc-palette-cat-tools {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 0 0 auto !important;
        margin-left: auto !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        height: 28px !important;
        z-index: 1 !important;
    }

    /* Number row: leave 44px for ☰ */
    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .ssc-mobile-palette-strip .quizSEO_paletteButtons,
    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .ssc-mobile-palette-strip .quizSEO_questionPalette > div:not(.quizSEO_paletteCategoryTitle):not(.ssc-palette-cat-tools),
    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .ssc-mobile-palette-strip .quizSEO_reviewQuestion ol {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 44px) !important;
        width: auto !important;
        order: 1 !important;
        box-sizing: border-box !important;
        padding-left: 10px !important;
    }

    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .ssc-mobile-palette-strip > .ssc-mobile-palette-rail {
        order: 2 !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        align-self: flex-end !important;
        margin: 0 0 2px 0 !important;
        /* Keep rail on the SAME row as number buttons (original place) */
        position: relative !important;
        top: auto !important;
        right: auto !important;
    }

    /* Force number buttons + rail onto one flex line */
    .quizSEO_ssc_official.ssc-mobile-palette-above.ssc-quiz-started:not(.ssc-quiz-finished)
        .ssc-mobile-palette-strip .quizSEO_paletteButtons {
        flex: 1 1 auto !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        flex-basis: 0 !important;
        max-width: calc(100% - 44px) !important;
        width: auto !important;
        min-width: 0 !important;
        order: 1 !important;
    }

    /* Hide leftover strip-level tools host if any */
    .quizSEO_ssc_official.ssc-mobile-palette-above .ssc-mobile-palette-strip > .ssc-palette-cat-tools {
        display: none !important;
    }
}