/* ==========================================================================
   WinHouse Sportsbook — design system
   Colours sampled pixel-for-pixel from the reference screenshots.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* WINZ_PALETTE_V1 — sampled pixel-by-pixel from the winz.io reference
     screenshot (screenshot/Screenshot_3.jpg) rather than eyeballed, so the
     tonal steps between page, chip and hover are the real ones. */
  --shell: #111827  ;   /* left nav + top bar + search field        */
  --shell-line: #1E2B3C  ;   /* divider between nav and content          */
  --nav-txt:     #FFFFFF;   /* section labels, 14px/600                 */
  --nav-sub:     #9BA3B0;   /* sub-items, 13px/400                      */
  --brand:       #00E61E;   /* logo green is a brand asset — not brightened */   /* WINHOUSE logo green                      */
  --blue:        #526CC6;   /* Log In                                   */
  --green:       #64BD79;   /* Sign Up / Deposit                        */

  /* TONALITY_V2 — the whole board is built from two anchors, #283B4D for a
     resting surface and #3D5065 for hover. Everything between them is mixed
     from those two and the page colour rather than picked separately, so the
     steps stay evenly spaced and in one hue family:
       surface-2 = page->surface 55%   surface-3 = page->surface 30%
       border    = surface->hover 45%  disabled  = page->surface 70%
     The page itself stays #111827 — only the elements on it move. */
  --bg:          #111827;   /* page / app background, cell gutters      */
  --surface: #283B4D  ;   /* rows, sidebar cards, save-bar, inputs    */
  --surface-2: #1E2B3C  ;   /* odds cells, betslip cards, banner frame  */
  --surface-3: #182232  ;   /* dimmed "Value" column, muted cells       */
  --border: #314458  ;   /* 1px rules, panel edges, input borders    */
  --track: #161F2F  ;   /* scrollbar tracks, tab underline track    */
  --hover: #3D5065  ;   /* row / card hover                         */

  /* type */
  --text:        #F2F6FA;   /* +10% landed on pure white; pulled back so the
                              tonal step to --nav-txt (#FFF) survives */
  --text-2:      #B8C3CC;
  --text-dim:    #91949D;
  --text-faint:  #8994A0;   /* 4.95:1 on the new page colour; #5F6B76 was 3.33 */

  /* accents */
  --accent:      #64BD79;   /* reference's primary action green         */
  /* Dark ink on the green, not white. The reference puts white on its green
     button and that measures 2.57:1 — below AA for any text size. Same hue,
     dark ink, 7.07:1. This token is only ever a foreground ON --accent
     (primary buttons, selected odds, the place-bet bar), so nothing else
     shifts with it. */
  --accent-ink:  #071629;
  --live:        #E95A74;
  --hl-pink:     #FF6890;
  /* ODDS_TOKENS_V1 — the odds cell is the one thing on this page a punter came
     to click, and until now it had no colours of its own: the resting cell was
     --surface-2 (shared with betslip cards, dropdowns and the search field),
     the hover was --hover (shared with every row, chip and league bar) and the
     selected fill was --accent (shared with every primary button). Tuning the
     odds meant moving all of those, so nobody did — and a generated dark
     palette put the cell 1.06:1 from the page, which is the whole strip going
     flat. These five belong to the odds and to nothing else, and each is a
     control in the portal's colour panel.
     The resting cell sits ABOVE the row rather than below it, the way the
     reference books do it — the price is what should read first, not the row
     it sits on. --odd-on follows --accent unless it is set, so an existing
     skin that only ever picked an accent still gets its own selected colour. */
  --odd-bg:      #31455B;   /* resting cell                             */
  --odd-txt:     #F2F6FA;   /* the price itself                         */
  --odd-hover:   #405B77;   /* pointer over a cell                      */
  --odd-on:      var(--accent);      /* selected — a solid fill         */
  --odd-on-ink:  var(--accent-ink);  /* price on a selected cell        */
  --win-green:   #38E0A0;
  /* CASHOUT_V1 — the buy-back action. Its own token, not --live or --accent:
     it is neither a loss nor the place-bet green it sits beside. */
  --cash:        #F0A741;
  --cash-ink:    #14202B;
  --up:          #51C580;
  --down:        #E95A74;
  --disabled: #213042  ;

  /* metrics */
  --nav-w:       280px;
  --top-h:       80px;
  --subbar-h:    80px;
  --sidebar-w:   280px;
  --slip-w:      320px;
  --row-h:       55px;
  --odd-w:       82px;
  --radius:      6px;
}

/* light theme ------------------------------------------------------------ */
:root[data-theme="light"] {
  color-scheme: light;
  --shell:       #FFFFFF;
  --shell-line:  #E2E8ED;
  --nav-txt:     #17242B;
  --nav-sub:     #63727E;
  --bg:          #EFF3F8;   /* soft tint, not stark white */
  --surface:     #FFFFFF;
  --surface-2:   #F7FAFC;
  --surface-3:   #E9EFF5;
  --border:      #D8E0E7;
  --track:       #DCE4EA;
  --hover:       #E9EFF5;
  --text:        #17242B;
  --text-2:      #4A5C66;
  --text-dim:    #71838C;
  --text-faint:  #93A3AB;
  --disabled:    #C7D1DA;
  /* Light mode inverts the lift: the row is white, so a cell reads as a cell
     by sitting slightly INTO the page rather than above it. */
  --odd-bg:      #E6EDF4;
  --odd-txt:     #17242B;
  --odd-hover:   #D1DDEB;
  /* the dark amber has no contrast on a white row */
  --cash:        #C97C10;
  --cash-ink:    #FFFFFF;
}

/* ---------------------------------------------------------------- reset - */
*, *::before, *::after { box-sizing: border-box; }
/* #root must carry a definite height: without it .tpl's `height:100%` resolved
   to auto, the panes never clipped, and the whole iframe scrolled as one
   instead of the sidebar and board scrolling independently */
html, body, #root { height: 100%; }
body { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 13px/1.35 "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }

/* scrollbars ------------------------------------------------------------- */
/* styled globally, not just on .scroll — dropdown lists and the market rails
   were falling back to the browser's light default */
/* Thin, dark rails. Both mechanisms are declared on purpose: engines that
   support the standard properties (Firefox, Chrome 121+) honour those and
   ignore the pseudo-elements; older Chrome/Safari fall through to the webkit
   rules. Either path lands on the same thin dark bar.
   .strip-scroll / .lsports override with `scrollbar-width: none` to stay
   hidden — the more specific rule still wins. */
* { scrollbar-width: thin; scrollbar-color: var(--surface) var(--track); }
*::-webkit-scrollbar       { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: var(--track); }
*::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: #3E5265; }
.scroll { overflow-y: auto; }

/* ======================================================= template shell === */
.tpl { display: flex; height: 100vh; overflow: hidden; }
/* embedded in the real site shell — the host page supplies nav + top bar */
.tpl.embedded { height: 100%; }
.tpl.embedded .app { border-radius: 0; }

/* ---------------------------------------------------------- left nav ---- */
.tpl-nav {
  width: var(--nav-w); flex: 0 0 var(--nav-w);
  background: var(--shell);
  border-right: 1px solid var(--shell-line);
  display: flex; flex-direction: column;
  height: 100%;
}
.tpl-nav.mini { width: 72px; flex-basis: 72px; }

.tpl-brand {
  height: var(--top-h); flex: 0 0 var(--top-h);
  display: flex; align-items: center; gap: 10px; padding: 0 18px 0 22px;
}
.tpl-brand .mark { width: 34px; height: 34px; flex: 0 0 34px; }
.tpl-brand .wm {
  font-size: 21px; font-weight: 800; letter-spacing: .4px; color: #fff;
  white-space: nowrap;
}
.tpl-brand .wm em { font-style: normal; color: var(--brand); }
.tpl-brand .collapse {
  margin-left: auto; width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,.06); color: var(--nav-sub);
  display: flex; align-items: center; justify-content: center;
}
.tpl-brand .collapse:hover { background: rgba(255,255,255,.12); color: #fff; }
.tpl-brand .collapse svg { width: 15px; height: 15px; }
.tpl-nav.mini .wm, .tpl-nav.mini .collapse { display: none; }

.tpl-menu { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 24px; }
.tpl-menu::-webkit-scrollbar { width: 6px; }
.tpl-menu::-webkit-scrollbar-track { background: transparent; }
.tpl-menu::-webkit-scrollbar-thumb { background: #2A3745; border-radius: 3px; }

.tpl-sec {
  position: relative; width: 100%; height: 52px;
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
  font-size: 14px; font-weight: 600; color: var(--nav-txt); text-align: left;
}
.tpl-sec:hover { background: rgba(255,255,255,.04); }
.tpl-sec .ico { width: 19px; height: 19px; flex: 0 0 19px; color: var(--nav-sub); }
.tpl-sec .lbl { flex: 1; min-width: 0; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }
.tpl-sec .chev { width: 15px; height: 15px; color: var(--nav-sub);
                 transition: transform .15s; }
.tpl-sec.open > .chev { transform: rotate(180deg); }
.tpl-sec.on { background: rgba(0,116,255,.10); }
.tpl-sec.on .ico { color: var(--accent); }
.tpl-sec.on::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
}
.tpl-nav.mini .tpl-sec { padding: 0 26px; }
.tpl-nav.mini .tpl-sec .lbl, .tpl-nav.mini .tpl-sec .chev { display: none; }

/* ---------------------------------------------------------- top bar ----- */
.tpl-body { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.tpl-top {
  height: var(--top-h); flex: 0 0 var(--top-h);
  background: var(--shell); border-bottom: 1px solid var(--shell-line);
  display: flex; align-items: center; gap: 18px; padding: 0 24px;
}
.tpl-search {
  width: 415px; max-width: 42vw; height: 40px; border-radius: 8px;
  background: rgba(255,255,255,.045);
  display: flex; align-items: center; gap: 11px; padding: 0 15px;
}
.tpl-search svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--nav-sub); }
.tpl-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font-size: 14px; color: #fff;
}
.tpl-search input::placeholder { color: var(--nav-sub); }

.tpl-top .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.tpl-btn {
  height: 36px; padding: 0 20px; border-radius: 6px;
  font-size: 14px; font-weight: 600; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.tpl-btn:hover { filter: brightness(1.08); }
.tpl-btn.login { background: var(--blue); }
.tpl-btn.signup, .tpl-btn.deposit { background: var(--green); }
.tpl-icon-btn {
  width: 34px; height: 34px; border-radius: 8px; color: var(--nav-sub);
  display: flex; align-items: center; justify-content: center;
}
.tpl-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.tpl-icon-btn svg { width: 18px; height: 18px; }

.balance {
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.2; padding-right: 2px;
}
.balance .amt { font-size: 15px; font-weight: 700; color: #fff; }
.balance .cur { font-size: 11px; font-weight: 600; color: var(--nav-sub); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
  background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* the sportsbook itself now sits in the template's content well */
.app { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* theme switch — yellow-ringed moon + sun pill */
.theme-sw {
  width: 62px; height: 26px; border-radius: 13px;
  background: var(--surface);
  display: flex; align-items: center; position: relative;
  padding: 0 4px; justify-content: space-between;
}
.theme-sw svg {
  flex: 0 0 16px; width: 16px; height: 16px;
  color: var(--text-2); position: relative; z-index: 1;
}
.theme-sw::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--accent);
  transition: transform .18s ease;
}
:root[data-theme="light"] .theme-sw::after { transform: translateX(34px); }

/* language / dropdown trigger */
.drop { position: relative; }
.drop-btn {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--text);
  height: 34px; padding: 0 2px;
}
.drop-btn .chev { width: 14px; height: 14px; color: var(--text-2); transition: transform .15s; }
.drop.open .drop-btn .chev { transform: rotate(180deg); }

.drop-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 176px; padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  display: none;
}
.drop.open .drop-menu { display: block; }
.drop-menu.wide { min-width: 232px; }
.drop-menu .mtitle {
  font-size: 13px; font-weight: 700; color: var(--text);
  padding: 2px 6px 10px;
}
.drop-menu .mtitle.gap { padding-top: 14px; }
/* the settings panel sits darker than its rows, as in the reference */
.drop-menu.settings { background: var(--track); min-width: 244px; }
.drop-menu.settings .opt { background: var(--surface-2); }
.drop-menu.settings .opt:hover { background: var(--surface); }
.opt.as-input { padding: 0; background: var(--surface); }
.opt.as-input input {
  width: 100%; height: 100%; padding: 0 14px;
  background: none; border: 0; outline: none;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 38px; padding: 0 12px; margin-bottom: 6px;
  background: var(--surface); border-radius: var(--radius);
  font-size: 13px; font-weight: 600; color: var(--text);
  text-align: left;
}
.opt:last-child { margin-bottom: 0; }
.opt:hover { background: var(--hover); }
.opt .radio {
  width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--text-faint);
}
.opt.on .radio { background: var(--accent); border-color: var(--accent); }
.opt .flag { margin-left: auto; }
.opt.scrollable { max-height: none; }
.drop-menu .optlist { max-height: 420px; overflow-y: auto; }

