/* ═══════════════════════════════════════════════════════════════════════
   APEX · "NIGHT MATCH"  —  a ground-up design language for 1xBettors.
   Loaded last; supersedes the legacy visual identity by redefining the
   token system (both the sportsbook and the games floor) and re-forming
   the core components. Markup, JS, routing and data are untouched.

   Identity:  the energy of a floodlit match at night, read through an
   elite-fintech lens — a deep graphite court, a single SOLAR brand accent,
   aqua wins, coral live, and amber money. One bold voice (the solar accent
   + Unbounded brand), everything else quiet and dense.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── TOKENS ─────────────────────────── */
:root,
[data-theme="dark"]{
  color-scheme:dark;

  /* court surfaces — a tonal graphite stack, never flat black */
  --canvas:#0B0E17;  --paper:#141A28;  --paper-2:#1A2132;
  --sunken:#0E1320;  --sunken-2:#10172A;
  --scrim:rgba(4,7,16,.68);  --overlay-scrim:rgba(4,7,16,.68);

  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12); --line-3:rgba(255,255,255,.20);

  --ink:#F3F6FC;  --ink-2:#C2CBDB;  --ink-3:#8B96AD;  --ink-4:#626D86;  --ink-5:#454E66;

  /* SOLAR — the one bold voice: action, brand, interactive */
  --volt:#FF7A2F;  --volt-600:#FF6A1F;  --volt-700:#E85A14;
  --volt-soft:rgba(255,122,47,.13);
  --volt-border:rgba(255,122,47,.34);
  --volt-tint:rgba(255,122,47,.08);
  --volt-grad:linear-gradient(135deg,#FF9145 0%,#FF7A2F 52%,#F0631A 100%);
  --volt-ink:#1A0A00;
  --volt-glow:0 10px 30px -10px rgba(255,122,47,.55);

  /* AMBER — money: balance, deposits, jackpots */
  --brass:#FFC24B;  --brass-strong:#FFD277;  --brass-soft:rgba(255,194,75,.14);
  --brass-border:rgba(255,194,75,.32);  --brass-tint:rgba(255,194,75,.08);
  --amber:#FFC24B;

  /* AQUA — win / positive / cash-out */
  --win:#1FD8A4;  --win-soft:rgba(31,216,164,.14);  --win-border:rgba(31,216,164,.30);
  /* CORAL — live / loss */
  --live:#FF4D6A;  --live-soft:rgba(255,77,106,.14); --live-border:rgba(255,77,106,.30);
  --live-tint:rgba(255,77,106,.08);
  /* PERIWINKLE — secondary info */
  --info:#6E8BFF;  --info-soft:rgba(110,139,255,.14); --info-border:rgba(110,139,255,.30);
  --warn:#FFC24B;  --warn-soft:rgba(255,194,75,.14);  --warn-border:rgba(255,194,75,.32);

  /* type — Sora (display+data), Plus Jakarta (body), Unbounded (signature) */
  --f-display:'Sora','Plus Jakarta Sans',system-ui,sans-serif;
  --f-body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --f-mono:'Sora',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --f-brand:'Unbounded','Sora',system-ui,sans-serif;

  --fs-micro:9.5px; --fs-tiny:11px; --fs-cap:12px; --fs-sm:13px;
  --fs-base:14.5px; --fs-lg:17px; --fs-xl:21px; --fs-2xl:27px; --fs-3xl:36px;

  /* tighter, more kinetic radii */
  --r-xs:7px; --r-sm:9px; --r-md:12px; --r-lg:15px; --r-xl:19px;
  --r-2xl:24px; --r-3xl:30px; --r-pill:999px;

  --t-fast:.12s cubic-bezier(.2,.7,.2,1);
  --t-base:.17s cubic-bezier(.2,.7,.2,1);
  --t-slow:.34s cubic-bezier(.2,.7,.2,1);

  /* depth: borders + glow, not grey drop-shadows */
  --sh-1:0 1px 0 rgba(255,255,255,.03),0 2px 8px -4px rgba(0,0,0,.5);
  --sh-2:0 1px 0 rgba(255,255,255,.04) inset,0 14px 34px -18px rgba(0,0,0,.7);
  --sh-3:0 30px 70px -24px rgba(0,0,0,.8);
  --sh-volt:var(--volt-glow);

  /* brand/legacy aliases keep untouched modules in-system */
  --brand-50:#201207; --brand-100:#2A1708; --brand-200:#4A2A10;
  --brand-300:#9A5A2A; --brand-400:#FF9145; --brand-500:#FF7A2F;
  --brand-600:#FF6A1F; --brand-700:#E85A14; --brand-800:#C94C10;
  --brand:var(--volt); --brand-ink:var(--volt-ink);
  --brand-soft:var(--volt-soft); --brand-border:var(--volt-border);
  --brand-tint:var(--volt-tint); --brand-grad:var(--volt-grad);
  --gold:var(--brass); --gold-strong:var(--brass-strong);
  --gold-soft:var(--brass-soft); --gold-border:var(--brass-border); --gold-tint:var(--brass-tint);
  --font-display:var(--f-display); --font-body:var(--f-body);
  --font-mono:var(--f-mono); --font-serif:var(--f-display);
  --sh-brand:var(--sh-volt);
  --panel:var(--paper); --panel-2:var(--sunken);
  --signal:var(--volt); --ink-line:var(--line);
  --bg-canvas:var(--canvas); --bg-grid:rgba(255,255,255,.028);

  /* games-floor (--cz-*) — mapped onto APEX so the casino matches */
  --cz-night:#0B0E17; --cz-night-2:#141A28; --cz-night-3:#1A2132; --cz-night-4:#243049;
  --cz-line:rgba(255,255,255,.08); --cz-line-2:rgba(255,255,255,.16);
  --cz-text:#F3F6FC; --cz-text-2:#C2CBDB; --cz-text-3:#8B96AD;
  --cz-gold:#FFC24B; --cz-gold-2:#FFD277; --cz-gold-ink:#1C1400;
  --cz-green:#1FD8A4; --cz-green-2:#36E7B6; --cz-green-dk:#12A37A;
  --cz-ember:#FF4D6A; --cz-sky:#6E8BFF;
  --cz-r:12px;
  --cz-num:'Sora','Plus Jakarta Sans',system-ui,sans-serif;
}

