/* ════════════════════════════════════════════════════════════════════
   WYNBOOK /V2 — "FLOODLIGHT FLAT" · Phase 1 (Home + Match)
   Flat-dense broadcast skin ported from the approved mockups
   (mockup-flat.html + mockup-flat-desktop.html). Zero gradients on
   surfaces — tints only. Engine-agnostic: styles only v2 markup plus
   the crest/icon fragments the shared engine emits (teamBadge/sportIcon).
   ════════════════════════════════════════════════════════════════════ */
/* The v2 geometry and tracking were designed around this pairing. Keep the
   official OFL subsets on-origin so every browser gets identical metrics
   without a third-party request or a permanent display=optional fallback. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/hanken-grotesk-v12-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/hanken-grotesk-v12-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/hanken-grotesk-v12-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20B8,U+20BA-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/hanken-grotesk-v12-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Hanken Grotesk does not ship U+20B9. Without an explicit on-origin fallback,
   every OS chooses a different system glyph in strings such as
   "Start TBA · ₹1.4L". The earlier Khand fallback was deterministic but its
   narrow currency glyph visibly changed typeface inside each money token.
   This 3 KB OFL Noto Sans subset contains only U+20B9 and matches Hanken's
   cap-height, so the canonical Hanken + Khand pairing stays intact. */
@font-face{font-family:'Wynbook Currency';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url('/fonts/noto-sans-v42-rupee.woff2') format('woff2');unicode-range:U+20B9}

@font-face{font-family:'Khand';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/khand-v22-400-devanagari.woff2') format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}
@font-face{font-family:'Khand';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/khand-v22-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Khand';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/khand-v22-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Khand';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/khand-v22-500-devanagari.woff2') format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}
@font-face{font-family:'Khand';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/khand-v22-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Khand';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/khand-v22-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Khand';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/khand-v22-600-devanagari.woff2') format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}
@font-face{font-family:'Khand';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/khand-v22-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Khand';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/khand-v22-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Khand';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/khand-v22-700-devanagari.woff2') format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}
@font-face{font-family:'Khand';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/khand-v22-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Khand';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/khand-v22-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Base tokens (shared across every theme) + DEFAULT palette = Floodlight.
   Theme variants below override colour tokens only; :root keeps the fonts,
   motion, frame dims so switching data-theme never drops layout tokens. */
:root {
  color-scheme:dark;
  /* canvas */
  --bg:#0B100D; --bg-sunken:#070A08;
  --surface:#131A15; --surface-2:#1B241E; --surface-3:#242F27;
  --border:#2A362E; --border-strong:#607067; --line-lit:rgba(200,230,210,.14);
  /* text */
  --text:#F2F5F0; --text-dim:#9FAFA4; --text-faint:#8A998F;
  /* brand — floodlit turf chartreuse */
  --brand:#C6F32E; --brand-hot:#DBFF52; --brand-ink:#0B100D;
  --icon-tint:#C6F32E;
  /* RGB triplets so rgba() glows/tints follow the theme (composed as rgba(var(--x),alpha)) */
  --brand-rgb:198,243,46; --sunk-rgb:7,10,8;
  /* exchange */
  --back:#7EB8FF; --back-strong:#2E7CD6; --back-ink:#06233F;
  --lay:#E86A9E; --lay-strong:#C23568; --lay-ink:#3A0A1E;
  /* money / energy */
  --pos:#35D07F; --neg:#FF5D5D; --live:#FF7A5A; --warn:#FFB020; --info:#58C7E0;
  --floodlight:150 25% 75%;
  /* racing — PHYSICAL trap-rug colours (AUSTRALIAN greyhound convention:
     boxes 1–8 + reserve vests 9/10 — AU chosen because the live racing feed's
     meetings are AUS; UK differs: 1 red · 2 blue · 3 white · 4 black ·
     5 orange · 6 b/w stripes). These sit on :root and are deliberately NOT
     theme-overridden — a red rug is red in every theme, exactly like the
     payment brand marks. Every .rug chip carries a --border-strong hairline
     so the white and black rugs stay defined on any surface. */
  --rug-red:#D8352A; --rug-blue:#1D5BD6; --rug-gold:#EFC324; --rug-green:#1E8A46;
  --rug-pink:#DE5F94; --rug-w:#F4F4F1; --rug-k:#161616;
  /* motion */
  --dur-instant:120ms; --dur-fast:180ms; --dur-base:240ms;
  --dur-sheet:320ms; --dur-tick:600ms; --dur-hero:800ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-sheet:cubic-bezier(.32,.72,0,1);
  /* type */
  /* ── INK vs FILL ───────────────────────────────────────────────────────
     A brand/semantic colour that works as a FILL does not automatically work
     as TEXT. On the daylight canvas --brand (#FFB80C) scores 1.73:1 on white —
     literally unreadable — yet it was used as `color:` in 77 places, which is
     why figures like the closing balance vanished. These ink tokens default to
     the fill colour (so the dark themes are unchanged) and are overridden with
     accessible equivalents in daylight. Rule: `background:` uses the raw
     colour, `color:` uses the ink. */
  --ink-brand:var(--brand); --ink-warn:var(--warn); --ink-pos:var(--pos);
  --ink-info:var(--info); --ink-live:var(--live); --ink-neg:var(--neg);
  --font-d:'Khand','Barlow Semi Condensed',system-ui,sans-serif;
  --font-b:'Hanken Grotesk','Wynbook Currency',system-ui,sans-serif;
  /* Shared-engine confirmation, 2FA and edit sheets still reference the
     classic token names. Alias them into the active v2 palette. */
  --text-primary:var(--text);--text-secondary:var(--text-dim);--text-muted:var(--text-faint);
  --bg-card:var(--surface);--bg-input:var(--surface-2);--bg-tertiary:var(--surface-3);
  --gold:var(--brand);--green:var(--pos);--red:var(--neg);--orange:var(--warn);
  --font-body:var(--font-b);--font-mono:var(--font-d);
  /* flat-skin derivations (tints only — zero gradients) */
  --back-cell:rgba(126,184,255,.13); --back-cell-bd:rgba(126,184,255,.24); --back-num:#CDE2FF;
  --lay-cell:rgba(232,106,158,.11); --lay-cell-bd:rgba(232,106,158,.24); --lay-num:#F8CFE0;
  /* semantic RGB triplets + pressed/armed cell tints (theme-overridden below) */
  --pos-rgb:53,208,127; --neg-rgb:255,93,93; --warn-rgb:255,176,32; --live-rgb:255,122,90;
  --back-cell-hi:rgba(126,184,255,.24); --lay-cell-hi:rgba(232,106,158,.22);
  /* frame — header V3 "THE COUNTER" geometry (spec Part 10): identity rail +
     money row + settlement rule. --hdrH/--stick are recomputed on .v2-app per
     auth/condense state; these are the base tokens. */
  --hdr1H:44px; --hdr2H:42px; --ruleH:2px;
  --hdrH:50px; --navH:60px;
  /* ink.exposureText — in-play money ink (ExposureCalm: Warn @82% on dark;
     the daylight theme overrides to #8A5200 for AA on white). rule.fill is
     the settlement-rule gauge (always the Warn family, never Brand). */
  --expo-ink:rgba(var(--warn-rgb),.82);
  --rule-fill:rgba(var(--warn-rgb),.9);
  --topH:56px; --railW:230px; --sideW:320px; --frameW:1312px;
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b-live:env(safe-area-inset-bottom, 0px);
  --safe-b-max:env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-b:var(--safe-b-max);
  --safe-l:env(safe-area-inset-left, 0px); --safe-r:env(safe-area-inset-right, 0px);
  /* Compatibility token retained for dependent overlays. Browser chrome is
     already handled by fixed positioning plus the safe-area fast path below;
     JS must not add a second visual-viewport offset during normal scrolling. */
  --v2-vv-bottom:0px;
  --stick:calc(var(--hdrH) + var(--safe-t));
}

/* ═══ THEME: Graphite Yellow ════════════════════════════════════════════
   The legacy "midnight" id is retained for stored-preference compatibility.
   Neutral broadcast greys carry the interface; yellow is reserved for brand,
   focus, selection and primary action. Every normal-text role clears 4.5:1 on
   the brightest graphite surface and strong control edges clear 3:1. */
:root[data-theme="midnight"]{
  /* Tonal structure (2026-07-26 premium pass — the board read "washed out"):
     the ground was only 4.8 L* below the card surface while --border sat 17.2 L*
     ABOVE it, so dozens of hairlines formed a grey mesh over a flat field and
     nothing appeared to lift. Ground goes deeper, the surface ladder gets real
     steps, and the hairline drops below the text mass so it defines edges
     without greying the screen. Layout geometry is untouched. */
  --bg:#0B0D0F; --bg-sunken:#070809;
  --surface:#1C1F22; --surface-2:#262A2E; --surface-3:#2E3337;
  --border:#31363B; --border-strong:#7C848C; --line-lit:#3C4249;
  /* Three genuinely distinct text steps (dim and faint were 6.7 L* apart, so
     secondary and tertiary both just read "grey"): 13.4:1 / 9.8:1 / 6.1:1. */
  --text:#F7F8F9; --text-dim:#C2C8CE; --text-faint:#8E969E;
  --brand:#FFD21A; --brand-hot:#FFE15C; --brand-ink:#181300; --icon-tint:#FFD21A;
  --brand-rgb:255,210,26; --sunk-rgb:7,8,9;
  --back:#74ACE6; --back-strong:#4E8FD4; --back-ink:#0E1722;
  --lay:#E48AB0; --lay-strong:#D66C9A; --lay-ink:#23121A;
  --pos:#67D394; --neg:#FF8585; --live:#FF826B; --warn:#F6B94C; --info:#7FC4E8;
  /* Price cells are the hero of an exchange — give them real chroma against the
     deeper ground and brighter numerals, instead of near-neutral tints. */
  --back-cell:#16283C; --back-cell-bd:#27405A; --back-num:#B8D9F7;
  --lay-cell:#33202D; --lay-cell-bd:#4E3145; --lay-num:#F6C2DA;
  --pos-rgb:103,211,148; --neg-rgb:255,133,133; --warn-rgb:246,185,76; --live-rgb:255,130,107;
  --back-cell-hi:#1F3550; --lay-cell-hi:#442A3B;
  --floodlight:48 100% 55%;
}

/* ═══ THEME: Daylight v117 (Betfair white cards + near-white ivory) ══════
   Colour tokens only. Light mode also needs the dark-canvas literal leaks
   below (white sheens, green hairlines, black shadows) neutralised — handled
   in the [data-theme="daylight"] overrides further down. */
:root[data-theme="daylight"]{
  color-scheme:light;
  /* Neutral exchange hierarchy: clean white fixture cards on a cool-grey
     canvas with true ink-black chrome. Yellow remains the brand/selection
     signal while back-blue and lay-pink stay instantly scannable. */
  --bg:#F3F5F7; --bg-sunken:#EEF1F4;
  --surface:#FFFFFF; --surface-2:#F7F8FA; --surface-3:#EEF1F4;
  --border:#D2D7DD; --border-strong:#707A84; --line-lit:#FFFFFF;
  --text:#101418; --text-dim:#37414B; --text-faint:#5E6B77;
  --brand:#FFB80C; --brand-hot:#FFC72C; --brand-ink:#111315; --icon-tint:#20252A;
  --brand-rgb:255,184,12; --sunk-rgb:238,241,244;
  --back:#2E7CD6; --back-strong:#1B62B8; --back-ink:#FFFFFF;
  --lay:#D6336C; --lay-strong:#B7215A; --lay-ink:#FFFFFF;
  --pos:#2E8B57; --neg:#D32F2F; --live:#E5341F; --warn:#E28900; --info:#1E88C7;
  --back-cell:#A6D8FF; --back-cell-bd:#7CB5EC; --back-num:#14315C;
  --lay-cell:#FAC0CE; --lay-cell-bd:#F0A0B4; --lay-num:#7A1533;
  --pos-rgb:46,139,87; --neg-rgb:211,47,47; --warn-rgb:226,137,0; --live-rgb:229,52,31;
  --back-cell-hi:#8FC7F2; --lay-cell-hi:#F2A9BE;
  --floodlight:41 100% 52%;
  /* header counter inks: Warn #E28900 fails normal-text AA on white, so the
     in-play value derives its own ink (spec §6.2); the rule gauge keeps Warn
     at full strength — it is a graphic, and 3:1+ vs white suffices. */
  /* Text-safe inks for the light canvas (all ~6:1 on white — deliberately one
     readability level, so colour still codes meaning without shouting). */
  --ink-brand:#6B4800; --ink-warn:#7A4D00; --ink-pos:#1B6E3C;
  --ink-info:#10658F; --ink-live:#B32410; --ink-neg:#C62828;
  --expo-ink:#8A5200;
  --rule-fill:var(--warn);
}

/* Daylight is framed like a broadcast exchange desk: ink-black identity and
   navigation chrome around a near-white ivory board. The scoped token reset
   keeps every header/footer control, icon and focus state readable without
   changing Floodlight or Graphite Yellow. */
:root[data-theme="daylight"] .hdr,
:root[data-theme="daylight"] .mnav,
:root[data-theme="daylight"] .foot-note,
:root[data-theme="daylight"] .foot-trust,
:root[data-theme="daylight"] .rail-foot{
  color-scheme:dark;
  --bg:#08090A;--bg-sunken:#08090A;--sunk-rgb:8,9,10;
  --surface:#141618;--surface-2:#1C1F22;--surface-3:#262A2E;
  --border:#34383D;--border-strong:#626A73;--line-lit:rgba(255,255,255,.14);
  --text:#F8FAFC;--text-dim:#D2D7DD;--text-faint:#9CA6B0;
  --icon-tint:#FFD21A;--ink-brand:#FFD21A;--ink-live:#FF8A70;--expo-ink:#F6B94C;
}
:root[data-theme="daylight"] .hdr{background:rgba(8,9,10,.99);box-shadow:0 8px 24px rgba(16,20,24,.18)}
:root[data-theme="daylight"] .foot-note,
:root[data-theme="daylight"] .foot-trust{background:#08090A;border-top:1px solid #34383D}
:root[data-theme="daylight"] .foot-note{color:#B8C0C8;padding:17px 16px 15px}
:root[data-theme="daylight"] .rail-foot{margin:10px 8px 0;padding:16px 12px;border:1px solid #34383D;border-radius:10px;background:#08090A}
/* ── Selected = SOLID Betfair yellow ──────────────────────────────────────
   Selection used dark-amber text over a 10-14% brand wash, which on white read
   as brown-on-cream. Yellow is a FILL colour: filling the chip and inking it
   near-black is both the Betfair idiom and far more legible (~11:1), and it
   lets the mark stay true #FFB80C everywhere else. */
:root[data-theme="daylight"] .stab.on,
:root[data-theme="daylight"] .stab.stab-util.on,
:root[data-theme="daylight"] .mnav-it.on,
:root[data-theme="daylight"] .mtab.on,
:root[data-theme="daylight"] .rit.on,
:root[data-theme="daylight"] .favbtn.on{
  background:var(--brand);color:var(--brand-ink);border-color:var(--brand);
}
:root[data-theme="daylight"] .stab.on i,
:root[data-theme="daylight"] .mnav-it.on span,
:root[data-theme="daylight"] .rit.on .rit-ic,
:root[data-theme="daylight"] .rit.on span,
:root[data-theme="daylight"] .mtab.on b{color:var(--brand-ink);background:transparent}
:root[data-theme="daylight"] .stab.on{border-bottom-color:var(--brand)}
:root[data-theme="daylight"] .stab.on,
:root[data-theme="daylight"] .stab.stab-util.on,
:root[data-theme="daylight"] .favbtn.on,
:root[data-theme="daylight"] .favbtn:hover,
:root[data-theme="daylight"] .favbtn:focus-visible,
:root[data-theme="daylight"] .mnav-it.on,
:root[data-theme="daylight"] .rit.on,
:root[data-theme="daylight"] .mtab.on,
:root[data-theme="daylight"] .mk-tag,
:root[data-theme="daylight"] .p-foot,
:root[data-theme="daylight"] .pg-act,
:root[data-theme="daylight"] .p-act,
:root[data-theme="daylight"] .modep.is-pro,
:root[data-theme="daylight"] .lchip.on,
:root[data-theme="daylight"] .ptab.on,
:root[data-theme="daylight"] .plink.on,
:root[data-theme="daylight"] .au-switch a,
:root[data-theme="daylight"] .tfa-resend{color:#765000}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important}
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  font-family:var(--font-b); color:var(--text); background:var(--bg-sunken);
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
a{color:inherit;text-decoration:none}
input{font:inherit;color:inherit;background:none;border:0;outline:0}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
svg{display:block}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
button,a{touch-action:manipulation}
[hidden]{display:none !important}
.skip-link{position:fixed;left:max(8px,var(--safe-l));top:max(8px,var(--safe-t));z-index:1000;padding:9px 12px;border-radius:6px;background:var(--surface);color:var(--text);border:2px solid var(--brand);transform:translateY(-160%)}
.skip-link:focus{transform:none}

/* ── SCENE — one faint floodlight + restrained grain ─────────────── */
.v2-scene{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(130% 52% at 50% -12%, hsl(var(--floodlight)/.08) 0%, transparent 62%),
    var(--bg-sunken);
}
.v2-scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  /* soft-light, NOT overlay: overlay pushes mid-grey noise UP on dark pixels,
     so a full-screen grain layer lifts the blacks and lays a milky veil over
     the whole app — a direct cause of the washed-out look. soft-light keeps the
     texture without raising the floor. */
  background-size:140px 140px; opacity:.03; mix-blend-mode:soft-light;
}
.v2-warm{
  max-width:440px;margin:0 auto;padding:140px 20px;text-align:center;color:var(--text-dim);
  font-family:var(--font-d);letter-spacing:.02em;animation:v2pulse 1.6s var(--ease-out) infinite;
}
@keyframes v2pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ── REVEAL (one calm load pass, route entry only) ───────────────── */
.reveal{opacity:0;transform:translateY(8px);animation:v2rise .5s var(--ease-out) forwards;animation-delay:var(--d,0ms)}
@keyframes v2rise{to{opacity:1;transform:none}}

/* ── ENGINE LEAK GUARDS — v1 body-injected chrome has no home on /v2.
   The engine's Positions FAB (updateBetslipFAB) appends itself to
   document.body once open bets exist; v2's My Bets badge is that
   affordance. !important outranks the FAB's inline display:flex. ── */
#betslip-fab{display:none !important}

/* ── ENGINE CREST FRAGMENTS (teamBadge / sportIcon / competitionBadge) */
.team-logo-img{width:20px;height:20px;flex:none;object-fit:contain;display:inline-block;vertical-align:middle}
.team-logo-img.team-flag{border-radius:50%;object-fit:cover}
.team-logo-img.tennis-player-avatar{border-radius:50%;object-fit:cover;background:var(--surface-3)}
.team-logo-img.team-logo-wide{width:26px;object-fit:contain}
.team-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:20px;height:20px;border-radius:6px;
  font:700 9px/1 var(--font-b);letter-spacing:.02em;
}
.tennis-player-badge{border-radius:50%;background:hsl(var(--tennis-hue,150) 45% 32%);color:#fff}
.comp-logo-img{width:15px;height:15px;flex:none;object-fit:contain}
.comp-logo-img.comp-flag{border-radius:50%;object-fit:cover}
.comp-logo-missing{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex:none}
.comp-logo-missing .sport-glyph,.comp-logo-missing .sport-icon-art img{width:15px;height:15px}
.sport-glyph{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;font:700 9px/1 var(--font-b);color:var(--text-dim)}
.sport-icon-art img{width:16px;height:16px;object-fit:contain;display:block}
.sport-icon-art.is-missing-art::after{content:attr(data-fallback);font:700 9px/1 var(--font-b)}
.v2-sport-art{display:block;object-fit:contain;background:transparent;border:0}
.rit .rail-sport-glyph{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--brand) 28%,transparent))}

/* ── APP HEADER V3 — "THE COUNTER" (spec tmp/header-redesign-spec.md) ──
   Two thin lines with a strict division of labor: Row 1 identity rail (44px,
   never money) · Row 2 the counter (42px, only money, authed) · a 2px
   settlement rule whose amber fill = exposure ÷ (available + exposure).
   Geometry lives on .v2-app so every --stick consumer recomputes per state;
   --stickPad is the EXPANDED height — content padding never shifts while the
   header condenses mid-scroll (only sticky pins follow --stick). */
.v2-app{
  --hdr1HX:44px;--hdr2HX:0px;
  --hdr1H:var(--hdr1HX);--hdr2H:var(--hdr2HX);
  --hdrH:calc(var(--hdr1H) + var(--hdr2H) + var(--ruleH));
  --stick:calc(var(--hdrH) + var(--safe-t));
  --stickPad:calc(var(--hdr1HX) + var(--hdr2HX) + var(--ruleH) + var(--safe-t));
}
.v2-app.is-authed{--hdr2HX:42px}
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(var(--sunk-rgb),.98);
  padding-top:var(--safe-t);
}
/* Row 1 — identity rail */
.hdr-id{
  height:var(--hdr1H);display:flex;align-items:center;gap:8px;
  padding:0 max(10px,var(--safe-r)) 0 max(16px,var(--safe-l));
  transition:height var(--dur-base) var(--ease-out);
}
.backbtn{width:34px;height:44px;display:none;align-items:center;justify-content:center;color:var(--text-dim);margin-left:-8px;flex:none}
.v2-app[data-screen="match"] .backbtn,.v2-app[data-screen="page"] .backbtn{display:flex}
.wordmark{display:flex;align-items:center;gap:6px;flex:none;min-width:0}
.wordmark .wm-mark{width:14px;height:16px;flex:none}
.wm-mark{color:var(--brand)}
.wordmark b{font:700 17px/1 var(--font-d);letter-spacing:.06em;color:var(--text);white-space:nowrap}
.icobtn{width:38px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);flex:none}
.avatar{
  width:30px;height:30px;border-radius:8px;flex:none;
  background:var(--surface-2);border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  font:600 12px/1 var(--font-d);color:var(--text-dim); /* gold is reserved (§6.3) */
}
.authbtn{
  height:34px;padding:0 12px;border-radius:8px;flex:none;display:flex;align-items:center;
  font:600 11px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);background:var(--surface-2);border:1px solid var(--border-strong);
  white-space:nowrap;
}
.authbtn.join{background:linear-gradient(180deg,var(--brand-hot),var(--brand));border-color:var(--brand);color:var(--brand-ink)}
.hdr-right{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
.v2-app[data-screen="match"] .icobtn.m-search,.v2-app[data-screen="page"] .icobtn.m-search{display:none}
.v2-app[data-screen="match"] .tb-search,.v2-app[data-screen="page"] .tb-search{display:none}

/* Row 2 — the counter (authed only). One step LIFTED from the Row-1 chrome so
   the money reads as the solid object; the inset pair = row divider + EdgeHi
   bevel (both invisible at height 0, so the fold needs no border juggling). */
.hdr-counter{
  height:var(--hdr2H);overflow:hidden;display:flex;align-items:center;gap:2px;
  padding:0 max(8px,var(--safe-r)) 0 max(16px,var(--safe-l));
  background:var(--surface);direction:ltr; /* money row stays LTR (§8) */
  box-shadow:inset 0 1px 0 var(--border),inset 0 2px 0 rgba(255,255,255,.10);
  transition:height var(--dur-base) var(--ease-out);
}
:root[data-theme="daylight"] .hdr-counter{box-shadow:inset 0 1px 0 var(--border),inset 0 -1px 0 rgba(52,33,8,.10)}
.hdr-counter>*{transition:opacity var(--dur-instant) var(--ease-out)}
.ctr-avail{flex:1 1 auto;min-width:96px;height:100%;display:flex;flex-direction:column;justify-content:center;gap:2px;text-align:left}
.ctr-cap{font:600 10.5px/1 var(--font-b);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.ctr-val{display:flex;align-items:baseline;gap:3px;font:600 20px/1 var(--font-d);letter-spacing:.01em;color:var(--text);white-space:nowrap}
.ctr-val .rup{font:500 12.5px/1 var(--font-d);font-style:normal;color:var(--text-faint)}
.ctr-val>span{display:inline-block;min-width:0}
#v2-bal-avail.roll{animation:v2roll var(--dur-tick) var(--ease-out)}
#v2-bal-inplay.roll{animation:v2roll 250ms var(--ease-out)}
@keyframes v2roll{0%{opacity:.15;transform:translateY(.4em)}100%{opacity:1;transform:none}}
.ctr-nudge{display:none;flex:0 1 auto;min-width:0;padding:0 8px;font:500 12px/1.3 var(--font-b);color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctr-inplay{position:relative;flex:none;min-width:64px;height:100%;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 10px 0 12px;text-align:left;animation:v2zoneb 150ms var(--ease-out)}
.ctr-inplay::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--border)}
.ctr-inplay .ctr-val{font:600 14px/1 var(--font-b);color:var(--expo-ink)}
.ctr-inplay .ctr-val .rup{font:500 11px/1 var(--font-d);color:var(--expo-ink);opacity:.8}
@keyframes v2zoneb{0%{opacity:0;transform:translateX(6px)}100%{opacity:1;transform:none}}
.ctr-eye{position:relative;width:40px;height:100%;flex:none;display:flex;align-items:center;justify-content:center;color:var(--text-dim)}
.ctr-eye::after{content:"";position:absolute;inset:-3px -4px} /* ≥44px target */
.ctr-eye svg{width:19px;height:19px}
.ctr-deposit{
  position:relative;height:32px;padding:0 14px;border-radius:10px;flex:none;
  display:flex;align-items:center;gap:5px;
  background:linear-gradient(180deg,var(--brand-hot),var(--brand));color:var(--brand-ink);
  transition:filter var(--dur-instant) var(--ease-out);
}
.ctr-deposit::after{content:"";position:absolute;inset:-8px} /* ≥48px target */
.ctr-deposit:hover{filter:brightness(1.05)}
.ctr-deposit i{font-style:normal;font:700 14px/1 var(--font-d)}
.ctr-deposit b{font:700 12px/1 var(--font-d);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ctr-deposit.pulse{animation:v2depglow var(--dur-hero) var(--ease-out)}
@keyframes v2depglow{0%{box-shadow:0 0 0 0 rgba(var(--brand-rgb),.55)}70%{box-shadow:0 0 0 9px rgba(var(--brand-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--brand-rgb),0)}}

/* counter states (spec §5) */
.hdr-counter.is-zero .ctr-avail .ctr-val{color:var(--text-faint)} /* nothing to protect */
.hdr-counter.is-zero .ctr-nudge{display:block}
.hdr-counter.is-loading .ctr-val{position:relative;min-width:76px}
.hdr-counter.is-loading .ctr-val .rup{visibility:hidden}
.hdr-counter.is-loading .ctr-val::after{content:"";position:absolute;left:0;top:50%;margin-top:-10px;width:76px;height:20px;border-radius:4px;background:var(--surface-2);animation:v2sk 1.4s var(--ease-out) infinite}
.hdr-counter.is-loading .ctr-eye{opacity:.6;pointer-events:none}
.hdr-counter.is-stale .ctr-cap::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--text-faint);margin-right:5px;vertical-align:1px}

/* condensed balance chip [₹20,450│＋] — visible only while the counter is
   folded (scrolled home, match/page screens); the ＋ cap is the gold object */
.hdr-chip{display:none;align-items:center;height:32px;border-radius:10px;overflow:hidden;flex:none;background:var(--surface-2);border:1px solid var(--border)}
.chip-bal{height:100%;padding:0 10px;display:flex;align-items:center;font:600 13.5px/1 var(--font-d);letter-spacing:.02em;color:var(--text);white-space:nowrap}
.chip-dep{width:28px;height:100%;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--brand-hot),var(--brand));color:var(--brand-ink);font:700 14px/1 var(--font-d)}

/* settlement rule — the header's bottom edge is a live exposure gauge:
   1px hairline track + 2px amber fill anchored left (Warn family, never
   Brand). Decorative only; the values speak in the counter. */