/* buttons */
.btn {
  height: 42px; padding: 0 30px; border-radius: 21px;
  font-size: 15px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; white-space: nowrap;
  transition: filter .12s, background .12s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 38px; padding: 0 22px; font-size: 14px; border-radius: 19px; }

/* ---------------------------------------------------------- sub header -- */
.subbar {
  height: var(--subbar-h); flex: 0 0 var(--subbar-h);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 20px 0 30px; gap: 20px;
}
.page-title { font-size: 34px; font-weight: 800; letter-spacing: -.6px; }
.page-title .count { color: var(--text-2); margin-left: 14px; font-weight: 700; }

.crumbs { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.crumbs a { color: var(--text-2); text-decoration: underline; }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--text-faint); }
.crumbs .cur { color: var(--text); }

/* primary nav — Sports / Live / My Bets, on every view */
.mainnav { display: flex; align-items: center; gap: 26px; }
.mainnav a {
  font-size: 21px; font-weight: 600; color: var(--text-dim);
  letter-spacing: -.2px; white-space: nowrap; transition: color .12s;
}
.mainnav a:hover { color: var(--text-2); }
.mainnav a.on { color: var(--text); font-weight: 800; }

/* live sub-tabs — inline in the view now that the subbar carries the nav */
.ltabs { display: flex; align-items: center; gap: 8px; height: 100%; }
.ltabs.inline {
  height: 46px; gap: 4px; margin: -4px 0 16px;
  border-bottom: 1px solid var(--track);
}
.ltabs.inline a { height: 46px; padding: 0 18px; font-size: 13.5px; }
.ltabs a {
  position: relative; height: 100%; display: flex; align-items: center;
  padding: 0 22px; font-size: 15px; font-weight: 600; color: var(--text-dim);
}
.ltabs a:hover { color: var(--text-2); }
.ltabs a.on { color: var(--text); }
.ltabs a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--accent);
}

.subbar-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.fav-chip {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 20px; border-radius: 19px;
  border: 1px solid var(--border);
  font-size: 14px; font-weight: 600;
}
.fav-chip svg { width: 15px; height: 15px; color: var(--accent); }
.fav-chip .n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.clock { font-size: 14px; font-weight: 600; }

/* =============================================================== body === */
.shell { flex: 1; display: flex; min-height: 0; }

/* ------------------------------------------------------------ sidebar --- */
.side {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
/* MOBILE_LEAGUES_V1 — the drawer's own chrome. Present in the markup at every
   width so the drawer needs no second render path; shown only below 1000px,
   where the sidebar stops being a column and becomes a layer. The Top Leagues
   rail above the board is the same story: on desktop the sidebar already has
   those cards, so a second copy would just be noise. */
.side-head, .side-cta, .lg-open, .tl-rail { display: none; }

.side-search { padding: 20px; }
.search {
  height: 42px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2);
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  transition: border-color .15s, background .15s;
}
.search:hover { border-color: var(--hover); }
.search:focus-within { border-color: var(--accent); background: var(--surface); }
.search svg { width: 15px; height: 15px; color: var(--text-dim); flex: 0 0 15px; }
.search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font-size: 14px; color: var(--text);
}
.search input::placeholder { color: var(--text-dim); }

/* no scrollbar-gutter: it reserved a permanent empty 15px lane even when the
   pane didn't overflow, which read as a stray scroller against the board's
   left edge. Bars now appear only where content actually overflows. */
.side-body { flex: 1; min-height: 0; padding: 0 20px 24px; }
.side-h {
  font-size: 15px; font-weight: 700; color: var(--text);
  padding: 4px 0 12px;
}
.side-h.gap { padding-top: 26px; }

/* top-league card — 51px tall, 2px gutter */
/* WINZ_SIDEBAR_V1 — the reference's left rail is a stack of rounded chips with
   air between them, not a flush list: 10px corners and a 6px gutter rather than
   6px and 2px. Hover lightens the chip and slides it 2px toward the board, so
   the pointer target is unmistakable without anything moving on the page. */
.tl {
  height: 51px; margin-bottom: 6px; border-radius: 10px;
  background: var(--surface); display: flex; align-items: center;
  padding: 0 12px 0 14px; gap: 11px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.tl:hover {
  background: var(--hover); border-color: var(--border); transform: translateX(2px);
}
.tl:active { transform: translateX(2px) scale(.995); }
.tl .txt { flex: 1; min-width: 0; display: block; }
.tl .c { display: block; font-size: 13px; font-weight: 700; color: var(--text);
         line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .l { display: block; font-size: 12px; font-weight: 600; color: var(--text-2);
         line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .arw { width: 16px; height: 16px; color: var(--text-2); flex: 0 0 16px; }

/* sport row — 40px tall */
.sp {
  height: 42px; margin-bottom: 6px; border-radius: 10px;
  background: var(--surface); display: flex; align-items: center;
  padding: 0 12px 0 13px; gap: 11px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.sp:hover {
  background: var(--hover); border-color: var(--border); transform: translateX(2px);
}
.sp:active { transform: translateX(2px) scale(.995); }
/* An open sport is a state, not a hover — it keeps the accent without the slide. */
.sp.open { background: var(--hover); }
.sp.open .ico { color: var(--accent); }
/* Keyboard users get the same affordance as the mouse. */
.sp:focus-visible, .tl:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Respect a reduced-motion preference: keep the colour change, drop the slide. */
@media (prefers-reduced-motion: reduce) {
  .sp, .tl { transition: background .15s ease, border-color .15s ease; }
  .sp:hover, .tl:hover, .sp:active, .tl:active { transform: none; }
}
.sp .ico { width: 19px; height: 19px; flex: 0 0 19px; color: var(--text); }
.sp .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 700;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp .ct { font-size: 12px; font-weight: 600; color: var(--text-2); }
.sp .chev { width: 15px; height: 15px; color: var(--text-2); flex: 0 0 15px;
            transition: transform .15s; }
.sp.open .chev { transform: rotate(180deg); }

/* country / league tree */
.tree { display: none; }
.sp.open + .tree { display: block; }
.cty {
  height: 41px; margin-bottom: 2px; border-radius: var(--radius);
  background: var(--surface); display: flex; align-items: center;
  padding: 0 12px 0 13px; gap: 10px; cursor: pointer;
}
.cty:hover { background: var(--hover); }
.cty .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 700;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cty .chev { width: 15px; height: 15px; color: var(--text-2); transition: transform .15s; }
.cty.open .chev { transform: rotate(180deg); }
.lgs { display: none; padding-left: 0; }
.cty.open + .lgs { display: block; }
.lg {
  height: 40px; margin-bottom: 2px; display: flex; align-items: center;
  padding: 0 13px; gap: 10px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.lg:hover { color: #fff; }
.lg .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg .box {
  width: 15px; height: 15px; flex: 0 0 15px; border-radius: 2px;
  background: var(--surface-3); border: 1px solid var(--text-faint);
  display: flex; align-items: center; justify-content: center;
}
.lg .box svg { width: 11px; height: 11px; color: var(--accent-ink); opacity: 0; }
.lg.on .box { background: var(--accent); border-color: var(--accent); }
.lg.on .box svg { opacity: 1; }

/* MULTICOUNTRY_V1 — the country row carries the same checkbox as a league,
   taking every league under it in one tap. Its third state is "some of
   these", drawn as a dash: the tick would claim leagues that are not picked.
   The dash is absolute so it does not sit beside the (invisible) tick and
   push the 15px box out of shape. */
.cty .box {
  position: relative; width: 15px; height: 15px; flex: 0 0 15px;
  border-radius: 2px; background: var(--surface-3);
  border: 1px solid var(--text-faint);
  display: flex; align-items: center; justify-content: center;
}
.cty .box svg { width: 11px; height: 11px; color: var(--accent-ink); opacity: 0; }
.cty.on .box { background: var(--accent); border-color: var(--accent); }
.cty.on .box svg { opacity: 1; }
.cty.some .box { border-color: var(--accent); }
.cty.some .box::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 50%;
  margin-top: -1px; height: 2px; border-radius: 1px; background: var(--accent);
}

/* --------------------------------------------------------------- main --- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-scroll { flex: 1; min-height: 0; padding: 24px 30px 40px; }

/* banner carousel — 300px */
.banner {
  position: relative; height: 300px; border-radius: var(--radius);
  background: var(--surface-2); overflow: hidden; margin-bottom: 22px;
}
.banner-track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.banner-slide {
  flex: 0 0 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
/* stadium-ish backdrop, drawn in CSS so the banner costs no extra request */
.banner-slide::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 120% at 50% 118%, rgba(255,204,0,.20) 0%, transparent 62%),
    radial-gradient(52% 90% at 12% -12%, rgba(220,30,87,.24) 0%, transparent 60%),
    radial-gradient(52% 90% at 88% -12%, rgba(56,146,214,.22) 0%, transparent 60%),
    linear-gradient(160deg, #33454F 0%, #2B3A42 48%, #223037 100%);
}
.banner-slide::after {
  content: ""; position: absolute; left: 50%; bottom: -46%;
  width: 150%; height: 96%; transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.045) 0 58px, rgba(255,255,255,.015) 58px 116px);
  border-top: 2px solid rgba(255,255,255,.09);
}
/* A tenant-set slide background REPLACES the stock backdrop instead of sitting
   behind it. ::before is opaque and inset:0, so a custom gradient or photo was
   being applied to .banner-slide and then painted over — the setting looked
   dead. ::after (the stadium curve) goes too, so what the customer picked is
   what shows. */
.banner-slide.custom-bg::before,
.banner-slide.custom-bg::after { content: none; }

.banner-slide .art { position: relative; z-index: 1; }
.banner-slide h2 { text-shadow: 0 3px 22px rgba(0,0,0,.45); }
.banner-cta {
  margin-top: 8px; height: 40px; padding: 0 28px; border-radius: 20px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center;
}
.banner-cta:hover { filter: brightness(1.07); }
.banner-slide .art {
  width: 920px; max-width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
}
.banner-slide h2 { margin: 0; font-size: 56px; font-weight: 900; letter-spacing: -1.6px; }
.banner-slide h2 em { font-style: normal; color: var(--accent); }
.banner-slide p { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-2); }
.banner-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); background: rgba(38,50,56,.35);
}
.banner-nav:hover { color: var(--text); background: rgba(38,50,56,.6); }
.banner-nav.prev { left: 14px; }
.banner-nav.next { right: 14px; }
.banner-nav svg { width: 20px; height: 20px; }
.banner-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
               display: flex; gap: 6px; }
.banner-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(227,239,244,.35); }
.banner-dots i.on { background: var(--accent); }