/* ───────────────────── LIGHT — "DAY MATCH" ─────────────────────
   A genuine, intentionally-designed light counterpart: a warm paper
   court, deep navy ink, the same SOLAR voice (deepened just enough to
   stay legible on white), money/win/live tuned for light-surface
   contrast. Same component geometry — only the palette shifts. */
[data-theme="light"]{
  color-scheme:light;

  --canvas:#EEF1F6;  --paper:#FFFFFF;  --paper-2:#F6F8FC;
  --sunken:#EDF0F6;  --sunken-2:#E6EAF2;
  --scrim:rgba(18,23,38,.40);  --overlay-scrim:rgba(18,23,38,.40);

  --line:rgba(16,23,45,.09); --line-2:rgba(16,23,45,.14); --line-3:rgba(16,23,45,.24);

  --ink:#111626;  --ink-2:#394257;  --ink-3:#5C6681;  --ink-4:#8690A6;  --ink-5:#B2BAC9;

  /* SOLAR — kept, deepened for white-surface legibility */
  --volt:#F0631A;  --volt-600:#E85A14;  --volt-700:#CF4E0E;
  --volt-soft:rgba(240,99,26,.11);
  --volt-border:rgba(240,99,26,.36);
  --volt-tint:rgba(240,99,26,.06);
  --volt-grad:linear-gradient(135deg,#FF8A3C 0%,#FF7A2F 50%,#F0631A 100%);
  --volt-ink:#FFFFFF;
  --volt-glow:0 10px 26px -12px rgba(240,99,26,.45);

  /* AMBER money — deep gold reads on paper */
  --brass:#B07A00;  --brass-strong:#E6A72E;  --brass-soft:rgba(176,122,0,.12);
  --brass-border:rgba(176,122,0,.30);  --brass-tint:rgba(176,122,0,.06);
  --amber:#B07A00;

  --win:#0E9E78;  --win-soft:rgba(14,158,120,.12);  --win-border:rgba(14,158,120,.28);
  --live:#E23755;  --live-soft:rgba(226,55,85,.11); --live-border:rgba(226,55,85,.26);
  --live-tint:rgba(226,55,85,.06);
  --info:#3F57CF;  --info-soft:rgba(63,87,207,.12); --info-border:rgba(63,87,207,.28);
  --warn:#B07A00;  --warn-soft:rgba(176,122,0,.12);  --warn-border:rgba(176,122,0,.30);

  /* soft, cool-grey elevation — no glow on paper */
  --sh-1:0 1px 2px rgba(16,24,45,.05),0 3px 10px -5px rgba(16,24,45,.10);
  --sh-2:0 2px 6px rgba(16,24,45,.06),0 18px 40px -22px rgba(16,24,45,.26);
  --sh-3:0 32px 70px -26px rgba(16,24,45,.34);

  --brand-400:#FF8A3C; --brand-500:#F0631A; --brand-600:#E85A14; --brand-700:#CF4E0E;
  --bg-grid:rgba(16,23,45,.028);

  /* games floor, light */
  --cz-night:#EEF1F6; --cz-night-2:#FFFFFF; --cz-night-3:#F6F8FC; --cz-night-4:#E6EAF2;
  --cz-line:rgba(16,23,45,.10); --cz-line-2:rgba(16,23,45,.18);
  --cz-text:#111626; --cz-text-2:#394257; --cz-text-3:#5C6681;
  --cz-gold:#B07A00; --cz-gold-2:#E6A72E; --cz-gold-ink:#FFFFFF;
  --cz-green:#0E9E78; --cz-green-2:#13B88C; --cz-green-dk:#0A7D5F;
  --cz-ember:#E23755; --cz-sky:#3F57CF;
}

/* a faint court texture on the canvas — depth without noise */
body{
  background:
    radial-gradient(130% 80% at 80% -10%, rgba(255,122,47,.06) 0%, transparent 42%),
    radial-gradient(120% 70% at 0% 0%, rgba(110,139,255,.05) 0%, transparent 40%),
    var(--canvas)!important;
  color:var(--ink);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
}

/* ─────────────────────────── TYPE ─────────────────────────── */
h1,h2,h3,.page-title,.sec-title,.screen-title,.wc-amount,.cz-name,.cz-title{
  font-family:var(--f-display);letter-spacing:-.01em;font-weight:800}
.brand,.logo-text,[class*="brand-word"],.nav-brand{font-family:var(--f-brand)!important;letter-spacing:-.02em}
.mono,[class*="mono"],.odd-val,.tx-amt,.wc-amount,.cz-num,.bal b,[id*="bal"]{
  font-family:var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ─────────────────────── SHELL: TOP BAR ─────────────────────── */
.topbar,header#topbar,.app-topbar,.tb,[class*="topbar"]{
  background:linear-gradient(180deg, rgba(20,26,40,.92), rgba(11,14,23,.82))!important;
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line)!important;
}