.hdr-rule{position:relative;height:var(--ruleH)}
.hdr-rule::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--border)}
#v2-rule-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--rule-fill);transition:width var(--dur-base) var(--ease-out)}
#v2-rule-fill.settled{animation:v2settle 600ms var(--ease-out) forwards}
@keyframes v2settle{0%,50%{opacity:1;background:var(--warn)}100%{opacity:0;background:var(--warn)}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* condense model (spec §2.2) — phones only; desktop never condenses */
@media (max-width:980px){
  /* Simple/Pro lives in Profile → Interface on phones. Colour theme remains
     one tap away in the header at every viewport size. */
  .hdr-right .modep{display:none}
  /* guests: LOG IN/JOIN are the identity affordance; avatar returns authed */
  .v2-app:not(.is-authed) .avatar{display:none}
  /* match/page screens start and stay condensed — betting wants vertical
     room; the balance stays one glance away in the chip (§5.8) */
  .v2-app.is-authed[data-screen="match"],.v2-app.is-authed[data-screen="page"]{--hdr1HX:48px;--hdr2HX:0px}
  /* scroll-driven condense: current height flips, --stickPad stays put */
  .v2-app.is-authed.is-condensed{--hdr1H:48px;--hdr2H:0px}
  .v2-app.is-authed.is-condensed .hdr-counter>*,
  .v2-app.is-authed[data-screen="match"] .hdr-counter>*,
  .v2-app.is-authed[data-screen="page"] .hdr-counter>*{opacity:0}
  .v2-app.is-authed.is-condensed .hdr-chip,
  .v2-app.is-authed[data-screen="match"] .hdr-chip,
  .v2-app.is-authed[data-screen="page"] .hdr-chip{display:flex;animation:v2chipin var(--dur-instant) var(--ease-out) 120ms both}
  .v2-app.is-authed.is-condensed .wordmark b{font-size:15px} /* brand steps down a tier */
}
@keyframes v2chipin{0%{opacity:0}100%{opacity:1}}

/* desktop-only middle cluster */
.tb-mid{display:none;align-items:center;gap:14px;min-width:0;flex:1;padding:0 6px}
.tb-search{
  flex:1;max-width:520px;display:flex;align-items:center;gap:9px;height:34px;padding:0 11px;
  border-radius:8px;background:var(--surface);border:1px solid var(--border);color:var(--text-faint);
}
.tb-search input{flex:1;min-width:0;font:500 12.5px/1 var(--font-b);color:var(--text)}
.tb-search input::placeholder{color:var(--text-faint)}
.tb-live{display:flex;align-items:center;gap:6px;font:600 11px/1 var(--font-d);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);flex:none;white-space:nowrap}
.tb-live em{font-style:normal;color:var(--ink-live)}
/* Light theme: dim grey on a near-white bar left this all but invisible. The
   live count is a headline fact — it gets full text weight and a live-tinted
   dot, not the muted treatment used for secondary chrome. */
:root[data-theme="daylight"] .tb-live{color:var(--text);font-weight:700}
:root[data-theme="daylight"] .tb-live em{color:var(--ink-live);text-shadow:none}
/* mobile pull-down search bar */
/* sits BELOW the settlement rule now — the rule is the divider above it,
   and the bar carries its own bottom hairline as the header's open edge */
.searchbar{display:flex;align-items:center;gap:9px;height:42px;padding:0 14px;border-bottom:1px solid var(--border);color:var(--text-faint)}
.searchbar input{flex:1;min-width:0;font:500 13.5px/1 var(--font-b);color:var(--text);height:100%}
.searchbar input::placeholder{color:var(--text-faint)}
.searchbar .sb-clear{width:34px;height:42px;display:flex;align-items:center;justify-content:center;color:var(--text-faint)}
.v2-app.search-open .searchbar{display:flex}
body.v2-searching .lnow-wrap{display:none}

/* ── FRAME (mobile: single column · desktop: rail | center | side) ── */
.frame{position:relative;min-height:100vh}
/* content padding uses --stickPad (the EXPANDED header height) so the page
   never reflows when the header condenses mid-scroll; sticky pins keep
   following --stick, the live height. */
.center{min-width:0;padding:calc(var(--stickPad)) 0 calc(var(--navH) + var(--safe-b) + var(--v2-vv-bottom) + 24px)}
.v2-app.search-open .center{padding-top:calc(var(--stickPad) + 42px)}
.rail,.side{display:none}

/* ── SPORT TABS — flat underline, dense ──────────────────────────── */
.stabs{display:flex;gap:2px;overflow-x:auto;padding:6px 8px 0;scrollbar-width:none;border-bottom:1px solid var(--border)}
.stabs::-webkit-scrollbar{display:none}
.stab{
  flex:none;display:flex;align-items:center;gap:5px;height:34px;padding:0 10px;
  font:600 11px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
  border-bottom:2px solid transparent;position:relative;white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.stab::after{content:"";position:absolute;inset:-5px 0}
.stab.on{color:var(--ink-brand);border-bottom-color:var(--brand)}
.stab i{font:600 10px/1 var(--font-b);font-style:normal;padding:2px 4px;border-radius:4px;background:var(--surface-3);color:var(--text-dim);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.stab i:empty{display:none}
.stab i.lv{background:rgba(var(--live-rgb),.15);color:var(--ink-live)}
.stab.on i{background:rgba(var(--brand-rgb),.14);color:var(--ink-brand)}
.stab .sport-glyph,.stab .sport-icon-art img{width:14px;height:14px}
.stab-spacer{flex:1 0 8px}
.stab.stab-util{font-size:10px;letter-spacing:.08em;color:var(--text-faint)}
.stab.stab-util.on{color:var(--ink-brand)}

/* ── LIVE NOW strip — flat stadium score-bugs ────────────────────── */
.lnow-wrap{border-bottom:1px solid var(--border);background:rgba(var(--sunk-rgb),.35)}
.lnow-head{display:flex;align-items:center;gap:7px;height:26px;padding:0 12px}
.lnow-head b{font:600 11px/1 var(--font-d);letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.lnow-head .gmeta{margin-left:auto;font:600 11px/1 var(--font-b);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.lnow{display:flex;gap:6px;overflow-x:auto;padding:2px 10px 10px;scrollbar-width:none;scroll-snap-type:x proximity}
.lnow::-webkit-scrollbar{display:none}
.lncard{
  flex:none;width:216px;scroll-snap-align:start;border-radius:8px;overflow:hidden;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);
  display:flex;flex-direction:column;
}
.lncard:active{background:var(--surface-2)}
.ln-top{display:flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.ln-top .ln-comp{font:600 9px/1 var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-top .lvl{margin-left:auto;display:flex;align-items:center;gap:4px;font:700 9px/1 var(--font-b);letter-spacing:.1em;color:var(--ink-live);flex:none}
.ln-mid{display:flex;align-items:center;gap:6px;padding:8px 9px 2px;min-width:0}
.ln-mid .t{display:flex;align-items:center;gap:5px;min-width:0;font:600 13px/1 var(--font-d);letter-spacing:.02em}
.ln-mid .t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ln-mid .vs{color:var(--text-faint);font-size:10px;flex:none}
.ln-score{
  padding:2px 9px 7px;font:500 10.5px/1.35 var(--font-b);color:var(--text-dim);
  display:-webkit-box;min-height:30px;overflow:hidden;white-space:normal;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;
}
/* Live information sits on a neutral broadcast deck in Daylight. White cards
   advance from the cool canvas; graphite title bars establish hierarchy; only
   semantic status and market colours carry saturation. */
:root[data-theme="daylight"] .lnow-wrap{background:#EEF1F4;border-bottom-color:#C4CBD2;box-shadow:inset 0 1px 0 #FFF}
:root[data-theme="daylight"] .lnow-head,
:root[data-theme="daylight"] .ln-top,
:root[data-theme="daylight"] .grphead,
:root[data-theme="daylight"] .side-in .p-head{
  color-scheme:dark;color:#F8FAFC;
  background:linear-gradient(180deg,#25292E 0%,#121416 56%,#090A0B 100%);
  border-bottom-color:#3B4046;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.9);
}
:root[data-theme="daylight"] .lnow-head b,
:root[data-theme="daylight"] .grphead b,
:root[data-theme="daylight"] .side-in .p-title{color:#F8FAFC}
:root[data-theme="daylight"] .ln-top .ln-comp{color:#DDE2E7}
:root[data-theme="daylight"] .ln-top .lvl{color:#FF8A70}
:root[data-theme="daylight"] .lnow-head .gmeta,
:root[data-theme="daylight"] .grphead .gmeta,
:root[data-theme="daylight"] .side-in .p-meta{color:#CBD2D9}
:root[data-theme="daylight"] .grphead .gmeta em{color:#FF8A70}
:root[data-theme="daylight"] .lncard{background:#FFF;border-color:#C5CBD2;box-shadow:0 2px 8px rgba(16,20,24,.10)}
:root[data-theme="daylight"] .ln-mid{color:var(--text)}
:root[data-theme="daylight"] .ln-score{margin:4px 7px 7px;padding:6px 7px;min-height:27px;border:1px solid #D8DDE2;border-radius:5px;background:#F8F9FA;color:#20262C;font-weight:650}
.ln-cells{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:0 7px 7px}
.ln-cells .cell{height:34px}
.ln-cells .cell::after{inset:-5px 0}
.ln-cells .cell .o{font-size:12.5px}
.ln-cells .cell .sz{display:none}

/* ── THE COUPON (Betfair-density, flat) ──────────────────────────── */
.grp{border-bottom:1px solid var(--border)}
.grphead{
  position:sticky;top:var(--stick);z-index:16;height:28px;
  display:flex;align-items:center;gap:7px;padding:0 12px;
  background:var(--surface-2);border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(var(--sunk-rgb),.5);
}
.grphead .comp-ic{display:flex;align-items:center;justify-content:center;flex:none;width:15px}
.grphead b{font:600 11px/1 var(--font-d);letter-spacing:.12em;text-transform:uppercase;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grphead .gmeta{margin-left:auto;font:600 11px/1 var(--font-b);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);flex:none}
.grphead .gmeta em{font-style:normal;color:var(--ink-live)}
/* shared grids: c4 = text + BLBL (2 runners) · c3 = text + 1/X/2 */
.c4{display:grid;grid-template-columns:minmax(0,1fr) 45px 45px 45px 45px;column-gap:2px;align-items:center;padding:0 8px 0 12px}
.c3{display:grid;grid-template-columns:minmax(0,1fr) 60px 60px 60px;column-gap:2px;align-items:center;padding:0 8px 0 12px}
.colhead{position:sticky;top:calc(var(--stick) + 28px);z-index:15;height:20px;background:var(--bg)}
.colhead span{font:600 9px/1 var(--font-b);letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--text-faint)}
.colhead .cl-l{text-align:left;padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.colhead .ch-v{text-align:right}
.colhead .ch-v,.colhead .ch-m{display:none}
.colhead .cb{color:var(--back)}
.colhead .clv{color:var(--lay)}
:root[data-theme="daylight"] .colhead .cb{color:var(--back-strong)}
:root[data-theme="daylight"] .colhead .clv{color:var(--lay-strong)}
.vol{display:none;font:500 11px/1 var(--font-b);color:var(--text-dim);text-align:right;white-space:nowrap}
.mkc{display:none;font:600 11px/1 var(--font-b);color:var(--text-faint);text-align:center;white-space:nowrap}
.crow,.frow{min-height:50px;padding-top:6px;padding-bottom:6px;border-top:1px solid var(--border);cursor:pointer}
.crow:first-of-type,.frow:first-of-type{border-top:0}
.crow:active,.frow:active{background:var(--surface-2)}
/* Betfair-style fixture rows stay pure white above the warm-ivory canvas. */
:root[data-theme="daylight"] .crow,
:root[data-theme="daylight"] .frow{background:var(--surface)}
:root[data-theme="daylight"] .crow:active,
:root[data-theme="daylight"] .frow:active{background:#F1F4F7}
.c-main{display:flex;flex-direction:column;gap:3px;min-width:0;padding-right:8px}
.c-meta{
  display:flex;align-items:center;gap:5px;
  font:500 10px/1 var(--font-b);letter-spacing:.02em;color:var(--text-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.c-meta .sc{color:var(--text-dim);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-meta .ev-when-day{color:var(--text-faint)}
.c-meta .ev-when-time{color:var(--text-dim);font-weight:700}
.c-meta .ev-when-time.is-soon{color:var(--ink-warn)}
.c-meta .ev-when-note{color:var(--text-faint)}
.favbtn{
  width:26px;height:24px;margin:-5px 0 -5px auto;flex:none;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-faint);font:600 16px/1 var(--font-b);
}
.favbtn:hover,.favbtn:focus-visible{color:var(--ink-brand);background:rgba(var(--brand-rgb),.1)}
.favbtn.on{color:var(--ink-brand)}
.v2-stream{display:inline-flex;align-items:center;color:var(--ink-live);flex:none;margin-left:2px}
.v2-stream svg{display:block}
.ldot{width:5px;height:5px;border-radius:50%;background:var(--live);flex:none;position:relative}
.ldot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:v2ping 1.8s var(--ease-out) infinite}
@keyframes v2ping{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(2.4);opacity:0}}
/* A coupon can contain dozens of live indicators. Keep row dots crisp and
   static; reserve the pulse for the single high-level LIVE status so scrolling
   does not promote a layer for every fixture. */
.c-meta .ldot::after,.lncard .ldot::after,.ln .ldot::after{animation:none;opacity:.32;transform:scale(1.65)}
.c-teams{display:flex;align-items:center;gap:5px;min-width:0;font:600 14px/1 var(--font-d);letter-spacing:.02em;white-space:nowrap}
.c-teams .vs{color:var(--text-faint);font-size:11px;flex:none}
.c-teams .t{display:flex;align-items:center;gap:5px;min-width:0}
.c-teams .t > span{overflow:hidden;text-overflow:ellipsis}
.c-teams .tn-f{display:none}
.c-teams .mk{margin-left:auto;padding-left:6px;flex:none;font:600 10px/1 var(--font-b);color:var(--text-faint)}
.team-pl{
  display:inline-flex;align-items:center;gap:3px;flex:none;max-width:none;
  padding:2px 4px;border:1px solid currentColor;border-radius:4px;
  font:700 10px/1 var(--font-d);letter-spacing:0;background:var(--bg-sunken);
  font-variant-numeric:tabular-nums;
}
.team-pl[hidden]{display:none!important}
.team-pl.win{color:var(--ink-pos)}
.team-pl.risk{color:var(--ink-neg)}
.team-pl.flat{color:var(--text-dim)}
.team-pl > span{overflow:visible!important;text-overflow:clip!important}
.team-pl-after{padding-left:3px;border-left:1px solid var(--border-strong);color:var(--ink-brand)}
.sb1 .team-pl{font-size:10px;padding:2px 4px}
/* The position strip: what the punter stands to win or lose on each side, on a
   line of its own so the money never competes with the team names for width.
   Each figure is tagged with its side's abbreviation, because once the numbers
   leave the names they need to say which is which. Stays hidden until a side
   actually carries a position, so unheld rows keep their height. */
.c-pos{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.c-pos[hidden]{display:none!important}
.cp-i{display:inline-flex;align-items:center;gap:5px;min-width:0}
.cp-t{
  flex:none;font:700 9.5px/1 var(--font-b);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-faint);white-space:nowrap;
}
/* Inside the strip the label already says which side a figure belongs to, so
   the boxed treatment that separated it from an adjacent team name is dead
   weight. Dropping it buys the numbers a legible size in the same space. */
.c-pos .team-pl{border-color:transparent;background:transparent;padding:1px 0;font-size:12px;gap:4px}
.c-pos .team-pl-after{border-left-color:var(--border);padding-left:5px;margin-left:1px}
.lncard .c-pos{padding:5px 9px 0}
/* On the match score bar the strip is its own row under the score, so the
   sticky header reads name → score → your position, top to bottom. */
.sbar .c-pos{padding:0 12px 5px}
body.v2-comfortable .crow,body.v2-comfortable .frow{min-height:64px;padding-top:9px;padding-bottom:9px}
body.v2-comfortable .c-main{gap:5px}
body.v2-comfortable .c-teams{font-size:15px}
/* mobile: football rows show best-back 1/X/2 only */
.frow .cell.lay{display:none}
.colhead.c3 .h-l{display:none}

/* ── FLAT ODDS CELLS — the atom of the whole design ──────────────── */
.cell{
  position:relative;height:40px;border-radius:6px;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:var(--back-cell);border:1px solid var(--back-cell-bd);
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.cell::after{content:"";position:absolute;inset:-4px 0}  /* ≥44px hit area, without crossing into adjacent prices */
.cell .o{display:flex;align-items:baseline;justify-content:center;gap:2px;font:600 15px/1 var(--font-d);color:var(--back-num)}
.cell .o i{font-style:normal;font-size:10px;transform:translateY(-2px);color:var(--back)}
.cell .sz{font:500 10px/1 var(--font-b);color:var(--text-dim);margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell.lay{background:var(--lay-cell);border-color:var(--lay-cell-bd)}
.cell.lay .o{color:var(--lay-num)}
.cell.lay .o i{color:var(--lay)}
.cell:active{background:var(--back-cell-hi)}
.cell.lay:active{background:var(--lay-cell-hi)}
@media (prefers-reduced-motion:no-preference){
  .cell{transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out)}
  .cell:active{transform:scale(.97)}
}
/* armed = this cell's inline stake card is open; pop = the tap beat (1→1.04→1) */
.cell.armed{background:var(--back-cell-hi);border-color:var(--back)}
.cell.lay.armed{background:var(--lay-cell-hi);border-color:var(--lay)}
.cell.pop{animation:v2cellpop .3s var(--ease-out)}
@keyframes v2cellpop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
/* Price flash = composited opacity fade of a STATIC inset ring (::before),
   never an animated box-shadow. Animating box-shadow repaints the cell every
   frame; on a live board dozens flash per odds tick, and those repaints starve
   the shared compositor the cross-origin live video presents through — the
   regression that made playback jerky. Opacity/transform stay on the GPU. */
.cell.up::before,.cell.down::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;animation:v2cellflash var(--dur-tick) var(--ease-out)}
.cell.up::before{box-shadow:inset 0 0 0 2px rgba(var(--pos-rgb),.6)}
.cell.down::before{box-shadow:inset 0 0 0 2px rgba(var(--neg-rgb),.55)}
@keyframes v2cellflash{0%{opacity:1}100%{opacity:0}}
.cell.is-off{background:var(--bg-sunken);border-color:var(--border);cursor:default}
.cell.is-off .o{color:var(--text-faint)}
.cell.is-off .o i{display:none}
/* Pre-match Match Odds: priced but non-tappable (bettable in-play only). Keep the
   price more legible than a suspension so upcoming winners stay readable. */
.cell.is-info{cursor:not-allowed}
.cell.is-info .o{color:var(--text-muted)}
/* suspended pair */
.susp{
  grid-column:span 2;height:40px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--warn-rgb),.08);border:1px solid rgba(var(--warn-rgb),.35);
  font:600 11px/1 var(--font-d);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-warn);
}
:root[data-theme="daylight"] .susp{color:#7A5200}
.foot-note{padding:18px 16px 6px;text-align:center;font:600 10px/1.6 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.foot-trust{padding:26px 16px 12px}

/* ── EMPTY / ERROR / SKELETON — flat, quiet ──────────────────────── */
.v2-empty{padding:44px 20px;text-align:center;color:var(--text-dim)}
.v2-empty h3{font:600 15px/1.3 var(--font-d);letter-spacing:.04em;color:var(--text);margin-bottom:6px}
.v2-empty p{font:500 12px/1.5 var(--font-b);color:var(--text-faint)}
.v2-load-more{display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 16px);min-height:44px;margin:12px 8px;padding:8px 14px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);font:600 11px/1 var(--font-d);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.v2-load-more span{color:var(--text-dim);font:600 11px/1 var(--font-b);letter-spacing:0}

/* ════════ RASTER ICON SET (v2-ic) ════════════════════════════════
   111 flat chartreuse/semantic PNGs — colors are BAKED IN, NEVER tint
   here. object-fit:contain keeps the transparent art square. Sizes bump
   on desktop in the ≥1024 refinements block. Sport glyphs also carry
   .v2-ic but their per-context sizing (.rit/.mnav-it/.stab .sport-glyph)
   out-specifies these, so the rails stay 18/20/14. */
.v2-ic{display:inline-block;vertical-align:middle;width:20px;height:20px;flex:none;
  background-color:var(--icon-tint,var(--brand));
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.v2-ic--sm{width:16px;height:16px}
.v2-ic--lg{width:24px;height:24px}
.v2-ic--xl{width:72px;height:72px;display:block;margin:0 auto 14px;opacity:.92}
/* leading-icon spacing per context (flex parents already gap; these are
   the non-flex text hosts + a couple of tucks) */
.pg-title .v2-ic{margin-right:9px;vertical-align:-3px}
.p-title .v2-ic{margin-right:6px;vertical-align:-2px}
.cpy .v2-ic{margin-right:5px}
.mbc-top .v2-ic{margin-left:auto;margin-right:-4px}
.rec-chip{display:inline-flex;align-items:center;gap:5px}
.uz-in .v2-ic--lg{margin-bottom:2px}
/* theme picker (Profile → Theme) */
.theme-pick{display:flex;gap:8px;padding:12px 14px 6px;flex-wrap:wrap}
.theme-opt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:7px 13px 7px 8px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--text-dim);font:600 12px/1 var(--font-b);cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast)}
.theme-opt:hover{border-color:var(--border-strong);color:var(--text)}
.theme-opt.is-active{border-color:var(--brand);color:var(--text);background:var(--surface-3)}
.theme-sw{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-strong);flex:none}
.theme-sw i{width:10px;height:10px;border-radius:50%;display:block}
/* header colour-theme switch + dropdown */
.theme-wrap{position:relative;display:flex;align-items:center}
.theme-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:80;min-width:172px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:0 14px 34px rgba(0,0,0,.42)}
.theme-pop .theme-pick{flex-direction:column;gap:6px;padding:0;flex-wrap:nowrap}
.theme-pop .theme-opt{width:100%;justify-content:flex-start}
.set-row.col>.theme-pick{padding:0}
.v2-retry{
  display:inline-block;margin-top:14px;height:38px;line-height:38px;padding:0 18px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border-strong);
  font:600 11px/38px var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--text);
}
.v2-retry:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.v2-skel{padding-top:2px}
.v2-skel .sk{background:var(--surface-2);border-radius:6px;animation:v2sk 1.4s var(--ease-out) infinite}
@keyframes v2sk{0%,100%{opacity:.55}50%{opacity:1}}
.v2-skel .sk-head{height:28px;border-radius:0;margin-bottom:2px}
.v2-skel .sk-row{height:48px;margin:2px 8px}

/* ── BOTTOM NAV — flat solid + hairline (mobile) ─────────────────── */
.mnav{
  position:fixed;inset-inline:0;
  bottom:calc(var(--safe-b-live) - var(--safe-b-max));z-index:50;
  width:100%;max-width:100vw;height:calc(var(--navH) + var(--safe-b-max));
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;
  padding:6px max(4px,var(--safe-r)) max(4px,var(--safe-b-max)) max(4px,var(--safe-l));
  background:var(--bg-sunken);border-top:1px solid var(--border);
  box-shadow:0 -2px 8px rgba(0,0,0,.20),0 -12px 28px rgba(0,0,0,.30);
  isolation:isolate;contain:layout paint;backface-visibility:hidden;
  transform:translate3d(0,0,0);will-change:transform;
  transition:transform var(--dur-sheet) var(--ease-sheet),opacity var(--dur-fast) var(--ease-out);
  overscroll-behavior:contain;touch-action:manipulation;
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .mnav{background:rgba(var(--sunk-rgb),.88);
    -webkit-backdrop-filter:blur(16px) saturate(1.15);
    backdrop-filter:blur(16px) saturate(1.15)}
}
.mnav::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:var(--line-lit);opacity:.5;pointer-events:none}
:root[data-theme="daylight"] .mnav{
  box-shadow:0 -1px 3px rgba(0,0,0,.06),0 -10px 24px rgba(0,0,0,.10)}
.mnav-it{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-width:0;min-height:48px;padding:2px 2px 0;color:var(--text-faint);position:relative;
  text-align:center;border-radius:12px;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.mnav-it:is(button){width:100%}
.mnav-it:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.mnav-it>svg,.mnav-it .v2-ic{position:relative;z-index:1;
  transition:transform var(--dur-fast) var(--ease-out)}
.mnav-it:active>svg,.mnav-it:active .v2-ic{transform:scale(.9);
  transition-duration:var(--dur-instant)}
.mnav-it::before{content:"";position:absolute;left:50%;top:calc(50% - 20px);
  width:44px;height:26px;border-radius:999px;
  background:rgba(var(--brand-rgb),.14);
  opacity:0;transform:translateX(-50%) scaleX(.55);
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-base) var(--ease-out);
  pointer-events:none}
.mnav-it span{
  display:block;position:relative;z-index:1;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 11px/1 var(--font-d);letter-spacing:.08em;text-transform:uppercase;
  transition:color var(--dur-fast) var(--ease-out);
}
.mnav-it.on{color:var(--ink-brand)}
.mnav-it.on span{color:var(--text)}
.mnav-it.on::before{opacity:1;transform:translateX(-50%) scaleX(1)}
:root[data-theme="daylight"] .mnav-it::before{background:rgba(var(--brand-rgb),.24)}
.mnav-ind{position:absolute;top:0;left:max(4px,var(--safe-l));height:3px;
  width:calc((100% - max(4px,var(--safe-l)) - max(4px,var(--safe-r)))/5);
  opacity:0;pointer-events:none;
  transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.mnav-ind::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}
.mnav:has(>.mnav-it:nth-child(1).on) .mnav-ind{opacity:1;transform:translateX(0)}
.mnav:has(>.mnav-it:nth-child(2).on) .mnav-ind{opacity:1;transform:translateX(100%)}
.mnav:has(>.mnav-it:nth-child(3).on) .mnav-ind{opacity:1;transform:translateX(200%)}
.mnav:has(>.mnav-it:nth-child(4).on) .mnav-ind{opacity:1;transform:translateX(300%)}
.mnav:has(>.mnav-it:nth-child(5).on) .mnav-ind{opacity:1;transform:translateX(400%)}
.mnav-badge{
  position:absolute;top:calc(50% - 22px);left:calc(50% + 6px);z-index:2;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--live);color:#fff;font:700 10px/1 var(--font-b);font-style:normal;text-align:center;
  border:2px solid var(--bg-sunken);
}
.mnav-badge.b2{background:var(--brand);color:var(--brand-ink)}
.mnav-badge:empty{display:none}
.mnav-it .sport-glyph,.mnav-it .sport-icon-art img{width:20px;height:20px}
body.v2-keyboard-open .mnav{
  opacity:0;pointer-events:none;transform:translate3d(0,110%,0);
}
.v2-sports-nav{display:grid;grid-template-columns:1fr;gap:8px;padding:2px 0 4px}
.v2-sports-nav-item{
  width:100%;min-height:58px;display:flex;align-items:center;gap:12px;padding:8px 12px;
  border-radius:10px;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);text-align:left;touch-action:manipulation;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.v2-sports-nav-item:active{background:var(--surface-3)}
.v2-sports-nav-item.on{border-color:rgba(var(--brand-rgb),.55);background:rgba(var(--brand-rgb),.1)}
.v2-sports-nav-icon{width:34px;height:34px;border-radius:8px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--brand);flex:none}
.v2-sports-nav-icon .sport-glyph,.v2-sports-nav-icon .sport-icon-art img{width:24px;height:24px}
.v2-sports-nav-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.v2-sports-nav-copy b{font:600 14px/1.1 var(--font-d);letter-spacing:.05em;text-transform:uppercase}
.v2-sports-nav-copy small{font:500 11px/1.2 var(--font-b);color:var(--text-faint)}
.v2-sports-nav-item em{display:flex;align-items:center;gap:5px;color:var(--ink-live);font:600 10.5px/1 var(--font-b);font-style:normal;white-space:nowrap}
.v2-sports-nav-item > svg{color:var(--text-faint);flex:none}
@media (max-width:980px){
  html{scroll-padding-bottom:calc(var(--navH) + var(--safe-b) + var(--v2-vv-bottom) + 12px)}
}
@media (max-width:340px){
  .mnav{padding-inline:max(2px,var(--safe-l)) max(2px,var(--safe-r))}
  .mnav-it{padding-inline:1px}
  .mnav-it span{font-size:10.5px;letter-spacing:.05em}
  .mnav-it::before{width:40px}
  .mnav-ind{left:max(2px,var(--safe-l));
    width:calc((100% - max(2px,var(--safe-l)) - max(2px,var(--safe-r)))/5)}
}
@media (max-width:980px) and (orientation:landscape) and (max-height:520px){
  :root{--navH:52px}
  .mnav{padding-top:3px;padding-bottom:max(2px,var(--safe-b))}
  .mnav-it{min-height:44px;gap:2px}
  .mnav-it .v2-ic,.mnav-it svg,.mnav-it .sport-glyph,.mnav-it .sport-icon-art img{width:18px;height:18px}
  .mnav-it span{font-size:10px}
  .mnav-it::before{top:calc(50% - 16px);height:22px;width:40px}
  .mnav-badge{top:calc(50% - 19px)}
}
@media (prefers-reduced-motion:reduce){
  .mnav,.mnav-it,.mnav-it::before,.mnav-it>svg,.mnav-it .v2-ic,.mnav-it span,.mnav-ind{transition:none}
  .mnav-it:active>svg,.mnav-it:active .v2-ic{transform:none}
}

/* ── MATCH — flat score bar (sticky, dense) ──────────────────────── */
.sbar{position:sticky;top:var(--stick);z-index:26;background:var(--surface);border-bottom:1px solid var(--border)}
.sb1{display:flex;align-items:center;gap:7px;min-height:30px;padding:3px 12px;font:600 13px/1 var(--font-d);letter-spacing:.02em}
.sb1 .lvl{display:flex;align-items:center;gap:4px;font:700 10px/1 var(--font-b);letter-spacing:.1em;color:var(--ink-live);flex:none}
.sb1 .lvl.is-result{color:var(--ink-pos)}
.sb1 .sb-t{display:flex;align-items:center;gap:5px;min-width:0}
.sb1 .sb-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb1 .vs{color:var(--text-faint);font-size:11px;flex:none}
.sb1 .comp{margin-left:auto;font:600 11px/1 var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);flex:none;max-width:34%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb2{display:flex;align-items:center;gap:6px;min-height:20px;padding:0 12px 4px;font:500 11px/1.3 var(--font-b);color:var(--text-dim)}
.sb2 .sb-score{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.sb2 .ev-when-day{color:var(--text-faint)}
.sb2 .ev-when-time{color:var(--text-dim);font-weight:700}
.sb2 .ev-when-time.is-soon{color:var(--ink-warn)}

/* ── MARKET NAV (sticky under the score bar: search field + pill bar).
   --sbarH is measured by JS — the cricket bug row changes the bar height. ── */
.mnavwrap{
  position:sticky;top:calc(var(--stick) + var(--sbarH,58px));z-index:25;
  background:var(--bg);border-bottom:1px solid var(--border);
}
.mksearch{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-bottom:1px solid var(--border);color:var(--text-faint)}
.mksearch svg{width:15px;height:15px;flex:none}
.mksearch input{flex:1;min-width:0;font:500 12.5px/1 var(--font-b);color:var(--text);height:100%}
.mksearch input::placeholder{color:var(--text-faint)}
.mksearch input::-webkit-search-cancel-button{display:none}
.mks-n{flex:none;font:600 10px/1 var(--font-b);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-brand);white-space:nowrap}
.mks-x{position:relative;width:30px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--text-dim)}
.mks-x::after{content:"";position:absolute;inset:-4px}
.mks-hide{display:none !important}
.mtabs{
  display:flex;gap:5px;overflow-x:auto;padding:4px 10px;scrollbar-width:none;
  background:var(--bg);
}
.mtabs::-webkit-scrollbar{display:none}
.mtab{
  height:26px;padding:0 10px;border-radius:6px;flex:none;position:relative;white-space:nowrap;
  font:600 11px/24px var(--font-d);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);
  transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast);
}
.mtab::after{content:"";position:absolute;inset:-6px 0}
.mtab.on{color:var(--ink-brand);border-color:rgba(var(--brand-rgb),.5);background:rgba(var(--brand-rgb),.12)}
.mtabs .mt-all{margin-left:auto;flex:none;font:600 10px/26px var(--font-b);letter-spacing:.08em;color:var(--text-faint);white-space:nowrap}

/* ── LIVE VIDEO — route-level, never touched by market polling ───── */
.match-stream{
  /* overflow:visible — never ancestor-clip the cross-origin video surface with a
     rounded mask (that forces a per-frame mask render pass on mobile = jerky).
     The rounded corners live on the head (top) + body/frame (bottom) instead. */
  position:relative;margin:8px 10px 0;overflow:visible;border:1px solid var(--border-strong);border-radius:10px;
  background:var(--surface);box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.match-stream-gate{min-height:44px;padding:0 10px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border-color:var(--border);box-shadow:none}
.match-stream-gate-line{font:500 11px/1.2 var(--font-b);color:var(--text-dim);white-space:nowrap;text-align:center}
.match-stream-head{min-height:56px;padding:6px 8px 6px 10px;display:flex;align-items:center;gap:9px;background:var(--surface-2);border-bottom:1px solid var(--border);border-radius:10px 10px 0 0}
.match-stream-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:8px;color:var(--brand);background:rgba(var(--brand-rgb),.1);border:1px solid rgba(var(--brand-rgb),.34)}
.match-stream-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.match-stream-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.match-stream-copy b{display:flex;align-items:center;gap:6px;font:600 11px/1 var(--font-d);letter-spacing:.13em;text-transform:uppercase;color:var(--text)}
.match-stream-copy b i{width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(255,122,90,.12)}
.match-stream-copy small{font:500 10px/1.2 var(--font-b);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-stream-actions{display:flex;align-items:center;gap:6px;flex:none}
.match-stream-reload,.match-stream-toggle{position:relative;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--surface-3);border:1px solid var(--border-strong);font:600 11px/1 var(--font-d);letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim)}
.match-stream-reload{min-width:44px;padding:0 10px;gap:6px}
.match-stream-reload svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.match-stream-reload:disabled{cursor:wait;opacity:.72}
.match-stream-reload:hover:not(:disabled),.match-stream-reload:focus-visible,.match-stream-toggle:hover,.match-stream-toggle:focus-visible{color:var(--ink-brand);border-color:rgba(var(--brand-rgb),.65)}
.match-stream.is-slow .match-stream-reload{color:var(--ink-brand);border-color:rgba(var(--brand-rgb),.65);background:rgba(var(--brand-rgb),.1)}
.match-stream.is-reconnecting .match-stream-reload svg{animation:v2streamspin .8s linear infinite}
.match-stream-toggle{min-width:96px;padding:0 11px}
.match-stream-body{position:relative;width:100%;aspect-ratio:16/9;background:#030504;border-radius:0 0 10px 10px}
/* radius on the element that OWNS the video surface — rides the compositor fast
   path; no opacity/transition dance (blending blocks hardware-overlay promotion). */
.match-stream-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;border-radius:0 0 10px 10px;opacity:1}
.match-stream-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-faint);background:#030504;border-radius:0 0 10px 10px;transition:opacity var(--dur-fast) var(--ease-out)}
.match-stream-loading span{width:26px;height:26px;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--brand);animation:v2streamspin .8s linear infinite}
.match-stream-loading b{font:600 10px/1 var(--font-d);letter-spacing:.12em;text-transform:uppercase}
@keyframes v2streamspin{to{transform:rotate(360deg)}}
.match-stream.is-ready .match-stream-loading{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-out),visibility 0s linear var(--dur-fast)}
.match-stream.is-collapsed .match-stream-head{border-bottom:0}
.match-stream.is-collapsed .match-stream-body{display:none}
.match-stream-reload:focus-visible,.match-stream-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:520px){.match-stream-reload{width:44px;padding:0}.match-stream-reload>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}
@media (max-width:360px){.match-stream-gate{padding-inline:4px}.match-stream-gate-line{font-size:9px}}
@media (max-width:360px){.match-stream-head{gap:7px;padding-left:8px}.match-stream-icon{width:30px;height:30px}.match-stream-toggle{min-width:86px;padding-inline:8px}.match-stream-actions{gap:4px}}
@media (prefers-reduced-motion:reduce){.match-stream-loading span,.match-stream.is-reconnecting .match-stream-reload svg{animation:none}.match-stream-frame,.match-stream-loading{transition:none}}
/* ── Docked mini-player (picture-in-picture) — the SAME element, only its
   position changes so the stream never reloads. Right-side corner by default,
   draggable to any corner, tap/⤢ to expand, ✕ to dismiss. ─────────────── */