/* sport strip */
.strip { display: flex; align-items: center; gap: 0; margin-bottom: 4px; }
.strip-scroll {
  flex: 1; min-width: 0; display: flex; align-items: stretch;
  overflow-x: auto; scrollbar-width: none;
  cursor: grab; -webkit-user-select: none; user-select: none;
}
.strip-scroll::-webkit-scrollbar { display: none; }
/* grab-drag feedback for the horizontal rails */
.strip-scroll.dragging, .lsports.dragging { cursor: grabbing; scroll-behavior: auto; }
.strip-scroll.dragging *, .lsports.dragging * { cursor: grabbing !important; }
.stab {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; gap: 11px;
  height: 62px; padding: 0 22px 0 4px; margin-right: 22px;
  color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.stab .ico { width: 24px; height: 24px; flex: 0 0 24px; }
.stab .nm { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
.stab .sub { font-size: 12px; font-weight: 600; color: var(--text-dim); line-height: 1.3; }
.stab.on .ico { color: var(--accent); }
.stab.on::after {
  content: ""; position: absolute; left: 0; right: 22px; bottom: 0;
  height: 3px; background: var(--accent);
}
.strip-rule { height: 1px; background: var(--track); margin: 0 0 18px; }

/* kick-off window filter, directly under the sport strip */
/* wraps rather than scrolls: at 1400px with the betslip open a nowrap row
   clips the last chip, and a hidden chip is worse than a second line */
.tfilters {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 16px;
}
.tfilters:empty { display: none; }
.tfilter {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: 15px;
  background: var(--surface); color: var(--text-2);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.tfilter:hover { background: var(--hover); color: var(--text); }
.tfilter .n {
  min-width: 17px; padding: 0 5px; border-radius: 9px; text-align: center;
  background: var(--surface-2); color: var(--text-dim);
  font-size: 11px; font-weight: 700; line-height: 17px;
}
/* a window with nothing in it stays clickable — it is honest information, and
   the punter still gets the empty board and the chip back out of it */
.tfilter.none { opacity: .52; }
.tfilter.on { background: var(--accent); color: var(--accent-ink); }
.tfilter.on .n { background: rgba(0, 0, 0, .22); color: inherit; }

.live-toggle {
  flex: 0 0 auto; margin-left: 18px;
  display: inline-flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 8px 0 26px; border-radius: 21px;
  background: var(--live); color: #fff; font-size: 15px; font-weight: 800;
}
.live-toggle .knob { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.live-toggle.off { background: var(--surface); color: var(--text-2); }
.live-toggle.off .knob { background: var(--text-dim); }

/* -------------------------------------------------------- odds tables --- */
.cols-head {
  display: flex; align-items: center; height: 34px;
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  color: var(--text); text-transform: uppercase;
}
.cols-head .spacer { flex: 1; min-width: 0; }
.cols-head .grp { text-align: center; }
.cols-head .grp.g3 { flex: 0 0 calc(var(--odd-w) * 3 + 2px); }
.cols-head .grp.g1 { flex: 0 0 calc(var(--odd-w) + 1px); }
.cols-head .grp.g2 { flex: 0 0 calc(var(--odd-w) * 2 + 1px); }

/* mirrors .row exactly so the labels sit dead-centre over their odds cells */
.lg-head { display: flex; align-items: stretch; height: 40px; gap: 1px; }
.lg-head .lead {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding-left: 9px;
}
.lg-head .nm { font-size: 13.5px; font-weight: 700; min-width: 0;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-head > .lb {
  flex: 0 0 var(--odd-w); display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
}

/* collapsed league bar */
.lg-bar {
  height: 34px; margin-bottom: 2px; border-radius: var(--radius);
  background: var(--surface); display: flex; align-items: center;
  gap: 10px; padding: 0 12px 0 12px; cursor: pointer;
}
.lg-bar:hover { background: var(--hover); }
.lg-bar .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 700;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-bar .ct { font-size: 12px; font-weight: 600; color: var(--text-2); }
.lg-bar .chev { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-2); }
.lg-head { cursor: pointer; }
.lg-head:hover .nm { color: #fff; }

/* match row */
.row {
  display: flex; align-items: stretch; gap: 1px;
  min-height: var(--row-h); margin-bottom: 2px;
}
.row-main {
  flex: 1; min-width: 0; background: var(--surface);
  border-radius: var(--radius) 0 0 var(--radius);
  display: flex; align-items: center; gap: 12px; padding: 0 12px 0 14px;
  cursor: pointer; transition: background .12s;
}
.row-main:hover { background: var(--hover); }
.teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team .badge {
  width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-2);
  font-size: 8px; font-weight: 800; line-height: 15px; text-align: center;
  overflow: hidden;
}
.team .nm { font-size: 13px; font-weight: 700; color: var(--text);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-star { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-faint); }
.row-star:hover, .row-star.on { color: var(--accent); }
.when { flex: 0 0 auto; text-align: right; font-size: 12.5px;
        font-weight: 600; color: var(--text-2); line-height: 1.4; }
/* live score + clock, laid out as in the reference: per-team scores stacked in
   gold, a 1px rule, then the minute over the half */
.lscore, .ltime {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center; gap: 3px; line-height: 1.2;
}
.lscore { min-width: 14px; font-size: 13px; font-weight: 700; color: #FFCC00;
          padding-right: 11px; border-right: 1px solid var(--surface-2); }
.ltime  { min-width: 40px; padding-left: 11px;
          font-size: 12.5px; font-weight: 600; color: var(--text); }

/* odds cell */
.odd {
  flex: 0 0 var(--odd-w); background: var(--odd-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--odd-txt);
  cursor: pointer; transition: background .1s, color .1s;
  position: relative;
}
/* price movement: the previous price struck through above the new one */
.odd .was, .hl-odd .was {
  font-size: 9.5px; font-style: normal; font-weight: 600; line-height: 1;
  color: var(--text-faint); text-decoration: line-through;
  margin-bottom: 1px;
}
.odd.up   { background: rgba(27,176,120,.16); color: var(--up); }
.odd.down { background: rgba(229,64,94,.16); color: var(--down); }
.odd.up:hover   { background: rgba(27,176,120,.24); }
.odd.down:hover { background: rgba(229,64,94,.24); }
.odd.on.up, .odd.on.down { background: var(--odd-on); color: var(--odd-on-ink); }
.odd.on .was { color: rgba(255,255,255,.6); }
.odd:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.odd:hover { background: var(--odd-hover); }
.odd.on { background: var(--odd-on); color: var(--odd-on-ink); }
/* the total line is informational, not a price — signal that with muted type,
   not a darker surface, which cut a visible band down the middle of every row */
.odd.dim { background: var(--odd-bg); color: var(--text-dim); cursor: default; }
.odd.dim:hover { background: var(--odd-bg); }
.odd.empty { color: var(--text-faint); cursor: default; }
.odd.empty:hover { background: var(--odd-bg); }
.odd.lock { color: var(--text-faint); cursor: not-allowed; }
.odd .arrow {
  position: absolute; right: 7px; width: 9px; height: 9px;
}
.odd.up .arrow { color: var(--up); }
.odd.down .arrow { color: var(--down); }

/* live badge */
.live-tag {
  display: inline-flex; align-items: center; height: 16px; padding: 0 5px;
  border-radius: 2px; background: var(--live); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .4px;
}

/* ------------------------------------------------------- match detail --- */
/* hero + stats chart are one card: the card rounds and spaces, the hero
   inside it does neither, so the chart sits flush under the pitch */
.md-card {
  border-radius: var(--radius); overflow: hidden;
  margin-bottom: 16px; background: var(--surface-2);
}
.md-hero {
  position: relative; min-height: 210px;
  background:
    radial-gradient(120% 150% at 50% 40%, rgba(76,120,80,.55) 0%, rgba(30,44,40,.9) 70%),
    var(--surface-2);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.md-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 44px, transparent 44px 88px);
}
/* the pitch backdrop is always dark, so the hero keeps light type in both
   themes rather than following the palette */
.md-hero, .md-hero .tn, .md-hero .ko { color: #F2F7F9; }
.md-hero .dt { color: rgba(242,247,249,.72); }
.md-hero .cap {
  position: absolute; top: 14px; left: 20px; z-index: 2;
  font-size: 12.5px; font-weight: 600; color: rgba(242,247,249,.72);
}
.md-hero .periods > span { color: #F2F7F9; }
.md-hero .periods .hd { color: rgba(242,247,249,.72); }
.md-hero .sb-tab { color: rgba(242,247,249,.72); }
.md-hero .sb-tab.on { color: #F2F7F9; }
.md-hero .acts { position: absolute; top: 12px; right: 16px; z-index: 2;
                 display: flex; gap: 10px; }
.md-hero .acts button { width: 20px; height: 20px; color: rgba(242,247,249,.72); }
.md-hero .acts button:hover, .md-hero .acts button.on { color: var(--accent); }
.md-hero .hero-in {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 0 20px;
}
.md-hero .vs {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: 26px; width: 100%; padding: 0 26px; min-width: 0;
}
.md-hero .hteam {
  flex: 1 1 0; min-width: 0; flex-wrap: nowrap;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
/* row-reverse flips the main axis: flex-start is the RIGHT edge here, which
   pushed the away block to the far right instead of hugging the centre */
.md-hero .hteam.r { justify-content: flex-end; flex-direction: row-reverse; }
.md-hero .tn {
  font-size: 25px; font-weight: 800; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-hero .crest {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 30px; text-align: center;
}
.md-hero .mid { flex: 0 0 auto; text-align: center; }
.md-hero .ko { display: block; font-size: 25px; font-weight: 800; white-space: nowrap; }
.md-hero .dt { display: block; font-size: 13px; font-weight: 600;
               color: var(--text-2); margin-top: 4px; white-space: nowrap; }

/* market filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  height: 26px; padding: 0 11px; border-radius: 3px;
  background: var(--surface); color: var(--text);
  font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center;
}
.chip:hover { background: var(--hover); }
.chip.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.chip svg { width: 12px; height: 12px; margin-right: 5px; }

.md-tools { display: flex; justify-content: flex-end; gap: 14px; margin-bottom: 14px; }
.md-tools button { width: 20px; height: 20px; color: var(--text-2); }
.md-tools button:hover, .md-tools button.on { color: var(--text); }

/* market grid */
/* full-width markets by default, matching the reference; the toolbar toggle
   switches to the two-column layout */
/* minmax(0,…), not a bare 1fr: `1fr` is minmax(auto,1fr) and an auto minimum
   is the item's min-content, so ONE long market label stretched the track —
   and with it the card and the whole scroller — past the width of the phone.
   The same reasoning applies to every odds track below. */
.mgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-items: start; }
/* Two-column view packs, it does not grid. As a 2-track grid every row was as
   tall as its tallest card, so a short market next to a long one left a hole
   the height of the difference — the empty blocks in the middle of the board.
   Multi-column flows each card under the previous one and only breaks to the
   next column when the first is full, so the gaps close. */
.mgrid.two {
  display: block; column-count: 2; column-gap: 18px;
}
.mgrid.two > .mkt {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
}
.mkt { margin-bottom: 2px; }
.mkt-h {
  height: 40px; background: var(--surface); border-radius: var(--radius) var(--radius) 0 0;
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
}
.mkt-h .nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-h button { width: 15px; height: 15px; color: var(--text-2); }
.mkt-h button:hover, .mkt-h button.on { color: var(--accent); }
.mkt-body { display: grid; gap: 1px; background: var(--bg); }
.mkt-body.c1 { grid-template-columns: minmax(0, 1fr); }
.mkt-body.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mkt-body.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick {
  height: 42px; background: var(--odd-bg);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 14px; cursor: pointer; transition: background .1s;
  /* A grid item's automatic minimum size is its min-content width, and a
     nowrap label has no smaller min-content than the whole team name — so a
     market like "Rocasa Gran Canaria Ace W" pushed its 1fr column, its card
     and the entire scroller wider than the screen. The ellipsis on .lbl could
     never fire because nothing ever made it narrow. Both minimums have to go. */
  min-width: 0;
}
.pick:hover { background: var(--odd-hover); }
.pick .lbl { font-size: 13px; font-weight: 600; color: var(--text-2); min-width: 0;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick .val { font-size: 14px; font-weight: 800; color: var(--odd-txt); }
.pick.on { background: var(--odd-on); }
.pick.on .lbl, .pick.on .val { color: var(--odd-on-ink); }
/* price movement, same language as the board's .odd cells — the event page was
   getting the up/down class from the push handler but had no rule to paint it,
   so a price moved silently here while the listing flashed. The struck-through
   previous price sits inline before the new one rather than stacked above it:
   a .pick is a 42px single row, not a two-line board cell. */
.pick.up   { background: rgba(27,176,120,.16); }
.pick.down { background: rgba(229,64,94,.16); }
.pick.up   .val { color: var(--up); }
.pick.down .val { color: var(--down); }
.pick.up:hover   { background: rgba(27,176,120,.24); }
.pick.down:hover { background: rgba(229,64,94,.24); }
.pick.on.up, .pick.on.down { background: var(--odd-on); }
.pick.on.up .val, .pick.on.down .val { color: var(--odd-on-ink); }
.pick .was {
  font-size: 10px; font-style: normal; font-weight: 600; line-height: 1;
  color: var(--text-faint); text-decoration: line-through; margin-left: auto;
  margin-right: 6px;
}
.pick.on .was { color: rgba(255,255,255,.6); }
.pick.lock { cursor: not-allowed; }
.pick.lock .lbl, .pick.lock .val { color: var(--text-faint); }
.pick.lock .val::before {
  content: ""; display: inline-block; width: 10px; height: 12px; margin-right: 6px;
  vertical-align: -2px;
  -webkit-mask: var(--lock-svg) center/contain no-repeat;
  mask: var(--lock-svg) center/contain no-repeat;
  background: var(--text-faint);
}

/* ---------------------------------------------------------- live view --- */
.lsports { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--track);
           margin: 0 0 20px; overflow-x: auto; scrollbar-width: none;
           cursor: grab; -webkit-user-select: none; user-select: none; }
.lsports::-webkit-scrollbar { display: none; }
.lsport {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 20px 0 2px; margin-right: 22px; cursor: pointer;
}
.lsport .ico { width: 21px; height: 21px; color: var(--text-dim); }
.lsport .nm { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.25; }
.lsport .ct { font-size: 12px; font-weight: 600; color: var(--text-dim); line-height: 1.25; }
.lsport.on .ico { color: var(--accent); }
.lsport.on::after {
  content: ""; position: absolute; left: 0; right: 20px; bottom: -1px;
  height: 3px; background: var(--accent);
}

.hfilters { display: flex; gap: 4px; border-bottom: 1px solid var(--track); margin-bottom: 18px; }
.hfilter {
  position: relative; height: 46px; padding: 0 18px;
  display: flex; align-items: center;
  font-size: 13.5px; font-weight: 600; color: var(--text-dim);
}
.hfilter:hover { color: var(--text-2); }
.hfilter.on { color: var(--text); }
.hfilter.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--accent);
}

/* live left rail (event view) */
.rail { flex: 1; min-height: 0; padding: 20px; }
.rail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.rail-head .t { font-size: 15px; font-weight: 700; }
.rail-head .n { font-size: 15px; font-weight: 700; color: var(--text-2); }
.rail-head .sw { margin-left: auto; display: flex; align-items: center; gap: 9px;
                 font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--text-2); }
.toggle {
  width: 34px; height: 17px; border-radius: 9px; background: var(--surface-3);
  position: relative; flex: 0 0 34px;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--text-dim); transition: transform .16s, background .16s;
}
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(17px); background: #fff; }

.rail-grp { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 14px 0 8px; }
.rail-card { background: var(--surface); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
.rail-card .top { padding: 9px 12px 8px; cursor: pointer; }
.rail-card .ln { display: flex; align-items: center; gap: 8px; }
.rail-card .ln .nm { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-card .ln .sc { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.rail-card .meta { display: flex; align-items: center; gap: 7px; margin-top: 5px;
                   font-size: 11px; font-weight: 600; color: var(--text-2); }
.rail-card .meta .sp { margin-left: auto; display: flex; gap: 7px; color: var(--text-faint); }
.rail-card .meta .sp svg { width: 12px; height: 12px; }
.rail-card .meta .sp .star:hover, .rail-card .meta .sp .star.on { color: var(--accent); }
.rail-odds { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--bg); }
.rail-odd {
  height: 28px; background: var(--odd-bg); display: flex; align-items: center;
  justify-content: center; gap: 7px; font-size: 12px; font-weight: 800; cursor: pointer;
  color: var(--odd-txt);
}
.rail-odd:hover { background: var(--odd-hover); }
.rail-odd .k { color: var(--text-dim); font-weight: 600; }
.rail-odd.on { background: var(--odd-on); color: var(--odd-on-ink); }
.rail-odd.on .k { color: var(--odd-on-ink); }

/* live scoreboard */

/* ---------------------------------------------------- stats chart ------
   The reference's statistics block, attached to the pitch header: one card,
   the chart flush underneath. Three per row; the label sits between the two
   figures over a split bar — home in the muted tone on the left, away in red
   on the right, each segment weighted by its own figure. */
.sb-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  /* measured off the reference: 48px between rows, 22px between columns,
     bars 4px tall sitting 8px under their figures */
  gap: 18px 22px; padding: 16px 20px 18px; background: var(--surface-2);
  --stat-h: #455B66;   /* home side of every bar, sampled from the reference */
  --stat-a: #DC1E57;   /* away side */
}
/* `None` empties the chart — with no rows it must take no room at all */
.sb-stats:empty { display: none; }
.sb-stat .top { display: flex; align-items: center; font-size: 13px; font-weight: 700; }
.sb-stat .top .l { width: 26px; color: var(--text); }
.sb-stat .top .c { flex: 1; text-align: center; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.sb-stat .top .r { width: 26px; text-align: right; color: var(--text); }
.sb-stat .bar { display: flex; gap: 2px; margin-top: 8px; height: 4px; }
.sb-stat .bar i { border-radius: 2px; min-width: 0; }
.sb-stat .bar i.h { background: var(--stat-h); }
.sb-stat .bar i.a { background: var(--stat-a); }

.sb-tabs { display: flex; justify-content: center; gap: 2px; margin-top: 12px; }
.sb-tab {
  height: 30px; padding: 0 22px; background: rgba(38,50,56,.6);
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  display: inline-flex; align-items: center; cursor: pointer;
}
.sb-tab.on { background: rgba(38,50,56,.92); color: var(--text); }

/* The provider's tracker as a panel of its own under the tabs. On desktop the
   same widget sits in the betslip column; on a phone that column is a sheet
   that is closed most of the time, so the tab is the only place it can live.
   The host is .sb-stats — a 3-track grid for the bars, which would size the
   frame as a grid cell, so it drops back to a block while the tracker is in it. */
.sb-stats:has(.mi-track) { display: block; padding: 0; }
.mi-track { position: relative; width: 100%; overflow: hidden; background: var(--bg); }
.mi-msg {
  padding: 22px 18px; text-align: center; font-size: 12.5px; color: var(--text-2);
}
.mi-frame {
  display: block; width: 320px; height: 450px; border: 0; margin: 0 auto;
  /* scaled about the top centre, so a narrow phone shrinks it without also
     shunting it off to the left the way a top-left origin would */
  transform-origin: top center; background: transparent;
}

.periods {
  display: grid; grid-template-columns: 64px 64px 64px; gap: 2px;
  margin-top: 12px; justify-content: center;
}
.periods > span {
  height: 26px; background: rgba(38,50,56,.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
}
.periods .hd { background: none; color: var(--text-2); font-weight: 600; }

/* multi view */
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.mv-card { background: var(--bg); position: relative; min-width: 0; }
.mv-card .md-hero .tn { font-size: 19px; }
.mv-card .md-hero .ko { font-size: 20px; }
.mv-card .sb-stats { grid-template-columns: repeat(2, 1fr); gap: 10px 18px; padding: 14px 16px; }
.mv-card .mgrid { grid-template-columns: minmax(0, 1fr); }
.mv-close {
  position: absolute; top: -6px; right: -6px; z-index: 3;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.mv-close:hover { background: var(--live); color: #fff; }
/* the free column: says what to do rather than leaving a gap */
.mv-slot {
  min-height: 220px; border: 1px dashed var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 20px; color: var(--text-dim);
}
.mv-slot span { display: inline-flex; width: 26px; height: 26px; opacity: .7; }
.mv-slot span svg { width: 100%; height: 100%; }
.mv-slot b { font-size: 13px; font-weight: 700; color: var(--text-2); }
.mv-slot i { font-style: normal; font-size: 12px; }

/* results */
.res-filters { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.sel {
  height: 40px; min-width: 190px; padding: 0 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.sel .chev { width: 15px; height: 15px; margin-left: auto; color: var(--text-2); }
.res-table { border-radius: var(--radius); overflow: hidden; }
.res-head, .res-row {
  display: grid; grid-template-columns: 96px 132px 118px minmax(0,1fr) minmax(0,1.45fr) 96px 30px;
  align-items: center; gap: 12px; padding: 0 16px; height: 42px;
}
.res-head { background: var(--surface); font-size: 12.5px; font-weight: 700; }
.res-row { background: var(--surface-2); border-top: 1px solid var(--bg);
           font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.res-head > span, .res-row > span {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.res-row:hover { background: var(--hover); }
.res-row .ev { color: var(--text); font-weight: 600; }
.res-row .sc { color: var(--text); font-weight: 700; }
.res-row .chev { width: 15px; height: 15px; margin-left: auto; transition: transform .15s; }
.res-row.open .chev { transform: rotate(180deg); }
.res-detail { display: none; padding: 14px 16px; background: var(--surface-2);
              border-top: 1px solid var(--bg); }
.res-detail.on { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.res-stat {
  height: 38px; background: var(--surface); border-radius: var(--radius);
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.res-stat b { color: var(--accent); font-weight: 700; }

/* ------------------------------------------------------------ betslip --- */
.slip {
  width: var(--slip-w); flex: 0 0 var(--slip-w);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
.slip-head {
  height: 46px; flex: 0 0 46px; border-bottom: 1px solid var(--border);
  display: flex; align-items: stretch; padding: 0 20px; gap: 22px;
}
.sh-tab {
  position: relative; display: flex; align-items: center;
  font-size: 15px; font-weight: 700; color: var(--text-dim);
}
.sh-tab .n { margin-left: 6px; }
.sh-tab.on { color: var(--text); }
.sh-tab.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}

/* mode row: Single/Multiple selector + clear-all */
.slip-mode { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.mode-sel { position: relative; cursor: pointer; }
.mode-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 148px; padding: 6px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
}
.mode-sel.open .mode-menu { display: block; }
.mode-menu button {
  display: block; width: 100%; height: 34px; padding: 0 12px; text-align: left;
  border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--text);
}
.mode-menu button:hover { background: var(--surface); }
.mode-menu button.on { background: var(--surface); color: var(--accent); }
.slip-clear {
  margin-left: auto; width: 28px; height: 28px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.slip-clear svg { width: 16px; height: 16px; }
.slip-clear:hover { background: var(--surface); color: var(--live); }
.pickcard .ph .tag {
  margin-left: auto; height: 19px; padding: 0 9px; border-radius: 10px;
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
  background: var(--surface-3); color: var(--text-2);
}
.slip-body { flex: 1; min-height: 0; padding: 16px 20px 24px; }

.slip-mode { margin-bottom: 18px; }
.mode-sel {
  height: 32px; width: 96px; padding: 0 10px; border-radius: 3px;
  border: 1px solid var(--border); background: none;
  display: flex; align-items: center; font-size: 13px; font-weight: 600;
}
.mode-sel .chev { width: 14px; height: 14px; margin-left: auto; color: var(--text-2); }

/* SYSTEM_V1 — the k/n picker, between the mode row and the selections. The
   sizes read as chips because they are a single choice out of a short row;
   one over the combination cap stays visible but dead, so the punter can see
   that 6/12 exists and why it is not on offer. */
.sysbar { margin: -8px 0 14px; }
.sys-ks { display: flex; flex-wrap: wrap; gap: 6px; }
.sys-k {
  height: 28px; min-width: 44px; padding: 0 9px; border-radius: 3px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer;
}
.sys-k:hover { background: var(--surface); color: var(--text); }
.sys-k.on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.sys-k.off { opacity: .35; cursor: not-allowed; }
.sys-k.off:hover { background: var(--surface-2); color: var(--text-2); }
.sys-note {
  margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-faint);
  line-height: 1.4;
}
.sys-note b { color: var(--text-2); }
.sys-warn {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.sys-warn svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--text-faint); }

.slip-empty {
  height: 38px; background: var(--surface-2); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 10px;
}
.slip-save {
  height: 30px; background: var(--surface); border-radius: 2px;
  display: flex; align-items: center; padding: 0 12px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.slip-save:hover { background: var(--hover); }

/* selection card */
.pickcard { background: var(--surface-2); border-radius: var(--radius); margin-bottom: 10px; }
.pickcard .ph {
  height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 11px;
  border-bottom: 1px solid rgba(38,50,56,.55);
}
.pickcard .ph .ico { width: 15px; height: 15px; color: var(--text-2); flex: 0 0 15px; }
.pickcard .ph .lg { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pickcard .ph button { width: 15px; height: 15px; color: var(--text-dim); flex: 0 0 15px; }
.pickcard .ph button:hover { color: var(--text); }
.pickcard .ph .del:hover { color: var(--live); }
.pickcard .pb { padding: 10px 11px 11px; }
.pickcard .mrow { display: flex; align-items: flex-start; gap: 10px; }
.pickcard .ev { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pickcard .dt { flex: 0 0 auto; text-align: right; font-size: 11.5px; font-weight: 600;
                color: var(--text-2); line-height: 1.35; }
.pickcard .mk { font-size: 12px; font-weight: 600; color: var(--text-2); margin-top: 9px; }
.pickcard .sel-row { display: flex; align-items: center; gap: 9px; margin-top: 3px; }
.pickcard .sel-row .p { flex: 1; min-width: 0; font-size: 13px; font-weight: 700;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oddchip {
  height: 18px; padding: 0 6px; border-radius: 2px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center;
}
.oddchip.up { background: var(--up); color: #fff; }
.oddchip.down { background: var(--down); color: #fff; }

/* ACCA_BONUS_V1 — the accumulator win-bonus ladder, between the selections
   and the stake box (where the reference book puts it). Muted until a rung is
   reached, then the accent: the punter should be able to tell at a glance
   whether the bonus is earned or still an invitation. */
.acca {
  margin-top: 14px; padding: 10px 12px 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2);
}
.acca.earned { border-color: var(--accent); }
.acca-hd { font-size: 12px; font-weight: 600; color: var(--text-2); }
.acca.earned .acca-hd { color: var(--text); }
.acca-bar {
  position: relative; height: 5px; margin: 9px 0 5px;
  border-radius: 3px; background: var(--track); overflow: hidden;
}
.acca-bar > i {
  display: block; height: 100%; border-radius: 3px;
  background: var(--accent); transition: width .25s ease;
}
.acca-ticks {
  display: flex; justify-content: space-between;
  font-size: 10.5px; font-weight: 700; color: var(--text-faint);
}
.acca-ticks .on { color: var(--accent); }
.acca-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
}
.acca-amt { color: var(--text-faint); }
.acca-amt b { color: var(--text-2); }
.acca.earned .acca-amt { color: var(--text); }
.acca.earned .acca-amt b { color: var(--accent); }

.stake-wrap { margin-top: 18px; }
.stake {
  height: 40px; background: var(--surface); border-radius: 3px;
  display: flex; align-items: center; padding: 0 14px;
}
.stake input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.quick button {
  height: 30px; background: var(--surface); border-radius: 3px;
  font-size: 13px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.quick button:hover { background: var(--hover); }
.quick button svg { width: 15px; height: 15px; color: var(--text-2); }

.totals { margin-top: 20px; }
.totals .t {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; font-weight: 700; padding: 4px 0;
}
.totals .t .v { color: var(--accent); }

.notice {
  margin-top: 16px; background: var(--surface-2);
  border-left: 4px solid var(--accent); border-radius: 2px;
  padding: 13px 14px 13px 12px; display: flex; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.5;
}
.notice svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--accent); margin-top: 2px; }
.notice a { color: var(--accent); text-decoration: underline; }
.notice.good { border-left-color: var(--up); }
.notice.good svg { color: var(--up); }
.notice.bad { border-left-color: var(--live); }
.notice.bad svg { color: var(--live); }

.totals .t.bal { color: var(--text-2); font-weight: 600; }
.totals .t.bal span:last-child { color: var(--text); font-weight: 700; }

.place[disabled] { cursor: not-allowed; }
.place.ready[disabled] { opacity: .7; }

.place {
  width: 100%; height: 44px; margin-top: 16px; border-radius: var(--radius);
  background: var(--disabled); color: rgba(227,239,244,.55);
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.place.ready { background: var(--accent); color: var(--accent-ink); }
.place.ready:hover { filter: brightness(1.07); }

/* ------------------------------------------------------ misc / states --- */
.empty-state {
  padding: 70px 20px; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--text-dim);
}
.skeleton { animation: pulse 1.15s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
.sk-row { height: var(--row-h); margin-bottom: 2px; border-radius: var(--radius);
          background: var(--surface); }
.sk-card { height: 51px; margin-bottom: 2px; border-radius: var(--radius);
           background: var(--surface); }

.flag {
  width: 20px; height: 14px; flex: 0 0 20px; border-radius: 2px;
  object-fit: cover; background: var(--surface-3);
}
.flag-globe { width: 17px; height: 17px; flex: 0 0 17px; color: var(--text-2); }

/* floating "More info" tab, bottom-centre */
.moreinfo {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  z-index: 40; height: 30px; padding: 0 18px;
  background: var(--surface); border-radius: var(--radius) var(--radius) 0 0;
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.moreinfo svg { width: 13px; height: 13px; color: var(--text-2); }

@media (max-width: 1600px) {
  :root { --sidebar-w: 260px; }   /* --slip-w stays 320: the match tracker is drawn at that width */
}
/* On the 1440px stage the board gets ~1160px — tighten the rails and the
   odds cells so both sidebars survive and team names keep room to breathe. */
@media (max-width: 1300px) {
  :root { --sidebar-w: 224px; --odd-w: 58px; }   /* --slip-w stays 320 */
  .main-scroll { padding: 20px 16px 32px; }
  .side-search { padding: 16px; }
  .side-body { padding: 0 16px 20px; }
  .slip-head, .slip-body { padding-left: 16px; padding-right: 16px; }
  .team .nm { font-size: 12.5px; }
  /* the cell narrows to 58px here, so the price gives up half a point — but it
     stays above the team name, which is the hierarchy the wide board has */
  .odd { font-size: 13px; }
}
@media (max-width: 1120px) {
  :root { --sidebar-w: 204px; --slip-w: 248px; --odd-w: 52px; }
}
@media (max-width: 1400px) {
  .tpl-nav { width: 72px; flex-basis: 72px; }
  .tpl-nav .wm, .tpl-nav .collapse,
  .tpl-nav .tpl-sec .lbl, .tpl-nav .tpl-sec .chev { display: none; }
  .tpl-nav .tpl-sec { padding: 0 26px; }
}
@media (max-width: 1000px) {
  /* MOBILE_LEAGUES_V1 — the sidebar column does not fit here, but Top Leagues
     and the country → league tree are the only way to browse the book, so it
     becomes an off-canvas drawer instead of disappearing. Transform, not
     display:none: a display switch cannot animate, and the tree keeps its
     scroll position and its open countries between openings. */
  /* Positioned inside .app, NOT the viewport: `position: fixed` put it over
     the book's own top bar (and over the site header when the book is framed),
     which is the one thing a drawer opened from the board must not cover. .app
     starts below the header and is viewport-height — the board scrolls inside
     it — so an absolute drawer here spans exactly the board and nothing above
     it. .app is already `position: relative` on this breakpoint. */
  .side {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 80;
    width: min(86vw, 360px); flex-basis: auto;
    background: var(--bg); border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  .app.side-open .side { transform: none; }
  /* the backdrop belongs to the app, not the drawer: it has to sit BEHIND the
     panel and above the board, and a child of .side could never do both */
  .app.side-open::after {
    content: ""; position: absolute; inset: 0; z-index: 79;
    background: rgba(0,0,0,.5);
  }
  .side-head {
    display: flex; align-items: center; gap: 10px;
    height: 52px; flex: 0 0 52px; padding: 0 16px;
    border-bottom: 1px solid var(--border);
  }
  .side-head .t { flex: 1; font-size: 16px; font-weight: 800; color: var(--text); }
  .side-x {
    width: 30px; height: 30px; border-radius: 6px; flex: 0 0 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--text-2);
  }
  .side-x svg { width: 15px; height: 15px; }
  .side-x:hover { background: var(--hover); color: var(--text); }
  /* only when something is picked, so an empty bar never eats the tree */
  .side-cta.has { display: block; padding: 10px 14px; border-top: 1px solid var(--border); }
  .side-load {
    width: 100%; height: 42px; border-radius: 6px;
    background: var(--accent); color: var(--accent-ink);
    font-size: 13.5px; font-weight: 800;
  }

  /* the way in, in the board's own header row */
  .lg-open {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    height: 30px; padding: 0 11px; margin-left: 8px;
    border: 1px solid var(--border); border-radius: 15px;
    background: var(--surface-2); color: var(--text);
    font-size: 12.5px; font-weight: 700;
  }
  .lg-open svg { width: 14px; height: 14px; color: var(--text-2); }
  .lg-open:hover { background: var(--hover); }

  /* Top Leagues above the board — two cards to a screen, the rest swipe in,
     which is how the reference book carries them on a phone. The cards are the
     sidebar's `.tl`, so a tap already routes to the league. */
  .tl-rail { display: block; margin: 0 0 14px; }
  .tl-rail .tl-h {
    font-size: 15px; font-weight: 700; color: var(--text); padding: 0 0 10px;
  }
  .tl-rail .tl-cards {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    margin: 0 -10px; padding: 0 10px 2px;
  }
  .tl-rail .tl-cards::-webkit-scrollbar { display: none; }
  .tl-rail .tl {
    flex: 0 0 min(74%, 250px); margin-bottom: 0; scroll-snap-align: start;
  }
  /* the hover nudge reads as a jitter on a rail that is being swiped */
  .tl-rail .tl:hover, .tl-rail .tl:active { transform: none; }

  .tpl-search { width: 300px; }
}
@media (max-width: 900px) {
  .slip { display: none; }
  /* minmax(0,…) here too — a bare 1fr let one long market label stretch the
     track wider than the phone, which is exactly what this breakpoint is
     meant to prevent. It sits after the base rule, so it wins. */
  .mgrid { grid-template-columns: minmax(0, 1fr); }
  .mv { grid-template-columns: minmax(0, 1fr); }
  .page-title { font-size: 26px; }
  .main-scroll { padding: 16px; }
}


/* ------------------------------------------------------------- my bets -- */
.bets { display: flex; flex-direction: column; gap: 10px; }
.bet { background: var(--surface-2); border-radius: var(--radius); overflow: hidden; }
.bet-h {
  display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px;
  background: var(--surface); font-size: 12.5px; font-weight: 700;
  width: 100%; border: 0; text-align: left; font-family: inherit; cursor: pointer;
  color: inherit;
}
.bet-h:hover { background: var(--surface-3); }
.bet-h .sum { margin-left: auto; color: var(--text-dim); font-weight: 600; }
.bet-h .chev {
  flex: 0 0 16px; display: inline-flex; color: var(--text-dim);
  transition: transform .16s ease;
}
.bet-h .chev svg { width: 16px; height: 16px; }
.bet.open .bet-h .chev { transform: rotate(180deg); }
.bet-body { display: none; }
.bet.open .bet-body { display: block; }
.bet-h .code { color: var(--text); }
.bet-h .when { color: var(--text-2); font-weight: 600; }
.bet-h .tag {
  height: 20px; padding: 0 10px; border-radius: 10px;
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--surface-3); color: var(--text-2);
}
.bet-h .tag.s1  { background: rgba(27,176,120,.18); color: var(--up); }
.bet-h .tag.s2  { background: rgba(229,64,94,.18); color: var(--live); }
.bet-h .tag.s0  { background: rgba(0,116,255,.16); color: var(--accent); }
.bet-picks { padding: 4px 0; }
.bet-pick {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  font-size: 13px;
}
.bet-pick .ev { flex: 1; min-width: 0; font-weight: 700; color: var(--text);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bet-pick .mk { flex: 0 1 auto; min-width: 0; color: var(--text-2); font-weight: 600;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bet-pick .od { flex: 0 0 auto; font-weight: 700; color: var(--accent); }
.bet-f {
  display: flex; gap: 26px; padding: 10px 14px;
  border-top: 1px solid var(--bg); font-size: 12.5px; color: var(--text-2);
}
.bet-f b { color: var(--text); font-weight: 700; margin-left: 4px; }
.bet-f b.bonus { color: var(--accent); }   /* ACCA_BONUS_V1 */
.bet-f b.paid { color: var(--up); }         /* CASHOUT_V1 — what was paid */
.bet-h .tag.s6  { background: rgba(240,167,65,.18); color: var(--cash); }

/* CASHOUT_V1 — selling an open ticket back. Deliberately not the accent: it
   is not the "place the bet" action, and on the slip it sits a few pixels from
   the button that is. Amber, full width, and it restates the amount when armed
   so the confirming tap is on the figure being accepted. */
.co-slot:empty { display: none; }
.cashout {
  display: block; height: 34px; margin: 10px 14px 12px;
  width: calc(100% - 28px);
  border-radius: 3px; border: 1px solid var(--cash);
  background: none; color: var(--cash);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.cashout:hover { background: rgba(240,167,65,.12); }
.cashout.armed { background: var(--cash); color: var(--cash-ink); }
.cashout[disabled] { opacity: .6; cursor: default; }
.pickcard .cashout { margin: 10px 0 0; width: 100%; }

/* ------------------------------------------------- live highlights ------ */
.hl { margin-bottom: 18px; }
.hl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hl-head .t { font-size: 21px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
.hl-pill {
  height: 22px; padding: 0 11px; border-radius: 11px;
  display: inline-flex; align-items: center;
  background: rgba(255,71,120,.16); color: var(--hl-pink);
  font-size: 12px; font-weight: 700;
}
.hl-rail {
  display: flex; gap: 12px; overflow-x: auto;
  scrollbar-width: none; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.hl-rail::-webkit-scrollbar { display: none; }
.hl-rail.dragging { cursor: grabbing; scroll-behavior: auto; }
.hl-rail.dragging * { cursor: grabbing !important; }

/* three across, the rest scroll */
.hl-card {
  flex: 0 0 calc((100% - 2 * 12px) / 3); min-width: 0;
  background: var(--surface-2); border-radius: var(--radius); overflow: hidden;
}
.hl-top {
  height: 38px; display: flex; align-items: center; padding: 0 14px;
  background: var(--surface); font-size: 12.5px; font-weight: 600;
  color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hl-body { padding: 10px 14px 12px; }
.hl-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hl-min { font-size: 12.5px; font-weight: 700; color: var(--hl-pink); }
.hl-more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; font-weight: 600; color: var(--text-dim); cursor: pointer;
}
.hl-more svg { width: 13px; height: 13px; }
.hl-more:hover { color: var(--text); }

.hl-main { display: flex; align-items: center; gap: 12px; }
.hl-teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hl-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hl-team .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-team .sc { font-size: 13px; font-weight: 700; color: var(--hl-pink); }

.hl-odds { flex: 0 0 auto; display: flex; gap: 6px; }
.hl-odd {
  position: relative; width: 54px; height: 50px; border-radius: 4px;
  background: var(--odd-bg); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; transition: background .1s;
}
.hl-odd:hover { background: var(--odd-hover); }
.hl-odd b { font-size: 13.5px; font-weight: 800; color: var(--odd-txt); }
.hl-odd span { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.hl-odd.empty { cursor: default; }
.hl-odd.empty:hover { background: var(--odd-bg); }
.hl-odd.on { background: var(--odd-on); }
.hl-odd.on b, .hl-odd.on span { color: var(--odd-on-ink); }
/* movement between polls: the previous price struck through above the new one */
.hl-odd .was {
  font-size: 10px; font-style: normal; font-weight: 600;
  color: var(--text-faint); text-decoration: line-through; line-height: 1;
}
.hl-odd.up   { background: rgba(27,176,120,.16); }
.hl-odd.up b { color: var(--up); }
.hl-odd.down { background: rgba(229,64,94,.16); }
.hl-odd.down b { color: var(--down); }

@media (max-width: 1300px) {
  .hl-odd { width: 46px; height: 46px; }
  .hl-head .t { font-size: 18px; }
}

/* ============================================== home widgets: shared ====
   Top Matches, the promo strip and Build Your Win are three cards across
   with the rest behind a rail — one shared heading, one shared rail. */
.wd-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.wd-head .ico { display: inline-flex; width: 17px; height: 17px; color: var(--text-2); }
.wd-head .ico svg { width: 100%; height: 100%; }
.wd-head .t {
  font-size: 15px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text);
}
/* `wd-rail`, not `rail` — the live Event view already owns .rail */
.wd-rail {
  display: flex; gap: 12px; overflow-x: auto;
  scrollbar-width: none; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.wd-rail::-webkit-scrollbar { display: none; }
.wd-rail.dragging { cursor: grabbing; scroll-behavior: auto; }
.wd-rail.dragging * { cursor: grabbing !important; }

/* arrows: the rails hide their scrollbars, so without these a mouse-only
   desktop has no way to reach the cards past the fold */
.rail-nav { margin-left: auto; display: flex; gap: 6px; }
.rn {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-2); cursor: pointer;
  transition: background .12s, color .12s;
}
.rn svg { width: 14px; height: 14px; }
.rn:hover { background: var(--hover); color: var(--text); }

/* -------------------------------------------------- top matchups ------- */
.tm { margin-bottom: 18px; }
.tm-card {
  flex: 0 0 calc((100% - 2 * 12px) / 3); min-width: 0;
  background: var(--surface-2); border-radius: var(--radius); overflow: hidden;
}
.tm-top {
  height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.tm-top .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-more {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; font-weight: 600; color: var(--text-dim); cursor: pointer;
}
.tm-more svg { width: 13px; height: 13px; }
.tm-more:hover { color: var(--text); }

.tm-mid { display: flex; align-items: flex-start; gap: 8px; padding: 12px 12px 10px; }
.tm-side {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 6px; text-align: center;
}
.tm-side .badge { width: 34px; height: 34px; font-size: 12px; }
.tm-side .nm {
  font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.25;
  /* two lines, then ellipsis — team names here are not one word */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.tm-cen {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  gap: 1px; padding: 0 4px;
}
.tm-cen .p { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: var(--text-dim); }
.tm-cen .c { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.15; }
.tm-cen .s { font-size: 11px; font-weight: 700; color: var(--text-2); }
.tm-cen.live .p { color: var(--hl-pink); }
.tm-cen .run { width: 11px; height: 11px; color: var(--hl-pink); margin-top: 1px; }

.tm-odds { display: flex; gap: 6px; padding: 0 12px 12px; }
.tm-odd {
  position: relative; flex: 1 1 0; min-width: 0; height: 46px; border-radius: 4px;
  background: var(--odd-bg); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; transition: background .1s;
}
.tm-odd:hover { background: var(--odd-hover); }
.tm-odd b { font-size: 14px; font-weight: 800; color: var(--odd-txt); }
.tm-odd span { font-size: 10.5px; font-weight: 600; letter-spacing: .3px; color: var(--text-dim); }
.tm-odd.empty, .tm-odd.dim { cursor: default; }
.tm-odd.empty:hover, .tm-odd.dim:hover { background: var(--odd-bg); }
.tm-odd.dim { background: var(--surface-3); }
.tm-odd.dim b { color: var(--text-2); }
.tm-odd.on { background: var(--odd-on); }
.tm-odd.on b, .tm-odd.on span { color: var(--odd-on-ink); }
.tm-odd .was {
  font-size: 10px; font-style: normal; font-weight: 600;
  color: var(--text-faint); text-decoration: line-through; line-height: 1;
}
.tm-odd.up   { background: rgba(27,176,120,.16); }
.tm-odd.up b { color: var(--up); }
.tm-odd.down { background: rgba(229,64,94,.16); }
.tm-odd.down b { color: var(--down); }

/* --------------------------------------------------- promo strip ------- */
/* Deliberately headless: it is artwork between two data widgets, so the
   only text on screen is what the tile itself carries. */
.pr { position: relative; margin-bottom: 18px; }
/* .pr-nav inherits the whole .banner-nav rule so the two can never drift;
   only the inset differs — these sit over the tiles, not inside one frame */
.pr-nav { z-index: 2; cursor: pointer; }
.pr-nav.prev { left: 8px; }
.pr-nav.next { right: 8px; }
/* A built-in tile is two layers: the .svg is artwork with NO backdrop of its
   own, sitting on the right, over a gradient painted from --pc1/--pc2. Both
   are set here rather than in the markup, so the light palette can restate
   them — the theme toggle only flips data-theme, it never repaints. */
.pr-card {
  flex: 0 0 calc((100% - 2 * 12px) / 3); min-width: 0;
  height: 150px; border-radius: var(--radius); overflow: hidden;
  position: relative; display: flex; flex-direction: column;
  justify-content: space-between; padding: 16px;
  --pc1: #2C3D4B; --pc2: #1B2934;
  background-color: var(--pc2);
  background-image: linear-gradient(120deg, var(--pc1), var(--pc2));
  background-repeat: no-repeat;
  text-decoration: none; color: #fff;
}
.pr-card[data-art] {
  background-image: var(--pc-art), linear-gradient(120deg, var(--pc1), var(--pc2));
  background-position: right center, center;
  background-size: auto 100%, cover;
}
/* a tenant's own photo fills the tile, as before */
.pr-card.own { background-size: cover; background-position: center; }

.pr-card[data-art="football"] { --pc1: #3A424B; --pc2: #15181C;
  --pc-art: url("../img/promo-football.svg?v=2"); }
.pr-card[data-art="boost"]    { --pc1: #14494B; --pc2: #0B1B22;
  --pc-art: url("../img/promo-boost.svg?v=2"); }
.pr-card[data-art="esports"]  { --pc1: #5A2AA6; --pc2: #2A0F52;
  --pc-art: url("../img/promo-esports.svg?v=2"); }
.pr-card[data-art="live"]     { --pc1: #5E1B31; --pc2: #170A11;
  --pc-art: url("../img/promo-live.svg?v=2"); }
.pr-card[data-art="acca"]     { --pc1: #17416E; --pc2: #0A1723;
  --pc-art: url("../img/promo-acca.svg?v=2"); }
.pr-card[data-art="tennis"]   { --pc1: #145639; --pc2: #0A1E17;
  --pc-art: url("../img/promo-tennis.svg?v=2"); }

/* A scrim under the text end of the tile. The artwork is ours on a built-in
   but arbitrary on a tenant's, so the headline needs its own contrast rather
   than trusting whatever the image happens to be there. */
.pr-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.16) 46%, transparent 72%);
  pointer-events: none;
}
.pr-txt, .pr-cta { position: relative; z-index: 1; }

.pr-txt { display: block; max-width: 60%; }
.pr-txt .h {
  display: block; font-size: 15px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: #fff;
}
.pr-txt .p { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.82); }
.pr-cta {
  align-self: flex-start; height: 30px; padding: 0 15px; border-radius: 4px;
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
  font-size: 12px; font-weight: 700; letter-spacing: .4px; color: #fff;
  transition: background .12s;
}
.pr-card:hover .pr-cta { background: rgba(255,255,255,.26); }

/* ------------------------------------------------ build your win ------- */
.byw { margin-bottom: 22px; }
.byw-card {
  flex: 0 0 calc((100% - 2 * 12px) / 3); min-width: 0;
  background: var(--surface-2); border-radius: var(--radius);
  padding: 13px 14px 14px; cursor: pointer;
  border: 1px solid transparent; transition: border-color .12s, background .12s;
}
.byw-card:hover { border-color: var(--border); background: var(--surface-3); }
.byw-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
/* A flex item will not shrink below its content by default, so a long pairing
   ("Shanghai Port ii × Shanxi Chongde Ronghai") kept this column at its full
   text width: the ellipsis on .byw-ev never fired and the title ran on under
   the builder chip. min-width:0 is what lets it truncate instead. */
.byw-hd { flex: 1; min-width: 0; }
.byw-ev {
  font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.byw-when { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--text-dim); }
.byw-ico {
  flex: 0 0 auto; margin-left: auto; width: 26px; height: 26px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,116,255,.16); color: var(--accent);
}
.byw-ico svg { width: 15px; height: 15px; }

/* the legs read as one ticket, so they are strung on a single connector */
.byw-legs { position: relative; margin-bottom: 12px; }
.byw-legs::before {
  content: ''; position: absolute; left: 3px; top: 9px; bottom: 9px;
  width: 1px; background: var(--border);
}
.byw-leg {
  position: relative; padding: 5px 0 5px 16px;
  font-size: 12.5px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.byw-leg .dot {
  position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--text-faint);
}
.byw-leg .mk { color: var(--text-dim); }
.byw-leg b { font-weight: 700; color: var(--text); }

.byw-foot {
  height: 52px; border-radius: 4px; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; transition: background .12s;
}
.byw-foot b { font-size: 15px; font-weight: 700; color: var(--win-green); }
.byw-foot span { font-size: 10px; font-weight: 700; letter-spacing: .6px; color: var(--text-dim); }
.byw-card.on { border-color: var(--green); }
.byw-card.on .byw-foot { background: var(--green); }
.byw-card.on .byw-foot b, .byw-card.on .byw-foot span { color: #fff; }
.byw-card.on .byw-leg .dot { border-color: var(--green); }

@media (max-width: 1300px) {
  .wd-head .t { font-size: 14px; }
  .tm-cen .c { font-size: 17px; }
  .tm-odd { height: 44px; }
  .pr-card { height: 132px; }
}

/* -------------------------------------------------- winning bets ------- */
.wb { margin-top: 26px; }
.wb-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.wb-head .ico { width: 18px; height: 18px; color: var(--text); }
.wb-head .t {
  font-size: 15px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text);
}
.wb-rail {
  display: flex; gap: 12px; overflow-x: auto;
  scrollbar-width: none; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.wb-rail::-webkit-scrollbar { display: none; }
.wb-rail.dragging { cursor: grabbing; scroll-behavior: auto; }
.wb-rail.dragging * { cursor: grabbing !important; }

/* three across, the rest scroll */
.wb-card {
  flex: 0 0 calc((100% - 2 * 12px) / 3); min-width: 0;
  background: var(--surface-2); border-radius: var(--radius);
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.wb-sel { background: var(--surface); border-radius: 4px; overflow: hidden; }
.wb-ev {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  background: rgba(0,0,0,.16); font-size: 11.5px; font-weight: 600; color: var(--text-2);
}
.wb-ev .ico { width: 13px; height: 13px; flex: 0 0 13px; color: var(--text-dim); }
.wb-ev span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-line { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px 0; }
.wb-mk { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--text-2);
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-od { font-size: 14px; font-weight: 800; color: var(--win-green); }
.wb-pick {
  padding: 0 10px 9px; font-size: 13.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-foot { margin-top: auto; padding-top: 2px; }
.wb-last { font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.wb-tot { display: flex; align-items: center; gap: 12px; }
.wb-tot span { font-size: 13px; font-weight: 700; color: var(--text); }
.wb-tot b { color: var(--win-green); font-weight: 800; margin-left: 4px; }
.wb-add {
  margin-left: auto; height: 32px; padding: 0 16px; border-radius: 5px;
  background: var(--win-green); color: #06231A;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.wb-add:hover { filter: brightness(1.07); }

@media (max-width: 1300px) {
  .wb-add { padding: 0 11px; font-size: 12px; }
  .wb-tot span { font-size: 12px; }
}

/* market search in the detail toolbar */
.md-tools { align-items: center; }
.mkt-find { display: flex; align-items: center; gap: 6px; }
.mkt-find button { width: 20px; height: 20px; color: var(--text-2); }
.mkt-find button:hover { color: var(--text); }
.mkt-find input {
  width: 0; padding: 0; border: 0; outline: none; background: none;
  font-size: 13px; color: var(--text); transition: width .18s, padding .18s;
}
.mkt-find.open input {
  width: 168px; padding: 0 10px; height: 28px;
  background: var(--surface); border-radius: 4px;
}
.chip.star { display: inline-flex; align-items: center; gap: 4px; }
.chip.star svg { width: 12px; height: 12px; margin: 0; }
.mkt-h .mfav.on { color: var(--accent); }

/* ===================================================== light theme fixes ==
   Anything painted with a hardcoded white/dark value needs a light-mode
   counterpart, or the shell reads as dark chrome on a light page. */
:root[data-theme="light"] .tpl-brand .wm { color: var(--text); }
:root[data-theme="light"] .tpl-sec:hover,
:root[data-theme="light"] .tpl-item:hover { background: rgba(0,0,0,.04); }
:root[data-theme="light"] .tpl-search { background: rgba(0,0,0,.05); }
:root[data-theme="light"] .tpl-search input { color: var(--text); }
:root[data-theme="light"] .tpl-icon-btn:hover { background: rgba(0,0,0,.07); color: var(--text); }
:root[data-theme="light"] .tpl-brand .collapse { background: rgba(0,0,0,.05); }
:root[data-theme="light"] .tpl-brand .collapse:hover { background: rgba(0,0,0,.1); color: var(--text); }
:root[data-theme="light"] .tpl-menu::-webkit-scrollbar-thumb { background: #C7D2DA; }
:root[data-theme="light"] .scroll::-webkit-scrollbar-thumb:hover,
:root[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: #A9B7C2; }

/* gold on a light surface is unreadable — darken the live score */
:root[data-theme="light"] .lscore { color: #B07A00; }
:root[data-theme="light"] .hl-odd .was, :root[data-theme="light"] .odd .was,
:root[data-theme="light"] .pick .was { color: #93A3AB; }
:root[data-theme="light"] .wb-ev { background: rgba(0,0,0,.05); }
:root[data-theme="light"] .tm-odd .was { color: #93A3AB; }
/* the chart sits on a light card here, so the home bar darkens to stay read
   as "the other side" of the red one */
:root[data-theme="light"] .sb-stats { --stat-h: #5A6B78; --stat-a: #CF1311; }
:root[data-theme="light"] .byw-leg .dot { background: #fff; }

/* Promo strip on the light palette. The tiles stay colour blocks rather than
   turning pale: six dark rectangles read as holes punched in a light page,
   and pastel ones cannot carry white text. Each backdrop is the same hue
   lifted to a mid tone — every pair below is at luminance <= .18, which keeps
   white text at 4.6:1 or better, so the text and the artwork are unchanged. */
:root[data-theme="light"] .pr-card { --pc1: #6B7684; --pc2: #414A55; }
:root[data-theme="light"] .pr-card[data-art="football"] { --pc1: #59636F; --pc2: #333B44; }
:root[data-theme="light"] .pr-card[data-art="boost"]    { --pc1: #17796B; --pc2: #0F4F49; }
:root[data-theme="light"] .pr-card[data-art="esports"]  { --pc1: #7A3FD4; --pc2: #4E1F93; }
:root[data-theme="light"] .pr-card[data-art="live"]     { --pc1: #9E2745; --pc2: #63152C; }
:root[data-theme="light"] .pr-card[data-art="acca"]     { --pc1: #1E63A8; --pc2: #12406E; }
:root[data-theme="light"] .pr-card[data-art="tennis"]   { --pc1: #17845C; --pc2: #0D5539; }
/* lighter backdrop, so less scrim is needed to hold the headline */
:root[data-theme="light"] .pr-card::before {
  background: linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.10) 46%, transparent 72%);
}
/* a tenant's own photo is theirs — we cannot recolour it, so its text stays
   light on both palettes and leans on the scrim above */
:root[data-theme="light"] .pr-card.own { color: #fff; }
:root[data-theme="light"] .drop-menu,
:root[data-theme="light"] .mode-menu { box-shadow: 0 12px 28px rgba(20,40,60,.14); }
:root[data-theme="light"] .banner-slide::before {
  background:
    radial-gradient(70% 120% at 50% 118%, rgba(0,116,255,.12) 0%, transparent 62%),
    radial-gradient(52% 90% at 12% -12%, rgba(229,64,94,.10) 0%, transparent 60%),
    linear-gradient(160deg, #E8EEF4 0%, #DDE6EE 48%, #D3DEE8 100%);
}
:root[data-theme="light"] .banner-slide h2 { text-shadow: none; }
:root[data-theme="light"] .banner-slide::after { border-top-color: rgba(0,0,0,.06); }
:root[data-theme="light"] .banner-nav { background: rgba(255,255,255,.55); }
:root[data-theme="light"] .banner-nav:hover { background: rgba(255,255,255,.85); }
:root[data-theme="light"] .sb-tab { background: rgba(255,255,255,.5); }
:root[data-theme="light"] .periods > span { background: rgba(255,255,255,.5); }
:root[data-theme="light"] .tpl-sec.on { background: rgba(0,116,255,.08); }

/* ------------------------------------------------- my bets filters ------ */
.bets-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--track); margin-bottom: 16px;
}
.bets-tabs { display: flex; align-items: stretch; gap: 2px; }
.bets-tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 16px;
  font-size: 13.5px; font-weight: 600; color: var(--text-dim); white-space: nowrap;
}
.bets-tab:hover { color: var(--text-2); }
.bets-tab.on { color: var(--text); }
.bets-tab.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--accent);
}
.bets-tab .n {
  min-width: 20px; height: 19px; padding: 0 6px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-2);
  font-size: 11.5px; font-weight: 700;
}
.bets-tab.on .n { background: var(--accent); color: var(--accent-ink); }
.bets-search {
  margin-left: auto; display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 12px; margin-bottom: 6px;
  background: var(--surface); border-radius: var(--radius);
}
.bets-search svg { width: 15px; height: 15px; color: var(--text-dim); flex: 0 0 15px; }
.bets-search input {
  width: 190px; background: none; border: 0; outline: none;
  font-size: 13px; color: var(--text);
}
.bets-search input::placeholder { color: var(--text-dim); }
@media (max-width: 1300px) {
  .bets-tab { padding: 0 11px; font-size: 12.5px; }
  .bets-search input { width: 130px; }
}

/* suspended selections: padlock, not clickable */
.odd.lock, .hl-odd.lock, .rail-odd.lock, .tm-odd.lock {
  cursor: not-allowed; color: var(--text-faint);
  background: var(--surface-3);
}
.odd.lock:hover, .hl-odd.lock:hover, .rail-odd.lock:hover,
.tm-odd.lock:hover { background: var(--surface-3); }
.odd.lock svg, .hl-odd.lock svg, .rail-odd.lock svg, .tm-odd.lock svg {
  width: 13px; height: 13px; color: var(--text-faint);
}
.hl-odd.lock span, .tm-odd.lock span {
  font-size: 11px; font-weight: 600; color: var(--text-faint);
}

/* Kept last in the file on purpose: several desktop rules for the market
   search and tools row appear further down and would otherwise win on
   source order at equal specificity. */
/* =========================================================== phone ====== */
/* Below this width the desktop chrome cannot fit: the subbar nav, the league
   sidebar and the betslip column all go, replaced by the fixed tab bar and the
   betslip FAB the reference book uses. Everything that was a fixed-width flex
   track (odds cells, market grids) has to become fluid here or the page scrolls
   sideways — see .row below, which is the worst offender at six 58px cells. */
.tabbar, .slip-fab { display: none; }

@media (max-width: 760px) {
  /* on a phone the seven chips wrap to three rows and push the board below
     the fold, so here they become one scrolling rail like the sport strip */
  .tfilters {
    flex-wrap: nowrap; gap: 6px; margin: 0 0 12px;
    overflow-x: auto; scrollbar-width: none;
  }
  .tfilters::-webkit-scrollbar { display: none; }
  .tfilter { height: 28px; padding: 0 10px; font-size: 12px; }

  /* --subbar-h drives BOTH the height and the `flex: 0 0 var(--subbar-h)` basis
     on .subbar. Overriding only `height` below left the basis at 80px, so with
     its nav hidden on a phone the bar stayed an 80px empty band above the
     content. Set the token and both follow. */
  :root { --odd-w: 54px; --row-h: 56px; --subbar-h: 48px; }

  .app { position: relative; }
  .main-scroll { padding: 12px 10px calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* --- the fixed tab bar replaces the subbar's nav ---------------------- */
  .subbar { padding: 0 10px; gap: 10px; }
  /* Its nav moves to the fixed tab bar and its right-hand chips are hidden, so
     on the home view the bar holds nothing at all — an empty strip across the
     top of a phone. Keep it only when there is a breadcrumb to show. */
  .subbar:not(:has(.crumbs)) { display: none; }
  .subbar .mainnav, .subbar-right .fav-chip, .subbar-right .drop { display: none; }
  .subbar .crumbs { font-size: 12.5px; min-width: 0; }
  /* only the event itself matters on a phone — the trail to it does not fit */
  .subbar .crumbs a, .subbar .crumbs .sep { display: none; }
  .subbar .crumbs .cur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* The tab bar is fixed at z-index 60 and the drawer sits above it, so a
     full-height drawer would swallow every tap on it. Stop both the panel and
     its backdrop at the bar instead — it stays visible and usable, and the
     Load button lands just above it. */
  .app.side-open .side,
  .app.side-open::after {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface); border-top: 1px solid var(--track);
  }
  .tabbar .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; text-decoration: none;
    font-size: 10.5px; font-weight: 600; color: var(--text-2);
  }
  .tabbar .tab svg { width: 19px; height: 19px; }
  .tabbar .tab.on { color: var(--text); background: var(--surface-2); }

  /* --- betslip FAB ------------------------------------------------------ */
  .slip-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 14px; z-index: 61;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink);
    box-shadow: 0 6px 18px rgba(0,0,0,.42);
  }
  .slip-fab.empty { display: none; }
  .slip-fab svg { width: 21px; height: 21px; }
  .slip-fab .n {
    position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px;
    padding: 0 5px; border-radius: 10px; background: var(--surface);
    color: var(--text); font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
  }
  /* Opened from the FAB, the slip becomes a sheet over the board. On desktop it
     is a column with no background of its own — as a floating sheet it needs
     one, or the board reads straight through it. */
  .slip.sheet {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    width: auto; flex-basis: auto; max-height: 84vh;
    border: 0; border-radius: 16px 16px 0 0;
    background: var(--surface-2);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 30px rgba(0,0,0,.55);
  }
  .slip.sheet .slip-head { flex: 0 0 46px; padding: 0 16px; }
  .slip.sheet .slip-body { flex: 1; min-height: 0; overflow-y: auto; }
  /* dim the board so the sheet reads as a layer, not as part of the page */
  .slip.sheet::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(0,0,0,.45);
  }

  /* --- board ------------------------------------------------------------ */
  /* the reference shows 1 / X / 2 only; Value and the totals do not fit */
  .cols-head { display: none; }
  .row > .odd:nth-child(n+5), .lg-head > .lb:nth-child(n+5) { display: none; }
  .row-main { gap: 8px; padding: 0 8px 0 10px; }
  .row-star { display: none; }
  .team .nm { font-size: 12px; white-space: normal; line-height: 1.25; }
  .when { font-size: 11px; }
  .odd { font-size: 13px; }
  .lg-head { height: 34px; }
  .lg-head .nm, .lg-bar .nm { font-size: 12.5px; }

  /* MOBILE_LEAGUES_V1 — the Leagues button and the LIVE switch take ~170px of
     a 390px row, and at desktop metrics ONE sport tab filled what was left:
     the rail scrolled, but with nothing of a second tab showing there was
     nothing to say so. Compacted so a second tab is always part-visible,
     which is the affordance. */
  .strip { gap: 6px; }
  .strip-scroll { gap: 0; }
  .stab { height: 52px; gap: 8px; padding: 0 12px 0 2px; margin-right: 12px; }
  .stab .ico { width: 20px; height: 20px; flex-basis: 20px; }
  .stab .nm { font-size: 13px; }
  .stab .sub { font-size: 11px; }
  .stab.on::after { right: 12px; }
  .live-toggle { flex: 0 0 auto; }
  /* Below 760px the fixed tab bar carries Live, so the switch here is a second
     door to the same room — and it was costing the sport rail 85px of the
     390 it has. The 760–1000px band keeps it: no tab bar there. */
  @media (max-width: 760px) { .live-toggle { display: none; } }
  /* one card per screen; the rest swipe in, snapping so a card never sits
     half off-screen. Three across is unreadable at phone widths. */
  /* .wb-rail (Winning Bets) belongs in every one of these three lists — it was
     in none of them, so that widget alone kept its desktop three-across and
     each card came out ~118px wide on a 390px phone. */
  .hl-rail, .wd-rail, .wb-rail { gap: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .hl-card, .tm-card, .pr-card, .byw-card, .wb-card { flex: 0 0 100%; scroll-snap-align: start; }
  /* mouse grab-drag sets scrollLeft frame by frame; mandatory snapping would
     fight every assignment, so it is off mid-drag and re-snaps on release */
  .hl-rail.dragging, .wd-rail.dragging, .wb-rail.dragging { scroll-snap-type: none; }
  .banner { height: 150px; }

  /* the arrows are a mouse affordance — a phone swipes the rail instead */
  .rail-nav { display: none; }
  .tm-side .badge { width: 30px; height: 30px; }
  .pr-card { height: 128px; }
  .pr-txt { max-width: 70%; }

  /* --- event detail ----------------------------------------------------- */
  .md-card { border-radius: var(--radius); }
  /* 210px of empty pitch above a prematch fixture is most of a phone screen
     spent on nothing; the hero only needs the height its content takes. */
  .md-hero { min-height: 0; }
  /* The caption is absolutely positioned at the top, so the content has to
     start below it — with 18px it ran straight into a long league name and a
     two-line team name printed over the top of it. */
  .md-hero .hero-in { padding: 42px 12px 16px; }
  .md-hero .vs { gap: 8px; padding: 0 4px; }
  .md-hero .tn { font-size: 14px; white-space: normal; line-height: 1.2;
                 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .md-hero .ko { font-size: 19px; }
  .md-hero .dt { font-size: 11.5px; }
  .md-hero .crest { width: 26px; height: 26px; flex-basis: 26px; }
  /* stop it running under the favourite star, and keep it to one line */
  .md-hero .cap {
    top: 12px; left: 14px; right: 46px; font-size: 11.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Six stat rows in three columns is 90px a column on a phone — the bars
     stop reading as bars. Two columns keeps the figures legible. */
  .sb-stats { grid-template-columns: repeat(2, 1fr); gap: 14px 16px; padding: 14px; }

  /* Three outcomes across a phone leaves ~120px a cell, which is not enough
     for "Rocasa Gran Canaria Ace W  1.43" on one line — the label would
     ellipsise down to two words and the punter could not tell the outcomes
     apart. Stack the price under the label instead, the way the reference
     book does; c1 and c2 have the room to stay on one line. */
  .mkt-body.c3 .pick {
    height: auto; min-height: 52px; flex-direction: column; gap: 3px;
    justify-content: center; align-items: center; padding: 8px 6px; text-align: center;
  }
  .mkt-body.c3 .pick .lbl {
    white-space: normal; line-height: 1.2; max-height: 2.4em; overflow: hidden;
  }
  .mkt-body.c3 .pick .was { margin: 0; }

  /* one scrolling row, not a wrapping block that pushes the markets down */
  .chips {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 -10px 12px; padding: 0 10px;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }

  /* the search collapses behind an icon on desktop; on a phone there is room
     for it and the reference keeps it open */
  .md-tools { justify-content: space-between; gap: 10px; }
  .mkt-find { flex: 1; min-width: 0; }
  .mkt-find input, .mkt-find.open input {
    width: 100%; opacity: 1; pointer-events: auto; padding: 8px 10px;
  }
  .mkt-find button { display: none; }

  .mkt-h { height: 36px; }
  .mkt-h .nm { font-size: 12.5px; }
  .pick { padding: 0 9px; }
  .pick .lbl { font-size: 11.5px; }
  .pick .val { font-size: 12.5px; }

  .ltabs.inline { overflow-x: auto; scrollbar-width: none; }
  .ltabs.inline::-webkit-scrollbar { display: none; }
  .ltabs.inline a { flex: 0 0 auto; }

  /* --- my bets ---------------------------------------------------------
     Every row here was a single flex line built for a 1200px column, so on a
     phone the ONE thing a punter opens a ticket to read — who is playing —
     was the thing that got ellipsised: measured 192px of box for a name
     needing 442. Both rows become two-line grids instead, and the team names
     wrap in full. */
  .bet-h {
    height: auto; padding: 9px 12px; column-gap: 10px; row-gap: 2px;
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "code tag chev" "when sum chev";
  }
  .bet-h .code { grid-area: code; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* the board's `.when` (a right-aligned kick-off cell) shares this class and
     wins on alignment, so say it here */
  .bet-h .when { grid-area: when; font-size: 11.5px; text-align: left; }
  .bet-h .sum  { grid-area: sum; margin-left: 0; font-size: 11.5px; text-align: right; }
  .bet-h .tag  { grid-area: tag; }
  .bet-h .chev { grid-area: chev; align-self: center; }

  .bet-pick {
    display: grid; align-items: center; gap: 3px 10px; padding: 9px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "ev ev" "mk od";
  }
  /* the whole point: no nowrap, no ellipsis, no fixed track */
  .bet-pick .ev {
    grid-area: ev; white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.3; font-size: 12.5px;
  }
  .bet-pick .mk { grid-area: mk; white-space: normal; overflow: visible; text-overflow: clip; font-size: 12px; }
  .bet-pick .od { grid-area: od; }
  /* two-line picks need a rule between them or a 4-leg ticket reads as prose */
  .bet-pick + .bet-pick { border-top: 1px solid var(--bg); }

  .bet-f { flex-wrap: wrap; gap: 4px 18px; padding: 10px 12px; }

  /* five tabs plus a search box do not fit across 390px: the tabs scroll and
     the search takes its own full-width line instead of a 130px stub */
  .bets-bar { flex-wrap: wrap; gap: 0; }
  .bets-tabs {
    flex: 1 1 100%; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bets-tabs::-webkit-scrollbar { display: none; }
  .bets-tab { flex: 0 0 auto; height: 40px; padding: 0 11px; font-size: 12.5px; }
  .bets-search { flex: 1 1 100%; margin: 8px 0; }
  .bets-search input { width: 100%; }
}

/* very narrow phones — three odds cells still have to fit beside the teams */
@media (max-width: 400px) {
  :root { --odd-w: 46px; }
  .pick .lbl { font-size: 11px; }
  .team .nm { font-size: 11.5px; }
}

/* ============================================== live match widget =======
   The provider's own tracker page in a frame, parked in the betslip column
   above the slip. Only the shell and the hide control are ours. */
/* No frame of our own around it: the widget brings its own panel, so a card
   behind it only showed as a rounded lip down the sides. */
.lw { position: relative; background: none; margin-bottom: 12px; }
/* Rendered at its natural 320x450 — the full width of the betslip column —
   and not scaled. Keep in step with LW_W / LW_H in app.js. */
.lw-fit { position: relative; width: 100%; overflow: hidden; }
.lw-frame {
  display: block; width: 320px; height: 450px; border: 0; margin: 0 auto;
  transform-origin: top left; background: transparent;
}
.lw.closed { background: none; margin-bottom: 8px; }
.lw-toggle {
  width: 100%; height: 38px; padding: 0 12px; border-radius: var(--radius);
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); color: var(--text-2);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.lw-toggle span { flex: 1; text-align: left; }
.lw-toggle svg { width: 15px; height: 15px; }
.lw-toggle:hover { background: var(--hover); color: var(--text); }
.lw-x {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 22px; height: 22px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: rgba(255,255,255,.8); cursor: pointer;
}
.lw-x svg { width: 13px; height: 13px; }
.lw-x:hover { background: rgba(0,0,0,.7); color: #fff; }

/* the widget is a desktop-column affair; the phone has the slip in a sheet */
@media (max-width: 1000px) { .lw, .lw.closed { display: none; } }

/* ---------------------------------------------- bet builder on the slip -
   A builder's legs came off one match and pay as one ticket, so they share a
   card: the event and kick-off in the header, "Bet Builder" with the combined
   price, then the legs on the same connector the Build Your Win card uses, so
   the slip entry and the card that created it read as the same object.
   Everything inherits .pickcard — only what differs is declared here. */
.bbcard .ph .lg { font-size: 12px; font-weight: 600; color: var(--text-2); }
/* The header ✕ is the whole-ticket remove, so it sits apart from the leg ones. */
.bbcard .ph .del { width: 14px; height: 14px; flex: 0 0 14px; }
.bbcard .pb { padding: 11px 11px 12px; }

.bb-title { display: flex; align-items: center; gap: 9px; }
.bb-title .t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--text); }
.bb-ico {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,116,255,.16); color: var(--accent);
}
.bb-ico svg { width: 14px; height: 14px; }
.bb-odds { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--win-green); }

.bb-legs { position: relative; margin-top: 9px; }
.bb-legs::before {
  content: ''; position: absolute; left: 3px; top: 10px; bottom: 10px;
  width: 1px; background: var(--border);
}
.bb-leg {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 5px 0 5px 16px; font-size: 12.5px; line-height: 1.35;
}
.bb-leg .dot {
  position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--text-faint);
}
.bb-leg .tx {
  flex: 1; min-width: 0; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-leg .del {
  flex: 0 0 13px; width: 13px; height: 13px; color: var(--text-dim);
}
.bb-leg .del:hover { color: var(--live); }

/* A pushed price moves the slip too, so the builder total flashes the way a
   board cell does — colour only, since this one is text rather than a chip. */
.bb-odds { transition: color .15s; }
.bb-odds.up { color: var(--up); }
.bb-odds.down { color: var(--down); }

/* Team names open the match. The "+N ›" chip was the only way in, which is a
   14px target on a card whose most obvious thing to click is the two names.
   `.is-open` marks the rows that now carry data-game (TOP MATCHES .tm-mid and
   Live Highlights .hl-teams) — the odds cells sit outside it and keep placing
   bets, since the pick handler runs before the open-event one either way. */
.tm-mid.is-open, .hl-teams.is-open { cursor: pointer; }
.tm-mid.is-open .nm, .hl-teams.is-open .nm { transition: color .12s ease; }
.tm-mid.is-open:hover .nm, .hl-teams.is-open:hover .nm { color: var(--accent, var(--text)); }

/* IFRAME_AUTH_V1 — the in-book sign-in dialog ==============================
   Exists because a white-label book cannot send the punter to /login.html: on
   the iframe host that page is not served, and inside a customer's frame a
   top-level link would navigate their whole site away to ours. Everything here
   is painted from the same tokens as the board, so it inherits the tenant's
   skin without knowing anything about it. */
.auth-wrap { position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.auth-card { position: relative; width: 100%; max-width: 340px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 8px);
  padding: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.auth-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.auth-head strong { color: var(--text); font-size: 16px; }
.auth-x { background: none; border: 0; color: var(--text-dim); font-size: 22px;
  line-height: 1; cursor: pointer; padding: 0 4px; }
.auth-x:hover { color: var(--text); }
.auth-f { display: block; margin-bottom: 10px; }
.auth-f span { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.auth-f input { width: 100%; box-sizing: border-box; padding: 9px 10px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
.auth-f input:focus { outline: none; border-color: var(--accent); }
/* Reserves its line whether or not there is a message, so the button does not
   jump down the moment an error appears under the fields. */
.auth-msg { min-height: 16px; font-size: 12px; color: var(--live-badge, #E95A74); margin: 2px 0 8px; }
.auth-go { width: 100%; padding: 10px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 600; }
.auth-go[disabled] { opacity: .6; cursor: default; }
.auth-alt { margin-top: 12px; text-align: center; font-size: 12px; color: var(--text-dim); }
.auth-alt button { background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 12px; }

/* A tenant book standing on its own page. .tpl-body is already flex:1 inside
   .tpl, so dropping the aside gives it the full width on its own — there is
   nothing to override here beyond letting the page own its height. */
.tpl.solo { height: 100vh; }