/* balance pill — money gets the amber treatment */
.bal,.balance,.topbar-balance,[class*="balance-pill"]{
  background:var(--sunken)!important;border:1px solid var(--line)!important;border-radius:var(--r-pill)!important}
.bal b,.balance b{color:var(--brass)!important;font-family:var(--f-display);font-variant-numeric:tabular-nums}

/* ─────────────────── SHELL: BOTTOM NAV ─────────────────── */
.bottom-nav,.bottomnav,[class*="bottom-nav"]{
  background:linear-gradient(180deg, rgba(20,26,40,.86), rgba(11,14,23,.96))!important;
  backdrop-filter:saturate(1.4) blur(16px);border-top:1px solid var(--line)!important}
.nav-item,.bottomnav a{color:var(--ink-4)!important;transition:color var(--t-base),transform var(--t-fast);position:relative}
.nav-item svg,.nav-item i{transition:transform var(--t-base)}
.nav-item:active{transform:translateY(1px)}
.nav-item.active,.nav-item.on{color:var(--volt)!important}
.nav-item.active svg,.nav-item.on svg{transform:translateY(-1px);filter:drop-shadow(0 4px 10px rgba(255,122,47,.5))}
.nav-item.active::after,.nav-item.on::after{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:22px;height:3px;border-radius:0 0 4px 4px;background:var(--volt);box-shadow:0 0 12px var(--volt)}

/* ─────────────────────────── SURFACES ─────────────────────────── */
.card,.panel,.tile,.widget,.box,[class*="-card"]:not(.wallet-card):not(.fh-card):not(.hero-card){
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.card:hover{border-color:var(--line-2)}

/* ─────────────────────────── BUTTONS ─────────────────────────── */
.btn-primary,.btn-place,.btn.primary,button.primary,[class*="btn-cta"]{
  background:var(--volt-grad)!important;color:var(--volt-ink)!important;border:0!important;
  border-radius:var(--r-md)!important;font-family:var(--f-display);font-weight:800!important;letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--volt-glow)!important;
  transition:transform var(--t-fast),filter var(--t-base),box-shadow var(--t-base)!important}
