:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101a20; color: #eef5f3; }
body { margin: 0; }
main { max-width: 48rem; margin: 10vh auto; padding: 2rem; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.05; margin: 1rem 0 2rem; }
p { line-height: 1.7; max-width: 42rem; }
.eyebrow { color: #8de3bb; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.lead { font-size: 1.4rem; }
.notice { border-left: 3px solid #8de3bb; padding: .8rem 1rem; background: #192a30; }
.small { color: #bacdc9; font-size: .9rem; }
a { color: #8de3bb; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: 1rem 2rem; }
nav form { margin: 0; }
input, button, textarea, select { font: inherit; padding: .5rem; }
input { display: block; max-width: 100%; box-sizing: border-box; }
button { cursor: pointer; }
.errorlist { color: #ffb8b8; }
dt { font-weight: bold; margin-top: 1rem; }

section { margin: 3rem 0; }
.table-scroll { overflow-x: auto; }
.prediction-statistics-table { width: 100%; min-width: 0; table-layout: fixed; border: 1px solid #54716f; }
.overall-team-table { table-layout: fixed; border: 1px solid #54716f; }
.overall-team-table th { width: 50%; }
.overall-team-table th:first-child { border-right: 1px solid #54716f; }
.prediction-statistics-table .stat-name-col { width: 38%; }
.prediction-statistics-table .stat-value-col { width: 12%; }
.prediction-statistics-table thead tr:first-child th:first-child, .prediction-statistics-table thead tr:nth-child(2) th:nth-child(2), .prediction-statistics-table tbody td:nth-child(2) { border-right: 1px solid #34494f; }
.prediction-statistics-table td:nth-child(2), .prediction-statistics-table td:nth-child(4) { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-comparison { display: inline-block; width: 1.25em; margin-right: .25em; font-size: 1.5rem; font-weight: 900; line-height: .8; vertical-align: -.08em; }
.stat-comparison-higher { color: #00ff66; }
.stat-comparison-lower { color: #ff3040; }
.stat-comparison-equal { color: #cbd7d4; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .75rem; text-align: left; border-bottom: 1px solid #34494f; }
.metrics { display: flex; flex-wrap: wrap; gap: 2rem; }
.metrics strong { font-size: 1.8rem; }
.match-card { background: #192a30; padding: 1rem; margin: 1rem 0; border-radius: .5rem; }

main { max-width: 76rem; }
.odds-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin: 1rem 0; }
.odds-controls[hidden], tr[hidden] { display: none; }
.odds-controls label { display: grid; gap: .35rem; }
.odds-controls p { margin: 0; }
.odds-table { font-variant-numeric: tabular-nums; }
.bookmakers-heading { font-size: clamp(1.5rem, 3vw, 2rem); margin: .75rem 0 .5rem; }
.bookmakers-fixture { font-size: clamp(1.5rem, 3.5vw, 2.25rem); margin: .4rem 0 .75rem; }
.neo-bookmakers-main { margin: 0 auto; padding-top: 1rem; }
.neo-bookmakers-main .bookmakers-back { margin-top: 0; }
.neo-price-choice { display: inline; margin: 0; }
.neo-price-choice button { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: #8de3bb; font: inherit; text-decoration: underline; cursor: pointer; }
.odds-table td { white-space: nowrap; }
.prices-row > td { background: #192a30; }
summary { cursor: pointer; padding: .5rem 0; color: #8de3bb; }

.fractional-odds { color: #bacdc9; font-size: .9rem; }

.outcome-summary { min-width: 10rem; vertical-align: top; }
.outcome-summary > span { display: block; }
.outcome-summary strong { font-size: 1.3rem; }
.outcome-summary .small { margin-bottom: .7rem; font-size: .8rem; }
.best-price, .best-price-cell a { color: #a5f0b9; font-weight: 700; }
.best-price-cell { background: #203e34; }
.best-label { display: block; font-size: .7rem; color: #a5f0b9; }
.outcome-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.comparison-table td, .comparison-table th { vertical-align: top; }

.match-summary-row > td { vertical-align: top; }
.stacked-outcomes { min-width: 12rem; }
.outcome-line { display: grid; grid-template-columns: 3rem 1fr; gap: .65rem; min-height: 3.25rem; padding: .15rem 0; }
.rating-outcome-line { min-height: 3.25rem; padding: .15rem 0; }
.outcome-label { color: #bacdc9; }
.outcome-line .small { font-size: .8rem; }

.outcome-price-line { grid-template-columns: 1fr; }

.stale-price { color: #ffd39b; font-size: .85rem; }

.league-heading th { background: #223a42; color: #8de3bb; padding: 1rem .75rem; font-size: 1.1rem; }

.league-navigation { padding: 0; margin: 1.5rem 0; gap: .65rem; }
.league-navigation a, .action-button { display: inline-block; border: 1px solid #54716f; border-radius: .4rem; padding: .45rem .65rem; text-decoration: none; font-size: .85rem; }
.action-button:hover, .league-navigation a:hover { background: #263e44; }
.action-button:focus-visible, .league-navigation a:focus-visible { outline: 2px solid #eef5f3; outline-offset: 3px; }
.match-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.two-outcome-option { min-width: 14rem; margin-top: .8rem; padding: .65rem .75rem; border: 1px solid #d8b84f; border-radius: .4rem; background: #2b291d; }
.two-outcome-option summary { padding: 0; color: #ffe36e; font-weight: 700; }
.two-outcome-option summary span { display: block; white-space: nowrap; }
.two-outcome-option p { margin: .55rem 0 0; line-height: 1.45; }
.two-outcome-option ul { margin: .55rem 0; padding-left: 1.25rem; }
.two-outcome-options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .7rem; margin-top: .7rem; }
.two-outcome-scenario { padding: .6rem; border: 1px solid #665d36; border-radius: .35rem; background: #242319; }
.predictions-table td[data-label="Model chances"] { position: relative; overflow: visible; }
.predictions-table .two-outcome-option summary { font-size: .78rem; }
.match-extras-row > td { padding: .35rem .75rem .75rem; }
.predictions-table .match-block > .match-summary-row > td { border-bottom: 0; }
.predictions-table .match-block > tr:last-child > td { border-bottom: 1px solid #54716f; }
.predictions-table .match-block > .match-extras-row > td { padding-top: .1rem; }
.predictions-table .match-extras-row[hidden] { display: none; }
.match-options-and-standings { display: flex; align-items: flex-start; gap: .75rem; }
.match-options-and-standings > .match-actions { display: grid; flex: 0 0 12rem; margin: 0; }
.match-options-and-standings > .two-outcome-option { margin-top: 0; }
.match-options-and-standings > .two-outcome-option { flex: 0 0 auto; }
.match-team-standings { flex: 1 1 auto; min-width: 0; }
.predictions-table .match-pair-table { width: 100%; table-layout: auto; font-size: .75rem; }
.predictions-table .match-pair-table caption.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.predictions-table .match-pair-table th, .predictions-table .match-pair-table td { padding: .3rem .18rem; white-space: nowrap; overflow-wrap: normal; }
.predictions-table .match-pair-table th[scope="row"] { white-space: normal; }
.match-pair-table .team-form { gap: .07rem; }
.match-pair-table .form-badge { width: .82rem; height: 1.05rem; font-size: .62rem; }
.predictions-table .two-outcome-option[open] { position: fixed; top: 8vh; left: 50%; z-index: 20; width: min(70rem, calc(100vw - 4rem)); max-height: 84vh; overflow-y: auto; transform: translateX(-50%); box-sizing: border-box; box-shadow: 0 .8rem 2rem #0a1015; }
#id_strategy { display: grid; gap: .45rem; max-width: 24rem; }
#id_strategy > div > label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .7rem; border: 1px solid #54716f; border-radius: .4rem; }
#id_strategy input[type="radio"] { order: 2; flex: 0 0 auto; margin-left: auto; }
#dutching-control { margin-top: .7rem; }
#dutching-slider { width: min(100%, 28rem); accent-color: #ffe36e; }
.league-section { --league-accent: #8de3bb; border: 1px solid #34494f; border-top: 4px solid var(--league-accent); border-radius: .6rem; margin: 2rem 0 3.5rem; overflow: hidden; background: #132128; }
.league-section[data-league="premier-league"] { --league-accent: #bfa4f8; }
.league-section[data-league="league-one"], .league-section[data-league="league-1"] { --league-accent: #86c9f5; }
.league-section[data-league="league-two"], .league-section[data-league="league-2"] { --league-accent: #f4c87e; }
.league-section[data-league="championship"], .league-section[data-league="efl-championship"] { --league-accent: #eea6bc; }
.league-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem; background: #1c2d35; }
.league-section-header h3 { margin: 0; font-size: 1.4rem; color: var(--league-accent); scroll-margin-top: 1rem; }
.predictions-table { table-layout: fixed; min-width: 52rem; }
.predictions-table col.match-column { width: 28%; }
.predictions-table col.confidence-column { width: 20%; }
.predictions-table caption { padding: .65rem 1rem; text-align: left; font-size: .8rem; color: #bacdc9; }
.predictions-table td { overflow-wrap: anywhere; }

.predictions-table { min-width: 64rem; }
.predictions-table col.match-column { width: 21%; }
.predictions-table col.confidence-column { width: 17%; }
.predictions-table col.rating-column { width: 10%; }
.predictions-table col.market-estimate-column { width: 12%; }
.market-estimate { min-width: 8rem; }

.confidence-heading span { display: block; margin-left: 3.65rem; }

/* Keep the full comparison on desktop; use paired panels per match on phones. */
.mobile-outcome-label { display: none; }
main { min-width: 0; }
main > p, dd { overflow-wrap: anywhere; }
input, select, textarea { max-width: 100%; box-sizing: border-box; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #eef5f3; outline-offset: 3px; }
.action-button, .league-navigation a, button { min-height: 44px; box-sizing: border-box; }
.action-button, .league-navigation a { display: inline-flex; align-items: center; }
.bet-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.table-scroll { overscroll-behavior-x: contain; }
@media (max-width: 70rem) {
  main { margin: 3rem auto; padding: 1.25rem; }
}
@media (max-width: 48rem) {
  main { margin: 1.5rem auto; padding: 1rem; }
  nav { padding: .75rem 1rem; gap: .25rem .75rem; }
  nav[aria-label="Main navigation"] a { display: inline-flex; align-items: center; min-height: 44px; }
  h1 { font-size: clamp(2.25rem, 9vw, 3.5rem); margin-bottom: 1.25rem; }
  h2 { font-size: 1.4rem; }
  .lead { font-size: 1.15rem; }
  section { margin: 2rem 0; }
  .league-section { margin: 1.5rem 0 2rem; }
  .league-section-header { padding: .85rem; }
  .league-section-header h3 { font-size: 1.2rem; }
  .league-section-header .small { white-space: nowrap; }
  .league-navigation { padding: 0; }
  .predictions-table, .predictions-table tbody { display: block; min-width: 0; }
  .predictions-table colgroup { display: none; }
  .predictions-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .predictions-table .match-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .85rem; padding: 1rem .85rem; border-bottom: 0; }
  .predictions-table .match-summary-row:last-child { border-bottom: 0; }
  .predictions-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .predictions-table td:first-child, .predictions-table td.market-estimate { grid-column: 1 / -1; }
  .predictions-table td:first-child > a { font-size: 1.1rem; font-weight: 700; }
  .predictions-table td[data-label]::before { content: attr(data-label); display: block; font-weight: 700; font-size: .85rem; min-height: 2.5rem; margin-bottom: .35rem; }
  .predictions-table .outcome-line { grid-template-columns: 2.6rem minmax(0, 1fr); gap: .3rem; min-height: 2rem; font-size: .9rem; }
  .prematch-confidence-rating .rating-outcome-line { display: none; }
  .prematch-confidence-rating .rating-outcome-line.rating-selected,
  .prematch-confidence-rating .rating-outcome-line.rating-placeholder { display: block; min-height: 0; padding: 0; }
  .predictions-table .outcome-price-line { min-height: 4.5rem; }
  .predictions-table .market-estimate .outcome-price-line { min-height: 2rem; }
  .mobile-outcome-label { display: inline; color: #bacdc9; }
  .predictions-table .outcome-line .small, .predictions-table .fractional-odds { font-size: .75rem; }
  .match-actions { margin-top: .65rem; }
  .odds-controls { align-items: stretch; gap: .75rem; }
  .odds-controls label { width: 100%; }
  .odds-controls input, .odds-controls select { width: 100%; min-height: 44px; }
  .outcome-buttons button { flex: 1 1 8rem; }
  .metrics { gap: .75rem 1.5rem; }
  .comparison-table { min-width: 36rem; }
  .predictions-table .two-outcome-option[open] { top: 5rem; left: 1rem; right: 1rem; width: auto; max-height: calc(100vh - 6rem); transform: none; }
  .predictions-table .match-extras-row { display: block; padding: .15rem .85rem 1rem; border-bottom: 0; }
  .predictions-table .match-extras-row > td { display: block; padding: 0; }
  .predictions-table .match-block { border-bottom: 1px solid #54716f; }
  .predictions-table .match-block > tr:last-child > td { border-bottom: 0; }
  .match-options-and-standings { flex-wrap: wrap; }
  .match-options-and-standings > .match-actions { flex: 1 1 9rem; }
  .match-team-standings { flex-basis: 100%; }
  .predictions-table .match-pair-table { display: table; min-width: 30rem; }
  .predictions-table .match-pair-table thead { position: static; width: auto; height: auto; padding: 0; overflow: visible; clip-path: none; white-space: normal; }
  .predictions-table .match-pair-table tbody { display: table-row-group; }
  .predictions-table .match-pair-table tr { display: table-row; }
  .predictions-table .match-pair-table th, .predictions-table .match-pair-table td { display: table-cell; border-bottom: 1px solid #34494f; }
  .two-outcome-options-grid { grid-template-columns: 1fr; }
}

@media (min-width: 48.001rem) {
  .predictions-table .bookmaker-names { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.2; }
}
@media (max-width: 48rem) {
  .predictions-table .outcome-line { grid-template-columns: 3rem minmax(0, 1fr); }
  .outcome-label, .mobile-outcome-label { white-space: nowrap; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.league-table-panel { padding: 1rem; border-bottom: 1px solid #54716f; }
.league-table-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.league-table-heading h4 { margin: 0; font-size: 1.1rem; }
.form-key { margin: .65rem 0; font-size: .8rem; color: #bacdc9; max-width: none; }
.standings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.league-table { font-size: .8rem; font-variant-numeric: tabular-nums; }
.league-table th, .league-table td { padding: .4rem .25rem; vertical-align: middle; }
.league-table th[scope="row"] { font-weight: 500; overflow-wrap: anywhere; }
.league-table abbr { text-decoration: none; }
.team-form { display: flex; gap: .12rem; white-space: nowrap; }
.form-badge { display: inline-flex; justify-content: center; align-items: center; width: 1.05rem; height: 1.25rem; flex: 0 0 auto; border-radius: .2rem; background: #34494f; color: #eef5f3; font-size: .72rem; font-weight: 700; }
.form-W { background: #286343; color: #c8ffdf; }
.form-D { background: #6b5424; color: #fff0bd; }
.form-L { background: #75343c; color: #ffe0e4; }
.table-source { margin: .75rem 0 0; font-size: .75rem; max-width: none; }
.league-table-unavailable { margin: 1rem; }
@media (max-width: 65rem) {
  .standings-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .standings-grid table + table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 48rem) {
  .league-table-panel { padding: .85rem .5rem; }
  .league-table-heading { padding: 0 .35rem; }
  .league-table { font-size: .75rem; }
  .league-table .extended-stat { display: none; }
  .league-table td, .league-table th { padding: .4rem .15rem; }
  .league-table .form-badge { width: .75rem; height: 1.15rem; font-size: .65rem; }
  .league-table .team-form { gap: .08rem; }
  .form-key { line-height: 1.8; padding: 0 .35rem; }
  .table-source { padding: 0 .35rem; }
}

.accuracy-table th, .accuracy-table td { vertical-align: top; }
.accuracy-confidence { display: grid; grid-template-columns: 3rem 1fr; gap: .65rem; margin-bottom: .4rem; font-variant-numeric: tabular-nums; }
.accuracy-probabilities { min-width: 8rem; }
.accuracy-model { display: inline-block; max-width: 22rem; overflow-wrap: anywhere; margin-top: .5rem; }
.record-correct { color: #a5f0b9; }
.record-incorrect { color: #ffb8b8; }
@media (max-width: 48rem) {
  .accuracy-table, .accuracy-table tbody { display: block; }
  .accuracy-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .accuracy-table .accuracy-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; padding: 1rem 0; border-bottom: 1px solid #34494f; }
  .accuracy-row td { display: block; border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
  .accuracy-row td:first-child { grid-column: 1 / -1; }
  .accuracy-row td[data-label="Actual"], .accuracy-row td[data-label="Confidence rating"] { grid-column: span 2; }
  .accuracy-row td[data-label="Model chances"] { grid-column: 1 / -1; }
  .accuracy-row td[data-label]::before { content: attr(data-label); display: block; font-size: .85rem; font-weight: 700; margin-bottom: .5rem; color: #bacdc9; }
  .accuracy-probabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; min-width: 0; }
  .accuracy-confidence { grid-template-columns: 1fr; gap: .2rem; margin: 0; }
}

.prediction-filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin: 1rem 0; }
.prediction-filters p { margin: 0; flex: 1 1 10rem; min-width: 0; }
.prediction-filters label { display: block; margin-bottom: .35rem; }
.prediction-filters input, .prediction-filters select { width: 100%; min-height: 44px; box-sizing: border-box; }
.prediction-filters button, .prediction-pagination a { min-height: 44px; }
.prediction-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }

.model-percentage { justify-self: start; align-self: start; padding: .2rem .35rem; border: 2px solid transparent; border-radius: .3rem; }
.model-percentage.model-draw-threshold { border-color: currentColor; }
.model-percentage.model-pick { color: #ffe600; border-color: #ffe600; background: #302c0b; }
.model-percentage.model-pick.pick-odds-green { color: #5cff73; border-color: #5cff73; background: #12351d; }
.model-percentage.model-pick.pick-odds-lime { color: #c0ff42; border-color: #c0ff42; background: #27330d; }
.model-percentage.model-pick.pick-odds-yellow { color: #ffe600; border-color: #ffe600; background: #302c0b; }
.model-percentage.model-pick.pick-odds-orange { color: #ffad33; border-color: #ffad33; background: #39260e; }
.model-percentage.model-pick.pick-odds-red { color: #ff7272; border-color: #ff7272; background: #3a171b; }
.model-percentage.model-draw-threshold,
.model-percentage.model-pick.model-draw-threshold { border-color: #eef5f3; }
.model-percentage.model-draw-close,
.model-percentage.model-pick.model-draw-close { border-color: #c89bff; }
.model-chance-key { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1.25rem; margin: .35rem 0 1rem; }
.model-chance-key-item { display: inline-flex; align-items: center; gap: .45rem; }
.model-chance-key .model-percentage { flex: 0 0 auto; color: #eef5f3; font-size: .9rem; font-weight: 700; }

.leaderboard-name { max-width: 14rem; overflow-wrap: anywhere; }

.home-introduction { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.intro-copy { min-width: 0; }
.intro-copy > p:first-child { margin-top: 0; }
.intro-leaders { min-width: 0; margin: 0; padding: 1.25rem; background: #192a30; border: 1px solid #34494f; border-radius: .6rem; }
.intro-leaders h2 { margin-top: 0; }
.intro-leaders th, .intro-leaders td { padding: .55rem; vertical-align: top; }
.intro-leaders table { font-size: .875rem; }
.intro-leaders [data-overall-leaders] .leaderboard-name { white-space: nowrap; overflow-wrap: normal; word-break: normal; max-width: none; }
@media (max-width: 56rem) { .home-introduction { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

.leader-rank-first { color: #ffe600; font-size: 1.8rem; font-weight: 800; line-height: 1.15; }
.overall-score { display: inline-block; margin-top: .4rem; font-size: .75rem; color: #bacdc9; }
.overall-score-earned { color: #ffe600; font-weight: 700; }
.world-leader { border-left: 3px solid #ffe600; padding: .5rem .75rem; background: #24270f; overflow-wrap: anywhere; }
.world-leader strong { color: #ffe600; }

.price-movement { display: inline-block; position: relative; vertical-align: baseline; margin-left: .15rem; color: #a5eaff; font-size: 1rem; }
.price-movement > summary { padding: 0; color: inherit; display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; min-height: 1.5rem; cursor: pointer; font-weight: 800; list-style: none; border-radius: .3rem; }
.price-movement > summary::-webkit-details-marker { display: none; }
.price-movement > summary:hover, .price-movement > summary:focus-visible { outline: 2px solid currentColor; }
.price-movement[open] { position: static; }
.movement-detail { display: inline-block; padding: .25rem .4rem; margin: .2rem; color: #edf5ff; background: #162b42; border: 1px solid #527088; border-radius: .3rem; font-size: .75rem; font-weight: 400; white-space: normal; }
.live-price-status { min-height: 1.5em; }
[data-live-prices] { min-width: 0; }
[data-live-prices] p { overflow-wrap: anywhere; }

.price-with-movement { display: inline-flex; align-items: center; gap: .15rem; }
.price-with-movement > span { white-space: nowrap; }
.price-with-movement .price-movement { margin-left: 0; }
.price-movement:not([open]) .movement-detail { display: none; }

.price-movement > summary > span { font-size: 1.75rem; font-weight: 900; line-height: 1; }
.lineup-status { margin: .35rem 0; }
.lineup-confirmed { color: #a5eaff; }
.model-confidence-movement > summary { color: #ffe45c; }

.account-panel { max-width: 36rem; margin: 0 auto; padding: 1.5rem; background: #192a30; border-radius: .75rem; }
.account-panel h1 { font-size: clamp(2rem, 6vw, 3rem); }
.account-panel input:not([type="hidden"]) { width: 100%; }
.account-options { margin-top: 1.5rem; border-top: 1px solid #34494f; }

.my-game { padding: 1rem; background: #192a30; border-radius: .75rem; }
.my-balance strong { display: block; font-size: 2.5rem; color: #f9e547; }

.nav-balance { white-space: nowrap; }
.nav-balance strong { color: #f9e547; }

.bet-choice { white-space: nowrap; overflow-wrap: normal; word-break: normal; display: inline-flex; justify-content: center; align-items: center; align-self: start; box-sizing: border-box; padding: .15rem .2rem; border: 1px solid #8de3bb; border-radius: .3rem; background: #233c36; color: #baffdf; text-decoration: none; font-weight: 700; }
.bet-choice:hover, .bet-choice:focus-visible { background: #345c4d; outline: 2px solid #baffdf; outline-offset: 2px; }
.bet-instructions { color: #eef5f3; }

@media (min-width: 48.001rem) {
  .predictions-table td[data-label="Model chances"] .outcome-line { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .confidence-heading span { margin-left: 4.15rem; }
}

.confidence-titles { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .65rem; }
.confidence-titles > span { min-width: 0; line-height: 1.2; }
.confidence-heading .confidence-titles > span:first-child { align-self: center; transform: translateY(.25rem); }
.confidence-heading .confidence-titles span { margin-left: 0; }
.confidence-mobile-titles { display: none; }
@media (max-width: 48rem) {
  .predictions-table td[data-label="Model chances"]::before { display: none; }
  .confidence-mobile-titles { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .3rem; min-height: 2.5rem; margin-bottom: .35rem; font-size: .85rem; font-weight: 700; }
}

.bet-form-field { margin: 1rem 0; }
.stake-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; max-width: 54rem; }
.stake-preview-box { display: flex; flex-direction: column; gap: .4rem; padding: .8rem; border: 1px solid #54716f; border-radius: .5rem; background: #192a30; min-width: 0; }
.stake-preview-label, .stake-preview-box label { font-size: .9rem; font-weight: 700; }
.stake-preview-box output { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stake-preview-box input { width: 100%; min-width: 0; }
@media (max-width: 600px) { .stake-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stake-balance-box { grid-column: 1 / -1; } }

#cashout-dialog { width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; box-sizing: border-box; border: 1px solid #e8c547; border-radius: .75rem; padding: 1.25rem; background: #14222d; color: #f3f5f7; }
#cashout-dialog::backdrop { background: rgb(0 0 0 / 65%); }
#cashout-dialog label { display: flex; gap: .5rem; align-items: flex-start; }
#cashout-dialog input[type="checkbox"] { width: auto; flex: 0 0 auto; }
#cashout-dialog form p { display: flex; gap: .5rem; flex-wrap: wrap; }
.cashout-current strong, .cashout-countdown-number { color: #ffe600; font-size: 1.5rem; }

.cashout-countdown-number { font-weight: 800; font-variant-numeric: tabular-nums; vertical-align: baseline; }

.competition-players-table .leaderboard-name { white-space: nowrap; overflow-wrap: normal; word-break: normal; max-width: none; }
.leader-bets-table { font-size: .9rem; min-width: 52rem; }
.leader-bets-table th, .leader-bets-table td { padding: .55rem .4rem; vertical-align: top; overflow-wrap: anywhere; }
.leader-bets-table td:nth-child(5), .leader-bets-table td:nth-child(6), .leader-bets-table td:nth-child(8), .leader-bets-table td:nth-child(9) { white-space: nowrap; }
.leader-bets-table th:last-child, .leader-bets-table td:last-child,
.bet-summary-table th:last-child, .bet-summary-table td:last-child { position: sticky; right: 0; background: #101a20; box-shadow: -2px 0 0 #34494f; }
.bet-breakdown-table { max-width: 34rem; }
.bet-breakdown-table td:last-child, .bet-breakdown-table th:last-child { text-align: right; width: 5rem; }
.bet-breakdown-table tfoot { font-weight: 700; }

.leader-bets-heading { font-size: clamp(1.25rem, 5vw, 3rem); overflow-wrap: anywhere; }

.leaderboard-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin: 1.25rem 0; }
.leaderboard-filters label { display: grid; gap: .35rem; max-width: 100%; }
.leaderboard-current-player { background: #24270f; outline: 1px solid #ffe600; outline-offset: -1px; scroll-margin-top: 1rem; }
.competition-players-heading { font-size: clamp(1.25rem, 5vw, 3rem); overflow-wrap: anywhere; }

.bet-match-context { margin: 1.5rem 0; }
.bet-prematch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.bet-prematch-grid section { min-width: 0; padding: 1rem; background: #192a30; border: 1px solid #34494f; border-radius: .4rem; }
.bet-prematch-grid h3 { font-size: 1rem; margin: 0 0 .8rem; }
.bet-prematch-grid h3 .small { display: block; }
.bet-prematch-outcome { display: flex; justify-content: space-between; gap: .75rem; margin: .4rem 0; font-variant-numeric: tabular-nums; }
.bet-team-table { min-width: 32rem; }
@media (max-width: 40rem) {
  .bet-prematch-grid { grid-template-columns: minmax(0, 1fr); }
}

.bet-detail-page { overflow-wrap: anywhere; }
.bet-match-context .table-scroll { position: relative; max-width: 100%; }

[data-live-fixture][hidden] { display: none !important; }
.league-navigation button { color: inherit; background: transparent; cursor: pointer; }
.league-navigation button[aria-pressed="true"] { color: #101a20; background: #8de3bb; }

/* Trial layout: remove home-fixture-toolbar from the template to restore the original nav. */
.home-fixture-toolbar { position: fixed; inset: auto 0 0; z-index: 30; display: flex; flex-wrap: nowrap; gap: .65rem; align-items: center; margin: 0; padding: .65rem max(1rem, env(safe-area-inset-right)) calc(.65rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); overflow-x: auto; overscroll-behavior-x: contain; white-space: nowrap; background: #192a30; border-top: 1px solid #54716f; box-shadow: 0 -.4rem 1.25rem rgb(0 0 0 / 35%); }
.home-fixture-toolbar > * { flex: 0 0 auto; }
[data-live-prices]:has(.home-fixture-toolbar) { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.pick-sort-controls { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.pick-sort-controls .active { border-color: #8de3bb; background: #24443b; color: #fff; }
.top-picks-table th, .top-picks-table td { white-space: nowrap; }
.pick-slider { max-width: 38rem; margin: 1.25rem 0; padding: 1rem; border: 1px solid #54716f; border-radius: .5rem; }
.pick-slider > label { display: block; font-weight: 700; margin-bottom: .4rem; }
.pick-slider-scale { display: flex; justify-content: space-between; gap: 1rem; }
.pick-slider input[type="range"] { display: block; width: 100%; margin: .8rem 0; accent-color: #8de3bb; }

/* Neo is deliberately isolated from the existing home-page layout. */
.neo-topbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4.4rem; box-sizing: border-box; padding: .65rem clamp(1rem, 2vw, 2rem); border-bottom: 1px solid #54716f; background: #14232b; box-shadow: 0 .3rem 1rem #0005; }
.neo-topbar-leader { min-width: 0; max-width: 28rem; margin: 0 auto; }
.neo-topbar-leader .world-leader { margin: 0; border: 1px solid #54716f; border-radius: .45rem; padding: .5rem .75rem; background: #223a42; color: #eef5f3; font-size: .9rem; }
.neo-topbar-leader .world-leader strong { color: #eef5f3; }
.neo-topbar-leader .world-leader .small { font-size: .8rem; }
.neo-bookie-beaters-main { width: min(100% - 2rem, 72rem); margin: 1rem auto 3rem; }
.neo-bookie-beaters-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.neo-bookie-beaters-left { display: grid; gap: 2rem; min-width: 0; }
.neo-bookie-beaters-overall { width: 100%; box-sizing: border-box; }
.neo-bookie-beaters-overall .leaderboard-name { white-space: nowrap; overflow-wrap: normal; word-break: normal; max-width: none; }
@media (max-width: 56rem) { .neo-bookie-beaters-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .neo-bookie-beaters-left { gap: 1rem; } }
.neo-brand, .neo-account { display: flex; align-items: center; gap: .7rem; }
.neo-brand a, .neo-account a { text-decoration: none; }
.neo-home-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .6rem; }
.neo-home-icon img { display: block; width: 100%; height: 100%; border-radius: .6rem; }
.neo-home-icon:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 3px; }
.neo-title { color: #eef5f3; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 800; white-space: nowrap; }
.neo-account { margin-left: auto; }
.neo-account a, .neo-account button { color: #eef5f3; background: #223a42; border: 1px solid #54716f; border-radius: .45rem; padding: .5rem .75rem; white-space: nowrap; }
.neo-balance { color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.neo-username { color: #8de3bb; font-weight: 700; }
.neo-main { max-width: none; margin: 0; padding: 0; }
.neo-layout { display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr) minmax(19rem, 23rem); gap: 0; min-height: calc(100vh - 4.4rem); }
.neo-layout > * { min-width: 0; }
.neo-leagues { display: flex; flex-direction: column; gap: .55rem; align-self: start; position: sticky; top: 4.4rem; margin: 0; padding: 1.25rem .85rem; }
.neo-side-label { margin: 0 0 .35rem; color: #bacdc9; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.neo-leagues button { width: 100%; text-align: left; color: #eef5f3; background: #192a30; border: 1px solid #34494f; border-radius: .55rem; }
.neo-leagues button[aria-pressed="true"] { color: #101a20; background: #8de3bb; border-color: #8de3bb; font-weight: 700; }
.neo-leagues .neo-top-picks-button { margin-bottom: .7rem; color: #101a20; background: #8de3bb; border-color: #8de3bb; font-weight: 800; }
.neo-leagues .neo-bookie-beaters-button { display: block; margin-top: 1rem; padding: .65rem .8rem; color: #eef5f3; background: #192a30; border: 1px solid #34494f; border-radius: .55rem; text-decoration: none; }
.neo-leagues .neo-bookie-beaters-button:hover, .neo-leagues .neo-bookie-beaters-button:focus-visible { border-color: #8de3bb; }
@media (prefers-reduced-motion: no-preference) { .neo-leagues .neo-bookie-beaters-pulse { animation: neo-bookie-beaters-pulse 2s ease-in-out 10; } }
.neo-picks { margin: 0; padding: 1.2rem clamp(1rem, 2vw, 2rem) 3rem; border-inline: 1px solid #34494f; }
.neo-pick-slider { max-width: none; margin: 0; border-color: var(--rank-colour, #00ffff); background: color-mix(in srgb, var(--rank-colour, #00ffff) 18%, #101a20); }
.neo-pick-slider input[type="range"] { accent-color: var(--rank-colour, #00ffff); }
.neo-pick-slider [data-pick-slider-status] { color: var(--rank-colour, #00ffff); }
.neo-ranking-note { max-width: 60rem; margin: .7rem 0 1.3rem; line-height: 1.45; }
.neo-picks-list { display: grid; gap: .7rem; }
.neo-pick-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: 1rem; background: color-mix(in srgb, var(--card-colour, #00ffff) 18%, #101a20); border: 1px solid color-mix(in srgb, var(--card-colour, #00ffff) 68%, #101a20); border-left: 4px solid var(--card-colour, #00ffff); border-radius: .65rem; }
.neo-settings-link { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0 !important; }
.neo-settings-main { max-width: 52rem; margin: 0 auto; padding-top: 1rem; }
.neo-settings-main h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: .5rem 0 1rem; }
.neo-settings-form { display: grid; gap: 1rem; }
.neo-settings-form fieldset { display: grid; gap: .6rem; border: 1px solid #54716f; border-radius: .5rem; }
.neo-settings-form legend { font-weight: 700; }
.neo-settings-form fieldset p { margin: .2rem 0 .7rem; }
.neo-settings-form label { display: flex; align-items: center; gap: .6rem; }
.neo-settings-form input[type="color"] { width: 4rem; height: 2.5rem; padding: .1rem; }
.neo-settings-bookies { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem; }
.neo-settings-bookies input[type="checkbox"] { display: inline; }
.neo-settings-form > button { justify-self: start; }
.neo-pick-card[hidden] { display: none; }
.neo-fixture, .neo-pick-card .small { display: block; }
.neo-fixture { font-weight: 750; }
.neo-pick-numbers { display: flex; flex-wrap: wrap; gap: .5rem 1rem; grid-column: 1 / -1; font-size: .85rem; }
.neo-pick-numbers strong { color: #eef5f3; }
.neo-pick-action { grid-column: 2; grid-row: 1; white-space: nowrap; }
.neo-pick-action button { color: #101a20; background: #8de3bb; border: 0; border-radius: .4rem; font-weight: 700; }
.neo-match-header { flex: 0 0 auto; padding: 1.2rem clamp(1rem, 2vw, 2rem) .7rem; border-bottom: 1px solid #34494f; background: #101a20; }
.neo-match-header h1 { margin: .8rem 0 .3rem; font-size: clamp(1.3rem, 2.2vw, 2rem); }
.neo-match-header p { margin: 0; }
.neo-match-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.neo-match-live { display: inline-flex; gap: .7rem; align-items: baseline; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.neo-match-live [hidden] { display: none; }
.neo-match-live strong { color: #eef5f3; font-size: 1.05rem; }
.neo-match-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: .8rem clamp(1rem, 2vw, 2rem) 3rem; }
.neo-match-content .model-percentage.model-pick { color: var(--neo-pick-unpriced); border-color: var(--neo-pick-unpriced); }
.neo-match-content .model-percentage.model-pick.pick-odds-green { color: var(--neo-pick-green); border-color: var(--neo-pick-green); }
.neo-match-content .model-percentage.model-pick.pick-odds-lime { color: var(--neo-pick-lime); border-color: var(--neo-pick-lime); }
.neo-match-content .model-percentage.model-pick.pick-odds-yellow { color: var(--neo-pick-yellow); border-color: var(--neo-pick-yellow); }
.neo-match-content .model-percentage.model-pick.pick-odds-orange { color: var(--neo-pick-orange); border-color: var(--neo-pick-orange); }
.neo-match-content .model-percentage.model-pick.pick-odds-red { color: var(--neo-pick-red); border-color: var(--neo-pick-red); }
.neo-match-content .model-percentage.model-draw-threshold { border-color: var(--neo-draw-threshold); }
.neo-match-content .model-percentage.model-draw-close { border-color: var(--neo-draw-close); }
.neo-match-content > p { margin: .3rem 0 .6rem; }
.neo-match-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; margin-top: .7rem; border-block: 1px solid #34494f; font-variant-numeric: tabular-nums; }
.neo-match-column { min-width: 0; }
.neo-match-column h2 { min-height: 2.6em; margin: 0; padding: .6rem .25rem; color: #bacdc9; font-size: .82rem; line-height: 1.3; }
.neo-match-cell { min-height: 4.8rem; padding: .45rem .25rem; border-top: 1px solid #34494f; font-size: .85rem; }
.neo-match-outcome-label { display: block; margin-bottom: .2rem; color: #8de3bb; font-size: .74rem; font-weight: 700; }
.neo-match-column:first-child .neo-match-cell .model-percentage { display: inline-block; margin-top: .3rem; }
.neo-match-cell .bookmaker-names { display: block; margin-top: .2rem; color: #bacdc9; overflow-wrap: anywhere; font-size: .74rem; }
.neo-match-bet .neo-pick-action { margin: .25rem 0 0; }
.neo-match-bet .neo-pick-action button, .neo-match-bet .action-button { display: inline-block; padding: .4rem .3rem; font-size: .76rem; white-space: normal; }
.neo-match-lineups { margin: 1.25rem 0 0; }
.neo-match-lineups h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.neo-match-lineups > p { margin: 0 0 .75rem; }
.neo-lineup-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.neo-lineup-team { min-width: 0; margin: 0; padding: .8rem; border: 1px solid #34494f; border-radius: .4rem; background: #192a30; }
.neo-lineup-team h3 { margin: 0 0 .6rem; font-size: .95rem; overflow-wrap: anywhere; }
.neo-lineup-team ol { margin: 0; padding-left: 1.4rem; }
.neo-lineup-team li { margin: .35rem 0; overflow-wrap: anywhere; }
.neo-player-availability { margin-top: 1.4rem; }
.neo-player-availability h3 { margin: 0 0 .45rem; font-size: 1.1rem; }
.neo-player-availability .neo-lineup-team h4 { margin: 0 0 .5rem; }
.neo-player-availability .neo-lineup-team ul { margin: 0; padding-left: 1.4rem; }
@media (max-width: 700px) { .neo-lineup-teams { grid-template-columns: minmax(0, 1fr); } }
.neo-match-extras { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .7rem; margin-top: 1rem; }
.neo-match-extras .match-actions { margin: 0; }
.neo-match-extras .two-outcome-option { margin: 0; }
.neo-match-extras .two-outcome-option summary span { display: inline; }
.neo-match-standings { margin-top: 1rem; }
.neo-match-standings caption { text-align: left; padding: .5rem 0; font-weight: 700; }
.neo-match-standings th, .neo-match-standings td { padding: .45rem .3rem; white-space: nowrap; }
.neo-slip { position: sticky; top: 4.4rem; align-self: start; display: flex; flex-direction: column; height: calc(100vh - 4.4rem); margin: 0; background: #14232b; }
.neo-slip-tabs { position: sticky; top: 0; z-index: 2; display: flex; border-bottom: 1px solid #54716f; background: #14232b; }
.neo-slip-tabs button { flex: 1; padding: .8rem .25rem; color: #bacdc9; background: transparent; border: 0; border-bottom: 3px solid transparent; font-size: .8rem; white-space: nowrap; }
.neo-slip-tabs button[aria-selected="true"] { color: #8de3bb; border-bottom-color: #8de3bb; font-weight: 700; }
.neo-slip-tabs span { display: inline-block; min-width: 1.2em; padding: .1rem .3rem; margin-left: .15rem; border-radius: 1rem; color: #eef5f3; background: #34494f; font-variant-numeric: tabular-nums; }
.neo-slip-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem; }
.neo-slip-content [hidden] { display: none; }
.neo-slip-content p { margin-top: 0; }
.neo-my-bets-tabs { position: sticky; top: -1rem; z-index: 1; display: flex; margin: -1rem -1rem 1rem; border-bottom: 1px solid #54716f; background: #1b3038; }
.neo-my-bets-tabs button { flex: 1; padding: .75rem .4rem; color: #bacdc9; background: transparent; border: 0; border-bottom: 3px solid transparent; font-size: .85rem; white-space: nowrap; }
.neo-my-bets-tabs button[aria-selected="true"] { color: #8de3bb; border-bottom-color: #8de3bb; font-weight: 700; }
.neo-my-bets-tabs span { display: inline-block; min-width: 1.2em; padding: .1rem .3rem; border-radius: 1rem; color: #eef5f3; background: #34494f; font-variant-numeric: tabular-nums; }
.neo-bet-card { display: grid; gap: .25rem; padding: .7rem 0; border-bottom: 1px solid #34494f; font-size: .9rem; }
.neo-bet-card span { color: #bacdc9; }
.neo-bet-card button { justify-self: start; margin-top: .35rem; }
.neo-draft-card { display: grid; gap: .45rem; padding: .8rem 0; border-bottom: 1px solid #54716f; }
.neo-draft-remove-form { justify-self: start; }
.neo-draft-remove { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; padding: 0; border: 1px solid #54716f; border-radius: .35rem; background: transparent; color: #eef5f3; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.neo-draft-remove:hover, .neo-draft-remove:focus-visible { border-color: #ffb8b8; color: #ffb8b8; }
.neo-draft-card > strong { color: #eef5f3; }
.neo-odds-updated { color: #ffe680; font-size: .82rem; font-weight: 700; }
.neo-odds-updated[hidden] { display: none; }
.neo-draft-form { display: grid; gap: .65rem; margin: .25rem 0; }
.neo-draft-form label { display: grid; gap: .25rem; font-size: .84rem; }
.neo-draft-form input[type="number"], .neo-draft-form select { width: 100%; box-sizing: border-box; background: #101a20; color: #eef5f3; border: 1px solid #54716f; border-radius: .35rem; }
.neo-draft-form input[type="range"] { width: 100%; accent-color: #8de3bb; }
.neo-slider-labels { display: flex; justify-content: space-between; color: #bacdc9; font-size: .75rem; }
.neo-strategy-control { display: grid; gap: .25rem; font-size: .84rem; }
.neo-strategy-presets button { flex: 0 0 auto; min-height: 2rem; width: auto; margin: 0; padding: .25rem .45rem; border: 0; background: transparent; color: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; }
.neo-strategy-presets button:hover { color: #eef5f3; text-decoration: underline; }
.neo-strategy-presets button:focus-visible { outline: 2px solid #eef5f3; outline-offset: 2px; }
.neo-companion-presets button { flex: 0 0 auto; min-height: 2rem; width: auto; margin: 0; padding: .25rem .45rem; border: 0; background: transparent; color: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; }
.neo-companion-presets button:hover { color: #eef5f3; text-decoration: underline; }
.neo-companion-presets button:focus-visible { outline: 2px solid #eef5f3; outline-offset: 2px; }
.neo-companion-presets button:disabled { opacity: .5; cursor: default; text-decoration: none; }
.neo-companion-control { display: grid; gap: .25rem; font-size: .84rem; }
.neo-companion-control[hidden] { display: none; }
.neo-companion-choice { width: 100%; min-width: 8rem; }
.neo-companion-choice .neo-slider-labels span { max-width: 48%; overflow-wrap: anywhere; }
.neo-companion-choice input[type="range"] { display: block; width: 100%; margin: .3rem 0 0; accent-color: #8de3bb; }
.neo-draft-form button { justify-self: start; font-size: .8rem; }
.neo-draft-return { color: #a5f0b9; font-size: 1.05rem; line-height: 1.4; }
.neo-slip-footer { grid-column: 1 / -1; display: grid; gap: .35rem; padding: 0 0 .25rem; }
.neo-slip-footer p { display: flex; justify-content: space-between; gap: .5rem; margin: 0; }
.neo-slip-footer p.neo-slip-place-error { display: block; margin: 0 0 .3rem; overflow-wrap: anywhere; }
.neo-slip-footer p.neo-slip-place-error[hidden] { display: none; }
.neo-slip-footer p.small { display: block; line-height: 1.4; }
.neo-slip-actions { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .75rem; border-top: 1px solid #54716f; background: #14232b; }
.neo-slip-actions[hidden] { display: none; }
.neo-slip-actions form { min-width: 0; }
.neo-slip-actions button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 2.6rem; }
.neo-slip-actions button[data-neo-place] { color: #101a20; background: #8de3bb; border: 0; border-radius: .4rem; font-weight: 800; }
.neo-slip-actions button:disabled { opacity: .5; cursor: not-allowed; }
.neo-login-dialog { width: min(22rem, calc(100vw - 2rem)); box-sizing: border-box; padding: 1.2rem; border: 1px solid var(--theme-accent); border-radius: .6rem; background: #14232b; color: #eef5f3; }
.neo-login-dialog::backdrop { background: rgb(0 0 0 / 68%); }
.neo-login-dialog h2 { margin-top: 0; }
.neo-login-dialog form { display: grid; gap: .6rem; }
.neo-login-dialog input { width: 100%; box-sizing: border-box; }
.neo-login-dialog [hidden] { display: none; }
.neo-login-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.neo-trash-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; color: #ffb8b8; background: transparent; border: 1px solid #a45f5f; border-radius: .4rem; }
@media (min-width: 1051px) {
  .neo-layout { height: calc(100dvh - 4.4rem); min-height: 0; }
  .neo-picks { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; }
  .neo-ranking-header { flex: 0 0 auto; padding: 1.2rem clamp(1rem, 2vw, 2rem) 0; background: #101a20; }
  .neo-picks-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: .7rem clamp(1rem, 2vw, 2rem) 3rem; }
}
@media (max-width: 1050px) {
  .neo-home-body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
  .neo-topbar { flex: 0 0 auto; }
  .neo-main { display: flex; flex: 1 1 auto; min-height: 0; }
  .neo-layout { flex: 1 1 auto; min-width: 0; min-height: 0; grid-template-columns: 10rem minmax(25rem, 1fr) 19rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  .neo-leagues { grid-column: 1; position: static; align-self: stretch; min-height: 0; overflow-y: auto; }
  .neo-picks { grid-column: 2; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; }
  .neo-ranking-header { flex: 0 0 auto; padding: 1.2rem clamp(1rem, 2vw, 2rem) 0; background: #101a20; }
  .neo-picks-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: .7rem clamp(1rem, 2vw, 2rem) 3rem; }
  .neo-slip { grid-column: 3; position: static; align-self: stretch; height: auto; min-height: 0; }
}
@media (max-width: 660px) { .neo-topbar { flex-wrap: wrap; } .neo-username { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 1050px) { .neo-topbar-leader { order: 3; flex-basis: 100%; max-width: none; } }

/* Account/browser appearance preference. Keep the existing dark palette as default. */
html[data-theme="light"] { color-scheme: light; background: #f5f8fa; color: #172b35; }
html[data-theme="light"] .neo-login-dialog { background: #fff; color: #172b35; }
html[data-theme="light"] a, html[data-theme="light"] summary { color: #006b58; }
html[data-theme="light"] .small, html[data-theme="light"] .fractional-odds,
html[data-theme="light"] .outcome-label, html[data-theme="light"] .neo-side-label,
html[data-theme="light"] .neo-match-column h2, html[data-theme="light"] .neo-match-cell .bookmaker-names,
html[data-theme="light"] .neo-slider-labels, html[data-theme="light"] .neo-bet-card span { color: #465c66; }
html[data-theme="light"] .notice, html[data-theme="light"] .match-card,
html[data-theme="light"] .intro-leaders, html[data-theme="light"] .account-panel,
html[data-theme="light"] .my-game, html[data-theme="light"] .bet-prematch-grid section,
html[data-theme="light"] .stake-preview-box, html[data-theme="light"] .prices-row > td,
html[data-theme="light"] .neo-lineup-team { background: #eaf1f3; }
html[data-theme="light"] .neo-topbar, html[data-theme="light"] .neo-slip,
html[data-theme="light"] .neo-slip-tabs, html[data-theme="light"] .neo-slip-actions,
html[data-theme="light"] .neo-match-header, html[data-theme="light"] .neo-ranking-header,
html[data-theme="light"] .neo-my-bets-tabs, html[data-theme="light"] .home-fixture-toolbar { background: #e4edf0; }
html[data-theme="light"] .neo-topbar-leader .world-leader,
html[data-theme="light"] .neo-account a, html[data-theme="light"] .neo-account button,
html[data-theme="light"] .neo-leagues button, html[data-theme="light"] .neo-leagues .neo-bookie-beaters-button { background: #fff; color: #172b35; }
html[data-theme="light"] .neo-title, html[data-theme="light"] .neo-topbar-leader .world-leader strong,
html[data-theme="light"] .neo-balance, html[data-theme="light"] .neo-draft-card > strong,
html[data-theme="light"] .neo-pick-numbers strong, html[data-theme="light"] .neo-match-live strong,
html[data-theme="light"] .bet-instructions { color: #172b35; }
html[data-theme="light"] .neo-username, html[data-theme="light"] .neo-match-outcome-label,
html[data-theme="light"] .neo-slip-tabs button[aria-selected="true"],
html[data-theme="light"] .neo-my-bets-tabs button[aria-selected="true"] { color: #006b58; }
html[data-theme="light"] .neo-slip-tabs button, html[data-theme="light"] .neo-my-bets-tabs button { color: #465c66; }
html[data-theme="light"] .neo-pick-slider { background: var(--rank-colour, #00ffff); color: var(--rank-text-colour, #101a20); }
html[data-theme="light"] .neo-pick-slider [data-pick-slider-status] { color: inherit; }
html[data-theme="light"] .neo-pick-card { background: var(--card-colour, #00ffff); border-color: var(--card-colour, #00ffff); color: var(--card-text-colour, #101a20); }
html[data-theme="light"] .neo-pick-card .neo-fixture,
html[data-theme="light"] .neo-pick-card .small,
html[data-theme="light"] .neo-pick-card .neo-pick-numbers strong { color: inherit; }
html[data-theme="light"] .neo-draft-form input[type="number"],
html[data-theme="light"] .neo-draft-form select { background: #fff; color: #172b35; }
html[data-theme="light"] .neo-draft-remove { color: #172b35; }
html[data-theme="light"] .neo-draft-return, html[data-theme="light"] .best-price,
html[data-theme="light"] .best-price-cell a, html[data-theme="light"] .best-label { color: #006b58; }
html[data-theme="light"] .best-price-cell { background: #dcf1e5; }
html[data-theme="light"] .league-section, html[data-theme="light"] .league-section-header,
html[data-theme="light"] .league-heading th { background: #e4edf0; color: #006b58; }
html[data-theme="light"] .two-outcome-option, html[data-theme="light"] .two-outcome-scenario { background: #fff5db; color: #453614; }
html[data-theme="light"] .two-outcome-option summary { color: #725300; }
html[data-theme="light"] .bet-summary-table th:last-child,
html[data-theme="light"] .bet-summary-table td:last-child { background: #f5f8fa; }
html[data-theme="light"] .neo-slip-tabs span, html[data-theme="light"] .neo-my-bets-tabs span { background: #d1e0e5; color: #172b35; }
html[data-theme="light"] .neo-settings-form fieldset,
html[data-theme="light"] th, html[data-theme="light"] td { border-color: #afc3ca; }
html[data-theme="light"] .neo-price-choice button { color: #006b58; }

/* User-selected theme accent; ranking endpoints and semantic win/loss colours stay separate. */
html { --theme-link: var(--theme-accent, #8de3bb); }
html[data-theme="light"] { --theme-link: color-mix(in srgb, var(--theme-accent, #8de3bb) 55%, #003d35); }
a, summary, .eyebrow, .neo-price-choice button, .league-heading th,
.neo-username, .neo-match-outcome-label,
.neo-slip-tabs button[aria-selected="true"], .neo-my-bets-tabs button[aria-selected="true"],
.best-price, .best-price-cell a, .best-label, .record-correct, .neo-draft-return {
  color: var(--theme-link);
}
.notice { border-left-color: var(--theme-accent); }
.league-section { --league-accent: var(--theme-accent); }
.bet-choice { border-color: var(--theme-accent); color: var(--theme-link); background: color-mix(in srgb, var(--theme-accent) 15%, #192a30); }
.bet-choice:hover, .bet-choice:focus-visible { outline-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 28%, #192a30); }
.league-navigation button[aria-pressed="true"], .neo-leagues button[aria-pressed="true"],
.neo-leagues .neo-top-picks-button, .neo-pick-action button,
.neo-slip-actions button[data-neo-place] { background: var(--theme-accent); border-color: var(--theme-accent); color: var(--theme-accent-ink); }
.pick-sort-controls .active { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 30%, #101a20); }
.pick-slider input[type="range"], .neo-draft-form input[type="range"],
.neo-companion-choice input[type="range"] { accent-color: var(--theme-accent); }
.neo-leagues .neo-bookie-beaters-button:hover,
.neo-leagues .neo-bookie-beaters-button:focus-visible { border-color: var(--theme-accent); }
.neo-slip-tabs button[aria-selected="true"],
.neo-my-bets-tabs button[aria-selected="true"] { border-bottom-color: var(--theme-accent); }
@keyframes neo-bookie-beaters-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--theme-edge, #34494f); background-color: var(--theme-button-surface, #192a30); }
  50% { box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--theme-accent) 35%, transparent); border-color: var(--theme-accent); background-color: color-mix(in srgb, var(--theme-accent) 42%, var(--theme-button-surface, #192a30)); }
}

/* Subtle theme-colour surfaces. Strong ranking/card colours remain independent. */
html[data-theme="light"] {
  --theme-top-surface: color-mix(in srgb, var(--theme-accent) 14%, #fff);
  --theme-middle-surface: color-mix(in srgb, var(--theme-accent) 5%, #fff);
  --theme-right-surface: color-mix(in srgb, var(--theme-accent) 11%, #fff);
  --theme-button-surface: color-mix(in srgb, var(--theme-accent) 19%, #fff);
  --theme-button-hover: color-mix(in srgb, var(--theme-accent) 30%, #fff);
  --theme-edge: color-mix(in srgb, var(--theme-accent) 40%, #b8c9ce);
}
html[data-theme="light"] .neo-topbar,
html[data-theme="light"] .neo-topbar-leader .world-leader { background: var(--theme-top-surface); border-color: var(--theme-edge); }
html[data-theme="light"] .neo-picks,
html[data-theme="light"] .neo-match-content,
html[data-theme="light"] .neo-ranking-header,
html[data-theme="light"] .neo-match-header { background: var(--theme-middle-surface); border-color: var(--theme-edge); }
html[data-theme="light"] .neo-slip,
html[data-theme="light"] .neo-slip-tabs,
html[data-theme="light"] .neo-my-bets-tabs,
html[data-theme="light"] .neo-slip-actions { background: var(--theme-right-surface); border-color: var(--theme-edge); }
html[data-theme="light"] .neo-leagues { background: var(--theme-middle-surface); }
html[data-theme="light"] :where(button, .action-button) { background: var(--theme-button-surface); border-color: var(--theme-edge); color: #172b35; }
html[data-theme="light"] :where(button, .action-button):hover { background: var(--theme-button-hover); }
html[data-theme="light"] .neo-account a,
html[data-theme="light"] .neo-account button,
html[data-theme="light"] .neo-leagues button,
html[data-theme="light"] .neo-leagues .neo-bookie-beaters-button {
  background: var(--theme-button-surface); border-color: var(--theme-edge); color: #172b35;
}
html[data-theme="light"] .neo-account a:hover,
html[data-theme="light"] .neo-account button:hover,
html[data-theme="light"] .neo-leagues button:hover,
html[data-theme="light"] .neo-leagues .neo-bookie-beaters-button:hover { background: var(--theme-button-hover); }
html[data-theme="light"] .neo-leagues button[aria-pressed="true"],
html[data-theme="light"] .neo-leagues .neo-top-picks-button,
html[data-theme="light"] .neo-pick-action button,
html[data-theme="light"] .neo-slip-actions button[data-neo-place] {
  background: var(--theme-accent); border-color: var(--theme-accent); color: var(--theme-accent-ink);
}
html[data-theme="light"] .neo-slip-tabs button,
html[data-theme="light"] .neo-my-bets-tabs button { background: transparent; }

html[data-theme="dark"] {
  --theme-top-surface: color-mix(in srgb, var(--theme-accent) 12%, #101a20);
  --theme-middle-surface: color-mix(in srgb, var(--theme-accent) 5%, #101a20);
  --theme-right-surface: color-mix(in srgb, var(--theme-accent) 9%, #101a20);
  --theme-button-surface: color-mix(in srgb, var(--theme-accent) 17%, #101a20);
  --theme-button-hover: color-mix(in srgb, var(--theme-accent) 27%, #101a20);
  --theme-edge: color-mix(in srgb, var(--theme-accent) 30%, #34494f);
}
html[data-theme="dark"] .neo-topbar,
html[data-theme="dark"] .neo-topbar-leader .world-leader { background: var(--theme-top-surface); border-color: var(--theme-edge); }
html[data-theme="dark"] .neo-picks,
html[data-theme="dark"] .neo-match-content,
html[data-theme="dark"] .neo-ranking-header,
html[data-theme="dark"] .neo-match-header { background: var(--theme-middle-surface); border-color: var(--theme-edge); }
html[data-theme="dark"] .neo-slip,
html[data-theme="dark"] .neo-slip-tabs,
html[data-theme="dark"] .neo-my-bets-tabs,
html[data-theme="dark"] .neo-slip-actions { background: var(--theme-right-surface); border-color: var(--theme-edge); }
html[data-theme="dark"] .neo-leagues { background: var(--theme-middle-surface); }
html[data-theme="dark"] :where(button, .action-button) { background: var(--theme-button-surface); border-color: var(--theme-edge); color: #eef5f3; }
html[data-theme="dark"] :where(button, .action-button):hover { background: var(--theme-button-hover); }
html[data-theme="dark"] .neo-account a,
html[data-theme="dark"] .neo-account button,
html[data-theme="dark"] .neo-leagues button,
html[data-theme="dark"] .neo-leagues .neo-bookie-beaters-button {
  background: var(--theme-button-surface); border-color: var(--theme-edge); color: #eef5f3;
}
html[data-theme="dark"] .neo-account a:hover,
html[data-theme="dark"] .neo-account button:hover,
html[data-theme="dark"] .neo-leagues button:hover,
html[data-theme="dark"] .neo-leagues .neo-bookie-beaters-button:hover { background: var(--theme-button-hover); }
html[data-theme="dark"] .neo-leagues button[aria-pressed="true"],
html[data-theme="dark"] .neo-leagues .neo-top-picks-button,
html[data-theme="dark"] .neo-pick-action button,
html[data-theme="dark"] .neo-slip-actions button[data-neo-place] {
  background: var(--theme-accent); border-color: var(--theme-accent); color: var(--theme-accent-ink);
}
html[data-theme="dark"] .neo-slip-tabs button,
html[data-theme="dark"] .neo-my-bets-tabs button { background: transparent; }

/* Match details, captured-price highlights and bet counts share the same theme tint. */
html[data-theme="light"] {
  --theme-detail-surface: color-mix(in srgb, var(--theme-accent) 13%, #fff);
  --theme-highlight-surface: color-mix(in srgb, var(--theme-accent) 25%, #fff);
}
html[data-theme="dark"] {
  --theme-detail-surface: color-mix(in srgb, var(--theme-accent) 17%, #101a20);
  --theme-highlight-surface: color-mix(in srgb, var(--theme-accent) 30%, #101a20);
}
html[data-theme] .neo-lineup-team,
html[data-theme] .bet-prematch-grid section { background: var(--theme-detail-surface); border-color: var(--theme-edge); }
html[data-theme] .best-price-cell { background: var(--theme-highlight-surface); }
html[data-theme] .neo-slip-tabs span,
html[data-theme] .neo-my-bets-tabs span { background: var(--theme-highlight-surface); color: inherit; }
html[data-theme] .neo-bookie-beaters-weekly,
html[data-theme] .neo-bookie-beaters-overall {
  background: var(--theme-detail-surface);
  border-color: var(--theme-edge);
}

/* The home view owns the viewport; only the content inside each column scrolls. */
.neo-home-body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.neo-home-body > .neo-topbar { flex: 0 0 auto; }
.neo-home-body > .neo-main { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.neo-home-body .neo-layout { flex: 1 1 auto; height: 100%; min-height: 0; }
.neo-home-body .neo-leagues { position: static; align-self: stretch; min-height: 0; overflow-y: auto; }
.neo-home-body .neo-slip { position: static; align-self: stretch; height: auto; min-height: 0; }
.neo-home-body .neo-slip-content { overscroll-behavior-y: contain; touch-action: pan-y; }
@media (min-width: 1051px) {
  .neo-home-body .neo-layout { overflow: hidden; }
}

.neo-promo-link { display: block; align-self: center; width: min(100%, 9rem); margin: .7rem auto 0; border-radius: .5rem; }
.neo-promo-link img { display: block; width: 100%; height: auto; }
.neo-promo-link:focus-visible { outline: 3px solid var(--theme-accent); outline-offset: .25rem; }
.neo-promotion-main { max-width: 74rem; margin: 0 auto; padding: clamp(1rem, 4vw, 3rem); }
.neo-promotion-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 5vw, 4rem); padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--theme-edge, #54716f); border-radius: .75rem; background: var(--theme-detail-surface, #192a30); }
.neo-promotion-card h1 { font-size: clamp(2rem, 5vw, 4rem); }
.neo-promotion-card img { display: block; width: auto; max-width: 100%; height: min(70vh, 42rem); object-fit: contain; }
.neo-promotion-card .action-button { margin-top: .5rem; background: var(--theme-accent); border-color: var(--theme-accent); color: var(--theme-accent-ink); font-weight: 800; }
@media (max-width: 44rem) { .neo-promotion-card { grid-template-columns: minmax(0, 1fr); } .neo-promotion-card img { justify-self: center; height: min(55vh, 32rem); } }
@keyframes neo-promo-earthquake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10%, 50%, 90% { transform: translate(-5px, 2px) rotate(-2deg); }
  20%, 60% { transform: translate(5px, -3px) rotate(2deg); }
  30%, 70% { transform: translate(-3px, -4px) rotate(-1.5deg); }
  40%, 80% { transform: translate(4px, 4px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .neo-promo-quake { animation: neo-promo-earthquake 2s ease-in-out 1; }
}