/* =====================================================================
   TEACHERS-SPOT — readiness exams
   1. OMR answer sheet (writing page, result page, admin marking guide)
   2. The full-screen exam workspace (timer bar, paper, sheet)
   3. Result page and lists
   The answer sheet is drawn as paper in both colour schemes — it is meant
   to look like the sheet a candidate shades in the exam hall.
   ===================================================================== */

:root {
    --omr-ink:        #c2462e;              /* the printed "red ink" of an OMR form */
    --omr-ink-soft:   rgba(194, 70, 46, .28);
    --omr-ink-faint:  rgba(194, 70, 46, .08);
    --omr-paper:      #fffaf2;
    --omr-paper-2:    #fbf1e4;
    --omr-graphite:   #2b2d31;
    --omr-row-on:     #e6f1ee;               /* line colour once answered */
    --omr-right:      #2f7a45;
    --omr-wrong:      #b3362d;
    --omr-bubble:     30px;

    --ex-bar-h:       60px;
    --ex-switch-h:    58px;
}

/* ------------------------------------------------------------------ */
/* 1. OMR sheet                                                        */
/* ------------------------------------------------------------------ */

.omr {
    position: relative;
    background: var(--omr-paper);
    color: #3a2a24;
    border: 1.5px solid var(--omr-ink-soft);
    border-radius: 6px;
    padding: 18px 18px 14px 34px;          /* room on the left for the timing rail */
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(60, 40, 20, .07);
    font-variant-numeric: tabular-nums;
}

/* The black timing marks down the edge of a real OMR form */
.omr-rail {
    position: absolute;
    left: 10px;
    top: 16px;
    bottom: 16px;
    width: 10px;
    background: repeating-linear-gradient(
        to bottom,
        #1d1d1f 0 7px,
        transparent 7px 22px
    );
    border-radius: 1px;
    opacity: .85;
}

.omr-head {
    border: 1.5px solid var(--omr-ink);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: linear-gradient(var(--omr-paper), var(--omr-paper-2));
}

.omr-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--omr-ink-soft);
}

.omr-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--omr-ink);
    color: #fff;
    flex: 0 0 auto;
}

.omr-brand-name {
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--omr-ink);
}

.omr-brand-sub {
    font-size: .75rem;
    color: #7a5a4e;
    letter-spacing: .02em;
}

.omr-info {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 6px;
    margin: 0 0 8px;
}

.omr-field {
    border: 1px solid var(--omr-ink-soft);
    border-radius: 3px;
    padding: 3px 7px 4px;
    background: #fffdf8;
    min-width: 0;
}

.omr-field.is-wide { grid-column: span 2; }

.omr-field dt {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--omr-ink);
    margin: 0;
}

.omr-field dd {
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    color: #2d2420;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive, sans-serif;   /* "handwritten" */
}

.omr-head.is-compact .omr-info { display: none; }

.omr-howto,
.omr-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: .75rem;
    color: #6b4d42;
}

.omr-legend > span { display: inline-flex; align-items: center; gap: 6px; }

.omr-sample { display: inline-flex; gap: 4px; }
.omr-sample .omr-bubble,
.omr-legend .omr-bubble { --omr-bubble: 22px; font-size: .62rem; }

/* Grid of question rows: blocks of five, flowing into as many columns as fit */
.omr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    gap: 12px 18px;
    align-items: start;
}

.omr-block {
    border-top: 2px solid var(--omr-ink);
    padding-top: 3px;
}

.omr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background-color .18s ease;
}

.omr-row + .omr-row { border-top: 1px dotted var(--omr-ink-soft); border-radius: 0 0 6px 6px; }

.omr-num {
    flex: 0 0 46px;
    text-align: right;
    white-space: nowrap;
    font-weight: 800;
    font-size: .88rem;
    color: var(--omr-ink);
    padding-right: 2px;
}

.omr-opts {
    display: inline-flex;
    gap: 7px;
}

.omr-opt {
    position: relative;
    margin: 0;
    cursor: pointer;
    line-height: 0;
}

.omr-opt input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.omr-opt input:disabled { cursor: not-allowed; }

