:root {
    --odds-navy: #0b2340;
    --odds-blue: #2563eb;
    --odds-blue-dark: #1d4ed8;
    --odds-blue-soft: #eff6ff;
    --odds-border: #dbe2ea;
    --odds-text: #0f172a;
    --odds-muted: #64748b;
    --odds-page-bg: #f5f7fb;
    --odds-card: #ffffff;
    --odds-green: #22c55e;
    --odds-yellow: #facc15;
    --odds-gap-yellow: #fef9c3;
    --odds-gap-yellow-border: #facc15;
    --odds-gap-red: #fee2e2;
    --odds-gap-red-border: #f87171;
    --odds-gray: #94a3b8;
}

* {
    box-sizing: border-box;
}

body {
    font-family: Inter, Arial, sans-serif;
    margin: 0;
    background: var(--odds-page-bg);
    color: var(--odds-text);
}

button,
a {
    font: inherit;
}

.page {
    min-height: 100vh;
}

main {
    width: 100%;
}

.sidebar {
    position: sticky;
    top: 0;
    /* Above the sticky league header (30), but below the mobile backdrop/menu (60/70). */
    z-index: 40;
    background: var(--odds-card);
    border-bottom: 1px solid var(--odds-border);
}

.odds-top-nav {
    align-items: center;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1460px;
    min-height: 68px;
    padding: 0 1.5rem;
}

.odds-logo {
    align-items: center;
    color: var(--odds-text);
    display: inline-flex;
    font-size: 1.25rem;
    font-weight: 800;
    gap: 0.7rem;
    letter-spacing: -0.03em;
    text-decoration: none;
    white-space: nowrap;
}

.odds-logo-mark {
    align-items: center;
    background: linear-gradient(145deg, #3b82f6, var(--odds-blue-dark));
    border: 2px solid var(--odds-navy);
    border-radius: 10px;
    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22);
    color: white;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1rem;
    font-style: italic;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    letter-spacing: -0.08em;
    padding-right: 0.08em;
    width: 38px;
}

.odds-logo-wordmark {
    letter-spacing: -0.035em;
}

.odds-nav-links {
    align-items: center;
    display: flex;
    gap: 1.35rem;
    overflow-x: auto;
}

.odds-nav-item {
    align-items: center;
    color: #475569;
    display: inline-flex;
    font-size: 0.96rem;
    font-weight: 700;
    gap: 0.45rem;
    min-height: 68px;
    padding-top: 0.15rem;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}

.odds-nav-item .nav-menu-icon {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: currentColor;
    height: 22px;
    width: 22px;
}

.odds-nav-item .nav-menu-svg {
    height: 19px;
    width: 19px;
}

.odds-nav-item:hover,
.odds-nav-item:focus {
    color: var(--odds-blue);
}

.odds-nav-item-active {
    color: var(--odds-blue);
}

.odds-nav-item-active::after {
    background: var(--odds-blue);
    border-radius: 999px;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
}

.odds-page {
    padding: 2rem 1.5rem 3rem;
}

.odds-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 260px minmax(0, 1fr);
    margin: 0 auto;
    max-width: 1460px;
}

.odds-main,
.odds-sidebar {
    min-width: 0;
}

.league-header,
.match-card,
.sport-menu-card,
.odds-legend,
.odds-disclaimer,
.odds-state-card,
.seo-content-card {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
}

