/* Arena builder */

.single-placeholder[data-page="questions"] {
width: 100%;
max-width: none;
}

#arena-builder-page {
    position: relative;
    padding: 30px;
    border-radius: 34px;
    background:
        radial-gradient(circle at top right, rgba(103, 193, 255, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243,248,255,0.96));
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.arena-hero {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 26px 26px 24px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(103, 193, 255, 0.22), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(238,246,255,0.9));
    border: 1px solid rgba(10, 132, 255, 0.1);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.arena-hero::after {
    content: "";
    position: absolute;
    right: 28px;
    top: 28px;
    width: 88px;
    height: 88px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.94), rgba(103,193,255,0.3) 54%, transparent 74%);
    opacity: 0.9;
    pointer-events: none;
}

.arena-hero h3 {
    margin: 0;
    font-size: clamp(38px, 6vw, 58px);
    line-height: 0.95;
    letter-spacing: -0.07em;
}

.arena-hero-subtitle {
    margin: 0;
    max-width: 780px;
    color: #475569;
    font-size: 18px;
    line-height: 1.65;
}

.arena-hero-note {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.84);
    border: 1px solid rgba(10, 132, 255, 0.08);
    color: #0f3d91;
    font-size: 13px;
    font-weight: 700;
}

.arena-builder-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.arena-builder-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.05);
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.arena-builder-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.2fr);
    gap: 20px;
    align-items: start;
}

.arena-builder-panel,
.arena-filter-card {
    padding: 24px;
    border-radius: 28px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}

.arena-builder-panel h4,
.arena-filter-card h4 {
    margin: 8px 0 0;
    font-size: 26px;
    letter-spacing: -0.05em;
}

.arena-builder-panel p,
.arena-filter-card p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

.arena-pill-grid {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.arena-module-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 12px;
}

.arena-module-card,
.arena-filter-pill {
    width: auto;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 22px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #334155;
    box-shadow: none;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.arena-module-card {
    width: 100%;
    min-height: 86px;
    padding: 18px 16px;
    border-radius: 24px;
    text-align: left;
}

.arena-module-card:hover,
.arena-filter-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
    border-color: rgba(10, 132, 255, 0.14);
}

.arena-module-card.is-selected,
.arena-filter-pill.is-selected {
    background: linear-gradient(180deg, rgba(239,246,255,0.98), rgba(229,239,255,0.94));
    border-color: rgba(10, 132, 255, 0.2);
    color: #0f3d91;
    box-shadow: 0 14px 24px rgba(10, 132, 255, 0.08);
}

.arena-module-card strong,
.arena-filter-pill strong {
    display: block;
    font-size: 15px;
    letter-spacing: -0.02em;
}

.arena-module-card strong {
    font-size: 20px;
    letter-spacing: -0.045em;
}

.arena-module-card span,
.arena-filter-pill span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: inherit;
    opacity: 0.86;
}

.arena-mode-block {
    margin-top: 18px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(239,246,255,0.9), rgba(248,251,255,0.86));
    border: 1px solid rgba(10, 132, 255, 0.12);
}

.arena-mode-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f3d91;
}

/* One fixed row that scrolls sideways — wrapping to a second line ate vertical space. */
.arena-mode-selector {
    margin-top: 12px;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(10, 132, 255, 0.3) transparent;
    /* room for the scrollbar so it never sits on top of a pill */
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.arena-mode-selector::-webkit-scrollbar {
    height: 6px;
}

.arena-mode-selector::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.05);
    border-radius: 999px;
}

.arena-mode-selector::-webkit-scrollbar-thumb {
    background: rgba(10, 132, 255, 0.28);
    border-radius: 999px;
}

.arena-mode-selector::-webkit-scrollbar-thumb:hover {
    background: rgba(10, 132, 255, 0.45);
}

.arena-mode-pill {
    /* never shrink or wrap — the row scrolls instead */
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #334155;
    text-align: left;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.arena-mode-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
    border-color: rgba(10, 132, 255, 0.18);
}

.arena-mode-pill strong {
    display: block;
    font-size: 15px;
    letter-spacing: -0.02em;
}

.arena-mode-pill span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    opacity: 0.78;
}