.omr-bubble {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--omr-bubble);
    height: var(--omr-bubble);
    border: 1.6px solid var(--omr-ink);
    border-radius: 50%;
    font-size: .74rem;
    font-weight: 700;
    color: var(--omr-ink);
    background: #fffdf9;
    line-height: 1;
    user-select: none;
    transition: transform .12s ease, background-color .12s ease;
}

.omr-opt:hover input:not(:disabled):not(:checked) + .omr-bubble { background: var(--omr-ink-faint); transform: scale(1.06); }
.omr-opt input:focus-visible + .omr-bubble { outline: 3px solid #2f7d75; outline-offset: 2px; }

/* The pencil mark: no shading — a thick pencil stroke cuts across the chosen
   bubble, drawn BEHIND the letter (z-index -1 inside the bubble's own stacking
   context), so the letter stays readable on top of the line. */
.omr-opt input:checked + .omr-bubble,
.omr-bubble.is-marked {
    isolation: isolate;
    z-index: 0;
    border-color: #3a3c41;
    border-width: 2px;
    color: #111214;
    font-weight: 800;
    text-shadow: 0 0 1px #fff, 0 0 2px #fff;
    /* The chosen answer grows — circle and letter together — so it stands
       out on the line. A transform does not move the other bubbles. */
    transform: scale(1.22);
    transition: transform .15s ease-out;
}

.omr-opt input:checked + .omr-bubble::after,
.omr-bubble.is-marked::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -3px;
    right: -3px;
    top: 50%;
    height: 6px;
    margin-top: -3px;
    border-radius: 5px 2px 6px 3px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 1.5px, transparent 1.5px 4px),
        linear-gradient(#34363b, #4a4d53 50%, #34363b);
    box-shadow: 0 0 1px rgba(0, 0, 0, .45);
    transform: none;
    opacity: .9;
    pointer-events: none;
}

@keyframes omr-shade {
    from { transform: scale(.82); }
    to   { transform: scale(1); }
}