/* Default park: MOBILE = top-right under the sticky header (clear of the bottom
   nav and the thumb). matchStreamDockAnchor() re-applies these as measured inline
   values on dock, so a centred max-width frame can't strand the player out at the
   screen edge; these rules are the baseline it starts from. */
.match-stream.is-docked{
  position:fixed;top:calc(var(--stick,56px) + 10px + env(safe-area-inset-top,0px));
  right:calc(10px + env(safe-area-inset-right,0px));left:auto;bottom:auto;
  width:min(46vw,232px);margin:0;z-index:60;
  border-radius:12px;overflow:hidden;box-shadow:0 14px 38px rgba(0,0,0,.6);
  border-color:rgba(var(--brand-rgb),.4);cursor:grab;touch-action:none;
  animation:streamDockIn .26s cubic-bezier(.2,.8,.2,1);
}
/* DESKTOP: sit in the right rail column, below the match centre. */
@media (min-width:981px){
  .match-stream.is-docked{top:auto;bottom:18px;width:min(300px,var(--sideW))}
}
.match-stream.is-docked.is-dragging{cursor:grabbing}
.match-stream.is-docked .match-stream-head{display:none}
.match-stream.is-docked .match-stream-body{border-radius:12px}
/* Anchor-agnostic entrance (scale only) — the mini parks top-right on mobile and
   bottom-right on desktop, so a directional slide would read backwards on one. */
@keyframes streamDockIn{from{opacity:.35;transform:scale(.9)}to{opacity:1;transform:none}}
.match-stream-dockbar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:flex-end;gap:5px;padding:5px;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);pointer-events:none}
.match-stream-dockbtn{pointer-events:auto;width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(0,0,0,.5);color:#fff;padding:0;cursor:pointer;backdrop-filter:blur(3px)}
.match-stream-dockbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.match-stream-dockbtn:hover{background:rgba(0,0,0,.82)}
.match-stream-spacer{pointer-events:none}
@media (prefers-reduced-motion:reduce){.match-stream.is-docked{animation:none}}

/* ── ADMIN BET DELAY — compact exchange control desk ───────────── */
.admin-bet-delay{
  position:relative;margin:8px 10px 0;padding:9px 9px 9px 12px;display:grid;
  grid-template-columns:minmax(150px,.72fr) minmax(330px,1.65fr) auto;
  grid-template-areas:"title fields save" "status status status";
  align-items:center;gap:8px 10px;overflow:hidden;border:1px solid rgba(var(--brand-rgb),.42);
  border-radius:10px;background:var(--surface);box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.admin-bet-delay::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--brand)}