.arena-mode-pill.is-selected {
    background: linear-gradient(180deg, #0a84ff, #0f6fe0);
    border-color: rgba(10, 132, 255, 0.3);
    color: #ffffff;
    box-shadow: 0 14px 26px rgba(10, 132, 255, 0.24);
}

.arena-mode-pill.is-empty:not(.is-selected) {
    color: #94a3b8;
}

.arena-mode-blurb {
    margin-top: 12px;
    color: #475569;
    font-size: 13px;
    line-height: 1.55;
}

.arena-collection-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.arena-collection-card {
    padding: 16px;
    border-radius: 22px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #334155;
    text-align: left;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.arena-collection-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
    border-color: rgba(10, 132, 255, 0.14);
}

.arena-collection-card.is-selected {
    background: linear-gradient(180deg, rgba(239,246,255,0.98), rgba(229,239,255,0.94));
    border-color: rgba(10, 132, 255, 0.24);
    color: #0f3d91;
    box-shadow: 0 14px 24px rgba(10, 132, 255, 0.08);
}

.arena-collection-card strong {
    display: block;
    font-size: 16px;
    letter-spacing: -0.03em;
}

.arena-collection-card span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.86;
}

.arena-collection-count {
    font-weight: 700;
}

.arena-filter-grid {
    margin-top: 18px;
    display: grid;
    gap: 18px;
}

.arena-filter-group {
    padding: 18px;
    border-radius: 22px;
    background: rgba(248, 250, 252, 0.86);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.arena-filter-group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.arena-filter-group-head strong {
    font-size: 16px;
    letter-spacing: -0.02em;
    color: #111827;
}

.arena-filter-group-head span {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

/* ---- Saved tests (browser-local) ----------------------------------------------------
   A shelf under the module picker rather than a full panel — it is a way back into work you
   left, not a section of the builder, so it stays visually quieter than the cards around it. */
.arena-builder-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Amber caution note. Loud enough that nobody starts trusting the tracker without reading it,
   but it sits in the quiet left column rather than interrupting the builder. */
.arena-notice {
    padding: 16px 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(254, 252, 243, 0.92));
    border: 1px solid rgba(217, 119, 6, 0.32);
}

.arena-notice-head {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.arena-notice-icon {
    flex: none;
    font-size: 15px;
    line-height: 1.4;
}

.arena-notice-head strong {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #92400e;
}

.arena-notice p {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #78350f;
}

.arena-saved-tests {
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed rgba(15, 23, 42, 0.12);
}

.arena-saved-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.arena-saved-head strong {
    font-size: 14px;
    letter-spacing: -0.015em;
    color: #334155;
}

.arena-saved-head span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}

.arena-saved-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arena-saved-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.arena-saved-row.is-finished {
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.9), rgba(247, 254, 250, 0.86));
    border-color: rgba(16, 185, 129, 0.22);
}

.arena-saved-info {
    min-width: 0;
}

.arena-saved-info strong {
    display: block;
    font-size: 13px;
    letter-spacing: -0.01em;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arena-saved-info span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

.arena-saved-actions {
    flex: none;
    display: flex;
    gap: 8px;
}

.arena-saved-open,
.arena-saved-remove {
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.arena-saved-open {
    border-color: rgba(10, 132, 255, 0.28);
    background: rgba(10, 132, 255, 0.09);
    color: #0a84ff;
}

.arena-saved-open:hover {
    background: rgba(10, 132, 255, 0.15);
}

.arena-saved-remove {
    background: none;
    border-color: rgba(15, 23, 42, 0.1);
    color: #94a3b8;
}

.arena-saved-remove:hover {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.28);
}

/* ---- Coverage ------------------------------------------------------------------------ */
.arena-coverage {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.9), rgba(248, 251, 255, 0.86));
    border: 1px solid rgba(10, 132, 255, 0.14);
}

.arena-coverage.is-complete {
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.92), rgba(247, 254, 250, 0.88));
    border-color: rgba(16, 185, 129, 0.24);
}

.arena-coverage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.arena-coverage-head strong {
    font-size: 15px;
    letter-spacing: -0.015em;
    color: #0f3d91;
}

.arena-coverage.is-complete .arena-coverage-head strong {
    color: #047857;
}

.arena-coverage-reset {
    flex: none;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: none;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.arena-coverage-reset:hover {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.28);
}