.btn-primary:hover,.btn-place:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 36px -10px rgba(255,122,47,.7)!important}
.btn-primary:active,.btn-place:active{transform:translateY(1px) scale(.995)}
.btn-light{background:linear-gradient(180deg,var(--brass-strong),var(--brass))!important;color:#1C1400!important;border:0!important;
  border-radius:var(--r-md)!important;font-family:var(--f-display);font-weight:800!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 26px -12px rgba(255,194,75,.6)!important;transition:transform var(--t-fast),filter var(--t-base)!important}
.btn-light:hover{filter:brightness(1.05)} .btn-light:active{transform:translateY(1px)}
.btn-ghost-light,.btn-ghost,.btn.ghost{background:rgba(255,255,255,.04)!important;border:1px solid var(--line-2)!important;color:var(--ink)!important;
  border-radius:var(--r-md)!important;transition:all var(--t-base)!important}
.btn-ghost-light:hover,.btn.ghost:hover{background:rgba(255,255,255,.09)!important;border-color:var(--line-3)!important}

/* ─────────────────────────── INPUTS ─────────────────────────── */
.field-input,input[type=text],input[type=tel],input[type=number],input[type=password],input[type=email],input[type=search],select,textarea{
  background:var(--sunken)!important;border:1px solid var(--line-2)!important;color:var(--ink)!important;
  border-radius:var(--r-sm)!important;transition:border-color var(--t-base),box-shadow var(--t-base)!important}
.field-input:focus,input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--volt)!important;
  box-shadow:0 0 0 3px var(--volt-soft)!important}
.field-input::placeholder,input::placeholder{color:var(--ink-4)!important}
.field-label{color:var(--ink-3);font-weight:700}

/* ─────────────────────── CHIPS / FILTERS / TABS ─────────────────────── */
.chip,.filter-chip,.pill,[class*="chip"]{
  background:var(--sunken)!important;border:1px solid var(--line-2)!important;color:var(--ink-2)!important;
  border-radius:var(--r-pill)!important;font-weight:700;transition:all var(--t-base)!important}
.chip:hover{border-color:var(--line-3)!important;color:var(--ink)!important}
.chip.active,.chip.on,.chip[aria-selected=true],.filter-chip.active{
  background:var(--volt)!important;color:var(--volt-ink)!important;border-color:var(--volt)!important;box-shadow:var(--volt-glow)}
.list-tabs,.tabs,[class*="tab-bar"]{background:var(--sunken)!important;border:1px solid var(--line)!important;border-radius:var(--r-md)!important;padding:4px!important}
.list-tab,.tab{color:var(--ink-4)!important;border:0!important;border-radius:var(--r-sm)!important;font-weight:700;transition:all var(--t-base)!important}
.list-tab.on,.list-tab.active,.tab.active{background:var(--paper-2)!important;color:var(--ink)!important;box-shadow:0 2px 10px -4px rgba(0,0,0,.6)}

/* ─────────────────────── LIVE / WIN / BADGES ─────────────────────── */
.live-pill,[class*="live-tag"],[class*="live-chip"]{color:var(--live)!important}
.live-pill i,[class*="live"] i{background:var(--live)!important;box-shadow:0 0 0 0 rgba(255,77,106,.6);animation:apexPulse 1.5s infinite}
@keyframes apexPulse{0%{box-shadow:0 0 0 0 rgba(255,77,106,.55)}70%{box-shadow:0 0 0 7px rgba(255,77,106,0)}100%{box-shadow:0 0 0 0 rgba(255,77,106,0)}}
.badge,[class*="badge"]{border-radius:var(--r-pill)!important;font-weight:800;letter-spacing:.02em}

/* ─────────────────────── HERO / FEATURED ─────────────────────── */
.hero-card,.fh-card,[class*="hero"]{
  border-radius:var(--r-lg)!important;border:1px solid var(--line)!important;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,122,47,.18) 0%, transparent 52%),
    linear-gradient(160deg,#1A2132 0%,#0E1320 100%)!important;
  box-shadow:var(--sh-2)}
.hero-card .btn,.fh-card .btn{border-radius:var(--r-pill)!important}

/* ─────────────────────── ODDS BUTTONS (the signal) ─────────────────────── */
.odd-btn,.odds-btn,[class*="odd-btn"],.selection,[class*="outcome"]{
  background:var(--sunken)!important;border:1px solid var(--line-2)!important;color:var(--ink)!important;
  border-radius:var(--r-sm)!important;transition:transform var(--t-fast),border-color var(--t-base),box-shadow var(--t-base)!important}
