/**
 * exchange-chrome.bundle.css — concatenated exchange CSS (no minify).
 * Rebuild: php scripts/build-exchange-css-bundles.php
 * Source order is the cascade order from style-account.
 */

/* ===== exchange-shell.css ===== */
/**
 * Exchange responsive shell — 3-column desktop, stacked mobile, no page horizontal scroll.
 */

.exchange-app .container,
.exchange-app .container-fluid {
    max-width: 100%;
    width: 100%;
    padding-left: var(--theme-space-page-x, 0.75rem);
    padding-right: var(--theme-space-page-x, 0.75rem);
    box-sizing: border-box;
}

.exchange-app .container-fluid.exchange-layout {
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: calc(100dvh - var(--ex-site-header-height, 7.5rem));
}

.ex-shell {
    display: grid;
    grid-template-columns: minmax(0, var(--ex-sidebar-full, 13.75rem)) minmax(0, 1fr);
    gap: var(--ex-shell-gap, var(--theme-space-shell-gap, 0.75rem));
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: var(--theme-space-shell-pad-y, 0.5rem) 0 var(--theme-space-4, 1rem);
    box-sizing: border-box;
}

/* 3-column: sidebar · markets · bet strip (desktop / laptop / MacBook) */
.ex-shell.ex-shell--betstrip {
    grid-template-columns:
        minmax(0, var(--ex-sidebar-full, 13.75rem))
        minmax(0, 1fr)
        minmax(var(--theme-betslip-rail-min, 17.5rem), var(--theme-betslip-rail-w, 20rem));
}

.ex-shell.ex-shell--betstrip.ex-shell--user {
    grid-template-columns:
        minmax(0, 240px)
        minmax(0, 1fr)
        minmax(var(--theme-betslip-rail-min, 17.5rem), var(--theme-betslip-rail-w, 20rem));
}

.ex-shell__betstrip {
    --ex-betstrip-promo-top: 0px;
    --ex-betstrip-top-gap: 0px;
    --ex-betstrip-promo-space: 0px;
    --ex-betstrip-banner-slip-gap: 0px;
    --ex-betstrip-dock-gap: 0px;
    min-width: var(--theme-betslip-rail-min, 17.5rem);
    max-width: 100%;
    position: sticky;
    top: calc(var(--ex-site-header-height, 7.5rem) + var(--ex-site-header-gap, 0.75rem));
    align-self: start;
    margin-top: 0;
    height: calc(
        100dvh - var(--ex-site-header-height, 7.5rem) - var(--ex-site-header-gap, 0.75rem) - 1rem
    );
    min-height: calc(
        100dvh - var(--ex-site-header-height, 7.5rem) - var(--ex-site-header-gap, 0.75rem) - 1rem
    );
    max-height: calc(
        100dvh - var(--ex-site-header-height, 7.5rem) - var(--ex-site-header-gap, 0.75rem) - 1rem
    );
    /* visible so small banner can extend up to match big banner top */
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
    z-index: 15;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    /* promo space + same gap as large banner → table */
    padding-top: calc(
        var(--ex-betstrip-promo-space, 0px) + var(--ex-betstrip-banner-slip-gap, 0px)
    );
}

/* Dismissible promo — absolute so top/bottom edges lock to large banner */
.ex-betstrip-promo {
    position: absolute;
    top: var(--ex-betstrip-promo-top, 0px);
    left: 0;
    right: 0;
    width: 100%;
    height: var(--ex-betstrip-top-gap, 0px);
    max-height: none;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border-radius: var(--theme-radius-control, 8px);
    border: 1px solid var(--ex-border, var(--border-color));
    background: var(--ex-surface-section-head, #CDD5E0);
    box-shadow: var(--ex-inplay-panel-shadow, var(--ex-shadow));
    transition: opacity 0.2s ease;
    z-index: 2;
    box-sizing: border-box;
}

.ex-betstrip-promo.is-dismissed {
    opacity: 0;
    pointer-events: none;
    height: 0 !important;
}

.ex-betstrip-promo__link {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.ex-betstrip-promo__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ex-betstrip-promo__close {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: var(--theme-radius-chip, 4px);
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    cursor: pointer;
    line-height: 0;
}

.ex-betstrip-promo__close:hover {
    background: rgba(15, 23, 42, 0.75);
}

.ex-betstrip-promo__close svg {
    width: 0.9rem;
    height: 0.9rem;
    stroke: currentColor;
}

.ex-shell__betstrip > #betSlipDock {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: var(--ex-betstrip-dock-gap, 0px);
    overflow: hidden;
}

.ex-betstrip-backdrop {
    display: none;
}

/* Phone / small tablet only: bottom-sheet popup (not laptop/desktop) */
@media (max-width: 991.98px) {
    .ex-shell.ex-shell--betstrip,
    .ex-shell.ex-shell--betstrip.ex-shell--user {
        grid-template-columns: minmax(0, var(--ex-sidebar-full, 13.75rem)) minmax(0, 1fr);
    }

    .ex-shell.ex-shell--betstrip.ex-shell--user {
        grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    }

    .ex-shell__betstrip {
        position: fixed;
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        width: min(22.5rem, calc(100% - 1.5rem));
        min-width: 0;
        max-width: calc(100% - 1.5rem);
        margin-top: 0 !important;
        --ex-betstrip-top-gap: 0px;
        --ex-betstrip-dock-gap: 0px;
        /* Hug content; cap so advanced mode can still scroll */
        height: auto;
        min-height: 0;
        max-height: min(70dvh, calc(100dvh - var(--ex-mobile-nav-h, 3.5rem) - 1.5rem));
        z-index: 1060;
        transform: translate(-50%, calc(-50% + 12vh));
        transition: transform 0.28s ease, box-shadow 0.2s ease, opacity 0.2s ease;
        pointer-events: none;
        padding: 0;
        padding-bottom: 0;
        border-radius: var(--theme-radius-panel, 8px);
        overflow: hidden;
        border: none;
        /* Soft elevation only — no light 1px ring (reads as white edge) */
        box-shadow: 0 12px 40px rgba(15, 23, 42, 0.4);
        visibility: hidden;
        opacity: 0;
        gap: 0;
        display: flex;
        flex-direction: column;
    }

    .ex-shell__betstrip > #betSlipDock {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: inherit;
        border-radius: var(--theme-radius-panel, 8px);
        border: none !important;
        box-shadow: none !important;
    }

    .ex-shell__betstrip .ex-betstrip-promo {
        display: none !important;
    }

    .ex-shell__betstrip.is-open {
        transform: translate(-50%, -50%);
        pointer-events: auto;
        visibility: visible;
        opacity: 1;
    }

    /* ============================================================
     * Mobile bet-slip: bottom-sheet reposition, site-wide.
     *
     * Originally Home-only (gated on body.ex-home-dense); widened to
     * every page as part of the mobile multi-bet-slip redesign, since a
     * user browsing match-detail/category/tournament on mobile should get
     * the same bottom-sheet slip as Home, not the centered-modal fallback.
     * Only left/right/top/bottom/transform/radius are overridden; the
     * existing max-height cap, open/close class toggling in BetSlip.vue,
     * and backdrop are unchanged. Desktop (>=992px) is untouched — this
     * entire block lives inside the max-width:991.98px media query.
     * ============================================================ */
    .exchange-app .ex-shell__betstrip {
        /* Matches the match card's own left/right edge — the card no
           longer carries its own extra margin on top of the container's
           padding (removed so the card spans the same width as the
           sport header), so this only needs the container's own
           inline padding now, not padding + the card's old margin. */
        left: var(--theme-space-page-x, 0.75rem);
        right: var(--theme-space-page-x, 0.75rem);
        top: auto;
        bottom: 0;
        width: auto;
        max-width: none;
        border-radius: 0;
        transform: translateY(100%);
    }

    .exchange-app .ex-shell__betstrip.is-open {
        transform: translateY(0);
    }

    .ex-betstrip-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1055;
        background: rgba(15, 23, 42, 0.45);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .ex-betstrip-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.ex-betstrip-open {
        overflow: hidden;
        touch-action: none;
    }
}

/* Laptop / MacBook / desktop (≥992): force right rail visible */
@media (min-width: 992px) {
    .ex-shell__betstrip {
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
        /* Hug slip content — no tall empty white panel */
        height: auto;
        min-height: 0;
        max-height: calc(
            100dvh - var(--ex-site-header-height, 7.5rem) - var(--ex-site-header-gap, 0.75rem) - 1rem
        );
    }

    .ex-shell__betstrip > #betSlipDock {
        flex: 0 1 auto;
        height: auto;
        max-height: 100%;
        min-height: 0;
    }

    /* User closed the slip — collapse column until odds are clicked again */
    .ex-shell.ex-shell--betstrip.ex-shell--betstrip-closed,
    .ex-shell.ex-shell--betstrip.ex-shell--user.ex-shell--betstrip-closed {
        grid-template-columns:
            minmax(0, var(--ex-sidebar-full, 13.75rem))
            minmax(0, 1fr);
    }

    .ex-shell.ex-shell--betstrip.ex-shell--user.ex-shell--betstrip-closed {
        grid-template-columns:
            minmax(0, 240px)
            minmax(0, 1fr);
    }

    .ex-shell__betstrip.is-closed {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.ex-betstrip-open {
        overflow: visible;
        touch-action: auto;
    }

    .ex-betstrip-fallback {
        position: fixed;
        top: calc(var(--ex-site-header-height, 7.5rem) + 0.75rem);
        right: 0.75rem;
        width: var(--theme-betslip-rail-w, 20rem);
        height: auto;
        max-height: calc(100dvh - var(--ex-site-header-height, 7.5rem) - 1.5rem);
        z-index: 30;
    }

    .ex-betstrip-fallback .ex-shell__betstrip {
        height: auto;
        min-height: 0;
        max-height: 100%;
        position: relative;
        top: auto;
    }

    .ex-betstrip-fallback .ex-shell__betstrip.is-closed {
        display: none !important;
    }
}

.ex-shell__main {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
}

.ex-shell__sidebar {
    min-width: 0;
    max-width: 100%;
    position: sticky;
    top: calc(var(--ex-site-header-height, 7.5rem) + var(--ex-site-header-gap, 0.75rem));
    align-self: start;
    height: calc(100dvh - var(--ex-site-header-height, 7.5rem) - var(--ex-site-header-gap, 0.75rem) - 1rem);
    min-height: calc(100dvh - var(--ex-site-header-height, 7.5rem) - var(--ex-site-header-gap, 0.75rem) - 1rem);
    max-height: calc(100dvh - var(--ex-site-header-height, 7.5rem) - var(--ex-site-header-gap, 0.75rem) - 1rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* User dashboard: sidebar + main only (betstrip variant overrides above) */
.ex-shell--user:not(.ex-shell--betstrip) {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
}

/* Prevent bootstrap row negative margin blowout inside exchange */
.exchange-layout .row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

.exchange-layout [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    min-width: 0;
}

/* Event / schedule / casino pages fill available main column */
.ex-inplay-page,
.ex-casino-page,
.ex-category-page,
.ex-shell__main > .ex-match-header,
.ex-shell__main > .tab-content {
    width: 100%;
    min-width: 0;
}

.ex-inplay-page,
.ex-casino-page {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.ex-inplay-group,
.ex-inplay-group__list,
.ex-event-list {
    width: 100%;
    min-width: 0;
}
.ex-market__grid,
.ex-event,
.ex-markets-wrap,
.ex-event-list {
    max-width: 100%;
    min-width: 0;
}

.ex-market__runner-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tables scroll inside card only */
.ex-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ex-table-wrap .ex-table {
    min-width: 640px;
}

/* Market grids never overflow page */
@media (max-width: 991.98px) {
    .exchange-app .container,
    .exchange-app .container-fluid {
        padding-left: var(--theme-space-2, 0.5rem);
        padding-right: var(--theme-space-2, 0.5rem);
    }

    .exchange-app .container-fluid.exchange-layout,
    .exchange-app .ex-shell {
        overflow-x: hidden;
    }

    .ex-shell {
        grid-template-columns: var(--ex-sidebar-icon, 2.75rem) minmax(0, 1fr);
        gap: 0.25rem 0.35rem;
        padding: 0.35rem 0 1rem;
        width: 100%;
        max-width: 100%;
    }

    .ex-shell.ex-shell--sidebar-expanded {
        grid-template-columns: minmax(0, var(--ex-sidebar-tablet, 9.5rem)) minmax(0, 1fr);
    }

    .ex-shell--user:not(.ex-shell--betstrip),
    .ex-shell.ex-shell--betstrip,
    .ex-shell.ex-shell--betstrip.ex-shell--user {
        grid-template-columns: var(--ex-sidebar-icon, 2.75rem) minmax(0, 1fr);
    }

    .ex-shell--user.ex-shell--sidebar-expanded:not(.ex-shell--betstrip),
    .ex-shell.ex-shell--betstrip.ex-shell--sidebar-expanded {
        grid-template-columns: minmax(0, var(--ex-sidebar-tablet, 9.5rem)) minmax(0, 1fr);
    }

    .ex-shell__sidebar {
        z-index: 20;
        grid-column: 1;
        grid-row: 1;
    }

    .ex-shell__main {
        grid-column: 2;
        grid-row: 1;
        overflow-x: visible;
        overflow-y: visible;
        scrollbar-gutter: auto;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .ex-header-actions {
        justify-content: flex-end;
    }

    .ex-wallet-bar {
        font-size: var(--theme-text-sm, 0.75rem);
        gap: 0.25rem 0.5rem;
    }

    .ex-market__head-row,
    .ex-market__runner-row {
        grid-template-columns: minmax(0, 1fr) 58px;
    }

    .ex-market__head-row--fancy,
    .ex-market__runner-row--fancy {
        grid-template-columns: minmax(0, 1fr) 52px 52px;
    }

    .ex-event__runners:has(.ex-event__runner):not(:has(.ex-event__runner-row)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ex-open-bets__cols {
        display: none;
    }

    .ex-open-bets__row {
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem 0.75rem;
    }

    .ex-open-bets__cell--event {
        grid-column: 1 / -1;
    }

    .ex-open-bets__cell--type {
        align-items: flex-start;
        text-align: left;
    }

    .ex-open-bets__cell-label {
        display: block;
    }

    .ex-navbar-bottom .col-6 {
        max-width: 50%;
        /* Flex items default to min-width:auto, which floors shrinking at
           the logo image's intrinsic width (301px) regardless of
           max-width:100% on the <img> itself — this is what caused the
           logo to overflow past its 50% column and collide with the
           header icons on narrow viewports. */
        min-width: 0;
    }

    .ex-navbar-bottom .col-6 img {
        max-width: 140px;
    }
}

@media (max-width: 575.98px) {
    .exchange-app .container,
    .exchange-app .container-fluid {
        padding-left: var(--theme-space-1, 0.25rem);
        padding-right: var(--theme-space-1, 0.25rem);
    }

    .ex-shell {
        gap: 0.25rem 0.35rem;
        padding-left: 0;
        padding-right: 0;
    }

    .ex-shell.ex-shell--sidebar-expanded {
        grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
    }

    .ex-event__runners:has(.ex-event__runner):not(:has(.ex-event__runner-row)) {
        grid-template-columns: minmax(0, 1fr);
    }

    .ex-tabs .nav-link {
        font-size: var(--theme-text-md, 0.8125rem);
        padding: 0.45rem 0.65rem;
    }
}

/* ─── Site footer ─────────────────────────────────────────────────────────── */
.exchange-app .ex-footer {
    margin-top: 2.25rem;
    padding-top: 0;
    background: var(--ex-surface-footer, var(--ex-surface-raised, var(--card-bg)));
    color: var(--para-color);
    border-top: 3px solid var(--theme-primary, #DD3E42);
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--bp-black, #000) 4%, transparent);
}

.exchange-app .ex-footer > .container {
    padding-top: 2.25rem;
}

.exchange-app .ex-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.45fr) minmax(0, 1.1fr);
    gap: 1.75rem 2rem;
    align-items: start;
    padding-bottom: 1.75rem;
}

.exchange-app .ex-footer__inner:not(:has(.ex-footer__nav)) {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.exchange-app .ex-footer__logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.85rem;
}

.exchange-app .ex-footer__logo img {
    max-width: 156px;
    height: 48px;
    max-height: 48px;
    width: auto;
}

.exchange-app .ex-footer__text {
    margin: 0 0 1.1rem;
    max-width: 22rem;
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 500;
    line-height: 1.65;
    color: var(--ex-text, var(--para-color)) !important;
}

.exchange-app .ex-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exchange-app .ex-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: var(--theme-radius-control, 8px);
    border: 1px solid var(--ex-border, var(--border-color));
    background: var(--ex-surface, var(--body-bg));
    color: var(--ex-text-strong, var(--h-color)) !important;
    font-size: var(--theme-text-base, 0.875rem);
    text-decoration: none !important;
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease,
        transform 0.15s ease;
}

.exchange-app .ex-footer__social-link:hover {
    color: #fff !important;
    background: var(--theme-primary, #DD3E42);
    border-color: var(--theme-primary, #DD3E42);
    transform: translateY(-1px);
}

.exchange-app .ex-footer__social-link .ex-brand-svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.exchange-app .ex-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.75rem;
    min-width: 0;
}

.exchange-app .ex-footer__title {
    margin: 0 0 0.85rem;
    font-family: "Inter", var(--heading-font, var(--body-font, sans-serif));
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ex-text-strong, var(--h-color)) !important;
}

.exchange-app .ex-footer__links,
.exchange-app .ex-footer__contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.exchange-app .ex-footer__links li + li {
    margin-top: 0.5rem;
}

.exchange-app .ex-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    color: var(--ex-text, var(--para-color)) !important;
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.exchange-app .ex-footer__links a:hover {
    color: var(--theme-primary, #DD3E42) !important;
}

.exchange-app .ex-footer__empty {
    font-size: var(--theme-text-md, 0.8125rem);
    color: var(--ex-muted, var(--para-color));
}

.exchange-app .ex-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.exchange-app .ex-footer__contact-item + .ex-footer__contact-item {
    margin-top: 0.9rem;
}

.exchange-app .ex-footer__contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: var(--theme-radius-control, 8px);
    flex-shrink: 0;
    background: var(--theme-btn-primary-bg, var(--theme-primary, #DD3E42));
    color: var(--theme-btn-primary-text, #FFFFFF);
    border: 0;
    box-shadow: var(--theme-icon-well-shadow, inset 0 1px 0 var(--bp-alpha-white-28), 0 2px 6px var(--bp-alpha-orange-28));
}

.exchange-app .ex-footer__contact-icon svg {
    width: 14px;
    height: 14px;
    color: inherit;
    stroke: currentColor;
}

.exchange-app .ex-footer__contact-body {
    min-width: 0;
}

.exchange-app .ex-footer__contact-label {
    display: block;
    margin-bottom: 0.12rem;
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ex-muted, var(--para-color)) !important;
}

.exchange-app .ex-footer__contact-value {
    display: block;
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    color: var(--ex-text-strong, var(--h-color)) !important;
    text-decoration: none !important;
    line-height: 1.5;
    white-space: pre-line;
}

.exchange-app .ex-footer__contact-value:hover {
    color: var(--theme-primary, #DD3E42) !important;
}

.exchange-app .ex-footer__trust {
    border-top: 1px solid var(--ex-border, var(--border-color));
    background: color-mix(in srgb, var(--theme-primary, #DD3E42) 5%, transparent);
}

.exchange-app .ex-footer__trust-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0;
}

.exchange-app .ex-footer__age {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 2.35rem;
    height: 2.35rem;
    padding: 0 0.4rem;
    border-radius: var(--theme-radius-control, 8px);
    background: var(--theme-primary, #DD3E42);
    color: #fff;
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.02em;
    line-height: 1;
}

.exchange-app .ex-footer__trust-text {
    margin: 0;
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ex-text, var(--para-color)) !important;
}

.exchange-app .ex-footer__bottom {
    padding: 0.95rem 0 1.15rem;
    border-top: 1px solid var(--ex-border, var(--border-color));
}

.exchange-app .ex-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1.25rem;
}

.exchange-app .ex-footer__copy {
    margin: 0;
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 500;
    color: var(--ex-muted, var(--para-color)) !important;
}

.exchange-app .ex-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-sm, 0.75rem); /* 12px — legal microcopy floor */
    font-weight: 500;
    line-height: 1.4;
}

.exchange-app .ex-footer__legal a {
    color: var(--ex-text, var(--para-color)) !important;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    text-decoration: none !important;
}

.exchange-app .ex-footer__legal a:hover {
    color: var(--theme-primary, #DD3E42) !important;
}

/*
 * Footer link contrast contract (WCAG AA).
 * --ex-text resolved to near-black in the footer scope (1.18:1 on the dark
 * footer, ~2.6:1 on the light footer), so pin readable per-theme colors.
 */
html.theme-light .exchange-app .ex-footer__links a,
html.theme-light .exchange-app .ex-footer__legal a,
.theme-light .exchange-app .ex-footer__links a,
.theme-light .exchange-app .ex-footer__legal a {
    color: #475569 !important; /* slate-600 on white footer → ~7:1 */
}

html.theme-dark .exchange-app .ex-footer__links a,
html.theme-dark .exchange-app .ex-footer__legal a,
.theme-dark .exchange-app .ex-footer__links a,
.theme-dark .exchange-app .ex-footer__legal a {
    color: #E2E8F0 !important; /* slate-200 on #111827 footer → ~13:1 */
}

html.theme-light .exchange-app .ex-footer__links a:hover,
html.theme-light .exchange-app .ex-footer__legal a:hover,
html.theme-dark .exchange-app .ex-footer__links a:hover,
html.theme-dark .exchange-app .ex-footer__legal a:hover,
.theme-light .exchange-app .ex-footer__links a:hover,
.theme-light .exchange-app .ex-footer__legal a:hover,
.theme-dark .exchange-app .ex-footer__links a:hover,
.theme-dark .exchange-app .ex-footer__legal a:hover {
    color: var(--theme-primary, #DD3E42) !important;
}

.exchange-app .ex-footer__nav-group + .ex-footer__nav-group {
    border-top: 1px solid var(--ex-border, var(--border-color));
    padding-top: 0.85rem;
    margin-top: 0.15rem;
}

.exchange-app .ex-footer__aside {
    border-top: 1px solid var(--ex-border, var(--border-color));
    padding-top: 1rem;
}

@media (max-width: 991.98px) {
    .exchange-app .ex-footer {
        margin-top: 1.5rem;
        padding-bottom: calc(0.35rem + var(--ex-mobile-nav-h, 0px));
    }

    .exchange-app .ex-footer > .container {
        padding-top: 1.35rem;
    }

    .exchange-app .ex-footer__inner {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: 0.35rem;
    }

    .exchange-app .ex-footer__brand {
        padding-bottom: 1.1rem;
        margin-bottom: 0;
        border-bottom: 1px solid var(--ex-border, var(--border-color));
    }

    .exchange-app .ex-footer__logo {
        margin-bottom: 0.55rem;
    }

    .exchange-app .ex-footer__text {
        max-width: none;
        margin-bottom: 0.85rem;
    }

    .exchange-app .ex-footer__nav {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .exchange-app .ex-footer__nav-group {
        min-width: 0;
        padding: 1rem 0;
        border-bottom: 1px solid var(--ex-border, var(--border-color));
    }

    .exchange-app .ex-footer__nav-group + .ex-footer__nav-group {
        border-top: 0;
        padding-top: 1rem;
        margin-top: 0;
    }

    .exchange-app .ex-footer__links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.45rem;
    }

    .exchange-app .ex-footer__links li {
        margin: 0;
    }

    .exchange-app .ex-footer__links li + li {
        margin-top: 0;
    }

    .exchange-app .ex-footer__aside {
        border-top: 0;
        padding: 1rem 0 0.85rem;
    }

    .exchange-app .ex-footer__contact-item + .ex-footer__contact-item {
        margin-top: 0.75rem;
    }

    .exchange-app .ex-footer__trust-inner {
        align-items: flex-start;
        padding: 0.8rem 0;
    }

    .exchange-app .ex-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.55rem;
    }

    .exchange-app .ex-footer__legal {
        gap: 0.35rem 0.7rem;
    }
}

@media (min-width: 992px) {
    .exchange-app .ex-footer__inner {
        column-gap: 0;
    }

    .exchange-app .ex-footer__brand {
        padding-right: 1.75rem;
    }

    .exchange-app .ex-footer__nav {
        padding: 0 1.75rem;
        border-left: 1px solid var(--ex-border, var(--border-color));
        border-right: 1px solid var(--ex-border, var(--border-color));
    }

    .exchange-app .ex-footer__nav-group + .ex-footer__nav-group {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
        padding-left: 1.35rem;
        border-left: 1px solid var(--ex-border, var(--border-color));
    }

    .exchange-app .ex-footer__aside {
        border-top: 0;
        padding-top: 0;
        padding-left: 1.75rem;
    }

    .exchange-app .ex-footer__inner:not(:has(.ex-footer__nav)) .ex-footer__aside {
        border-left: 1px solid var(--ex-border, var(--border-color));
    }

    .exchange-app .ex-footer__inner:not(:has(.ex-footer__aside .ex-footer__contact-item)) {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr);
    }
}

/* ===== exchange-footer.css ===== */
/**
 * WP13 — Footer compress (esp. mobile)
 * Load AFTER exchange-shell.css.
 * Shorter brand block · tighter padding · less scroll fatigue after markets.
 */

.exchange-app .ex-footer {
  margin-top: 1.5rem;
  box-shadow: none;
}

.exchange-app .ex-footer > .container {
  padding-top: 1.5rem;
}

.exchange-app .ex-footer__inner {
  gap: 1.25rem 1.5rem;
  padding-bottom: 1.15rem;
}

.exchange-app .ex-footer__text {
  margin-bottom: 0.75rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.exchange-app .ex-footer__logo img {
  height: 40px;
  max-height: 40px;
}

.exchange-app .ex-footer__title {
  margin-bottom: 0.55rem;
  letter-spacing: 0.04em;
}

.exchange-app .ex-footer__links li + li {
  margin-top: 0.35rem;
}

.exchange-app .ex-footer__contact-item + .ex-footer__contact-item {
  margin-top: 0.55rem;
}

.exchange-app .ex-footer__trust-inner {
  padding: 0.65rem 0;
}

.exchange-app .ex-footer__bottom {
  padding: 0.7rem 0 0.85rem;
}

@media (max-width: 991.98px) {
  .exchange-app .ex-footer {
    margin-top: 1rem;
    padding-bottom: calc(0.25rem + var(--ex-mobile-nav-h, 0px));
  }

  .exchange-app .ex-footer > .container {
    padding-top: 0.9rem;
  }

  .exchange-app .ex-footer__brand {
    padding-bottom: 0.75rem;
  }

  .exchange-app .ex-footer__logo {
    margin-bottom: 0.4rem;
  }

  .exchange-app .ex-footer__logo img {
    height: 36px;
    max-height: 36px;
  }

  .exchange-app .ex-footer__text {
    margin-bottom: 0.55rem;
    -webkit-line-clamp: 2;
    font-size: var(--theme-text-sm, 0.75rem);
  }

  .exchange-app .ex-footer__social-link {
    width: 2rem;
    height: 2rem;
  }

  .exchange-app .ex-footer__social-link .ex-brand-svg {
    width: 0.9rem;
    height: 0.9rem;
  }

  .exchange-app .ex-footer__nav-group {
    padding: 0.65rem 0;
  }

  .exchange-app .ex-footer__nav-group + .ex-footer__nav-group {
    padding-top: 0.65rem;
  }

  .exchange-app .ex-footer__title {
    margin-bottom: 0.4rem;
  }

  .exchange-app .ex-footer__links {
    gap: 0.3rem;
  }

  .exchange-app .ex-footer__aside {
    padding-top: 0.65rem;
    padding-bottom: 0.35rem;
  }

  .exchange-app .ex-footer__contact-icon {
    width: 1.85rem;
    height: 1.85rem;
  }

  .exchange-app .ex-footer__contact-item + .ex-footer__contact-item {
    margin-top: 0.45rem;
  }

  .exchange-app .ex-footer__trust-inner {
    padding: 0.55rem 0;
    gap: 0.55rem;
  }

  .exchange-app .ex-footer__age {
    min-width: 2rem;
    height: 2rem;
    font-size: var(--theme-text-sm, 0.75rem);
  }

  .exchange-app .ex-footer__trust-text {
    font-size: var(--theme-text-xs, 0.6875rem);
    line-height: 1.4;
  }

  .exchange-app .ex-footer__bottom {
    padding: 0.55rem 0 0.7rem;
  }

  .exchange-app .ex-footer__bottom-inner {
    gap: 0.4rem 0.75rem;
  }
}

/* Home: footer already inside main — keep extra-tight */
body.ex-home-dense .ex-home-trading-page > .ex-footer,
body.ex-home-dense .ex-shell__main .ex-footer {
  margin-top: 0.75rem;
}

/* Accordion: collapsed by default on mobile; always expanded look on desktop */
.exchange-app .ex-footer__accordion {
  margin: 0;
  border: 0;
}

.exchange-app .ex-footer__accordion > .ex-footer__title {
  list-style: none;
  cursor: default;
}

.exchange-app .ex-footer__accordion > .ex-footer__title::-webkit-details-marker {
  display: none;
}

@media (min-width: 992px) {
  .exchange-app .ex-footer__accordion > .ex-footer__title {
    pointer-events: none;
  }

  /*
   * Chrome 131+ wraps a closed <details>'s content in the ::details-content
   * pseudo-element and gives it `content-visibility: hidden`. That is what left
   * the desktop footer columns blank: the <ul> had `display:block` but its
   * painted ancestor pseudo was skipped, so the links laid out but never
   * rendered or hit-tested. Reveal the pseudo directly.
   */
  .exchange-app .ex-footer__accordion::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /*
   * Fallback for engines without ::details-content (older Chrome / Firefox /
   * Safari): force the content open regardless of the [open] attribute.
   */
  .exchange-app .ex-footer__accordion > *:not(summary),
  .exchange-app .ex-footer__accordion > .ex-footer__links,
  .exchange-app .ex-footer__accordion > .ex-footer__contact {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
  }
}

@media (max-width: 991.98px) {
  .exchange-app .ex-footer__accordion > .ex-footer__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.15rem 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .exchange-app .ex-footer__accordion > .ex-footer__title::after {
    content: "+";
    flex-shrink: 0;
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: var(--theme-weight-bold, 700);
    color: var(--theme-primary, #DD3E42);
    line-height: 1;
  }

  .exchange-app .ex-footer__accordion[open] > .ex-footer__title::after {
    content: "−";
  }

  .exchange-app .ex-footer__accordion > .ex-footer__links,
  .exchange-app .ex-footer__accordion > .ex-footer__contact {
    margin-top: 0.45rem;
  }
}

/* ─── Dark contrast (promoted from exchange-dark-qa) ─────────────────────── */
html.theme-dark .exchange-app .ex-footer,
.theme-dark .exchange-app .ex-footer {
  background: var(--ex-surface-raised, var(--card-bg));
  color: var(--theme-text-body, var(--para-color));
  border-top-color: var(--theme-primary, #DD3E42);
}

html.theme-dark .exchange-app .ex-footer__text,
html.theme-dark .exchange-app .ex-footer__copy,
html.theme-dark .exchange-app .ex-footer__trust-text,
.theme-dark .exchange-app .ex-footer__text,
.theme-dark .exchange-app .ex-footer__copy,
.theme-dark .exchange-app .ex-footer__trust-text {
  color: var(--theme-text-muted, #A8A8A8);
}

html.theme-dark .exchange-app .ex-footer__links a,
html.theme-dark .exchange-app .ex-footer__legal a,
.theme-dark .exchange-app .ex-footer__links a,
.theme-dark .exchange-app .ex-footer__legal a {
  color: #E2E8F0;
}

html.theme-dark .exchange-app .ex-footer__links a:hover,
html.theme-dark .exchange-app .ex-footer__legal a:hover,
.theme-dark .exchange-app .ex-footer__links a:hover,
.theme-dark .exchange-app .ex-footer__legal a:hover {
  color: var(--theme-primary, #DD3E42);
}

html.theme-dark .exchange-app .ex-footer__title,
html.theme-dark .exchange-app .ex-footer__contact-value,
.theme-dark .exchange-app .ex-footer__title,
.theme-dark .exchange-app .ex-footer__contact-value {
  color: var(--theme-text-primary, #EEEEEE);
}

html.theme-dark .exchange-app .ex-footer__social-link,
.theme-dark .exchange-app .ex-footer__social-link {
  background: var(--ex-surface, var(--body-bg));
  border-color: var(--ex-border);
  color: var(--theme-text-primary, #EEEEEE);
}

/* ===== exchange-sidebar-ref.css ===== */
/**
 * Sidebar visual match — theme-aware icons + chrome.
 * Icon color = opposite theme's sidebar background (for contrast):
 *   Light icons → dark sidebar bg (#111827)
 *   Dark icons  → light sidebar bg (#FFFFFF)
 * Active row bg = opposite theme's sidebar background (swapped).
 * Active cue = pink icon chip; hover = soft opposite-sidebar wash (cross-match).
 */

:root {
    /* ★ Accent — pink for active chip only */
    --ex-sidebar-accent: #DD3E42;
    /* Opposite-theme sidebar backgrounds used as default icon colors + active fills */
    --ex-sidebar-bg-light: #FFFFFF;
    --ex-sidebar-bg-dark: #111827;
    /* Default icons: light mode uses dark sidebar bg */
    --ex-sidebar-icon: var(--ex-sidebar-bg-dark);
    --ex-sidebar-ref-icon: var(--ex-sidebar-icon);
    --ex-sidebar-ref-green: var(--ex-sidebar-icon); /* legacy alias */
    /* Active menu = dark sidebar fill (visible on light sidebar) */
    --ex-sidebar-ref-active: var(--ex-sidebar-bg-dark);
    --ex-sidebar-ref-active-text: #EEEEEE;
    --ex-sidebar-feather-weight: 2.25;
    --ex-sidebar-feather-size: 1.5rem;

    /* Light defaults (overridden in dark) */
    --ex-sidebar-ref-bg: var(--theme-sidebar-bg, #FFFFFF);
    --ex-sidebar-ref-text: var(--theme-sidebar-text-strong, #000000);
    --ex-sidebar-ref-muted: var(--theme-sidebar-text, #555555);
    --ex-sidebar-ref-border: var(--theme-border-default, #E5EAF1);
    /* Hover = opposite-sidebar wash (cross-match); scroll = page bg + soft tint */
    --ex-sidebar-ref-hover: color-mix(in srgb, var(--ex-sidebar-bg-dark) 16%, transparent);
    --ex-sidebar-ref-scroll: color-mix(in srgb, var(--ex-sidebar-bg-dark) 22%, var(--theme-bg-page, #F5F7FA));
    --ex-sidebar-ref-scroll-strong: var(--ex-sidebar-ref-hover);
}

/* Dark mode surfaces from theme */
html.theme-dark,
.theme-dark {
    /* Icons match light-mode sidebar background */
    --ex-sidebar-icon: var(--ex-sidebar-bg-light, #FFFFFF);
    --ex-sidebar-ref-bg: var(--theme-sidebar-bg, #111827);
    --ex-sidebar-ref-text: var(--theme-sidebar-text-strong, #EEEEEE);
    --ex-sidebar-ref-muted: var(--theme-sidebar-text, #DDDDDD);
    --ex-sidebar-ref-border: var(--theme-border-default, #2A3446);
    --ex-sidebar-ref-hover: color-mix(in srgb, var(--ex-sidebar-bg-light) 20%, transparent);
    --ex-sidebar-ref-scroll: color-mix(in srgb, var(--ex-sidebar-bg-light) 24%, var(--theme-bg-page, #0F172A));
    --ex-sidebar-ref-scroll-strong: var(--ex-sidebar-ref-hover);
    /* Active menu = light sidebar fill (visible on dark sidebar) */
    --ex-sidebar-ref-active: var(--ex-sidebar-bg-light, #FFFFFF);
    --ex-sidebar-ref-active-text: #111827;
}

html.theme-light,
.theme-light {
    /* Icons match dark-mode sidebar background */
    --ex-sidebar-icon: var(--ex-sidebar-bg-dark, #111827);
    --ex-sidebar-ref-bg: var(--theme-sidebar-bg, #FFFFFF);
    --ex-sidebar-ref-text: var(--theme-sidebar-text-strong, #000000);
    --ex-sidebar-ref-muted: var(--theme-sidebar-text, #555555);
    --ex-sidebar-ref-border: var(--theme-border-default, #E5EAF1);
    --ex-sidebar-ref-hover: color-mix(in srgb, var(--ex-sidebar-bg-dark) 16%, transparent);
    --ex-sidebar-ref-scroll: color-mix(in srgb, var(--ex-sidebar-bg-dark) 22%, var(--theme-bg-page, #F5F7FA));
    --ex-sidebar-ref-scroll-strong: var(--ex-sidebar-ref-hover);
    --ex-sidebar-ref-active: var(--ex-sidebar-bg-dark, #111827);
    --ex-sidebar-ref-active-text: #EEEEEE;
}

/*
 * Remap theme icon tokens inside the sidebar.
 * Default glyphs → --ex-sidebar-icon (cross-theme sidebar bg);
 * hover → soft neutral wash (no pink);
 * Active fill stays opposite-theme sidebar bg (set per theme below).
 */
html.theme-light .exchange-app .ex-sidebar,
html.theme-dark .exchange-app .ex-sidebar,
.theme-light .exchange-app .ex-sidebar,
.theme-dark .exchange-app .ex-sidebar,
.exchange-app .ex-sidebar,
html.theme-light .exchange-app .ex-sidebar-rail,
html.theme-dark .exchange-app .ex-sidebar-rail,
.exchange-app .ex-sidebar-rail {
    /* Default icon color — NOT pink (pink only on active/hover rules below) */
    --theme-icon-on-brand: var(--ex-sidebar-icon);
    --theme-icon-default: var(--ex-sidebar-icon);
    --theme-icon-well-bg: transparent;
    --theme-icon-well-hover: transparent;
    --theme-icon-well-active: transparent;
    --theme-icon-well-shadow: none;
    --theme-sidebar-section-accent: var(--ex-sidebar-accent);
    --ex-sidebar-ref-icon: var(--ex-sidebar-icon);
    --ex-sidebar-ref-green: var(--ex-sidebar-icon);
}

html.theme-light .exchange-app .ex-sidebar,
.theme-light .exchange-app .ex-sidebar,
html.theme-light .exchange-app .ex-sidebar-rail,
.theme-light .exchange-app .ex-sidebar-rail {
    --ex-sidebar-ref-active: var(--ex-sidebar-bg-dark, #111827);
    --ex-sidebar-ref-active-text: #EEEEEE;
}

html.theme-dark .exchange-app .ex-sidebar,
.theme-dark .exchange-app .ex-sidebar,
html.theme-dark .exchange-app .ex-sidebar-rail,
.theme-dark .exchange-app .ex-sidebar-rail {
    --ex-sidebar-ref-active: var(--ex-sidebar-bg-light, #FFFFFF);
    --ex-sidebar-ref-active-text: #111827;
}

/* Rail — theme-aware (dark navy only in dark mode) */
html.theme-light .exchange-app .ex-sidebar-rail,
html.theme-dark .exchange-app .ex-sidebar-rail,
.exchange-app .ex-sidebar-rail {
    background: var(--ex-sidebar-ref-bg) !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--ex-sidebar-ref-border) !important;
    box-shadow: none !important;
}

.exchange-app .ex-shell__sidebar {
    background: var(--ex-sidebar-ref-bg) !important;
}

html.theme-dark .exchange-app,
html.theme-dark .exchange-app body,
html.theme-dark body.exchange-app,
.theme-dark.exchange-app,
.theme-dark body.exchange-app {
    background-color: var(--theme-bg-page, #0F172A) !important;
}

html.theme-dark .exchange-app .ex-shell,
html.theme-dark .exchange-app .ex-shell__main {
    background-color: var(--theme-bg-page, #0F172A);
}

.exchange-app .ex-shell {
    gap: 0 !important;
}

.exchange-app .ex-sidebar,
.exchange-app .ex-sidebar .dropdown-widget {
    background: transparent !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-wrapper {
    padding: 0.85rem 0.55rem 1.1rem 0.75rem !important;
    background: transparent !important;
    scrollbar-width: thin;
    scrollbar-color: var(--ex-sidebar-ref-scroll) transparent;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper {
    scrollbar-color: color-mix(in srgb, var(--ex-sidebar-bg-dark, #111827) 22%, var(--theme-bg-page, #F5F7FA)) transparent !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper {
    scrollbar-color: color-mix(in srgb, var(--ex-sidebar-bg-light, #FFFFFF) 24%, var(--theme-bg-page, #0F172A)) transparent !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar {
    width: 9px;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-button,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-button,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-button,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-track {
    margin: 0.35rem 0;
    border-radius: var(--theme-radius-pill, 999px);
    background: transparent !important;
    box-shadow: none !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-track,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-track,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-track,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-track {
    background: transparent !important;
    box-shadow: none !important;
}

/* Thumb default = main page bg; hover = sidebar cross-match wash */
.exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb {
    border: 0 !important;
    border-radius: var(--theme-radius-pill, 999px);
    background: var(--ex-sidebar-ref-scroll) !important;
    box-shadow: none !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ex-sidebar-bg-dark, #111827) 22%, var(--theme-bg-page, #F5F7FA)) !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ex-sidebar-bg-light, #FFFFFF) 24%, var(--theme-bg-page, #0F172A)) !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--ex-sidebar-ref-scroll-strong) !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb:hover,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--ex-sidebar-bg-dark, #111827) 16%, transparent) !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb:hover,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--ex-sidebar-bg-light, #FFFFFF) 20%, transparent) !important;
}

.exchange-app .ex-sidebar .simplebar-track.simplebar-vertical {
    width: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.exchange-app .ex-sidebar .simplebar-scrollbar::before {
    background: var(--ex-sidebar-ref-scroll) !important;
    box-shadow: none !important;
    border-radius: var(--theme-radius-pill, 999px);
}

html.theme-light .exchange-app .ex-sidebar .simplebar-scrollbar::before,
.theme-light .exchange-app .ex-sidebar .simplebar-scrollbar::before {
    background: color-mix(in srgb, var(--ex-sidebar-bg-dark, #111827) 22%, var(--theme-bg-page, #F5F7FA)) !important;
}

html.theme-dark .exchange-app .ex-sidebar .simplebar-scrollbar::before,
.theme-dark .exchange-app .ex-sidebar .simplebar-scrollbar::before {
    background: color-mix(in srgb, var(--ex-sidebar-bg-light, #FFFFFF) 24%, var(--theme-bg-page, #0F172A)) !important;
}

.exchange-app .ex-sidebar .simplebar-scrollbar:hover::before,
.exchange-app .ex-sidebar .simplebar-scrollbar.simplebar-visible:hover::before {
    background: var(--ex-sidebar-ref-scroll-strong) !important;
}

html.theme-light .exchange-app .ex-sidebar .simplebar-scrollbar:hover::before,
.theme-light .exchange-app .ex-sidebar .simplebar-scrollbar:hover::before {
    background: color-mix(in srgb, var(--ex-sidebar-bg-dark, #111827) 16%, transparent) !important;
}

html.theme-dark .exchange-app .ex-sidebar .simplebar-scrollbar:hover::before,
.theme-dark .exchange-app .ex-sidebar .simplebar-scrollbar:hover::before {
    background: color-mix(in srgb, var(--ex-sidebar-bg-light, #FFFFFF) 20%, transparent) !important;
}

/* Section titles — visible text + theme pink accent lines only */
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-menu-title,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-menu-title,
.exchange-app .ex-sidebar .ex-sidebar-menu-title {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin: 0.5rem 0 0.2rem !important;
    padding: 0.22rem 0.45rem 0.22rem 0.625rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ex-sidebar-ref-text, #EEEEEE) !important;
    font-size: var(--theme-text-sm, 0.75rem) !important;
    font-weight: var(--theme-weight-semibold, 600) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    overflow: visible !important;
}

.exchange-app .ex-sidebar .ex-sidebar-menu-title > span {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    color: inherit !important;
}

.exchange-app .ex-sidebar .ex-sidebar-menu-title::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.2rem !important;
    bottom: 0.2rem !important;
    width: 2px !important;
    border: 0 !important;
    border-radius: var(--theme-radius-chip, 4px) !important;
    background: var(--theme-primary, #DD3E42) !important;
    box-shadow: none !important;
    pointer-events: none;
}

.exchange-app .ex-sidebar .ex-sidebar-menu-title::after {
    content: "" !important;
    display: block !important;
    position: static !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    min-width: 0.75rem !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--theme-primary, #DD3E42) 55%, transparent) !important;
    box-shadow: none !important;
    pointer-events: none;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-menu-title,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-menu-title {
    background: transparent !important;
    color: #111827 !important;
    box-shadow: none !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-menu-title,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-menu-title {
    background: transparent !important;
    box-shadow: none !important;
    color: #F1F5F9 !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-menu-title::before,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-menu-title::before {
    background: var(--theme-primary, #DD3E42) !important;
}

/* Collapsible section headers — match menu-title accent (left bar + pink rule) */
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__toggle,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__toggle,
.exchange-app .ex-sidebar .ex-sidebar-section__toggle {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    min-height: 1.75rem !important;
    margin: 0.5rem 0 0.2rem !important;
    padding: 0.22rem 0.45rem 0.22rem 0.625rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ex-sidebar-ref-text, #EEEEEE) !important;
    font-size: var(--theme-text-sm, 0.75rem) !important;
    font-weight: var(--theme-weight-semibold, 600) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    overflow: visible !important;
}

.exchange-app .ex-sidebar .ex-sidebar-section__toggle::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.2rem !important;
    bottom: 0.2rem !important;
    width: 2px !important;
    border: 0 !important;
    border-radius: var(--theme-radius-chip, 4px) !important;
    background: var(--theme-primary, #DD3E42) !important;
    box-shadow: none !important;
    pointer-events: none;
}

.exchange-app .ex-sidebar .ex-sidebar-section__label {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    color: inherit !important;
}

.exchange-app .ex-sidebar .ex-sidebar-section__rule {
    flex: 1 1 auto !important;
    height: 1px !important;
    min-width: 0.75rem !important;
    background: color-mix(in srgb, var(--theme-primary, #DD3E42) 55%, transparent) !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__toggle,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__toggle {
    background: transparent !important;
    color: #111827 !important;
    box-shadow: none !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__toggle,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__toggle {
    background: transparent !important;
    box-shadow: none !important;
    color: #F1F5F9 !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__toggle::before,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__toggle::before {
    background: var(--theme-primary, #DD3E42) !important;
}

/* +/- chip: pink default; hover = sidebar icon color (dark↔light by theme) */
.exchange-app .ex-sidebar .ex-sidebar-section__pm {
    width: 1rem !important;
    height: 1rem !important;
    background: var(--theme-primary, #DD3E42) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    font-weight: var(--theme-weight-semibold, 600) !important;
    font-size: var(--theme-text-xs, 0.6875rem) !important;
}

.exchange-app .ex-sidebar .ex-sidebar-section__pm:hover,
.exchange-app .ex-sidebar .ex-sidebar-section__toggle:hover .ex-sidebar-section__pm,
.exchange-app .ex-sidebar .ex-sidebar-section__toggle:focus-visible .ex-sidebar-section__pm {
    background: var(--ex-sidebar-icon, #111827) !important;
    background-color: var(--ex-sidebar-icon, #111827) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__pm:hover,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__toggle:hover .ex-sidebar-section__pm,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__pm:hover,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__toggle:hover .ex-sidebar-section__pm {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #FFFFFF !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__pm:hover,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__toggle:hover .ex-sidebar-section__pm,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__pm:hover,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__toggle:hover .ex-sidebar-section__pm {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #111827 !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-menu-title:first-child {
    margin-top: 0.2rem !important;
    padding-top: 0.25rem !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list > li + li:not(.ex-sidebar-menu-title) {
    margin-top: 0.05rem !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-menu-title + li:not(.ex-sidebar-menu-title) {
    margin-top: 0.1rem !important;
}

/* Labels — always white */
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li a,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a.ex-sidebar-nav-item__link {
    gap: 0.7rem;
    min-height: 2.35rem;
    padding: 0.4rem 0.55rem !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: var(--ex-sidebar-ref-text) !important;
    font-size: var(--theme-text-base, 0.875rem) !important;
    font-weight: 500 !important;
}

/* Hover — same language as open-bets / home event rows (slate wash + pink left rail) */
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover {
    color: var(--ex-sidebar-ref-text) !important;
    background: color-mix(in srgb, var(--bp-slate-400) 28%, var(--ex-sidebar-ref-bg, transparent)) !important;
    box-shadow: inset 3px 0 0 var(--theme-primary) !important;
    transform: none !important;
    font-weight: 500 !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover {
    background: color-mix(in srgb, var(--bp-slate-400) 28%, var(--ex-sidebar-ref-bg, #FFFFFF)) !important;
    color: var(--ex-sidebar-bg-dark, #111827) !important;
    box-shadow: inset 3px 0 0 var(--theme-primary) !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover {
    background: color-mix(in srgb, var(--bp-slate-500) 36%, var(--ex-sidebar-ref-bg, #111827)) !important;
    color: var(--ex-sidebar-bg-light, #FFFFFF) !important;
    box-shadow: inset 3px 0 0 var(--theme-primary) !important;
}

/* Nested account links — same event-row hover */
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-sub-nav li:not(.active) > a:hover,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-sub-nav li:not(.active) > a:hover {
    color: var(--ex-sidebar-bg-dark, #111827) !important;
    background: color-mix(in srgb, var(--bp-slate-400) 28%, var(--ex-sidebar-ref-bg, #FFFFFF)) !important;
    box-shadow: inset 3px 0 0 var(--theme-primary) !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-sub-nav li:not(.active) > a:hover,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-sub-nav li:not(.active) > a:hover {
    color: var(--ex-sidebar-bg-light, #FFFFFF) !important;
    background: color-mix(in srgb, var(--bp-slate-500) 36%, var(--ex-sidebar-ref-bg, #111827)) !important;
    box-shadow: inset 3px 0 0 var(--theme-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEFAULT ICONS → --ex-sidebar-icon
   ACTIVE → pink icon chip (#DD3E42) + white glyph
   HOVER → soft neutral wash (icons keep default color)
   ═══════════════════════════════════════════════════════════════════════════ */

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li a .nav-icon,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-cat-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a .nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a i.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a i.ex-cat-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    margin-inline-end: 0 !important;
    padding: 0.2rem !important;
    box-sizing: border-box !important;
    border-radius: var(--theme-radius-control, 8px) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ex-sidebar-icon) !important;
    font-size: var(--theme-text-3xl, 1.5rem) !important;
    line-height: 1 !important;
    text-align: center !important;
    opacity: 1 !important;
}

/* FA CSS mode — glyph lives on ::before; width/height alone does not scale it */
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a i.nav-icon::before,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a i.ex-cat-icon::before {
    color: inherit !important;
}

/* Hard lock — light icons = dark sidebar bg; dark icons = light sidebar bg */
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a .nav-icon,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a .ex-cat-icon,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a i.nav-icon::before,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a i.ex-cat-icon::before,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a .nav-icon,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a .ex-cat-icon,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a i.nav-icon::before,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a i.ex-cat-icon::before {
    color: #111827 !important;
    fill: #111827 !important;
    stroke: #111827 !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a .nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a .ex-cat-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a i.nav-icon::before,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a i.ex-cat-icon::before,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a .nav-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a .ex-cat-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a i.nav-icon::before,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a i.ex-cat-icon::before {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather {
    fill: none !important;
    stroke: #111827 !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather {
    fill: none !important;
    stroke: #FFFFFF !important;
}

/* Filled glyphs (FA / custom sport SVG) — NOT Feather/Lucide stroke icons.
   Feather/Lucide use <rect>/<polygon> too (layout, credit-card, grid…), so
   they must be excluded here or their shapes render as solid blobs. */
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg:not(.feather):not(.lucide) path,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg:not(.feather):not(.lucide) circle,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg:not(.feather):not(.lucide) ellipse,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg:not(.feather):not(.lucide) rect,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg:not(.feather):not(.lucide) path,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg:not(.feather):not(.lucide) circle {
    fill: #111827 !important;
    stroke: none !important;
    color: #111827 !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg:not(.feather):not(.lucide) path,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg:not(.feather):not(.lucide) circle,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg:not(.feather):not(.lucide) ellipse,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg:not(.feather):not(.lucide) rect,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg:not(.feather):not(.lucide) path,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg:not(.feather):not(.lucide) circle {
    fill: #FFFFFF !important;
    stroke: none !important;
    color: #FFFFFF !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather path,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather line,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather circle,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather polyline,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather polygon,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather rect,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather path {
    fill: none !important;
    stroke: #111827 !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather path,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather line,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather circle,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather polyline,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather polygon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather rect,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather path {
    fill: none !important;
    stroke: #FFFFFF !important;
}

/* Feather (top 4 + Games + Account) — thicker stroke so they match FA weight */
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.feather,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather.nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.feather,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather.nav-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.feather,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather.nav-icon,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.feather,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.feather,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather {
    width: var(--ex-sidebar-feather-size) !important;
    min-width: var(--ex-sidebar-feather-size) !important;
    height: var(--ex-sidebar-feather-size) !important;
    stroke: var(--ex-sidebar-icon) !important;
    stroke-width: var(--ex-sidebar-feather-weight) !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
    color: var(--ex-sidebar-icon) !important;
    paint-order: stroke fill;
    filter: none !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather path,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather line,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather circle,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather polyline,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather polygon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather rect,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather path,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather line,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather circle,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather polyline,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather polygon {
    stroke: var(--ex-sidebar-icon) !important;
    stroke-width: var(--ex-sidebar-feather-weight) !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
}

/* Font Awesome / filled sport SVGs — solid glyphs (same weight as Popular).
   MUST exclude .feather / .lucide: Lucide chrome (gamepad-2, volleyball, flag…)
   also carries .ex-cat-icon, and stroke:none here makes open paths invisible
   until hover reasserts stroke. */
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.svg-inline--fa,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.svg-inline--fa,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.svg-inline--fa,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.ex-cat-icon:not(.feather):not(.lucide) {
    color: var(--ex-sidebar-icon) !important;
    fill: var(--ex-sidebar-icon) !important;
    stroke: none !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-cat-icon:not(.feather):not(.lucide) path,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-cat-icon:not(.feather):not(.lucide) circle,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-cat-icon:not(.feather):not(.lucide) ellipse,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-cat-icon:not(.feather):not(.lucide) rect,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.ex-cat-icon:not(.feather):not(.lucide) path,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.ex-cat-icon:not(.feather):not(.lucide) circle,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.ex-cat-icon:not(.feather):not(.lucide) ellipse,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.ex-cat-icon:not(.feather):not(.lucide) rect,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.svg-inline--fa path,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.svg-inline--fa {
    fill: var(--ex-sidebar-icon) !important;
    stroke: none !important;
    color: var(--ex-sidebar-icon) !important;
}

/* Dual-tone shapes — filled sport SVGs only (not stroke Lucide) */
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-cat-icon:not(.feather):not(.lucide) path:nth-child(even),
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-cat-icon:not(.feather):not(.lucide) circle:nth-child(even),
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-cat-icon:not(.feather):not(.lucide) ellipse:nth-child(even),
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.ex-cat-icon:not(.feather):not(.lucide) path:nth-child(even),
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.ex-cat-icon:not(.feather):not(.lucide) circle:nth-child(even),
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.ex-cat-icon:not(.feather):not(.lucide) ellipse:nth-child(even) {
    fill: var(--ex-sidebar-icon) !important;
    stroke: var(--ex-sidebar-icon) !important;
}

/* Hover — soft wash only; icons stay default (pink reserved for active chip) */
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .nav-icon,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .ex-cat-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.nav-icon.feather,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.feather.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.feather,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.nav-icon.svg-inline--fa,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.ex-cat-icon {
    color: var(--ex-sidebar-icon) !important;
    stroke: var(--ex-sidebar-icon) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .nav-icon,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .ex-cat-icon,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg {
    color: #111827 !important;
    fill: #111827 !important;
    stroke: #111827 !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .ex-cat-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.nav-icon.feather,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.feather.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.feather {
    fill: none !important;
    stroke: var(--ex-sidebar-icon) !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.feather {
    stroke: #111827 !important;
    fill: none !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.feather {
    stroke: #FFFFFF !important;
    fill: none !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.nav-icon.svg-inline--fa,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.ex-cat-icon:not(.feather):not(.lucide) {
    fill: var(--ex-sidebar-icon) !important;
    stroke: none !important;
}

/* Active row — inverted fill + 3D bevel */
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"],
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a.ex-sidebar-nav-item__link {
    color: var(--ex-sidebar-ref-active-text, var(--theme-sidebar-active-text, #EEEEEE)) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ex-sidebar-ref-active, #111827) 88%, #FFFFFF) 0%,
        var(--ex-sidebar-ref-active, #111827) 48%,
        color-mix(in srgb, var(--ex-sidebar-ref-active, #111827) 82%, #000000) 100%
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        inset -1px 0 0 rgba(0, 0, 0, 0.12),
        0 2px 0 rgba(0, 0, 0, 0.22),
        0 3px 6px rgba(15, 23, 42, 0.2) !important;
    border-radius: var(--theme-radius-chip, 4px) !important;
    transform: none !important;
    font-weight: 600 !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a.ex-sidebar-nav-item__link,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a.ex-sidebar-nav-item__link {
    background: var(--ex-surface-active-plate) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        inset -1px 0 0 rgba(0, 0, 0, 0.18),
        0 2px 0 #0B1220,
        0 3px 6px rgba(15, 23, 42, 0.28) !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a.ex-sidebar-nav-item__link,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a.ex-sidebar-nav-item__link {
    background: var(--ex-surface-active-plate) !important;
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        inset 1px 0 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(15, 23, 42, 0.12),
        inset -1px 0 0 rgba(15, 23, 42, 0.06),
        0 2px 0 #A8B6C8,
        0 3px 6px rgba(0, 0, 0, 0.35) !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a::after,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a::after,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a::after,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a::after,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"]::after,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a.ex-sidebar-nav-item__link::after {
    content: none !important;
    display: none !important;
}

/* Active icon chip — 3D pink well + white glyph */
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .nav-icon,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a svg.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a svg.ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] svg.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] svg.ex-cat-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    padding: 0.2rem !important;
    box-sizing: border-box !important;
    border-radius: var(--theme-radius-control, 8px) !important;
    background: #DD3E42 !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(120, 10, 28, 0.35),
        0 1px 2px rgba(120, 10, 28, 0.35) !important;
    filter: none !important;
    opacity: 1 !important;
    line-height: 0 !important;
    text-align: center !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a i.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a i.ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a i.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a i.ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] i.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] i.ex-cat-icon {
    font-size: var(--theme-text-base, 0.875rem) !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a i.nav-icon::before,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a i.ex-cat-icon::before,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a i.nav-icon::before,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a i.ex-cat-icon::before,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] i.nav-icon::before,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] i.ex-cat-icon::before {
    display: block !important;
    line-height: 1 !important;
    width: 1em !important;
    height: 1em !important;
    text-align: center !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.nav-icon.feather,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.feather.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.feather,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a svg.nav-icon.feather,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a svg.nav-icon.feather,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.nav-icon.feather,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.feather {
    stroke: #FFFFFF !important;
    stroke-width: 2.25 !important;
    fill: none !important;
    color: #FFFFFF !important;
    background: #DD3E42 !important;
    border-radius: var(--theme-radius-control, 8px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(120, 10, 28, 0.35),
        0 1px 2px rgba(120, 10, 28, 0.35) !important;
    filter: none !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.feather path,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.feather line,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.feather circle,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.feather polyline,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.feather polygon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.feather rect,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a svg.feather path,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a svg.feather line,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.feather path,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a:hover svg.feather path {
    stroke: #FFFFFF !important;
    stroke-width: 2.25 !important;
    fill: none !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.nav-icon.svg-inline--fa,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.ex-cat-icon:not(.feather),
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a svg.ex-cat-icon:not(.feather),
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] svg.ex-cat-icon:not(.feather) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: none !important;
    background: var(--ex-sidebar-accent) !important;
    border-radius: var(--theme-radius-control, 8px) !important;
}

/* Glyph shapes inside chip — white on pink (filled FA / sport SVG only) */
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon:not(.feather):not(.lucide) path,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon:not(.feather):not(.lucide) circle,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon:not(.feather):not(.lucide) ellipse,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon:not(.feather):not(.lucide) rect,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.ex-cat-icon:not(.feather):not(.lucide) path,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.ex-cat-icon:not(.feather):not(.lucide) circle,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.ex-cat-icon:not(.feather):not(.lucide) ellipse,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.ex-cat-icon:not(.feather):not(.lucide) rect,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.nav-icon.svg-inline--fa path,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.nav-icon.svg-inline--fa,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .ex-cat-icon:not(.feather):not(.lucide) path,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a svg.ex-cat-icon:not(.feather):not(.lucide) path,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a svg.nav-icon.svg-inline--fa path,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] .ex-cat-icon:not(.feather):not(.lucide) path,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] svg.nav-icon.svg-inline--fa path {
    fill: #FFFFFF !important;
    stroke: none !important;
    color: #FFFFFF !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon:not(.feather):not(.lucide) path:nth-child(even),
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon:not(.feather):not(.lucide) circle:nth-child(even),
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon:not(.feather):not(.lucide) ellipse:nth-child(even),
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.ex-cat-icon:not(.feather):not(.lucide) path:nth-child(even),
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.ex-cat-icon:not(.feather):not(.lucide) circle:nth-child(even),
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.ex-cat-icon:not(.feather):not(.lucide) ellipse:nth-child(even) {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Live dot stays green — never pink chip */
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-live-dot.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-live-dot,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .ex-live-dot {
    width: 0.5rem !important;
    min-width: 0.5rem !important;
    height: 0.5rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    color: transparent !important;
    fill: none !important;
    stroke: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li.has-child::after {
    color: var(--ex-sidebar-ref-muted) !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active::after,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open::after {
    color: var(--ex-sidebar-ref-active-text, var(--ex-sidebar-ref-muted)) !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-sub-nav {
    border-left: 1px solid var(--ex-sidebar-ref-border);
    margin-inline-start: 1rem;
    padding-inline-start: 0.65rem;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-sub-nav li a {
    color: var(--ex-sidebar-ref-muted) !important;
    font-size: var(--theme-text-md, 0.8125rem) !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-sub-nav li a.active {
    color: var(--ex-sidebar-accent) !important;
    background: transparent !important;
}

.exchange-app .ex-sidebar-rail .ex-sidebar__toggle {
    color: var(--ex-sidebar-ref-muted);
    border-color: var(--ex-sidebar-ref-border);
    background: rgba(255, 255, 255, 0.04);
}

.exchange-app .ex-sidebar-rail .ex-sidebar__toggle:hover {
    color: var(--ex-sidebar-ref-text);
    background: var(--ex-sidebar-ref-hover);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Schedule tabs — SAME chrome/icons/active as sidebar (shared tokens + markup)
   Markup uses .ex-sidebar-nav-list / .ex-sidebar-nav-item__link / .nav-icon /
   li.active so this block mirrors sidebar-ref rules at equal-or-higher weight.
   ═══════════════════════════════════════════════════════════════════════════ */

.exchange-app .ex-schedule-subnav {
    --theme-icon-on-brand: var(--ex-sidebar-icon);
    --theme-icon-default: var(--ex-sidebar-icon);
    --theme-icon-well-bg: transparent;
    --theme-icon-well-hover: transparent;
    --theme-icon-well-active: transparent;
    --theme-icon-well-shadow: none;
    margin-bottom: 1rem;
}

/* Horizontal strip surface = sidebar bg */
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list.ex-inplay-match-tabs {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: stretch !important;
    gap: 0.2rem;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0.2rem !important;
    list-style: none !important;
    border: 1px solid var(--ex-sidebar-ref-border) !important;
    border-radius: var(--theme-radius-control, 8px) !important;
    background: var(--ex-sidebar-ref-bg) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list.ex-inplay-match-tabs > li {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Base link = sidebar link (inactive only — never beat active plate) */
html.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li:not(.active) > a,
html.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li:not(.active) > a,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li:not(.active) > a,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li:not(.active) > a.ex-sidebar-nav-item__link,
html.theme-light .exchange-app .ex-schedule-subnav.inplay-area ul li:not(.active) > a.ex-inplay-match-tab,
html.theme-dark .exchange-app .ex-schedule-subnav.inplay-area ul li:not(.active) > a.ex-inplay-match-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    min-height: 2.35rem !important;
    padding: 0.4rem 0.55rem !important;
    border-radius: var(--theme-radius-chip, 4px) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: var(--ex-sidebar-ref-text) !important;
    font-size: var(--theme-text-base, 0.875rem) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    width: auto !important;
}

html.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list li:not(.active) > a:hover,
html.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list li:not(.active) > a:hover,
.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list li:not(.active) > a:hover {
    background: color-mix(in srgb, var(--ex-sidebar-bg-dark, #111827) 16%, transparent) !important;
    color: var(--ex-sidebar-bg-dark, #111827) !important;
    box-shadow: none !important;
    transform: none !important;
    font-weight: 500 !important;
}

html.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list li:not(.active) > a:hover,
.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list li:not(.active) > a:hover {
    background: color-mix(in srgb, var(--ex-sidebar-bg-light, #FFFFFF) 20%, transparent) !important;
    color: var(--ex-sidebar-bg-light, #FFFFFF) !important;
}

/* Default icons (inactive size — active chip overrides below) */
html.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li:not(.active) > a .nav-icon,
html.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li:not(.active) > a .nav-icon,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li:not(.active) > a .nav-icon,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li:not(.active) > a i.nav-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 1.375rem !important;
    min-width: 1.375rem !important;
    height: 1.375rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ex-sidebar-icon) !important;
    font-size: var(--theme-text-lg-plus, 1rem) !important;
    line-height: 0 !important;
    text-align: center !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    filter: none !important;
}

.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li:not(.active) > a i.nav-icon::before {
    display: block !important;
    line-height: 1 !important;
    width: 1em !important;
    height: 1em !important;
    text-align: center !important;
    color: inherit !important;
}

html.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li:not(.active) > a .nav-icon,
.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li:not(.active) > a .nav-icon {
    color: #111827 !important;
}

html.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li:not(.active) > a .nav-icon,
.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li:not(.active) > a .nav-icon {
    color: #FFFFFF !important;
}

/* Active plate — identical to sidebar (beat theme + legacy inplay-area) */
html.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a,
html.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a,
.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a,
.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a.ex-sidebar-nav-item__link,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a.ex-inplay-match-tab,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a.ex-sidebar-nav-item__link,
html.theme-light .exchange-app .ex-schedule-subnav.inplay-area ul.ex-inplay-match-tabs > li.active > a.ex-inplay-match-tab,
html.theme-dark .exchange-app .ex-schedule-subnav.inplay-area ul.ex-inplay-match-tabs > li.active > a.ex-inplay-match-tab,
html.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a:hover,
html.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a:hover,
html.theme-light .exchange-app .ex-schedule-subnav.inplay-area ul.ex-inplay-match-tabs > li.active > a.ex-inplay-match-tab:hover,
html.theme-dark .exchange-app .ex-schedule-subnav.inplay-area ul.ex-inplay-match-tabs > li.active > a.ex-inplay-match-tab:hover {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    min-height: 2.35rem !important;
    padding: 0.4rem 0.55rem !important;
    color: var(--ex-sidebar-ref-active-text, #EEEEEE) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ex-sidebar-ref-active, #111827) 88%, #FFFFFF) 0%,
        var(--ex-sidebar-ref-active, #111827) 48%,
        color-mix(in srgb, var(--ex-sidebar-ref-active, #111827) 82%, #000000) 100%
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        inset -1px 0 0 rgba(0, 0, 0, 0.12),
        0 2px 0 rgba(0, 0, 0, 0.22),
        0 3px 6px rgba(15, 23, 42, 0.2) !important;
    border: 0 !important;
    border-radius: var(--theme-radius-chip, 4px) !important;
    transform: none !important;
    font-size: var(--theme-text-base, 0.875rem) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    width: auto !important;
}

html.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a,
.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a,
html.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a:hover,
.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a:hover,
html.theme-light .exchange-app .ex-schedule-subnav.inplay-area ul.ex-inplay-match-tabs > li.active > a.ex-inplay-match-tab,
html.theme-light .exchange-app .ex-schedule-subnav.inplay-area ul.ex-inplay-match-tabs > li.active > a.ex-inplay-match-tab:hover {
    color: #EEEEEE !important;
    background: var(--ex-surface-active-plate) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        inset -1px 0 0 rgba(0, 0, 0, 0.18),
        0 2px 0 #0B1220,
        0 3px 6px rgba(15, 23, 42, 0.28) !important;
}

html.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a,
.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a,
html.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a:hover,
.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a:hover,
html.theme-dark .exchange-app .ex-schedule-subnav.inplay-area ul.ex-inplay-match-tabs > li.active > a.ex-inplay-match-tab,
html.theme-dark .exchange-app .ex-schedule-subnav.inplay-area ul.ex-inplay-match-tabs > li.active > a.ex-inplay-match-tab:hover {
    color: #111827 !important;
    background: var(--ex-surface-active-plate) !important;
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        inset 1px 0 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(15, 23, 42, 0.12),
        inset -1px 0 0 rgba(15, 23, 42, 0.06),
        0 2px 0 #A8B6C8,
        0 3px 6px rgba(0, 0, 0, 0.35) !important;
}

.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a::after,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a::before {
    content: none !important;
    display: none !important;
}

/* Active brand chip — exact premium sidebar icon-well contract. */
html.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a .nav-icon,
html.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a .nav-icon,
.theme-light .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a .nav-icon,
.theme-dark .exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a .nav-icon,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a .nav-icon,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a i.nav-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 1.625rem !important;
    min-width: 1.625rem !important;
    height: 1.625rem !important;
    padding: 0.21875rem !important;
    box-sizing: border-box !important;
    border-radius: var(--theme-radius-control, 8px) !important;
    background: var(--theme-primary, #DD3E42) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(80, 8, 18, 0.4),
        0 1px 3px rgba(120, 10, 28, 0.4) !important;
    filter: none !important;
    opacity: 1 !important;
    font-size: var(--theme-text-base, 0.875rem) !important;
    line-height: 0 !important;
    text-align: center !important;
}

.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a .nav-icon::before,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a i.nav-icon::before {
    display: block !important;
    line-height: 1 !important;
    width: 1em !important;
    height: 1em !important;
    text-align: center !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Active plate optical balance — 3D bottom lip makes content look high */
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a.ex-inplay-match-tab {
    padding-top: 0.48rem !important;
    padding-bottom: 0.32rem !important;
}

.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list li a .ex-sidebar-nav-caption {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ------------------------------------------------------------------ *
 * WP06b fix — stroke sport SVGs must stay STROKED in every state.
 * The fill/dual-tone rules above were tuned for filled FA glyphs and
 * were turning the outline sport pack into solid blobs. These
 * high-specificity overrides (loaded last) re-assert stroke on the
 * .ex-sport-svg pack, while cricket (.ex-sport-svg--fill) keeps fill.
 * ------------------------------------------------------------------ */

/* SVG element itself — default, hover, active, open, expanded */
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.ex-cat-icon.ex-sport-svg:not(.ex-sport-svg--fill),
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.nav-icon.ex-cat-icon.ex-sport-svg:not(.ex-sport-svg--fill),
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.nav-icon.ex-cat-icon.ex-sport-svg:not(.ex-sport-svg--fill),
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a svg.nav-icon.ex-cat-icon.ex-sport-svg:not(.ex-sport-svg--fill),
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] svg.nav-icon.ex-cat-icon.ex-sport-svg:not(.ex-sport-svg--fill) {
    fill: none !important;
    stroke: currentColor !important;
}

/* Shapes inside stroke sports — including dual-tone nth-child overrides */
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.ex-cat-icon.ex-sport-svg:not(.ex-sport-svg--fill) :is(path, circle, ellipse, rect, line, polyline, polygon),
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.ex-cat-icon.ex-sport-svg:not(.ex-sport-svg--fill) :is(path, circle, ellipse, rect, line, polyline, polygon):nth-child(even),
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.nav-icon.ex-cat-icon.ex-sport-svg:not(.ex-sport-svg--fill) :is(path, circle, ellipse, rect, line, polyline, polygon),
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.nav-icon.ex-cat-icon.ex-sport-svg:not(.ex-sport-svg--fill) :is(path, circle, ellipse, rect, line, polyline, polygon),
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.nav-icon.ex-cat-icon.ex-sport-svg:not(.ex-sport-svg--fill) :is(path, circle, ellipse, rect, line, polyline, polygon):nth-child(even),
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a svg.nav-icon.ex-cat-icon.ex-sport-svg:not(.ex-sport-svg--fill) :is(path, circle, ellipse, rect, line, polyline, polygon),
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] svg.nav-icon.ex-cat-icon.ex-sport-svg:not(.ex-sport-svg--fill) :is(path, circle, ellipse, rect, line, polyline, polygon) {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Cricket (fill pack) — keep solid glyph in every state */
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.ex-cat-icon.ex-sport-svg.ex-sport-svg--fill :is(path, circle, ellipse, rect),
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.nav-icon.ex-cat-icon.ex-sport-svg.ex-sport-svg--fill :is(path, circle, ellipse, rect),
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a svg.nav-icon.ex-cat-icon.ex-sport-svg.ex-sport-svg--fill :is(path, circle, ellipse, rect) {
    fill: currentColor !important;
    stroke: none !important;
}

/*
 * Sidebar active icon contract.
 *
 * Do not use `:is(> li, …)` here: a leading combinator inside :is() is not
 * a valid complex selector, so top-level active rows silently lost their
 * icon well. Keep direct and section rows explicit.
 */
.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.active > a :is(.nav-icon, .ex-cat-icon),
.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-section__body > li.active > a :is(.nav-icon, .ex-cat-icon) {
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    padding: 0.2rem !important;
    box-sizing: border-box !important;
    border-radius: var(--theme-radius-control, 8px) !important;
    color: #FFFFFF !important;
    background: #DD3E42 !important;
    fill: none !important;
    stroke: #FFFFFF !important;
    stroke-width: 2.25 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(120, 10, 28, 0.35),
        0 1px 2px rgba(120, 10, 28, 0.35) !important;
    filter: none !important;
}

.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.active > a svg.feather :is(path, line, circle, polyline, polygon, rect),
.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-section__body > li.active > a svg.feather :is(path, line, circle, polyline, polygon, rect) {
    fill: none !important;
    stroke: #FFFFFF !important;
    stroke-width: 2.25 !important;
}

.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.active > a svg.ex-sport-svg--fill :is(path, circle, ellipse, rect),
.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-section__body > li.active > a svg.ex-sport-svg--fill :is(path, circle, ellipse, rect) {
    fill: #FFFFFF !important;
    stroke: none !important;
}


/* WP21 — Lucide/Feather stroke contract (default / non-active).
   Wins over legacy FA fill rules that still target .ex-cat-icon.
   Covers Popular (esports/volleyball/politics) AND Account section body. */
.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather,
.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.lucide,
.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-section__body > li:not(.active):not(.open) > a svg.feather,
.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-section__body > li:not(.active):not(.open) > a svg.lucide {
    fill: none !important;
    stroke: var(--ex-sidebar-icon) !important;
    color: var(--ex-sidebar-icon) !important;
    stroke-width: var(--ex-sidebar-feather-weight, 2.25) !important;
}

.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.feather :is(path, line, circle, polyline, polygon, rect, ellipse),
.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list > li:not(.active):not(.open) > a svg.lucide :is(path, line, circle, polyline, polygon, rect, ellipse),
.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-section__body > li:not(.active):not(.open) > a svg.feather :is(path, line, circle, polyline, polygon, rect, ellipse),
.exchange-app.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-section__body > li:not(.active):not(.open) > a svg.lucide :is(path, line, circle, polyline, polygon, rect, ellipse) {
    fill: none !important;
    stroke: var(--ex-sidebar-icon) !important;
    stroke-width: var(--ex-sidebar-feather-weight, 2.25) !important;
}

/* ===== exchange.css ===== */
/**
 * Exchange UI — Betfair / Diamond Exchange inspired styling.
 * Colors come from exchange-theme.css (theme-light / theme-dark on <html>).
 */

/*
 * Match-row links live in async odds CSS — without this, first paint is browser blue.
 * Only reset the <a> itself; do NOT force children to inherit (that hid team names).
 */
.exchange-app a.ex-indibet-row__match-link,
.exchange-app a.ex-indibet-row__match-link:link,
.exchange-app a.ex-indibet-row__match-link:visited,
.exchange-app a.ex-indibet-row__match-link:hover,
.exchange-app a.ex-indibet-row__match-link:active,
.exchange-app a.ex-indibet-row__match-link:focus {
    color: var(--ex-text-strong, var(--theme-text-strong, inherit));
    text-decoration: none;
}

/* ─── Page shell ─────────────────────────────────────────────────────────── */
.exchange-layout .main-body-area {
    padding-top: 0.5rem;
}

.exchange-layout .ex-sidebar {
    font-size: var(--theme-text-md, 0.8125rem);
}

.exchange-layout .ex-sidebar .list-heading {
    font-size: var(--theme-text-xs, 0.6875rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ex-muted);
}

/* ─── Exchange tabs (Match Odds / Fancy) — S7 line-tabs pattern ──────────── */
.ex-tabs {
    border-bottom: 1px solid var(--ex-border);
    gap: 0;
}

.ex-tabs .nav-item {
    margin-bottom: -1px;
}

.ex-tabs .nav-link {
    position: relative;
    color: var(--ex-muted);
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: 500;
    border: none;
    border-radius: 0;
    padding: 0.5rem 1rem;
    background: transparent;
}

.ex-tabs .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ex-tabs .nav-link:hover {
    color: var(--color-primary);
    background: transparent;
}

.ex-tabs .nav-link.active {
    color: var(--color-primary);
    background: transparent;
    font-weight: 600;
}

.ex-tabs .nav-link.active::after {
    opacity: 1;
}

.ex-live-score-panel__tabs {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.ex-live-score-panel:not(:has(.ex-live-score-panel__scoreboard--top)) .ex-live-score-panel__tabs {
    border-top: none;
    border-radius: var(--ex-panel-radius, 10px) var(--ex-panel-radius, 10px) 0 0;
}

.ex-live-score-panel:not(:has(.ex-live-score-panel__scoreboard--top)) .ex-live-score-panel__tabs .nav-item:first-of-type .nav-link {
    border-top-left-radius: var(--ex-panel-radius, 10px);
}

.ex-live-score-panel:not(:has(.ex-live-score-panel__scoreboard--top)) .ex-live-score-panel__tabs .nav-item:has(> .nav-link):last-of-type .nav-link {
    border-top-right-radius: var(--ex-panel-radius, 10px);
}

.ex-live-score-panel__tabs .nav-item {
    display: flex;
    align-items: stretch;
    margin-bottom: 0;
}

.ex-live-score-panel__tabs .nav-link {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
}

/* Bootstrap nav-tabs resets — keep Live Center tabs identical to markets jump */
.exchange-app .ex-live-score-panel__tabs.nav-tabs {
    border-bottom: 1px solid var(--ex-border);
}

.exchange-app .ex-live-score-panel__tabs.nav-tabs .nav-link,
.exchange-app .ex-live-score-panel__tabs.nav-tabs .nav-link:hover,
.exchange-app .ex-live-score-panel__tabs.nav-tabs .nav-link:focus,
.exchange-app .ex-live-score-panel__tabs.nav-tabs .nav-link.active {
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    isolation: auto !important;
}

/* ─── Match markets page — single scroll (Betfair-style sections) ───────── */
.ex-markets-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ex-markets-section {
    scroll-margin-top: calc(var(--ex-site-header-height, 7.5rem) + 3.25rem);
}

.ex-markets-section__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    margin: 0;
    padding: 1.25rem 0.75rem;
    text-align: center;
    color: var(--ex-muted);
    font-size: var(--theme-text-md, 0.8125rem);
    line-height: 1.45;
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-top: 0;
    border-radius: 0 0 var(--ex-panel-radius, 6px) var(--ex-panel-radius, 6px);
}

.ex-markets-section__empty-text {
    margin: 0;
    max-width: 18rem;
    color: var(--ex-muted);
    font-size: var(--theme-text-md, 0.8125rem);
    line-height: 1.45;
}

.ex-markets-section__heading:has(+ .ex-markets-section__empty) {
    margin-bottom: 0;
}

/* ─── Event summary (match header + live hub + markets) ─────────────────── */
.ex-event-summary {
    margin-top: 0.5rem;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-panel-radius, 10px);
    overflow: hidden;
    background: var(--ex-surface);
    box-shadow: var(--ex-inplay-panel-shadow, var(--ex-shadow));
}

.ex-event-summary .ex-match-header {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--ex-border);
}

.ex-event-summary .ex-match-header + .ex-live-score-panel {
    margin-top: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.ex-event-summary .ex-live-score-panel + .ex-markets-unified {
    margin-top: 0;
}

.ex-event-summary .ex-match-header + .ex-markets-unified {
    margin-top: 0;
}

.ex-event-summary .ex-markets-unified + .ex-live-score-panel {
    margin-top: 0;
    border: none;
    border-top: 1px solid var(--ex-border);
    border-radius: 0;
    box-shadow: none;
}

.ex-event-summary .ex-live-score-panel {
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.ex-event-summary .ex-live-score-panel__hero {
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
}

.ex-event-summary .ex-live-score-panel:not(:has(.ex-live-score-panel__scoreboard--top)) .ex-live-score-panel__tabs {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.ex-event-summary .ex-live-score-panel:not(:has(.ex-live-score-panel__scoreboard--top)) .ex-live-score-panel__tabs .nav-item:first-of-type .nav-link,
.ex-event-summary .ex-live-score-panel:not(:has(.ex-live-score-panel__scoreboard--top)) .ex-live-score-panel__tabs .nav-item:has(> .nav-link):last-of-type .nav-link {
    border-radius: 0 !important;
}

.ex-event-summary .ex-live-score-panel__tab-content {
    border-radius: 0;
}

.ex-event-summary .ex-markets-unified {
    margin-top: 0;
}

.ex-event-summary .ex-markets-wrap--unified {
    border: none;
    border-top: none;
    border-bottom: 1px solid var(--ex-border);
    border-radius: 0;
    box-shadow: none;
}

.ex-event-summary .ex-markets-unified--stacked .ex-markets-wrap--unified {
    border-radius: 0;
}

.ex-event-summary + #exchange-open-bets {
    margin-top: 0.5rem;
}

/* Match detail parity — reuse the home market hierarchy instead of a
   standalone presentation-card treatment. Odds fills remain owner-controlled. */
.ex-match-detail-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-text-base, 0.875rem);
    line-height: var(--theme-leading-body, 1.45);
    font-feature-settings: var(--theme-font-features, normal);
}

.ex-match-detail-page .ex-event-summary {
    margin-top: 0.15rem;
    border: 1px solid var(--ex-border);
    border-radius: 0;
    background: var(--ex-market-bg);
    box-shadow: none;
}

.ex-match-detail-page .ex-match-header {
    border-radius: 0;
    /* Home ladder: page/section head — not category. */
    background: var(--ex-surface-section-head);
    color: var(--ex-schedule-section-head-text, var(--ex-text-strong));
    border-bottom: 1px solid var(--ex-schedule-section-head-border, var(--ex-border));
}

.ex-match-detail-page .ex-markets-unified--stacked .ex-markets-wrap--unified,
.ex-match-detail-page .ex-markets-wrap--unified {
    border-radius: 0;
    box-shadow: none;
    background: var(--ex-market-bg, var(--ex-surface));
}

.ex-match-detail-page .ex-live-score-panel,
.ex-match-detail-page .ex-live-score-panel__cricket-card {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--ex-surface-row, var(--ex-market-bg));
}

.ex-match-detail-page .ex-live-score-panel__cricket-card {
    border-top: 1px solid color-mix(in srgb, var(--ex-border) 80%, transparent);
}

/* Match detail scorecard: paired Inn1 | Inn2 + framed data grids. */
.ex-match-detail-page .ex-live-score-panel__cricket-card,
.ex-match-detail-page .ex-cricket-scorecard,
.ex-match-detail-page .ex-live-score-panel__cricket-card .ex-cricket-scorecard,
.ex-match-detail-page .ex-live-score-panel__col-body,
.ex-match-detail-page .ex-cricket-scorecard__band,
.ex-match-detail-page .ex-cricket-scorecard__col {
    max-height: none !important;
    overflow: visible !important;
}

.ex-match-detail-page .ex-cricket-scorecard {
    padding: 0;
    background: var(--ex-surface-row, var(--ex-market-bg));
}

.ex-match-detail-page .ex-cricket-scorecard__section-head {
    margin: 0;
    padding: var(--theme-space-2, 0.5rem) var(--theme-space-3, 0.75rem);
    background: var(--ex-surface-section-head, var(--ex-surface-subhead));
    border-bottom: 1px solid var(--theme-match-list-columns-border, var(--ex-border));
    color: var(--ex-schedule-section-head-text, var(--ex-text-strong));
    font-family: var(--theme-font-sans);
    font-size: var(--theme-type-league-size);
    font-weight: var(--theme-type-league-weight);
    letter-spacing: var(--theme-type-league-tracking);
    text-transform: none;
    line-height: var(--theme-leading-snug, 1.25);
}

/* One ledger table — six stacked parts (bat×2, bowl×2, xi×2). */
.ex-cricket-scorecard--ledger,
.ex-cricket-scorecard--ledger .ex-cricket-scorecard__ledger-wrap,
.ex-cricket-scorecard--ledger .ex-cricket-scorecard__ledger,
.ex-cricket-scorecard--ledger .ex-cricket-scorecard__ledger th,
.ex-cricket-scorecard--ledger .ex-cricket-scorecard__ledger td {
    border-radius: 0 !important;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__ledger-wrap {
    margin: 0;
    padding: 0;
    max-height: none !important;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__ledger {
    width: 100%;
    min-width: 36rem;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    font-size: var(--theme-type-caption-size, var(--theme-text-sm));
    color: var(--ex-runner-text, var(--ex-text));
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__ledger--paired .ex-cricket-scorecard__col--name {
    width: 18%;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__ledger--paired .ex-cricket-scorecard__col--num {
    width: 7%;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__col--name {
    width: 38%;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__col--num {
    width: 12%;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__col--note {
    width: 26%;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__part-head th {
    padding: var(--theme-space-2, 0.5rem) var(--theme-space-3, 0.75rem);
    background: var(--ex-surface-category-head);
    color: var(--ex-schedule-category-head-text, var(--ex-text-strong));
    border: 0;
    border-bottom: 1px solid var(--ex-schedule-category-head-border, var(--ex-border));
    font-family: var(--theme-font-sans);
    font-size: var(--theme-type-league-size);
    font-weight: var(--theme-type-league-weight);
    letter-spacing: var(--theme-type-league-tracking);
    text-transform: none;
    text-align: left;
    line-height: var(--theme-leading-snug, 1.25);
    vertical-align: middle;
    overflow: auto;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__part-head th > * {
    vertical-align: middle;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__part-title {
    margin-right: var(--theme-space-2, 0.5rem);
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__inning-total {
    float: right;
    color: inherit;
    font-size: var(--theme-type-team-size, var(--theme-text-md));
    font-weight: var(--theme-weight-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__side-title {
    margin-right: var(--theme-space-2, 0.5rem);
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__dismissal {
    display: block;
    color: var(--ex-muted);
    font-size: var(--theme-type-odds-size-liquidity, var(--theme-text-xs));
    font-weight: var(--theme-weight-regular, 400);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__col-head th {
    padding: 0.4rem 0.45rem;
    background: var(--ex-surface-subhead);
    color: var(--ex-text-strong);
    border: 1px solid color-mix(in srgb, var(--ex-border) 85%, transparent);
    border-top: 0;
    font-family: var(--theme-font-sans);
    font-size: var(--theme-type-label-size, var(--theme-text-sm));
    font-weight: var(--theme-type-label-weight, var(--theme-weight-semibold, 600));
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__col-head th:first-child {
    text-align: left;
    border-left: 0;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__col-head th:last-child {
    border-right: 0;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__part td {
    padding: 0.4rem 0.45rem;
    background: var(--ex-surface-row, var(--ex-surface));
    border: 1px solid color-mix(in srgb, var(--ex-border) 85%, transparent);
    color: var(--ex-text-strong);
    text-align: center;
    vertical-align: middle;
    line-height: var(--theme-leading-snug, 1.25);
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__part td:first-child {
    border-left: 0;
    text-align: left;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__part td:last-child {
    border-right: 0;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__part tr:not(.ex-cricket-scorecard__part-head):not(.ex-cricket-scorecard__col-head):nth-child(even) td {
    background: var(--ex-surface-row-alt, var(--ex-row-alt, var(--ex-surface-raised)));
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__part tr:not(.ex-cricket-scorecard__part-head):not(.ex-cricket-scorecard__col-head):hover td {
    background: var(--ex-surface-row-hover, var(--ex-surface-raised));
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__cell--name {
    font-weight: var(--theme-weight-semibold, 600);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__cell--num {
    font-variant-numeric: tabular-nums;
    font-weight: var(--theme-weight-semibold, 600);
    text-align: center;
    white-space: nowrap;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__cell--note {
    color: var(--ex-muted);
    font-size: var(--theme-type-odds-size-liquidity, var(--theme-text-xs));
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__empty-cell {
    color: var(--ex-muted);
    text-align: center;
    font-weight: var(--theme-weight-medium, 500);
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__part + .ex-cricket-scorecard__part .ex-cricket-scorecard__part-head th {
    border-top: 1px solid var(--ex-schedule-category-head-border, var(--ex-border));
}

/* Paired parts — left | right in one band; divider on away start. */
.ex-cricket-scorecard--ledger .ex-cricket-scorecard__col-head--teams th {
    text-transform: none;
    letter-spacing: var(--theme-type-league-tracking, 0);
    font-size: var(--theme-type-team-size, var(--theme-text-md));
    font-weight: var(--theme-type-team-weight, var(--theme-weight-semibold, 600));
    text-align: left;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__part--pair .ex-cricket-scorecard__side-away {
    border-left: 2px solid var(--ex-border) !important;
    text-align: left;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__part--pair .ex-cricket-scorecard__cell--note {
    text-align: left;
}

.ex-cricket-scorecard--ledger .ex-cricket-scorecard__cell--name {
    white-space: normal;
}

@media (max-width: 575.98px) {
    .ex-cricket-scorecard--ledger .ex-cricket-scorecard__ledger {
        min-width: 32rem;
        font-size: var(--theme-type-odds-size-liquidity, var(--theme-text-xs));
    }

    .ex-cricket-scorecard--ledger .ex-cricket-scorecard__part-head th,
    .ex-cricket-scorecard--ledger .ex-cricket-scorecard__col-head th,
    .ex-cricket-scorecard--ledger .ex-cricket-scorecard__part td {
        padding: 0.3rem 0.35rem;
    }

    .ex-cricket-scorecard--ledger .ex-cricket-scorecard__part-head th {
        font-size: var(--theme-type-team-size, var(--theme-text-md));
    }

    .ex-cricket-scorecard--ledger .ex-cricket-scorecard__inning-total {
        float: none;
        display: block;
        margin-top: 0.15rem;
    }

    .ex-cricket-scorecard--ledger .ex-cricket-scorecard__cell--note,
    .ex-cricket-scorecard--ledger .ex-cricket-scorecard__dismissal {
        white-space: normal;
        word-break: break-word;
    }
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__band {
    border-bottom: 1px solid color-mix(in srgb, var(--ex-border) 80%, transparent);
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__band-head {
    padding: var(--theme-space-2, 0.5rem) var(--theme-space-3, 0.75rem);
    background: var(--ex-surface-subhead);
    border-bottom: 1px solid var(--theme-match-list-columns-border, var(--ex-border));
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__band-title {
    margin: 0;
    color: var(--ex-text-strong);
    font-family: var(--theme-font-sans);
    font-size: var(--theme-type-label-size, var(--theme-text-sm));
    font-weight: var(--theme-type-label-weight, var(--theme-weight-semibold, 600));
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__pair:has(> :only-child) {
    grid-template-columns: 1fr;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--ex-border);
    background: var(--ex-surface-row, var(--ex-market-bg));
    box-shadow: none;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__col:last-child {
    border-right: 0;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__col + .ex-cricket-scorecard__col {
    border-left: 0;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__inning-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--theme-space-2, 0.5rem);
    margin: 0;
    padding: var(--theme-space-2, 0.5rem) var(--theme-space-3, 0.75rem);
    /* Home MATCH / column bar — not table-head (#F1F5F9). */
    background: var(--ex-surface-subhead);
    border-bottom: 1px solid var(--theme-match-list-columns-border, var(--ex-border));
    text-align: center;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__inning-head > div {
    text-align: center;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__eyebrow {
    display: block;
    margin-bottom: 0.1rem;
    color: var(--ex-muted);
    font-size: var(--theme-type-label-size, var(--theme-text-sm));
    font-weight: var(--theme-type-label-weight, var(--theme-weight-semibold, 600));
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__col-title {
    margin: 0;
    color: var(--ex-text-strong);
    font-size: var(--theme-type-team-size, var(--theme-text-md));
    font-weight: var(--theme-type-team-weight, var(--theme-weight-semibold, 600));
    line-height: var(--theme-leading-snug, 1.25);
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__inning-total {
    color: var(--ex-text-strong);
    font-size: var(--theme-type-team-size, var(--theme-text-md));
    font-weight: var(--theme-weight-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table-wrap {
    flex: 1 1 auto;
    margin: 0;
    max-height: none !important;
    overflow-x: auto;
    overflow-y: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Ordered data grid — fixed columns, cell borders, zebra rows. */
.ex-cricket-scorecard--paired .ex-cricket-scorecard__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--theme-type-caption-size, var(--theme-text-sm));
    color: var(--ex-runner-text, var(--ex-text));
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table--batting {
    --sc-name: 42%;
    --sc-num: 12%;
    --sc-note: 22%;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table--bowling {
    --sc-name: 40%;
    --sc-num: 15%;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table--batting .ex-cricket-scorecard__col--name {
    width: var(--sc-name);
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table--batting .ex-cricket-scorecard__col--num {
    width: var(--sc-num);
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table--batting .ex-cricket-scorecard__col--note {
    width: var(--sc-note);
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table--bowling .ex-cricket-scorecard__col--name {
    width: var(--sc-name);
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table--bowling .ex-cricket-scorecard__col--num {
    width: var(--sc-num);
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table thead th {
    padding: 0.4rem 0.45rem;
    /* Same surface as home MATCH / 1-X-2 column bar. */
    background: var(--ex-surface-subhead);
    color: var(--ex-text-strong);
    border: 1px solid var(--ex-border);
    border-top: 0;
    font-family: var(--theme-font-sans);
    font-size: var(--theme-type-label-size, var(--theme-text-sm));
    font-weight: var(--theme-type-label-weight, var(--theme-weight-semibold, 600));
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table thead th:first-child {
    text-align: left;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table thead th:first-child,
.ex-cricket-scorecard--paired .ex-cricket-scorecard__table tbody td:first-child {
    border-left: 0;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table thead th:last-child,
.ex-cricket-scorecard--paired .ex-cricket-scorecard__table tbody td:last-child {
    border-right: 0;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table tbody td {
    padding: 0.4rem 0.45rem;
    background: var(--ex-surface-row, var(--ex-surface));
    border: 1px solid color-mix(in srgb, var(--ex-border) 85%, transparent);
    color: var(--ex-text-strong);
    text-align: center;
    vertical-align: middle;
    line-height: 1.3;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table tbody td:first-child {
    text-align: left;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table tbody tr:last-child td {
    border-bottom: 0;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table tbody tr:nth-child(even) td {
    background: var(--ex-surface-row-alt, var(--ex-row-alt, var(--ex-surface-raised)));
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__table tbody tr:hover td {
    background: var(--ex-surface-row-hover, var(--ex-surface-raised));
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__cell--name {
    font-weight: var(--theme-weight-semibold, 600);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__cell--num {
    font-variant-numeric: tabular-nums;
    font-weight: var(--theme-weight-semibold, 600);
    text-align: center;
    white-space: nowrap;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__cell--note {
    color: var(--ex-muted);
    font-size: var(--theme-type-odds-size-liquidity, var(--theme-text-xs));
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-cricket-scorecard--paired .ex-cricket-scorecard__empty-cell {
    color: var(--ex-muted);
    text-align: center;
    font-weight: var(--theme-weight-medium, 500);
}

/* Playing XI — number | name | role grid rows */
.ex-match-detail-page .ex-cricket-xi {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ex-border) 80%, transparent);
    background: var(--ex-surface-row, var(--ex-market-bg));
}

.ex-match-detail-page .ex-cricket-xi__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
}

.ex-match-detail-page .ex-cricket-xi__col {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--ex-border);
    background: var(--ex-surface-row, var(--ex-market-bg));
    box-shadow: none;
}

.ex-match-detail-page .ex-cricket-xi__col:last-child {
    border-right: 0;
}

.ex-match-detail-page .ex-cricket-xi__col + .ex-cricket-xi__col {
    padding-left: 0;
    border-left: 0;
}

.ex-match-detail-page .ex-cricket-xi__team {
    margin: 0;
    padding: var(--theme-space-2, 0.5rem) var(--theme-space-3, 0.75rem);
    background: var(--ex-surface-subhead);
    border-bottom: 1px solid var(--theme-match-list-columns-border, var(--ex-border));
    color: var(--ex-text-strong);
    font-family: var(--theme-font-sans);
    font-size: var(--theme-type-label-size, var(--theme-text-sm));
    font-weight: var(--theme-type-label-weight, var(--theme-weight-semibold, 600));
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
}

.ex-match-detail-page .ex-cricket-xi__list {
    --xi-cols: 1.75rem minmax(0, 1fr) minmax(4rem, 7rem);
    counter-reset: xi-row;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ex-match-detail-page .ex-cricket-xi__row {
    counter-increment: xi-row;
    display: grid;
    grid-template-columns: var(--xi-cols);
    align-items: center;
    justify-items: center;
    gap: var(--theme-space-2, 0.5rem);
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ex-border) 80%, transparent);
    background: var(--ex-surface-row, var(--ex-surface));
    color: var(--ex-text-strong);
    font-size: var(--theme-type-caption-size, var(--theme-text-sm));
    line-height: var(--theme-leading-snug, 1.25);
}

.ex-match-detail-page .ex-cricket-xi__row:nth-child(even) {
    background: var(--ex-surface-row-alt, var(--ex-row-alt, var(--ex-surface-raised)));
}

.ex-match-detail-page .ex-cricket-xi__row:last-child {
    border-bottom: 0;
}

.ex-match-detail-page .ex-cricket-xi__row::before {
    content: counter(xi-row);
    color: var(--ex-muted);
    font-variant-numeric: tabular-nums;
    font-weight: var(--theme-weight-bold);
    font-size: var(--theme-text-xs);
    text-align: center;
}

.ex-match-detail-page .ex-cricket-xi__name {
    min-width: 0;
    justify-self: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--theme-weight-semibold, 600);
    text-align: left;
}

.ex-match-detail-page .ex-cricket-xi__meta {
    justify-self: center;
    color: var(--ex-muted);
    font-size: var(--theme-text-xs);
    text-align: center;
    white-space: nowrap;
}

.ex-match-detail-page .ex-cricket-xi__empty {
    margin: 0;
    padding: var(--theme-space-3, 0.75rem);
}

.ex-match-detail-page .ex-cricket-scorecard__prematch {
    padding: var(--theme-space-3, 0.75rem);
}

/* Hub / narrow: stack columns. */
.ex-cricket-scorecard--hub .ex-cricket-scorecard__pair,
.ex-cricket-scorecard--hub .ex-cricket-xi__grid {
    grid-template-columns: 1fr;
}

.ex-cricket-scorecard--hub .ex-cricket-scorecard__col + .ex-cricket-scorecard__col,
.ex-cricket-scorecard--hub .ex-cricket-xi__col + .ex-cricket-xi__col {
    border-left: 1px solid var(--ex-border);
}

@media (max-width: 991.98px) {
    .ex-cricket-scorecard--paired .ex-cricket-scorecard__pair,
    .ex-match-detail-page .ex-cricket-xi__grid {
        grid-template-columns: 1fr;
    }

    .ex-cricket-scorecard--paired .ex-cricket-scorecard__col,
    .ex-match-detail-page .ex-cricket-xi__col {
        border-right: 0;
        border-bottom: 1px solid var(--ex-border);
    }

    .ex-cricket-scorecard--paired .ex-cricket-scorecard__col:last-child,
    .ex-match-detail-page .ex-cricket-xi__col:last-child {
        border-bottom: 0;
    }
}

/*
 * Match detail header — same identity grammar on every screen
 * (date/time + Team1 v Team2), with fluid spacing by breakpoint.
 */
.exchange-app .ex-match-detail-page .ex-match-header--detail {
  min-height: 0;
  padding: clamp(0.4rem, 0.9vw, 0.65rem) clamp(0.5rem, 1.2vw, 0.85rem);
}

.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header__shell {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  max-width: min(52rem, 100%);
  margin-inline: auto;
  padding-inline: 2.25rem; /* room for back + favorite */
  text-align: center;
}

.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header__back {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--theme-radius-control, 6px);
  background: transparent;
  color: var(--ex-schedule-section-head-text, var(--ex-text-strong));
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header__back:hover,
.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header__back:focus-visible {
  color: var(--ex-schedule-section-head-text, var(--ex-text-strong));
  background: color-mix(in srgb, var(--ex-schedule-section-head-text, var(--ex-text-strong)) 12%, transparent);
  outline: none;
}

.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header__back svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke-width: 2.25;
}

.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header__shell .ex-event-favorite {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  transform: translateY(-50%);
}

.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  min-width: 0;
  text-align: center;
}

.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header__when {
  display: block;
  width: 100%;
  margin: 0;
  color: color-mix(in srgb, var(--ex-schedule-section-head-text, var(--ex-text-strong)) 72%, transparent);
  font-family: var(--theme-font-sans);
  font-size: var(--theme-text-xs, 0.6875rem);
  font-weight: var(--theme-weight-medium, 500);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 0.4rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-inline: 0;
  text-align: center;
  font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem));
  font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
  letter-spacing: var(--theme-type-league-tracking, 0);
  line-height: var(--theme-leading-snug, 1.25);
}

.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header__team {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(100%, 22rem);
}

.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header__vs {
  flex: 0 0 auto;
  opacity: 0.85;
}

.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header-details {
  justify-content: center;
  text-align: center;
  max-width: none;
  padding: 0;
  gap: 0.15rem 0.35rem;
  font-size: var(--theme-text-xs, 0.6875rem);
  line-height: 1.3;
}

.exchange-app .ex-match-detail-page .ex-match-header--detail .ex-match-header-details__live-badge {
  flex: 0 0 auto;
}

/* Fancy / Session titles — one row grammar, all screens */
.exchange-app .ex-match-detail-page .ex-match-detail-ledger .ex-indian-grid__market-title,
.exchange-app .ex-match-detail-page .ex-match-detail-ledger .ex-market--compact-detail .ex-market__header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.35rem;
}

.exchange-app .ex-match-detail-page .ex-match-detail-ledger .ex-indian-grid__market-title,
.exchange-app .ex-match-detail-page .ex-match-detail-ledger .ex-market__header .ex-market__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.75rem, 0.35vw + 0.7rem, 0.875rem);
  letter-spacing: 0.02em;
}

.ex-match-detail-page .ex-markets-wrap--unified .ex-inplay-group__head,
.ex-match-detail-page .ex-markets-wrap--unified .ex-markets-panel__title {
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
}

/* Option G: compact full-width scoreboard — no legacy half-width stream column. */
.ex-match-detail-page .ex-live-score-panel__hero:not(.ex-live-score-panel__hero--inline),
.ex-match-detail-page .ex-live-score-panel__hero.ex-live-score-panel__scoreboard--top {
    display: block;
    grid-template-columns: none;
    width: 100%;
    max-width: none;
    min-height: 0;
}

.ex-match-detail-page .ex-live-score-panel__hero-score,
.ex-match-detail-page .ex-live-score-panel__hero-score > .ex-premium-score {
    width: 100%;
    max-width: none;
}

@media (min-width: 992px) {
    .ex-match-detail-page .ex-live-score-panel__hero:not(.ex-live-score-panel__hero--inline) {
        min-height: 0;
    }

    .ex-match-detail-page .ex-live-score-panel__hero-stream {
        min-height: 0;
    }

    .ex-match-detail-page .ex-live-score-panel__hero-stream .ex-live-stream--hero .ex-live-stream__viewport {
        min-height: 12rem;
    }
}

.ex-match-detail-page .ex-live-score-panel--inline .ex-live-score-panel__hero,
.ex-match-detail-page .ex-live-score-panel__hero--inline {
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ─── Unified markets table (Match Odds + Sessions + Fancy) ───────────── */
.ex-live-score-panel + .ex-markets-unified {
    margin-top: 0;
}

.ex-markets-unified {
    margin-top: 0.5rem;
}

.ex-markets-unified:first-child {
    margin-top: 0;
}

.ex-markets-unified--stacked .ex-markets-wrap--unified {
    border-top: none;
    border-radius: 0 0 var(--ex-panel-radius, 10px) var(--ex-panel-radius, 10px);
    overflow: hidden;
}

/* Nested market groups — no extra card chrome; heads owned by categories.css */
.ex-markets-wrap--unified > .ex-inplay-group.ex-markets-group {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.ex-markets-wrap--unified > .ex-inplay-group.ex-markets-group + .ex-inplay-group.ex-markets-group {
    border-top: 1px solid var(--ex-border);
}

.ex-markets-unified--stacked .ex-markets-group + .ex-markets-group {
    border-top: 1px solid var(--ex-border);
}

.ex-live-score-panel--scoreboard-first:not(.ex-live-score-panel--cricket) .ex-live-score-panel__tabs {
    display: none;
}

.ex-live-score-panel--scoreboard-first:not(.ex-live-score-panel--cricket) .ex-live-score-panel__tab-content:not(:has(.tab-pane.show)) {
    display: none;
}

.ex-markets-wrap--unified {
    margin: 0;
    border: 1px solid var(--ex-border);
    border-top: none;
    border-radius: 0 0 var(--ex-panel-radius, 10px) var(--ex-panel-radius, 10px);
    overflow: hidden;
    background: var(--ex-surface);
    box-shadow: var(--ex-inplay-panel-shadow, var(--ex-shadow));
}

.ex-markets-tab-panels {
    position: relative;
    min-height: 0;
}

.ex-markets-tab-panel {
    display: none;
}

.ex-markets-tab-panel.is-active {
    display: block;
}

/* Legacy panel title kept for any leftover callers; prefer .ex-inplay-group__head */
.ex-markets-wrap--unified .ex-markets-panel__title {
    display: block;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    background: var(--ex-surface-category-head, var(--ex-schedule-category-head-bg));
    color: var(--ex-schedule-category-head-text, var(--ex-text-strong));
    border-bottom: 1px solid var(--ex-schedule-category-head-border, var(--ex-border));
    box-sizing: border-box;
}

.ex-markets-wrap--unified .ex-markets-panel__title-text {
    display: block;
    font-family: "Inter", var(--heading-font, sans-serif);
    font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
    letter-spacing: var(--theme-type-league-tracking, 0);
    line-height: 1.25;
    text-transform: none;
    color: inherit;
}

.ex-markets-unified .ex-markets-group {
    scroll-margin-top: 0;
}

.ex-markets-unified .ex-markets-group + .ex-markets-group {
    border-top: none;
}

.ex-markets-group__heading {
    margin: 0;
    padding: 0.375rem 0.75rem;
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ex-text-strong);
    background: var(--ex-market-header);
    border-bottom: 1px solid var(--ex-border);
}

.exchange-app h3.ex-markets-group__heading {
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 700;
    line-height: 1.25;
}

.ex-markets-group__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: left;
}

.ex-markets-group__toggle::after {
    content: "";
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--ex-muted);
    border-bottom: 2px solid var(--ex-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    margin-inline-end: 0.125rem;
}

.ex-markets-group__toggle:not(.collapsed)::after {
    transform: rotate(-135deg);
    margin-top: 0.25rem;
}

.ex-markets-group__toggle-label {
    flex: 1 1 auto;
}

.ex-markets-group__toggle-meta {
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ex-muted);
}

.ex-markets-wrap--unified .ex-market {
    margin-bottom: 0;
    border: none;
    border-top: 1px solid var(--ex-border);
    border-radius: 0;
    box-shadow: none;
}

.ex-markets-wrap--unified .ex-market:first-of-type {
    border-top: none;
}

.ex-markets-wrap--unified .ex-market + .ex-market {
    margin-top: 0;
}

.ex-markets-wrap--unified .ex-market--match-list {
    border: none;
    border-top: 1px solid var(--ex-border);
    border-radius: 0;
    box-shadow: none;
}

.ex-markets-wrap--unified .ex-market--match-list:first-of-type {
    border-top: none;
}

.ex-markets-wrap--unified .ex-market--match-list + .ex-market--match-list,
.ex-markets-wrap--unified .ex-market--match-list + .ex-market--indian:not(.ex-market--match-list) {
    margin-top: 0;
}

.ex-markets-section__empty--unified {
    min-height: 4.5rem;
    border: none;
    border-top: none;
    border-radius: 0;
    box-shadow: none;
}

.ex-markets-group--collapsible .collapse.show .ex-market:first-of-type {
    border-top: none;
}

.ex-markets-section__heading {
    margin: 0 0 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ex-text-strong);
    background: var(--ex-market-header);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-panel-radius, 6px) var(--ex-panel-radius, 6px) 0 0;
}

.exchange-app h3.ex-markets-section__heading {
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 700;
    line-height: 1.25;
}

.ex-markets-section__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin: 0 0 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ex-text-strong);
    background: var(--ex-market-header);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-panel-radius, 6px) var(--ex-panel-radius, 6px) 0 0;
    cursor: pointer;
    text-align: left;
}

.ex-markets-section__toggle::after {
    content: "";
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--ex-muted);
    border-bottom: 2px solid var(--ex-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    margin-inline-end: 0.125rem;
}

.ex-markets-section__toggle:not(.collapsed)::after {
    transform: rotate(-135deg);
    margin-top: 0.25rem;
}

.ex-markets-section__toggle-label {
    flex: 1 1 auto;
}

.ex-markets-section__toggle-meta {
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ex-muted);
}

.ex-markets-section--collapsible .ex-markets-section__toggle {
    margin-bottom: 0;
    border-radius: var(--ex-panel-radius, 6px);
}

.ex-markets-section--collapsible .ex-markets-section__toggle:not(.collapsed) {
    border-radius: var(--ex-panel-radius, 6px) var(--ex-panel-radius, 6px) 0 0;
}

.ex-markets-section--collapsible .collapse.show .ex-markets-wrap,
.ex-markets-section--collapsible .collapse.show .ex-fancy-wrap {
    margin-top: 0;
}

.ex-markets-section--collapsible .collapse.show .ex-markets-wrap > .ex-market:first-child,
.ex-markets-section--collapsible .collapse.show .ex-fancy-wrap > .ex-market:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
}

.ex-market__price-label {
    display: block;
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    line-height: 1.2;
}

.ex-market__price-hint {
    display: block;
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 500;
    color: var(--ex-muted);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ex-fancy-group__count {
    margin-inline-start: 0.375rem;
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 500;
    color: var(--ex-muted);
}

.ex-markets-section .ex-markets-wrap {
    margin-top: 0;
}

.ex-markets-section .ex-markets-wrap > .ex-market:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.ex-fancy-wrap .ex-market:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ─── Match header bar ───────────────────────────────────────────────────── */
.ex-match-header {
    background: var(--ex-market-header);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-panel-radius, 10px) var(--ex-panel-radius, 10px) 0 0;
    padding: 0.625rem 1rem;
    margin-bottom: 0;
}

.ex-match-header--centered {
    padding: 0.85rem 1rem 0.95rem;
}

.ex-match-header__shell {
    position: relative;
    display: flex;
    justify-content: center;
}

.ex-match-header__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
    gap: 0.5rem;
}

.ex-match-header--centered .ex-match-header__shell .ex-event-favorite {
    position: absolute;
    top: 0;
    right: 0;
    width: 2rem;
    height: 2rem;
}

.ex-match-header + .ex-live-score-panel {
    margin-top: 0;
    border-top: none;
    border-radius: 0 0 var(--ex-panel-radius, 10px) var(--ex-panel-radius, 10px);
}

.ex-match-header__title {
    color: var(--ex-text-strong);
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 600;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.exchange-app .ex-match-header__title.ex-page-head__title {
    /* 16px — denser than marketing 18; sits above league 14 */
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: var(--theme-weight-semibold, 600);
    color: var(--h-color);
}

.ex-match-header--centered .ex-match-header__title {
    padding-inline: 2.25rem;
}

.ex-match-header__volume {
    color: var(--ex-text-strong);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ex-match-header-details {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.2rem 0.35rem;
    width: 100%;
    max-width: 48rem;
    margin: 0;
    padding: 0 0.25rem;
    font-size: var(--theme-text-sm, 0.75rem);
    line-height: 1.45;
    color: var(--ex-muted);
    text-align: center;
}

.ex-match-header-details__format {
    color: var(--ex-text-strong);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ex-match-header-details__sep {
    color: var(--ex-muted);
    font-weight: 600;
    opacity: 0.7;
    user-select: none;
}

.ex-match-header-details__live {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ex-text-strong);
}

.ex-match-header-details [data-live-score-home-strip],
.ex-match-header-details [data-live-score-away-strip] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ex-text-strong);
}

@media (max-width: 575.98px) {
    .ex-match-header--centered {
        padding: 0.75rem 0.75rem 0.85rem;
    }

    .ex-match-header--centered .ex-match-header__title {
        font-size: var(--theme-text-lg-plus, 1rem);
        padding-inline: 2rem;
    }

    .ex-match-header-details {
        font-size: var(--theme-text-xs, 0.6875rem);
        gap: 0.15rem 0.3rem;
    }
}

.ex-form-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.15rem;
    border-radius: var(--theme-radius-chip, 4px);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    line-height: 1;
}

.ex-form-chip--w {
    background: rgba(34, 197, 94, 0.18);
    color: var(--bp-success-strong);
}

.ex-form-chip--l {
    background: rgba(239, 68, 68, 0.15);
    color: var(--bp-danger-strong);
}

.ex-form-chip--d {
    background: rgba(148, 163, 184, 0.2);
    color: var(--ex-muted);
}

/* ─── Live score + stream placeholder (match detail) ─────────────────────── */
.ex-live-score-panel {
    margin-top: 0.5rem;
    margin-bottom: 0;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-panel-radius, 10px);
    overflow: hidden;
    background: var(--ex-surface);
    box-shadow: var(--ex-inplay-panel-shadow, var(--ex-shadow));
}

.ex-markets-unified + #exchange-open-bets {
    margin-top: 0.5rem;
}

.ex-match-detail-page .ex-match-detail-ledger .ex-markets-unified + #exchange-open-bets {
    margin-top: 0;
}

.ex-match-detail-page .ex-event-summary > .ex-live-score-panel + .ex-match-detail-board {
    border-top: 1px solid color-mix(in srgb, var(--ex-border) 80%, transparent);
}

.ex-live-score-panel--cricket .ex-live-score-panel__tab-content > .tab-pane {
    min-height: 0;
}

.ex-live-score-panel__tabs {
    flex-wrap: nowrap;
    border-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ex-live-score-panel__tabs::-webkit-scrollbar {
    display: none;
}

.ex-live-score-panel__tab-text--short {
    display: none;
}

.ex-live-score-panel__tab-text--long {
    display: inline;
}

.ex-live-score-panel__tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ex-live-score-panel__tab-icon svg {
    width: 14px;
    height: 14px;
}

.ex-live-score-panel__tabs-spacer {
    flex: 1 1 auto;
    list-style: none;
}

.ex-live-score-panel__tabs-badge {
    list-style: none;
    flex-shrink: 0;
    padding: 0.2rem 0.35rem;
    margin: 0.35rem 0.25rem 0.35rem 0;
    border-radius: var(--theme-radius-pill, 999px);
    background: color-mix(in srgb, var(--color-warning) 18%, transparent);
    color: var(--color-warning);
    font-size: var(--theme-text-xs, 0.6875rem);
    line-height: 1;
}

.ex-live-score-panel__scoreboard--top {
    border-bottom: 1px solid color-mix(in srgb, var(--ex-border) 80%, var(--bp-black));
    border-top: none;
}

/* Premium scoreboard (example layout) */
.ex-premium-score .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ex-premium-score {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--ex-surface-nested, var(--theme-bg-sunken, #14181f)) !important;
    color: var(--ex-text-strong, var(--bp-slate-50));
}

/* Inline punter pulse — score · rates · this-over · crease above markets */
.ex-premium-score--inline {
    background: var(--ex-surface-row, var(--ex-surface)) !important;
    color: var(--ex-text-strong);
    border-radius: 0;
    box-shadow: none;
}

.ex-inline-pulse__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 1.75rem;
    padding: 0.28rem 0.4rem;
    background: var(--ex-surface-subhead);
    color: var(--ex-text-strong);
    border-bottom: 1px solid var(--theme-match-list-columns-border, var(--ex-border));
}

.ex-inline-pulse__head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
}

.ex-one-click-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ex-text-strong, var(--theme-text-strong));
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: 11px;
    font-weight: var(--theme-type-badge-weight, var(--theme-weight-semibold, 600));
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

.ex-one-click-toggle:hover,
.ex-one-click-toggle.is-on {
    color: var(--ex-text-strong, var(--theme-text-strong));
    border: 0;
    background: transparent;
}

.ex-one-click-toggle__label {
    flex: 0 0 auto;
}

.ex-one-click-toggle__box {
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    border: 1.75px solid var(--bp-slate-400, #94a3b8);
    border-radius: 0.22rem;
    /* Off — empty gray checkbox (real unchecked feel) */
    background: var(--ex-surface, var(--theme-bg-elevated, transparent));
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

html.theme-dark .ex-one-click-toggle__box,
.theme-dark .ex-one-click-toggle__box {
    border-color: var(--bp-slate-500, #64748b);
    background: var(--ex-surface, var(--theme-bg-elevated, transparent));
}

.ex-one-click-toggle.is-on .ex-one-click-toggle__box {
    border-color: var(--theme-primary, #DD3E42);
    background: var(--theme-primary, #DD3E42);
}

.ex-one-click-toggle.is-on .ex-one-click-toggle__box::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 0.28rem;
    height: 0.52rem;
    margin: 0;
    border: solid var(--theme-icon-on-brand, var(--bp-white, #FFFFFF));
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.ex-one-click-toggle__track,
.ex-one-click-toggle__thumb,
.ex-one-click-toggle__state {
    display: none !important;
}

.ex-one-click-toggle--on-dark {
    border: 0;
    background: transparent;
    color: color-mix(in srgb, #fff 82%, transparent);
}

.ex-one-click-toggle--on-dark:hover {
    color: #fff;
}

.ex-one-click-toggle--on-dark.is-on {
    color: #fff;
    border: 0;
    background: transparent;
}

.ex-one-click-toggle--on-dark .ex-one-click-toggle__box {
    border-color: var(--bp-slate-500, #64748b);
    background: transparent;
}

.ex-one-click-toggle--on-dark.is-on .ex-one-click-toggle__box {
    border-color: var(--theme-primary, #DD3E42);
    background: var(--theme-primary, #DD3E42);
}

@media (max-width: 991.98px) {
    .exchange-app .ex-one-click-toggle,
    .exchange-app .ex-inline-pulse__head .ex-one-click-toggle,
    .exchange-app .ex-match-detail-page .ex-one-click-toggle {
        gap: 0.4rem;
        min-height: 0;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 11px;
        letter-spacing: 0.03em;
        line-height: 1.2;
    }

    .exchange-app .ex-one-click-toggle__label {
        font-size: inherit;
        line-height: inherit;
    }
}

.ex-inline-pulse__title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.ex-inline-pulse__title {
    min-width: 0;
    overflow: hidden;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-inline-pulse__chip {
    display: none;
}

.ex-inline-pulse__live {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--theme-primary);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ex-inline-pulse__when {
    flex: 0 0 auto;
    opacity: 0.8;
    font-size: var(--theme-type-caption-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-weight-medium, 500);
    font-variant-numeric: tabular-nums;
}

.ex-inline-pulse__score {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    padding: 0.4rem;
    background: var(--ex-surface-row, var(--ex-surface));
}

.ex-inline-pulse__team {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

.ex-inline-pulse__team--away {
    justify-content: flex-end;
    text-align: right;
}

.ex-inline-pulse__team.is-batting .ex-inline-pulse__line {
    color: var(--theme-primary, #DD3E42);
}

.ex-inline-pulse__code {
    flex: 0 0 auto;
    color: var(--ex-muted);
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-semibold, 600);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ex-inline-pulse__line {
    min-width: 0;
    overflow: hidden;
    color: var(--ex-text-strong);
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-team-size, var(--theme-text-md, 0.8125rem));
    font-weight: var(--theme-type-team-weight, var(--theme-weight-semibold, 600));
    font-variant-numeric: tabular-nums;
    line-height: var(--theme-leading-snug, 1.25);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-inline-pulse__bat-tag {
    color: var(--theme-primary, #DD3E42);
    font-size: 0.5rem;
    line-height: 1;
}

.ex-inline-pulse__rates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.85rem;
    padding: 0.15rem 0.4rem 0.4rem;
    color: var(--ex-muted);
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-caption-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-weight-medium, 500);
    background: var(--ex-surface-row, var(--ex-surface));
}

.ex-inline-pulse__rate strong {
    color: var(--ex-text-strong);
    font-weight: var(--theme-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
}

.ex-inline-pulse__rate--rrr strong {
    color: var(--theme-primary, #DD3E42);
}

.ex-inline-pulse__note {
    flex: 1 1 10rem;
    min-width: 0;
    overflow: hidden;
    font-weight: var(--theme-weight-semibold, 600);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-inline-pulse__over {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.2rem 0.4rem;
    border-top: 1px solid var(--theme-match-list-columns-border, var(--ex-border));
    background: var(--ex-surface-subhead);
}

.ex-inline-pulse__over-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    flex: 0 0 auto;
    color: var(--ex-muted);
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-semibold, 600);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ex-inline-pulse__over-label strong {
    color: var(--ex-text-strong);
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: var(--theme-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
}

.ex-inline-pulse__balls {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
    overflow: hidden;
}

.ex-inline-pulse__balls .ex-dlx-ball {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    font-size: 0.625rem;
}

.ex-inline-pulse__session {
    margin-left: auto;
    color: var(--ex-muted);
    font-size: var(--theme-type-caption-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-weight-medium, 500);
    white-space: nowrap;
}

.ex-inline-pulse__session strong {
    color: var(--ex-text-strong);
    font-weight: var(--theme-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
}

.ex-inline-pulse__crease {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    padding: 0.35rem 0.4rem 0.45rem;
    border-top: 1px solid color-mix(in srgb, var(--ex-border) 80%, transparent);
    background: var(--ex-surface-row, var(--ex-surface));
}

.ex-inline-pulse__batter {
    display: inline-flex;
    align-items: baseline;
    gap: 0.28rem;
    color: var(--ex-text-strong);
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-caption-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-weight-medium, 500);
    white-space: nowrap;
}

.ex-inline-pulse__batter-name {
    max-width: 9rem;
    overflow: hidden;
    font-weight: var(--theme-weight-semibold, 600);
    text-overflow: ellipsis;
}

.ex-inline-pulse__batter strong {
    font-weight: var(--theme-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
}

.ex-inline-pulse__batter span {
    color: var(--ex-muted);
}

.ex-inline-pulse__batter--toss {
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    white-space: normal;
}

html.theme-dark .exchange-app .ex-inline-pulse__head,
.theme-dark .exchange-app .ex-inline-pulse__head {
    background: var(--ex-surface-subhead);
    color: var(--ex-text-strong);
    border-bottom-color: var(--theme-match-list-columns-border, var(--ex-border));
}

@media (max-width: 575.98px) {
    .ex-inline-pulse__score {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        padding-inline: 0.4rem;
    }

    .ex-inline-pulse__team,
    .ex-inline-pulse__team--away {
        justify-content: flex-start;
        text-align: left;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .ex-inline-pulse__head {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.35rem 0.65rem;
        min-height: 0;
        height: auto;
    }

    .ex-inline-pulse__title-wrap {
        flex: 1 1 100%;
        max-width: 100%;
        flex-wrap: wrap;
        row-gap: 0.15rem;
    }

    .ex-inline-pulse__head-actions {
        flex: 1 1 100%;
        width: 100%;
        justify-content: flex-start;
        order: 2;
    }

    .ex-inline-pulse__when {
        display: block;
        width: 100%;
        white-space: normal;
        word-break: break-word;
        line-height: 1.3;
    }

    .ex-inline-pulse__title {
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
        word-break: break-word;
        line-height: 1.25;
    }

    .ex-inline-pulse__line {
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
        word-break: break-word;
        font-size: var(--theme-type-team-size, var(--theme-text-md, 0.8125rem));
    }

    .ex-inline-pulse__note {
        flex: 1 1 100%;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
        word-break: break-word;
    }

    .ex-inline-pulse__over {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.3rem;
        padding-block: 0.18rem;
    }

    .ex-inline-pulse__over-label {
        white-space: nowrap;
    }

    .ex-inline-pulse__balls {
        flex-wrap: nowrap;
        width: auto;
        min-width: 0;
        overflow: hidden;
    }

    .ex-inline-pulse__balls .ex-dlx-ball {
        width: 1.125rem;
        height: 1.125rem;
        min-width: 1.125rem;
        font-size: 0.5625rem;
    }

    .ex-inline-pulse__session {
        margin-left: auto;
        width: auto;
        max-width: 40%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ex-inline-pulse__batter,
    .ex-inline-pulse__batter-name {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        word-break: break-word;
    }

    .ex-inline-pulse__head,
    .ex-inline-pulse__rates,
    .ex-inline-pulse__over,
    .ex-inline-pulse__crease {
        padding-inline: 0.4rem;
    }
}

@media (max-width: 991.98px) and (min-width: 576px) {
    /* Tablet portrait: keep 2-col scores but never clip text */
    .ex-inline-pulse__title,
    .ex-inline-pulse__line,
    .ex-inline-pulse__note {
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
        word-break: break-word;
    }

    .ex-inline-pulse__balls {
        flex-wrap: wrap;
    }

    .ex-inline-pulse__session {
        white-space: normal;
    }
}

.ex-premium-score__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    /* Home table/group header surface */
    background: var(--ex-surface-category-head, #2A3446);
    color: var(--ex-schedule-category-head-text, #EEEEEE);
    border-bottom: 1px solid var(--ex-schedule-category-head-border, #3A4558);
}

.ex-premium-score__title {
    min-width: 0;
    font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
    letter-spacing: var(--theme-type-league-tracking, 0);
    text-transform: none;
    line-height: 1.25;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ex-premium-score__when {
    flex-shrink: 0;
    color: inherit;
    opacity: 0.82;
    font-size: var(--theme-type-caption-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-weight-medium, 500);
    font-variant-numeric: tabular-nums;
}

.ex-premium-score__accent {
    display: none;
}

.ex-premium-score__brand {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.75rem;
    /* Home MATCH / 1-X-2 subhead surface */
    background: var(--ex-surface-subhead, #1E293B);
    border-bottom: 1px solid var(--theme-match-list-columns-border, #2A3446);
    color: var(--ex-text-strong, #F1F5F9);
}

.ex-premium-score__premium {
    color: var(--bp-slate-200);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.08em;
}

.ex-premium-score__new {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.35rem;
    border-radius: var(--theme-radius-chip, 4px);
    background: var(--bp-slate-600);
    color: var(--bp-slate-50);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.04em;
}

.ex-premium-score__sport {
    margin-left: 0.25rem;
    color: var(--bp-slate-400);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ex-premium-score__big-score {
    display: block;
    margin-top: 0.35rem;
    color: var(--bp-white);
    font-size: clamp(var(--theme-text-3xl, 1.5rem), 3vw, 2rem);
    font-weight: var(--theme-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.ex-premium-score__side--other .ex-premium-score__big-score {
    text-align: right;
}

.ex-premium-score__inn-badge--upcoming {
    background: var(--bp-slate-600);
}

.ex-premium-score__hint {
    margin: 0;
    padding: 0.45rem 0.9rem 0.75rem;
    color: var(--bp-slate-400);
    font-size: var(--theme-text-xs, 0.6875rem);
    text-align: center;
}

.ex-premium-score--sports .ex-premium-score__main {
    padding-bottom: 1rem;
}

.ex-premium-score--sports .ex-premium-score__line {
    font-size: clamp(var(--theme-text-xl-plus, 1.125rem), 2.6vw, var(--theme-text-3xl, 1.5rem));
}

.ex-premium-score__clock-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.4rem;
    margin: 0.2rem 0 0.15rem;
    color: var(--bp-slate-200, #e2e8f0);
    font-family: var(--theme-font-sans);
    font-size: clamp(0.75rem, 0.4vw + 0.7rem, 0.875rem);
    font-weight: var(--theme-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.ex-premium-score__period {
    display: inline-flex;
    align-items: center;
    min-height: 1.15rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--theme-radius-chip, 4px);
    background: color-mix(in srgb, var(--theme-primary, #dd3e42) 85%, #000);
    color: var(--bp-white, #fff);
    font-size: 0.625rem;
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ex-premium-score__format {
    display: inline-flex;
    align-items: center;
    min-height: 1.15rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--theme-radius-chip, 4px);
    background: color-mix(in srgb, var(--bp-slate-500, #64748b) 55%, transparent);
    color: var(--bp-slate-100, #f1f5f9);
    font-size: 0.625rem;
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.ex-premium-score__minute,
.ex-premium-score__points {
    font-variant-numeric: tabular-nums;
}

.ex-premium-score__points {
    color: var(--theme-primary, #f87171);
    font-weight: var(--theme-weight-bold, 700);
}

.ex-premium-score__sets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.35rem;
    margin-top: 0.25rem;
}

.ex-premium-score__set {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.15rem;
    min-height: 1.35rem;
    padding: 0.12rem 0.4rem;
    border: 1px solid color-mix(in srgb, var(--bp-white) 22%, transparent);
    border-radius: var(--theme-radius-chip, 4px);
    background: color-mix(in srgb, var(--bp-white) 8%, transparent);
    color: var(--bp-slate-100, #f1f5f9);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.ex-premium-score__set.is-current {
    border-color: color-mix(in srgb, var(--theme-primary, #dd3e42) 80%, #fff);
    color: #fff;
    background: color-mix(in srgb, var(--theme-primary, #dd3e42) 55%, transparent);
}

@media (max-width: 575.98px) {
    .ex-premium-score--sports .ex-premium-score__main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 0.4rem 0.45rem;
        padding: 0.65rem 0.55rem 0.55rem;
    }

    .ex-premium-score--sports .ex-premium-score__team {
        font-size: var(--theme-text-sm, 0.75rem);
    }

    .ex-premium-score--sports .ex-premium-score__big-score {
        font-size: clamp(1.15rem, 4vw, 1.5rem);
    }
}

.ex-premium-score__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem 0.85rem;
    padding: 0.85rem 0.9rem 0.7rem;
}

.ex-premium-score__side {
    min-width: 0;
}

.ex-premium-score__side--other {
    text-align: right;
}

.ex-premium-score__team {
    display: block;
    color: var(--bp-white);
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: var(--theme-weight-bold, 700);
    line-height: 1.2;
    word-break: break-word;
}

.ex-premium-score__crr {
    display: block;
    margin-top: 0.25rem;
    color: var(--bp-slate-400);
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ex-premium-score__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

.ex-premium-score__inn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
    padding: 0.18rem 0.55rem;
    border-radius: var(--theme-radius-odds, 0);
    background: var(--ex-surface-category-head, #3f4b63);
    color: var(--ex-schedule-category-head-text, var(--bp-slate-50));
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ex-premium-score__inn-badge .ex-live-dot {
    background: var(--bp-slate-300) !important;
    border-color: var(--bp-slate-400) !important;
    box-shadow: none !important;
    animation: none !important;
}

.ex-premium-score__line {
    color: var(--bp-white);
    font-size: clamp(var(--theme-text-lg-plus, 1rem), 2.2vw, var(--theme-text-xl-plus, 1.125rem));
    font-weight: var(--theme-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.ex-premium-score__summary {
    margin: 0.35rem 0 0;
    max-width: 22rem;
    color: var(--bp-slate-300);
    font-size: var(--theme-text-xs, 0.6875rem);
    line-height: 1.35;
}

.ex-premium-score__extras .ex-dlx-session-row,
.ex-premium-score__extras .ex-dlx-live__balls,
.ex-premium-score__extras .ex-dlx-live__crease {
    background: var(--bp-alpha-ink-35);
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    color: var(--bp-slate-200);
}

.ex-premium-score__extras .ex-dlx-live__batter,
.ex-premium-score__extras .ex-dlx-this-over__meta strong {
    color: var(--bp-slate-50);
}

.ex-premium-score__chart-block {
    padding: 0.35rem 0.55rem 0.15rem;
    border-top: 1px solid var(--theme-match-list-columns-border, color-mix(in srgb, var(--ex-border) 55%, transparent));
    background: var(--ex-surface-row, var(--theme-bg-market, #10151c));
}

.ex-premium-score__chart-block.is-collapsed {
    display: none;
}

.ex-premium-score__chart-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.ex-premium-score__inns {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.ex-premium-score__inn-btn {
    max-width: 100%;
    padding: 0.22rem 0.55rem;
    border: 1px solid rgba(226, 232, 240, 0.35);
    border-radius: var(--theme-radius-pill, 999px);
    background: transparent;
    color: var(--bp-slate-200);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.ex-premium-score__inn-btn.is-active {
    border-color: transparent;
    background: var(--bp-brand-mark-red);
    color: var(--bp-white);
}

/* Light mode: white-on-magenta fails at 10px — use dark ink on soft red */
html.theme-light .exchange-app .ex-premium-score__inn-btn.is-active {
    background: color-mix(in srgb, var(--bp-brand-mark-red) 16%, var(--bp-white));
    color: var(--bp-danger-strong);
    border-color: color-mix(in srgb, var(--bp-brand-mark-red) 42%, var(--bp-slate-300));
}

.ex-premium-score__chart-title {
    color: var(--bp-slate-50);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.08em;
    text-align: center;
}

.ex-premium-score__modes {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.ex-premium-score__mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 0;
    border-radius: var(--theme-radius-chip, 4px);
    background: transparent;
    color: var(--bp-slate-500);
    cursor: pointer;
}

.ex-premium-score__mode-btn svg {
    width: 0.9rem;
    height: 0.9rem;
}

.ex-premium-score__mode-btn.is-active {
    color: var(--bp-brand-mark-red);
}

.ex-premium-score__collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.35rem;
    border: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    background: #10151c;
    color: var(--bp-brand-mark-red);
    cursor: pointer;
}

.ex-premium-score__collapse svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.18s ease;
}

.ex-premium-score__collapse.is-collapsed svg {
    transform: rotate(180deg);
}

.ex-match-chart--premium {
    padding: 0.15rem 0.25rem 0.35rem;
    min-height: 10rem;
    background: transparent;
}

/* Premium scoreboard already has Graph/Bar controls in its toolbar. */
.ex-premium-score__chart-block .ex-match-chart__modes {
    display: none;
}

.ex-match-chart--premium .ex-match-chart__canvas-wrap {
    height: 11rem;
}

.ex-match-chart--premium .ex-match-chart__empty {
    min-height: 9rem;
    color: var(--bp-slate-400);
}

.ex-match-chart--premium .ex-match-chart__empty-title {
    color: var(--bp-slate-200);
}

.ex-match-chart--premium .ex-match-chart__legend {
    display: none !important;
}

html.theme-light .exchange-app .ex-premium-score {
    background: var(--ex-surface-nested, var(--theme-bg-sunken, var(--ex-surface-row))) !important;
    color: var(--ex-text-strong, var(--bp-slate-900));
}

html.theme-light .exchange-app .ex-premium-score__top {
    background: var(--ex-surface-category-head, #D5DCE6);
    color: var(--ex-schedule-category-head-text, #000000);
    border-bottom-color: var(--ex-schedule-category-head-border, #C3CBD6);
}

html.theme-light .exchange-app .ex-premium-score__brand {
    background: var(--ex-surface-subhead, #E2E8F0);
    border-bottom-color: var(--theme-match-list-columns-border, #CBD5E1);
    color: var(--ex-text-strong, #000000);
}

html.theme-light .exchange-app .ex-premium-score__premium {
    color: var(--ex-text-strong, #000000);
}

html.theme-light .exchange-app .ex-premium-score__team,
html.theme-light .exchange-app .ex-premium-score__line {
    color: var(--bp-slate-900);
}

html.theme-light .exchange-app .ex-premium-score__big-score {
    color: var(--bp-slate-900);
}

html.theme-light .exchange-app .ex-premium-score__sport,
html.theme-light .exchange-app .ex-premium-score__hint {
    color: var(--ex-muted, #64748B);
}

html.theme-dark .exchange-app .ex-premium-score__top {
    background: var(--ex-surface-category-head, #2A3446);
    color: var(--ex-schedule-category-head-text, #EEEEEE);
    border-bottom-color: var(--ex-schedule-category-head-border, #3A4558);
}

html.theme-dark .exchange-app .ex-premium-score__brand {
    background: var(--ex-surface-subhead, #1E293B);
    border-bottom-color: var(--theme-match-list-columns-border, #2A3446);
    color: var(--bp-slate-100, #F1F5F9);
}

html.theme-dark .exchange-app .ex-premium-score__premium,
html.theme-dark .exchange-app .ex-premium-score__sport {
    color: var(--bp-slate-100, #F1F5F9);
}

html.theme-light .exchange-app .ex-premium-score__crr,
html.theme-light .exchange-app .ex-premium-score__summary {
    color: var(--bp-slate-500);
}

html.theme-light .exchange-app .ex-premium-score__inn-badge {
    background: var(--ex-surface-category-head, var(--bp-slate-600));
    color: var(--ex-schedule-category-head-text, var(--bp-slate-50));
}

html.theme-light .exchange-app .ex-premium-score__chart-block,
html.theme-light .exchange-app .ex-premium-score__collapse {
    background: var(--bp-slate-100);
    border-top-color: var(--bp-slate-300);
}

html.theme-light .exchange-app .ex-premium-score__chart-title {
    color: var(--bp-slate-900);
}

html.theme-light .exchange-app .ex-premium-score__inn-btn {
    border-color: var(--bp-slate-400);
    color: var(--bp-slate-800);
    background: var(--bp-white);
}

@media (max-width: 767.98px) {
    .ex-premium-score__main {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ex-premium-score__side--other,
    .ex-premium-score__side {
        text-align: center;
    }

    .ex-premium-score__chart-toolbar {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .ex-premium-score__inns,
    .ex-premium-score__modes {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .ex-match-chart--premium .ex-match-chart__canvas-wrap {
        height: 9.5rem;
    }
}

/* Hero: full score details (legacy split with stream) */
.ex-live-score-panel__hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
    min-height: 22rem;
    overflow: hidden;
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-control, 8px);
    box-shadow: 0 1px 2px var(--bp-alpha-ink-06);
}

/* Inline betting: scoreboard only — no stream column */
.ex-live-score-panel__hero--inline,
.ex-live-score-panel--inline .ex-live-score-panel__hero {
    display: block;
    grid-template-columns: none;
    min-height: 0;
}

@media (min-width: 992px) {
    .ex-live-score-panel__hero:not(.ex-live-score-panel__hero--inline) {
        min-height: 28rem;
    }
}

.ex-live-score-panel__hero-score {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--ex-surface-nested, var(--theme-bg-sunken, #14181f));
    color: var(--ex-text-strong, var(--bp-slate-50));
}

.ex-live-score-panel__hero--inline .ex-live-score-panel__hero-score,
.ex-live-score-panel--inline .ex-live-score-panel__hero-score {
    background: color-mix(in srgb, var(--ex-surface-head, #E8EDF3) 55%, var(--ex-surface, #fff));
    color: var(--ex-text-strong, #0F172A);
}

.ex-live-score-panel__hero-score > .ex-premium-score {
    flex: 1 1 auto;
    height: 100%;
}

.ex-live-score-panel__hero--inline .ex-live-score-panel__hero-score > .ex-premium-score,
.ex-live-score-panel--inline .ex-live-score-panel__hero-score > .ex-premium-score {
    height: auto;
}

.ex-live-score-panel__hero-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    padding: 0.55rem 0.75rem;
    background: linear-gradient(
        180deg,
        #5b6b7f 0%,
        var(--bp-slate-600) 48%,
        var(--bp-slate-700) 100%
    );
    border-bottom: 1px solid color-mix(in srgb, var(--bp-slate-400) 28%, transparent);
}

.ex-live-score-panel__hero-status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    min-width: 0;
}

.ex-live-score-panel__hero-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    min-width: 0;
}

.ex-live-score-panel__hero .ex-live-score-panel__clock {
    color: var(--bp-slate-50);
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 600;
}

.ex-live-score-panel__hero .ex-live-score-panel__live-tag {
    color: var(--bp-slate-200);
}

.ex-live-score-panel__hero .ex-live-score-panel__live-tag .ex-live-dot {
    background: var(--bp-slate-300);
    border-color: var(--bp-slate-400);
    box-shadow: none;
}

.ex-live-score-panel__hero .ex-live-score-panel__clock-tag {
    color: var(--bp-slate-300);
}

.ex-live-score-panel__hero .ex-live-score-panel__format,
.ex-live-score-panel__hero .ex-live-score-panel__competition {
    max-width: none;
    color: var(--bp-slate-300);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ex-live-score-panel__hero .ex-dlx-live:not(.ex-premium-score) {
    flex: 1 1 auto;
    background: transparent;
}

.ex-live-score-panel__hero .ex-premium-score {
    flex: 1 1 auto;
    background: var(--ex-surface-nested, var(--theme-bg-sunken, #14181f));
    color: var(--ex-text-strong, var(--bp-slate-50));
}

.ex-live-score-panel__hero .ex-dlx-live__table-wrap {
    background: transparent;
}

.ex-live-score-panel__hero .ex-dlx-live__table thead th {
    background: color-mix(in srgb, var(--bp-slate-900) 35%, transparent);
    border-bottom-color: color-mix(in srgb, var(--bp-slate-400) 22%, transparent);
    color: var(--bp-slate-400);
}

.ex-live-score-panel__hero .ex-dlx-live__table tbody th,
.ex-live-score-panel__hero .ex-dlx-live__table tbody td {
    border-bottom-color: color-mix(in srgb, var(--bp-slate-400) 16%, transparent);
    color: var(--bp-slate-50);
}

.ex-live-score-panel__hero .ex-dlx-live__num {
    color: var(--bp-slate-50);
}

.ex-live-score-panel__hero .ex-dlx-live__row--batting {
    background: color-mix(in srgb, var(--bp-slate-400) 14%, transparent);
}

.ex-live-score-panel__hero .ex-dlx-live__row--batting .ex-dlx-live__num {
    color: var(--bp-slate-100);
}

.ex-live-score-panel__hero .ex-dlx-session-row,
.ex-live-score-panel__hero .ex-dlx-live__balls,
.ex-live-score-panel__hero .ex-dlx-live__crease,
.ex-live-score-panel__hero .ex-dlx-live__note,
.ex-live-score-panel__hero .ex-dlx-live__foot {
    background: color-mix(in srgb, var(--bp-slate-900) 28%, transparent);
    border-top-color: color-mix(in srgb, var(--bp-slate-400) 18%, transparent);
    color: var(--bp-slate-200);
}

.ex-live-score-panel__hero .ex-dlx-live__batter,
.ex-live-score-panel__hero .ex-dlx-live__foot strong,
.ex-live-score-panel__hero .ex-dlx-this-over__meta strong {
    color: var(--bp-slate-50);
}

.ex-live-score-panel__hero .ex-dlx-ball {
    --ex-ball-fill: color-mix(in srgb, var(--ex-ball-hue) var(--ex-ball-fill-strength, 72%), transparent);
    --ex-ball-edge: color-mix(in srgb, var(--ex-ball-hue) var(--ex-ball-edge-strength, 55%), transparent);
    --ex-ball-ink: var(--ex-ball-ink-on, #fff);
}

.ex-live-score-panel__hero .ex-dlx-ball--dot {
    --ex-ball-fill-strength: 40%;
    --ex-ball-edge-strength: 45%;
    --ex-ball-ink: var(--bp-slate-200);
}

.ex-live-score-panel__hero .ex-dlx-ball--pending {
    --ex-ball-fill-strength: 18%;
    --ex-ball-edge-strength: 40%;
    --ex-ball-ink: var(--bp-slate-300);
    border-style: dashed;
    opacity: 0.9;
}

.ex-live-score-panel__hero-sports {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem 1rem;
}

.ex-live-score-panel__hero-teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
}

.ex-live-score-panel__hero-team {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.ex-live-score-panel__hero-team--away {
    align-items: flex-end;
    text-align: right;
}

.ex-live-score-panel__hero-team .ex-live-score-panel__team-name {
    color: var(--bp-slate-50);
    font-size: var(--theme-text-base, 0.875rem);
}

.ex-live-score-panel__hero-team .ex-live-score-panel__score {
    min-width: 2.5rem;
    padding: 0.2rem 0.45rem;
    background: color-mix(in srgb, var(--bp-slate-50) 12%, transparent);
    border-color: color-mix(in srgb, var(--bp-slate-50) 22%, transparent);
    color: var(--bp-slate-50);
    font-size: var(--theme-text-xl-plus, 1.125rem);
}

.ex-live-score-panel__hero-vs {
    color: var(--bp-slate-400);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ex-live-score-panel__hero .ex-live-score-panel__scorecard-hint {
    margin: 0;
    color: var(--bp-slate-400);
    font-size: var(--theme-text-xs, 0.6875rem);
}

.ex-live-score-panel__hero-stream {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 22rem;
    background: var(--bp-slate-900);
    border-left: 1px solid color-mix(in srgb, var(--bp-slate-400) 22%, transparent);
}

.ex-live-score-panel__hero-stream .ex-live-stream-slot--hero,
.ex-live-score-panel__hero-stream .ex-live-stream--hero {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ex-live-score-panel__hero-stream .ex-live-stream--hero .ex-live-stream__viewport {
    flex: 1 1 auto;
    aspect-ratio: auto;
    max-height: none;
    min-height: 18rem;
    height: 100%;
    background: linear-gradient(
        145deg,
        var(--bp-slate-800) 0%,
        var(--bp-slate-900) 48%,
        var(--bp-slate-700) 100%
    );
}

@media (min-width: 992px) {
    .ex-live-score-panel__hero-stream {
        min-height: 28rem;
    }

    .ex-live-score-panel__hero-stream .ex-live-stream--hero .ex-live-stream__viewport {
        min-height: 24rem;
    }
}

html.theme-light .exchange-app .ex-live-score-panel__hero {
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

html.theme-light .exchange-app .ex-live-score-panel__hero-score {
    background: var(--bp-slate-50);
    color: var(--ex-text-strong);
}

html.theme-light .exchange-app .ex-live-score-panel__hero-head {
    background: linear-gradient(
        180deg,
        var(--bp-white) 0%,
        #eef2f7 100%
    );
    border-bottom-color: var(--ex-border);
}

html.theme-light .exchange-app .ex-live-score-panel__hero .ex-live-score-panel__clock,
html.theme-light .exchange-app .ex-live-score-panel__hero-team .ex-live-score-panel__team-name {
    color: var(--ex-text-strong);
}

html.theme-light .exchange-app .ex-live-score-panel__hero .ex-live-score-panel__live-tag {
    color: var(--bp-slate-600);
}

html.theme-light .exchange-app .ex-live-score-panel__hero .ex-live-score-panel__live-tag .ex-live-dot {
    background: var(--bp-slate-500);
    border-color: var(--bp-slate-600);
}

html.theme-light .exchange-app .ex-live-score-panel__hero .ex-live-score-panel__clock-tag,
html.theme-light .exchange-app .ex-live-score-panel__hero .ex-live-score-panel__format,
html.theme-light .exchange-app .ex-live-score-panel__hero .ex-live-score-panel__competition {
    color: var(--ex-muted);
}

html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-live__table thead th {
    background: color-mix(in srgb, var(--bp-slate-500) 8%, var(--ex-surface-head));
    border-bottom-color: var(--ex-border);
    color: var(--ex-muted);
}

html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-live__table tbody th,
html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-live__table tbody td,
html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-live__num,
html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-live__batter,
html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-live__foot strong,
html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-this-over__meta strong {
    color: var(--ex-text-strong);
}

html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-live__table tbody th,
html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-live__table tbody td {
    border-bottom-color: var(--ex-border);
}

html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-live__row--batting {
    background: color-mix(in srgb, var(--bp-slate-500) 10%, var(--ex-surface));
}

html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-session-row,
html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-live__balls,
html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-live__crease,
html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-live__note,
html.theme-light .exchange-app .ex-live-score-panel__hero .ex-dlx-live__foot {
    background: var(--ex-surface-raised);
    border-top-color: var(--ex-border);
    color: var(--ex-muted);
}

html.theme-light .exchange-app .ex-live-score-panel__hero-team .ex-live-score-panel__score {
    background: var(--bp-white);
    border-color: var(--bp-slate-300);
    color: var(--ex-text-strong);
}

html.theme-light .exchange-app .ex-live-score-panel__hero-stream {
    background: var(--bp-slate-800);
    border-left-color: var(--ex-border);
}

@media (max-width: 767.98px) {
    .ex-live-score-panel__hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .ex-live-score-panel__hero-stream {
        min-height: 16rem;
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--bp-slate-400) 22%, transparent);
    }

    .ex-live-score-panel__hero-stream .ex-live-stream--hero .ex-live-stream__viewport {
        min-height: 14rem;
        aspect-ratio: 16 / 9;
    }
}

.ex-live-score-panel__team-name--short {
    display: none;
}

.ex-live-score-panel__team-name--full {
    display: inline;
}

.ex-live-score-panel__format {
    max-width: 6rem;
    color: var(--ex-dlx-on-dark-muted, var(--ex-muted));
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ex-live-score-panel__scoreboard--top .ex-live-score-panel__clock {
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 600;
}

.ex-live-score-panel__scoreboard--top .ex-live-score-panel__score {
    font-size: var(--theme-text-md, 0.8125rem);
    min-width: 2rem;
    padding: 0.1rem 0.3rem;
}

.ex-live-score-panel__tab-content {
    background: var(--ex-surface);
}

.ex-live-score-panel__tab-content > .tab-pane > .ex-cricket-scorecard,
.ex-live-score-panel__tab-content > .tab-pane > .ex-ball-by-ball {
    margin: 0;
}

.ex-live-score-panel--cricket .ex-cricket-scorecard,
.ex-live-score-panel--cricket .ex-ball-by-ball {
    padding: 0.5rem 0.65rem 0.65rem;
}

.ex-live-score-panel__tab-content > .tab-pane.show.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.ex-live-score-panel__tab-content > .tab-pane > .ex-dlx-live {
    margin: 0;
}

/* Multi-column tab panes (Live, Stats) — up to 3 columns on desktop */
.ex-live-score-panel__pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ex-live-score-panel__pane-head {
    flex-shrink: 0;
    padding: 0.6rem 0.75rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--ex-border) 90%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-primary) 10%, var(--ex-surface)) 0%,
        var(--ex-surface) 100%
    );
}

.ex-live-score-panel__pane-title {
    margin: 0;
    color: var(--ex-text-strong, var(--ex-runner-text));
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.25;
}

.exchange-app h3.ex-live-score-panel__pane-title {
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 700;
    line-height: 1.25;
}

.ex-live-score-panel__pane-sub {
    margin: 0.25rem 0 0;
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.35;
}

.ex-live-score-panel__cols {
    display: grid;
    gap: 0;
    min-height: 12rem;
}

.ex-live-score-panel__cols--1 {
    grid-template-columns: minmax(0, 1fr);
}

.ex-live-score-panel__cols--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ex-live-score-panel__cols--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ex-live-score-panel__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--ex-border);
}

.ex-live-score-panel__col:last-child {
    border-right: 0;
}

.ex-live-score-panel__col-head {
    flex-shrink: 0;
    padding: 0.35rem 0.45rem;
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--ex-border) 75%, transparent);
    background: color-mix(in srgb, var(--ex-border) 12%, var(--ex-surface));
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

.ex-live-score-panel__col-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 20rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Stream & Markets hub — center empty placeholders in each column */
.ex-live-score-panel__cols--hub .ex-live-score-panel__col-body {
    display: flex;
    flex-direction: column;
    min-height: 11rem;
}

.ex-live-score-panel__cols--hub .ex-match-details-col,
.ex-live-score-panel__cols--hub .ex-odds-movement-log--hub,
.ex-live-score-panel__cols--hub .ex-live-stream-slot--compact {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ex-live-score-panel__cols--hub .ex-cricket-scorecard {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ex-hub-col-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 9rem;
    padding: 1rem 0.75rem;
    text-align: center;
}

.ex-hub-col-empty__text {
    margin: 0;
    max-width: 14rem;
    color: var(--ex-muted);
    font-size: var(--theme-text-sm, 0.75rem);
    line-height: 1.4;
}

.ex-odds-movement-log--hub {
    flex: 1 1 auto;
    min-height: 0;
}

.ex-odds-movement-log--hub .ex-odds-movement-log__body--embedded {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ex-odds-movement-log--hub .ex-odds-movement-log__list {
    flex: 0 0 auto;
}

.ex-live-score-panel__cols--hub .ex-live-stream-slot--hub {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.ex-live-score-panel__cols--hub .ex-live-stream--hub-col {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.ex-live-score-panel__cols--hub .ex-live-stream--hub-col .ex-live-stream__viewport {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 9rem;
    max-height: none;
    aspect-ratio: auto;
}

.ex-live-score-panel__cols--hub .ex-live-score-panel__col:has(.ex-live-stream--hub-col) .ex-live-score-panel__col-body {
    overflow: hidden;
}

.ex-live-score-panel__cols--hub .ex-live-stream--compact {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ex-live-score-panel__cols--hub .ex-live-stream--compact .ex-live-stream__viewport {
    flex: 1 1 auto;
    max-height: none;
    min-height: 9rem;
    aspect-ratio: auto;
    height: 100%;
}

.ex-live-score-panel__cols .ex-dlx-live,
.ex-live-score-panel__cols .ex-ball-by-ball,
.ex-live-score-panel__cols .ex-cricket-scorecard,
.ex-live-score-panel__cols .ex-match-chart {
    max-height: none;
}

.ex-live-score-panel--cricket .ex-live-score-panel__cols .ex-ball-by-ball {
    padding: 0.45rem 0.5rem 0.55rem;
    max-height: none;
}

.ex-live-score-panel--cricket .ex-live-score-panel__cols .ex-cricket-scorecard {
    padding: 0.45rem 0.5rem 0.55rem;
}

.ex-live-score-panel--cricket .ex-live-score-panel__cols .ex-match-chart {
    padding: 0.35rem 0.4rem 0.5rem;
}

.ex-live-score-panel--cricket .ex-live-score-panel__cols--3 .ex-match-chart__canvas-wrap {
    height: 10rem;
}

@media (max-width: 991.98px) {
    .ex-live-score-panel__cols--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ex-live-score-panel__cols--3 .ex-live-score-panel__col:nth-child(3) {
        grid-column: 1 / -1;
        border-right: 0;
        border-top: 1px solid var(--ex-border);
    }
}

@media (max-width: 767.98px) {
    .ex-live-score-panel__cols--2,
    .ex-live-score-panel__cols--3 {
        grid-template-columns: 1fr;
    }

    .ex-live-score-panel__cols--3 .ex-live-score-panel__col:nth-child(3) {
        grid-column: auto;
        border-top: 0;
    }

    .ex-live-score-panel__col {
        border-right: 0;
        border-bottom: 1px solid var(--ex-border);
    }

    .ex-live-score-panel__col:last-child {
        border-bottom: 0;
    }

    .ex-live-score-panel__col-body {
        max-height: 16rem;
    }
}

@media (min-width: 992px) {
    .ex-live-score-panel__col-body {
        max-height: 22rem;
    }

    .ex-live-score-panel--cricket .ex-live-score-panel__cols--3 .ex-match-chart__canvas-wrap {
        height: 11.5rem;
    }
}

@media (min-width: 1200px) {
    .ex-live-score-panel--cricket .ex-live-score-panel__cols--3 .ex-match-chart__canvas-wrap {
        height: 12.5rem;
    }
}

.ex-live-score-panel__awaiting-feed {
    margin: 0;
    padding: 0.4rem 0.65rem;
    border-top: 1px solid var(--ex-border);
    background: color-mix(in srgb, var(--color-warning) 8%, var(--ex-surface));
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 500;
    text-align: center;
    line-height: 1.35;
}

.ex-live-score-panel__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 220px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-primary) 8%, var(--bp-slate-900)) 0%,
        var(--bp-slate-800) 45%,
        color-mix(in srgb, var(--color-primary) 6%, var(--bp-slate-900)) 100%
    );
    overflow: hidden;
}

.ex-live-score-panel__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ex-live-score-panel__scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        color-mix(in srgb, var(--color-primary) 22%, transparent) 50%,
        transparent 60%
    );
    background-size: 200% 100%;
    animation: ex-live-score-scan 2.8s ease-in-out infinite;
}

.ex-live-score-panel__play-ring {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 24%, transparent);
    border: 2px solid color-mix(in srgb, var(--color-primary) 58%, transparent);
    color: var(--bp-white);
    font-size: var(--theme-text-lg-plus, 1rem);
    cursor: default;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent);
    animation: ex-live-score-pulse 2s ease-in-out infinite;
}

/* Now a decorative <button disabled> (was a <span>) — neutralize UA button
   chrome so it stays visually identical to before, and never looks
   interactive since there is no real stream to play yet. */
.ex-live-score-panel__play-ring:disabled {
    opacity: 1;
    appearance: none;
    -webkit-appearance: none;
}

.ex-live-score-panel__play-ring svg {
    width: 1.125rem;
    height: 1.125rem;
    margin-left: 0.15rem;
    fill: currentColor;
}

.ex-live-score-panel__media-label {
    position: absolute;
    left: 0.625rem;
    top: 0.625rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--theme-radius-chip, 4px);
    background: rgba(15, 23, 42, 0.72);
    color: var(--bp-slate-200);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ex-live-score-panel__media-hint {
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    z-index: 2;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.25rem 0.625rem;
    border-radius: var(--theme-radius-chip, 4px);
    background: rgba(15, 23, 42, 0.65);
    color: var(--bp-slate-300);
    font-size: var(--theme-text-xs, 0.6875rem);
    white-space: nowrap;
}

.ex-live-score-panel__scorecard {
    padding: 0.875rem 1rem 1rem;
}

.ex-live-score-panel__scorecard-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--ex-text-strong);
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: 600;
    text-align: center;
}

.ex-live-score-panel__scorecard-vs {
    color: var(--ex-muted);
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 500;
}

.ex-live-score-panel__scorecard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.ex-live-score-panel__scorecard-grid--sports {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 16rem;
    margin-inline: auto;
}

.ex-sports-match-info {
    padding: 0.875rem 1rem 1rem;
}

.ex-sports-match-info__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 0.875rem;
}

.ex-sports-match-info__meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem;
    border: 1px dashed var(--ex-border);
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-surface-raised);
}

.ex-sports-match-info__meta-item dt {
    margin: 0;
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ex-sports-match-info__meta-item dd {
    margin: 0;
    color: var(--ex-text-strong);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
}

.ex-sports-match-info__table-head {
    margin-bottom: 0.5rem;
}

.ex-sports-match-info__empty {
    margin: 0;
    text-align: center;
    color: var(--ex-muted);
    font-size: var(--theme-text-sm, 0.75rem);
}

@media (max-width: 640px) {
    .ex-sports-match-info__meta {
        grid-template-columns: 1fr;
    }
}

.ex-live-score-panel__scorecard-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.375rem;
    border: 1px dashed var(--ex-border);
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-surface-raised);
}

.ex-live-score-panel__scorecard-label {
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ex-live-score-panel__scorecard-value {
    color: var(--ex-text-strong);
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ex-live-score-panel__scorecard-hint {
    margin: 0.75rem 0 0;
    text-align: center;
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
}

.ex-live-score-panel__rates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--ex-border);
}

.ex-live-score-panel__rate {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.ex-live-score-panel__rate-label {
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ex-live-score-panel__rate-value {
    color: var(--ex-text-strong);
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ─── Cricket scorecard tab (Match Center S2) ───────────────────────────── */
.ex-cricket-scorecard {
    padding: var(--theme-space-3, 0.75rem) var(--theme-space-4, 1rem) var(--theme-space-4, 1rem);
}

/* Hub / column embeds may still constrain height; match detail shows full card. */
.ex-live-score-panel__col-body .ex-cricket-scorecard {
    max-height: none;
    overflow: visible;
}

.ex-cricket-scorecard__empty {
    margin: 0.75rem 0 0;
    text-align: center;
    color: var(--ex-muted);
    font-size: var(--theme-text-md, 0.8125rem);
}

.ex-cricket-scorecard__inning + .ex-cricket-scorecard__inning {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ex-border);
}

.ex-cricket-scorecard__inning-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
}

.ex-cricket-scorecard__inning-total {
    color: var(--ex-text-strong);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ex-cricket-scorecard__table-wrap {
    margin-bottom: 0.5rem;
}

.ex-cricket-scorecard__table {
    font-size: var(--theme-text-sm, 0.75rem);
}

.ex-cricket-xi {
    margin-bottom: 0.85rem;
}

.ex-cricket-xi__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.ex-cricket-xi__team {
    margin: 0 0 0.35rem;
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ex-cricket-xi__list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ex-text-strong);
    font-size: var(--theme-text-sm, 0.75rem);
    line-height: 1.45;
}

.ex-cricket-xi__empty {
    margin: 0;
    color: var(--ex-muted);
    font-size: var(--theme-text-sm, 0.75rem);
}

/* ─── Diamond / Sky Exchange — Live Line (cricket) ───────────────────── */
.ex-dlx-live {
    --ex-dlx-head-bg: linear-gradient(
        180deg,
        #5b6b7f 0%,
        var(--bp-slate-600) 48%,
        var(--bp-slate-700) 100%
    );
    --ex-dlx-strip-bg: linear-gradient(
        180deg,
        #3a4a63 0%,
        #2d3a50 48%,
        var(--bp-slate-800) 100%
    );
    --ex-dlx-on-dark: var(--bp-slate-50);
    --ex-dlx-on-dark-muted: var(--bp-slate-300);
}

.ex-dlx-live__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--ex-dlx-head-bg);
    color: var(--ex-dlx-on-dark);
}

.ex-dlx-live__head-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ex-dlx-live__live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    padding: 0.125rem 0.45rem;
    border-radius: var(--theme-radius-chip, 4px);
    background: color-mix(in srgb, var(--bp-slate-400) 22%, transparent);
    color: var(--bp-slate-200);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.06em;
}

html.theme-light .exchange-app .ex-dlx-live__live-pill {
    background: color-mix(in srgb, var(--bp-slate-500) 14%, transparent);
    color: var(--bp-slate-600);
}

.ex-dlx-live__match-title {
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ex-dlx-live__format {
    flex-shrink: 0;
    padding: 0.1rem 0.4rem;
    border-radius: var(--theme-radius-chip, 4px);
    border: 1px solid color-mix(in srgb, var(--ex-dlx-on-dark) 25%, transparent);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.ex-dlx-live__table-wrap {
    background: var(--ex-surface);
}

.ex-dlx-live__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--theme-text-sm, 0.75rem);
}

.ex-dlx-live__table thead th {
    padding: 0.35rem 0.65rem;
    background: var(--ex-surface-head);
    border-bottom: 1px solid var(--ex-border);
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ex-dlx-live__table tbody th,
.ex-dlx-live__table tbody td {
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid var(--ex-border);
    vertical-align: middle;
}

.ex-dlx-live__table tbody th {
    font-weight: 600;
    color: var(--ex-text-strong);
}

.ex-dlx-live__team-short {
    display: none;
}

.ex-dlx-live__team-full {
    display: inline;
}

.ex-dlx-live__num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ex-text-strong);
}

.ex-dlx-live__row--batting {
    background: color-mix(in srgb, var(--bp-slate-500) 10%, var(--ex-surface));
}

.ex-dlx-live__row--batting .ex-dlx-live__num {
    color: color-mix(in srgb, var(--bp-slate-600) 55%, var(--ex-text-strong));
}

.ex-dlx-live__balls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--ex-border);
    background: var(--ex-surface-raised);
}

.ex-dlx-ball {
    /* Dynamic fill/edge/ink computed from activity hue + surface. */
    --ex-ball-hue: var(--ex-ball-run);
    --ex-ball-fill-strength: 88%;
    --ex-ball-edge-strength: 94%;
    --ex-ball-ink: var(--ex-ball-ink-on, #fff);
    --ex-ball-fill: color-mix(
        in srgb,
        var(--ex-ball-hue) var(--ex-ball-fill-strength),
        var(--ex-surface, #fff)
    );
    --ex-ball-edge: color-mix(
        in srgb,
        var(--ex-ball-hue) var(--ex-ball-edge-strength),
        var(--ex-border, #e5eaf1)
    );

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.22rem;
    border-radius: var(--theme-radius-chip, 4px);
    border: 1px solid var(--ex-ball-edge);
    background: var(--ex-ball-fill);
    color: var(--ex-ball-ink);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.ex-dlx-ball--dot {
    --ex-ball-hue: var(--ex-ball-dot);
    --ex-ball-fill-strength: 28%;
    --ex-ball-edge-strength: 48%;
    --ex-ball-ink: var(--ex-ball-ink-soft, var(--ex-text-strong));
}

.ex-dlx-ball--run {
    --ex-ball-hue: var(--ex-ball-run);
}

.ex-dlx-ball--four {
    --ex-ball-hue: var(--ex-ball-four);
}

.ex-dlx-ball--six {
    --ex-ball-hue: var(--ex-ball-six);
}

.ex-dlx-ball--wicket {
    --ex-ball-hue: var(--ex-ball-wicket);
}

.ex-dlx-ball--wide {
    --ex-ball-hue: var(--ex-ball-wide);
    font-size: var(--theme-text-xs, 0.6875rem);
}

.ex-dlx-ball--noball {
    --ex-ball-hue: var(--ex-ball-noball);
    font-size: var(--theme-text-xs, 0.6875rem);
}

.ex-dlx-ball--slot {
    min-width: 1.55rem;
    height: 1.55rem;
    font-size: var(--theme-text-xs, 0.6875rem);
}

.ex-dlx-ball--pending {
    --ex-ball-hue: var(--ex-ball-pending);
    --ex-ball-fill-strength: 12%;
    --ex-ball-edge-strength: 55%;
    --ex-ball-ink: var(--ex-muted);
    border-style: dashed;
    opacity: 0.9;
}

.ex-dlx-session-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--ex-border);
    background: var(--ex-surface);
}

.ex-dlx-session {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    padding: 0.45rem 0.75rem;
    background: color-mix(in srgb, var(--color-warning) 8%, var(--ex-surface));
    border-bottom: 1px solid var(--ex-border);
    font-size: var(--theme-text-xs, 0.6875rem);
}

.ex-dlx-session__label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
}

.ex-dlx-session__value {
    color: var(--ex-text-strong);
    font-weight: 500;
}

.ex-dlx-session__value strong {
    font-weight: var(--theme-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    color: var(--color-warning);
}

.ex-dlx-session__trend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--theme-radius-pill, 999px);
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: var(--theme-weight-bold, 700);
    line-height: 1;
}

.ex-dlx-session__trend--up {
    background: color-mix(in srgb, var(--color-odds-up) 18%, var(--ex-surface));
    color: var(--color-odds-up);
}

.ex-dlx-session__trend--down {
    background: color-mix(in srgb, var(--color-odds-down) 18%, var(--ex-surface));
    color: var(--color-odds-down);
}

.ex-dlx-session__trend--flat {
    background: var(--ex-surface-head);
    color: var(--ex-muted);
}

.ex-dlx-session__prev {
    margin-left: auto;
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-variant-numeric: tabular-nums;
}

.ex-dlx-this-over {
    padding: 0.45rem 0.75rem 0.55rem;
    background: var(--ex-surface-raised);
}

.ex-dlx-this-over__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.4rem;
    font-size: var(--theme-text-xs, 0.6875rem);
}

.ex-dlx-this-over__label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
}

.ex-dlx-this-over__meta {
    color: var(--ex-text);
    font-variant-numeric: tabular-nums;
}

.ex-dlx-this-over__meta strong {
    font-weight: var(--theme-weight-bold, 700);
    color: var(--ex-text-strong);
}

.ex-dlx-this-over__track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.ex-dlx-live__crease {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.75rem;
    padding: 0.45rem 0.75rem;
    background: color-mix(in srgb, var(--bp-slate-500) 8%, var(--ex-surface));
    border-top: 1px solid var(--ex-border);
}

.ex-dlx-live__batter {
    color: var(--ex-text-strong);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 500;
}

.ex-dlx-live__batter strong {
    font-weight: var(--theme-weight-bold, 700);
    font-variant-numeric: tabular-nums;
}

.ex-dlx-live__note {
    margin: 0;
    padding: 0.4rem 0.75rem;
    text-align: center;
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    line-height: 1.35;
    border-top: 1px dashed var(--ex-border);
}

.ex-dlx-live__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.35rem;
    padding: 0.45rem 0.75rem 0.55rem;
    background: var(--ex-surface-raised);
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    line-height: 1.35;
    text-align: center;
}

.ex-dlx-live__foot strong {
    color: var(--ex-text-strong);
    font-variant-numeric: tabular-nums;
}

.ex-dlx-live__foot-sep {
    opacity: 0.55;
}

.ex-dlx-xi {
    padding: 0.75rem 1rem 1rem;
}

.ex-dlx-xi .ex-cricket-xi__team {
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.35rem;
    border-radius: var(--theme-radius-chip, 4px);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bp-slate-400) 18%, var(--ex-surface-head)) 0%,
        color-mix(in srgb, var(--bp-slate-500) 10%, var(--ex-surface-head)) 100%
    );
    color: var(--ex-text-strong);
    font-size: var(--theme-text-sm, 0.75rem);
}

.ex-dlx-scorecard:not(.ex-cricket-scorecard--paired) .ex-cricket-scorecard__table thead th {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bp-slate-400) 20%, var(--ex-surface-head)) 0%,
        color-mix(in srgb, var(--bp-slate-500) 12%, var(--ex-surface-head)) 100%
    );
    color: var(--ex-text-strong);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ex-cricket-match-info__vs {
    margin: 0 0.35rem;
    color: var(--ex-muted);
    font-weight: 500;
}

.ex-sports-match-info__meta-item--wide {
    grid-column: 1 / -1;
}

.ex-cricket-match-info__batsmen-wrap {
    margin-top: 0.75rem;
    padding: 0.625rem;
    border: 1px dashed var(--ex-border);
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-surface-raised);
}

.ex-cricket-match-info__batsmen-label {
    margin: 0 0 0.35rem;
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ex-cricket-match-info__batsmen {
    margin: 0;
    color: var(--ex-text-strong);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .ex-dlx-live__team-full {
        display: none;
    }

    .ex-dlx-live__team-short {
        display: inline;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
}

.ex-live-score-panel__scoreboard--dlx {
    --ex-dlx-strip-bg: linear-gradient(
        180deg,
        #3a4a63 0%,
        #2d3a50 48%,
        var(--bp-slate-800) 100%
    );
    --ex-dlx-on-dark: var(--bp-slate-50);
    --ex-dlx-on-dark-muted: var(--bp-slate-300);
    background: var(--ex-dlx-strip-bg);
    border-top: none;
    color: var(--ex-dlx-on-dark, var(--bp-slate-50));
}

.ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__team-name,
.ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__clock,
.ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__format,
.ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__competition {
    color: var(--ex-dlx-on-dark, var(--bp-slate-50));
}

.ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__score {
    background: color-mix(in srgb, var(--ex-dlx-on-dark) 12%, transparent);
    border-color: color-mix(in srgb, var(--ex-dlx-on-dark) 22%, transparent);
    color: var(--ex-dlx-on-dark, var(--bp-slate-50));
}

.ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__clock-tag {
    color: var(--ex-dlx-on-dark-muted, var(--bp-slate-300));
}

.ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__live-tag {
    color: var(--bp-slate-200);
}

.ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__live-tag .ex-live-dot {
    background: var(--bp-slate-300);
    border-color: var(--bp-slate-400);
    box-shadow: none;
}

/* Light mode — scoreboard uses slate gray dark/light mix */
html.theme-light .exchange-app .ex-live-score-panel__scoreboard--dlx {
    --ex-dlx-strip-bg: linear-gradient(
        180deg,
        var(--bp-slate-50) 0%,
        #e8eef5 48%,
        #dce3ec 100%
    );
    background: var(--ex-dlx-strip-bg);
    color: var(--ex-text-strong);
    border-bottom: 1px solid var(--ex-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -2px 4px var(--bp-alpha-ink-08);
}

html.theme-light .exchange-app .ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__team-name,
html.theme-light .exchange-app .ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__clock,
html.theme-light .exchange-app .ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__format,
html.theme-light .exchange-app .ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__competition {
    color: var(--ex-text-strong);
}

html.theme-light .exchange-app .ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__clock-tag {
    color: var(--ex-muted);
}

html.theme-light .exchange-app .ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__score {
    background: var(--bp-white);
    border-color: var(--bp-slate-300);
    color: var(--ex-text-strong);
}

html.theme-light .exchange-app .ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__live-tag {
    color: var(--bp-slate-600);
}

html.theme-light .exchange-app .ex-live-score-panel__scoreboard--dlx .ex-live-score-panel__live-tag .ex-live-dot {
    background: var(--bp-slate-500);
    border-color: var(--bp-slate-600);
    box-shadow: none;
}

.ex-live-score-panel__scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--ex-surface-raised);
    border-top: 1px solid var(--ex-border);
}

.ex-live-score-panel__team {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ex-live-score-panel__team--home {
    justify-content: flex-start;
}

.ex-live-score-panel__team--away {
    justify-content: flex-end;
}

.ex-live-score-panel__team-name {
    color: var(--ex-text-strong);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ex-live-score-panel__score {
    flex-shrink: 0;
    min-width: 1.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: var(--theme-radius-chip, 4px);
    background: var(--ex-surface-head);
    border: 1px solid var(--ex-border);
    color: var(--ex-text-strong);
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.ex-live-score-panel__status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    text-align: center;
}

.ex-live-score-panel__live-tag,
.ex-live-score-panel__clock-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bp-slate-600);
}

.ex-live-score-panel__live-tag .ex-live-dot {
    background: var(--bp-slate-500);
    border-color: var(--bp-slate-600);
    box-shadow: none;
}

.ex-live-score-panel__clock-tag {
    color: var(--ex-muted);
}

.ex-live-score-panel__clock {
    color: var(--ex-text-strong);
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ex-live-score-panel__competition {
    max-width: 8rem;
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes ex-live-score-scan {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes ex-live-score-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-primary) 0%, transparent);
        transform: scale(1.04);
    }
}

@media (max-width: 575.98px) {
    .ex-live-score-panel__tab-text--short {
        display: inline;
    }

    .ex-live-score-panel__tab-text--long {
        display: none;
    }

    .ex-live-score-panel__tab-icon {
        display: none;
    }

    .ex-live-score-panel__tabs .nav-link {
        padding: 0.5rem 0.55rem;
        font-size: var(--theme-text-xs, 0.6875rem);
    }

    .ex-live-score-panel__team-name--short {
        display: inline;
    }

    .ex-live-score-panel__team-name--full {
        display: none;
    }

    .ex-live-score-panel__scorecard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ex-live-score-panel__media-hint {
        white-space: normal;
        max-width: calc(100% - 1.25rem);
        text-align: center;
    }

    .ex-live-score-panel__scoreboard:not(.ex-live-score-panel__scoreboard--top) {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: center;
    }

    .ex-live-score-panel__scoreboard.ex-live-score-panel__scoreboard--top:not(.ex-live-score-panel__hero) {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0.35rem;
        padding: 0.5rem 0.5rem;
    }

    .ex-live-score-panel__scoreboard.ex-live-score-panel__scoreboard--top:not(.ex-live-score-panel__hero) .ex-live-score-panel__team,
    .ex-live-score-panel__scoreboard.ex-live-score-panel__scoreboard--top:not(.ex-live-score-panel__hero) .ex-live-score-panel__team--home,
    .ex-live-score-panel__scoreboard.ex-live-score-panel__scoreboard--top:not(.ex-live-score-panel__hero) .ex-live-score-panel__team--away {
        justify-content: flex-start;
    }

    .ex-live-score-panel__scoreboard.ex-live-score-panel__scoreboard--top:not(.ex-live-score-panel__hero) .ex-live-score-panel__team--away {
        justify-content: flex-end;
    }

    .ex-live-score-panel__scoreboard:not(.ex-live-score-panel__scoreboard--top) .ex-live-score-panel__team,
    .ex-live-score-panel__scoreboard:not(.ex-live-score-panel__scoreboard--top) .ex-live-score-panel__team--home,
    .ex-live-score-panel__scoreboard:not(.ex-live-score-panel__scoreboard--top) .ex-live-score-panel__team--away {
        justify-content: center;
    }

    .ex-live-score-panel__scoreboard:not(.ex-live-score-panel__scoreboard--top) .ex-live-score-panel__status {
        order: -1;
    }

    .ex-live-score-panel__competition {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ex-live-score-panel__scan,
    .ex-live-score-panel__play-ring {
        animation: none;
    }
}

/* ─── Market panel ───────────────────────────────────────────────────────── */
.ex-market {
    background: var(--ex-market-bg);
    border: 1px solid var(--ex-border);
    border-top: none;
    margin-bottom: 0.75rem;
    box-shadow: var(--ex-shadow);
}

.ex-market:first-of-type {
    border-top: 1px solid var(--ex-border);
}

.ex-market__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--ex-market-header, var(--ex-surface-table-head));
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ex-border);
}

.ex-market__title {
    color: var(--ex-runner-text);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    margin: 0;
}

.ex-market__grid {
    width: 100%;
}

.ex-market__head-row,
.ex-market__runner-row {
    display: grid;
    grid-template-columns: 1fr 72px 72px;
    align-items: stretch;
    min-height: var(--theme-odds-h-desktop, 36px);
}

.ex-market__head-row--fancy {
    grid-template-columns: 1fr 64px 64px;
}

.ex-market__runner-row--fancy {
    grid-template-columns: 1fr 64px 64px;
}

.ex-market__head-row {
    background: var(--ex-surface-subhead, var(--ex-surface-head));
    border-bottom: 1px solid var(--ex-border);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ex-muted);
}

.ex-market__head-row > div,
.ex-market__runner-row > div {
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
}

.ex-market__head-row .ex-market__price-col {
    justify-content: center;
}

.ex-market__runner-row {
    border-bottom: 1px solid var(--ex-border);
    background: var(--ex-surface-row, var(--ex-market-bg));
}

.ex-market__runner-row:nth-child(even) {
    background: var(--ex-surface-row-alt, var(--ex-row-alt));
}

.ex-market__runner-row:last-child {
    border-bottom: none;
}

.ex-market__runner-name {
    color: var(--ex-runner-text);
    /* Team role — match home .ex-indibet-row__team */
    font-size: var(--theme-type-team-size, var(--theme-text-md, 0.8125rem));
    font-weight: var(--theme-type-team-weight, var(--theme-weight-semibold, 600));
    line-height: 1.3;
    word-break: break-word;
}

.ex-market__runner-line {
    display: block;
    color: var(--ex-muted);
    font-size: var(--theme-text-sm, 0.75rem);
    margin-top: 0.125rem;
}

.ex-market__price-col--back {
    color: var(--ex-back-text);
}

.ex-market__price-col--lay {
    color: var(--ex-lay-text);
}

/* ─── Price cells (Back / Lay) ───────────────────────────────────────────── */
.ex-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--theme-odds-h-desktop, 36px);
    padding: 0.125rem 0.25rem;
    border-radius: var(--theme-radius-odds, 0);
    text-decoration: none !important;
    transition: background-color 0.15s ease, transform 0.1s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.ex-price--back {
    background: var(--ex-back);
    color: var(--ex-back-text);
}

.ex-price--back:hover,
.ex-price--back:focus {
    background: var(--ex-back-hover);
    color: var(--ex-back-text);
}

.ex-price--yes {
    background: var(--ex-yes);
    color: var(--ex-yes-text);
}

.ex-price--yes:hover,
.ex-price--yes:focus {
    background: var(--ex-yes-hover);
    color: var(--ex-yes-text);
}

.ex-price--no {
    background: var(--ex-no);
    color: var(--ex-no-text);
}

.ex-price--no:hover,
.ex-price--no:focus {
    background: var(--ex-no-hover);
    color: var(--ex-no-text);
}

.ex-price--draw {
    background: var(--ex-draw, #F59E0B);
    color: var(--ex-draw-text, #1a1a1a);
}

.ex-price--draw:hover,
.ex-price--draw:focus {
    background: var(--ex-draw-hover, #FBBF24);
    color: var(--ex-draw-text, #1a1a1a);
}

.ex-price--lay {
    background: var(--ex-lay);
    color: var(--ex-lay-text);
}

.ex-price--lay:hover,
.ex-price--lay:focus {
    background: var(--ex-lay-hover);
    color: var(--ex-lay-text);
}

.ex-price--lay.ex-price--unavailable {
    pointer-events: none;
    opacity: 0.45;
    cursor: default;
}

.ex-price__value {
    font-size: var(--theme-odds-font-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-odds-font-weight, var(--theme-weight-bold, 700));
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.ex-price__size {
    font-size: var(--theme-text-xs, 0.6875rem);
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.ex-price.odds-price-flash,
.ex-price.odds-price-flash-up,
.ex-price.odds-price-flash-down {
    --ex-flash-rest-bg: var(--ex-back);
    --ex-flash-rest-text: var(--ex-back-text);
    position: relative;
    z-index: 3;
    animation: ex-odds-cell-pulse 0.55s ease-out;
}

.ex-price.odds-price-flash-up {
    --ex-flash-pulse: var(--ex-odds-flash-up, #15803D);
    --ex-flash-pulse-text: #ffffff;
}

.ex-price.odds-price-flash-down {
    --ex-flash-pulse: var(--ex-odds-flash-down, #DD3E42);
    --ex-flash-pulse-text: #ffffff;
}

.exchange-app .ex-price.odds-price-flash-up:not(.ex-price--unavailable):not(.is-settling),
.exchange-app a.ex-price.odds-price-flash-up:not(.ex-price--unavailable):not(.is-settling),
.ex-indibet-outcome .ex-price.odds-price-flash-up:not(.ex-price--unavailable):not(.is-settling),
.ex-market--sportsbook .ex-price.odds-price-flash-up:not(.ex-price--unavailable):not(.is-settling) {
    background: var(--ex-odds-flash-up, #15803D) !important;
    background-color: var(--ex-odds-flash-up, #15803D) !important;
    color: #ffffff !important;
    border-color: var(--ex-odds-flash-up, #15803D) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}

.exchange-app .ex-price.odds-price-flash-down:not(.ex-price--unavailable):not(.is-settling),
.exchange-app a.ex-price.odds-price-flash-down:not(.ex-price--unavailable):not(.is-settling),
.ex-indibet-outcome .ex-price.odds-price-flash-down:not(.ex-price--unavailable):not(.is-settling),
.ex-market--sportsbook .ex-price.odds-price-flash-down:not(.ex-price--unavailable):not(.is-settling) {
    background: var(--ex-odds-flash-down, #DD3E42) !important;
    background-color: var(--ex-odds-flash-down, #DD3E42) !important;
    color: #ffffff !important;
    border-color: var(--ex-odds-flash-down, #DD3E42) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}

@keyframes ex-odds-cell-pulse {
    0% {
        filter: brightness(1);
        opacity: 1;
    }
    20% {
        filter: brightness(1.18);
    }
    55% {
        filter: brightness(1.08);
    }
    100% {
        filter: brightness(1);
    }
}

/* Legacy alias kept for older selectors */
@keyframes ex-odds-flash-amber {
    0%,
    18% {
        background-color: var(--color-odds-flash, var(--bp-odds-flash));
        color: var(--color-odds-flash-text, var(--bp-odds-ink));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bp-warning-strong) 70%, transparent);
    }
    100% {
        background-color: var(--ex-flash-rest-bg, var(--ex-back));
        color: var(--ex-flash-rest-text, var(--ex-back-text));
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ex-price.odds-price-flash,
    .ex-price.odds-price-flash-up,
    .ex-price.odds-price-flash-down {
        animation: none;
        transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
    }
}

.ex-market.market-suspended,
.ex-market.market-locked {
    opacity: 1;
}

.ex-market.market-suspended .odds-option,
.ex-market.market-suspended .fancy-option,
.ex-market.market-locked .odds-option,
.ex-market.market-locked .fancy-option {
    pointer-events: none;
    cursor: not-allowed;
}

.ex-market.market-suspended .market-suspended-badge {
    display: inline-flex !important;
}

.ex-market.market-locked .market-locked-badge {
    display: inline-flex !important;
}

/* Locked wins over temporary suspend for badge chrome */
.ex-market.market-locked .market-suspended-badge {
    display: none !important;
}

/* Suspended badge — gray + bold ticking clock + title */
.ex-market-suspend-badge {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: var(--ex-badge-h, 20px);
    min-height: var(--ex-badge-h, 20px);
    max-height: var(--ex-badge-h, 20px);
    padding: 0 0.4rem;
    box-sizing: border-box;
    border-radius: var(--theme-radius-chip, 4px);
    border: 1px solid color-mix(in srgb, #6B7280 55%, transparent);
    background: #6B7280;
    color: #F9FAFB;
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.ex-market-suspend-badge__clock {
    position: relative;
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

.ex-market-suspend-badge__face {
    position: absolute;
    inset: 0;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}

.ex-market-suspend-badge__face::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    border-radius: 50%;
    background: currentColor;
}

.ex-market-suspend-badge__hand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5px;
    height: 0.28rem;
    margin-left: -0.75px;
    background: currentColor;
    border-radius: var(--theme-radius-none, 0);
    transform-origin: bottom center;
    animation: ex-clock-tick 60s steps(60, end) infinite;
}

.ex-market-suspend-badge__label {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 1;
    text-transform: inherit;
}

.theme-dark .ex-market-suspend-badge,
html.theme-dark .ex-market-suspend-badge {
    background: #4B5563;
    border-color: color-mix(in srgb, #9CA3AF 45%, transparent);
    color: #F3F4F6;
}

/* Locked / closed badge — gray lock */
.ex-market-lock-badge {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: var(--ex-badge-h, 20px);
    width: var(--ex-badge-h, 20px);
    height: var(--ex-badge-h, 20px);
    padding: 0.12rem;
    box-sizing: border-box;
    border-radius: var(--theme-radius-chip, 4px);
    border: 1px solid color-mix(in srgb, var(--bp-slate-400) 55%, transparent);
    background: var(--bp-slate-200);
    color: var(--bp-slate-500);
    box-shadow: none;
    line-height: 1;
}

.ex-market-lock-badge svg {
    width: 0.8rem;
    height: 0.8rem;
    display: block;
}

.theme-dark .ex-market-lock-badge,
html.theme-dark .ex-market-lock-badge {
    background: var(--bp-slate-700);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--bp-slate-400);
}

/* Shared: hide odds text inside closed cells */
.ex-market.market-suspended:not(.market-locked) .ex-price:not(.ex-price--unavailable),
.ex-indibet-row.market-suspended .ex-price:not(.ex-price--unavailable),
.odds-market-row.market-suspended .ex-price:not(.ex-price--unavailable),
.ex-market.market-locked .ex-price:not(.ex-price--unavailable),
.ex-price.market-suspended:not(.ex-price--unavailable) {
    position: relative;
    box-shadow: none !important;
    pointer-events: none;
}

.ex-market.market-suspended:not(.market-locked) .ex-price:not(.ex-price--unavailable) .ex-price__value,
.ex-market.market-suspended:not(.market-locked) .ex-price:not(.ex-price--unavailable) .ex-price__size,
.ex-indibet-row.market-suspended .ex-price:not(.ex-price--unavailable) .ex-price__value,
.ex-indibet-row.market-suspended .ex-price:not(.ex-price--unavailable) .ex-price__size,
.odds-market-row.market-suspended .ex-price:not(.ex-price--unavailable) .ex-price__value,
.odds-market-row.market-suspended .ex-price:not(.ex-price--unavailable) .ex-price__size,
.ex-market.market-locked .ex-price:not(.ex-price--unavailable) .ex-price__value,
.ex-market.market-locked .ex-price:not(.ex-price--unavailable) .ex-price__size,
.ex-price.market-suspended:not(.ex-price--unavailable) .ex-price__value,
.ex-price.market-suspended:not(.ex-price--unavailable) .ex-price__size {
    opacity: 0;
}

/* Suspended cells — gray + bold ticking clock (beats sportsbook fills) */
.ex-market.market-suspended:not(.market-locked) .ex-price,
.ex-market.market-suspended:not(.market-locked) .ex-price:not(.ex-price--unavailable),
.ex-market.market-suspended:not(.market-locked) .ex-price--back:not(.ex-price--unavailable),
.ex-market.market-suspended:not(.market-locked) .ex-price--lay:not(.ex-price--unavailable),
.ex-market.market-suspended:not(.market-locked) .ex-price--draw:not(.ex-price--unavailable),
.ex-indibet-row.market-suspended .ex-price,
.ex-indibet-row.market-suspended .ex-price--back,
.ex-indibet-row.market-suspended .ex-price--lay,
.ex-indibet-row.market-suspended .ex-price--draw,
.odds-market-row.market-suspended .ex-price,
.ex-price.market-suspended:not(.ex-price--unavailable),
.odds-option.market-suspended:not(.market-locked),
.fancy-option.market-suspended:not(.market-locked),
.ex-inplay-group__list .ex-indibet-row.market-suspended .ex-indibet-outcome--sportsbook .ex-price--back:not(.ex-price--unavailable):not(.odds-price-flash-up):not(.odds-price-flash-down),
.ex-inplay-group__list .ex-indibet-row.market-suspended .ex-indibet-outcome--sportsbook .ex-price--draw:not(.ex-price--unavailable):not(.odds-price-flash-up):not(.odds-price-flash-down),
.ex-inplay-group__list .ex-indibet-row.market-suspended .ex-indibet-outcome--away .ex-price:not(.ex-price--unavailable):not(.odds-price-flash-up):not(.odds-price-flash-down),
.ex-inplay-group__list .ex-market.market-suspended:not(.market-locked) .ex-indibet-outcome--sportsbook .ex-price--back:not(.ex-price--unavailable):not(.odds-price-flash-up):not(.odds-price-flash-down),
.ex-inplay-group__list .ex-market.market-suspended:not(.market-locked) .ex-indibet-outcome--sportsbook .ex-price--draw:not(.ex-price--unavailable):not(.odds-price-flash-up):not(.odds-price-flash-down),
.ex-inplay-group__list .ex-market.market-suspended:not(.market-locked) .ex-indibet-outcome--away .ex-price:not(.ex-price--unavailable):not(.odds-price-flash-up):not(.odds-price-flash-down) {
    background: #6B7280 !important;
    background-color: #6B7280 !important;
    color: #F9FAFB !important;
}

.theme-dark .ex-market.market-suspended:not(.market-locked) .ex-price,
html.theme-dark .ex-market.market-suspended:not(.market-locked) .ex-price,
.theme-dark .ex-indibet-row.market-suspended .ex-price,
html.theme-dark .ex-indibet-row.market-suspended .ex-price,
.theme-dark .odds-market-row.market-suspended .ex-price,
html.theme-dark .odds-market-row.market-suspended .ex-price,
.theme-dark .ex-market.market-suspended:not(.market-locked) .ex-price:not(.ex-price--unavailable),
html.theme-dark .ex-market.market-suspended:not(.market-locked) .ex-price:not(.ex-price--unavailable),
.theme-dark .ex-price.market-suspended:not(.ex-price--unavailable),
html.theme-dark .ex-price.market-suspended:not(.ex-price--unavailable),
.theme-dark .odds-option.market-suspended:not(.market-locked),
html.theme-dark .odds-option.market-suspended:not(.market-locked) {
    background: #4B5563 !important;
    background-color: #4B5563 !important;
    color: #F3F4F6 !important;
}

.ex-market.market-suspended:not(.market-locked) .ex-price:not(.ex-price--unavailable)::before,
.ex-indibet-row.market-suspended .ex-price:not(.ex-price--unavailable)::before,
.odds-market-row.market-suspended .ex-price:not(.ex-price--unavailable)::before,
.ex-price.market-suspended:not(.ex-price--unavailable)::before,
.odds-option.market-suspended:not(.market-locked)::before,
.fancy-option.market-suspended:not(.market-locked)::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.2rem;
    height: 1.2rem;
    border: 2.75px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 1;
    opacity: 1;
    /* bold center pin */
    background: radial-gradient(circle at center, currentColor 2px, transparent 2.25px);
}

.ex-market.market-suspended:not(.market-locked) .ex-price:not(.ex-price--unavailable)::after,
.ex-indibet-row.market-suspended .ex-price:not(.ex-price--unavailable)::after,
.odds-market-row.market-suspended .ex-price:not(.ex-price--unavailable)::after,
.ex-price.market-suspended:not(.ex-price--unavailable)::after,
.odds-option.market-suspended:not(.market-locked)::after,
.fancy-option.market-suspended:not(.market-locked)::after {
    content: "";
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 2.75px !important;
    height: 0.44rem !important;
    margin: 0 0 0 -1.375px !important;
    padding: 0 !important;
    background: currentColor !important;
    background-color: currentColor !important;
    border: none !important;
    border-radius: var(--theme-radius-none, 0);
    transform-origin: bottom center;
    animation: ex-clock-tick 60s steps(60, end) infinite;
    z-index: 2;
    opacity: 1;
    display: block !important;
    -webkit-mask: none !important;
    mask: none !important;
}

@keyframes ex-clock-tick {
    from { transform: translateY(-100%) rotate(0deg); }
    to { transform: translateY(-100%) rotate(360deg); }
}

/* Locked / closed cells — solid gray + bold lock only (no odds / dashes) */
.ex-market.market-locked .ex-price,
.ex-market.market-locked .ex-price:not(.ex-price--unavailable),
.ex-market.market-locked a.ex-price,
.ex-indibet-row.market-locked .ex-price,
.ex-list-betting-row.market-locked .ex-price {
    position: relative !important;
    background: #6B7280 !important;
    background-color: #6B7280 !important;
    color: #F9FAFB !important;
    box-shadow: none !important;
    border: none !important;
    border-color: transparent !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

.theme-dark .ex-market.market-locked .ex-price,
html.theme-dark .ex-market.market-locked .ex-price,
.theme-dark .ex-market.market-locked .ex-price:not(.ex-price--unavailable),
html.theme-dark .ex-market.market-locked .ex-price:not(.ex-price--unavailable) {
    background: #4B5563 !important;
    background-color: #4B5563 !important;
    color: #F3F4F6 !important;
}

.ex-market.market-locked .ex-price .ex-price__value,
.ex-market.market-locked .ex-price .odds-price,
.ex-market.market-locked .ex-price .fancy-price,
.ex-market.market-locked .ex-price .odds-price-lay,
.ex-market.market-locked .ex-price .fancy-price-lay,
.ex-market.market-locked .ex-price .ex-price__size,
.ex-market.market-locked .ex-price .ex-odds-figure,
.ex-market.market-locked .ex-price .ex-odds-dir {
    opacity: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    visibility: hidden !important;
}

.ex-market.market-locked .ex-price::before {
    content: none !important;
}

.ex-market.market-locked .ex-price::after {
    /* bold padlock owned by exchange-odds-cell.css */
}

@media (prefers-reduced-motion: reduce) {
    .ex-market-suspend-badge__hand,
    .ex-market.market-suspended:not(.market-locked) .ex-price:not(.ex-price--unavailable)::after,
    .ex-price.market-suspended:not(.ex-price--unavailable)::after {
        animation: none;
    }
}

/* ─── Event list (homepage) ──────────────────────────────────────────────── */
.ex-event-list {
    margin-top: 0.5rem;
}

.ex-event {
    background: var(--ex-market-bg);
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-chip, 4px);
    margin-bottom: 0.5rem;
    overflow: hidden;
    box-shadow: var(--ex-shadow);
}

.ex-event__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--ex-market-header);
    border-bottom: 1px solid var(--ex-border);
}

.ex-event__header-main {
    flex: 1;
    min-width: 0;
}

.ex-event-favorite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--theme-radius-control, 8px);
    background: transparent;
    color: var(--ex-muted);
    padding: 0;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.ex-event-favorite:hover {
    color: #fff;
    background: var(--theme-primary, #DD3E42);
}

.ex-event-favorite.is-active:hover {
    color: #fff;
    background: var(--theme-primary, #DD3E42);
}

.ex-event-favorite.is-active {
    color: var(--bp-warning-strong);
}

.ex-event-favorite.is-active svg {
    fill: currentColor;
}

.ex-event-favorite svg {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
}

.ex-match-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ex-match-header__row .ex-event-favorite {
    width: 2rem;
    height: 2rem;
}

.ex-personalization-strips {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ex-personalization-strip {
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-panel-radius, 10px);
    padding: 0.75rem 0.85rem;
}

.ex-personalization-strip__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.ex-personalization-strip__head-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    min-width: 0;
}

.ex-personalization-strip__head-main .ex-page-head__title {
    display: block;
    flex: 0 1 auto;
}

.ex-personalization-strip__head.ex-table-section-head {
    margin-bottom: 0.75rem;
}

.ex-personalization-strip__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.ex-personalization-strip__icon svg {
    width: 1rem;
    height: 1rem;
    color: var(--ex-text-strong, var(--bp-slate-700));
    stroke: var(--ex-text-strong, var(--bp-slate-700));
}

.exchange-app .ex-personalization-strip__head .ex-page-head__title,
.exchange-app h2.ex-personalization-strip__head .ex-page-head__title,
.exchange-app .ex-personalization-strip__head-main .ex-page-head__title {
    margin: 0;
    font-family: "Inter", var(--heading-font, sans-serif);
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--ex-text-strong, var(--bp-slate-700)) !important;
}

.ex-personalization-strip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    padding: 0.05rem 0.35rem;
    border-radius: var(--theme-radius-pill, 999px);
    background: color-mix(in srgb, var(--bp-slate-500) 14%, var(--ex-surface-raised));
    border: 1px solid var(--ex-border);
    color: var(--ex-text-strong, var(--bp-slate-700));
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
}

.ex-personalization-strip__clear {
    border: none;
    border-radius: var(--theme-radius-control, 8px);
    background: transparent;
    color: var(--ex-muted, var(--bp-slate-500));
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.45rem;
    cursor: pointer;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.ex-personalization-strip__clear:hover {
    color: var(--ex-text-strong, var(--bp-slate-900));
    background: color-mix(in srgb, var(--bp-slate-500) 12%, transparent);
    box-shadow: inset 0 1px 0 var(--bp-alpha-white-35);
}

.theme-dark .ex-personalization-strip__clear:hover {
    color: var(--bp-slate-50);
    background: color-mix(in srgb, var(--bp-white) 10%, transparent);
}

.ex-personalization-strip__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ex-personalization-strip__empty {
    margin: 0;
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-sm, 0.75rem);
    line-height: 1.45;
    color: var(--ex-muted, var(--bp-slate-500));
}

.ex-personalization-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border-radius: var(--theme-radius-control, 8px);
    border: 1px solid var(--ex-border);
    background: var(--ex-surface-raised);
    overflow: hidden;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.ex-personalization-chip__link {
    display: inline-block;
    max-width: 14rem;
    padding: 0.3rem 0.35rem 0.3rem 0.65rem;
    color: var(--ex-text, var(--bp-slate-700));
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.ex-personalization-chip__link:hover {
    color: var(--ex-text-strong, var(--bp-slate-900));
    text-decoration: none;
}

.ex-personalization-chip:hover {
    border-color: color-mix(in srgb, var(--bp-slate-500) 45%, var(--ex-border));
    background: color-mix(in srgb, var(--bp-slate-500) 8%, var(--ex-surface-raised));
    box-shadow: 0 1px 3px var(--bp-alpha-ink-08);
}

.theme-dark .ex-personalization-chip:hover {
    border-color: color-mix(in srgb, var(--bp-slate-400) 40%, var(--ex-border));
    background: color-mix(in srgb, var(--bp-white) 6%, var(--ex-surface-raised));
}

.theme-dark .ex-personalization-chip__link:hover {
    color: var(--bp-slate-50);
}

.ex-personalization-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    align-self: stretch;
    border: none;
    border-left: 1px solid var(--ex-border);
    background: transparent;
    color: var(--ex-muted, var(--bp-slate-500));
    font-size: var(--theme-text-base, 0.875rem);
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

.ex-personalization-chip__remove:hover {
    color: var(--color-danger, var(--bp-danger));
    background: color-mix(in srgb, var(--color-danger, var(--bp-danger)) 8%, transparent);
}

@media (max-width: 575.98px) {
    .ex-personalization-strip__links {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0.15rem;
    }

    .ex-personalization-chip {
        flex: 0 0 auto;
    }

    .ex-personalization-chip__link {
        max-width: 11rem;
    }
}

/* ─── Homepage guest sign-in hint (below discovery strips) ─────────────── */
.ex-home-guest-hint {
    margin: 0 0 1rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--ex-panel-radius, 10px);
    border: 1px dashed var(--ex-border);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--ex-surface));
    font-size: var(--theme-text-sm, 0.75rem);
    color: var(--para-color);
    text-align: center;
}

.ex-home-guest-hint a {
    font-weight: 700;
}

/* ─── Odds movement session log (match page) ─────────────────────────────── */
.ex-odds-movement-log {
    margin-top: 1rem;
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-panel-radius, 10px);
    overflow: hidden;
}

.ex-odds-movement-log__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--ex-surface-head);
    border-bottom: 1px solid var(--ex-border);
}

.ex-odds-movement-log__header--toggle {
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: 0;
    font: inherit;
    color: inherit;
}

.ex-odds-movement-log__header-end {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.ex-odds-movement-log__chevron {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--ex-muted);
    border-bottom: 2px solid var(--ex-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    margin-top: -0.15rem;
}

.ex-odds-movement-log__header--toggle:not(.collapsed) .ex-odds-movement-log__chevron {
    transform: rotate(-135deg);
    margin-top: 0.1rem;
}

.ex-odds-movement-log__body {
    border-top: 0;
}

.ex-odds-movement-log__title {
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 700;
    color: var(--h-color);
    margin: 0;
}

.ex-odds-movement-log__count {
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    color: var(--ex-muted);
    background: var(--ex-surface-raised);
    border-radius: var(--theme-radius-pill, 999px);
    padding: 0.15rem 0.5rem;
}

.ex-odds-movement-log__empty {
    padding: 0.85rem;
    font-size: var(--theme-text-md, 0.8125rem);
    color: var(--ex-muted);
    text-align: center;
}

.ex-odds-movement-log__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.ex-odds-movement-log__item {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--ex-border);
    font-size: var(--theme-text-sm, 0.75rem);
}

.ex-odds-movement-log__item:last-child {
    border-bottom: 0;
}

.ex-odds-movement-log__time {
    color: var(--ex-muted);
    font-variant-numeric: tabular-nums;
}

.ex-odds-movement-log__selection {
    color: var(--h-color);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-odds-movement-log__price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ex-odds-movement-log__item--up .ex-odds-movement-log__price {
    color: var(--color-odds-up);
}

.ex-odds-movement-log__item--down .ex-odds-movement-log__price {
    color: var(--color-odds-down);
}

.ex-odds-movement-log--embedded {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ex-odds-movement-log--embedded .ex-odds-movement-log__meta {
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem 0.45rem 0;
}

.ex-odds-movement-log--embedded .ex-odds-movement-log__count {
    font-size: var(--theme-text-xs, 0.6875rem);
}

.ex-odds-movement-log--embedded .ex-odds-movement-log__body--embedded {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ex-odds-movement-log--embedded .ex-odds-movement-log__empty,
.ex-odds-movement-log--hub .ex-odds-movement-log__empty {
    padding: 0.65rem 0.45rem;
    font-size: var(--theme-text-xs, 0.6875rem);
}

.ex-odds-movement-log--hub .ex-odds-movement-log__empty.ex-hub-col-empty {
    padding: 1rem 0.75rem;
}

.ex-odds-movement-log--embedded .ex-odds-movement-log__list {
    max-height: none;
}

.ex-odds-movement-log--embedded .ex-odds-movement-log__item {
    padding: 0.4rem 0.45rem;
    font-size: var(--theme-text-xs, 0.6875rem);
}

.ex-match-details-col > * + * {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid color-mix(in srgb, var(--ex-border) 70%, transparent);
}

.ex-live-score-panel__cols .ex-match-details-col .ex-cricket-scorecard {
    padding: 0.35rem 0.4rem 0.45rem;
}

@media (max-width: 575.98px) {
    .ex-odds-movement-log__item {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

.ex-event__teams {
    color: var(--ex-text-strong);
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: 600;
    margin: 0;
}

.ex-event__teams a {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ex-event__team {
    transition: color 0.2s ease;
}

.ex-event__vs {
    color: var(--ex-muted);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.ex-event__teams a:hover,
.ex-event__teams a:hover .ex-event__team,
.ex-event__teams a:hover .ex-event__vs {
    color: var(--ex-back);
}

.ex-event__meta {
    color: var(--ex-muted);
    font-size: var(--theme-text-sm, 0.75rem);
}

.ex-event__badge-live {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    background: var(--theme-primary, #DD3E42);
    color: var(--bp-white);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-bold, 700);
    padding: 0.12rem 0.32rem 0.12rem 0.26rem;
    border-radius: var(--theme-radius-chip, 4px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.3rem;
    vertical-align: middle;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.22);
}

.ex-event__badge-live--scheduled {
    background: #4b5563;
    color: #e5e7eb;
}

.ex-event__badge-live--scheduled .ex-live-dot {
    background: #9ca3af;
    border-color: #9ca3af;
    box-shadow: none;
    animation: none;
}

/* Shared live dot — bright green fill, solid outer ring, glow */
.ex-live-dot {
    flex-shrink: 0;
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ex-live-green-bright, var(--bp-live-bright));
    border: 1px solid var(--ex-live-green-bright, var(--bp-live-bright));
    box-shadow:
        0 0 0 2px rgba(0, 255, 87, 0.35),
        0 0 8px var(--bp-live-bright),
        0 0 16px rgba(0, 255, 87, 0.7);
    animation: ex-live-dot-glow 0.85s ease-in-out infinite;
}

/* Chase-dot live indicator removed — use .ex-event__badge-live--active instead */
.ex-live-dots,
.ex-live-dots__dot {
    display: none !important;
}

.ex-event__body {
    padding: 0.5rem 0.75rem 0.625rem;
}

.ex-event__more {
    text-align: center;
    padding: 0.5rem;
    border-top: 1px solid var(--ex-border);
}

.ex-event__more a {
    color: var(--ex-back);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    text-decoration: none;
}

.ex-event__more a:hover {
    text-decoration: underline;
}

/* ─── Open bets panel (home schedule / indibet visual language) ───────────── */
.ex-open-bets {
    background: var(--ex-market-bg-3d, var(--ex-market-bg));
    border: 0;
    border-radius: var(--theme-radius-control, 8px);
    margin-bottom: 0.75rem;
    overflow: hidden;
    box-shadow: var(--ex-market-3d-shadow,
        inset 0 1px 0 var(--bp-alpha-white-28, rgba(255, 255, 255, 0.28)),
        inset 0 -1px 0 var(--bp-alpha-ink-06, rgba(15, 23, 42, 0.06)),
        0 0 0 1px color-mix(in srgb, var(--bp-slate-400, #94a3b8) 22%, transparent),
        0 2px 8px var(--bp-alpha-ink-06, rgba(15, 23, 42, 0.06))
    );
}

.theme-dark .ex-open-bets,
html.theme-dark .ex-open-bets {
    background: var(--ex-market-bg-3d, var(--ex-market-bg));
    box-shadow: var(--ex-market-3d-shadow);
}

.ex-open-bets__header {
    background: var(--ex-schedule-category-head-bg, var(--ex-surface-head));
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ex-schedule-category-head-border, var(--ex-border));
    color: var(--ex-schedule-category-head-text, var(--ex-text-strong, var(--bp-slate-700)));
    font-family: var(--theme-font-sans, var(--heading-font, sans-serif));
    font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
    letter-spacing: var(--theme-type-league-tracking, 0);
    text-transform: none;
    margin: 0;
}

.ex-open-bets__cols,
.ex-open-bets__row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(4.5rem, 5.5rem)
        minmax(5rem, 6.5rem)
        minmax(6rem, 7.5rem)
        minmax(5.5rem, 6.5rem)
        minmax(5.5rem, 6.5rem);
    gap: 0.75rem 1rem;
    align-items: center;
    padding: 0.35rem 0.55rem;
    font-family: var(--theme-font-sans, var(--body-font, sans-serif));
    font-size: var(--theme-type-body-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-weight-medium, 500);
}

.ex-open-bets__cols {
    background: var(--theme-match-list-columns-bg, #E2E8F0);
    border-bottom: 1px solid var(--theme-match-list-columns-border, #CBD5E1);
    box-shadow: none;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    min-height: 0;
}

.theme-dark .ex-open-bets__cols,
html.theme-dark .ex-open-bets__cols {
    background: var(--theme-match-list-columns-bg, #1E293B);
    border-bottom-color: var(--theme-match-list-columns-border, #2A3446);
}

.ex-open-bets__col-label {
    /* Table-head role — same contract as account tables / match list columns */
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-table-head-size, var(--theme-text-md, 0.8125rem));
    font-weight: var(--theme-type-table-head-weight, var(--theme-weight-bold, 700));
    letter-spacing: var(--theme-type-table-head-tracking, 0.04em);
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    color: var(--ex-text-strong, var(--bp-slate-900));
}

.theme-dark .ex-open-bets__col-label,
html.theme-dark .ex-open-bets__col-label {
    color: var(--bp-slate-100, #f1f5f9);
}

.ex-open-bets__col-label--event {
    text-align: left;
}

.ex-open-bets__col-label--type,
.ex-open-bets__col-label--stake,
.ex-open-bets__col-label--result {
    text-align: center;
}

.ex-open-bets__row {
    border-bottom: 1px solid color-mix(in srgb, var(--ex-border) 80%, transparent);
    background: var(--ex-market-bg);
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.ex-open-bets__row:nth-child(even) {
    background: var(--ex-row-alt, var(--ex-market-bg));
}

/* Light: same zebra contrast as match list (theme alt was nearly invisible) */
html.theme-light .ex-open-bets__row,
.theme-light .ex-open-bets__row {
    border-bottom-color: var(--theme-table-border, #E5EAF1);
    background: #FFFFFF;
}

html.theme-light .ex-open-bets__row:nth-child(even),
.theme-light .ex-open-bets__row:nth-child(even) {
    background: #EEF2F7;
}

.ex-open-bets__row:last-child {
    border-bottom: none;
}

.ex-open-bets__row:hover {
    background: color-mix(in srgb, var(--bp-slate-400, #94a3b8) 28%, var(--ex-market-bg)) !important;
    box-shadow: inset 3px 0 0 var(--theme-primary);
}

.theme-dark .ex-open-bets__row:hover,
html.theme-dark .ex-open-bets__row:hover {
    background: color-mix(in srgb, var(--bp-slate-500, #64748b) 36%, var(--ex-market-bg)) !important;
    box-shadow: inset 3px 0 0 var(--theme-primary);
}

.ex-open-bets__cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ex-open-bets__cell--type,
.ex-open-bets__cell--stake,
.ex-open-bets__cell--result {
    align-items: center;
    text-align: center;
    justify-content: center;
}

.ex-open-bets__cell-label {
    display: none;
    font-family: var(--theme-font-sans, var(--body-font, sans-serif));
    font-size: var(--theme-type-label-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-type-label-weight, var(--theme-weight-semibold, 600));
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ex-muted, var(--para-color));
}

.ex-open-bets__type,
.exchange-app .ex-open-bets__type.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: var(--ex-xch-cell-min-w, 2.875rem);
    max-width: none;
    height: auto;
    /* Micro status/type badge — decoupled from odds-cell height */
    min-height: 1.25rem;
    padding: 0.15rem 0.5rem !important;
    margin: 0;
    font-family: var(--theme-font-sans, var(--body-font, sans-serif));
    font-size: var(--theme-type-badge-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-type-badge-weight, var(--theme-weight-semibold, 600));
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--ex-xch-radius, 0.25rem);
}

.ex-open-bets__liability {
    color: var(--color-warning, var(--ex-draw, #d97706));
    font-variant-numeric: tabular-nums;
    font-size: var(--theme-type-body-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-weight-medium, 500);
}

.ex-open-bets__main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ex-open-bets__match {
    font-family: var(--theme-font-sans, var(--body-font, sans-serif));
    font-size: var(--theme-type-team-size, var(--theme-text-md, 0.8125rem));
    font-weight: var(--theme-type-team-weight, var(--theme-weight-semibold, 600));
    letter-spacing: 0;
    line-height: var(--theme-leading-snug, 1.25);
    color: var(--ex-text-strong, var(--h-color, var(--bp-slate-800)));
    text-decoration: none;
    border-radius: 0;
    transition: color 0.15s ease;
}

a.ex-open-bets__match:hover {
    color: var(--theme-primary);
    background: transparent;
    box-shadow: none;
    transform: none;
    text-decoration: none;
    font-weight: var(--theme-type-team-weight, var(--theme-weight-semibold, 600));
}

.ex-open-bets__row:hover .ex-open-bets__match {
    font-weight: var(--theme-type-team-weight, var(--theme-weight-semibold, 600));
}

.ex-open-bets__selection {
    font-family: var(--theme-font-sans, var(--body-font, sans-serif));
    font-size: var(--theme-type-caption-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-weight-medium, 500);
    line-height: var(--theme-leading-snug, 1.25);
    color: var(--ex-muted, var(--para-color));
}

.ex-open-bets__stake {
    font-family: var(--theme-font-sans, var(--body-font, sans-serif));
    color: var(--ex-text-strong, var(--h-color, var(--bp-slate-800)));
    font-size: var(--theme-type-body-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-money-weight, var(--theme-weight-bold, 700));
    font-variant-numeric: tabular-nums;
}

.ex-open-bets__return {
    font-family: var(--theme-font-sans, var(--body-font, sans-serif));
    color: var(--ex-text-strong, var(--h-color, var(--bp-slate-800)));
    font-weight: var(--theme-type-money-weight, var(--theme-weight-bold, 700));
    font-size: var(--theme-type-body-size, var(--theme-text-base, 0.875rem));
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    .ex-open-bets__cols {
        display: none;
    }

    /*
     * 6 cells (event/type/stake/result/exposure/profit) break a plain 2-col
     * auto-flow grid — last row is half-empty and type/stake sit uneven.
     * Explicit areas (same as open-bets sheet): hide redundant return cell.
     */
    .ex-open-bets__row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "event event"
            "type stake"
            "exposure profit";
        gap: 0.55rem 0.75rem;
        row-gap: 0.55rem;
        padding: 0.75rem 0.85rem;
        align-items: start;
    }

    .ex-open-bets__cell--event {
        grid-area: event;
    }

    .ex-open-bets__cell--type {
        grid-area: type;
        align-items: flex-start;
        text-align: left;
        justify-content: flex-start;
    }

    .ex-open-bets__cell--stake {
        grid-area: stake;
        align-items: flex-end;
        text-align: right;
        justify-content: flex-start;
    }

    .ex-open-bets__cell--result {
        display: none;
    }

    .ex-open-bets__cell--exposure {
        grid-area: exposure;
        align-items: flex-start;
        text-align: left;
        justify-content: flex-start;
        padding-top: 0.45rem;
        border-top: 1px dashed color-mix(in srgb, var(--ex-border) 85%, transparent);
    }

    .ex-open-bets__cell--profit {
        grid-area: profit;
        align-items: flex-end;
        text-align: right;
        justify-content: flex-start;
        padding-top: 0.45rem;
        border-top: 1px dashed color-mix(in srgb, var(--ex-border) 85%, transparent);
    }

    .ex-open-bets__cell-label {
        display: block;
    }
}

/* ─── Fancy market type accordion ────────────────────────────────────────── */
.ex-fancy-group__toggle {
    display: block;
    width: 100%;
    background: var(--ex-surface-head);
    color: var(--ex-runner-text) !important;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ex-border);
    text-decoration: none !important;
}

.ex-fancy-group__toggle:hover {
    background: var(--ex-row-alt);
}

/* ─── Bet slip popup (modal) ─────────────────────────────────────────────── */
.bet-slip-modal .bet-slip-modal__dialog {
    width: min(380px, calc(100vw - 1.5rem));
    max-width: min(380px, calc(100vw - 1.5rem));
    margin: 0.75rem auto;
}

.exchange-app #betSlipDock .ex-betslip-modal-body {
    padding: 0 !important;
    background: var(--ex-market-bg, var(--card-bg));
}

.bet-slip-modal .bet-slip-dock {
    --bs-modal-border-radius: var(--ex-panel-radius, 10px);
    --bs-modal-border-width: 0;
    --bs-modal-border-color: transparent;
    background: var(--ex-market-bg) !important;
    border: none !important;
    outline: none !important;
    border-radius: var(--ex-panel-radius, 10px) !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-shadow: var(--ex-inplay-panel-shadow, var(--ex-shadow));
}

.exchange-app #betSlipDock .modal-content.bet-slip-dock {
    background: var(--ex-market-bg, var(--card-bg)) !important;
}

.bet-slip-modal .bet-slip-dock .modal-header,
.bet-slip-modal .bet-slip-dock .modal-title-cust.ex-panel-head {
    border-bottom: 1px solid var(--bp-alpha-black-12);
}

.bet-slip-modal .bet-slip-dock .modal-title {
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    color: inherit;
}

.exchange-layout .bet-slip-dock {
    background: var(--ex-market-bg) !important;
    border: none !important;
    outline: none !important;
    border-radius: var(--ex-panel-radius, 10px);
    overflow: hidden;
    box-shadow: var(--ex-inplay-panel-shadow, var(--ex-shadow));
}

.exchange-layout .bet-slip-dock .offcanvas-header,
.exchange-layout .bet-slip-dock .modal-title-cust.ex-panel-head {
    border-bottom: 1px solid var(--bp-alpha-black-12);
}

.exchange-layout .bet-slip-dock .offcanvas-title {
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    color: inherit;
}

/* ─── Panel headers — In Play, Bet Slip (slate — match sidebar / schedule) ─ */
.exchange-app {
    --ex-panel-radius: 10px;
    --ex-panel-head-height: 36px;
}

.exchange-app .ex-panel-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    min-height: var(--ex-panel-head-height);
    height: var(--ex-panel-head-height);
    padding: 0 0.875rem !important;
    box-sizing: border-box;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    line-height: 1.2;
    background: var(--ex-schedule-section-head-bg, linear-gradient(180deg, var(--bp-slate-600) 0%, var(--bp-slate-700) 100%));
    color: var(--ex-schedule-section-head-text, var(--bp-slate-50)) !important;
    border-bottom: 1px solid var(--ex-schedule-section-head-border, var(--bp-alpha-black-12));
    box-shadow: var(--ex-betslip-bar-shadow, inset 0 1px 0 var(--bp-alpha-white-28), 0 2px 4px var(--bp-alpha-ink-18));
}

.exchange-app .bet-slip-dock .modal-header.ex-panel-head {
    padding: 0 0.875rem !important;
    border-radius: 0 !important;
}

.exchange-app .bet-slip-dock .offcanvas-header.ex-panel-head {
    padding: 0 0.875rem !important;
    border-radius: 0 !important;
}

.exchange-app .bet-slip-dock .ex-panel-head {
    justify-content: space-between;
}

/* Bet slip header — slate bar; square edges (parent clips rounded corners) */
.exchange-app #betSlipDock .bet-slip-dock .modal-header.ex-betslip-head {
    background: var(--ex-betslip-bar-bg, var(--ex-schedule-section-head-bg)) !important;
    color: var(--ex-betslip-bar-text, var(--bp-white)) !important;
    border-bottom: 1px solid var(--ex-schedule-section-head-border, var(--bp-alpha-black-12)) !important;
    border-radius: 0 !important;
    margin: 0;
    --bs-modal-header-border-width: 0;
    --bs-modal-header-padding: 0 0.875rem;
}

.exchange-app #betSlipDock .bet-slip-dock .modal-header.ex-betslip-head .modal-title {
    color: var(--ex-betslip-bar-text, var(--bp-white)) !important;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
}

.exchange-app #betSlipDock .bet-slip-dock .modal-header.ex-betslip-head .btn-close {
    background: transparent !important;
    background-image: var(--bs-btn-close-bg) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 0.9;
    filter: brightness(0) invert(1);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    margin: 0;
}

.exchange-app #betSlipDock .bet-slip-dock .modal-header.ex-betslip-head .btn-close::before {
    content: none !important;
    display: none !important;
}

.theme-dark .exchange-app #betSlipDock .bet-slip-dock .modal-header.ex-betslip-head {
    background: var(--ex-betslip-bar-bg, var(--ex-schedule-section-head-bg)) !important;
    color: var(--ex-betslip-bar-text, var(--bp-white)) !important;
}

.exchange-app #betSlipDock .modal-header.ex-panel-head.ex-betslip-head.ex-betslip-head--up,
.exchange-app #betSlipDock .modal-header.ex-panel-head.ex-betslip-head.ex-betslip-head--down {
    background: var(--ex-betslip-bar-bg, var(--ex-schedule-section-head-bg)) !important;
    color: var(--ex-betslip-bar-text, var(--h-color)) !important;
    box-shadow: var(--ex-betslip-bar-shadow, none);
}

.exchange-app #betSlipDock .modal-header.ex-panel-head.ex-betslip-head.ex-betslip-head--pulse {
    animation: none;
}

@keyframes ex-betslip-head-pulse {
    0%, 100% { filter: brightness(1); }
    40% { filter: brightness(1.12); }
}

.exchange-app #betSlipDock .modal-header.ex-betslip-head.ex-betslip-head--up .modal-title,
.exchange-app #betSlipDock .modal-header.ex-betslip-head.ex-betslip-head--down .modal-title {
    color: var(--bp-white) !important;
}

/* ─── Exchange bet slip (Vue) — Betfair-style quick / advanced ───────────── */
.exchange-app .ex-betslip-sheet {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    --ex-betslip-inset-x: 0.65rem;
    --ex-betslip-inset-top: 0.5rem;
}

.exchange-app #betSlipDock .ex-betslip-sheet > *:not(.ex-betslip-place) {
    margin-inline: var(--ex-betslip-inset-x);
}

.exchange-app #betSlipDock .ex-betslip-sheet > *:first-child {
    margin-top: var(--ex-betslip-inset-top);
}

.exchange-app .ex-betslip-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.exchange-app .ex-betslip-toolbar__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
}

.exchange-app .ex-betslip-toolbar__avail {
    font-size: var(--theme-text-xs, 0.6875rem);
    color: var(--para-color);
    white-space: nowrap;
}

.exchange-app .ex-betslip-toolbar__avail strong {
    color: var(--h-color);
    font-weight: 700;
}

.exchange-app .ex-betslip-mode {
    display: inline-flex;
    padding: 0.15rem;
    border-radius: var(--theme-radius-chip, 4px);
    background: var(--ex-schedule-tab-bar-bg, var(--ex-row-alt));
    border: 1px solid var(--ex-border);
}

.exchange-app .ex-betslip-mode__btn {
    border: none;
    background: transparent;
    color: var(--ex-schedule-tab-text, var(--para-color));
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.75rem;
    border-radius: var(--theme-radius-chip, 4px);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.exchange-app .ex-betslip-mode__btn.is-active {
    background: var(--ex-schedule-tab-active-bg, linear-gradient(180deg, #5b6b7f 0%, var(--bp-slate-600) 48%, var(--bp-slate-700) 100%));
    color: var(--ex-schedule-tab-active-text, var(--bp-white));
    box-shadow: var(--ex-schedule-tab-active-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 2px 4px var(--bp-alpha-ink-18));
}

.exchange-app .ex-betslip-clear {
    border: none;
    background: transparent;
    color: var(--ex-betslip-accent, var(--bp-slate-600));
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0.35rem;
}

.exchange-app .ex-betslip-clear:hover {
    color: var(--ex-betslip-accent-hover, var(--bp-slate-700));
    text-decoration: underline;
}

.exchange-app .ex-betslip-wallet {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-row-alt);
    border: 1px solid var(--ex-border);
}

.exchange-app .ex-betslip-wallet__cell {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.exchange-app .ex-betslip-wallet__cell--highlight .ex-betslip-wallet__value {
    color: var(--h-color);
}

.exchange-app .ex-betslip-wallet__label {
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ex-muted, var(--para-color));
}

.exchange-app .ex-betslip-wallet__value {
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 700;
    color: var(--h-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exchange-app .ex-betslip-selection-card {
    border-radius: var(--theme-radius-control, 8px);
    overflow: hidden;
    border: 1px solid var(--ex-border);
    background: var(--ex-market-bg);
}

.exchange-app .ex-betslip-sheet--back .ex-betslip-selection-card {
    border-left: 4px solid var(--ex-back);
}

.exchange-app .ex-betslip-sheet--lay .ex-betslip-selection-card {
    border-left: 4px solid var(--ex-lay);
}

.exchange-app .ex-betslip-selection-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem 0;
}

.exchange-app .ex-betslip-selection-card__type {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: var(--theme-radius-chip, 4px);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.exchange-app .ex-betslip-selection-card__type--back {
    background: var(--ex-back);
    color: var(--ex-back-text);
}

.exchange-app .ex-betslip-selection-card__type--lay {
    background: var(--ex-lay);
    color: var(--ex-lay-text);
}

.exchange-app .ex-betslip-selection-card__odds {
    font-size: var(--theme-text-xl-plus, 1.125rem);
    font-weight: 700;
    color: var(--h-color);
    font-variant-numeric: tabular-nums;
}

.exchange-app .ex-betslip-selection-card--compact {
    padding: 0.45rem 0.55rem;
}

.exchange-app .ex-betslip-selection-card--compact .ex-betslip-selection-card__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
}

.exchange-app .ex-betslip-selection-card--compact .ex-betslip-selection-card__runner {
    padding: 0;
    font-size: var(--theme-text-md, 0.8125rem);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.exchange-app .ex-betslip-selection-card--compact .ex-betslip-selection-card__odds {
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: var(--theme-weight-bold, 700);
    min-width: 2.75rem;
    text-align: right;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.exchange-app .ex-betslip-selection-card__odds--flash,
.exchange-app .ex-betslip-selection-card__odds.ex-betslip-odds--up,
.exchange-app .ex-betslip-selection-card__odds.ex-betslip-odds--down,
.exchange-app .ex-betslip-odds--up .ex-betslip-selection-card__odds,
.exchange-app .ex-betslip-odds--down .ex-betslip-selection-card__odds {
    border-radius: var(--theme-radius-chip, 4px);
    padding: 0.1rem 0.35rem;
}

.exchange-app .ex-betslip-messages {
    min-height: 1.75rem;
    display: flex;
    align-items: center;
}

.exchange-app .ex-betslip-messages__spacer {
    margin: 0;
    visibility: hidden;
    font-size: var(--theme-text-xs, 0.6875rem);
    line-height: 1.35;
}

/* Desktop: don't reserve empty message strip inside the slip */
@media (min-width: 992px) {
    .exchange-app .ex-betslip-messages {
        min-height: 0;
    }

    .exchange-app .ex-betslip-messages:has(.ex-betslip-messages__spacer) {
        display: none;
    }
}

.exchange-app .ex-betslip-alert--live.ex-betslip-odds--up,
.exchange-app .ex-betslip-alert--live.ex-betslip-odds--down {
    color: var(--color-odds-flash-text, var(--bp-odds-ink));
    background: color-mix(in srgb, var(--color-odds-flash, var(--bp-odds-flash)) 28%, transparent);
    border-color: color-mix(in srgb, var(--bp-warning-strong) 45%, transparent);
}

.exchange-app .ex-betslip-wallet--compact {
    margin-bottom: 0.15rem;
}

.exchange-app .ex-betslip-sheet--quick .ex-betslip-quick-summary {
    padding: 0.35rem 0.45rem;
}

.exchange-app .ex-betslip-sheet--quick .ex-betslip-stake-block__input {
    min-height: 2.25rem;
    font-size: var(--theme-text-lg-plus, 1rem) !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}

.exchange-app .ex-betslip-sheet--quick .ex-betslip-place {
    font-size: var(--theme-text-md, 0.8125rem);
}

.exchange-app .ex-betslip-selection-card__runner {
    padding: 0.35rem 0.65rem 0;
    font-size: var(--theme-text-lg-plus, 1rem);
    line-height: 1.3;
}

.exchange-app .ex-betslip-selection-card__event {
    padding: 0.15rem 0.65rem 0.55rem;
    font-size: var(--theme-text-sm, 0.75rem);
    line-height: 1.3;
}

.exchange-app .ex-betslip-stake-block__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ex-muted, var(--para-color));
}

.exchange-app .ex-betslip-stake-block__input-wrap {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--ex-border, var(--border-color));
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-input-bg, var(--card-bg));
    overflow: hidden;
}

.exchange-app .ex-betslip-stake-step {
    flex: 0 0 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--ex-surface-subhead, var(--ex-row-alt, #E2E8F0));
    color: var(--h-color);
    font-size: var(--theme-text-xl-plus, 1.125rem);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s ease, color 0.12s ease;
}

.exchange-app .ex-betslip-stake-step--dec {
    border-right: 1px solid var(--ex-border, var(--border-color));
}

.exchange-app .ex-betslip-stake-step--inc {
    border-left: 1px solid var(--ex-border, var(--border-color));
}

.exchange-app .ex-betslip-stake-step:hover:not(:disabled),
.exchange-app .ex-betslip-stake-step:focus-visible:not(:disabled) {
    color: #fff;
    background: var(--theme-primary, #DD3E42);
    outline: none;
}

.exchange-app .ex-betslip-stake-step:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.exchange-app .ex-betslip-stake-block__field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.exchange-app .ex-betslip-stake-block__input {
    width: 100%;
    height: 100%;
    min-height: var(--theme-control-height-primary, 40px);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.55rem 2.5rem 0.55rem 0.65rem !important;
    font-size: var(--theme-text-lg-plus, 1rem) !important;
    font-weight: var(--theme-weight-bold, 700);
    text-align: center !important;
    font-variant-numeric: tabular-nums;
    background: transparent !important;
    color: var(--h-color);
}

/* Desktop only: match list content fonts — leave mobile stake/runner sizes alone */
@media (min-width: 992px) {
    .exchange-app .ex-betslip-stake-block__input,
    .exchange-app .ex-betslip-sheet--quick .ex-betslip-stake-block__input {
        font-size: var(--theme-text-base, 0.875rem) !important;
    }

    .exchange-app .ex-betslip-selection-card__runner {
        font-size: var(--theme-text-md, 0.8125rem) !important;
    }

    .exchange-app .ex-betslip-selection-card__odds {
        font-size: var(--theme-text-base, 0.875rem) !important;
    }

    .exchange-app .ex-betslip-quick__chip,
    .exchange-app .ex-betslip-stake-chip {
        font-size: var(--theme-text-sm, 0.75rem) !important;
    }
}

.exchange-app .ex-betslip-stake-block__currency {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 600;
    color: var(--ex-muted, var(--para-color));
    pointer-events: none;
}

.exchange-app .ex-betslip-quick-stakes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.exchange-app .ex-betslip-stake-btn {
    flex: 1 1 calc(20% - 0.35rem);
    min-width: 3rem;
    border: 1px solid var(--ex-border);
    background: var(--ex-market-bg);
    color: var(--h-color);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    padding: 0.35rem 0.25rem;
    border-radius: var(--theme-radius-chip, 4px);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.exchange-app .ex-betslip-stake-btn:hover {
    border-color: var(--ex-betslip-accent, var(--bp-slate-600));
    color: var(--ex-betslip-accent-hover, var(--bp-slate-700));
    background: var(--ex-row-alt);
}

.exchange-app .ex-betslip-quick-summary,
.exchange-app .ex-betslip-advanced__grid {
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-control, 8px);
    overflow: hidden;
    background: var(--ex-market-bg);
}

.exchange-app .ex-betslip-summary-row,
.exchange-app .ex-betslip-advanced__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.65rem;
    font-size: var(--theme-text-md, 0.8125rem);
    border-bottom: 1px solid var(--ex-border);
}

.exchange-app .ex-betslip-summary-row:last-child,
.exchange-app .ex-betslip-advanced__row:last-child {
    border-bottom: none;
}

.exchange-app .ex-betslip-summary-row span,
.exchange-app .ex-betslip-advanced__row span {
    color: var(--para-color);
}

.exchange-app .ex-betslip-summary-row strong,
.exchange-app .ex-betslip-advanced__row strong {
    color: var(--h-color);
    font-variant-numeric: tabular-nums;
}

.exchange-app .ex-betslip-summary-row--profit strong {
    color: var(--color-success, var(--bp-success-strong));
}

.exchange-app .ex-betslip-alert {
    margin: 0;
    width: 100%;
    padding: 0.35rem 0.45rem;
    border-radius: var(--theme-radius-control, 8px);
    font-size: var(--theme-text-xs, 0.6875rem);
    line-height: 1.35;
    background: color-mix(in srgb, var(--color-warning, var(--bp-warning-strong)) 12%, transparent);
    color: var(--h-color);
    border: 1px solid color-mix(in srgb, var(--color-warning, var(--bp-warning-strong)) 35%, transparent);
}

.exchange-app .ex-betslip-alert--danger {
    background: color-mix(in srgb, var(--color-danger, #ef4444) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-danger, #ef4444) 35%, transparent);
    color: var(--color-danger, #ef4444);
}

.exchange-app .ex-betslip-alert--odds-changed {
    display: grid;
    gap: 0.15rem;
    justify-items: center;
    text-align: center;
    width: 100%;
    background: color-mix(in srgb, var(--ex-draw, #F59E0B) 15%, transparent);
    border-color: color-mix(in srgb, var(--ex-draw, #F59E0B) 55%, transparent);
    color: var(--h-color);
}

.exchange-app .ex-betslip-alert--odds-changed strong {
    color: var(--ex-draw, #F59E0B);
    font-weight: var(--theme-weight-bold, 700);
}

.exchange-app .ex-betslip-alert--odds-changed span {
    font-size: var(--theme-text-sm, 0.75rem);
}

.exchange-app .ex-betslip-alert--odds-changed small {
    color: var(--ex-muted, var(--para-color));
    font-size: var(--theme-text-xs, 0.6875rem);
}

.exchange-app .ex-betslip-alert--suspended {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fecaca;
    border-color: color-mix(in srgb, var(--bp-danger-strong) 45%, transparent);
    color: #991b1b;
    font-weight: 700;
}

.exchange-app .ex-betslip-alert--closed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    text-align: center;
    background: var(--bp-slate-200);
    border-color: color-mix(in srgb, var(--bp-slate-400) 55%, transparent);
    color: var(--bp-slate-600);
    font-weight: 700;
}

.theme-dark .exchange-app .ex-betslip-alert--suspended,
html.theme-dark .exchange-app .ex-betslip-alert--suspended {
    background: color-mix(in srgb, var(--bp-danger-strong) 35%, var(--bp-slate-800));
    border-color: color-mix(in srgb, #f87171 50%, transparent);
    color: #fecaca;
}

.theme-dark .exchange-app .ex-betslip-alert--closed,
html.theme-dark .exchange-app .ex-betslip-alert--closed {
    background: var(--bp-slate-700);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--bp-slate-400);
}

.exchange-app .ex-betslip-alert__icon {
    position: relative;
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}

.exchange-app .ex-betslip-alert__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.exchange-app .ex-betslip-alert__icon--clock .ex-betslip-status-icon__face,
.exchange-app .ex-betslip-status-icon--clock .ex-betslip-status-icon__face {
    position: absolute;
    inset: 0;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}

.exchange-app .ex-betslip-alert__icon--clock .ex-betslip-status-icon__hand,
.exchange-app .ex-betslip-status-icon--clock .ex-betslip-status-icon__hand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5px;
    height: 0.32rem;
    margin-left: -0.75px;
    background: currentColor;
    border-radius: var(--theme-radius-none, 0);
    transform-origin: bottom center;
    animation: ex-clock-tick 60s steps(60, end) infinite;
}

.exchange-app .ex-betslip-selection-card__odds--suspended,
.exchange-app .ex-betslip-selection-card__odds--locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 1.5rem;
    border-radius: var(--theme-radius-chip, 4px);
    padding: 0.15rem 0.35rem;
}

.exchange-app .ex-betslip-selection-card__odds--suspended {
    background: #f87171 !important;
    color: #7f1d1d !important;
}

.exchange-app .ex-betslip-selection-card__odds--locked {
    background: var(--bp-slate-300) !important;
    color: var(--bp-slate-500) !important;
}

.theme-dark .exchange-app .ex-betslip-selection-card__odds--suspended,
html.theme-dark .exchange-app .ex-betslip-selection-card__odds--suspended {
    background: #b91c1c !important;
    color: #fecaca !important;
}

.theme-dark .exchange-app .ex-betslip-selection-card__odds--locked,
html.theme-dark .exchange-app .ex-betslip-selection-card__odds--locked {
    background: var(--bp-slate-600) !important;
    color: var(--bp-slate-400) !important;
}

.exchange-app .ex-betslip-status-icon {
    position: relative;
    width: 0.95rem;
    height: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.exchange-app .ex-betslip-status-icon--lock svg {
    width: 0.85rem;
    height: 0.85rem;
    display: block;
}

.exchange-app .ex-betslip-selection-card--suspended .ex-betslip-selection-card__type,
.exchange-app .ex-betslip-selection-card--locked .ex-betslip-selection-card__type {
    opacity: 0.85;
}

.exchange-app .ex-betslip-place {
    width: 100%;
    margin: 0;
    min-height: var(--theme-control-height-primary, 40px);
    height: var(--theme-control-height-primary, 40px);
    padding: 0 var(--ex-ctrl-pad-x, 1rem);
    box-sizing: border-box;
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.02em;
    line-height: 1.2;
    border: none;
    border-radius: 0 !important;
    flex-shrink: 0;
}

.exchange-app .ex-betslip-place--back {
    background: var(--ex-back) !important;
    color: var(--ex-back-text) !important;
}

.exchange-app .ex-betslip-place--lay {
    background: var(--ex-lay) !important;
    color: var(--ex-lay-text) !important;
}

.exchange-app .ex-betslip-place:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.exchange-app .ex-betslip-login {
    padding: 0.65rem;
}

.exchange-app .ex-betslip-empty {
    padding: 1.25rem 0.65rem;
}

.exchange-app .ex-betslip-empty__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.65rem;
    color: var(--ex-muted, var(--para-color));
    opacity: 0.75;
}

.exchange-app .ex-betslip-empty__icon svg {
    width: 100%;
    height: 100%;
}

.exchange-app .ex-betslip-login__title {
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 600;
    color: var(--h-color);
    margin-bottom: 0.5rem;
}

.exchange-app .ex-betslip-selection-card__odds--flash.ex-betslip-odds--up {
    animation: ex-betslip-odds-flash-up var(--ex-odds-flash-cycle-ms, 950ms) cubic-bezier(0.16, 1, 0.3, 1);
}

.exchange-app .ex-betslip-selection-card__odds--flash.ex-betslip-odds--down {
    animation: ex-betslip-odds-flash-down var(--ex-odds-flash-cycle-ms, 950ms) cubic-bezier(0.16, 1, 0.3, 1);
}

/* Same directional green/pink language as odds cells — no scale bounce. */
@keyframes ex-betslip-odds-flash-up {
    0%,
    35% {
        background-color: var(--color-odds-flash-up, var(--ex-odds-flash-up, #15803D));
        color: #ffffff;
        transform: none;
        box-shadow: none;
    }
    100% {
        background-color: transparent;
        color: var(--h-color);
        transform: none;
        box-shadow: none;
    }
}

@keyframes ex-betslip-odds-flash-down {
    0%,
    35% {
        background-color: var(--color-odds-flash-down, var(--ex-odds-flash-down, #DD3E42));
        color: #ffffff;
        transform: none;
        box-shadow: none;
    }
    100% {
        background-color: transparent;
        color: var(--h-color);
        transform: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .exchange-app .ex-betslip-selection-card__odds--flash.ex-betslip-odds--up,
    .exchange-app .ex-betslip-selection-card__odds--flash.ex-betslip-odds--down {
        animation: none;
        transform: none;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .exchange-app .ex-betslip-selection-card__odds--flash.ex-betslip-odds--up {
        background-color: color-mix(in srgb, var(--color-odds-flash-up, var(--bp-success-light)) 30%, transparent);
    }

    .exchange-app .ex-betslip-selection-card__odds--flash.ex-betslip-odds--down {
        background-color: color-mix(in srgb, var(--color-odds-flash-down, var(--bp-danger-light)) 30%, transparent);
    }
}

.exchange-app .ex-betslip-live-note {
    display: none;
}

/* Bet placement confirmation receipt */
.exchange-app .ex-betslip-confirmation {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.65rem 0.65rem 0.75rem;
}

.exchange-app .ex-betslip-confirmation__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bp-success-strong) 0%, #15803d 100%);
    color: var(--bp-white);
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.35);
}

.exchange-app .ex-betslip-confirmation__badge svg {
    width: 1.35rem;
    height: 1.35rem;
}

.exchange-app .ex-betslip-confirmation__title {
    margin: 0;
    text-align: center;
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 700;
    color: #15803d;
}

.exchange-app .ex-betslip-confirmation__runner {
    margin: 0;
    text-align: center;
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 700;
    color: var(--h-color);
}

.exchange-app .ex-betslip-confirmation__match {
    margin: -0.35rem 0 0;
    text-align: center;
    font-size: var(--theme-text-sm, 0.75rem);
    color: var(--para-color);
}

.exchange-app .ex-betslip-confirmation__details {
    margin: 0;
    padding: 0.75rem;
    border-radius: var(--theme-radius-control, 8px);
    background: color-mix(in srgb, var(--bp-success-strong) 8%, var(--ex-surface, var(--card-bg)));
    border: 1px solid color-mix(in srgb, var(--bp-success-strong) 28%, transparent);
}

.exchange-app .ex-betslip-confirmation__row {
    display: grid;
    grid-template-columns: minmax(5.75rem, 36%) minmax(0, 1fr);
    gap: 0.35rem 0.65rem;
    align-items: center;
    padding: 0.35rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ex-border, var(--border-color)) 65%, transparent);
}

.exchange-app .ex-betslip-confirmation__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.exchange-app .ex-betslip-confirmation__row dt {
    margin: 0;
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--para-color);
}

.exchange-app .ex-betslip-confirmation__row dd {
    margin: 0;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    color: var(--h-color);
    text-align: right;
    justify-self: stretch;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.exchange-app .ex-betslip-confirmation__row--highlight {
    background: color-mix(in srgb, var(--bp-success-strong) 10%, transparent);
    margin: 0 -0.5rem;
    padding: 0.5rem;
    border-radius: var(--theme-radius-control, 8px);
    border-bottom: none;
}

.exchange-app .ex-betslip-confirmation__row--highlight dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem 0.5rem;
}

/* Long ledger UUID — stack label + value for clean alignment */
.exchange-app .ex-betslip-confirmation__row--ledger {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    align-items: stretch;
}

.exchange-app .ex-betslip-confirmation__row--ledger dt {
    text-align: left;
}

.exchange-app .ex-betslip-confirmation__row--ledger dd {
    text-align: left;
    display: block;
}

.exchange-app .ex-betslip-confirmation__row--ledger .ex-betslip-confirmation__code {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.exchange-app .ex-betslip-confirmation__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 700;
    color: #14532d;
    background: var(--bp-white);
    padding: 0.15rem 0.35rem;
    border-radius: var(--theme-radius-chip, 4px);
    border: 1px solid color-mix(in srgb, var(--bp-success-strong) 35%, transparent);
}

.exchange-app .ex-betslip-confirmation__code--small {
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
}

.exchange-app .ex-betslip-confirmation__copy {
    border: 1px solid color-mix(in srgb, var(--bp-success-strong) 45%, transparent);
    background: var(--bp-white);
    color: #15803d;
    border-radius: var(--theme-radius-pill, 999px);
    padding: 0.15rem 0.55rem;
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    cursor: pointer;
}

.exchange-app .ex-betslip-confirmation__copy:hover {
    background: #f0fdf4;
}

.exchange-app .ex-betslip-confirmation__note {
    margin: 0;
    font-size: var(--theme-text-xs, 0.6875rem);
    line-height: 1.45;
    text-align: center;
    color: var(--para-color);
}

.exchange-app .ex-betslip-confirmation__done {
    width: 100%;
    min-height: 2.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--bp-success-strong) 0%, #15803d 100%) !important;
    border: none !important;
    color: var(--bp-white) !important;
}

.exchange-app .ex-betslip-confirmation__done:hover {
    filter: brightness(1.05);
}

.exchange-app .ex-price--empty {
    opacity: 0.45;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .exchange-app .ex-betslip-wallet {
        grid-template-columns: 1fr;
    }

    .exchange-app .ex-betslip-stake-btn {
        flex: 1 1 calc(33.333% - 0.35rem);
    }
}

.exchange-app .ex-panel-head .modal-title,
.exchange-app .ex-panel-head .offcanvas-title {
    color: inherit !important;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2 !important;
    margin: 0;
    padding: 0;
}

.exchange-app .ex-panel-head__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.exchange-app .ex-panel-head .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.theme-dark .exchange-app .ex-panel-head {
    background: var(--ex-schedule-section-head-bg, linear-gradient(180deg, #2d3a50 0%, var(--bp-slate-800) 100%));
    border-bottom-color: var(--ex-schedule-section-head-border, var(--bp-alpha-black-28));
    box-shadow: var(--ex-betslip-bar-shadow, inset 0 1px 0 var(--bp-alpha-white-14), 0 2px 8px var(--bp-alpha-black-35));
}

.exchange-app .ex-panel-head,
.exchange-app .ex-panel-head .modal-title,
.exchange-app .ex-panel-head .offcanvas-title {
    color: var(--bp-white) !important;
}

@media (min-width: 992px) {
    .exchange-layout .bet-slip-dock {
        border: none !important;
        outline: none !important;
        border-radius: var(--ex-panel-radius, 10px) !important;
        overflow: hidden !important;
        box-shadow: var(--ex-inplay-panel-shadow, var(--ex-shadow)) !important;
    }
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ex-inplay-page__toolbar.ex-panel-head {
        height: auto;
        min-height: var(--ex-panel-head-height);
        flex-wrap: wrap;
        row-gap: 0.25rem;
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
    }

    .ex-inplay-page__toolbar-label {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ex-inplay-page__count {
        flex-shrink: 0;
        margin-left: auto;
    }

    .ex-inplay-group__head {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .ex-inplay-group__name {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ex-event {
        overflow: visible;
    }

    .ex-market__head-row,
    .ex-market__runner-row {
        grid-template-columns: minmax(0, 1fr) minmax(3.25rem, 4.25rem) minmax(3.25rem, 4.25rem);
    }

    .ex-market__head-row--fancy,
    .ex-market__runner-row--fancy {
        grid-template-columns: minmax(0, 1fr) minmax(3.25rem, 4.25rem) minmax(3.25rem, 4.25rem);
    }
}

@media (max-width: 575.98px) {
    .ex-event__teams {
        font-size: var(--theme-text-md, 0.8125rem);
    }

    .ex-event__header {
        padding: 0.4rem 0.5rem;
    }
}

@keyframes ex-live-dot-glow {
    0%, 100% {
        background: var(--bp-live-bright);
        border-color: var(--bp-live-bright);
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 0 2px rgba(0, 255, 87, 0.35),
            0 0 8px var(--bp-live-bright),
            0 0 16px rgba(0, 255, 87, 0.7);
    }
    50% {
        background: #b8ffc9;
        border-color: var(--bp-white);
        opacity: 1;
        transform: scale(1.55);
        box-shadow:
            0 0 0 4px rgba(0, 255, 87, 0.45),
            0 0 14px var(--bp-live-bright),
            0 0 28px rgba(0, 255, 87, 0.85),
            0 0 40px rgba(0, 255, 87, 0.55);
    }
}

/* ─── Trending + Popular horizontal strips (shared layout) ───────────────── */
.ex-trending-strip,
.ex-popular-strip {
    --ex-strip-label-width: 6.5rem;
    margin-bottom: 0.75rem;
}

.ex-trending-strip__inner,
.ex-popular-strip__inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 3.5rem;
    min-height: 3.5rem;
    max-height: 3.5rem;
    background: var(--ex-market-header);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-panel-radius, 10px);
    overflow: hidden;
}

.ex-trending-strip__label,
.ex-popular-strip__label {
    display: flex;
    align-items: center;
    align-self: stretch;
    flex: 0 0 var(--ex-strip-label-width);
    width: var(--ex-strip-label-width);
    min-width: var(--ex-strip-label-width);
    max-width: var(--ex-strip-label-width);
    gap: 0.4rem;
    height: 3.5rem;
    min-height: 3.5rem;
    max-height: 3.5rem;
    padding: 0.5rem 0.65rem;
    color: var(--bp-white);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-right: 1px solid var(--ex-border);
    box-sizing: border-box;
}

.ex-trending-strip__label {
    background: color-mix(in srgb, var(--color-warning, var(--bp-warning-strong)) 88%, var(--bp-black));
}

.ex-popular-strip__label {
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.ex-trending-strip__label-icon svg,
.ex-popular-strip__label-icon svg {
    width: 0.875rem;
    height: 0.875rem;
}

.ex-trending-strip__count,
.ex-popular-strip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    padding: 0.05rem 0.35rem;
    border-radius: var(--theme-radius-pill, 999px);
    background: var(--bp-alpha-white-20);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
}

.ex-trending-strip__scroll,
.ex-popular-strip__scroll {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 3.5rem;
    min-height: 3.5rem;
    max-height: 3.5rem;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.ex-trending-strip__item,
.ex-popular-strip__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    height: 3.5rem;
    min-height: 3.5rem;
    max-height: 3.5rem;
    overflow: hidden;
    padding: 0.45rem 0.875rem;
    color: var(--ex-runner-text);
    text-decoration: none;
    font-size: var(--theme-text-md, 0.8125rem);
    white-space: nowrap;
    border-right: 1px solid var(--ex-border);
    box-sizing: border-box;
    transition: background 0.2s ease, color 0.2s ease;
}

.ex-trending-strip__teams,
.ex-popular-strip__teams,
.ex-popular-strip__question {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: var(--theme-text-md, 0.8125rem);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ex-trending-strip__team,
.ex-popular-strip__team {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ex-trending-strip__vs,
.ex-popular-strip__vs {
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    opacity: 0.65;
}

.ex-trending-strip__meta,
.ex-popular-strip__meta {
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 500;
    color: var(--para-color);
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ex-trending-strip__live-dot {
    display: inline-block;
    margin-bottom: 0.15rem;
}

.ex-trending-strip__empty,
.ex-popular-strip__empty {
    display: flex;
    align-items: center;
    height: 3.5rem;
    min-height: 3.5rem;
    max-height: 3.5rem;
    padding: 0.5rem 0.875rem;
    font-size: var(--theme-text-sm, 0.75rem);
    color: var(--para-color);
    white-space: normal;
    box-sizing: border-box;
}

.ex-trending-strip__item:hover,
.ex-popular-strip__item:hover {
    background: var(--ex-inplay-strip-item-hover, var(--ex-row-alt));
    color: var(--ex-inplay-strip-item-hover-text, var(--color-primary));
    text-decoration: none;
}

.ex-trending-strip__item:hover .ex-trending-strip__meta,
.ex-popular-strip__item:hover .ex-popular-strip__meta {
    color: var(--para-color);
}

@media (max-width: 575.98px) {
    .ex-trending-strip__inner,
    .ex-popular-strip__inner,
    .ex-trending-strip__label,
    .ex-popular-strip__label,
    .ex-trending-strip__scroll,
    .ex-popular-strip__scroll,
    .ex-trending-strip__item,
    .ex-popular-strip__item,
    .ex-trending-strip__empty,
    .ex-popular-strip__empty {
        height: 3.25rem;
        min-height: 3.25rem;
        max-height: 3.25rem;
    }

    .ex-trending-strip__label,
    .ex-popular-strip__label {
        padding: 0.45rem 0.55rem;
    }

    .ex-trending-strip__team,
    .ex-popular-strip__team {
        max-width: 5.5rem;
    }

    .ex-popular-strip__question {
        max-width: 10rem;
    }
}

/* ─── Trending matches horizontal strip (GET /trending-matches) ──────────── */

/* ─── User dashboard exchange theme ──────────────────────────────────────── */
.exchange-user-layout .ex-user-page-title-wrap {
    margin-bottom: 1rem;
}

.exchange-user-layout .ex-user-page-title,
.exchange-user-layout h1.ex-user-page-title,
.exchange-user-layout h4.ex-user-page-title {
    margin: 0;
    font-family: "Inter", var(--heading-font, sans-serif);
    font-size: var(--theme-text-xl-plus, 1.125rem);
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ex-text-strong);
}

.exchange-user-layout .ex-user-panel {
    background: var(--ex-market-bg);
}

.exchange-user-layout .ex-table-wrap {
    background: var(--ex-market-bg-3d, var(--ex-market-bg));
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-control, 8px);
    overflow: hidden;
    box-shadow: var(--ex-market-3d-shadow, var(--ex-shadow));
}

.exchange-user-layout .ex-table {
    margin-bottom: 0;
    color: var(--ex-runner-text);
}

.exchange-user-layout .ex-table thead th {
    background: var(--ex-market-header);
    color: var(--h-color);
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    border-color: var(--ex-border);
    padding: 0.625rem 0.75rem;
}

.exchange-user-layout .ex-table tbody td {
    border-color: var(--ex-border);
    font-size: var(--theme-text-md, 0.8125rem);
    vertical-align: middle;
}

.exchange-user-layout .ex-table tbody tr:nth-child(even) {
    background: var(--ex-row-alt);
}

.exchange-user-layout .ex-user-filter-card {
    background: var(--ex-market-bg) !important;
    border: 1px solid var(--ex-border) !important;
}

.exchange-user-layout .ex-user-filter-card .form-control,
.exchange-user-layout .ex-user-filter-card .form-select {
    background: var(--ex-market-header);
    border-color: var(--ex-border);
    color: var(--ex-runner-text);
}

.exchange-user-layout .ex-inplay-page--home-upcoming {
    margin-top: 0.75rem;
}

.exchange-account-layout .ex-dashboard-page .container-sub > .ex-personalization-strips,
.exchange-account-layout .ex-dashboard-page .container-sub > .ex-trending-strip,
.exchange-account-layout .ex-dashboard-page .container-sub > .ex-popular-strip,
.exchange-account-layout .ex-dashboard-page .container-sub > .ex-inplay-page,
.exchange-account-layout .ex-home-trading-page .container-sub > .ex-schedule-subnav,
.exchange-account-layout .ex-home-trading-page .container-sub > .ex-inplay-page,
.exchange-account-layout .ex-home-trading-page .container-sub > .ex-personalization-strips {
    margin-top: 0.75rem;
}

.exchange-account-layout .ex-home-trading-page .container-sub > .ex-schedule-subnav {
    margin-top: 0;
}

.exchange-account-layout .ex-dashboard-page .container-sub > .ex-home-guest-hint {
    margin-top: 0.75rem;
}

.exchange-user-layout .ex-deposit-wizard .list-group-item {
    background: var(--ex-market-bg);
    border-color: var(--ex-border);
    color: var(--ex-runner-text);
}

.exchange-user-layout .ex-deposit-wizard .list-group-item.active {
    background: var(--ex-tab-active);
    border-color: var(--ex-tab-active);
}

/* ─── Deposit wizard (UPI-first UX) ─────────────────────────────────────── */
.ex-deposit-wizard {
    margin-top: 0.25rem;
}

.ex-deposit-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-bottom: 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--ex-panel-radius, 10px);
    border: 1px solid var(--ex-border);
    background: var(--ex-surface-raised);
}

.ex-deposit-steps__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: var(--theme-weight-medium, 500);
    color: var(--para-color);
}

.ex-deposit-steps__item.is-active {
    color: var(--h-color);
}

.ex-deposit-steps__item.is-current {
    color: var(--ex-text-strong, var(--bp-slate-900));
    font-weight: var(--theme-weight-semibold, 600);
}

.ex-deposit-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: var(--theme-radius-pill, 999px);
    border: 1px solid var(--ex-border);
    background: var(--ex-surface);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-bold, 700);
}

.ex-deposit-steps__item.is-active .ex-deposit-steps__num {
    border-color: color-mix(in srgb, var(--bp-slate-500) 40%, var(--ex-border));
    color: var(--ex-text-strong, var(--bp-slate-700));
}

.ex-deposit-steps__item.is-current .ex-deposit-steps__num {
    background: var(--bp-slate-600);
    border-color: var(--bp-slate-600);
    color: var(--bp-white);
}

.ex-deposit-steps__sep {
    flex: 1 1 0.75rem;
    min-width: 0.75rem;
    height: 1px;
    background: var(--ex-border);
}

.ex-deposit-panel {
    padding: 1.25rem;
    border-radius: var(--ex-panel-radius, 10px);
    border: 1px solid var(--ex-border);
    background: var(--ex-surface);
}

.ex-deposit-panel__head {
    margin-bottom: 1.25rem;
}

.ex-deposit-panel__head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.ex-deposit-panel__title {
    margin: 0 0 0.35rem;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
    letter-spacing: var(--theme-type-league-tracking, 0);
    text-transform: none;
    line-height: var(--theme-leading-snug, 1.25);
    color: var(--ex-text-strong, var(--bp-slate-700));
}

.ex-deposit-panel__subtitle {
    margin: 0;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-body-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-weight-medium, 500);
    line-height: var(--theme-leading-body, 1.45);
    color: var(--para-color);
}

.ex-deposit-panel__back {
    border: 1px solid var(--ex-border);
    background: var(--ex-surface-raised);
    color: var(--h-color);
    border-radius: var(--theme-radius-pill, 999px);
    padding: 0.35rem 0.85rem;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-button-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-button-weight, var(--theme-weight-semibold, 600));
    cursor: pointer;
}

.ex-deposit-panel__back:hover {
    color: var(--ex-text-strong, var(--bp-slate-900));
    border-color: color-mix(in srgb, var(--bp-slate-500) 40%, var(--ex-border));
    background: color-mix(in srgb, var(--bp-slate-500) 10%, var(--ex-surface-raised));
}

.ex-deposit-panel__actions {
    margin-top: 1.25rem;
}

.ex-deposit-panel__btn {
    min-width: 10rem;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-button-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-button-weight, var(--theme-weight-semibold, 600));
}

.ex-deposit-amount-form__label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-label-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-type-label-weight, var(--theme-weight-semibold, 600));
    letter-spacing: 0.02em;
    color: var(--h-color);
}

.ex-deposit-amount-form__field {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-control, 8px);
    overflow: hidden;
    background: var(--ex-surface-raised);
}

.ex-deposit-amount-form__symbol {
    display: inline-flex;
    align-items: center;
    padding: 0 0.85rem;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: var(--theme-weight-semibold, 600);
    color: var(--para-color);
    border-right: 1px solid var(--ex-border);
    background: var(--ex-surface);
}

.ex-deposit-amount-form__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--h-color);
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: var(--theme-type-money-weight, var(--theme-weight-bold, 700));
    font-variant-numeric: tabular-nums;
    line-height: var(--theme-leading-snug, 1.25);
    padding: 0.75rem 0.85rem;
}

.ex-deposit-amount-form__input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bp-slate-500) 30%, transparent);
}

.ex-deposit-quick-amounts {
    margin-top: 1rem;
}

.ex-deposit-quick-amounts__label {
    display: block;
    margin-bottom: 0.45rem;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-label-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-type-label-weight, var(--theme-weight-semibold, 600));
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--para-color);
}

.ex-deposit-quick-amounts__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ex-deposit-quick-amounts__chip {
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-pill, 999px);
    background: var(--ex-surface-raised);
    color: var(--h-color);
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: var(--theme-weight-medium, 500);
    padding: 0.35rem 0.75rem;
    cursor: pointer;
}

.ex-deposit-quick-amounts__chip:hover,
.ex-deposit-quick-amounts__chip.is-active {
    color: var(--theme-primary);
    border-color: var(--theme-primary-border);
    background: var(--theme-primary-soft);
    box-shadow:
        inset 0 1px 0 var(--bp-alpha-white-40),
        0 1px 3px var(--bp-alpha-orange-12);
}

.ex-deposit-quick-amounts__chip.is-active {
    background: var(--theme-primary-soft);
    color: var(--theme-primary-active);
    border-color: var(--theme-primary);
    font-weight: var(--theme-weight-semibold, 600);
}

.ex-deposit-gateway-group + .ex-deposit-gateway-group {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ex-border);
}

.ex-deposit-gateway-group__title {
    margin: 0 0 0.85rem;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
    color: var(--h-color);
}

.ex-deposit-gateway-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-panel, 8px);
    background: var(--ex-surface-raised);
    overflow: hidden;
}

.ex-deposit-gateway-card__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.5rem;
    padding: 0.85rem;
    background: var(--ex-surface);
    border-bottom: 1px solid var(--ex-border);
}

.ex-deposit-gateway-card__thumb img {
    max-height: 2.75rem;
    max-width: 100%;
    object-fit: contain;
}

.ex-deposit-gateway-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.45rem;
    padding: 0.85rem;
}

.ex-deposit-gateway-card__name {
    margin: 0;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: var(--theme-weight-semibold, 600);
    line-height: var(--theme-leading-snug, 1.25);
    color: var(--h-color);
}

.ex-deposit-gateway-card__range {
    margin: 0;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-caption-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-weight-medium, 500);
    color: var(--para-color);
}

.ex-deposit-gateway-card__badge {
    align-self: flex-start;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-badge-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-type-badge-weight, var(--theme-weight-semibold, 600));
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ex-text-strong, var(--bp-slate-700));
    background: color-mix(in srgb, var(--bp-slate-500) 14%, var(--ex-surface));
    border-radius: var(--theme-radius-pill, 999px);
    padding: 0.15rem 0.5rem;
}

.ex-deposit-gateway-card__btn {
    margin-top: auto;
    width: 100%;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-button-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-button-weight, var(--theme-weight-semibold, 600));
}

.ex-deposit-gateway-card--summary {
    padding-bottom: 0.85rem;
}

.ex-deposit-gateway-card--summary .ex-deposit-gateway-card__name {
    padding: 0 0.85rem;
    text-align: center;
}

.ex-deposit-manual-details {
    margin-top: 1rem;
    padding: 0.85rem;
    border-radius: var(--theme-radius-control, 8px);
    border: 1px dashed var(--ex-border);
    background: var(--ex-surface-raised);
}

.ex-deposit-manual-details__title {
    margin: 0 0 0.5rem;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-label-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-type-label-weight, var(--theme-weight-semibold, 600));
    color: var(--h-color);
}

.ex-deposit-manual-details__text {
    margin: 0 0 0.65rem;
    padding: 0.65rem;
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    color: var(--h-color);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: var(--theme-weight-medium, 500);
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    white-space: pre-wrap;
    word-break: break-word;
}

.ex-deposit-manual-details__copy {
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-surface);
    color: var(--ex-text-strong, var(--bp-slate-700));
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-button-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-button-weight, var(--theme-weight-semibold, 600));
    padding: 0.35rem 0.85rem;
    cursor: pointer;
}

.ex-deposit-manual-details__copy:hover {
    border-color: color-mix(in srgb, var(--bp-slate-500) 40%, var(--ex-border));
    background: color-mix(in srgb, var(--bp-slate-500) 12%, transparent);
}

.ex-deposit-manual-details__hint {
    margin: 0.65rem 0 0;
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-type-caption-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-weight-medium, 500);
    color: var(--para-color);
    line-height: var(--theme-leading-body, 1.45);
}

.ex-deposit-summary.list-group {
    border-radius: var(--theme-radius-control, 8px);
    overflow: hidden;
}

.ex-deposit-summary__head {
    font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: var(--theme-weight-semibold, 600);
}

.ex-deposit-summary__charge {
    color: var(--color-danger, #dc3545) !important;
    font-weight: var(--theme-weight-semibold, 600);
}

.ex-deposit-summary__payable {
    color: var(--color-success, #198754) !important;
    font-weight: var(--theme-type-money-weight, var(--theme-weight-bold, 700));
    font-variant-numeric: tabular-nums;
}

.ex-deposit-confirm-form__field {
    margin-top: 1rem;
}

.ex-deposit-confirm-form__field .form-control {
    background: var(--ex-surface-raised);
    border-color: var(--ex-border);
    color: var(--h-color);
}

@media (max-width: 575.98px) {
    .ex-deposit-steps__sep {
        display: none;
    }

    .ex-deposit-steps {
        justify-content: space-between;
    }

    .ex-deposit-panel {
        padding: 1rem;
    }
}

.ex-wallet-bar {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: var(--theme-text-md, 0.8125rem);
}

/* ─── Home promo banner popup ───────────────────────────────────────────── */
html.ex-home-banner-open {
    overflow: hidden;
}

.ex-home-banner-popup {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ex-home-banner-popup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ex-home-banner-popup[hidden] {
    display: none !important;
}

.ex-home-banner-popup.is-open[hidden] {
    display: flex !important;
}

.ex-home-banner-popup__backdrop {
    position: absolute;
    inset: 0;
    background: var(--bp-alpha-ink-55);
    cursor: pointer;
}

.theme-dark .ex-home-banner-popup__backdrop {
    background: rgba(0, 0, 0, 0.65);
}

.ex-home-banner-popup__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 52rem);
    max-height: min(80vh, 28rem);
    border-radius: var(--theme-radius-control, 8px);
    overflow: hidden;
    background: var(--bp-slate-800);
    box-shadow:
        0 12px 40px var(--bp-alpha-ink-35),
        0 4px 12px rgba(15, 23, 42, 0.2);
    transform: translateY(0.75rem) scale(0.98);
    transition: transform 0.2s ease;
}

.ex-home-banner-popup.is-open .ex-home-banner-popup__panel {
    transform: translateY(0) scale(1);
}

.ex-home-banner-popup__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--theme-radius-pill, 999px);
    background: rgba(15, 23, 42, 0.72);
    color: var(--bp-white);
    cursor: pointer;
    box-shadow: 0 1px 4px var(--bp-alpha-black-35);
    transition: background 0.15s ease, transform 0.15s ease;
}

.ex-home-banner-popup__close:hover {
    background: rgba(15, 23, 42, 0.9);
    transform: scale(1.05);
}

.ex-home-banner-popup__close:focus-visible {
    outline: 2px solid var(--bp-white);
    outline-offset: 2px;
}

.ex-home-banner-popup__close svg {
    width: 1.125rem;
    height: 1.125rem;
    stroke: currentColor;
}

.ex-home-banner-popup__link {
    display: block;
    text-decoration: none !important;
    line-height: 0;
}

.ex-home-banner-popup__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(70vh, 24rem);
    object-fit: cover;
    object-position: center;
}

@media (max-width: 575px) {
    .ex-home-banner-popup {
        padding: 0.75rem;
        align-items: flex-end;
    }

    .ex-home-banner-popup__panel {
        width: 100%;
        max-height: min(70vh, 22rem);
        /* Reserve right gutter so close control does not sit on baked-in copy/CTA */
        padding-right: 2.5rem;
        box-sizing: border-box;
    }

    .ex-home-banner-popup__img {
        /* Raster JPG: show full frame — do not crop baked-in text/CTA */
        max-height: min(55vh, 18rem);
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    .ex-home-banner-popup__close {
        top: 0.55rem;
        right: 0.55rem;
    }
}

/* ─── In-Play page inline banner (admin Advertise, dismissible) ──────────── */
.ex-inplay-page-banner {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 1rem;
    overflow: hidden;
    border-radius: var(--theme-radius-control, 8px);
    background: linear-gradient(180deg, #e8eef5 0%, #dce3ec 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 2px 8px var(--bp-alpha-ink-08);
    transition: opacity 0.2s ease, transform 0.2s ease, margin 0.2s ease, max-height 0.2s ease;
    max-height: 22rem;
}

/* Compact inline strip — match main table / shell column width exactly */
.ex-inplay-page-banner.ex-inplay-page-banner--inline {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 13.5rem;
    margin: 0 0 0.65rem;
    box-sizing: border-box;
}

.ex-inplay-page-banner.ex-inplay-page-banner--inline .ex-inplay-page-banner__img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0;
    height: 13.5rem;
    max-height: 13.5rem;
    object-fit: cover;
    object-position: center top;
    background: transparent;
    box-sizing: border-box;
}

.ex-inplay-page-banner.is-dismissed {
    opacity: 0;
    transform: translateY(-0.35rem);
    margin-bottom: 0;
    max-height: 0;
    pointer-events: none;
}

.theme-dark .ex-inplay-page-banner,
html.theme-dark .ex-inplay-page-banner {
    background: linear-gradient(180deg, #2d3a50 0%, #243044 100%);
    box-shadow:
        inset 0 1px 0 var(--bp-alpha-white-10),
        0 2px 10px var(--bp-alpha-black-28);
}

.ex-inplay-page-banner__link {
    display: block;
    line-height: 0;
}

.ex-inplay-page-banner__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 20rem;
    min-height: 12rem;
    object-fit: cover;
    object-position: center;
}

/* Center popup advertise */
.ex-modal-banner {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

.ex-modal-banner[hidden] {
    display: none !important;
}

.ex-modal-banner.is-dismissed {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ex-modal-banner__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 20, 0.72);
    cursor: pointer;
}

.ex-modal-banner__dialog {
    position: relative;
    z-index: 1;
    width: min(44rem, calc(100vw - 2rem));
    max-height: min(80vh, 32rem);
    border-radius: var(--theme-radius-control, 8px);
    overflow: hidden;
    background: #0b1220;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.ex-modal-banner__link {
    display: block;
    line-height: 0;
}

.ex-modal-banner__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(80vh, 32rem);
    object-fit: contain;
    object-position: center;
    background: #0b1220;
}

.ex-modal-banner__close {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--theme-radius-pill, 999px);
    background: rgba(15, 23, 42, 0.8);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.ex-modal-banner__close:hover {
    background: rgba(15, 23, 42, 0.95);
    transform: scale(1.05);
}

.ex-modal-banner__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ex-modal-banner__close svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.5;
}

html.ex-modal-banner-open,
body.ex-modal-banner-open {
    overflow: hidden;
}

@media (max-width: 575.98px) {
    /*
     * WP1 Priority 1 — mobile promo framing (raster JPG, baked-in text/CTA).
     * Show the full asset (no cover-crop). Higher specificity beats
     * exchange-home-density.css cover/fixed-height rules on home without
     * editing that file. Do not attempt CSS text wrapping on the image.
     */
    .ex-inplay-page-banner,
    body.ex-home-dense .ex-inplay-page-banner {
        max-height: none;
        /* Right gutter keeps close (X) off baked-in "SPORTS" / CTA */
        padding: 0.25rem 2.5rem 0.25rem 0.25rem;
        box-sizing: border-box;
    }

    .ex-inplay-page-banner.ex-inplay-page-banner--inline,
    body.ex-home-dense .ex-inplay-page-banner.ex-inplay-page-banner--inline {
        max-height: 7.5rem;
        padding: 0;
    }

    .ex-inplay-page-banner .ex-inplay-page-banner__img,
    body.ex-home-dense .ex-inplay-page-banner .ex-inplay-page-banner__img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        object-fit: contain;
        object-position: center;
    }

    .ex-inplay-page-banner.ex-inplay-page-banner--inline .ex-inplay-page-banner__img,
    body.ex-home-dense .ex-inplay-page-banner.ex-inplay-page-banner--inline .ex-inplay-page-banner__img {
        height: 7.5rem !important;
        max-height: 7.5rem !important;
        object-fit: cover !important;
        object-position: center top;
    }

    .ex-inplay-page-banner .ex-inplay-page-banner__close,
    body.ex-home-dense .ex-inplay-page-banner .ex-inplay-page-banner__close {
        top: 0.45rem;
        right: 0.45rem;
    }

    .ex-modal-banner__dialog {
        width: min(100vw - 1.25rem, 28rem);
    }
}

.ex-inplay-page-banner__close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--theme-radius-pill, 999px);
    background: var(--bp-alpha-ink-55);
    color: var(--bp-white);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
    transition: background 0.15s ease, transform 0.15s ease;
}

.ex-inplay-page-banner__close:hover {
    background: rgba(15, 23, 42, 0.75);
    transform: scale(1.05);
}

.ex-inplay-page-banner__close:focus-visible {
    outline: 2px solid var(--bp-white);
    outline-offset: 2px;
}

.ex-inplay-page-banner__close svg {
    width: 0.95rem;
    height: 0.95rem;
    stroke-width: 2.5;
}

/* FI-01 — HTML reflowable promo (default when no Advertise image) */
.ex-inplay-page-banner.ex-inplay-page-banner--html,
body.ex-home-dense .ex-inplay-page-banner.ex-inplay-page-banner--html {
    max-height: none !important;
    overflow: hidden;
    background: #0b1220;
    box-shadow: 0 2px 12px var(--bp-alpha-ink-08);
    border: 1px solid color-mix(in srgb, var(--theme-primary, #DD3E42) 22%, transparent);
}

.theme-dark .ex-inplay-page-banner--html,
html.theme-dark .ex-inplay-page-banner--html {
    background: #0b1220;
}

.ex-inplay-page-banner__link--html {
    display: block;
    line-height: normal;
    text-decoration: none;
    color: inherit;
}

.ex-promo-html {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    min-height: 10.5rem;
    height: 10.5rem;
    padding: 1.15rem 3rem 1.15rem 1.25rem;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
}

.ex-promo-html__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #1a1a4a;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.ex-promo-html__media--single {
    filter: saturate(1.08) contrast(1.02);
}

.ex-promo-html__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Soft left veil so copy stays readable over the vibrant vector */
    background: linear-gradient(
        90deg,
        rgba(12, 14, 40, 0.88) 0%,
        rgba(12, 14, 40, 0.62) 34%,
        rgba(12, 14, 40, 0.22) 58%,
        rgba(12, 14, 40, 0.05) 100%
    );
}

.ex-promo-html__copy {
    position: relative;
    z-index: 2;
    max-width: 34rem;
    min-width: 0;
}

.ex-promo-html__eyebrow {
    margin: 0 0 0.35rem;
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--theme-primary, #DD3E42);
}

.exchange-app .ex-promo-html__title {
    margin: 0 0 0.4rem;
    font-size: clamp(var(--theme-text-xl-plus, 1.125rem), 2.4vw, var(--theme-text-3xl, 1.5rem));
    font-weight: var(--theme-weight-bold, 700);
    line-height: 1.2;
    color: #f8fafc;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.ex-promo-html__text {
    margin: 0 0 0.75rem;
    font-size: clamp(var(--theme-text-md, 0.8125rem), 1.6vw, var(--theme-text-base, 0.875rem));
    line-height: 1.45;
    color: rgba(248, 250, 252, 0.92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.ex-promo-html__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--theme-control-height-secondary, 36px); /* secondary CTA floor */
    padding: 0.4rem 1rem;
    border-radius: var(--theme-radius-pill, 999px);
    /* Darker brand fill so white label clears WCAG AA (4.5:1) — #DD3E42 is only 3.72:1. */
    background: var(--theme-primary-active, #B42E32);
    color: #fff;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (min-width: 1200px) {
    .ex-promo-html {
        min-height: 11.25rem; /* 180px — compact sportsbook first-viewport floor */
        height: 11.25rem;
    }
}

@media (max-width: 575.98px) {
    .ex-inplay-page-banner.ex-inplay-page-banner--html,
    body.ex-home-dense .ex-inplay-page-banner.ex-inplay-page-banner--html {
        padding: 0;
        max-height: none !important;
    }

    .ex-promo-html {
        min-height: 5.75rem;
        height: 5.75rem;
        padding: 0.7rem 2.5rem 0.7rem 0.85rem;
    }

    .ex-promo-html__media {
        background-position: center;
    }

    .ex-promo-html__shade {
        background: linear-gradient(
            90deg,
            rgba(12, 14, 40, 0.86) 0%,
            rgba(12, 14, 40, 0.5) 55%,
            rgba(12, 14, 40, 0.2) 100%
        );
    }

    .ex-promo-html__text {
        display: none;
    }

    .ex-promo-html__title {
        margin-bottom: 0.25rem;
        font-size: var(--theme-text-lg-plus, 1rem);
        line-height: 1.15;
    }

    .ex-promo-html__cta {
        padding: 0.35rem 0.7rem;
        font-size: var(--theme-text-sm, 0.75rem);
    }
}

/* ─── Dedicated In-Play page (Betfair-style) ─────────────────────────────── */
.ex-inplay-page {
    margin-top: 0.25rem;
}

.ex-inplay-page__toolbar.ex-panel-head {
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0.625rem;
    border-radius: var(--theme-radius-control, 8px);
    border: 1px solid var(--ex-schedule-section-head-border, var(--ex-border));
    background: var(--ex-schedule-section-head-bg, var(--ex-surface-head));
    color: var(--ex-schedule-section-head-text, var(--ex-text-strong)) !important;
    box-shadow: var(--ex-schedule-section-head-shadow, var(--ex-shadow));
}

.theme-dark .ex-inplay-page__toolbar.ex-panel-head {
    background: var(--ex-schedule-section-head-bg, var(--ex-surface-head));
    border-color: var(--ex-schedule-section-head-border, var(--ex-border));
    box-shadow: var(--ex-schedule-section-head-shadow, var(--ex-shadow));
}

.exchange-app .ex-inplay-page__toolbar.ex-panel-head,
.exchange-app .ex-inplay-page__toolbar.ex-panel-head .ex-inplay-page__toolbar-label {
    color: var(--ex-schedule-section-head-text, var(--ex-text-strong)) !important;
}

/* Permanent kill: In-Play "In-Play" toolbar strip never renders visually
   (home/inplay already pass hideToolbar; this blocks any regress/cache return). */
.exchange-app .ex-inplay-page__toolbar.ex-panel-head:has(.ex-inplay-page__live-icon),
.exchange-app .ex-inplay-page__toolbar.ex-panel-head:has(.ex-live-dot) {
    display: none !important;
}

.ex-inplay-page__toolbar.ex-panel-head:has(.ex-inplay-page__clock-icon),
.ex-inplay-page__toolbar.ex-panel-head:has(.ex-inplay-page__results-icon) {
    border-left: 0;
}

.ex-inplay-page__toolbar-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ex-inplay-page__count {
    flex-shrink: 0;
    margin-left: auto;
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ex-schedule-section-head-text, var(--ex-muted)) !important;
    background: var(--ex-schedule-section-count-bg, var(--ex-row-alt));
    border: 1px solid var(--ex-schedule-section-count-border, var(--ex-border));
    border-radius: var(--theme-radius-pill, 999px);
    padding: 0.1rem 0.45rem;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes ex-schedule-count-pulse {
    0% {
        transform: scale(1);
        opacity: 0.95;
    }
    40% {
        transform: scale(1.08);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.95;
    }
}

.ex-inplay-page__count--pulse {
    animation: ex-schedule-count-pulse 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ex-inplay-page__count--pulse {
        animation: none;
    }
}

.ex-inplay-page__live-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    filter: none;
}

.ex-inplay-page__live-icon .ex-live-dot {
    width: 6px;
    height: 6px;
}

.ex-inplay-page__clock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ex-schedule-section-head-text, var(--bp-slate-50)) !important;
    filter: none;
    opacity: 1;
}

.ex-inplay-page__clock-icon svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
    stroke: currentColor !important;
    stroke-width: 2.5;
    fill: none !important;
    opacity: 1;
}

.ex-inplay-page__results-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ex-schedule-section-head-text, var(--bp-slate-50)) !important;
    filter: none;
    opacity: 1;
}

.ex-inplay-page__results-icon svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
    stroke: currentColor !important;
    stroke-width: 2.5;
    fill: none !important;
    opacity: 1;
}

.ex-inplay-page__category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
}

.ex-inplay-page__category-icon .ex-cat-icon,
.ex-inplay-page__category-icon svg.ex-cat-icon,
.ex-inplay-page__category-icon i.ex-cat-icon {
    width: 1rem;
    height: 1rem;
    font-size: var(--theme-text-lg-plus, 1rem);
    filter: brightness(0) invert(1);
}

.ex-inplay-page,
.ex-inplay-group,
.ex-event-list {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.ex-inplay-group__list--flat {
    padding-top: 0.5rem;
}

.ex-inplay-page--home-upcoming {
    margin-top: 1rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--ex-border);
}

.ex-inplay-page__view-all {
    text-align: center;
    padding: 0.5rem 0 0.75rem;
}

/* Load more — sidebar-style cross-match:
   Light mode → dark plate (#111827) + light text
   Dark mode  → light plate (#FFFFFF) + dark text */
.ex-load-more-btn,
.exchange-app a.ex-load-more-btn,
.exchange-app button.ex-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: var(--theme-control-height-secondary, 36px); /* secondary CTA floor */
    height: auto;
    padding: 0.4rem 1rem;
    border: 0;
    border-radius: var(--theme-radius-pill, 999px);
    background: var(--ex-sidebar-bg-dark, #111827) !important;
    color: #EEEEEE !important;
    -webkit-text-fill-color: #EEEEEE !important;
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-decoration: none !important;
    text-shadow: none;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.22);
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        color 0.15s ease;
}

html.theme-light .exchange-app a.ex-load-more-btn,
html.theme-light .exchange-app button.ex-load-more-btn,
.theme-light .exchange-app a.ex-load-more-btn,
.theme-light .exchange-app button.ex-load-more-btn {
    background: var(--ex-sidebar-bg-dark, #111827) !important;
    color: #EEEEEE !important;
    -webkit-text-fill-color: #EEEEEE !important;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.22);
}

html.theme-dark .exchange-app a.ex-load-more-btn,
html.theme-dark .exchange-app button.ex-load-more-btn,
.theme-dark .exchange-app a.ex-load-more-btn,
.theme-dark .exchange-app button.ex-load-more-btn {
    background: var(--ex-sidebar-bg-light, #FFFFFF) !important;
    color: var(--ex-sidebar-bg-dark, #111827) !important;
    -webkit-text-fill-color: var(--ex-sidebar-bg-dark, #111827) !important;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.14);
}

.ex-load-more-btn:hover,
.ex-load-more-btn:focus-visible,
.exchange-app a.ex-load-more-btn:hover,
.exchange-app a.ex-load-more-btn:focus-visible,
.exchange-app button.ex-load-more-btn:hover,
.exchange-app button.ex-load-more-btn:focus-visible,
html.theme-light .exchange-app a.ex-load-more-btn:hover,
html.theme-light .exchange-app button.ex-load-more-btn:hover,
html.theme-light .exchange-app a.ex-load-more-btn:focus-visible,
html.theme-light .exchange-app button.ex-load-more-btn:focus-visible,
html.theme-dark .exchange-app a.ex-load-more-btn:hover,
html.theme-dark .exchange-app button.ex-load-more-btn:hover,
html.theme-dark .exchange-app a.ex-load-more-btn:focus-visible,
html.theme-dark .exchange-app button.ex-load-more-btn:focus-visible,
.theme-light .exchange-app a.ex-load-more-btn:hover,
.theme-light .exchange-app button.ex-load-more-btn:hover,
.theme-dark .exchange-app a.ex-load-more-btn:hover,
.theme-dark .exchange-app button.ex-load-more-btn:hover {
    background: var(--ex-sidebar-accent, #DD3E42) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-decoration: none !important;
    text-shadow: none;
    outline: none;
    box-shadow: 0 3px 10px rgba(246, 59, 76, 0.34);
}

.ex-load-more-btn:active,
.exchange-app a.ex-load-more-btn:active,
.exchange-app button.ex-load-more-btn:active,
html.theme-light .exchange-app a.ex-load-more-btn:active,
html.theme-light .exchange-app button.ex-load-more-btn:active,
html.theme-dark .exchange-app a.ex-load-more-btn:active,
html.theme-dark .exchange-app button.ex-load-more-btn:active,
.theme-light .exchange-app a.ex-load-more-btn:active,
.theme-light .exchange-app button.ex-load-more-btn:active,
.theme-dark .exchange-app a.ex-load-more-btn:active,
.theme-dark .exchange-app button.ex-load-more-btn:active {
    background: var(--theme-btn-primary-hover, #C9363A) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(246, 59, 76, 0.22);
}

.ex-load-more-btn:disabled,
.exchange-app button.ex-load-more-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.ex-inplay-page__view-all .ex-inplay-page__empty-link:not(.ex-inplay-page__empty-cta),
.exchange-app a.ex-inplay-page__empty-link:not(.ex-inplay-page__empty-cta) {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--theme-radius-control, 8px);
    color: var(--ex-text-strong, var(--bp-slate-700)) !important;
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    background: transparent;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.ex-inplay-page__view-all .ex-inplay-page__empty-link:not(.ex-inplay-page__empty-cta):hover,
.exchange-app a.ex-inplay-page__empty-link:not(.ex-inplay-page__empty-cta):hover {
    color: var(--ex-text-strong, var(--bp-slate-900)) !important;
    background: color-mix(in srgb, var(--bp-slate-500) 12%, transparent);
    box-shadow:
        inset 0 1px 0 var(--bp-alpha-white-40),
        0 1px 3px var(--bp-alpha-ink-10);
    transform: translateY(-1px);
    text-decoration: none !important;
}

.theme-dark .ex-inplay-page__view-all .ex-inplay-page__empty-link:not(.ex-inplay-page__empty-cta):hover,
.theme-dark .exchange-app a.ex-inplay-page__empty-link:not(.ex-inplay-page__empty-cta):hover {
    color: var(--bp-slate-50) !important;
    background: color-mix(in srgb, var(--bp-white) 10%, transparent);
}

.ex-inplay-page__empty-icon .fa-flag-checkered {
    font-size: var(--theme-text-3xl, 1.5rem);
}

.ex-inplay-page__empty-icon .fa-clock {
    font-size: var(--theme-text-3xl, 1.5rem);
}

.ex-inplay-group {
    margin-bottom: var(--theme-space-group-gap, 0.5rem);
    border: 0;
    border-radius: var(--theme-radius-control, 8px);
    overflow: hidden;
    background: var(--ex-market-bg-3d, var(--ex-market-bg));
    box-shadow: var(--ex-market-3d-shadow,
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 var(--bp-alpha-ink-06),
        0 0 0 1px rgba(148, 163, 184, 0.22),
        0 2px 8px var(--bp-alpha-ink-06)
    );
}

.theme-dark .ex-inplay-group,
html.theme-dark .ex-inplay-group {
    background: var(--ex-market-bg-3d, var(--ex-market-bg));
    box-shadow: var(--ex-market-3d-shadow);
}

.ex-inplay-group__head {
    --ex-head-corner: 2.5rem;
    --ex-head-scoop: 0.65rem;
    --ex-head-top-line: 1px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    min-height: 2.25rem; /* 36px — international group-head typical floor */
    /* Compact density (promoted from home) — left inset keeps icon scoop */
    padding: 0.375rem 0.55rem 0.375rem calc(var(--ex-head-corner) + 0.45rem);
    background: var(--ex-surface-category-head, var(--ex-schedule-category-head-bg, var(--ex-surface-head)));
    background-color: var(--ex-surface-category-head, var(--ex-schedule-category-head-bg, var(--ex-surface-head)));
    border: 0;
    border-bottom: 1px solid var(--ex-schedule-category-head-border, var(--ex-border));
    border-radius: 0;
    color: var(--ex-schedule-category-head-text, var(--ex-text-strong));
    font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
    overflow: hidden; /* clips red tab flush — no white crescent */
    isolation: isolate;
}

/*
 * Merged top line + inverted-radius corner (one continuous theme shape).
 * Same contract as expanded list card: no radius on fill — group overflow clips TL.
 */
.ex-inplay-group__head::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--theme-primary, #DD3E42);
    border-radius: 0;
    -webkit-mask:
        linear-gradient(#000 0 0) 0 0 / 100% var(--ex-head-top-line) no-repeat,
        radial-gradient(
            circle var(--ex-head-scoop) at 100% 100%,
            transparent 98%,
            #000 99%
        ) 0 0 / var(--ex-head-corner) 100% no-repeat;
    mask:
        linear-gradient(#000 0 0) 0 0 / 100% var(--ex-head-top-line) no-repeat,
        radial-gradient(
            circle var(--ex-head-scoop) at 100% 100%,
            transparent 98%,
            #000 99%
        ) 0 0 / var(--ex-head-corner) 100% no-repeat;
    -webkit-mask-composite: source-over;
    mask-composite: add;
    pointer-events: none;
    z-index: 0;
}

.ex-inplay-group__head::after {
    content: none;
}

.ex-inplay-group__icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ex-head-corner);
    height: 100%;
    flex-shrink: 0;
    color: #fff;
}

.ex-inplay-group__icon .ex-cat-icon,
.ex-inplay-group__icon svg.ex-cat-icon,
.ex-inplay-group__icon i.ex-cat-icon {
    /* Match sidebar .ex-cat-icon size (exchange-sidebar-ref.css) */
    width: 1.35rem;
    height: 1.35rem;
    min-width: 1.35rem;
    font-size: var(--theme-text-3xl, 1.5rem);
    line-height: 1;
    color: #fff !important;
    fill: currentColor;
}

html.theme-dark .ex-inplay-group__head::before,
.theme-dark .ex-inplay-group__head::before {
    background: var(--theme-primary, #DD3E42);
}

html.theme-dark .ex-inplay-group__icon,
.theme-dark .ex-inplay-group__icon {
    color: #FFFFFF;
}

html.theme-dark .ex-inplay-group__icon .ex-cat-icon,
html.theme-dark .ex-inplay-group__icon svg.ex-cat-icon,
html.theme-dark .ex-inplay-group__icon i.ex-cat-icon,
.theme-dark .ex-inplay-group__icon .ex-cat-icon,
.theme-dark .ex-inplay-group__icon svg.ex-cat-icon,
.theme-dark .ex-inplay-group__icon i.ex-cat-icon {
    color: #FFFFFF !important;
    fill: currentColor;
    stroke: currentColor;
}

.ex-inplay-group__name {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* League role — owned with exchange-typography / categories */
    font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
    letter-spacing: var(--theme-type-league-tracking, 0);
}

.ex-inplay-group__live-badge {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Micro LIVE — badges.css reinforces 16×10 */
    height: 1rem;
    min-height: 1rem;
    max-height: 1rem;
    padding: 0 0.4rem 0 0.32rem;
    border-radius: var(--theme-radius-chip, 4px);
    background: var(--theme-primary, #DD3E42);
    color: #fff;
    font-size: 0.625rem;
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: none;
    box-shadow: none;
}

.ex-inplay-group__count {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex-shrink: 0;
    margin-left: auto;
    min-height: 1.35rem;
    padding: 0.22rem 0.5rem;
    border: 0;
    border-radius: var(--theme-radius-chip, 4px);
    background: transparent;
    color: inherit;
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    text-shadow: none;
    box-shadow: none;
}

.ex-inplay-group__count-label {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.95;
}

.exchange-app .ex-inplay-group__count {
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    border-radius: var(--theme-radius-chip, 4px) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.ex-inplay-group__list.ex-event-list:not(.ex-inplay-group__list--indibet) {
    margin-top: 0;
    padding: 0.375rem 0.5rem 0.5rem;
}

.ex-inplay-group__list--indibet.ex-event-list {
    margin-top: 0;
    padding: 0;
}

.ex-inplay-group + .ex-inplay-group {
    margin-top: var(--theme-space-group-gap, 0.5rem);
}

.ex-inplay-group__list .ex-event {
    margin-bottom: 0.375rem;
    box-shadow: none;
}

.ex-inplay-group__list .ex-event:last-child {
    margin-bottom: 0;
}

.ex-event--compact .ex-event__header {
    padding: 0.375rem 0.625rem;
}

.ex-event--compact .ex-event__body {
    padding: 0.375rem 0.625rem 0.5rem;
}

.ex-event--compact .ex-event__teams {
    font-size: var(--theme-text-md, 0.8125rem);
}

.ex-inplay-page__empty {
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--ex-market-bg);
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-chip, 4px);
    box-shadow: var(--ex-shadow);
}

.ex-inplay-page__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.75rem;
    color: var(--ex-muted);
}

.ex-inplay-page__empty-icon svg {
    width: 2rem;
    height: 2rem;
}

.ex-inplay-page__empty-title {
    margin: 0 0 0.375rem;
    color: var(--ex-text-strong);
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 600;
}

.ex-inplay-page__empty-text {
    margin: 0 0 1rem;
    color: var(--ex-muted);
    font-size: var(--theme-text-base, 0.875rem);
}

.ex-inplay-page__empty-link {
    color: var(--ex-text-strong, var(--bp-slate-700));
    font-family: "Inter", var(--body-font, sans-serif);
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 700;
    text-decoration: none;
}

.ex-inplay-page__empty-link:hover {
    color: var(--ex-text-strong, var(--bp-slate-900));
    text-decoration: none;
}

/* ===== custom.css ===== */

/* ===== theme/theme.bundle.css ===== */
/**
 * BigPlay theme.bundle.css — compiled runtime theme (no CSS imports).
 * Order: variables, spacing, typography, radius, shadows, motion, z-index,
 *        opacity, layout, light, dark.
 * Load BEFORE exchange-theme.css.
 * Rebuild: php scripts/build-theme-bundle.php
 */

/* ===== variables.css ===== */
/**
 * BigPlay Sportsbook Design System — primitive color scales
 * Wave 0 runtime primitives. Semantic maps live in light.css / dark.css.
 */

:root {
  /* ── Brand (BigPlay) ─────────────────────────────────────────────────── */
  --bp-brand-blue: #2196f3;
  --bp-brand-blue-light: #5eb1f5;
  --bp-brand-blue-soft: #c2e4ff;
  /* Dark-mode soft primary fill (do NOT overload --color-primary-lighten) */
  --bp-brand-blue-soft-dark: #1a3a55;
  --bp-brand-blue-deep: #1976d2;

  /* Brand accent — #DD3E42 (primary CTA / accent; better white-text contrast than #F63B4C) */
  --bp-orange-50: #fff1f2;
  --bp-orange-100: #ffe3e5;
  --bp-orange-200: #ffc8cb;
  --bp-orange-300: #f59a9e;
  --bp-orange-400: #e85a5e;
  --bp-orange-500: #DD3E42;
  --bp-orange-600: #C9363A; /* hover — white text ~5.16:1 */
  --bp-orange-700: #B42E32; /* active — white text ~6.22:1 */
  --bp-orange-800: #9E272B;
  --bp-orange-900: #851B2A;


  /* Legacy brand-orange aliases → brand accent */
  --bp-brand-orange: var(--bp-orange-500);
  --bp-brand-orange-hover: var(--bp-orange-600);
  --bp-brand-coral: #DD3E42;
  --bp-brand-mark-red: #DD3E42;
  --bp-brand-mark-yellow: var(--bp-orange-500);

  /* ── Slate scale (UI chrome) ─────────────────────────────────────────── */
  --bp-slate-50: #f8fafc;
  --bp-slate-100: #f1f5f9;
  --bp-slate-200: #e2e8f0;
  --bp-slate-300: #cbd5e1;
  --bp-slate-400: #94a3b8;
  --bp-slate-500: #64748b;
  --bp-slate-600: #475569;
  --bp-slate-700: #334155;
  --bp-slate-800: #1e293b;
  --bp-slate-900: #0f172a;
  --bp-slate-950: #020617;

  /* ── Neutral ─────────────────────────────────────────────────────────── */
  --bp-white: #ffffff;
  --bp-black: #000000;

  /* ── Semantic status ─────────────────────────────────────────────────── */
  --bp-success: #28c76f;
  --bp-success-light: #33d67c;
  --bp-success-strong: #16a34a;
  --bp-danger: #ea5455;
  --bp-danger-light: #ed6b6c;
  --bp-danger-strong: #dc2626;
  --bp-warning: #ff9f43;
  --bp-warning-light: #ffac5d;
  --bp-warning-strong: #f59e0b;
  --bp-info: #1e9ff2;
  --bp-secondary: #868e96;

  /* ── Odds / exchange (Betfair Exchange palette) ───────────────────────── */
  --bp-back: #72BBEF;
  --bp-back-hover: #5AACF0;
  --bp-lay: #FAA9BA;
  --bp-lay-hover: #F896A8;
  --bp-draw: #F59E0B;
  --bp-draw-hover: #FBBF24;
  --bp-odds-ink: #1a1a1a;
  --bp-odds-flash: #fbbf24;

  /* ── Live ────────────────────────────────────────────────────────────── */
  --bp-live-bright: #00ff57;
  --bp-live-mid: #00ea50;
  --bp-live-dim: #00d948;
  --bp-live-glow: #66ff9a;
  --bp-live-ring: #00c94a;

  /* ── Alpha helpers (slate-900) ───────────────────────────────────────── */
  --bp-alpha-ink-06: rgba(15, 23, 42, 0.06);
  --bp-alpha-ink-08: rgba(15, 23, 42, 0.08);
  --bp-alpha-ink-10: rgba(15, 23, 42, 0.1);
  --bp-alpha-ink-12: rgba(15, 23, 42, 0.12);
  --bp-alpha-ink-14: rgba(15, 23, 42, 0.14);
  --bp-alpha-ink-16: rgba(15, 23, 42, 0.16);
  --bp-alpha-ink-18: rgba(15, 23, 42, 0.18);
  --bp-alpha-ink-22: rgba(15, 23, 42, 0.22);
  --bp-alpha-ink-28: rgba(15, 23, 42, 0.28);
  --bp-alpha-ink-35: rgba(15, 23, 42, 0.35);
  --bp-alpha-ink-55: rgba(15, 23, 42, 0.55);
  --bp-alpha-white-08: rgba(255, 255, 255, 0.08);
  --bp-alpha-white-10: rgba(255, 255, 255, 0.1);
  --bp-alpha-white-12: rgba(255, 255, 255, 0.12);
  --bp-alpha-white-14: rgba(255, 255, 255, 0.14);
  --bp-alpha-white-20: rgba(255, 255, 255, 0.2);
  --bp-alpha-white-28: rgba(255, 255, 255, 0.28);
  --bp-alpha-white-35: rgba(255, 255, 255, 0.35);
  --bp-alpha-white-40: rgba(255, 255, 255, 0.4);
  --bp-alpha-white-55: rgba(255, 255, 255, 0.55);
  --bp-alpha-black-12: rgba(0, 0, 0, 0.12);
  --bp-alpha-black-28: rgba(0, 0, 0, 0.28);
  --bp-alpha-black-35: rgba(0, 0, 0, 0.35);
  --bp-alpha-black-45: rgba(0, 0, 0, 0.45);
  --bp-alpha-orange-28: rgba(221, 62, 66, 0.28);
  --bp-alpha-orange-12: rgba(221, 62, 66, 0.12);
  --bp-alpha-orange-08: rgba(221, 62, 66, 0.08);
  --bp-alpha-orange-32: rgba(221, 62, 66, 0.32);
  /* Brand interaction alphas follow #DD3E42 accent */
  --bp-alpha-brand-08: var(--bp-alpha-orange-08);
  --bp-alpha-brand-12: var(--bp-alpha-orange-12);
  --bp-alpha-brand-32: var(--bp-alpha-orange-32);
}

/* ===== spacing.css ===== */
/**
 * Spacing scale — WP01/WP03 Design Tokens Foundation.
 * Canonical: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80
 * Prefer role aliases below in new UI; do not invent ad-hoc rem.
 */

:root {
  --theme-space-0: 0;
  --theme-space-1: 0.25rem;   /* 4px */
  --theme-space-2: 0.5rem;    /* 8px */
  --theme-space-3: 0.75rem;   /* 12px */
  --theme-space-4: 1rem;      /* 16px */
  --theme-space-5: 1.25rem;   /* 20px */
  --theme-space-6: 1.5rem;    /* 24px */
  --theme-space-7: 2rem;      /* 32px */
  --theme-space-8: 2.5rem;    /* 40px */
  --theme-space-9: 3rem;      /* 48px */
  --theme-space-10: 4rem;     /* 64px */
  --theme-space-11: 5rem;     /* 80px — hero / marketing only */

  /* Dense sportsbook micro-gaps (odds column gutters — exception) */
  --theme-space-micro: 0.125rem; /* 2px — pair/column micro only */
  --theme-space-dense: 0.25rem; /* 4px — alias of space-1 for dense chrome */

  /* ── Semantic roles (WP03) — consume these in shell/home/account ───────── */
  --theme-space-page-x: var(--theme-space-3);       /* container inline pad 12px */
  --theme-space-shell-gap: var(--theme-space-3);   /* sidebar ↔ main ↔ slip 12px */
  --theme-space-shell-gap-dense: var(--theme-space-2); /* home dense 8px */
  --theme-space-shell-pad-y: var(--theme-space-2); /* shell block padding */
  --theme-space-group-gap: var(--theme-space-2);   /* league group → group 8px */
  --theme-space-strip-gap: var(--theme-space-1);   /* schedule / cat strip 4px */
  --theme-space-row-gap: var(--theme-space-1);     /* event row stack 4px */
  --theme-space-account-main: var(--theme-space-4); /* tabs → panel 16px */
  --theme-space-account-panel: var(--theme-space-5); /* panel inner 20px */
  --theme-space-section: var(--theme-space-6);     /* section breaks 24px */
  --theme-space-fold-clearance: var(--theme-space-2); /* below sticky chrome */
  --theme-space-header-gap: var(--theme-space-dense); /* sticky rail offset */

  /* Odds grid column gutters */
  --theme-space-odds-gap: var(--theme-space-dense);      /* 4px desktop */
  --theme-space-odds-gap-mobile: var(--theme-space-micro); /* 2px phone */

  /* Layout chrome sizes (structure tokens — not page redesign) */
  --theme-header-h: 3.5rem;
  --theme-cats-h: 2.625rem;
  --theme-sidebar-w: 13.75rem;
  --theme-sidebar-w-user: 15rem; /* 240px */
  --theme-betslip-rail-w: 20rem; /* 320px — target IA token only */
  --theme-betslip-rail-min: 17.5rem; /* 280px — grid min track */
  --theme-panel-radius: var(--theme-radius-xl);

  /* Layout helpers used by foundation utilities */
  --theme-section-gap: var(--theme-space-section);
  --theme-card-gap: var(--theme-space-4);
}

/* ===== typography.css ===== */
/**
 * Typography tokens — WP01 Design Tokens Foundation.
 *
 * Enterprise sportsbook canonical scale (prefer these):
 *   11 / 12 / 13 / 14 / 16 / 18 / 24
 *
 * Bridge sizes 15 / 17 / 22 remain for migration only (WP02 collapses them).
 * Weights: 400 / 500 / 600 / 700 only. Do not introduce 800 / 900.
 */

:root {
  --theme-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --theme-font-display: "Inter", var(--theme-font-sans);
  --theme-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --theme-font-features: "cv11", "ss01";

  /* ── Canonical sportsbook scale ───────────────────────────────────────── */
  --theme-text-xs: 0.6875rem;     /* 11px — micro / badges / liquidity */
  --theme-text-sm: 0.75rem;       /* 12px — caption / meta */
  --theme-text-md: 0.8125rem;     /* 13px — team / odds / table head */
  --theme-text-base: 0.875rem;    /* 14px — body / league / inputs / buttons */
  --theme-text-lg-plus: 1rem;     /* 16px — primary content / titles */
  --theme-text-xl-plus: 1.125rem; /* 18px — marketing / rare section */
  --theme-text-3xl: 1.5rem;       /* 24px — rare page / marketing titles */

  /* ── Migration bridges (WP02 removes consumers; do not use in new UI) ─── */
  --theme-text-lg: 0.9375rem;     /* 15px — bridge → prefer lg-plus (16) */
  --theme-text-xl: 1.0625rem;     /* 17px — bridge → prefer md (13) for odds */
  --theme-text-2xl: 1.375rem;     /* 22px — bridge → prefer 3xl (24) */
  --theme-text-lg-legacy: 1rem;   /* alias of 16px */

  --theme-leading-tight: 1.1;
  --theme-leading-snug: 1.25;
  --theme-leading-normal: 1.45;
  --theme-leading-body: 1.45;

  --theme-weight-regular: 400;
  --theme-weight-medium: 500;
  --theme-weight-semibold: 600;
  --theme-weight-bold: 700;
  --theme-weight-max: 700; /* enterprise cap — chrome must not exceed */

  /* Role tokens — live home contract (bet365/Betfair density) */
  --theme-type-league-size: var(--theme-text-base);       /* 14px */
  --theme-type-league-weight: var(--theme-weight-semibold); /* 600 */
  --theme-type-league-tracking: 0;
  /* Team sits just below league (14) and matches odds (13). */
  --theme-type-team-size: var(--theme-text-md);           /* 13px */
  --theme-type-team-weight: var(--theme-weight-semibold); /* 600 */
  /* Odds: 13px / 700 tabular — keep in sync with --theme-odds-font-* */
  --theme-type-odds-size: var(--theme-text-md);           /* 13px */
  --theme-type-odds-weight: var(--theme-weight-bold);     /* 700 */
  --theme-type-odds-tracking: -0.01em;
  --theme-type-odds-size-liquidity: var(--theme-text-xs);
  --theme-type-body-size: var(--theme-text-base);
  --theme-type-caption-size: var(--theme-text-sm);
  --theme-type-button-size: var(--theme-text-base);
  --theme-type-button-weight: var(--theme-weight-semibold);
  --theme-type-label-size: var(--theme-text-sm);
  --theme-type-label-weight: var(--theme-weight-semibold);
  --theme-type-table-head-size: var(--theme-text-md);
  --theme-type-table-head-weight: var(--theme-weight-bold);
  --theme-type-table-head-tracking: 0.04em;
  --theme-type-money-weight: var(--theme-weight-bold);
  --theme-type-badge-size: var(--theme-text-sm);
  --theme-type-badge-weight: var(--theme-weight-semibold);
  --theme-type-nav-size: var(--theme-text-sm);
  --theme-type-nav-weight: var(--theme-weight-medium);
  --theme-type-nav-tracking: 0;

  --heading-font: var(--theme-font-display);
  --body-font: var(--theme-font-sans);
}

/* ===== radius.css ===== */
/**
 * Border radius system — WP04 enterprise vocabulary.
 *
 * Prefer: none (0) · chip (4) · control/panel (8) · pill (999)
 * Bridge steps alias onto the four-step scale — do not use in new UI.
 */

:root {
  --theme-radius-none: 0;
  --theme-radius-sm: 4px;   /* chips / micro */
  --theme-radius-lg: 8px;   /* inputs, controls, panels */
  --theme-radius-3xl: 16px; /* banners only */
  --theme-radius-full: 999px;

  /* Semantic aliases — required for new UI */
  --theme-radius-chip: var(--theme-radius-sm);
  --theme-radius-control: var(--theme-radius-lg);
  --theme-radius-panel: var(--theme-radius-lg);
  --theme-radius-card: var(--theme-radius-lg);
  --theme-radius-odds: var(--theme-radius-none);
  --theme-radius-pill: var(--theme-radius-full);

  /* Bridges (compat) — resolve to enterprise steps */
  --theme-radius-md: var(--theme-radius-lg);
  --theme-radius-xl: var(--theme-radius-lg);
  --theme-radius-2xl: var(--theme-radius-lg);

  /* Legacy panel alias */
  --ex-panel-radius: var(--theme-radius-panel);
}

/* ===== shadows.css ===== */
/**
 * Shadow / elevation primitives — WP01 Design Tokens Foundation.
 * Theme-specific sm/md/lg live in light.css / dark.css.
 * Components should prefer --theme-shadow-level-* or --theme-shadow-sm/md/lg.
 */

:root {
  --theme-shadow-none: none;
  --theme-shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --theme-shadow-inset-bottom: inset 0 -1px 0 rgba(15, 23, 42, 0.16);
  --theme-shadow-elev-1: 0 1px 3px rgba(15, 23, 42, 0.08);
  --theme-shadow-elev-2: 0 2px 6px rgba(15, 23, 42, 0.14);
  --theme-shadow-elev-3: 0 4px 16px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(15, 23, 42, 0.06);
  --theme-shadow-icon-well: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 6px rgba(255, 184, 12, 0.28);

  /* Level aliases (foundation utilities + new UI) */
  --theme-shadow-level-1: var(--theme-shadow-elev-1);
  --theme-shadow-level-2: var(--theme-shadow-elev-2);
  --theme-shadow-level-3: var(--theme-shadow-elev-3);
}

/* ===== motion.css ===== */
/**
 * Motion / transition tokens — WP01 Design Tokens Foundation.
 * Prefer these over magic ms values in component CSS.
 */

:root {
  --theme-duration-instant: 0ms;
  --theme-duration-fast: 100ms;
  --theme-duration-default: 150ms;
  --theme-duration-moderate: 200ms;
  --theme-duration-slow: 280ms;
  --theme-duration-loading: 700ms;
  --theme-duration-skeleton: 1200ms;
  --theme-duration-odds-flash: 950ms;
  --theme-duration-live-pulse: 1400ms;

  --theme-ease-default: ease-out;
  --theme-ease-in-out: ease-in-out;
  --theme-ease-linear: linear;

  --theme-transition-colors: color var(--theme-duration-default) var(--theme-ease-default),
    background-color var(--theme-duration-default) var(--theme-ease-default),
    border-color var(--theme-duration-default) var(--theme-ease-default),
    box-shadow var(--theme-duration-default) var(--theme-ease-default);
  --theme-transition-transform: transform var(--theme-duration-default) var(--theme-ease-default);
  --theme-transition-opacity: opacity var(--theme-duration-fast) var(--theme-ease-default);
  --theme-transition-hover: var(--theme-transition-colors), var(--theme-transition-transform);
  --theme-transition-focus: outline-color var(--theme-duration-instant) linear;
}

/* ===== z-index.css ===== */
/**
 * Z-index scale — WP01 Design Tokens Foundation.
 * Keep stacking predictable; never invent one-off z-index in features.
 */

:root {
  --theme-z-base: 0;
  --theme-z-raised: 1;
  --theme-z-sticky: 100;
  --theme-z-header: 200;
  --theme-z-sidebar: 250;
  --theme-z-dropdown: 300;
  --theme-z-popover: 350;
  --theme-z-overlay: 400;
  --theme-z-modal: 500;
  --theme-z-toast: 600;
  --theme-z-tooltip: 700;
  --theme-z-max: 9999;
}

/* ===== opacity.css ===== */
/**
 * Opacity scale — WP01 Design Tokens Foundation.
 */

:root {
  --theme-opacity-0: 0;
  --theme-opacity-muted: 0.64;
  --theme-opacity-disabled: 0.5;
  --theme-opacity-overlay-soft: 0.4;
  --theme-opacity-overlay: 0.55;
  --theme-opacity-hover-veil: 0.08;
  --theme-opacity-full: 1;
}

/* ===== layout.css ===== */
/**
 * Layout foundation tokens — WP01 Design Tokens Foundation.
 * Breakpoints, containers, touch targets, control heights, icons, odds geometry.
 * Components must consume these; do not invent ad-hoc px for chrome sizing.
 */

:root {
  /* Breakpoints (px) — align with Bootstrap where possible */
  --theme-bp-xs: 0;
  --theme-bp-sm: 576px;
  --theme-bp-md: 768px;
  --theme-bp-lg: 992px;
  --theme-bp-xl: 1200px;
  --theme-bp-xxl: 1400px;

  /* Content widths */
  --theme-container-max: 1440px;
  --theme-content-max: 1200px;
  --theme-section-gap: var(--theme-space-7);
  --theme-card-gap: var(--theme-space-4);

  /* Grid foundation */
  --theme-grid-columns: 12;
  --theme-grid-gutter: var(--theme-space-4);

  /* Touch / hit targets (enterprise sportsbook floor) */
  --theme-touch-min: 40px;
  --theme-touch-comfortable: 44px;
  --theme-control-height-sm: 32px;           /* compact / favorite */
  --theme-control-height-secondary: 36px;    /* Load more / Promo */
  --theme-control-height-md: 40px;           /* primary CTA / inputs */
  --theme-control-height-lg: 48px;           /* slip header / large chrome */
  --theme-control-height-primary: var(--theme-control-height-md);
  --theme-control-height-xl: var(--theme-control-height-lg);

  /* Focus ring geometry (color tokens stay in light.css / dark.css) */
  --theme-focus-ring-width: 2px;
  --theme-focus-offset: 2px; /* length for outline-offset; do not confuse with --theme-focus-ring-offset color */

  /* Icon contract (Feather/Lucide stroke language) */
  --theme-icon-sm: 1rem;       /* 16px */
  --theme-icon-md: 1.25rem;    /* 20px */
  --theme-icon-lg: 1.5rem;     /* 24px */
  --theme-icon-stroke: 2.25;

  /* Odds cell geometry (locked live norms — WP14 consumes) */
  --theme-odds-h-desktop: 36px;
  --theme-odds-h-mobile: 40px;
  --theme-odds-font-size: var(--theme-type-odds-size); /* 13px via typography role */
  --theme-odds-font-weight: var(--theme-type-odds-weight); /* 700 */

  /* Badge micro-label (BACK/LAY status) */
  --theme-badge-h: 20px;
  --theme-badge-font-size: var(--theme-text-sm); /* 12px */
  --theme-badge-font-weight: var(--theme-weight-semibold); /* 600 */
}

/* ===== light.css ===== */
/* GENERATED — SOURCE OF TRUTH: src/styles/theme/ — run: composer theme:build */
/**
 * BigPlay — Light theme semantic tokens
 * Palette:
 *   page #F5F7FA · section/sidebar #FFFFFF · card #FCFCFD
 *   page header #F8FAFC · section header #CDD5E0 · table header #F1F5F9
 *   border #E5EAF1 · primary #DD3E42
 */

.theme-light,
html.theme-light {
  color-scheme: light;

  /* Surfaces / backgrounds */
  --theme-bg-page: #F5F7FA;
  --theme-bg-elevated: #FCFCFD;
  --theme-bg-sunken: #F5F7FA;
  --theme-bg-head: #F8FAFC;
  --theme-bg-overlay: var(--bp-alpha-ink-55);
  --theme-bg-row-alt: #F5F7FA;
  --theme-bg-raised: #FFFFFF;
  --theme-bg-section: #FFFFFF;
  --theme-bg-input: #FFFFFF;
  --theme-bg-market: #FCFCFD;
  --theme-bg-market-3d: linear-gradient(180deg, #FCFCFD 0%, #F8FAFC 48%, #F5F7FA 100%);

  /* Cards */
  --theme-card-bg: #FCFCFD;
  --theme-card-border: #E5EAF1;
  --theme-card-shadow: var(--theme-shadow-sm);

  /* Headers / navigation — Page Header */
  --theme-header-bg: #F8FAFC;
  --theme-header-border: #E5EAF1;
  --theme-header-text: #000000;
  --theme-header-icon: #333333;
  --theme-header-shadow: none;
  --theme-header-sheen: transparent;
  --theme-header-active-line: linear-gradient(180deg, var(--bp-orange-400) 0%, var(--bp-orange-500) 48%, var(--bp-orange-700) 100%);
  --theme-header-active-line-shadow: 0 2px 5px var(--bp-alpha-orange-32);
  --theme-header-search-bg: #FFFFFF;
  --theme-header-search-placeholder: #888888;
  --theme-header-search-border: #E5EAF1;
  --theme-header-search-icon: var(--theme-header-icon);
  --theme-search-placeholder: #888888;

  /* Header cats */
  --theme-header-cats-bg: #F8FAFC;
  --theme-header-cats-fade: #F8FAFC;
  --theme-nav-cats-seam: #E5EAF1;
  --theme-nav-cats-seam-shadow: none;
  --theme-nav-cats-seam-height: 1px;
  --theme-header-cats-top-seam: transparent;
  --theme-header-cats-inset: none;
  --theme-header-cats-bottom-seam: #E5EAF1;
  --theme-header-cats-bottom-seam-shadow: none;

  /* Sidebar */
  --theme-sidebar-bg: #FFFFFF;
  --theme-sidebar-text: #555555;
  --theme-sidebar-text-strong: #000000;
  --theme-sidebar-icon-well: var(--bp-orange-500);
  --theme-sidebar-icon-glyph: var(--bp-white);
  --theme-sidebar-icon: var(--theme-icon-default); /* default glyph color fallback */
  --theme-sidebar-hover-bg: color-mix(in srgb, var(--bp-orange-500) 10%, #FFFFFF);
  /* Active = opposite theme's sidebar surface (dark sidebar #111827) */
  --theme-sidebar-active-bg: #111827;
  --theme-sidebar-active-text: #EEEEEE;
  /* Emboss for dark active pill on light sidebar */
  --theme-sidebar-item-hover-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -2px 4px var(--bp-alpha-ink-22),
      0 2px 6px var(--bp-alpha-ink-16);
  --theme-sidebar-item-active-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -2px 4px rgba(0, 0, 0, 0.4),
      0 2px 5px rgba(0, 0, 0, 0.28);
  --theme-sidebar-item-active-hover-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -2px 5px rgba(0, 0, 0, 0.45),
      0 3px 8px rgba(0, 0, 0, 0.32);
  --theme-sidebar-section-bg: #FFFFFF;
  --theme-sidebar-section-text: #000000;
  --theme-sidebar-section-accent: var(--bp-orange-500);
  --theme-icon-s7: #555555;

  /* Borders */
  --theme-border-default: #E5EAF1;
  --theme-border-subtle: #F5F7FA;
  --theme-border-strong: #CCCCCC;

  /* Text */
  --theme-text-primary: #000000;
  --theme-text-strong: #000000;
  --theme-text-muted: #666666;
  --theme-text-body: #333333;
  --theme-text-inverse: #FFFFFF;
  --theme-text-link: var(--bp-orange-500);

  /* Icons */
  --theme-icon-default: #333333;
  --theme-icon-muted: #666666;
  --theme-icon-on-brand: #FFFFFF;
  --theme-icon-accent: var(--bp-orange-500);
  --theme-icon-well-bg: var(--theme-btn-primary-bg, #DD3E42);
  --theme-icon-well-hover: var(--theme-btn-primary-hover);
  --theme-icon-well-active: var(--bp-orange-700);
  --theme-icon-well-shadow: inset 0 1px 0 var(--bp-alpha-white-28), 0 2px 6px var(--bp-alpha-orange-28);

  /* Buttons — solid brand (#DD3E42); hover/active darker for AA white text */
  --theme-btn-primary-bg: #DD3E42;
  --theme-btn-primary-text: #FFFFFF;
  --theme-btn-primary-hover: #C9363A;
  --theme-btn-secondary-bg: #F5F7FA;
  --theme-btn-secondary-text: #000000;
  --theme-btn-danger-bg: var(--bp-danger);
  --theme-btn-danger-text: #FFFFFF;
  --theme-btn-ghost-hover: var(--bp-alpha-ink-08);

  /* Brand / primary */
  --theme-primary: #DD3E42;
  --theme-primary-hover: var(--bp-orange-600);
  --theme-primary-active: var(--bp-orange-700);
  --theme-primary-soft: var(--bp-orange-50);
  --theme-primary-border: var(--bp-orange-200);
  --theme-primary-soft-dark: color-mix(in srgb, var(--bp-orange-500) 18%, #000000);

  /* Status */
  --theme-status-success: var(--bp-success);
  --theme-status-danger: var(--bp-danger);
  --theme-status-warning: var(--bp-warning);
  --theme-status-info: var(--bp-info);
  --theme-status-live: var(--bp-live-bright);
  /* Canonical win/profit + lose/loss ink (Open Bets text + Settled badges) */
  --theme-pl-positive: #15803D;
  --theme-pl-negative: #B91C1C;

  /* Hover / focus */
  --theme-hover-surface: var(--bp-alpha-orange-08);
  --theme-focus-ring: var(--bp-orange-400);
  --theme-focus-ring-offset: #FFFFFF;

  /* Tables — Table Header */
  --theme-table-head-bg: #F1F5F9;
  --theme-table-row-bg: #FCFCFD;
  --theme-table-row-alt: #F5F7FA;
  --theme-table-border: #E5EAF1;
  --theme-table-hover: #EEF2F7;

  /* Forms */
  --theme-input-bg: #FFFFFF;
  --theme-input-border: #E5EAF1;
  --theme-input-text: #000000;
  --theme-input-placeholder: var(--theme-search-placeholder);
  --theme-input-focus-border: var(--theme-primary);
  --theme-dropdown-bg: #FFFFFF;
  --theme-dropdown-border: #E5EAF1;
  --theme-dropdown-hover: #F5F7FA;

  /* Badges / alerts */
  --theme-badge-success-bg: color-mix(in srgb, var(--bp-success) 16%, #FFFFFF);
  --theme-badge-danger-bg: color-mix(in srgb, var(--bp-danger) 16%, #FFFFFF);
  --theme-badge-warning-bg: color-mix(in srgb, var(--bp-warning) 18%, #FFFFFF);
  --theme-badge-info-bg: color-mix(in srgb, var(--bp-info) 16%, #FFFFFF);
  --theme-alert-success-border: var(--bp-success);
  --theme-alert-danger-border: var(--bp-danger);
  --theme-alert-warning-border: var(--bp-warning);

  /* Modals / tooltips */
  --theme-modal-bg: #FCFCFD;
  --theme-modal-overlay: var(--bp-alpha-ink-55);
  --theme-tooltip-bg: #000000;
  --theme-tooltip-text: #FFFFFF;

  /* Scrollbar */
  --theme-scrollbar-track: #F5F7FA;
  --theme-scrollbar-thumb: var(--bp-orange-300);
  --theme-scrollbar-thumb-hover: var(--bp-orange-500);

  /* Charts */
  --theme-chart-grid: #E5EAF1;
  --theme-chart-axis: #666666;
  --theme-chart-series-1: var(--bp-brand-blue);
  --theme-chart-series-2: var(--bp-orange-500);
  --theme-chart-series-3: var(--bp-success);
  --theme-chart-series-4: var(--bp-lay);

  /* Shadows */
  --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --theme-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --theme-market-3d-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 0 0 1px #E5EAF1,
      0 2px 8px rgba(0, 0, 0, 0.05);

  /* Schedule section heads — clear light slate from sidebar icon family (#111827) */
  --theme-schedule-section-head-bg: #CDD5E0;
  --theme-schedule-section-head-text: #000000;
  --theme-schedule-section-head-border: #B4BECB;
  --theme-schedule-section-head-shadow: none;
  --theme-schedule-section-count-bg: rgba(0, 0, 0, 0.06);
  --theme-schedule-section-count-border: #E5EAF1;
  --theme-schedule-category-head-bg: #D5DCE6;
  --theme-schedule-category-head-text: #000000;
  --theme-schedule-category-head-border: #C3CBD6;
  --theme-schedule-category-head-accent: var(--bp-orange-500);

  /* MATCH / 1 / X / 2 column legend — between sport head and white rows */
  --theme-match-list-columns-bg: #E2E8F0;
  --theme-match-list-columns-border: #CBD5E1;

  /* Unified surface ladder — consume these aliases in components. */
  --theme-surface-page: var(--theme-bg-page);
  --theme-surface-panel: var(--theme-bg-section);
  --theme-surface-raised: var(--theme-bg-elevated);
  --theme-surface-table-head: var(--theme-table-head-bg);
  --theme-surface-section-head: var(--theme-schedule-section-head-bg);
  --theme-surface-category-head: var(--theme-schedule-category-head-bg);
  --theme-surface-subhead: var(--theme-match-list-columns-bg);
  --theme-surface-row: var(--theme-table-row-bg);
  --theme-surface-row-alt: var(--theme-table-row-alt);
  --theme-surface-row-hover: var(--theme-table-hover);
  --theme-surface-nested: #EEF2F7;
  --theme-surface-menu: var(--theme-sidebar-bg);
  --theme-surface-submenu: #FAFBFC;
  --theme-surface-footer: #FFFFFF;
  --theme-surface-active: var(--theme-sidebar-active-bg);
  --theme-surface-active-text: var(--theme-sidebar-active-text);
  --theme-surface-active-plate: linear-gradient(180deg, #2A3446 0%, #111827 52%, #0B1220 100%);

  /* Section tabs */
  --theme-section-tab-bar-bg: #FFFFFF;
  --theme-section-tab-text: #666666;
  --theme-section-tab-text-hover: var(--bp-orange-600);
  --theme-section-tab-inactive-bg: transparent;
  --theme-section-tab-hover-bg: var(--bp-orange-50);
  --theme-section-tab-active-text: var(--bp-orange-500);
  --theme-section-tab-active-bg: transparent;
  --theme-section-tab-active-line: var(--bp-orange-500);
  --theme-section-tab-active-line-grad: var(--bp-orange-500);
  --theme-section-tab-active-line-shadow: none;
  --theme-section-tab-active-shadow: none;
  --theme-section-tab-divider: #E5EAF1;

  /* Schedule tabs */
  --theme-schedule-tab-bar-bg: #FFFFFF;
  --theme-schedule-tab-text: #555555;
  --theme-schedule-tab-text-hover: var(--bp-orange-600);
  --theme-schedule-tab-inactive-bg: transparent;
  --theme-schedule-tab-hover-bg: var(--bp-orange-50);
  --theme-schedule-tab-active-bg: transparent;
  --theme-schedule-tab-active-text: var(--bp-orange-500);
  --theme-schedule-tab-active-shadow: none;
  --theme-schedule-tab-divider: #E5EAF1;

  /* Betslip */
  --theme-betslip-bar-bg: var(--theme-surface-section-head);
  --theme-betslip-bar-text: var(--theme-schedule-section-head-text);
  --theme-betslip-bar-shadow: none;
  --theme-betslip-accent: var(--bp-orange-500);
  --theme-betslip-accent-hover: var(--bp-orange-600);

  /* In-play */
  --theme-inplay-panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  --theme-inplay-track-bg: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
  --theme-inplay-track-inset: inset 0 2px 8px rgba(0, 0, 0, 0.05);
  --theme-inplay-tile-bg: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
  --theme-inplay-tile-bg-hover: linear-gradient(180deg, #FFFFFF 0%, var(--bp-orange-50) 100%);
  --theme-inplay-tile-border: #E5EAF1;
  --theme-inplay-tile-shadow:
      0 2px 5px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  --theme-inplay-tile-shadow-hover:
      0 6px 16px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      0 0 0 1px var(--bp-alpha-orange-12);
  --theme-inplay-tile-shadow-active:
      0 1px 2px rgba(0, 0, 0, 0.06),
      inset 0 2px 5px rgba(0, 0, 0, 0.06);
  --theme-inplay-icon-well: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
  --theme-inplay-icon-well-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9);
  --theme-inplay-nav-bg: #F3F6FA;
  --theme-inplay-nav-shadow:
      0 2px 6px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --theme-inplay-tabs-bg: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
  --theme-inplay-tab-hover: var(--bp-alpha-orange-08);
  --theme-inplay-strip-item-hover: var(--bp-alpha-orange-08);
  --theme-inplay-strip-item-hover-text: var(--theme-primary);

  /*
   * Opposite theme ladder (dark) — for scoped cross-match (inline betting).
   * HEX lives once here; consumers remap via var(--theme-opp-*) only.
   * Mirrors public/frontend/css/theme/dark.css inline-relevant tokens.
   */
  --theme-opp-color-scheme: dark;
  --theme-opp-bg-elevated: #1A2332;
  --theme-opp-bg-sunken: #111827;
  --theme-opp-bg-head: #0B1220;
  --theme-opp-bg-row-alt: #111827;
  --theme-opp-bg-raised: #111827;
  --theme-opp-bg-section: #111827;
  --theme-opp-bg-input: #111827;
  --theme-opp-bg-market: #1A2332;
  --theme-opp-bg-market-3d: linear-gradient(180deg, #1F2A3C 0%, #1A2332 52%, #111827 100%);
  --theme-opp-border-default: #2A3446;
  --theme-opp-border-subtle: #1A2332;
  --theme-opp-border-strong: #3A4558;
  --theme-opp-text-primary: #EEEEEE;
  --theme-opp-text-strong: #EEEEEE;
  --theme-opp-text-muted: #A8A8A8;
  --theme-opp-text-body: #DDDDDD;
  --theme-opp-text-inverse: #0B1220;
  --theme-opp-table-head-bg: #0B1220;
  --theme-opp-table-row-bg: #1A2332;
  --theme-opp-table-row-alt: #111827;
  --theme-opp-table-border: #2A3446;
  --theme-opp-table-hover: #1F2A3C;
  --theme-opp-market-3d-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 -2px 5px rgba(0, 0, 0, 0.35),
      0 0 0 1px #2A3446,
      0 2px 10px rgba(0, 0, 0, 0.4);
  --theme-opp-schedule-section-head-bg: #0B1220;
  --theme-opp-schedule-section-head-text: #EEEEEE;
  --theme-opp-schedule-section-head-border: #2A3446;
  --theme-opp-schedule-category-head-bg: #2A3446;
  --theme-opp-schedule-category-head-text: #EEEEEE;
  --theme-opp-schedule-category-head-border: #3A4558;
  --theme-opp-match-list-columns-bg: #1E293B;
  --theme-opp-match-list-columns-border: #2A3446;
  --theme-opp-surface-nested: #0D1526;
  --theme-opp-surface-footer: #111827;
  /* Dark theme's active plate = light pill (already opposite-of-dark) */
  --theme-opp-sidebar-active-bg: #FFFFFF;
  --theme-opp-sidebar-active-text: #111827;

  /* ── Exchange odds (immutable Back/Lay/Draw/Yes/No — same in both themes) ─ */
  --theme-odds-back: var(--bp-back);
  --theme-odds-back-hover: var(--bp-back-hover);
  --theme-odds-back-text: var(--bp-odds-ink);
  --theme-odds-lay: var(--bp-lay);
  --theme-odds-lay-hover: var(--bp-lay-hover);
  --theme-odds-lay-text: var(--bp-odds-ink);
  --theme-odds-draw: var(--bp-draw);
  --theme-odds-draw-hover: var(--bp-draw-hover);
  --theme-odds-draw-text: var(--bp-odds-ink);
  /* Fancy / Session Yes|No (green / red) */
  --theme-odds-yes: var(--bp-success-strong);
  --theme-odds-yes-hover: var(--bp-success);
  --theme-odds-yes-text: var(--theme-icon-on-brand, var(--bp-white));
  --theme-odds-no: var(--bp-danger-strong);
  --theme-odds-no-hover: var(--bp-danger);
  --theme-odds-no-text: var(--theme-icon-on-brand, var(--bp-white));

  /* ── Market flags BM / F / GL (color + pattern; never color alone) ─────── */
  --theme-flag-on-bg: #006400;
  --theme-flag-on-text: #FFFFFF;
  --theme-flag-off-bg: #CBD5E1;
  --theme-flag-off-text: #64748B;
  --theme-flag-bm-accent: transparent; /* solid fill = BM */
  --theme-flag-fancy-accent: none; /* no amber underline under F */
  --theme-flag-gl-accent: none; /* GL matches BM when available */
}

/* ===== dark.css ===== */
/* GENERATED — SOURCE OF TRUTH: src/styles/theme/ — run: composer theme:build */
/**
 * BigPlay — Dark theme semantic tokens
 * Palette:
 *   page #0F172A · section #111827 · card #1A2332 · header #0B1220
 *   sidebar #111827 · border #2A3446 · text #EEEEEE · accent #DD3E42
 */

.theme-dark,
html.theme-dark {
  color-scheme: dark;

  /* Surfaces */
  --theme-bg-page: #0F172A;
  --theme-bg-elevated: #1A2332;
  --theme-bg-sunken: #111827;
  --theme-bg-head: #0B1220;
  --theme-bg-overlay: var(--bp-alpha-black-45);
  --theme-bg-row-alt: #111827;
  --theme-bg-input: #111827;
  --theme-bg-market: #1A2332;
  --theme-bg-market-3d: linear-gradient(180deg, #1F2A3C 0%, #1A2332 52%, #111827 100%);
  --theme-bg-raised: #111827;
  --theme-bg-section: #111827;

  /* Cards */
  --theme-card-bg: #1A2332;
  --theme-card-border: #2A3446;
  --theme-card-shadow: none;

  /* Headers / navigation */
  --theme-header-bg: #0B1220;
  --theme-header-border: #2A3446;
  --theme-header-text: #EEEEEE;
  --theme-header-icon: #DDDDDD;
  --theme-header-shadow: none;
  --theme-header-sheen: transparent;
  --theme-header-active-line: linear-gradient(180deg, var(--bp-orange-400) 0%, var(--bp-orange-500) 50%, var(--bp-orange-700) 100%);
  --theme-header-active-line-shadow: 0 2px 6px var(--bp-alpha-orange-32);
  --theme-header-search-bg: #111827;
  --theme-header-search-placeholder: #888888;
  --theme-header-search-border: #2A3446;
  --theme-header-search-icon: var(--theme-header-icon);
  --theme-search-placeholder: #888888;

  /* Header cats */
  --theme-header-cats-bg: #0B1220;
  --theme-header-cats-fade: #0B1220;
  --theme-nav-cats-seam: #2A3446;
  --theme-nav-cats-seam-shadow: none;
  --theme-nav-cats-seam-height: 1px;
  --theme-header-cats-top-seam: transparent;
  --theme-header-cats-inset: none;
  --theme-header-cats-bottom-seam: #2A3446;
  --theme-header-cats-bottom-seam-shadow: none;

  /* Sidebar */
  --theme-sidebar-bg: #111827;
  --theme-sidebar-text: #DDDDDD;
  --theme-sidebar-text-strong: #EEEEEE;
  --theme-sidebar-icon-well: var(--bp-orange-500);
  --theme-sidebar-icon-glyph: #FFFFFF;
  --theme-sidebar-icon: var(--theme-icon-default); /* default glyph color fallback */
  --theme-sidebar-hover-bg: color-mix(in srgb, var(--bp-orange-500) 14%, #1A2332);
  /* Active = opposite theme's sidebar surface (light sidebar #FFFFFF) */
  --theme-sidebar-active-bg: #FFFFFF;
  --theme-sidebar-active-text: #111827;
  /* Same emboss structure as light — tuned for white active pill */
  --theme-sidebar-item-hover-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -2px 4px rgba(122, 48, 0, 0.28),
      0 2px 6px var(--bp-alpha-orange-28);
  --theme-sidebar-item-active-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -2px 4px rgba(15, 23, 42, 0.12),
      0 2px 5px rgba(15, 23, 42, 0.12);
  --theme-sidebar-item-active-hover-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -2px 5px rgba(15, 23, 42, 0.16),
      0 3px 8px rgba(15, 23, 42, 0.14);
  --theme-sidebar-section-bg: #1A2332;
  --theme-sidebar-section-text: #EEEEEE;
  --theme-sidebar-section-accent: var(--bp-orange-500);
  --theme-icon-s7: #DDDDDD;

  /* Borders */
  --theme-border-default: #2A3446;
  --theme-border-subtle: #1A2332;
  --theme-border-strong: #3A4558;

  /* Text */
  --theme-text-primary: #EEEEEE;
  --theme-text-strong: #EEEEEE;
  --theme-text-muted: #A8A8A8; /* AA-safer on page #0F172A */
  --theme-text-body: #DDDDDD;
  --theme-text-inverse: #0B1220;
  --theme-text-link: var(--bp-orange-400);

  /* Icons */
  --theme-icon-default: #DDDDDD;
  --theme-icon-muted: #888888;
  --theme-icon-on-brand: #FFFFFF;
  --theme-icon-accent: var(--bp-orange-400);
  --theme-icon-well-bg: var(--theme-btn-primary-bg, #DD3E42);
  --theme-icon-well-hover: var(--theme-btn-primary-hover);
  --theme-icon-well-active: var(--bp-orange-700);
  --theme-icon-well-shadow: inset 0 1px 0 var(--bp-alpha-white-28), 0 2px 6px var(--bp-alpha-orange-28);

  /* Buttons — solid brand (#DD3E42); hover/active darker for AA white text */
  --theme-btn-primary-bg: #DD3E42;
  --theme-btn-primary-text: #FFFFFF;
  --theme-btn-primary-hover: #C9363A;
  --theme-btn-secondary-bg: #1A2332;
  --theme-btn-secondary-text: #EEEEEE;
  --theme-btn-danger-bg: var(--bp-danger);
  --theme-btn-danger-text: #FFFFFF;
  --theme-btn-ghost-hover: var(--bp-alpha-white-08);

  /* Brand / primary */
  --theme-primary: #DD3E42;
  --theme-primary-hover: var(--bp-orange-600);
  --theme-primary-active: var(--bp-orange-700);
  --theme-primary-soft: color-mix(in srgb, var(--bp-orange-500) 16%, #1A2332);
  --theme-primary-border: var(--bp-orange-700);
  --theme-primary-soft-dark: color-mix(in srgb, var(--bp-orange-500) 22%, #0F172A);

  /* Status */
  --theme-status-success: var(--bp-success);
  --theme-status-danger: var(--bp-danger);
  --theme-status-warning: var(--bp-warning);
  --theme-status-info: var(--bp-info);
  --theme-status-live: var(--bp-live-bright);
  /* Canonical win/profit + lose/loss ink (Open Bets text + Settled badges) */
  --theme-pl-positive: #4ADE80;
  --theme-pl-negative: #F87171;

  /* Hover / focus */
  --theme-hover-surface: var(--bp-alpha-orange-12);
  --theme-focus-ring: var(--bp-orange-400);
  --theme-focus-ring-offset: #1A2332;

  /* Tables */
  --theme-table-head-bg: #0B1220;
  --theme-table-row-bg: #1A2332;
  --theme-table-row-alt: #111827;
  --theme-table-border: #2A3446;
  --theme-table-hover: #1F2A3C;

  /* Forms */
  --theme-input-bg: #111827;
  --theme-input-border: #2A3446;
  --theme-input-text: #EEEEEE;
  --theme-input-placeholder: var(--theme-search-placeholder);
  --theme-input-focus-border: var(--theme-primary);
  --theme-dropdown-bg: #1A2332;
  --theme-dropdown-border: #2A3446;
  --theme-dropdown-hover: #1F2A3C;

  /* Badges / alerts */
  --theme-badge-success-bg: color-mix(in srgb, var(--bp-success) 22%, #1A2332);
  --theme-badge-danger-bg: color-mix(in srgb, var(--bp-danger) 22%, #1A2332);
  --theme-badge-warning-bg: color-mix(in srgb, var(--bp-warning) 22%, #1A2332);
  --theme-badge-info-bg: color-mix(in srgb, var(--bp-info) 22%, #1A2332);
  --theme-alert-success-border: var(--bp-success);
  --theme-alert-danger-border: var(--bp-danger);
  --theme-alert-warning-border: var(--bp-warning);

  /* Modals / tooltips */
  --theme-modal-bg: #1A2332;
  --theme-modal-overlay: var(--bp-alpha-black-45);
  --theme-tooltip-bg: #0B1220;
  --theme-tooltip-text: #EEEEEE;

  /* Scrollbar */
  --theme-scrollbar-track: #111827;
  --theme-scrollbar-thumb: var(--bp-orange-700);
  --theme-scrollbar-thumb-hover: var(--bp-orange-500);

  /* Charts */
  --theme-chart-grid: #2A3446;
  --theme-chart-axis: #999999;
  --theme-chart-series-1: var(--bp-brand-blue-light);
  --theme-chart-series-2: var(--bp-orange-400);
  --theme-chart-series-3: var(--bp-success);
  --theme-chart-series-4: var(--bp-lay);

  /* Shadows */
  --theme-shadow-sm: none;
  --theme-shadow-md: 0 4px 12px var(--bp-alpha-black-35);
  --theme-shadow-lg: 0 8px 24px var(--bp-alpha-black-45);
  --theme-market-3d-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 -2px 5px rgba(0, 0, 0, 0.35),
      0 0 0 1px #2A3446,
      0 2px 10px rgba(0, 0, 0, 0.4);

  /* Schedule section heads */
  --theme-schedule-section-head-bg: #0B1220;
  --theme-schedule-section-head-text: #EEEEEE;
  --theme-schedule-section-head-border: #2A3446;
  --theme-schedule-section-head-shadow: none;
  --theme-schedule-section-count-bg: rgba(255, 255, 255, 0.06);
  --theme-schedule-section-count-border: #2A3446;
  --theme-schedule-category-head-bg: #2A3446;
  --theme-schedule-category-head-text: #EEEEEE;
  --theme-schedule-category-head-border: #3A4558;
  --theme-schedule-category-head-accent: var(--bp-orange-500);

  /* MATCH / 1 / X / 2 column legend */
  --theme-match-list-columns-bg: #1E293B;
  --theme-match-list-columns-border: #2A3446;

  /* Unified surface ladder — consume these aliases in components. */
  --theme-surface-page: var(--theme-bg-page);
  --theme-surface-panel: var(--theme-bg-section);
  --theme-surface-raised: var(--theme-bg-elevated);
  --theme-surface-table-head: var(--theme-table-head-bg);
  --theme-surface-section-head: var(--theme-schedule-section-head-bg);
  --theme-surface-category-head: var(--theme-schedule-category-head-bg);
  --theme-surface-subhead: var(--theme-match-list-columns-bg);
  --theme-surface-row: var(--theme-table-row-bg);
  --theme-surface-row-alt: var(--theme-table-row-alt);
  --theme-surface-row-hover: var(--theme-table-hover);
  --theme-surface-nested: #0D1526;
  --theme-surface-menu: var(--theme-sidebar-bg);
  --theme-surface-submenu: var(--theme-sidebar-section-bg);
  --theme-surface-footer: #111827;
  --theme-surface-active: var(--theme-sidebar-active-bg);
  --theme-surface-active-text: var(--theme-sidebar-active-text);
  --theme-surface-active-plate: linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 52%, #E5EAF1 100%);

  /* Section tabs */
  --theme-section-tab-bar-bg: #1A2332;
  --theme-section-tab-text: #999999;
  --theme-section-tab-text-hover: var(--bp-orange-400);
  --theme-section-tab-inactive-bg: transparent;
  --theme-section-tab-hover-bg: var(--bp-alpha-orange-12);
  --theme-section-tab-active-text: var(--bp-orange-400);
  --theme-section-tab-active-bg: transparent;
  --theme-section-tab-active-line: var(--bp-orange-500);
  --theme-section-tab-active-line-grad: var(--bp-orange-500);
  --theme-section-tab-active-line-shadow: none;
  --theme-section-tab-active-shadow: none;
  --theme-section-tab-divider: #2A3446;

  /* Schedule tabs */
  --theme-schedule-tab-bar-bg: #1A2332;
  --theme-schedule-tab-text: #999999;
  --theme-schedule-tab-text-hover: var(--bp-orange-400);
  --theme-schedule-tab-inactive-bg: transparent;
  --theme-schedule-tab-hover-bg: var(--bp-alpha-orange-12);
  --theme-schedule-tab-active-bg: transparent;
  --theme-schedule-tab-active-text: var(--bp-orange-400);
  --theme-schedule-tab-active-shadow: none;
  --theme-schedule-tab-divider: #2A3446;

  /* Betslip */
  --theme-betslip-bar-bg: var(--theme-surface-section-head);
  --theme-betslip-bar-text: var(--theme-schedule-section-head-text);
  --theme-betslip-bar-shadow: none;
  --theme-betslip-accent: var(--bp-orange-500);
  --theme-betslip-accent-hover: var(--bp-orange-400);

  /* In-play */
  --theme-inplay-panel-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --theme-inplay-track-bg: linear-gradient(180deg, #0F172A 0%, #111827 100%);
  --theme-inplay-track-inset: inset 0 3px 10px rgba(0, 0, 0, 0.55);
  --theme-inplay-tile-bg: linear-gradient(180deg, #1F2A3C 0%, #1A2332 100%);
  --theme-inplay-tile-bg-hover: linear-gradient(180deg, #243247 0%, #1A2332 100%);
  --theme-inplay-tile-border: #2A3446;
  --theme-inplay-tile-shadow:
      0 4px 10px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --theme-inplay-tile-shadow-hover:
      0 8px 20px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px var(--bp-alpha-orange-32);
  --theme-inplay-tile-shadow-active:
      0 1px 3px rgba(0, 0, 0, 0.5),
      inset 0 3px 7px rgba(0, 0, 0, 0.45);
  --theme-inplay-icon-well: linear-gradient(180deg, #1A2332 0%, #111827 100%);
  --theme-inplay-icon-well-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04);
  --theme-inplay-nav-bg: linear-gradient(180deg, #1A2332 0%, #111827 100%);
  --theme-inplay-nav-shadow:
      0 3px 10px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --theme-inplay-tabs-bg: linear-gradient(180deg, #1A2332 0%, #0F172A 100%);
  --theme-inplay-tab-hover: var(--bp-alpha-orange-12);
  --theme-inplay-strip-item-hover: var(--bp-alpha-orange-12);
  --theme-inplay-strip-item-hover-text: var(--bp-orange-400);

  /*
   * Opposite theme ladder (light) — for scoped cross-match (inline betting).
   * HEX lives once here; consumers remap via var(--theme-opp-*) only.
   * Mirrors public/frontend/css/theme/light.css inline-relevant tokens.
   */
  --theme-opp-color-scheme: light;
  --theme-opp-bg-elevated: #FCFCFD;
  --theme-opp-bg-sunken: #F5F7FA;
  --theme-opp-bg-head: #F8FAFC;
  --theme-opp-bg-row-alt: #F5F7FA;
  --theme-opp-bg-raised: #FFFFFF;
  --theme-opp-bg-section: #FFFFFF;
  --theme-opp-bg-input: #FFFFFF;
  --theme-opp-bg-market: #FCFCFD;
  --theme-opp-bg-market-3d: linear-gradient(180deg, #FCFCFD 0%, #F8FAFC 48%, #F5F7FA 100%);
  --theme-opp-border-default: #E5EAF1;
  --theme-opp-border-subtle: #F5F7FA;
  --theme-opp-border-strong: #CCCCCC;
  --theme-opp-text-primary: #000000;
  --theme-opp-text-strong: #000000;
  --theme-opp-text-muted: #666666;
  --theme-opp-text-body: #333333;
  --theme-opp-text-inverse: #FFFFFF;
  --theme-opp-table-head-bg: #F1F5F9;
  --theme-opp-table-row-bg: #FCFCFD;
  --theme-opp-table-row-alt: #F5F7FA;
  --theme-opp-table-border: #E5EAF1;
  --theme-opp-table-hover: #EEF2F7;
  --theme-opp-market-3d-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 0 0 1px #E5EAF1,
      0 2px 8px rgba(0, 0, 0, 0.05);
  --theme-opp-schedule-section-head-bg: #CDD5E0;
  --theme-opp-schedule-section-head-text: #000000;
  --theme-opp-schedule-section-head-border: #B4BECB;
  --theme-opp-schedule-category-head-bg: #D5DCE6;
  --theme-opp-schedule-category-head-text: #000000;
  --theme-opp-schedule-category-head-border: #C3CBD6;
  --theme-opp-match-list-columns-bg: #E2E8F0;
  --theme-opp-match-list-columns-border: #CBD5E1;
  --theme-opp-surface-nested: #EEF2F7;
  --theme-opp-surface-footer: #FFFFFF;
  /* Light theme's active plate = dark pill (already opposite-of-light) */
  --theme-opp-sidebar-active-bg: #111827;
  --theme-opp-sidebar-active-text: #EEEEEE;

  /* ── Exchange odds (immutable Back/Lay/Draw/Yes/No — same in both themes) ─ */
  --theme-odds-back: var(--bp-back);
  --theme-odds-back-hover: var(--bp-back-hover);
  --theme-odds-back-text: var(--bp-odds-ink);
  --theme-odds-lay: var(--bp-lay);
  --theme-odds-lay-hover: var(--bp-lay-hover);
  --theme-odds-lay-text: var(--bp-odds-ink);
  --theme-odds-draw: var(--bp-draw);
  --theme-odds-draw-hover: var(--bp-draw-hover);
  --theme-odds-draw-text: var(--bp-odds-ink);
  /* Fancy / Session Yes|No (green / red) */
  --theme-odds-yes: var(--bp-success-strong);
  --theme-odds-yes-hover: var(--bp-success);
  --theme-odds-yes-text: var(--theme-icon-on-brand, var(--bp-white));
  --theme-odds-no: var(--bp-danger-strong);
  --theme-odds-no-hover: var(--bp-danger);
  --theme-odds-no-text: var(--theme-icon-on-brand, var(--bp-white));

  /* ── Market flags BM / F / GL (color + pattern; never color alone) ─────── */
  --theme-flag-on-bg: #006400;
  --theme-flag-on-text: #FFFFFF;
  --theme-flag-off-bg: #475569;
  --theme-flag-off-text: #94A3B8;
  --theme-flag-bm-accent: transparent;
  --theme-flag-fancy-accent: none;
  --theme-flag-gl-accent: none; /* GL matches BM when available */
}

/* ===== exchange-theme.css ===== */
/**
 * Exchange theme — Wave 0 bridge runtime
 * Exact admin S7 tokens (theme-light / theme-dark on <html>).
 *
 * Architecture:
 *   --bp-* (primitives in theme/variables.css)
 *     → --theme-* (semantic in theme/light.css | dark.css)
 *       → --ex-* / --color-* / --s7-* (legacy aliases below)
 *
 * Computed colors preserved from pre-Wave-0 live values.
 * Do not remove legacy tokens. Component CSS unchanged in Wave 0.
 */

/* Inter loads after window.load — see style-account.blade.php (avoids tab spinner). */

/* ─── Shared palette → primitives / semantic soft fills ─────────────────── */
.theme-light,
.theme-dark {
    --bs-primary: var(--theme-primary);
    --bs-primary-rgb: 221, 62, 66;
    --color-primary: var(--theme-primary);
    --color-primary-light: var(--bp-orange-400);
    /* Soft orange chip / soft fills (from light.css / dark.css --theme-primary-soft) */
    --color-primary-lighten: var(--theme-primary-soft);
    /* Dark soft fill — does not replace lighten */
    --color-primary-soft-dark: var(--theme-primary-soft-dark);
    --color-secondary: var(--bp-secondary);
    --color-success: var(--bp-success);
    --color-success-light: var(--bp-success-light);
    --color-danger: var(--bp-danger);
    --color-danger-light: var(--bp-danger-light);
    --color-warning: var(--bp-warning);
    --color-warning-light: var(--bp-warning-light);
    --color-info: var(--bp-info);
    --ex-tab-active: var(--color-primary);
    /* Signed values & directional semantics — same ink as Open/Settled P/L */
    --color-value-positive: var(--theme-pl-positive, var(--bp-success-strong));
    --color-value-negative: var(--theme-pl-negative, var(--bp-danger-strong));
    --color-value-zero: var(--ex-muted);
    --color-value-neutral: var(--color-info);
    --color-odds-up: var(--color-success);
    --color-odds-down: var(--color-danger);
    --color-odds-flash: var(--bp-odds-flash);
    --color-odds-flash-text: var(--bp-odds-ink);
    --color-odds-flash-up: #15803D;
    --color-odds-flash-down: var(--theme-primary, #DD3E42);
    /* Bet / ledger status — same ink family; soft wash fill + ink text */
    --ex-status-win: var(--theme-pl-positive, var(--bp-success-strong));
    --ex-status-lose: var(--theme-pl-negative, var(--bp-danger-strong));
    --ex-status-refund: var(--bp-info);
    --ex-status-process: var(--bp-warning-strong);
    --ex-status-on: #FFFFFF;
    --ex-bet-status-win-bg: color-mix(in srgb, var(--ex-status-win) 16%, var(--theme-bg-elevated, #FFFFFF));
    --ex-bet-status-win-text: var(--ex-status-win);
    --ex-bet-status-lose-bg: color-mix(in srgb, var(--ex-status-lose) 16%, var(--theme-bg-elevated, #FFFFFF));
    --ex-bet-status-lose-text: var(--ex-status-lose);
    --ex-bet-status-refunded-bg: var(--ex-status-refund);
    --ex-bet-status-refunded-text: var(--ex-status-on);
    --ex-bet-status-processing-bg: var(--ex-status-process);
    --ex-bet-status-processing-text: var(--ex-status-on);
    --color-flow-in: var(--color-value-positive);
    --color-flow-out: var(--color-value-negative);
    --ex-back: var(--theme-odds-back, var(--bp-back));
    --ex-back-hover: var(--theme-odds-back-hover, var(--bp-back-hover));
    --ex-back-text: var(--theme-odds-back-text, var(--bp-odds-ink));
    --ex-lay: var(--theme-odds-lay, var(--bp-lay));
    --ex-lay-hover: var(--theme-odds-lay-hover, var(--bp-lay-hover));
    --ex-lay-text: var(--theme-odds-lay-text, var(--bp-odds-ink));
    --ex-draw: var(--theme-odds-draw, var(--bp-draw));
    --ex-draw-hover: var(--theme-odds-draw-hover, var(--bp-draw-hover));
    --ex-draw-text: var(--theme-odds-draw-text, var(--bp-odds-ink));
    /* Fancy / Session Yes|No */
    --ex-yes: var(--theme-odds-yes, var(--bp-success-strong));
    --ex-yes-hover: var(--theme-odds-yes-hover, var(--bp-success));
    --ex-yes-text: var(--theme-odds-yes-text, var(--theme-icon-on-brand, var(--bp-white)));
    --ex-no: var(--theme-odds-no, var(--bp-danger-strong));
    --ex-no-hover: var(--theme-odds-no-hover, var(--bp-danger));
    --ex-no-text: var(--theme-odds-no-text, var(--theme-icon-on-brand, var(--bp-white)));
    /* Legacy theme hooks used by style.css */
    --main-color: var(--color-primary);
    --main-color2: var(--color-primary-light);
    /* Live indicator — three greens that cycle (no shadow/border) */
    --ex-live-green-bright: var(--bp-live-bright);
    --ex-live-green-mid: var(--bp-live-mid);
    --ex-live-green-dim: var(--bp-live-dim);
    --ex-live-green: var(--ex-live-green-bright);
    --ex-live-green-glow: var(--bp-live-glow);
    --ex-live-green-ring: var(--bp-live-ring);
    /* This-over ball chips — one logical hue per activity (theme-aware). */
    --ex-ball-dot: var(--bp-slate-500);
    --ex-ball-run: var(--bp-info);
    --ex-ball-four: var(--bp-success);
    --ex-ball-six: var(--bp-warning);
    --ex-ball-wicket: var(--bp-danger);
    --ex-ball-wide: var(--bp-orange-500);
    --ex-ball-noball: color-mix(in srgb, var(--bp-info) 42%, var(--bp-danger) 58%);
    --ex-ball-pending: var(--theme-text-muted, var(--ex-muted));
    --ex-ball-ink-on: #ffffff;
    --ex-ball-ink-soft: var(--theme-text-strong, var(--ex-text-strong));
    /* Unified semantic surface bridge. */
    --ex-surface-page: var(--theme-surface-page);
    --ex-surface-panel: var(--theme-surface-panel);
    --ex-surface-table-head: var(--theme-surface-table-head);
    --ex-surface-section-head: var(--theme-surface-section-head);
    --ex-surface-category-head: var(--theme-surface-category-head);
    --ex-surface-subhead: var(--theme-surface-subhead);
    --ex-surface-row: var(--theme-surface-row);
    --ex-surface-row-alt: var(--theme-surface-row-alt);
    --ex-surface-row-hover: var(--theme-surface-row-hover);
    --ex-surface-nested: var(--theme-surface-nested);
    --ex-surface-menu: var(--theme-surface-menu);
    --ex-surface-submenu: var(--theme-surface-submenu);
    --ex-surface-footer: var(--theme-surface-footer);
    --ex-surface-active: var(--theme-surface-active);
    --ex-surface-active-text: var(--theme-surface-active-text);
    --ex-surface-active-plate: var(--theme-surface-active-plate);
}

.theme-light {
    --ex-bet-status-win-bg: color-mix(in srgb, var(--ex-status-win) 16%, var(--theme-bg-elevated, #FFFFFF));
    --ex-bet-status-lose-bg: color-mix(in srgb, var(--ex-status-lose) 16%, var(--theme-bg-elevated, #FFFFFF));
    --body-bg: var(--theme-bg-page);
    --card-bg: var(--theme-bg-elevated);
    --h-color: var(--theme-text-primary);
    --para-color: var(--theme-text-body);
    --border-color: var(--theme-border-default);
    --ex-surface: var(--theme-bg-elevated);
    --ex-surface-raised: var(--theme-bg-raised);
    --ex-surface-head: var(--theme-bg-head);
    --ex-text: var(--theme-text-primary);
    --ex-text-strong: var(--theme-text-strong);
    --ex-muted: var(--theme-text-muted);
    --color-muted: var(--ex-muted);
    --ex-border: var(--theme-border-default);
    --ex-row-alt: var(--theme-bg-row-alt);
    --ex-nav-bg: var(--theme-header-bg);
    --ex-nav-border: var(--theme-header-border);
    --ex-nav-shadow: var(--theme-header-shadow);
    --ex-nav-3d-sheen: var(--theme-header-sheen);
    --ex-header-cats-bg: var(--theme-header-cats-bg);
    --ex-header-cats-fade: var(--theme-header-cats-fade);
    --ex-nav-cats-seam: var(--theme-nav-cats-seam);
    --ex-nav-cats-seam-shadow: var(--theme-nav-cats-seam-shadow);
    --ex-nav-cats-seam-height: var(--theme-nav-cats-seam-height);
    --ex-header-cats-top-seam: var(--theme-header-cats-top-seam);
    --ex-header-cats-inset: var(--theme-header-cats-inset);
    --ex-header-cats-bottom-seam: var(--theme-header-cats-bottom-seam);
    --ex-header-cats-bottom-seam-shadow: var(--theme-header-cats-bottom-seam-shadow);
    --ex-nav-active-line: var(--theme-header-active-line);
    --ex-nav-active-line-shadow: var(--theme-header-active-line-shadow);
    --ex-nav-text: var(--theme-header-text);
    --ex-nav-icon: var(--theme-header-icon);
    --ex-nav-search-bg: var(--theme-header-search-bg);
    --ex-nav-search-placeholder: var(--theme-header-search-placeholder);
    --ex-nav-search-border: var(--theme-header-search-border);
    --ex-nav-search-icon: var(--theme-header-search-icon);
    --ex-search-placeholder: var(--theme-search-placeholder);
    --ex-input-bg: var(--theme-bg-input);
    --ex-shadow: var(--theme-shadow-sm);
    /* In Play 3D surfaces */
    --ex-inplay-panel-shadow: var(--theme-inplay-panel-shadow);
    --ex-inplay-track-bg: var(--theme-inplay-track-bg);
    --ex-inplay-track-inset: var(--theme-inplay-track-inset);
    --ex-inplay-tile-bg: var(--theme-inplay-tile-bg);
    --ex-inplay-tile-bg-hover: var(--theme-inplay-tile-bg-hover);
    --ex-inplay-tile-border: var(--theme-inplay-tile-border);
    --ex-inplay-tile-shadow: var(--theme-inplay-tile-shadow);
    --ex-inplay-tile-shadow-hover: var(--theme-inplay-tile-shadow-hover);
    --ex-inplay-tile-shadow-active: var(--theme-inplay-tile-shadow-active);
    --ex-inplay-icon-well: var(--theme-inplay-icon-well);
    --ex-inplay-icon-well-shadow: var(--theme-inplay-icon-well-shadow);
    --ex-inplay-nav-bg: var(--theme-inplay-nav-bg);
    --ex-inplay-nav-shadow: var(--theme-inplay-nav-shadow);
    --ex-inplay-tabs-bg: var(--theme-inplay-tabs-bg);
    --ex-inplay-tab-hover: var(--theme-inplay-tab-hover);
    --ex-inplay-strip-item-hover: var(--theme-inplay-strip-item-hover);
    --ex-inplay-strip-item-hover-text: var(--theme-inplay-strip-item-hover-text);
    --ex-section-tab-bar-bg: var(--theme-section-tab-bar-bg);
    --ex-section-tab-text: var(--theme-section-tab-text);
    --ex-section-tab-text-hover: var(--theme-section-tab-text-hover);
    --ex-section-tab-inactive-bg: var(--theme-section-tab-inactive-bg);
    --ex-section-tab-hover-bg: var(--theme-section-tab-hover-bg);
    --ex-section-tab-active-text: var(--theme-section-tab-active-text);
    --ex-section-tab-active-bg: var(--theme-section-tab-active-bg);
    --ex-section-tab-active-line: var(--theme-section-tab-active-line);
    --ex-section-tab-active-line-grad: var(--theme-section-tab-active-line-grad);
    --ex-section-tab-active-line-shadow: var(--theme-section-tab-active-line-shadow);
    --ex-section-tab-active-shadow: var(--theme-section-tab-active-shadow);
    --ex-section-tab-divider: var(--theme-section-tab-divider);
    /* Schedule page hierarchy — tabs → section → sport category */
    --ex-schedule-tab-bar-bg: var(--theme-schedule-tab-bar-bg);
    --ex-schedule-tab-text: var(--theme-schedule-tab-text);
    --ex-schedule-tab-text-hover: var(--theme-schedule-tab-text-hover);
    --ex-schedule-tab-inactive-bg: var(--theme-schedule-tab-inactive-bg);
    --ex-schedule-tab-hover-bg: var(--theme-schedule-tab-hover-bg);
    --ex-schedule-tab-active-bg: var(--theme-schedule-tab-active-bg);
    --ex-schedule-tab-active-text: var(--theme-schedule-tab-active-text);
    --ex-schedule-tab-active-shadow: var(--theme-schedule-tab-active-shadow);
    --ex-schedule-tab-divider: var(--theme-schedule-tab-divider);
    --ex-schedule-section-head-bg: var(--theme-surface-section-head);
    --ex-schedule-section-head-text: var(--theme-schedule-section-head-text);
    --ex-schedule-section-head-border: var(--theme-schedule-section-head-border);
    --ex-schedule-section-head-shadow: var(--theme-schedule-section-head-shadow);
    /* Bet slip chrome — same slate language as sidebar + schedule heads */
    --ex-betslip-bar-bg: var(--theme-betslip-bar-bg);
    --ex-betslip-bar-text: var(--theme-betslip-bar-text);
    --ex-betslip-bar-shadow: var(--theme-betslip-bar-shadow);
    --ex-betslip-accent: var(--theme-betslip-accent);
    --ex-betslip-accent-hover: var(--theme-betslip-accent-hover);
    --ex-schedule-section-count-bg: var(--theme-schedule-section-count-bg);
    --ex-schedule-section-count-border: var(--theme-schedule-section-count-border);
    --ex-schedule-category-head-bg: var(--theme-surface-category-head);
    --ex-schedule-category-head-text: var(--theme-schedule-category-head-text);
    --ex-schedule-category-head-border: var(--theme-schedule-category-head-border);
    --ex-schedule-category-head-accent: var(--theme-schedule-category-head-accent);
    /* Sidebar icon bridge (categories.css also sets; same computed value) */
    --s7-icon: var(--theme-icon-s7);
}

.theme-dark {
    --ex-bet-status-win-bg: color-mix(in srgb, var(--ex-status-win) 22%, var(--theme-bg-elevated, #1A2332));
    --ex-bet-status-lose-bg: color-mix(in srgb, var(--ex-status-lose) 22%, var(--theme-bg-elevated, #1A2332));
    --body-bg: var(--theme-bg-page);
    --card-bg: var(--theme-bg-elevated);
    --h-color: var(--theme-text-primary);
    --para-color: var(--theme-text-body);
    --border-color: var(--theme-border-default);
    --ex-surface: var(--theme-bg-elevated);
    --ex-surface-raised: var(--theme-bg-raised);
    --ex-surface-head: var(--theme-bg-head);
    --ex-text: var(--theme-text-primary);
    --ex-text-strong: var(--theme-text-strong);
    --ex-muted: var(--theme-text-muted);
    --color-muted: var(--ex-muted);
    --ex-border: var(--theme-border-default);
    --ex-row-alt: var(--theme-bg-row-alt);
    --ex-nav-bg: var(--theme-header-bg);
    --ex-nav-border: var(--theme-header-border);
    --ex-nav-shadow: var(--theme-header-shadow);
    --ex-nav-3d-sheen: var(--theme-header-sheen);
    --ex-header-cats-bg: var(--theme-header-cats-bg);
    --ex-header-cats-fade: var(--theme-header-cats-fade);
    --ex-nav-cats-seam: var(--theme-nav-cats-seam);
    --ex-nav-cats-seam-shadow: var(--theme-nav-cats-seam-shadow);
    --ex-nav-cats-seam-height: var(--theme-nav-cats-seam-height);
    --ex-header-cats-top-seam: var(--theme-header-cats-top-seam);
    --ex-header-cats-inset: var(--theme-header-cats-inset);
    --ex-header-cats-bottom-seam: var(--theme-header-cats-bottom-seam);
    --ex-header-cats-bottom-seam-shadow: var(--theme-header-cats-bottom-seam-shadow);
    --ex-nav-active-line: var(--theme-header-active-line);
    --ex-nav-active-line-shadow: var(--theme-header-active-line-shadow);
    --ex-nav-text: var(--theme-header-text);
    --ex-nav-icon: var(--theme-header-icon);
    --ex-nav-search-bg: var(--theme-header-search-bg);
    --ex-nav-search-placeholder: var(--theme-header-search-placeholder);
    --ex-nav-search-border: var(--theme-header-search-border);
    --ex-nav-search-icon: var(--theme-header-search-icon);
    --ex-search-placeholder: var(--theme-search-placeholder);
    --ex-input-bg: var(--theme-bg-input);
    --ex-shadow: var(--theme-shadow-sm);
    /* In Play 3D surfaces */
    --ex-inplay-panel-shadow: var(--theme-inplay-panel-shadow);
    --ex-inplay-track-bg: var(--theme-inplay-track-bg);
    --ex-inplay-track-inset: var(--theme-inplay-track-inset);
    --ex-inplay-tile-bg: var(--theme-inplay-tile-bg);
    --ex-inplay-tile-bg-hover: var(--theme-inplay-tile-bg-hover);
    --ex-inplay-tile-border: var(--theme-inplay-tile-border);
    --ex-inplay-tile-shadow: var(--theme-inplay-tile-shadow);
    --ex-inplay-tile-shadow-hover: var(--theme-inplay-tile-shadow-hover);
    --ex-inplay-tile-shadow-active: var(--theme-inplay-tile-shadow-active);
    --ex-inplay-icon-well: var(--theme-inplay-icon-well);
    --ex-inplay-icon-well-shadow: var(--theme-inplay-icon-well-shadow);
    --ex-inplay-nav-bg: var(--theme-inplay-nav-bg);
    --ex-inplay-nav-shadow: var(--theme-inplay-nav-shadow);
    --ex-inplay-tabs-bg: var(--theme-inplay-tabs-bg);
    --ex-inplay-tab-hover: var(--theme-inplay-tab-hover);
    --ex-inplay-strip-item-hover: var(--theme-inplay-strip-item-hover);
    --ex-inplay-strip-item-hover-text: var(--theme-inplay-strip-item-hover-text);
    --ex-section-tab-bar-bg: var(--theme-section-tab-bar-bg);
    --ex-section-tab-text: var(--theme-section-tab-text);
    --ex-section-tab-text-hover: var(--theme-section-tab-text-hover);
    --ex-section-tab-inactive-bg: var(--theme-section-tab-inactive-bg);
    --ex-section-tab-hover-bg: var(--theme-section-tab-hover-bg);
    --ex-section-tab-active-text: var(--theme-section-tab-active-text);
    --ex-section-tab-active-bg: var(--theme-section-tab-active-bg);
    --ex-section-tab-active-line: var(--theme-section-tab-active-line);
    --ex-section-tab-active-line-grad: var(--theme-section-tab-active-line-grad);
    --ex-section-tab-active-line-shadow: var(--theme-section-tab-active-line-shadow);
    --ex-section-tab-active-shadow: var(--theme-section-tab-active-shadow);
    --ex-section-tab-divider: var(--theme-section-tab-divider);
    /* Schedule page hierarchy — tabs → section → sport category */
    --ex-schedule-tab-bar-bg: var(--theme-schedule-tab-bar-bg);
    --ex-schedule-tab-text: var(--theme-schedule-tab-text);
    --ex-schedule-tab-text-hover: var(--theme-schedule-tab-text-hover);
    --ex-schedule-tab-inactive-bg: var(--theme-schedule-tab-inactive-bg);
    --ex-schedule-tab-hover-bg: var(--theme-schedule-tab-hover-bg);
    --ex-schedule-tab-active-bg: var(--theme-schedule-tab-active-bg);
    --ex-schedule-tab-active-text: var(--theme-schedule-tab-active-text);
    --ex-schedule-tab-active-shadow: var(--theme-schedule-tab-active-shadow);
    --ex-schedule-tab-divider: var(--theme-schedule-tab-divider);
    --ex-schedule-section-head-bg: var(--theme-surface-section-head);
    --ex-schedule-section-head-text: var(--theme-schedule-section-head-text);
    --ex-schedule-section-head-border: var(--theme-schedule-section-head-border);
    --ex-schedule-section-head-shadow: var(--theme-schedule-section-head-shadow);
    --ex-betslip-bar-bg: var(--theme-betslip-bar-bg);
    --ex-betslip-bar-text: var(--theme-betslip-bar-text);
    --ex-betslip-bar-shadow: var(--theme-betslip-bar-shadow);
    --ex-betslip-accent: var(--theme-betslip-accent);
    --ex-betslip-accent-hover: var(--theme-betslip-accent-hover);
    --ex-schedule-section-count-bg: var(--theme-schedule-section-count-bg);
    --ex-schedule-section-count-border: var(--theme-schedule-section-count-border);
    --ex-schedule-category-head-bg: var(--theme-surface-category-head);
    --ex-schedule-category-head-text: var(--theme-schedule-category-head-text);
    --ex-schedule-category-head-border: var(--theme-schedule-category-head-border);
    --ex-schedule-category-head-accent: var(--theme-schedule-category-head-accent);
    --s7-icon: var(--theme-icon-s7);
}

/* Map legacy exchange tokens → theme tokens */
.theme-light {
    --ex-market-bg: var(--theme-bg-market);
    --ex-market-bg-3d: var(--theme-bg-market-3d);
    --ex-market-3d-shadow: var(--theme-market-3d-shadow);
    --ex-market-header: var(--theme-surface-table-head);
    --ex-runner-text: var(--ex-text);
}

.theme-dark {
    --ex-market-bg: var(--theme-bg-market);
    --ex-market-bg-3d: var(--theme-bg-market-3d);
    --ex-market-3d-shadow: var(--theme-market-3d-shadow);
    --ex-market-header: var(--theme-surface-table-head);
    --ex-runner-text: var(--ex-text);
}

html.theme-light,
html.theme-dark {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    overflow-x: clip;
}

@media (max-width: 991.98px) {
    html.theme-light,
    html.theme-dark {
        scrollbar-gutter: auto;
        overflow-x: hidden;
    }

    body.exchange-app {
        overflow-x: hidden;
    }
}

body.exchange-app {
    font-family: "Inter", sans-serif;
    font-size: var(--theme-text-lg-plus, 1rem);
    line-height: 1.7;
    background-color: var(--body-bg) !important;
    color: var(--para-color);
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    --ex-site-header-gap: 0.35rem;
    /* Compact navbar bar (ex-navbar-bottom only — not cats) */
    --ex-navbar-h: 60px;
    --ex-navbar-bottom-height: var(--ex-navbar-h);
    --ex-navbar-logo-h: 32px;
    --ex-navbar-control-h: 2.75rem; /* 44px — WCAG 2.5.5 / Apple HIG touch-target minimum, unified across all breakpoints */
    --ex-navbar-search-h: 2rem; /* 32px — compact pill; shorter than icon controls */
    --ex-navbar-icon-size: 20px;
    --ex-navbar-item-gap: 12px;
    --ex-navbar-item-px: 12px;
    --body-font: "Inter", sans-serif;
    --heading-font: "Inter", sans-serif;
    /* Remap style.css legacy tokens so p/h tags stay readable on light cards */
    --heading-color: var(--h-color);
    --paragraph-color: var(--para-color);
}

/* Desktop: fill the existing 60px bar with a larger mark — do not raise --ex-navbar-h. */
@media (min-width: 992px) {
    body.exchange-app {
        --ex-navbar-logo-h: 44px;
    }

    .exchange-app .ex-navbar-bottom__logo img {
        max-width: min(240px, 100%);
    }
}

.exchange-app h1,
.exchange-app h2,
.exchange-app h3,
.exchange-app h4,
.exchange-app h5,
.exchange-app h6,
.exchange-app .widget-title {
    font-family: "Inter", sans-serif;
    color: var(--h-color);
    font-weight: 600;
}

.exchange-app h1 { font-size: var(--theme-text-3xl, 1.5rem); }
.exchange-app h2 { font-size: var(--theme-text-3xl, 1.5rem); }
.exchange-app h2.ex-page-head__title { font-size: var(--theme-text-xl-plus, 1.125rem); font-weight: 700; }
.exchange-app h3 { font-size: var(--theme-text-3xl, 1.5rem); }
.exchange-app h4 { font-size: var(--theme-text-xl-plus, 1.125rem); }
.exchange-app h5 { font-size: var(--theme-text-xl-plus, 1.125rem); }
.exchange-app h6 { font-size: var(--theme-text-lg-plus, 1rem); }

.exchange-app img {
    max-width: 100%;
    height: auto;
}

/* ─── Fixed site header (nav + category strip) ────────────────────────────── */
.exchange-app .ex-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1045;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 991.98px) {
    .exchange-app .ex-site-header {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        padding-top: env(safe-area-inset-top, 0px);
    }

    .exchange-app .ex-site-header-spacer {
        min-height: calc(var(--ex-site-header-height, 7.5rem) + var(--ex-site-header-gap, 0.75rem));
    }
}

.exchange-app .ex-site-header-spacer {
    height: calc(var(--ex-site-header-height, 7.5rem) + var(--ex-site-header-gap, 0.75rem));
    pointer-events: none;
}

/* ─── Nav theming ─────────────────────────────────────────────────────────── */
.exchange-app .ex-navbar-bottom {
    position: relative;
    z-index: 1045;
    overflow: visible;
    display: flex;
    align-items: center;
    background: var(--ex-nav-bg) !important;
    border-bottom: 1px solid var(--ex-nav-border);
    box-shadow: var(--ex-nav-shadow, none);
    min-height: var(--ex-navbar-h, 60px);
    height: var(--ex-navbar-h, 60px);
    box-sizing: border-box;
}

/* Plain 3D shade — top sheen + bottom depth */
.exchange-app .ex-navbar-bottom::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--ex-nav-3d-sheen);
}

.exchange-app .ex-navbar-bottom > .container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    align-self: stretch;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    box-sizing: border-box;
}

html.theme-light .exchange-app .ex-navbar-bottom {
    border-bottom: 1px solid var(--ex-nav-border, #cbd5e1);
}

html.theme-light .exchange-app .ex-navbar-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: var(--ex-nav-cats-seam-height, 1px);
    pointer-events: none;
    background: var(--ex-nav-cats-seam, #cbd5e1);
    box-shadow: none;
}

html.theme-light .exchange-app .ex-navbar-bottom:has(.ex-user-menu.is-open)::after {
    opacity: 0;
}

.exchange-app .ex-navbar-bottom .container,
.exchange-app .ex-navbar-bottom .row,
.exchange-app .ex-navbar-bottom .col-6,
.exchange-app .ex-header-actions {
    overflow: visible;
}

.exchange-app .ex-header-cats {
    position: relative;
    z-index: 1040;
}

.exchange-app .ex-navbar-bottom .row {
    min-height: 2.75rem;
}

.exchange-app .ex-header-utils {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

.exchange-app .ex-header-utils__lang {
    margin-bottom: 0;
}

.exchange-app .ex-lang-dropdown {
    position: relative;
}

.exchange-app .ex-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.5rem;
    margin: 0;
    padding: 0.2rem 0.35rem;
    border: none;
    border-radius: var(--theme-radius-chip, 4px);
    background: transparent;
    color: var(--ex-nav-text);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.exchange-app .ex-lang-btn.dropdown-toggle::after {
    display: none;
}

.exchange-app .ex-lang-btn:hover,
.exchange-app .ex-lang-dropdown.show .ex-lang-btn {
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.exchange-app .ex-lang-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ex-nav-icon);
}

.exchange-app .ex-lang-btn:hover .ex-lang-btn__icon,
.exchange-app .ex-lang-dropdown.show .ex-lang-btn .ex-lang-btn__icon {
    color: var(--color-primary);
}

.exchange-app .ex-lang-btn__icon svg {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
}

.exchange-app .ex-lang-btn__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    line-height: 1.15;
    text-align: left;
}

.exchange-app .ex-lang-btn__label {
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ex-nav-icon);
    white-space: nowrap;
}

.exchange-app .ex-lang-btn__value {
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ex-nav-text);
    white-space: nowrap;
    max-width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exchange-app .ex-lang-btn:hover .ex-lang-btn__value,
.exchange-app .ex-lang-dropdown.show .ex-lang-btn .ex-lang-btn__value {
    color: var(--color-primary);
}

.exchange-app .ex-lang-dropdown__menu {
    min-width: 10.5rem;
    margin-top: 0.5rem !important;
    padding: 0.25rem 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.exchange-app .ex-lang-dropdown__menu .dropdown-item {
    padding: 0.5rem 0.85rem;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 500;
    color: var(--para-color);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.exchange-app .ex-lang-dropdown__menu .dropdown-item:hover,
.exchange-app .ex-lang-dropdown__menu .dropdown-item:focus {
    color: var(--color-primary);
    background: var(--ex-row-alt);
}

.exchange-app .ex-lang-dropdown__menu .dropdown-item.is-active {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.exchange-app .ex-lang-dropdown .dropdown-menu.show {
    pointer-events: auto !important;
    z-index: 1060;
}

.exchange-app .ex-header-utils__social {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.exchange-app .ex-header-utils__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--ex-nav-icon) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.exchange-app .ex-header-utils__social-link:hover {
    color: var(--color-primary) !important;
}

.exchange-app .ex-header-utils__auth-links {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: var(--theme-text-md, 0.8125rem);
}

.exchange-app .ex-header-utils__auth-links a {
    color: var(--ex-nav-text) !important;
    text-decoration: none;
    white-space: nowrap;
}

.exchange-app .ex-header-utils__auth-links a:hover {
    color: var(--color-primary) !important;
}

.exchange-app .ex-navbar-bottom__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
    height: var(--ex-navbar-logo-h, 32px);
    line-height: 0;
}

.exchange-app .ex-navbar-bottom__logo img {
    display: block;
    height: var(--ex-navbar-logo-h, 32px);
    max-height: var(--ex-navbar-logo-h, 32px);
    max-width: min(160px, 100%);
    width: auto;
    object-fit: contain;
    margin: 0;
    vertical-align: middle;
}

.exchange-app .navbar-top .topbar-select-inner {
    margin-bottom: 0;
}

.exchange-app .navbar-top .topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 2.75rem;
}

.exchange-app .navbar-top .topbar-right .social-area {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem 0.75rem;
    line-height: 1;
}

.exchange-app .navbar-top .topbar-right .social-area > a {
    display: inline-flex;
    align-items: center;
    line-height: 1.25;
}

.exchange-app .ex-header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--ex-navbar-item-gap, 12px);
    min-height: var(--ex-navbar-control-h, 2.75rem);
    max-height: 100%;
    height: auto;
    max-width: 100%;
    line-height: 1;
    position: relative;
    z-index: 2;
    overflow: visible;
    align-self: center;
}

.exchange-app .ex-navbar-bottom .right-area-inner {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.25rem;
    min-height: 2rem;
    line-height: 1;
    position: relative;
    z-index: 2;
}

.exchange-app .ex-header-actions__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    z-index: 1;
    height: auto;
    max-height: 100%;
    line-height: 1;
}

.exchange-app .ex-header-actions__wallet {
    max-width: 7.5rem;
}

.exchange-app .ex-match-search {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    height: 2rem;
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-pill, 999px);
    background: var(--ex-surface);
    overflow: hidden;
}

.exchange-app .ex-match-search--compact {
    width: min(10.5rem, 26vw);
}

.exchange-app .ex-header-actions__search .ex-match-search--compact {
    height: 1.75rem;
    background: var(--ex-nav-search-bg);
    border-color: var(--ex-nav-search-border);
    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.06),
        0 1px 2px rgba(15, 23, 42, 0.08);
}

html.theme-dark .exchange-app .ex-header-actions__search .ex-match-search--compact {
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.24),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

.exchange-app .ex-header-actions__search .ex-match-search--compact .ex-match-search__input {
    font-size: var(--theme-text-xs, 0.6875rem);
    padding: 0.2rem 0.45rem;
    text-align: center;
}

.exchange-app .ex-header-actions__search .ex-match-search--compact .ex-match-search__input:focus,
.exchange-app .ex-header-actions__search .ex-match-search--compact .ex-match-search__input:not(:placeholder-shown) {
    text-align: left;
}

.exchange-app .ex-header-actions__search .ex-match-search--compact .ex-match-search__input::placeholder,
.exchange-app .ex-header-actions__search .ex-match-search--compact .ex-match-search__input::-webkit-input-placeholder,
.exchange-app .ex-header-actions__search .ex-match-search--compact .ex-match-search__input::-moz-placeholder {
    color: var(--ex-nav-search-placeholder);
    opacity: 1;
}

.exchange-app .ex-header-actions__search .ex-match-search--compact .ex-match-search__submit {
    padding: 0 0.4rem;
    color: var(--ex-nav-search-icon);
}

.exchange-app .ex-header-actions__search .ex-match-search--compact .ex-match-search__submit:hover {
    color: var(--theme-primary);
}

.exchange-app .ex-header-actions__search .ex-match-search--compact .ex-match-search__submit svg {
    width: 0.8125rem;
    height: 0.8125rem;
}

.exchange-app .ex-header-actions__search .ex-match-search--compact .ex-match-search__clear {
    width: 1.25rem;
    font-size: var(--theme-text-base, 0.875rem);
}

.exchange-app .ex-match-search input,
.exchange-app .ex-match-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--h-color);
    font-size: var(--theme-text-sm, 0.75rem);
    padding: 0.35rem 0.65rem;
    outline: none;
}

.exchange-app .ex-match-search input::placeholder,
.exchange-app .ex-match-search__input::placeholder {
    color: var(--ex-search-placeholder, var(--ex-muted));
    opacity: 1;
}

.exchange-app .ex-match-search input::-webkit-input-placeholder,
.exchange-app .ex-match-search__input::-webkit-input-placeholder {
    color: var(--ex-search-placeholder, var(--ex-muted));
    opacity: 1;
}

.exchange-app .ex-match-search input::-moz-placeholder,
.exchange-app .ex-match-search__input::-moz-placeholder {
    color: var(--ex-search-placeholder, var(--ex-muted));
    opacity: 1;
}

.exchange-app .ex-match-search__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--ex-muted);
    width: 1.5rem;
    height: 100%;
    padding: 0;
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.exchange-app .ex-match-search__clear:hover {
    color: var(--color-primary);
}

.exchange-app .ex-match-search button,
.exchange-app .ex-match-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--ex-muted);
    padding: 0 0.55rem;
    height: 100%;
}

.exchange-app .ex-match-search button:hover,
.exchange-app .ex-match-search__submit:hover {
    color: var(--color-primary);
}

.exchange-app .ex-match-search button svg,
.exchange-app .ex-match-search__submit svg {
    width: 0.95rem;
    height: 0.95rem;
    stroke: currentColor;
}

.exchange-app .ex-search-page__form-wrap {
    margin-bottom: 1rem;
}

.exchange-app .ex-search-page__shortcut-hint {
    margin: 0.45rem 0 0;
    font-size: var(--theme-text-xs, 0.6875rem);
    color: var(--para-color);
}

.exchange-app .ex-search-page__shortcut-hint kbd {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: var(--theme-radius-chip, 4px);
    border: 1px solid var(--ex-border);
    background: var(--ex-surface-raised);
    color: var(--h-color);
    font-size: var(--theme-text-xs, 0.6875rem);
    font-family: inherit;
}

.exchange-app .ex-search-recent {
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--ex-panel-radius, 10px);
    border: 1px solid var(--ex-border);
    background: var(--ex-surface);
}

.exchange-app .ex-search-recent__title {
    margin: 0 0 0.55rem;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 700;
    color: var(--h-color);
}

.exchange-app .ex-search-recent__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.exchange-app .ex-search-recent__chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border-radius: var(--theme-radius-pill, 999px);
    border: 1px solid var(--ex-border);
    background: var(--ex-surface-raised);
    overflow: hidden;
}

.exchange-app .ex-search-recent__link {
    display: inline-block;
    max-width: 14rem;
    padding: 0.3rem 0.35rem 0.3rem 0.65rem;
    color: var(--h-color);
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exchange-app .ex-search-recent__link:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.exchange-app .ex-search-recent__chip:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--ex-border));
}

.exchange-app .ex-search-recent__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    align-self: stretch;
    border: none;
    border-left: 1px solid var(--ex-border);
    background: transparent;
    color: var(--para-color);
    font-size: var(--theme-text-base, 0.875rem);
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.exchange-app .ex-search-recent__remove:hover {
    color: var(--color-danger, #dc3545);
}

.exchange-app .ex-search-page__form-wrap .ex-match-search {
    width: 100%;
    max-width: 28rem;
    height: 2.35rem;
}

.exchange-app .ex-search-page__form-wrap .ex-match-search input {
    font-size: var(--theme-text-md, 0.8125rem);
}

.exchange-app .ex-search-page__prompt {
    margin-top: 0.5rem;
}

.exchange-app .ex-header-actions__search {
    align-self: center;
}

.exchange-app .ex-header-actions__search-mobile {
    align-self: center;
}

.exchange-app .ex-header-search-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--theme-primary, #DD3E42);
}

html.theme-dark .exchange-app .ex-header-search-link,
.theme-dark .exchange-app .ex-header-search-link {
    color: var(--theme-primary, #DD3E42);
}

.exchange-app .ex-header-search-link svg {
    stroke: var(--theme-primary, #DD3E42);
    color: var(--theme-primary, #DD3E42);
    fill: none;
    filter: none;
    transition: stroke-width 0.15s ease;
}

.exchange-app .ex-header-search-link:hover,
.exchange-app .ex-header-search-link:focus-visible,
.exchange-app .ex-header-search-link.is-active,
.exchange-app .ex-header-search-link[aria-current="page"] {
    color: var(--theme-primary, #DD3E42);
}

.exchange-app .ex-header-search-link:hover svg,
.exchange-app .ex-header-search-link:focus-visible svg,
.exchange-app .ex-header-search-link.is-active svg,
.exchange-app .ex-header-search-link[aria-current="page"] svg {
    stroke: var(--theme-primary, #DD3E42);
    color: var(--theme-primary, #DD3E42);
    stroke-width: 2.5;
    filter: none;
}

.exchange-app .ex-header-right {
    gap: var(--ex-navbar-item-gap, 12px);
    min-width: 0;
}

/* Auth header — logo | centered meta | utility icons */
.exchange-app .ex-navbar-bottom__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "start actions";
    align-items: center;
    align-content: center;
    gap: 0 var(--ex-navbar-item-gap, 12px);
    min-height: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.exchange-app .ex-navbar-bottom__grid--guest,
.exchange-app .ex-navbar-bottom__grid--user {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "start actions";
}

.exchange-app .ex-navbar-bottom__center {
    position: absolute;
    /* Avoid translate(-50%,-50%) — it causes subpixel jagged/broken borders */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(22rem, 36vw, calc(100% - 28rem));
    max-width: min(22rem, 36vw, calc(100% - 28rem));
    height: var(--ex-navbar-control-h, 2.75rem);
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    overflow: visible;
    z-index: 1;
    pointer-events: none;
    transform: none;
}

.exchange-app .ex-navbar-bottom__search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 0 1 auto;
    width: min(18rem, 32vw, 100%);
    max-width: min(18rem, 42vw);
    min-width: 8.5rem;
    margin-left: var(--ex-shell-gap, 0.75rem);
    pointer-events: auto;
    overflow: visible;
}

/*
 * Header search — flat fill + outer ring
 * Rest: chrome gray · hover/focus: stronger gray (no theme-primary pink)
 * default 1.5px → hover/focus-within 1.75px gray
 */
.exchange-app .ex-navbar-bottom__search .ex-match-search {
    border-radius: var(--theme-radius-pill, 999px);
}

.exchange-app .ex-navbar-bottom__search .ex-match-search--compact,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact {
    --ex-search-ring: var(--ex-nav-search-border, var(--theme-header-search-border, #2A3446));
    --ex-search-ring-hover: var(--theme-border-strong, #3A4558);
    --ex-search-ring-focus: var(--theme-border-strong, #3A4558);
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    height: var(--ex-navbar-search-h, 2rem);
    min-height: var(--ex-navbar-search-h, 2rem);
    max-height: var(--ex-navbar-search-h, 2rem);
    padding: 0;
    margin: 0;
    border: none !important;
    border-radius: var(--theme-radius-pill, 999px);
    background: var(--ex-nav-search-bg) !important;
    background-image: none !important;
    box-shadow:
        0 0 0 1.5px var(--ex-search-ring),
        0 0 0 0 transparent !important;
    outline: none !important;
    /* Must be visible so outer ring is not clipped into broken arcs */
    overflow: visible !important;
    isolation: auto;
    box-sizing: border-box;
    transition: box-shadow 0.15s ease;
}

/* Dark: chrome border #2A3446 is too close to search fill #111827 — use a lighter edge */
html.theme-dark .exchange-app .ex-navbar-bottom__search .ex-match-search--compact,
.theme-dark .exchange-app .ex-navbar-bottom__search .ex-match-search--compact,
html.theme-dark .exchange-app .ex-open-bets-page__search-host .ex-match-search--compact,
.theme-dark .exchange-app .ex-open-bets-page__search-host .ex-match-search--compact,
html.theme-dark .exchange-app .ex-open-bets-toolbar .ex-match-search--compact,
.theme-dark .exchange-app .ex-open-bets-toolbar .ex-match-search--compact {
    --ex-search-ring: #4B596E;
    --ex-search-ring-hover: #64748B;
    --ex-search-ring-focus: #64748B;
}

html.theme-light .exchange-app .ex-navbar-bottom__search .ex-match-search--compact,
.theme-light .exchange-app .ex-navbar-bottom__search .ex-match-search--compact,
html.theme-light .exchange-app .ex-open-bets-page__search-host .ex-match-search--compact,
.theme-light .exchange-app .ex-open-bets-page__search-host .ex-match-search--compact,
html.theme-light .exchange-app .ex-open-bets-toolbar .ex-match-search--compact,
.theme-light .exchange-app .ex-open-bets-toolbar .ex-match-search--compact {
    --ex-search-ring: var(--ex-nav-search-border, var(--theme-header-search-border, #E5EAF1));
    --ex-search-ring-hover: var(--theme-border-strong, #CCCCCC);
    --ex-search-ring-focus: var(--theme-border-strong, #CCCCCC);
}

/* Hover: thicker chrome ring */
.exchange-app .ex-navbar-bottom__search .ex-match-search--compact:hover,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact:hover,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact:hover {
    border: none !important;
    box-shadow:
        0 0 0 1.75px var(--ex-search-ring-hover),
        0 0 0 0 transparent !important;
}

/* Cursor inside: same stronger gray ring as hover (no pink) */
.exchange-app .ex-navbar-bottom__search .ex-match-search--compact:focus-within,
.exchange-app .ex-navbar-bottom__search .ex-match-search--compact:hover:focus-within,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact:focus-within,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact:hover:focus-within,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact:focus-within,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact:hover:focus-within {
    border: none !important;
    outline: none !important;
    box-shadow:
        0 0 0 1.75px var(--ex-search-ring-focus, var(--ex-search-ring-hover)),
        0 0 0 0 transparent !important;
}

html.theme-light .exchange-app .ex-navbar-bottom__search .ex-match-search--compact:focus-within,
html.theme-light .exchange-app .ex-navbar-bottom__search .ex-match-search--compact:hover:focus-within,
.theme-light .exchange-app .ex-navbar-bottom__search .ex-match-search--compact:focus-within,
.theme-light .exchange-app .ex-navbar-bottom__search .ex-match-search--compact:hover:focus-within,
html.theme-light .exchange-app .ex-open-bets-page__search-host .ex-match-search--compact:focus-within,
html.theme-light .exchange-app .ex-open-bets-page__search-host .ex-match-search--compact:hover:focus-within,
.theme-light .exchange-app .ex-open-bets-page__search-host .ex-match-search--compact:focus-within,
.theme-light .exchange-app .ex-open-bets-page__search-host .ex-match-search--compact:hover:focus-within {
    box-shadow:
        0 0 0 1.75px var(--ex-search-ring-focus, var(--ex-search-ring-hover)),
        0 0 0 0 transparent !important;
}

.exchange-app .ex-navbar-bottom__search .ex-match-search--compact .ex-match-search__input,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact .ex-match-search__input,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact .ex-match-search__input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 100%;
    font-size: var(--theme-text-md, 0.8125rem);
    line-height: 1;
    padding: 0 var(--ex-navbar-item-px, 12px);
    text-align: left;
    opacity: 1;
    pointer-events: auto;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--theme-radius-pill, 999px) 0 0 var(--theme-radius-pill, 999px);
}

.exchange-app .ex-navbar-bottom__search .ex-match-search--compact .ex-match-search__input:focus,
.exchange-app .ex-navbar-bottom__search .ex-match-search--compact .ex-match-search__input:focus-visible,
.exchange-app .ex-navbar-bottom__search .ex-match-search--compact input:focus,
.exchange-app .ex-navbar-bottom__search .ex-match-search--compact input:focus-visible,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact .ex-match-search__input:focus,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact .ex-match-search__input:focus-visible,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact .ex-match-search__input:focus,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact .ex-match-search__input:focus-visible {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.exchange-app .ex-navbar-bottom__search .ex-match-search--compact .ex-match-search__input::placeholder,
.exchange-app .ex-navbar-bottom__search .ex-match-search--compact .ex-match-search__input::-webkit-input-placeholder,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact .ex-match-search__input::placeholder,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact .ex-match-search__input::-webkit-input-placeholder,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact .ex-match-search__input::placeholder,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact .ex-match-search__input::-webkit-input-placeholder {
    color: var(--ex-nav-search-placeholder);
    opacity: 1;
}

.exchange-app .ex-navbar-bottom__search .ex-match-search--compact .ex-match-search__submit,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact .ex-match-search__submit,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact .ex-match-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--ex-navbar-search-h, 2rem);
    height: var(--ex-navbar-search-h, 2rem);
    padding: 0;
    color: var(--ex-nav-search-icon, var(--theme-header-search-icon, #64748B));
    border-radius: 0 var(--theme-radius-pill, 999px) var(--theme-radius-pill, 999px) 0;
    transition: color 0.15s ease, transform 0.15s ease;
}

.exchange-app .ex-navbar-bottom__search .ex-match-search--compact .ex-match-search__submit svg,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact .ex-match-search__submit svg,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact .ex-match-search__submit svg {
    width: 18px;
    height: 18px;
    stroke: var(--ex-nav-search-icon, var(--theme-header-search-icon, #64748B));
    color: var(--ex-nav-search-icon, var(--theme-header-search-icon, #64748B));
    stroke-width: 2.5;
    fill: none;
    filter: none;
    transition:
        stroke 0.15s ease,
        color 0.15s ease,
        stroke-width 0.15s ease;
}

.exchange-app .ex-navbar-bottom__search .ex-match-search--compact .ex-match-search__submit:hover,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact .ex-match-search__submit:hover,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact .ex-match-search__submit:hover {
    color: var(--ex-search-ring-hover, #64748B);
}

.exchange-app .ex-navbar-bottom__search .ex-match-search--compact .ex-match-search__submit:hover svg,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact .ex-match-search__submit:hover svg,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact .ex-match-search__submit:hover svg {
    stroke: var(--ex-search-ring-hover, #64748B);
    color: var(--ex-search-ring-hover, #64748B);
    stroke-width: 2.5;
    filter: none;
    transform: none;
}

/* Focus inside box → search icon pink */
.exchange-app .ex-navbar-bottom__search .ex-match-search--compact:focus-within .ex-match-search__submit,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact:focus-within .ex-match-search__submit,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact:focus-within .ex-match-search__submit {
    color: var(--theme-primary, #DD3E42);
}

.exchange-app .ex-navbar-bottom__search .ex-match-search--compact:focus-within .ex-match-search__submit svg,
.exchange-app .ex-open-bets-page__search-host .ex-match-search--compact:focus-within .ex-match-search__submit svg,
.exchange-app .ex-open-bets-toolbar .ex-match-search--compact:focus-within .ex-match-search__submit svg {
    stroke: var(--theme-primary, #DD3E42);
    color: var(--theme-primary, #DD3E42);
    stroke-width: 2.5;
    filter: none;
    transform: none;
}

/* ─── Header responsive: width/search only — bar height via --ex-navbar-h ─── */
@media (max-width: 1399.98px) {
    .exchange-app .ex-navbar-bottom__start .ex-navbar-bottom__search {
        width: min(16rem, 28vw, 100%);
        max-width: min(16rem, 34vw);
    }

    .exchange-app .ex-header-actions__user-slot {
        max-width: 7.5rem;
    }
}

@media (max-width: 1199.98px) {
    .exchange-app .ex-navbar-bottom__start .ex-navbar-bottom__search {
        width: min(13rem, 24vw, 100%);
        max-width: min(13rem, 28vw);
        min-width: 7.5rem;
    }

    .exchange-app .ex-navbar-bottom__actions {
        padding-left: var(--ex-navbar-item-px, 12px);
    }

    .exchange-app .ex-header-actions__wallet {
        max-width: 6.5rem;
    }

    .exchange-app .ex-header-actions__user-slot {
        max-width: 6rem;
    }

    .exchange-app .ex-lang-btn__label {
        display: none;
    }
}

@media (max-width: 991.98px) {
    body.exchange-app {
        --ex-navbar-h: 56px;
    }

    .exchange-app .ex-navbar-bottom__start .ex-navbar-bottom__search {
        width: min(11rem, 22vw, 100%);
        max-width: min(11rem, 24vw);
        min-width: 6.5rem;
    }

    .exchange-app .ex-header-actions__user-slot {
        max-width: 4.75rem;
    }

    .exchange-app button.ex-header-actions__user-name,
    .exchange-app .ex-header-actions__user-name {
        max-width: 4.75rem;
    }

    .exchange-app .ex-header-actions__wallet {
        max-width: 9rem;
        flex-shrink: 0;
    }
}

@media (max-width: 767.98px) {
    body.exchange-app {
        --ex-navbar-h: 52px;
    }

    /* Hide left search + sep on small screens */
    .exchange-app .ex-navbar-bottom__center,
    .exchange-app .ex-navbar-bottom__search,
    .exchange-app .ex-navbar-bottom__sep {
        display: none !important;
    }

    .exchange-app .ex-navbar-bottom__grid {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        grid-template-areas: "start actions";
    }

    .exchange-app .ex-navbar-bottom__actions {
        padding-left: 0.25rem;
        gap: 8px;
    }

    .exchange-app .ex-header-actions__wallet {
        max-width: 8.5rem;
        flex-shrink: 0;
    }

}

@media (max-width: 575.98px) {
    .exchange-app .ex-navbar-bottom > .container {
        padding-left: max(0.5rem, env(safe-area-inset-left));
        padding-right: max(0.5rem, env(safe-area-inset-right));
    }

    .exchange-app .ex-header-actions__wallet {
        max-width: 8rem;
        flex-shrink: 0;
    }

    .exchange-app .ex-header-actions__wallet .ex-header-user-balance {
        gap: 0.15rem;
        max-width: none;
        font-size: var(--theme-text-sm, 0.75rem);
    }

    .exchange-app .ex-header-actions {
        gap: 6px;
    }
}

/* Header CTA — Deposit (auth) / Login (guest), same slot */
.exchange-app .ex-header-actions__cta {
    flex-shrink: 0;
}

/* Match hamburger (d-lg-none): hide Deposit whenever ☰ is visible */
@media (max-width: 991.98px) {
    .exchange-app .ex-header-actions__cta--auth {
        display: none !important;
    }
}

.exchange-app .ex-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ex-navbar-control-h, 2.75rem);
    height: var(--ex-navbar-control-h, 2.75rem);
    padding: 0 var(--ex-navbar-item-px, 12px);
    border-radius: var(--theme-radius-chip, 4px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ex-sidebar-icon, #111827) !important;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

html.theme-light .exchange-app .ex-header-cta,
.theme-light .exchange-app .ex-header-cta {
    color: var(--ex-sidebar-icon, #111827) !important;
}

html.theme-dark .exchange-app .ex-header-cta,
.theme-dark .exchange-app .ex-header-cta {
    color: var(--ex-sidebar-icon, #FFFFFF) !important;
}

/* Match header logout / balance eye: primary fill on hover, darker only on press */
.exchange-app .ex-header-actions .ex-header-cta:hover,
.exchange-app .ex-header-actions .ex-header-cta:focus-visible {
    color: #FFFFFF !important;
    font-weight: 700;
    background: var(--theme-btn-primary-bg, #DD3E42) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

.exchange-app .ex-header-actions .ex-header-cta:active {
    color: #FFFFFF !important;
    font-weight: 700;
    background: var(--theme-btn-primary-hover, #DD3E42) !important;
    box-shadow: none !important;
    transform: none !important;
}

.exchange-app .ex-header-actions .ex-header-cta.is-active {
    color: #FFFFFF !important;
    font-weight: 700;
    background: var(--theme-btn-primary-bg, #DD3E42) !important;
    box-shadow: none !important;
    transform: none !important;
}

.exchange-app .ex-header-actions .ex-header-cta.is-active:hover,
.exchange-app .ex-header-actions .ex-header-cta.is-active:focus-visible {
    color: #FFFFFF !important;
    background: var(--theme-btn-primary-hover, #DD3E42) !important;
}

.exchange-app .ex-header-actions__logout {
    flex-shrink: 0;
    align-items: center;
}

.exchange-app .ex-header-logout-form {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.exchange-app .ex-header-logout.ex-menubar-btn {
    width: var(--ex-navbar-control-h, 2.75rem);
    height: var(--ex-navbar-control-h, 2.75rem);
    min-width: var(--ex-navbar-control-h, 2.75rem);
    min-height: var(--ex-navbar-control-h, 2.75rem);
    border: 1px solid transparent;
    border-radius: var(--theme-radius-chip, 4px);
    background: transparent;
    color: var(--ex-sidebar-icon, #111827);
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

html.theme-dark .exchange-app .ex-header-logout.ex-menubar-btn,
.theme-dark .exchange-app .ex-header-logout.ex-menubar-btn {
    color: var(--ex-sidebar-icon, #FFFFFF);
}

.exchange-app .ex-header-logout.ex-menubar-btn:hover,
.exchange-app .ex-header-logout.ex-menubar-btn:focus-visible {
    color: #FFFFFF !important;
    background: var(--theme-btn-primary-bg, #DD3E42);
    box-shadow: none;
    transform: none;
}

.exchange-app .ex-header-logout.ex-menubar-btn:active {
    color: #FFFFFF !important;
    background: var(--theme-btn-primary-hover, #DD3E42);
    box-shadow: none;
    transform: none;
}

.exchange-app .ex-header-logout svg,
.exchange-app .ex-header-logout.ex-menubar-btn:hover svg,
.exchange-app .ex-header-logout.ex-menubar-btn:focus-visible svg,
.exchange-app .ex-header-logout.ex-menubar-btn:active svg {
    width: var(--ex-navbar-icon-size, 20px);
    height: var(--ex-navbar-icon-size, 20px);
    stroke: currentColor;
    color: inherit;
    stroke-width: 2.5;
}

/* Match hamburger: hide header Sign out when ☰ is visible */
@media (max-width: 991.98px) {
    .exchange-app .ex-header-actions__logout {
        display: none !important;
    }
}

.exchange-app .ex-header-actions__session {
    display: inline-flex;
    align-items: center;
    gap: var(--ex-navbar-item-gap, 12px);
    min-width: 0;
    max-width: min(100%, 22rem);
    overflow: visible;
    flex-wrap: nowrap;
    height: auto;
    min-height: var(--ex-navbar-control-h, 2.75rem);
    align-self: center;
}

.exchange-app .ex-header-actions__wallet {
    display: inline-flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
    max-width: 7.5rem;
}

.exchange-app .ex-header-actions__wallet .ex-header-user-balance-mount,
.exchange-app .ex-header-actions__wallet .ex-header-user-balance {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
    max-width: 9rem;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--ex-sidebar-icon, #111827);
    height: var(--ex-navbar-control-h, 2.75rem);
}

html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance-mount,
html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance-mount,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance {
    color: var(--ex-sidebar-icon, #FFFFFF);
}

.exchange-app .ex-header-actions__wallet .ex-header-user-balance.ex-header-user-meta__label {
    max-width: 9rem;
}

.exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ex-sidebar-icon, #111827);
}

html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount,
html.theme-dark .exchange-app .ex-header-user-balance__amount,
.theme-dark .exchange-app .ex-header-user-balance__amount,
html.theme-dark .exchange-app .ex-wallet-bar .wallet-header__value,
.theme-dark .exchange-app .ex-wallet-bar .wallet-header__value {
    color: var(--ex-sidebar-icon, #FFFFFF);
}

.exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount.is-balance-healthy,
.exchange-app .ex-header-user-balance__amount.is-balance-healthy,
.exchange-app .ex-wallet-bar .wallet-header__value.is-balance-healthy,
.exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount.is-balance-low,
.exchange-app .ex-header-user-balance__amount.is-balance-low,
.exchange-app .ex-wallet-bar .wallet-header__value.is-balance-low,
.exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount.is-balance-critical,
.exchange-app .ex-header-user-balance__amount.is-balance-critical,
.exchange-app .ex-wallet-bar .wallet-header__value.is-balance-critical {
    color: var(--ex-sidebar-icon, #111827);
}

html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount.is-balance-healthy,
html.theme-dark .exchange-app .ex-header-user-balance__amount.is-balance-healthy,
html.theme-dark .exchange-app .ex-wallet-bar .wallet-header__value.is-balance-healthy,
html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount.is-balance-low,
html.theme-dark .exchange-app .ex-header-user-balance__amount.is-balance-low,
html.theme-dark .exchange-app .ex-wallet-bar .wallet-header__value.is-balance-low,
html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount.is-balance-critical,
html.theme-dark .exchange-app .ex-header-user-balance__amount.is-balance-critical,
html.theme-dark .exchange-app .ex-wallet-bar .wallet-header__value.is-balance-critical,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount.is-balance-healthy,
.theme-dark .exchange-app .ex-header-user-balance__amount.is-balance-healthy,
.theme-dark .exchange-app .ex-wallet-bar .wallet-header__value.is-balance-healthy,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount.is-balance-low,
.theme-dark .exchange-app .ex-header-user-balance__amount.is-balance-low,
.theme-dark .exchange-app .ex-wallet-bar .wallet-header__value.is-balance-low,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount.is-balance-critical,
.theme-dark .exchange-app .ex-header-user-balance__amount.is-balance-critical,
.theme-dark .exchange-app .ex-wallet-bar .wallet-header__value.is-balance-critical {
    color: var(--ex-sidebar-icon, #FFFFFF);
}

.exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ex-navbar-control-h, 2.75rem);
    height: var(--ex-navbar-control-h, 2.75rem);
    min-width: var(--ex-navbar-control-h, 2.75rem);
    min-height: var(--ex-navbar-control-h, 2.75rem);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--theme-radius-chip, 4px);
    background: transparent;
    color: var(--ex-sidebar-icon, #111827);
    cursor: pointer;
    flex-shrink: 0;
    opacity: 1;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle {
    color: var(--ex-sidebar-icon, #FFFFFF);
}

/* Match username / Sign out: solid primary fill + white icon */
.exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:hover,
.exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:focus-visible,
html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:hover,
html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:focus-visible,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:hover,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:focus-visible {
    color: #FFFFFF !important;
    background: var(--theme-btn-primary-bg, #DD3E42) !important;
    box-shadow: none;
    transform: none;
    opacity: 1;
}

.exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:hover svg,
.exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:focus-visible svg,
html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:hover svg,
html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:focus-visible svg,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:hover svg,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:focus-visible svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

.exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:hover svg *,
.exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:focus-visible svg *,
html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:hover svg *,
html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:focus-visible svg *,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:hover svg *,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:focus-visible svg * {
    stroke: #FFFFFF !important;
}

.exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:active,
html.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:active,
.theme-dark .exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:active {
    color: #FFFFFF !important;
    background: var(--theme-btn-primary-hover, #DD3E42) !important;
    box-shadow: none;
    transform: none;
}

.exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:active svg,
.exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle:active svg * {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

.exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle svg {
    display: block !important;
    width: var(--ex-navbar-icon-size, 20px) !important;
    height: var(--ex-navbar-icon-size, 20px) !important;
    stroke: currentColor !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none !important;
    color: inherit;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
}

.exchange-app .ex-header-actions__wallet .ex-header-user-balance__toggle svg * {
    stroke: currentColor !important;
    stroke-width: 2.5 !important;
    fill: none !important;
}

.exchange-app .ex-header-actions__user-name {
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 700;
    color: var(--ex-sidebar-icon, #111827);
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.exchange-app button.ex-header-actions__user-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid transparent;
    background: transparent;
    min-height: var(--ex-navbar-control-h, 2.75rem);
    height: var(--ex-navbar-control-h, 2.75rem);
    max-width: 100%;
    padding: 0 var(--ex-navbar-item-px, 12px);
    margin: 0;
    border-radius: var(--theme-radius-chip, 4px);
    cursor: pointer;
    font: inherit;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--ex-sidebar-icon, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.exchange-app .ex-account-menu__user-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
}

.exchange-app .ex-account-menu__user-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke: currentColor;
    stroke-width: 2.25 !important;
    fill: none;
}

.exchange-app .ex-account-menu__user-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.theme-dark .exchange-app .ex-header-actions__user-name,
html.theme-dark .exchange-app button.ex-header-actions__user-name,
.theme-dark .exchange-app .ex-header-actions__user-name,
.theme-dark .exchange-app button.ex-header-actions__user-name {
    color: var(--ex-sidebar-icon, #FFFFFF);
}

.exchange-app button.ex-header-actions__user-name:hover,
.exchange-app button.ex-header-actions__user-name:focus-visible {
    color: #FFFFFF !important;
    font-weight: 700;
    background: var(--theme-btn-primary-bg, #DD3E42) !important;
    box-shadow: none !important;
    transform: none !important;
}

.exchange-app button.ex-header-actions__user-name:active {
    transform: none !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
    font-weight: 700;
    background: var(--theme-btn-primary-hover, #DD3E42) !important;
}

.exchange-app .ex-user-menu.is-open .ex-header-actions__user-name,
.exchange-app .ex-user-menu.is-open button.ex-header-actions__user-name {
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: var(--theme-text-md, 0.8125rem);
    min-height: var(--ex-navbar-control-h, 2.75rem);
    height: var(--ex-navbar-control-h, 2.75rem);
    padding: 0 var(--ex-navbar-item-px, 12px);
    border-radius: var(--theme-radius-chip, 4px);
    background: var(--theme-btn-primary-bg, #DD3E42) !important;
    box-shadow: none !important;
}

html.theme-dark .exchange-app button.ex-header-actions__user-name:hover,
html.theme-dark .exchange-app button.ex-header-actions__user-name:focus-visible,
html.theme-dark .exchange-app .ex-user-menu.is-open button.ex-header-actions__user-name,
.theme-dark .exchange-app button.ex-header-actions__user-name:hover,
.theme-dark .exchange-app button.ex-header-actions__user-name:focus-visible,
.theme-dark .exchange-app .ex-user-menu.is-open button.ex-header-actions__user-name {
    color: #FFFFFF !important;
    font-weight: 700;
    background: var(--theme-btn-primary-bg, #DD3E42) !important;
    box-shadow: none !important;
}

.exchange-app .ex-user-menu.is-open button.ex-header-actions__user-name:hover,
.exchange-app .ex-user-menu.is-open button.ex-header-actions__user-name:focus-visible {
    background: var(--theme-btn-primary-hover, #DD3E42) !important;
}

.exchange-app .ex-navbar-bottom__start {
    grid-area: start;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    justify-self: start;
    align-self: center;
    min-width: 0;
    max-width: 100%;
    flex-shrink: 1;
    position: relative;
    z-index: 3;
    background: var(--ex-nav-bg, var(--theme-header-bg, #0B1220));
    padding-right: var(--ex-navbar-item-px, 12px);
    height: auto;
    max-height: 100%;
    gap: 0;
}

/*
 * Brand column width = desktop sidebar column, so the separator sits on the
 * same vertical line as the sidebar scroll edge (rail right edge).
 * User shell uses 240px; general shell uses --ex-sidebar-full (13.75rem).
 */
.exchange-app {
    --ex-header-brand-w: var(--ex-sidebar-full, 13.75rem);
}

.exchange-app.exchange-user-layout {
    --ex-header-brand-w: 240px; /* match .ex-shell--user */
}

.exchange-app .ex-navbar-bottom__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 var(--ex-header-brand-w);
    width: var(--ex-header-brand-w);
    min-width: 0;
    max-width: var(--ex-header-brand-w);
    height: 100%;
    box-sizing: border-box;
    gap: var(--ex-navbar-item-gap, 12px);
}

/* Vertical rule at brand column end = sidebar scroll end */
.exchange-app .ex-navbar-bottom__sep {
    display: block;
    flex: 0 0 1px;
    width: 1px;
    min-width: 1px;
    height: var(--ex-navbar-logo-h, 32px);
    margin: 0;
    padding: 0;
    align-self: center;
    border: 0;
    border-radius: 0;
    background: var(--ex-nav-border, #2A3446);
    opacity: 1;
    pointer-events: none;
}

html.theme-light .exchange-app .ex-navbar-bottom__sep,
.theme-light .exchange-app .ex-navbar-bottom__sep {
    background: #CBD5E1;
}

html.theme-dark .exchange-app .ex-navbar-bottom__sep,
.theme-dark .exchange-app .ex-navbar-bottom__sep {
    background: #334155;
}

/* Collapsed / tablet: keep sep aligned to current shell sidebar column */
@media (max-width: 991.98px) {
    .exchange-app {
        --ex-header-brand-w: var(--ex-sidebar-tablet, 9.5rem);
    }

    .exchange-app.exchange-user-layout:has(.ex-shell--user.ex-shell--sidebar-expanded) {
        --ex-header-brand-w: var(--ex-sidebar-tablet, 9.5rem);
    }

    .exchange-app.exchange-user-layout:has(.ex-shell--user:not(.ex-shell--sidebar-expanded)) {
        /* Icon rail is narrower than logo; keep brand wide enough for logo + sep */
        --ex-header-brand-w: max(7.5rem, var(--ex-sidebar-icon, 2.75rem));
    }
}

.exchange-app .ex-navbar-bottom__meta-scroll {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
}

.exchange-app .ex-navbar-bottom__meta-scroll::-webkit-scrollbar {
    display: none;
}

.exchange-app .ex-navbar-bottom__actions {
    grid-area: actions;
    justify-self: end;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--ex-navbar-item-gap, 12px);
    min-width: 0;
    max-width: 100%;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    background: var(--ex-nav-bg, var(--theme-header-bg, #0B1220));
    padding-left: var(--ex-navbar-item-px, 12px);
    height: auto;
    max-height: 100%;
}

.exchange-app .ex-header-actions__lang {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.exchange-app .ex-header-actions__lang-slot {
    align-items: center;
    flex-shrink: 0;
}

.exchange-app .ex-header-actions__user-slot {
    align-items: center;
    min-width: 0;
    max-width: 9rem;
}

.exchange-app .ex-header-actions__lang .ex-header-utils {
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.exchange-app .ex-header-user-meta__item--user {
    position: relative;
    cursor: pointer;
}

.exchange-app .ex-header-user-meta__user-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 4rem;
    padding: 0.35rem 0.5rem;
    border: none;
    border-radius: var(--theme-radius-chip, 4px);
    background: transparent;
    color: var(--ex-nav-text) !important;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.exchange-app .ex-header-actions__session:has(.ex-user-menu.is-open) {
    z-index: 1085;
}

.exchange-app .ex-header-user-meta__user-toggle:hover,
.exchange-app .ex-user-menu.is-open,
.exchange-app .ex-user-menu.is-dropdown-open {
    z-index: 1085;
}

.exchange-app .ex-user-menu.is-open .ex-header-user-meta__user-toggle,
.exchange-app .ex-user-menu.is-open .ex-account-menu__toggle {
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: var(--theme-text-xs, 0.6875rem);
    min-height: 1.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--theme-radius-chip, 4px);
    background-color: var(--theme-btn-primary-bg, #DD3E42);
}

html.theme-dark .exchange-app .ex-user-menu.is-open .ex-header-user-meta__user-toggle,
html.theme-dark .exchange-app .ex-user-menu.is-open .ex-account-menu__toggle,
.theme-dark .exchange-app .ex-user-menu.is-open .ex-header-user-meta__user-toggle,
.theme-dark .exchange-app .ex-user-menu.is-open .ex-account-menu__toggle {
    color: #FFFFFF !important;
    background-color: var(--theme-btn-primary-bg, #DD3E42);
}

.exchange-app .ex-header-user-meta__user-toggle.dropdown-toggle::after {
    display: none;
}

.exchange-app .ex-user-menu.ex-header-user-meta__item {
    padding: 0;
}

.exchange-app .ex-header-user-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.35rem 0.75rem;
    width: max-content;
    max-width: none;
    margin-inline: auto;
    color: var(--ex-nav-text);
}

.exchange-app .ex-header-user-meta__item {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 4rem;
    padding: 0.35rem 0.5rem;
    padding-bottom: 0.45rem;
    border-radius: var(--theme-radius-chip, 4px);
    text-decoration: none;
    color: var(--ex-nav-text) !important;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.exchange-app .ex-header-user-meta__item:hover {
    color: var(--color-primary) !important;
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.exchange-app .ex-header-user-meta__item.is-active {
    color: var(--color-primary) !important;
    background-color: transparent !important;
    box-shadow: none;
}

.exchange-app .ex-header-user-meta__item.is-active:hover {
    color: var(--color-primary) !important;
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
}

.exchange-app .ex-header-user-meta__item.is-active::after {
    content: "";
    position: absolute;
    left: 0.4rem;
    right: 0.4rem;
    bottom: 0;
    height: 3px;
    border-radius: var(--theme-radius-chip, 4px) var(--theme-radius-chip, 4px) 0 0;
    pointer-events: none;
    background: var(--ex-nav-active-line, linear-gradient(180deg, #7ec4f7 0%, #2196f3 48%, #1976d2 100%));
    box-shadow: var(--ex-nav-active-line-shadow, 0 2px 5px rgba(33, 150, 243, 0.32));
}

.exchange-app .ex-user-menu.ex-header-user-meta__item.is-active::after,
.exchange-app .ex-header-user-meta__item--wallet.is-active::after {
    display: none;
}

.exchange-app .ex-header-user-meta__item--wallet {
    cursor: default;
}

.exchange-app .ex-header-user-meta__item--wallet:hover {
    color: inherit !important;
    background-color: transparent;
}

.exchange-app .ex-header-user-meta__item--wallet .ex-header-user-balance,
.exchange-app .ex-header-user-meta__item--wallet .ex-header-user-balance-mount {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    max-width: 6.5rem;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ex-sidebar-icon, #111827);
}

html.theme-dark .exchange-app .ex-header-user-meta__item--wallet .ex-header-user-balance,
html.theme-dark .exchange-app .ex-header-user-meta__item--wallet .ex-header-user-balance-mount,
.theme-dark .exchange-app .ex-header-user-meta__item--wallet .ex-header-user-balance,
.theme-dark .exchange-app .ex-header-user-meta__item--wallet .ex-header-user-balance-mount {
    color: var(--ex-sidebar-icon, #FFFFFF);
}

.exchange-app .ex-header-user-meta__item--wallet .ex-header-user-balance__amount {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.exchange-app .ex-header-user-balance__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ex-navbar-control-h, 2.75rem);
    height: var(--ex-navbar-control-h, 2.75rem);
    min-width: var(--ex-navbar-control-h, 2.75rem);
    min-height: var(--ex-navbar-control-h, 2.75rem);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--theme-radius-chip, 4px);
    background: transparent;
    color: var(--ex-sidebar-icon, #111827);
    cursor: pointer;
    flex-shrink: 0;
    opacity: 1;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

html.theme-dark .exchange-app .ex-header-user-balance__toggle,
.theme-dark .exchange-app .ex-header-user-balance__toggle {
    color: var(--ex-sidebar-icon, #FFFFFF);
}

.exchange-app .ex-header-user-balance__toggle:hover,
.exchange-app .ex-header-user-balance__toggle:focus-visible,
html.theme-dark .exchange-app .ex-header-user-balance__toggle:hover,
html.theme-dark .exchange-app .ex-header-user-balance__toggle:focus-visible,
.theme-dark .exchange-app .ex-header-user-balance__toggle:hover,
.theme-dark .exchange-app .ex-header-user-balance__toggle:focus-visible {
    color: #FFFFFF !important;
    background: var(--theme-btn-primary-bg, #DD3E42) !important;
    box-shadow: none;
    transform: none;
    opacity: 1;
}

.exchange-app .ex-header-user-balance__toggle:hover svg,
.exchange-app .ex-header-user-balance__toggle:focus-visible svg,
html.theme-dark .exchange-app .ex-header-user-balance__toggle:hover svg,
html.theme-dark .exchange-app .ex-header-user-balance__toggle:focus-visible svg,
.theme-dark .exchange-app .ex-header-user-balance__toggle:hover svg,
.theme-dark .exchange-app .ex-header-user-balance__toggle:focus-visible svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

.exchange-app .ex-header-user-balance__toggle:hover svg *,
.exchange-app .ex-header-user-balance__toggle:focus-visible svg *,
html.theme-dark .exchange-app .ex-header-user-balance__toggle:hover svg *,
html.theme-dark .exchange-app .ex-header-user-balance__toggle:focus-visible svg *,
.theme-dark .exchange-app .ex-header-user-balance__toggle:hover svg *,
.theme-dark .exchange-app .ex-header-user-balance__toggle:focus-visible svg * {
    stroke: #FFFFFF !important;
}

.exchange-app .ex-header-user-balance__toggle:active,
html.theme-dark .exchange-app .ex-header-user-balance__toggle:active,
.theme-dark .exchange-app .ex-header-user-balance__toggle:active {
    color: #FFFFFF !important;
    background: var(--theme-btn-primary-hover, #DD3E42) !important;
    box-shadow: none;
    transform: none;
    opacity: 1;
}

.exchange-app .ex-header-user-balance__toggle:active svg,
.exchange-app .ex-header-user-balance__toggle:active svg * {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

.exchange-app .ex-header-user-balance__toggle svg {
    display: block !important;
    width: var(--ex-navbar-icon-size, 20px) !important;
    height: var(--ex-navbar-icon-size, 20px) !important;
    stroke: currentColor !important;
    stroke-width: 2.5 !important;
    fill: none !important;
    pointer-events: none;
}

.exchange-app .ex-header-user-balance__toggle svg * {
    stroke: currentColor !important;
    stroke-width: 2.5 !important;
    fill: none !important;
}

.exchange-app .ex-wallet-bar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ex-navbar-control-h, 2.75rem);
    height: var(--ex-navbar-control-h, 2.75rem);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--theme-radius-chip, 4px);
    background: transparent;
    color: var(--ex-nav-icon);
    cursor: pointer;
    flex-shrink: 0;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.exchange-app .ex-wallet-bar__toggle:hover,
.exchange-app .ex-wallet-bar__toggle:focus-visible,
html.theme-dark .exchange-app .ex-wallet-bar__toggle:hover,
html.theme-dark .exchange-app .ex-wallet-bar__toggle:focus-visible,
.theme-dark .exchange-app .ex-wallet-bar__toggle:hover,
.theme-dark .exchange-app .ex-wallet-bar__toggle:focus-visible {
    color: #FFFFFF !important;
    background: var(--theme-btn-primary-bg, #DD3E42) !important;
    box-shadow: none;
    transform: none;
}

.exchange-app .ex-wallet-bar__toggle:hover svg,
.exchange-app .ex-wallet-bar__toggle:focus-visible svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

.exchange-app .ex-wallet-bar__toggle:active {
    color: #FFFFFF !important;
    background: var(--theme-btn-primary-hover, #DD3E42) !important;
    box-shadow: none;
    transform: none;
}

.exchange-app .ex-header-user-meta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--ex-nav-icon);
    transition: color 0.2s ease;
}

.exchange-app .ex-header-user-meta__item:hover .ex-header-user-meta__icon {
    color: var(--color-primary);
}

.exchange-app .ex-header-user-meta__item.is-active .ex-header-user-meta__icon {
    color: var(--color-primary) !important;
}

.exchange-app .ex-header-user-meta__item.is-active .ex-header-user-meta__label {
    color: var(--color-primary) !important;
    font-weight: 700;
}

.exchange-app .ex-header-user-meta__item.is-active:hover .ex-header-user-meta__icon {
    color: var(--color-primary) !important;
}

.exchange-app .ex-header-user-meta__icon svg {
    width: 1.625rem;
    height: 1.625rem;
    stroke: currentColor;
}

.exchange-app .ex-header-user-meta__label {
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    max-width: 6.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exchange-app .ex-header-user-meta__label--user {
    max-width: 7rem;
}

.exchange-app .ex-navbar-bottom__actions .ex-menubar-btn,
.exchange-app .ex-navbar-bottom__actions .ex-notification-btn,
.exchange-app .ex-navbar-bottom__actions .switch {
    width: var(--ex-navbar-control-h, 2.75rem);
    height: var(--ex-navbar-control-h, 2.75rem);
    min-width: var(--ex-navbar-control-h, 2.75rem);
    min-height: var(--ex-navbar-control-h, 2.75rem);
}

/* ☰ / search / shared menubar icons — same token as balance eye + username */
.exchange-app .ex-navbar-bottom__actions .ex-menubar-btn,
.exchange-app .ex-header-actions .ex-menubar-btn:not(.ex-header-logout) {
    color: var(--ex-sidebar-icon, #111827);
}

html.theme-dark .exchange-app .ex-navbar-bottom__actions .ex-menubar-btn,
html.theme-dark .exchange-app .ex-header-actions .ex-menubar-btn:not(.ex-header-logout),
.theme-dark .exchange-app .ex-navbar-bottom__actions .ex-menubar-btn,
.theme-dark .exchange-app .ex-header-actions .ex-menubar-btn:not(.ex-header-logout) {
    color: var(--ex-sidebar-icon, #FFFFFF);
}

.exchange-app .ex-navbar-bottom__actions .ex-menubar-btn svg,
.exchange-app .ex-header-actions .ex-menubar-btn:not(.ex-header-logout) svg {
    stroke: currentColor;
    color: inherit;
}

.exchange-app .ex-navbar-bottom__actions .ex-menubar-btn:hover,
.exchange-app .ex-navbar-bottom__actions .ex-menubar-btn:focus-visible,
.exchange-app .ex-header-actions .ex-menubar-btn:not(.ex-header-logout):hover,
.exchange-app .ex-header-actions .ex-menubar-btn:not(.ex-header-logout):focus-visible {
    color: var(--theme-primary, #DD3E42);
}

.exchange-app .ex-navbar-bottom__actions .ex-menubar-btn svg,
.exchange-app .ex-navbar-bottom__actions .ex-notification-btn svg,
.exchange-app .ex-navbar-bottom__actions .switch .switch-icons svg {
    width: var(--ex-navbar-icon-size, 20px);
    height: var(--ex-navbar-icon-size, 20px);
}

.exchange-app .ex-navbar-bottom__actions .ex-lang-btn {
    min-height: var(--ex-navbar-control-h, 2.75rem);
    height: var(--ex-navbar-control-h, 2.75rem);
    padding-left: var(--ex-navbar-item-px, 12px);
    padding-right: var(--ex-navbar-item-px, 12px);
}

@media (max-width: 1199px) {
    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest):not(.ex-navbar-bottom__grid--user) {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
        grid-template-areas: "start center actions";
        row-gap: 0;
        min-height: 3.25rem;
    }

    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest):not(.ex-navbar-bottom__grid--user) .ex-navbar-bottom__center {
        padding-bottom: 0;
    }

    .exchange-app .ex-header-user-meta__item {
        min-width: 3.5rem;
        padding: 0.3rem 0.4rem;
    }

    .exchange-app .ex-header-user-meta__label:not(.ex-header-user-balance),
    .exchange-app .ex-header-user-meta__label--user {
        max-width: 5.5rem;
    }

    /* Guest: hide long wallet prompt so logo stays visible */
    .exchange-app .ex-navbar-bottom__grid--guest .ex-header-actions__wallet {
        display: none;
    }

    .exchange-app .ex-header-utils__auth-links {
        gap: 0.45rem;
        font-size: var(--theme-text-sm, 0.75rem);
    }
}

@media (max-width: 991px) {
    .exchange-app .ex-navbar-bottom__grid--guest {
        row-gap: 0;
    }

    /* Legacy meta-scroll header only (not guest/user shell) */
    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest):not(.ex-navbar-bottom__grid--user) {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
        grid-template-areas: "start center actions";
        row-gap: 0;
        column-gap: 0.35rem;
        min-height: 3rem;
        padding: 0.2rem 0;
        align-items: center;
    }

    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest):not(.ex-navbar-bottom__grid--user) .ex-navbar-bottom__center {
        justify-self: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-bottom: 0;
    }

    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest):not(.ex-navbar-bottom__grid--user) .ex-navbar-bottom__meta-scroll {
        justify-content: center;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
    }

    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest):not(.ex-navbar-bottom__grid--user) .ex-header-user-meta {
        justify-content: center;
        margin-inline: auto;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
    }

    .exchange-app .ex-header-user-meta {
        gap: 0.1rem 0.25rem;
    }

    .exchange-app .ex-header-user-meta__item,
    .exchange-app .ex-header-user-meta__user-toggle {
        min-width: 2.125rem;
        padding: 0.15rem 0.2rem;
        gap: 0.1rem;
    }

    .exchange-app .ex-header-user-meta__icon {
        width: 1.625rem;
        height: 1.625rem;
    }

    .exchange-app .ex-header-user-meta__icon svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    .exchange-app .ex-header-user-meta__label:not(.ex-header-user-balance),
    .exchange-app .ex-header-user-meta__label--user {
        font-size: var(--theme-text-xs, 0.6875rem);
        max-width: 2.75rem;
        line-height: 1.1;
    }

    .exchange-app .ex-header-user-meta__item--wallet .ex-header-user-balance,
    .exchange-app .ex-header-user-meta__item--wallet .ex-header-user-balance-mount {
        font-size: var(--theme-text-xs, 0.6875rem);
        max-width: 3.25rem;
    }

    .exchange-app .ex-navbar-bottom__actions,
    .exchange-app .ex-header-actions {
        flex-wrap: nowrap;
        gap: 0.1rem 0.2rem;
    }

    .exchange-app .ex-lang-btn {
        min-height: 2rem;
        padding: 0.1rem 0.2rem;
        gap: 0.2rem;
    }

    .exchange-app .ex-lang-btn__value {
        font-size: var(--theme-text-xs, 0.6875rem);
        max-width: 4.5rem;
    }
}

@media (max-width: 767px) {
    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest):not(.ex-navbar-bottom__grid--user) {
        column-gap: 0.25rem;
        min-height: 2.85rem;
    }
}

@media (max-width: 575px) {
    .exchange-app .ex-header-utils__auth-links {
        gap: 0.35rem;
        font-size: var(--theme-text-xs, 0.6875rem);
    }

    .exchange-app .ex-header-user-meta__label:not(.ex-header-user-balance),
    .exchange-app .ex-header-user-meta__label--user {
        display: none;
    }

    .exchange-app .ex-header-user-meta__item,
    .exchange-app .ex-header-user-meta__user-toggle {
        min-width: 1.75rem;
        padding: 0.1rem;
    }

    .exchange-app .ex-header-user-meta__item--wallet .ex-header-user-balance {
        display: inline-block !important;
        font-size: var(--theme-text-xs, 0.6875rem);
        max-width: 2.75rem;
    }
}

.exchange-app .ex-navbar-bottom__meta-scroll.is-dropdown-open {
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
}

.exchange-app .ex-header-actions__item.is-dropdown-open,
.exchange-app .ex-user-menu.is-open {
    z-index: 1085;
}

.exchange-app .ex-header-actions__wallet .ex-wallet-bar {
    font-size: var(--theme-text-sm, 0.75rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exchange-app .ex-notification-btn.dropdown-toggle::after,
.exchange-app .ex-user-menu__btn.dropdown-toggle::after {
    display: none;
}

/* Disable legacy hover menu on exchange header (style.css .dashboard-user-menu) */
body.exchange-app .right-area-inner:hover > ul:not(.show),
body.exchange-app .ex-header-actions:hover > ul:not(.show) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.exchange-app .ex-navbar-bottom .right-area-inner > *,
.exchange-app .ex-header-actions > * {
    flex-shrink: 0;
}

.exchange-app .ex-navbar-bottom .right-area-inner img,
.exchange-app .ex-header-actions img {
    display: block;
}

.exchange-app .navbar-top a,
.exchange-app .ex-navbar-bottom .right-area-inner,
.exchange-app .topbar-right a {
    color: var(--ex-nav-text) !important;
}

.exchange-app .bg-black-3 {
    background-color: var(--ex-surface-raised) !important;
    border-bottom: 1px solid var(--ex-border);
}

/* Category strip — themed marquee (right to left), pauses on hover */
.exchange-app .ex-header-cats {
    background-color: var(--ex-surface-raised);
    border-bottom: 1px solid var(--ex-border);
    padding: 0.75rem 0;
    overflow: hidden;
}

html.theme-light .exchange-app .ex-header-cats {
    background: var(--ex-header-cats-bg, var(--ex-surface-raised));
    border-top: none;
    border-bottom: none;
    box-shadow: var(--ex-header-cats-inset, none);
    overflow: visible;
    margin-bottom: 2px;
}

html.theme-light .exchange-app .ex-header-cats::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    height: 2px;
    pointer-events: none;
    background: var(--ex-header-cats-top-seam, transparent);
}

html.theme-light .exchange-app .ex-header-cats::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 5px;
    pointer-events: none;
    background: var(--ex-header-cats-bottom-seam);
    box-shadow: var(--ex-header-cats-bottom-seam-shadow);
}

.exchange-app .ex-header-cats__marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.exchange-app .ex-header-cats__marquee::before,
.exchange-app .ex-header-cats__marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2rem;
    z-index: 1;
    pointer-events: none;
}

.exchange-app .ex-header-cats__marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--ex-header-cats-fade, var(--ex-header-cats-bg, var(--ex-surface-raised))), transparent);
}

.exchange-app .ex-header-cats__marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--ex-header-cats-fade, var(--ex-header-cats-bg, var(--ex-surface-raised))), transparent);
}

.exchange-app .ex-header-cats__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: ex-cats-marquee-rtl 55s linear infinite;
}

.exchange-app .ex-header-cats__marquee.is-paused .ex-header-cats__track {
    animation-play-state: paused;
}

.exchange-app .ex-header-cats__group {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 0.25rem;
}

.exchange-app .ex-header-cats__group + .ex-header-cats__group {
    margin-left: 0.25rem;
}

@keyframes ex-cats-marquee-rtl {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(var(--ex-cats-marquee-distance, -50%), 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .exchange-app .ex-header-cats__track {
        animation: none;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }

    .exchange-app .ex-header-cats__group[aria-hidden="true"] {
        display: none;
    }

    .exchange-app .ex-header-cats__group + .ex-header-cats__group {
        margin-left: 0;
    }
}

.exchange-app .ex-nav-home-btn {
    color: var(--ex-nav-icon);
}

.exchange-app .ex-nav-home-btn:hover {
    color: var(--color-primary);
}

/* ─── Theme toggle — admin .switch (feather sun/moon) ───────────────────── */
.exchange-app .ex-header-actions__icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
    height: var(--ex-navbar-control-h, 2.75rem);
    align-self: center;
}

.exchange-app .ex-header-actions__icons .switch,
.exchange-app .ex-header-actions__icons .ex-notification-btn,
.exchange-app .ex-navbar-bottom__actions .ex-header-actions__icons .switch,
.exchange-app .ex-navbar-bottom__actions .ex-header-actions__icons .ex-notification-btn {
    width: var(--ex-navbar-control-h, 2.75rem);
    height: var(--ex-navbar-control-h, 2.75rem);
    min-width: var(--ex-navbar-control-h, 2.75rem);
    min-height: var(--ex-navbar-control-h, 2.75rem);
}

.exchange-app .ex-header-actions__icons .ex-notification-bell {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
}

.exchange-app .ex-header-actions__icons .switch .switch-icons svg,
.exchange-app .ex-header-actions__icons .ex-notification-btn svg,
.exchange-app .ex-navbar-bottom__actions .ex-header-actions__icons .switch .switch-icons svg,
.exchange-app .ex-navbar-bottom__actions .ex-header-actions__icons .ex-notification-btn svg {
    width: var(--ex-navbar-icon-size, 20px) !important;
    height: var(--ex-navbar-icon-size, 20px) !important;
}

.exchange-app .ex-header-actions__icons .ex-notification-btn svg {
    stroke-width: 2;
    overflow: visible;
}

.exchange-app .switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ex-navbar-control-h, 2.75rem);
    height: var(--ex-navbar-control-h, 2.75rem);
    margin: 0;
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 0;
    border-radius: var(--theme-radius-control, 8px);
    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.exchange-app .switch:hover {
    background: color-mix(in srgb, #ffffff 42%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 1px 3px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.exchange-app .switch:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.14);
}

.theme-dark .exchange-app .switch:hover {
    background: color-mix(in srgb, #ffffff 12%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.28);
}

.exchange-app .switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.exchange-app .switch .switch-icons {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: inherit;
}

.exchange-app .switch .switch-icons svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.35rem;
    height: 1.35rem;
    transform: translate(-50%, -50%);
    fill: transparent;
    stroke: currentColor;
    stroke-width: 2;
    overflow: visible;
    transition:
        opacity 0.3s ease,
        stroke 0.3s ease,
        fill 0.3s ease,
        filter 0.3s ease,
        transform 0.18s ease;
}

/* Theme toggle colors — readable on dark (#0B1220) and light (#F8FAFC) headers */
.exchange-app .switch .switch-icons svg.feather-sun {
    opacity: 1;
    color: #F59E0B;
    stroke: #B45309;
    fill: #F59E0B;
    filter: none;
}

.exchange-app .switch .switch-icons svg.feather-moon {
    opacity: 0;
    color: #38BDF8;
    stroke: #0369A1;
    fill: #38BDF8;
    filter: none;
}

/* Light mode (checked): moon visible */
.exchange-app .switch input:checked ~ .switch-icons svg.feather-sun {
    opacity: 0;
}

.exchange-app .switch input:checked ~ .switch-icons svg.feather-moon {
    opacity: 1;
    color: #38BDF8;
    stroke: #0369A1;
    stroke-width: 2;
    fill: #38BDF8;
    filter: none;
}

.exchange-app .switch:hover .switch-icons svg.feather-sun {
    stroke: #B45309;
    color: #FBBF24;
    fill: #FBBF24;
    transform: translate(-50%, -50%) scale(1.08);
    filter: none;
}

.exchange-app .switch:hover .switch-icons svg.feather-moon {
    stroke: #0369A1;
    color: #7DD3FC;
    fill: #7DD3FC;
    transform: translate(-50%, -50%) scale(1.08);
    filter: none;
}

.exchange-app .switch input:checked ~ .switch-icons svg.feather-moon {
    stroke: #0369A1;
    color: #38BDF8;
    fill: #38BDF8;
}

.theme-light .exchange-app .switch .switch-icons svg.feather-moon,
html.theme-light .exchange-app .switch .switch-icons svg.feather-moon {
    stroke: #0369A1;
    color: #38BDF8;
    fill: #38BDF8;
    filter: none;
}

.theme-dark .exchange-app .switch .switch-icons svg.feather-sun {
    stroke: #B45309;
    color: #F59E0B;
    fill: #F59E0B;
    filter: none;
}

.theme-dark .exchange-app .switch:hover .switch-icons svg.feather-sun {
    stroke: #B45309;
    color: #FBBF24;
    fill: #FBBF24;
    filter: none;
}

/* ─── Header links (admin s7__nav text tones) ─────────────── */
.exchange-app .navbar-top a,
.exchange-app .navbar-top .topbar-right a,
.exchange-app .ex-navbar-bottom .right-area-inner a,
.exchange-app .topbar-right a {
    color: var(--ex-nav-text) !important;
}

.exchange-app .navbar-top a:hover,
.exchange-app .topbar-right a:hover {
    color: var(--color-primary) !important;
}

.exchange-app .menubar-mobile:hover,
.exchange-app .menubar:hover,
.exchange-app .sidebar-menu-close:hover {
    color: var(--color-primary) !important;
}

.exchange-app .topbar-select-inner {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--theme-radius-chip, 4px);
}

.exchange-app .topbar-select-inner select {
    color: var(--h-color) !important;
    background: transparent !important;
}

.exchange-app .topbar-select-inner select option {
    background: var(--card-bg);
    color: var(--h-color);
}

/* ─── Buttons & links (admin primary / success) ──────────────────────────── */
.exchange-app .btn--success,
.exchange-app .btn1.btn--success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: #fff !important;
}

.exchange-app .btn--success:hover,
.exchange-app .btn1.btn--success:hover {
    background-color: var(--color-success-light) !important;
    border-color: var(--color-success-light) !important;
}

.exchange-app .btn-outline-light {
    color: var(--ex-nav-text) !important;
    border-color: var(--border-color) !important;
}

.exchange-app .btn-outline-light:hover {
    background: var(--ex-row-alt) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary-light) !important;
}

.exchange-app .text--base,
.exchange-app a.text--base {
    color: var(--color-primary) !important;
}

.exchange-app .pagination .page-item.active .page-link {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.exchange-app .ex-tabs .nav-link {
    color: var(--ex-muted) !important;
    background: transparent !important;
}

.exchange-app .ex-tabs .nav-link:hover,
.exchange-app .ex-tabs .nav-link.active {
    color: var(--color-primary) !important;
    background: transparent !important;
}

/* Bet slip / modal text — theme-aware (not hard-coded white) */
.theme-light .exchange-app .bet-slip-empty-state,
.theme-light .exchange-app .bet-slip-selection .text--white,
.theme-light .exchange-app .bet-predict-content .text--white {
    color: var(--h-color) !important;
}

.theme-dark .exchange-app .bet-slip-empty-state,
.theme-dark .exchange-app .bet-slip-selection .text--white,
.theme-dark .exchange-app .bet-predict-content .text--white {
    color: var(--h-color) !important;
}

.theme-dark .exchange-app .bet-slip-dock .ex-panel-head .offcanvas-title {
    color: #fff !important;
}

.theme-dark .exchange-app .bet--model .modal-title-cust:not(.ex-panel-head),
.theme-dark .exchange-app .bet--model .modal-footer-cust {
    background-color: var(--ex-surface-head) !important;
}

.theme-dark .exchange-app .bet--model .modal-content-cust {
    background-color: var(--card-bg) !important;
}

.exchange-app .bet-slip-type-badge--back {
    background-color: var(--ex-back) !important;
    color: var(--ex-back-text) !important;
}

.exchange-app .bet-slip-type-badge--lay {
    background-color: var(--ex-lay) !important;
    color: var(--ex-lay-text) !important;
}

.exchange-app .bet-type-badge--back {
    background-color: var(--ex-back) !important;
    color: var(--ex-back-text) !important;
}

.exchange-app .bet-type-badge--lay {
    background-color: var(--ex-lay) !important;
    color: var(--ex-lay-text) !important;
}

.exchange-app .ex-event__price-header-back {
    background: var(--ex-back) !important;
    color: var(--ex-back-text) !important;
}

.exchange-app .ex-event__price-header-lay {
    background: var(--ex-lay) !important;
    color: var(--ex-lay-text) !important;
}

.exchange-app .ex-market__head-row .ex-market__price-col--back {
    background: var(--ex-back) !important;
    color: var(--ex-back-text) !important;
    justify-content: center;
    border-radius: var(--theme-radius-chip, 4px);
    margin: 2px;
}

.exchange-app .ex-market__head-row .ex-market__price-col--lay {
    background: var(--ex-lay) !important;
    color: var(--ex-lay-text) !important;
    justify-content: center;
    border-radius: var(--theme-radius-chip, 4px);
    margin: 2px;
}

.exchange-app .ex-market__price-col--back {
    color: var(--ex-back-text);
}

.exchange-app .ex-market__head-row .ex-market__price-col--back,
.exchange-app .ex-market__head-row .ex-market__price-col--lay {
    font-weight: 600;
}

.exchange-app .ex-market__price-col--lay {
    color: var(--ex-lay-text);
}

.exchange-app .ex-price--back.bet_button,
.exchange-app .ex-price--back.odds-option,
.exchange-app .ex-price--back {
    background-color: var(--ex-back) !important;
    border-color: var(--ex-back) !important;
    color: var(--ex-back-text) !important;
}

.exchange-app .ex-price--back.bet_button:hover,
.exchange-app .ex-price--back.odds-option:hover,
.exchange-app .ex-price--back:hover,
.exchange-app .ex-price--back:focus {
    background-color: var(--ex-back-hover) !important;
    border-color: var(--ex-back-hover) !important;
    color: var(--ex-back-text) !important;
}

.exchange-app .ex-price--lay.bet_button,
.exchange-app .ex-price--lay.odds-option,
.exchange-app .ex-price--lay:not(.ex-price--unavailable) {
    background-color: var(--ex-lay) !important;
    border-color: var(--ex-lay) !important;
    color: var(--ex-lay-text) !important;
}

.exchange-app .ex-price--lay.bet_button:hover,
.exchange-app .ex-price--lay.odds-option:hover,
.exchange-app .ex-price--lay:not(.ex-price--unavailable):hover,
.exchange-app .ex-price--lay:not(.ex-price--unavailable):focus {
    background-color: var(--ex-lay-hover) !important;
    border-color: var(--ex-lay-hover) !important;
    color: var(--ex-lay-text) !important;
}

.exchange-app .ex-price--unavailable {
    /* gray + lock owned by exchange-odds-cell.css */
}

.exchange-app .ex-indibet-outcome__back .ex-price--unavailable,
.exchange-app .ex-indibet-outcome__back .ex-price--back.ex-price--unavailable,
.exchange-app .ex-indibet-outcome__lay .ex-price--unavailable,
.exchange-app .ex-indibet-outcome__lay .ex-price--lay.ex-price--unavailable,
html.theme-dark .exchange-app .ex-indibet-outcome__back .ex-price--unavailable,
html.theme-dark .exchange-app .ex-indibet-outcome__back .ex-price--back.ex-price--unavailable,
html.theme-dark .exchange-app .ex-indibet-outcome__lay .ex-price--unavailable,
html.theme-dark .exchange-app .ex-indibet-outcome__lay .ex-price--lay.ex-price--unavailable {
    /* gray + lock owned by exchange-odds-cell.css */
}

.exchange-app .ex-open-bets__return {
    color: var(--ex-text-strong, var(--h-color, var(--bp-slate-800))) !important;
}

.theme-dark .exchange-app .ex-open-bets__return {
    color: var(--ex-text, #e2e8f0) !important;
}

.exchange-app .ex-open-bets__stake {
    color: var(--ex-text-strong, var(--h-color, var(--bp-slate-800))) !important;
}

.theme-dark .exchange-app .ex-open-bets__stake {
    color: var(--ex-text, #e2e8f0) !important;
}

.theme-dark .exchange-app .ex-open-bets__match,
.theme-dark .exchange-app a.ex-open-bets__match {
    color: var(--ex-text, #e2e8f0);
}

.theme-dark .exchange-app a.ex-open-bets__match:hover {
    color: var(--theme-primary);
    background: transparent;
    box-shadow: none;
}

.exchange-app .ex-event__teams a:hover,
.exchange-app .ex-event__teams a:hover .ex-event__team,
.exchange-app .ex-event__teams a:hover .ex-event__vs {
    color: var(--color-primary) !important;
}

/* Override color.php dynamic accent — resting nav tones, primary on hover only */
body.exchange-app .navbar-top ul li a {
    color: var(--ex-nav-text) !important;
}

body.exchange-app .navbar-top ul li i,
body.exchange-app .navbar-top ul li svg {
    color: var(--ex-nav-icon) !important;
}

body.exchange-app .navbar-top ul li a:hover,
body.exchange-app .navbar-top ul li a:hover i,
body.exchange-app .navbar-top ul li a:hover svg {
    color: var(--color-primary) !important;
}

.ex-header-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.25rem;
}
.exchange-app .ex-open-bets__header {
    background: var(--ex-surface-section-head) !important;
    color: var(--ex-schedule-section-head-text, var(--ex-text-strong)) !important;
    border-bottom: 1px solid var(--ex-schedule-section-head-border, var(--ex-border)) !important;
    font-family: var(--theme-font-sans, var(--heading-font, sans-serif)) !important;
    font-size: var(--theme-type-league-size, var(--theme-text-base)) !important;
    font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600)) !important;
    letter-spacing: var(--theme-type-league-tracking, 0);
    text-transform: none;
}

.theme-dark .exchange-app .ex-open-bets__header,
html.theme-dark .exchange-app .ex-open-bets__header {
    color: var(--ex-schedule-section-head-text) !important;
}

.exchange-app .ex-event__price-header-back,
.exchange-app .ex-event__price-header-lay {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    padding: 2px 4px;
    border-radius: var(--theme-radius-chip, 4px);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.exchange-app .bet-slip-type-badge {
    font-size: var(--theme-text-sm, 0.75rem);
    padding: 0.3em 0.8em;
}

.exchange-app .bet-type-badge {
    font-size: var(--theme-text-xs, 0.6875rem);
}

/* ─── Forms / inputs in exchange areas ───────────────────────────────────── */
.exchange-app .ex-user-filter-card .form-control,
.exchange-app .ex-user-filter-card .form-select {
    background-color: var(--ex-input-bg);
    border-color: var(--ex-border);
    color: var(--ex-text);
}

.theme-light .exchange-app .ex-match-header__title,
.theme-light .exchange-app .ex-event__teams a {
    color: var(--ex-text-strong);
}

.theme-light .exchange-user-layout .ex-user-page-title,
.theme-light .exchange-user-layout .ex-stat-card .media-body h3 {
    color: var(--ex-text-strong);
}

.theme-dark .exchange-user-layout .ex-user-page-title,
.theme-dark .exchange-user-layout .ex-stat-card .media-body h3 {
    color: var(--ex-text-strong);
}

.theme-light .exchange-app .text--white {
    color: var(--ex-text) !important;
}

/* ─── Light mode: override legacy dark theme (style.css hard-coded #030912 etc.) ─ */
html.theme-light body.exchange-app {
    background: var(--body-bg) !important;
    background-color: var(--body-bg) !important;
    color: var(--para-color) !important;
}

html.theme-light .exchange-app .bg-black,
html.theme-light .exchange-app .bg-black-2,
html.theme-light .exchange-app .bg-black-3,
html.theme-light .exchange-app .bg-black-4,
html.theme-light .exchange-app .bg-black-5,
html.theme-light .exchange-app .bg-navy-2 {
    background: var(--ex-surface) !important;
    background-color: var(--ex-surface) !important;
}

html.theme-light .exchange-app .navbar-top,
html.theme-light .exchange-app .ex-navbar-bottom {
    background: var(--ex-nav-bg) !important;
    box-shadow: var(--ex-nav-shadow, none);
}

html.theme-light .exchange-app .dropdown-widget {
    background: var(--card-bg) !important;
    border: 1px solid var(--ex-border);
}

html.theme-light .exchange-app .dropdown-widget h5,
html.theme-light .exchange-app .dropdown-widget ul .list-heading {
    background: var(--ex-surface-head) !important;
    color: var(--ex-text-strong) !important;
}

html.theme-light .exchange-app .dropdown-widget ul li a,
html.theme-light .exchange-app .dropdown-widget ul li button {
    color: var(--ex-text) !important;
}

html.theme-light .exchange-app .dropdown-widget ul li a:hover {
    color: var(--color-primary) !important;
}

html.theme-light .exchange-app .inplay-slider-inner-area {
    background: var(--ex-surface) !important;
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-panel, 8px);
    box-shadow: var(--ex-inplay-panel-shadow);
    overflow: hidden;
}

html.theme-light .exchange-app .inplay-slider-inner {
    background: var(--ex-inplay-track-bg) !important;
    box-shadow: var(--ex-inplay-track-inset);
}

html.theme-light .exchange-app .inplay-area {
    background: var(--ex-surface) !important;
}

html.theme-light .exchange-app .inplay-area ul li a {
    color: var(--ex-text) !important;
}

html.theme-light .exchange-app .inplay-slider a.ex-inplay-cat-tile,
html.theme-light .exchange-app .inplay-slider a {
    border-color: var(--ex-inplay-tile-border) !important;
    color: var(--ex-text) !important;
}

html.theme-light .exchange-app .inplay-slider a.ex-inplay-cat-tile:hover,
html.theme-light .exchange-app .inplay-slider a:hover {
    color: var(--color-primary) !important;
}

html.theme-light .exchange-app .inplay-slider .owl-prev,
html.theme-light .exchange-app .inplay-slider .owl-next {
    background: var(--ex-inplay-nav-bg) !important;
    border: 1px solid var(--ex-border);
    box-shadow: var(--ex-inplay-nav-shadow);
    color: var(--ex-text) !important;
}

html.theme-light .exchange-app .ex-footer {
    background: var(--ex-surface-raised) !important;
    color: var(--para-color) !important;
}

html.theme-light .exchange-app .ex-footer .widget-title {
    color: var(--ex-text-strong, var(--h-color)) !important;
}

html.theme-light .exchange-app .bet-slip-dock,
html.theme-light .exchange-app .ex-betslip-shell,
html.theme-light .exchange-app .offcanvas.bet-slip-dock {
    background-color: var(--card-bg) !important;
    color: var(--ex-text) !important;
    border: 1px solid var(--ex-border) !important;
    border-radius: var(--ex-panel-radius, 10px) !important;
    overflow: hidden;
    box-shadow: var(--ex-inplay-panel-shadow) !important;
}

html.theme-light .exchange-app .main-body-area {
    background: transparent !important;
}

html.theme-light .exchange-app .topbar-select-inner select {
    background: var(--ex-input-bg) !important;
    color: var(--ex-text) !important;
    border-color: var(--ex-border) !important;
}

html.theme-light .exchange-app .ex-mobile-slip-bar {
    background: var(--card-bg) !important;
    border-top-color: var(--ex-border) !important;
    color: var(--ex-text) !important;
}

html.theme-light .exchange-user-layout .leaderboard-area,
html.theme-light .exchange-user-layout .currency-area,
html.theme-light .exchange-user-layout .contact-area,
html.theme-light .exchange-user-layout .chart-area {
    background: transparent !important;
}

html.theme-light .exchange-user-layout .single-currency-inner,
html.theme-light .exchange-user-layout .single-schedule-inner {
    background: var(--card-bg) !important;
    border: 1px solid var(--ex-border);
    color: var(--ex-text) !important;
}

html.theme-light .exchange-user-layout .table {
    color: var(--ex-text) !important;
}

html.theme-light .exchange-user-layout .table thead th {
    background: var(--ex-surface-table-head) !important;
    color: var(--h-color) !important;
    border-color: var(--ex-border) !important;
}

html.theme-light .exchange-user-layout .table tbody td {
    border-color: var(--ex-border) !important;
}

/* Light mode — section headers vs table headers */
html.theme-light .exchange-app :is(
    .ex-panel-head,
    .ex-inplay-page__toolbar,
    .ex-dash-section-head,
    .ex-dash-chart__header,
    .ex-account-block__head.ex-table-section-head,
    .ex-open-bets__header
) {
    background: var(--ex-surface-section-head, #CDD5E0) !important;
    background-color: var(--ex-surface-section-head, #CDD5E0) !important;
}

html.theme-light .exchange-app :is(
    .ex-market__header,
    .table thead th,
    .ex-table thead th
) {
    background: var(--ex-surface-table-head, #F1F5F9) !important;
    background-color: var(--ex-surface-table-head, #F1F5F9) !important;
}

html.theme-light .exchange-app .ex-market__head-row {
    background: var(--ex-surface-subhead, #E2E8F0) !important;
    background-color: var(--ex-surface-subhead, #E2E8F0) !important;
}

/* MATCH / 1 / X / 2 legend — separate from sport head + match rows */
html.theme-light .exchange-app .ex-indibet-list__columns {
    background: var(--ex-surface-subhead, #E2E8F0) !important;
    background-color: var(--ex-surface-subhead, #E2E8F0) !important;
    border-bottom: 1px solid var(--theme-match-list-columns-border, #CBD5E1) !important;
}

/* ─── Dark mode: override legacy purple/navy → admin S7 slate (#18202f / #1e293b) ─ */
html.theme-dark body.exchange-app {
    background: var(--body-bg) !important;
    background-color: var(--body-bg) !important;
    color: var(--para-color) !important;
}

html.theme-dark .exchange-app :is(
    .bg-black,
    .bg-black-2,
    .bg-black-3,
    .bg-black-4,
    .bg-black-5,
    .single-schedule-inner,
    .single-currency-inner,
    .single-payment-wrap,
    .card-body.leaderboard-table,
    .sidebar-menu,
    .dropdown-widget,
    .chart-select-inner,
    .chart-select,
    .payment-gateway-check,
    .signup-area .contact-inner,
    .menubar-mobile,
    .dashboard-user-menu ul,
    .features-area-inner,
    .td-sidebar .widget,
    .blog-share-area,
    .blog-comment
) {
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
}

/* Full-page section wrappers — match admin body, not card */
html.theme-dark .exchange-app .bg-navy-2 {
    background: var(--body-bg) !important;
    background-color: var(--body-bg) !important;
}

html.theme-dark .exchange-app :is(
    .dropdown-widget h5,
    .dropdown-widget ul .list-heading,
    .dropdown-widget ul li .referral-inner,
    .dropdown-widget .nav-tabs li button.active,
    .modal-footer-cust,
    .modal-sport .modal-header,
    .ex-market__head-row
) {
    background: var(--ex-surface-head) !important;
    background-color: var(--ex-surface-head) !important;
}

html.theme-dark .exchange-app .ex-open-bets__header {
    background: var(--ex-surface-section-head) !important;
    background-color: var(--ex-surface-section-head) !important;
}

html.theme-dark .exchange-app .bet--model .modal-content-cust {
    background-color: var(--card-bg) !important;
}

html.theme-dark .exchange-app .widget_search .search-form input {
    background: var(--ex-input-bg) !important;
    color: var(--ex-text) !important;
    border: 1px solid var(--ex-border) !important;
}

html.theme-dark .exchange-app .dropdown-widget ul li .referral-inner,
html.theme-dark .exchange-app .dropdown-widget .nav-tabs,
html.theme-dark .exchange-app .dropdown-widget ul ul {
    border-color: var(--ex-border) !important;
}

html.theme-dark .exchange-app .dropdown-widget .nav-tabs li button {
    color: var(--ex-muted) !important;
}

html.theme-dark .exchange-app .dropdown-widget .nav-tabs li button.active {
    color: var(--ex-text-strong) !important;
}

html.theme-dark .exchange-app .td-sidebar .widget .widget-title,
html.theme-dark .exchange-app .blog-share-area ul li {
    color: var(--ex-text) !important;
}

html.theme-dark .exchange-app .features-area-inner {
    border-color: var(--ex-border) !important;
}

html.theme-dark .exchange-app .navbar-top,
html.theme-dark .exchange-app .ex-navbar-bottom {
    background-color: var(--ex-nav-bg) !important;
    border-bottom: 1px solid var(--ex-nav-border);
    box-shadow: none;
}

html.theme-dark .exchange-app .bg-black-3,
html.theme-dark .exchange-app .ex-footer {
    background: var(--ex-surface-raised) !important;
    background-color: var(--ex-surface-raised) !important;
}

html.theme-dark .exchange-app .dropdown-widget {
    border: 1px solid var(--ex-border);
}

html.theme-dark .exchange-app .dropdown-widget ul li a,
html.theme-dark .exchange-app .dropdown-widget ul li button,
html.theme-dark .exchange-app .inplay-area ul li a,
html.theme-dark .exchange-app .ex-footer .widget-title,
html.theme-dark .exchange-app .sidebar-menu .sidebar-inner a,
html.theme-dark .exchange-app .single-sitebar a {
    color: var(--ex-text) !important;
}

html.theme-dark .exchange-app .dropdown-widget ul li a:hover,
html.theme-dark .exchange-app .inplay-area ul li a:not(.ex-inplay-match-tab):hover {
    color: var(--color-primary) !important;
}

html.theme-dark .exchange-app .inplay-slider-inner-area {
    background: var(--card-bg) !important;
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-panel, 8px);
    box-shadow: var(--ex-inplay-panel-shadow);
    overflow: hidden;
}

html.theme-dark .exchange-app .inplay-slider-inner {
    background: var(--ex-inplay-track-bg) !important;
    box-shadow: var(--ex-inplay-track-inset);
}

html.theme-dark .exchange-app .inplay-area {
    background: var(--card-bg) !important;
}

html.theme-dark .exchange-app .inplay-slider a.ex-inplay-cat-tile,
html.theme-dark .exchange-app .inplay-slider a {
    border-color: var(--ex-inplay-tile-border) !important;
    color: var(--ex-text) !important;
}

html.theme-dark .exchange-app .inplay-slider a.ex-inplay-cat-tile:hover,
html.theme-dark .exchange-app .inplay-slider a:hover {
    color: var(--color-primary-light) !important;
}

html.theme-dark .exchange-app .inplay-slider .owl-prev,
html.theme-dark .exchange-app .inplay-slider .owl-next {
    background: var(--ex-inplay-nav-bg) !important;
    border: 1px solid var(--ex-border);
    box-shadow: var(--ex-inplay-nav-shadow);
    color: var(--ex-text) !important;
}

html.theme-dark .exchange-app .bet-slip-dock,
html.theme-dark .exchange-app .ex-betslip-shell,
html.theme-dark .exchange-app .offcanvas.bet-slip-dock {
    background-color: var(--card-bg) !important;
    color: var(--ex-text) !important;
    border: 1px solid var(--ex-border) !important;
    border-radius: var(--ex-panel-radius, 10px) !important;
    overflow: hidden;
    box-shadow: var(--ex-inplay-panel-shadow) !important;
}

html.theme-dark .exchange-app .bet-slip-dock .offcanvas-header:not(.ex-panel-head) {
    border-color: var(--ex-border) !important;
    color: var(--ex-text-strong) !important;
}

html.theme-dark .exchange-app .main-body-area,
html.theme-dark .exchange-user-layout .leaderboard-area,
html.theme-dark .exchange-user-layout .currency-area,
html.theme-dark .exchange-user-layout .contact-area,
html.theme-dark .exchange-user-layout .chart-area {
    background: transparent !important;
}

html.theme-dark .exchange-app .topbar-select-inner {
    background: var(--ex-input-bg) !important;
    border: 1px solid var(--ex-border);
}

html.theme-dark .exchange-app .topbar-select-inner select,
html.theme-dark .exchange-user-layout .leaderboard-table form .form-control,
html.theme-dark .exchange-user-layout .leaderboard-table form .form-select {
    background: var(--ex-input-bg) !important;
    color: var(--ex-text) !important;
    border: 1px solid var(--ex-border) !important;
}

html.theme-dark .exchange-app .ex-mobile-slip-bar {
    background: var(--card-bg) !important;
    border-top-color: var(--ex-border) !important;
    color: var(--ex-text) !important;
}

html.theme-dark .exchange-user-layout .single-currency-inner,
html.theme-dark .exchange-user-layout .single-schedule-inner,
html.theme-dark .exchange-user-layout .ex-stat-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--ex-border);
    color: var(--ex-text) !important;
}

html.theme-dark .exchange-user-layout .table {
    color: var(--ex-text) !important;
}

html.theme-dark .exchange-user-layout .table thead th,
html.theme-dark .exchange-app .ex-table thead th {
    background: var(--ex-surface-head) !important;
    color: var(--h-color) !important;
    border-color: var(--ex-border) !important;
    font-size: var(--theme-text-base, 0.875rem) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

html.theme-dark .exchange-user-layout .table tbody td,
html.theme-dark .exchange-app .ex-table tbody td {
    border-color: var(--ex-border) !important;
    background: transparent !important;
}

html.theme-dark .exchange-user-layout .table tbody tr:nth-child(even),
html.theme-dark .exchange-app .ex-table tbody tr:nth-child(even) {
    background: var(--ex-row-alt) !important;
}

html.theme-dark .exchange-app .ex-market,
html.theme-dark .exchange-app .ex-event,
html.theme-dark .exchange-app .ex-open-bets,
html.theme-dark .exchange-app .ex-table-wrap,
html.theme-dark .exchange-app .ex-user-filter-card {
    background: var(--card-bg) !important;
    border-color: var(--ex-border) !important;
}

/* Match detail wins over card-bg — stay on the row ladder. */
html.theme-dark .exchange-app .ex-match-detail-page .ex-market,
html.theme-dark .exchange-app .ex-match-detail-page .ex-open-bets {
    background: var(--ex-surface-row) !important;
    border-color: var(--ex-border) !important;
}

html.theme-dark .exchange-app .ex-market__header,
html.theme-dark .exchange-app .ex-event__header {
    background: var(--ex-surface-table-head) !important;
}

html.theme-dark .exchange-app .preloader {
    background: var(--body-bg) !important;
}

html.theme-dark .exchange-app .pagination .page-link {
    background: var(--card-bg) !important;
    border-color: var(--ex-border) !important;
    color: var(--ex-text) !important;
}

html.theme-dark .exchange-app .pagination .page-item.active .page-link {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* ─── Live / In-Play — pulse-dot live vibe on active badges ─────────────── */
.exchange-app .ex-event__badge-live--active {
    display: inline-flex !important;
    align-items: center !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 0.3rem !important;
    background: var(--theme-primary, #DD3E42) !important;
    color: #fff !important;
    border: none !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.22);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
    animation: none;
}

.exchange-app .ex-event__badge-live--active::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -40% auto -40% -50%;
    width: 48%;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 22%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 255, 255, 0.2) 78%,
        transparent 100%
    );
    transform: skewX(-18deg) translateX(-180%);
    animation: ex-live-badge-shine 1.8s ease-in-out infinite;
}

.exchange-app .ex-event__badge-live--active > * {
    position: relative;
    z-index: 1;
}

.exchange-app .ex-event__badge-live--active,
.exchange-app .ex-event__badge-live--active *:not(.ex-live-dot) {
    color: #fff !important;
}

.exchange-app .ex-event__badge-live--active .ex-live-dot {
    width: 0.28rem !important;
    height: 0.28rem !important;
    min-width: 0.28rem !important;
    background: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.28),
        0 0 8px rgba(255, 255, 255, 0.55) !important;
    animation: ex-live-dot-micro-pulse 0.9s ease-in-out infinite !important;
}

.exchange-app .ex-event__badge-live--scheduled {
    background: #4b5563 !important;
    color: #e5e7eb !important;
}

.exchange-app .ex-event__badge-live--scheduled,
.exchange-app .ex-event__badge-live--scheduled * {
    color: #e5e7eb !important;
}

.exchange-app .ex-event__badge-live--scheduled .ex-live-dot {
    background: #9ca3af !important;
    border-color: #9ca3af !important;
    box-shadow: none !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .exchange-app .ex-event__badge-live--active,
    .exchange-app .ex-event__badge-live--active::after,
    .exchange-app .ex-event__badge-live--active .ex-live-dot {
        animation: none !important;
    }
}

@keyframes ex-live-badge-shine {
    0%,
    28% {
        transform: skewX(-18deg) translateX(-180%);
        opacity: 0;
    }
    38% {
        opacity: 1;
    }
    72% {
        opacity: 1;
    }
    88%,
    100% {
        transform: skewX(-18deg) translateX(520%);
        opacity: 0;
    }
}

@keyframes ex-live-dot-micro-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

.exchange-app .ex-live-dot {
    width: 4px !important;
    height: 4px !important;
    background: #10B981 !important;
    border: 1px solid #10B981 !important;
    box-shadow:
        0 0 0 2px rgba(16, 185, 129, 0.35),
        0 0 8px rgba(16, 185, 129, 0.65),
        0 0 16px rgba(16, 185, 129, 0.45) !important;
    animation: ex-live-dot-glow 0.85s ease-in-out infinite !important;
}

.exchange-app .ex-schedule-subnav.inplay-area .ex-inplay-match-tab .ex-live-dot,
.exchange-app .inplay-area .ex-inplay-match-tab .ex-live-dot {
    width: 0.375rem !important;
    height: 0.375rem !important;
    min-width: 0.375rem !important;
    border-width: 1px !important;
    /* No scale pulse here — keeps In-Play tab same height as siblings */
    transform: none !important;
    animation: none !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, #10B981 35%, transparent) !important;
}

/* Scope legacy style.css accent to admin primary inside exchange */
.exchange-app {
    --main-color: var(--color-primary);
    --main-color2: var(--color-primary-light);
}

.exchange-app .text-muted {
    color: var(--ex-muted) !important;
}

.exchange-app .form-control,
.exchange-app .form-select {
    background-color: var(--ex-input-bg);
    border-color: var(--border-color);
    color: var(--h-color);
}

.exchange-app .form-control:focus,
.exchange-app .form-select:focus {
    border-color: var(--theme-input-focus-border, var(--theme-primary, #DD3E42));
    outline: none;
    /* Solid primary outer line — no soft focus glow */
    box-shadow: 0 0 0 1px var(--theme-primary, #DD3E42);
}

.theme-dark .exchange-app .form-control:focus,
.theme-dark .exchange-app .form-select:focus {
    border-color: var(--theme-input-focus-border, var(--theme-primary, #DD3E42));
    outline: none;
    box-shadow: 0 0 0 1px var(--theme-primary, #DD3E42);
}

.exchange-app .table {
    color: var(--para-color);
}

.exchange-app .card,
.exchange-app .leaderboard-table {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.exchange-app .ex-fancy-group__toggle {
    background: var(--ex-surface-head);
    color: var(--h-color);
}

.exchange-app .sidebar-menu .sidebar-inner a {
    color: var(--ex-nav-text);
}

.exchange-app .sidebar-menu .sidebar-inner a:hover:not(.ex-sidebar-drawer-user__deposit) {
    color: var(--color-primary) !important;
}

/* User sidebar — admin sidebar link/icon tones */
.exchange-app .ex-sidebar .dropdown-widget ul li a {
    color: var(--ex-nav-text) !important;
}

.exchange-app .ex-sidebar .dropdown-widget ul li a:hover {
    color: var(--color-primary) !important;
}

.exchange-app .ex-sidebar .dropdown-widget .list-heading a {
    color: var(--h-color) !important;
    font-weight: 600;
}

.exchange-app .badge.bg-danger {
    background-color: var(--color-danger) !important;
}

.exchange-app .badge.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.exchange-app .badge.bg-warning {
    background-color: var(--color-warning) !important;
    color: #fff !important;
}

@keyframes ex-live-dot-glow {
    0%, 100% {
        background: #10B981;
        border-color: #10B981;
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 0 2px rgba(16, 185, 129, 0.35),
            0 0 8px rgba(16, 185, 129, 0.65),
            0 0 16px rgba(16, 185, 129, 0.45);
    }
    50% {
        background: #6EE7B7;
        border-color: #A7F3D0;
        opacity: 1;
        transform: scale(1.55);
        box-shadow:
            0 0 0 4px rgba(16, 185, 129, 0.4),
            0 0 14px rgba(16, 185, 129, 0.7),
            0 0 28px rgba(16, 185, 129, 0.5),
            0 0 40px rgba(16, 185, 129, 0.3);
    }
}

/* ═══ Phase A — S7 alignment overrides (beat legacy style.css / frontend_custom) ═══ */

/* Preloader — branded logo pulse / glow */
.exchange-app .preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--body-bg) !important;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.exchange-app .preloader.ex-preloader--standby {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.exchange-app .preloader.ex-preloader--hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.exchange-app .preloader .preloader-inner {
    background-color: transparent !important;
}

.exchange-app .ex-preloader {
    flex-direction: column;
    gap: 0.65rem;
}

.exchange-app .ex-preloader__logo-wrap {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exchange-app .ex-preloader__logo {
    position: relative;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    filter: drop-shadow(0 0 0 transparent);
}

.exchange-app .ex-preloader--active .ex-preloader__logo {
    animation: ex-preloader-breathe 1.35s ease-in-out infinite;
}

.exchange-app .ex-preloader__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-primary) 70%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 18%, transparent) 52%,
        transparent 72%
    );
    opacity: 0.45;
}

.exchange-app .ex-preloader--active .ex-preloader__glow {
    animation: ex-preloader-glow 1.35s ease-in-out infinite;
}

.exchange-app .ex-preloader__ring {
    position: absolute;
    inset: -3px;
    z-index: 1;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    opacity: 0;
}

.exchange-app .ex-preloader--active .ex-preloader__ring {
    animation: ex-preloader-ring 1.35s ease-out infinite;
}

.exchange-app .ex-preloader__label {
    margin: 0;
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--para-color);
    opacity: 0.85;
}

.exchange-app .ex-preloader--active .ex-preloader__label {
    animation: ex-preloader-label 1.35s ease-in-out infinite;
}

html.theme-dark .exchange-app .ex-preloader__glow {
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-primary-light, #42a5f5) 65%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 15%, transparent) 55%,
        transparent 72%
    );
}

@keyframes ex-preloader-breathe {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-primary) 55%, transparent));
    }
}

@keyframes ex-preloader-glow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.82);
    }
    50% {
        opacity: 1;
        transform: scale(1.18);
    }
}

@keyframes ex-preloader-ring {
    0% {
        opacity: 0.75;
        transform: scale(0.72);
    }
    70%, 100% {
        opacity: 0;
        transform: scale(1.45);
    }
}

@keyframes ex-preloader-label {
    0%, 100% {
        opacity: 0.65;
    }
    50% {
        opacity: 1;
    }
}

/* Exchange toastr overrides */
.exchange-app .ex-toast-container.toast-top-right {
    top: calc(var(--ex-site-header-height, 7.5rem) + 0.5rem);
    right: 0.75rem;
}

.exchange-app #toast-container .toast,
.exchange-app .ex-toast-container .toast {
    position: relative;
    opacity: 1;
    border-radius: var(--ex-panel-radius, 10px);
    border: 1px solid var(--ex-border, var(--border-color));
    box-shadow: var(--ex-shadow, 0 8px 24px rgba(15, 23, 42, 0.12));
    background-image: none !important;
    padding: 0.85rem 0.95rem 0.85rem 2.75rem;
    width: min(22rem, calc(100vw - 1.5rem));
}

.exchange-app #toast-container .toast-title,
.exchange-app #toast-container .toast-message {
    color: var(--h-color);
    font-size: var(--theme-text-md, 0.8125rem);
    line-height: 1.45;
}

.exchange-app #toast-container .toast-success {
    background-color: var(--ex-surface, var(--card-bg));
}

.exchange-app #toast-container .toast.toast-bet-placed {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
    border-color: #14532d !important;
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
}

.exchange-app #toast-container .toast.toast-bet-placed .toast-title {
    color: #fff;
    font-weight: 700;
    font-size: var(--theme-text-base, 0.875rem);
    margin-bottom: 0.25rem;
}

.exchange-app #toast-container .toast.toast-bet-placed .toast-message {
    color: #ecfdf5;
    font-size: var(--theme-text-md, 0.8125rem);
}

.exchange-app #toast-container .toast.toast-bet-placed .toast-close-button {
    color: #fff;
    opacity: 0.85;
    text-shadow: none;
}

.exchange-app #toast-container .toast.toast-bet-placed::before {
    background: #fff;
    width: 0.55rem;
    height: 0.55rem;
}

.exchange-app #toast-container .toast.toast-bet-placed .toast-progress {
    background: rgba(255, 255, 255, 0.45);
    opacity: 1;
}

.exchange-app #toast-container .toast-warning {
    background-color: var(--ex-surface, var(--card-bg));
}

.exchange-app #toast-container .toast-error {
    background-color: var(--ex-surface, var(--card-bg));
}

.exchange-app #toast-container .toast-success::before,
.exchange-app #toast-container .toast-warning::before,
.exchange-app #toast-container .toast-error::before {
    content: '';
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.exchange-app #toast-container .toast-success::before {
    background: var(--ex-live-green, #22c55e);
}

.exchange-app #toast-container .toast-warning::before {
    background: #f59e0b;
}

.exchange-app #toast-container .toast-error::before {
    background: #ef4444;
}

.exchange-app #toast-container .toast-progress {
    opacity: 0.35;
}

@keyframes ex-loader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Legacy accent classes → S7 tokens */
.exchange-app .text--base {
    color: var(--color-primary) !important;
}

.exchange-app .btn--success,
.exchange-app .btn1.btn--success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: #fff !important;
}

.exchange-app .btn--danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: #fff !important;
}

.exchange-app .btn-base,
.exchange-app .btn.btn-base,
.exchange-app .btn--base,
.exchange-app .btn.btn--base {
    background-color: var(--color-primary) !important;
    background-image: none !important;
    border-color: var(--color-primary) !important;
    color: var(--theme-btn-primary-text, #1a1710) !important;
}

.exchange-app .btn-base:hover,
.exchange-app .btn.btn-base:hover,
.exchange-app .btn--base:hover,
.exchange-app .btn.btn--base:hover {
    background-color: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
    color: var(--theme-btn-primary-text, #1a1710) !important;
}

.exchange-app .btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-color: transparent !important;
    background-image: none !important;
}

.exchange-app .btn-outline-primary:hover,
.exchange-app .btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Account / money chrome — outline buttons stay neutral; filled CTAs use brand primary */
.exchange-account-layout .btn-outline-primary,
.exchange-user-layout .ex-wallet-page__action.btn-outline-primary,
.exchange-user-layout .ex-notifications-page__mark-all.btn-outline-primary {
    color: var(--ex-text-strong, #334155) !important;
    border-color: color-mix(in srgb, #64748b 55%, var(--ex-border)) !important;
    background-color: transparent !important;
    font-family: "Inter", var(--body-font, sans-serif);
    font-weight: 700;
}

.exchange-account-layout .btn-outline-primary:hover,
.exchange-account-layout .btn-outline-primary:focus,
.exchange-user-layout .ex-wallet-page__action.btn-outline-primary:hover,
.exchange-user-layout .ex-wallet-page__action.btn-outline-primary:focus,
.exchange-user-layout .ex-notifications-page__mark-all.btn-outline-primary:hover,
.exchange-user-layout .ex-notifications-page__mark-all.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.theme-dark .exchange-account-layout .btn-outline-primary,
.theme-dark .exchange-user-layout .ex-wallet-page__action.btn-outline-primary,
.theme-dark .exchange-user-layout .ex-notifications-page__mark-all.btn-outline-primary {
    color: var(--ex-text, #e2e8f0) !important;
    border-color: color-mix(in srgb, #94a3b8 45%, var(--ex-border)) !important;
}

/* Account / money filled actions — brand orange primary */
.exchange-account-layout .btn-base,
.exchange-account-layout .btn.btn-base,
.exchange-account-layout .btn--base,
.exchange-account-layout .btn.btn--base {
    background-color: var(--theme-btn-primary-bg) !important;
    background-image: none !important;
    border-color: var(--theme-btn-primary-bg) !important;
    color: var(--theme-btn-primary-text) !important;
}

.exchange-account-layout .btn-base:hover,
.exchange-account-layout .btn.btn-base:hover,
.exchange-account-layout .btn--base:hover,
.exchange-account-layout .btn.btn--base:hover,
.exchange-account-layout .btn-base:focus,
.exchange-account-layout .btn.btn-base:focus {
    background-color: var(--theme-btn-primary-hover) !important;
    border-color: var(--theme-btn-primary-hover) !important;
    color: var(--theme-btn-primary-text) !important;
}

.theme-dark .exchange-account-layout .btn-base,
.theme-dark .exchange-account-layout .btn.btn-base,
.theme-dark .exchange-account-layout .btn--base,
.theme-dark .exchange-account-layout .btn.btn--base {
    background-color: var(--theme-btn-primary-bg) !important;
    border-color: var(--theme-btn-primary-bg) !important;
    color: var(--theme-btn-primary-text) !important;
}

.theme-dark .exchange-account-layout .btn-base:hover,
.theme-dark .exchange-account-layout .btn.btn-base:hover,
.theme-dark .exchange-account-layout .btn--base:hover,
.theme-dark .exchange-account-layout .btn.btn--base:hover {
    background-color: var(--theme-btn-primary-hover) !important;
    border-color: var(--theme-btn-primary-hover) !important;
    color: var(--theme-btn-primary-text) !important;
}

.exchange-app .btn-outline-danger {
    color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    background-color: transparent !important;
    background-image: none !important;
}

.exchange-app .btn-outline-danger:hover,
.exchange-app .btn-outline-danger:focus {
    color: #fff !important;
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}

.exchange-app .btn:after {
    display: none !important;
}

/* Reset legacy style.css oversized buttons (55px height) */
.exchange-app .btn {
    height: auto;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: 500;
    border-radius: var(--theme-radius-chip, 4px);
    overflow: visible;
}

.exchange-app .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: var(--theme-text-md, 0.8125rem);
}

.exchange-app .ex-betslip-stake-btn.is-active,
.exchange-app .ex-betslip-stake-btn[aria-pressed="true"] {
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
    background: var(--theme-primary-soft) !important;
}

.exchange-app .btn-primary,
.exchange-app .btn.btn-primary {
    background-color: var(--theme-btn-primary-bg) !important;
    border-color: var(--theme-btn-primary-bg) !important;
    color: var(--theme-btn-primary-text) !important;
}

.exchange-app .btn-primary:hover,
.exchange-app .btn.btn-primary:hover,
.exchange-app .btn-primary:focus,
.exchange-app .btn.btn-primary:focus {
    background-color: var(--theme-btn-primary-hover) !important;
    border-color: var(--theme-btn-primary-hover) !important;
    color: var(--theme-btn-primary-text) !important;
}

.exchange-app .form-check-input:checked {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.exchange-app .form-check-input:focus {
    border-color: var(--theme-primary, #DD3E42);
    outline: none;
    box-shadow: 0 0 0 1px var(--theme-primary, #DD3E42);
}

.exchange-app .ex-match-search input:focus,
.exchange-app .ex-match-search__input:focus {
    border-color: var(--theme-border-strong, #CCCCCC) !important;
    outline: none;
    /* Stronger gray chrome ring on focus — no theme-primary pink */
    box-shadow: 0 0 0 1.75px var(--theme-border-strong, #CCCCCC);
}

/* Header compact search: ring lives on the form only — no input focus glow */
.exchange-app .ex-navbar-bottom__search .ex-match-search--compact .ex-match-search__input:focus,
.exchange-app .ex-navbar-bottom__search .ex-match-search--compact input:focus {
    border: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.exchange-app .badge.bg-primary {
    background-color: var(--theme-primary) !important;
}

/* In-play slider / lists — kill purple gradient hover (not schedule tabs) */
.exchange-app .inplay-area ul li a:not(.ex-inplay-match-tab):hover {
    background-image: none !important;
    background-color: var(--ex-row-alt) !important;
    color: var(--color-primary) !important;
}

/* Mobile slide-out menus */
.exchange-app .sidebar-menu {
    background-color: var(--card-bg) !important;
    border-left: 1px solid var(--border-color);
}

.exchange-app .sidebar-menu .sidebar-inner {
    background: transparent !important;
}

.exchange-app .sidebar-menu-close {
    color: var(--ex-nav-icon) !important;
    background: transparent !important;
}

.exchange-app .menubar-mobile {
    background: transparent !important;
    padding: 0.35rem 0.5rem !important;
    border-radius: var(--theme-radius-chip, 4px);
    color: var(--ex-nav-icon) !important;
}

.exchange-app .menubar-mobile:hover {
    color: var(--color-primary) !important;
}

/* Auth user account menu (custom toggle, not Bootstrap dropdown) */
.exchange-app .ex-notification-bell .dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1060;
}

.exchange-app .ex-user-menu .dropdown-item {
    color: var(--para-color) !important;
}

.exchange-app .ex-user-menu .dropdown-item:hover {
    color: var(--color-primary) !important;
    background: var(--ex-row-alt) !important;
}

/* Legacy tables inside exchange */
.exchange-app .leaderboard-table .table {
    border-spacing: 0 !important;
    color: var(--para-color) !important;
}

.exchange-app .leaderboard-table .table thead th {
    background: var(--ex-surface-head) !important;
    color: var(--h-color) !important;
    border-color: var(--border-color) !important;
    font-size: var(--theme-text-base, 0.875rem) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 0.625rem 0.75rem !important;
}

.exchange-app .leaderboard-table .table tbody td {
    border-color: var(--border-color) !important;
    color: var(--para-color) !important;
    background: transparent !important;
}

.exchange-app .leaderboard-table .table tbody tr {
    background: var(--card-bg) !important;
}

.exchange-app .leaderboard-table .table tbody tr:nth-child(even) {
    background: var(--ex-row-alt) !important;
}

/* Legacy form inputs */
.exchange-app .single-input-inner.style-border input,
.exchange-app .single-input-inner.style-border textarea,
.exchange-app .single-input-inner.style-border select {
    background-color: var(--ex-input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--h-color) !important;
}

.exchange-app .single-input-inner.style-border input:focus,
.exchange-app .single-input-inner.style-border textarea:focus,
.exchange-app .single-input-inner.style-border select:focus {
    border-color: var(--color-primary) !important;
}

/* Pagination */
.exchange-app .pagination .page-link {
    color: var(--para-color);
    background: var(--card-bg);
    border-color: var(--border-color);
}

.exchange-app .pagination .page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.exchange-app .pagination .page-link:hover {
    color: var(--para-color);
    background: rgba(128, 128, 128, 0.16);
}

html.theme-dark .exchange-app .pagination .page-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Kill Bootstrap's default blue focus-ring glow on click/tab-focus. */
.exchange-app .pagination .page-link:focus {
    box-shadow: none;
}

/* Schedule / stat legacy cards */
.exchange-app .single-schedule-inner,
.exchange-app .single-currency-inner {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--para-color) !important;
}

.exchange-app .single-schedule-inner:before,
.exchange-app .single-schedule-inner:after {
    background: var(--body-bg) !important;
}

.exchange-app .single-schedule-inner p,
.exchange-app .single-schedule-inner h4,
.exchange-app .single-schedule-inner .time {
    color: var(--ex-text) !important;
}

.exchange-app .single-schedule-inner .schedule-right {
    border-left-color: var(--border-color) !important;
}

.exchange-app .single-schedule-inner .schedule-right h4,
.exchange-app .single-schedule-inner .schedule-right p {
    color: var(--ex-text) !important;
}

.exchange-app .single-schedule-inner .schedule-right a.bet_button {
    background: var(--ex-back) !important;
    background-image: none !important;
    border: 1px solid var(--ex-back) !important;
    border-color: var(--ex-back) !important;
    color: var(--ex-back-text) !important;
    padding: 0.375rem 0.5rem !important;
    border-radius: var(--theme-radius-chip, 4px);
    display: inline-block;
    min-width: 4.5rem;
    text-align: center;
    font-weight: 600;
    font-size: var(--theme-text-md, 0.8125rem);
}

.exchange-app .single-schedule-inner .schedule-right a.bet_button:hover {
    background: var(--ex-back-hover) !important;
    background-image: none !important;
    border-color: var(--ex-back-hover) !important;
    color: var(--ex-back-text) !important;
}

/* Plain text links in schedule cards (not odds / not buttons) */
.exchange-app .single-schedule-inner .schedule-right a:not(.bet_button):not(.btn) {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
    color: var(--color-primary) !important;
}

.exchange-app .single-schedule-inner .schedule-right a:not(.bet_button):not(.btn):hover {
    background: transparent !important;
    background-image: none !important;
    color: var(--color-primary-light) !important;
}

.exchange-app .schedule-area h5 {
    color: var(--h-color) !important;
}

.exchange-app .single-schedule-inner .btn,
.exchange-app .single-schedule-inner a.btn {
    background-image: none !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Bet slip / modals */
.exchange-app .modal-sport .modal-header,
.exchange-app .bet--model .modal-header:not(.ex-panel-head),
.exchange-app .modal-title-cust:not(.ex-panel-head) {
    background: var(--ex-surface-head) !important;
    color: var(--h-color) !important;
    border-color: var(--border-color) !important;
}

.exchange-app .modal-sport .modal-content,
.exchange-app .bet--model .modal-content {
    background: var(--card-bg) !important;
    color: var(--para-color) !important;
    border-color: var(--border-color) !important;
}

.exchange-app #betSlipDock.bet-slip-modal .modal-content.ex-betslip-shell {
    border-radius: var(--ex-panel-radius, 10px) !important;
    overflow: hidden !important;
}

.exchange-app .modal-sport .modal-footer,
.exchange-app .bet--model .modal-footer {
    border-color: var(--border-color) !important;
    background: var(--card-bg) !important;
}

/* WP6 CSS task — match rounded exchange controls; no hard black square outline */
.exchange-app .back-to-top {
    position: fixed !important;
    right: 1.25rem !important;
    bottom: 1.25rem !important;
    left: auto !important;
    z-index: 1080 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.75rem !important;
    height: 2.75rem !important;
    padding: 0 !important;
    border: none !important;
    border-radius: var(--theme-radius-pill, 999px) !important;
    outline: none !important;
    color: #fff !important;
    background: var(--theme-primary, var(--color-primary, #DD3E42)) !important;
    background-image: none !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18) !important;
    line-height: 1 !important;
    font-size: var(--theme-text-xl-plus, 1.125rem) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.exchange-app .back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.exchange-app .back-to-top .back-top,
.exchange-app .back-to-top i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: none !important;
    pointer-events: none;
}

.exchange-app .back-to-top:hover,
.exchange-app .back-to-top:focus-visible {
    background: var(--theme-btn-primary-hover, var(--color-primary-light, #DD3E42)) !important;
    border: none !important;
    outline: none !important;
    filter: none;
}

.exchange-app .back-to-top:focus-visible {
    box-shadow:
        0 0 0 2px var(--card-bg, #fff),
        0 0 0 4px var(--theme-primary, #DD3E42) !important;
}

@media (max-width: 991.98px) {
    .exchange-app .back-to-top {
        right: 0.75rem !important;
        bottom: calc(var(--ex-mobile-nav-h, 3.5rem) + 0.75rem) !important;
    }
}

/* Legacy page wrappers */
.exchange-app .bg-navy-2,
.exchange-app .signup-area {
    background: var(--body-bg) !important;
}

.exchange-app .contact-inner {
    color: var(--para-color);
}

.exchange-app .subtitle {
    color: var(--h-color) !important;
}

.exchange-app .color-base {
    color: var(--color-primary) !important;
}

/* ─── PWA install banner ─────────────────────────────────────────────────── */
/* WP4: sit above mobile bottom nav; push main content so odds are not covered */

html {
    --ex-pwa-install-space: 0px;
}

.exchange-app .ex-pwa-install {
    position: fixed;
    left: 0;
    right: 0;
    /* Clear sticky mobile bottom nav when present */
    bottom: var(--ex-mobile-nav-h, 0px);
    z-index: 1050;
    padding: 0.75rem max(0.75rem, env(safe-area-inset-right)) 0.75rem max(0.75rem, env(safe-area-inset-left));
    pointer-events: none;
}

.exchange-app .ex-pwa-install:not(.d-none) {
    pointer-events: auto;
}

/* Reserve space in the document flow while the fixed toast is visible */
html.ex-pwa-install-visible .exchange-app .ex-shell__main {
    padding-bottom: calc(
        var(--ex-pwa-install-space, 5.5rem) + var(--ex-mobile-nav-h, 0px) + 0.75rem
    ) !important;
}

/* Extra scroll room on phone so nudging can clear odds above the toast */
@media (max-width: 991.98px) {
    html.ex-pwa-install-visible .exchange-app .ex-shell__main {
        padding-bottom: calc(
            var(--ex-pwa-install-space, 5.5rem) + var(--ex-mobile-nav-h, 3.5rem) + 1.25rem
        ) !important;
    }

    html.ex-pwa-install-visible body.exchange-app {
        padding-bottom: calc(
            var(--ex-pwa-install-space, 5.5rem) + var(--ex-mobile-nav-h, 3.5rem)
        ) !important;
    }
}

.exchange-app .ex-pwa-install__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 36rem;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    border-radius: var(--ex-panel-radius, 10px);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    background: var(--card-bg, #fff);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}

.theme-dark .exchange-app .ex-pwa-install__inner {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45);
}

.exchange-app .ex-pwa-install__icon img {
    display: block;
    border-radius: var(--theme-radius-control, 8px);
}

.exchange-app .ex-pwa-install__body {
    flex: 1;
    min-width: 0;
}

.exchange-app .ex-pwa-install__title {
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: 600;
    color: var(--h-color, #1a1a2e);
}

.exchange-app .ex-pwa-install__text {
    font-size: var(--theme-text-sm, 0.75rem);
    color: var(--para-color, #74788d);
}

.exchange-app .ex-pwa-install__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.exchange-app .ex-pwa-install__btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.exchange-app .ex-pwa-install__btn--primary:hover {
    background: var(--color-primary-light, #5eb1f5);
    border-color: var(--color-primary-light, #5eb1f5);
    color: #fff;
}

.exchange-app .ex-pwa-install__btn--ghost {
    background: transparent;
    border: none;
    color: var(--para-color, #74788d);
    padding: 0.25rem 0.35rem;
    line-height: 1;
}

.exchange-app .ex-pwa-install__btn--ghost svg {
    width: 1.125rem;
    height: 1.125rem;
}

@media (max-width: 575.98px) {
    .exchange-app .ex-pwa-install__inner {
        flex-wrap: wrap;
    }

    .exchange-app .ex-pwa-install__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Header controls are unified to --ex-navbar-control-h / --ex-navbar-icon-size
   (44px / 20px) at every breakpoint, so no separate mobile touch-target bump
   is needed here anymore — see the token definitions on body.exchange-app. */

/* ─── White-on-brand prominence (keep #DD3E42 accent; deepen solid fills) ─ */
.exchange-app {
    --ex-on-brand-text: #FFFFFF;
    --ex-on-brand-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
    --ex-on-brand-icon-shadow: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* Primary buttons / solid brand chips with white label */
.exchange-app .btn-base,
.exchange-app .btn.btn-base,
.exchange-app .ex-news-search__btn,
.exchange-app .ex-sidebar-drawer-user__header,
.exchange-app .ex-sidebar-drawer-user__deposit:hover,
.exchange-app .ex-sidebar-drawer-user__deposit:focus-visible,
.exchange-app .ex-sidebar-drawer-user__deposit:active,
.exchange-app .ex-sidebar-drawer-user__logout:hover,
.exchange-app .ex-footer__age,
.exchange-app .ex-cms-empty__icon,
.exchange-app .ex-contact-info__icon,
.exchange-app .ex-footer__contact-icon,
.exchange-app .ex-about-doc__highlight-icon,
.exchange-app .ex-policy-doc__meta-icon,
.exchange-app .ex-policy-doc__nav-icon,
.exchange-app .ex-policy-doc__footer-icon {
    color: var(--theme-btn-primary-text, #FFFFFF) !important;
    -webkit-text-fill-color: var(--theme-btn-primary-text, #FFFFFF) !important;
    text-shadow: var(--ex-on-brand-shadow);
    -webkit-font-smoothing: antialiased;
}

.exchange-app .btn-base,
.exchange-app .btn.btn-base,
.exchange-app .ex-load-more-btn,
.exchange-app a.ex-load-more-btn,
.exchange-app button.ex-load-more-btn,
.exchange-app .ex-news-search__btn {
    font-weight: 700;
}

/* Load more: same cross-match as sidebar items */
html.theme-light .exchange-app .ex-load-more-btn,
.theme-light .exchange-app .ex-load-more-btn,
html.theme-light .exchange-app a.ex-load-more-btn,
html.theme-light .exchange-app button.ex-load-more-btn {
    background: var(--ex-sidebar-bg-dark, #111827) !important;
    color: #EEEEEE !important;
    -webkit-text-fill-color: #EEEEEE !important;
    text-shadow: none !important;
}

html.theme-dark .exchange-app .ex-load-more-btn,
.theme-dark .exchange-app .ex-load-more-btn,
html.theme-dark .exchange-app a.ex-load-more-btn,
html.theme-dark .exchange-app button.ex-load-more-btn {
    background: var(--ex-sidebar-bg-light, #FFFFFF) !important;
    color: var(--ex-sidebar-bg-dark, #111827) !important;
    -webkit-text-fill-color: var(--ex-sidebar-bg-dark, #111827) !important;
    text-shadow: none !important;
}

html.theme-light .exchange-app .ex-load-more-btn:hover,
html.theme-light .exchange-app .ex-load-more-btn:focus-visible,
html.theme-dark .exchange-app .ex-load-more-btn:hover,
html.theme-dark .exchange-app .ex-load-more-btn:focus-visible,
.theme-light .exchange-app .ex-load-more-btn:hover,
.theme-dark .exchange-app .ex-load-more-btn:hover,
html.theme-light .exchange-app a.ex-load-more-btn:hover,
html.theme-dark .exchange-app a.ex-load-more-btn:hover,
html.theme-light .exchange-app button.ex-load-more-btn:hover,
html.theme-dark .exchange-app button.ex-load-more-btn:hover {
    background: var(--ex-sidebar-accent, #DD3E42) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-shadow: none !important;
}

/* White glyphs on pink icon wells / active nav chips */
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.active > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.active > a i.nav-icon,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a .nav-icon,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list > li.active > a i.nav-icon,
.exchange-app .ex-mobile-nav__item.is-active .ex-mobile-nav__icon,
.exchange-app .ex-about-doc__highlight-icon svg,
.exchange-app .ex-contact-info__icon svg,
.exchange-app .ex-footer__contact-icon svg,
.exchange-app .ex-cms-empty__icon svg,
.exchange-app .ex-policy-doc__meta-icon svg,
.exchange-app .ex-policy-doc__nav-icon svg,
.exchange-app .ex-policy-doc__footer-icon svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

.exchange-app .ex-about-doc__highlight-icon svg,
.exchange-app .ex-contact-info__icon svg,
.exchange-app .ex-footer__contact-icon svg,
.exchange-app .ex-cms-empty__icon svg,
.exchange-app .ex-policy-doc__meta-icon svg,
.exchange-app .ex-policy-doc__nav-icon svg,
.exchange-app .ex-policy-doc__footer-icon svg {
    filter: var(--ex-on-brand-icon-shadow);
}

.exchange-app .ex-about-doc__highlight-icon svg *,
.exchange-app .ex-contact-info__icon svg *,
.exchange-app .ex-footer__contact-icon svg *,
.exchange-app .ex-cms-empty__icon svg *,
.exchange-app .ex-policy-doc__meta-icon svg *,
.exchange-app .ex-policy-doc__nav-icon svg *,
.exchange-app .ex-policy-doc__footer-icon svg * {
    stroke: #FFFFFF !important;
    fill: none !important;
}

/* Match detail uses the same surface ladder as home:
   section/page head → category/table head → MATCH subhead → market rows. */
html.theme-light .exchange-app .ex-match-detail-page .ex-event-summary,
html.theme-dark .exchange-app .ex-match-detail-page .ex-event-summary {
    background: var(--ex-surface-row, var(--ex-market-bg)) !important;
    background-color: var(--ex-surface-row, var(--ex-market-bg)) !important;
    border-color: var(--ex-border) !important;
}

html.theme-light .exchange-app .ex-match-detail-page .ex-match-header {
    background: var(--ex-surface-section-head) !important;
    background-color: var(--ex-surface-section-head) !important;
    color: var(--ex-schedule-section-head-text) !important;
    border-color: var(--ex-schedule-section-head-border) !important;
}

html.theme-dark .exchange-app .ex-match-detail-page .ex-match-header {
    background: var(--ex-surface-section-head) !important;
    background-color: var(--ex-surface-section-head) !important;
    color: var(--ex-schedule-section-head-text) !important;
    border-color: var(--ex-schedule-section-head-border) !important;
}

html.theme-light .exchange-app .ex-match-detail-page .ex-match-header__title {
    color: var(--ex-schedule-section-head-text) !important;
}

html.theme-dark .exchange-app .ex-match-detail-page .ex-match-header__title {
    color: var(--ex-schedule-section-head-text) !important;
}

html.theme-light .exchange-app .ex-match-detail-page .ex-match-header-details {
    color: color-mix(in srgb, var(--ex-schedule-section-head-text) 72%, transparent) !important;
}

html.theme-dark .exchange-app .ex-match-detail-page .ex-match-header-details {
    color: color-mix(in srgb, var(--ex-schedule-section-head-text) 78%, transparent) !important;
}

html.theme-light .exchange-app .ex-match-detail-page .ex-match-header-details :is(
    .ex-match-header-details__format,
    [data-live-score-home-strip],
    [data-live-score-away-strip],
    [data-live-status-detail]
) {
    color: var(--ex-schedule-section-head-text) !important;
}

html.theme-dark .exchange-app .ex-match-detail-page .ex-match-header-details :is(
    .ex-match-header-details__format,
    [data-live-score-home-strip],
    [data-live-score-away-strip],
    [data-live-status-detail]
) {
    color: var(--ex-schedule-section-head-text) !important;
}

/* Predict table hierarchy = home:
   category header → MATCH/1-X-2 sub-header → market rows. */
html.theme-light .exchange-app .ex-match-detail-page .ex-match-table-head {
    background: var(--ex-surface-category-head) !important;
    background-color: var(--ex-surface-category-head) !important;
    color: var(--ex-schedule-category-head-text) !important;
    border-bottom-color: var(--ex-schedule-category-head-border) !important;
}

html.theme-dark .exchange-app .ex-match-detail-page .ex-match-table-head {
    background: var(--ex-surface-category-head) !important;
    background-color: var(--ex-surface-category-head) !important;
    color: var(--ex-schedule-category-head-text) !important;
    border-bottom-color: var(--ex-schedule-category-head-border) !important;
}

html.theme-light .exchange-app .ex-match-detail-page .ex-match-table-subhead {
    background: var(--ex-surface-subhead) !important;
    background-color: var(--ex-surface-subhead) !important;
    color: var(--ex-text-strong) !important;
    border-bottom-color: var(--theme-match-list-columns-border, var(--ex-border)) !important;
}

html.theme-dark .exchange-app .ex-match-detail-page .ex-match-table-subhead {
    background: var(--ex-surface-subhead) !important;
    background-color: var(--ex-surface-subhead) !important;
    color: var(--ex-text-strong) !important;
    border-bottom-color: var(--theme-match-list-columns-border, var(--ex-border)) !important;
}

html.theme-light .exchange-app .ex-match-detail-page .ex-match-table-head .ex-inplay-group__name {
    color: var(--ex-schedule-category-head-text) !important;
}

html.theme-light .exchange-app .ex-match-detail-page .ex-match-table-subhead :is(
    .ex-indibet-list__match-hd,
    .ex-indibet-list__outcome-label,
    .ex-indibet-list__outcome-sublabel
) {
    color: var(--ex-text-strong) !important;
}

html.theme-dark .exchange-app .ex-match-detail-page .ex-match-table-head .ex-inplay-group__name {
    color: var(--ex-schedule-category-head-text) !important;
}

html.theme-dark .exchange-app .ex-match-detail-page .ex-match-table-subhead :is(
    .ex-indibet-list__match-hd,
    .ex-indibet-list__outcome-label,
    .ex-indibet-list__outcome-sublabel
) {
    color: var(--ex-text-strong) !important;
}

/* Scoreboard chrome — same home table header / MATCH subhead surfaces. */
html.theme-light .exchange-app .ex-match-detail-page .ex-premium-score__top {
    background: var(--ex-surface-category-head) !important;
    background-color: var(--ex-surface-category-head) !important;
    color: var(--ex-schedule-category-head-text) !important;
    border-bottom-color: var(--ex-schedule-category-head-border) !important;
}

html.theme-dark .exchange-app .ex-match-detail-page .ex-premium-score__top {
    background: var(--ex-surface-category-head) !important;
    background-color: var(--ex-surface-category-head) !important;
    color: var(--ex-schedule-category-head-text) !important;
    border-bottom-color: var(--ex-schedule-category-head-border) !important;
}

html.theme-light .exchange-app .ex-match-detail-page .ex-premium-score__brand {
    background: var(--ex-surface-subhead) !important;
    background-color: var(--ex-surface-subhead) !important;
    border-bottom-color: var(--theme-match-list-columns-border, var(--ex-border)) !important;
    color: var(--ex-text-strong) !important;
}

html.theme-dark .exchange-app .ex-match-detail-page .ex-premium-score__brand {
    background: var(--ex-surface-subhead) !important;
    background-color: var(--ex-surface-subhead) !important;
    border-bottom-color: var(--theme-match-list-columns-border, var(--ex-border)) !important;
    color: var(--ex-text-strong) !important;
}

/* Scorecard section = home section head; bands/thead = MATCH subhead. */
html.theme-light .exchange-app .ex-match-detail-page .ex-cricket-scorecard__section-head {
    background: var(--ex-surface-section-head) !important;
    background-color: var(--ex-surface-section-head) !important;
    color: var(--ex-schedule-section-head-text) !important;
    border-bottom-color: var(--ex-schedule-section-head-border) !important;
}

html.theme-dark .exchange-app .ex-match-detail-page .ex-cricket-scorecard__section-head {
    background: var(--ex-surface-section-head) !important;
    background-color: var(--ex-surface-section-head) !important;
    color: var(--ex-schedule-section-head-text) !important;
    border-bottom-color: var(--ex-schedule-section-head-border) !important;
}

html.theme-light .exchange-app .ex-match-detail-page :is(
    .ex-cricket-scorecard__col-head th,
    .ex-inline-pulse__head,
    .ex-inline-pulse__over,
    .ex-match-detail-media__head,
    .ex-open-bets__cols
) {
    background: var(--ex-surface-subhead) !important;
    background-color: var(--ex-surface-subhead) !important;
    border-bottom-color: var(--theme-match-list-columns-border) !important;
}

html.theme-dark .exchange-app .ex-match-detail-page :is(
    .ex-cricket-scorecard__col-head th,
    .ex-inline-pulse__head,
    .ex-inline-pulse__over,
    .ex-match-detail-media__head,
    .ex-open-bets__cols
) {
    background: var(--ex-surface-subhead) !important;
    background-color: var(--ex-surface-subhead) !important;
    border-bottom-color: var(--theme-match-list-columns-border) !important;
    color: var(--ex-text-strong) !important;
}

html.theme-light .exchange-app .ex-match-detail-page .ex-cricket-scorecard__part-head th,
html.theme-dark .exchange-app .ex-match-detail-page .ex-cricket-scorecard__part-head th {
    background: var(--ex-surface-category-head) !important;
    background-color: var(--ex-surface-category-head) !important;
    color: var(--ex-schedule-category-head-text) !important;
    border-bottom-color: var(--ex-schedule-category-head-border) !important;
}

/* Open bets header — section rung (global rules below wrongly use category / surface-head). */
html.theme-light .exchange-app .ex-match-detail-page .ex-open-bets__header,
html.theme-dark .exchange-app .ex-match-detail-page .ex-open-bets__header {
    background: var(--ex-surface-section-head) !important;
    background-color: var(--ex-surface-section-head) !important;
    color: var(--ex-schedule-section-head-text) !important;
    border-bottom: 1px solid var(--ex-schedule-section-head-border) !important;
}

/* Compact market titles = MATCH subhead (not classic table-head). */
html.theme-light .exchange-app .ex-match-detail-page :is(
    .ex-indian-grid__market-title,
    .ex-market--compact-detail .ex-market__header
),
html.theme-dark .exchange-app .ex-match-detail-page :is(
    .ex-indian-grid__market-title,
    .ex-market--compact-detail .ex-market__header
) {
    background: var(--ex-surface-subhead) !important;
    background-color: var(--ex-surface-subhead) !important;
    border-bottom-color: var(--theme-match-list-columns-border) !important;
    color: var(--ex-text-strong) !important;
}

/* Rows stay on ladder — do not inherit card-bg from global dark market rules. */
html.theme-dark .exchange-app .ex-match-detail-page :is(
    .ex-market,
    .ex-open-bets,
    .ex-match-detail-ledger
) {
    background: var(--ex-surface-row) !important;
    background-color: var(--ex-surface-row) !important;
}

html.theme-dark .exchange-app .ex-match-detail-page .ex-indibet-list__columns {
    background: var(--ex-surface-subhead) !important;
    background-color: var(--ex-surface-subhead) !important;
    border-bottom: 1px solid var(--theme-match-list-columns-border) !important;
}

/* ===== exchange-typography.css ===== */
/**
 * BigPlay — Applied Typography Layer (WP02)
 * Load AFTER theme.bundle.css + exchange-theme.css.
 * Consumes --theme-text-* / --theme-type-* / --theme-weight-* only.
 * Canonical scale: 11 / 12 / 13 / 14 / 16 / 18 / 24 · weights ≤ 700.
 */

/* ── App base ───────────────────────────────────────────────────────────── */
.exchange-app,
body.exchange-app,
html.theme-light .exchange-app,
html.theme-dark .exchange-app {
  font-family: var(--theme-font-sans, "Inter", system-ui, sans-serif);
  font-size: var(--theme-text-base, 0.875rem);
  line-height: var(--theme-leading-body, 1.45);
  font-weight: var(--theme-weight-regular, 400);
  font-feature-settings: var(--theme-font-features, "cv11", "ss01");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hard cap: no chrome louder than odds/CTA bold */
.exchange-app {
  --theme-weight-extrabold: var(--theme-weight-bold, 700);
  --theme-weight-black: var(--theme-weight-bold, 700);
}

/* ── Trading roles ──────────────────────────────────────────────────────── */
.exchange-app .ex-indibet-row__team,
.exchange-app .ex-indibet-row__vs,
.exchange-app .ex-match-row__team,
.exchange-app .ex-fixture-row__team {
  font-size: var(--theme-type-team-size, var(--theme-text-md, 0.8125rem));
  font-weight: var(--theme-type-team-weight, var(--theme-weight-semibold, 600));
  line-height: var(--theme-leading-snug, 1.25);
  letter-spacing: 0;
}

.exchange-app .ex-price__value,
.exchange-app .ex-odds-cell__value,
.exchange-app .ex-indibet-outcome .ex-price__value {
  font-size: var(--theme-type-odds-size, var(--theme-text-md, 0.8125rem));
  font-weight: var(--theme-type-odds-weight, var(--theme-weight-bold, 700));
  line-height: var(--theme-leading-tight, 1.1);
  letter-spacing: var(--theme-type-odds-tracking, -0.01em);
  font-variant-numeric: tabular-nums;
}

.exchange-app .ex-price__size,
.exchange-app .ex-odds-cell__size,
.exchange-app .ex-indibet-outcome .ex-price__size {
  font-size: var(--theme-type-odds-size-liquidity, var(--theme-text-xs, 0.6875rem));
  font-weight: var(--theme-weight-medium, 500);
  line-height: var(--theme-leading-snug, 1.25);
}

.exchange-app .ex-inplay-group__name,
.exchange-app .ex-league-header,
.exchange-app .ex-group-head__title {
  font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem));
  font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
  letter-spacing: var(--theme-type-league-tracking, 0);
  line-height: var(--theme-leading-snug, 1.25);
}

/* MATCH column micro-label — below team (13), not league role */
.exchange-app .ex-indibet-list__match-hd,
.exchange-app .ex-indibet-list__match-hd-text {
  font-size: var(--theme-text-sm, 0.75rem);
  font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
  letter-spacing: 0.05em;
  line-height: 1;
}

/* Match meta hierarchy — secondary to teams/odds */
.exchange-app .ex-indibet-row__meta,
.exchange-app .ex-indibet-row__time,
.exchange-app .ex-indibet-row__flag,
.exchange-app .ex-match-meta,
.exchange-app .ex-fixture-meta {
  font-size: var(--theme-type-caption-size, var(--theme-text-sm, 0.75rem));
  font-weight: var(--theme-weight-medium, 500);
  line-height: var(--theme-leading-snug, 1.25);
  letter-spacing: 0.01em;
}

.exchange-app .ex-badge,
.exchange-app .ex-chip {
  font-size: var(--theme-type-badge-size, var(--theme-text-sm, 0.75rem));
  font-weight: var(--theme-type-badge-weight, var(--theme-weight-semibold, 600));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Row flags / LIVE micro-labels owned by exchange-badges.css (10px, not type-badge) */

/* Buttons / nav */
.exchange-app .btn-base,
.exchange-app .ex-btn,
.exchange-app .ex-load-more-btn,
.exchange-app .ex-promo-html__cta,
.exchange-app .ex-betslip__place,
.exchange-app .ex-place-bet {
  font-size: var(--theme-type-button-size, var(--theme-text-base, 0.875rem));
  font-weight: var(--theme-type-button-weight, var(--theme-weight-semibold, 600));
  letter-spacing: 0;
}

.exchange-app .ex-mobile-nav__label,
.exchange-app .ex-nav-label,
.exchange-app .ex-cats__label {
  font-size: var(--theme-type-nav-size, var(--theme-text-sm, 0.75rem));
  font-weight: var(--theme-type-nav-weight, var(--theme-weight-medium, 500));
  letter-spacing: 0.01em;
}

/* Sidebar sections — capped at 700 (WP02) */
.exchange-app .ex-sidebar__section-toggle,
.exchange-app .ex-sidebar-section__title,
.exchange-app .ex-s7-section-title {
  font-size: var(--theme-text-md, 0.8125rem);
  font-weight: var(--theme-weight-bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Tables */
.exchange-app table th,
.exchange-app .ex-table__head,
.exchange-app .ex-account-table th {
  font-size: var(--theme-type-table-head-size, var(--theme-text-md, 0.8125rem));
  font-weight: var(--theme-type-table-head-weight, var(--theme-weight-bold, 700));
  letter-spacing: var(--theme-type-table-head-tracking, 0.04em);
}

/* Money / balances */
.exchange-app .ex-money,
.exchange-app .ex-balance,
.exchange-app .ex-account-dd__balance {
  font-weight: var(--theme-type-money-weight, var(--theme-weight-bold, 700));
  font-variant-numeric: tabular-nums;
}

/* ===== exchange-spacing.css ===== */
/**
 * BigPlay — Applied Spacing Layer (WP03)
 * Load AFTER theme.bundle.css + exchange-theme.css (+ typography).
 * Canonical scale: 4 / 8 / 12 / 16 / 24 / 32 (+ dense/micro exceptions).
 */

/* ── Alias bridge: legacy --ex-* → theme roles ──────────────────────────── */
.exchange-app {
  --ex-shell-gap: var(--theme-space-shell-gap, 0.75rem);
  --ex-site-header-gap: var(--theme-space-header-gap, 0.25rem);
  --ex-navbar-item-gap: var(--theme-space-3, 0.75rem);
  --ex-group-gap: var(--theme-space-group-gap, 0.5rem);
  --ex-strip-gap: var(--theme-space-strip-gap, 0.25rem);
  --ex-account-main-gap: var(--theme-space-account-main, 1rem);
  --ex-xch-gap: var(--theme-space-odds-gap, 0.25rem);
}

/* ── Page containers ────────────────────────────────────────────────────── */
.exchange-app .container,
.exchange-app .container-fluid {
  padding-left: var(--theme-space-page-x, 0.75rem);
  padding-right: var(--theme-space-page-x, 0.75rem);
}

.exchange-app .container-sub {
  padding-inline: var(--theme-space-account-panel, 1.25rem);
}

/* ── Shell grid ─────────────────────────────────────────────────────────── */
.exchange-app .ex-shell {
  gap: var(--ex-shell-gap, var(--theme-space-shell-gap, 0.75rem));
  padding-block: var(--theme-space-shell-pad-y, 0.5rem) var(--theme-space-4, 1rem);
}

/* Home dense: tighter columns, keep markets high in fold */
body.ex-home-dense .ex-shell {
  --ex-shell-gap: var(--theme-space-shell-gap-dense, 0.5rem);
  padding-block: var(--theme-space-1, 0.25rem) var(--theme-space-2, 0.5rem);
}

/* ── League / in-play groups ────────────────────────────────────────────── */
.exchange-app .ex-inplay-group + .ex-inplay-group {
  margin-top: var(--theme-space-group-gap, 0.5rem);
}

.exchange-app .ex-inplay-group {
  margin-bottom: var(--theme-space-group-gap, 0.5rem);
}

/* Event stack inside groups */
.exchange-app .ex-inplay-group__list .ex-event {
  margin-bottom: var(--theme-space-row-gap, 0.25rem);
}

.exchange-app .ex-inplay-group__list .ex-event:last-child {
  margin-bottom: 0;
}

/* ── Odds column gutters ────────────────────────────────────────────────── */
.exchange-app .ex-inplay-group__list--indibet {
  --ex-xch-gap: var(--theme-space-odds-gap, 0.25rem);
}

/* Mobile: flush Back|Draw|Lay — must beat this file’s .exchange-app specificity */
@media (max-width: 991.98px) {
  .exchange-app .ex-inplay-group__list--indibet {
    --ex-xch-gap: 0;
  }
}

/* ── Schedule / category strips ─────────────────────────────────────────── */
.exchange-app .ex-live-cat-strip,
.exchange-app .ex-results-cat-strip,
.exchange-app .ex-schedule-subnav,
.exchange-app .ex-personalization-strip {
  margin-block: var(--theme-space-strip-gap, 0.25rem);
}

.exchange-app .ex-header-cats {
  padding-block: var(--theme-space-strip-gap, 0.25rem);
}

/* ── Account: tabs → content = 16px ─────────────────────────────────────── */
.exchange-user-layout .ex-shell__main,
.exchange-account-layout .ex-shell__main {
  gap: var(--ex-account-main-gap, var(--theme-space-account-main, 1rem));
  padding-bottom: var(--theme-space-2, 0.5rem);
}

.exchange-account-layout .ex-shell__main > .ex-subnav-tabs,
.exchange-account-layout .ex-shell__main > .ex-money-section__tabs,
.exchange-account-layout .ex-shell__main > .ex-account-section__tabs {
  margin-bottom: 0;
  padding-top: var(--theme-space-dense, 0.25rem);
  padding-inline: var(--theme-space-4, 1rem);
}

.exchange-account-layout .ex-shell__main > .ex-subnav-tabs + .ex-user-panel,
.exchange-account-layout .ex-shell__main > .ex-money-section__tabs + .ex-user-panel,
.exchange-account-layout .ex-shell__main > .ex-subnav-tabs + .ex-money-section,
.exchange-account-layout .ex-shell__main > .ex-money-section__tabs + .ex-money-section,
.exchange-account-layout .ex-shell__main > .ex-account-section__tabs + .ex-account-section,
.exchange-account-layout .ex-shell__main > .ex-subnav-tabs + .ex-account-section {
  padding-block: var(--theme-space-account-panel, 1.25rem) var(--theme-space-6, 1.5rem);
}

/* ── Fold clearance under sticky header ─────────────────────────────────── */
.exchange-app .ex-shell__betstrip {
  top: calc(
    var(--ex-site-header-height, 7.5rem) + var(--ex-site-header-gap, var(--theme-space-header-gap, 0.25rem))
  );
}

/* ── Footer / section breathing room ────────────────────────────────────── */
.exchange-app .ex-footer,
body.ex-home-dense .ex-home-trading-page > .ex-footer {
  margin-top: var(--theme-space-section, 1.5rem);
}

/* ===== exchange-radius.css ===== */
/**
 * BigPlay — Applied Radius / Border / Elevation (WP04)
 * Load AFTER theme.bundle + exchange-theme (+ typography/spacing).
 * Vocabulary: none · chip(4) · control/panel(8) · pill(999)
 */

/* ── Alias bridge ───────────────────────────────────────────────────────── */
.exchange-app {
  --ex-panel-radius: var(--theme-radius-panel, 8px);
  --ex-xch-radius: var(--theme-radius-odds, 0);
  --ex-shadow: var(--theme-shadow-sm, var(--theme-shadow-level-1));
  --ex-shadow-raised: var(--theme-shadow-md, var(--theme-shadow-level-2));
  --ex-shadow-float: var(--theme-shadow-lg, var(--theme-shadow-level-3));
  --ex-account-dd-radius: var(--theme-radius-panel, 8px);
}

/* ── Panels / cards ─────────────────────────────────────────────────────── */
.exchange-app .ex-user-panel,
.exchange-app .ex-account-section,
.exchange-app .ex-money-section,
.exchange-app .ex-dashboard-page,
.exchange-app .ex-inplay-tile,
.exchange-app .ex-panel,
.exchange-app .ex-auth-card,
.exchange-app .ex-login-wall__card .card {
  border-radius: var(--theme-radius-panel, 8px);
}

.exchange-app .ex-shell__main > .ex-subnav-tabs,
.exchange-app .ex-shell__main > .ex-money-section__tabs,
.exchange-app .ex-shell__main > .ex-account-section__tabs {
  border-radius: var(--theme-radius-panel, 8px) var(--theme-radius-panel, 8px) 0 0;
}

.exchange-app .ex-shell__main > .ex-subnav-tabs + .ex-user-panel,
.exchange-app .ex-shell__main > .ex-money-section__tabs + .ex-user-panel,
.exchange-app .ex-shell__main > .ex-subnav-tabs + .ex-money-section,
.exchange-app .ex-shell__main > .ex-money-section__tabs + .ex-money-section,
.exchange-app .ex-shell__main > .ex-account-section__tabs + .ex-account-section,
.exchange-app .ex-shell__main > .ex-subnav-tabs + .ex-account-section {
  border-radius: 0 0 var(--theme-radius-panel, 8px) var(--theme-radius-panel, 8px);
}

/* ── Controls / chips / pills ───────────────────────────────────────────── */
.exchange-app .btn-base,
.exchange-app .ex-btn,
.exchange-app .ex-load-more-btn,
.exchange-app .ex-promo-html__cta,
.exchange-app input.form-control,
.exchange-app select.form-control,
.exchange-app .form-control,
.exchange-app .ex-input {
  border-radius: var(--theme-radius-control, 8px);
}

.exchange-app .ex-chip,
.exchange-app .ex-badge:not(.ex-badge--pill),
.exchange-app .ex-indibet-row__flag,
.exchange-app .ex-live-badge,
.exchange-app .ex-inplay-group__count {
  border-radius: var(--theme-radius-chip, 4px);
}

.exchange-app .ex-badge--pill,
.exchange-app .ex-pill,
.exchange-app .ex-sidebar__section-toggle,
.exchange-app .nav-pills .nav-link {
  border-radius: var(--theme-radius-pill, 999px);
}

/* ── Odds cells: sharp + flat (enterprise exchange) ─────────────────────── */
.exchange-app .ex-inplay-group__list--indibet {
  --ex-xch-radius: var(--theme-radius-odds, 0);
}

.exchange-app .ex-price,
.exchange-app .ex-indibet-outcome .ex-price,
.exchange-app .ex-indibet-outcome > a.ex-price,
.exchange-app a.ex-price,
.exchange-app .ex-odds-cell,
.exchange-app .ex-ladder .ex-price {
  border-radius: var(--theme-radius-odds, 0) !important;
  box-shadow: none;
}

/* Keep selected / focus rings — not soft elevation */
.exchange-app .ex-price:focus-visible,
.exchange-app .ex-price.is-selected,
.exchange-app .ex-price.ex-price--selected {
  box-shadow: inset 0 0 0 2px var(--theme-primary, #DD3E42);
}

/* Ladder continuous grids stay square */
.exchange-app .ex-ladder,
.exchange-app .ex-ladder .ex-price {
  border-radius: 0 !important;
}

/* ── Elevation roles ────────────────────────────────────────────────────── */
.exchange-app .ex-dropdown-menu,
.exchange-app .ex-account-dd,
.exchange-app .dropdown-menu {
  box-shadow: var(--ex-shadow-float, var(--theme-shadow-lg));
  border-radius: var(--theme-radius-panel, 8px);
}

.exchange-app .ex-inplay-group,
.exchange-app .ex-market-panel {
  box-shadow: none;
  border: 1px solid var(--ex-border, var(--theme-border-default));
}

/* ===== exchange-theme-parity.css ===== */
/**
 * BigPlay — Theme Parity Layer (WP05)
 * Load AFTER theme.bundle + exchange-theme (+ type/space/radius).
 * Ensures light/dark share roles; Back/Lay immutable; flags not color-only.
 */

/* ── Odds aliases stay theme-driven (never theme-wash Back/Lay) ──────────── */
.exchange-app {
  --ex-back: var(--theme-odds-back, var(--bp-back));
  --ex-back-hover: var(--theme-odds-back-hover, var(--bp-back-hover));
  --ex-back-text: var(--theme-odds-back-text, var(--bp-odds-ink));
  --ex-lay: var(--theme-odds-lay, var(--bp-lay));
  --ex-lay-hover: var(--theme-odds-lay-hover, var(--bp-lay-hover));
  --ex-lay-text: var(--theme-odds-lay-text, var(--bp-odds-ink));
  --ex-draw: var(--theme-odds-draw, var(--bp-draw));
  --ex-draw-hover: var(--theme-odds-draw-hover, var(--bp-draw-hover));
  --ex-draw-text: var(--theme-odds-draw-text, var(--bp-odds-ink));
}

/* ── Global keyboard focus (auth + chrome) ──────────────────────────────── */
.exchange-app a:focus-visible,
.exchange-app button:focus-visible,
.exchange-app [role="button"]:focus-visible,
.exchange-app input:focus-visible,
.exchange-app select:focus-visible,
.exchange-app textarea:focus-visible,
.exchange-app .ex-price:focus-visible,
.exchange-app .nav-link:focus-visible {
  outline: var(--theme-focus-ring-width, 2px) solid var(--theme-focus-ring, var(--bp-orange-400));
  outline-offset: var(--theme-focus-offset, 2px);
}

/* ── Account / shell surfaces — always semantic (dark parity) ───────────── */
html.theme-dark .exchange-account-layout .ex-shell__main > .ex-user-panel,
html.theme-dark .exchange-account-layout .ex-shell__main > .ex-money-section,
html.theme-dark .exchange-account-layout .ex-shell__main > .ex-account-section,
html.theme-dark .exchange-account-layout .ex-shell__main > .ex-dashboard-page,
html.theme-dark .exchange-account-layout .ex-shell__main > .ex-trading-page,
.theme-dark .exchange-account-layout .ex-shell__main > .ex-user-panel,
.theme-dark .exchange-account-layout .ex-shell__main > .ex-money-section,
.theme-dark .exchange-account-layout .ex-shell__main > .ex-account-section,
.theme-dark .exchange-account-layout .ex-shell__main > .ex-dashboard-page,
.theme-dark .exchange-account-layout .ex-shell__main > .ex-trading-page {
  background: var(--theme-bg-market, var(--ex-market-bg));
  border-color: var(--theme-border-default, var(--ex-border));
  color: var(--theme-text-body, var(--ex-text));
}

html.theme-dark .exchange-account-layout .ex-table thead th,
.theme-dark .exchange-account-layout .ex-table thead th {
  background: var(--theme-table-head-bg);
  color: var(--theme-text-strong);
  border-color: var(--theme-table-border);
}

html.theme-dark .exchange-account-layout .form-control,
html.theme-dark .exchange-account-layout .form-select,
.theme-dark .exchange-account-layout .form-control,
.theme-dark .exchange-account-layout .form-select {
  background: var(--theme-input-bg);
  color: var(--theme-input-text);
  border-color: var(--theme-input-border);
}

html.theme-dark .exchange-account-layout .form-control:focus,
html.theme-dark .exchange-account-layout .form-select:focus,
.theme-dark .exchange-account-layout .form-control:focus,
.theme-dark .exchange-account-layout .form-select:focus {
  border-color: var(--theme-input-focus-border, var(--theme-primary, #DD3E42));
  outline: none;
  box-shadow: 0 0 0 1px var(--theme-primary, #DD3E42);
}

/* ── BM / F / GL flags — label text already present; add pattern cues ────── */
.exchange-app .ex-indibet-row__flag--bm.is-on,
.exchange-app .ex-indibet-row__flag--fancy.is-on,
.exchange-app .ex-indibet-row__flag--gl.is-on {
  background: var(--theme-flag-on-bg, #006400);
  color: var(--theme-flag-on-text, #FFFFFF);
  opacity: 1;
  filter: none;
}

.exchange-app .ex-indibet-row__flag--bm.is-off,
.exchange-app .ex-indibet-row__flag--fancy.is-off,
.exchange-app .ex-indibet-row__flag--gl.is-off {
  background: var(--theme-flag-off-bg);
  color: var(--theme-flag-off-text);
}

/* Distinct non-color cues when ON (color-blind safe) — BM stays regular weight */
.exchange-app .ex-indibet-row__flag--bm.is-on {
  box-shadow: var(--theme-flag-bm-accent, none);
  font-weight: var(--theme-weight-regular, 400);
}

.exchange-app .ex-indibet-row__flag--fancy.is-on {
  box-shadow: var(--theme-flag-fancy-accent, none);
}

.exchange-app .ex-indibet-row__flag--gl.is-on {
  box-shadow: var(--theme-flag-gl-accent);
}

/* Ensure glyph/label never relies on fill alone */
.exchange-app .ex-indibet-row__flag--bm,
.exchange-app .ex-indibet-row__flag--fancy,
.exchange-app .ex-indibet-row__flag--gl {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ── Section / page canvas parity ───────────────────────────────────────── */
html.theme-dark .exchange-app,
.theme-dark .exchange-app {
  background: var(--theme-bg-page);
  color: var(--theme-text-body);
}

html.theme-light .exchange-app,
.theme-light .exchange-app {
  background: var(--theme-bg-page);
  color: var(--theme-text-body);
}

/* ===== exchange-controls.css ===== */
/**
 * BigPlay — Buttons & Form Controls (WP08)
 * Load AFTER theme.bundle + exchange-theme (+ typography/spacing/radius/parity).
 * Heights: primary/input 40 · secondary 36 · compact 32 · chrome 48
 */

/* ── Shared control contract ────────────────────────────────────────────── */
.exchange-app {
  --ex-ctrl-h-sm: var(--theme-control-height-sm, 32px);
  --ex-ctrl-h-secondary: var(--theme-control-height-secondary, 36px);
  --ex-ctrl-h-primary: var(--theme-control-height-primary, 40px);
  --ex-ctrl-h-lg: var(--theme-control-height-lg, 48px);
  --ex-ctrl-pad-x: var(--theme-space-4, 1rem); /* 16px */
  --ex-ctrl-pad-y: var(--theme-space-2, 0.5rem); /* 8px */
  --ex-ctrl-radius: var(--theme-radius-control, 8px);
  --ex-ctrl-fs: var(--theme-type-button-size, var(--theme-text-base, 0.875rem));
  --ex-ctrl-fw: var(--theme-type-button-weight, var(--theme-weight-semibold, 600));
}

/* ── Primary CTA (Sign In, Deposit-style solid, Place Bet) ──────────────── */
.exchange-app .btn-base,
.exchange-app .btn.btn-primary,
.exchange-app .ex-btn--primary,
.exchange-app .ex-auth-form .btn-base,
.exchange-app.ex-login-wall .btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ex-ctrl-h-primary);
  height: auto;
  padding: var(--ex-ctrl-pad-y) var(--ex-ctrl-pad-x);
  border-radius: var(--ex-ctrl-radius);
  font-size: var(--ex-ctrl-fs);
  font-weight: var(--ex-ctrl-fw);
  line-height: 1.2;
  letter-spacing: 0;
  box-sizing: border-box;
}

.exchange-app .btn-base:focus-visible,
.exchange-app .btn.btn-primary:focus-visible,
.exchange-app .ex-btn--primary:focus-visible {
  outline: var(--theme-focus-ring-width, 2px) solid var(--theme-focus-ring, var(--bp-orange-400));
  outline-offset: var(--theme-focus-offset, 2px);
}

/* ── Secondary CTA (Load more, filter Search, Promo) ────────────────────── */
.exchange-app .ex-load-more-btn,
.exchange-app a.ex-load-more-btn,
.exchange-app button.ex-load-more-btn,
.exchange-app .ex-promo-html__cta,
.exchange-app .btn-base.btn-secondary,
.exchange-app .ex-btn--secondary {
  min-height: var(--ex-ctrl-h-secondary);
  padding: 0.4rem var(--ex-ctrl-pad-x);
  font-size: var(--ex-ctrl-fs);
  font-weight: var(--theme-weight-bold, 700);
  box-sizing: border-box;
}

.exchange-app .ex-load-more-btn:focus-visible,
.exchange-app .ex-promo-html__cta:focus-visible {
  outline: var(--theme-focus-ring-width, 2px) solid var(--theme-focus-ring, var(--bp-orange-400));
  outline-offset: var(--theme-focus-offset, 2px);
}

/* ── Compact (favorite) ─────────────────────────────────────────────────── */
.exchange-app .ex-match-favorite,
.exchange-app .ex-favorite-btn,
.exchange-app button.ex-indibet-row__favorite {
  min-height: var(--ex-ctrl-h-sm);
  min-width: var(--ex-ctrl-h-sm);
  width: var(--ex-ctrl-h-sm);
  height: var(--ex-ctrl-h-sm);
}

/* ── Text inputs / selects ──────────────────────────────────────────────── */
.exchange-app .form-control,
.exchange-app .form-select,
.exchange-app select.form-control,
.exchange-app input.form-control:not([type="checkbox"]):not([type="radio"]),
.exchange-app .ex-input,
.exchange-account-layout .form-control,
.exchange-account-layout .form-select {
  min-height: var(--ex-ctrl-h-primary);
  height: auto;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ex-ctrl-radius);
  border: 1px solid var(--theme-input-border, var(--ex-border));
  background: var(--theme-input-bg, var(--ex-surface-raised));
  color: var(--theme-input-text, var(--ex-text-strong));
  font-size: var(--theme-text-base, 0.875rem);
  font-weight: var(--theme-weight-regular, 400);
  line-height: 1.25;
  box-sizing: border-box;
}

.exchange-app .form-control:focus-visible,
.exchange-app .form-select:focus-visible,
.exchange-account-layout .form-control:focus-visible,
.exchange-account-layout .form-select:focus-visible {
  outline: var(--theme-focus-ring-width, 2px) solid var(--theme-focus-ring, var(--bp-orange-400));
  outline-offset: var(--theme-focus-offset, 2px);
  border-color: var(--theme-input-focus-border, var(--theme-primary));
  box-shadow: none;
}

.exchange-app textarea.form-control {
  min-height: calc(var(--ex-ctrl-h-primary) * 2.5);
  height: auto;
}

/* ── Bet slip: Place Bet + stake field ──────────────────────────────────── */
.exchange-app #betSlipDock .ex-betslip-place,
.exchange-app #betSlipDock .ex-betslip-place.btn-base {
  min-height: var(--ex-ctrl-h-primary) !important;
  height: var(--ex-ctrl-h-primary) !important;
  max-height: var(--ex-ctrl-h-primary) !important;
  padding-inline: var(--ex-ctrl-pad-x) !important;
  font-size: var(--theme-text-base, 0.875rem) !important;
  font-weight: var(--theme-weight-bold, 700) !important;
}

.exchange-app #betSlipDock .ex-betslip-stake-block__input,
.exchange-app #betSlipDock .ex-betslip-vue .form-input,
.exchange-app .ex-betslip-stake-block__input {
  min-height: var(--ex-ctrl-h-primary) !important;
  height: var(--ex-ctrl-h-primary) !important;
  font-size: var(--theme-text-base, 0.875rem) !important;
  font-variant-numeric: tabular-nums;
}

.exchange-app #betSlipDock .ex-betslip-stake-step {
  flex-basis: var(--ex-ctrl-h-primary);
  min-width: var(--ex-ctrl-h-primary);
}

.exchange-app #betSlipDock .ex-betslip-stake-block__input-wrap {
  min-height: var(--ex-ctrl-h-primary);
  border-radius: var(--ex-ctrl-radius);
}

.exchange-app #betSlipDock .ex-betslip-place:focus-visible,
.exchange-app #betSlipDock .ex-betslip-stake-block__input:focus-visible,
.exchange-app #betSlipDock .ex-betslip-stake-step:focus-visible {
  outline: var(--theme-focus-ring-width, 2px) solid var(--theme-focus-ring, var(--bp-orange-400));
  outline-offset: 0;
}

/* ── Exchange checkboxes / radios ───────────────────────────────────────── */
.exchange-app .form-check-input,
.exchange-app input[type="checkbox"]:not(.switch input):not(#ex-theme-slider),
.exchange-app input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  border: 1.5px solid var(--theme-input-border, var(--ex-border));
  background-color: var(--theme-input-bg, var(--ex-surface-raised));
  accent-color: var(--theme-primary, #DD3E42);
  vertical-align: middle;
  cursor: pointer;
}

.exchange-app input[type="checkbox"]:not(.switch input):not(#ex-theme-slider) {
  border-radius: var(--theme-radius-chip, 4px);
}

.exchange-app input[type="radio"] {
  border-radius: var(--theme-radius-pill, 999px);
}

.exchange-app .form-check-input:focus-visible,
.exchange-app input[type="checkbox"]:focus-visible,
.exchange-app input[type="radio"]:focus-visible {
  outline: var(--theme-focus-ring-width, 2px) solid var(--theme-focus-ring, var(--bp-orange-400));
  outline-offset: 2px;
}

.exchange-app .form-check-label,
.exchange-app .ex-check-label {
  font-size: var(--theme-text-base, 0.875rem);
  color: var(--theme-text-body, var(--ex-text));
  cursor: pointer;
}

/* ── Inline error atom ──────────────────────────────────────────────────── */
.exchange-app .ex-field-error,
.exchange-app .invalid-feedback,
.exchange-account-layout .invalid-feedback {
  display: block;
  margin-top: var(--theme-space-1, 0.25rem);
  font-size: var(--theme-text-sm, 0.75rem);
  font-weight: var(--theme-weight-medium, 500);
  line-height: var(--theme-leading-snug, 1.25);
  color: var(--theme-status-danger, var(--bp-danger));
}

.exchange-app .form-control.is-invalid,
.exchange-app .form-select.is-invalid,
.exchange-account-layout .form-control.is-invalid,
.exchange-account-layout .form-select.is-invalid {
  border-color: var(--theme-status-danger, var(--bp-danger));
}

.exchange-app .form-control.is-invalid:focus-visible,
.exchange-app .form-select.is-invalid:focus-visible {
  outline-color: var(--theme-status-danger, var(--bp-danger));
}

/* ── Disabled ───────────────────────────────────────────────────────────── */
.exchange-app .btn-base:disabled,
.exchange-app .ex-load-more-btn:disabled,
.exchange-app .form-control:disabled,
.exchange-app .form-select:disabled {
  opacity: var(--theme-opacity-disabled, 0.5);
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== exchange-motion.css ===== */
/**
 * WP19 — Motion & skeleton atoms
 * Load AFTER theme.bundle (motion tokens already in :root).
 * Global reduced-motion · shared skeleton shimmer · transition helpers.
 */

.exchange-app {
  --ex-motion-fast: var(--theme-duration-fast, 100ms);
  --ex-motion-default: var(--theme-duration-default, 150ms);
  --ex-motion-skeleton: var(--theme-duration-skeleton, 1200ms);
  --ex-ease: var(--theme-ease-default, ease-out);
}

/* Prefer tokenized transitions on interactive chrome */
.exchange-app .ex-header-cta,
.exchange-app .ex-mobile-nav__item,
.exchange-app .ex-sidebar-nav-list li a,
.exchange-app .ex-live-cat-strip__item {
  transition: var(--theme-transition-hover, var(--theme-transition-colors));
}

/* Skeleton atom */
.exchange-app .ex-skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--ex-border, #cbd5e1) 55%, var(--ex-surface, #f8fafc));
  border-radius: var(--theme-radius-chip, 4px);
}

.exchange-app .ex-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, #fff 55%, transparent) 50%,
    transparent 100%
  );
  animation: ex-skeleton-shimmer var(--ex-motion-skeleton) var(--theme-ease-in-out, ease-in-out) infinite;
}

html.theme-dark .exchange-app .ex-skeleton,
.theme-dark .exchange-app .ex-skeleton {
  background: color-mix(in srgb, var(--ex-border, #334155) 45%, var(--ex-surface, #0f172a));
}

html.theme-dark .exchange-app .ex-skeleton::after,
.theme-dark .exchange-app .ex-skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, #fff 12%, transparent) 50%,
    transparent 100%
  );
}

.exchange-app .ex-skeleton--text {
  height: 0.75rem;
  width: 100%;
}

.exchange-app .ex-skeleton--title {
  height: 1rem;
  width: 60%;
}

.exchange-app .ex-skeleton--odds {
  height: var(--theme-odds-h-desktop, 36px);
  width: 100%;
  border-radius: var(--theme-radius-odds, 0);
}

.exchange-app .ex-skeleton--avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--theme-radius-pill, 999px);
}

.exchange-app .ex-skeleton-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(3rem, 4.5rem));
  gap: 0.35rem;
  align-items: center;
  padding: 0.35rem 0.5rem;
}

@keyframes ex-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Global reduced-motion — kill decorative animation, keep instant state changes */
@media (prefers-reduced-motion: reduce) {
  .exchange-app .ex-skeleton::after,
  .exchange-app [class*="flash"],
  .exchange-app [class*="pulse"],
  .exchange-app [class*="shine"],
  .exchange-app .ex-indibet-list__live-badge::after,
  .exchange-app .ex-live-dot,
  .exchange-app .ex-preloader * {
    animation: none !important;
    transition: none !important;
  }

  .exchange-app .ex-skeleton::after {
    display: none;
  }
}

/* Schedule sport-tab loading */
.exchange-app .ex-schedule-skeleton {
  padding: 0.25rem 0 0.5rem;
}

.exchange-app .ex-schedule-skeleton .ex-skeleton-row + .ex-skeleton-row {
  margin-top: 0.2rem;
}

.exchange-app.is-schedule-loading .ex-live-cat-strip,
.exchange-app [data-ex-live-schedule].is-schedule-loading .ex-live-cat-strip,
.exchange-app [data-ex-fixtures-schedule].is-schedule-loading .ex-live-cat-strip,
.exchange-app [data-ex-results-schedule].is-schedule-loading .ex-live-cat-strip {
  pointer-events: none;
  opacity: 0.85;
}

/* ===== exchange-icons.css ===== */
/**
 * WP06 / WP21 — Icon system (Lucide chrome; Feather class kept via bridge)
 * Sport category glyphs: custom SVG pack (WP06b).
 */

.exchange-app .ex-icon,
.exchange-app [data-lucide],
.exchange-app [data-feather],
.exchange-app svg.feather,
.exchange-app svg.lucide {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.exchange-app svg.feather,
.exchange-app svg.lucide {
    width: var(--ex-icon-size, 1.125rem);
    height: var(--ex-icon-size, 1.125rem);
    stroke: currentColor;
    fill: none;
    stroke-width: var(--ex-icon-stroke, 2);
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Sidebar / schedule subnav chrome icons */
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.lucide.nav-icon,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list li a svg.feather.nav-icon,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list li a svg.lucide.nav-icon {
    width: var(--ex-sidebar-feather-size, 1.45rem);
    height: var(--ex-sidebar-feather-size, 1.45rem);
    stroke-width: var(--ex-sidebar-feather-weight, 2.85);
}

/* Notification row icons */
.exchange-app .notification-dropdown .notification-icon svg.feather,
.exchange-app .notification-dropdown .notification-icon svg.lucide {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 2.25;
}

.exchange-app .notification-dropdown .s7__text-muted svg.feather,
.exchange-app .notification-dropdown .s7__text-muted svg.lucide {
    width: 0.875rem;
    height: 0.875rem;
    stroke-width: 2;
    margin-inline-end: 0.2rem;
    vertical-align: -0.1em;
}

/* Back to top */
.exchange-app .back-to-top .back-top svg.feather,
.exchange-app .back-to-top .back-top svg.lucide {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2.5;
}

/* Live category “All Sports” globe */
.exchange-app .ex-live-cat-strip__icon svg.feather.ex-cat-icon,
.exchange-app .ex-live-cat-strip__icon svg.lucide.ex-cat-icon {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 2.25;
}

/* WP06b — Sport SVG pack (stroke glyphs; cricket is fill) */
.exchange-app svg.ex-sport-svg {
    width: var(--ex-sidebar-feather-size, 1.45rem);
    height: var(--ex-sidebar-feather-size, 1.45rem);
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exchange-app svg.ex-sport-svg.ex-sport-svg--fill {
    fill: currentColor;
    stroke: none;
}

.exchange-app .ex-live-cat-strip__icon svg.ex-sport-svg {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 2.25;
}

/* Keep stroke sports as stroke — sidebar-ref historically fills non-feather SVGs */
.exchange-app svg.ex-sport-svg:not(.ex-sport-svg--fill),
.exchange-app svg.ex-sport-svg:not(.ex-sport-svg--fill) path,
.exchange-app svg.ex-sport-svg:not(.ex-sport-svg--fill) circle,
.exchange-app svg.ex-sport-svg:not(.ex-sport-svg--fill) ellipse,
.exchange-app svg.ex-sport-svg:not(.ex-sport-svg--fill) line,
.exchange-app svg.ex-sport-svg:not(.ex-sport-svg--fill) polyline {
    fill: none !important;
    stroke: currentColor !important;
}

.exchange-app svg.ex-sport-svg.ex-sport-svg--fill,
.exchange-app svg.ex-sport-svg.ex-sport-svg--fill path,
.exchange-app svg.ex-sport-svg.ex-sport-svg--fill rect,
.exchange-app svg.ex-sport-svg.ex-sport-svg--fill circle {
    fill: currentColor !important;
    stroke: none !important;
}

/* ===== exchange-header.css ===== */
/**
 * WP10 — Header & top bar chrome
 * Load AFTER exchange-theme (+ controls/icons).
 * Deposit/Login 14px · mobile search 40 · balance tabular ≥14/700.
 * Sticky height contract (--ex-navbar-control-h / site header) unchanged.
 */

/* Deposit / Login CTA type */
.exchange-app .ex-header-cta {
  font-size: var(--theme-text-base, 0.875rem);
  font-weight: var(--theme-weight-bold, 700);
  letter-spacing: 0.01em;
}

/* Wallet balance — scannable amount */
.exchange-app .ex-header-user-balance__amount,
.exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount {
  font-size: var(--theme-text-base, 0.875rem);
  font-weight: var(--theme-weight-bold, 700);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@media (min-width: 992px) {
  /* Double class keeps desktop density tokens authoritative when the
     home-only density sheet loads later. */
  .exchange-app.exchange-app {
    --ex-navbar-control-h: 36px;
    --ex-navbar-item-gap: 6px;
    --ex-navbar-item-px: 8px;
    --ex-navbar-icon-size: 17px;
  }

  .exchange-app .ex-header-actions {
    gap: 6px;
    min-height: 36px;
  }

  .exchange-app .ex-header-actions__session {
    gap: 4px;
    min-height: 36px;
  }

  .exchange-app .ex-header-cta {
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: var(--theme-weight-semibold, 600);
    letter-spacing: 0;
  }

  .exchange-app .ex-header-actions__wallet .ex-header-user-balance,
  .exchange-app .ex-header-actions__wallet .ex-header-user-balance-mount,
  .exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount {
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: var(--theme-weight-bold, 700);
  }

  .exchange-app .ex-header-actions__user-name,
  .exchange-app button.ex-header-actions__user-name {
    gap: 4px;
    min-height: 36px;
    height: 36px;
    padding-inline: 8px;
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: var(--theme-weight-semibold, 600);
    letter-spacing: 0;
  }

  .exchange-app .ex-account-menu__user-icon,
  .exchange-app .ex-account-menu__user-icon svg {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
}

/* Mobile: search field = primary control height (40) */
@media (max-width: 991.98px) {
  .exchange-app {
    --ex-navbar-search-h: var(--theme-control-height-primary, 40px);
  }

  .exchange-app .ex-header-actions__search .ex-match-search--compact,
  .exchange-app .ex-navbar-bottom__search .ex-match-search--compact {
    height: var(--ex-navbar-search-h) !important;
    min-height: var(--ex-navbar-search-h) !important;
    max-height: none !important;
  }

  .exchange-app .ex-header-actions__search .ex-match-search--compact .ex-match-search__input,
  .exchange-app .ex-navbar-bottom__search .ex-match-search--compact .ex-match-search__input {
    min-height: var(--ex-navbar-search-h);
    height: var(--ex-navbar-search-h);
    font-size: var(--theme-text-base, 0.875rem);
  }

  .exchange-app .ex-header-actions__search .ex-match-search--compact .ex-match-search__submit,
  .exchange-app .ex-header-actions__search .ex-match-search--compact .ex-match-search__clear,
  .exchange-app .ex-navbar-bottom__search .ex-match-search--compact .ex-match-search__submit,
  .exchange-app .ex-navbar-bottom__search .ex-match-search--compact .ex-match-search__clear {
    min-width: var(--theme-control-height-primary, 40px);
    min-height: var(--theme-control-height-primary, 40px);
    width: var(--theme-control-height-primary, 40px);
    height: var(--theme-control-height-primary, 40px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}

/* ===== exchange-categories.css ===== */
/**
 * S7 icon system — matches admin panel sidebar / nav (blue-gray + primary blue + white).
 */

.theme-light .exchange-app {
    --s7-icon: var(--theme-icon-s7);
    --s7-icon-hover: var(--color-primary);
    --s7-icon-on-primary: var(--theme-icon-on-brand);
}

.theme-dark .exchange-app {
    --s7-icon: var(--theme-icon-s7);
    --s7-icon-hover: var(--color-primary);
    --s7-icon-on-primary: var(--bp-slate-900);
}

/* ─── All nav / category / menu icons ─────────────────────────────────────── */
.exchange-app .ex-cat-icon,
.exchange-app svg.ex-cat-icon,
.exchange-app .header-scroll-inner a i,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .nav-icon:not(.ex-live-dot),
.exchange-app .inplay-slider a .ex-cat-icon,
.exchange-app .inplay-area ul li a i:not(.nav-icon),
.exchange-app .single-sitebar a i,
.exchange-app .sidebar-menu .sidebar-inner a i,
.exchange-app .menubar-mobile i,
.exchange-app .menubar i,
.exchange-app .sidebar-menu-close i,
.exchange-app .fa-braille,
.exchange-app .navbar-top .social-area i.fab,
.exchange-app .dashboard-user-menu ul li a i {
    color: var(--s7-icon) !important;
    transition: color 0.2s ease;
}

/* Hover → admin primary blue (slider/etc — sidebar + header cats use white on filled hover) */
.exchange-app .inplay-slider a:hover .ex-cat-icon,
.exchange-app .single-sitebar a:hover i,
.exchange-app .sidebar-menu .sidebar-inner a:hover i,
.exchange-app .menubar-mobile:hover i,
.exchange-app .menubar:hover i,
.exchange-app .sidebar-menu-close:hover i,
.exchange-app .navbar-top .social-area a:hover i {
    color: var(--s7-icon-hover) !important;
}

/* Sidebar inactive hover — white icons (not blue) */
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .nav-icon:not(.ex-live-dot),
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .nav-icon svg,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .ex-cat-icon svg {
    color: var(--theme-icon-on-brand) !important;
    stroke: var(--theme-icon-on-brand) !important;
    fill: currentColor;
}

/* Active/open sidebar row — white glyph on pink chip */
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .nav-icon:not(.ex-live-dot),
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .nav-icon:not(.ex-live-dot),
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] .nav-icon:not(.ex-live-dot),
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] .ex-cat-icon {
    color: #FFFFFF !important;
}

/* ─── In Play panel — theme-matched 3D surfaces ───────────────────────────── */
.exchange-app .inplay-slider-inner-area {
    border-radius: var(--ex-panel-radius, 10px);
    overflow: hidden;
}

.exchange-app .inplay-slider-inner {
    position: relative;
    padding: 0.625rem 40px;
}

.exchange-app .inplay-slider .owl-item {
    padding: 0.1875rem;
}

/* ─── In Play carousel — fixed icon + label slots (equal on every tile) ─────── */
.exchange-app .inplay-slider.owl-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.exchange-app .inplay-slider .owl-item {
    display: flex !important;
    align-items: stretch;
    float: none;
}

.exchange-app .inplay-slider .owl-item > .item {
    display: flex !important;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

.exchange-app .inplay-slider a.ex-inplay-cat-tile,
.exchange-app .inplay-slider a {
    display: grid !important;
    grid-template-rows: 2rem 1.125rem;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    row-gap: 0.25rem;
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
    height: 4.5rem;
    min-height: 4.5rem;
    max-height: 4.5rem;
    padding: 0.5rem 0.375rem !important;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid var(--ex-inplay-tile-border, var(--ex-border));
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-inplay-tile-bg, var(--ex-surface-raised));
    box-shadow: var(--ex-inplay-tile-shadow, var(--ex-shadow));
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.exchange-app .inplay-slider a.ex-inplay-cat-tile:hover,
.exchange-app .inplay-slider a:hover {
    background: var(--ex-inplay-tile-bg-hover, var(--ex-row-alt));
    box-shadow: var(--ex-inplay-tile-shadow-hover, var(--ex-shadow));
    transform: translateY(-2px);
}

.exchange-app .inplay-slider a.ex-inplay-cat-tile:active,
.exchange-app .inplay-slider a:active {
    transform: translateY(1px);
    box-shadow: var(--ex-inplay-tile-shadow-active, var(--ex-shadow));
}

.exchange-app .inplay-slider .ex-inplay-cat-icon-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    line-height: 0;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ex-inplay-icon-well, var(--ex-surface-head));
    box-shadow: var(--ex-inplay-icon-well-shadow, inset 0 2px 4px var(--bp-alpha-ink-08));
}

.exchange-app .inplay-slider .ex-inplay-cat-icon-slot .ex-cat-icon,
.exchange-app .inplay-slider .ex-inplay-cat-icon-slot svg.ex-cat-icon,
.exchange-app .inplay-slider .ex-inplay-cat-icon-slot i.ex-cat-icon {
    display: block;
    margin: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    max-width: 1.25rem;
    max-height: 1.25rem;
    font-size: var(--theme-text-xl-plus, 1.125rem) !important;
    line-height: 1;
    vertical-align: middle !important;
    flex-shrink: 0;
}

.exchange-app .inplay-slider a p,
.exchange-app .inplay-slider a .ex-inplay-cat-label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0;
    height: 1.125rem;
    font-size: var(--theme-text-sm, 0.75rem);
    line-height: 1.125rem;
    text-align: center;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exchange-app .inplay-slider .owl-prev,
.exchange-app .inplay-slider .owl-next {
    border-radius: var(--theme-radius-control, 8px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.exchange-app .inplay-slider .owl-prev:hover,
.exchange-app .inplay-slider .owl-next:hover {
    transform: translateY(-1px);
}

.exchange-app .inplay-slider .owl-prev:active,
.exchange-app .inplay-slider .owl-next:active {
    transform: translateY(1px);
}

/* ─── Schedule tabs — styles live in exchange-sidebar-ref.css (shared with sidebar) ─ */

/* Category sport page */
.exchange-app .ex-category-page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.exchange-app .ex-category-page__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}

.exchange-app .ex-category-page__back:hover {
    text-decoration: underline;
}

.exchange-app .ex-category-page__back svg {
    width: 14px;
    height: 14px;
}

.exchange-app .ex-category-page__subtitle {
    margin: 0;
    font-size: var(--theme-text-md, 0.8125rem);
    color: var(--para-color);
}

@media (max-width: 575.98px) {
    .exchange-app .ex-category-page__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575px) {
    .exchange-app .inplay-slider a.ex-inplay-cat-tile,
    .exchange-app .inplay-slider a {
        height: 4rem;
        min-height: 4rem;
        max-height: 4rem;
        grid-template-rows: 1.75rem 1rem;
        row-gap: 0.1875rem;
        padding: 0.375rem 0.25rem !important;
    }

    .exchange-app .inplay-slider .ex-inplay-cat-icon-slot {
        width: 1.75rem;
        height: 1.75rem;
    }

    .exchange-app .inplay-slider .ex-inplay-cat-icon-slot .ex-cat-icon,
    .exchange-app .inplay-slider .ex-inplay-cat-icon-slot svg.ex-cat-icon,
    .exchange-app .inplay-slider .ex-inplay-cat-icon-slot i.ex-cat-icon {
        width: 1.125rem !important;
        height: 1.125rem !important;
        max-width: 1.125rem;
        max-height: 1.125rem;
        font-size: var(--theme-text-xl-plus, 1.125rem) !important;
    }

    .exchange-app .inplay-slider a p,
    .exchange-app .inplay-slider a .ex-inplay-cat-label {
        height: 1rem;
        font-size: var(--theme-text-xs, 0.6875rem);
        line-height: 1rem;
    }

}

/* Status dot — not an s7 nav icon */
.exchange-app .ex-live-dot {
    color: inherit;
}

/* Sport category strip — same tray / plate style as In-Play schedule subnav */
.exchange-app .ex-live-cat-strip {
    --theme-icon-on-brand: var(--ex-sidebar-icon, #FFFFFF);
    --theme-icon-well-bg: transparent;
    --theme-icon-well-shadow: none;
    margin: 0 0 0.65rem;
}

.exchange-app .ex-live-cat-strip__scroll {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.2rem;
    max-width: 100%;
    margin: 0;
    padding: 0.2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ex-sidebar-ref-border, var(--ex-border, #2A3446));
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-sidebar-ref-bg, var(--ex-surface-raised, #111827));
    box-shadow: none;
    scrollbar-width: thin;
    box-sizing: border-box;
}

.exchange-app .ex-live-cat-strip__item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    flex: 0 0 auto;
    min-height: 2.35rem !important;
    padding: 0.4rem 0.55rem !important;
    border: 0 !important;
    border-radius: var(--theme-radius-chip, 4px) !important;
    color: var(--ex-sidebar-ref-text, #EEEEEE) !important;
    text-decoration: none !important;
    font-size: var(--theme-text-base, 0.875rem) !important;
    font-weight: 500 !important;
    line-height: 1.25;
    white-space: nowrap;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    box-sizing: border-box;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.exchange-app .ex-live-cat-strip__label {
    color: inherit !important;
    opacity: 1 !important;
    font-size: var(--theme-text-base, 0.875rem) !important;
    font-weight: inherit !important;
}

html.theme-light .exchange-app .ex-live-cat-strip__item:not(.is-active):hover,
html.theme-light .exchange-app .ex-live-cat-strip__item:not(.is-active):focus-visible,
.theme-light .exchange-app .ex-live-cat-strip__item:not(.is-active):hover,
.theme-light .exchange-app .ex-live-cat-strip__item:not(.is-active):focus-visible {
    background: color-mix(in srgb, var(--bp-slate-400) 28%, var(--ex-sidebar-ref-bg, #FFFFFF)) !important;
    color: var(--ex-sidebar-bg-dark, #111827) !important;
    box-shadow: inset 3px 0 0 var(--theme-primary, #DD3E42) !important;
    transform: none !important;
    font-weight: 500 !important;
}

html.theme-dark .exchange-app .ex-live-cat-strip__item:not(.is-active):hover,
html.theme-dark .exchange-app .ex-live-cat-strip__item:not(.is-active):focus-visible,
.theme-dark .exchange-app .ex-live-cat-strip__item:not(.is-active):hover,
.theme-dark .exchange-app .ex-live-cat-strip__item:not(.is-active):focus-visible {
    background: color-mix(in srgb, var(--bp-slate-500) 36%, var(--ex-sidebar-ref-bg, #111827)) !important;
    color: var(--ex-sidebar-bg-light, #FFFFFF) !important;
    box-shadow: inset 3px 0 0 var(--theme-primary, #DD3E42) !important;
    transform: none !important;
    font-weight: 500 !important;
}

/* Active plate — identical to In-Play tab */
.exchange-app .ex-live-cat-strip__item.is-active,
.exchange-app .ex-live-cat-strip__item.is-active:hover {
    color: var(--ex-sidebar-ref-active-text, #EEEEEE) !important;
    font-weight: 600 !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ex-sidebar-ref-active, #111827) 88%, #FFFFFF) 0%,
        var(--ex-sidebar-ref-active, #111827) 48%,
        color-mix(in srgb, var(--ex-sidebar-ref-active, #111827) 82%, #000000) 100%
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        inset -1px 0 0 rgba(0, 0, 0, 0.12),
        0 2px 0 rgba(0, 0, 0, 0.22),
        0 3px 6px rgba(15, 23, 42, 0.2) !important;
    transform: none !important;
}

html.theme-light .exchange-app .ex-live-cat-strip__item.is-active,
html.theme-light .exchange-app .ex-live-cat-strip__item.is-active:hover,
.theme-light .exchange-app .ex-live-cat-strip__item.is-active,
.theme-light .exchange-app .ex-live-cat-strip__item.is-active:hover {
    color: #EEEEEE !important;
    background: var(--ex-surface-active-plate) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        inset -1px 0 0 rgba(0, 0, 0, 0.18),
        0 2px 0 #0B1220,
        0 3px 6px rgba(15, 23, 42, 0.28) !important;
}

html.theme-dark .exchange-app .ex-live-cat-strip__item.is-active,
html.theme-dark .exchange-app .ex-live-cat-strip__item.is-active:hover,
.theme-dark .exchange-app .ex-live-cat-strip__item.is-active,
.theme-dark .exchange-app .ex-live-cat-strip__item.is-active:hover {
    color: #111827 !important;
    background: var(--ex-surface-active-plate) !important;
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        inset 1px 0 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(15, 23, 42, 0.12),
        inset -1px 0 0 rgba(15, 23, 42, 0.06),
        0 2px 0 #A8B6C8,
        0 3px 6px rgba(0, 0, 0, 0.35) !important;
}

.exchange-app .ex-sport-tabs-mode .ex-inplay-group[data-category-id]:not(.is-active-tab) {
    display: none !important;
}

.exchange-app .ex-sport-tabs-mode .ex-inplay-group[data-category-id].is-active-tab {
    display: block !important;
}

/* Inactive icons — flat like In-Play tabs (no red well) */
.exchange-app .ex-live-cat-strip__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.35rem !important;
    min-width: 1.35rem !important;
    height: 1.35rem !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ex-sidebar-icon, #FFFFFF);
    box-shadow: none !important;
}

html.theme-light .exchange-app .ex-live-cat-strip__item:not(.is-active) .ex-live-cat-strip__icon,
.theme-light .exchange-app .ex-live-cat-strip__item:not(.is-active) .ex-live-cat-strip__icon {
    color: #111827 !important;
}

html.theme-dark .exchange-app .ex-live-cat-strip__item:not(.is-active) .ex-live-cat-strip__icon,
.theme-dark .exchange-app .ex-live-cat-strip__item:not(.is-active) .ex-live-cat-strip__icon {
    color: #FFFFFF !important;
}

/* Sidebar-equivalent hover cue: pink rail + pink sport icon. */
html.theme-light .exchange-app .ex-live-cat-strip__item:not(.is-active):hover .ex-live-cat-strip__icon,
html.theme-light .exchange-app .ex-live-cat-strip__item:not(.is-active):focus-visible .ex-live-cat-strip__icon,
html.theme-dark .exchange-app .ex-live-cat-strip__item:not(.is-active):hover .ex-live-cat-strip__icon,
html.theme-dark .exchange-app .ex-live-cat-strip__item:not(.is-active):focus-visible .ex-live-cat-strip__icon,
.exchange-app .ex-live-cat-strip__item:not(.is-active):hover .ex-live-cat-strip__icon,
.exchange-app .ex-live-cat-strip__item:not(.is-active):focus-visible .ex-live-cat-strip__icon {
    color: var(--theme-primary, #DD3E42) !important;
}

.exchange-app .ex-live-cat-strip__icon .ex-cat-icon,
.exchange-app .ex-live-cat-strip__icon i,
.exchange-app .ex-live-cat-strip__icon svg {
    display: inline-grid !important;
    place-items: center !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    min-width: 1.15rem !important;
    font-size: var(--theme-text-lg-plus, 1rem) !important;
    line-height: 0 !important;
    text-align: center !important;
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* FA CSS mode — glyph is on ::before; lock it to the icon box center */
.exchange-app .ex-live-cat-strip__icon i.ex-cat-icon::before,
.exchange-app .ex-live-cat-strip__icon i.nav-icon::before {
    display: block !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    text-align: center !important;
}

.exchange-app .ex-live-cat-strip__icon svg.feather {
    fill: none !important;
    stroke: currentColor !important;
}

/* Active brand icon chip — same 26px outer well as the premium sidebar. */
.exchange-app .ex-live-cat-strip__item.is-active .ex-live-cat-strip__icon {
    width: 1.625rem !important;
    min-width: 1.625rem !important;
    height: 1.625rem !important;
    padding: 0 !important;
    border-radius: var(--theme-radius-control, 8px) !important;
    background: #DD3E42 !important;
    color: #FFFFFF !important;
    box-sizing: border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(120, 10, 28, 0.35),
        0 1px 2px rgba(120, 10, 28, 0.35) !important;
}

.exchange-app .ex-live-cat-strip__item.is-active .ex-live-cat-strip__icon .ex-cat-icon,
.exchange-app .ex-live-cat-strip__item.is-active .ex-live-cat-strip__icon i,
.exchange-app .ex-live-cat-strip__item.is-active .ex-live-cat-strip__icon svg {
    width: 1.05rem !important;
    height: 1.05rem !important;
    min-width: 1.05rem !important;
    font-size: var(--theme-text-base, 0.875rem) !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

.exchange-app .ex-live-cat-strip__item.is-active .ex-live-cat-strip__icon svg.feather {
    fill: none !important;
    stroke: #FFFFFF !important;
}

/* Count — inherit tab text color */
.exchange-app .ex-live-cat-strip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    font-size: var(--theme-text-md, 0.8125rem) !important;
    font-weight: 600 !important;
    line-height: 1;
    color: inherit !important;
    opacity: 0.85;
    background: transparent !important;
    box-shadow: none !important;
}

.exchange-app .ex-live-cat-strip__item.is-active .ex-live-cat-strip__count {
    opacity: 1;
}

.exchange-app .ex-live-schedule,
.exchange-app .ex-fixtures-schedule,
.exchange-app .ex-results-schedule {
    min-width: 0;
}

/* Category group headers — same corner contract as expanded list card:
 * solid head fill + one ::before (top line + scoop tab). Group overflow clips TL. */
.exchange-app .ex-inplay-group__head {
    --ex-head-corner: 2.5rem;
    --ex-head-scoop: 0.65rem;
    --ex-head-top-line: 1px;
    position: relative;
    box-sizing: border-box;
    min-height: 2.25rem; /* 36px — international group-head typical floor */
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-right: 0.55rem;
    padding-left: calc(var(--ex-head-corner) + 0.45rem) !important;
    background: var(--ex-surface-category-head, var(--ex-schedule-category-head-bg, var(--ex-surface-head))) !important;
    background-color: var(--ex-surface-category-head, var(--ex-schedule-category-head-bg, var(--ex-surface-head))) !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ex-schedule-category-head-border, var(--ex-border)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden; /* clips red tab flush — no white crescent at scoop/TL */
    font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem));
    isolation: isolate;
}

.exchange-app .ex-inplay-group__head::before {
    content: "" !important;
    position: absolute;
    inset: 0;
    background: var(--theme-primary, #DD3E42);
    /* No radius — group overflow clips TL flush (same as expanded card) */
    border-radius: 0;
    -webkit-mask:
        linear-gradient(#000 0 0) 0 0 / 100% var(--ex-head-top-line) no-repeat,
        radial-gradient(
            circle var(--ex-head-scoop) at 100% 100%,
            transparent 98%,
            #000 99%
        ) 0 0 / var(--ex-head-corner) 100% no-repeat;
    mask:
        linear-gradient(#000 0 0) 0 0 / 100% var(--ex-head-top-line) no-repeat,
        radial-gradient(
            circle var(--ex-head-scoop) at 100% 100%,
            transparent 98%,
            #000 99%
        ) 0 0 / var(--ex-head-corner) 100% no-repeat;
    -webkit-mask-composite: source-over;
    mask-composite: add;
    pointer-events: none;
    z-index: 0;
}

.exchange-app .ex-inplay-group__head::after {
    content: none !important;
}

.exchange-app .ex-inplay-group__icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: var(--ex-head-corner);
    height: 100%;
    color: #fff;
}

/* League/event groups (category page): no empty dark icon tab */
.exchange-app .ex-inplay-group--no-icon .ex-inplay-group__head {
    padding-left: 0.75rem !important;
}

.exchange-app .ex-inplay-group--no-icon .ex-inplay-group__head::before {
    content: none !important;
    display: none !important;
}

.exchange-app .ex-inplay-group__icon .ex-cat-icon,
.exchange-app .ex-inplay-group__icon svg.ex-cat-icon,
.exchange-app .ex-inplay-group__icon i.ex-cat-icon {
    /* Match sidebar .ex-cat-icon size only on sport match headers */
    width: 1.35rem !important;
    height: 1.35rem !important;
    min-width: 1.35rem !important;
    font-size: var(--theme-text-3xl, 1.5rem) !important;
    line-height: 1 !important;
    color: #fff !important;
    fill: currentColor;
}

/* Dark mode: keep brand primary scoop (icons stay white via match-icons) */
html.theme-dark .exchange-app .ex-inplay-group__head::before,
.theme-dark .exchange-app .ex-inplay-group__head::before {
    background: var(--theme-primary, #DD3E42) !important;
}

html.theme-dark .exchange-app .ex-inplay-group__icon,
.theme-dark .exchange-app .ex-inplay-group__icon {
    color: #FFFFFF;
}

html.theme-dark .exchange-app .ex-inplay-group__icon .ex-cat-icon,
html.theme-dark .exchange-app .ex-inplay-group__icon svg.ex-cat-icon,
html.theme-dark .exchange-app .ex-inplay-group__icon i.ex-cat-icon,
.theme-dark .exchange-app .ex-inplay-group__icon .ex-cat-icon,
.theme-dark .exchange-app .ex-inplay-group__icon svg.ex-cat-icon,
.theme-dark .exchange-app .ex-inplay-group__icon i.ex-cat-icon {
    color: #FFFFFF !important;
    fill: currentColor;
    stroke: currentColor;
}

.exchange-app .ex-inplay-group__name {
    /* League role — tokens; typography reinforces without !important */
    font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
}

html.theme-light .exchange-app .ex-inplay-group__head,
.theme-light .exchange-app .ex-inplay-group__head {
    background: var(--ex-surface-category-head, #D5DCE6) !important;
    background-color: var(--ex-surface-category-head, #D5DCE6) !important;
    box-shadow: none !important;
}

html.theme-dark .exchange-app .ex-inplay-group__head,
.theme-dark .exchange-app .ex-inplay-group__head {
    background: var(--ex-surface-category-head, #2A3446) !important;
    background-color: var(--ex-surface-category-head, #2A3446) !important;
    color: var(--ex-schedule-category-head-text, #EEEEEE) !important;
    box-shadow: none !important;
}

html.theme-dark .exchange-app .ex-inplay-group__head .ex-inplay-group__name,
.theme-dark .exchange-app .ex-inplay-group__head .ex-inplay-group__name {
    color: var(--ex-schedule-category-head-text) !important;
}

/* Mobile only: the sport/category header (min-height 2.25rem/36px) sat
   shorter than the odds cell buttons in the rows beneath it (40px) —
   bump it to match, then to 42px per follow-up request. Desktop/tablet
   (>=992px) keep the original 36px. Also zeroes --ex-head-top-line,
   which the ::before rule above uses to mask in a thin accent-colored
   line across the header's top edge — set to 0 here so that line
   disappears while the same ::before still draws the icon's scoop
   corner cutout (a separate mask layer, untouched). */
@media (max-width: 991.98px) {
    .exchange-app .ex-inplay-group__head {
        min-height: 42px;
        --ex-head-top-line: 0px;
    }

    /* Dark mode: the header's own background (#2A3446) landed almost
       identical to the zebra-striped rows beneath it (~rgb(43,51,65)),
       so the header no longer read as a distinct element from the list.
       Lightened here specifically so it's clearly its own bar. */
    html.theme-dark .exchange-app .ex-inplay-group__head,
    .theme-dark .exchange-app .ex-inplay-group__head {
        background: color-mix(in srgb, var(--ex-surface-category-head, #2A3446) 65%, white 35%) !important;
        background-color: color-mix(in srgb, var(--ex-surface-category-head, #2A3446) 65%, white 35%) !important;
    }

    /* Flatten the embossed "3D" panel treatment on the whole group
       (header + list) — plain background instead of the top-to-bottom
       --ex-market-bg-3d gradient, which was the only part of the "3D"
       look actually still active (box-shadow was already flattened to
       none site-wide by exchange-radius.css's enterprise/flat style).
       Also drops that same rule's 1px soft outer border, which framed
       the whole panel (and therefore the header) in a light gray line. */
    .exchange-app .ex-inplay-group {
        background: var(--ex-market-bg) !important;
        border: none !important;
    }

    html.theme-dark .exchange-app .ex-inplay-group,
    .theme-dark .exchange-app .ex-inplay-group {
        background: var(--ex-market-bg) !important;
    }
}


/* ===== exchange-sidebar.css ===== */
/**
 * Frontend exchange sidebar — scoped `ex-sidebar-*` nav (styled in this file).
 * Scoped to .ex-sidebar so legacy .dropdown-widget elsewhere is unchanged.
 */

.exchange-app .ex-sidebar {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.exchange-app .ex-sidebar .dropdown-widget {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

.exchange-app .ex-sidebar-rail {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    width: 100%;
    border-radius: var(--theme-radius-panel, 8px);
    background: var(--ex-market-bg-3d, var(--theme-bg-market-3d));
    box-shadow: var(--ex-market-3d-shadow,
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(15, 23, 42, 0.07),
        0 0 0 1px rgba(148, 163, 184, 0.28),
        0 2px 8px rgba(15, 23, 42, 0.07)
    );
}

.theme-dark .exchange-app .ex-sidebar-rail {
    background: var(--ex-market-bg-3d, var(--theme-bg-market-3d));
    box-shadow: var(--ex-market-3d-shadow);
}

.exchange-app .ex-sidebar .ex-sidebar-nav-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overflow-anchor: none;
    scrollbar-gutter: stable;
    padding: 0.45rem 0.45rem 0.45rem 0.65rem;
    box-sizing: border-box;
    background: transparent;
}

/* SimpleBar — thumb = page bg; hover = sidebar cross-match wash */
.exchange-app .ex-sidebar .simplebar-track.simplebar-vertical {
    width: 9px;
    right: 2px;
    margin: 0.35rem 0;
    border-radius: var(--theme-radius-pill, 999px);
    background: transparent;
    box-shadow: none;
}

.exchange-app .ex-sidebar .simplebar-scrollbar.simplebar-visible::before {
    opacity: 1;
}

.exchange-app .ex-sidebar .simplebar-scrollbar::before {
    left: 1px;
    right: 1px;
    border-radius: var(--theme-radius-pill, 999px);
    background: color-mix(in srgb, #111827 22%, var(--theme-bg-page, #F5F7FA));
    opacity: 1;
    box-shadow: none;
}

.theme-dark .exchange-app .ex-sidebar .simplebar-scrollbar::before {
    background: color-mix(in srgb, #FFFFFF 24%, var(--theme-bg-page, #0F172A));
}

.theme-light .exchange-app .ex-sidebar .simplebar-scrollbar:hover::before,
.theme-light .exchange-app .ex-sidebar .simplebar-scrollbar.simplebar-visible:hover::before {
    background: color-mix(in srgb, #111827 16%, transparent);
}

.theme-dark .exchange-app .ex-sidebar .simplebar-scrollbar:hover::before,
.theme-dark .exchange-app .ex-sidebar .simplebar-scrollbar.simplebar-visible:hover::before {
    background: color-mix(in srgb, #FFFFFF 20%, transparent);
}

/* Native scrollbar — default = page bg; hover = cross-match (same as sidebar row hover) */
.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper {
    scrollbar-width: thin;
}

.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper {
    scrollbar-color: color-mix(in srgb, #111827 22%, var(--theme-bg-page, #F5F7FA)) transparent;
}

.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper {
    scrollbar-color: color-mix(in srgb, #FFFFFF 24%, var(--theme-bg-page, #0F172A)) transparent;
}

.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar {
    width: 9px;
}

.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-button,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-track,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-track {
    margin: 0.35rem 0;
    border-radius: var(--theme-radius-pill, 999px);
    background: transparent;
    box-shadow: none;
}

.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb {
    border-radius: var(--theme-radius-pill, 999px);
    border: 0;
    background: color-mix(in srgb, #111827 22%, var(--theme-bg-page, #F5F7FA));
    box-shadow: none;
}

.theme-light .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, #111827 16%, transparent);
}

.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb {
    border-radius: var(--theme-radius-pill, 999px);
    border: 0;
    background: color-mix(in srgb, #FFFFFF 24%, var(--theme-bg-page, #0F172A));
    box-shadow: none;
}

.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, #FFFFFF 20%, transparent);
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list {
    padding-inline-start: 0;
    padding-bottom: 1rem;
    list-style: none;
    margin-bottom: 0;
    margin-inline-start: 0;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list > li + li {
    margin-top: 0.1875rem;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li {
    list-style: none;
    border-bottom: none !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-decoration: none;
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: 500;
    color: var(--s7-icon, #6a7c95);
    padding: 0.5rem 0.9375rem 0.5rem 0.625rem;
    border-radius: var(--theme-radius-chip, 4px);
    transition:
        color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover {
    color: var(--theme-icon-on-brand) !important;
    background: var(--theme-sidebar-hover-bg);
    box-shadow: var(--theme-sidebar-item-hover-shadow);
    transform: translateX(2px);
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .ex-cat-icon {
    color: var(--theme-icon-on-brand) !important;
    stroke: var(--theme-icon-on-brand) !important;
    fill: none;
    background: var(--theme-icon-well-bg);
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.nav-icon.svg-inline--fa,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover svg.ex-cat-icon:not(.feather) {
    color: var(--theme-icon-on-brand) !important;
    fill: var(--theme-icon-on-brand) !important;
    stroke: none !important;
    background: var(--theme-icon-well-bg);
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    margin-inline-end: 0.65rem;
    padding: 0.28rem;
    box-sizing: border-box;
    border-radius: var(--theme-radius-control, 8px);
    font-size: var(--theme-text-base, 0.875rem);
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
    color: var(--theme-icon-on-brand) !important;
    background: var(--theme-icon-well-bg);
    box-shadow:
        var(--theme-icon-well-shadow);
    opacity: 1;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.feather,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.feather.nav-icon {
    stroke: var(--theme-icon-on-brand) !important;
    stroke-width: 2.25;
    fill: none !important;
    opacity: 1;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.nav-icon.svg-inline--fa,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a svg.ex-cat-icon:not(.feather) {
    color: var(--theme-icon-on-brand) !important;
    fill: var(--theme-icon-on-brand) !important;
    stroke: none !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li.ex-sidebar-nav-item--no-icon > a {
    padding-inline-start: calc(0.625rem + 1.75rem + 0.65rem);
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-sidebar-nav-caption {
    flex: 1 1 auto;
    min-width: 0;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-sidebar-badge {
    margin-inline-start: auto;
    flex-shrink: 0;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li.ex-sidebar-nav-item--favorites > a.ex-sidebar-nav-item__link {
    flex-wrap: nowrap;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-sidebar-fav-count,
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list li a .ex-sidebar-fav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-inline-start: 0.35rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: var(--theme-radius-pill, 999px);
    background: var(--theme-primary, #DD3E42);
    color: #fff;
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-bold, 700);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-sidebar-fav-count {
    margin-inline-start: auto;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-sidebar-fav-count[hidden],
.exchange-app .ex-schedule-subnav .ex-sidebar-nav-list li a .ex-sidebar-fav-count[hidden] {
    display: none !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li.ex-sidebar-nav-item--inplay {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li.ex-sidebar-nav-item--inplay > a.ex-sidebar-nav-item__link {
    flex: 1 1 auto;
    min-width: 0;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li.ex-sidebar-nav-item--inplay .ex-sidebar-live-badge {
    flex-shrink: 0;
    margin-right: 0.625rem;
    margin-left: 0;
}

/* In-Play uses the same Popular active plate on <a> — no li-level fill */

.exchange-app .ex-sidebar .ex-sidebar-nav-list li.has-child {
    position: relative;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li.has-child::after {
    position: absolute;
    top: 0.75rem;
    right: 0.625rem;
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    color: var(--s7-icon, #6a7c95);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list li.has-child > a .fa-angle-right {
    display: none !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] {
    /* Plate owned by unified active block below — do not reset to transparent token */
    color: var(--theme-sidebar-active-text, var(--theme-icon-on-brand)) !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] .ex-cat-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    background: #DD3E42 !important;
    border-radius: var(--theme-radius-control, 8px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(120, 10, 28, 0.35),
        0 1px 2px rgba(120, 10, 28, 0.35) !important;
}


.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active::after,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open::after,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child:has(> a[aria-expanded="true"])::after {
    color: var(--theme-sidebar-active-text, var(--theme-icon-on-brand)) !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-sub-nav {
    padding-inline-start: 1.5rem;
    margin-inline-start: 1.375rem;
    border-left: 1px solid var(--border-color);
    list-style: none;
    margin-bottom: 0;
    background: var(--ex-surface-submenu, transparent) !important;
    border-top: none !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-sub-nav li a {
    padding: 0.3125rem 0;
    font-size: var(--theme-text-base, 0.875rem);
    display: block;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-sub-nav li a.active {
    color: var(--color-primary) !important;
}

.exchange-app .ex-sidebar .ex-sidebar-menu-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-transform: uppercase;
    font-weight: var(--theme-weight-bold, 700);
    font-size: var(--theme-text-base, 0.875rem);
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin-top: 0.85rem !important;
    margin-bottom: 0.35rem;
    color: var(--theme-sidebar-section-text, var(--bp-slate-900));
    list-style: none;
    padding: 0.4rem 0.55rem 0.35rem 0.75rem;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    position: relative;
}

.exchange-app .ex-sidebar .ex-sidebar-menu-title > span {
    flex: 0 0 auto;
    white-space: nowrap;
    color: inherit;
}

.exchange-app .ex-sidebar .ex-sidebar-menu-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    min-width: 1rem;
    background: color-mix(in srgb, var(--theme-primary, #DD3E42) 55%, transparent);
}

.exchange-app .ex-sidebar .ex-sidebar-menu-title:first-child {
    margin-top: 0.35rem !important;
    padding-top: 0.25rem;
}

/* Collapsible sidebar sections — pink +/- toggle */
.exchange-app .ex-sidebar .ex-sidebar-section {
    list-style: none;
    margin: 0;
    padding: 0;
}

.exchange-app .ex-sidebar .ex-sidebar-section__toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    margin-top: 0.85rem;
    margin-bottom: 0.35rem;
    padding: 0.4rem 0.55rem 0.35rem 0.75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    text-transform: uppercase;
    font-family: inherit;
    font-weight: var(--theme-weight-bold, 700);
    font-size: var(--theme-text-base, 0.875rem);
    letter-spacing: 0.05em;
    line-height: 1.2;
    color: var(--theme-sidebar-section-text, var(--bp-slate-900));
}

/* Left pink accent — same as previous .ex-sidebar-menu-title::before */
.exchange-app .ex-sidebar .ex-sidebar-section__toggle::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0.35rem;
    bottom: 0.3rem;
    width: 3px;
    border-radius: var(--theme-radius-chip, 4px);
    background: var(--theme-primary, #DD3E42);
    pointer-events: none;
}

.exchange-app .ex-sidebar .ex-sidebar-section:first-child .ex-sidebar-section__toggle {
    margin-top: 0.35rem;
    padding-top: 0.25rem;
}

.exchange-app .ex-sidebar .ex-sidebar-section__label {
    flex: 0 0 auto;
    white-space: nowrap;
    color: inherit;
}

.exchange-app .ex-sidebar .ex-sidebar-section__rule {
    flex: 1 1 auto;
    height: 1px;
    min-width: 1rem;
    background: color-mix(in srgb, var(--theme-primary, #DD3E42) 55%, transparent);
}

.exchange-app .ex-sidebar .ex-sidebar-section__pm {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: var(--theme-radius-chip, 4px);
    font-family: "Inter", sans-serif;
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: var(--theme-weight-bold, 700);
    line-height: 1;
    color: var(--theme-btn-primary-text, #FFFFFF);
    background: var(--theme-primary, #DD3E42);
    box-shadow: none;
    user-select: none;
    pointer-events: auto;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.exchange-app .ex-sidebar .ex-sidebar-section__pm::before {
    content: "−";
}

.exchange-app .ex-sidebar .ex-sidebar-section:not(.is-open) .ex-sidebar-section__pm::before {
    content: "+";
}

/*
 * Hover background = sidebar icon color (cross-theme):
 *   Light → dark #111827
 *   Dark  → light #FFFFFF
 */
.exchange-app .ex-sidebar .ex-sidebar-section__pm:hover,
.exchange-app .ex-sidebar .ex-sidebar-section__toggle:hover .ex-sidebar-section__pm,
.exchange-app .ex-sidebar .ex-sidebar-section__toggle:focus-visible .ex-sidebar-section__pm {
    background: var(--ex-sidebar-icon, #111827) !important;
    background-color: var(--ex-sidebar-icon, #111827) !important;
    color: #FFFFFF !important;
    transform: scale(1.12);
    box-shadow: none !important;
    filter: none !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__pm:hover,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__toggle:hover .ex-sidebar-section__pm,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__toggle:focus-visible .ex-sidebar-section__pm,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__pm:hover,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__toggle:hover .ex-sidebar-section__pm,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__toggle:focus-visible .ex-sidebar-section__pm {
    background: var(--ex-sidebar-bg-dark, #111827) !important;
    background-color: var(--ex-sidebar-bg-dark, #111827) !important;
    color: #FFFFFF !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__pm:hover,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__toggle:hover .ex-sidebar-section__pm,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__toggle:focus-visible .ex-sidebar-section__pm,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__pm:hover,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__toggle:hover .ex-sidebar-section__pm,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__toggle:focus-visible .ex-sidebar-section__pm {
    background: var(--ex-sidebar-bg-light, #FFFFFF) !important;
    background-color: var(--ex-sidebar-bg-light, #FFFFFF) !important;
    color: #111827 !important;
}

.exchange-app .ex-sidebar .ex-sidebar-section__toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-primary, #DD3E42) 55%, transparent);
    outline-offset: 2px;
}

.exchange-app .ex-sidebar .ex-sidebar-section__body {
    list-style: none;
    margin: 0;
    padding: 0;
}

.exchange-app .ex-sidebar .ex-sidebar-section:not(.is-open) .ex-sidebar-section__body {
    display: none;
}

.exchange-app .ex-sidebar .ex-sidebar-section__body > li + li {
    margin-top: 0.1875rem;
}

/* Active row plate — Home / In-Play / Popular (beats legacy transparent token) */
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"],
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.open > a,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.has-child > a[aria-expanded="true"] {
    color: var(--ex-sidebar-ref-active-text, var(--theme-sidebar-active-text, #EEEEEE)) !important;
    background: var(--ex-surface-active-plate) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        inset -1px 0 0 rgba(0, 0, 0, 0.18),
        0 2px 0 #0B1220,
        0 3px 6px rgba(15, 23, 42, 0.28) !important;
    border-radius: var(--theme-radius-chip, 4px) !important;
    font-weight: 600 !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a {
    color: #111827 !important;
    background: var(--ex-surface-active-plate) !important;
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        inset 1px 0 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(15, 23, 42, 0.12),
        inset -1px 0 0 rgba(15, 23, 42, 0.06),
        0 2px 0 #A8B6C8,
        0 3px 6px rgba(0, 0, 0, 0.35) !important;
}

/* Active rows — same pink chip for Home / In-Play / Popular */
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a svg.ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.open > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.open > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a svg.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a svg.ex-cat-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    background: #DD3E42 !important;
    border-radius: var(--theme-radius-control, 8px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(120, 10, 28, 0.35),
        0 1px 2px rgba(120, 10, 28, 0.35) !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a i.nav-icon::before,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a i.ex-cat-icon::before {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

html.theme-light .exchange-app .ex-sidebar .ex-sidebar-menu-title,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-menu-title,
html.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__toggle,
.theme-light .exchange-app .ex-sidebar .ex-sidebar-section__toggle {
    color: #111827;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-menu-title,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-menu-title,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__toggle,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__toggle {
    color: #F1F5F9;
}

/* Kill legacy dropdown-widget chrome inside exchange sidebar */
.exchange-app .ex-sidebar .dropdown-widget ul {
    margin: 0;
    padding: 0;
    width: 100%;
    background: transparent !important;
}

.exchange-app .ex-sidebar .dropdown-widget ul .list-heading,
.exchange-app .ex-sidebar .dropdown-widget h5 {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.exchange-app .ex-sidebar .dropdown-widget ul li {
    border-bottom: none !important;
}

.exchange-app .ex-sidebar .dropdown-widget ul ul {
    border-top: none !important;
    background: transparent !important;
}

.exchange-app .ex-sidebar .dropdown-widget ul ul li a {
    padding-left: 0 !important;
}

/* Dark mode — match light active/hover emboss via theme tokens */
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li.has-child::after,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li.has-child::after {
    color: var(--theme-sidebar-text);
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a .nav-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a .nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-cat-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-cat-icon {
    color: var(--theme-icon-on-brand) !important;
    background: var(--theme-icon-well-bg);
    box-shadow: var(--theme-icon-well-shadow);
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover {
    color: var(--theme-icon-on-brand) !important;
    background: var(--theme-sidebar-hover-bg);
    box-shadow: var(--theme-sidebar-item-hover-shadow);
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .nav-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .ex-cat-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list li:not(.active):not(.open) > a:hover .ex-cat-icon {
    color: var(--theme-icon-on-brand) !important;
    stroke: var(--theme-icon-on-brand) !important;
    background: var(--theme-icon-well-bg);
    box-shadow: var(--theme-icon-well-shadow);
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"],
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] {
    /* Plate owned by Popular-parity block at file end */
    color: var(--theme-sidebar-active-text, #111827) !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .nav-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a .ex-cat-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .nav-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .ex-cat-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a .ex-cat-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] .nav-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] .nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] .ex-cat-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"] .ex-cat-icon {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    background: #DD3E42 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(120, 10, 28, 0.35),
        0 1px 2px rgba(120, 10, 28, 0.35) !important;
}


/* Mobile slide-out menu uses same s7 nav + scroll */
.exchange-app .sidebar-menu .ex-sidebar .ex-sidebar-nav-wrapper {
    height: calc(100vh - var(--ex-site-header-height, 7.5rem) - 2rem);
    max-height: calc(100vh - var(--ex-site-header-height, 7.5rem) - 2rem);
    padding: 0 0.5rem 0 1rem;
    scrollbar-gutter: stable;
    box-sizing: border-box;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-menu-title,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-menu-title {
    color: #F1F5F9;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Live dot in sidebar — keep green pulse, not pink well */
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-live-dot.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a .ex-live-dot {
    width: 0.5rem !important;
    min-width: 0.5rem !important;
    height: 0.5rem !important;
    margin-inline-end: 0.75rem;
    padding: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    background: #22c55e !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

/* Active/open rows keep contrast on hover (no primary flash) */
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a:hover,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a:hover,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"]:hover {
    color: var(--theme-sidebar-active-text, var(--theme-icon-on-brand)) !important;
    filter: brightness(1.06);
    box-shadow: var(--theme-sidebar-item-active-hover-shadow);
    transform: translateY(-1px);
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a:hover .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a:hover .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a:hover .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a:hover .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"]:hover .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"]:hover .ex-cat-icon {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    fill: #FFFFFF !important;
    background: #DD3E42 !important;
}


html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a:hover,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a:hover,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a:hover,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a:hover,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"]:hover,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"]:hover {
    color: var(--theme-sidebar-active-text, #111827) !important;
    box-shadow: var(--theme-sidebar-item-active-hover-shadow);
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a:hover .nav-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a:hover .nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a:hover .ex-cat-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list :is(> li, .ex-sidebar-section__body > li).active > a:hover .ex-cat-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a:hover .nav-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a:hover .nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a:hover .ex-cat-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.open > a:hover .ex-cat-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"]:hover .nav-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"]:hover .nav-icon,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"]:hover .ex-cat-icon,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.has-child > a[aria-expanded="true"]:hover .ex-cat-icon {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    fill: #FFFFFF !important;
    background: #DD3E42 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(120, 10, 28, 0.35),
        0 1px 2px rgba(120, 10, 28, 0.35) !important;
}


/* Beat color.php dynamic brand accent — exchange hovers use admin primary (var(--bp-brand-blue)).
   Exclude schedule tabs (handled in exchange-categories.css).
   Exclude drawer Deposit CTA (needs white label on brand fill). */
body.exchange-app .ex-sidebar .ex-sidebar-nav-list .ex-sidebar-sub-nav li a:hover,
body.exchange-app .sidebar-menu .sidebar-inner a:hover:not(.ex-sidebar-drawer-user__deposit),
body.exchange-app .inplay-slider a:hover,
body.exchange-app .inplay-area ul li a:not(.ex-inplay-match-tab):hover,
body.exchange-app .dropdown-widget ul li a:hover,
body.exchange-app .topbar-right a:hover,
body.exchange-app .ex-navbar-bottom .right-area-inner > a:hover,
body.exchange-app .single-sitebar-menu a:hover,
body.exchange-app .ex-event__teams a:hover,
body.exchange-app .ex-event__teams a:hover .ex-event__team,
body.exchange-app .ex-event__teams a:hover .ex-event__vs {
    color: var(--color-primary) !important;
}

body.exchange-app .ex-sidebar-drawer-user__deposit:hover,
body.exchange-app .ex-sidebar-drawer-user__deposit:focus-visible,
body.exchange-app .ex-sidebar-drawer-user__deposit:active {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body.exchange-app .navbar-top ul li a {
    color: var(--ex-nav-text) !important;
}

body.exchange-app .navbar-top ul li i,
body.exchange-app .navbar-top ul li svg {
    color: var(--ex-nav-icon) !important;
}

body.exchange-app .navbar-top ul li a:hover,
body.exchange-app .navbar-top ul li a:hover i,
body.exchange-app .navbar-top ul li a:hover svg {
    color: var(--color-primary) !important;
}

/* Collapsible sidebar rail — icon-only when collapsed on small screens */
.ex-sidebar-rail {
    min-width: 0;
}

.ex-sidebar__toggle {
    display: none;
}

.ex-sidebar__toggle-icon {
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
}

@media (max-width: 991.98px) {
    .exchange-app .ex-sidebar .ex-sidebar-nav-wrapper {
        padding: 0 0.35rem 0 0.5rem;
        scrollbar-gutter: auto;
    }

    .ex-sidebar__toggle {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2rem;
        padding: 0.35rem;
        margin-bottom: 0.35rem;
        border: 1px solid var(--ex-border, rgba(0, 0, 0, 0.12));
        border-radius: var(--theme-radius-chip, 4px);
        background: var(--ex-surface, var(--bp-white));
        color: var(--s7-icon, #6a7c95);
        cursor: pointer;
        flex-shrink: 0;
    }

    .theme-dark .ex-sidebar__toggle {
        background: var(--ex-surface);
        color: var(--theme-sidebar-text);
    }

    .ex-sidebar__toggle:hover,
    .ex-sidebar__toggle:focus-visible {
        color: var(--color-primary);
        border-color: var(--color-primary);
        outline: none;
    }

    .ex-sidebar-rail:not(.is-collapsed) .ex-sidebar__toggle-icon {
        transform: rotate(135deg);
    }

    .ex-sidebar-rail.is-collapsed .ex-sidebar .ex-sidebar-nav-wrapper {
        padding: 0 0.25rem;
        overflow-x: hidden;
    }

    .ex-sidebar-rail.is-collapsed .ex-sidebar-menu-title,
    .ex-sidebar-rail.is-collapsed .ex-sidebar-section__toggle,
    .ex-sidebar-rail.is-collapsed .ex-sidebar-section__toggle::before,
    .ex-sidebar-rail.is-collapsed .ex-sidebar-section__label,
    .ex-sidebar-rail.is-collapsed .ex-sidebar-section__rule,
    .ex-sidebar-rail.is-collapsed .ex-sidebar-section__pm,
    .ex-sidebar-rail.is-collapsed .ex-sidebar-nav-caption,
    .ex-sidebar-rail.is-collapsed .ex-sidebar-badge,
    .ex-sidebar-rail.is-collapsed .ex-sidebar-live-badge,
    .ex-sidebar-rail.is-collapsed .ex-sidebar-fav-count,
    .ex-sidebar-rail.is-collapsed .ex-sidebar-sub-nav,
    .ex-sidebar-rail.is-collapsed .ex-sidebar-fav-mark {
        display: none !important;
    }

    /* Icon rail: always show section body icons even if section was collapsed */
    .ex-sidebar-rail.is-collapsed .ex-sidebar-section__body {
        display: block !important;
    }

    .ex-sidebar-rail.is-collapsed .ex-sidebar-nav-list li a {
        justify-content: center;
        padding: 0.4rem 0.2rem;
    }

    .ex-sidebar-rail.is-collapsed .ex-sidebar__toggle {
        min-height: 1.75rem;
        padding: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .ex-sidebar-rail.is-collapsed .ex-sidebar-nav-list li.ex-sidebar-nav-item--no-icon > a {
        padding-inline-start: 0.35rem;
    }

    .ex-sidebar-rail.is-collapsed .ex-sidebar-nav-list li a .nav-icon,
    .ex-sidebar-rail.is-collapsed .ex-sidebar-nav-list li a .ex-cat-icon,
    .ex-sidebar-rail.is-collapsed .ex-sidebar-nav-list li a .ex-live-dot {
        margin-inline-end: 0 !important;
    }

    .ex-sidebar-rail.is-collapsed .ex-sidebar-nav-list li.has-child::after {
        display: none;
    }

    .ex-sidebar-rail.is-collapsed .ex-sidebar-nav-list > li + li {
        margin-top: 0.125rem;
    }
}

@media (min-width: 992px) {
    .ex-sidebar-rail.is-collapsed .ex-sidebar .ex-sidebar-nav-wrapper,
    .ex-sidebar-rail .ex-sidebar .ex-sidebar-nav-wrapper {
        padding: 0 1.25rem;
    }
}

/* Guest sidebar */
.exchange-app .ex-sidebar-guest {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.exchange-app .ex-sidebar-guest .ex-sidebar-nav-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    height: 0;
    overflow-y: auto;
}

.exchange-app .ex-sidebar-guest__empty {
    padding: 0.35rem 0.75rem 0.75rem;
    color: var(--para-color);
    font-size: var(--theme-text-md, 0.8125rem);
}

.exchange-app .ex-sidebar-guest__cta {
    flex-shrink: 0;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--ex-border, var(--border-color));
    background: var(--ex-surface-raised, var(--card-bg));
}

.exchange-app .ex-sidebar-guest__register {
    display: block;
    margin-top: 0.5rem;
    text-align: center;
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.exchange-app .ex-sidebar-guest__register:hover {
    text-decoration: underline;
}

.exchange-app .ex-sidebar-guest__register-hint {
    text-align: center;
    font-size: var(--theme-text-sm, 0.75rem);
    line-height: 1.35;
    color: var(--ex-text-muted, var(--text-muted, #6b7280));
    font-weight: 500;
}

/* ─── Legacy mobile drawer (#sidebar-menu-user) ───────────────────────────
   HyipAll style.css defined off-canvas rules for .sidebar-menu, but account
   pages use style-account.blade.php (no style.css). Without these rules the
   drawer stays in document flow, renders ~1500px tall, and pushes
   .ex-shell__main below the viewport. ─────────────────────────────────── */
.exchange-app .body-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1080;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.exchange-app .body-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.exchange-app .sidebar-menu {
    /* Standard mobile-drawer size tokens — zoom / small-viewport safe */
    --ex-drawer-w: min(18rem, calc(100vw - 1.25rem));
    --ex-drawer-logo-h: 32px;
    --ex-drawer-pad-x: max(0.875rem, env(safe-area-inset-right, 0px), env(safe-area-inset-left, 0px));
    --ex-drawer-pad-top: max(2.75rem, calc(env(safe-area-inset-top, 0px) + 2.5rem));
    --ex-drawer-pad-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    --ex-drawer-row-h: 2.5rem;
    --ex-drawer-icon: 1.125rem;
    --ex-drawer-fs: 0.8125rem;
    position: fixed;
    right: 0;
    top: 0;
    width: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 1090;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: width 0.35s ease, opacity 0.35s ease, visibility 0.35s ease;
}

.exchange-app .sidebar-menu .sidebar-inner {
    position: relative;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding:
        var(--ex-drawer-pad-top, 2.75rem)
        var(--ex-drawer-pad-x, 0.875rem)
        var(--ex-drawer-pad-bottom, 1rem);
    box-sizing: border-box;
}

.exchange-app .sidebar-menu.active {
    width: var(--ex-drawer-w, min(18rem, calc(100vw - 1.25rem))) !important;
    max-width: calc(100vw - 0.5rem);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.exchange-app .sidebar-menu.active .sidebar-inner {
    opacity: 1;
    visibility: visible;
}

/* Drawer brand mark — match header logo height (never full asset size) */
.exchange-app .sidebar-menu .ex-sidebar-drawer__logo {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0.75rem !important;
    max-width: 100%;
    line-height: 0;
    flex-shrink: 0;
}

.exchange-app .sidebar-menu .ex-sidebar-drawer__logo img {
    display: block;
    height: var(--ex-drawer-logo-h, 32px);
    max-height: var(--ex-drawer-logo-h, 32px);
    width: auto;
    max-width: min(9.5rem, 100%);
    object-fit: contain;
}

.exchange-app .sidebar-menu-close {
    position: absolute;
    top: max(0.5rem, env(safe-area-inset-top, 0px));
    right: max(0.5rem, env(safe-area-inset-right, 0px));
    z-index: 2;
    width: var(--ex-navbar-control-h, 2.75rem);
    height: var(--ex-navbar-control-h, 2.75rem);
    min-width: var(--ex-navbar-control-h, 2.75rem);
    min-height: var(--ex-navbar-control-h, 2.75rem);
}

/* Mobile drawer: user identity (header username moves here below lg) */
.exchange-app .ex-sidebar-drawer-user {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.6rem 0.65rem;
    border-radius: var(--theme-radius-control, 8px);
    border: 1px solid var(--ex-border, rgba(15, 23, 42, 0.12));
    background: var(--ex-surface, #ffffff);
    flex-shrink: 0;
}

html.theme-dark .exchange-app .ex-sidebar-drawer-user,
.theme-dark .exchange-app .ex-sidebar-drawer-user {
    border-color: rgba(255, 255, 255, 0.12);
    background: color-mix(in srgb, var(--ex-surface, #111827) 92%, #000);
}

.exchange-app .ex-sidebar-drawer-user__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    min-height: var(--ex-drawer-row-h, 2.5rem);
    padding: 0.35rem 0.55rem;
    border-radius: var(--theme-radius-control, 8px);
    background: #DD3E42;
    color: #FFFFFF;
}

.exchange-app .ex-sidebar-drawer-user__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--theme-radius-pill, 999px);
    background: color-mix(in srgb, #FFFFFF 18%, transparent);
    color: #FFFFFF;
}

.exchange-app .ex-sidebar-drawer-user__icon svg {
    width: var(--ex-drawer-icon, 1.125rem);
    height: var(--ex-drawer-icon, 1.125rem);
    stroke: #FFFFFF;
    stroke-width: 2;
}

.exchange-app .ex-sidebar-drawer-user__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.1rem;
}

.exchange-app .ex-sidebar-drawer-user__name {
    font-size: var(--ex-drawer-fs, 0.8125rem);
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exchange-app .ex-sidebar-drawer-user__email {
    font-size: var(--theme-text-xs, 0.6875rem);
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exchange-app .ex-sidebar-drawer-user__balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-sidebar-icon, #111827);
}

html.theme-dark .exchange-app .ex-sidebar-drawer-user__balance,
.theme-dark .exchange-app .ex-sidebar-drawer-user__balance {
    background: #FFFFFF;
}

.exchange-app .ex-sidebar-drawer-user__balance-label {
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 600;
    color: #FFFFFF;
}

html.theme-dark .exchange-app .ex-sidebar-drawer-user__balance-label,
.theme-dark .exchange-app .ex-sidebar-drawer-user__balance-label {
    color: #111827;
}

.exchange-app .ex-sidebar-drawer-user__balance-value {
    font-size: var(--theme-text-md, 0.8125rem);
    font-weight: 700;
    color: var(--ex-sidebar-icon, #111827);
}

html.theme-dark .exchange-app .ex-sidebar-drawer-user__balance-value,
.theme-dark .exchange-app .ex-sidebar-drawer-user__balance-value {
    color: var(--ex-sidebar-icon, #FFFFFF);
}

.exchange-app .ex-sidebar-drawer-user__balance-value.is-balance-healthy,
.exchange-app .ex-sidebar-drawer-user__balance-value.is-balance-low,
.exchange-app .ex-sidebar-drawer-user__balance-value.is-balance-critical {
    color: var(--ex-sidebar-icon, #111827);
}

html.theme-dark .exchange-app .ex-sidebar-drawer-user__balance-value.is-balance-healthy,
html.theme-dark .exchange-app .ex-sidebar-drawer-user__balance-value.is-balance-low,
html.theme-dark .exchange-app .ex-sidebar-drawer-user__balance-value.is-balance-critical,
.theme-dark .exchange-app .ex-sidebar-drawer-user__balance-value.is-balance-healthy,
.theme-dark .exchange-app .ex-sidebar-drawer-user__balance-value.is-balance-low,
.theme-dark .exchange-app .ex-sidebar-drawer-user__balance-value.is-balance-critical {
    color: var(--ex-sidebar-icon, #FFFFFF);
}

.exchange-app .ex-sidebar-drawer-user__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.exchange-app .ex-sidebar-drawer-user__deposit,
.exchange-app .ex-sidebar-drawer-user__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: var(--ex-drawer-row-h, 2.5rem);
    padding: 0.35rem 0.5rem;
    border-radius: var(--theme-radius-chip, 4px);
    border: 1px solid transparent;
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.exchange-app .ex-sidebar-drawer-user__deposit {
    color: var(--ex-sidebar-icon, #111827);
    background: transparent;
    border-color: transparent;
}

html.theme-dark .exchange-app .ex-sidebar-drawer-user__deposit,
.theme-dark .exchange-app .ex-sidebar-drawer-user__deposit {
    color: var(--ex-sidebar-icon, #FFFFFF);
    border-color: transparent;
}

.exchange-app .ex-sidebar-drawer-user__deposit:hover,
.exchange-app .ex-sidebar-drawer-user__deposit:focus-visible {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: var(--theme-btn-primary-bg, #DD3E42);
    border-color: transparent;
}

.exchange-app .ex-sidebar-drawer-user__deposit:active {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: var(--theme-btn-primary-hover, #DD3E42);
}

html.theme-dark .exchange-app .ex-sidebar-drawer-user__deposit:hover,
html.theme-dark .exchange-app .ex-sidebar-drawer-user__deposit:focus-visible,
html.theme-dark .exchange-app .ex-sidebar-drawer-user__deposit:active,
.theme-dark .exchange-app .ex-sidebar-drawer-user__deposit:hover,
.theme-dark .exchange-app .ex-sidebar-drawer-user__deposit:focus-visible,
.theme-dark .exchange-app .ex-sidebar-drawer-user__deposit:active {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: var(--theme-btn-primary-hover, #DD3E42);
}

.exchange-app .ex-sidebar-drawer-user__logout-form {
    margin: 0;
    min-width: 0;
}

.exchange-app .ex-sidebar-drawer-user__logout {
    width: 100%;
    color: var(--ex-sidebar-icon, #111827);
    background: transparent;
    border-color: var(--ex-border, rgba(15, 23, 42, 0.18));
}

html.theme-dark .exchange-app .ex-sidebar-drawer-user__logout,
.theme-dark .exchange-app .ex-sidebar-drawer-user__logout {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.2);
}

.exchange-app .ex-sidebar-drawer-user__logout:hover {
    color: #FFFFFF;
    background: #DD3E42;
    border-color: #DD3E42;
}

.exchange-app .ex-sidebar-drawer-user__logout svg {
    width: var(--ex-drawer-icon, 1.125rem);
    height: var(--ex-drawer-icon, 1.125rem);
    stroke-width: 2;
}

/* Nav list scrolls under compact chrome when zoomed / short viewports */
.exchange-app .sidebar-menu .ex-sidebar {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-height: 640px), (max-width: 400px) {
    .exchange-app .sidebar-menu {
        --ex-drawer-logo-h: 28px;
        --ex-drawer-pad-top: max(2.5rem, calc(env(safe-area-inset-top, 0px) + 2.25rem));
    }

    .exchange-app .sidebar-menu .ex-sidebar-drawer__logo {
        margin-bottom: 0.5rem !important;
    }

    .exchange-app .ex-sidebar-drawer-user {
        margin-bottom: 0.65rem;
        padding: 0.45rem 0.5rem 0.5rem;
        gap: 0.35rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Popular active = source of truth for Home / In-Play / Fixtures / Results /
   Favorites. High-specificity so legacy In-Play / token rules cannot diverge.
   ═══════════════════════════════════════════════════════════════════════════ */
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--nav.active,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--favorites.active,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.active {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--nav.active > a.ex-sidebar-nav-item__link,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a.ex-sidebar-nav-item__link,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--favorites.active > a.ex-sidebar-nav-item__link,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a.ex-sidebar-nav-item__link,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a {
    color: #EEEEEE !important;
    background: var(--ex-surface-active-plate) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        inset -1px 0 0 rgba(0, 0, 0, 0.18),
        0 2px 0 #0B1220,
        0 3px 6px rgba(15, 23, 42, 0.28) !important;
    border-radius: var(--theme-radius-chip, 4px) !important;
    font-weight: 600 !important;
    transform: none !important;
}

html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--nav.active > a.ex-sidebar-nav-item__link,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--nav.active > a.ex-sidebar-nav-item__link,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a.ex-sidebar-nav-item__link,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a.ex-sidebar-nav-item__link,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--favorites.active > a.ex-sidebar-nav-item__link,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--favorites.active > a.ex-sidebar-nav-item__link,
html.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a,
.theme-dark .exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a {
    color: #111827 !important;
    background: var(--ex-surface-active-plate) !important;
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        inset 1px 0 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(15, 23, 42, 0.12),
        inset -1px 0 0 rgba(15, 23, 42, 0.06),
        0 2px 0 #A8B6C8,
        0 3px 6px rgba(0, 0, 0, 0.35) !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--nav.active > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--nav.active > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--favorites.active > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--favorites.active > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a .nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a .ex-cat-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--nav.active > a svg.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a svg.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--favorites.active > a svg.nav-icon,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a svg.ex-cat-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    background: #DD3E42 !important;
    border-radius: var(--theme-radius-control, 8px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(120, 10, 28, 0.35),
        0 1px 2px rgba(120, 10, 28, 0.35) !important;
    filter: none !important;
    opacity: 1 !important;
    line-height: 0 !important;
}

.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--nav.active > a i.nav-icon::before,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--inplay.active > a i.nav-icon::before,
.exchange-app .ex-sidebar .ex-sidebar-nav-list > li.ex-sidebar-nav-item--favorites.active > a i.nav-icon::before,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a i.nav-icon::before,
.exchange-app .ex-sidebar .ex-sidebar-section__body > li.active > a i.ex-cat-icon::before {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ===== exchange-sidebar-chrome.css ===== */
/**
 * WP11 — Sidebar chrome hit floors & tracking
 * Load AFTER exchange-sidebar.css (+ sidebar-ref).
 * Section toggles ≥36 · nav links ≥40 · logout ≥40 · collapsed rail ≥40.
 * No IA / icon / active-pill redesign.
 */

/* Section heads — calmer tracking, tappable */
.exchange-app .ex-sidebar .ex-sidebar-section__toggle {
  min-height: var(--theme-control-height-secondary, 36px);
  letter-spacing: 0.02em;
  box-sizing: border-box;
}

/* Nav rows — 40px floor */
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a,
.exchange-app .ex-sidebar .ex-sidebar-nav-list li a.ex-sidebar-nav-item__link {
  min-height: var(--theme-control-height-primary, 40px);
  box-sizing: border-box;
}

/* Drawer Deposit / Logout — full hit area */
.exchange-app .ex-sidebar-drawer-user__deposit,
.exchange-app .ex-sidebar-drawer-user__logout {
  min-height: var(--theme-control-height-primary, 40px);
  min-width: var(--theme-control-height-primary, 40px);
  font-size: var(--theme-text-md, 0.8125rem);
}

/* Collapsed icon rail — keep ≥40 hit */
@media (min-width: 992px) {
  .ex-sidebar-rail.is-collapsed .ex-sidebar__toggle {
    min-height: var(--theme-control-height-primary, 40px);
    min-width: var(--theme-control-height-primary, 40px);
    padding: 0.35rem;
  }

  .ex-sidebar-rail.is-collapsed .ex-sidebar-nav-list li a {
    min-height: var(--theme-control-height-primary, 40px);
    min-width: var(--theme-control-height-primary, 40px);
    justify-content: center;
    padding: 0.35rem 0.2rem;
  }
}

/* ===== exchange-responsive.css ===== */
/**
 * Hybrid responsive layout — mobile-first priority:
 * phone (≤575) → tablet (576–991) → laptop (992–1199) → desktop (≥1200).
 * Loaded last among exchange styles. Uses layout tokens + container queries.
 */

.exchange-app {
    --ex-sidebar-full: 13.75rem;
    --ex-sidebar-icon: 2.75rem;
    --ex-sidebar-tablet: 9.5rem;
    --ex-shell-gap: var(--theme-space-shell-gap, 0.75rem);
    /* Mobile-first tokens */
    --ex-touch-min: 2.75rem;
    --ex-touch-comfort: 3rem;
    --ex-font-min: 0.75rem;
    --ex-safe-top: env(safe-area-inset-top, 0px);
    --ex-safe-right: env(safe-area-inset-right, 0px);
    --ex-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ex-safe-left: env(safe-area-inset-left, 0px);
    -webkit-tap-highlight-color: rgba(33, 150, 243, 0.15);
}

/* ─── Main column — size-aware event cards (zoom + sidebar expand) ─────────── */
.ex-shell__main {
    container-type: inline-size;
    container-name: ex-main;
}

@container ex-main (max-width: 520px) {
    /* User account bet slip — larger tap targets */
    .exchange-account-layout .bet-slip-modal .ex-price,
    .exchange-account-layout #betSlipDock .ex-price {
        min-height: var(--ex-touch-min, 2.75rem);
        font-size: max(var(--ex-font-min, 0.75rem), 0.75rem);
    }
}

/* ─── Tablet hybrid (992–1199): narrow sidebar + full-width main ─────────── */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ex-shell:not(.ex-shell--user) {
        grid-template-columns: minmax(0, var(--ex-sidebar-tablet)) minmax(0, 1fr);
        gap: 0.5rem;
    }

    .ex-shell__sidebar {
        max-height: calc(100dvh - var(--ex-site-header-height, 7.5rem) - var(--ex-site-header-gap, 0.75rem) - 1rem);
    }
}

@media (max-width: 991.98px) {
    .ex-shell__main {
        overflow-x: visible;
        scrollbar-gutter: auto;
    }
}

/* ─── Top nav: single row at all sub-desktop widths ──────────────────────── */
@media (max-width: 1199.98px) {
    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest):not(.ex-navbar-bottom__grid--user) {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) !important;
        grid-template-areas: "start center actions" !important;
        row-gap: 0 !important;
        align-items: center;
    }

    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest):not(.ex-navbar-bottom__grid--user) .ex-navbar-bottom__center {
        padding-bottom: 0 !important;
        min-width: 0;
    }

    .exchange-app .ex-header-user-meta__item,
    .exchange-app .ex-header-user-meta__user-toggle {
        min-width: clamp(1.75rem, 3.5vw, 3.5rem);
        padding: clamp(0.1rem, 0.5vw, 0.35rem) clamp(0.15rem, 0.6vw, 0.4rem);
    }

    .exchange-app .ex-header-user-meta__label:not(.ex-header-user-balance),
    .exchange-app .ex-header-user-meta__label--user {
        font-size: clamp(var(--theme-text-xs, 0.6875rem), 1.8vw, var(--theme-text-sm, 0.75rem));
        max-width: clamp(2.5rem, 8vw, 5.5rem);
    }

    .exchange-app .ex-header-user-meta__icon {
        width: clamp(1.5rem, 4vw, 2.25rem);
        height: clamp(1.5rem, 4vw, 2.25rem);
    }

    .exchange-app .ex-header-user-meta__icon svg {
        width: clamp(1rem, 3vw, 1.625rem);
        height: clamp(1rem, 3vw, 1.625rem);
    }

    /* Legacy meta header only — guest/user logo sizing lives in exchange-theme.css */
    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest):not(.ex-navbar-bottom__grid--user) .ex-navbar-bottom__logo img {
        max-height: clamp(2rem, 6vw, 3rem);
        max-width: min(120px, 28vw);
    }

    .exchange-app .ex-navbar-bottom__actions,
    .exchange-app .ex-header-actions {
        flex-wrap: nowrap !important;
    }

    /* Legacy icon hit areas only; guest/user use compact icons in theme breakpoints */
    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest):not(.ex-navbar-bottom__grid--user) .ex-navbar-bottom__actions .ex-menubar-btn,
    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest):not(.ex-navbar-bottom__grid--user) .ex-navbar-bottom__actions .ex-notification-btn,
    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest):not(.ex-navbar-bottom__grid--user) .ex-navbar-bottom__actions .switch {
        width: clamp(1.875rem, 5vw, 2.5rem);
        height: clamp(1.875rem, 5vw, 2.5rem);
        flex-shrink: 0;
    }

    .exchange-app .ex-lang-btn__label {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .exchange-app .ex-header-actions__user-name {
        max-width: 4.25rem;
    }

    .exchange-app .ex-header-actions__session {
        max-width: min(100%, 16rem);
        gap: 0.2rem;
        overflow: visible;
    }

    .exchange-app .ex-header-actions__wallet {
        max-width: 8rem;
        flex-shrink: 0;
        min-width: 0;
    }

    .exchange-app .ex-header-actions__wallet .ex-header-user-balance-mount,
    .exchange-app .ex-header-actions__wallet .ex-header-user-balance {
        max-width: 8rem;
        font-size: var(--theme-text-sm, 0.75rem);
        overflow: visible;
    }

    .exchange-app .ex-header-actions__wallet .ex-header-user-balance__amount {
        overflow: visible;
        text-overflow: clip;
        font-size: var(--theme-text-sm, 0.75rem);
        font-weight: 700;
    }

    .exchange-app .ex-header-user-meta__label:not(.ex-header-user-balance),
    .exchange-app .ex-header-user-meta__label--user {
        display: none;
    }

    .exchange-app .ex-header-user-meta__item--wallet .ex-header-user-balance {
        display: inline-flex !important;
        font-size: var(--theme-text-sm, 0.75rem);
        max-width: 8rem;
    }
}

/* Tablet: show full labels in sidebar, hide collapse chrome */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .exchange-app .ex-sidebar__toggle {
        display: none !important;
    }

    .exchange-app .ex-sidebar-rail.is-collapsed .ex-sidebar-nav-caption,
    .exchange-app .ex-sidebar-rail.is-collapsed .ex-sidebar-live-badge,
    .exchange-app .ex-sidebar-rail.is-collapsed .ex-sidebar-menu-title {
        display: inline !important;
    }

    .exchange-app .ex-sidebar-rail.is-collapsed .ex-sidebar-nav-list li a {
        justify-content: flex-start;
        padding: 0.45rem 0.5rem;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 500px) {
    .ex-shell {
        padding-bottom: 1rem;
    }
}

/* ─── QW13 — Targeted mobile fixes (bet slip, ladder, tables, header) ─────── */

@media (max-width: 575.98px) {
    /* Centered compact card — not full-width / full-height sheet */
    .bet-slip-modal.modal {
        align-items: center;
        justify-content: center;
        padding: 0.75rem;
    }

    .bet-slip-modal .bet-slip-modal__dialog,
    .bet-slip-modal .bet-slip-modal__dialog.modal-dialog-scrollable {
        width: min(360px, calc(100vw - 1.5rem));
        max-width: min(360px, calc(100vw - 1.5rem));
        margin: 0 auto;
        height: auto;
        min-height: 0;
        max-height: min(78dvh, calc(100dvh - 1.5rem));
    }

    .bet-slip-modal .bet-slip-dock {
        border-radius: var(--ex-panel-radius, 10px);
        height: auto;
        max-height: min(78dvh, calc(100dvh - 1.5rem));
    }

    .bet-slip-modal .modal-body.modal-content-cust,
    .bet-slip-modal .modal-body.ex-betslip-modal-body {
        flex: 0 1 auto;
        max-height: min(58dvh, calc(78dvh - 5.5rem));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0 !important;
    }

    .ex-match-header__title {
        font-size: var(--theme-text-lg-plus, 1rem);
        line-height: 1.25;
    }

    .ex-match-header-details {
        font-size: var(--theme-text-xs, 0.6875rem);
    }

    .ex-cricket-xi__grid {
        grid-template-columns: 1fr;
    }

    .ex-table-wrap:not(.ex-table-wrap--stack) .ex-table {
        min-width: 34rem;
    }

    .ex-personalization-strip__links {
        gap: 0.35rem;
    }

    .ex-personalization-chip {
        max-width: 100%;
    }

    .ex-odds-movement-log__item {
        padding: 0.45rem 0.65rem;
    }

    #ex-odds-movement-log-body.collapse:not(.show) {
        border-top: 0;
    }
}

@media (min-width: 576px) {
    #ex-odds-movement-log-body.collapse {
        display: block !important;
        height: auto !important;
        visibility: visible;
    }
}


/* ===== exchange-betslip-shell.css ===== */
/**
 * Bet slip shell — desktop right rail + mobile bottom sheet.
 * Header/text/spacing match site topo (header) + schedule group-head chrome.
 */
#betSlipDock.ex-betstrip,
#betSlipDock.ex-betslip-shell {
    --ex-betslip-font: inherit;
    --ex-betslip-fs: 0.8125rem;
    --ex-betslip-fs-sm: 0.75rem;
    --ex-betslip-fs-xs: 0.6875rem;
    --ex-betslip-pad-x: 0.75rem;
    --ex-betslip-gap: 0.45rem;
    font-family: var(--ex-betslip-font);
    font-size: var(--ex-betslip-fs);
    line-height: 1.25;
    color: var(--h-color, var(--theme-text-primary));
}

.ex-shell__betstrip > #betSlipDock.ex-betstrip,
#betSlipDock.ex-betstrip {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: var(--ex-panel-radius, 10px);
    border: 1px solid var(--ex-border, var(--border-color));
    outline: none !important;
    background: var(--ex-market-bg, var(--card-bg)) !important;
    box-shadow: var(--ex-inplay-panel-shadow, var(--ex-shadow));
    isolation: isolate;
    box-sizing: border-box;
}

@media (max-width: 991.98px) {
    .ex-shell__betstrip > #betSlipDock.ex-betstrip,
    #betSlipDock.ex-betstrip {
        border-radius: var(--theme-radius-panel, 8px);
        /* No white/light outer ring on mobile sheet */
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        height: auto;
        max-height: inherit;
    }
}

/* Header — same scoop chrome as .ex-inplay-group__head (category plate + red tab) */
#betSlipDock.ex-betstrip > .ex-betstrip__head.ex-betslip-head {
    /* Fixed amber plate — scoped-only redeclaration of the shared
       category-head tokens, so this affects just the bet slip header
       (icon/title/close-button all read the same var() names) without
       touching sport-group headers elsewhere that share those tokens. */
    --ex-surface-category-head: var(--bp-warning-strong, #f59e0b);
    --theme-schedule-category-head-bg: var(--bp-warning-strong, #f59e0b);
    --ex-schedule-category-head-text: var(--bp-black, #000000);
    --theme-schedule-category-head-text: var(--bp-black, #000000);
    --ex-head-corner: 2.5rem;
    --ex-head-scoop: 0.65rem;
    /* Zeroed (was 1px): the ::before below masked in a thin
       --theme-primary line (reads pink against the amber plate)
       across the top edge. Same fix as .ex-inplay-group__head's own
       --ex-head-top-line — the ::before still draws the icon's scoop
       corner cutout via its second mask layer, untouched. */
    --ex-head-top-line: 0px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-shrink: 0;
    z-index: 1;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0.375rem var(--ex-betslip-pad-x) 0.375rem calc(var(--ex-head-corner) + 0.45rem) !important;
    min-height: 2.25rem !important;
    height: auto !important;
    max-height: none !important;
    border: none !important;
    border-bottom: 1px solid var(--ex-schedule-category-head-border, var(--ex-border)) !important;
    border-radius: 0 !important;
    background: var(--ex-surface-category-head, var(--theme-schedule-category-head-bg, #2A3446)) !important;
    background-color: var(--ex-surface-category-head, var(--theme-schedule-category-head-bg, #2A3446)) !important;
    background-image: none !important;
    color: var(--ex-schedule-category-head-text, var(--theme-schedule-category-head-text, #EEEEEE)) !important;
    box-shadow: none;
    font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
    overflow: hidden;
    isolation: isolate;
}

/* Merged top line + inverted-radius corner (same contract as sport group head) */
#betSlipDock.ex-betstrip > .ex-betstrip__head.ex-betslip-head::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--theme-primary, #DD3E42);
    border-radius: 0;
    -webkit-mask:
        linear-gradient(var(--bp-black, #000) 0 0) 0 0 / 100% var(--ex-head-top-line) no-repeat,
        radial-gradient(
            circle var(--ex-head-scoop) at 100% 100%,
            transparent 98%,
            var(--bp-black, #000) 99%
        ) 0 0 / var(--ex-head-corner) 100% no-repeat;
    mask:
        linear-gradient(var(--bp-black, #000) 0 0) 0 0 / 100% var(--ex-head-top-line) no-repeat,
        radial-gradient(
            circle var(--ex-head-scoop) at 100% 100%,
            transparent 98%,
            var(--bp-black, #000) 99%
        ) 0 0 / var(--ex-head-corner) 100% no-repeat;
    -webkit-mask-composite: source-over;
    mask-composite: add;
    pointer-events: none;
    z-index: 0;
}

#betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ex-head-corner);
    height: 100%;
    flex-shrink: 0;
    color: var(--bp-white, #fff);
    pointer-events: none;
}

#betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__icon .ex-cat-icon,
#betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__icon svg.ex-cat-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--bp-white, #FFFFFF) !important;
    fill: none !important;
    stroke: currentColor !important;
}

#betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__title {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ex-schedule-category-head-text, var(--theme-schedule-category-head-text, #EEEEEE)) !important;
    font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem)) !important;
    font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600)) !important;
    line-height: 1.2;
    letter-spacing: 0;
}

/* Mobile multi-bet-slip: header count + "Clear All", Teleported from
   BetSlip.vue (empty/display:none on desktop — the Teleport itself is
   v-if gated off there, so this is a defensive second layer, matching
   the pill above). */
.ex-betstrip__head-actions {
    display: none;
}

@media (max-width: 991.98px) {
    #betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__head-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
        /* No position:relative here — it accidentally became the drag
           handle's containing block (the handle is a child of this
           element, absolutely positioned expecting to anchor against
           .ex-betstrip__head, which is already position:relative
           itself), which pulled the handle down into this row instead
           of the true top of the header, rendering as a stray line
           overlapping "Clear All". z-index still applies without
           position here because this is a flex item of .ex-betstrip__head
           (flex/grid items respect z-index regardless of position). */
        z-index: 2;
    }

    .ex-betstrip__head-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.35rem;
        height: 1.35rem;
        padding: 0 0.3rem;
        border-radius: var(--theme-radius-full, 999px);
        background: color-mix(in srgb, var(--ex-schedule-category-head-text, #EEEEEE) 22%, transparent);
        color: var(--ex-schedule-category-head-text, #EEEEEE);
        font-size: var(--theme-text-xs, 0.6875rem);
        font-weight: var(--theme-weight-bold, 700);
        font-variant-numeric: tabular-nums;
    }

    .ex-betstrip__head-clear {
        border: none;
        background: transparent;
        color: var(--ex-schedule-category-head-text, #EEEEEE);
        font-size: var(--theme-text-sm, 0.75rem);
        font-weight: var(--theme-weight-semibold, 600);
        text-decoration: underline;
        padding: 0;
        cursor: pointer;
    }

    .ex-betstrip__head-clear:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Quick-stake settings icon — small icon-only button matching the
       header's existing count/clear sizing (the header itself is only
       42px tall, so a full 44px touch target doesn't fit here; the row
       already relies on the same modest hit areas for count/Clear All). */
    .ex-betstrip__head-settings {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        border: none;
        border-radius: var(--theme-radius-chip, 4px);
        background: transparent;
        color: var(--ex-schedule-category-head-text, #EEEEEE);
        cursor: pointer;
    }

    .ex-betstrip__head-settings:hover,
    .ex-betstrip__head-settings:focus-visible {
        background: color-mix(in srgb, var(--ex-schedule-category-head-text, #EEEEEE) 18%, transparent);
    }

    /* Drag handle — visual affordance + the swipe-to-close hit target
       (useBetSlipSheetGesture.js delegates on #ex-betstrip-drag-handle).
       Absolutely positioned above the header content; the header itself
       already has position:relative. */
    #betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__drag-handle {
        position: absolute;
        top: 0.35rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2.25rem;
        height: 0.25rem;
        border-radius: var(--theme-radius-full, 999px);
        background: color-mix(in srgb, var(--ex-schedule-category-head-text, #EEEEEE) 40%, transparent);
        touch-action: none;
        z-index: 2;
    }
}

#betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__close {
    position: relative;
    z-index: 2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    margin: 0 0 0 auto;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--ex-schedule-category-head-text, #EEEEEE) 28%, transparent) !important;
    border-radius: var(--theme-radius-chip, 4px) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--ex-schedule-category-head-text, #EEEEEE) !important;
    opacity: 1;
    filter: none !important;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

#betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__close:hover,
#betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__close:focus-visible {
    opacity: 1;
    background-color: var(--theme-primary, #DD3E42) !important;
    background-image: none !important;
    border-color: var(--theme-primary, #DD3E42) !important;
    color: var(--bp-white, #fff) !important;
    filter: none !important;
}

html.theme-dark #betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__close,
.theme-dark #betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__close {
    color: #F8FAFC !important;
    border-color: color-mix(in srgb, #F8FAFC 28%, transparent) !important;
    filter: none !important;
    opacity: 1;
}

html.theme-dark #betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__close:hover,
html.theme-dark #betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__close:focus-visible,
.theme-dark #betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__close:hover,
.theme-dark #betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__close:focus-visible {
    opacity: 1;
    background-color: var(--theme-primary, #DD3E42) !important;
    border-color: var(--theme-primary, #DD3E42) !important;
    color: var(--bp-white, #fff) !important;
    filter: none !important;
}

#betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__close::before {
    content: "\00d7" !important;
    display: block !important;
    font-size: var(--theme-text-3xl, 1.5rem);
    font-weight: 700;
    line-height: 1;
    color: inherit;
}

#betSlipDock.ex-betstrip > .ex-betstrip__body {
    flex: 1 1 auto;
    min-height: 0;
    z-index: 1;
    padding: 0 !important;
    background: var(--ex-market-bg, var(--card-bg)) !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: var(--h-color);
    font-size: var(--ex-betslip-fs);
}

#betSlipDock.ex-betstrip .ex-betslip-footer-mount {
    flex-shrink: 0;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

#betSlipDock.ex-betstrip .ex-betslip-footer-mount:empty {
    display: none;
}

/* Place / Done — theme primary (matches Deposit / header CTA) */
#betSlipDock.ex-betstrip .ex-betslip-place.ex-betslip-bar,
#betSlipDock.ex-betstrip .ex-betslip-place.btn-base.ex-betslip-bar {
    width: 100%;
    height: var(--theme-control-height-primary, 40px);
    min-height: var(--theme-control-height-primary, 40px);
    max-height: var(--theme-control-height-primary, 40px);
    margin: 0;
    padding: 0 var(--theme-space-4, 1rem);
    border: none !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: none;
    box-sizing: border-box;
    cursor: pointer;
    background: var(--theme-primary, #DD3E42) !important;
    background-image: none !important;
    color: var(--bp-white, #FFFFFF) !important;
    box-shadow: none;
    transition: background-color 0.15s ease, filter 0.15s ease;
}

#betSlipDock.ex-betstrip .ex-betslip-place.ex-betslip-bar:hover:not(:disabled),
#betSlipDock.ex-betstrip .ex-betslip-place.btn-base.ex-betslip-bar:hover:not(:disabled) {
    background: color-mix(in srgb, var(--theme-primary, #DD3E42) 88%, var(--bp-black, #000)) !important;
    color: var(--bp-white, #FFFFFF) !important;
    filter: none;
}

#betSlipDock.ex-betstrip .ex-betslip-place.ex-betslip-bar:active:not(:disabled) {
    background: color-mix(in srgb, var(--theme-primary, #DD3E42) 78%, var(--bp-black, #000)) !important;
}

#betSlipDock.ex-betstrip .ex-betslip-place.ex-betslip-bar:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: none;
}

/* Place Bet button always uses the fixed brand color (base rule above),
   never the selected Home/Draw/Away outcome's tone — a consistent,
   "logical" action color regardless of which side was picked. Desktop
   and tablet keep this brand-red always; mobile gets its own green
   accent below, per explicit request. */
@media (max-width: 991.98px) {
    #betSlipDock.ex-betstrip .ex-betslip-place.ex-betslip-bar,
    #betSlipDock.ex-betstrip .ex-betslip-place.btn-base.ex-betslip-bar {
        background: var(--ex-place-bet-bg, #16A34A) !important;
        color: var(--bp-white, #FFFFFF) !important;
    }

    #betSlipDock.ex-betstrip .ex-betslip-place.ex-betslip-bar:hover:not(:disabled),
    #betSlipDock.ex-betstrip .ex-betslip-place.btn-base.ex-betslip-bar:hover:not(:disabled) {
        background: var(--ex-place-bet-bg-hover, #15803D) !important;
        color: var(--bp-white, #FFFFFF) !important;
        filter: none;
    }

    #betSlipDock.ex-betstrip .ex-betslip-place.ex-betslip-bar:active:not(:disabled) {
        background: var(--ex-place-bet-bg-active, #166534) !important;
    }
}

/* ─── Content island — topo typography / spacing ─────────────────────────── */
#betSlipDock.ex-betstrip .ex-betslip-vue {
    color: var(--h-color);
    font-size: var(--ex-betslip-fs);
}

#betSlipDock.ex-betstrip .ex-betslip-muted {
    color: var(--ex-muted, var(--para-color)) !important;
    font-size: var(--ex-betslip-fs-sm) !important;
    line-height: 1.35;
}

#betSlipDock.ex-betstrip .ex-betslip-strong {
    color: var(--h-color) !important;
    font-weight: 700;
}

#betSlipDock.ex-betstrip .ex-betslip-link {
    color: var(--theme-primary, #DD3E42) !important;
    font-weight: 600;
    text-decoration: none;
}

#betSlipDock.ex-betstrip .ex-betslip-link:hover {
    color: var(--theme-btn-primary-hover, #DD3E42) !important;
    text-decoration: underline;
}

#betSlipDock.ex-betstrip .ex-betslip-view-match {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    margin: 0;
    padding: 0.3rem 0.55rem;
    border-top: 1px solid var(--ex-border);
    font-size: var(--ex-betslip-fs-sm);
    font-weight: 600;
    color: var(--theme-primary, #DD3E42) !important;
    text-decoration: none;
}

#betSlipDock.ex-betstrip .ex-betslip-view-match:hover {
    color: var(--theme-btn-primary-hover, #DD3E42) !important;
    text-decoration: underline;
}

#betSlipDock.ex-betstrip .ex-betslip-clear:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: none;
}

#betSlipDock.ex-betstrip .ex-betslip-sheet--idle .ex-betslip-stake-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#betSlipDock.ex-betstrip .ex-betslip-selection-card--idle {
    opacity: 0.92;
}

#betSlipDock.ex-betstrip .ex-betslip-selection-card--idle .ex-betslip-selection-card__runner,
#betSlipDock.ex-betstrip .ex-betslip-selection-card--idle .ex-betslip-selection-card__odds {
    color: var(--ex-muted, var(--para-color));
}

#betSlipDock.ex-betstrip .ex-betslip-alert--hint {
    color: var(--ex-muted, var(--para-color));
    font-size: var(--ex-betslip-fs-sm);
    margin: 0;
    padding: 0.2rem 0;
    background: transparent;
    border: 0;
}

/* Idle sheet still shows full quick structure on desktop rail */
/* Desktop only: content fonts + hug height (no empty white panel). Mobile untouched. */
@media (min-width: 992px) {
    #betSlipDock.ex-betstrip,
    #betSlipDock.ex-betslip-shell {
        --ex-betslip-fs: 0.875rem;
        --ex-betslip-fs-sm: 0.8125rem;
        --ex-betslip-fs-xs: 0.75rem;
    }

    .ex-shell__betstrip > #betSlipDock.ex-betstrip,
    #betSlipDock.ex-betstrip {
        flex: 0 1 auto;
        height: auto;
        max-height: 100%;
        min-height: 0;
    }

    #betSlipDock.ex-betstrip > .ex-betstrip__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    #betSlipDock.ex-betstrip .ex-betstrip__title {
        font-size: var(--theme-text-md, 0.8125rem) !important;
    }

    #betSlipDock.ex-betstrip .ex-betslip-selection-card__runner,
    #betSlipDock.ex-betstrip .ex-betslip-selection-card--compact .ex-betslip-selection-card__head {
        font-size: var(--theme-text-md, 0.8125rem) !important;
    }

    #betSlipDock.ex-betstrip .ex-betslip-selection-card__odds {
        font-size: var(--theme-text-base, 0.875rem) !important;
    }

    #betSlipDock.ex-betstrip .ex-betslip-stake-block__input,
    #betSlipDock.ex-betstrip .ex-betslip-vue .form-input {
        font-size: var(--theme-text-base, 0.875rem) !important;
    }

    #betSlipDock.ex-betstrip .ex-betslip-stake-chip,
    #betSlipDock.ex-betstrip .ex-betslip-quick__chip {
        font-size: var(--theme-text-sm, 0.75rem) !important;
    }

    #betSlipDock.ex-betstrip .ex-betslip-place.ex-betslip-bar {
        font-size: var(--theme-text-md, 0.8125rem) !important;
    }

    /* Drop reserved empty message row (spacer / idle gap) */
    #betSlipDock.ex-betstrip .ex-betslip-messages:has(.ex-betslip-messages__spacer) {
        display: none;
    }

    #betSlipDock.ex-betstrip .ex-betslip-messages {
        min-height: 0;
    }

    #betSlipDock.ex-betstrip .ex-betslip-sheet--idle .ex-betslip-messages:has(.ex-betslip-alert--hint) {
        display: flex;
        min-height: 0;
    }
}

#betSlipDock.ex-betstrip .ex-betslip-sheet {
    display: flex;
    flex-direction: column;
    gap: var(--ex-betslip-gap);
    padding: 0.55rem var(--ex-betslip-pad-x) 0.7rem;
    margin: 0;
}

#betSlipDock.ex-betstrip .ex-betslip-sheet > * {
    margin-inline: 0 !important;
    margin-top: 0 !important;
}

#betSlipDock.ex-betstrip .ex-betslip-toolbar {
    gap: 0.4rem;
}

#betSlipDock.ex-betstrip .ex-betslip-toolbar__avail {
    font-size: var(--ex-betslip-fs-xs);
    color: var(--ex-muted, var(--para-color));
}

#betSlipDock.ex-betstrip .ex-betslip-toolbar__avail strong {
    color: var(--h-color);
    font-weight: 700;
}

#betSlipDock.ex-betstrip .ex-betslip-mode {
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-surface-subhead, var(--ex-schedule-section-head-bg));
    border: 1px solid var(--ex-border);
    padding: 0.12rem;
}

#betSlipDock.ex-betstrip .ex-betslip-mode__btn {
    font-size: var(--ex-betslip-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 0.28rem 0.55rem;
    color: var(--ex-nav-text, var(--para-color));
}

#betSlipDock.ex-betstrip .ex-betslip-mode__btn.is-active {
    background: var(--ex-surface-active-plate);
    color: var(--ex-surface-active-text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 1px 2px rgba(15, 23, 42, 0.2);
}

#betSlipDock.ex-betstrip .ex-betslip-clear {
    color: var(--theme-primary, #DD3E42);
    font-size: var(--ex-betslip-fs-sm);
    font-weight: 600;
}

#betSlipDock.ex-betstrip .ex-betslip-clear:hover {
    color: var(--theme-btn-primary-hover, #DD3E42);
}

#betSlipDock.ex-betstrip .ex-betslip-selection-card {
    border-radius: var(--theme-radius-control, 8px);
    border: 1px solid var(--ex-border);
    background: var(--ex-surface-nested, var(--ex-row-alt));
}

#betSlipDock.ex-betstrip .ex-betslip-selection-card--compact .ex-betslip-selection-card__head {
    padding: 0.4rem 0.55rem;
    gap: 0.4rem;
    font-size: var(--ex-betslip-fs-sm);
}

#betSlipDock.ex-betstrip .ex-betslip-selection-card__runner {
    font-size: var(--ex-betslip-fs-sm);
    font-weight: 700;
    color: var(--h-color);
}

/* Market title (e.g. "Match Odds") — desktop equivalent of the mobile
   multi-slip's .ex-betslip-selection-row__market, added so the desktop
   card names the market being bet on instead of jumping straight from
   the team name to the fixture line. */
#betSlipDock.ex-betstrip .ex-betslip-selection-card__market {
    font-size: var(--ex-betslip-fs-xs, 0.6875rem);
    font-weight: 600;
    color: var(--ex-muted, var(--para-color));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#betSlipDock.ex-betstrip .ex-betslip-selection-card__odds {
    font-size: var(--ex-betslip-fs);
    font-weight: 700;
}

#betSlipDock.ex-betstrip .ex-betslip-stake-block__label {
    font-size: var(--ex-betslip-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ex-muted, var(--para-color));
    margin-bottom: 0.25rem;
}

#betSlipDock.ex-betstrip .ex-betslip-stake-block__input,
#betSlipDock.ex-betstrip .ex-betslip-vue .form-input {
    height: var(--theme-control-height-primary, 40px);
    min-height: var(--theme-control-height-primary, 40px);
    padding: 0.35rem 2.25rem 0.35rem 0.45rem;
    font-size: var(--theme-text-base, 0.875rem);
    font-weight: var(--theme-weight-bold, 700);
    color: var(--h-color);
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: center;
}

#betSlipDock.ex-betstrip .ex-betslip-stake-block__input-wrap {
    display: flex;
    align-items: stretch;
    min-height: var(--theme-control-height-primary, 40px);
    border: 1px solid var(--ex-border, var(--border-color));
    border-radius: var(--theme-radius-control, 8px);
    overflow: hidden;
    background: var(--ex-input-bg, var(--card-bg));
}

#betSlipDock.ex-betstrip .ex-betslip-stake-step {
    flex: 0 0 var(--theme-control-height-primary, 40px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--ex-surface-section-head, var(--ex-schedule-section-head-bg));
    color: var(--h-color);
    font-size: var(--theme-text-xl-plus, 1.125rem);
    font-weight: var(--theme-weight-bold, 700);
    line-height: 1;
    cursor: pointer;
}

#betSlipDock.ex-betstrip .ex-betslip-stake-step--dec {
    border-right: 1px solid var(--ex-border);
}

#betSlipDock.ex-betstrip .ex-betslip-stake-step--inc {
    border-left: 1px solid var(--ex-border);
}

#betSlipDock.ex-betstrip .ex-betslip-stake-step:hover:not(:disabled) {
    color: var(--bp-white, #fff);
    background: var(--theme-primary, #DD3E42);
}

#betSlipDock.ex-betstrip .ex-betslip-stake-step:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

#betSlipDock.ex-betstrip .ex-betslip-stake-block__field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

#betSlipDock.ex-betstrip .ex-betslip-stake-block__currency {
    font-size: var(--ex-betslip-fs-sm);
    font-weight: 600;
    color: var(--ex-muted);
    right: 0.45rem;
}

#betSlipDock.ex-betstrip .ex-betslip-quick-stakes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.3rem;
    margin-top: 0.4rem;
}

#betSlipDock.ex-betstrip .ex-betslip-stake-btn {
    height: 1.75rem;
    padding: 0 0.35rem;
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-chip, 4px);
    background: var(--ex-surface-subhead, var(--ex-schedule-section-head-bg));
    color: var(--h-color);
    font-size: var(--ex-betslip-fs-xs);
    font-weight: 700;
    line-height: 1;
}

#betSlipDock.ex-betstrip .ex-betslip-stake-btn:hover {
    border-color: var(--theme-primary, #DD3E42);
    color: var(--theme-primary, #DD3E42);
}

#betSlipDock.ex-betstrip .ex-betslip-summary-row,
#betSlipDock.ex-betstrip .ex-betslip-advanced__row {
    font-size: var(--ex-betslip-fs-sm);
    color: var(--ex-muted, var(--para-color));
}

#betSlipDock.ex-betstrip .ex-betslip-summary-row strong,
#betSlipDock.ex-betstrip .ex-betslip-advanced__row strong {
    color: var(--h-color);
    font-weight: 700;
    font-size: var(--ex-betslip-fs-sm);
}

#betSlipDock.ex-betstrip .ex-betslip-wallet {
    padding: 0.4rem 0.5rem;
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-schedule-section-head-bg, var(--ex-row-alt));
    border: 1px solid var(--ex-border);
}

#betSlipDock.ex-betstrip .ex-betslip-wallet__label {
    font-size: var(--theme-text-xs, 0.6875rem);
    color: var(--ex-muted);
}

#betSlipDock.ex-betstrip .ex-betslip-wallet__value {
    font-size: var(--ex-betslip-fs-sm);
    color: var(--h-color);
}

#betSlipDock.ex-betstrip .ex-betslip-wallet__cell--highlight .ex-betslip-wallet__value {
    color: var(--h-color);
}

#betSlipDock.ex-betstrip .ex-betslip-alert {
    font-size: var(--ex-betslip-fs-sm);
    margin: 0;
}

#betSlipDock.ex-betstrip .ex-betslip-login {
    padding: 1.1rem var(--ex-betslip-pad-x);
}

#betSlipDock.ex-betstrip .ex-betslip-login__title {
    margin: 0 0 0.45rem;
    font-size: var(--ex-betslip-fs);
    font-weight: 700;
    color: var(--h-color);
}

#betSlipDock.ex-betstrip .ex-betslip-confirmation {
    padding: 0.75rem var(--ex-betslip-pad-x) 0.9rem;
    font-size: var(--ex-betslip-fs-sm);
}

#betSlipDock.ex-betstrip .ex-betslip-confirmation__title {
    font-size: var(--ex-betslip-fs);
    font-weight: 700;
    color: var(--h-color);
}

/* Live odds up/down must not repaint header — keep category scoop chrome */
#betSlipDock.ex-betstrip > .ex-betstrip__head.ex-betslip-head--up,
#betSlipDock.ex-betstrip > .ex-betstrip__head.ex-betslip-head--down {
    background: var(--ex-surface-category-head, var(--theme-schedule-category-head-bg, #2A3446)) !important;
    background-image: none !important;
    color: var(--ex-schedule-category-head-text, var(--theme-schedule-category-head-text, #EEEEEE)) !important;
    box-shadow: none;
}

html.theme-dark #betSlipDock.ex-betstrip > .ex-betstrip__head.ex-betslip-head--up,
html.theme-dark #betSlipDock.ex-betstrip > .ex-betstrip__head.ex-betslip-head--down,
.theme-dark #betSlipDock.ex-betstrip > .ex-betstrip__head.ex-betslip-head--up,
.theme-dark #betSlipDock.ex-betstrip > .ex-betstrip__head.ex-betslip-head--down {
    background: var(--ex-surface-category-head, var(--theme-schedule-category-head-bg, #2A3446)) !important;
    background-image: none !important;
    color: var(--ex-schedule-category-head-text, #EEEEEE) !important;
}

html.theme-dark #betSlipDock.ex-betstrip,
.theme-dark #betSlipDock.ex-betstrip {
    --ex-betslip-bar-bg: var(--ex-schedule-section-head-bg, #0B1220);
    --ex-betslip-bar-text: var(--ex-schedule-section-head-text, #EEEEEE);
}

html.theme-dark #betSlipDock.ex-betstrip .ex-betslip-mode,
.theme-dark #betSlipDock.ex-betstrip .ex-betslip-mode {
    background: var(--ex-schedule-section-head-bg, #0B1220);
}

html.theme-dark #betSlipDock.ex-betstrip .ex-betslip-stake-btn,
.theme-dark #betSlipDock.ex-betstrip .ex-betslip-stake-btn {
    background: var(--ex-schedule-section-head-bg, #314056);
    color: var(--h-color, #EEEEEE);
}

html.theme-dark #betSlipDock.ex-betstrip .ex-betslip-stake-step,
.theme-dark #betSlipDock.ex-betstrip .ex-betslip-stake-step {
    background: var(--ex-schedule-section-head-bg, #314056);
    color: var(--h-color, #EEEEEE);
}

/* ─── Mobile quick sheet — compact height + polish ───────────────────────── */
@media (max-width: 991.98px) {
    #betSlipDock.ex-betstrip,
    #betSlipDock.ex-betslip-shell {
        --ex-betslip-pad-x: 0.7rem;
        --ex-betslip-gap: 0.6rem;
        --ex-betslip-fs: 0.8125rem;
        --ex-betslip-fs-sm: 0.75rem;
        --ex-betslip-fs-xs: 0.6875rem;
    }

    #betSlipDock.ex-betstrip {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        max-height: inherit;
    }

    /* Grab handle — ::after so scoop can own ::before */
    #betSlipDock.ex-betstrip > .ex-betstrip__head.ex-betslip-head {
        position: relative;
        box-sizing: border-box;
        padding-top: 0.85rem !important;
        padding-bottom: 0.4rem !important;
        /* Extra right padding reserves room for the close button, which
           is taken out of flex flow below (absolutely positioned for
           vertical centering) — without this, the flex content (title/
           count/Clear All) no longer knows to stop short of it and
           renders underneath. */
        padding-right: calc(var(--ex-betslip-pad-x, 0.75rem) + 1.85rem + 0.4rem) !important;
        min-height: 3rem !important;
        height: 3rem !important;
        max-height: 3rem !important;
        /* Square corners — the sheet touches the aligned card edge with
           a straight 90deg corner, not a rounded one. */
        border-radius: 0 !important;
    }

    /* The header's top/bottom padding above is asymmetric (extra room
       reserved at the top for the grab-handle pill in the ::after rule
       below), which pulls the flex-centered close button a few px below
       the header's true vertical center. Anchor it directly to the
       header's own box instead of relying on flex align-items so it's
       centered regardless of that padding. */
    #betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__close {
        position: absolute !important;
        top: 50% !important;
        right: var(--ex-betslip-pad-x, 0.75rem) !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    /* The "x" itself was a text glyph (content:"\00d7") — even inside a
       perfectly flex-centered button, the character's own font metrics
       don't sit dead-center in its em box, so it read as off-center
       within its chip. Swap to a fixed-size masked SVG shape (two
       crossing lines) driven by currentColor so hover/dark-theme colors
       keep working, instead of relying on glyph shape/font. */
    #betSlipDock.ex-betstrip > .ex-betstrip__head .ex-betstrip__close::before {
        content: '' !important;
        display: block !important;
        width: 0.85rem;
        height: 0.85rem;
        background-color: currentColor;
        -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGxpbmUgeDE9IjMiIHkxPSIzIiB4Mj0iMTMiIHkyPSIxMyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxMyIgeTE9IjMiIHgyPSIzIiB5Mj0iMTMiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=");
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGxpbmUgeDE9IjMiIHkxPSIzIiB4Mj0iMTMiIHkyPSIxMyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxMyIgeTE9IjMiIHgyPSIzIiB5Mj0iMTMiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=");
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }

    #betSlipDock.ex-betstrip > .ex-betstrip__head.ex-betslip-head::after {
        content: '';
        position: absolute;
        top: 0.35rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2.25rem;
        height: 0.22rem;
        border-radius: var(--theme-radius-pill, 999px);
        background: color-mix(in srgb, var(--ex-muted, #94a3b8) 55%, transparent);
        z-index: 3;
        pointer-events: none;
    }

    #betSlipDock.ex-betstrip > .ex-betstrip__body {
        flex: 0 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #betSlipDock.ex-betstrip .ex-betslip-sheet {
        gap: 0.4rem;
        padding: 0.5rem var(--ex-betslip-pad-x) 0.55rem;
    }

    #betSlipDock.ex-betstrip .ex-betslip-sheet--quick {
        gap: 0.35rem;
        padding-bottom: 0.4rem;
    }

    #betSlipDock.ex-betstrip .ex-betslip-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.35rem;
        flex-wrap: nowrap;
    }

    #betSlipDock.ex-betstrip .ex-betslip-toolbar__meta {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        flex-shrink: 0;
        margin-left: 0;
    }

    #betSlipDock.ex-betstrip .ex-betslip-mode {
        flex-shrink: 1;
        min-width: 0;
    }

    #betSlipDock.ex-betstrip .ex-betslip-mode__btn {
        padding: 0.26rem 0.5rem;
    }

    #betSlipDock.ex-betstrip .ex-betslip-selection-card--compact .ex-betslip-selection-card__head {
        padding: 0.35rem 0.5rem;
        gap: 0.35rem;
    }

    #betSlipDock.ex-betstrip .ex-betslip-stake-block__input,
    #betSlipDock.ex-betstrip .ex-betslip-vue .form-input {
        height: 2.25rem;
        min-height: 2.25rem;
        border-radius: 0;
    }

    #betSlipDock.ex-betstrip .ex-betslip-stake-step {
        flex-basis: 2.35rem;
    }

    #betSlipDock.ex-betstrip .ex-betslip-quick-stakes {
        gap: 0.28rem;
        margin-top: 0.35rem;
    }

    #betSlipDock.ex-betstrip .ex-betslip-stake-btn {
        height: 1.85rem;
        border-radius: var(--theme-radius-control, 8px);
    }

    #betSlipDock.ex-betstrip .ex-betslip-sheet--quick .ex-betslip-quick-summary {
        margin: 0;
        padding: 0.35rem 0.5rem;
        border-radius: var(--theme-radius-control, 8px);
        border: 1px solid var(--ex-border);
        background: color-mix(in srgb, #10B981 10%, var(--ex-market-bg, var(--card-bg)));
    }

    #betSlipDock.ex-betstrip .ex-betslip-sheet--quick .ex-betslip-summary-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin: 0;
        font-size: var(--ex-betslip-fs-sm);
    }

    #betSlipDock.ex-betstrip .ex-betslip-sheet--quick .ex-betslip-summary-row strong {
        color: #10B981;
        font-variant-numeric: tabular-nums;
    }

    /* Don't reserve empty alert space on quick slip when filled */
    #betSlipDock.ex-betstrip .ex-betslip-sheet--quick:not(.ex-betslip-sheet--idle) .ex-betslip-messages:has(.ex-betslip-messages__spacer) {
        display: none;
    }

    #betSlipDock.ex-betstrip .ex-betslip-sheet--quick .ex-betslip-messages {
        min-height: 0;
    }

    #betSlipDock.ex-betstrip .ex-betslip-sheet--quick .ex-betslip-alert {
        margin: 0;
        padding: 0.35rem 0.5rem;
        border-radius: var(--theme-radius-control, 8px);
    }

    #betSlipDock.ex-betstrip .ex-betslip-place.ex-betslip-bar,
    #betSlipDock.ex-betstrip .ex-betslip-place.btn-base.ex-betslip-bar {
        height: 2.5rem;
        min-height: 2.5rem;
        max-height: 2.5rem;
        border-radius: 0 !important;
        font-size: var(--theme-text-base, 0.875rem);
        letter-spacing: 0.03em;
    }

    #betSlipDock.ex-betstrip .ex-betslip-footer-mount:not(:empty) {
        flex-shrink: 0;
        box-shadow: 0 -1px 0 var(--ex-border, rgba(255, 255, 255, 0.06));
    }
}

/* ─── Sportsbook bet slip (Bet365-like single selection) ─────────────────── */
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-toolbar__title {
    font-size: var(--theme-text-sm, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ex-muted, #94a3b8);
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--sportsbook {
    border: 1px solid color-mix(in srgb, var(--ex-draw, #F59E0B) 45%, var(--ex-border));
    background: color-mix(in srgb, var(--ex-draw, #F59E0B) 8%, var(--ex-market-bg, var(--card-bg)));
    border-radius: var(--theme-radius-panel, 8px);
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--sportsbook.ex-betslip-selection-card--home {
    border-color: color-mix(in srgb, var(--ex-back, #72BBEF) 50%, var(--ex-border));
    background: color-mix(in srgb, var(--ex-back, #72BBEF) 10%, var(--ex-market-bg, var(--card-bg)));
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--sportsbook.ex-betslip-selection-card--draw {
    border-color: color-mix(in srgb, var(--ex-draw, #F59E0B) 50%, var(--ex-border));
    background: color-mix(in srgb, var(--ex-draw, #F59E0B) 10%, var(--ex-market-bg, var(--card-bg)));
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--sportsbook.ex-betslip-selection-card--away {
    border-color: color-mix(in srgb, var(--ex-lay, #FAA9BA) 50%, var(--ex-border));
    background: color-mix(in srgb, var(--ex-lay, #FAA9BA) 10%, var(--ex-market-bg, var(--card-bg)));
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card__copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card__match {
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: 500;
    color: var(--ex-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card__odds {
    min-width: 3.25rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-draw, #F59E0B);
    color: var(--ex-draw-text, #1a1a1a);
    font-weight: var(--theme-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--home .ex-betslip-selection-card__odds {
    background: var(--ex-back, #72BBEF);
    color: var(--ex-back-text, #0f172a);
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--draw .ex-betslip-selection-card__odds {
    background: var(--ex-draw, #F59E0B);
    color: var(--ex-draw-text, #1a1a1a);
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--away .ex-betslip-selection-card__odds {
    background: var(--ex-lay, #FAA9BA);
    color: var(--ex-lay-text, #1a1a1a);
}

/* Lock sportsbook odds badge to outcome tone — ignore live green/red flash */
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--home .ex-betslip-selection-card__odds:not(.ex-betslip-selection-card__odds--locked):not(.ex-betslip-selection-card__odds--suspended),
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--home .ex-betslip-selection-card__odds.ex-betslip-odds--up:not(.ex-betslip-selection-card__odds--locked):not(.ex-betslip-selection-card__odds--suspended),
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--home .ex-betslip-selection-card__odds.ex-betslip-odds--down:not(.ex-betslip-selection-card__odds--locked):not(.ex-betslip-selection-card__odds--suspended),
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--home .ex-betslip-selection-card__odds.ex-betslip-selection-card__odds--flash:not(.ex-betslip-selection-card__odds--locked):not(.ex-betslip-selection-card__odds--suspended) {
    background: var(--ex-back, #72BBEF) !important;
    color: var(--ex-back-text, #0f172a) !important;
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--draw .ex-betslip-selection-card__odds:not(.ex-betslip-selection-card__odds--locked):not(.ex-betslip-selection-card__odds--suspended),
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--draw .ex-betslip-selection-card__odds.ex-betslip-odds--up:not(.ex-betslip-selection-card__odds--locked):not(.ex-betslip-selection-card__odds--suspended),
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--draw .ex-betslip-selection-card__odds.ex-betslip-odds--down:not(.ex-betslip-selection-card__odds--locked):not(.ex-betslip-selection-card__odds--suspended),
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--draw .ex-betslip-selection-card__odds.ex-betslip-selection-card__odds--flash:not(.ex-betslip-selection-card__odds--locked):not(.ex-betslip-selection-card__odds--suspended) {
    background: var(--ex-draw, #F59E0B) !important;
    color: var(--ex-draw-text, #1a1a1a) !important;
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--away .ex-betslip-selection-card__odds:not(.ex-betslip-selection-card__odds--locked):not(.ex-betslip-selection-card__odds--suspended),
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--away .ex-betslip-selection-card__odds.ex-betslip-odds--up:not(.ex-betslip-selection-card__odds--locked):not(.ex-betslip-selection-card__odds--suspended),
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--away .ex-betslip-selection-card__odds.ex-betslip-odds--down:not(.ex-betslip-selection-card__odds--locked):not(.ex-betslip-selection-card__odds--suspended),
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--away .ex-betslip-selection-card__odds.ex-betslip-selection-card__odds--flash:not(.ex-betslip-selection-card__odds--locked):not(.ex-betslip-selection-card__odds--suspended) {
    background: var(--ex-lay, #FAA9BA) !important;
    color: var(--ex-lay-text, #1a1a1a) !important;
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Closed / suspended — force gray, ignore Home/Draw/Away tone */
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card__odds--locked,
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card__odds--suspended,
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--home .ex-betslip-selection-card__odds--locked,
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--home .ex-betslip-selection-card__odds--suspended,
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--draw .ex-betslip-selection-card__odds--locked,
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--draw .ex-betslip-selection-card__odds--suspended,
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--away .ex-betslip-selection-card__odds--locked,
#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-selection-card--away .ex-betslip-selection-card__odds--suspended {
    background: #64748B !important;
    color: #E2E8F0 !important;
    opacity: 0.85;
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-quick-summary--sportsbook {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0.5rem 0.65rem;
    border-radius: var(--theme-radius-panel, 8px);
    border: 1px solid var(--ex-border);
    background: color-mix(in srgb, #10B981 8%, var(--ex-market-bg, var(--card-bg)));
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-summary-row__return {
    color: #10B981;
    font-size: var(--theme-text-lg-plus, 1rem);
    font-weight: var(--theme-weight-bold, 700);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
 * Mobile multi-bet-slip: collapsed sticky pill/bar, site-wide.
 *
 * body.ex-betslip-has-selection (toggled in BetSlip.vue's selection
 * watcher) gates this to "at least one pending selection" — the
 * Vue v-if on the Teleport itself already only renders this markup on
 * mobile with a selection, so the CSS gate here is a defensive second
 * layer. Hidden again while the sheet itself is open
 * (:not(.ex-betstrip-open)) so it never overlaps the open bet slip.
 * Originally Home-only (body.ex-home-dense); widened to every page.
 * Desktop (>=992px) never sees this — display:none outside the
 * mobile media query below, and the Teleport itself is v-if gated off
 * on desktop via isMobileViewport in BetSlip.vue.
 * ============================================================ */
.ex-betslip-pill {
    display: none;
}

@media (max-width: 991.98px) {
    body.ex-betslip-has-selection:not(.ex-betstrip-open) .ex-betslip-pill {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        position: fixed;
        /* Same left/right formula as .ex-shell__betstrip (the container's
           own inline padding, matching the match card's own edge now
           that the card no longer carries an extra margin on top of it),
           so the collapsed pill lines up with the visible card edge/main
           table width instead of running full-bleed edge to edge. */
        left: var(--theme-space-page-x, 0.75rem);
        right: var(--theme-space-page-x, 0.75rem);
        bottom: var(--ex-mobile-nav-h, 3.5rem);
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        z-index: 1045;
        padding: 0.35rem 1rem;
        border: none;
        /* Top corners rounded (it's popping up above the bottom nav,
           like a tab), bottom corners stay square where it would
           otherwise touch the nav bar beneath it. */
        border-radius: var(--theme-radius-panel, 8px) var(--theme-radius-panel, 8px) 0 0;
        background: var(--theme-primary, #DD3E42);
        color: var(--bp-white, #FFFFFF);
        font-size: var(--theme-text-md, 0.8125rem);
        font-weight: var(--theme-weight-semibold, 600);
        box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.25);
    }

    .ex-betslip-pill__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        min-width: 1.5rem;
        height: 1.5rem;
        padding: 0 0.4rem;
        border-radius: var(--theme-radius-full, 999px);
        background: rgba(255, 255, 255, 0.25);
        font-size: var(--theme-text-sm, 0.75rem);
        font-weight: var(--theme-weight-bold, 700);
        font-variant-numeric: tabular-nums;
    }

    .ex-betslip-pill__label {
        flex-shrink: 0;
        font-weight: var(--theme-weight-bold, 700);
    }

    .ex-betslip-pill__figures {
        display: flex;
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 0.9rem;
        min-width: 0;
        overflow: hidden;
    }

    .ex-betslip-pill__figure {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 1.15;
        font-variant-numeric: tabular-nums;
        font-weight: var(--theme-weight-bold, 700);
    }

    .ex-betslip-pill__figure-label {
        font-size: var(--theme-text-xs, 0.6875rem);
        font-weight: var(--theme-weight-medium, 500);
        opacity: 0.85;
    }

    .ex-betslip-pill__chevron {
        display: inline-flex;
        flex-shrink: 0;
        width: 1.1rem;
        height: 1.1rem;
    }

    .ex-betslip-pill__chevron svg {
        width: 100%;
        height: 100%;
    }
}

/* ============================================================
 * Mobile multi-bet-slip: expanded-sheet selections list.
 * Read-only summary rows (Phase 2) — per-row stake input/quick-chips
 * are added on top of this in a later phase. Desktop keeps the
 * existing single .ex-betslip-selection-card (v-if gated in the
 * template), so this list is never rendered there at all.
 * ============================================================ */

/* Account summary bar (BetSlipAccountSummary.vue) — sits at the very top
   of the form, above everything else including the desktop toolbar, so it
   reads as "just under the slip's own header" on both mobile and desktop.
   Sticky within .ex-betstrip__body's own scroll (the form itself has no
   overflow), so it stays pinned while the selections/quick-add below
   scroll underneath. Height target 48-60px — kept to icon + 2 tight text
   lines with minimal padding, no new type scale. */
.ex-betslip-account-summary {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0.65rem 0.5rem;
    background: var(--ex-row-alt);
    border-bottom: 1px solid var(--ex-border);
    flex-shrink: 0;
}

.ex-betslip-account-summary__cell {
    position: relative;
    border-right: 1px solid var(--ex-border);
}

.ex-betslip-account-summary__cell:last-child {
    border-right: none;
}

.ex-betslip-account-summary__trigger {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
    padding: 0 0.4rem;
    background: none;
    border: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.ex-betslip-account-summary__cell:first-child .ex-betslip-account-summary__trigger {
    padding-left: 0;
}

.ex-betslip-account-summary__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.ex-betslip-account-summary__icon svg {
    width: 100%;
    height: 100%;
}

.ex-betslip-account-summary__icon--available {
    color: var(--ex-back, #72BBEF);
}

.ex-betslip-account-summary__icon--exposure {
    color: var(--bp-warning-strong, #f59e0b);
}

.ex-betslip-account-summary__icon--pnl {
    color: var(--ex-muted, var(--para-color));
}

.ex-betslip-account-summary__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ex-betslip-account-summary__label {
    font-size: var(--ex-betslip-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: var(--ex-muted, var(--para-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ex-betslip-account-summary__value {
    font-size: var(--ex-betslip-fs-sm);
    font-weight: 700;
    line-height: 1.25;
    color: var(--h-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ex-betslip-account-summary__value--positive {
    color: var(--color-success, var(--bp-success-strong, #16a34a));
}

.ex-betslip-account-summary__value--negative {
    color: var(--color-danger, var(--bp-danger-strong, #dc2626));
}

.ex-betslip-account-summary__tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    margin-top: 0.35rem;
    padding: 0.4rem 0.55rem;
    width: max-content;
    max-width: 11rem;
    border-radius: var(--theme-radius-sm, 6px);
    background: rgba(17, 24, 39, 0.95);
    color: var(--theme-icon-on-brand, var(--bp-white, #fff));
    font-size: var(--ex-betslip-fs-xs);
    font-weight: 500;
    line-height: 1.35;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.ex-betslip-account-summary__cell:last-child .ex-betslip-account-summary__tooltip {
    left: auto;
    right: 0;
}

@media (max-width: 991.98px) {
/* The header and footer both span the full width of the sheet with no
   outer padding of their own (the header's colored plate and the Place
   Bet button both touch the sheet's left/right edges directly) — the
   selections list inherited the old single-selection sheet's padding
   (.ex-betslip-sheet / --quick), which inset it from those edges and
   left a visible vertical gap above/below. Zeroing that out here makes
   the list (and therefore each selection row, which fills its width)
   match the header/footer width exactly, flush against both. */
#betSlipDock.ex-betstrip .ex-betslip-sheet:has(> .ex-betslip-selections-list) {
    padding: 0;
    gap: 0;
}

#betSlipDock.ex-betstrip .ex-betslip-sheet--quick:has(> .ex-betslip-selections-list),
#betSlipDock.ex-betstrip .ex-betslip-sheet--advanced:has(> .ex-betslip-selections-list) {
    padding-bottom: 0;
}

/* No gap between selections — same continuous-block-with-zebra-stripe
   treatment as the mobile match-list cards, instead of separate
   floating rounded cards with space between them. */
.ex-betslip-selections-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ex-betslip-selection-row {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.75rem 0.7rem;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--ex-border);
    background: var(--ex-market-bg, var(--card-bg));
}

.ex-betslip-selections-list .ex-betslip-selection-row:last-child {
    border-bottom: 0;
}

/* Zebra stripe made clearly visible (a real tinted blend of the
   heading color into the card background, not just a swap between two
   near-identical neutral surface tokens) so consecutive selections are
   easy to tell apart at a glance, adapting to both themes on its own. */
.ex-betslip-selections-list .ex-betslip-selection-row:nth-child(even) {
    background: color-mix(in srgb, var(--h-color, #0f172a) 8%, var(--ex-market-bg, var(--card-bg)));
}

.ex-betslip-selection-row__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
}

.ex-betslip-selection-row__copy {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.05rem;
}

.ex-betslip-selection-row__runner {
    font-size: var(--ex-betslip-fs);
    font-weight: 700;
    color: var(--h-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-betslip-selection-row__market {
    font-size: var(--ex-betslip-fs-sm);
    font-weight: 600;
    color: var(--ex-muted, var(--para-color));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-betslip-selection-row__match {
    font-size: var(--ex-betslip-fs-xs);
    font-weight: 500;
    color: var(--ex-muted, var(--para-color));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-betslip-selection-row__view-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    font-size: var(--ex-betslip-fs);
    font-weight: 600;
    color: var(--theme-primary, #DD3E42);
    text-decoration: none;
}

.ex-betslip-selection-row__view-more:hover {
    text-decoration: underline;
}

.ex-betslip-selection-row__odds {
    flex-shrink: 0;
    padding: 0.3rem 0.55rem;
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-back, #72BBEF);
    color: var(--ex-back-text, #0f172a);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s ease;
}

/* Badge matches the tone of the odds cell it was tapped from — same
   home/draw/away palette the price cells themselves already use
   (see .ex-betslip-selection-card--home/--draw/--away in the single-
   selection sportsbook view above), instead of a fixed brand color. */
.ex-betslip-selection-row--draw .ex-betslip-selection-row__odds {
    background: var(--ex-draw, #F59E0B);
    color: var(--ex-draw-text, #1a1a1a);
}

.ex-betslip-selection-row--away .ex-betslip-selection-row__odds {
    background: var(--ex-lay, #FAA9BA);
    color: var(--ex-lay-text, #1a1a1a);
}

.ex-betslip-selection-row__odds--locked,
.ex-betslip-selection-row__odds--suspended {
    background: var(--ex-muted-bg, #64748B);
    color: var(--ex-locked-text, #E2E8F0);
}

.ex-betslip-selection-row__odds--flash {
    background: color-mix(in srgb, var(--theme-primary, #DD3E42) 70%, var(--bp-success, #28c76f));
}

.ex-betslip-selection-row__badge {
    flex-shrink: 0;
    padding: 0.2rem 0.4rem;
    border-radius: var(--theme-radius-control, 8px);
    background: color-mix(in srgb, var(--bp-warning-strong, #f59e0b) 18%, transparent);
    color: var(--bp-warning-strong, #f59e0b);
    font-size: var(--ex-betslip-fs-xs);
    font-weight: 700;
}

.ex-betslip-selection-row__remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--ex-muted, var(--para-color));
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.ex-betslip-selection-row__remove:hover {
    color: var(--theme-primary, #DD3E42);
}

.ex-betslip-selection-row__status {
    margin: 0;
    padding: 0.35rem 0.5rem;
    border-radius: var(--theme-radius-control, 8px);
    font-size: var(--ex-betslip-fs-xs);
    font-weight: 600;
}

.ex-betslip-selection-row__status--closed,
.ex-betslip-selection-row__status--suspended {
    background: color-mix(in srgb, var(--ex-muted-bg, #64748B) 16%, transparent);
    color: var(--ex-muted, var(--para-color));
}

.ex-betslip-selection-row__status--odds-changed {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    background: color-mix(in srgb, var(--bp-warning-strong, #f59e0b) 14%, transparent);
    color: var(--h-color);
}

.ex-betslip-selection-row__accept {
    margin-left: auto;
    padding: 0.2rem 0.6rem;
    border: none;
    border-radius: var(--theme-radius-control, 8px);
    background: var(--theme-primary, #DD3E42);
    color: var(--bp-white, #FFFFFF);
    font-size: var(--ex-betslip-fs-sm);
    font-weight: 700;
    cursor: pointer;
}

.ex-betslip-selection-row__controls {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ex-betslip-selection-row__stake-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.ex-betslip-selection-row__stake-wrap {
    display: flex;
    align-items: stretch;
    gap: 0.3rem;
    flex: 0 0 auto;
}

/* The "$" and the number sit together as one centered group inside the
   bordered cell (the wrap IS the visible cell now — the input itself
   is borderless/transparent so it reads as a single "$5" value, not a
   prefix floating over a separately left/right-aligned field). */
.ex-betslip-selection-row__stake-input-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 5rem;
    height: 38px;
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-market-bg, var(--card-bg));
}

.ex-betslip-selection-row__stake-currency {
    color: var(--h-color);
    font-size: var(--ex-betslip-fs);
    font-weight: 700;
    pointer-events: none;
}

.ex-betslip-selection-row__stake-input {
    flex: 0 1 auto;
    /* Width now comes from the HTML `size` attribute (bound to the
       stake's own digit count in BetSlip.vue), so the box hugs its
       content instead of reserving a fixed span that leaves the digit
       centered well clear of the "$" — text-align:left then makes the
       digit sit flush against its own left edge, which touches the
       currency span's right edge (no gap between them), so "$" + the
       number reads as one fused unit exactly like the "$25" quick-stake
       chip text. max-width is just a safety ceiling for unusually long
       input. */
    width: auto;
    max-width: 3rem;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--h-color);
    font-size: var(--ex-betslip-fs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.ex-betslip-selection-row__stake-input:focus {
    outline: none;
}

/* -/+ steppers get their own visible chip (background + full border),
   matching the stake cell/quick-stake chips right next to them,
   instead of inheriting the shared .ex-betslip-stake-step dark-theme
   background — which is nearly the same color as this row's own dark
   card background and reads as invisible there (only distinguishable
   by hover ), even though it has good contrast against the page in
   the desktop/light context that rule was written for. */
.ex-betslip-selection-row__stake-wrap .ex-betslip-stake-step {
    flex-shrink: 0;
    width: 34px;
    height: 38px;
    border: 1px solid var(--ex-border) !important;
    border-radius: var(--theme-radius-control, 8px) !important;
    background: var(--ex-market-bg, var(--card-bg)) !important;
    color: var(--h-color) !important;
}

/* The !important background/color above (needed for dark-mode
   visibility) also shadows the shared .ex-betslip-stake-step:hover
   rule's brand-color tap highlight, since that rule has no !important
   of its own — restore it here with matching !important so tapping
   -/+ still flashes the accent color instead of doing nothing visible. */
.ex-betslip-selection-row__stake-wrap .ex-betslip-stake-step:hover:not(:disabled),
.ex-betslip-selection-row__stake-wrap .ex-betslip-stake-step:active:not(:disabled) {
    background: var(--theme-primary, #DD3E42) !important;
    color: var(--bp-white, #FFFFFF) !important;
    border-color: var(--theme-primary, #DD3E42) !important;
}

.ex-betslip-selection-row__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ex-betslip-selection-row__chip {
    flex: 1 1 auto;
    min-width: 2.6rem;
    height: 32px;
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-market-bg, var(--card-bg));
    color: var(--h-color);
    font-size: var(--ex-betslip-fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.ex-betslip-selection-row__chip.is-active {
    border-color: var(--theme-primary, #DD3E42);
    background: var(--theme-primary, #DD3E42);
    color: var(--bp-white, #FFFFFF);
}

.ex-betslip-selection-row__return {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: var(--ex-betslip-fs-xs);
    font-weight: 500;
    color: var(--ex-muted, var(--para-color));
    line-height: 1.2;
}

.ex-betslip-selection-row__return strong {
    /* Matches the Place Bet button's green (--ex-place-bet-bg) instead
       of the generic --bp-success token, so the "this is money you'll
       get back" figure reads as the same green as the action that
       gets it. */
    color: var(--ex-place-bet-bg, #16A34A);
    font-size: var(--ex-betslip-fs);
    font-variant-numeric: tabular-nums;
}

/* Mobile "Place Bet" batch results — one row per selection submitted */
.ex-betslip-batch-results {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem var(--ex-betslip-pad-x) 0.9rem;
    font-size: var(--ex-betslip-fs-sm);
}

/* Badge centers against the whole card (team name + stake/return detail
   line below it), not just the head row — otherwise it only lines up
   with the team-name text and looks pulled toward the top of the card
   once the detail line is accounted for. */
.ex-betslip-batch-result {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--theme-radius-control, 8px);
    border: 1px solid var(--ex-border);
    background: color-mix(in srgb, var(--bp-success, #28c76f) 8%, var(--ex-market-bg, var(--card-bg)));
}

.ex-betslip-batch-result--fail {
    background: color-mix(in srgb, var(--theme-primary, #DD3E42) 8%, var(--ex-market-bg, var(--card-bg)));
}

.ex-betslip-batch-result__body {
    flex: 1 1 auto;
    min-width: 0;
}

.ex-betslip-batch-result__head {
    font-weight: 700;
    color: var(--h-color);
}

.ex-betslip-batch-result__badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: var(--theme-radius-full, 999px);
}

.ex-betslip-batch-result__badge svg {
    display: block;
}

.ex-betslip-batch-result__badge--ok {
    background: var(--bp-success, #28c76f);
    color: var(--bp-white, #FFFFFF);
}

.ex-betslip-batch-result__badge--fail {
    background: var(--theme-primary, #DD3E42);
    color: var(--bp-white, #FFFFFF);
}

.ex-betslip-batch-result__detail {
    margin: 0.2rem 0 0;
    color: var(--ex-muted, var(--para-color));
    font-size: var(--ex-betslip-fs-xs);
}

.ex-betslip-batch-result__detail--error {
    color: var(--theme-primary, #DD3E42);
}

.ex-betslip-secure-note {
    margin: 0.6rem var(--ex-betslip-pad-x) 0;
    padding: 0.35rem 0;
    text-align: center;
    font-size: var(--ex-betslip-fs-xs);
    color: var(--ex-muted, var(--para-color));
}

.ex-betslip-secure-note strong {
    color: var(--h-color);
    margin: 0 0.2rem;
}

/* Quick-stake values editor — swaps into the sheet body in place of the
   selections list while open (same "swap the main content" pattern the
   confirmation/batch-results views already use), footer/header stay
   mounted via their own Teleports. */
.ex-betslip-quick-stake-editor {
    padding: 1rem var(--ex-betslip-pad-x, 0.75rem);
}

.ex-betslip-quick-stake-editor__fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ex-betslip-quick-stake-editor__field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 44px;
    padding: 0 0.7rem;
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-control, 8px);
    background: var(--ex-market-bg, var(--card-bg));
}

.ex-betslip-quick-stake-editor__currency {
    color: var(--h-color);
    /* Matches the input's own 16px below (see comment there) so the
       "$" and the digits stay visually the same size as each other. */
    font-size: 16px;
    font-weight: 700;
    pointer-events: none;
}

.ex-betslip-quick-stake-editor__input {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--h-color);
    /* 16px, not the usual --ex-betslip-fs (13px) — mobile Safari/Chrome
       auto-zoom the page when a focused input's font-size is under
       16px. Same fix already used for other mobile inputs in this
       codebase (see exchange-account.css's "My Bets" input rule). */
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ex-betslip-quick-stake-editor__input:focus {
    outline: none;
}

.ex-betslip-quick-stake-editor__actions {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    height: var(--theme-control-height-primary, 40px);
    padding: 0 var(--theme-space-4, 1rem);
}

.ex-betslip-quick-stake-editor__cancel {
    flex: 1 1 0;
    border: 1px solid var(--ex-border);
    border-radius: var(--theme-radius-control, 8px);
    background: transparent;
    color: var(--h-color);
    font-weight: 700;
    cursor: pointer;
}

.ex-betslip-quick-stake-editor__cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ex-betslip-quick-stake-editor__actions .ex-betslip-place {
    flex: 2 1 0;
}

/* Push the pre-existing "back to top" FAB (exchange-theme.css,
   bottom: var(--ex-mobile-nav-h) + 0.75rem, right: 0.75rem) above the
   collapsed bet-slip pill instead of sitting underneath/behind it —
   both are fixed-position elements at roughly the same height when the
   pill is visible. Only applies while the pill itself is actually
   shown (same gating classes as the pill), so the button sits at its
   normal height the rest of the time. */
body.ex-betslip-has-selection:not(.ex-betstrip-open) .back-to-top {
    bottom: calc(var(--ex-mobile-nav-h, 3.5rem) + 60px + 0.75rem) !important;
}

/* While the sheet itself is open (expanded), the FAB sits behind/under
   it at roughly the same corner — hide it outright instead of trying
   to reposition it around the sheet. */
body.ex-betstrip-open .back-to-top {
    display: none !important;
}

/* Bet-slip inline Fancy/Session quick-add (betslip-quick-markets.blade.php,
   fetched on demand and injected via v-html) — sits below a Match-Odds
   row's own stake controls, before the next row / the global Place Bet
   footer. Reuses .ex-indibet-outcome/.ex-price odds-cell styling as-is;
   these rules only own the quick-add's own container/title chrome. */
.ex-betslip-quickadd {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--ex-border, rgba(128, 128, 128, 0.25));
}

/* One shared 3-column grid per section (label | outcome-1 | outcome-2)
   instead of repeating Yes/No per row — matches the reference layout:
   a single "Yes | No" (or "Over | Under") header, then every question
   as its own row underneath sharing those same two columns. */
.ex-betslip-quickadd__section + .ex-betslip-quickadd__section {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--ex-border, rgba(128, 128, 128, 0.16));
}

.ex-betslip-quickadd__section-title {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--ex-betslip-fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ex-muted, var(--para-color));
}

.ex-betslip-quickadd__header,
.ex-betslip-quickadd__row {
    display: grid;
    grid-template-columns: 1fr 3.1rem 3.1rem;
    align-items: center;
    gap: 0.4rem;
}

.ex-betslip-quickadd__row + .ex-betslip-quickadd__row {
    margin-top: 0.4rem;
}

.ex-betslip-quickadd__header {
    margin-bottom: 0.3rem;
}

.ex-betslip-quickadd__header span {
    font-size: var(--ex-betslip-fs-xs);
    font-weight: 600;
    color: var(--ex-muted, var(--para-color));
    text-align: center;
}

.ex-betslip-quickadd__question {
    font-size: var(--ex-betslip-fs-sm);
    font-weight: 600;
    color: var(--h-color);
    line-height: 1.25;
}

/* Bigger, rounder pill buttons than the dense page-grid .ex-price cells
   this reuses — the bet slip is a much narrower context with room for
   only 2 columns instead of a 1|X|2 grid, so there's space to make each
   button an easier tap target, matching the reference's pill style. */
.ex-betslip-quickadd .ex-indibet-outcome {
    padding: 0;
}

.ex-betslip-quickadd .ex-price {
    width: 100%;
    height: auto;
    min-height: 2rem;
    padding: 0.35rem 0.25rem;
    border-radius: var(--theme-radius-sm, 6px);
    font-size: var(--ex-betslip-fs-sm);
    font-weight: 700;
}

/* Yes/Over and No/Under here use the site's default odds-cell colors
   (back=blue / lay=pink) instead of .ex-price--yes/--no's own green/red
   tokens — those stay green/red everywhere else they're already used
   (page-level fancy/session widgets), this override is scoped to the
   bet-slip quick-add only. */
.ex-betslip-quickadd .ex-price--yes {
    background: var(--ex-back);
    color: var(--ex-back-text);
}

.ex-betslip-quickadd .ex-price--yes:hover,
.ex-betslip-quickadd .ex-price--yes:focus {
    background: var(--ex-back-hover);
    color: var(--ex-back-text);
}

.ex-betslip-quickadd .ex-price--no {
    background: var(--ex-lay);
    color: var(--ex-lay-text);
}

.ex-betslip-quickadd .ex-price--no:hover,
.ex-betslip-quickadd .ex-price--no:focus {
    background: var(--ex-lay-hover);
    color: var(--ex-lay-text);
}


/* ===== exchange-betslip.css ===== */
/**
 * WP16 — Bet slip information hierarchy
 * Load AFTER exchange-betslip-shell + exchange-controls.
 * Stake primary · profit/return secondary-strong · liability muted · selection scannable.
 * Does NOT change place-bet logic, stake math, or rail IA.
 */

#betSlipDock.ex-betstrip,
#betSlipDock.ex-betslip-shell {
  --ex-betslip-fs: var(--theme-text-md, 0.8125rem);       /* 13 */
  --ex-betslip-fs-sm: var(--theme-text-sm, 0.75rem);      /* 12 */
  --ex-betslip-fs-xs: var(--theme-text-xs, 0.6875rem);    /* 11 */
}

/* Selection: runner > meta; BACK/LAY chip + odds scannable */
#betSlipDock .ex-betslip-selection-card__runner {
  font-size: var(--theme-text-base, 0.875rem);
  font-weight: var(--theme-weight-bold, 700);
  color: var(--h-color, var(--theme-text-primary));
  line-height: 1.25;
}

#betSlipDock .ex-betslip-selection-card__match {
  font-size: var(--theme-text-sm, 0.75rem);
  font-weight: var(--theme-weight-medium, 500);
  color: var(--ex-muted, var(--para-color));
}

#betSlipDock .ex-betslip-selection-card__type {
  font-size: var(--theme-text-xs, 0.6875rem);
  font-weight: var(--theme-weight-bold, 700);
  letter-spacing: 0.04em;
}

#betSlipDock .ex-betslip-selection-card__odds {
  font-size: var(--theme-text-lg-plus, 1rem);
  font-weight: var(--theme-odds-font-weight, var(--theme-weight-bold, 700));
  font-variant-numeric: tabular-nums;
  color: var(--h-color, var(--theme-text-primary));
}

/* Stake block = primary reading path */
#betSlipDock .ex-betslip-stake-block__label {
  font-size: var(--theme-text-sm, 0.75rem);
  font-weight: var(--theme-weight-semibold, 600);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ex-muted, var(--para-color));
  margin-bottom: 0.3rem;
}

#betSlipDock .ex-betslip-stake-block__input,
#betSlipDock .ex-betslip-vue .form-input {
  font-size: var(--theme-text-base, 0.875rem) !important;
  font-weight: var(--theme-weight-bold, 700) !important;
  font-variant-numeric: tabular-nums;
}

/* Summary: liability muted; profit / to-return stronger */
#betSlipDock .ex-betslip-summary-row,
#betSlipDock .ex-betslip-advanced__row {
  font-size: var(--theme-text-sm, 0.75rem);
  color: var(--ex-muted, var(--para-color));
}

#betSlipDock .ex-betslip-summary-row span,
#betSlipDock .ex-betslip-advanced__row span {
  color: var(--ex-muted, var(--para-color));
}

#betSlipDock .ex-betslip-summary-row strong,
#betSlipDock .ex-betslip-advanced__row strong {
  font-size: var(--theme-text-md, 0.8125rem);
  font-weight: var(--theme-weight-bold, 700);
  font-variant-numeric: tabular-nums;
  color: var(--h-color, var(--theme-text-primary));
}

#betSlipDock .ex-betslip-summary-row--profit strong,
#betSlipDock .ex-betslip-summary-row__return {
  font-size: var(--theme-text-base, 0.875rem);
  font-weight: var(--theme-weight-bold, 700);
  font-variant-numeric: tabular-nums;
  color: var(--color-success, var(--bp-success-strong, #10B981));
}

#betSlipDock.ex-betslip-shell--sportsbook .ex-betslip-summary-row__return {
  font-size: var(--theme-text-lg-plus, 1rem);
}

/* ===== exchange-semantic.css ===== */
/**
 * Semantic value colors — positive / negative / zero / flow direction.
 * Tokens live in exchange-theme.css (--color-value-*).
 */

.ex-value,
.s7__value {
    font-variant-numeric: tabular-nums;
}

.ex-value--positive,
.s7__value--positive {
    color: var(--color-value-positive);
    font-weight: 600;
}

.ex-value--negative,
.s7__value--negative {
    color: var(--color-value-negative);
    font-weight: 600;
}

.ex-value--zero,
.s7__value--zero {
    color: var(--color-value-zero);
}

.ex-value--neutral,
.s7__value--neutral {
    color: var(--color-value-neutral);
}

.exchange-user-layout .ex-stat-card .media-body h3.ex-value--neutral,
.exchange-account-layout .ex-stat-card .media-body h3.ex-value--neutral {
    color: var(--ex-text-strong, #334155) !important;
}

/* Bet result / status highlights — tokens from exchange-theme (--ex-status-*) */
/* Bet result / status highlights — tokens from exchange-theme (--ex-status-*).
   !important beats Bootstrap .badge defaults without per-page account overrides. */
.ex-bet-log-result--win,
.ex-status--win {
    background: var(--ex-bet-status-win-bg, var(--ex-status-win, var(--bp-success-strong))) !important;
    color: var(--ex-bet-status-win-text, var(--ex-status-on, #fff)) !important;
}

.ex-bet-log-result--lose,
.ex-status--lose {
    background: var(--ex-bet-status-lose-bg, var(--ex-status-lose, var(--bp-danger-strong))) !important;
    color: var(--ex-bet-status-lose-text, var(--ex-status-on, #fff)) !important;
}

.ex-bet-log-result--refunded,
.ex-status--refund {
    background: var(--ex-bet-status-refunded-bg, var(--ex-status-refund, var(--bp-info))) !important;
    color: var(--ex-bet-status-refunded-text, var(--ex-status-on, #fff)) !important;
}

.ex-bet-log-result--processing,
.ex-status--process {
    background: var(--ex-bet-status-processing-bg, var(--ex-status-process, var(--bp-warning-strong))) !important;
    color: var(--ex-bet-status-processing-text, var(--ex-status-on, #fff)) !important;
}

/* Money flow semantics (stake vs return columns) */
.ex-value--flow-in,
.s7__value--flow-in {
    color: var(--color-flow-in);
    font-weight: 600;
}

.ex-value--flow-out,
.s7__value--flow-out {
    color: var(--color-flow-out);
    font-weight: 600;
}

/* Odds / trend direction — green up, red down (flash attention uses amber separately) */
.ex-odds-direction--up {
    color: var(--color-odds-up);
}

.ex-odds-direction--down {
    color: var(--color-odds-down);
}

.ex-odds-movement-log__item--up .ex-odds-movement-log__price {
    color: var(--color-odds-up);
}

.ex-odds-movement-log__item--down .ex-odds-movement-log__price {
    color: var(--color-odds-down);
}

/* Dynamic stat headings — class toggles with value sign via JS or Blade */
.ex-dash-stat__value--positive h3,
.ex-dash-stat__value--positive .h3,
.exchange-user-layout .ex-stat-card.ex-dash-stat__value--positive .media-body h3,
.exchange-user-layout .ex-stat-card .media-body.ex-dash-stat__value--positive h3,
.exchange-account-layout .ex-stat-card.ex-dash-stat__value--positive .media-body h3,
.exchange-account-layout .ex-stat-card .media-body.ex-dash-stat__value--positive h3 {
    color: var(--color-value-positive) !important;
}

.ex-dash-stat__value--negative h3,
.ex-dash-stat__value--negative .h3,
.exchange-user-layout .ex-stat-card.ex-dash-stat__value--negative .media-body h3,
.exchange-user-layout .ex-stat-card .media-body.ex-dash-stat__value--negative h3,
.exchange-account-layout .ex-stat-card.ex-dash-stat__value--negative .media-body h3,
.exchange-account-layout .ex-stat-card .media-body.ex-dash-stat__value--negative h3 {
    color: var(--color-value-negative) !important;
}

.ex-dash-stat__value--zero h3,
.ex-dash-stat__value--zero .h3,
.exchange-user-layout .ex-stat-card.ex-dash-stat__value--zero .media-body h3,
.exchange-user-layout .ex-stat-card .media-body.ex-dash-stat__value--zero h3,
.exchange-account-layout .ex-stat-card.ex-dash-stat__value--zero .media-body h3,
.exchange-account-layout .ex-stat-card .media-body.ex-dash-stat__value--zero h3 {
    color: var(--color-value-zero, var(--ex-muted)) !important;
}

.exchange-user-layout .ex-stat-card.ex-dash-stat__value--positive,
.exchange-account-layout .ex-stat-card.ex-dash-stat__value--positive {
    --ex-dash-accent: var(--color-value-positive);
}

.exchange-user-layout .ex-stat-card.ex-dash-stat__value--negative,
.exchange-account-layout .ex-stat-card.ex-dash-stat__value--negative {
    --ex-dash-accent: var(--color-value-negative);
}

.exchange-user-layout .ex-stat-card.ex-dash-stat__value--zero,
.exchange-account-layout .ex-stat-card.ex-dash-stat__value--zero {
    --ex-dash-accent: var(--color-value-zero, #94a3b8);
}

.exchange-account-layout .ex-value--positive,
.exchange-account-layout .ex-account-statement-page .ex-value--positive,
.exchange-account-layout .ex-account-statement-page .ex-value--flow-in {
    color: var(--color-value-positive) !important;
    font-weight: 600;
}

.exchange-account-layout .ex-value--negative,
.exchange-account-layout .ex-account-statement-page .ex-value--negative,
.exchange-account-layout .ex-account-statement-page .ex-value--flow-out {
    color: var(--color-value-negative) !important;
    font-weight: 600;
}

.exchange-account-layout .ex-value--zero,
.exchange-account-layout .ex-account-statement-page .ex-value--zero {
    color: var(--color-value-zero, var(--ex-muted)) !important;
}

.s7__widget-three .s7__value--positive h3,
.s7__widget-three .s7__value--positive .h3,
.s7__widget-three h3.s7__value--positive {
    color: var(--color-value-positive);
}

.s7__widget-three .s7__value--negative h3,
.s7__widget-three .s7__value--negative .h3,
.s7__widget-three h3.s7__value--negative {
    color: var(--color-value-negative);
}

.s7__widget-three .s7__value--zero h3,
.s7__widget-three .s7__value--zero .h3,
.s7__widget-three h3.s7__value--zero {
    color: var(--color-value-zero);
}

/* ===== exchange-empty.css ===== */
/**
 * WP18 — Empty / idle state atom
 * Load AFTER exchange.css (+ account when present).
 * One empty pattern: icon · title · text · optional CTA.
 */

.exchange-app .ex-empty,
.exchange-app .ex-inplay-page__empty,
.exchange-app .ex-betslip-empty,
.exchange-app .ex-money-log-empty {
  text-align: center;
  padding: 1.75rem 1rem;
  background: var(--ex-surface, var(--ex-market-bg, var(--card-bg)));
  border: 1px solid var(--ex-border, var(--border-color));
  border-radius: var(--theme-radius-panel, 8px);
  box-shadow: none;
}

.exchange-app .ex-betslip-empty {
  padding: 1.25rem 0.75rem;
  background: transparent;
  border: 0;
}

.exchange-app .ex-empty__icon,
.exchange-app .ex-inplay-page__empty-icon,
.exchange-app .ex-betslip-empty__icon,
.exchange-app .ex-money-log-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.65rem;
  color: var(--ex-muted, var(--para-color));
  opacity: 0.8;
}

.exchange-app .ex-empty__icon svg,
.exchange-app .ex-inplay-page__empty-icon svg,
.exchange-app .ex-betslip-empty__icon svg,
.exchange-app .ex-money-log-empty__icon svg {
  width: 1.75rem;
  height: 1.75rem;
  stroke: currentColor;
}

.exchange-app .ex-empty__title,
.exchange-app .ex-inplay-page__empty-title,
.exchange-app .ex-betslip-empty__title,
.exchange-app .ex-money-log-empty__title {
  margin: 0 0 0.35rem;
  color: var(--ex-text-strong, var(--h-color));
  font-size: var(--theme-text-lg-plus, 1rem);
  font-weight: var(--theme-weight-semibold, 600);
  line-height: 1.3;
}

.exchange-app .ex-empty__text,
.exchange-app .ex-inplay-page__empty-text,
.exchange-app .ex-betslip-empty__text,
.exchange-app .ex-money-log-empty__text {
  margin: 0 auto 0.85rem;
  max-width: 22rem;
  color: var(--ex-muted, var(--para-color));
  font-size: var(--theme-text-sm, 0.75rem);
  font-weight: var(--theme-weight-medium, 500);
  line-height: 1.45;
}

.exchange-app .ex-empty__cta,
.exchange-app .ex-inplay-page__empty-cta,
.exchange-app .ex-inplay-page__empty-link.ex-inplay-page__empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--theme-control-height-secondary, 36px);
  padding: 0.35rem 0.9rem;
  border-radius: var(--theme-radius-control, 8px);
  background: var(--theme-btn-primary-bg, var(--theme-primary, #DD3E42));
  color: var(--theme-btn-primary-text, #fff) !important;
  font-size: var(--theme-text-md, 0.8125rem);
  font-weight: var(--theme-weight-semibold, 600);
  text-decoration: none !important;
}

.exchange-app .ex-empty__cta:hover,
.exchange-app .ex-inplay-page__empty-cta:hover,
.exchange-app .ex-inplay-page__empty-link.ex-inplay-page__empty-cta:hover {
  background: var(--theme-btn-primary-hover, var(--theme-primary, #DD3E42));
  color: #fff !important;
}

/* Quiet text links (non-CTA) */
.exchange-app .ex-inplay-page__empty-link:not(.ex-inplay-page__empty-cta) {
  font-size: var(--theme-text-sm, 0.75rem);
  font-weight: var(--theme-weight-semibold, 600);
  color: var(--theme-primary, #DD3E42);
}

/* ===== exchange-dark-qa.css ===== */
/**
 * WP20 — Dark QA polish
 * Retired: footer → exchange-footer.css · empty → exchange-empty.css ·
 * account inputs → exchange-account.css · cat-strip seam → exchange-home-ia.css.
 * Keep this file as a no-op shim so cached HTML link tags do not 404.
 */

/* ===== exchange-mobile-nav.css ===== */
/**
 * Mobile hybrid nav — bottom bar replaces left icon-rail (≤991.98px).
 * More opens the existing hamburger drawer (#sidebar-menu-user).
 */

.exchange-app {
    --ex-mobile-nav-h: 0px;
}

.exchange-app .ex-mobile-nav {
    display: none;
}

@media (max-width: 991.98px) {
    .exchange-app {
        /* 3.25rem (52px) — reduced from 3.5rem (56px). The nav's own
           0.25rem top/bottom padding (8px total) subtracted from 52px
           leaves exactly 44px for each item, still matching the
           min-height:2.75rem touch-target floor below (was ≥44 inside
           56px; now ≥44 inside 52px — the floor itself is unchanged). */
        --ex-mobile-nav-h: calc(3.25rem + env(safe-area-inset-bottom, 0px));
    }

    .exchange-app .ex-mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        height: var(--ex-mobile-nav-h);
        padding: 0.25rem 0.35rem env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
        border-top: 1px solid var(--ex-border, rgba(255, 255, 255, 0.08));
        background: var(--ex-sidebar-ref-bg, var(--ex-surface-raised, #111827));
        box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.18);
        /* iOS Safari lags position:fixed elements behind the page during
           the address-bar collapse/expand scroll animation, reading as
           the bar "jumping" up with the content. Promoting it to its own
           GPU compositing layer keeps it pinned through that animation
           instead of being repainted with the scrolled content. */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
    }

    .exchange-app .ex-mobile-nav.ex-mobile-nav--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    html.theme-light .exchange-app .ex-mobile-nav,
    .theme-light .exchange-app .ex-mobile-nav {
        background: var(--ex-sidebar-ref-bg, #FFFFFF);
        box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.08);
    }

    .exchange-app .ex-mobile-nav__item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.05rem;
        margin: 0;
        padding: 0.15rem 0.2rem;
        width: 100%;
        min-width: 0;
        min-height: 2.75rem; /* ≥44 content area inside 52px bar */
        text-align: center;
        border: 0;
        border-radius: var(--theme-radius-control, 8px);
        background: transparent;
        color: var(--ex-sidebar-ref-muted, var(--ex-muted, #9CA3AF));
        text-decoration: none !important;
        font-size: var(--theme-text-sm, 0.75rem);
        font-weight: var(--theme-weight-semibold, 600);
        line-height: 1.1;
        letter-spacing: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease, background 0.15s ease;
    }

    .exchange-app .ex-mobile-nav__icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0;
        width: 1.75rem !important;
        min-width: 1.75rem !important;
        height: 1.75rem !important;
        border-radius: var(--theme-radius-control, 8px) !important;
        background: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        line-height: 0 !important;
    }

    .exchange-app .ex-mobile-nav__icon svg,
    .exchange-app .ex-mobile-nav__icon svg.feather {
        display: block !important;
        width: 1.15rem !important;
        height: 1.15rem !important;
        min-width: 1.15rem !important;
        min-height: 1.15rem !important;
        stroke: currentColor !important;
        stroke-width: 2.25 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        fill: none !important;
        color: inherit !important;
    }

    .exchange-app .ex-mobile-nav__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--theme-text-sm, 0.75rem);
        font-weight: var(--theme-weight-semibold, 600);
        line-height: 1.15;
    }

    .exchange-app .ex-mobile-nav__item:hover,
    .exchange-app .ex-mobile-nav__item:focus-visible {
        color: var(--ex-sidebar-ref-text, var(--theme-text-primary, #EEEEEE));
        outline: none;
        background: var(--ex-sidebar-ref-hover, transparent);
    }

    html.theme-dark .exchange-app .ex-mobile-nav__item,
    .theme-dark .exchange-app .ex-mobile-nav__item {
        color: #A8B3C5;
    }

    html.theme-light .exchange-app .ex-mobile-nav__item,
    .theme-light .exchange-app .ex-mobile-nav__item {
        color: #6B7280;
    }

    .exchange-app .ex-mobile-nav__item.is-active {
        color: #EEEEEE !important;
        background: linear-gradient(180deg, #2A3446 0%, #111827 52%, #0B1220 100%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            inset 0 -1px 0 rgba(0, 0, 0, 0.28),
            0 2px 4px rgba(15, 23, 42, 0.2) !important;
    }

    html.theme-light .exchange-app .ex-mobile-nav__item.is-active,
    .theme-light .exchange-app .ex-mobile-nav__item.is-active {
        color: #EEEEEE !important;
        background: linear-gradient(180deg, #2A3446 0%, #111827 52%, #0B1220 100%) !important;
    }

    html.theme-dark .exchange-app .ex-mobile-nav__item.is-active,
    .theme-dark .exchange-app .ex-mobile-nav__item.is-active {
        color: #111827 !important;
        background: linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 52%, #E5EAF1 100%) !important;
        box-shadow:
            inset 0 1px 0 #FFFFFF,
            inset 0 -1px 0 rgba(15, 23, 42, 0.1),
            0 2px 0 #A8B6C8,
            0 2px 4px rgba(0, 0, 0, 0.25) !important;
    }

    .exchange-app .ex-mobile-nav__item.is-active .ex-mobile-nav__icon {
        color: #FFFFFF !important;
        background: #DD3E42 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.35),
            0 1px 2px rgba(120, 10, 28, 0.3) !important;
    }

    .exchange-app .ex-mobile-nav__item.is-active .ex-mobile-nav__icon svg,
    .exchange-app .ex-mobile-nav__item.is-active .ex-mobile-nav__icon svg.feather {
        color: #FFFFFF !important;
        stroke: #FFFFFF !important;
        fill: none !important;
    }

    .exchange-app .ex-mobile-nav__item.is-open {
        color: var(--theme-primary, #DD3E42) !important;
    }

    .exchange-app .ex-mobile-nav__item.is-open .ex-mobile-nav__icon {
        color: var(--theme-primary, #DD3E42) !important;
    }

    .exchange-app .ex-mobile-nav__item.is-open .ex-mobile-nav__icon svg {
        stroke: currentColor !important;
    }
    /* Leave room for fixed bottom nav */
    body.exchange-app {
        padding-bottom: var(--ex-mobile-nav-h) !important;
    }

    /* Full-bleed main — hide left icon rail */
    .exchange-app .ex-shell,
    .exchange-app .ex-shell.ex-shell--user,
    .exchange-app .ex-shell.ex-shell--betstrip,
    .exchange-app .ex-shell.ex-shell--betstrip.ex-shell--user,
    .exchange-app .ex-shell.ex-shell--sidebar-expanded,
    .exchange-app .ex-shell.ex-shell--betstrip.ex-shell--sidebar-expanded {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .exchange-app .ex-shell__sidebar {
        display: none !important;
    }

    .exchange-app .ex-shell__main {
        grid-column: 1 !important;
        grid-row: 1;
        width: 100%;
        max-width: 100%;
    }

    /* Duplicate schedule tabs — bottom bar covers In-Play / Fixtures */
    .exchange-app .ex-schedule-subnav {
        display: none !important;
    }

    /* Header hamburger redundant with More tab */
    .exchange-app .ex-header-actions__item:has(#navigation-button-user) {
        display: none !important;
    }

    /* Bet slip — centered modal card on mobile */
    .exchange-app .ex-shell__betstrip {
        top: calc(50% - (var(--ex-mobile-nav-h) / 4)) !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        width: min(22.5rem, calc(100% - 1.5rem)) !important;
        max-width: calc(100% - 1.5rem) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: min(70dvh, calc(100dvh - var(--ex-mobile-nav-h) - 1.5rem)) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: var(--theme-radius-panel, 8px) !important;
    }

    .exchange-app .ex-shell__betstrip.is-open {
        transform: translate(-50%, -50%) !important;
    }

    /* ============================================================
     * Mobile bet-slip: bottom-sheet reposition, site-wide.
     *
     * The centered-modal rules above (top/bottom/left/right/width/
     * transform, all !important) were missed during the original Home-only
     * pass in exchange-shell.css, which used plain (non-!important)
     * declarations and so never actually won here. This block was
     * originally gated on body.ex-home-dense; widened to every page (the
     * `body` type selector keeps it at higher specificity than the plain
     * .exchange-app rules above, order-independently, without needing a
     * page-specific class) as part of the mobile multi-bet-slip redesign.
     *
     * left/right use --theme-space-page-x (the container's own 12px
     * inline padding) alone, matching the match card's own left/right
     * edge — the card no longer carries an extra margin on top of that
     * padding (removed in exchange-indian-list.css so the card spans
     * the same width as the sport header), so the sheet doesn't need
     * the extra --theme-space-3 offset it used to.
     * ============================================================ */
    body.exchange-app .ex-shell__betstrip {
        top: auto !important;
        bottom: 0 !important;
        left: var(--theme-space-page-x, 0.75rem) !important;
        right: var(--theme-space-page-x, 0.75rem) !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* Square corners, not rounded, where the sheet meets the card
           edge it's aligned to. */
        border-radius: 0 !important;
        transform: translateY(100%) !important;
    }

    body.exchange-app .ex-shell__betstrip.is-open {
        transform: translateY(0) !important;
    }

    .exchange-app .ex-shell__betstrip:has(.ex-betslip-sheet--quick) {
        max-height: min(58dvh, calc(100dvh - var(--ex-mobile-nav-h) - 1.5rem)) !important;
    }

    /* Fancy/Session/Over-Under quick-add adds real content below the base
       selection — give the sheet more room than the plain 58dvh quick-mode
       cap above once that section actually exists in the DOM (i.e. the
       match genuinely has one of those markets open). Same specificity +
       !important as the rule above (needed to beat it at all) — wins by
       coming later in this same file/rule group. */
    .exchange-app .ex-shell__betstrip:has(.ex-betslip-quickadd) {
        max-height: min(88dvh, calc(100dvh - var(--ex-mobile-nav-h) - 0.75rem)) !important;
    }
}

@media (min-width: 992px) {
    .exchange-app .ex-mobile-nav {
        display: none !important;
    }
}

/* ===== exchange-open-bets-sheet.css ===== */
/**
 * "My Open Bets" mobile bottom sheet — quick-glance panel opened from the
 * bottom nav's "My Bets" item (left of the hamburger/More button).
 * Docks above the fixed bottom nav (respects --ex-mobile-nav-h), mirrors the
 * mobile bet-slip's centered-modal-card mechanics (backdrop + is-open toggle)
 * rather than introducing a new interaction pattern.
 */

.ex-open-bets-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--theme-z-overlay, 400);
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.ex-open-bets-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ex-open-bets-sheet {
    position: fixed;
    left: 50%;
    bottom: calc(var(--ex-mobile-nav-h, 3.5rem) + 0.5rem);
    z-index: var(--theme-z-modal, 500);
    width: min(26rem, calc(100% - 1.5rem));
    max-height: min(70dvh, calc(100dvh - var(--ex-mobile-nav-h, 3.5rem) - 2rem));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--ex-surface-panel, var(--ex-market-bg, #111827));
    border: 1px solid var(--ex-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--theme-radius-panel, 10px);
    box-shadow: var(--ex-inplay-panel-shadow, var(--ex-shadow, 0 -4px 20px rgba(15, 23, 42, 0.25)));
    transform: translate(-50%, 0.75rem) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.ex-open-bets-sheet.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.ex-open-bets-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--ex-border, rgba(255, 255, 255, 0.08));
    flex-shrink: 0;
}

/* .exchange-app h2 (exchange-theme.css) sets a global 1.5rem h2 size with
   higher specificity (class+tag) than a lone .ex-open-bets-sheet__title
   class selector — scope through the sheet parent to win the cascade
   without resorting to !important. */
.ex-open-bets-sheet .ex-open-bets-sheet__title {
    /* Matches .ex-open-bets__header (exchange.css) — the full-page Open
       Bets panel's own title — rather than inventing a heavier/larger
       weight for this modal context. */
    margin: 0;
    font-family: var(--theme-font-sans, var(--heading-font, sans-serif));
    font-size: var(--theme-type-league-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-league-weight, var(--theme-weight-semibold, 600));
    letter-spacing: var(--theme-type-league-tracking, 0);
    color: var(--ex-schedule-category-head-text, var(--ex-text-strong, #EEEEEE));
}

.ex-open-bets-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--theme-radius-control, 8px);
    background: transparent;
    color: var(--ex-muted, #9CA3AF);
    cursor: pointer;
}

.ex-open-bets-sheet__close:hover,
.ex-open-bets-sheet__close:focus-visible {
    background: var(--ex-row-alt, rgba(255, 255, 255, 0.06));
    color: var(--ex-text-strong, var(--ex-text, #EEEEEE));
    outline: none;
}

.ex-open-bets-sheet__close svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke: currentColor;
}

/* The Vue app mounts INTO [data-exchange-open-bets] (Vue 3 appends the
   rendered root as a child of the mount element, it does not replace it —
   unlike Vue 2), so THIS is the actual flex child of .ex-open-bets-sheet,
   not .ex-open-bets-page-panel one level deeper. Constraining the wrong
   element is why overflow never triggered. */
.ex-open-bets-sheet [data-exchange-open-bets] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ex-open-bets-sheet .ex-open-bets-page-panel {
    display: block;
}

.ex-open-bets-sheet__footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--ex-border, rgba(255, 255, 255, 0.08));
    text-align: center;
}

.ex-open-bets-sheet__view-all {
    /* Solid --theme-primary (#DD3E42) — same brand color as active nav
       tabs/icon badges (mobile-bottom-nav .is-active), not the lighter
       --ex-lay pink. Pill shape matches .ex-load-more-btn's secondary-CTA
       convention. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--theme-control-height-secondary, 36px);
    padding: 0.4rem 1.25rem;
    border-radius: var(--theme-radius-pill, 999px);
    background: var(--theme-primary, #DD3E42);
    font-size: var(--theme-type-button-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-button-weight, var(--theme-weight-semibold, 600));
    color: #FFFFFF;
    text-decoration: none;
}

.ex-open-bets-sheet__view-all:hover {
    background: var(--theme-primary-hover, var(--bp-orange-600, #C7333A));
    color: #FFFFFF;
    text-decoration: none;
}

.ex-open-bets-sheet__empty {
    margin: 0;
    padding: 2rem 1rem;
    text-align: center;
    font-size: var(--theme-type-caption-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-weight-medium, 500);
    color: var(--ex-muted, #9CA3AF);
}

/* ─── Aggregate summary bar (per-bet exposure/P&L, shared with the full
   /open-bets page — not sheet-specific) ────────────────────────────────── */
.ex-open-bets-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    margin: 0 0 0.5rem;
    background: var(--ex-surface-subhead, var(--theme-match-list-columns-bg, #1E293B));
    border-bottom: 1px solid var(--ex-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--theme-radius-control, 8px);
}

.ex-open-bets-sheet .ex-open-bets-summary {
    /* Pinned to the top of the scroll container ([data-exchange-open-bets],
       overflow-y:auto) so totals stay visible while the bet list scrolls
       underneath, instead of scrolling away with it. Needs an opaque
       background (already set above) and its own z-index so rows don't
       show through as they pass beneath it. */
    position: sticky;
    top: 0;
    z-index: 1;
    border-radius: 0 0 var(--theme-radius-control, 8px) var(--theme-radius-control, 8px);
}

.ex-open-bets-summary__item {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ex-open-bets-summary__item:last-child {
    align-items: flex-end;
    text-align: right;
}

.ex-open-bets-summary__label {
    font-size: var(--theme-type-label-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-type-label-weight, var(--theme-weight-semibold, 600));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ex-muted, #9CA3AF);
}

.ex-open-bets-summary__value {
    font-family: var(--theme-font-sans, sans-serif);
    font-size: var(--theme-type-body-size, var(--theme-text-base, 0.875rem));
    font-weight: var(--theme-type-money-weight, var(--theme-weight-bold, 700));
    font-variant-numeric: tabular-nums;
    color: var(--ex-text-strong, var(--ex-text, #EEEEEE));
}

.ex-open-bets-summary__value--profit {
    color: var(--theme-pl-positive, var(--color-value-positive, #15803D));
}

.ex-open-bets-summary__value--loss {
    color: var(--theme-pl-negative, var(--color-value-negative, #B91C1C));
}

/* ─── Per-bet exposure / potential P&L cells (desktop 6-col grid + mobile
   stacked variant) ──────────────────────────────────────────────────────── */
.ex-open-bets__cell--exposure,
.ex-open-bets__cell--profit {
    align-items: center;
    text-align: center;
}

.ex-open-bets__col-label--exposure,
.ex-open-bets__col-label--profit {
    text-align: center;
}

.ex-open-bets__exposure {
    font-family: var(--theme-font-sans, sans-serif);
    color: var(--ex-text-strong, var(--ex-text, #EEEEEE));
    font-weight: var(--theme-weight-medium, 500);
    font-size: var(--theme-type-body-size, var(--theme-text-base, 0.875rem));
    font-variant-numeric: tabular-nums;
}

.ex-open-bets__profit {
    font-family: var(--theme-font-sans, sans-serif);
    font-weight: var(--theme-type-money-weight, var(--theme-weight-bold, 700));
    font-size: var(--theme-type-body-size, var(--theme-text-base, 0.875rem));
    font-variant-numeric: tabular-nums;
}

.ex-open-bets__profit--positive {
    color: var(--theme-pl-positive, var(--color-value-positive, #15803D));
}

.ex-open-bets__profit--negative {
    color: var(--theme-pl-negative, var(--color-value-negative, #B91C1C));
}

/* ─── LIVE badge / kickoff time / odds (event + stake cells) ────────────── */
.ex-open-bets__live-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.05rem 0.4rem;
    margin-bottom: 0.15rem;
    border-radius: var(--theme-radius-pill, 999px);
    background: var(--bp-danger, #DC2626);
    color: #FFFFFF;
    font-size: var(--theme-text-xs, 0.6875rem);
    font-weight: var(--theme-weight-bold, 700);
    letter-spacing: 0.04em;
}

.ex-open-bets__kickoff {
    font-size: var(--theme-type-caption-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-weight-medium, 500);
    color: var(--ex-muted, #9CA3AF);
}

.ex-open-bets__bet-meta {
    font-size: var(--theme-type-caption-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-weight-medium, 500);
    color: var(--ex-muted, #9CA3AF);
    font-variant-numeric: tabular-nums;
}

.ex-open-bets__odds {
    display: block;
    font-size: var(--theme-type-caption-size, var(--theme-text-sm, 0.75rem));
    font-weight: var(--theme-weight-medium, 500);
    color: var(--ex-muted, #9CA3AF);
    font-variant-numeric: tabular-nums;
}

/* Dot next to "Potential P/L" label — shown only when the value is a
   live mark-to-market estimate (current odds), not the fixed
   locked-odds profit, so users can tell the two apart at a glance. */
.ex-open-bets__live-dot {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.2rem;
    border-radius: 50%;
    vertical-align: middle;
    animation: ex-open-bets-live-pulse 1.8s ease-in-out infinite;
}

.ex-open-bets__live-dot--profit {
    background: var(--bp-success, #16A34A);
}

.ex-open-bets__live-dot--loss {
    /* Same brand red/pink as the sheet's "View all" CTA (--theme-primary)
       — reusing it here for the loss state instead of a generic danger
       red keeps the sheet's own palette internally consistent. */
    background: var(--theme-primary, #DD3E42);
}

@keyframes ex-open-bets-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (min-width: 992px) {
    .ex-open-bets__cols,
    .ex-open-bets__row {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(4.5rem, 5.5rem)
            minmax(5rem, 6.5rem)
            minmax(6rem, 7.5rem)
            minmax(5.5rem, 6.5rem)
            minmax(5.5rem, 6.5rem);
    }
}

@media (max-width: 767.98px) {
    .ex-open-bets__cell--exposure,
    .ex-open-bets__cell--profit {
        align-items: flex-end;
        text-align: right;
    }
}

/* ─── Sheet-specific mobile card layout ──────────────────────────────────
   Adding exposure+profit (2 more cells) broke the base 2-col mobile grid's
   auto-flow (event/type/stake/result/exposure/profit = 5 cells after the
   full-width event row, an odd number — the last row was left half-empty).
   grid-template-areas gives each cell an explicit slot instead of relying
   on auto-flow, and drops the now-redundant return/liability cell (its
   info is already covered by stake + profit + exposure) to keep the card
   focused on what matters at a glance. */
@media (max-width: 767.98px) {
    .ex-open-bets-sheet .ex-open-bets__row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "event event"
            "type stake"
            "exposure profit";
        row-gap: 0.5rem;
        padding: 0.85rem 0.9rem;
    }

    .ex-open-bets-sheet .ex-open-bets__cell--event { grid-area: event; }

    .ex-open-bets-sheet .ex-open-bets__cell--type {
        grid-area: type;
        align-items: flex-start;
        text-align: left;
    }

    .ex-open-bets-sheet .ex-open-bets__cell--stake {
        grid-area: stake;
        align-items: flex-end;
        text-align: right;
    }

    .ex-open-bets-sheet .ex-open-bets__cell--result {
        display: none;
    }

    .ex-open-bets-sheet .ex-open-bets__cell--exposure,
    .ex-open-bets-sheet .ex-open-bets__cell--profit {
        padding-top: 0.5rem;
        border-top: 1px dashed var(--ex-border, rgba(255, 255, 255, 0.1));
    }

    .ex-open-bets-sheet .ex-open-bets__cell--exposure {
        grid-area: exposure;
        align-items: flex-start;
        text-align: left;
    }

    .ex-open-bets-sheet .ex-open-bets__cell--profit {
        grid-area: profit;
        align-items: flex-end;
        text-align: right;
    }

    .ex-open-bets-sheet .ex-open-bets__row {
        border-radius: var(--theme-radius-control, 8px);
        margin: 0 0.5rem 0.5rem;
        border-bottom: 0;
        background: var(--ex-market-bg, rgba(255, 255, 255, 0.03));
    }

    .ex-open-bets-sheet .ex-open-bets__row:last-child {
        margin-bottom: 0.75rem;
    }

    .ex-open-bets-sheet .ex-open-bets__match {
        font-weight: var(--theme-type-team-weight, var(--theme-weight-semibold, 600));
        font-size: var(--theme-type-team-size, var(--theme-text-md, 0.8125rem));
    }

    .ex-open-bets-sheet .ex-open-bets__profit {
        font-size: var(--theme-type-body-size, var(--theme-text-base, 0.875rem));
        font-weight: var(--theme-type-money-weight, var(--theme-weight-bold, 700));
    }
}

/* Bottom sheet is mobile-only, matching the rest of .ex-mobile-nav */
@media (min-width: 992px) {
    .ex-open-bets-sheet,
    .ex-open-bets-backdrop {
        display: none !important;
    }
}