.admin-bet-delay-title{grid-area:title;min-width:0;display:flex;align-items:center;gap:8px}
.admin-bet-delay-clock{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:8px;color:var(--ink-brand);background:rgba(var(--brand-rgb),.1);border:1px solid rgba(var(--brand-rgb),.32)}
.admin-bet-delay-clock svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.admin-bet-delay-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.admin-bet-delay-copy b{font:600 11px/1 var(--font-d);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-brand)}
.admin-bet-delay-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px/1.2 var(--font-b);color:var(--text-faint)}
.admin-bet-delay-fields{grid-area:fields;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.admin-bet-delay-field{min-width:0;padding:5px 6px 6px;display:flex;flex-direction:column;gap:4px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
.admin-bet-delay-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 9px/1 var(--font-b);letter-spacing:.04em;color:var(--text-dim)}
.admin-bet-delay-input-wrap{position:relative;display:block;min-width:0}
.admin-bet-delay-input{width:100%;height:32px;padding:0 24px 0 7px;appearance:textfield;border:1px solid var(--border-strong);border-radius:6px;background:var(--bg-sunken);color:var(--text);font:600 13px/1 var(--font-d);font-variant-numeric:tabular-nums;text-align:right}
.admin-bet-delay-input::-webkit-outer-spin-button,.admin-bet-delay-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.admin-bet-delay-input:hover{border-color:rgba(var(--brand-rgb),.55)}
.admin-bet-delay-input:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.admin-bet-delay-unit{position:absolute;right:6px;top:50%;transform:translateY(-50%);pointer-events:none;font:600 10px/1 var(--font-b);letter-spacing:.03em;color:var(--text-faint)}
.admin-bet-delay-save{grid-area:save;min-width:94px;min-height:44px;padding:0 12px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(var(--brand-rgb),.75);border-radius:8px;background:var(--brand);color:var(--brand-ink);font:600 11px/1 var(--font-d);letter-spacing:.09em;text-transform:uppercase;text-align:center}
.admin-bet-delay-save:hover{background:var(--brand-hot)}
.admin-bet-delay-save:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.admin-bet-delay-save:disabled{cursor:wait;opacity:.66}
.admin-bet-delay-status{grid-area:status;min-width:0;font:600 10px/1.25 var(--font-b);color:var(--text-faint)}
.admin-bet-delay-status:empty{display:none}
.admin-bet-delay-status[data-state="saving"]{color:var(--text-dim)}
.admin-bet-delay-status[data-state="success"]{color:var(--ink-pos)}
.admin-bet-delay-status[data-state="error"]{color:var(--ink-neg)}
@media(max-width:700px){
  .admin-bet-delay{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title save" "fields fields" "status status"}
  .admin-bet-delay-input{height:44px;font-size:15px}
}
@media(max-width:380px){.admin-bet-delay-copy small{display:none}.admin-bet-delay{column-gap:7px}.admin-bet-delay-save{min-width:90px;padding:0 9px}.admin-bet-delay-fields{gap:4px}.admin-bet-delay-field{padding-inline:5px}}

/* ── MARKET WALL — flat blocks, always open, max info ──────────────
   Phone geometry is DENSE by design: 28px market head, 16px caption strip,
   40px rows with 34px cells (hit area stays ≥44px via .cell::after). The
   ≥1024 refinements block below re-lifts everything for desktop. ── */
.market{margin:6px 8px 0;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.mk-head{display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.mk-title{font:600 12px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-tag{flex:none;font:600 10px/1 var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-brand);background:rgba(var(--brand-rgb),.12);border:1px solid rgba(var(--brand-rgb),.3);border-radius:4px;padding:2px 4px}
.mk-tag.susp-tag{color:var(--ink-warn);background:rgba(255,176,32,.14);border-color:rgba(255,176,32,.45);font-size:11px;font-weight:800;letter-spacing:.04em}
.mk-tag.susp-tag.result-tag{color:var(--ink-pos);background:rgba(var(--pos-rgb),.12);border-color:rgba(var(--pos-rgb),.45)}
.mk-meta{margin-left:auto;font:500 11px/1 var(--font-b);letter-spacing:.04em;color:var(--text-faint);white-space:nowrap;flex:none}
.mk-cashbar{display:flex;flex-direction:column;background:rgba(var(--brand-rgb),.055);border-bottom:1px solid var(--border)}
.mk-cashbar[hidden]{display:none!important}
.mk-cashpos{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 8px 4px 10px}
.mk-cashpos+.mk-cashpos{border-top:1px solid var(--border)}
.mk-cash-label{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mk-cash-label b{font:600 11.5px/1.1 var(--font-d);letter-spacing:.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-cash-label small{font:500 9.5px/1 var(--font-b);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.mk-cashpos .ob-cash{margin-left:0;min-height:36px;padding:6px 11px;font-size:10.5px}
/* --cellW feeds BOTH the price columns and the .celllock overlay width, so the
   two can never drift apart (desktop only re-tunes the var). Narrower 72px
   cells give the runner/fancy label the reclaimed width. */
.m2{--cellW:72px;display:grid;grid-template-columns:minmax(0,1fr) var(--cellW) var(--cellW);column-gap:3px;align-items:center;padding:0 8px 0 10px}
.mk-cols{height:16px;background:var(--surface)}
.mk-cols span{font:600 10px/1 var(--font-b);letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--text-faint)}
.mk-cols .cb{color:rgba(126,184,255,.78)}
.mk-cols .clv{color:rgba(232,106,158,.72)}
.runner{position:relative;min-height:40px;padding-top:3px;padding-bottom:3px;border-top:1px solid var(--border)}
.rn{display:flex;flex-direction:column;gap:2px;min-width:0;padding-right:6px}
.rn-top{display:flex;align-items:center;gap:6px;min-width:0}
.rn-name{font:600 13px/1.1 var(--font-d);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn-result{
  flex:none;padding:3px 5px;border-radius:4px;
  font:700 9px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);background:var(--surface-3);border:1px solid var(--border-strong);
}
.rn-result.is-winner{color:var(--ink-pos);background:rgba(var(--pos-rgb),.12);border-color:rgba(var(--pos-rgb),.45)}
.rn-result.is-loser{color:var(--ink-neg);background:rgba(var(--neg-rgb),.09);border-color:rgba(var(--neg-rgb),.32)}
.runner.has-result.is-winner{background:linear-gradient(90deg,rgba(var(--pos-rgb),.08),transparent 45%);box-shadow:inset 3px 0 0 rgba(var(--pos-rgb),.72)}
.runner.has-result.is-loser .rn-name{color:var(--text-dim)}
.market.is-result .cell{filter:saturate(.25)}
.rn-sub{font:500 11px/1 var(--font-b);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* provider "bhav chalega" running-range note under a fancy line — subdued */
.fancy-msg{font:500 10px/1.3 var(--font-b);color:var(--text-faint);opacity:.85;letter-spacing:.01em}
.fancy-msg[hidden]{display:none}
.runner .cell{height:34px}
.runner .cell::after{inset:-5px 0}  /* 34px visual keeps a ≥44px hit area */
.runner .cell .o{font-size:14px}
.runner .cell .o i{font-size:10px}
.runner .cell .sz{font-size:11px}
.runner .susp{height:34px}
.market.is-suspended .cell{opacity:.45;pointer-events:none}
.runner.is-suspended .cell{opacity:.45;pointer-events:none}
/* ── CELL-LOCK OVERLAY — the market state ON TOP of the price cells ──
   Replaces any indicator beside the odds (which clipped the fancy line
   name). SUSPENDED = warm + hard; ball running = calm graphite. Spans
   exactly the two price columns; never intercepts taps (the cells under
   it are already inert). Toggled as a leaf patch — no transitions, so
   reduced-motion needs no carve-out. */
.celllock{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2;
  width:calc(var(--cellW,72px)*2 + 3px);height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;gap:6px;pointer-events:none;
  /* Near-opaque so the price digits behind can't bleed through and muddy the
     label — the readability complaint was a translucent panel + 10px muted text. */
  background:rgba(var(--sunk-rgb),.93);border:1px solid rgba(var(--warn-rgb),.55);
  box-shadow:0 1px 4px rgba(0,0,0,.32);
  font:800 12px/1 var(--font-d);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-warn);
  white-space:nowrap;overflow:hidden;
}
/* Leading status dot — a static amber pip for SUSPENDED, a pulsing coral pip
   for BALL RUNNING (see below). Reads at a glance even before the word does. */
.celllock::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:currentColor;box-shadow:0 0 6px currentColor;
}
.celllock[hidden]{display:none}
/* "ballrun", NOT "ball" — .ball is the cricket ball-ticker pill and would
   override this overlay's geometry at equal specificity. */
.celllock.ballrun{color:var(--ink-live);border-color:rgba(var(--live-rgb),.55)}
.celllock.ballrun::before{animation:celllockLive 1s ease-in-out infinite}
@keyframes celllockLive{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.celllock.ballrun::before{animation:none;opacity:1}}
:root[data-theme="daylight"] .celllock{background:rgba(255,255,255,.96);color:#8A5200;border-color:rgba(138,82,0,.42);box-shadow:0 1px 4px rgba(52,33,8,.14)}
:root[data-theme="daylight"] .celllock.ballrun{color:#C2410C;border-color:rgba(194,65,12,.42)}

/* ════════ FIRST-DEPOSIT CONVERSION JOURNEY ════════════════════════
   Flat Floodlight campaign surfaces. Ambassador bitmaps contain legacy
   sample copy in their left/lower panels, so an opaque near-black copy slab
   always covers that area; every visible percentage is live config text. */
.promo-link{
  position:relative;flex:none;min-height:32px;padding:0 9px;display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgba(var(--brand-rgb),.38);border-radius:7px;background:rgba(var(--brand-rgb),.08);
  color:var(--ink-brand);font:600 10px/1 var(--font-d);letter-spacing:.11em;text-transform:uppercase;
}
.promo-link .v2-ic{width:16px;height:16px}.promo-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.promo-link.on{background:var(--brand);color:var(--brand-ink)}
.promo-link.on .v2-ic{background-color:var(--brand-ink)!important}

.wb-conv-promo{
  align-items:center;padding:18px;background:radial-gradient(circle at 34% 44%,rgba(var(--brand-rgb),.1),transparent 34%),rgba(var(--sunk-rgb),.92);
  backdrop-filter:blur(16px) saturate(.82);
}
.wb-modal-backdrop.wb-conv-promo[data-size="lg"] .wb-modal-card{
  position:relative;width:min(96vw,1040px);max-width:1040px;max-height:min(94dvh,720px);overflow:auto;
  border:1px solid var(--border-strong);border-radius:26px;background:var(--surface);color:var(--text);
  box-shadow:0 46px 140px rgba(0,0,0,.76),0 0 0 1px rgba(var(--brand-rgb),.06),0 22px 72px rgba(var(--sunk-rgb),.58);
}
.wb-modal-backdrop.wb-conv-promo[data-size="lg"] .wb-modal-card::before{
  content:"";position:absolute;z-index:6;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 -1px rgba(255,255,255,.04);
}
.wb-conv-promo .wb-modal-header{position:absolute;z-index:9;top:12px;right:12px;width:auto;padding:0;border:0;background:transparent}
.wb-conv-promo .wb-modal-header>div:first-child{display:none}
.wb-conv-promo .wb-modal-close{
  width:44px;height:44px;margin:0;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  background:rgba(var(--sunk-rgb),.76);color:#F7F8F9;box-shadow:0 8px 26px rgba(0,0,0,.34);backdrop-filter:blur(12px);
}
.wb-conv-promo .wb-modal-close:hover,.wb-conv-promo .wb-modal-close:focus-visible{border-color:var(--brand);background:var(--brand);color:var(--brand-ink)}
.wb-conv-promo .wb-modal-close:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.wb-conv-promo .wb-modal-body{padding:0}
:root[data-theme="daylight"] .wb-conv-promo{background:radial-gradient(circle at 34% 44%,rgba(var(--brand-rgb),.12),transparent 34%),rgba(8,10,12,.88)}
:root[data-theme="daylight"] .wb-conv-promo .wb-modal-close{border-color:rgba(255,255,255,.38);background:rgba(16,20,24,.88);color:#FFF}
.conv-promo-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(350px,.82fr);min-height:620px;align-items:stretch}
.conv-promo-art{position:relative;height:100%;min-height:620px;margin:0;overflow:hidden;background:var(--bg-sunken);isolation:isolate}
.conv-promo-art::after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,transparent 80%,rgba(var(--sunk-rgb),.58) 100%),linear-gradient(0deg,rgba(var(--sunk-rgb),.5),transparent 28%);pointer-events:none}
.conv-promo-visual{position:absolute;inset:0;width:100%;height:100%;min-height:620px;display:block;object-fit:cover;object-position:center;image-rendering:auto}
.conv-promo-copy{
  position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:48px 36px 32px;
  background:radial-gradient(circle at 100% 0,rgba(var(--brand-rgb),.08),transparent 36%),var(--surface);overflow:hidden;
}
.conv-promo-copy::before{content:"W";position:absolute;right:-17px;top:4px;color:rgba(var(--brand-rgb),.035);font:700 210px/.8 var(--font-d);letter-spacing:-.08em;pointer-events:none}
.conv-promo-kicker{position:relative;display:inline-flex;align-items:center;gap:9px;color:var(--ink-brand);font:800 10px/1 var(--font-b);letter-spacing:.17em;text-transform:uppercase}
.conv-promo-kicker::before{content:"";width:20px;height:2px;background:var(--brand)}
.conv-promo-copy h2{position:relative;max-width:9ch;margin:17px 0 0;color:var(--text);font:700 clamp(46px,4.8vw,64px)/.84 var(--font-d);letter-spacing:-.025em;text-transform:uppercase;text-wrap:balance}
.conv-promo-offer{position:relative;width:100%;margin-top:22px;padding:14px 14px 13px;border:1px solid rgba(var(--brand-rgb),.38);border-left:4px solid var(--brand);border-radius:2px 12px 12px 2px;background:rgba(var(--brand-rgb),.07);display:flex;flex-direction:column;gap:4px}
.conv-promo-offer-kicker{color:var(--ink-brand);font:800 8.5px/1 var(--font-b);letter-spacing:.16em;text-transform:uppercase}
.conv-promo-math{color:var(--text);font:650 15px/1.25 var(--font-d);letter-spacing:.015em}.conv-promo-math i{padding-inline:2px;color:var(--ink-brand);font-style:normal}
.conv-promo-limits{color:var(--text-dim);font:650 10.5px/1.35 var(--font-b)}
.conv-promo-wagering{color:var(--text-faint);font:600 9px/1.35 var(--font-b)}
.conv-promo-generic{position:relative;max-width:34ch;margin:21px 0 0;padding-left:13px;border-left:3px solid var(--brand);color:var(--text-dim);font:650 13px/1.48 var(--font-b)}
.conv-promo-actions{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:18px}
.conv-promo-primary,.conv-promo-later{min-height:52px;border-radius:11px;font:800 11px/1 var(--font-b);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.conv-promo-primary{padding:0 18px;border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);box-shadow:0 14px 34px rgba(var(--sunk-rgb),.45)}
.conv-promo-later{padding:0 12px;border:1px solid transparent;background:transparent;color:var(--text-faint)}
.conv-promo-primary:hover,.conv-promo-primary:focus-visible{transform:translateY(-2px);background:var(--brand-hot);border-color:var(--brand-hot)}
.conv-promo-later:hover,.conv-promo-later:focus-visible{border-color:var(--border-strong);color:var(--text)}
.conv-promo-primary:focus-visible,.conv-promo-later:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.conv-promo-legal{position:relative;margin-top:12px;color:var(--text-faint);font:650 8.5px/1.4 var(--font-b);letter-spacing:.09em;text-transform:uppercase}

@media (max-width:760px){
  .wb-conv-promo{align-items:flex-end;padding:0}
  .wb-modal-backdrop.wb-conv-promo[data-size="lg"] .wb-modal-card{width:100%;max-width:none;max-height:96dvh;border-radius:24px 24px 0 0;border-bottom:0}
  .conv-promo-layout{grid-template-columns:1fr;min-height:0}
  .conv-promo-art{height:min(38dvh,310px);min-height:225px}
  .conv-promo-art::after{background:linear-gradient(0deg,var(--surface) 0,transparent 32%)}
  .conv-promo-visual{height:100%;min-height:0;object-position:center 42%}
  .conv-promo-copy{justify-content:flex-start;padding:8px 22px calc(18px + env(safe-area-inset-bottom))}
  .conv-promo-copy::before{font-size:132px}
  .conv-promo-copy h2{max-width:11ch;margin-top:11px;font-size:clamp(38px,10.8vw,50px)}
  .conv-promo-offer{margin-top:13px;padding:11px 12px}.conv-promo-generic{margin-top:13px;font-size:12px}
  .conv-promo-actions{margin-top:13px}.conv-promo-primary,.conv-promo-later{min-height:48px}
  .conv-promo-legal{margin-top:7px}
}
@media (max-width:370px), (max-height:690px){
  .conv-promo-art{height:200px;min-height:185px}.conv-promo-copy h2{font-size:34px}.conv-promo-offer{margin-top:10px}.conv-promo-wagering{display:none}.conv-promo-actions{margin-top:10px}.conv-promo-primary,.conv-promo-later{min-height:44px}.conv-promo-legal{display:none}
}
@media (prefers-reduced-motion:reduce){.wb-conv-promo *{scroll-behavior:auto!important;transition:none!important}}

.welcome-offer-slot[hidden]{display:none!important}
.welcome-offer{
  min-width:0;padding:11px 12px;display:flex;align-items:center;gap:10px;
  border:1px solid rgba(var(--brand-rgb),.42);border-left:4px solid var(--brand);border-radius:9px;
  background:rgba(var(--brand-rgb),.07);
}
.wo-icon{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:7px;background:var(--brand);color:var(--brand-ink)}
.wo-icon .v2-ic{background-color:var(--brand-ink)!important}.wo-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.wo-kicker{font:700 8.5px/1 var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-brand)}
.wo-math{font:650 14px/1.2 var(--font-d);letter-spacing:.015em;color:var(--text)}.wo-math i{font-style:normal;color:var(--ink-brand);padding:0 2px}
.wo-limit{font:600 10.5px/1.25 var(--font-b);color:var(--text-dim)}.wo-terms{font:500 9px/1.35 var(--font-b);color:var(--text-faint)}
.wo-link{flex:none;align-self:stretch;display:flex;align-items:center;padding-left:10px;border-left:1px solid var(--border);font:600 9.5px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-brand)}
.wo-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.wo-signup{padding:9px 10px}.wo-signup .wo-icon{width:32px;height:32px}.wo-signup .wo-math{font-size:12.5px}.wo-signup .wo-terms{display:none}
.wal-bonus{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border:1px solid rgba(var(--brand-rgb),.4);border-radius:999px;background:rgba(var(--brand-rgb),.09);color:var(--ink-brand)!important}
.wal-bonus .v2-ic{width:13px;height:13px}.wal-bonus b{color:var(--ink-brand)!important;margin-left:0!important}

.promotions-page{max-width:900px}.promo-grid{display:grid;gap:12px}.promo-card{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);border:1px solid var(--border);border-radius:11px;overflow:hidden;background:var(--surface)}
.promo-art{position:relative;min-height:330px;overflow:hidden;background:#050806}.promo-art picture,.promo-art img{display:block;width:100%;height:100%}.promo-art picture{position:absolute;inset:0}.promo-art img{object-fit:cover;object-position:72% center}
.promo-body{padding:20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px}.promo-status{padding:4px 7px;border:1px solid rgba(var(--pos-rgb),.4);border-radius:4px;background:rgba(var(--pos-rgb),.1);color:var(--ink-pos);font:700 8.5px/1 var(--font-b);letter-spacing:.15em;text-transform:uppercase}
.promo-body h3{max-width:13ch;font:650 28px/.95 var(--font-d);letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}.promo-body>p{font:500 11px/1.55 var(--font-b);color:var(--text-dim);text-wrap:pretty}.promo-body .welcome-offer{width:100%}.promo-cta{min-width:180px;margin-top:2px}.promo-empty{padding:28px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}.promo-empty>span{color:var(--ink-brand)}.promo-empty h3{font:650 22px/1 var(--font-d);text-transform:uppercase}.promo-empty p{max-width:58ch;font:500 12px/1.6 var(--font-b);color:var(--text-dim)}
.journey-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}.journey-steps li{min-width:0;padding:14px;background:var(--surface);display:flex;align-items:flex-start;gap:9px}.journey-steps li>i{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:5px;background:var(--brand);color:var(--brand-ink);font:700 11px/1 var(--font-d);font-style:normal}.journey-steps div{display:flex;flex-direction:column;gap:3px;min-width:0}.journey-steps b{font:600 12px/1.2 var(--font-d);text-transform:uppercase;letter-spacing:.05em}.journey-steps span{font:500 10px/1.4 var(--font-b);color:var(--text-faint)}

.co-checklist{list-style:none;display:grid;gap:5px;margin-top:3px}.co-checklist[hidden]{display:none}.co-checklist li{display:flex;align-items:center;gap:8px;min-height:30px;padding:4px 7px;border:1px solid var(--border);border-radius:6px;color:var(--text-faint);font:600 11px/1.2 var(--font-b)}.co-checklist li i{width:20px;height:20px;display:grid;place-items:center;border-radius:4px;background:var(--surface-3);font:700 10px/1 var(--font-d);font-style:normal}.co-checklist li.done{color:var(--text-dim)}.co-checklist li.done i{background:rgba(var(--pos-rgb),.16);color:var(--ink-pos)}.co-checklist li.now{border-color:rgba(var(--brand-rgb),.5);background:rgba(var(--brand-rgb),.07);color:var(--text)}.co-checklist li.now i{background:var(--brand);color:var(--brand-ink)}

@media (max-width:699px){
  .promo-link{width:36px;min-height:36px;padding:0;justify-content:center}.promo-link span{display:none}
  .welcome-offer{align-items:flex-start}.wo-link{align-self:center}.wo-math{font-size:13px}.wo-terms{font-size:8.5px}
  .promo-card{grid-template-columns:1fr}.promo-art{min-height:220px}.promo-art img{object-position:center 12%}.promo-body{padding:15px}.promo-body h3{font-size:24px}.journey-steps{grid-template-columns:1fr}.journey-steps li{padding:11px 12px}
}
@media (max-width:370px){
  .wo-icon{display:none}.wo-link{padding-left:7px}.welcome-offer{gap:7px}.promo-art{min-height:195px}
}
:root[data-theme="daylight"] .welcome-offer{background:#F5FAE4;border-color:#A6BD57;border-left-color:#7A9B00}
:root[data-theme="daylight"] .wo-kicker,:root[data-theme="daylight"] .wo-link,:root[data-theme="daylight"] .wal-bonus,:root[data-theme="daylight"] .wal-bonus b{color:#5E7800!important}
:root[data-theme="daylight"] .wal-bonus{background:#F5FAE4;border-color:#A6BD57}

/* ── RIGHT RAIL PANELS — flat cards (desktop) ────────────────────── */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.p-head{display:flex;align-items:center;gap:7px;height:32px;padding:0 11px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.p-title{font:600 11px/1 var(--font-d);letter-spacing:.12em;text-transform:uppercase}
.p-meta{margin-left:auto;font:500 10px/1 var(--font-b);letter-spacing:.04em;color:var(--text-faint);white-space:nowrap}
.ln{display:grid;grid-template-columns:minmax(0,1fr) 58px;column-gap:8px;align-items:center;padding:7px 11px;border-bottom:1px solid var(--border);cursor:pointer}
.ln:last-of-type{border-bottom:0}
.ln:hover{background:rgba(200,230,210,.03)}
.ln-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.ln-t{display:flex;align-items:center;gap:5px;font:600 12.5px/1 var(--font-d);white-space:nowrap;min-width:0}
.ln-t b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.ln-t .vs{color:var(--text-faint);font-size:10px;flex:none}
.ln-sc{font:500 10px/1 var(--font-b);color:var(--text-faint);display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden}
.ln-sc .sc{color:var(--text-dim);font-weight:600;overflow:hidden;text-overflow:ellipsis}
:root[data-theme="daylight"] .sbar{background:#FFF;border-bottom-color:#AEB6BE;box-shadow:0 4px 12px rgba(16,20,24,.09)}
:root[data-theme="daylight"] .sb2{color:#20262C}
:root[data-theme="daylight"] .side-in .panel{border-color:#AEB6BE;box-shadow:0 2px 8px rgba(16,20,24,.09)}
:root[data-theme="daylight"] .side-in .ln{background:#FFF;border-bottom-color:#D8DDE2}
:root[data-theme="daylight"] .side-in .ln:hover{background:#F4F6F8}
:root[data-theme="daylight"] .side-in .ln-sc .sc{color:#20262C;font-weight:650}
.ln .cell{height:34px}
.ln .cell .o{font-size:12.5px}
.ln .cell .sz{display:none}
.p-empty{padding:16px 12px;font:500 11px/1.5 var(--font-b);color:var(--text-faint);text-align:center}

/* ── NAV RAIL (desktop left) ─────────────────────────────────────── */
.rail-in{
  position:sticky;top:var(--topH);max-height:calc(100vh - var(--topH));
  overflow-y:auto;padding:10px 0 22px;scrollbar-width:none;
}
.rail-in::-webkit-scrollbar{display:none}
.rnav{display:flex;flex-direction:column;padding:0 8px}
.rnav-sports{display:flex;flex-direction:column;margin-top:4px}
.rit{
  position:relative;display:flex;align-items:center;gap:11px;height:38px;padding:0 10px;border-radius:8px;
  font:600 12px/1 var(--font-d);letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.rit:hover{color:var(--text);background:rgba(200,230,210,.05)}
.rit.on{color:var(--ink-brand);background:rgba(var(--brand-rgb),.10)}
.rit > svg,.rit > .v2-ic,.rit > .sport-glyph{
  width:22px;height:22px;flex:0 0 22px;opacity:.95;
}
.rit > .sport-glyph{display:inline-flex;align-items:center;justify-content:center}
.rit > .sport-icon-art img{width:22px;height:22px}
.rit > .rit-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbadge{
  flex:none;min-width:20px;height:16px;padding:0 5px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font:700 10.5px/1 var(--font-b);font-style:normal;letter-spacing:.02em;
  background:var(--surface-3);color:var(--text-dim);
}
.rbadge.lv{background:rgba(255,61,46,.15);color:var(--ink-live)}
.rbadge.b2{background:rgba(var(--brand-rgb),.14);color:var(--ink-brand)}
.rbadge:empty{display:none}
.rsep{height:1px;margin:9px 16px;background:var(--border)}
.rail-foot{padding:18px 16px 4px}

/* ════════ RESPONSIVE — ≥981 desktop frame · ≥1200 full 3-col ═════ */
@media (min-width:981px){
  :root{--hdrH:var(--topH);--stick:var(--topH);--frameW:1400px}
  /* desktop keeps its single 56px row (spec §3.4 — content parity, not
     layout parity): the counter joins the row at far right, the rule spans
     the full width, and nothing ever condenses. */
  .v2-app{--hdrH:var(--topH);--stick:var(--topH);--stickPad:var(--topH)}
  .hdr{padding-top:0}
  .hdr-rows{display:flex;align-items:stretch;max-width:var(--frameW);margin:0 auto}
  .hdr-id{
    flex:1 1 auto;min-width:0;height:var(--topH);
    display:grid;grid-template-columns:var(--railW) auto minmax(0,1fr) auto;
    align-items:center;padding:0;gap:0;transition:none;
  }
  .backbtn{display:none !important}
  .wordmark{margin:0;padding:0 16px;height:100%;border-right:1px solid var(--border);display:flex;grid-column:1}
  .wordmark b{font-size:23px}
  /* explicit placement: the live chip is [hidden] at 0 live and must leave
     its auto column empty instead of shifting the search/right clusters */
  .tb-live{margin-left:16px;grid-column:2}
  .hdr-id .tb-mid{grid-column:3}
  .hdr-id .hdr-right{grid-column:4}
  .rit{font-size:13.5px;height:40px;gap:11px}
  .tb-mid{display:flex;padding:0 16px}
  .hdr-right{display:flex;align-items:center;justify-content:flex-end;gap:9px;height:100%;padding:0 14px;border-left:1px solid var(--border);margin-left:0}
  .icobtn.m-search{display:none}
  .hdr-chip{display:none !important}
  .hdr-counter{
    height:auto;align-self:stretch;overflow:visible;background:none;box-shadow:none;
    border-left:1px solid var(--border);padding:0 14px;gap:6px;transition:none;
  }
  .ctr-avail{flex:none;min-width:0;padding-right:8px}
  .searchbar{display:none !important}
  .v2-app.search-open .center{padding-top:0}
  .frame{
    max-width:var(--frameW);margin:var(--topH) auto 0;min-height:calc(100vh - var(--topH));
    display:grid;grid-template-columns:var(--railW) minmax(0,1fr);
    background:var(--bg);border-left:1px solid var(--border);border-right:1px solid var(--border);
  }
  .rail{display:block;border-right:1px solid var(--border)}
  .center{padding:0 0 96px}
  /* Keep long single-sport boards cheap offscreen without containing their
     sticky competition headers. The 60px fallback matches a desktop row, so
     the scrollbar stays stable as skipped rows become relevant. Mobile stays
     fully laid out for predictable touch scrolling on older WebKit builds. */
  .crow,.frow{content-visibility:auto;contain-intrinsic-size:auto 60px}
  .mnav{display:none}
  .crow:hover,.frow:hover{background:var(--surface-2)}
  :root[data-theme="daylight"] .crow:hover,
  :root[data-theme="daylight"] .frow:hover{background:#F1F4F7}
  .crow,.frow{min-height:60px;transition:background var(--dur-fast) var(--ease-out)}
  .cell{height:50px}
  .cell .o{font-size:17px}
  .cell .o i{font-size:10px}
  .susp{height:50px}
  .cell:hover{background:var(--back-cell-hi);border-color:var(--back-cell-bd)}
  .cell.lay:hover{background:var(--lay-cell-hi);border-color:var(--lay-cell-bd)}
  .cell.is-off:hover{background:var(--bg-sunken);border-color:var(--border)}
  /* wide coupon grids: info · matched · mkts · cells */
  .c4{grid-template-columns:minmax(0,1fr) 84px 46px repeat(4,72px);column-gap:4px;padding:0 16px 0 18px}
  .c3{grid-template-columns:minmax(0,1fr) 84px 46px repeat(6,60px);column-gap:4px;padding:0 16px 0 18px}
  .vol,.mkc{display:block}
  .colhead .ch-v,.colhead .ch-m{display:block}
  .frow .cell.lay{display:flex}
  .colhead.c3 .h-l{display:block}
  .c-teams{font-size:17.5px;gap:8px}
  .c-teams .tn-f{display:inline}
  .c-teams .tn-a{display:none}
  .c-teams .mk{display:none}
  .c-meta{font-size:12.5px}
  .grphead{height:34px;padding:0 18px}
  .grphead b{font-size:14px}
  .colhead{top:calc(var(--stick) + 34px);height:25px}
  .colhead span{font-size:11.5px}
  .stabs{padding:8px 10px 0}
  .lnow{padding:2px 12px 10px}
  .sbar .sb1{min-height:40px;font-size:16px;padding:5px 16px}
  .sb2{padding:0 14px 6px}
  .mtabs{padding:7px 12px}
  .mksearch{padding:0 14px}
  .market{margin:10px 12px 0}
  .m2{--cellW:130px}
  .runner{min-height:56px}
  .rn-name{font-size:16px}
  .runner .cell{height:50px}
  .runner .cell::after{inset:-4px 0}
  .runner .cell .o{font-size:18px}
  .runner .cell .o i{font-size:10.5px}
  .runner .susp{height:50px}
  .celllock{height:50px;font-size:13px}
}

@media (pointer:coarse){
  /* The grain is purely decorative; dropping its blend layer on touch devices
     avoids a full-viewport composite during Safari/Chrome toolbar scrolling. */
  .v2-scene::after{display:none}
}
@media (min-width:1200px){
  .view-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--sideW);align-items:start}
  .side{
    display:block;border-left:1px solid var(--border);align-self:stretch;
  }
  .side-in{
    position:sticky;top:var(--topH);max-height:calc(100vh - var(--topH));
    overflow-y:auto;padding:10px 10px 24px;display:flex;flex-direction:column;gap:10px;
    scrollbar-width:none;
  }
  .side-in::-webkit-scrollbar{display:none}
}
@media (min-width:981px) and (max-width:1199px){
  :root{--railW:64px}
  .wordmark{justify-content:center;padding:0}
  .wordmark b{display:none}
  .rit{justify-content:center;padding:0;gap:0}
  .rit > .rit-label{display:none}
  .rbadge{position:absolute;top:2px;right:-6px;min-width:14px;height:13px;font-size:8.5px;line-height:1;padding:0 2px}
  .rail-foot{display:none}
  .rsep{margin:9px 12px}
}

/* ════════ INLINE BETSLIP — the flat stake card (Phase 2) ═════════
   Born beneath the tapped cell's row: grid-template-rows 0fr→1fr push
   (content moves down, never overlays) + translateY fade on the card.
   Side color arrives as --acc (back blue / lay pink), set inline. */
.slipwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-sheet) var(--ease-sheet)}
.slipwrap.open{grid-template-rows:1fr}
.slipwrap.noanim,.slipwrap.noanim .slip{transition:none !important}
.slip-clip{overflow:hidden;min-height:0}
.slip{
  position:relative;margin:6px 8px 10px;border-radius:10px;overflow:hidden;
  background:var(--surface-2);
  border:1px solid color-mix(in srgb, var(--acc) 38%, var(--border));
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--dur-sheet) var(--ease-sheet), transform var(--dur-sheet) var(--ease-sheet);
  --acc:var(--back);
}
.slipwrap.open .slip{opacity:1;transform:none}
.slip.shake{animation:v2shake .25s var(--ease-out)}
@keyframes v2shake{0%,100%{transform:none}25%{transform:translateX(-5px)}65%{transform:translateX(4px)}}
.slip .flashlayer{position:absolute;inset:0;background:var(--pos);opacity:0;pointer-events:none;z-index:5}
.slip.flash .flashlayer{animation:v2flashfade var(--dur-hero) var(--ease-out)}
@keyframes v2flashfade{0%{opacity:.3}100%{opacity:0}}
/* GOLD BURST — the verdict celebration (confettiBurstIn): one expanding ring
   ripple + gold coin discs + spark slivers, flung with an upward bias. Pure
   transform/opacity; base opacity:0 means the reduced-motion kill switch
   simply never shows a particle. */
.confetti{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.confetti i{position:absolute;left:50%;top:52%;opacity:0;will-change:transform,opacity}
.confetti .cf-coin{
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--brand-hot), var(--brand) 62%, rgba(var(--brand-rgb),.5));
  animation:v2burst .66s var(--ease-out) forwards;
}
.confetti .cf-spark{
  width:2px;height:11px;border-radius:4px;
  background:linear-gradient(180deg, var(--brand-hot), rgba(var(--brand-rgb),0));
  animation:v2burst .58s var(--ease-out) forwards;
}
.confetti .cf-ring{
  width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  border:1.5px solid rgba(var(--brand-rgb),.75);
  animation:v2ringout .55s var(--ease-out) forwards;
}
@keyframes v2burst{0%{opacity:1;transform:translate(-50%,-50%) rotate(0deg)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rt,150deg))}}
@keyframes v2ringout{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(3.2)}}
/* A. header strip — 3px accent + side-color tint + jargon-translated verb */
.slip-head{
  position:relative;display:flex;align-items:center;gap:8px;min-height:38px;padding:0 0 0 13px;
  background:color-mix(in srgb, var(--acc) 15%, var(--surface-2));
  border-bottom:1px solid color-mix(in srgb, var(--acc) 25%, var(--border));
}
.slip-head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}
.sh-title{font:600 11px/1.3 var(--font-d);letter-spacing:.11em;text-transform:uppercase;color:color-mix(in srgb, var(--acc) 82%, #fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:62%}
.sh-mkt{font:500 10px/1.3 var(--font-b);color:var(--text-faint);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:right}
.sh-x{position:relative;width:44px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--text-dim)}
.sh-x::after{content:"";position:absolute;inset:-3px}
/* fold machinery: edit body ↔ placed ticket share the flip */
.fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-sheet) var(--ease-sheet)}
.fold.open{grid-template-rows:1fr}
.fold-c{overflow:hidden;min-height:0}
.slip-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:10px}
/* B+C. odds token · stake row */
.traderow{display:flex;align-items:stretch;gap:8px}
.ot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:72px;padding:5px 9px;border-radius:8px;
  background:var(--surface-3);border:1px solid var(--border-strong);
}
.ot-lb{font:600 9px/1 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.ot-v{display:flex;align-items:baseline;gap:3px;font:600 19px/1 var(--font-d);color:color-mix(in srgb, var(--acc) 85%, #fff);white-space:nowrap}
.ot-v i{font-style:normal;font-size:10px;transform:translateY(-1px)}
.ot-v em{font-style:normal;font-size:10px;letter-spacing:.06em;color:var(--text-faint)}
.ot-v.ot-tick{animation:v2ottick var(--dur-tick) var(--ease-out)}
@keyframes v2ottick{0%{opacity:.25;transform:translateY(-3px)}100%{opacity:1;transform:none}}
.ot-old{color:var(--text-faint);font-size:13px;text-decoration:line-through}
.ot-new{font-weight:600;color:var(--ink-warn);animation:v2otnew 1.1s var(--ease-out) infinite}
@keyframes v2otnew{0%,100%{opacity:1}50%{opacity:.45}}
.stk{flex:1;display:flex;align-items:center;gap:6px;min-width:0}
.step{
  position:relative;width:44px;height:52px;border-radius:8px;flex:none;text-align:center;
  background:var(--surface-3);border:1px solid var(--border-strong);
  color:var(--text);font:500 20px/1 var(--font-d);
  transition:background var(--dur-instant) var(--ease-out);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.step:active{background:var(--border-strong)}
.step:disabled{opacity:.4}
.stake-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.stake-wrap:focus-within{border-radius:8px;box-shadow:0 0 0 2px var(--brand)}
.stake{
  width:100%;text-align:center;font:700 26px/1.15 var(--font-d);letter-spacing:.01em;
  color:var(--text);caret-color:var(--brand); /* 26px ≥ 16px — no iOS zoom */
}
.stake::placeholder{color:var(--text-faint)}
.stake:focus-visible{outline:none} /* the 26px numeral + brand caret IS the focus state */
.stake:disabled{opacity:.55}
.stk-lb{font:600 9px/1 var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
/* D. chips */
/* the full ladder is seven chips + MAX — wrap instead of overflowing */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .chip{flex:1 1 auto;min-width:56px}
.chip{
  position:relative;flex:1;height:36px;border-radius:6px;text-align:center;
  font:600 12px/1 var(--font-d);letter-spacing:.03em;color:var(--text-dim);
  background:var(--surface-3);border:1px solid var(--border-strong);
  transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast);
}
.chip::after{content:"";position:absolute;inset:-5px 0}
.chip.sel{color:var(--ink-brand);border-color:rgba(var(--brand-rgb),.5);background:rgba(var(--brand-rgb),.12)}
.chip.max{letter-spacing:.12em}
.chip:disabled{opacity:.4}
.multi-add{
  align-self:flex-start;min-height:32px;padding:0 10px;border-radius:6px;
  color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border-strong);
  font:600 10.5px/1 var(--font-d);letter-spacing:.09em;text-transform:uppercase;
}
.multi-add:hover,.multi-add.on{color:var(--ink-brand);border-color:rgba(var(--brand-rgb),.5);background:rgba(var(--brand-rgb),.1)}
/* E. the money sentence — the beginner layer */
.msent{
  text-align:center;font:500 12px/1.5 var(--font-b);color:var(--text-dim);
  padding-top:9px;border-top:1px solid var(--border);min-height:28px;
}
.msent b{color:var(--text);font-weight:700}
.msent .win{color:var(--ink-pos)}
.msent .risk{color:var(--ink-neg);font-size:14px;font-weight:800} /* lay liability = the BIG red number */
.msent .lia{color:var(--text-faint);font-size:11px;letter-spacing:.04em}
.msent .arr{color:var(--text-faint);padding:0 4px}
.msent .ms-hint{color:var(--text-faint)}
/* F. notice zone — inline, never a toast; collapsed when empty */
.snote{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  font:500 11px/1.45 var(--font-b);color:var(--text-dim);
  background:rgba(200,230,210,.05);border:1px solid var(--border);
}
.snote .sn-txt{flex:1;min-width:0}
.snote.sn-info{border-color:rgba(88,199,224,.35);background:rgba(88,199,224,.07);color:var(--ink-info)}
.snote.sn-warn{border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.07);color:var(--ink-warn)}
.snote.sn-susp{border-color:var(--border-strong);background:rgba(200,230,210,.04);color:var(--text-dim)}
.snote.sn-low,.snote.sn-err{border-color:rgba(255,93,93,.4);background:rgba(255,93,93,.07);color:var(--ink-neg)}
.sn-act{
  flex:none;height:28px;padding:0 12px;border-radius:6px;display:flex;align-items:center;
  background:var(--brand);color:var(--brand-ink);
  font:600 11px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;
}
.sn-x{flex:none;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:inherit;border:1px solid currentColor;opacity:.75}
/* G. the PLACE CTA — 52px flat command colour, money in the label,
   grey-inert until staked; morphs into the countdown ring */
.cta{
  position:relative;width:100%;height:52px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;
  background:var(--brand);color:var(--brand-ink);
  font:600 15px/1 var(--font-d);letter-spacing:.08em;text-transform:uppercase;
  transition:filter var(--dur-instant) var(--ease-out); /* grey→armed SNAPS — state is the affordance */
}
.cta:not(:disabled):active{filter:brightness(.9)}
.cta:disabled{background:var(--surface-3);color:var(--text-faint);cursor:default}
.cta.is-lay{background:var(--lay);color:var(--lay-ink)}
.cta .ring{display:none;width:22px;height:22px;flex:none}
.cta.counting .ring{display:block}
.ring circle{fill:none;stroke-width:3.5}
.ring-tr{stroke:rgba(11,16,13,.22)}
.cta.is-lay .ring-tr{stroke:rgba(58,10,30,.3)}
.ring-fg{stroke:currentColor;stroke-linecap:round;stroke-dasharray:100.53;stroke-dashoffset:100.53;transform:rotate(-90deg);transform-origin:center}
/* SUSPENDED — calm grey, typed stake preserved */
.slip.is-susp{filter:saturate(.4)}
.slip.is-susp .slip-body{opacity:.55}
/* PLACED — the flat ticket */
.ticket{display:flex;align-items:center;gap:10px;padding:10px 13px 12px}
.tk-ck{
  width:24px;height:24px;border-radius:6px;flex:none;
  background:rgba(53,208,127,.15);border:1px solid rgba(53,208,127,.5);
  display:flex;align-items:center;justify-content:center;color:var(--ink-pos);
}
.tik-fold.open .tk-ck .tkp{stroke-dasharray:24;stroke-dashoffset:24;animation:v2ckdraw .5s .18s var(--ease-out) forwards}
@keyframes v2ckdraw{to{stroke-dashoffset:0}}
/* PLACED choreography — badge pops, receipt line + link rise in, then a
   single gold sheen sweeps the ticket. Every keyframe animates FROM a hidden
   pose TO the element's natural resting style, so the reduced-motion kill
   switch just shows the finished receipt (no invisible end states). */
.tik-fold.open .tk-ck{animation:v2ckpop .5s .06s cubic-bezier(.34,1.56,.64,1) both}
@keyframes v2ckpop{0%{opacity:0;transform:scale(.35)}62%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
.tik-fold.open .tk-line{animation:v2rise .45s .2s var(--ease-out) both}
.tik-fold.open .tk-link{animation:v2rise .45s .3s var(--ease-out) both}
@keyframes v2rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.tik-fold.open .ticket{position:relative;overflow:hidden}
.tik-fold.open .ticket::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:38%;
  background:linear-gradient(105deg, transparent, rgba(var(--brand-rgb),.09), transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:v2sheen .8s .34s var(--ease-out) both;
}
@keyframes v2sheen{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(480%) skewX(-18deg)}}
.tk-col{display:flex;flex-direction:column;gap:3px;min-width:0}
.tk-line{font:600 12px/1.35 var(--font-b);color:var(--text)}
.tk-link{font:600 11px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-brand)}
/* desktop: 2-col slip body (trade | sentence · chips | CTA) — from the
   approved flat desktop mockup */
@media (min-width:981px){
  .slip{margin:8px 12px 12px}
  .slip-body{
    display:grid;grid-template-columns:minmax(0,1fr) 300px;
    grid-template-areas:"trade sum" "chips cta";
    align-items:center;column-gap:16px;row-gap:10px;
  }
  .traderow{grid-area:trade}
  .chips{grid-area:chips}
  .msent{grid-area:sum;text-align:left;padding-top:0;border-top:0;padding-left:16px;border-left:1px solid var(--border);align-self:center}
  .cta{grid-area:cta;height:52px}
  .slip-body .snote{grid-column:1 / -1}
}
/* the desktop side rail hosts narrow cards — stack them like mobile */
@media (min-width:1200px){
  .side .slip{margin:6px 0 8px}
  .side .slip-body{display:flex;flex-direction:column;align-items:stretch}
  .side .msent{text-align:center;padding-left:0;border-left:0;padding-top:9px;border-top:1px solid var(--border)}
  .side .cta{height:54px}
  .side .sh-mkt{display:none}
}

/* ════════ PHASE 3 — MATCH & LIVE DEPTH ═══════════════════════════ */

/* ── SCORE BUG ROW — this-over ball ticker + CRR/chase (flat pills) ── */
.sb3{display:flex;align-items:center;gap:4px;min-height:27px;padding:0 12px 6px;min-width:0}
.sb3 .tk-lb{font:600 9px/1 var(--font-d);letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint);margin-right:3px;flex:none}
.bug-balls{display:flex;gap:4px;flex:none}
.ball{
  width:17px;height:17px;border-radius:4px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font:600 10.5px/1 var(--font-d);
  background:var(--surface-3);border:1px solid var(--border-strong);color:var(--text-dim);
}
.ball.four{background:rgba(126,184,255,.15);border-color:rgba(126,184,255,.4);color:var(--back)}
.ball.six{background:rgba(var(--brand-rgb),.14);border-color:rgba(var(--brand-rgb),.4);color:var(--ink-brand)}
.ball.w{background:rgba(255,61,46,.15);border-color:rgba(255,61,46,.45);color:var(--ink-live)}
.ball.dotb{color:var(--text-faint)}
.sb3 .tk-crr{
  margin-left:auto;font:600 10px/1.3 var(--font-b);letter-spacing:.05em;color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:right;
}
.sb3 .tk-crr.is-solo{margin-left:0;text-align:left}

/* ── MARKET WALL GROUPS — collapsible flat sections ──────────────── */
.wgrp{margin:8px 10px 0}
.wg-head{
  width:100%;display:flex;align-items:center;gap:8px;min-height:34px;padding:0 11px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.wg-head:hover{border-color:var(--border-strong)}
.wg-title{font:600 11px/1 var(--font-d);letter-spacing:.13em;text-transform:uppercase;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg-count{margin-left:auto;flex:none;font:600 11px/1 var(--font-b);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.wg-chev{flex:none;color:var(--text-faint);font-size:11px;line-height:1;transition:transform var(--dur-fast) var(--ease-out)}
.wgrp.is-collapsed .wg-chev{transform:rotate(-90deg)}
.wgrp.is-collapsed .wg-body{display:none}
.wgrp .market{margin:6px 0 0}
.wgrp.is-direct>.wg-body>.market:first-child{margin-top:0}
/* an active market search force-reveals collapsed bodies (hits must be visible) */
#v2-wall.is-searching .wgrp.is-collapsed .wg-body{display:block}
#v2-wall.is-searching .wgrp.is-collapsed .wg-chev{transform:none}

/* ── NET POSITION — loud per-selection running P&L badges ────────── */
.rn-pl{
  flex:none;font:700 11px/1 var(--font-d);letter-spacing:.02em;
  padding:3px 6px;border-radius:4px;white-space:nowrap;
  background:rgba(53,208,127,.13);border:1px solid rgba(53,208,127,.4);color:var(--ink-pos);
}
.rn-pl.risk{background:rgba(255,93,93,.11);border-color:rgba(255,93,93,.4);color:var(--ink-neg)}
.rn-pl.flat{background:var(--surface-3);border-color:var(--border-strong);color:var(--text-dim)}

/* ── FANCY — limits sub-line + score/P&L ladder disclosure ───────── */
.fancy-unit{display:block}
.ladbtn{
  position:relative;flex:none;width:24px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;color:var(--text-faint);
  background:var(--surface-3);border:1px solid var(--border-strong);
  transition:color var(--dur-fast),border-color var(--dur-fast);
}
.ladbtn::after{content:"";position:absolute;inset:-6px}
.ladbtn.on{color:var(--ink-brand);border-color:rgba(var(--brand-rgb),.5);background:rgba(var(--brand-rgb),.1)}
.ladwrap{border-top:1px solid var(--border);background:rgba(var(--sunk-rgb),.4)}
.ladder{padding:8px 10px 10px}
.lad-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.lad-sides{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--surface-3);border:1px solid var(--border-strong)}
.lad-side{
  height:24px;padding:0 12px;border-radius:6px;
  font:600 11px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
  display:flex;align-items:center;
}
.lad-side.on{background:rgba(126,184,255,.16);color:var(--back-num)}
.lad-side.lay.on{background:rgba(232,106,158,.15);color:var(--lay-num)}
.lad-quote{margin-left:auto;font:600 11px/1 var(--font-d);letter-spacing:.03em;color:var(--text-dim);white-space:nowrap}
.lad-title{font:600 11px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.lad-hd{display:grid;grid-template-columns:56px 1fr 1fr;column-gap:8px;padding:0 9px 4px}
.lad-score-table.is-placed .lad-hd{grid-template-columns:56px 1fr}
.lad-hd span{font:600 10px/1 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);text-align:right}
.lad-hd span:first-child{text-align:left}
.lad-rung{
  width:100%;display:grid;grid-template-columns:56px 1fr 1fr;column-gap:8px;align-items:center;
  min-height:32px;padding:0 9px;border-radius:6px;margin-top:2px;
  background:var(--surface-2);border:1px solid var(--border);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.lad-rung:hover{border-color:var(--border-strong)}
.lad-rung span{font:600 11px/1 var(--font-b);text-align:right;white-space:nowrap}
.lad-rung .lr-st{font:600 11.5px/1 var(--font-d);letter-spacing:.03em;color:var(--text);text-align:left}
.lad-rung.is-off{opacity:.45;cursor:default}
.lad-score-table{max-height:320px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.lad-score-row{
  width:100%;display:grid;grid-template-columns:56px 1fr 1fr;column-gap:8px;align-items:center;
  min-height:29px;padding:0 9px;border-top:1px solid var(--border);
}
.lad-score-table.is-placed .lad-score-row{grid-template-columns:56px 1fr}
.lad-score-row strong,.lad-score-row span{font:600 11px/1 var(--font-b);text-align:right;white-space:nowrap}
.lad-score-row strong{font-family:var(--font-d);font-size:11.5px;color:var(--text);text-align:left}
.lad-empty{padding:10px 9px;font:500 11px/1.4 var(--font-b);color:var(--text-faint)}
.lad-pnl{display:flex;gap:14px;margin-top:8px;padding:7px 9px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border)}
.lp-row{display:flex;align-items:center;gap:6px;font:500 11px/1 var(--font-b);color:var(--text-faint)}
.lp-row em{font-style:normal;letter-spacing:.08em;text-transform:uppercase;font-size:9px;font-weight:600}
.lp-row b{font:600 11px/1 var(--font-b)}
.win{color:var(--ink-pos)}
.risk{color:var(--ink-neg)}
.flat{color:var(--text-faint)}

/* ── YOUR BETS ON THIS MATCH — flat panel + inline cash-out ──────── */
#v2-ob-m{margin:8px 10px 0}
#v2-ob-m:empty{display:none}
#v2-ob-m .panel{border-radius:10px}
/* ── Open Bets tab panel (phones) ──────────────────────────────────────
   The bet list is a TAB now, so it is hidden until its tab is selected and
   it takes the wall's place rather than sitting on top of it. Desktop is
   untouched: the rail below already owns #v2-ob-m via display:none. */
@media (max-width:980px){
  #v2-ob-m{display:none}
  body.v2-obview #v2-ob-m{display:block}
  body.v2-obview #v2-wall,
  body.v2-obview #v2-mks-empty,
  body.v2-obview .foot-note{display:none}
  /* the odds/bets switch is a different gesture from the jump pills beside it */
  .mtab.ob-tab{border-color:rgba(var(--brand-rgb),.42);color:var(--ink-brand)}
  .mtab.ob-tab.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
}
.mtab.ob-tab{display:none}
@media (max-width:980px){.mtab.ob-tab{display:inline-flex}}
.qtag{
  flex:none;font:700 9px/1 var(--font-d);letter-spacing:.14em;padding:3px 5px;border-radius:4px;
  background:var(--back-cell);border:1px solid var(--back-cell-bd);color:var(--back-num);
}
.qtag.lay{background:var(--lay-cell);border-color:var(--lay-cell-bd);color:var(--lay-num)}
.ob{display:flex;flex-direction:column;gap:4px;padding:8px 11px;border-bottom:1px solid var(--border)}
.ob:last-of-type{border-bottom:0}
.ob.is-out{opacity:.55}
.ob-top{display:flex;align-items:center;gap:7px;min-width:0}
.ob-name{font:600 12px/1.2 var(--font-d);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ob-pl{margin-left:auto;flex:none;font:600 11.5px/1 var(--font-b)}
.ob-pl.win{color:var(--ink-pos)}
.ob-pl.risk{color:var(--ink-neg)}
.ob-sub{font:500 10px/1.4 var(--font-b);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-act{display:flex;align-items:center;gap:8px;min-height:24px}
.ob-q{font:500 10.5px/1.3 var(--font-b);color:var(--text-faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-q.win{color:var(--ink-pos);font-weight:600}
.ob-q.risk{color:var(--ink-neg);font-weight:600}
.ob-cash{
  margin-left:auto;flex:none;height:28px;padding:0 12px;border-radius:6px;
  background:rgba(var(--brand-rgb),.12);border:1px solid rgba(var(--brand-rgb),.45);color:var(--ink-brand);
  font:600 11px/1 var(--font-d);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  transition:background var(--dur-fast),color var(--dur-fast);
}
.ob-cash.is-confirm{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.ob-cash.is-done{background:rgba(53,208,127,.14);border-color:rgba(53,208,127,.5);color:var(--ink-pos)}
.ob-cash:disabled{opacity:.6;cursor:default}
.ob-foot{
  display:flex;align-items:center;gap:6px;padding:8px 11px;
  background:var(--surface-2);border-top:1px solid var(--border);
  font:500 11px/1 var(--font-b);color:var(--text-dim);
}
.ob-foot b{font-weight:600;color:var(--ink-neg)}
@media (min-width:1200px){
  #v2-ob-m{display:none} /* desktop: the panel lives in the right rail */
}

/* ── NET POSITION PANEL (desktop rail) ───────────────────────────── */
.pl-row{display:flex;align-items:center;gap:8px;min-height:27px;padding:3px 11px;border-bottom:1px solid var(--border);font:500 11px/1.25 var(--font-b);color:var(--text-dim)}
.pl-row:last-of-type{border-bottom:0}
.pl-row .pl-lb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-row b{margin-left:auto;flex:none;font:600 11.5px/1 var(--font-b)}
.pl-row .tag{flex:none;font:600 10px/1 var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);padding:2px 4px;border-radius:4px;background:var(--surface-3);max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── MATCH CENTRE (desktop rail) ─────────────────────────────────── */
.mc-live em{font-style:normal;color:var(--ink-live)}
.mc-score{padding:10px 11px 9px;border-bottom:1px solid var(--border)}
.mc-line{font:600 15px/1.35 var(--font-d);letter-spacing:.02em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-need{margin-top:5px;font:500 11px/1.4 var(--font-b);color:var(--text-dim)}
.mc-phase{display:flex;align-items:flex-start;gap:8px;padding:8px 11px;border-bottom:1px solid var(--border);background:rgba(var(--live-rgb),.07)}
.mc-phase[hidden]{display:none}
.mc-phase-mark{width:7px;height:7px;margin-top:5px;border-radius:50%;flex:none;background:var(--live);box-shadow:0 0 0 3px rgba(var(--live-rgb),.13)}
.mc-phase-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.mc-phase-copy small{font:600 9px/1 var(--font-d);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-live)}
.mc-phase-copy strong{font:600 11.5px/1.35 var(--font-b);color:var(--text)}
:root[data-theme="daylight"] .mc-score{background:#FFF;color:#101418;border-bottom-color:#D2D7DD}
:root[data-theme="daylight"] .mc-line{font-weight:700}
:root[data-theme="daylight"] .mc-phase{background:#FFF3F1;border-bottom-color:#F0C2BB}
:root[data-theme="daylight"] .mcp .kv{background:#F7F8FA;border-bottom:1px solid #D8DDE2}
:root[data-theme="daylight"] .mcp .kv > span{color:#4A5560}
:root[data-theme="daylight"] .mcp .kv > span b{color:#101418}
:root[data-theme="daylight"] .overballs{background:#F7F8FA}
.stat-tbl{display:flex;flex-direction:column}
.st-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:center;min-height:26px;padding:0 11px;border-bottom:1px solid var(--border)}
.st-row span{font:500 11px/1.3 var(--font-b);color:var(--text-dim);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-row .l{text-align:left;font:600 12px/1.3 var(--font-d);color:var(--text)}
.st-row.bowl .l{color:var(--text-dim)}
.mcp .kv{display:flex;flex-wrap:wrap;padding:7px 11px 9px;gap:4px 0}
.mcp .kv > span{flex:1 1 33%;display:flex;justify-content:space-between;gap:8px;font:500 11px/1.6 var(--font-b);color:var(--text-faint);padding-right:10px}
.mcp .kv > span b{font-weight:600;color:var(--text-dim)}
.overballs{display:flex;align-items:center;gap:4px;padding:8px 11px;border-top:1px solid var(--border)}
.overballs .tk-lb{font:600 9px/1 var(--font-d);letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint);margin-right:3px}
.mc-football:empty{display:none}
.mc-foot-sec{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.mc-foot-title{padding:7px 11px 5px;font:600 9px/1 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.mc-stat{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:6px;min-height:25px;padding:0 11px}
.mc-stat b{font:600 11px/1 var(--font-d);color:var(--text);text-align:left}
.mc-stat b:last-child{text-align:right}
.mc-stat span{font:500 10px/1.25 var(--font-b);color:var(--text-dim);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-moment{display:grid;grid-template-columns:34px 28px minmax(0,1fr);align-items:center;gap:6px;min-height:36px;padding:4px 11px;border-top:1px solid var(--border)}
.mc-moment > span{font:600 11px/1 var(--font-d);color:var(--text-dim)}
.mc-moment > i{width:26px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);font:700 9px/1 var(--font-b);font-style:normal;color:var(--ink-brand)}
.mc-moment > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.mc-moment b{font:600 11px/1.25 var(--font-d);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-moment small{font:500 11px/1.25 var(--font-b);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-comment{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px;padding:6px 11px 9px;border-top:1px solid var(--border)}
.mc-comment span{font:600 10px/1.4 var(--font-d);color:var(--text-dim)}
.mc-comment p{font:500 10.5px/1.4 var(--font-b);color:var(--text-dim)}
.mc-tennis{border-top:1px solid var(--border);padding-bottom:6px}
.mc-tennis:empty{display:none}
.mc-tennis-row{display:grid;grid-template-columns:var(--mc-tennis-grid,minmax(76px,1fr) repeat(2,24px) 30px);align-items:center;gap:2px;min-height:28px;padding:0 8px}
.mc-tennis-row.head{min-height:22px;font:600 10px/1 var(--font-b);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.mc-tennis-row b{font:600 11px/1 var(--font-d);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-tennis-row.serving b{color:var(--ink-brand)}
.mc-tennis-row span,.mc-tennis-row strong{text-align:center;font:600 11px/1 var(--font-d);color:var(--text-dim)}
.mc-tennis-row .on{color:var(--ink-brand);background:rgba(var(--brand-rgb),.09);border-radius:4px;padding:4px 0}
.mc-tennis-row strong{color:var(--back)}
#v2-mc-side:empty,#v2-np-side:empty,#v2-ob-side:empty,#v2-ln-side:empty{display:none}
.side-in > div + div{margin-top:0} /* hosts stack via .side-in's own gap */

/* ════════ PHASE 4 — MONEY · ACCOUNT · AUTH (flat-dense) ══════════ */

/* ── page scaffold ── */
.page{padding:14px 10px 20px;max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.page.pg-wide{max-width:820px}
.pg-head{display:flex;align-items:baseline;gap:10px;min-height:30px;padding:0 2px}
.pg-title{font:600 19px/1.1 var(--font-d);letter-spacing:.05em;text-transform:uppercase;text-wrap:balance}
.pg-sub{font:600 11px/1.4 var(--font-b);letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);min-width:0}
.pg-act{margin-left:auto;flex:none;font:600 11px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-brand)}
.page-intro{margin:0 2px;font:500 11.5px/1.55 var(--font-b);color:var(--text-dim);text-wrap:pretty}
.p-act{margin-left:auto;flex:none;font:600 10px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-brand)}
.p-foot{display:block;padding:9px 11px;border-top:1px solid var(--border);background:var(--surface-2);font:600 10.5px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-brand)}

/* ── flat ledger rows + day headers ── */
.rec{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid var(--border);background:var(--surface)}
.panel .rec:last-of-type{border-bottom:0}
.rec.is-nav{cursor:pointer}
.rec.is-nav:hover{background:rgba(200,230,210,.04)}
.rec-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.rec-t{font:600 12.5px/1.25 var(--font-d);letter-spacing:.02em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-s{font:500 10.5px/1.35 var(--font-b);color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.rec-amt{font:600 13px/1 var(--font-d);letter-spacing:.02em;color:var(--text)}
.rec-amt.win{color:var(--ink-pos)}
.rec-amt.risk{color:var(--ink-neg)}
.rec-amt.flat{color:var(--text-dim)}
.dayhd{
  position:sticky;top:var(--stick);z-index:8;margin:0 -1px;
  padding:6px 11px 5px;background:var(--bg);border-bottom:1px solid var(--border);
  font:600 10px/1 var(--font-d);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);
}
.dayhd + .rec,.dayhd + .rec + .rec{border-radius:0}
/* ── Account statement: day totals, tappable rows, inline bet detail ──── */
.dayhd{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dayhd-net{font:700 11px/1 var(--font-d);letter-spacing:.02em;text-transform:none}
.rec.strec.is-link,.rec.pnlrec.is-link{cursor:pointer}
.rec.strec.is-link:hover,.rec.strec.is-link:focus-visible,
.rec.pnlrec.is-link:hover,.rec.pnlrec.is-link:focus-visible{background:var(--surface-2)}
.rec.strec .st-bal{display:block;font:500 11px/1.3 var(--font-b);color:var(--text-faint)}
/* The chevron is a pseudo-element on the ROW, so it lands as the last flex
   item beside .rec-side. Emitting it inside chipHtml put it in .rec-side,
   which is a COLUMN flex — the arrow stacked underneath the balance. */
.rec.strec.is-link::after,.rec.pnlrec.is-link::after{
  content:"›";flex:none;margin-left:2px;color:var(--text-faint);
  font:400 16px/1 var(--font-b);transition:transform var(--dur-fast) var(--ease-out);
}
.rec.strec.is-open::after,.rec.pnlrec.is-open::after{transform:rotate(90deg);color:var(--ink-brand)}
/* Rows sit INSIDE .panel.stwrap, which already draws the frame. The shared
   `.page .dayhd + .rec` rule adds a full 1px box to the first row of each day,
   which doubled up against the panel edge and left the other rows ragged. */
.stwrap .rec{border-left:0;border-right:0}
/* The day header was position:sticky with a --bg fill, so inside a white panel
   it read as a grey slab hovering over the rows and clipped the first one as it
   stuck. Inside the statement it is a section band, not a floating page bar. */
.stwrap .dayhd{position:static;margin:0;background:var(--surface-2);border-top:1px solid var(--border);color:var(--text-dim)}
.stwrap .dayhd:first-child{border-top:0}
.stwrap .dayhd + .rec{border-top:0}
/* Colour-coded category chips — the ledger was a wall of grey text. */
.rec-lead.in{background:rgba(var(--pos-rgb),.14);color:var(--ink-pos)}
.rec-lead.out{background:rgba(var(--warn-rgb),.16);color:var(--ink-warn)}
.rec-lead.play{background:rgba(var(--brand-rgb),.16);color:var(--ink-brand)}
.rec-lead.win{color:var(--ink-pos)}
:root[data-theme="daylight"] .rec-lead.out{background:rgba(var(--warn-rgb),.18);color:#8A5200}
:root[data-theme="daylight"] .rec-lead.play{background:rgba(var(--brand-rgb),.24);color:#7A5200}
.st-detail{
  border:1px solid var(--border);border-top:0;background:var(--surface-2);
  padding:11px 13px 12px;display:flex;flex-direction:column;gap:11px;
  animation:v2rise .28s var(--ease-out) both;
}
.st-detail.is-loading{flex-direction:row;align-items:center;gap:8px;color:var(--text-dim);font:500 12px/1 var(--font-b)}
.sd-spin{width:14px;height:14px;flex:none;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--brand);animation:v2streamspin .8s linear infinite}
/* ── compact bet card (statement + P&L detail) ───────────────────────── */
.bd-fix{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bd-team{display:flex;align-items:center;gap:7px;min-width:0}
.bd-team b{font:600 13px/1.2 var(--font-d);letter-spacing:.02em;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-team.on b{color:var(--text)}
.bd-team .team-logo-img,.bd-team .team-badge{width:22px;height:22px;flex:none}
.bd-team .team-badge{border-radius:50%}
/* the backed side is the point of the card — mark it, quietly */
.bd-team.on{position:relative}
.bd-team.on b::after{content:"";display:block;height:2px;margin-top:3px;border-radius:2px;background:var(--brand)}
.bd-v{font:600 11px/1 var(--font-d);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);flex:none}
.bd-facts{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.bd-f{
  font:600 11px/1 var(--font-d);letter-spacing:.06em;text-transform:uppercase;
  padding:5px 8px;border-radius:6px;background:var(--surface-3);color:var(--text-dim);
  border:1px solid var(--border);white-space:nowrap;
}
.bd-f b{color:var(--text);font-weight:700}
.bd-f.back{background:var(--back-cell);border-color:var(--back-cell-bd);color:var(--back-num)}
.bd-f.lay{background:var(--lay-cell);border-color:var(--lay-cell-bd);color:var(--lay-num)}
.bd-res{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:9px;
  padding:8px 10px;border-radius:8px;background:var(--surface-3);border:1px solid var(--border);
  font:600 11px/1 var(--font-d);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);
}
.bd-res b{font:700 15px/1 var(--font-d);letter-spacing:.01em}
.bd-res.win{border-color:rgba(var(--pos-rgb),.42)}
.bd-res.win b{color:var(--ink-pos)}
.bd-res.risk{border-color:rgba(var(--neg-rgb),.42)}
.bd-res.risk b{color:var(--ink-neg)}
.bd-meta{margin-top:8px;font:500 11px/1.4 var(--font-b);color:var(--text-faint)}
/* a market settlement can cover several bets — one tight line each */
.bd-list{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.bd-mini{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface-3)}
.bd-mini-n{flex:1;min-width:0;font:600 12px/1.3 var(--font-b);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-mini-o{font:500 11px/1 var(--font-b);color:var(--text-dim);white-space:nowrap}
.bd-mini-p{font:700 12px/1 var(--font-d);white-space:nowrap}
.bd-mini-p.win{color:var(--ink-pos)}
.bd-mini-p.risk{color:var(--ink-neg)}
.bd-mini-p.flat{font-weight:600;color:var(--text-faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:520px){.bd-mini-o{display:none}}
.sd-grp{display:flex;flex-direction:column;gap:5px}
.sd-h{font:600 10px/1 var(--font-d);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.sd-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sd-k{font:500 12px/1.4 var(--font-b);color:var(--text-dim)}
.sd-v{font:600 12px/1.4 var(--font-b);color:var(--text);text-align:right;min-width:0}
.sd-note{margin:0;font:500 11px/1.45 var(--font-b);color:var(--text-faint)}
@media (prefers-reduced-motion:reduce){.st-detail{animation:none}.sd-spin{animation:none}}
#v2-txn-rows .rec,#v2-mb-list > .rec,.page .dayhd + .rec{border:1px solid var(--border);border-top:0}
#v2-txn-rows .dayhd,#v2-mb-list .dayhd{border:0;border-bottom:1px solid var(--border)}

/* status chips (engine statusChip → .status-badge is-*) */
.status-badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:4px;
  font:600 11px/1 var(--font-b);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  background:var(--surface-3);border:1px solid var(--border-strong);color:var(--text-dim);
}
.status-badge svg{width:10px;height:10px;flex:none}
.status-badge.is-green{background:rgba(53,208,127,.1);border-color:rgba(53,208,127,.4);color:var(--ink-pos)}
.status-badge.is-amber{background:rgba(255,176,32,.08);border-color:rgba(255,176,32,.38);color:var(--ink-warn)}
.status-badge.is-red{background:rgba(255,93,93,.09);border-color:rgba(255,93,93,.4);color:var(--ink-neg)}
.status-badge.is-grey{color:var(--text-dim)}

/* ── metrics strip ── */
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px}
.metric{display:flex;flex-direction:column;gap:5px;padding:9px 11px;background:var(--surface);border:1px solid var(--border);border-radius:8px}
.mt-lb{font:600 9px/1 var(--font-b);letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint)}
.mt-v{font:600 14px/1 var(--font-d);letter-spacing:.02em;color:var(--text);white-space:nowrap}
.mt-v.win{color:var(--ink-pos)}
.mt-v.risk{color:var(--ink-neg)}
.mt-v.brand{color:var(--ink-brand)}

/* ── shared buttons ── */
.wbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:8px;flex:none;
  font:600 11.5px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);
  transition:filter var(--dur-instant) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out);
}
.wbtn.pri{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.wbtn.pri:hover{filter:brightness(1.08)}
.wbtn.pri:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.wbtn.sec:hover{background:var(--surface-3)}
.wbtn.sm{height:30px;padding:0 11px;font-size:10.5px}
.wbtn:disabled{opacity:.55;cursor:default;filter:none;transform:none}

/* ── balance overview / activity parity pages ── */
.bal-overview{display:flex;flex-direction:column;gap:9px;padding:15px 14px}
.bal-overview-value{font:600 36px/1 var(--font-d);letter-spacing:.01em;color:var(--text)}
.bal-overview-ledger{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 11px/1.4 var(--font-b);color:var(--text-dim)}
.bal-overview-ledger b{font-weight:700;color:var(--text)}
.bal-overview-ledger b.risk{color:var(--ink-neg)}
.reserve{height:6px;border-radius:999px;overflow:hidden;background:var(--surface-3);border:1px solid var(--border)}
.reserve span{display:block;height:100%;border-radius:inherit;background:var(--warn)}
.balance-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.balance-actions .wbtn{width:100%}

/* ── leaderboard ── */
.leaderboard{overflow:hidden}
.lb-head,.lb-row{display:grid;grid-template-columns:minmax(0,1fr) 112px 76px;align-items:center;gap:10px}
.lb-head{min-height:30px;padding:0 12px;background:var(--surface-2);border-bottom:1px solid var(--border);font:600 9px/1 var(--font-b);letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint)}
.lb-head span:nth-child(n+2){text-align:right}
.lb-row{min-height:54px;padding:7px 12px;border-bottom:1px solid var(--border)}
.lb-row:last-child{border-bottom:0}
.lb-medal,.lb-rank{grid-column:1;grid-row:1;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:var(--surface-2);border:1px solid var(--border-strong);font:700 12px/1 var(--font-d);color:var(--text-dim)}
.lb-medal.rank-1{color:var(--ink-brand);border-color:rgba(var(--brand-rgb),.5);background:rgba(var(--brand-rgb),.1)}
.lb-medal.rank-2{color:var(--text);background:var(--surface-3)}
.lb-medal.rank-3{color:var(--ink-warn);border-color:rgba(255,176,32,.4)}
.lb-player{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:2px;min-width:0;padding-left:38px}
.lb-player b{font:600 13px/1.25 var(--font-d);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-player span{font:500 10px/1.3 var(--font-b);color:var(--text-faint)}
.lb-pnl{grid-column:2;text-align:right;font:600 14px/1 var(--font-d)}
.lb-rate{grid-column:3;text-align:right;font:600 11px/1 var(--font-d);color:var(--text-dim)}

/* ── operator tools ── */
.admin-panel{overflow:hidden}
.admin-row{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 11px;border-bottom:1px solid var(--border)}
.admin-row:last-child{border-bottom:0}
.admin-row.compact{min-height:46px}
.admin-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.admin-copy b{font:600 12.5px/1.25 var(--font-d);letter-spacing:.02em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-copy span{font:500 10.5px/1.4 var(--font-b);color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-actions{display:flex;align-items:center;gap:6px;flex:none}
.admin-empty{padding:18px 12px;text-align:center;font:500 11px/1.4 var(--font-b);color:var(--text-faint)}
.paybtn{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:50px;border-radius:8px;text-align:center;
  background:var(--brand);color:var(--brand-ink);
  font:600 14px/1 var(--font-d);letter-spacing:.08em;text-transform:uppercase;
  transition:filter var(--dur-instant) var(--ease-out);
}
.paybtn:not(:disabled):active{filter:brightness(.9)}
.paybtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.paybtn:disabled,.paybtn.is-loading{filter:saturate(.5) brightness(.8);cursor:default}
.linkbtn{align-self:flex-start;font:600 11px/1.4 var(--font-d);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--text)}

/* ── WALLET ── */
.wal{overflow:hidden}
.wal-top{display:flex;flex-direction:column;gap:14px;padding:14px 13px 12px}
.wal-main{display:flex;flex-direction:column;gap:7px;min-width:0}
.wal-kick{font:600 10px/1 var(--font-d);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.wal-big{display:flex;align-items:center;gap:10px}
.wal-big b{font:600 38px/1 var(--font-d);letter-spacing:.01em;color:var(--text);font-variant-numeric:tabular-nums}
.wal-eye{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-faint);background:var(--surface-2);border:1px solid var(--border)}
.wal-eye:hover{color:var(--text-dim)}
.wal-eye:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.wal-led{display:flex;gap:16px;font:500 11px/1.4 var(--font-b);color:var(--text-faint);flex-wrap:wrap}
.wal-led b{font-weight:600;color:var(--text-dim);margin-left:4px}
.wal-led b.risk{color:var(--ink-neg)}
.wal-led b.flat{color:var(--text-faint)}
.wal-bar{height:4px;border-radius:4px;background:var(--surface-3);overflow:hidden;max-width:340px}
.wal-bar span{display:block;height:100%;background:var(--neg);opacity:.75;transition:width var(--dur-base) var(--ease-out)}
.wal-acts{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.wal-acts .wbtn{height:48px;font-size:13px}
.wal-promise{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:9px 14px;
  padding:10px 13px;border-top:1px solid var(--border);background:var(--surface-2);
}
.wal-promise>span{font:600 10px/1.5 var(--font-b);letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint)}

/* ════════ PAYMENT LOGOS + TRUST STRIP (shared) ═══════════════════
   Payment SVGs are full-colour official marks built for LIGHT bg (white
   + dark internals), so each sits on its own WHITE chip — reads on every
   theme and mirrors the standard checkout row. Surrounding copy/badges
   use theme tokens. Drives the deposit strip, the wallet promise, and
   the 18+/responsible/secure trust footers. */
.paymethods{display:flex;flex-direction:column;gap:8px;min-width:0}
.pm-lb{font:600 11px/1.4 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.pm-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pay-chip{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  height:32px;padding:0 9px;border-radius:8px;background:#fff;
  border:1px solid rgba(12,18,14,.12);
  box-shadow:0 1px 2px rgba(7,10,8,.20),inset 0 0 0 1px rgba(255,255,255,.55);
}
.pay-chip img{display:block;height:21px;width:auto;max-width:100px;object-fit:contain}
.paymethods.pm-sm{gap:7px}
.paymethods.pm-sm .pm-row{gap:5px}
.paymethods.pm-sm .pay-chip{height:26px;padding:0 7px;border-radius:6px}
.paymethods.pm-sm .pay-chip img{height:16px;max-width:80px}
/* deposit context — set off from the amount field above */
.pm-dep{margin-top:2px;padding-top:12px;border-top:1px solid var(--border)}

/* 18+ · Play responsibly · Secure  +  logos */
.trust{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.trust .paymethods{align-items:center}
.trust .pm-row{justify-content:center}
.tr-marks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px 16px}
.tr-item{display:inline-flex;align-items:center;gap:7px;font:600 11px/1.15 var(--font-b);letter-spacing:.01em;color:var(--text-dim)}
.tr-item em{font-style:normal}
.tr-item .v2-ic{--icon-tint:var(--text-dim);flex:none}
.tr-age{color:var(--text)}
.age18{width:23px;height:23px;flex:none;color:var(--text)}
/* rail: left-aligned vertical stack for the ~230px desktop rail */
.trust--rail{align-items:flex-start;text-align:left;gap:14px}
.trust--rail .tr-marks{flex-direction:column;align-items:flex-start;gap:11px}
.trust--rail .paymethods{align-items:flex-start}
.trust--rail .pm-row{justify-content:flex-start}

/* ── DEPOSIT / WITHDRAW panels ── */
.dpanel{overflow:hidden}
.dp-body{display:flex;flex-direction:column;gap:10px;padding:13px}
.fld-lb{font:600 11px/1.6 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.dchips,.pcts{display:flex;flex-wrap:wrap;gap:6px}
.pcts{flex-wrap:nowrap}
.dchip{
  position:relative;flex:1;min-width:64px;height:40px;border-radius:6px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font:600 12.5px/1 var(--font-d);letter-spacing:.03em;color:var(--text-dim);
  background:var(--surface-3);border:1px solid var(--border-strong);
  transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast);
}
.dchip::after{content:"";position:absolute;inset:-4px 0}
.dchip i{font:600 9px/1 var(--font-b);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-brand)}
.dchip.sel{color:var(--ink-brand);border-color:rgba(var(--brand-rgb),.5);background:rgba(var(--brand-rgb),.12)}
.fld{display:flex;align-items:center;gap:8px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-2);padding:0 12px;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.fld:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18)}
.fld.amt{height:56px}
.fld.amt .cur{font:600 20px/1 var(--font-d);color:var(--text-faint)}
.fld.amt input{flex:1;min-width:0;height:100%;font:700 24px/1 var(--font-d);letter-spacing:.01em;color:var(--text);caret-color:var(--brand)}
.fld.amt input::-webkit-outer-spin-button,.fld.amt input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fld.amt input[type=number]{-moz-appearance:textfield;appearance:textfield}
.fld.upi{height:46px}
.fld.upi input{flex:1;min-width:0;height:100%;font:600 14px/1 var(--font-b);color:var(--text)}
.fld.srch{height:40px;color:var(--text-faint)}
.fld.srch input{flex:1;min-width:0;height:100%;font:500 12.5px/1 var(--font-b);color:var(--text)}
.fld.srch input::-webkit-search-cancel-button{display:none}
.fld input::placeholder{color:var(--text-faint)}
.fld-err{font:600 11px/1.45 var(--font-b);color:var(--ink-neg)}
.fld-note{font:500 11px/1.5 var(--font-b);color:var(--text-dim);min-height:15px}
.dp-note{font:500 11px/1.55 var(--font-b);color:var(--text-faint)}
.dp-hero{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);text-align:center}
.dp-x{font:700 34px/1 var(--font-d);letter-spacing:.01em;color:var(--ink-brand)}
/* compact single-viewport deposit pay screen */
.dp-pay-body{gap:9px}
.dp-topline{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dp-topline-amt{display:flex;flex-direction:column;gap:2px;min-width:0}
.dp-amt{font:700 23px/1 var(--font-d);letter-spacing:.01em;color:var(--ink-brand)}
.dp-pay-grid{display:flex;flex-direction:column;gap:10px}
.dp-pay-actions{display:flex;flex-direction:column;gap:9px}
.utr-block{display:flex;flex-direction:column;gap:6px}
.dp-foot{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:1px}
.dp-foot .pm-dep{margin-top:0;padding-top:9px;width:100%}
.dp-foot .linkbtn{align-self:center}
@media (min-width:600px){
  .dp-pay-grid{flex-direction:row;align-items:flex-start;gap:14px}
  .dp-pay-grid .dp-qr{flex:none}
  .dp-pay-actions{flex:1;min-width:0;justify-content:center}
}
.cpy{
  position:relative;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:6px;flex:none;
  font:600 10.5px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
  background:var(--surface-3);border:1px solid var(--border-strong);
}
.cpy::after{content:"";position:absolute;inset:-5px}
.cpy .cp-b{display:none;color:var(--ink-pos)}
.cpy.did .cp-a{display:none}
.cpy.did .cp-b{display:inline}
.cpy.did{border-color:rgba(53,208,127,.5)}
.cpyrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
.cpyrow > div{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.cpyrow b{font:600 13px/1.3 var(--font-b);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-exp{display:flex;align-items:center;gap:8px;font:600 11px/1.4 var(--font-b);letter-spacing:.04em;color:var(--ink-warn)}
.dp-exp i{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none;animation:v2ping 1.8s var(--ease-out) infinite}
.dp-exp.is-expired{color:var(--ink-neg);flex-wrap:wrap}
.dp-exp.is-expired i{display:none}
.dp-qr{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
.dp-qr canvas,.dp-qr img{width:min(42vw,152px);height:min(42vw,152px);border-radius:6px;background:#fff;padding:8px;box-sizing:content-box}
.dp-qr span{font:600 11px/1 var(--font-b);letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint)}
.dp-upi{
  position:relative;display:flex;flex-direction:column;gap:7px;
  padding:10px 10px 10px 12px;border:1px solid rgba(var(--brand-rgb),.34);border-radius:8px;overflow:hidden;
  background:linear-gradient(112deg,rgba(var(--brand-rgb),.11),rgba(var(--brand-rgb),.03) 62%,var(--surface-2));
}
.dp-upi::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--brand)}
.dp-upi-id{font:650 12.5px/1.3 var(--font-b);letter-spacing:.02em;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-upi-acts{display:flex;align-items:stretch;gap:8px}
.dp-upi-acts > *{flex:1}
.dp-upi .cpy,.dp-upi .wbtn{height:42px;justify-content:center}
.dp-upi .wbtn{padding-inline:12px}
.utr-row{display:flex;gap:8px}
.utr-row input{
  flex:1;min-width:0;height:46px;padding:0 12px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border-strong);
  font:600 16px/1 var(--font-b);letter-spacing:.02em;color:var(--text);
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.utr-row input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18);outline:none}
.utr-row .wbtn{height:46px}
.dp-opt{display:flex;align-items:center;gap:9px;font:600 9.5px/1 var(--font-d);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.dp-opt::before,.dp-opt::after{content:"";height:1px;flex:1;background:var(--border)}
.dp-status{width:100%;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);text-align:left}
.dp-strow{display:flex;align-items:center;gap:8px;font:500 11px/1.4 var(--font-b);color:var(--text-dim)}
.done{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 14px 14px;max-width:400px;margin:0 auto;text-align:center}
.done-ck{
  width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ink-pos);
  background:rgba(53,208,127,.13);border:1px solid rgba(53,208,127,.5);
}
.done-ck.is-checking svg{display:none}
.done-ck.is-checking::after{content:"";width:18px;height:18px;border:3px solid rgba(53,208,127,.22);border-top-color:var(--pos);border-radius:50%;animation:v2streamspin .72s linear infinite}
.done.is-review .done-ck{color:var(--ink-warn);background:rgba(255,176,32,.13);border-color:rgba(255,176,32,.5)}
.done.is-review .done-ck svg{display:none}
.done.is-review .done-ck::after{content:"…";font:700 22px/1 var(--font-d);transform:translateY(-4px)}
.done.is-review h3{color:var(--ink-warn)}
.done h3{font:600 17px/1.2 var(--font-d);letter-spacing:.06em;text-transform:uppercase}
.done p{font:500 12px/1.55 var(--font-b);color:var(--text-dim);max-width:400px}
.done .paybtn{max-width:320px}
.dp-count{padding:7px 11px;border:1px solid rgba(53,208,127,.28);border-radius:999px;background:rgba(53,208,127,.09);font:600 10.5px/1.3 var(--font-b);color:var(--ink-pos)}
.done.is-review .dp-count{border-color:rgba(255,176,32,.3);background:rgba(255,176,32,.09);color:var(--ink-warn)}
/* calm, non-blocking deposit confirm + filled-button icon tints */
.wbtn.pri .v2-ic{--icon-tint:var(--brand-ink)}
.dp-qr span{display:inline-flex;align-items:center;gap:5px}
.dp-qr span .v2-ic{--icon-tint:var(--text-faint)}
.dp-amtline{font:700 27px/1 var(--font-d);letter-spacing:.01em;color:var(--ink-brand)}
.dp-safe{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  border:1px solid rgba(53,208,127,.28);background:rgba(53,208,127,.09);
  font:600 10.5px/1 var(--font-b);letter-spacing:.02em;color:var(--ink-pos)}
.dp-safe .v2-ic{--icon-tint:var(--ink-pos)}
.dp-utrfb{width:100%;max-width:360px;display:flex;flex-direction:column;gap:9px;
  padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);text-align:left;
  animation:v2rise .4s var(--ease-out) both}
.dp-utrfb .dp-note{color:var(--text-dim)}
.done .dp-done-cta{margin-top:5px}
.done.is-confirmed .done-ck{color:var(--ink-pos);background:rgba(53,208,127,.18);border-color:var(--pos)}
.done.is-confirmed .done-ck svg{animation:v2ckpop .5s cubic-bezier(.34,1.56,.64,1) both}

/* engine deposit/withdraw timeline (renderDepositTimeline), Floodlight skin */
.deposit-timeline{display:flex;flex-direction:column;gap:0}
.deposit-timeline-row{
  position:relative;display:flex;align-items:center;gap:10px;padding:7px 0 7px 2px;
  font:600 11px/1.3 var(--font-b);letter-spacing:.03em;color:var(--text-faint);
}
.deposit-timeline-row::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:1px;background:var(--border)}
.deposit-timeline-row:first-child::before{top:50%}
.deposit-timeline-row:last-child::before{bottom:50%}
.deposit-timeline-dot{width:11px;height:11px;border-radius:50%;flex:none;position:relative;z-index:1;background:var(--surface-3);border:1px solid var(--border-strong)}
.deposit-timeline-row.done{color:var(--text)}
.deposit-timeline-row.done .deposit-timeline-dot{background:var(--pos);border-color:var(--pos)}
.deposit-timeline-row.current{color:var(--ink-warn)}
.deposit-timeline-row.current .deposit-timeline-dot{background:rgba(255,176,32,.25);border-color:var(--warn);animation:v2pulse 1.6s var(--ease-out) infinite}
.deposit-timeline-row.failed{color:var(--ink-neg)}
.deposit-timeline-row.failed .deposit-timeline-dot{background:rgba(255,93,93,.25);border-color:var(--neg)}

/* withdraw destination rows */
.mrow{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border-strong);border-radius:8px;
  background:var(--surface-2);cursor:pointer;
}
.mrow:has(input:checked){border-color:rgba(var(--brand-rgb),.55);background:rgba(var(--brand-rgb),.07)}
.mrow input[type="radio"]{appearance:none;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--border-strong);flex:none;margin:0;position:relative}
.mrow input[type="radio"]:checked{border-color:var(--brand)}
.mrow input[type="radio"]:checked::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--brand)}
.mr-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mr-main b{font:600 13px/1.25 var(--font-b);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-main span{font:500 10px/1.3 var(--font-b);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.mr-x{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-faint);flex:none}
.mr-x:hover{color:var(--ink-neg)}
.ckrow{display:flex;align-items:center;gap:8px;font:500 11px/1.4 var(--font-b);color:var(--text-dim);cursor:pointer}
.ckrow input{accent-color:var(--brand);width:14px;height:14px;margin:0}
.wdrev{display:flex;flex-direction:column;gap:0}
.wdrev-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid var(--border);font:500 12px/1.3 var(--font-b);color:var(--text-dim)}
.wdrev-row b{font:600 15px/1 var(--font-d);letter-spacing:.02em;color:var(--text)}
.wdrev-note{padding:10px 2px 2px;font:500 11px/1.5 var(--font-b);color:var(--text-faint)}
.dates{flex-direction:row;align-items:flex-end;flex-wrap:wrap}
.dates .fld-lb{display:flex;flex-direction:column;gap:5px;flex:1;min-width:130px}
.dtin{
  height:40px;padding:0 10px;border-radius:8px;width:100%;
  background:var(--surface-2);border:1px solid var(--border-strong);
  font:600 12.5px/1 var(--font-b);color:var(--text);color-scheme:dark;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.dtin:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18);outline:none}
.dates .wbtn{height:40px}

/* ── MY BETS ── */
.seg{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);align-self:flex-start}
.seg-b{
  height:28px;padding:0 14px;border-radius:6px;
  font:600 11px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
}
.seg-b.on{background:var(--surface-3);color:var(--text)}
.ptabs{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:1px}
.ptabs::-webkit-scrollbar{display:none}
.ptab{
  height:30px;padding:0 12px;border-radius:6px;flex:none;position:relative;white-space:nowrap;
  font:600 11px/28px var(--font-d);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);
  transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast);
}
.ptab::after{content:"";position:absolute;inset:-5px 0}
.ptab.on{color:var(--ink-brand);border-color:rgba(var(--brand-rgb),.5);background:rgba(var(--brand-rgb),.12)}
.ptab i{font:600 10px/1 var(--font-b);font-style:normal;padding:2px 4px;border-radius:4px;background:var(--surface-3);color:var(--text-dim)}
.ptab.on i{background:rgba(var(--brand-rgb),.16);color:var(--ink-brand)}
#v2-mb-list{display:flex;flex-direction:column;gap:8px}
.mbc{
  display:flex;flex-direction:column;gap:6px;padding:10px 12px 8px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
}
.mbc-top{display:flex;align-items:center;gap:8px;min-width:0}
.mbc-sel{font:600 14px/1.2 var(--font-d);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mbc-live{margin-left:auto;flex:none;display:flex;align-items:center;gap:5px;font:500 10px/1.3 var(--font-b);color:var(--text-faint);max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbc-live.is-live{color:var(--text-dim);font-weight:600}
.mbc-sub{font:500 10.5px/1.4 var(--font-b);color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:7px 0 2px;border-top:1px solid var(--border)}
.mbc-grid > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.mbc-grid span{font:600 10px/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbc-grid b{font:600 12.5px/1 var(--font-d);letter-spacing:.02em;color:var(--text);white-space:nowrap}
.mbc-grid b.win{color:var(--ink-pos)}
.mbc-grid b.risk{color:var(--ink-neg)}
.mbc-tl{display:flex;gap:5px}
.mbc-tl span{
  flex:1;text-align:center;padding:4px 0;border-radius:4px;
  font:600 10px/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-faint);
}
.mbc-tl span.is-done{color:var(--ink-pos);border-color:rgba(53,208,127,.35);background:rgba(53,208,127,.07)}
.mbc .ob-act{border-top:1px solid var(--border);padding-top:7px;min-height:32px}
.mbc-open{margin-left:auto;flex:none;font:600 10.5px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.mbc-open:hover{color:var(--ink-brand)}
.mbc .ob-cash + .mbc-open{margin-left:10px}
.mbc-note{font:500 11px/1.5 var(--font-b);color:var(--text-dim);padding:2px 0}
.unmatched-actions{flex-wrap:wrap}
.unmatched-actions .mbc-open{margin-left:auto}

/* ── v2 accumulator dock + sheet ── */
.multi-dock{
  position:fixed;right:max(12px,var(--safe-r));bottom:14px;z-index:55;
  min-height:44px;padding:6px 12px;border-radius:8px;
  display:flex;align-items:center;gap:7px;background:var(--brand);color:var(--brand-ink);
  border:1px solid var(--brand-hot);box-shadow:0 10px 26px rgba(0,0,0,.35);
  font:600 10px/1 var(--font-b);letter-spacing:.04em;text-transform:uppercase;
}
.multi-dock[hidden]{display:none!important}
.multi-dock-kicker{font:700 11px/1 var(--font-d);letter-spacing:.12em}
.multi-dock b{min-width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-ink);color:var(--ink-brand);font:700 12px/1 var(--font-d)}
.multi-sheet{display:flex;flex-direction:column;gap:8px}
.multi-leg{display:grid;grid-template-columns:minmax(0,1fr) auto 36px;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.multi-leg > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.multi-leg b{font:600 12.5px/1.25 var(--font-d);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.multi-leg span{font:500 10.5px/1.35 var(--font-b);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.multi-leg strong{font:600 13px/1 var(--font-d);color:var(--back)}
.multi-leg > button{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);border:1px solid var(--border)}
.multi-math,.multi-return{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:8px;background:var(--surface-2);font:500 11px/1.35 var(--font-b);color:var(--text-dim)}
.multi-math b,.multi-return b{font-weight:700;color:var(--ink-brand)}
.multi-stake{display:flex;flex-direction:column;gap:5px;font:600 10px/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.multi-stake input{height:46px;padding:0 12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);font:600 20px/1 var(--font-d)}
.multi-presets{display:flex;gap:6px;flex-wrap:wrap}
.multi-note{font:500 11px/1.45 var(--font-b);color:var(--ink-warn)}
.multi-footer{display:grid;grid-template-columns:auto 1fr;gap:8px;flex:1}
@media (max-width:980px){.multi-dock{bottom:calc(var(--navH) + var(--safe-b) + var(--v2-vv-bottom) + 10px)}}
.mb-foot{display:flex;align-items:center;gap:6px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);font:500 11px/1 var(--font-b);color:var(--text-dim)}
.mb-foot b{margin-left:auto;font-weight:600}

/* ── STATEMENT ── */
.stwrap{overflow:hidden}
.strow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid var(--border)}
.strow:last-of-type{border-bottom:0}
.strow.edge{background:var(--surface-2)}
.st-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.st-d{font:500 10px/1.3 var(--font-b);color:var(--text-faint)}
.st-t{font:600 12px/1.25 var(--font-d);letter-spacing:.03em;color:var(--text)}
.st-desc{font:500 10.5px/1.35 var(--font-b);color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-amts{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.st-amts b{font:600 12.5px/1 var(--font-d);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.st-bal{font:600 11px/1 var(--font-b);color:var(--text-dim)}
.st-bal.is-close{color:var(--ink-brand);font-size:12px}

/* ── P&L hero ── */
.pnl-hero{display:flex;flex-direction:column;gap:7px;padding:16px 13px}
.pnl-big{font:600 34px/1 var(--font-d);letter-spacing:.01em}
.pnl-sub{font:500 11px/1.4 var(--font-b);color:var(--text-dim)}

/* ── AUTH ── */
.au-page{max-width:460px;padding-top:26px}
.au-card{display:flex;flex-direction:column;gap:12px;padding:22px 18px 18px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.au-brand{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:2px}
.au-brand .wm-mark{width:15px;height:17px}
.au-brand b{font:700 21px/1 var(--font-d);letter-spacing:.06em}
.au-title{text-align:center;font:600 18px/1.2 var(--font-d);letter-spacing:.06em;text-transform:uppercase}
.au-sub{text-align:center;font:500 11.5px/1.55 var(--font-b);color:var(--text-dim);margin-top:-6px}
#v2-au-form{display:flex;flex-direction:column;gap:11px}
.au-fld{display:flex;flex-direction:column;gap:5px}
.au-in{
  width:100%;height:46px;padding:0 12px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border-strong);
  font:600 14px/1 var(--font-b);color:var(--text);caret-color:var(--brand);
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.au-in:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18);outline:none}
.au-in.is-invalid{border-color:var(--neg);box-shadow:0 0 0 3px rgba(var(--neg-rgb),.16)}
.au-in::placeholder{color:var(--text-faint)}
.input-wrap{position:relative}
.input-wrap .au-in{padding-right:44px}
.input-reveal{
  position:absolute;right:0;top:0;width:44px;height:46px;
  display:flex;align-items:center;justify-content:center;color:var(--text-faint);
}
.input-reveal:hover{color:var(--text-dim)}
.input-reveal svg{width:17px;height:17px}
.caps-hint{display:none;font:600 10.5px/1.4 var(--font-b);letter-spacing:.06em;color:var(--ink-warn)}
.caps-hint.on{display:block}
.field-error{font:600 11px/1.45 var(--font-b);color:var(--ink-neg);min-height:0}
.field-error:empty{display:none}
/* Auth fields reserve the error slot so an appearing error doesn't shove layout. */
.au-fld .field-error{min-height:14px}
.au-fld .field-error:empty{display:block}
.form-error{
  padding:9px 11px;border-radius:8px;font:500 11px/1.5 var(--font-b);color:var(--ink-neg);
  background:rgba(255,93,93,.07);border:1px solid rgba(255,93,93,.4);
}
.au-switch{text-align:center;font:500 11.5px/1.5 var(--font-b);color:var(--text-dim)}
.au-switch a{color:var(--ink-brand);font-weight:700}
.au-trust{padding:6px 0 2px}

/* ── PROFILE ── */
.idcard{display:flex;align-items:center;gap:12px;padding:13px}
.id-av{
  width:44px;height:44px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--border-strong);
  font:600 19px/1 var(--font-d);color:var(--ink-brand);
}
.id-col{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.id-col b{font:600 15px/1.2 var(--font-d);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.id-col span{font:500 11px/1.4 var(--font-b);color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plink{
  display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-bottom:1px solid var(--border);
  font:600 11.5px/1.3 var(--font-d);letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);
  transition:color var(--dur-fast),background var(--dur-fast);
}
.plink:last-of-type{border-bottom:0}
.plink:hover{color:var(--text);background:rgba(200,230,210,.04)}
.plink.on{color:var(--ink-brand)}
.plink i{margin-left:auto;font-style:normal;color:var(--text-faint);font-size:13px}
.set-row{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 12px;border-bottom:1px solid var(--border)}
.set-row:last-of-type{border-bottom:0}
.set-row.col{flex-direction:column;align-items:stretch;gap:8px;padding-top:11px;padding-bottom:12px}
.set-lb{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;font:600 11.5px/1.3 var(--font-d);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.set-lb em{font:500 10.5px/1.4 var(--font-b);font-style:normal;letter-spacing:.02em;text-transform:none;color:var(--text-faint)}
.set-block{display:flex;flex-direction:column;gap:8px;padding:11px 12px;border-bottom:1px solid var(--border)}
.set-block .wbtn{align-self:flex-start}
.set-field{display:flex;flex-direction:column;gap:4px;font:600 10px/1 var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.oneclick-set{display:flex;align-items:center;gap:8px;flex:none}
.oneclick-set input{width:82px;height:36px;padding:0 8px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);font:600 14px/1 var(--font-d);text-align:right;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.oneclick-set input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18);outline:none}
.lchips{display:flex;flex-wrap:wrap;gap:6px}
.lchip{
  height:30px;padding:0 11px;border-radius:6px;flex:none;
  font:600 11px/28px var(--font-b);color:var(--text-dim);
  background:var(--surface-2);border:1px solid var(--border-strong);
  transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast);
}
.lchip.on{color:var(--ink-brand);border-color:rgba(var(--brand-rgb),.5);background:rgba(var(--brand-rgb),.12)}
.switch{
  position:relative;width:42px;height:24px;border-radius:999px;flex:none;
  background:var(--surface-3);border:1px solid var(--border-strong);
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.switch i{
  position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;
  background:var(--text-dim);transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast);
}
.switch.on{background:rgba(var(--brand-rgb),.25);border-color:rgba(var(--brand-rgb),.5)}
.switch.on i{transform:translateX(18px);background:var(--brand)}
.rp-body{display:flex;flex-direction:column;gap:8px;padding:11px 12px}
.rp-body p{font:500 11px/1.6 var(--font-b);color:var(--text-dim)}
.rp-body a{color:var(--ink-brand);font-weight:700}

/* ── desktop rail extras (page screens) ── */
.tr-row{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-bottom:1px solid var(--border)}
.tr-row:last-of-type{border-bottom:0}
.tr-row b{font:600 11px/1.3 var(--font-d);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.tr-row span{font:500 11px/1.5 var(--font-b);color:var(--text-faint)}

/* ── WB.Modal / 2FA / toasts — Floodlight skin for the engine chrome ── */
.wb-modal-backdrop{
  position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(4,6,5,.72);opacity:0;transition:opacity var(--dur-base) var(--ease-out);
}
.wb-modal-backdrop.wb-open{opacity:1}
.wb-modal-card{
  width:100%;max-width:400px;max-height:min(86vh,720px);overflow:auto;border-radius:12px;
  background:var(--surface);border:1px solid var(--border-strong);
  transform:translateY(10px) scale(.98);transition:transform var(--dur-base) var(--ease-out);
  display:flex;flex-direction:column;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.wb-modal-backdrop.wb-open .wb-modal-card{transform:none}
.wb-modal-backdrop[data-size="sm"] .wb-modal-card{max-width:360px}
.wb-modal-backdrop[data-variant="sheet"]{align-items:flex-end;padding:0}
.wb-modal-backdrop[data-variant="sheet"] .wb-modal-card{max-width:none;border-radius:12px 14px 0 0;transform:translateY(24px)}
.wb-modal-backdrop[data-variant="sheet"].wb-open .wb-modal-card{transform:none}
.wb-sheet-grabber{width:38px;height:4px;border-radius:4px;background:var(--border-strong);margin:8px auto 0;flex:none}
.wb-modal-header{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 8px 0 15px;border-bottom:1px solid var(--border);flex:none}
.wb-modal-title{flex:1;min-width:0;font:600 13px/1.3 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.wb-modal-close{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);flex:none}
.wb-modal-close:hover{color:var(--text);background:var(--surface-2)}
.wb-modal-body{padding:14px 15px;font:500 12px/1.5 var(--font-b);color:var(--text-dim)}
.wb-modal-footer{display:flex;gap:8px;padding:0 15px 15px;flex:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 16px;border-radius:8px;
  font:600 12px/1 var(--font-d);letter-spacing:.09em;text-transform:uppercase;
  background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);cursor:pointer;
}
.btn--primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn--primary:not(:disabled):hover{filter:brightness(1.08)}
.btn--secondary{background:var(--surface-2)}
.btn--block{width:100%}
.btn:disabled{opacity:.55;cursor:default}
/* 2FA modal internals (engine promptTwoFactorCode markup) */
.tfa-body{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.tfa-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(var(--brand-rgb),.1);border:1px solid rgba(var(--brand-rgb),.4)}
.tfa-icon svg{stroke:var(--brand) !important}
.tfa-hint{font:500 11.5px/1.55 var(--font-b);color:var(--text-dim)}
.otp-boxes{display:flex;gap:6px;justify-content:center}
.otp-box{
  width:40px;height:48px;border-radius:8px;text-align:center;
  background:var(--surface-2);border:1px solid var(--border-strong);
  font:700 20px/1 var(--font-d);color:var(--text);caret-color:var(--brand);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.otp-box:focus{border-color:rgba(var(--brand-rgb),.6)}
.tfa-error{font:600 11px/1.5 var(--font-b);color:var(--ink-neg)}
.tfa-sent{font:500 11px/1.5 var(--font-b);color:var(--ink-pos)}
.tfa-resend{font:600 11px/1.4 var(--font-d);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-brand);text-decoration:underline;text-underline-offset:3px}
.tfa-resend.is-waiting,.tfa-resend:disabled{color:var(--text-faint);text-decoration:none;cursor:default}
.tfa-footer{display:flex;gap:8px;width:100%}
/* toasts (WB.Toast) */
#wb-toast-stack{
  position:fixed;left:50%;transform:translateX(-50%);z-index:960;
  bottom:calc(var(--navH) + var(--safe-b) + var(--v2-vv-bottom) + 12px);
  display:flex;flex-direction:column;gap:8px;width:min(420px,calc(100vw - 24px));pointer-events:none;
}
.wb-toast{
  position:relative;display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:10px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--border-strong);pointer-events:auto;
  opacity:0;transform:translateY(8px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.wb-toast.wb-open{opacity:1;transform:none}
.wb-toast-stripe{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--info)}
.wb-toast.success .wb-toast-stripe{background:var(--pos)}
.wb-toast.error .wb-toast-stripe{background:var(--neg)}
.wb-toast-icon{display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink-info)}
.wb-toast.success .wb-toast-icon{color:var(--ink-pos)}
.wb-toast.error .wb-toast-icon{color:var(--ink-neg)}
.wb-toast-icon svg{width:17px;height:17px}
.wb-toast-body{flex:1;min-width:0}
.wb-toast-title{font:600 12px/1.3 var(--font-d);letter-spacing:.04em;color:var(--text)}
.wb-toast-message{font:500 11.5px/1.45 var(--font-b);color:var(--text-dim)}
.wb-toast-action{
  flex:none;height:28px;padding:0 11px;border-radius:6px;
  background:var(--brand);color:var(--brand-ink);
  font:600 10.5px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;
}
.wb-toast-close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;margin:-5px -6px -5px 0;border-radius:6px;color:var(--text-dim);font:500 22px/1 var(--font-b);text-align:center}
.wb-toast-close:hover,.wb-toast-close:focus-visible{color:var(--text);background:var(--surface-3)}
.wb-toast-progress{position:absolute;left:0;bottom:0;height:2px;background:var(--border-strong);width:100%;transform-origin:left;animation:v2toastbar var(--wb-toast-duration,3000ms) linear forwards}
@keyframes v2toastbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (min-width:981px){
  #wb-toast-stack{bottom:18px}
}

/* ── desktop refinements ── */
@media (min-width:981px){
  .page{padding:18px 18px 40px;gap:12px}
  .pg-title{font-size:22px}
  /* desktop-readability scale for the raster icon set */
  .v2-ic{width:22px;height:22px}
  .v2-ic--sm{width:18px;height:18px}
  .v2-ic--lg{width:28px;height:28px}
  .v2-ic--xl{width:96px;height:96px}
  .wal-top{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:18px;padding:18px 16px 14px}
  .wal-acts{grid-template-columns:1fr 1fr;min-width:300px}
  .wal-big b{font-size:44px}
  .dp-qr{align-self:center}
  .mbc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .au-page{padding-top:48px}
  .strow{padding:9px 14px}
  .rec{padding:10px 14px}
}

/* ════════ PHASE 5 — BEGINNER LAYER ═══════════════════════════════
   Simple/Pro mode gate · outcome-labeled pills · three-tier disclosure ·
   First-Bet Coach spotlights · ⓘ explainer sheet · teaching zero-states.
   Simple hides every trace of exchange jargon; Pro is untouched. */

/* ── the one-tap Simple/Pro pill (header, every screen) ─────────── */
.modep{
  position:relative;flex:none;height:26px;padding:0 9px;border-radius:999px;
  display:flex;align-items:center;gap:5px;
  background:var(--surface-2);border:1px solid var(--border-strong);
  font:600 10px/1 var(--font-d);letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.modep::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--info)}
.modep.is-pro{color:var(--ink-brand);border-color:rgba(var(--brand-rgb),.42)}
.modep.is-pro::before{background:var(--brand)}
:root[data-theme="daylight"] .hdr .modep.is-pro{
  color:#FFD21A;background:#1C1F22;border-color:#A98200;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px rgba(255,210,26,.08);
}
:root[data-theme="daylight"] .hdr .modep.is-pro::before{background:#FFD21A;box-shadow:0 0 7px rgba(255,210,26,.48)}
.modep::after{content:"";position:absolute;inset:-9px 0}  /* ≥44px hit area, without covering neighbouring header actions */

/* ── outcome labels inside pills (Simple Mode renders them) ──────── */
.cell .slb{
  display:block;max-width:100%;padding:0 4px;margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 9px/1 var(--font-b);letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);
}
.cell.is-off .slb{color:var(--text-faint)}

/* ── Simple coupon grids: back-only, labeled, no lay column ──────── */
.sgrid.s2{grid-template-columns:minmax(0,1fr) 84px 84px}
.sgrid.s3{grid-template-columns:minmax(0,1fr) 62px 62px 62px}
.crow.sgrid .cell,.frow.sgrid .cell{height:44px}
/* defensive: a transient frame between toggle and repaint never shows pink */
.v2-simple .cell.lay{display:none !important}
.v2-simple .ladbtn{display:none !important}
.v2-simple .ln-cells .cell{height:44px}
/* match screen in Simple: tier navigation + market search are Pro depth */
.v2-simple .mnavwrap{display:none}

/* ── SIMPLE MODE match wall — three-tier disclosure ──────────────── */
.s-tier1{margin:8px 10px 0}
.s-tier1 .market{margin:0 0 8px}
.s-mkt .mk-head{height:34px}
.s-outs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
.s-outs[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.s-out{display:flex;flex-direction:column;gap:5px;align-items:stretch;min-width:0}
.s-out .cell{height:58px;border-radius:8px}
.s-out .cell .slb{font-size:10.5px;margin-bottom:3px}
.s-out .cell .o{font-size:19px}
.s-out .cell .o i{font-size:9px}
.s-out .rn-result{align-self:center}
.s-out .rn-pl{align-self:center}
.s-expl{
  display:flex;align-items:center;gap:6px;padding:7px 10px 0;
  font:500 11px/1.5 var(--font-b);color:var(--text-faint);
}
.s-frow{grid-template-columns:minmax(0,1fr) 110px;display:grid;column-gap:8px;align-items:center;padding:6px 10px}
.s-frow .cell{height:44px}
.s-frow .cell .slb{font-size:9px}
.s-frow .susp{grid-column:auto}
.s-pro{
  display:flex;align-items:center;gap:10px;margin:10px 10px 0;padding:11px 12px;
  border:1px dashed var(--border-strong);border-radius:10px;
  font:500 11px/1.5 var(--font-b);color:var(--text-faint);
}
.s-pro span{flex:1;min-width:0}
.s-probtn{
  flex:none;height:30px;padding:0 12px;border-radius:6px;
  background:var(--surface-3);border:1px solid var(--border-strong);color:var(--text);
  font:600 10.5px/1 var(--font-d);letter-spacing:.11em;text-transform:uppercase;
}
.s-probtn:active{background:var(--border-strong)}

/* ── ⓘ explainer buttons + sheet body ────────────────────────────── */
.ib{
  position:relative;flex:none;width:15px;height:15px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);color:var(--text-faint);
  font:600 10px/1 var(--font-b);font-style:normal;vertical-align:middle;margin-left:5px;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.ib::after{content:"";position:absolute;inset:-10px}  /* ≥35px hit area on a 15px glyph */
.ib:active{color:var(--ink-brand);border-color:rgba(var(--brand-rgb),.5)}
.mk-cols .mkc-i{display:flex;align-items:center;justify-content:flex-start;padding-left:2px}
.mk-cols .ib{width:13px;height:13px;font-size:9px;margin-left:4px}
.ot-lb .ib{margin-left:4px}
.mbc-note .ib,.mb-foot .ib{margin-left:4px}
.xpl{display:flex;flex-direction:column;gap:10px}
.xpl p{font:500 13px/1.65 var(--font-b);color:var(--text-dim)}
.xpl p:first-child{color:var(--text)}

/* ── FIRST-BET COACH — spotlight shields over the real UI ────────── */
#v2-coach{position:fixed;inset:0;z-index:940;pointer-events:none}
.co-shield{position:absolute;background:rgba(4,7,5,.78);pointer-events:auto}
.co-ring{
  position:absolute;display:none;border-radius:10px;pointer-events:none;
  border:2px solid var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.22),0 0 28px rgba(var(--brand-rgb),.18);
}
.co-tip{
  position:absolute;left:12px;right:12px;max-width:420px;margin:0 auto;pointer-events:auto;
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.6);
}
.co-tip.center{top:50%;transform:translateY(-50%)}
.co-dots{display:flex;gap:5px}
.co-dots i{width:14px;height:3px;border-radius:4px;background:var(--surface-3)}
.co-dots i.past{background:var(--border-strong)}
.co-dots i.on{background:var(--brand)}
.co-title{font:600 14px/1.2 var(--font-d);letter-spacing:.04em;color:var(--text)}
.co-body{font:500 12px/1.55 var(--font-b);color:var(--text-dim)}
.co-acts{display:flex;align-items:center;gap:10px;padding-top:3px}
.co-skip{
  height:32px;padding:0 4px;color:var(--text-faint);
  font:600 11px/1 var(--font-d);letter-spacing:.11em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:3px;
}
.co-next{
  margin-left:auto;height:34px;padding:0 16px;border-radius:8px;
  background:var(--brand);color:var(--brand-ink);
  font:600 11px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;
}
.co-next:active{filter:brightness(.9)}

/* ── first-Pro lay coach mark (one-time, 2 lines) ────────────────── */
.laymark{
  position:fixed;left:12px;right:12px;bottom:calc(var(--navH) + var(--safe-b) + var(--v2-vv-bottom) + 12px);z-index:930;
  max-width:460px;margin:0 auto;display:flex;align-items:center;gap:11px;
  background:var(--surface-2);border:1px solid rgba(232,106,158,.45);border-left:3px solid var(--lay);
  border-radius:10px;padding:10px 12px;
  opacity:0;transform:translateY(8px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.laymark.on{opacity:1;transform:none}
.lm-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lm-txt b{font:600 11.5px/1.4 var(--font-b);color:var(--text)}
.lm-txt span{font:500 11px/1.45 var(--font-b);color:var(--text-dim)}
.lm-x{
  flex:none;height:30px;padding:0 12px;border-radius:6px;
  background:var(--surface-3);border:1px solid var(--border-strong);color:var(--text);
  font:600 10.5px/1 var(--font-d);letter-spacing:.11em;text-transform:uppercase;
}

/* ── teaching zero-states ────────────────────────────────────────── */
.ze-acts{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.ze-acts .v2-retry{margin-top:0}
.v2-retry.pri{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.uz .uz-in{display:flex;flex-direction:column;gap:6px;padding:13px 14px;align-items:flex-start}
.uz b{font:600 13px/1.2 var(--font-d);letter-spacing:.05em;color:var(--text)}
.uz span{font:500 11px/1.55 var(--font-b);color:var(--text-dim)}
.uz .wbtn{margin-top:5px}
.schips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:13px}
.sc-lb{flex:none;font:600 11px/1 var(--font-b);letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint)}
.schip{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);
  font:600 11px/1 var(--font-b);
}
.schip:active{background:var(--surface-3)}
.schip.lv{border-color:rgba(255,61,46,.35)}
.schip .ldot{width:5px;height:5px}

/* ── desktop: simple coupon carries matched/mkts columns ─────────── */
@media (min-width:981px){
  .sgrid.s2{grid-template-columns:minmax(0,1fr) 76px 42px repeat(2,124px);column-gap:3px;padding:0 12px 0 14px}
  .sgrid.s3{grid-template-columns:minmax(0,1fr) 76px 42px repeat(3,96px);column-gap:3px;padding:0 12px 0 14px}
  .s-outs{padding:12px}
  .s-out .cell{height:56px}
  .modep{height:28px}
  .co-tip{left:50%;right:auto;transform:translateX(-50%);width:420px}
  .co-tip.center{transform:translate(-50%,-50%)}
  .laymark{bottom:18px}
}

/* ═══ DESKTOP READABILITY — pass 2 ═══════════════════════════════════
   The first desktop pass scaled the standard coupon but missed the LIVE
   card family (.lncard / .ln-*), lost the odds number to base specificity
   (.ln-cells/.ln .cell .o = 0,3,0 beat the desktop .cell .o = 0,2,0), and
   left several sub-labels tiny. These are desktop-only (min-width) so mobile
   stays byte-identical. */
@media (min-width:981px){
  /* live-now rail cards */
  .lnow-head b{font-size:13.5px}
  .lnow-head .gmeta{font-size:11px}
  .ln-top .ln-comp{font-size:11px}
  .ln-top .lvl{font-size:11px}
  .ln-mid .t{font-size:17px}
  .ln-mid .vs{font-size:11.5px}
  .ln-score{font-size:11.5px}
  .ln-sc{font-size:11.5px}
  /* odds number — match the higher-specificity base selectors so the price
     actually enlarges on the live cards + in-play lines */
  .ln-cells .cell .o,.ln .cell .o{font-size:17px}
  .ln-cells .cell .o i,.ln .cell .o i{font-size:10px}
  /* in-play list rows */
  .ln-t{font-size:15.5px}
  .ln-t .vs{font-size:11.5px}
  /* sub-labels: liquidity size under odds + team meta + group meta */
  .cell .sz{font-size:11px}
  .runner .cell .sz{font-size:11px}
  .c-teams .vs{font-size:12.5px}
  .c-teams .mk{font-size:11.5px}
  .grphead .gmeta{font-size:11px}
  .sb2{font-size:12.5px}
}

/* ── pixel-fit: the bolder desktop text kept line-height:1, so larger glyphs
   (uppercase display face + the superscript decimal) clipped where overflow is hidden.
   Give them a taller line-box. Desktop-only where the bump caused it; the
   Simple/Pro pill (.modep-v) clips in the header on all sizes so fix it globally. */
.modep-v{line-height:1.3}

/* Header V3 killed the 420/360/340 emergency-shrink tiers: the guest row is
   brand + search + theme + LOG IN + JOIN (Simple/Pro moved to Profile →
   Interface on phones), and the authed money moved to its own full-width
   counter row. What remains below is graceful degradation per spec §3/§5,
   plus the unrelated leaderboard/admin fit rules the old tiers carried. */
@media (max-width:420px){
  .hdr-id{gap:6px}
  .hdr-right{min-width:0;gap:6px}
  .wordmark{gap:4px}
  .lb-head,.lb-row{grid-template-columns:minmax(0,1fr) 84px 56px;gap:6px}
  .lb-head,.lb-row{padding-left:9px;padding-right:9px}
  .lb-player{padding-left:35px}
  .admin-row{align-items:stretch;flex-direction:column;gap:8px;padding-block:10px}
  .admin-actions{width:100%;justify-content:flex-end;flex-wrap:wrap}
  .admin-actions .wbtn{flex:1;min-width:88px}
  .oneclick-set{flex-wrap:wrap;justify-content:flex-end}
  .dp-upi{grid-template-columns:1fr;align-items:stretch}
  .dp-upi-acts{justify-content:stretch}
  .dp-upi-acts > *{flex:1}
}
@media (max-width:360px){
  .hdr-id{gap:5px}
  .hdr-right{gap:5px}
  .tb-live{display:none}            /* context slot yields below full tier */
  .ctr-nudge{display:none !important} /* zero-state nudge hides <360 (§5.4) */
  .authbtn{padding:0 10px}
}
@media (max-width:340px){
  .wordmark{gap:4px}
  .wordmark b{font-size:13px;letter-spacing:.02em} /* compact lockup tier */
  .wordmark .wm-mark{width:12px;height:14px}
  /* DEPOSIT collapses to the gold ＋ square only when IN PLAY needs the
     width (§3.2-D); the a11y label stays "Deposit" */
  .hdr-counter.has-inplay .ctr-deposit{width:36px;padding:0;justify-content:center}
  .hdr-counter.has-inplay .ctr-deposit b{display:none}
}
@media (min-width:981px){
  /* only overflow:hidden text genuinely clips. .cell .o is overflow:visible (its
     superscript is meant to sit high) — inflating its line-height overflowed the
     3-line odds cell (code/odds/liquidity), so leave it at 1. */
  .grphead b{line-height:1.35}
  .rit > .rit-label{line-height:1.4}
  .cell .sz{line-height:1.4}
  /* the Simple-mode odds cells were pinned to 44px (0,3,0 selectors my generic
     .cell{height:56px} couldn't reach); the enlarged 3-line stack (code+odds+₹ ≈
     46px) overflowed them. Give them room. */
  .crow.sgrid .cell,.frow.sgrid .cell,.v2-simple .ln-cells .cell,.s-frow .cell{height:50px}
}

/* ═══ GLOBAL MOTION (batch 3) — tokens only, compositor-safe ═══ */
.wbtn:not(:disabled):active,.paybtn:not(:disabled):active,.dchip:not(:disabled):active,.chip:not(:disabled):active,.seg-b:active,.ptab:active,.mtab:active{transform:scale(.97);transition:transform var(--dur-instant) var(--ease-out)}
.stake.v2-set{animation:v2stakeset var(--dur-fast) var(--ease-out)}
@keyframes v2stakeset{0%{transform:translateY(2px);opacity:.6}100%{transform:none;opacity:1}}
.rec-amt.v2-flash,.mt-v.v2-flash{animation:v2amtflash var(--dur-tick) var(--ease-out)}
@keyframes v2amtflash{0%{background:rgba(var(--brand-rgb),.16)}100%{background:transparent}}
.paybtn.is-loading{position:relative;color:transparent}
.paybtn.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid var(--brand-ink);border-top-color:transparent;animation:v2streamspin .7s linear infinite}
@media (prefers-reduced-motion:reduce){
  .wbtn:active,.paybtn:active,.dchip:active,.chip:active,.seg-b:active,.ptab:active,.mtab:active{transform:none}
  .stake.v2-set,.rec-amt.v2-flash,.mt-v.v2-flash{animation:none}
  .paybtn.is-loading::after{animation:none;border-top-color:var(--brand-ink);opacity:.6}
}

/* ═══ PLACED RECEIPT SHEET — mobile confirmation (fixed, above nav, safe-area) ═══ */
.tiksheet{
  position:fixed;left:12px;right:12px;z-index:940;
  bottom:calc(var(--navH) + var(--safe-b) + var(--v2-vv-bottom) + 12px);
  background:var(--surface-2);
  border:1px solid rgba(var(--pos-rgb),.55);border-radius:12px;overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.35);
  transform:translateY(14px);opacity:0;
  transition:transform var(--dur-sheet) var(--ease-sheet),opacity var(--dur-sheet) var(--ease-sheet);
}
.tiksheet.open{transform:none;opacity:1}
.tiksheet.leaving{transform:translateY(10px);opacity:0}
.tiksheet .flashlayer{position:absolute;inset:0;background:var(--pos);opacity:0;pointer-events:none;z-index:5}
.tiksheet.flash .flashlayer{animation:v2flashfade var(--dur-hero) var(--ease-out)}
.tiksheet .tk-ck{width:28px;height:28px;border-radius:8px}
.tiksheet .tkp{stroke-dasharray:24;stroke-dashoffset:24;animation:v2ckdraw .5s .18s var(--ease-out) forwards}
/* Fixed-receipt choreography: badge pop + staggered rise (same FROM→natural
   pattern as the inline ticket, safe under the reduced-motion kill switch). */
.tiksheet.open .tk-ck{animation:v2ckpop .5s .08s cubic-bezier(.34,1.56,.64,1) both}
.tiksheet.open .tks-title{animation:v2rise .45s .18s var(--ease-out) both}
.tiksheet.open .tks-line{animation:v2rise .45s .26s var(--ease-out) both}
.tiksheet.open .tks-id{animation:v2rise .45s .34s var(--ease-out) both}
.tiksheet.open .tks-cta{animation:v2rise .45s .4s var(--ease-out) both}
.tks-row{display:flex;align-items:center;gap:11px;padding:13px 15px}
.tks-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tks-title{font:600 12.5px/1.2 var(--font-d);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-pos)}
.tiksheet.is-open-order{border-color:rgba(var(--warn-rgb),.55)}
.tiksheet.is-open-order .tks-title{color:var(--ink-warn)}
.tiksheet.is-open-order .tk-ck{background:rgba(var(--warn-rgb),.15);border-color:rgba(var(--warn-rgb),.5);color:var(--ink-warn)}
.tks-line{font:600 12.5px/1.4 var(--font-b);color:var(--text)}
.tks-id{font:500 11px/1.3 var(--font-b);letter-spacing:.06em;color:var(--text-faint)}
.tks-x{width:44px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--text-dim)}
.tks-cta{
  display:flex;align-items:center;justify-content:center;min-height:44px;margin:2px 12px 12px;
  border-radius:8px;background:rgba(var(--brand-rgb),.14);border:1px solid rgba(var(--brand-rgb),.4);
  color:var(--ink-brand);font:600 11px/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;
}
.tks-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--border-strong);transform-origin:left;animation:v2toastbar linear forwards}
/* The receipt is the SINGLE placed-bet confirmation on every viewport now, so
   it can no longer be hidden on desktop. Centred above the fold rather than
   pinned to a corner: it is a one-second acknowledgement, not a panel, and the
   bottom-right corner already belongs to the docked mini-player. */
@media (min-width:981px){
  .tiksheet{
    left:50%;right:auto;bottom:26px;transform:translateX(-50%) translateY(14px);
    width:min(420px,calc(100vw - 48px));
  }
  .tiksheet.open{transform:translateX(-50%)}
  .tiksheet.leaving{transform:translateX(-50%) translateY(10px)}
}
/* Reduced motion: the confirmation must still APPEAR (motionless). The global
   animation:none freeze left .tkp at stroke-dashoffset:24 — an invisible
   checkmark. Static-complete the draw and show the sheet without transitions. */
@media (prefers-reduced-motion:reduce){
  .tiksheet{transform:none;opacity:0}
  .tiksheet.open{opacity:1}
  .tiksheet .tkp,.tik-fold.open .tk-ck .tkp{stroke-dashoffset:0 !important}
  .tks-bar{display:none}
}

/* ════════════════════════════════════════════════════════════════════
   FABLE PASS — native-app parity for ledgers, My Bets & ADA targets
   (appended last on purpose: same-specificity overrides win by order,
   so nothing above needs touching and no selector gains weight)
   ──────────────────────────────────────────────────────────────────
   · crest/icon lead discs on every ledger row (rec-lead)
   · crest sizing where teamBadge() now renders (bet cards, slip, receipt)
   · readability: secondary text lifted off the 7.5–9.5px floor
   · WCAG 2.5.5: money actions + tabs reach ≥44px effective targets
   ════════════════════════════════════════════════════════════════════ */

/* ── ledger lead disc: 32px circle; crest or type glyph inside ── */
.rec-lead{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-3);overflow:hidden;
}
.rec-lead.win{background:rgba(var(--pos-rgb),.14)}
.rec-lead.back{background:var(--back-cell)}
.rec-lead:empty{display:none} /* no crest resolved → row simply stays flat */
.rec-lead .team-logo-img,.rec-lead .team-badge{width:20px;height:20px}
.rec-lead .team-badge{border-radius:50%}

/* ── crests inside bet cards / match panel / slip / receipt ── */
.mbc-top .team-logo-img,.mbc-top .team-badge{width:20px;height:20px;flex:none}
.ob-top .team-logo-img,.ob-top .team-badge{width:18px;height:18px;flex:none}
.slip-head .team-logo-img,.slip-head .team-badge{width:16px;height:16px;flex:none}
.tks-line .team-logo-img,.tks-line .team-badge{
  display:inline-flex;width:15px;height:15px;vertical-align:-3px;margin-right:5px;
}

/* ── readability: secondary text ≥10.5px, key sublines 11px ── */
.rec-t{font-size:13px}
.rec-s{font-size:11px;color:var(--text-dim)}
.rec{min-height:54px}
.mbc-sub{font-size:11px;color:var(--text-dim)}
.mbc-live{font-size:11px}
.mbc-grid span{font-size:10px;letter-spacing:.1em}
.mbc-grid b{font-size:13.5px}
.mbc-tl span{font-size:10px}
.mbc-note{font-size:11px}
.ob-sub{font-size:11px;color:var(--text-dim)}
.ob-q{font-size:11px}
.ob-foot{font-size:11px}
.qtag{font-size:10px}
.dayhd{font-size:11px}
.mt-lb{font-size:10px}
.status-badge{font-size:10.5px}
.pg-sub{font-size:11px}
.gmeta{font-size:10.5px}
.grphead .gmeta,.lnow-head .gmeta{font-size:10.5px}

/* ── cash-out is THE money action: a real button, ≥44px effective ── */
.ob-cash{
  position:relative;height:auto;min-height:40px;padding:8px 16px;
  font-size:11px;border-radius:8px;
}
.ob-cash::after{content:"";position:absolute;inset:-4px 0} /* 40px + 8 = 48px hit */
.ob-act{min-height:36px}
.mbc .ob-act{min-height:44px}

/* "Open match" companion link: legible + a real target */
.mbc-open{
  position:relative;display:inline-flex;align-items:center;
  min-height:36px;padding:4px 6px;font-size:11px;
}
.mbc-open::after{content:"";position:absolute;inset:-4px 0}

/* ── page tabs / segments: 36px tall + inset hit = 44px ── */
.ptab{height:36px;line-height:34px;font-size:11px}
.ptab::after{inset:-4px 0}
.seg-b{height:36px}

/* header quick actions ("Statement", "View all"): bigger type + target */
.pg-act,.p-act{
  position:relative;display:inline-flex;align-items:center;
  min-height:32px;padding:4px 8px;margin-right:-8px;font-size:11px;
}
.pg-act::after,.p-act::after{content:"";position:absolute;inset:-6px 0}

/* favourite star on coupon rows: 26×24 visual, ~44px effective */
.favbtn{position:relative}
.favbtn::after{content:"";position:absolute;inset:-8px}

/* ── date pickers: the native calendar sheet must match the theme ── */
:root[data-theme="daylight"] .dtin{color-scheme:light}

/* ══ CASINO (feature flag CASINO_ENABLED in views.js) ═══════════════════
   Every rule below is inert unless views.js emits the extra markup, so the
   default (flag-off) app is byte-for-byte unchanged.

   Bottom nav → 6 items. Scoped to :has(a real 6th .mnav-it); the 5-item bar
   never has a 6th .mnav-it (its 6th child is the .mnav-ind indicator), so the
   grid, indicator width and the existing nth-child(1..5) offsets are untouched
   when the flag is off. With 6 items the grid widens to 6 columns, the
   indicator narrows to 1/6, and the 6th item (Account) gets its offset. */
.mnav:has(> .mnav-it:nth-child(6)){grid-template-columns:repeat(6,minmax(0,1fr))}
.mnav:has(> .mnav-it:nth-child(6)) .mnav-ind{
  width:calc((100% - max(4px,var(--safe-l)) - max(4px,var(--safe-r)))/6)}
.mnav:has(> .mnav-it:nth-child(6).on) .mnav-ind{opacity:1;transform:translateX(500%)}
@media (max-width:340px){
  .mnav:has(> .mnav-it:nth-child(6)) .mnav-ind{
    width:calc((100% - max(2px,var(--safe-l)) - max(2px,var(--safe-r)))/6)}
}

/* Integrated Live Casino — one flat, catalog-backed table rail. It follows
   the same header → content → trust-footer rhythm as the rest of Home; deep
   discovery stays in /casino, so Home never stacks competing filter rails. */
.cas-rail{border-block:1px solid var(--border);background:rgba(var(--sunk-rgb),.46)}
body.v2-searching .cas-rail{display:none}
.cas-head{display:flex;align-items:center;gap:7px;height:44px;padding:0 12px}
.cas-head .cas-ic{display:flex;align-items:center;color:var(--ink-brand);flex:none}
.cas-head .cas-ic svg{width:16px;height:16px}
.cas-head b{font:600 11px/1 var(--font-d);letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.cas-connected{display:flex;align-items:center;gap:5px;min-width:0;color:var(--text-faint);font:600 9px/1 var(--font-b);white-space:nowrap}
.cas-connected>i{width:5px;height:5px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(255,86,86,.09)}
.cas-all{margin-left:auto;position:relative;display:inline-flex;align-items:center;
  min-height:36px;padding:4px 6px;white-space:nowrap;
  font:600 11px/1 var(--font-b);letter-spacing:.04em;color:var(--ink-brand)}
.cas-all::after{content:"";position:absolute;inset:-4px -2px}
.cas-stage{min-width:0;padding:0 12px 7px}
.cas-scroll-controls{display:flex;gap:6px;margin-left:1px}
.cas-scroll-controls button{
  position:relative;width:38px;height:32px;border:1px solid var(--border-strong);border-radius:7px;
  display:grid;place-items:center;background:var(--surface);color:var(--text-dim);font:600 14px/1 var(--font-b);
}
.cas-scroll-controls button::after{content:"";position:absolute;inset:-6px -3px}
.cas-scroll-controls button:hover:not(:disabled){border-color:rgba(var(--brand-rgb),.5);color:var(--ink-brand)}
.cas-scroll-controls button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.cas-scroll-controls button:disabled{opacity:.38;cursor:default}
.cas-games{
  display:flex;gap:12px;min-height:204px;overflow-x:auto;padding:2px 0;
  scrollbar-width:none;scroll-padding-inline:0;scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;touch-action:pan-x pan-y;
}
.cas-games::-webkit-scrollbar{display:none}
.cas-game{
  position:relative;flex:none;display:grid;grid-template-rows:146px 56px;width:148px;height:202px;
  overflow:hidden;scroll-snap-align:start;border:1px solid var(--border-strong);border-radius:8px;
  background:var(--surface);color:var(--text);transition:border-color var(--dur-fast),background var(--dur-fast);
}
.cas-game:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cas-game-art{position:relative;display:block;min-height:0;overflow:hidden;background:var(--surface-3);border-bottom:2px solid var(--cas-accent)}
.cas-game-art img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.03);transition:transform 480ms var(--ease-out)}
.cas-game-original .cas-game-art{background:radial-gradient(circle at 50% 43%,color-mix(in srgb,var(--cas-accent) 18%,transparent),transparent 62%),#090B0A}
.cas-game-original .cas-game-art img{object-fit:contain;padding:3px;filter:saturate(1.08) contrast(1.04) drop-shadow(0 8px 12px rgba(0,0,0,.72))}
.cas-game-live{
  position:absolute;z-index:2;top:8px;left:8px;display:flex;align-items:center;gap:4px;
  min-height:22px;padding:4px 6px;border:1px solid rgba(255,255,255,.18);border-radius:5px;
  background:rgba(15,17,20,.9);color:#F7F8F9;
  font:700 7.5px/1 var(--font-b);letter-spacing:.08em;text-transform:uppercase;font-style:normal;
}
.cas-game-live span{width:4px;height:4px;border-radius:50%;background:#FF5656;box-shadow:0 0 0 2px rgba(255,86,86,.14)}
.cas-game-meta{display:flex;min-width:0;flex-direction:column;align-self:stretch;gap:4px;padding:9px 9px 7px}
.cas-game-meta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:25px;font:600 13px/1 var(--font-d);letter-spacing:.025em;text-transform:uppercase}
.cas-game-meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 8px/1 var(--font-b);letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint)}
.cas-game-go{position:absolute;right:10px;bottom:35px;color:var(--ink-brand);font:700 15px/1 var(--font-b);font-style:normal}
.cas-game-more{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center;background:var(--surface)}
.cas-game-more b{font:600 18px/1 var(--font-d);letter-spacing:.04em;text-transform:uppercase}
.cas-game-more span{font:500 9px/1 var(--font-b);color:var(--text-faint)}
.cas-game-more i{display:grid;place-items:center;color:var(--ink-brand);font:700 21px/1 var(--font-b);font-style:normal}
.cas-game-skel{flex:none;width:148px;height:202px;border-radius:8px;background:var(--surface-3);animation:v2sk 1.4s var(--ease-out) infinite}
.cas-unavailable{width:100%;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:#B8BDC2}
.cas-unavailable b{font:600 14px/1 var(--font-d);color:#F7F8F9;text-transform:uppercase}
.cas-unavailable span{font:500 9px/1.3 var(--font-b)}
.cas-unavailable button{min-height:36px;margin-top:3px;padding:0 14px;border-radius:8px;background:#FFD21A;color:#181300;font:700 10px/1 var(--font-d);letter-spacing:.08em;text-transform:uppercase}
:root[data-theme="daylight"] .cas-game-original .cas-game-art{background:radial-gradient(circle at 50% 43%,color-mix(in srgb,var(--cas-accent) 18%,transparent),transparent 62%),#080703}
:root[data-theme="daylight"] .cas-game-live{background:rgba(8,7,3,.92);color:#FFF9EB}
:root[data-theme="daylight"] .cas-unavailable{color:#D1BD8D}
:root[data-theme="daylight"] .cas-unavailable b{color:#FFF9EB}
.cas-responsible{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-height:34px;padding:2px 12px 7px;color:var(--text-faint);font:500 9px/1.2 var(--font-b)}
.cas-responsible span{width:22px;height:22px;border:1px solid var(--border-strong);border-radius:50%;display:grid;place-items:center;font:600 8px/1 var(--font-b);color:var(--text-dim)}
@media (hover:hover){
  .cas-game:hover{border-color:color-mix(in srgb,var(--cas-accent) 58%,var(--border));background:var(--surface-2)}
  .cas-game:hover .cas-game-art img{transform:scale(1.025)}
  .cas-game-original:hover .cas-game-art img{transform:scale(1.045)}
}
@media (max-width:699px){
  .cas-head{height:40px;padding-inline:10px}
  .cas-stage{padding:0 10px 6px}
  .cas-scroll-controls{display:none}
  .cas-games{gap:10px;min-height:196px;padding-bottom:2px;scroll-snap-type:x mandatory}
  .cas-game{grid-template-rows:138px 56px;width:140px;height:194px}
  .cas-game-skel{width:140px;height:194px}
  .cas-responsible{padding-inline:10px}
}
@media (max-width:374px){
  .cas-game{grid-template-rows:130px 56px;width:132px;height:186px}
  .cas-game-skel{width:132px;height:186px}
  .cas-games{min-height:188px}
}
@media (max-width:340px){
  .cas-head{gap:5px}
  .cas-head b{font-size:10.5px}
  .cas-connected{gap:4px;font-size:8.5px}
  .cas-all{padding-inline:3px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .cas-game,.cas-game-art img{transition:none}
  .cas-game-skel{animation:none}
}

/* ════════ RACING (horse 7 · greyhound 4339) ═══════════════════════
   The organising truth is the provider's betting WINDOW: one race per
   meeting takes bets at a time. The hub gives each meeting ONE hero
   card — its next race, full field, live prices — capped by the STATE
   STRIP (the signature): chartreuse BETTING OPEN with the countdown,
   quiet neutral while a later race waits, live coral IN RUNNING,
   pos-tinted RESULT. Everything else is schedule chips. No empty
   shells, no per-cell liquidity, no overround, no matched volume —
   number, name, price. Runner identity is the trap number drawn
   natively: real AU rug colours for greyhounds, a neutral numbered
   cloth for horses ONLY when the feed numbers them. Rows reuse the
   exchange atoms verbatim (.runner/.cell), so the inline betslip,
   desktop cell enlargements and price-tick patching all apply
   unchanged. */

/* ── the shared live clock leaf (patched in place by the 1s ticker) ─ */
[data-race-clock]{color:var(--text)}
[data-race-clock][data-u="soon"],[data-race-clock][data-u="imminent"]{color:var(--ink-warn)}
[data-race-clock][data-u="due"],[data-race-clock][data-u="off"]{color:var(--ink-live)}
[data-race-clock][data-u="result"]{color:var(--ink-pos)}
@media (prefers-reduced-motion:no-preference){
  [data-race-clock][data-u="imminent"]{animation:rcImminent 1s var(--ease-out) infinite}
}
@keyframes rcImminent{0%,100%{opacity:1}50%{opacity:.5}}

/* ── country rail — the provider's real meeting regions ────────────
   Country is a first-class racing axis (the same hierarchy as the source
   book), not a search shortcut. The rail is a single touch-height row with
   horizontal overflow, so 320px phones never wrap it into a wall of pills. */
.rc-countries{
  display:flex;align-items:center;gap:10px;min-height:58px;padding:7px 10px;
  border-bottom:1px solid var(--border);background:rgba(var(--sunk-rgb),.42);
}
.rc-country-label{
  flex:none;font:600 9px/1 var(--font-b);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);
}
.rc-country-scroll{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.rc-country-scroll::-webkit-scrollbar{display:none}
.rc-country{
  flex:none;min-height:44px;padding:0 10px;display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--border);border-radius:9px;background:var(--surface);
  color:var(--text-dim);font:600 11px/1 var(--font-b);white-space:nowrap;
}
.rc-country-code{
  min-width:24px;padding:4px 5px;border-radius:5px;background:var(--surface-3);
  color:var(--text);font:700 10px/1 var(--font-d);letter-spacing:.08em;text-align:center;
}
.rc-country i{font:600 9px/1 var(--font-b);font-style:normal;color:var(--text-faint)}
.rc-country.on{border-color:rgba(var(--brand-rgb),.58);background:rgba(var(--brand-rgb),.11);color:var(--ink-brand)}
.rc-country.on .rc-country-code{background:var(--brand);color:var(--brand-ink)}
.rc-country:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.rc-country:active{background:var(--surface-3)}
@media (max-width:520px){
  .rc-countries{gap:7px;padding-inline:8px}
  .rc-country-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .rc-country{padding-inline:9px}
  .rc-country:not(:first-child)>span{display:none}
}
@media (min-width:981px){
  .rc-country:hover{border-color:var(--border-strong);background:var(--surface-2)}
  .rc-country.on:hover{border-color:rgba(var(--brand-rgb),.7);background:rgba(var(--brand-rgb),.14)}
}

/* ── hub: MEETING HEROES — the conversion surface ──────────────────
   One card per meeting = its next race, whole field, live prices.
   The state strip on top is the betting window in colour; the field
   below is number + name + price and nothing else. Rows carry
   .runner, so cells inherit the exchange atoms AND the inline
   betslip docks beneath the tapped row. Cards stack on phones and
   grid up on desktop — a card is never an empty shell (a race with
   no sheet renders one quiet line, not a void). */
.nextoff{border-bottom:1px solid var(--border);background:rgba(var(--sunk-rgb),.35)}
.atp-grid{display:grid;grid-template-columns:1fr;gap:8px;padding:2px 10px 10px;align-items:start}
.atp{
  position:relative;display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden;
}
.atp > .slipwrap{width:100%}
/* ≥1024 the slip docks after the CARD (see slipAnchorFor): as a hero-grid
   item the full-width wrap must break the 2/3-up flow, never fill one cell */
.atp-grid > .slipwrap{grid-column:1/-1}
/* the STATE STRIP — the betting window made visible */
.atp-strip{display:flex;align-items:center;gap:10px;min-height:36px;padding:4px 12px;background:var(--surface-3)}
.atp-cap{font:700 10.5px/1.25 var(--font-b);letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim)}
.atp-clock{margin-left:auto;flex:none;font:600 16px/1 var(--font-d);letter-spacing:.02em;color:var(--text)}
.atp.is-open .atp-strip{background:var(--brand)}
.atp.is-open .atp-cap{color:var(--brand-ink)}
.atp.is-open .atp-clock,.atp.is-open .atp-clock[data-u]{color:var(--brand-ink)}
.atp[data-u="off"] .atp-strip{background:rgba(var(--live-rgb),.16)}
.atp[data-u="off"] .atp-cap,.atp[data-u="off"] .atp-clock[data-u]{color:var(--ink-live)}
/* while the race runs the market is suspended — the field stays readable,
   but two columns of dead "-" cells say nothing: drop them */
.atp[data-u="off"] .atp-row .cell{display:none}
.atp[data-u="result"] .atp-strip{background:rgba(var(--pos-rgb),.14)}
.atp[data-u="result"] .atp-cap,.atp[data-u="result"] .atp-clock[data-u]{color:var(--ink-pos)}
.atp-head{display:flex;align-items:center;gap:9px;min-height:46px;padding:6px 12px}
.atp-head .sport-glyph{width:16px;height:16px}
.atp-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.atp-t b{font:600 15px/1.1 var(--font-d);letter-spacing:.04em;text-transform:uppercase;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atp-t small{font:500 11px/1.2 var(--font-b);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* field rows: number + name + price — the whole message */
.atp-row{
  --cellW:64px;
  display:flex;align-items:center;gap:9px;min-height:44px;padding:3px 10px 3px 12px;
  border-top:1px solid var(--border);
}
.atp-row .rug{width:26px;height:26px;font-size:12.5px}
.atp-name{flex:1;min-width:0;font:600 13.5px/1.25 var(--font-b);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atp-row .team-pl{font-size:10px;padding:2px 4px}
.atp-row .cell{flex:none;width:var(--cellW);height:38px}
.atp-row .cell .o{font-size:16.5px}
.atp .cell .sz{display:none} /* the price is the message — no liquidity footnotes */
.atp-row.is-fav{box-shadow:inset 2px 0 0 var(--brand)}
.atp-row.is-nr .atp-name{text-decoration:line-through;color:var(--text-faint)}
.atp-row.is-nr .cell{opacity:.4;pointer-events:none}
.atp-row.is-beaten .atp-name{color:var(--text-dim)}
.atp-row.is-beaten .cell{pointer-events:none}
.atp-row.is-winner{background:rgba(var(--brand-rgb),.07);box-shadow:inset 2px 0 0 var(--brand)}
.atp-row.is-winner .atp-name{color:var(--ink-brand)}
/* a race whose sheet has not landed keeps a one-line card, never a void */
.atp-none{padding:12px;border-top:1px solid var(--border);font:500 12px/1.45 var(--font-b);color:var(--text-faint)}
.atp-foot{
  display:flex;align-items:center;gap:7px;min-height:40px;padding:4px 12px;
  border-top:1px solid var(--border);
  font:600 10.5px/1 var(--font-b);letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);
}
.atp-foot svg{margin-left:auto;flex:none;width:13px;height:13px;color:var(--text-faint)}
/* Simple Mode keeps racing's plain-language contract: back-only, wider */
body.v2-simple .atp-row .cell.lay{display:none}
body.v2-simple .atp-row{--cellW:84px}

/* ── hub: meeting rows + race chips (the schedule) ─────────────────── */
.rc-meet{display:flex;flex-direction:column;gap:8px;padding:10px 12px}
.rc-meet + .rc-meet{border-top:1px solid var(--border)}
.rcm-id{display:flex;align-items:center;gap:8px;min-width:0}
.rcm-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.rcm-name b{font:600 14px/1.1 var(--font-d);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcm-name small{font:500 10.5px/1 var(--font-b);color:var(--text-faint)}
.rc-cc{flex:none;font:600 9px/1 var(--font-b);font-style:normal;letter-spacing:.08em;padding:3px 5px;border:1px solid var(--border-strong);border-radius:4px;color:var(--text-dim)}
.rcm-races{display:flex;flex-wrap:wrap;gap:6px}
.rcm-nodata{font:500 11px/1.3 var(--font-b);color:var(--text-faint);padding:6px 0}
.rchip{
  flex:none;min-width:46px;min-height:44px;padding:5px 6px 4px;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:1px solid var(--border);border-radius:8px;background:var(--surface);text-align:center;
}
.rchip b{font:600 12.5px/1 var(--font-d);letter-spacing:.02em;color:var(--text)}
.rchip small{font:600 9.5px/1 var(--font-b);letter-spacing:.02em;color:var(--text-faint)}
.rchip small[data-u="soon"],.rchip small[data-u="imminent"]{color:var(--ink-warn)}
.rchip small[data-u="due"],.rchip small[data-u="off"]{color:var(--ink-live)}
.rchip small[data-u="result"]{color:var(--text-faint)}
.rchip:active{background:var(--surface-2)}
.rchip.is-done{opacity:.45}
.rchip.is-next{border-color:rgba(var(--brand-rgb),.55);background:rgba(var(--brand-rgb),.10)}
.rchip.is-next b{color:var(--ink-brand)}
.rchip.on{border-color:var(--brand);background:var(--brand)}
.rchip.on b,.rchip.on small{color:var(--brand-ink)}

/* ── trap / saddlecloth chips — native identity, zero images ───────── */
.rug{
  width:26px;height:26px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;border:1px solid var(--border-strong);
  font:700 13px/1 var(--font-d);font-style:normal;background:var(--surface-3);color:var(--text);
}
/* horses: a neutral numbered saddlecloth (asymmetric corner = the cloth) */
.rug-h{border-radius:4px 4px 10px 4px}
/* greyhounds: the real AU rugs (see the :root token note) */
.rug-d1{background:var(--rug-red);color:var(--rug-w)}
.rug-d2{background:repeating-conic-gradient(var(--rug-k) 0 25%,var(--rug-w) 0 50%);background-size:12px 12px;color:var(--rug-red);text-shadow:-1px 0 0 var(--rug-w),1px 0 0 var(--rug-w),0 -1px 0 var(--rug-w),0 1px 0 var(--rug-w)}
.rug-d3{background:var(--rug-w);color:var(--rug-k)}
.rug-d4{background:var(--rug-blue);color:var(--rug-w)}
.rug-d5{background:var(--rug-gold);color:var(--rug-k)}
.rug-d6{background:var(--rug-green);color:var(--rug-w)}
.rug-d7{background:var(--rug-k);color:var(--rug-gold)}
.rug-d8{background:var(--rug-pink);color:var(--rug-k)}
.rug-d9{background:repeating-linear-gradient(90deg,var(--rug-green) 0 4px,var(--rug-w) 4px 8px);color:var(--rug-k);text-shadow:-1px 0 0 var(--rug-w),1px 0 0 var(--rug-w),0 -1px 0 var(--rug-w),0 1px 0 var(--rug-w)}
.rug-d10{background:repeating-linear-gradient(90deg,var(--rug-red) 0 4px,var(--rug-w) 4px 8px);color:var(--rug-k);text-shadow:-1px 0 0 var(--rug-w),1px 0 0 var(--rug-w),0 -1px 0 var(--rug-w),0 1px 0 var(--rug-w)}
.rug.is-muted{opacity:.4;filter:grayscale(.4)}
:root[data-theme="daylight"] .rug.is-muted{filter:saturate(.68)}

/* ── race card: the sticky race bar + OFF-CLOCK ────────────────────── */
.racebar{position:sticky;top:var(--stick);z-index:26;background:var(--surface);border-bottom:1px solid var(--border)}
.rb1{display:flex;align-items:center;gap:7px;min-height:30px;padding:4px 12px 0}
.rb1 .sport-glyph{width:15px;height:15px}
.rb-venue{font:600 14px/1.1 var(--font-d);letter-spacing:.03em;text-transform:uppercase;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb1 .comp{margin-left:auto;font:600 10px/1 var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);flex:none}
.rb2{display:flex;align-items:center;gap:8px;padding:2px 12px 6px;min-height:44px}
.rb-race{display:flex;align-items:baseline;gap:6px;min-width:0}
.rb-race b{font:600 21px/1 var(--font-d)}
.rb-dist{font:600 12px/1 var(--font-d);color:var(--text-dim)}
.rb-grade{font:500 11px/1.2 var(--font-b);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.rb-when{font:500 10.5px/1.2 var(--font-b);color:var(--text-faint);white-space:nowrap}
.offclock{
  margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  padding:3px 0 3px 10px;border-left:3px solid var(--brand);text-align:right;
}
.offclock[data-u="soon"],.offclock[data-u="imminent"]{border-left-color:var(--warn)}
.offclock[data-u="due"],.offclock[data-u="off"]{border-left-color:var(--live)}
.offclock[data-u="result"]{border-left-color:var(--pos)}
/* caption = the scheduled off time ("OFF 18:10") — fixed, one format */
.oc-cap{font:600 10px/1 var(--font-b);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.oc-val{font:600 25px/1 var(--font-d);letter-spacing:.01em;min-width:64px;text-align:right}
.rswitch{display:flex;gap:6px;overflow-x:auto;padding:0 12px 8px;scrollbar-width:none}
.rswitch::-webkit-scrollbar{display:none}

/* ── race card: the WIN coupon (reuses .market/.runner/.cell atoms) ── */
.rc-market .rn-top{gap:8px}
.rc-market .rn-name{flex:1;min-width:0}
.rc-market .team-pl{font-size:10px;padding:2px 4px}
.rn-tag{
  flex:none;font:600 9px/1 var(--font-b);letter-spacing:.1em;text-transform:uppercase;
  padding:3px 5px;border-radius:4px;border:1px solid var(--border-strong);
  color:var(--text-dim);background:var(--surface-3);
}
.rn-tag.is-win{color:var(--ink-pos);border-color:rgba(var(--pos-rgb),.5);background:rgba(var(--pos-rgb),.12)}
.mk-tag.rc-restag{color:var(--ink-pos);background:rgba(var(--pos-rgb),.12);border-color:rgba(var(--pos-rgb),.4)}
/* current favourite — the race card's orientation mark, patched live */
.rn-fav{
  flex:none;font:700 8.5px/1 var(--font-b);letter-spacing:.09em;text-transform:uppercase;
  padding:2px 5px;border-radius:4px;color:var(--ink-brand);
  border:1px solid rgba(var(--brand-rgb),.45);background:rgba(var(--brand-rgb),.10);
}
/* the provider's one-race-per-meeting window, said where touch can see it */
.mk-note{padding:7px 14px 8px;border-bottom:1px solid var(--border);font:500 11.5px/1.4 var(--font-b);color:var(--text-dim);background:rgba(var(--sunk-rgb),.35)}
/* later races commonly have no sheet yet (rate-limited detail endpoint) —
   a quiet line, not a bare table header around nothing */
.rc-await{padding:18px 16px 4px}
.rc-await p{font:500 12.5px/1.55 var(--font-b);color:var(--text-dim);max-width:52ch}
.rc-await b{color:var(--text)}
/* racing cells: the price IS the message — no liquidity footnotes, bigger ink */
.rc-market .cell .sz{display:none}
.rc-market .cell{height:38px}
.rc-market .cell .o{font-size:16px}
.rrow.is-nr .rn-name{text-decoration:line-through;color:var(--text-faint)}
.rrow.is-nr .cell{opacity:.4;pointer-events:none}
.rrow.is-beaten .rn-name{color:var(--text-dim)}
.rrow.is-beaten .cell,.rc-market.is-result .cell{pointer-events:none}
.rrow.is-winner{background:rgba(var(--brand-rgb),.07);box-shadow:inset 3px 0 0 var(--brand)}
.rrow.is-winner .rn-name{color:var(--ink-brand)}
.rc-limits{padding:8px 14px 0;font:500 10.5px/1.4 var(--font-b);color:var(--text-faint);text-align:right}
.rc-empty{padding-top:56px}
/* Simple Mode: racing keeps its plain-language contract — back-only cells */
body.v2-simple .rc-market .cell.lay{display:none}
body.v2-simple .rc-market .mk-cols .clv{display:none}
body.v2-simple .rc-market .m2{grid-template-columns:minmax(0,1fr) var(--cellW)}

/* ── desktop side rail rows (racing screens) ───────────────────────
   venue + off-clock on the top line, the live favourite (rug + name)
   beneath, and a tradeable back cell on the right — same anatomy as
   the home rail's Live Now rows. */
.rc-ln .ln-t b{min-width:0}
.rc-side-clock{margin-left:auto;flex:none;font:600 13px/1 var(--font-d);white-space:nowrap}
.rc-ln .rug{width:16px;height:16px;font-size:9px;border-radius:4px;border-width:1px}
.rc-ln .ln-sc .sc{font-weight:500}

/* ── desktop enlargements (≥981) — mobile stays byte-identical ─────── */
@media (min-width:981px){
  .atp-grid{padding:2px 12px 10px;gap:10px}
  .atp-name{font-size:14px}
  .atp-row{--cellW:70px}
  .atp-head:hover,.atp-foot:hover{background:var(--surface-2)}
  .rc-meet{flex-direction:row;align-items:flex-start;gap:14px;padding:10px 18px}
  .rcm-id{width:230px;flex:none;padding-top:5px}
  .rb1{padding:6px 16px 0}
  .rb2{padding:2px 16px 8px}
  .rb-race b{font-size:24px}
  .oc-val{font-size:31px}
  .rswitch{padding:0 16px 9px}
  .rchip:hover{border-color:var(--border-strong);background:var(--surface-2)}
  .rchip.on:hover{background:var(--brand)}
  .rug{width:30px;height:30px;font-size:14.5px}
  .rug-h{border-radius:5px 5px 12px 5px}
  .rn-tag{font-size:10px}
  .rn-fav{font-size:9px}
}
/* heroes grid up only when a card keeps ≥340px — full-width names + prices
   beat a third crushed column every time */
@media (min-width:1024px){
  .atp-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
}