.odd-btn:hover,.odds-btn:hover{transform:translateY(-1px);border-color:var(--volt-border)!important;box-shadow:0 8px 20px -12px rgba(255,122,47,.6)!important}
.odd-btn.on,.odd-btn.selected,.odd-btn[aria-pressed=true],.selection.on{
  background:var(--volt-soft)!important;border-color:var(--volt)!important;box-shadow:inset 0 0 0 1px var(--volt)}
.odd-val,.odds-val,.o-val{color:var(--brass)!important;font-family:var(--f-display);font-weight:800!important;font-variant-numeric:tabular-nums}
.odd-pick,.o-label{color:var(--ink-3)!important}

/* ─────────────────────── WALLET / MONEY CARD ─────────────────────── */
.wallet-card{
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(255,194,75,.16) 0%, transparent 50%),
    linear-gradient(160deg,#1C2233 0%,#0E1320 100%)!important;
  border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;box-shadow:var(--sh-2)}
.wc-amount{color:var(--ink)!important;font-family:var(--f-display)}
.wc-label{color:var(--ink-3)!important}

/* ─────────────────────── TABLES / LIST ROWS ─────────────────────── */
table{color:var(--ink)}
th{color:var(--ink-4)!important;border-color:var(--line)!important}
td{border-color:var(--line)!important}
tr.row-hover:hover,.tx-row:hover,.list-row:hover{background:rgba(255,255,255,.03)!important}
.tx-row,[class*="-row"]{border-color:var(--line)!important}
.tx-amt{font-family:var(--f-display)}

/* ─────────────────────── MODALS / SHEETS / DRAWERS ─────────────────────── */
.modal,.sheet,.drawer,.bottom-sheet,[class*="modal-card"],[class*="sheet-card"]{
  background:var(--paper)!important;border:1px solid var(--line-2)!important;border-radius:var(--r-xl)!important;box-shadow:var(--sh-3)}
.modal-scrim,.sheet-scrim,.overlay,[class*="scrim"],[class*="backdrop"]{background:var(--scrim)!important;backdrop-filter:blur(3px)}

/* ─────────────────────── SECTION HEADERS ─────────────────────── */
.sec-head{border-bottom:1px solid var(--line)!important}
.sec-title{color:var(--ink)!important;display:flex;align-items:center;gap:10px}
.sec-title::before{content:"";width:4px;height:18px;border-radius:3px;background:var(--volt);box-shadow:0 0 10px var(--volt);flex:0 0 auto}

/* ─────────────────────── EMPTY / LOADING / ERROR ─────────────────────── */
.empty,[class*="empty"],.no-data{color:var(--ink-3)}
.skeleton,.skel,[class*="skel"]{background:linear-gradient(90deg,var(--sunken) 25%,var(--paper-2) 37%,var(--sunken) 63%)!important;
  background-size:400% 100%;animation:apexShimmer 1.4s ease infinite;border-radius:var(--r-sm)}
@keyframes apexShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.spinner,[class*="spinner"]{border-color:var(--line-2)!important;border-top-color:var(--volt)!important}

/* ─────────────────────── GAMES FLOOR (cz-*) re-form ─────────────────────── */
.cz-tile{background:var(--paper)!important;border:1px solid var(--line)!important;border-radius:var(--cz-r)!important;transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base)}
.cz-tile:hover{transform:translateY(-3px);border-color:var(--volt-border)!important;box-shadow:0 18px 40px -22px rgba(255,122,47,.5)}
.cz-play-ic{background:var(--volt)!important;box-shadow:var(--volt-glow)}
.cz-play-ic svg{fill:var(--volt-ink)!important}
.cz-name{color:var(--ink)!important;letter-spacing:-.01em}
.cz-btn.gold,.cz-btn.primary{background:var(--volt-grad)!important;color:var(--volt-ink)!important;box-shadow:var(--volt-glow)}
.cz-live-tag i{background:var(--live)!important}

/* focus-visible, platform-wide */
a:focus-visible,button:focus-visible,[role=button]:focus-visible,.odd-btn:focus-visible,input:focus-visible{
  outline:2px solid var(--volt)!important;outline-offset:2px;border-radius:6px}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   APEX · REFINEMENT  —  the craft pass. Surface light, typographic rhythm,
   and interaction quality taken to bespoke-product fidelity. Additive.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Typographic rhythm: tighter display, calmer body ── */