.seo-breadcrumb {
    align-items: center;
    color: var(--odds-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.35rem;
    margin: 0 0 0.55rem;
    padding: 0 0.25rem;
}

.seo-breadcrumb a {
    color: var(--odds-blue);
    text-decoration: none;
}

.seo-breadcrumb a:hover,
.seo-breadcrumb a:focus {
    text-decoration: underline;
}

.league-header {
    margin-bottom: 1rem;
    padding: 1.1rem 1.25rem;
}

.league-research-trigger { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; white-space: nowrap; color: var(--odds-blue); font-size: .8rem; }
.extra-odds-modal.league-research-modal {
    margin: 0; padding: 1.25rem; width: min(980px, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem); gap: .85rem; color: var(--odds-text);
    animation-name: team-details-dialog-in;
}
.league-research-modal:not([open]) { display: none; }
.league-research-modal::backdrop { background: rgba(15, 23, 42, .48); }
.league-research-modal h2 { margin: .2rem 0; font-size: 1.45rem; }
.league-research-modal .research-context { margin: 0; color: var(--odds-muted); font-size: .8rem; line-height: 1.55; }
.research-controls { display: grid; grid-template-columns: 125px minmax(220px, 1fr) auto; align-items: end; gap: .7rem; }
.research-controls label { display: grid; gap: .35rem; font-size: .78rem; font-weight: 750; min-width: 0; }
.research-controls select { width: 100%; min-width: 0; border: 1px solid var(--odds-border); border-radius: 9px; background: var(--odds-card); color: inherit; padding: .65rem .5rem; font: inherit; }
.research-controls select:focus-visible { outline: 2px solid var(--odds-blue); outline-offset: 2px; }
.research-refresh { min-height: 40px; }
.research-view-tabs { display: flex; gap: .25rem; padding: .22rem; border: 1px solid var(--odds-border); border-radius: 10px; background: #f1f4f9; width: fit-content; }
.research-view-tabs button { border: 0; border-radius: 7px; background: transparent; color: var(--odds-muted); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 800; padding: .48rem .8rem; }
.research-view-tabs button:hover { color: var(--odds-text); }
.research-view-tabs button:focus-visible { outline: 2px solid var(--odds-blue); outline-offset: 1px; }
.research-view-tabs .research-view-active { background: #fff; box-shadow: 0 1px 4px rgba(23, 42, 79, .12); color: var(--odds-blue); }
.research-intro { padding: .7rem .85rem; border-left: 3px solid #8aabff; background: #f5f8ff; }
.research-content { min-height: 220px; min-width: 0; display: grid; align-content: start; gap: .7rem; }
.research-empty { text-align: center; padding: 2rem 1rem; max-width: 660px; margin: auto; }
.research-empty h3 { font-size: 1.15rem; margin: .7rem 0; }
.research-empty p { font-size: .86rem; color: var(--odds-muted); line-height: 1.6; margin: .65rem 0; }
.research-state-label { display: inline-block; padding: .3rem .65rem; border-radius: 6px; color: #245be0; background: #edf3ff; font-size: .7rem; font-weight: 800; letter-spacing: .05em; }
.research-match-list { display: grid; gap: 1rem; }
.research-match-timeline { padding: 1rem; border: 1px solid var(--odds-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(25, 45, 86, .06); }
.research-match-timeline > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-bottom: .85rem; }
.research-match-timeline h3 { margin: 0; font-size: 1rem; }
.research-match-timeline > header p { margin: .25rem 0 0; color: var(--odds-muted); font-size: .73rem; }
.research-match-state { padding: .3rem .55rem; border-radius: 999px; background: #edf3ff; color: #315dbe; font-size: .68rem; font-weight: 750; white-space: nowrap; }
.research-outcome-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.research-outcome-card { min-width: 0; overflow: hidden; border: 1px solid #dce4f1; border-radius: 11px; background: #f8faff; }
.research-outcome-card > header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .75rem; border-bottom: 1px solid #dce4f1; background: #f1f5fc; }
.research-outcome-card > header div { min-width: 0; display: flex; align-items: center; gap: .45rem; }
.research-outcome-card > header div > span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; background: var(--odds-blue); color: #fff; font-size: .72rem; font-weight: 850; }
.research-outcome-card > header div > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.research-latest-price { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.research-outcome-meta { margin: 0; padding: .6rem .75rem; color: var(--odds-muted); font-size: .7rem; }
.research-history { margin-top: .85rem; border: 1px solid #dce4f1; border-radius: 11px; background: #f8faff; }
.research-history > summary { cursor: pointer; padding: .6rem .8rem; border-radius: inherit; color: var(--odds-blue); font-size: .75rem; font-weight: 800; list-style-position: inside; }
.research-history > summary:focus-visible { outline: 2px solid var(--odds-blue); outline-offset: 2px; }
.research-history[open] > summary { border-bottom: 1px solid #dce4f1; border-radius: 11px 11px 0 0; }
.research-history-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.research-history-table caption { padding: .55rem .8rem .2rem; color: var(--odds-muted); font-size: .67rem; text-align: left; }
.research-history-table th, .research-history-table td { padding: .42rem .8rem; border-bottom: 1px solid #e7ecf4; text-align: left; vertical-align: middle; }
.research-history-table thead th { color: var(--odds-muted); font-size: .64rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.research-history-table tbody tr:last-child th, .research-history-table tbody tr:last-child td { border-bottom: 0; }
.research-history-table tbody th { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; }
.research-history-table time, .research-history-table strong { font-variant-numeric: tabular-nums; }
.research-history-table strong { font-size: .8rem; }
.research-outcome-badge { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; background: var(--odds-blue); color: #fff; font-size: .64rem; font-weight: 850; }
.research-clv { min-width: 78px; padding: .25rem .42rem; border-radius: 6px; background: #edf1f7; color: #64748b; font-size: .64rem; font-weight: 800; text-align: center; white-space: nowrap; }
.research-clv-positive { background: #e5f7ec; color: #08783b; }
.research-clv-negative { background: #feecec; color: #bd2d38; }
.research-no-changes { margin: 0; padding: 1rem .75rem; color: var(--odds-muted); font-size: .75rem; }
.research-summary { display: grid; gap: 1rem; }
.research-summary-heading h3, .research-peak-summary h3 { margin: 0; font-size: 1rem; }
.research-summary-heading p, .research-peak-summary header p { margin: .25rem 0 0; color: var(--odds-muted); font-size: .75rem; line-height: 1.5; }
.research-direction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.research-direction-card { min-width: 0; padding: .85rem; border: 1px solid #dce4f1; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(25, 45, 86, .05); }
.research-direction-card > header { display: flex; align-items: center; gap: .45rem; }
.research-direction-card > header span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--odds-blue); color: #fff; font-size: .72rem; font-weight: 850; }
.research-direction-card > header strong { font-size: .82rem; }
.research-direction-value { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; gap: .28rem; margin: .8rem 0; color: #64748b; }
.research-direction-value span { font-size: 1.2rem; font-weight: 900; }
.research-direction-value strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.research-direction-value small { grid-column: 1 / -1; color: var(--odds-muted); font-size: .67rem; }
.research-direction-up { color: #08783b; }
.research-direction-down { color: #bd2d38; }
.research-direction-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.research-direction-counts span { display: grid; gap: .08rem; padding: .38rem .25rem; border-radius: 7px; background: #f2f5fa; color: var(--odds-muted); font-size: .62rem; text-align: center; }
.research-direction-counts strong { color: #475569; font-size: .82rem; font-variant-numeric: tabular-nums; }
.research-direction-counts .research-count-up { background: #eaf8ef; color: #08783b; }
.research-direction-counts .research-count-up strong { color: #08783b; }
.research-direction-counts .research-count-down { background: #fff0f0; color: #bd2d38; }
.research-direction-counts .research-count-down strong { color: #bd2d38; }
.research-direction-card > p { margin: .75rem 0 .2rem; color: #435673; font-size: .7rem; line-height: 1.45; }
.research-direction-card > small { color: var(--odds-muted); font-size: .64rem; }
.research-peak-summary { padding: 1rem; border: 1px solid var(--odds-border); border-radius: 12px; background: #f8faff; }
.research-peak-bars { display: grid; gap: .65rem; margin-top: .9rem; }
.research-peak-row { display: grid; grid-template-columns: 180px minmax(100px, 1fr) 44px 36px; align-items: center; gap: .65rem; }
.research-peak-row > span { color: #435673; font-size: .72rem; }
.research-peak-row > strong { font-size: .75rem; font-variant-numeric: tabular-nums; text-align: right; }
.research-peak-row > small { color: var(--odds-muted); font-size: .66rem; font-variant-numeric: tabular-nums; text-align: right; }
.research-peak-track { overflow: hidden; height: 8px; border-radius: 999px; background: #e4eaf4; }
.research-peak-track span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #2b67eb, #7aa3ff); }
.research-updated { font-size: .73rem; color: var(--odds-muted); margin: .4rem 0 0; }
.research-footnote { border-top: 1px solid var(--odds-border); padding-top: .8rem; color: var(--odds-muted); font-size: .74rem; line-height: 1.6; }
.research-footnote strong { display: block; color: #405777; }
@media (max-width: 640px) {
    .extra-odds-modal.league-research-modal { padding: 1rem; width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
    .research-controls { grid-template-columns: 1fr 1fr; }
    .research-refresh { grid-column: 1 / -1; }
    .research-match-timeline { padding: .8rem; }
    .research-match-timeline > header { display: grid; gap: .5rem; }
    .research-match-state { justify-self: start; }
    .research-outcome-grid { grid-template-columns: 1fr; }
    .research-direction-grid { grid-template-columns: 1fr; }
    .research-peak-row { grid-template-columns: minmax(120px, 1fr) 42px 30px; gap: .45rem; }
    .research-peak-row > span { grid-column: 1 / -1; }
    .research-empty { padding: 1rem .25rem; }
}

.league-heading-row {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.league-heading-main {
    align-items: center;
    display: flex;
    gap: 1rem;
    min-width: 0;
}

.league-sport-icon {
    align-items: center;
    background: var(--odds-blue);
    border-radius: 50%;
    color: white;
    display: inline-flex;
    flex: 0 0 auto;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.league-country-flag {
    align-items: center;
    border: 1px solid var(--odds-border);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgb(15 23 42 / 0.12);
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    overflow: hidden;
    width: 48px;
}

.league-country-flag img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.league-brand-logo {
    display: block;
    flex: 0 0 auto;
    height: 48px;
    object-fit: contain;
    width: 48px;
}

.league-eyebrow {
    color: var(--odds-muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
}

.league-header h1 {
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.15;
    margin: 0;
}

.league-updated {
    color: var(--odds-muted);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

.league-heading-meta {
    align-items: flex-end;
    display: grid;
    gap: 0.4rem;
    justify-items: end;
}

.ev-model-status {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 999px;
    color: var(--odds-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 700;
    gap: 0.4rem;
    min-height: 30px;
    padding: 0.3rem 0.65rem;
}

.ev-model-status:hover:not(:disabled),
.ev-model-status:focus-visible:not(:disabled) {
    background: var(--odds-blue-soft);
    border-color: #93c5fd;
}

.ev-model-status:disabled {
    cursor: wait;
    opacity: 0.75;
}

.ev-model-status-dot {
    background: #d97706;
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.ev-model-status-ready {
    color: #166534;
}

.ev-model-status-ready .ev-model-status-dot {
    background: #16a34a;
}

.ev-model-status-error {
    color: #991b1b;
}

.ev-model-status-error .ev-model-status-dot {
    background: #dc2626;
}

.league-filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.25rem;
}

.filter-button,
.details-button {
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.filter-button {
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    color: #334155;
    min-height: 40px;
    padding: 0.5rem 0.9rem;
}

.filter-button:hover:not(:disabled),
.filter-button:focus:not(:disabled) {
    border-color: var(--odds-blue);
    color: var(--odds-blue);
}

.filter-button-active {
    background: var(--odds-blue-soft);
    border-color: #bfdbfe;
    color: var(--odds-blue);
}

.filter-dropdown {
    position: relative;
}

.filter-menu {
    background: white;
    border: 1px solid var(--odds-border);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
    display: grid;
    gap: 0.25rem;
    left: 0;
    margin-top: 0.45rem;
    min-width: 210px;
    padding: 0.45rem;
    position: absolute;
    top: 100%;
    z-index: 20;
}

.filter-menu-wide {
    max-height: 320px;
    min-width: 260px;
    overflow-y: auto;
}

.filter-menu-item {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #334155;
    cursor: pointer;
    display: flex;
    gap: 0.55rem;
    justify-content: flex-start;
    min-height: 38px;
    padding: 0.45rem 0.65rem;
    text-align: left;
    width: 100%;
}

.filter-menu-item:hover,
.filter-menu-item:focus,
.filter-menu-item-active {
    background: var(--odds-blue-soft);
    border-color: #bfdbfe;
    color: var(--odds-blue);
}

.filter-check {
    align-items: center;
    border: 1px solid var(--odds-border);
    border-radius: 6px;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 900;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.match-card-list {
    display: grid;
    gap: 0.7rem;
}

.match-card {
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.035);
    overflow: hidden;
}

.match-list-head {
    align-items: center;
    color: var(--odds-muted);
    display: grid;
    font-size: 0.68rem;
    font-weight: 800;
    gap: 0.85rem;
    grid-template-columns: 82px minmax(195px, 0.55fr) minmax(390px, 1.25fr) minmax(240px, 0.8fr);
    letter-spacing: 0.08em;
    padding: 0 1rem 0.45rem;
    text-transform: uppercase;
}

.match-list-outcomes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: center;
}

.match-card-summary {
    align-items: center;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 82px minmax(195px, 0.55fr) minmax(390px, 1.25fr) minmax(240px, 0.8fr);
    padding: 0.85rem 1rem;
}

.match-time {
    align-items: center;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 82px;
    justify-content: center;
    padding-right: 1rem;
    text-align: center;
}

.match-time strong {
    color: var(--odds-blue);
    font-size: 1.55rem;
    letter-spacing: -0.04em;
}

.match-time span,
.versus-label,
.odds-box-label,
.odds-box-bookmaker,
.match-meta span {
    color: var(--odds-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.match-teams {
    display: grid;
    gap: 0.35rem;
}

.team-row {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    font-size: 1rem;
    font-weight: 800;
}

.team-row-button {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    margin: -0.2rem -0.3rem;
    max-width: calc(100% + 0.6rem);
    padding: 0.2rem 0.3rem;
    text-align: left;
    width: fit-content;
}

.team-row-button:hover,
.team-row-button:focus-visible {
    background: var(--odds-blue-soft);
    color: var(--odds-blue-dark);
}

.team-row-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 1px;
}

.team-placeholder {
    align-items: center;
    background: #e2e8f0;
    border-radius: 50%;
    color: transparent;
    display: inline-flex;
    flex: 0 0 auto;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.team-flag {
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
    flex: 0 0 auto;
    height: 18px;
    object-fit: cover;
    width: 26px;
}

.team-logo {
    flex: 0 0 auto;
    height: 26px;
    object-fit: contain;
    width: 26px;
}

.team-logo-nhl {
    height: 28px;
    width: 28px;
}

.versus-label {
    margin-left: 2.05rem;
    text-transform: uppercase;
}

.odds-boxes {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: start;
    max-width: none;
    width: 100%;
}

.odds-boxes-two-way {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.odds-box {
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 12px;
    display: grid;
    gap: 0.14rem;
    min-height: 82px;
    padding: 0.55rem 0.6rem 0.65rem;
    text-align: center;
}

.match-card-summary .odds-box {
    gap: 0.28rem;
    min-height: 112px;
    padding: 0.5rem 0.55rem;
}

.odds-box-best {
    border-color: rgba(34, 197, 94, 0.48);
}

.odds-box:hover {
    background: var(--odds-blue-soft);
    border-color: #93c5fd;
}

.odds-gap-yellow {
    background: var(--odds-gap-yellow);
    border-color: var(--odds-gap-yellow-border);
    color: var(--odds-text);
}

.odds-gap-red {
    background: var(--odds-gap-red);
    border-color: var(--odds-gap-red-border);
    color: var(--odds-text);
}

/* Informational only — a state with nothing to act on. Deliberately outside the yellow/red warning
   ladder: the admin status chips read as a queue of chores, and a count that no action can clear
   must not sit in that queue. */
.odds-gap-grey {
    background: #f1f5f9;
    border-color: var(--odds-gray);
    color: var(--odds-text);
}

.odds-box.odds-gap-yellow:hover {
    background: var(--odds-gap-yellow);
}

.odds-box.odds-gap-red:hover {
    background: var(--odds-gap-red);
}

.odds-box-head {
    align-items: center;
    display: flex;
    gap: 0.3rem;
    justify-content: space-between;
    min-width: 0;
}

.match-card-summary .odds-box-head {
    justify-content: center;
}

.match-card-summary .odds-box-label {
    display: none;
}

.odds-box-label {
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odds-best-tag {
    background: #dcfce7;
    border-radius: 999px;
    color: #15803d;
    flex: 0 1 auto;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0.12rem 0.28rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odds-gap-yellow .odds-best-tag {
    background: #fef3c7;
    color: #a16207;
}

.odds-gap-red .odds-best-tag {
    background: #fee2e2;
    color: #b91c1c;
}

.odds-box-value {
    color: var(--odds-text);
    font-size: 1.45rem;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.odds-box-price-row {
    align-items: baseline;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.odds-box-analysis-row {
    align-items: center;
    display: flex;
    gap: 0.28rem;
    justify-content: center;
    min-height: 22px;
    min-width: 0;
}

.match-model-edge-button {
    align-items: center;
    align-self: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1d4ed8;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 900;
    gap: 0.22rem;
    line-height: 1;
    padding: 0.2rem 0.3rem;
    white-space: nowrap;
}

.match-model-edge-button.ev-badge-positive {
    color: #15803d;
}

.match-model-edge-button.ev-badge-negative {
    color: #b91c1c;
}

.match-model-edge-label {
    color: var(--odds-muted);
    font-weight: 800;
}

.match-model-edge-button:hover,
.match-model-edge-button:focus-visible {
    background: #dbeafe;
    border-color: #60a5fa;
    outline: none;
}

/* The withheld figure. Shares the badge's geometry so the row does not reflow when a match kicks
   off, but neutral rather than green/red: it is the absence of a verdict, not a bad one. Kept
   focusable so the explanation is reachable without a pointer, since it is the only thing here
   carrying the reason. */
.match-model-edge-unknown,
.ev-badge-unknown {
    align-items: center;
    align-self: center;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: var(--odds-gray);
    cursor: help;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    white-space: nowrap;
}

.match-model-edge-unknown:focus-visible,
.ev-badge-unknown:focus-visible {
    border-color: #94a3b8;
    outline: 2px solid #94a3b8;
    outline-offset: 1px;
}

.odds-box-bookmaker {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odds-box-footer {
    align-items: center;
    display: grid;
    gap: 0.2rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 22px;
    min-width: 0;
    text-align: left;
}

.match-meta {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    text-align: right;
}

.match-controls {
    display: grid;
    gap: 0.5rem;
    max-width: 100%;
    width: 100%;
}

.match-stats {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    justify-content: space-between;
}

.match-action-row {
    align-items: end;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.match-secondary-actions {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.match-secondary-action {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 750;
    gap: 0.4rem;
    justify-content: flex-start;
    min-height: 27px;
    padding: 0.22rem 0.35rem;
    text-align: left;
    width: fit-content;
}

.match-secondary-action svg {
    flex: 0 0 auto;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    width: 16px;
}

.match-secondary-action:hover:not(:disabled),
.match-secondary-action:focus-visible:not(:disabled) {
    background: var(--odds-blue-soft);
    color: var(--odds-blue-dark);
}

.match-secondary-action:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.25);
    outline-offset: 1px;
}

.match-secondary-action:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.details-button {
    background: var(--odds-blue);
    border: 1px solid var(--odds-blue);
    color: white;
    margin-top: 0.25rem;
    padding: 0.55rem 0.95rem;
}

.match-primary-action {
    border-radius: 9px;
    min-width: 76px;
    padding: 0.48rem 0.75rem;
}

.details-button:hover,
.details-button:focus {
    background: var(--odds-blue-dark);
    border-color: var(--odds-blue-dark);
    transform: translateY(-1px);
}

.details-button-active,
.details-button-active:hover,
.details-button-active:focus {
    background: var(--odds-text);
    border-color: var(--odds-text);
}

.match-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
    white-space: nowrap;
}

.extra-odds-button {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    justify-content: flex-start;
    padding-inline: 0.35rem;
    width: fit-content;
}

.extra-odds-button .extra-odds-alert {
    align-items: center;
    background: #fee2e2;
    border-radius: 999px;
    color: #dc2626;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 900;
    height: 1.1rem;
    justify-content: center;
    line-height: 1;
    min-width: 1.1rem;
}

.match-controls .details-button {
    font-size: 0.8rem;
    margin-top: 0;
}

.match-details {
    background: #f8fafc;
    border-top: 1px solid var(--odds-border);
    padding: 1rem;
    overflow-x: auto;
}

.inner-table {
    background: white;
    border-collapse: collapse;
    min-width: 560px;
    width: 100%;
}

.inner-table th,
.inner-table td {
    border: 1px solid var(--odds-border);
    padding: 0.7rem;
    text-align: left;
    vertical-align: middle;
}

/* Bets the model actually backed, so the selected-only profit can be checked against the list. */
.inner-table tr.scoring-selected-bet td {
    background: #eff6ff;
    box-shadow: inset 3px 0 0 var(--odds-blue);
}

.inner-table th {
    background: #f1f5f9;
    color: #334155;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Whole detail row links out to the bookmaker's competition page. The anchor fills the cell
   (negative margin cancels the td padding) so any click in the row follows the link. */
.inner-table a.cell-link {
    color: inherit;
    display: block;
    margin: -0.7rem;
    padding: 0.7rem;
    text-decoration: none;
}

.inner-table tr.bookmaker-row-link {
    cursor: pointer;
}

.inner-table tr.bookmaker-row-link:hover {
    background: #f1f5f9;
}

.extra-odds-backdrop {
    background: rgba(15, 23, 42, 0.48);
    inset: 0;
    position: fixed;
    z-index: 80;
}

.extra-odds-modal {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    display: grid;
    gap: 1rem;
    left: 50%;
    max-height: calc(100vh - 3rem);
    overflow: auto;
    padding: 1.1rem;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(920px, calc(100vw - 2rem));
    z-index: 81;
}

.team-details-modal {
    gap: 0.9rem;
    width: min(640px, calc(100vw - 2rem));
}

/* This panel is positioned with translate(-50%, -50%). Its entrance animation must preserve that
   centring transform, especially on a narrow screen where starting at left:50% clips the panel. */
.extra-odds-modal.team-details-modal {
    animation-name: team-details-dialog-in;
}

.team-details-heading {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.team-details-heading .team-logo,
.team-details-heading .team-placeholder {
    height: 42px;
    width: 42px;
}

.team-details-heading .team-placeholder {
    border-radius: 12px;
}

.team-details-heading > div {
    min-width: 0;
}

.team-details-heading h2 {
    overflow-wrap: anywhere;
}

.team-details-context {
    align-items: center;
    color: var(--odds-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    font-weight: 800;
    gap: 0.4rem;
}

.team-details-state {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    color: #475569;
    display: flex;
    gap: 0.65rem;
    justify-content: center;
    min-height: 100px;
    padding: 1rem;
    text-align: center;
}

.team-details-state-error {
    background: #fff7f7;
    border-color: #fecaca;
    color: #b91c1c;
}

.team-details-spinner {
    animation: team-details-spin 0.75s linear infinite;
    border: 3px solid #bfdbfe;
    border-radius: 50%;
    border-top-color: var(--odds-blue);
    flex: 0 0 auto;
    height: 22px;
    width: 22px;
}

.team-standing-summary {
    align-items: stretch;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: hidden;
}

.team-standing-rank,
.team-standing-points {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.85rem 1rem;
}

.team-standing-rank strong,
.team-standing-points strong {
    color: var(--odds-text);
    font-size: 1.65rem;
    letter-spacing: -0.04em;
    line-height: 1;
}

.team-standing-rank span,
.team-standing-points span {
    color: var(--odds-muted);
    font-size: 0.74rem;
    font-weight: 800;
    margin-top: 0.25rem;
}

.team-standing-points {
    border-left: 1px solid #bfdbfe;
    min-width: 100px;
    text-align: center;
}

.team-stat-grid {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.team-stat-item {
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    min-width: 0;
    padding: 0.7rem;
}

.team-stat-item dt {
    color: var(--odds-muted);
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.15;
}

.team-stat-item dd {
    color: var(--odds-text);
    font-size: 1.2rem;
    font-weight: 900;
    margin: 0.25rem 0 0;
}

.team-stat-positive dd {
    color: #15803d;
}

.team-stat-negative dd {
    color: #b91c1c;
}

.team-stat-model {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.team-stat-model dd {
    color: #1d4ed8;
}

.team-stat-grid-model-only {
    grid-template-columns: minmax(130px, 1fr);
    max-width: 160px;
}

.team-model-note {
    color: var(--odds-muted);
    font-size: 0.74rem;
    line-height: 1.5;
    margin: -0.1rem 0 0;
}

.team-model-note span {
    display: block;
}

@keyframes team-details-spin {
    to { transform: rotate(360deg); }
}

@keyframes team-details-dialog-in {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 8px)) scale(0.98);
    }
}

.odds-history-modal {
    gap: 0.85rem;
    overflow-x: hidden;
    overflow-y: auto;
    width: min(1040px, calc(100vw - 2rem));
}

.odds-history-modal > * {
    min-width: 0;
}

.odds-history-header {
    border-bottom: 1px solid #eef2f7;
    padding-bottom: 0.75rem;
}

.odds-history-state {
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
}

.odds-history-outcome-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 520px;
}

.odds-history-outcome-tab {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #1e293b;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 850;
    min-height: 38px;
    overflow: hidden;
    padding: 0.45rem 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odds-history-outcome-tab:first-child {
    border-radius: 8px 0 0 8px;
}

.odds-history-outcome-tab:last-child {
    border-radius: 0 8px 8px 0;
}

.odds-history-outcome-tab + .odds-history-outcome-tab {
    border-left: 0;
}

.odds-history-outcome-tab:hover {
    background: #f8fafc;
}

.odds-history-outcome-tab-active,
.odds-history-outcome-tab-active:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
}

.odds-history-summary-row {
    display: block;
}

.odds-history-title-row {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.odds-history-title-row h3 {
    color: #0b2340;
    font-size: 1.12rem;
    margin: 0;
}

.odds-history-title-row span,
.odds-history-updated {
    color: #64748b;
    font-size: 0.78rem;
}

.odds-history-updated {
    margin: 0.2rem 0 0;
}

.odds-history-best-card {
    align-items: baseline;
    background: #f0fdf8;
    border: 1px solid #70c7b6;
    border-radius: 9px;
    display: flex;
    gap: 0.65rem;
    justify-content: center;
    margin: 0;
    min-width: 0;
    padding: 0.6rem 1rem;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

.odds-history-best-card span {
    color: #0f766e;
    font-size: 0.7rem;
    font-weight: 750;
}

.odds-history-best-card strong {
    color: #0f766e;
    font-size: 0.88rem;
}

.odds-history-best-card b {
    color: #08766b;
    font-size: 1.2rem;
    line-height: 1.05;
}

.odds-history-toolbar-row {
    align-items: center;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) minmax(0, 1fr);
}

.odds-history-series-control {
    justify-self: start;
    position: relative;
    width: fit-content;
    z-index: 2;
}

.odds-history-toolbar-spacer {
    min-width: 0;
}

.odds-history-series-button {
    align-items: center;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.78rem;
    gap: 0.45rem;
    min-height: 36px;
    padding: 0.35rem 0.65rem;
}

.odds-history-series-button > span:first-child {
    font-weight: 800;
}

.odds-history-series-button strong {
    background: #e8f0ff;
    border-radius: 999px;
    color: #1d4ed8;
    font-size: 0.7rem;
    padding: 0.12rem 0.4rem;
}

.odds-history-series-menu {
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
    display: grid;
    left: 0;
    min-width: 270px;
    padding: 0.45rem;
    position: absolute;
    top: calc(100% + 0.35rem);
}

.odds-history-series-menu p {
    color: #64748b;
    font-size: 0.7rem;
    margin: 0;
    padding: 0.25rem 0.4rem 0.4rem;
}

.odds-history-series-menu label {
    align-items: center;
    border-radius: 6px;
    color: #1e293b;
    cursor: pointer;
    display: grid;
    font-size: 0.78rem;
    gap: 0.45rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.4rem;
}

.odds-history-series-menu label:hover {
    background: #f8fafc;
}

.odds-history-series-menu label strong {
    color: #0f766e;
}

.odds-history-series-menu .odds-history-series-option-disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.odds-history-chart-panel,
.odds-history-table-panel {
    background: #fff;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    min-width: 0;
    padding: 0.85rem;
}

.odds-history-chart-scroll,
.odds-history-table-scroll {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.odds-history-chart {
    display: block;
    height: auto;
    min-width: 760px;
    outline: none;
    width: 100%;
}

.odds-history-chart:focus-visible {
    border-radius: 6px;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

.odds-history-best-band {
    fill: #dff7ef;
    opacity: 0.7;
}

.odds-history-best-band-label {
    fill: #0f766e;
    font-size: 10px;
    font-weight: 750;
}

.odds-history-grid-line {
    stroke: #e2e8f0;
    stroke-width: 1;
}

.odds-history-axis-line {
    stroke: #94a3b8;
    stroke-width: 1.25;
}

.odds-history-x-tick {
    stroke: #94a3b8;
    stroke-width: 1;
}

.odds-history-axis-label {
    fill: #64748b;
    font-size: 11px;
}

.odds-history-axis-title {
    fill: #475569;
    font-size: 12px;
    font-weight: 750;
}

.odds-history-x-axis-label {
    color: #475569;
    font-size: 0.72rem;
    font-weight: 750;
    margin: -0.3rem 0 0;
    text-align: center;
}

.odds-history-line {
    fill: none;
    stroke: var(--series-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
}

.odds-history-end-point {
    fill: white;
    stroke: var(--series-color);
    stroke-width: 2.5;
}

.odds-history-end-connector {
    stroke: var(--series-color);
    stroke-width: 1.25;
}

.odds-history-end-label {
    fill: var(--series-color);
    font-size: 11px;
    font-weight: 800;
}

.odds-history-hit-area {
    fill: transparent;
    pointer-events: all;
}

.odds-history-crosshair {
    pointer-events: none;
    stroke: #94a3b8;
    stroke-dasharray: 3 3;
    stroke-width: 1;
}

.odds-history-tooltip {
    pointer-events: none;
}

.odds-history-tooltip rect {
    fill: white;
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.18));
    stroke: #d8e0ea;
}

.odds-history-tooltip-time {
    fill: #0f172a;
    font-size: 11px;
    font-weight: 800;
}

.odds-history-tooltip-value,
.odds-history-tooltip-odds {
    fill: #334155;
    font-size: 10px;
}

.odds-history-tooltip-odds {
    font-weight: 800;
}

.odds-history-details-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: #0b2340;
    cursor: pointer;
    display: flex;
    font: inherit;
    justify-content: space-between;
    padding: 0;
    text-align: left;
    width: 100%;
}

.odds-history-details-toggle > span:first-child {
    display: grid;
    gap: 0.1rem;
}

.odds-history-details-toggle strong {
    font-size: 0.92rem;
}

.odds-history-details-toggle small {
    color: #64748b;
    font-size: 0.7rem;
}

.odds-history-details-toggle > span:last-child {
    color: #2563eb;
    font-size: 1.25rem;
    font-weight: 600;
}

.odds-history-table-scroll {
    margin-top: 0.75rem;
}

.odds-history-table {
    min-width: 520px;
}

.odds-history-table th:last-child,
.odds-history-table td:last-child {
    text-align: center;
}

.odds-history-load-more {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    color: #334155;
    cursor: pointer;
    display: block;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 750;
    margin: 0.7rem auto 0;
    padding: 0.4rem 0.75rem;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.extra-odds-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.extra-odds-header h2 {
    font-size: 1.35rem;
    letter-spacing: 0;
    margin: 0;
}

.extra-odds-close {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 999px;
    color: #334155;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.35rem;
    height: 36px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 36px;
}

.extra-odds-close:hover,
.extra-odds-close:focus {
    background: var(--odds-blue-soft);
    border-color: #93c5fd;
    color: var(--odds-blue);
}

.extra-odds-tabs {
    border-bottom: 1px solid var(--odds-border);
    display: flex;
    gap: 0.4rem;
}

.ev-model-notice {
    align-items: center;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 9px;
    color: #92400e;
    display: flex;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 0.75rem;
    justify-content: space-between;
    margin: 0.65rem 0 0;
    padding: 0.5rem 0.65rem;
}

.ev-model-notice button {
    background: #fff;
    border: 1px solid #fbbf24;
    border-radius: 7px;
    color: #92400e;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    min-height: 30px;
    padding: 0.3rem 0.55rem;
}

.ev-model-notice button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.extra-odds-tab {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #334155;
    font-weight: 900;
    padding: 0.65rem 0.75rem;
}

.extra-odds-tab:hover,
.extra-odds-tab:focus,
.extra-odds-tab-active {
    border-bottom-color: var(--odds-blue);
    color: var(--odds-blue);
}

.extra-odds-panels {
    display: grid;
    gap: 0.85rem;
}

.extra-odds-panel {
    border: 1px solid var(--odds-border);
    border-radius: 8px;
    overflow: hidden;
}

.extra-odds-panel-header {
    align-items: center;
    background: #f8fafc;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.8rem 0.9rem;
}

.extra-odds-panel-header h3 {
    font-size: 1rem;
    letter-spacing: 0;
    margin: 0;
}

.extra-odds-panel-header span {
    color: var(--odds-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.extra-odds-details {
    border-top: 1px solid var(--odds-border);
    padding: 0;
}

.extra-odds-table {
    min-width: 640px;
}

.card-total-grid {
    background: #f8fafc;
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem;
}

.card-total-line {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A 1X2-shaped market — most corners, most cards — needs the tie beside the two sides. */
.card-total-line-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The odds row is now a cell holding two controls: the price (expands the bookmaker list) and the
   EV badge (opens the explainer). Buttons cannot nest, so the border and highlight live on the
   wrapper and both children render flat inside it. */
.card-total-cell {
    align-items: stretch;
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 6px;
    display: flex;
    overflow: hidden;
}

.card-total-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--odds-text);
    display: flex;
    flex: 1 1 auto;
    font-size: 0.84rem;
    /* Odds sit next to the label rather than pinned to the far right, leaving the right edge for
       the EV badge. This is the "move the odds a little to the left" change. */
    gap: 0.5rem;
    justify-content: flex-start;
    min-height: 38px;
    min-width: 0;
    padding: 0.45rem 0.55rem;
    text-align: left;
}

.card-total-button > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-total-button > strong {
    flex: 0 0 auto;
}

.ev-badge {
    align-items: center;
    background: transparent;
    border: 0;
    border-left: 1px dashed var(--odds-border);
    display: flex;
    flex: 0 0 auto;
    font-size: 0.76rem;
    font-weight: 600;
    justify-content: center;
    min-width: 58px;
    padding: 0.45rem 0.4rem;
}

.ev-badge-positive {
    color: #15803d;
}

.ev-badge-negative {
    color: #b91c1c;
}

.ev-badge:hover,
.ev-badge:focus {
    background: var(--odds-blue-soft);
}

.card-total-cell:has(.card-total-button:not(:disabled):hover),
.card-total-cell:has(.card-total-button:not(:disabled):focus) {
    border-color: #93c5fd;
}

.card-total-button:not(:disabled):hover,
.card-total-button:not(:disabled):focus {
    background: var(--odds-blue-soft);
    border-color: #93c5fd;
    color: var(--odds-blue);
}

.card-total-button:disabled {
    cursor: default;
    opacity: 0.45;
}

.card-total-cell.odds-gap-yellow {
    background: var(--odds-gap-yellow);
    border-color: var(--odds-gap-yellow-border);
    color: var(--odds-text);
}

.card-total-cell.odds-gap-red {
    background: var(--odds-gap-red);
    border-color: var(--odds-gap-red-border);
    color: var(--odds-text);
}

.card-total-cell.odds-gap-yellow:hover,
.card-total-cell.odds-gap-yellow:focus-within {
    background: var(--odds-gap-yellow);
    border-color: var(--odds-gap-yellow-border);
}

.card-total-cell.odds-gap-red:hover,
.card-total-cell.odds-gap-red:focus-within {
    background: var(--odds-gap-red);
    border-color: var(--odds-gap-red-border);
}

.card-total-provider-details {
    grid-column: 1 / -1;
    overflow-x: auto;
}

.card-total-provider-table {
    background: #fff;
    min-width: 420px;
}

@media (max-width: 640px) {
    .card-total-line,
    .card-total-line-three {
        grid-template-columns: 1fr;
    }
}

.odds-state-card {
    color: var(--odds-muted);
    font-weight: 800;
    padding: 2rem;
    text-align: center;
}

.odds-error {
    color: #b91c1c;
}

.sport-menu-card {
    padding: 1.05rem 0.85rem 1.15rem;
    position: sticky;
    top: 96px;
}

.sport-menu-card h2 {
    align-items: center;
    color: var(--odds-text);
    display: flex;
    font-size: 1.08rem;
    gap: 0.6rem;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Accent bar reading as the head of the tree the menu below draws. */
.sport-menu-card h2::before {
    background: linear-gradient(180deg, #60a5fa, var(--odds-blue-dark));
    border-radius: 999px;
    content: "";
    display: block;
    flex: none;
    height: 18px;
    width: 4px;
}

/* Nestable menu (NavMenuTree/NavMenuNode). The odds sidebar uses three levels:
   l0 = sport, l1 = country branch or country-less league link, l2 = league link under a country. */
.nav-menu {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.85rem;
}

.nav-menu-group-l0 + .nav-menu-group-l0 {
    margin-top: 0;
}

.nav-menu-branch,
.nav-menu-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #334155;
    display: flex;
    gap: 0.65rem;
    /* Own stacking context, so the hover wipe below sits under the row's own content
       (z-index: -1) without escaping behind the card. */
    isolation: isolate;
    min-height: 40px;
    position: relative;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.28s ease;
    width: 100%;
}

/* Hover/focus wipe: a gradient that sweeps in from the left edge of every interactive row. */
.nav-menu-branch-toggle::after,
.nav-menu-link::after {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.02));
    border-radius: inherit;
    content: "";
    inset: 0;
    opacity: 0;
    position: absolute;
    transform: scaleX(0.35);
    transform-origin: left center;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
    z-index: -1;
}

.nav-menu-branch-toggle:hover::after,
.nav-menu-branch-toggle:focus-visible::after,
.nav-menu-link:hover::after,
.nav-menu-link:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.nav-menu-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Collapsible branches are buttons; keep the level rules below in charge of size/spacing. */
.nav-menu-branch-toggle {
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
}

.nav-menu-branch-l0 {
    color: var(--odds-text);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    min-height: 46px;
    padding: 0.4rem 0.5rem;
}

.nav-menu-branch-l1 {
    font-size: 0.93rem;
    font-weight: 750;
    padding: 0.36rem 0.5rem;
}

.nav-menu-branch-toggle:hover,
.nav-menu-link:hover,
.nav-menu-link:focus {
    color: var(--odds-blue-dark);
}

.nav-menu-branch-l0.nav-menu-branch-active {
    background: transparent;
    color: var(--odds-text);
}

.nav-menu-branch-l1.nav-menu-branch-active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0));
    color: var(--odds-blue-dark);
}

/* Expand/collapse. The children stay in the DOM (see NavMenuNode), while the grid track removes a
   closed branch from layout. Do not transition this track: Chromium can leave an interactive
   0fr -> 1fr track stuck at zero when the nested rows transition at the same time. The child-row
   opacity/transform transitions below provide the reveal instead. */
.nav-menu-collapse {
    display: grid;
    /* minmax(0, …) rather than a bare 0fr: the track's automatic minimum is the item's
       min-content height, which its padding alone would keep above zero. */
    grid-template-rows: minmax(0, 0fr);
}

.nav-menu-collapse-open {
    grid-template-rows: minmax(0, 1fr);
}

.nav-menu-collapse > .nav-menu-children {
    min-height: 0;
    overflow: hidden;
    transition: visibility 0s linear 0.34s;
    visibility: hidden;
}

.nav-menu-collapse-open > .nav-menu-children {
    transition-delay: 0s;
    visibility: visible;
}

/* Rows drop in one after another as their branch opens.
   Deliberately a transition and not a keyframe animation: an animation replays on every first
   paint of an element, and this page prerenders before its circuit connects, so the menu is
   painted twice — the reveal visibly ran twice on every refresh. A transition has no previous
   value to animate from on first paint, so it stays silent on load and fires only on a real
   toggle. Longhand properties so the stagger delay lands on opacity/transform alone and leaves
   these rows' own hover transitions instant. */
/* The two states are mutually exclusive by selector rather than by source order: both carried
   identical specificity when the closed rule was written as a bare .nav-menu-collapse, and a
   branch opened by clicking stayed stuck in the closed state. */
.nav-menu-collapse > .nav-menu-children > * {
    transition-property: opacity, transform, color, border-color, box-shadow;
    transition-duration: 0.28s, 0.34s, 0.2s, 0.2s, 0.28s;
    transition-timing-function: ease, cubic-bezier(0.22, 1, 0.36, 1), ease, ease, ease;
}

.nav-menu-collapse:not(.nav-menu-collapse-open) > .nav-menu-children > * {
    opacity: 0;
    transform: translateY(-9px);
}

.nav-menu-collapse.nav-menu-collapse-open > .nav-menu-children > * {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--nav-i, 0) * 45ms), calc(var(--nav-i, 0) * 45ms), 0s, 0s, 0s;
}

.nav-menu-children {
    display: grid;
    gap: 0.12rem;
    position: relative;
}

.nav-menu-children-l0 {
    /* Bottom padding is inside the overflow box above, so an active row's glow is not clipped. */
    margin: 0.18rem 0 0 1rem;
    padding: 0.1rem 0.2rem 0.7rem 0.9rem;
}

.nav-menu-children-l0::before,
.nav-menu-children-l1::before {
    background: linear-gradient(180deg, #cbd8e8, #e4ecf6);
    border-radius: 999px;
    bottom: 0.9rem;
    content: "";
    left: 0.2rem;
    position: absolute;
    top: 0.5rem;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    width: 1.5px;
}

/* The guide line draws itself downwards as the branch opens. */
.nav-menu-collapse-open > .nav-menu-children::before {
    transform: scaleY(1);
}

.nav-menu-group-l1,
.nav-menu-link-l1,
.nav-menu-link-l2 {
    position: relative;
}

.nav-menu-group-l1::before,
.nav-menu-link-l1::before,
.nav-menu-link-l2::before {
    border-top: 1.5px solid #d8e2ee;
    content: "";
    left: -0.7rem;
    position: absolute;
    top: 20px;
    transition: border-color 0.2s ease, width 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    width: 0.7rem;
}

.nav-menu-children-l1 {
    margin: 0 0 0.16rem 1.15rem;
    padding: 0.06rem 0.2rem 0.6rem 0.75rem;
}

.nav-menu-link-l1 {
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.38rem 0.5rem;
}

.nav-menu-link-l2 {
    font-size: 0.92rem;
    font-weight: 650;
    min-height: 40px;
    padding: 0.34rem 0.6rem;
}

/* Selected league: a quiet tinted surface carrying a blue marker, rather than a saturated pill.
   Weight and the marker do the work, so it reads as "you are here" without dominating the menu. */
.nav-menu-link-active,
.nav-menu-link-active:focus {
    background: linear-gradient(90deg, #eef3f9, #f7fafd);
    border-color: #dbe4f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    color: var(--odds-text);
    font-weight: 800;
}

.nav-menu-link-active:hover {
    background: linear-gradient(90deg, #e6edf7, #f2f7fc);
    border-color: #cfdcee;
    color: var(--odds-text);
}

/* Reuses the hover-wipe pseudo-element as the selection marker: on the active row the wipe is
   replaced by a bar pinned to the left edge. */
.nav-menu-link-active::after {
    background: linear-gradient(180deg, #60a5fa, var(--odds-blue-dark));
    border-radius: 999px;
    bottom: 9px;
    left: 4px;
    opacity: 1;
    right: auto;
    top: 9px;
    transform: none;
    width: 3px;
}

/* Light up the tree branch that leads to the open league. */
.nav-menu-link-active::before {
    border-top-color: var(--odds-blue);
    width: 0.85rem;
}

.nav-menu-branch:focus-visible,
.nav-menu-link:focus-visible,
.sidebar-close:focus-visible,
.mobile-league-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

.nav-menu-icon {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #18324d;
    display: inline-flex;
    flex: none;
    height: 32px;
    justify-content: center;
    width: 32px;
}

/* Sidebar-only tile treatment; the top nav reuses .nav-menu-icon as a bare glyph slot. */
.nav-menu .nav-menu-icon {
    background: linear-gradient(150deg, #ffffff, #eaf1fa);
    border-color: #d5dfec;
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    height: 34px;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease, color 0.25s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    width: 34px;
}

/* Hovering anywhere inside a sport lights its tile — the l0 row itself is not clickable. */
.nav-menu-group-l0:hover > .nav-menu-branch-l0 .nav-menu-icon,
.nav-menu-group-l0:focus-within > .nav-menu-branch-l0 .nav-menu-icon {
    border-color: #b9cdea;
    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.14);
    color: var(--odds-blue-dark);
    transform: translateY(-1px);
}

.nav-menu .nav-menu-branch-l0.nav-menu-branch-active .nav-menu-icon,
.nav-menu-group-l0:hover > .nav-menu-branch-l0.nav-menu-branch-active .nav-menu-icon {
    background: linear-gradient(140deg, #3b82f6, #1b45c4);
    border-color: transparent;
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.32);
    color: white;
}

.nav-menu-group-l0:hover > .nav-menu-branch-l0.nav-menu-branch-active .nav-menu-icon {
    transform: translateY(-1px) scale(1.04);
}

.nav-menu-svg {
    height: 20px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
    width: 20px;
}

.nav-menu-svg-fill {
    fill: currentColor;
    stroke: none;
}

.nav-menu-flag {
    border: 1px solid var(--odds-border);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    flex: none;
    height: 16px;
    object-fit: cover;
    transition: box-shadow 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    width: 24px;
}

.nav-menu-branch-toggle:hover .nav-menu-flag,
.nav-menu-link:hover .nav-menu-flag {
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18);
    transform: scale(1.1);
}

.nav-menu-chevron {
    align-items: center;
    color: #7d8da6;
    display: inline-flex;
    flex: none;
    height: 16px;
    justify-content: center;
    transition: color 0.2s ease, transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
    width: 16px;
}

.nav-menu-chevron svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    width: 15px;
}

/* One chevron glyph for both states: it rotates rather than being swapped out. */
.nav-menu-branch-open .nav-menu-chevron {
    color: var(--odds-blue);
    transform: rotate(90deg);
}

.nav-menu-link:hover .nav-menu-chevron,
.nav-menu-link:focus .nav-menu-chevron {
    color: var(--odds-blue);
    transform: translateX(3px);
}

.nav-menu-link-active .nav-menu-chevron,
.nav-menu-link-active:hover .nav-menu-chevron {
    color: var(--odds-blue);
    transform: translateX(2px);
}

.landing-layout {
    margin: 0 auto;
    max-width: 1240px;
}

.landing-red-note {
    color: var(--odds-muted);
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0.9rem 0 0;
}

.odds-boxes-single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 220px;
}

.landing-sport-section {
    border-top: 1px solid #dbe2ea;
    margin-bottom: 2.25rem;
    padding-top: 1rem;
}

.landing-sport-heading {
    align-items: center;
    display: flex;
    font-size: 1.25rem;
    font-weight: 800;
    gap: 0.55rem;
    margin: 0 0 1rem;
}

/* Leagues share a row when their fixtures fit in one. The flow is a three-column grid and each
   block spans one column per fixture (--landing-block-cards, set inline from the match count), so
   a two-fixture league can share a row with a one-fixture league. minmax(0, …) lets the columns
   shrink below the card width rather than overflow on a narrow window. */
.landing-league-flow {
    --landing-card-width: 330px;
    --landing-card-gap: 0.85rem;
    display: grid;
    gap: 1.35rem var(--landing-card-gap);
    grid-template-columns: repeat(3, minmax(0, var(--landing-card-width)));
    max-width: calc((3 * var(--landing-card-width)) + (2 * var(--landing-card-gap)));
}

.landing-league-block {
    border-left: 3px solid #bfdbfe;
    display: grid;
    grid-column: span var(--landing-block-cards, 3);
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0 0 1.1rem 1rem;
}

.landing-league-heading {
    align-items: center;
    background: linear-gradient(90deg, rgba(239, 246, 255, 0.95), rgba(239, 246, 255, 0));
    border-bottom: 1px solid #dbeafe;
    border-top: 1px solid #dbeafe;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 0 0 0.85rem -1rem;
    padding: 0.55rem 0 0.55rem 1rem;
}

.landing-league-heading h3 {
    font-size: 1.02rem;
    margin: 0;
}

.landing-league-link {
    color: var(--odds-blue);
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.landing-league-link:hover {
    text-decoration: underline;
}

/* One column per fixture, matching the columns the block was given in the flow above, so the cards
   line up with the row the block sits in. */
.landing-match-grid {
    --landing-card-gap: 0.85rem;
    align-items: stretch;
    display: grid;
    gap: var(--landing-card-gap);
    grid-template-columns: repeat(var(--landing-block-cards, 3), minmax(0, 1fr));
}

/* Too narrow to pack two leagues side by side: blocks go back to a full-width row each, and the
   cards inside fit as many per line as the window allows — the behaviour before packing existed. */
@media (max-width: 1080px) {
    .landing-league-flow {
        display: block;
    }

    .landing-league-block {
        margin-bottom: 1.5rem;
    }

    .landing-match-grid {
        grid-template-columns: repeat(auto-fill, minmax(0, var(--landing-card-width, 330px)));
        max-width: calc((3 * 330px) + (2 * var(--landing-card-gap)));
    }
}

/* Below roughly 640px only one column fits anyway, so holding the cards at a fixed width would
   just leave dead space down the right of a phone screen. Let them fill instead. */
@media (max-width: 640px) {
    .landing-match-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }
}

.landing-match-card {
    display: grid;
    min-width: 0;
}

.landing-match-card-summary {
    display: grid;
    gap: 0.65rem;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 0.75rem;
}

.landing-match-topline {
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
    min-width: 0;
    padding-bottom: 0.45rem;
}

.landing-match-time {
    align-items: flex-start;
    border-right: 0;
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
    text-align: left;
}

.landing-match-time strong {
    font-size: 1.15rem;
    letter-spacing: 0;
    line-height: 1;
}

.landing-bookmaker-count {
    color: var(--odds-muted);
    flex: 1 1 auto;
    font-size: 0.72rem;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-match-teams {
    gap: 0.2rem;
    min-height: 58px;
}

.landing-match-teams .team-row {
    font-size: 0.9rem;
    line-height: 1.2;
    min-width: 0;
}

.landing-match-teams .team-row span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-match-teams .team-placeholder {
    height: 18px;
    width: 18px;
}

.landing-match-teams .versus-label {
    display: none;
}

.landing-teams-odds {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    min-width: 0;
}

.landing-teams-odds .landing-match-teams {
    flex: 1 1 10rem;
    min-width: 0;
}

/* Red 1X2 boxes sit to the right of the team names, hugging their content width. */
.landing-red-odds {
    display: flex;
    flex: 0 1 auto;
    gap: 0.4rem;
    max-width: none;
    width: auto;
}

.landing-red-odds .odds-box {
    border-radius: 10px;
    gap: 0.05rem;
    min-height: 58px;
    min-width: 76px;
    padding: 0.38rem 0.3rem;
}

.landing-red-odds .odds-box-label,
.landing-red-odds .odds-box-bookmaker {
    font-size: 0.58rem;
    letter-spacing: 0;
}

.landing-red-odds .odds-box-value {
    font-size: 1.08rem;
    line-height: 1.05;
}

.landing-match-actions {
    display: flex;
    justify-content: flex-end;
}

.landing-match-actions .details-button {
    font-size: 0.74rem;
    margin-top: 0;
    padding: 0.3rem 0.7rem;
}

.odds-legend {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
    padding: 1rem;
}

.legend-item {
    align-items: flex-start;
    display: flex;
    gap: 0.7rem;
}

.legend-item strong {
    display: block;
    margin-bottom: 0.2rem;
}

.legend-item p {
    color: var(--odds-muted);
    font-size: 0.88rem;
    line-height: 1.35;
    margin: 0;
}

.odds-disclaimer {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
    display: grid;
    gap: 0.35rem;
    line-height: 1.45;
    margin-top: 1rem;
    padding: 1rem;
}

.odds-disclaimer strong {
    color: #7c2d12;
}

.seo-content-card {
    margin-top: 1rem;
    padding: clamp(1rem, 2vw, 1.45rem);
}

.seo-content-card h2 {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    letter-spacing: -0.02em;
    margin: 0 0 0.8rem;
}

.seo-content-card p {
    color: #334155;
    font-size: 0.94rem;
    line-height: 1.65;
    margin: 0;
    max-width: 92ch;
}

.seo-content-card p + p {
    margin-top: 0.75rem;
}

/* The homepage copy links out to every league page, so these need to read as links inside a
   paragraph rather than inherit whatever the global anchor style happens to be. */
.seo-content-card p a {
    color: var(--odds-blue);
    font-weight: 600;
    text-decoration: none;
}

.seo-content-card p a:hover,
.seo-content-card p a:focus-visible {
    text-decoration: underline;
}

.seo-related-links {
    align-items: center;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
}

.seo-related-links strong {
    color: var(--odds-muted);
    font-size: 0.82rem;
}

.seo-related-links a {
    background: var(--odds-blue-soft);
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: var(--odds-blue-dark);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.3rem 0.6rem;
    text-decoration: none;
}

.seo-related-links a:hover,
.seo-related-links a:focus {
    border-color: #60a5fa;
}

.legend-swatch {
    border-radius: 5px;
    flex: 0 0 auto;
    height: 16px;
    margin-top: 0.15rem;
    width: 16px;
}

.legend-best {
    background: var(--odds-green);
}

.legend-gap-yellow {
    background: var(--odds-gap-yellow);
    border: 1px solid var(--odds-gap-yellow-border);
}

.legend-gap-red {
    background: var(--odds-gap-red);
    border: 1px solid var(--odds-gap-red-border);
}


.sport-menu-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 40px;
    padding: 0 0.4rem;
}

.mobile-league-button,
.sidebar-close,
.sidebar-backdrop {
    display: none;
}

/* The sidebar plus the four-column match card needs a wide viewport; the sidebar
   itself only folds away at 1080px. Reflow the card in between, otherwise its columns hit their
   minimums, the grid overflows and .match-card's overflow:hidden clips the action buttons. */
@media (max-width: 1320px) {
    .match-list-head {
        display: none;
    }

    .match-card-summary {
        grid-template-columns: 82px minmax(180px, 0.65fr) minmax(360px, 1.35fr);
    }

    /* Scoped to the match card: .match-meta is also used by the Formula 1 outright header,
       whose own grid still fits at these widths. */
    .match-card-summary .match-meta {
        align-items: center;
        border-top: 1px solid #e2e8f0;
        flex-direction: row;
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-top: 0.75rem;
        text-align: left;
    }

    .match-card-summary .match-stats {
        justify-content: flex-start;
        text-align: right;
    }

    .match-card-summary .match-controls {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 1080px) {
    .odds-layout {
        grid-template-columns: 1fr;
    }

    .odds-sport-sidebar {
        bottom: 0;
        left: 0;
        margin: 0;
        position: fixed;
        top: 0;
        transform: translateX(-105%);
        transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
        width: min(88vw, 340px);
        z-index: 70;
    }

    .odds-sidebar-open {
        transform: translateX(0);
    }

    .sport-menu-card {
        border-radius: 0 24px 24px 0;
        box-shadow: 18px 0 40px rgba(15, 23, 42, 0.16);
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: max(1.15rem, env(safe-area-inset-bottom));
        padding-left: max(0.85rem, env(safe-area-inset-left));
        padding-top: max(1.05rem, env(safe-area-inset-top));
        position: static;
    }

    .sport-menu-head {
        background: var(--odds-card);
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .nav-menu-branch,
    .nav-menu-link {
        min-height: 44px;
    }

    .sidebar-close {
        align-items: center;
        background: #f8fafc;
        border: 1px solid var(--odds-border);
        border-radius: 10px;
        color: var(--odds-muted);
        cursor: pointer;
        display: inline-flex;
        font-size: 1rem;
        font-weight: 800;
        height: 38px;
        justify-content: center;
        padding: 0;
        width: 38px;
    }

    .sidebar-close:hover {
        background: var(--odds-blue-soft);
        border-color: #bfdbfe;
        color: var(--odds-blue-dark);
    }

    .sidebar-backdrop {
        backdrop-filter: blur(2px);
        background: rgba(15, 23, 42, 0.48);
        display: block;
        inset: 0;
        position: fixed;
        z-index: 60;
    }

    .mobile-league-button {
        align-items: center;
        background: var(--odds-card);
        border: 1px solid var(--odds-border);
        border-radius: 12px;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
        cursor: pointer;
        display: inline-flex;
        font-weight: 800;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.55rem 1rem;
    }

    .match-card-summary {
        grid-template-columns: 82px minmax(150px, 1fr) minmax(250px, 1.25fr);
    }

    .match-meta {
        align-items: center;
        border-top: 1px solid #e2e8f0;
        flex-direction: row;
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-top: 0.75rem;
        text-align: left;
    }

    .match-stats {
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    .odds-sport-sidebar,
    .nav-menu-branch,
    .nav-menu-link,
    .nav-menu-chevron,
    .nav-menu-collapse,
    .nav-menu-collapse > .nav-menu-children,
    .nav-menu .nav-menu-icon,
    .nav-menu-flag,
    .nav-menu-branch-toggle::after,
    .nav-menu-link::after,
    .nav-menu-group-l1::before,
    .nav-menu-link-l1::before,
    .nav-menu-link-l2::before,
    .nav-menu-children-l0::before,
    .nav-menu-children-l1::before {
        transition: none;
    }

    /* Keep the state, drop the movement: rows appear immediately and the guide lines are drawn. */
    .nav-menu-collapse > .nav-menu-children > * {
        transition: none;
    }

    .nav-menu-children-l0::before,
    .nav-menu-children-l1::before {
        transform: none;
    }
}

@media (max-width: 760px) {
    .odds-top-nav {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
        min-height: 0;
        padding: 1rem;
    }

    .odds-nav-links {
        gap: 1rem;
        max-width: 100%;
        padding-bottom: 0.15rem;
    }

    .odds-nav-item {
        min-height: 38px;
    }

    .odds-logo-mark {
        border-radius: 9px;
        height: 34px;
        width: 34px;
    }

    .odds-page {
        padding: 1rem;
    }

    .league-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .league-heading-meta {
        align-items: start;
        justify-items: start;
    }

    .league-header {
        position: static;
    }

    .league-filters {
        align-items: stretch;
    }

    .filter-button {
        flex: 1 1 145px;
    }

    .match-card-summary {
        gap: 0.5rem;
        grid-template-columns: 1fr;
        padding: 0.65rem 0.75rem;
    }

    .match-time {
        align-items: center;
        border-bottom: 1px solid #e2e8f0;
        border-right: 0;
        flex-direction: row;
        justify-content: space-between;
        min-height: 0;
        padding: 0 0 0.4rem;
        text-align: left;
    }

    .match-time strong {
        font-size: 1.05rem;
    }

    .match-teams {
        gap: 0.15rem;
    }

    .team-row {
        font-size: 0.9rem;
        gap: 0.4rem;
    }

    .team-details-modal {
        max-height: calc(100vh - 1rem);
        padding: 0.85rem;
        width: calc(100vw - 1rem);
    }

    .team-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-stat-grid-model-only {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    .team-placeholder {
        height: 18px;
        width: 18px;
    }

    .versus-label {
        display: none;
    }

    .odds-boxes {
        gap: 0.4rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .odds-boxes-two-way {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .odds-box {
        border-radius: 12px;
        gap: 0.1rem;
        min-height: 0;
        padding: 0.4rem 0.3rem;
    }

    .match-card-summary .odds-box {
        gap: 0.18rem;
        min-height: 0;
        padding: 0.4rem 0.3rem;
    }

    .odds-box-head {
        justify-content: center;
    }

    .odds-best-tag {
        display: none;
    }

    .match-card-summary .odds-box-label {
        display: block;
    }

    .odds-box-value {
        font-size: 1.05rem;
    }

    .odds-box-price-row {
        min-height: 19px;
    }

    .match-model-edge-button {
        font-size: 0.56rem;
        padding: 0.16rem 0.24rem;
    }

    .match-model-edge-label {
        display: none;
    }

    .odds-box-analysis-row {
        gap: 0.16rem;
        min-height: 19px;
    }

    .match-lineup-edge-button {
        font-size: 0.55rem;
        padding: 0.16rem 0.28rem;
    }

    .odds-box-footer {
        gap: 0.08rem;
        min-height: 20px;
    }

    .odds-box-action {
        font-size: 0.72rem;
        padding: 0.14rem 0.16rem;
    }

    .match-time span,
    .odds-box-label,
    .odds-box-bookmaker {
        font-size: 0.62rem;
    }

    .match-meta {
        border-top: 0;
        display: block;
        padding-top: 0;
        width: 100%;
    }

    .match-meta span {
        font-size: 0.68rem;
    }

    .details-button {
        font-size: 0.75rem;
        margin-top: 0;
        padding: 0.3rem 0.7rem;
        width: auto;
    }

    .match-controls,
    .match-card-summary .match-controls {
        gap: 0.4rem;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .match-action-row {
        align-items: end;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .match-secondary-action {
        font-size: 0.72rem;
        min-height: 25px;
    }

    .match-actions {
        gap: 0.4rem;
        justify-content: flex-end;
        margin-top: 0;
        width: 100%;
    }

    .extra-odds-button {
        font-size: 0.75rem;
        margin-top: 0;
        padding: 0.22rem 0.35rem;
        width: fit-content;
    }

    .match-history-action {
        width: auto;
    }

    .match-details {
        overflow-x: auto;
    }

    .extra-odds-modal {
        border-radius: 10px;
        max-height: calc(100vh - 1rem);
        padding: 0.85rem;
        width: calc(100vw - 1rem);
    }

    .odds-history-outcome-tabs {
        max-width: none;
    }

    .odds-history-outcome-tab {
        font-size: 0.72rem;
        padding-inline: 0.45rem;
    }

    .odds-history-summary-row {
        display: block;
    }

    .odds-history-best-card {
        gap: 0.35rem;
        grid-column: 2;
        justify-content: center;
        min-width: 0;
        padding-inline: 0.45rem;
        text-align: center;
        width: 100%;
    }

    .odds-history-best-card span {
        font-size: 0.62rem;
    }

    .odds-history-best-card strong {
        font-size: 0.76rem;
    }

    .odds-history-best-card b {
        font-size: 1.05rem;
    }

    .odds-history-toolbar-row {
        gap: 0.5rem;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .odds-history-toolbar-spacer {
        display: none;
    }

    .odds-history-series-control,
    .odds-history-series-button {
        width: auto;
    }

    .odds-history-series-button {
        justify-content: space-between;
    }

    .odds-history-series-menu {
        min-width: 100%;
        right: 0;
    }

    .odds-history-chart-panel,
    .odds-history-table-panel {
        padding: 0.6rem;
    }

    .extra-odds-header h2 {
        font-size: 1.05rem;
    }

    .extra-odds-panel-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
    }

    .odds-legend {
        grid-template-columns: 1fr;
    }

    .landing-sport-heading {
        font-size: 1.05rem;
    }

    .landing-league-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
    }
}

.admin-actions,
.admin-section-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.alias-sport-heading {
    border-bottom: 2px solid var(--odds-border);
    margin: 1.75rem 0 0.5rem;
    padding-bottom: 0.35rem;
}

.alias-sport-filters {
    margin-top: 0.5rem;
}

.alias-sport-label {
    color: var(--odds-muted);
    font-weight: 800;
    min-width: 84px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.admin-actions {
    margin: 1rem 0;
}

/* The logout control is a POST form; collapse the form box so its button aligns with the sibling
   nav links instead of breaking onto its own line. */
.admin-logout-form {
    display: contents;
}

.admin-help-text,
.admin-status {
    color: var(--odds-muted);
    font-weight: 700;
}

.admin-section {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    margin-top: 1rem;
    padding: 1.25rem;
}

/* League tabs. Same pill buttons as the page nav above them, separated by a rule so the two rows
   do not read as one long list of links. */
.admin-tabs {
    align-items: center;
    border-bottom: 1px solid var(--odds-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    padding-bottom: 0.75rem;
}

.scoring-tab-flag {
    color: var(--odds-gap-red-border);
    font-size: 0.7rem;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.scoring-status-badge {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    margin: 0.1rem 0.25rem 0.1rem 0;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

/* Wide report tables scroll inside their own box rather than pushing the page sideways. */
.admin-table-scroll {
    overflow-x: auto;
}

/* ---------- scoring: headline stat tiles ---------- */

/* The four numbers section 2 exists to report. auto-fit rather than a fixed column count so they
   stay readable from a phone up to a wide admin screen without a breakpoint per size. */
.scoring-stats {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin: 0.75rem 0 1rem;
}

.scoring-stat {
    background: var(--odds-surface, #fff);
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.85rem;
}

/* The fixture-weighted return: the one to read at small samples, so it gets the accent border
   rather than being the third of four identical boxes. */
.scoring-stat-primary {
    border-color: var(--odds-blue);
    box-shadow: inset 3px 0 0 0 var(--odds-blue);
}

.scoring-stat-label {
    color: var(--odds-muted, #667);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Tabular figures so the values line up between tiles instead of shifting with digit widths. */
.scoring-stat-value {
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1.1;
}

/* The highlight classes are meant for table cells; inside a tile only the text should take the
   colour, or the tile turns into a solid block. */
.scoring-stat-value.odds-gap-red,
.scoring-stat-value.odds-gap-yellow {
    background: none;
    border: none;
    padding: 0;
}

.scoring-stat-note {
    color: var(--odds-muted, #667);
    font-size: 0.78rem;
}

/* ---------- scoring: bet-history grid ---------- */

/* Filters wrap onto as many rows as they need. Each control carries its own label above it so the
   row stays readable when it wraps — a single header row would separate labels from inputs. */
.scoring-grid-controls {
    align-items: end;
    background: var(--odds-surface-muted, #f7f8fa);
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.75rem 0;
    padding: 0.75rem;
}

.scoring-grid-controls label {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.25rem;
}

.scoring-grid-controls select,
.scoring-grid-controls input[type="search"] {
    background: var(--odds-surface, #fff);
    border: 1px solid var(--odds-border);
    border-radius: 6px;
    font: inherit;
    font-size: 0.85rem;
    padding: 0.3rem 0.45rem;
}

.scoring-grid-search input {
    min-width: 12rem;
}

.scoring-grid-summary {
    margin-top: 0;
}

/* Sortable headers are buttons so they are reachable by keyboard, but must not look like one. */
.scoring-grid-sort {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: inherit;
    padding: 0;
    text-align: inherit;
    white-space: nowrap;
}

.scoring-grid-sort:hover {
    text-decoration: underline;
}

/* Rows the model would not have staked. Dimmed rather than hidden: they carry the probabilities
   the calibration section is built from, so they belong in the record. */
.scoring-grid-unbacked td {
    opacity: 0.55;
}

.scoring-grid-pager {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    margin: 0.6rem 0 0;
}

.scoring-grid-pager span {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0 0.5rem;
}

/* A table cell that jumps to another tab: a button, because it changes local state rather than
   navigating, but it should read as the link it behaves like. */
.inner-table .cell-link-button {
    background: none;
    border: none;
    color: var(--odds-blue);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 0;
    text-align: left;
}

.inner-table .cell-link-button:hover {
    text-decoration: underline;
}

.admin-section-heading {
    justify-content: space-between;
    margin-bottom: 1rem;
}

.admin-section-heading h2 {
    margin: 0;
}

.ingestion-league-list {
    display: grid;
}

.ingestion-league-entry {
    border-top: 1px solid var(--odds-border);
}

.ingestion-league-entry:first-child {
    border-top: 0;
}

.ingestion-league-row,
.ingestion-league-toggle,
.ingestion-substat-item {
    align-items: center;
    display: flex;
}

.ingestion-league-row {
    gap: 0.5rem;
    min-height: 46px;
    padding: 0.45rem 0;
}

.ingestion-league-toggle {
    gap: 0.45rem;
}

.admin-section .ingestion-expand-button {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 7px;
    color: var(--odds-blue-dark);
    display: inline-flex;
    font-size: 1.15rem;
    height: 26px;
    justify-content: center;
    line-height: 1;
    min-height: 26px;
    padding: 0;
    width: 26px;
}

.admin-section .ingestion-expand-button:hover {
    background: #dbeafe;
}

.ingestion-substat-options {
    background: #f8fafc;
    border-left: 2px solid #bfdbfe;
    display: grid;
    gap: 0.4rem;
    margin: 0 0 0.55rem 0.8rem;
    padding: 0.55rem 0.75rem 0.55rem 1.15rem;
}

.ingestion-substat-item {
    gap: 0.35rem;
    min-height: 26px;
    width: fit-content;
}

.ingestion-substat-branch {
    color: var(--odds-muted);
    font-weight: 800;
    margin-right: 0.1rem;
}

@media (max-width: 720px) {
    .ingestion-league-row {
        align-items: flex-start;
    }

    .ingestion-substat-options {
        margin-left: 0.4rem;
        padding-left: 0.85rem;
    }
}

.admin-card {
    border-top: 1px solid var(--odds-border);
    padding: 1rem 0;
}

.admin-card:first-of-type {
    border-top: 0;
}

.admin-card input {
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    min-height: 38px;
    padding: 0.45rem 0.7rem;
}

.admin-card button,
.admin-section button,
table button {
    background: var(--odds-blue);
    border: 0;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-weight: 800;
    min-height: 38px;
    padding: 0.45rem 0.8rem;
}

.admin-card li button {
    margin-left: 0.5rem;
}

.admin-card button:hover,
.admin-section button:hover,
table button:hover {
    background: var(--odds-blue-dark);
}

.admin-card button:disabled,
.admin-section button:disabled,
table button:disabled {
    background: var(--odds-gray);
    cursor: not-allowed;
}

.admin-section .admin-danger-button:not(:disabled),
table .admin-danger-button:not(:disabled) {
    background: #dc2626;
}

.admin-section .admin-danger-button:hover:not(:disabled),
table .admin-danger-button:hover:not(:disabled) {
    background: #b91c1c;
}

.admin-danger-zone {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 16px;
    color: #7f1d1d;
    margin-top: 1rem;
    padding: 1rem;
}

.admin-danger-zone p {
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.login-page {
    align-items: center;
    display: flex;
    min-height: 100vh;
    justify-content: center;
    padding: 2rem;
}

.login-card {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgb(15 23 42 / 0.08);
    max-width: 420px;
    padding: 2rem;
    width: 100%;
}

.login-card h1 {
    margin-top: 0;
}

.login-card form {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.login-card label {
    font-weight: 800;
}

.login-card input {
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    min-height: 42px;
    padding: 0.55rem 0.7rem;
}

.login-card button {
    background: var(--odds-blue);
    border: 0;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-weight: 800;
    min-height: 42px;
    padding: 0.55rem 0.9rem;
}

.login-card button:hover {
    background: var(--odds-blue-dark);
}

.login-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-weight: 700;
    padding: 0.75rem;
}

.disclaimer-link {
    color: #9a3412;
    font-weight: 700;
    text-decoration: underline;
}

.disclaimer-link:hover {
    color: #7c2d12;
}

.privacy-page {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

.privacy-card {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    line-height: 1.6;
    max-width: 760px;
    padding: 2rem;
    width: 100%;
}

.privacy-card h1 {
    margin-top: 0;
}

.privacy-card h2 {
    margin-top: 1.5rem;
}

.privacy-updated {
    color: var(--odds-muted);
    font-size: 0.88rem;
}

.privacy-cookie-table {
    border-collapse: collapse;
    margin: 1rem 0;
    width: 100%;
}

.privacy-cookie-table th,
.privacy-cookie-table td {
    border-bottom: 1px solid var(--odds-border);
    padding: 0.6rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

.privacy-back {
    margin-top: 2rem;
}

.audit-pagination {
    margin: 0;
}

.audit-status {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
}

.audit-status-completed {
    background: #dcfce7;
    color: #166534;
}

.audit-status-warning,
.audit-status-running {
    background: #fef3c7;
    color: #92400e;
}

.audit-status-failed,
.audit-status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.audit-expanded-row > td {
    background: #f8fafc;
    padding: 1rem;
}

.audit-child-table {
    margin: 0;
}

.audit-bookmaker-row {
    cursor: pointer;
}

.audit-bookmaker-row:hover > td,
.audit-bookmaker-row:focus-visible > td {
    background: #f1f5ff;
}

.audit-bookmaker-row:focus-visible {
    outline: 2px solid var(--odds-blue);
    outline-offset: -2px;
}

.audit-bookmaker-button {
    align-items: center;
    background: transparent !important;
    color: var(--odds-blue) !important;
    display: inline-flex;
    gap: 0.35rem;
    min-height: 0 !important;
    padding: 0.2rem 0 !important;
    text-align: left;
}

.audit-bookmaker-button:hover {
    color: var(--odds-blue-dark) !important;
    text-decoration: underline;
}

.audit-source-expanded-row > td {
    background: #eef4ff;
    padding: 0.75rem;
}

.audit-source-details {
    display: grid;
    gap: 0.75rem;
}

.audit-browser-summary {
    align-items: center;
    background: #fff;
    border: 1px solid var(--odds-border);
    border-radius: 12px;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(140px, 1fr) repeat(3, minmax(145px, auto));
    padding: 0.65rem 0.8rem;
}

.audit-browser-summary span {
    display: grid;
    gap: 0.1rem;
}

.audit-browser-summary small {
    color: var(--odds-muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.audit-source-table-scroll {
    overflow-x: auto;
}

.audit-source-table {
    margin: 0;
    min-width: 920px;
    table-layout: fixed;
    width: 100%;
}

.audit-source-table th:nth-child(1) {
    width: 4%;
}

.audit-source-table th:nth-child(2) {
    width: 9%;
}

.audit-source-table th:nth-child(3) {
    width: 15%;
}

.audit-source-table th:nth-child(4) {
    width: 31%;
}

.audit-source-table th:nth-child(5),
.audit-source-table th:nth-child(6) {
    width: 16%;
}

.audit-source-table th:nth-child(7) {
    width: 9%;
}

.audit-source-expand-button {
    align-items: center;
    display: inline-flex;
    height: 1.65rem;
    justify-content: center;
    min-width: 1.65rem;
    padding: 0;
}

.audit-substat-expanded-row > td {
    background: #f8fbff;
    padding: 0.65rem;
}

.audit-substat-table-scroll {
    overflow-x: auto;
}

.audit-substat-table {
    font-size: 0.76rem;
    margin: 0;
    min-width: 1850px;
    width: 100%;
}

.audit-substat-table th,
.audit-substat-table td {
    padding: 0.45rem 0.55rem;
    vertical-align: top;
}

.audit-source-url-cell a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-source-failed td:nth-child(3) {
    color: #991b1b;
    font-weight: 800;
}

.audit-no-source-timing {
    margin: 0;
}

.audit-error {
    color: #991b1b;
    max-width: 34rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.audit-note {
    color: #92400e;
    max-width: 28rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.audit-expand-button {
    min-width: 5.5rem;
}

@media (max-width: 760px) {
    .audit-browser-summary {
        align-items: start;
        grid-template-columns: 1fr;
    }
}

.analytics-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: 1rem 0;
}

.analytics-card {
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 16px;
    padding: 1rem;
}

.analytics-label {
    color: var(--odds-muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.analytics-status {
    border-radius: 999px;
    font-weight: 800;
    padding: 0.35rem 0.75rem;
}

.analytics-status-enabled {
    background: #dcfce7;
    color: #166534;
}

.analytics-status-disabled {
    background: #fee2e2;
    color: #991b1b;
}

.analytics-links a {
    text-decoration: none;
}

.analytics-config-list dt {
    font-weight: 800;
    margin-top: 0.75rem;
}

.analytics-config-list dd {
    color: var(--odds-muted);
    margin: 0.25rem 0 0;
}

.outright-card-list {
    gap: 1rem;
}

.outright-event-stack {
    background: #e5e7eb;
    border-radius: 22px;
    display: grid;
    overflow: hidden;
}

.outright-market-panel {
    border-radius: 22px;
}

.outright-market-panel-header {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 88px minmax(165px, 1fr) 140px;
    padding: 1rem 1rem 0;
}

.outright-market-heading {
    min-width: 0;
}

.outright-market-separator {
    background: #e5e7eb;
    height: 20px;
}

.outright-driver-grid {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: 1fr;
    padding: 0.75rem 1rem 1rem;
}

.outright-driver-item {
    min-width: 0;
}

.outright-driver-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--odds-border);
    border-radius: 14px;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) 118px auto;
    min-height: 54px;
    padding: 0.35rem 0.6rem;
}

.outright-driver-name {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    min-width: 0;
}

.outright-driver-name strong {
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outright-driver-name .team-placeholder {
    height: 22px;
    width: 22px;
}

.outright-driver-odds {
    border-radius: 12px;
    gap: 0.05rem;
    min-height: 46px;
    padding: 0.25rem 0.45rem;
}

.outright-driver-odds .odds-box-label,
.outright-driver-odds .odds-box-bookmaker {
    font-size: 0.66rem;
}

.outright-driver-odds .odds-box-value {
    font-size: 1.15rem;
}

.outright-details-button {
    justify-self: end;
    margin-top: 0;
    padding: 0.4rem 0.8rem;
    white-space: nowrap;
}

.outright-details {
    margin-top: 0.5rem;
}

@media (max-width: 760px) {
    .outright-market-panel-header {
        gap: 0.5rem;
        grid-template-columns: 1fr;
        padding: 0.75rem 0.75rem 0;
    }

    .outright-driver-grid {
        padding: 0.75rem;
    }

    .outright-driver-card {
        grid-template-columns: minmax(0, 1fr) 112px;
    }

    .outright-details-button {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .outright-driver-name strong {
        white-space: normal;
    }
}

.f1-empty-state {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* ---------- EV explainer ---------- */
/* Sits above the extra-odds modal, so its backdrop and panel need a higher stacking order. */

.ev-explainer-backdrop {
    background: rgba(15, 23, 42, 0.55);
    inset: 0;
    position: fixed;
    z-index: 1200;
}

.ev-explainer {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    left: 50%;
    max-height: 88vh;
    max-width: 560px;
    overflow-y: auto;
    padding: 1rem 1.1rem 1.2rem;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    z-index: 1210;
}

.ev-explainer-header {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.ev-explainer-header h2 {
    font-size: 1.05rem;
    margin: 0.15rem 0 0;
}

.ev-steps {
    display: grid;
    gap: 0.9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ev-step {
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    padding: 0.7rem 0.75rem;
}

.ev-step-head {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.ev-step-head h3 {
    font-size: 0.92rem;
    margin: 0;
}

.ev-step-number {
    align-items: center;
    background: var(--odds-blue);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.ev-step-note {
    color: #64748b;
    font-size: 0.78rem;
    margin: 0 0 0.5rem;
}

.ev-bars {
    display: grid;
    gap: 0.3rem;
}

.ev-bar-row {
    align-items: center;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(70px, 1.2fr) auto;
}

.ev-bar-label {
    color: #334155;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ev-bar-track {
    background: #e2e8f0;
    border-radius: 999px;
    display: block;
    height: 12px;
    overflow: hidden;
}

.ev-bar-fill {
    border-radius: 999px;
    display: block;
    height: 100%;
    min-width: 2px;
}

.ev-bar-home { background: #2563eb; }
.ev-bar-away { background: #7c3aed; }
.ev-prob-model { background: #2563eb; }
.ev-prob-goals { background: #2563eb; }
.ev-prob-elo { background: #7c3aed; }
.ev-prob-market { background: #64748b; }
.ev-prob-blend { background: #0f766e; }

.ev-bar-value {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 46px;
    text-align: right;
}

/* Distribution step. Bars are scaled to the tallest slice, not to 100%, so a distribution whose
   biggest bucket is under a fifth is still readable; the winning slices carry the colour. */
.ev-buckets {
    display: grid;
    gap: 0.25rem;
}

.ev-bucket-lose .ev-bar-fill { background: #cbd5e1; }
.ev-bucket-lose .ev-bar-label,
.ev-bucket-lose .ev-bar-value { color: #94a3b8; }

.ev-bucket-win .ev-bar-fill { background: #0f766e; }
.ev-bucket-win .ev-bar-label,
.ev-bucket-win .ev-bar-value { color: #0f766e; font-weight: 700; }

.ev-bucket-push .ev-bar-fill { background: #d97706; }
.ev-bucket-push .ev-bar-label,
.ev-bucket-push .ev-bar-value { color: #b45309; font-weight: 600; }

.ev-bucket-total {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.78rem;
    margin: 0.5rem 0 0;
}

.ev-bucket-total-win {
    background: #ccfbf1;
    border-radius: 999px;
    color: #0f766e;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
}

.ev-bucket-total-push {
    background: #fef3c7;
    border-radius: 999px;
    color: #b45309;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
}

.ev-fixture {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
}

.ev-fixture-side {
    background: #fff;
    border: 1px solid var(--odds-border);
    border-radius: 8px;
    display: grid;
    justify-items: center;
    min-width: 90px;
    padding: 0.4rem 0.5rem;
}

.ev-fixture-side strong {
    font-size: 1.15rem;
}

.ev-fixture-total {
    background: var(--odds-blue-soft);
    border-color: #93c5fd;
}

.ev-fixture-team {
    color: #64748b;
    font-size: 0.72rem;
    text-align: center;
}

.ev-fixture-plus {
    color: #94a3b8;
    font-size: 1.05rem;
    font-weight: 700;
}

.ev-elo-context {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0.65rem 0;
}

.ev-elo-context span {
    align-items: baseline;
    background: #fff;
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    color: #475569;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.74rem;
    gap: 0.3rem;
    justify-content: center;
    padding: 0.4rem 0.5rem;
    text-align: center;
}

.ev-elo-context strong {
    color: #6d28d9;
    font-size: 1rem;
}

.ev-elo-context small {
    color: #94a3b8;
    flex-basis: 100%;
}

.ev-hybrid-formula {
    align-items: center;
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
    border: 1px solid #c4b5fd;
    border-radius: 9px;
    color: #334155;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 0.4rem;
    justify-content: center;
    margin: 0.55rem 0;
    padding: 0.55rem;
}

.ev-hybrid-formula strong {
    color: #0f766e;
    font-size: 1rem;
}

.ev-blend {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.ev-blend-bar {
    border-radius: 999px;
    display: flex;
    height: 14px;
    overflow: hidden;
}

.ev-blend-model { background: #2563eb; }
.ev-blend-market { background: #94a3b8; }

.ev-blend-legend {
    color: #475569;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.76rem;
    gap: 0.75rem;
}

.ev-swatch {
    border-radius: 3px;
    display: inline-block;
    height: 10px;
    margin-right: 0.3rem;
    width: 10px;
}

.ev-swatch-model { background: #2563eb; }
.ev-swatch-market { background: #94a3b8; }

.ev-formula {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
}

.ev-formula-part {
    background: #fff;
    border: 1px solid var(--odds-border);
    border-radius: 8px;
    display: grid;
    font-size: 0.95rem;
    font-weight: 600;
    justify-items: center;
    padding: 0.35rem 0.5rem;
}

.ev-formula-part small {
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 400;
}

.ev-formula-op {
    align-self: center;
    color: #94a3b8;
    font-weight: 700;
}

.ev-formula-result {
    align-self: center;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.35rem 0.6rem;
}

.ev-formula-result.ev-badge-positive { background: #dcfce7; }
.ev-formula-result.ev-badge-negative { background: #fee2e2; }

.ev-verdict {
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0.6rem 0 0;
    text-align: center;
}

.ev-fair-price {
    color: #475569;
    font-size: 0.76rem;
    line-height: 1.45;
    margin: 0.6rem 0 0;
    text-align: center;
}

.ev-fair-price strong {
    color: #0f172a;
    font-size: 0.9rem;
}

.ev-fair-price span {
    color: #64748b;
}

.ev-disclaimer {
    color: #64748b;
    font-size: 0.74rem;
    margin: 0.9rem 0 0;
}

@media (max-width: 520px) {
    .ev-bar-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ev-bar-track {
        grid-column: 1 / -1;
        order: 3;
    }

    .ev-elo-context {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
   Visitor accounts: nav entry, sign-in page, profile page.
   --------------------------------------------------------------------------- */

.odds-nav-account {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    position: relative;
}

.odds-nav-account-link {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 1px solid var(--odds-border);
    border-radius: 999px;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    gap: 0.5rem;
    max-width: 220px;
    padding: 0.4rem 0.85rem;
    text-decoration: none;
    white-space: nowrap;
}

.odds-nav-account-link:hover,
.odds-nav-account-link:focus {
    background: #f8fafc;
    color: var(--odds-blue-dark);
}

.odds-nav-account-link span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.odds-nav-avatar {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 24px;
    object-fit: cover;
    width: 24px;
}

.account-panel {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgb(15 23 42 / 0.18);
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    padding: 1.25rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.65rem);
    width: calc(100vw - 2rem);
    z-index: 1310;
}

.account-panel:focus {
    outline: none;
}

.auth-page {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgb(15 23 42 / 0.08);
    max-width: 520px;
    padding: 2rem;
    width: 100%;
}

.auth-card h1 {
    margin-top: 0;
}

.auth-intro {
    color: #475569;
    margin-bottom: 0.9rem;
}

.auth-early-access {
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    color: #334155;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
}

.auth-early-access p {
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0;
}

.auth-early-access-title {
    align-items: center;
    color: var(--odds-blue-dark);
    display: flex;
    gap: 0.45rem;
    margin-bottom: 0.35rem !important;
}

.auth-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-weight: 700;
    padding: 0.75rem;
}

.auth-providers {
    display: grid;
    gap: 0.75rem;
}

.auth-providers form {
    display: grid;
    gap: 0.85rem;
}

.auth-age-confirmation {
    align-items: flex-start;
    color: #475569;
    cursor: pointer;
    display: flex;
    font-size: 0.88rem;
    font-weight: 700;
    gap: 0.65rem;
    line-height: 1.4;
}

.auth-age-confirmation input {
    accent-color: var(--odds-blue);
    flex: 0 0 auto;
    height: 18px;
    margin: 0.05rem 0 0;
    width: 18px;
}

.auth-age-confirmation input:focus-visible {
    outline: 2px solid var(--odds-blue);
    outline-offset: 2px;
}

.auth-provider-button {
    align-items: center;
    background: white;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    font-size: 0.98rem;
    font-weight: 800;
    gap: 0.7rem;
    justify-content: center;
    min-height: 48px;
    padding: 0.55rem 0.9rem;
    width: 100%;
}

.auth-provider-button:hover {
    background: #f8fafc;
}

.auth-provider-mark {
    align-items: center;
    border-radius: 50%;
    color: white;
    display: inline-flex;
    font-weight: 900;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.auth-provider-google .auth-provider-mark {
    background: #ea4335;
}

.auth-provider-facebook .auth-provider-mark {
    background: #1877f2;
}

.auth-legal {
    color: #64748b;
    font-size: 0.82rem;
    margin: 1.5rem 0 0;
}

/* ---------------------------------------------------------------------------
   Profile: a full-width workspace with a section rail, not a centred card.
   The grids below can be a hundred rows of ten columns, which a 520px card
   cannot show — hence the shell rather than reusing .auth-card here.
   --------------------------------------------------------------------------- */
.profile-shell {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 250px minmax(0, 1fr);
    margin: 0 auto;
    max-width: 1500px;
    padding: 1.5rem 1rem 3rem;
    width: 100%;
}

.profile-nav {
    align-self: start;
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 16px;
    padding: 1rem;
    position: sticky;
    top: 1rem;
}

.profile-nav-identity {
    align-items: center;
    border-bottom: 1px solid var(--odds-border);
    display: flex;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
}

.profile-nav-identity .profile-avatar {
    height: 48px;
    width: 48px;
}

.profile-nav-identity .profile-name {
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.profile-nav-identity .profile-email {
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.profile-nav-list {
    display: grid;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-nav-link {
    align-items: center;
    border-radius: 10px;
    color: #334155;
    display: flex;
    font-weight: 700;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    text-decoration: none;
}

.profile-nav-link:hover {
    background: #f1f5f9;
}

.profile-nav-link-active {
    background: #eff6ff;
    color: var(--odds-blue-dark);
}

.profile-nav-icon {
    font-size: 1rem;
    line-height: 1;
}

.profile-nav-badge {
    background: var(--odds-blue);
    border-radius: 999px;
    color: white;
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: auto;
    padding: 0.1rem 0.45rem;
}

.profile-nav-signout {
    border-top: 1px solid var(--odds-border);
    margin-top: 0.9rem;
    padding-top: 0.9rem;
}

.profile-nav-signout .profile-button {
    width: 100%;
}

.profile-content {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 16px;
    min-width: 0;
    padding: 1.5rem;
}

.profile-content h1 {
    font-size: 1.35rem;
    margin: 0 0 1.25rem;
}

.profile-subtabs {
    border-bottom: 1px solid var(--odds-border);
    display: flex;
    gap: 0.25rem;
    margin: -0.35rem 0 1.25rem;
    overflow-x: auto;
}

.profile-subtab {
    border-bottom: 3px solid transparent;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 800;
    padding: 0.65rem 0.85rem 0.55rem;
    text-decoration: none;
    white-space: nowrap;
}

.profile-subtab:hover,
.profile-subtab-active {
    border-bottom-color: var(--odds-blue);
    color: var(--odds-blue-dark);
}

.profile-action-message {
    border: 1px solid;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 700;
    margin: 0 0 1rem;
    padding: 0.65rem 0.8rem;
}

.profile-action-message-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.profile-action-message-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.profile-section-title {
    font-size: 1.05rem;
    margin: 1.75rem 0 0.5rem;
}

/* The facts list keeps its dialog styling but spreads out here, where there is room. */
.profile-content .profile-facts {
    border-top: 0;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    padding-top: 0;
}

.profile-content .profile-facts > div {
    min-width: 0;
}

.profile-empty {
    color: #64748b;
    margin: 0;
}

.profile-note {
    background: #f8fafc;
    border-left: 3px solid var(--odds-border);
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 1rem 0 0;
    padding: 0.75rem 0.9rem;
}

.profile-note-strong {
    background: #f0fdf4;
    border-left-color: #22c55e;
    color: #166534;
}

/* --- Stat tiles ----------------------------------------------------------- */
.profile-stats {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.profile-stat {
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
}

.profile-stat-headline {
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
}

.profile-stat-label {
    color: #64748b;
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
}

.profile-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0.2rem 0;
}

.profile-stat-note {
    color: #64748b;
    display: block;
    font-size: 0.76rem;
}

.profile-value-up {
    color: #15803d;
}

.profile-value-down {
    color: #b91c1c;
}

/* --- Grids ---------------------------------------------------------------- */
.profile-grid-caption {
    color: #64748b;
    font-size: 0.8rem;
    margin: 0 0 0.5rem;
}

/* The wide tables scroll inside their own box rather than pushing the page sideways. */
.profile-grid-scroll {
    overflow-x: auto;
}

.profile-grid {
    border-collapse: collapse;
    font-size: 0.85rem;
    width: 100%;
}

.profile-grid th {
    border-bottom: 1px solid var(--odds-border);
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.5rem 0.6rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.profile-grid td {
    border-bottom: 1px solid #f1f5f9;
    padding: 0.55rem 0.6rem;
    vertical-align: top;
}

.profile-grid tbody tr:hover {
    background: #f8fafc;
}

.profile-grid-strong {
    font-weight: 700;
}

.profile-grid-number {
    text-align: right;
    white-space: nowrap;
}

.profile-grid-note {
    color: #94a3b8;
    display: block;
    font-size: 0.74rem;
    font-weight: 400;
}

.profile-grid-actions {
    white-space: nowrap;
}

.profile-grid-actions form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.profile-row-win td {
    background: #f0fdf4;
}

.profile-row-loss td {
    background: #fef2f2;
}

.profile-row-button {
    background: white;
    border: 1px solid var(--odds-border);
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

.profile-row-button:hover {
    background: #e2e8f0;
}

.profile-row-button-win {
    border-color: #bbf7d0;
    color: #15803d;
}

.profile-row-button-loss {
    border-color: #fecaca;
    color: #b91c1c;
}

.profile-row-button-quiet {
    border-color: transparent;
    color: #94a3b8;
}

.profile-row-button-delete {
    border-color: #fecaca;
    color: #b91c1c;
}

.profile-row-button-delete:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}

.profile-pill {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

.profile-pill-armed {
    background: #eff6ff;
    color: var(--odds-blue-dark);
}

.profile-pill-done {
    background: #f1f5f9;
    color: #475569;
}

.profile-pill-win {
    background: #dcfce7;
    color: #15803d;
}

.profile-pill-loss {
    background: #fee2e2;
    color: #b91c1c;
}

@media (max-width: 900px) {
    .profile-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-nav {
        position: static;
    }

    .profile-nav-list {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    .profile-nav-link {
        justify-content: center;
    }

    .profile-content {
        padding: 1rem;
    }
}

@media (max-width: 620px) {
    .profile-nav-list {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }

    .profile-nav-link {
        justify-content: flex-start;
    }
}

.profile-avatar {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 72px;
    object-fit: cover;
    width: 72px;
}

.profile-avatar-fallback {
    align-items: center;
    background: var(--odds-blue);
    color: white;
    display: inline-flex;
    font-size: 1.7rem;
    font-weight: 900;
    justify-content: center;
}

.profile-name {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
}

.profile-email {
    color: #64748b;
    margin: 0.2rem 0 0;
}

.profile-facts {
    border-top: 1px solid var(--odds-border);
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding-top: 1.25rem;
}

.profile-facts dt {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

.profile-facts dd {
    font-weight: 700;
    margin: 0.15rem 0 0;
    overflow-wrap: anywhere;
}

.profile-discord {
    align-items: center;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 2rem;
    padding: 1rem;
}

.profile-discord-copy {
    align-items: center;
    display: flex;
    gap: 0.85rem;
}

.profile-discord-mark {
    align-items: center;
    background: #5865f2;
    border-radius: 12px;
    color: white;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.4rem;
    font-weight: 900;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.profile-discord h2 {
    color: #312e81;
    font-size: 1rem;
    margin: 0 0 0.25rem;
}

.profile-discord p {
    color: #475569;
    font-size: 0.88rem;
    margin: 0;
}

.profile-discord .profile-discord-error {
    color: #b42318;
    font-weight: 700;
    margin-top: 0.45rem;
}

.profile-discord-action {
    flex: 0 0 auto;
    margin: 0;
}

.profile-button-discord {
    background: #5865f2;
    text-decoration: none;
}

.profile-button-discord:hover {
    background: #4752c4;
}

.profile-button {
    background: var(--odds-blue);
    border: 0;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-weight: 800;
    min-height: 42px;
    padding: 0.55rem 1.1rem;
}

.profile-button:hover {
    background: var(--odds-blue-dark);
}

.profile-danger {
    border: 1px solid #fecaca;
    border-radius: 12px;
    margin-top: 2rem;
    padding: 1rem;
}

.profile-danger h2 {
    color: #991b1b;
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.profile-danger p {
    color: #7f1d1d;
    font-size: 0.88rem;
    margin: 0 0 0.9rem;
}

.profile-button-danger {
    background: #b91c1c;
}

.profile-button-danger:hover {
    background: #991b1b;
}

@media (max-width: 760px) {
    .profile-discord {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-button-discord {
        text-align: center;
        width: 100%;
    }

    .profile-discord-action {
        width: 100%;
    }

    .odds-nav-account {
        padding-bottom: 0.5rem;
    }
}

/* ---------------------------------------------------------------------------
   Odds alerts: the bell beside a price, and the target dialog.
   --------------------------------------------------------------------------- */

/* Inside the extra-odds modal the bell and the bet ticket are flat children of .card-total-cell,
   alongside the price button and the EV badge. The ticket comes first, so it reads to the left. */
.odds-alert-trigger,
.odds-bet-trigger {
    background: transparent;
    border: 0;
    border-left: 1px dashed var(--odds-border);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.35rem 0.5rem;
}

.odds-alert-trigger:hover,
.odds-bet-trigger:hover {
    background: #eff6ff;
}

/* Main-grid actions live in the footer. Keeping them in normal flow prevents the ticket and bell
   from covering the outcome tag in the narrow three-column card. */
.odds-box-actions {
    display: flex;
    gap: 0.06rem;
    justify-content: flex-end;
}

.odds-box-action {
    border-left: 0;
    border-radius: 999px;
    opacity: 0.7;
    padding: 0.18rem 0.22rem;
}

.odds-box-action:hover,
.odds-box-action:focus-visible {
    background: #dbeafe;
    opacity: 1;
}

/* Above the EV explainer (1200/1210), since the dialog can be opened from inside it. */
.odds-alert-backdrop {
    background: rgb(15 23 42 / 0.45);
    inset: 0;
    position: fixed;
    z-index: 1300;
}

.odds-alert-dialog {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgb(15 23 42 / 0.28);
    left: 50%;
    max-height: 90vh;
    max-width: 420px;
    overflow-y: auto;
    padding: 1.25rem;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    z-index: 1310;
}

.odds-alert-dialog:focus {
    outline: none;
}

.odds-alert-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.odds-alert-header h2 {
    font-size: 1.05rem;
    margin: 0;
}

.odds-alert-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0.25rem;
}

.odds-alert-fixture {
    color: #64748b;
    margin: 0.35rem 0 1rem;
}

.odds-alert-current {
    background: #f8fafc;
    border-radius: 10px;
    margin: 0 0 1rem;
    padding: 0.65rem 0.8rem;
}

.odds-alert-current dt {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
}

.odds-alert-current dd {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0.15rem 0 0;
}

.odds-alert-current dd span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
    margin-left: 0.4rem;
}

.odds-alert-label {
    display: block;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.odds-alert-input {
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 800;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    width: 100%;
}

.odds-alert-quick {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.odds-alert-quick-button {
    background: #f1f5f9;
    border: 1px solid var(--odds-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
}

.odds-alert-quick-button:hover {
    background: #e2e8f0;
}

.odds-alert-note,
.odds-alert-signin-note {
    color: #64748b;
    font-size: 0.82rem;
    margin: 0.9rem 0 1rem;
}

.odds-alert-actions {
    display: flex;
    gap: 0.5rem;
}

.odds-alert-primary {
    background: var(--odds-blue);
    border: 0;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-weight: 800;
    min-height: 42px;
    padding: 0.6rem 1.1rem;
    text-decoration: none;
}

.odds-alert-primary:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

.odds-alert-primary:hover:not(:disabled) {
    background: var(--odds-blue-dark);
}

.odds-alert-secondary {
    background: transparent;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    color: #475569;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    min-height: 42px;
    padding: 0.6rem 1.1rem;
    text-decoration: none;
}

.odds-alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0 0 0.9rem;
    padding: 0.6rem 0.75rem;
}

.odds-alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    color: #166534;
    font-weight: 700;
    margin: 0 0 1rem;
    padding: 0.75rem;
}

/* The bet dialog reuses the alert dialog's chrome; only its own fields carry .bet-* rules. */
.bet-dialog {
    max-width: 440px;
}

.bet-duplicate-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #92400e;
    font-size: 0.86rem;
    line-height: 1.4;
    margin: 0 0 0.9rem;
    padding: 0.65rem 0.75rem;
}

.bet-fields {
    display: grid;
    gap: 0.75rem;
}

.bet-field .odds-alert-label {
    font-size: 0.85rem;
}

.bet-return {
    margin-top: 1rem;
}






.profile-danger-confirm {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b !important;
    font-weight: 700;
    padding: 0.7rem 0.8rem;
}

.profile-danger-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.profile-button-quiet {
    background: transparent;
    border: 1px solid var(--odds-border);
    color: #475569;
}

.profile-button-quiet:hover {
    background: #e2e8f0;
}

/* The danger buttons are anchors in the first step and submits in the second; keep them identical. */
a.profile-button {
    display: inline-block;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

.signin-dialog {
    max-width: 440px;
}

.signin-dialog .auth-intro {
    margin-top: 0.35rem;
}

.signin-dialog .auth-legal {
    margin-bottom: 0;
}

/* ===========================================================================
   Motion
   ---------------------------------------------------------------------------
   Timings and distances follow the ui-ux-pro-max motion presets: 150-300ms for
   feedback, ~2-4px of travel so a hover reads as response rather than movement,
   and a 30ms stagger so a list of cards resolves quickly rather than parading.

   Everything animates transform/opacity/box-shadow only — never width, height
   or margin — so it stays on the compositor and cannot reflow the odds grid.
   Every rule here is switched off under prefers-reduced-motion at the bottom.
   =========================================================================== */

:root {
    --motion-fast: 150ms;
    --motion-base: 220ms;
    --motion-slow: 320ms;
    /* Decelerating: quick to start, settles gently. The GSAP "power2.out" shape. */
    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes odds-rise-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes odds-dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

@keyframes odds-fade-in {
    from { opacity: 0; }
}

@keyframes odds-pulse {
    50% { transform: scale(1.12); }
}

/* --- match cards: settle in on load -------------------------------------- */

/* fill-mode "both" holds the from-state before it starts, so nothing flashes at
   full opacity first. The opacity:0 lives only in the keyframe, so if the
   animation never runs the card simply renders normally. */
.match-card,
.landing-match-card {
    animation: odds-rise-in var(--motion-slow) var(--motion-ease-out) both;
}

/* No hover treatment on the card itself: it is an <article>, not a link, so a
   lift would promise a click that does not exist. The odds boxes and buttons
   inside it are the interactive parts and keep their own feedback. */

/* Stagger the first rows only. Beyond that the delay would outlast the scroll,
   so later cards arrive together rather than trickling. */
.match-card-list .match-card:nth-child(1) { animation-delay: 0ms; }
.match-card-list .match-card:nth-child(2) { animation-delay: 30ms; }
.match-card-list .match-card:nth-child(3) { animation-delay: 60ms; }
.match-card-list .match-card:nth-child(4) { animation-delay: 90ms; }
.match-card-list .match-card:nth-child(5) { animation-delay: 120ms; }
.match-card-list .match-card:nth-child(6) { animation-delay: 150ms; }
.match-card-list .match-card:nth-child(7) { animation-delay: 180ms; }
.match-card-list .match-card:nth-child(n+8) { animation-delay: 210ms; }

/* --- odds boxes: the existing hover, but no longer instant ---------------- */

.odds-box {
    transition: background-color var(--motion-fast) ease,
                border-color var(--motion-fast) ease;
}

/* --- dialogs and their backdrops ----------------------------------------- */

.odds-alert-dialog,
.account-panel,
.extra-odds-modal,
.ev-explainer {
    animation: odds-dialog-in var(--motion-base) var(--motion-ease-out) both;
}

.odds-alert-backdrop,
.extra-odds-backdrop,
.ev-explainer-backdrop {
    animation: odds-fade-in var(--motion-base) ease both;
}

/* --- controls: feedback on press and hover ------------------------------- */

.odds-alert-trigger,
.details-button,
.filter-button,
.profile-button,
.auth-provider-button,
.odds-alert-primary,
.odds-alert-secondary {
    transition: background-color var(--motion-fast) ease,
                border-color var(--motion-fast) ease,
                transform var(--motion-fast) var(--motion-ease-out),
                box-shadow var(--motion-fast) ease;
}

.details-button:active,
.filter-button:active,
.profile-button:active,
.auth-provider-button:active,
.odds-alert-primary:active {
    transform: scale(0.97);
}

/* The bell earns a little more, since arming an alert has no other confirmation
   at the moment of the click. */
.odds-alert-trigger:hover {
    transform: scale(1.15);
}

.odds-alert-trigger:active {
    animation: odds-pulse var(--motion-fast) var(--motion-ease-out);
}

/* --- honour the system preference ---------------------------------------- */

/* Not decoration: vestibular disorders make movement genuinely unpleasant, and
   the site is perfectly usable without any of the above. */
@media (prefers-reduced-motion: reduce) {
    .extra-odds-modal.team-details-modal {
        animation: none;
    }

    .match-card,
    .landing-match-card,
    .odds-alert-dialog,
    .account-panel,
    .extra-odds-modal,
    .ev-explainer,
    .odds-alert-backdrop,
    .extra-odds-backdrop,
    .ev-explainer-backdrop,
    .team-details-spinner,
    .odds-alert-trigger:active {
        animation: none;
    }

    .odds-box,
    .odds-alert-trigger,
    .details-button,
    .filter-button,
    .profile-button,
    .auth-provider-button,
    .odds-alert-primary,
    .odds-alert-secondary {
        transition: none;
    }

    .odds-alert-trigger:hover,
    .details-button:active,
    .filter-button:active,
    .profile-button:active,
    .auth-provider-button:active,
    .odds-alert-primary:active {
        transform: none;
    }
}

/* Virtual team simulator
   ---------------------------------------------------------------------------
   The pitch is an SVG on a 0-100 grid, which is the same coordinate space the
   formation slots are defined in, so a slot's X/Y goes straight onto the
   drawing with no conversion. Edge thickness and opacity carry the co-play
   strength; that is the whole point of drawing a graph rather than a list. */
.virtual-team-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.virtual-team-intro,
.virtual-team-footer p {
    max-width: 70ch;
    color: var(--text-muted, #56606f);
}

.virtual-team-unavailable {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background: rgba(148, 163, 184, 0.16);
}

.virtual-team-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.virtual-team-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.virtual-team-picker label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.virtual-team-versus {
    padding-bottom: 0.6rem;
    font-weight: 600;
    color: var(--text-muted, #56606f);
}

.virtual-team-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #56606f);
}

.virtual-team-select {
    min-height: 2.5rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(148, 163, 184, 0.5);
    border-radius: 0.5rem;
    background: var(--surface, #fff);
    font: inherit;
}

.virtual-team-summary {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.9rem;
}

.virtual-team-goals {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.virtual-team-goal-block {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.virtual-team-goal-block strong {
    font-size: 1.6rem;
    line-height: 1.1;
}

.virtual-team-goal-block-adjusted strong {
    color: var(--accent, #1d4ed8);
}

.virtual-team-outcomes {
    width: 100%;
    border-collapse: collapse;
}

.virtual-team-outcomes th,
.virtual-team-outcomes td {
    padding: 0.4rem 0.5rem;
    text-align: right;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.virtual-team-outcomes th[scope="row"],
.virtual-team-outcomes thead th:first-child {
    text-align: left;
}

.virtual-team-up { color: #15803d; }
.virtual-team-down { color: #b91c1c; }

.virtual-team-scorelines ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
}

.virtual-team-scorelines li {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4.2rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.6rem;
    background: rgba(148, 163, 184, 0.16);
    font-size: 0.85rem;
}

.virtual-team-warnings {
    margin: 0;
    padding: 0.75rem 1rem 0.75rem 2rem;
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 0.5rem;
}

.virtual-team-sides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.25rem;
}

.virtual-team-side {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.9rem;
}

.virtual-team-side header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.virtual-team-side h2 { margin: 0; font-size: 1.1rem; }

.virtual-team-formation {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, #56606f);
}

/* The pitch is drawn at half the card width. The SVG keeps its 0-100 viewBox and
   fills the wrapper, so slot positions, node radii and label sizes all scale with
   it rather than needing separate values. The min-width keeps it readable once the
   sides grid has collapsed to a single narrow column. */
.virtual-team-pitch-wrapper {
    width: 50%;
    min-width: min(17rem, 100%);
    margin-inline: auto;
}

.virtual-team-pitch {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0.6rem;
}

.virtual-team-turf { fill: rgba(21, 128, 61, 0.10); }
.virtual-team-halfway,
.virtual-team-centre {
    fill: none;
    stroke: rgba(21, 128, 61, 0.28);
    stroke-width: 0.4;
}

.virtual-team-edge { stroke: var(--accent, #1d4ed8); }

.virtual-team-node circle {
    fill: var(--surface, #fff);
    stroke: var(--accent, #1d4ed8);
    stroke-width: 0.8;
}

.virtual-team-node text {
    font-size: 3.4px;
    font-weight: 600;
    fill: var(--text, #111827);
}

.virtual-team-node-thin circle {
    stroke-dasharray: 1.2 1;
}

.virtual-team-lineup {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.virtual-team-lineup li {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
}

.virtual-team-slot-role {
    font-size: 0.75rem;
    color: var(--text-muted, #56606f);
}

.virtual-team-player-select { width: 100%; }

.virtual-team-flag {
    padding: 0.1rem 0.4rem;
    border-radius: 0.4rem;
    background: rgba(245, 158, 11, 0.18);
    font-size: 0.7rem;
    white-space: nowrap;
}

.virtual-team-side-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.5rem;
    margin: 0;
}

.virtual-team-side-stats dt {
    font-size: 0.75rem;
    color: var(--text-muted, #56606f);
}

.virtual-team-side-stats dd {
    margin: 0;
    font-weight: 600;
}

.virtual-team-side-stats dd span {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--text-muted, #56606f);
}

.sport-menu-extra {
    display: block;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(148, 163, 184, 0.14);
    font-size: 0.9rem;
    text-decoration: none;
}

@media (max-width: 30rem) {
    .virtual-team-lineup li { grid-template-columns: 1fr; }
    .virtual-team-controls { flex-direction: column; align-items: stretch; }
    .virtual-team-versus { padding-bottom: 0; }
}

/* Player detail popup */
.virtual-team-node { cursor: pointer; }
.virtual-team-node:hover circle,
.virtual-team-node:focus-visible circle { stroke-width: 1.6; }
.virtual-team-node:focus-visible { outline: none; }

.virtual-team-info {
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.6);
    border-radius: 50%;
    background: transparent;
    font: 600 0.75rem/1 inherit;
    cursor: pointer;
}

.virtual-team-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.55);
}

.virtual-team-modal {
    width: min(34rem, 100%);
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.25rem;
    border-radius: 0.9rem;
    background: var(--surface, #fff);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
}

.virtual-team-modal header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.virtual-team-modal h3 { margin: 0 0 0.15rem; }
.virtual-team-modal h4 { margin: 1rem 0 0.35rem; font-size: 0.85rem; }

.virtual-team-modal-close {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.virtual-team-modal-scores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem;
    border-radius: 0.6rem;
    background: rgba(148, 163, 184, 0.14);
}

.virtual-team-modal-scores dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #56606f);
}

.virtual-team-modal-scores dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.virtual-team-modal-stats {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.virtual-team-modal-stats th,
.virtual-team-modal-stats td {
    padding: 0.25rem 0.35rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.virtual-team-modal-stats th { text-align: left; font-weight: 400; }
.virtual-team-modal-stats td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.virtual-team-modal-empty {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 0.4rem;
    font-size: 0.88rem;
}

.virtual-team-rating {
    min-width: 2.1rem;
    padding: 0.1rem 0.35rem;
    border-radius: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.virtual-team-rating-high { background: rgba(21, 128, 61, 0.16); color: #15803d; }
.virtual-team-rating-mid { background: rgba(148, 163, 184, 0.2); color: var(--text-muted, #56606f); }
.virtual-team-rating-low { background: rgba(185, 28, 28, 0.14); color: #b91c1c; }

.virtual-team-lineup li { grid-template-columns: 5.5rem 1fr auto auto; }

.virtual-team-reference-note {
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid var(--accent, #1d4ed8);
    background: rgba(29, 78, 216, 0.08);
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.virtual-team-reference-tag {
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.4rem;
    background: rgba(29, 78, 216, 0.12);
    color: var(--accent, #1d4ed8);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ---------------------------------------------------------------------------
   Guaranteed profit: header badge and the profile section that lists them.
   --------------------------------------------------------------------------- */

.odds-nav-surebets {
    align-items: center;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: 999px;
    color: #047857;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 700;
    gap: 0.35rem;
    margin-right: 0.5rem;
    padding: 0.4rem 0.7rem;
    text-decoration: none;
    white-space: nowrap;
}

.odds-nav-surebets:hover,
.odds-nav-surebets:focus {
    background: #d1fae5;
    color: #065f46;
}

.profile-surebet {
    border: 1px solid var(--odds-border);
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: 1rem;
}

.profile-surebet-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.profile-surebet-profit {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.profile-surebet-save {
    align-items: center;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
}

.profile-surebet-save label {
    color: #475569;
    font-size: 0.8rem;
    font-weight: 800;
}

.profile-surebet-saved {
    color: #dc2626;
    font-weight: 700;
    margin: 0.65rem 0 0;
}

.profile-surebet-stake {
    border: 1px solid var(--odds-border);
    border-radius: 8px;
    font: inherit;
    max-width: 8rem;
    min-height: 40px;
    padding: 0.45rem 0.6rem;
}

.profile-button-primary {
    background: var(--odds-blue);
    border-color: var(--odds-blue);
    color: white;
}

.profile-button-primary:hover {
    background: var(--odds-blue-dark);
    border-color: var(--odds-blue-dark);
}

@media (max-width: 620px) {
    .profile-surebet-save .profile-button,
    .profile-surebet-save .profile-grid-note {
        width: 100%;
    }
}


/* ---------------------------------------------------------------------------
   Published-eleven detail control and explainer.

   The lineup calculation backtests behind the club model. XI therefore opens
   the transparent calculation without publishing an experimental percentage as
   a second headline signal beside the price.
   --------------------------------------------------------------------------- */

.match-lineup-edge-button {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 999px;
    color: #92400e;
    cursor: pointer;
    font: 800 0.62rem/1 inherit;
    padding: 0.2rem 0.36rem;
    white-space: nowrap;
}

.match-lineup-edge-button:hover,
.match-lineup-edge-button:focus-visible {
    background: #fef3c7;
    border-color: #f59e0b;
    outline: none;
}

.lineup-explainer {
    max-width: 34rem;
}

.lineup-explainer-warning {
    background: rgba(217, 119, 6, 0.12);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.75rem;
}

.lineup-explainer-block {
    margin-bottom: 1rem;
}

.lineup-explainer-block h4 {
    font-size: 0.85rem;
    margin: 0 0 0.4rem;
}

.lineup-explainer-grid {
    display: grid;
    gap: 0.2rem 1rem;
    grid-template-columns: auto 1fr;
    margin: 0;
}

.lineup-explainer-grid dt {
    color: var(--text-muted, #56606f);
    font-size: 0.8rem;
}

.lineup-explainer-grid dd {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin: 0;
}

.lineup-explainer-table {
    border-collapse: collapse;
    width: 100%;
}

.lineup-explainer-table th,
.lineup-explainer-table td {
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
    padding: 0.35rem 0.5rem;
    text-align: right;
}

.lineup-explainer-table thead th,
.lineup-explainer-table tbody th {
    font-weight: 400;
    text-align: left;
}

.lineup-explainer-table td {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.lineup-explainer-row-adjusted td,
.lineup-explainer-row-adjusted th {
    background: rgba(29, 78, 216, 0.06);
}

.lineup-explainer-note {
    color: var(--text-muted, #56606f);
    font-size: 0.78rem;
    margin: 0.4rem 0 0;
}



.ev-badge-lineup {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    margin-right: 0.25rem;
}

.ev-badge-lineup:hover,
.ev-badge-lineup:focus-visible {
    background: #fef3c7;
    border-color: #f59e0b;
}