/* The line changes colour once answered */
.omr-row.is-answered { background: var(--omr-row-on); }
.omr-row.is-answered .omr-num { color: #1f5f59; }

.omr-erase {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #9a7a6f;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    visibility: hidden;
    font-size: .95rem;
}

.omr-row.is-answered .omr-erase { visibility: visible; }
.omr-erase:hover:not(:disabled) { background: rgba(0, 0, 0, .06); color: #6b4d42; }
.omr-erase:disabled { opacity: .4; }

/* A sheet that cannot be written on yet */
.omr.is-locked .omr-opts { opacity: .55; }
.omr.is-locked .omr-bubble { filter: saturate(.6); }

/* Result mode ------------------------------------------------------- */
.omr--result .omr-row.is-answered,
.omr--result .omr-row { background: transparent; }
.omr--result .omr-row.is-right { background: rgba(47, 122, 69, .08); }
.omr--result .omr-row.is-wrong { background: rgba(179, 54, 45, .08); }

.omr-bubble.is-marked.is-right { border-color: var(--omr-right); box-shadow: 0 0 0 2px rgba(47, 122, 69, .35); }
.omr-bubble.is-marked.is-wrong { border-color: var(--omr-wrong); box-shadow: 0 0 0 2px rgba(179, 54, 45, .35); }

.omr-bubble.is-key {
    border: 2.5px solid var(--omr-right);
    color: var(--omr-right);
    background: rgba(47, 122, 69, .10);
}

.omr-row.is-blank .omr-bubble.is-key { border-style: dashed; }

.omr-verdict {
    margin-left: auto;
    width: 26px;
    text-align: center;
    font-size: 1.05rem;
}
.omr-row.is-right .omr-verdict { color: var(--omr-right); }
.omr-row.is-wrong .omr-verdict { color: var(--omr-wrong); }
.omr-row.is-blank .omr-verdict { color: #a08c84; }

.omr-grid.is-filter-wrong .omr-row:not(.is-wrong),
.omr-grid.is-filter-blank .omr-row:not(.is-blank),
.omr-grid.is-filter-wrong .omr-block:not(:has(.is-wrong)),
.omr-grid.is-filter-blank .omr-block:not(:has(.is-blank)) { display: none; }

/* Marking-guide mode (admin) ---------------------------------------- */
.omr--key .omr-row.is-missing { background: #fff2cc; }
.omr--key .omr-row.is-missing .omr-num::after { content: " ?"; color: #b07a12; }
.omr--key .omr-row.is-focus { outline: 2px solid #2f7d75; outline-offset: -2px; }

.omr-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 6px;
    border-top: 1px dashed var(--omr-ink-soft);
    font-size: .65rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #a2837a;
}

@media (max-width: 575.98px) {
    :root { --omr-bubble: 34px; }            /* bigger targets for thumbs */
    .omr { padding: 12px 10px 10px 24px; }
    .omr-rail { left: 6px; width: 8px; }
    .omr-grid { grid-template-columns: 1fr; }
    .omr-opts { gap: 10px; }
    .omr-head { padding: 8px 9px; }
    .omr-info { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .omr-field { padding: 2px 5px 3px; }
    .omr-field.is-wide { grid-column: 1 / -1; }
    .omr-field dt { font-size: .55rem; }
    .omr-field dd { font-size: .74rem; }
}

/* ------------------------------------------------------------------ */
/* 2. Workspace                                                        */
/* ------------------------------------------------------------------ */

body.ex-page {
    overflow: hidden;
    background: var(--ts-paper);
}

.ex-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.ex-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--ex-bar-h);
    padding: 8px 16px;
    background: var(--ts-surface);
    border-bottom: 1px solid var(--ts-border);
    box-shadow: var(--ts-shadow-sm);
    position: relative;
    z-index: 20;
}

.ex-back,
.ex-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 10px;
    border: 1px solid var(--ts-border);
    background: var(--ts-surface-2);
    color: var(--ts-ink-soft);
    text-decoration: none;
}

.ex-back:hover, .ex-icon-btn:hover { color: var(--ts-ink); background: var(--ts-border-soft); }
.ex-icon-btn[aria-pressed="false"] { color: var(--ts-ink-muted); opacity: .75; }

.ex-title { flex: 1 1 auto; }
.ex-title-main { font-weight: 700; line-height: 1.2; }
.ex-title-sub { font-size: .8rem; color: var(--ts-ink-muted); }

.ex-save {
    color: var(--ts-ink-muted);
    white-space: nowrap;
}
.ex-save.is-error { color: var(--bs-danger); }
.ex-save.is-ok { color: var(--ts-sage-700); }

/* The timer ---------------------------------------------------------- */
.ex-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--ts-teal-100);
    color: var(--ts-teal-900);
    border: 1.5px solid var(--ts-teal-300);
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
    flex: 0 0 auto;
}

.ex-timer-digits { min-width: 4.1ch; text-align: center; letter-spacing: .02em; }

/* 5 minutes left: red */
.ex-timer.is-warning {
    background: #fde7e4;
    color: #b3261e;
    border-color: #e39b92;
}

/* 2 minutes left: red and blinking */
.ex-timer.is-critical {
    background: #b3261e;
    color: #fff;
    border-color: #b3261e;
    animation: ex-blink 1s steps(1, end) infinite;
}

@keyframes ex-blink {
    0%   { opacity: 1; }
    50%  { opacity: .25; }
}

/* Still blinks with reduced motion (it is a requirement), just softer */
@media (prefers-reduced-motion: reduce) {
    .ex-timer.is-critical { animation: ex-blink-soft 1.6s ease-in-out infinite; }
    @keyframes ex-blink-soft { 50% { opacity: .55; } }
}

.ex-timer.is-over { background: #6b6f73; border-color: #6b6f73; color: #fff; animation: none; }

.ex-score-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--ts-teal-100);
    color: var(--ts-teal-900);
    font-size: .9rem;
}
.ex-score-chip strong { font-size: 1.15rem; }

/* Two panes ------------------------------------------------------------ */
.ex-main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(380px, 1fr);
}

.ex-pane {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ex-paper { border-right: 1px solid var(--ts-border); background: #e8e4dc; }
[data-bs-theme="dark"] .ex-paper { background: #2b2f33; }

.ex-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--ts-surface);
    border-bottom: 1px solid var(--ts-border);
}

.ex-zoom-level { min-width: 4.2rem; }

.ex-paper-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 12px 40px;
}

.ex-paper-scroll:focus-visible { outline: 3px solid var(--ts-teal-300); outline-offset: -3px; }

.ex-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition: filter .35s ease;
}