:root{ --ease-spring:cubic-bezier(.34,1.3,.5,1); --ease-out:cubic-bezier(.2,.7,.2,1); }
body{ letter-spacing:-.006em; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
h1,h2,h3,.page-title,.sec-title,.wc-amount,.cz-name,.cz-title,.auth-title{ letter-spacing:-.022em; line-height:1.08; }
p,.auth-sub,.sec-sub,.sub,[class*="-sub"]{ line-height:1.55; color:var(--ink-3); }
/* small labels: quiet, not shouty — softens the all-caps tell */
.eyebrow,.label,.kicker,[class*="-label"],[class*="-eyebrow"],.wc-label,.field-label,.sec-eyebrow{
  letter-spacing:.04em; font-weight:700; color:var(--ink-4); font-size:var(--fs-tiny); }
.mono,[class*="mono"],.odd-val,.tx-amt,.wc-amount,.bal b,[id*="bal"]{ letter-spacing:-.01em; }

/* ── Surface light: a 1px top-edge highlight + depth gradient on panels ── */
.card,.panel,.widget,.box,.wallet-card,.hero-card,.fh-card,.modal,.sheet,.bottom-sheet,
.cz-tile,.list-tabs,.odd-btn,.field,.acct-item,.tx-row{
  background-image:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0) 42%);
}
.card,.panel,.widget,.box{ box-shadow:inset 0 1px 0 rgba(255,255,255,.045),var(--sh-1); }
.card:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px -18px rgba(0,0,0,.7); }

/* ── Buttons: springy press, refined sheen ── */
.btn-primary,.btn-place,.btn-light,.btn-ghost-light,.btn.ghost,.btn-primary.lg,button.primary{
  transition:transform .14s var(--ease-spring),filter .18s var(--ease-out),box-shadow .2s var(--ease-out)!important;
  will-change:transform; }
.btn-primary::after,.btn-place::after{ content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 45%);pointer-events:none;mix-blend-mode:overlay; }
.btn-primary,.btn-place{ position:relative;overflow:hidden; }
.btn-primary:active,.btn-place:active,.btn-light:active{ transform:translateY(1px) scale(.985); }

/* ── Tiles & interactive cards: considered lift ── */
.cz-tile,.odd-btn,.odds-btn,.acct-item,.tx-row,.game-tile,[class*="match-card"]{
  transition:transform .18s var(--ease-out),border-color .18s var(--ease-out),box-shadow .22s var(--ease-out)!important; }
.cz-tile:hover{ transform:translateY(-4px); }
.acct-item:hover,.tx-row:hover{ transform:translateY(-1px); }

/* ── Chips/tabs: smooth active glide ── */
.chip,.list-tab,.tab,.filter-chip{ transition:all .18s var(--ease-out)!important; }
.chip.active,.chip.on{ box-shadow:0 6px 16px -8px rgba(255,122,47,.6); }

/* ── Inputs: calmer idle, confident focus ── */
.field-input,input,select,textarea{ transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out),background .18s!important; }
.field-input:hover,input:hover:not(:focus){ border-color:var(--line-3)!important; }

/* ── Dividers & rules: hairline with a whisper of light ── */
hr,.divider,[class*="divider"]{ border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent); }

/* ── Hero: deeper, more cinematic ── */
.hero-card,.fh-card{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05),var(--sh-2); overflow:hidden; }
.hero-card::before{ content:"";position:absolute;inset:0;background:
  radial-gradient(60% 90% at 90% 0%,rgba(255,122,47,.10),transparent 60%);pointer-events:none; }

/* ── Balance / money: refined amber, tnum ── */
.bal b,.balance b,.wc-amount,.tx-amt.credit,[class*="amount"]{ font-variant-numeric:tabular-nums; }

/* ── Scrollbars: slim, on-brand ── */
*{ scrollbar-width:thin;scrollbar-color:var(--line-3) transparent; }
*::-webkit-scrollbar{ width:9px;height:9px; }
*::-webkit-scrollbar-thumb{ background:var(--line-3);border-radius:999px;border:2px solid transparent;background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--ink-5); }
*::-webkit-scrollbar-track{ background:transparent; }

