/* ════════════════════════════════════════════════════════════════
   NAADI AI — ARENA DESKTOP ADAPTATION LAYER  (arena-desktop.css)
   ─────────────────────────────────────────────────────────────────
   Desktop-native (≥1024px) presentation for the entire ARENA section
   (NEET Arena · PYQ Vault · AIR Rankings · leaderboards · history ·
   results) AND the shared test-taking workspace (question · OMR ·
   palette · timer), which OPD also inherits.

   MOBILE-SAFETY CONTRACT (identical to concept-studio-desktop.css):
     • Every rule in this file lives inside @media (min-width:1024px).
     • app.html ALSO loads it with media="(min-width:1024px)", so a
       phone never even applies the sheet.
     • All selectors are namespaced `ad-` so they can NEVER collide
       with the mobile pv2- / te- / omr- / ph- classes. Where we DO
       reuse a mobile class (e.g. .omr-m-bubble, .te-option) we only
       ever scope it *inside* an `ad-` container — mobile selectors are
       never touched at their own specificity.
     • Delete this file + the one <link>/<script> line and the mobile
       app is byte-for-byte identical.

   Tokens: reuses the global --g* / --s* / --font-* / --indigo / --red
   etc. from styles-mobile.css (always loaded). A few local --ad-*
   tokens are defined for the workspace only.
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

    :root {
        /* Local workspace tokens (scoped names, no global collision) */
        --ad-rail: 300px;
        /* OMR + actions panel width       */
        --ad-palette: 236px;
        /* question palette rail width     */
        --ad-gap: 22px;
        --ad-card: #ffffff;
        --ad-line: #e2e8f0;
        --ad-ink: #0f172a;
        --ad-muted: #64748b;
        --ad-grad: linear-gradient(135deg, #2f6cb3, #5d92cf);
        --ad-navy: #0b1220;
        --ad-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
        --ad-shadow-lift: 0 14px 40px -16px rgba(15, 23, 42, .28);
        --ad-radius: 16px;
    }

    /* ════════════════════════════════════════════════════════════
       0 · SHARED LANDING FRAME
       The landing screens (arena / pyq / air / history / leaderboard
       / in-shell results) sit in the 248px-offset main column. We
       widen the surface and give it a comfortable page gutter.
       ════════════════════════════════════════════════════════════ */
    .ad-page {
        max-width: 1180px;
        margin: 0 auto;
        padding: 26px 40px 64px;
    }

    .ad-switch-hold {
        max-width: 1180px;
        margin: 0 auto;
        padding: 20px 40px 0;
    }

    /* Segmented switcher: reuse mobile .ph-switch markup but let it sit
       inline-left at laptop density instead of full-bleed sticky. */
    .ad-switch-hold .ph-switch {
        position: static;
        display: inline-flex;
        margin: 0;
        background: var(--s100);
    }

    .ad-switch-hold .ph-switch-pill {
        flex: 0 0 auto;
        padding: 9px 20px;
        font-size: .78rem;
    }

    /* ── Landing hero: horizontal band, stats to the right ── */
    .ad-hero {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 32px;
        background: var(--ad-navy);
        border-radius: 20px;
        padding: 34px 38px;
        color: #e2e8f0;
        margin-bottom: 26px;
    }

    .ad-hero-kicker {
        font-family: var(--font-display);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #7fb0e6;
        margin-bottom: 10px;
    }

    .ad-hero h1 {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1.05;
        color: #fff;
        margin-bottom: 10px;
    }

    .ad-hero p {
        font-size: .9rem;
        line-height: 1.6;
        color: #94a3b8;
        max-width: 54ch;
    }

    .ad-hero-actions {
        display: flex;
        gap: 10px;
        margin-top: 18px;
        flex-wrap: wrap;
    }

    .ad-hero-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(255, 255, 255, .16);
        background: rgba(255, 255, 255, .06);
        color: #e2e8f0;
        border-radius: 11px;
        padding: 11px 16px;
        font-family: var(--font-display);
        font-size: .82rem;
        font-weight: 600;
        cursor: pointer;
        transition: background .18s, border-color .18s, transform .1s;
    }

    .ad-hero-btn:hover {
        background: rgba(255, 255, 255, .12);
        border-color: rgba(255, 255, 255, .28);
    }

    .ad-hero-btn:active {
        transform: translateY(1px);
    }

    .ad-hero-btn i {
        color: #9fc3e8;
    }

    .ad-hero-stats {
        display: flex;
        gap: 26px;
        padding-left: 32px;
        border-left: 1px solid rgba(255, 255, 255, .1);
    }

    .ad-hero-stats>div {
        text-align: center;
    }

    .ad-hero-stats b {
        display: block;
        font-family: var(--font-display);
        font-size: 1.7rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
    }

    .ad-hero-stats span {
        display: block;
        margin-top: 6px;
        font-size: .68rem;
        letter-spacing: .05em;
        text-transform: uppercase;
        /* #64748b is only ~3.6:1 on --ad-navy, under AA for 11px uppercase */
        color: #94a3b8;
    }

    /* ── Section label ── */
    .ad-seclabel {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 30px 0 16px;
    }

    .ad-seclabel span {
        font-family: var(--font-display);
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--s500);
    }

    .ad-seclabel .ln {
        flex: 1;
        height: 1px;
        background: var(--ad-line);
    }

    /* ════════════════════════════════════════════════════════════
       1 · ARENA LANDING — papers grid + year rail
       ════════════════════════════════════════════════════════════ */
    .ad-arena-body {
        display: grid;
        grid-template-columns: 190px 1fr;
        gap: 30px;
        align-items: start;
    }

    /* sticky year jump + filter rail */
    .ad-yearrail {
        position: sticky;
        top: 20px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .ad-yearrail-title {
        font-family: var(--font-display);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--s400);
        margin-bottom: 8px;
    }

    .ad-yearrail button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        border: 0;
        background: transparent;
        border-radius: 9px;
        padding: 9px 12px;
        font-family: var(--font-display);
        font-size: .84rem;
        font-weight: 600;
        color: var(--s600);
        cursor: pointer;
        text-align: left;
        transition: background .16s, color .16s;
    }

    .ad-yearrail button:hover {
        background: var(--s100);
        color: var(--ad-ink);
    }

    .ad-yearrail button.active {
        background: var(--g50);
        color: var(--g600);
    }

    .ad-yearrail button small {
        font-size: .68rem;
        font-weight: 600;
        color: var(--s400);
    }

    .ad-yearrail .ad-filtertoggle {
        margin-top: 14px;
        border-top: 1px solid var(--ad-line);
        padding-top: 14px;
    }

    .ad-papers-scroll {
        min-width: 0;
    }

    .ad-year-block {
        margin-bottom: 30px;
    }

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

    /* Paper card — reworked for a grid tile (own class, no pv2 collision) */
    .ad-paper {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: var(--ad-card);
        border: 1px solid var(--ad-line);
        border-radius: var(--ad-radius);
        padding: 18px;
        cursor: pointer;
        transition: border-color .18s, box-shadow .18s, transform .12s;
    }

    .ad-paper:hover {
        border-color: var(--g400);
        box-shadow: var(--ad-shadow-lift);
        transform: translateY(-2px);
    }

    .ad-paper.done {
        border-color: #bfe3cc;
        background: linear-gradient(180deg, #f4fbf6, #fff 60%);
    }

    /* Locked papers (desktop). Same intent as the mobile rule in
       practice-v2.css: listed, obviously locked, obviously buyable.
       The card keeps its hover lift so it still reads as clickable —
       it opens the paywall rather than the paper. */

    .ad-paper.locked {
        border-style: dashed;
        background: var(--ad-card);
    }

    .ad-paper.locked .ad-paper-code {
        background: var(--s100, #f1f5f9);
        color: var(--s400, #94a3b8);
        font-size: .9rem;
    }

    .ad-paper.locked h4 {
        color: var(--s500, #64748b);
    }

    .ad-paper-top {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ad-paper-code {
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
        border-radius: 12px;
        background: var(--g600);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 800;
    }

    .ad-paper.done .ad-paper-code {
        background: var(--green-600);
    }

    .ad-paper h4 {
        font-family: var(--font-display);
        font-size: .96rem;
        font-weight: 700;
        letter-spacing: -.01em;
        color: var(--ad-ink);
    }

    .ad-paper .ad-paper-meta {
        font-size: .76rem;
        color: var(--s500);
        margin-top: 3px;
    }

    .ad-paper-chips {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .ad-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: var(--font-display);
        font-size: .68rem;
        font-weight: 700;
        padding: 4px 9px;
        border-radius: 999px;
        background: var(--s100);
        color: var(--s600);
    }

    .ad-chip.grad {
        background: var(--g50);
        color: var(--g600);
    }

    .ad-chip.best {
        background: #e7f6ec;
        color: #157a3a;
    }

    /* ════════════════════════════════════════════════════════════
       2 · PYQ VAULT — two-pane builder
       ════════════════════════════════════════════════════════════ */
    .ad-builder {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 26px;
        align-items: start;
    }

    .ad-builder-main {
        min-width: 0;
        background: var(--ad-card);
        border: 1px solid var(--ad-line);
        border-radius: var(--ad-radius);
        padding: 24px 26px;
    }

    .ad-bgroup {
        margin-bottom: 22px;
    }

    .ad-bgroup>label {
        display: block;
        font-family: var(--font-display);
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--s500);
        margin-bottom: 10px;
    }

    .ad-bgroup .ad-opt {
        font-size: .68rem;
        font-weight: 600;
        color: var(--s400);
        text-transform: none;
        letter-spacing: 0;
    }

    .ad-chiprow {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Builder chip — own class, mirrors ph-fchip look at laptop density */
    .ad-fchip {
        border: 1px solid var(--ad-line);
        background: #fff;
        color: var(--s600);
        border-radius: 10px;
        padding: 9px 15px;
        font-family: var(--font-display);
        font-size: .82rem;
        font-weight: 600;
        cursor: pointer;
        transition: all .15s;
    }

    .ad-fchip:hover {
        border-color: var(--g400);
        color: var(--g600);
    }

    .ad-fchip.active {
        background: var(--g600);
        border-color: var(--g600);
        color: #fff;
    }

    .ad-fchip.sm {
        padding: 6px 11px;
        font-size: .76rem;
        border-radius: 8px;
    }

    /* Chapter picker → multi-column checklist */
    .ad-chap {
        border: 1px solid var(--ad-line);
        border-radius: 12px;
        overflow: hidden;
    }

    .ad-chap-search {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border-bottom: 1px solid var(--ad-line);
        background: var(--s50);
    }

    .ad-chap-search i {
        color: var(--s400);
        font-size: .82rem;
    }

    .ad-chap-search input {
        flex: 1;
        border: 0;
        background: transparent;
        font-family: var(--font-body);
        font-size: .86rem;
        color: var(--ad-ink);
        outline: none;
    }

    .ad-chap-clear {
        border: 0;
        background: var(--red-bg);
        color: var(--red);
        border-radius: 8px;
        padding: 5px 10px;
        font-size: .72rem;
        font-weight: 700;
        cursor: pointer;
    }

    .ad-chap-scroll {
        max-height: 340px;
        overflow-y: auto;
        padding: 6px;
    }

    .ad-chap-group {
        margin-bottom: 4px;
    }

    .ad-chap-ghead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border: 0;
        background: transparent;
        padding: 10px 12px;
        border-radius: 8px;
        cursor: pointer;
        font-family: var(--font-display);
    }

    .ad-chap-ghead:hover {
        background: var(--s50);
    }

    .ad-chap-sub {
        font-size: .8rem;
        font-weight: 700;
        color: var(--ad-ink);
    }

    .ad-chap-meta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: .74rem;
        color: var(--s400);
    }

    .ad-chap-selpill {
        background: var(--g600);
        color: #fff;
        border-radius: 999px;
        padding: 1px 8px;
        font-size: .68rem;
        font-weight: 700;
    }

    .ad-chap-ghead .fa-chevron-down {
        transition: transform .18s;
    }

    .ad-chap-group.open .ad-chap-ghead .fa-chevron-down {
        transform: rotate(180deg);
    }

    .ad-chap-chips {
        display: none;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 6px;
        padding: 4px 12px 12px;
    }

    .ad-chap-group.open .ad-chap-chips {
        display: grid;
    }

    .ad-chap-chips .ad-fchip {
        text-align: left;
        white-space: normal;
        line-height: 1.3;
    }

    .ad-chap-loading,
    .ad-chap-empty {
        padding: 20px 14px;
        font-size: .82rem;
        color: var(--s500);
        text-align: center;
    }

    /* Builder summary column (sticky) */
    .ad-builder-side {
        position: sticky;
        top: 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .ad-summary {
        background: var(--ad-navy);
        border-radius: 16px;
        padding: 22px;
        color: #e2e8f0;
    }

    .ad-summary h3 {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 4px;
    }

    .ad-summary .ad-sum-sub {
        font-size: .76rem;
        color: #94a3b8;
        margin-bottom: 18px;
    }

    .ad-sum-preview {
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 12px;
        padding: 14px 16px;
        font-size: .84rem;
        color: #cbd5e1;
        margin-bottom: 8px;
        min-height: 54px;
    }

    .ad-sum-preview b {
        color: #fff;
    }

    .ad-sum-preview .spinner {
        width: 18px;
        height: 18px;
    }

    .ad-sum-rows {
        margin: 14px 0 18px;
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .ad-sum-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        font-size: .8rem;
    }

    .ad-sum-row span {
        color: #94a3b8;
    }

    .ad-sum-row b {
        color: #fff;
        font-family: var(--font-display);
        font-weight: 600;
        text-align: right;
    }

    .ad-start-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        border: 0;
        border-radius: 12px;
        padding: 15px;
        background: var(--ad-grad);
        color: #fff;
        font-family: var(--font-display);
        font-size: .92rem;
        font-weight: 700;
        cursor: pointer;
        transition: filter .15s, transform .1s, opacity .15s;
    }

    .ad-start-btn:hover:not(:disabled) {
        filter: brightness(1.06);
    }

    .ad-start-btn:active:not(:disabled) {
        transform: translateY(1px);
    }

    .ad-start-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

    .ad-fineprint {
        font-size: .72rem;
        color: #64748b;
        line-height: 1.6;
        margin-top: 14px;
    }

    /* Full-paper browse toggle for the vault */
    .ad-vault-tabs {
        display: inline-flex;
        gap: 4px;
        background: var(--s100);
        border-radius: 10px;
        padding: 4px;
        margin-bottom: 20px;
    }

    .ad-vault-tabs button {
        border: 0;
        background: transparent;
        border-radius: 7px;
        padding: 8px 16px;
        font-family: var(--font-display);
        font-size: .8rem;
        font-weight: 700;
        color: var(--s500);
        cursor: pointer;
    }

    .ad-vault-tabs button.active {
        background: #fff;
        color: var(--g600);
        box-shadow: var(--ad-shadow);
    }

    /* ════════════════════════════════════════════════════════════
       3 · AIR RANKINGS — table + standing column
       ════════════════════════════════════════════════════════════ */
    .ad-air-body {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 28px;
        align-items: start;
    }

    .ad-air-side {
        position: sticky;
        top: 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .ad-mycard {
        background: var(--ad-navy);
        border-radius: 16px;
        padding: 22px;
        color: #e2e8f0;
    }

    .ad-mycard .kicker {
        font-family: var(--font-display);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #7fb0e6;
        margin-bottom: 16px;
    }

    .ad-mystats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 10px;
    }

    .ad-mystats>div b {
        display: block;
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
    }

    .ad-mystats>div span {
        display: block;
        margin-top: 5px;
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #64748b;
    }

    .ad-mycard>p {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, .1);
        font-size: .78rem;
        color: #94a3b8;
    }

    /* Progression chart card */
    .ad-chartcard {
        background: var(--ad-card);
        border: 1px solid var(--ad-line);
        border-radius: 16px;
        padding: 20px;
    }

    .ad-chartcard h4 {
        font-family: var(--font-display);
        font-size: .82rem;
        font-weight: 700;
        color: var(--ad-ink);
        margin-bottom: 14px;
    }

    .ad-air-chart {
        width: 100%;
        height: auto;
    }

    .ad-air-ax {
        font-size: 9px;
        fill: var(--s400);
        font-family: var(--font-body);
    }

    .ad-att-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 14px;
    }

    .ad-att {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        border: 1px solid var(--ad-line);
        background: #fff;
        border-radius: 11px;
        padding: 11px 13px;
        cursor: pointer;
        text-align: left;
        transition: border-color .16s, box-shadow .16s;
    }

    .ad-att:hover {
        border-color: var(--g400);
        box-shadow: var(--ad-shadow);
    }

    .ad-att-n {
        font-family: var(--font-display);
        font-size: .78rem;
        font-weight: 800;
        color: var(--g600);
        min-width: 26px;
    }

    .ad-att-main {
        flex: 1;
        min-width: 0;
    }

    .ad-att-main b {
        display: block;
        font-family: var(--font-display);
        font-size: .82rem;
        font-weight: 600;
        color: var(--ad-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ad-att-main span {
        font-size: .72rem;
        color: var(--s500);
    }

    .ad-att-score {
        font-family: var(--font-display);
        font-weight: 800;
        color: var(--ad-ink);
        font-size: .92rem;
    }

    .ad-att-score i {
        font-style: normal;
        font-size: .72rem;
        font-weight: 600;
        color: var(--s400);
    }

    /* Leaderboard table (AIR + per-paper share this) */
    .ad-lb {
        background: var(--ad-card);
        border: 1px solid var(--ad-line);
        border-radius: var(--ad-radius);
        overflow: hidden;
    }

    .ad-lb-head,
    .ad-lb-row {
        display: grid;
        grid-template-columns: 60px 1fr 120px 120px 110px;
        align-items: center;
        gap: 10px;
        padding: 13px 20px;
    }

    .ad-lb-head {
        background: var(--s50);
        border-bottom: 1px solid var(--ad-line);
        font-family: var(--font-display);
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--s500);
    }

    .ad-lb-head .r {
        text-align: right;
    }

    .ad-lb-row {
        border-bottom: 1px solid var(--s100);
        transition: background .14s;
    }

    .ad-lb-row:last-child {
        border-bottom: 0;
    }

    .ad-lb-row:hover {
        background: var(--s50);
    }

    .ad-lb-row.me {
        background: var(--g50);
    }

    .ad-lb-row.me:hover {
        background: var(--g100);
    }

    .ad-lb-rank {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 800;
        color: var(--s500);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--s100);
    }

    .ad-lb-rank.gold {
        background: linear-gradient(135deg, #f6d365, #fda085);
        color: #7a4a00;
    }

    .ad-lb-rank.silver {
        background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
        color: #475569;
    }

    .ad-lb-rank.bronze {
        background: linear-gradient(135deg, #f0c9a3, #d69b6a);
        color: #7a3f10;
    }

    .ad-lb-name {
        min-width: 0;
    }

    .ad-lb-name h4 {
        font-family: var(--font-display);
        font-size: .9rem;
        font-weight: 700;
        color: var(--ad-ink);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ad-lb-name p {
        font-size: .74rem;
        color: var(--s500);
        margin-top: 2px;
    }

    .ad-you-tag {
        background: var(--g600);
        color: #fff;
        font-size: .62rem;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 999px;
        letter-spacing: .03em;
    }

    .ad-lb-cell {
        font-family: var(--font-display);
        font-size: .88rem;
        font-weight: 600;
        color: var(--s700);
        text-align: right;
    }

    .ad-lb-cell.marks b {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--ad-ink);
    }

    .ad-lb-cell.marks span {
        display: block;
        font-size: .68rem;
        font-weight: 600;
        color: var(--s400);
    }

    /* AIR: my expandable row detail lives directly under the table */
    .ad-air-medetail {
        margin-top: 18px;
    }

    /* ════════════════════════════════════════════════════════════
       4 · HISTORY — wide attempts table with best-of grouping
       ════════════════════════════════════════════════════════════ */
    .ad-hist-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ad-hist-group {
        border: 1px solid var(--ad-line);
        border-radius: var(--ad-radius);
        overflow: hidden;
        background: var(--ad-card);
    }

    .ad-hist {
        display: grid;
        grid-template-columns: 52px 1fr auto 120px;
        align-items: center;
        gap: 16px;
        padding: 16px 20px;
        cursor: pointer;
        transition: background .14s;
    }

    .ad-hist:hover {
        background: var(--s50);
    }

    .ad-hist.sub {
        background: var(--s50);
        border-top: 1px solid var(--s100);
        padding-left: 26px;
    }

    .ad-hist h4 {
        font-family: var(--font-display);
        font-size: .94rem;
        font-weight: 700;
        color: var(--ad-ink);
    }

    .ad-hist p {
        font-size: .76rem;
        color: var(--s500);
        margin-top: 3px;
    }

    .ad-hist-chips {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .ad-hist-score {
        text-align: right;
        font-family: var(--font-display);
    }

    .ad-hist-score b {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--ad-ink);
    }

    .ad-hist-score span {
        font-size: .74rem;
        color: var(--s400);
    }

    .ad-hist-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        border: 0;
        border-top: 1px solid var(--s100);
        background: var(--s50);
        padding: 11px;
        font-family: var(--font-display);
        font-size: .78rem;
        font-weight: 700;
        color: var(--g600);
        cursor: pointer;
    }

    .ad-hist-toggle .hide {
        display: none;
    }

    .ad-hist-toggle.open .show {
        display: none;
    }

    .ad-hist-toggle.open .hide {
        display: inline;
    }

    .ad-hist-toggle .fa-chevron-down {
        transition: transform .18s;
    }

    .ad-hist-toggle.open .fa-chevron-down {
        transform: rotate(180deg);
    }

    .ad-hist-more {
        display: none;
    }

    .ad-hist-more.open {
        display: block;
    }

    /* Score ring wrapper for history/subject rings (reuses cs ring svg) */
    .ad-ringcell {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ════════════════════════════════════════════════════════════
       5 · TEST WORKSPACE — three-pane exam layout
       (Arena · PYQ · OPD all share this via renderTestShell)
       ════════════════════════════════════════════════════════════ */
    .ad-tw {
        position: fixed;
        inset: 0;
        display: grid;
        grid-template-rows: auto 1fr;
        background: var(--s50);
        z-index: 50;
    }

    /* Header: exit · label+progress · subject tabs · timer · palette btn */
    .ad-tw-head {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 12px 24px;
        background: #fff;
        border-bottom: 1px solid var(--ad-line);
    }

    .ad-tw-exit {
        border: 1px solid var(--ad-line);
        background: #fff;
        color: var(--s600);
        width: 40px;
        height: 40px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 1rem;
        flex: 0 0 auto;
        transition: background .15s, color .15s;
    }

    .ad-tw-exit:hover {
        background: var(--red-bg);
        color: var(--red);
        border-color: var(--red-bg);
    }

    .ad-tw-title {
        min-width: 0;
    }

    .ad-tw-title b {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: var(--ad-ink);
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ad-tw-title span {
        font-size: .74rem;
        color: var(--s500);
    }

    .ad-tw-tabs {
        display: flex;
        gap: 6px;
        margin-left: auto;
    }

    .ad-tw-tab {
        border: 1px solid var(--ad-line);
        background: #fff;
        border-radius: 9px;
        padding: 8px 15px;
        font-family: var(--font-display);
        font-size: .8rem;
        font-weight: 600;
        color: var(--s600);
        cursor: pointer;
        transition: all .15s;
    }

    .ad-tw-tab:hover {
        border-color: var(--g400);
        color: var(--g600);
    }

    .ad-tw-tab.active {
        background: var(--g600);
        border-color: var(--g600);
        color: #fff;
    }

    .ad-tw-opdchips {
        display: flex;
        gap: 6px;
        margin-left: auto;
        flex-wrap: wrap;
    }

    .ad-tw-timer {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--ad-ink);
        background: var(--s100);
        border-radius: 10px;
        padding: 9px 15px;
        flex: 0 0 auto;
    }

    .ad-tw-timer.warning {
        background: var(--red-bg);
        color: var(--red);
        animation: ad-pulse 1s ease-in-out infinite;
    }

    @keyframes ad-pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: .6;
        }
    }

    .ad-tw-palettebtn {
        border: 1px solid var(--ad-line);
        background: #fff;
        color: var(--s600);
        width: 40px;
        height: 40px;
        border-radius: 10px;
        cursor: pointer;
        flex: 0 0 auto;
        transition: all .15s;
    }

    .ad-tw-palettebtn:hover {
        border-color: var(--g400);
        color: var(--g600);
    }

    /* When the palette rail is visible the header button hides itself */
    .ad-tw.has-palette .ad-tw-palettebtn {
        display: none;
    }

    /* progress hairline under header */
    .ad-tw-progtrack {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: var(--s100);
    }

    .ad-tw-progtrack i {
        display: block;
        height: 100%;
        width: 0;
        background: var(--ad-grad);
        transition: width .3s;
    }

    /* Body: question | omr+actions | palette */
    .ad-tw-body {
        display: grid;
        grid-template-columns: 1fr var(--ad-rail) var(--ad-palette);
        min-height: 0;
        overflow: hidden;
    }

    .ad-tw.no-palette .ad-tw-body {
        grid-template-columns: 1fr var(--ad-rail);
    }

    /* ── Question column ── */
    .ad-qcol {
        overflow-y: auto;
        padding: 32px 40px 60px;
    }

    .ad-qcard {
        max-width: 760px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid var(--ad-line);
        border-radius: 18px;
        padding: 30px 34px;
    }

    .ad-q-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 14px;
    }

    .ad-q-num {
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--g600);
    }

    .ad-q-chapter {
        font-size: .78rem;
        color: var(--s500);
        margin-bottom: 14px;
    }

    .ad-q-text {
        font-size: 1.05rem;
        line-height: 1.7;
        color: var(--ad-ink);
    }

    /* Question figures get real room on desktop */
    .ad-qcard .te-q-img {
        display: block;
        max-width: 100%;
        max-height: 440px;
        margin: 18px auto;
        border-radius: 12px;
        border: 1px solid var(--ad-line);
    }

    /* Reading-mode options (NOT tappable — commit is on the OMR) */
    .ad-opts {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 22px;
    }

    /* Reuse mobile .te-option markup but scope the desktop feel here,
       never touching the bare mobile selector. Bubble internals (the
       letter tile, lock icon) keep their mobile look. */
    .ad-opts .te-option {
        border: 1px solid var(--ad-line);
        border-radius: 12px;
        padding: 14px 16px;
        background: #fff;
    }

    .ad-opts .te-option.committed {
        border-color: #ec9bb4;
        background: #fdf2f6;
    }

    .ad-q-note {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
        padding: 13px 16px;
        border-radius: 12px;
        font-size: .84rem;
        line-height: 1.5;
    }

    .ad-q-note.commit {
        background: var(--amber-bg);
        color: #7a5107;
    }

    .ad-q-note.locked {
        background: #fdf2f6;
        color: #9d2c4f;
    }

    /* Match tables side by side */
    .ad-qcard .te-match-wrap {
        margin: 18px 0;
    }

    /* ── OMR + actions rail (persistent, replaces the bottom drawer) ── */
    .ad-omr {
        border-left: 1px solid var(--ad-line);
        background: #fff;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .ad-omr-inner {
        padding: 22px 20px;
        flex: 1;
    }

    .ad-omr-title {
        font-family: var(--font-display);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #b0517a;
        text-align: center;
        padding-bottom: 12px;
        border-bottom: 2px dashed #f0c9d8;
        margin-bottom: 4px;
    }

    .ad-omr-instructions {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin: 12px 0 16px;
        font-size: .72rem;
        color: var(--s500);
    }

    .ad-omr-instructions i {
        color: #c77;
        margin-right: 6px;
    }

    .ad-omr-livewrap {
        background: #fdf2f6;
        border: 1px solid #f4d5e0;
        border-radius: 14px;
        padding: 16px;
    }

    .ad-omr-livenum {
        font-family: var(--font-display);
        font-size: .74rem;
        font-weight: 700;
        color: #b0517a;
        text-align: center;
        margin-bottom: 12px;
    }

    /* The live bubbles: reuse the EXACT mobile .omr-m-bubble element
       (same lock classes, same shadeOmrBubble handler) — we only lay
       them out larger on desktop. Bubble internals are NOT restyled.
       The row element also carries the mobile `.omr-m-row live` classes
       (for the recently-shaded markup parity); we neutralise that box
       here so its padding/border/gap can't push the bubbles past the
       pink livewrap edge. */
    .ad-omr-bubbles {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        border: 0;
        background: none;
        box-sizing: border-box;
    }

    .ad-omr-bubbles .omr-m-bubble {
        /* Re-assert every geometry + centering property so nothing the
           mobile sheet sets on .omr-m-bubble (width clamp, aspect-ratio,
           line-height, padding) can push the A/B/C/D glyph off-centre or
           outside the ring at the larger desktop size. Sized to fit the
           OMR rail width: 4×46 + 3×10 = 214px < the ~228px budget. */
        flex: 0 1 46px;
        width: 46px;
        height: 46px;
        min-width: 0;
        max-width: 46px;
        aspect-ratio: 1;
        padding: 0;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        font-size: 1rem;
        text-align: center;
    }

    /* keep the compact "recently shaded" bubbles centred too */
    .ad-omr-recent .omr-m-bubble.mini {
        width: 26px;
        height: 26px;
        min-width: 26px;
        padding: 0;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ad-omr-note {
        margin-top: 14px;
        font-size: .74rem;
        line-height: 1.5;
        color: var(--s500);
        text-align: center;
    }

    .ad-omr-note.locked {
        color: #9d2c4f;
        font-weight: 600;
    }

    /* recently-answered rows, compact, above the live row */
    .ad-omr-recent {
        margin-top: 18px;
        border-top: 1px solid var(--s100);
        padding-top: 14px;
    }

    .ad-omr-recent-label {
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--s400);
        margin-bottom: 10px;
    }

    .ad-omr-recent .omr-m-row.mini {
        margin-bottom: 6px;
    }

    /* Action bar pinned at the base of the rail */
    .ad-omr-actions {
        position: sticky;
        bottom: 0;
        display: grid;
        grid-template-columns: 44px 44px 1fr 44px;
        gap: 8px;
        padding: 14px 20px;
        background: #fff;
        border-top: 1px solid var(--ad-line);
    }

    .ad-actbtn {
        border: 1px solid var(--ad-line);
        background: #fff;
        color: var(--s600);
        height: 46px;
        border-radius: 11px;
        cursor: pointer;
        font-size: .95rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .15s;
    }

    .ad-actbtn:hover:not(:disabled) {
        border-color: var(--g400);
        color: var(--g600);
    }

    .ad-actbtn:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

    .ad-actbtn.marked {
        background: var(--amber-bg);
        border-color: #eecb8f;
        color: var(--amber);
    }

    .ad-mark-answer {
        grid-column: auto;
        border: 0;
        border-radius: 11px;
        background: var(--ad-grad);
        color: #fff;
        font-family: var(--font-display);
        font-size: .86rem;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: filter .15s;
    }

    .ad-mark-answer:hover {
        filter: brightness(1.06);
    }

    .ad-mark-answer.locked {
        background: #fdf2f6;
        color: #9d2c4f;
        cursor: default;
    }

    .ad-omr-submit {
        margin-top: 14px;
    }

    /* ── Palette rail (persistent, replaces the modal) ── */
    .ad-palette {
        border-left: 1px solid var(--ad-line);
        background: #fff;
        overflow-y: auto;
        padding: 20px 16px;
    }

    .ad-palette-title {
        font-family: var(--font-display);
        font-size: .78rem;
        font-weight: 700;
        color: var(--ad-ink);
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ad-palette-legend {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 16px;
        font-size: .72rem;
        color: var(--s600);
    }

    .ad-palette-legend span {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ad-pdot {
        width: 12px;
        height: 12px;
        border-radius: 4px;
        flex: 0 0 auto;
        border: 1px solid var(--s300);
    }

    .ad-pdot.answered {
        background: var(--green-600);
        border-color: var(--green-600);
    }

    .ad-pdot.unanswered {
        background: #fff;
    }

    .ad-pdot.marked {
        background: var(--amber);
        border-color: var(--amber);
    }

    .ad-pdot.notvisited {
        background: var(--s200);
        border-color: var(--s300);
    }

    .ad-palette-sub {
        font-family: var(--font-display);
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--s400);
        margin: 14px 0 8px;
    }

    .ad-palette-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 7px;
    }

    .ad-pcell {
        aspect-ratio: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        border: 1px solid var(--s200);
        border-radius: 8px;
        background: #fff;
        font-family: var(--font-display);
        font-size: .82rem;
        font-weight: 700;
        color: var(--s600);
        cursor: pointer;
        transition: transform .1s, box-shadow .12s;
    }

    .ad-pcell:hover {
        box-shadow: 0 0 0 2px var(--g200);
    }

    .ad-pcell.current {
        box-shadow: 0 0 0 2px var(--g500);
    }

    .ad-pcell.answered {
        background: var(--green-600);
        border-color: var(--green-600);
        color: #fff;
    }

    .ad-pcell.notvisited {
        background: var(--s100);
        color: var(--s400);
    }

    .ad-pcell.marked {
        background: var(--amber);
        border-color: var(--amber);
        color: #fff;
    }

    .ad-pcell.answered.marked {
        background: linear-gradient(135deg, var(--green-600) 50%, var(--amber) 50%);
    }

    /* ════════════════════════════════════════════════════════════
       6 · RESULTS DASHBOARD — multi-column
       ════════════════════════════════════════════════════════════ */
    .ad-res {
        max-width: 1180px;
        margin: 0 auto;
        padding: 24px 40px 80px;
    }

    .ad-res-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--ad-line);
        background: #fff;
        border-radius: 10px;
        padding: 9px 15px;
        font-family: var(--font-display);
        font-size: .82rem;
        font-weight: 600;
        color: var(--s600);
        cursor: pointer;
        margin-bottom: 20px;
    }

    .ad-res-back:hover {
        border-color: var(--g400);
        color: var(--g600);
    }

    .ad-res-grid {
        display: grid;
        grid-template-columns: 380px 1fr;
        gap: 26px;
        align-items: start;
    }

    .ad-res-summary {
        position: sticky;
        top: 20px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .ad-res-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    /* Scorecard hero */
    .ad-scorecard {
        background: var(--ad-navy);
        border-radius: 18px;
        padding: 26px;
        color: #e2e8f0;
    }

    .ad-scorecard .ad-kicker {
        font-family: var(--font-display);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #7fb0e6;
        margin-bottom: 18px;
    }

    /* The score ring (csRingHTML → SVG #pv2-score-ring) is coloured for a
       LIGHT card by default, so on the dark navy scorecard its centre
       "%" label and track disappear. Recolour it for dark — scoped to
       .ad-scorecard so the mobile/light usages elsewhere are untouched.
       Targets are defensive (id + generic SVG parts) since the helper's
       internal class names live in concept-studio.js. */
    .ad-scorecard #pv2-score-ring,
    .ad-scorecard .ad-score-top svg {
        color: #fff;
        /* currentColor fallbacks → white */
        overflow: visible;
    }

    /* The centre "29%" label is NOT SVG <text> — csRingHTML overlays it as an
       HTML <div class="pct"> on top of the SVG, so the old `svg text` rule
       here matched nothing. And .pct carries its own `color: var(--cs-ink)`
       (#0f172a), which beats the inherited #fff above because an explicit
       declaration always wins over inheritance — near-black on navy, which is
       why the percentage was invisible on this card. */
    .ad-scorecard .cs2-ring .pct,
    .ad-scorecard .cs2-ring .pct .done-ico {
        color: #fff;
    }

    /* the unfilled track: faint light ring on the dark card */
    .ad-scorecard #pv2-score-ring circle,
    .ad-scorecard #pv2-score-ring [class*="track"],
    .ad-scorecard .ad-score-top svg circle {
        stroke: rgba(255, 255, 255, .16);
    }

    /* The progress arc: bright blue so it reads against the navy. The helper
       draws it as the 2nd circle, carrying an "arc" / "prog" / "fill" class
       depending on version, so all are covered without disturbing the track
       above.
       NOTE: the comment that used to sit here ended one line early — it
       contained an asterisk-slash sequence, which closed it and left stray
       text in front of this selector list. That made the whole prelude
       invalid, so browsers dropped this rule entirely and the arc was never
       recoloured. Keep glob patterns out of comments. */
    .ad-scorecard #pv2-score-ring circle:nth-of-type(2),
    .ad-scorecard #pv2-score-ring [class*="arc"],
    .ad-scorecard #pv2-score-ring [class*="prog"],
    .ad-scorecard #pv2-score-ring [class*="fill"],
    .ad-scorecard .ad-score-top svg circle:nth-of-type(2) {
        stroke: #5d92cf;
    }

    .ad-score-top {
        display: flex;
        align-items: center;
        gap: 22px;
    }

    .ad-score-marks .label {
        font-size: .74rem;
        color: #94a3b8;
    }

    .ad-score-marks .big {
        font-family: var(--font-display);
        font-size: 2.4rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin: 4px 0;
    }

    .ad-score-marks .big span {
        font-size: 1.1rem;
        /* the "/ 720" denominator — was #64748b, too dim beside the white total */
        color: #94a3b8;
    }

    .ad-score-marks .sub {
        font-size: .76rem;
        color: #94a3b8;
    }

    .ad-score-counts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 22px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .ad-score-counts>div {
        text-align: center;
    }

    .ad-score-counts b {
        display: block;
        font-family: var(--font-display);
        font-size: 1.4rem;
        font-weight: 800;
        line-height: 1;
    }

    .ad-score-counts .c b {
        color: #4ade80;
    }

    .ad-score-counts .w b {
        color: #f87171;
    }

    .ad-score-counts .u b {
        color: #cbd5e1;
    }

    .ad-score-counts span {
        display: block;
        margin-top: 5px;
        font-size: .66rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        /* was #64748b — ~3.6:1 on --ad-navy, under AA at this size */
        color: #94a3b8;
    }

    /* generic white card used across the results middle column */
    .ad-card-block {
        background: var(--ad-card);
        border: 1px solid var(--ad-line);
        border-radius: var(--ad-radius);
        padding: 22px 24px;
        margin-bottom: 18px;
    }

    .ad-block-title {
        font-family: var(--font-display);
        font-size: .82rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--s500);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Review filters + list on desktop */
    .ad-rev-filters {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
    }

    .ad-rev-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Two-up grids for subject / class-diff / insights on the wide column */
    .ad-two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        align-items: start;
    }

    @media (min-width: 1024px) and (max-width: 1200px) {

        .ad-arena-body {
            grid-template-columns: 1fr;
        }

        .ad-yearrail {
            position: static;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 6px;
        }

        .ad-builder,
        .ad-air-body,
        .ad-res-grid {
            grid-template-columns: 1fr;
        }

        .ad-builder-side,
        .ad-air-side,
        .ad-res-summary {
            position: static;
        }

        .ad-tw-body {
            grid-template-columns: 1fr var(--ad-rail);
        }

        .ad-tw:not(.no-palette) .ad-tw-palettebtn {
            display: inline-block;
        }

        /* below 1200 the palette becomes on-demand via the header button
           again; JS toggles .no-palette off but we hide the rail column */
        .ad-palette {
            display: none;
        }
    }
}