.ex-pages.is-blurred { filter: blur(9px) saturate(.6); pointer-events: none; user-select: none; }

.ex-page-box {
    position: relative;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 6px 18px rgba(0, 0, 0, .08);
    max-width: none;
}

.ex-page-box canvas { display: block; width: 100%; height: 100%; }

.ex-page-num {
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-size: .7rem;
    color: #8a8f94;
    background: rgba(255, 255, 255, .85);
    padding: 1px 6px;
    border-radius: 4px;
}

.ex-paper-status {
    margin: 60px auto;
    color: var(--ts-ink-soft);
    background: var(--ts-surface);
    padding: 12px 16px;
    border-radius: var(--ts-radius-sm);
    box-shadow: var(--ts-shadow);
    max-width: 30rem;
    text-align: center;
}

.ex-veil,
.ex-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    z-index: 10;
    background: rgba(247, 245, 240, .35);
}

.ex-overlay {
    position: fixed;
    z-index: 1100;
    background: rgba(35, 42, 46, .55);
    backdrop-filter: blur(2px);
}

.ex-overlay[hidden] { display: none; }

/* Leaving-the-page warning: opaque, so the paper cannot be read behind it */
.ex-guard { background: rgba(35, 42, 46, .92); backdrop-filter: blur(6px); z-index: 1090; }
.ex-veil-icon.is-danger { background: #fde7e4; color: #b3261e; }

.ex-leaves {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fde7e4;
    color: #b3261e;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}
.ex-leaves[hidden] { display: none; }

.ex-veil-card,
.ex-overlay-card {
    width: min(420px, 100%);
    background: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    box-shadow: var(--ts-shadow-lg);
    padding: 24px;
    text-align: center;
}

.ex-veil-icon {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--ts-teal-100);
    color: var(--ts-teal-700);
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.ex-sheet { background: var(--ts-surface-2); }

.ex-sheet-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 16px 16px 40px;
}

.ex-sheet-end {
    text-align: center;
    padding: 18px 0 8px;
}

/* Phone: one pane at a time ------------------------------------------- */
.ex-switch { display: none; }

@media (max-width: 991.98px) {
    .ex-main { grid-template-columns: 1fr; }
    .ex-pane { display: none; }
    .ex-pane.is-shown { display: flex; }
    .ex-paper { border-right: 0; }

    .ex-switch {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex: 0 0 auto;
        min-height: var(--ex-switch-h);
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--ts-surface);
        border-top: 1px solid var(--ts-border);
        z-index: 20;
    }

    .ex-switch button {
        border: 0;
        background: transparent;
        color: var(--ts-ink-soft);
        font-weight: 600;
        font-size: .9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-top: 3px solid transparent;
    }

    .ex-switch button.is-active {
        color: var(--ts-teal-800);
        border-top-color: var(--ts-teal-700);
        background: var(--ts-teal-100);
    }

    .ex-switch-count {
        font-size: .75rem;
        background: var(--ts-teal-700);
        color: #fff;
        border-radius: 999px;
        padding: 1px 7px;
    }

    .ex-bar { gap: 8px; padding: 6px 10px; }
    .ex-title-sub { display: none; }
    .ex-save { display: none; }
    .ex-timer { font-size: 1.05rem; padding: 6px 10px; }
    .ex-finish-btn { padding: .35rem .7rem; }
}

@media (max-width: 420px) {
    .ex-title { display: none; }
    .ex-timer { margin-left: auto; }
}

.ex-noscript {
    position: fixed;
    inset: auto 16px 16px;
    padding: 12px 16px;
    background: #b3261e;
    color: #fff;
    border-radius: 10px;
    z-index: 2000;
}

/* ------------------------------------------------------------------ */
/* 3. Lists, instructions and results                                  */
/* ------------------------------------------------------------------ */

.ts-exam-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    padding: 16px;
    box-shadow: var(--ts-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}

.ts-exam-card:hover { box-shadow: var(--ts-shadow); transform: translateY(-1px); }

.ts-exam-card .ts-exam-subject {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ts-ink-soft);
}

.ts-exam-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: .8rem;
    color: var(--ts-ink-muted);
}