/* ── Selection & focus: brand-tinted ── */
::selection{ background:rgba(255,122,47,.26);color:#fff; }
:focus-visible{ outline:2px solid var(--volt);outline-offset:2px; }

/* ── Disabled: honest, not muddy ── */
button:disabled,.btn:disabled,[disabled]{ opacity:.45!important;filter:saturate(.7);cursor:not-allowed; }

/* ── One orchestrated entrance for the game stage (answers the open action) ── */
.cz-stage.open .cz-wrap{ animation:apexRise .36s var(--ease-out) both; }
@keyframes apexRise{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ── Live multiplier / big numbers: luminous ── */
.cz-live-mult,.cz-crash-mult{ text-shadow:0 2px 40px rgba(0,0,0,.6); }

/* ── Images/avatars: crisp rings instead of hard borders ── */
.avatar,.acct-avatar,[class*="avatar"]{ box-shadow:0 0 0 1px var(--line-2),0 6px 16px -8px rgba(0,0,0,.6); }

@media (prefers-reduced-motion:reduce){ .cz-stage.open .cz-wrap{ animation:none; } }

/* ═══════════════════════════════════════════════════════════════════
   LIGHT-MODE COMPONENT OVERRIDES
   Components that bake in literal dark colours or white-alpha glass need
   a light counterpart; tokens alone can't reach them. Same geometry,
   paper-appropriate surfaces. */
[data-theme="light"] body{
  background:
    radial-gradient(130% 80% at 82% -12%, rgba(240,99,26,.055) 0%, transparent 44%),
    radial-gradient(120% 70% at -5% 0%, rgba(63,87,207,.045) 0%, transparent 42%),
    var(--canvas)!important;
}
/* shell glass → frosted white */
[data-theme="light"] .topbar,[data-theme="light"] header#topbar,
[data-theme="light"] .app-topbar,[data-theme="light"] .tb,[data-theme="light"] [class*="topbar"]{
  background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(246,248,252,.78))!important;
  border-bottom:1px solid var(--line)!important;
}
[data-theme="light"] .bottom-nav,[data-theme="light"] .bottomnav,[data-theme="light"] [class*="bottom-nav"]{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.96))!important;
  border-top:1px solid var(--line)!important;
}
/* hero + wallet → light solar/amber-tinted paper.
   NOTE: scoped to the explicit home-banner hero classes ONLY. The old
   [class*="hero"] wildcard whitewashed EVERY panel whose class merely
   contained "hero" (.detail-hero, .acct-hero, .bh-hero, .txnd-hero …),
   which are premium dark panels with light text — that turned their text
   invisible in light mode. Those keep their own (dark / theme-following)
   backgrounds now. */
[data-theme="light"] .hero-card,[data-theme="light"] .fh-card,[data-theme="light"] .hero-content{
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(240,99,26,.12) 0%, transparent 54%),
    linear-gradient(160deg,#FFFFFF 0%,#F4F6FB 100%)!important;
}
[data-theme="light"] .hero-card::before{ background:
  radial-gradient(60% 90% at 90% 0%,rgba(240,99,26,.08),transparent 60%); }
[data-theme="light"] .wallet-card{
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(176,122,0,.14) 0%, transparent 52%),
    linear-gradient(160deg,#FFFFFF 0%,#F4F6FB 100%)!important;
}
/* ghost buttons + row hovers: flip white-alpha → ink-alpha */
[data-theme="light"] .btn-ghost-light,[data-theme="light"] .btn-ghost,[data-theme="light"] .btn.ghost{
  background:rgba(16,23,45,.035)!important; }
[data-theme="light"] .btn-ghost-light:hover,[data-theme="light"] .btn-ghost:hover,[data-theme="light"] .btn.ghost:hover{
  background:rgba(16,23,45,.07)!important; }
[data-theme="light"] tr.row-hover:hover,[data-theme="light"] .tx-row:hover,[data-theme="light"] .list-row:hover{
  background:rgba(16,23,45,.03)!important; }
[data-theme="light"] .list-tab.on,[data-theme="light"] .list-tab.active,[data-theme="light"] .tab.active{
  box-shadow:0 2px 8px -4px rgba(16,24,45,.18)!important; }
/* top-edge highlights read as grime on paper → remove */
[data-theme="light"] .card,[data-theme="light"] .panel,[data-theme="light"] .widget,[data-theme="light"] .box{
  box-shadow:var(--sh-1)!important; }
[data-theme="light"] .card::after,[data-theme="light"] .panel::after,[data-theme="light"] [class*="-card"]::after{
  background-image:none!important; }
[data-theme="light"] .card:hover{ box-shadow:0 10px 30px -18px rgba(16,24,45,.28)!important; }
[data-theme="light"] .hero-card,[data-theme="light"] .fh-card{
  box-shadow:var(--sh-2)!important; }
[data-theme="light"] .btn-primary,[data-theme="light"] .btn-place{
  box-shadow:0 10px 26px -12px rgba(240,99,26,.42)!important; }
[data-theme="light"] .btn-light{ color:#2A1C00!important;
  box-shadow:0 8px 20px -12px rgba(176,122,0,.4)!important; }