.arena-coverage-bar {
    margin-top: 10px;
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.arena-coverage-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #0a84ff, #4dabff);
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.arena-coverage.is-complete .arena-coverage-bar span {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.arena-coverage-note {
    margin-top: 8px;
    font-size: 12.5px;
    color: #64748b;
}

.arena-coverage-toggle {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

.arena-coverage-toggle input {
    width: 16px;
    height: 16px;
    accent-color: #0a84ff;
    cursor: pointer;
}

/* Topics collapse behind a disclosure. There can be several hundred of them, and rendering
   every pill inline made this panel scroll for pages. Subjects and topic groups stay open. */
.arena-filter-group-collapsible {
    padding: 0;
    overflow: hidden;
}

.arena-disclosure-head {
    width: 100%;
    padding: 18px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    align-items: center;
    font: inherit;
    color: inherit;
    border-radius: 22px;
    transition: background 0.18s ease;
}

.arena-disclosure-head:hover {
    background: rgba(10, 132, 255, 0.05);
}

.arena-disclosure-head:focus-visible {
    outline: 2px solid rgba(10, 132, 255, 0.55);
    outline-offset: -3px;
}

/* A chevron drawn from a rotated square so it needs no icon font or inline SVG. */
.arena-disclosure-icon {
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.arena-filter-group-collapsible.is-open .arena-disclosure-icon {
    transform: rotate(225deg) translate(-2px, -2px);
}

/* When the panel is shut, the header is the only evidence a filter is active. */
.arena-filter-group-collapsible.has-selection {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(248, 251, 255, 0.9));
    border-color: rgba(10, 132, 255, 0.2);
}

.arena-filter-group-collapsible.has-selection .arena-disclosure-head span {
    color: #0f3d91;
    font-weight: 650;
}

.arena-disclosure-panel {
    padding: 0 18px 18px;
}

.arena-topic-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.arena-topic-search {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: #334155;
}

.arena-topic-search:focus {
    outline: none;
    border-color: rgba(10, 132, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}

.arena-topic-clear {
    flex: none;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(10, 132, 255, 0.28);
    background: rgba(10, 132, 255, 0.07);
    color: #0a84ff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.arena-topic-clear:hover {
    background: rgba(10, 132, 255, 0.12);
}

/* Cap the height so the list scrolls inside itself instead of extending the page. */
.arena-pill-grid-scroll {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
    align-content: flex-start;
}

.arena-pill-grid-scroll .arena-filter-pill {
    padding: 9px 14px;
    border-radius: 999px;
}

.arena-pill-grid-scroll .arena-filter-pill strong {
    font-size: 13.5px;
}

/* The lift-on-hover used elsewhere fights a scrolling container. */
.arena-pill-grid-scroll .arena-filter-pill:hover {
    transform: none;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07);
}

.arena-filter-meta {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.arena-filter-meta .field-stack {
    margin: 0;
}

/* Sits directly under the count box as a shortcut for "everything these filters select".
   Deliberately quiet — it is a convenience, not a primary action like Enter The Arena. */
.arena-use-all {
    margin-top: 8px;
    align-self: flex-start;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(10, 132, 255, 0.28);
    background: rgba(10, 132, 255, 0.07);
    color: #0a84ff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.arena-use-all:hover:not(:disabled) {
    background: rgba(10, 132, 255, 0.14);
    border-color: rgba(10, 132, 255, 0.45);
}

.arena-use-all:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Field headings in Session Settings carry the same weight as the Timed Mode heading inside the
   toggle row, so the three settings read as siblings rather than one shouting over the others. */
.arena-filter-meta .label,
.arena-study-mode-field .label {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

/* Tutor vs Exam. Two cards rather than a toggle, because the difference is worth a sentence each
   and a switch could not say which way is which. */
.arena-study-mode-field {
    margin-top: 18px;
}

.arena-study-mode {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.arena-study-mode-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    text-align: left;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(248, 250, 252, 0.85);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.arena-study-mode-option strong {
    font-size: 15px;
    color: #0f172a;
}

.arena-study-mode-option span {
    font-size: 12.5px;
    line-height: 1.45;
    color: #64748b;
}

.arena-study-mode-option:hover {
    border-color: rgba(10, 132, 255, 0.3);
    background: #ffffff;
}

.arena-study-mode-option.is-active {
    border-color: rgba(10, 132, 255, 0.55);
    background: rgba(10, 132, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}

.arena-study-mode-option.is-active strong {
    color: #0a84ff;
}

.arena-filter-note,
.arena-filter-empty {
    margin-top: 14px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.arena-filter-empty {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.8);
    border: 1px dashed rgba(15, 23, 42, 0.08);
}

.arena-toggle-row {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.arena-toggle-copy strong {
    display: block;
    font-size: 16px;
    /* Matches the Number of Questions and Study Mode headings so the three settings read level. */
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.arena-toggle-copy span {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
}

.arena-builder-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.arena-start-button {
    width: auto;
}

.arena-builder-match {
    margin-left: auto;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.05);
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.arena-builder-inline-note {
    margin-top: 12px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

/* ---- RAR strand chips -----------------------------------------------------------------
   RAR is Respiratory then Renal, taught as two half-courses. These sit under the module grid
   and only appear when RAR is in scope, so the other modules are unaffected. */
.arena-strand-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.arena-strand-row[hidden] { display: none; }

.arena-strand-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.arena-strand-grid { display: flex; gap: 8px; flex-wrap: wrap; }

.arena-strand-chip {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.arena-strand-chip strong { font-size: 13px; font-weight: 700; color: #1f2937; }
.arena-strand-chip span { font-size: 11px; color: #94a3b8; }

.arena-strand-chip:hover { transform: translateY(-1px); border-color: rgba(10, 132, 255, 0.3); }

.arena-strand-chip.is-selected {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.94));
    border-color: rgba(10, 132, 255, 0.4);
}
.arena-strand-chip.is-selected strong { color: #0f3d91; }
.arena-strand-chip.is-selected span { color: #3b7fd4; }

/* ---- Saved-tests: progress bar on each card ---- */
.arena-saved-progress {
    margin-top: 8px;
    height: 6px;
    border-radius: 999px;
    background: rgba(51, 65, 92, 0.10);
    overflow: hidden;
}

.arena-saved-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #4f8df9);
    transition: width 240ms ease;
}

.arena-saved-row.is-finished .arena-saved-progress-fill {
    background: linear-gradient(90deg, #16805a, #2fa87c);
}

/* ---- Your Performance panel ---- */
.arena-performance {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 10px 30px rgba(15, 30, 60, 0.06);
}

.arena-perf-modules { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.arena-perf-row {
    display: grid;
    grid-template-columns: 56px 1fr 44px 30px;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.arena-perf-name { font-weight: 700; color: #33415c; }

.arena-perf-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(51, 65, 92, 0.10);
    overflow: hidden;
    display: block;
}

.arena-perf-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #4f8df9);
}

.arena-perf-pct { font-weight: 700; color: #16233c; text-align: right; font-variant-numeric: tabular-nums; }
.arena-perf-count { color: #7a8699; font-size: 0.78rem; text-align: right; font-variant-numeric: tabular-nums; }

.arena-perf-weak { margin-top: 14px; }
.arena-perf-weak-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a02c2c;
    margin-bottom: 8px;
}
.arena-perf-weak-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 10px;
    background: rgba(190, 42, 42, 0.07);
    color: #6b2020;
    font-size: 0.82rem;
    margin-bottom: 6px;
}
.arena-perf-weak-chip strong { font-variant-numeric: tabular-nums; }

.arena-retest-button {
    margin-top: 14px;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
    transition: transform 100ms ease, background 120ms ease;
}
.arena-retest-button:hover { background: #1d4fd7; transform: translateY(-1px); }

/* ---- Current Progress card: ring + module, replaces the old coverage strip ---- */
.arena-progress-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f2f7ff 100%);
    border: 1px solid rgba(37, 99, 235, 0.10);
    border-radius: 20px;
    padding: 18px 20px;
    box-shadow: 0 14px 34px rgba(15, 30, 60, 0.08);
}

.arena-progress-ring-wrap { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
.arena-progress-ring { width: 84px; height: 84px; transform: rotate(-90deg); }
.arena-progress-ring circle { fill: none; stroke-width: 8; }
.arena-progress-ring-track { stroke: rgba(37, 99, 235, 0.10); }
.arena-progress-ring-fill {
    stroke: url(#arenaRingGradient), #2563eb;
    stroke: #2563eb;
    stroke-linecap: round;
    transition: stroke-dashoffset 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.arena-progress-card.is-complete .arena-progress-ring-fill { stroke: #16805a; }

.arena-progress-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
}
.arena-progress-ring-center strong { font-size: 1.15rem; color: #16233c; font-variant-numeric: tabular-nums; }
.arena-progress-ring-center span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7a8699; }

.arena-progress-body { min-width: 0; }
.arena-progress-eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2563eb;
}
.arena-progress-module { font-size: 1.25rem; font-weight: 800; color: #16233c; margin: 2px 0; }
.arena-progress-counts { font-size: 0.88rem; color: #33415c; font-weight: 600; }
.arena-progress-note { font-size: 0.82rem; color: #4a5872; margin-top: 2px; }
.arena-progress-card .arena-coverage-toggle { margin-top: 10px; }
.arena-progress-card .arena-coverage-reset { margin-top: 8px; }

/* ---- Saved tests: premium cards ---- */
.arena-saved-row {
    background: #ffffff;
    border: 1px solid rgba(51, 65, 92, 0.08);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 6px 18px rgba(15, 30, 60, 0.05);
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.arena-saved-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 30, 60, 0.10);
}
.arena-saved-open {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 120ms ease;
}
.arena-saved-open:hover { background: #1d4fd7; }
.arena-saved-row.is-finished .arena-saved-open { background: #16805a; }
.arena-saved-row.is-finished .arena-saved-open:hover { background: #12689a; background: #126b4b; }
.arena-saved-remove {
    background: none;
    border: none;
    color: #a02c2c;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 120ms ease;
}
.arena-saved-remove:hover { opacity: 1; text-decoration: underline; }

/* ---- Platinum pass: metallic card surfaces, saved-list scroll, history controls ---- */

.arena-saved-list {
    max-height: 430px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(51, 65, 92, 0.25) transparent;
}
.arena-saved-list::-webkit-scrollbar { width: 5px; }
.arena-saved-list::-webkit-scrollbar-thumb { background: rgba(51, 65, 92, 0.22); border-radius: 999px; }
.arena-saved-list::-webkit-scrollbar-track { background: transparent; }

.arena-progress-card,
.arena-performance {
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(238, 242, 248, 0.90) 55%, rgba(225, 231, 240, 0.92) 100%);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(15, 30, 60, 0.05),
        0 16px 40px rgba(15, 30, 60, 0.10);
}

.arena-progress-filter {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.arena-progress-chip {
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: linear-gradient(180deg, #ffffff, #eef2f7);
    color: #33415c;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(15,30,60,0.06);
    transition: all 120ms ease;
}
.arena-progress-chip:hover { border-color: rgba(37, 99, 235, 0.45); }
.arena-progress-chip.is-active {
    background: linear-gradient(180deg, #2f6bf0, #2258d8);
    border-color: #1d4fd7;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 12px rgba(37, 99, 235, 0.30);
}

.arena-progress-banks-toggle {
    margin-top: 12px;
    background: none;
    border: none;
    padding: 0;
    color: #2563eb;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.arena-progress-banks { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.arena-progress-bank-row {
    display: grid;
    grid-template-columns: minmax(70px, 38%) 1fr 58px;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
}
.arena-progress-bank-name { font-weight: 700; color: #33415c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arena-progress-bank-track { height: 5px; border-radius: 999px; background: rgba(51, 65, 92, 0.12); overflow: hidden; display: block; }
.arena-progress-bank-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #64748b, #94a3b8); }
.arena-progress-bank-count { color: #4a5872; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.arena-perf-scope {
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: linear-gradient(180deg, #ffffff, #eef2f7);
    color: #16233c;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(15,30,60,0.06);
}

/* Subject names in module scope run long — give the name column room and clip politely. */
.arena-perf-row { grid-template-columns: minmax(56px, 42%) 1fr 44px 30px; }
.arena-perf-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- History filter row in Session Settings ---- */
.arena-history-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(236,240,247,0.9));
    border: 1px solid rgba(148, 163, 184, 0.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.arena-history-filter-label strong { display: block; font-size: 0.9rem; color: #16233c; }
.arena-history-filter-label span { font-size: 0.78rem; color: #4a5872; }
.arena-history-filter .arena-progress-filter { margin-top: 0; }

.arena-progress-scope-hint {
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2563eb;
    letter-spacing: 0.01em;
}

/* ---- Pass insight (performance panel) ---- */
.arena-pass-insight { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.8rem; color: #33415c; flex-wrap: wrap; }
.arena-pass-insight[hidden] { display: none; }
.arena-pass-badge { padding: 3px 9px; border-radius: 999px; background: linear-gradient(90deg, rgba(37,99,235,0.12), rgba(16,185,129,0.12)); border: 1px solid rgba(37,99,235,0.2); color: #1d4fd7; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.arena-pass-insight strong { color: #16233c; }
.arena-pass-insight em { font-style: normal; font-weight: 800; }
.arena-pass-insight em.is-up { color: #0f7a5a; }
.arena-pass-insight em.is-down { color: #a02c2c; }