.ts-exam-best {
    font-size: .8rem;
    padding: 6px 10px;
    border-radius: var(--ts-radius-sm);
    background: var(--ts-surface-2);
}

.ts-instructions {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ts-instructions li {
    position: relative;
    padding: 8px 0 8px 40px;
    border-bottom: 1px dashed var(--ts-border);
}

.ts-instructions li:last-child { border-bottom: 0; }

.ts-instructions li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 7px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 700;
    background: var(--ts-teal-100);
    color: var(--ts-teal-800);
}

/* Score ring on the result page */
.ts-score-ring {
    --pct: 0;
    --ring: var(--ts-teal-700);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, var(--ts-surface) 76%, transparent 77% 100%),
        conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--ts-border-soft) 0);
    flex: 0 0 auto;
}

.ts-score-ring.is-success { --ring: #4e7d52; }
.ts-score-ring.is-warning { --ring: #c08a2e; }
.ts-score-ring.is-danger  { --ring: #b0483f; }

.ts-score-ring-value { text-align: center; line-height: 1.1; }
.ts-score-ring-value strong { display: block; font-size: 2rem; }
.ts-score-ring-value span { font-size: .8rem; color: var(--ts-ink-muted); }

.ts-exam-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: .9rem;
}

.ts-exam-facts dt { color: var(--ts-ink-muted); font-weight: 500; }
.ts-exam-facts dd { margin: 0; font-weight: 600; }

/* Admin form: paper preview next to the marking guide */
.ts-key-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.ts-key-preview {
    position: sticky;
    top: 12px;
    height: min(78vh, 900px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius-sm);
    overflow: hidden;
    background: #e8e4dc;
}

.ts-key-preview .ex-paper-scroll { padding: 10px; }

@media (max-width: 1199.98px) {
    .ts-key-split { grid-template-columns: 1fr; }
    .ts-key-preview { position: relative; top: 0; height: 60vh; }
}

.ts-item-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--ts-border-soft);
    min-width: 120px;
}

.ts-item-bar span { display: block; height: 100%; }

/* ------------------------------------------------------------------ */
/* 4. Public "Live exams" page                                         */
/* ------------------------------------------------------------------ */

.ts-live-hero {
    background: linear-gradient(135deg, var(--ts-teal-100), var(--ts-surface) 70%);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    padding: 28px;
}

.ts-live-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 8px;
    background: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius-sm);
    font-weight: 600;
}

.ts-live-steps i { color: var(--ts-teal-700); font-size: 1.2rem; }

.ts-live-card { padding: 0; overflow: hidden; }

.ts-live-card-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

.ts-live-card-band .badge { text-shadow: none; }


/* ------------------------------------------------------------------ */
/* 5. Phone: quick-answer bar under the question paper                 */
/* ------------------------------------------------------------------ */

.ex-quick { display: none; }

@media (max-width: 991.98px) {
    .ex-quick {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 8px 8px;
        background: var(--omr-paper);
        border-top: 2px solid var(--omr-ink);
        box-shadow: 0 -4px 14px rgba(0, 0, 0, .08);
        z-index: 5;
    }

    .ex-quick.is-answered { background: var(--omr-row-on); }

    .ex-quick-nav {
        flex: 0 0 auto;
        width: 38px;
        height: 42px;
        border: 1px solid var(--ts-border);
        border-radius: 10px;
        background: var(--ts-surface);
        color: var(--ts-ink-soft);
        font-size: 1.1rem;
    }

    .ex-quick-nav:disabled { opacity: .35; }

    .ex-quick-q select {
        appearance: none;
        -webkit-appearance: none;
        border: 1.5px solid var(--omr-ink);
        border-radius: 8px;
        background: #fff;
        color: var(--omr-ink);
        font-weight: 800;
        font-size: 1rem;
        padding: 8px 8px;
        min-width: 64px;
        text-align: center;
        text-align-last: center;
    }

    .ex-quick-opts { display: inline-flex; gap: 8px; }
    .ex-quick-opts .omr-bubble { --omr-bubble: 40px; font-size: .9rem; }
}

@media (max-width: 360px) {
    .ex-quick-opts { gap: 5px; }
    .ex-quick-opts .omr-bubble { --omr-bubble: 34px; }
    .ex-quick-q select { min-width: 54px; padding: 8px 4px; }
}