[data-theme="light"] .avatar,[data-theme="light"] .acct-avatar,[data-theme="light"] [class*="avatar"]{
  box-shadow:0 0 0 1px var(--line-2),0 6px 16px -10px rgba(16,24,45,.3)!important; }
[data-theme="light"] .cz-live-mult,[data-theme="light"] .cz-crash-mult{ text-shadow:none!important; }
[data-theme="light"] ::selection{ background:rgba(240,99,26,.22);color:#2A1000; }
/* wallet amount uses --ink which is now dark — good; label too */

/* ── Light: topbar text/icons & hero text that were white-on-dark ── */
[data-theme="light"] .brand-word{ color:var(--ink)!important; }
[data-theme="light"] .brand-word b{ color:var(--brass)!important; }
[data-theme="light"] .tb-icon{ background:rgba(16,23,45,.05)!important;border:1px solid var(--line)!important; }
[data-theme="light"] .tb-icon:active{ background:rgba(16,23,45,.10)!important; }
[data-theme="light"] .tb-icon svg{ stroke:var(--ink-2)!important; }
[data-theme="light"] .hero-card,[data-theme="light"] .fh-card{ color:var(--ink)!important; }
[data-theme="light"] .hero-title{ color:var(--ink)!important; }
[data-theme="light"] .hero-tag{ color:var(--volt)!important; }
[data-theme="light"] .hero-card::after{ background:rgba(16,23,45,.04)!important; }
[data-theme="light"] .hero-cta{ background:var(--ink)!important;border:0!important;color:#fff!important; }

/* ═══════════════════════════════════════════════════════════════════
   DEDICATED DETAIL PAGES — breadcrumb + back nav
   Replaces the old bottom-sheet modals for transaction & bet detail.
   Modals are now reserved for lightweight confirmations only. */
.pg-crumb{ display:flex;align-items:center;gap:12px;padding:14px 16px 10px; }
.pg-back{
  width:38px;height:38px;flex-shrink:0;border-radius:var(--r-md);
  display:grid;place-items:center;background:var(--sunken);
  border:1px solid var(--line);color:var(--ink-2);
  transition:transform var(--t-fast),border-color var(--t-base),background var(--t-base);
}
.pg-back svg{ width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2; }
.pg-back:hover{ border-color:var(--line-3);color:var(--ink);background:var(--sunken-2); }
.pg-back:active{ transform:translateX(-2px); }
.pg-trail{ font-family:var(--f-display);font-size:var(--fs-sm);letter-spacing:-.01em;
  display:flex;align-items:center;gap:8px;min-width:0; }
.pg-trail a{ color:var(--ink-3);cursor:pointer;font-weight:600;transition:color var(--t-base); }
.pg-trail a:hover{ color:var(--volt); }
.pg-trail i{ color:var(--ink-5);font-style:normal; }
.pg-trail b{ color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.pg-body{ padding:0 14px 28px;max-width:560px;margin:0 auto; animation:apexRise .32s var(--ease-out,cubic-bezier(.2,.7,.2,1)) both; }

/* ── sheet markup reused as an in-flow page card ── */
.txnd-sheet.as-page,.bh-sheet.as-page{
  position:static!important;width:100%!important;max-width:none!important;
  max-height:none!important;overflow:visible!important;
  border-radius:var(--r-2xl)!important;transform:none!important;animation:none!important;
  box-shadow:var(--sh-1)!important;
}
.txnd-sheet.as-page .txnd-pill,.txnd-sheet.as-page .txnd-close,
.bh-sheet.as-page .bh-pill,.bh-sheet.as-page .bh-close{ display:none!important; }
/* the in-page card scrolls with the page, so its own footer close button is redundant */
.txnd-sheet.as-page .txnd-close-btn,.bh-sheet.as-page .bh-action-btn.close{ display:none!important; }
.txnd-sheet.as-page .txnd-section:last-child:has(.txnd-close-btn),
.bh-sheet.as-page .bh-actions{ display:none!important; }
@media(prefers-reduced-motion:reduce){ .pg-body{ animation:none; } }

/* ── Light: balance pill (was white-on-glass) ── */
[data-theme="light"] .balance-pill{
  background:rgba(16,23,45,.04)!important;border:1px solid var(--line)!important; }
[data-theme="light"] .bal-label{ color:var(--ink-3)!important; }
[data-theme="light"] .bal-amount{ color:var(--ink)!important; }
[data-theme="light"] .bal-cur{ color:var(--ink-3)!important; }