/* ═══════════════════════════════════════════════════════════════════════
   STRIKA — Sportsbook design system
   Mobile-first. Light default; dark via [data-theme="dark"] on <html>.

   Brand     : electric indigo "volt"
   Odds      : brass
   Wins      : pitch green
   Signature : the betslip is a physical TICKET — a perforated stub docked
               to the bottom that tears open into a full sheet.

   Section 16 is a compatibility layer keeping legacy class names alive for
   JS modules that inject their own markup.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1 · TOKENS
   ───────────────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;

  --canvas:#EEF1F8;   --paper:#FFFFFF;    --paper-2:#F8FAFE;
  --sunken:#EEF1F8;   --sunken-2:#E4E9F4;
  --scrim:rgba(9,12,28,.46);  --overlay-scrim:rgba(9,12,28,.46);

  --line:#E4E8F2;     --line-2:#D3DAEA;   --line-3:#BFC8DE;

  --ink:#0B1024;      --ink-2:#2C3450;    --ink-3:#586287;
  --ink-4:#8791AE;    --ink-5:#AEB6CD;

  --volt:#8A5CFF;     --volt-600:#3A26E0; --volt-700:#2C1CB6;
  --volt-soft:#ECEAFF;
  --volt-border:rgba(10,154,79,.26);
  --volt-tint:rgba(10,154,79,.07);
  --volt-grad:linear-gradient(135deg,#6152FF 0%,#8A5CFF 52%,#3A26E0 100%);
  --volt-ink:#FFFFFF;

  --brass:#9A6412;    --brass-strong:#7C4F0B;  --brass-soft:#FDF1DC;
  --brass-border:rgba(154,100,18,.24);  --brass-tint:rgba(154,100,18,.07);
  --amber:#F5C451;

  --win:#0B9E63;      --win-soft:#E4F7EE;  --win-border:rgba(11,158,99,.26);
  --live:#E23048;     --live-soft:#FDEBEE; --live-border:rgba(226,48,72,.24);
  --live-tint:rgba(226,48,72,.07);
  --info:#2354C7;     --info-soft:#EAF0FE; --info-border:rgba(35,84,199,.24);
  --warn:#9A6412;     --warn-soft:#FDF1DC; --warn-border:rgba(154,100,18,.24);

  --f-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --f-body:'Manrope',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --fs-micro:9.5px; --fs-tiny:11px; --fs-cap:12px; --fs-sm:13px;
  --fs-base:15px;   --fs-lg:17px;   --fs-xl:21px;  --fs-2xl:26px; --fs-3xl:34px;

  --s-1:4px;  --s-2:7px;  --s-3:11px; --s-4:14px;
  --s-5:18px; --s-6:24px; --s-7:32px; --s-8:44px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --r-2xl:26px; --r-3xl:32px; --r-pill:999px;

  --t-fast:.12s cubic-bezier(.4,0,.2,1);
  --t-base:.16s cubic-bezier(.4,0,.2,1);
  --t-slow:.32s cubic-bezier(.22,.61,.36,1);

  --sh-1:0 1px 2px rgba(11,16,36,.06);
  --sh-2:0 6px 18px -8px rgba(11,16,36,.20);
  --sh-3:0 24px 60px -18px rgba(11,16,36,.34);
  --sh-volt:0 10px 26px -8px rgba(10,154,79,.44);

  --gutter:16px;
  --dock-h:62px;
  --bottomnav-h:62px;
  --side-w:250px;
  --slip-w:330px;
  --feed-max:760px;
  --shell-max:1440px;

  /* legacy aliases — untouched modules theme themselves through these */
  --brand-50:#F4F2FF;  --brand-100:#ECEAFF; --brand-200:#D6D0FF;
  --brand-300:#B3A8FF; --brand-400:#7A6BFF; --brand-500:#8A5CFF;
  --brand-600:#3A26E0; --brand-700:#2C1CB6; --brand-800:#221594;
  --brand:var(--volt);        --brand-ink:#FFFFFF;
  --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(11,16,36,.04);
  --r-xs:6px; --r-3xl:32px;
}

[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#070A16;   --paper:#101528;    --paper-2:#141A31;
  --sunken:#191F3A;   --sunken-2:#212949;
  --scrim:rgba(2,4,12,.62);  --overlay-scrim:rgba(2,4,12,.62);

  --line:#242C49;     --line-2:#2F3859;   --line-3:#3B466B;

  --ink:#EDF0FA;      --ink-2:#C6CDE4;    --ink-3:#98A1C0;
  --ink-4:#6D7699;    --ink-5:#4E567A;

  --volt:#7A6BFF;     --volt-600:#6152FF; --volt-700:#5544F0;
  --volt-soft:#211E45;
  --volt-border:rgba(122,107,255,.34);
  --volt-tint:rgba(122,107,255,.10);
  --volt-grad:linear-gradient(135deg,#8878FF 0%,#6D5CFF 55%,#5544F0 100%);

  --brass:#E7B45B;    --brass-strong:#F2C87C; --brass-soft:#2A2213;
  --brass-border:rgba(231,180,91,.28);  --brass-tint:rgba(231,180,91,.09);

  --win:#37D392;      --win-soft:#12291F;  --win-border:rgba(55,211,146,.30);
  --live:#FF5C72;     --live-soft:#2A1319; --live-border:rgba(255,92,114,.30);
  --info:#7DA0FF;     --info-soft:#141E38; --info-border:rgba(125,160,255,.28);
  --warn:#E7B45B;     --warn-soft:#2A2213; --warn-border:rgba(231,180,91,.28);

  --brand-500:#7A6BFF; --brand-600:#6152FF; --brand-700:#5544F0;
  --bg-grid:rgba(255,255,255,.04);

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 18px -8px rgba(0,0,0,.6);
  --sh-3:0 24px 60px -18px rgba(0,0,0,.7);
}

/* ─────────────────────────────────────────────────────────────────────
   2 · RESET
   ───────────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;height:100%}
body{
  height:100%;
  font-family:var(--f-body);
  background:var(--canvas);
  color:var(--ink);
  font-size:var(--fs-base);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;text-align:left}
input,select,textarea{font-family:inherit;font-size:16px;outline:none;border:none;background:none;color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--volt);color:#fff}
::placeholder{color:var(--ink-4)}
:focus-visible{outline:2px solid var(--volt);outline-offset:2px;border-radius:var(--r-sm)}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

@keyframes pulse{50%{opacity:.4}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.w-full{width:100%}
.pad{padding:0 var(--gutter)}
.win{color:var(--win)}
.pos{color:var(--win)}
.neg{color:var(--live)}
.link{color:var(--volt);font-weight:800;cursor:pointer}
.link-quiet{color:var(--ink-4);font-size:var(--fs-cap);font-weight:700;cursor:pointer}
.link-quiet:hover{color:var(--volt)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ─────────────────────────────────────────────────────────────────────
   3 · SHELL
   ───────────────────────────────────────────────────────────────────── */
.page{display:none}
.page.active{display:block}

.device{
  position:relative;
  display:flex;flex-direction:column;
  height:100dvh;
  background:var(--canvas);
  overflow:hidden;
}

/* ─────────────────────────────────────────────────────────────────────
   4 · TOP BAR
   ───────────────────────────────────────────────────────────────────── */
.topbar{
  flex-shrink:0;position:relative;z-index:40;
  background:var(--volt-grad);
  color:#fff;
  padding:calc(env(safe-area-inset-top) + 10px) var(--gutter) 12px;
  box-shadow:var(--sh-2);
}
.tb-inner{max-width:var(--shell-max);margin:0 auto;width:100%}
.tb-row{display:flex;align-items:center;gap:10px}

.brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0;cursor:pointer}
.brand-mark{width:34px;height:34px;flex-shrink:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.brand-mark.lg{width:44px;height:44px;filter:none}
.brand-word{
  font-family:var(--f-display);font-weight:800;font-size:var(--fs-xl);
  letter-spacing:-.03em;line-height:1;color:#fff;
}
.brand-word b{color:var(--amber)}
.brand-word.dark{color:var(--ink)}

.tb-nav{display:none}

.tb-icon{
  width:38px;height:38px;border-radius:var(--r-md);flex-shrink:0;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  transition:var(--t-base);
}
.tb-icon:active{transform:scale(.92);background:rgba(255,255,255,.24)}
.tb-icon svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.tb-icon .tt-sun{display:none}
[data-theme="dark"] .tb-icon .tt-moon{display:none}
[data-theme="dark"] .tb-icon .tt-sun{display:block}

.balance-pill{
  display:flex;align-items:center;gap:9px;
  margin-top:12px;padding:9px 10px 9px 13px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg);
  backdrop-filter:blur(6px);
}
.bal-block{flex:1;min-width:0;cursor:pointer}
.bal-label{
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
.bal-amount{
  font-family:var(--f-mono);font-weight:800;font-size:20px;
  letter-spacing:-.02em;line-height:1;margin-top:2px;
  display:flex;align-items:baseline;gap:3px;
}
.bal-cur{font-size:var(--fs-cap);font-weight:700;opacity:.8}
.bal-deposit{
  height:38px;padding:0 16px;flex-shrink:0;
  border-radius:var(--r-md);
  background:#fff;color:var(--volt-700);
  font-weight:800;font-size:var(--fs-sm);letter-spacing:-.01em;
  display:flex;align-items:center;gap:6px;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.3);
  transition:var(--t-base);
}
.bal-deposit:active{transform:scale(.95)}
.bal-deposit svg{width:16px;height:16px;stroke:var(--volt-700);stroke-width:2.6;fill:none}

.guest-row{display:flex;gap:8px;margin-top:12px}
.btn-light{
  flex:1;height:40px;border-radius:var(--r-md);
  background:#fff;color:var(--volt-700);
  font-weight:800;font-size:var(--fs-sm);
  display:grid;place-items:center;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.3);
}
.btn-ghost-light{
  flex:1;height:40px;border-radius:var(--r-md);
  background:rgba(255,255,255,.15);color:#fff;
  border:1px solid rgba(255,255,255,.22);
  font-weight:800;font-size:var(--fs-sm);
  display:grid;place-items:center;
}

/* ─────────────────────────────────────────────────────────────────────
   5 · CHIPS
   ───────────────────────────────────────────────────────────────────── */
.chips{
  flex-shrink:0;display:flex;gap:8px;
  padding:11px var(--gutter);
  background:var(--paper);
  border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
  position:relative;z-index:30;
}
.chips::-webkit-scrollbar{display:none}
.chips.inline{background:none;border-bottom:none;padding:10px var(--gutter) 2px}
.chip{
  flex-shrink:0;display:flex;align-items:center;gap:6px;
  height:36px;padding:0 14px;
  border-radius:var(--r-pill);
  background:var(--sunken);color:var(--ink-3);
  border:1px solid transparent;
  font-weight:700;font-size:var(--fs-sm);letter-spacing:-.01em;
  white-space:nowrap;transition:var(--t-base);
}
.chip .emoji{font-size:15px;line-height:1}
.chip:active{transform:scale(.95)}
.chip.active{background:var(--ink);color:#fff}
[data-theme="dark"] .chip.active{background:var(--volt)}
.chip.live-chip{background:var(--live-soft);color:var(--live)}
.chip.live-chip.active{background:var(--live);color:#fff}

/* ─────────────────────────────────────────────────────────────────────
   6 · SCROLL / RAIL
   ───────────────────────────────────────────────────────────────────── */
.scroll{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 96px);
}
.scroll::-webkit-scrollbar{display:none}

.rail{width:100%;max-width:var(--shell-max);margin:0 auto}
.side{display:none}
.dock{display:none}
.feed{min-width:0;width:100%}

.view{display:none}
.view.active{display:block;animation:viewIn .28s cubic-bezier(.22,.61,.36,1)}

/* ─────────────────────────────────────────────────────────────────────
   7 · SECTION HEADS
   ───────────────────────────────────────────────────────────────────── */
.sec-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:var(--s-5) var(--gutter) 9px;
}
.sec-title{
  display:flex;align-items:center;gap:8px;min-width:0;
  font-family:var(--f-display);font-weight:700;font-size:var(--fs-lg);
  letter-spacing:-.03em;color:var(--ink);
}
.sec-title .dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--live);box-shadow:0 0 0 4px var(--live-soft);
  animation:pulse 1.6s infinite;
}
.sec-more{
  display:flex;align-items:center;gap:3px;flex-shrink:0;
  font-size:var(--fs-cap);font-weight:700;color:var(--volt);
}
.sec-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}
.sec-count{
  font-family:var(--f-mono);font-size:var(--fs-tiny);
  font-weight:700;color:var(--ink-4);flex-shrink:0;
}
.live-pill{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  font-size:var(--fs-tiny);font-weight:800;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--live-soft);color:var(--live);
  border:1px solid var(--live-border);
}
.live-pill i{width:5px;height:5px;border-radius:50%;background:var(--live);animation:pulse 1.2s infinite}

/* ─────────────────────────────────────────────────────────────────────
   8 · HERO
   ───────────────────────────────────────────────────────────────────── */
.hero{padding:14px var(--gutter) 4px}
.hero-track{
  display:flex;gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-bottom:6px;
}
.hero-track::-webkit-scrollbar{display:none}
.hero-card{
  flex:0 0 88%;max-width:360px;scroll-snap-align:center;
  position:relative;overflow:hidden;
  border-radius:var(--r-2xl);padding:18px;min-height:158px;
  color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:var(--sh-2);
}
.hero-card::after{
  content:"";position:absolute;right:-30px;top:-30px;
  width:150px;height:150px;border-radius:50%;
  background:rgba(255,255,255,.12);pointer-events:none;
}
.hero-card.h1{background:linear-gradient(120deg,#0A9A4F,#16263D)}
.hero-card.h2{background:linear-gradient(120deg,#0B7A54,#0FB06F)}
.hero-card.h3{background:linear-gradient(120deg,#B4471B,#E8873A)}
.hero-tag{
  font-size:10px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.8);
  position:relative;z-index:1;
}
.hero-title{
  font-family:var(--f-display);font-weight:800;font-size:var(--fs-lg);
  letter-spacing:-.03em;margin-top:8px;line-height:1.25;
  position:relative;z-index:1;
}
.hero-cta{
  align-self:flex-start;margin-top:14px;
  height:34px;padding:0 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;font-weight:800;font-size:var(--fs-cap);
  display:flex;align-items:center;
  position:relative;z-index:1;
}
.hero-dots{display:flex;justify-content:center;gap:5px;padding-top:4px}
.hero-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-3);transition:var(--t-base)}
.hero-dots i.on{width:18px;border-radius:3px;background:var(--volt)}

/* ─────────────────────────────────────────────────────────────────────
   9 · MATCH CARD
   Teams stack vertically so long names never truncate to nonsense on a
   360px screen. The whole team block is the tap target for detail; the
   odds row is separate so a mis-tap never opens a page you didn't want.
   ───────────────────────────────────────────────────────────────────── */
.match-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  margin:0 var(--gutter) 11px;
  overflow:hidden;
  box-shadow:var(--sh-1);
  transition:transform var(--t-base),border-color var(--t-base);
}
.match-card:active{transform:scale(.992)}

.mc-top{display:flex;align-items:center;gap:8px;padding:11px 14px 0}
.mc-league{display:flex;align-items:center;gap:7px;min-width:0;flex:1}
.mc-flag{font-size:15px;flex-shrink:0;line-height:1}
.mc-league-name{
  font-size:var(--fs-tiny);font-weight:700;color:var(--ink-4);
  text-transform:uppercase;letter-spacing:.05em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mc-time{
  font-family:var(--f-mono);font-size:var(--fs-tiny);
  font-weight:700;color:var(--ink-3);flex-shrink:0;
}
.mc-live{display:flex;align-items:center;gap:5px;flex-shrink:0}
.mc-live .live-dot{width:6px;height:6px;border-radius:50%;background:var(--live);animation:pulse 1.2s infinite}
.mc-live .live-txt{font-size:10px;font-weight:800;color:var(--live);letter-spacing:.08em}
.mc-live .min{font-family:var(--f-mono);font-size:var(--fs-tiny);font-weight:800;color:var(--live)}
.ended-badge{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-size:10px;font-weight:800;letter-spacing:.06em;
  color:var(--ink-3);background:var(--sunken-2);
  border:1px solid var(--line-2);
  padding:3px 9px;border-radius:var(--r-pill);
}

.mc-body{padding:12px 14px}
.mc-teams{display:flex;flex-direction:column;gap:9px;margin-bottom:12px;cursor:pointer}
.mc-team{display:flex;align-items:center;gap:10px;min-width:0}
.mc-crest{
  width:24px;height:24px;border-radius:7px;flex-shrink:0;
  display:grid;place-items:center;
  font-size:var(--fs-cap);font-weight:800;color:#fff;
}
.mc-team-name{
  font-weight:700;font-size:14.5px;letter-spacing:-.015em;
  flex:1;min-width:0;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mc-score{
  font-family:var(--f-mono);font-weight:800;font-size:var(--fs-lg);
  color:var(--ink);min-width:18px;text-align:right;flex-shrink:0;
}
.mc-score.live{color:var(--live)}

.inplay-strip{height:3px;background:var(--sunken);border-radius:2px;overflow:hidden;margin-bottom:12px}
.inplay-fill{height:100%;background:var(--live);border-radius:2px;transition:width .6s ease}

/* ── odds ── */
.odds-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.odds-row.two{grid-template-columns:repeat(2,1fr)}
.odds-row.grid{grid-template-columns:repeat(2,1fr)}

.odds-btn{
  position:relative;height:52px;
  border-radius:var(--r-md);
  background:var(--sunken);
  border:1.5px solid transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  overflow:hidden;
  transition:transform var(--t-fast),background var(--t-base),border-color var(--t-base);
}
.odds-btn .o-label{
  font-size:var(--fs-micro);font-weight:800;color:var(--ink-4);
  letter-spacing:.06em;text-transform:uppercase;
  max-width:100%;padding:0 4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.odds-btn .o-val{
  font-family:var(--f-mono);font-weight:800;font-size:15px;
  color:var(--ink);letter-spacing:-.02em;
}
.odds-btn:active{transform:scale(.94)}
.odds-btn.on{background:var(--volt);border-color:var(--volt-700);box-shadow:var(--sh-volt)}
.odds-btn.on .o-label,.odds-btn.on .o-val{color:#fff}
.odds-btn.on::after{
  content:"✓";position:absolute;top:3px;right:5px;
  font-size:9px;font-weight:800;color:#fff;
}
.odds-btn.locked{opacity:.5;cursor:not-allowed;pointer-events:none}
.odds-btn.locked .o-val{text-decoration:line-through;color:var(--ink-4)}

.match-card.locked{opacity:.92}
.lock-note{
  display:flex;align-items:center;gap:7px;margin-top:11px;padding:9px 12px;
  background:var(--sunken);border-radius:var(--r-md);
  font-size:var(--fs-cap);font-weight:600;color:var(--ink-3);
}
.lock-note svg{width:15px;height:15px;stroke:var(--ink-4);fill:none;stroke-width:2;flex-shrink:0}
.lock-note.wide{
  margin:0 var(--gutter) 12px;align-items:flex-start;padding:14px;
  border:1px solid var(--line-2);
}
.lock-note.wide div{display:flex;flex-direction:column;gap:3px}
.lock-note.wide strong{font-size:var(--fs-sm);font-weight:800;color:var(--ink)}
.lock-note.wide span{font-size:var(--fs-cap);color:var(--ink-3);line-height:1.55}

.more-mkts{
  display:block;width:100%;text-align:center;
  font-size:11.5px;font-weight:700;color:var(--volt);padding-top:11px;
}

/* ── empty & skeleton ── */
.empty-hint{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:44px 24px;
}
.empty-hint .em{font-size:34px;opacity:.4;margin-bottom:10px}
.empty-hint .t{
  font-family:var(--f-display);font-weight:700;font-size:var(--fs-base);
  letter-spacing:-.02em;color:var(--ink-2);
}
.empty-hint .s{font-size:var(--fs-sm);color:var(--ink-4);margin-top:5px}

.card-skel{
  height:150px;margin:0 var(--gutter) 11px;
  border-radius:var(--r-xl);
  background:linear-gradient(90deg,var(--sunken) 25%,var(--sunken-2) 37%,var(--sunken) 63%);
  background-size:420px 100%;
  animation:shimmer 1.3s linear infinite;
}

/* ─────────────────────────────────────────────────────────────────────
   10 · MATCH DETAIL
   ───────────────────────────────────────────────────────────────────── */
.detail-back{
  display:flex;align-items:center;gap:6px;
  padding:14px var(--gutter) 0;
  font-size:var(--fs-cap);font-weight:700;color:var(--ink-3);
}
.detail-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}

.detail-hero{
  margin:12px var(--gutter);padding:16px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-2xl);box-shadow:var(--sh-1);
}
.detail-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.detail-league{
  font-size:var(--fs-tiny);font-weight:700;color:var(--ink-4);
  text-transform:uppercase;letter-spacing:.05em;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.detail-teams{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:10px;margin-top:18px;
}
.detail-team{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.detail-crest{
  width:52px;height:52px;border-radius:var(--r-lg);
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:var(--fs-lg);color:#fff;
}
.detail-tname{
  font-weight:700;font-size:var(--fs-sm);text-align:center;
  letter-spacing:-.015em;color:var(--ink);
}
.detail-score{
  display:flex;align-items:center;gap:4px;
  font-family:var(--f-mono);font-weight:800;font-size:var(--fs-3xl);
  letter-spacing:-.03em;color:var(--ink);line-height:1;
}
.detail-score i{font-style:normal;color:var(--ink-5);font-size:var(--fs-2xl)}
.detail-score .vs{
  font-family:var(--f-body);font-size:var(--fs-sm);
  font-weight:700;color:var(--ink-4);text-transform:uppercase;letter-spacing:.1em;
}
.detail-hero .inplay-strip{margin-top:16px;margin-bottom:0}

.mkt-group{
  margin:0 var(--gutter) 11px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-1);
}
.mkt-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);
}
.mkt-name{
  font-family:var(--f-display);font-weight:700;font-size:14px;
  letter-spacing:-.02em;color:var(--ink);
}
.mkt-cnt{
  font-family:var(--f-mono);font-size:10px;font-weight:800;
  padding:2px 7px;border-radius:var(--r-pill);
  background:var(--sunken);color:var(--ink-4);
}
.mkt-group .odds-row{padding:12px 14px}

/* ═════════════════════════════════════════════════════════════════════
   11 · THE BETSLIP — signature
   Docked, the slip is a perforated ticket stub: a punched tear line
   along its top edge, a brass counter badge. Tapping tears it open.
   ═════════════════════════════════════════════════════════════════════ */
.slip-stub{
  position:absolute;left:12px;right:12px;z-index:45;
  bottom:calc(env(safe-area-inset-bottom) + var(--bottomnav-h) + 8px);
  background:var(--ink);color:#fff;
  border-radius:var(--r-lg);
  padding:12px 14px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 16px 40px -12px rgba(11,16,36,.6);
  transform:translateY(calc(100% + var(--bottomnav-h) + 24px));
  opacity:0;pointer-events:none;
  transition:transform var(--t-slow),opacity var(--t-base);
  cursor:pointer;will-change:transform;
}
.slip-stub.show{transform:none;opacity:1;pointer-events:auto}
[data-theme="dark"] .slip-stub{background:var(--volt)}

/* the perforation */
.slip-stub::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:4px;
  background-image:radial-gradient(circle,var(--canvas) 1.5px,transparent 1.6px);
  background-size:9px 4px;background-position:0 -2px;
  pointer-events:none;
}
.stub-badge{
  width:38px;height:38px;border-radius:var(--r-md);flex-shrink:0;
  background:rgba(255,255,255,.16);
  display:grid;place-items:center;position:relative;
}
.stub-badge svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.stub-count{
  position:absolute;top:-6px;right:-6px;
  min-width:20px;height:20px;padding:0 5px;
  background:var(--amber);color:#3A2A00;
  font-family:var(--f-mono);font-weight:800;font-size:var(--fs-tiny);
  border-radius:var(--r-pill);display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.stub-info{flex:1;min-width:0}
.stub-l1{font-size:var(--fs-tiny);font-weight:600;opacity:.75}
.stub-l2{font-family:var(--f-mono);font-weight:800;font-size:15px;letter-spacing:-.01em}
.stub-cta{
  background:#fff;color:var(--ink);
  font-weight:800;font-size:var(--fs-sm);
  padding:9px 16px;border-radius:var(--r-md);flex-shrink:0;
}
[data-theme="dark"] .stub-cta{color:var(--volt-700)}

/* ─────────────────────────────────────────────────────────────────────
   12 · BOTTOM NAV
   ───────────────────────────────────────────────────────────────────── */
.bottomnav{
  position:absolute;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:6px 4px calc(env(safe-area-inset-bottom) + 6px);
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 0;position:relative;
  transition:transform var(--t-base);
}
.nav-item svg{width:23px;height:23px;stroke:var(--ink-4);stroke-width:2;fill:none;transition:var(--t-base)}
.nav-item span{font-size:10px;font-weight:700;color:var(--ink-4);letter-spacing:-.01em}
.nav-item.active svg{stroke:var(--volt)}
.nav-item.active span{color:var(--volt)}
.nav-item.active::before{
  content:"";position:absolute;top:0;
  width:26px;height:3px;border-radius:3px;background:var(--volt);
}
.nav-item:active{transform:scale(.9)}
.nav-badge{
  position:absolute;top:3px;right:calc(50% - 20px);
  min-width:16px;height:16px;padding:0 4px;
  background:var(--live);color:#fff;
  font-family:var(--f-mono);font-weight:800;font-size:9px;
  border-radius:var(--r-pill);display:grid;place-items:center;
}
.nav-badge:empty{display:none}

/* ─────────────────────────────────────────────────────────────────────
   13 · OVERLAYS & SHEETS
   ───────────────────────────────────────────────────────────────────── */
.overlay{
  position:absolute;inset:0;z-index:100;
  display:none;align-items:flex-end;justify-content:center;
  background:var(--scrim);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.overlay.open{display:flex;animation:fadeIn .2s ease}
.overlay.center{align-items:center;padding:16px}

.sheet{
  width:100%;max-width:560px;
  background:var(--paper);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  max-height:92dvh;overflow-y:auto;scrollbar-width:none;
  box-shadow:var(--sh-3);
  animation:sheetUp .34s cubic-bezier(.22,.61,.36,1);
}
.sheet::-webkit-scrollbar{display:none}
.overlay.center .sheet{
  border-radius:var(--r-2xl);max-width:420px;
  animation:popIn .34s cubic-bezier(.22,.61,.36,1);
}
.sheet-grip{width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:9px auto 0}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;position:sticky;top:0;z-index:2;
  background:var(--paper);border-bottom:1px solid var(--line);
}
.sheet-title{
  font-family:var(--f-display);font-weight:700;font-size:18px;
  letter-spacing:-.03em;color:var(--ink);
}
.sheet-close{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--sunken);display:grid;place-items:center;
}
.sheet-close svg{width:16px;height:16px;stroke:var(--ink-3);stroke-width:2.4;fill:none}

/* ── slip sheet ── */
.slip-type{display:flex;gap:6px;padding:14px 18px 0}
.slip-type button{
  flex:1;height:38px;border-radius:var(--r-md);
  background:var(--sunken);
  border:1.5px solid transparent;
  font-weight:700;font-size:var(--fs-sm);color:var(--ink-3);
  text-align:center;transition:var(--t-base);
}
.slip-type button.on{background:var(--volt-soft);color:var(--volt);border-color:var(--volt-border)}

.slip-list{padding:12px 18px}
.slip-empty{text-align:center;padding:50px 20px;color:var(--ink-4);font-size:var(--fs-sm)}
.slip-empty svg{width:44px;height:44px;stroke:var(--ink-5);fill:none;stroke-width:1.6;margin:0 auto 12px}
.slip-empty .t{font-weight:700;color:var(--ink-2);font-size:var(--fs-base);margin-bottom:4px}

.slip-row{display:flex;gap:11px;padding:12px 0;border-bottom:1px dashed var(--line-2)}
.slip-row:last-child{border-bottom:none}
.slip-row.closed{opacity:.6}
.slip-row .idx{
  width:22px;height:22px;border-radius:var(--r-sm);flex-shrink:0;
  background:var(--volt-soft);color:var(--volt);
  font-family:var(--f-mono);font-weight:800;font-size:10px;
  display:grid;place-items:center;
}
.slip-row .body{flex:1;min-width:0}
.slip-row .pick{font-weight:700;font-size:13.5px;letter-spacing:-.01em;color:var(--ink)}
.slip-row .mkt{
  font-size:var(--fs-tiny);color:var(--ink-4);margin-top:1px;
  text-transform:uppercase;letter-spacing:.04em;
}
.slip-row .match{
  font-size:var(--fs-tiny);color:var(--ink-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.slip-row .row-tag{
  display:inline-block;margin-top:5px;
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--r-pill);
  background:var(--live-soft);color:var(--live);border:1px solid var(--live-border);
}
.slip-row .odd{
  font-family:var(--f-mono);font-weight:800;font-size:13.5px;
  color:var(--brass);background:var(--brass-soft);
  border:1px solid var(--brass-border);
  padding:3px 8px;border-radius:var(--r-sm);
  align-self:flex-start;flex-shrink:0;
}
.slip-row .x{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;align-self:flex-start;
  background:var(--sunken);display:grid;place-items:center;
}
.slip-row .x svg{width:12px;height:12px;stroke:var(--ink-4);stroke-width:2.6;fill:none}

.stake-box{padding:4px 18px 14px}
.quick-stakes{display:flex;gap:7px;margin-bottom:11px}
.quick-stakes button{
  flex:1;height:34px;border-radius:var(--r-sm);
  background:var(--sunken);
  font-family:var(--f-mono);font-weight:700;font-size:12.5px;
  color:var(--ink-2);text-align:center;transition:var(--t-base);
}
.quick-stakes button:active{background:var(--volt-soft);color:var(--volt)}
.stake-input-wrap{
  display:flex;align-items:center;gap:8px;
  background:var(--sunken);border-radius:var(--r-md);
  border:1.5px solid var(--line-2);
  padding:0 14px;height:52px;transition:var(--t-base);
}
.stake-input-wrap:focus-within{border-color:var(--volt);background:var(--paper)}
.stake-cur{font-family:var(--f-mono);font-weight:800;font-size:15px;color:var(--ink-3);flex-shrink:0}
.stake-input{
  flex:1;min-width:0;
  font-family:var(--f-mono);font-weight:800;font-size:22px;
  color:var(--ink);text-align:right;letter-spacing:-.02em;
}

.slip-summary{padding:0 18px 12px}
.sum-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:var(--fs-sm)}
.sum-row .l{color:var(--ink-3);font-weight:600}
.sum-row .v{font-family:var(--f-mono);font-weight:700;color:var(--ink-2)}
.sum-row .v.win{color:var(--win)}
.sum-row.big{padding-top:11px;margin-top:5px;border-top:1px dashed var(--line-2)}
.sum-row.big .l{font-weight:800;color:var(--ink);font-size:14px}
.sum-row.big .v{font-size:20px;font-weight:800;color:var(--win)}

.slip-actions{
  position:sticky;bottom:0;
  background:var(--paper);border-top:1px solid var(--line);
  padding:12px 18px calc(env(safe-area-inset-bottom) + 14px);
  display:flex;gap:10px;
}
.btn-clear{
  width:52px;height:52px;border-radius:var(--r-md);flex-shrink:0;
  background:var(--sunken);display:grid;place-items:center;
}
.btn-clear svg{width:20px;height:20px;stroke:var(--ink-3);stroke-width:2;fill:none}
.btn-place{
  flex:1;height:52px;border-radius:var(--r-md);
  background:var(--volt-grad);color:#fff;
  font-weight:800;font-size:15px;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:var(--sh-volt);transition:var(--t-base);
}
.btn-place:active{transform:scale(.98)}
.btn-place:disabled{background:var(--line-2);color:var(--ink-4);box-shadow:none}

/* Booking is a different outcome from placing, not a variant of it —
   so it reads as a quiet secondary with the brass accent that marks
   codes throughout the product. */
.book-btn{
  width:100%;height:48px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brass-soft);
  border:1.5px dashed var(--brass-border);
  color:var(--brass);
  font-weight:800;font-size:var(--fs-sm);letter-spacing:-.01em;
  transition:var(--t-base);
}
.book-btn:hover{border-style:solid;background:var(--brass-tint)}
.book-btn:active{transform:scale(.98)}

/* ── search sheet ── */
/* Search is a destination, not a widget tucked in a corner — give the
   field the whole width and enough height to type into comfortably. */
.search-box{
  display:flex;align-items:center;gap:12px;
  margin:16px 18px 6px;padding:0 18px;height:66px;
  background:var(--sunken);
  border:2px solid var(--line-2);
  border-radius:var(--r-lg);
  transition:var(--t-base);
}
.search-box:focus-within{
  border-color:var(--volt);background:var(--paper);
  box-shadow:0 0 0 4px var(--volt-tint);
}
.search-box svg{
  width:22px;height:22px;flex-shrink:0;
  stroke:var(--ink-4);fill:none;stroke-width:2.2;
  transition:stroke var(--t-base);
}
.search-box:focus-within svg{stroke:var(--volt)}
.search-box input{
  flex:1;min-width:0;height:100%;
  font-size:18px;font-weight:700;letter-spacing:-.015em;
  color:var(--ink);
}
.search-box input::placeholder{font-weight:600;color:var(--ink-4);letter-spacing:0}
/* The wrapper already shows focus (border + ring). The input's own
   focus-visible outline sits inside it and reads as a doubled border. */
.search-box input:focus-visible,
.stake-input:focus-visible,
.dep-amt-inp:focus-visible,
.dep-phone-inp:focus-visible{outline:none}

.search-hint{
  padding:0 20px 10px;
  font-size:var(--fs-tiny);color:var(--ink-4);font-weight:600;
}
.search-results{padding:0 0 18px;max-height:52dvh;overflow-y:auto}
.search-results:empty{display:none}

/* result rows */
.search-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 20px;
  border-bottom:1px solid var(--line);
  transition:var(--t-fast);
}
.search-item:last-child{border-bottom:none}
.search-item:active{background:var(--sunken)}
.search-item .si-ic{
  width:36px;height:36px;border-radius:var(--r-md);flex-shrink:0;
  display:grid;place-items:center;font-size:16px;
  background:var(--volt-soft);
}
.search-item .si-mid{flex:1;min-width:0}
.search-item .si-t{
  font-weight:700;font-size:var(--fs-sm);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.search-item .si-s{font-size:var(--fs-tiny);color:var(--ink-4);margin-top:2px}
.search-item .si-arr{flex-shrink:0;color:var(--ink-5);font-size:15px}

@media(min-width:900px){
  .search-box{height:72px;font-size:19px}
  .search-box input{font-size:19px}
}

/* ─────────────────────────────────────────────────────────────────────
   14 · LISTS — bets, transactions, tabs
   ───────────────────────────────────────────────────────────────────── */
.list-tabs{
  display:flex;gap:7px;
  padding:12px var(--gutter) 4px;
  overflow-x:auto;scrollbar-width:none;
}
.list-tabs::-webkit-scrollbar{display:none}
.list-tab{
  flex-shrink:0;height:34px;padding:0 15px;
  display:flex;align-items:center;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--line);
  font-size:var(--fs-cap);font-weight:700;color:var(--ink-3);
  white-space:nowrap;transition:var(--t-base);
}
.list-tab.on,.list-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
[data-theme="dark"] .list-tab.on,[data-theme="dark"] .list-tab.active{background:var(--volt);border-color:var(--volt)}

.tx-row{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:14px var(--gutter);
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:var(--t-fast);
}
.tx-row:active{background:var(--paper-2)}
.tx-ic{
  width:38px;height:38px;border-radius:var(--r-md);flex-shrink:0;
  display:grid;place-items:center;background:var(--sunken);
}
.tx-ic svg{width:18px;height:18px;fill:none;stroke-width:2.2;stroke:var(--ink-3)}
.tx-ic.in{background:var(--win-soft)}   .tx-ic.in svg{stroke:var(--win)}
.tx-ic.out{background:var(--live-soft)} .tx-ic.out svg{stroke:var(--live)}
.tx-ic.bet{background:var(--volt-soft)} .tx-ic.bet svg{stroke:var(--volt)}
.tx-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tx-t{
  font-weight:700;font-size:var(--fs-sm);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tx-s{font-size:var(--fs-tiny);color:var(--ink-4)}
.tx-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.tx-amt{font-family:var(--f-mono);font-weight:800;font-size:var(--fs-sm);letter-spacing:-.01em}
.tx-amt.pos{color:var(--win)}
.tx-amt.neg{color:var(--live)}
.tx-status{
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--r-pill);
  background:var(--sunken-2);color:var(--ink-4);
}
.tx-status.ok,.tx-status.success,.tx-status.completed{background:var(--win-soft);color:var(--win)}
.tx-status.pend,.tx-status.pending{background:var(--brass-soft);color:var(--brass)}
.tx-status.failed,.tx-status.error{background:var(--live-soft);color:var(--live)}

/* ─────────────────────────────────────────────────────────────────────
   15 · WALLET & ACCOUNT
   ───────────────────────────────────────────────────────────────────── */
.wallet-card{
  margin-top:16px;padding:20px;
  background:var(--volt-grad);color:#fff;
  border-radius:var(--r-2xl);
  box-shadow:var(--sh-volt);
  position:relative;overflow:hidden;
}
.wallet-card::after{
  content:"";position:absolute;right:-40px;top:-40px;
  width:170px;height:170px;border-radius:50%;
  background:rgba(255,255,255,.10);pointer-events:none;
}
.wc-label{
  font-size:var(--fs-tiny);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;opacity:.8;position:relative;z-index:1;
}
.wc-amount{
  font-family:var(--f-mono);font-weight:800;font-size:var(--fs-3xl);
  letter-spacing:-.03em;margin-top:6px;position:relative;z-index:1;
}
.wc-actions{display:flex;gap:10px;margin-top:16px;position:relative;z-index:1}
.wc-actions button{height:46px;font-size:14px}

.acct-hero{padding:20px var(--gutter) 0}
.acct-top{display:flex;align-items:center;gap:14px}
.acct-avatar{
  width:60px;height:60px;border-radius:var(--r-xl);flex-shrink:0;
  display:grid;place-items:center;
  background:var(--volt-grad);color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:var(--fs-xl);
  letter-spacing:-.02em;box-shadow:var(--sh-volt);
}
.acct-id-block{min-width:0}
.acct-name{
  font-family:var(--f-display);font-weight:800;font-size:var(--fs-xl);
  letter-spacing:-.03em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acct-id{font-family:var(--f-mono);font-size:var(--fs-tiny);color:var(--ink-4);margin-top:2px}
.acct-verify{
  display:inline-flex;align-items:center;gap:5px;margin-top:7px;
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);
  background:var(--win-soft);color:var(--win);border:1px solid var(--win-border);
}
.acct-verify svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:3}

.acct-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
  padding:18px var(--gutter) 0;
}
.acct-stat{
  padding:13px;text-align:center;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.acct-stat .v{
  font-family:var(--f-mono);font-weight:800;font-size:var(--fs-lg);
  letter-spacing:-.02em;color:var(--ink);
}
.acct-stat .v.win{color:var(--win)}
.acct-stat .l{
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4);margin-top:4px;
}

.acct-menu{padding:22px var(--gutter) 0}
.acct-mlabel{
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);
  margin:18px 0 9px;
}
.acct-mlabel:first-child{margin-top:0}
.acct-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 14px;margin-bottom:8px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:var(--t-fast);
}
.acct-item:active{transform:scale(.99);background:var(--paper-2)}
.acct-item .ic{
  width:36px;height:36px;border-radius:var(--r-md);flex-shrink:0;
  display:grid;place-items:center;background:var(--sunken);
}
.acct-item .ic svg{width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:2}
.acct-item .t{flex:1;min-width:0;font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
.acct-item .arr{flex-shrink:0}
.acct-item .arr svg{width:16px;height:16px;stroke:var(--ink-5);fill:none;stroke-width:2.4}
.acct-item.danger .t{color:var(--live)}
.acct-item.danger .ic{background:var(--live-soft)}
.acct-item.danger .ic svg{stroke:var(--live)}

.toggle{
  width:44px;height:26px;border-radius:var(--r-pill);flex-shrink:0;
  background:var(--line-2);position:relative;transition:var(--t-base);
}
.toggle::after{
  content:"";position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;transition:var(--t-base);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.toggle.on{background:var(--volt)}
.toggle.on::after{transform:translateX(18px)}

.acct-foot{
  text-align:center;padding:26px var(--gutter);
  font-size:var(--fs-tiny);color:var(--ink-5);
}
.acct-foot a{color:var(--ink-4)}

/* ─────────────────────────────────────────────────────────────────────
   16 · AUTH PAGES
   ───────────────────────────────────────────────────────────────────── */
.auth-wrap{
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:24px var(--gutter) calc(env(safe-area-inset-bottom) + 40px);
  background:radial-gradient(120% 80% at 50% 0%,var(--volt-tint) 0%,transparent 60%),var(--canvas);
}
.auth-card{
  width:100%;max-width:430px;padding:26px 22px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-2xl);box-shadow:var(--sh-3);
}
.auth-back{
  display:flex;align-items:center;gap:6px;margin-bottom:22px;
  font-size:var(--fs-cap);font-weight:700;color:var(--ink-4);
}
.auth-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}
.auth-back:hover{color:var(--volt)}
.auth-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:22px}
.auth-title{
  font-family:var(--f-display);font-weight:800;font-size:var(--fs-2xl);
  letter-spacing:-.035em;color:var(--ink);text-align:center;
}
.auth-sub{font-size:var(--fs-sm);color:var(--ink-3);text-align:center;margin:6px 0 22px}
.auth-alt{text-align:center;margin-top:20px;font-size:var(--fs-sm);color:var(--ink-3)}
.auth-legal{
  margin-top:16px;font-size:var(--fs-tiny);
  color:var(--ink-4);text-align:center;line-height:1.6;
}
.auth-legal a{color:var(--volt);font-weight:700}

.field{margin-bottom:15px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-label{display:block;margin-bottom:7px;font-size:var(--fs-cap);font-weight:700;color:var(--ink-2)}
.field-input{
  width:100%;height:50px;padding:0 14px;
  background:var(--sunken);
  border:1.5px solid var(--line-2);
  border-radius:var(--r-md);
  font-size:15px;font-weight:600;color:var(--ink);
  transition:var(--t-base);
}
.field-input:focus{border-color:var(--volt);background:var(--paper)}
.field-split{display:flex;gap:9px}
.field-split .cc{width:120px;flex:0 0 auto}
select.field-input{
  appearance:none;cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238791AE' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}
.field-pw{position:relative}
.pw-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:var(--r-sm);
  display:grid;place-items:center;
}
.pw-toggle svg{width:18px;height:18px;stroke:var(--ink-4);fill:none;stroke-width:2}
.field-hint{font-size:var(--fs-tiny);color:var(--ink-4);margin-top:6px;line-height:1.5}
.field-row-end{display:flex;justify-content:flex-end;margin-top:7px}

.check-row{
  display:flex;align-items:flex-start;gap:10px;margin:6px 0 20px;
  font-size:var(--fs-cap);color:var(--ink-3);line-height:1.55;cursor:pointer;
}
.check-row input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--volt)}
.check-row a{color:var(--volt);font-weight:700}

.btn-primary{
  width:100%;height:48px;border-radius:var(--r-md);
  background:var(--volt-grad);color:#fff;
  font-weight:800;font-size:var(--fs-base);
  display:grid;place-items:center;
  box-shadow:var(--sh-volt);transition:var(--t-base);
}
.btn-primary.lg{height:52px}
.btn-primary:active{transform:scale(.98)}
.btn-quiet{
  height:46px;border-radius:var(--r-md);
  background:var(--paper);color:var(--ink-2);
  border:1px solid var(--line-2);
  font-weight:700;font-size:var(--fs-sm);
  display:grid;place-items:center;
  box-shadow:var(--sh-1);margin:14px 0;
}

/* ─────────────────────────────────────────────────────────────────────
   17 · TOAST & LOADING
   ───────────────────────────────────────────────────────────────────── */
.toast-wrap{
  position:fixed;left:0;right:0;z-index:900;
  top:calc(env(safe-area-inset-top) + 12px);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 var(--gutter);pointer-events:none;
}
.toast{
  width:100%;max-width:440px;
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;
  background:var(--ink);color:#fff;
  border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  font-size:var(--fs-sm);font-weight:700;
  animation:toastIn .24s ease;
  transition:opacity .3s,transform .3s;
}
.toast.out{opacity:0;transform:translateY(-10px)}
.toast svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;flex-shrink:0}
[data-theme="dark"] .toast{background:var(--paper-2);border:1px solid var(--line-2)}
.toast.success,.toast.ok{background:var(--win);color:#fff}
.toast.error,.toast.err{background:var(--live);color:#fff}
.toast.info{background:var(--info);color:#fff}

.loading-overlay{
  position:fixed;inset:0;z-index:950;
  display:none;align-items:center;justify-content:center;
  background:var(--scrim);backdrop-filter:blur(8px);
}
.loading-overlay.on,.loading-overlay.active,.loading-overlay.show{display:flex}
.load-card{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:26px 34px;background:var(--paper);
  border-radius:var(--r-xl);box-shadow:var(--sh-3);
}
.spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--line-2);border-top-color:var(--volt);
  animation:spin .7s linear infinite;
}
.load-txt{
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);
}

/* ═════════════════════════════════════════════════════════════════════
   18 · RESPONSIVE — the desktop upgrade
   Mobile-first: everything above is the phone. These widen it.
   600 · large phone   900 · tablet (sidebar in, bottom nav out)
   1200 · desktop (slip docks)   1600 · more air
   ═════════════════════════════════════════════════════════════════════ */

@media(min-width:600px){
  :root{--gutter:22px}
  .hero-card{flex:0 0 340px}
  .field-grid{grid-template-columns:1fr 1fr}
}

@media(min-width:900px){
  :root{--gutter:24px}

  .device{height:100dvh}

  /* topbar flattens into a nav rail */
  .topbar{padding:0 var(--gutter)}
  .tb-inner{display:flex;align-items:center;gap:20px;height:64px}
  .tb-row{flex:1;height:64px}
  .brand{flex:0 0 auto}

  .tb-nav{
    display:flex;align-items:center;gap:4px;flex:1;min-width:0;
    overflow-x:auto;scrollbar-width:none;
  }
  .tb-nav::-webkit-scrollbar{display:none}
  .tb-nav-item{
    display:flex;align-items:center;gap:6px;
    height:36px;padding:0 13px;border-radius:var(--r-md);
    font-size:var(--fs-sm);font-weight:700;
    color:rgba(255,255,255,.78);white-space:nowrap;
    transition:var(--t-base);
  }
  .tb-nav-item:hover{background:rgba(255,255,255,.12);color:#fff}
  .tb-nav-item.active{background:rgba(255,255,255,.18);color:#fff}
  .tb-nav-cnt{
    font-family:var(--f-mono);font-size:10px;font-weight:800;
    padding:1px 6px;border-radius:var(--r-pill);
    background:rgba(255,255,255,.2);
  }

  .balance-pill{margin-top:0;flex:0 0 auto;padding:7px 8px 7px 12px}
  .bal-amount{font-size:var(--fs-lg)}
  .guest-row{margin-top:0;flex:0 0 auto;width:auto}
  .guest-row button{padding:0 16px;flex:0 0 auto}

  /* three-column rail */
  .rail{
    display:grid;
    grid-template-columns:var(--side-w) minmax(0,1fr);
    gap:22px;
    padding:22px var(--gutter) 60px;
    align-items:start;
  }
  .side{
    display:block;position:sticky;top:22px;
    max-height:calc(100dvh - 150px);overflow-y:auto;
    background:var(--paper);border:1px solid var(--line);
    border-radius:var(--r-xl);box-shadow:var(--sh-1);
    padding:6px;
  }
  .side-group{padding:10px 0;border-bottom:1px solid var(--line)}
  .side-group:last-child{border-bottom:none}
  /* a group holding nothing but its heading is noise — hide it until
     the sports/competition lists actually load */
  .side-group:not(:has(.side-item)){display:none}
  .side-label{
    font-size:var(--fs-micro);font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-4);
    padding:0 12px;margin-bottom:8px;
  }
  .side-item{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:10px 12px;border-radius:var(--r-md);
    font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);
    transition:var(--t-fast);
  }
  .side-item svg{width:18px;height:18px;stroke:var(--ink-4);fill:none;stroke-width:2;flex-shrink:0}
  .side-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .side-item:hover{background:var(--sunken)}
  .side-item.active{background:var(--volt-soft);color:var(--volt)}
  .side-item.active svg{stroke:var(--volt)}
  .side-cnt{
    font-family:var(--f-mono);font-size:10px;font-weight:800;font-style:normal;
    padding:2px 7px;border-radius:var(--r-pill);
    background:var(--sunken-2);color:var(--ink-4);flex-shrink:0;
  }
  .side-cnt:empty{display:none}

  .feed{max-width:var(--feed-max)}

  /* the grid owns spacing now — cards drop their side margins */
  .match-card,.mkt-group,.detail-hero,.lock-note.wide,.card-skel{margin-left:0;margin-right:0}
  .sec-head,.chips.inline,.hero,.list-tabs,.pad,.detail-back,
  .acct-hero,.acct-stats,.acct-menu{padding-left:0;padding-right:0}
  .tx-row{padding-left:14px;padding-right:14px;border-radius:var(--r-md)}

  /* phone furniture stands down */
  .bottomnav{display:none}
  .slip-stub{display:none}
  .scroll{padding-bottom:0}

  .chips{padding-left:var(--gutter);padding-right:var(--gutter)}

  .match-card:hover{box-shadow:var(--sh-2);transform:translateY(-1px);border-color:var(--line-2)}
  .odds-btn:hover{background:var(--sunken-2)}
  .odds-btn.on:hover{background:var(--volt)}
}

@media(min-width:1200px){
  .rail{grid-template-columns:var(--side-w) minmax(0,1fr) var(--slip-w)}

  .dock{display:block;position:sticky;top:22px}
  .dock-inner{
    display:flex;flex-direction:column;
    max-height:calc(100dvh - 150px);
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    box-shadow:var(--sh-2);
    overflow:hidden;
  }
  /* the ticket metaphor survives the breakpoint: perforated header */
  .dock-head{
    display:flex;align-items:center;gap:9px;
    padding:14px 16px;flex-shrink:0;position:relative;
    background:var(--ink);color:#fff;
  }
  [data-theme="dark"] .dock-head{background:var(--volt)}
  .dock-head::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;
    background-image:radial-gradient(circle,var(--paper) 1.5px,transparent 1.6px);
    background-size:9px 4px;background-position:0 -2px;
  }
  .dock-title{
    font-family:var(--f-display);font-weight:800;font-size:var(--fs-sm);
    letter-spacing:-.02em;flex:1;
  }
  .dock-count{
    min-width:22px;height:22px;padding:0 6px;
    display:grid;place-items:center;
    background:var(--amber);color:#3A2A00;
    font-family:var(--f-mono);font-weight:800;font-size:var(--fs-tiny);
    border-radius:var(--r-pill);
  }
  .dock-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}
  .dock-body::-webkit-scrollbar{display:none}
  .dock-body .slip-actions{padding-bottom:14px}
}

@media(min-width:1600px){
  :root{--side-w:270px;--slip-w:360px;--feed-max:820px}
  .rail{gap:28px}
}

/* landscape phones — shrink the vertical furniture */
@media(max-width:899px) and (orientation:landscape) and (max-height:500px){
  .topbar{padding-top:calc(env(safe-area-inset-top) + 6px);padding-bottom:8px}
  .balance-pill{margin-top:8px}
  .hero-card{min-height:118px}
}

@media print{
  .topbar,.bottomnav,.slip-stub,.dock,.side,.chips,.overlay{display:none!important}
  .rail{display:block;padding:0}
  body{background:#fff;color:#000}
}

/* ═════════════════════════════════════════════════════════════════════
   19 · MODULE SURFACES
   modular_models.js injects the deposit (mdp-*), withdraw (wx-*) and
   notice (ntc-*) markup without its own stylesheet, so those live here.
   Same Strika language as the sheets above.
   ═════════════════════════════════════════════════════════════════════ */

/* ── deposit sheet ── */
.mdp-container{
  width:100%;max-width:560px;
  background:var(--paper);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  max-height:92dvh;overflow-y:auto;scrollbar-width:none;
  box-shadow:var(--sh-3);
  animation:sheetUp .34s cubic-bezier(.22,.61,.36,1);
}
.mdp-container::-webkit-scrollbar{display:none}
.mdp-close{
  position:absolute;top:14px;right:18px;z-index:3;
  width:32px;height:32px;border-radius:50%;
  background:var(--sunken);color:var(--ink-3);
  display:grid;place-items:center;font-size:var(--fs-base);cursor:pointer;
}
.mdp-tabs{display:flex;gap:7px;padding:16px 18px 0;overflow-x:auto;scrollbar-width:none}
.mdp-tabs::-webkit-scrollbar{display:none}
.mdp-tab{
  flex-shrink:0;display:flex;align-items:center;gap:6px;
  height:38px;padding:0 15px;border-radius:var(--r-pill);
  background:var(--sunken);color:var(--ink-3);
  border:1px solid transparent;
  font-size:var(--fs-sm);font-weight:700;white-space:nowrap;
  cursor:pointer;transition:var(--t-base);
}
.mdp-tab.active{background:var(--volt-soft);color:var(--volt);border-color:var(--volt-border)}
.mdp-tab-icon{font-size:var(--fs-base)}

.mdp-form{padding:16px 18px}
.mdp-form-title{
  font-family:var(--f-display);font-weight:700;font-size:var(--fs-lg);
  letter-spacing:-.03em;color:var(--ink);
}
.mdp-form-sub{font-size:var(--fs-cap);color:var(--ink-3);margin-top:4px;line-height:1.55}
.mdp-field{margin-bottom:14px;position:relative}
.mdp-label{display:block;margin-bottom:7px;font-size:var(--fs-cap);font-weight:700;color:var(--ink-2)}
.mdp-input{
  width:100%;height:50px;padding:0 14px;
  background:var(--sunken);border:1.5px solid var(--line-2);
  border-radius:var(--r-md);
  font-size:15px;font-weight:600;color:var(--ink);
  transition:var(--t-base);
}
.mdp-input:focus{border-color:var(--volt);background:var(--paper)}
.mdp-field-icon{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:var(--fs-base);opacity:.5;pointer-events:none;
}
.mdp-field-icon ~ .mdp-input{padding-left:40px}
.mdp-secret-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;opacity:.6}
.mdp-error{font-size:var(--fs-tiny);font-weight:700;color:var(--live);margin-top:6px}

.mdp-submit,.mdp-done-btn{
  width:100%;height:52px;border-radius:var(--r-md);margin-top:6px;
  background:var(--volt-grad);color:#fff;
  font-weight:800;font-size:15px;
  display:grid;place-items:center;
  box-shadow:var(--sh-volt);transition:var(--t-base);
}
.mdp-submit:active{transform:scale(.98)}
.mdp-submit.disabled,.mdp-submit:disabled{
  background:var(--line-2);color:var(--ink-4);box-shadow:none;cursor:not-allowed;
}

.mdp-vendors-title,.mdp-history-title,.mdp-steps-title{
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);
  padding:0 18px;margin:16px 0 9px;
}
.mdp-vendor{
  display:flex;align-items:center;gap:11px;
  margin:0 18px 9px;padding:13px 14px;
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-lg);cursor:pointer;transition:var(--t-base);
}
.mdp-vendor.selected{border-color:var(--volt);background:var(--volt-tint)}
.mdp-vendor-head{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.mdp-vendor-name{font-weight:800;font-size:var(--fs-sm);color:var(--ink)}
.mdp-vendor-phone{font-family:var(--f-mono);font-size:var(--fs-cap);font-weight:700;color:var(--ink-3);margin-top:2px}
.mdp-vendor-badge{
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-pill);
  background:var(--sunken);color:var(--ink-3);
}
/* carrier marks stay on brand — these are third-party identities */
.mdp-vendor-badge.n-mtn{background:#FFF4D6;color:#8A6A00}
.mdp-vendor-badge.n-telecel{background:#FDECEE;color:#B01528}
.mdp-vendor-badge.n-airteltigo{background:#FFEEE0;color:#B34700}
.mdp-vendor-check{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--volt);color:#fff;
  display:grid;place-items:center;font-size:var(--fs-tiny);
  opacity:0;transition:var(--t-fast);
}
.mdp-vendor.selected .mdp-vendor-check{opacity:1}

.mdp-crypto-grid,.mdp-token-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:0 18px}
.mdp-crypto-card{
  padding:13px;text-align:center;cursor:pointer;
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-lg);transition:var(--t-base);
}
.mdp-crypto-card.selected{border-color:var(--volt);background:var(--volt-tint)}
.mdp-crypto-icon{font-size:var(--fs-2xl);margin-bottom:7px}
.mdp-crypto-name{font-weight:800;font-size:var(--fs-sm);color:var(--ink)}
.mdp-crypto-sym{font-family:var(--f-mono);font-size:var(--fs-tiny);font-weight:700;color:var(--ink-4);margin-top:2px}
.mdp-crypto-net{font-size:var(--fs-micro);color:var(--ink-4);margin-top:4px}
.mdp-network-select{display:flex;gap:7px;padding:0 18px;margin-bottom:14px;flex-wrap:wrap}
.mdp-token-field,.mdp-token-info{padding:0 18px}

.mdp-wallet{
  margin:0 18px 14px;padding:14px;
  background:var(--sunken);
  border:1.5px dashed var(--line-3);border-radius:var(--r-lg);
}
.mdp-wallet-label{
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:7px;
}
.mdp-wallet-addr{
  font-family:var(--f-mono);font-size:var(--fs-cap);font-weight:700;
  color:var(--ink);word-break:break-all;line-height:1.6;
}
.mdp-wallet-copy,.mdp-copy-btn{
  margin-top:10px;height:38px;padding:0 16px;border-radius:var(--r-sm);
  background:var(--volt-soft);color:var(--volt);
  border:1px solid var(--volt-border);
  font-size:var(--fs-cap);font-weight:800;
}
.mdp-wallet-warn{
  display:flex;gap:8px;margin-top:10px;padding:10px 12px;
  background:var(--live-soft);border:1px solid var(--live-border);
  border-radius:var(--r-sm);
  font-size:var(--fs-tiny);color:var(--live);font-weight:700;line-height:1.55;
}

.mdp-steps{padding:0 18px 14px}
.mdp-step-item{display:flex;gap:11px;padding:9px 0}
.mdp-step-num{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:var(--volt-soft);color:var(--volt);
  font-family:var(--f-mono);font-weight:800;font-size:var(--fs-tiny);
  display:grid;place-items:center;
}
.mdp-step-text{font-size:var(--fs-cap);color:var(--ink-2);line-height:1.6}

.mdp-screenshot,.wx-upload-zone{
  margin:0 18px 14px;padding:24px;text-align:center;cursor:pointer;
  background:var(--sunken);
  border:1.5px dashed var(--line-3);border-radius:var(--r-lg);
  transition:var(--t-base);
}
.mdp-screenshot:hover,.wx-upload-zone:hover{border-color:var(--volt);background:var(--volt-tint)}
.mdp-screenshot-icon,.wx-upload-icon{font-size:var(--fs-2xl);opacity:.5;margin-bottom:8px}
.mdp-screenshot-text,.wx-upload-text{font-size:var(--fs-cap);color:var(--ink-3);font-weight:700}

.mdp-maint-banner{
  display:flex;gap:11px;margin:14px 18px;padding:14px;
  background:var(--brass-soft);border:1px solid var(--brass-border);
  border-radius:var(--r-lg);
}
.mdp-maint-icon{font-size:var(--fs-xl);flex-shrink:0}
.mdp-maint-title{font-weight:800;font-size:var(--fs-sm);color:var(--brass)}
.mdp-maint-msg{font-size:var(--fs-cap);color:var(--brass);margin-top:3px;line-height:1.55}

.mdp-success,.wx-req{text-align:center;padding:34px 22px}
.mdp-success-icon{
  width:64px;height:64px;border-radius:50%;margin:0 auto 16px;
  display:grid;place-items:center;font-size:var(--fs-2xl);
  background:var(--win-soft);color:var(--win);
  border:2px solid var(--win-border);
}
.mdp-success-title{
  font-family:var(--f-display);font-weight:800;font-size:var(--fs-xl);
  letter-spacing:-.03em;color:var(--ink);
}
.mdp-success-msg{font-size:var(--fs-sm);color:var(--ink-3);margin-top:7px;line-height:1.6}
.mdp-success-ref{
  font-family:var(--f-mono);font-weight:800;font-size:var(--fs-sm);
  color:var(--ink);margin-top:14px;padding:11px;
  background:var(--sunken);border-radius:var(--r-md);letter-spacing:.08em;
}

/* ── withdraw sheet ── */
/* modular_models.js creates .wx-overlay as the container for .wx-card.
   I styled the card and never the container, so the sheet rendered in
   page flow instead of over it. */
.wx-overlay{
  position:fixed;inset:0;z-index:10400;
  display:flex;align-items:flex-end;justify-content:center;
  background:var(--scrim);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:fadeIn .2s ease;
}
@media(min-width:600px){.wx-overlay{align-items:center;padding:20px}}

.wx-card{
  position:relative;
  width:100%;max-width:560px;
  background:var(--paper);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  max-height:92dvh;overflow-y:auto;scrollbar-width:none;
  box-shadow:var(--sh-3);
  animation:sheetUp .34s cubic-bezier(.22,.61,.36,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.wx-card::-webkit-scrollbar{display:none}
@media(min-width:600px){.wx-card{border-radius:var(--r-2xl);padding-bottom:0}}
.wx-h1{
  font-family:var(--f-display);font-weight:700;font-size:18px;
  letter-spacing:-.03em;color:var(--ink);
  padding:18px 18px 0;
}
.wx-close{
  position:absolute;top:14px;right:18px;z-index:3;
  width:32px;height:32px;border-radius:50%;
  background:var(--sunken);color:var(--ink-3);
  display:grid;place-items:center;cursor:pointer;
}
.wx-balance-card{
  margin:16px 18px;padding:16px;
  background:var(--volt-grad);color:#fff;
  border-radius:var(--r-xl);box-shadow:var(--sh-volt);
}
.wx-balance-label{
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
.wx-balance-val{
  font-family:var(--f-mono);font-weight:800;font-size:var(--fs-2xl);
  letter-spacing:-.03em;margin-top:5px;
}
.wx-h2{
  font-family:var(--f-display);font-weight:700;font-size:var(--fs-base);
  letter-spacing:-.02em;color:var(--ink);padding:0 18px;margin-bottom:9px;
}
.wx-sub{font-size:var(--fs-cap);color:var(--ink-3);padding:0 18px;line-height:1.55;margin-bottom:12px}
/* ── withdrawal fields ──
   .wx-input-box is a CONTAINER holding the currency prefix and the
   input, not the input itself. Styling it as a field meant its :focus
   could never fire (divs don't take focus) and the prefix, absolutely
   positioned at a fixed offset, sat on top of the typed value. It is a
   flex row now, with the real field inside it. */
.wx-input-wrap{padding:0 18px;margin-bottom:16px}
.wx-input-label{
  display:block;margin-bottom:8px;
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);
}
.wx-input-box{
  display:flex;align-items:center;gap:2px;
  width:100%;height:58px;padding:0 16px;
  background:var(--sunken);
  border:1.5px solid var(--line-2);
  border-radius:var(--r-lg);
  transition:var(--t-base);
}
.wx-input-box:focus-within{
  border-color:var(--volt);background:var(--paper);
  box-shadow:0 0 0 4px var(--volt-tint);
}
.wx-input-prefix{
  flex-shrink:0;
  font-family:var(--f-mono);font-weight:800;font-size:16px;
  color:var(--ink-4);pointer-events:none;
  transition:color var(--t-base);
}
.wx-input-box:focus-within .wx-input-prefix{color:var(--volt)}

/* The field itself. Amounts are right-aligned and large — this is the
   number the person is deciding on. */
.wx-input-box input,
.wx-input-box select{
  flex:1;min-width:0;height:100%;
  background:none;border:none;outline:none;
  font-family:var(--f-mono);font-weight:800;font-size:20px;
  letter-spacing:-.02em;color:var(--ink);
  text-align:right;
}
.wx-input-box input::placeholder{color:var(--ink-5);font-weight:700}
/* strip the spinner — it collides with a right-aligned figure */
.wx-input-box input[type=number]{-moz-appearance:textfield}
.wx-input-box input[type=number]::-webkit-outer-spin-button,
.wx-input-box input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wx-input-box input:focus-visible{outline:none}

/* Text fields (name, document number) read left-to-right at body size —
   only money gets the mono treatment. */
.wx-input-box input[type=text],
.wx-input-box input[type=email]{
  font-family:var(--f-body);font-weight:600;font-size:16px;
  text-align:left;letter-spacing:0;
}
.wx-country-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px 14px}
.wx-phone-row{display:flex;align-items:center;gap:9px;padding:0 18px 14px}
.wx-phone-badge{
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-pill);
  background:var(--volt-soft);color:var(--volt);
}
.wx-phone-num{font-family:var(--f-mono);font-weight:800;font-size:var(--fs-sm);color:var(--ink)}
.wx-tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);
  background:var(--sunken);color:var(--ink-3);
}
.wx-tag-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.wx-error:empty{display:none}
.wx-error{
  margin:0 18px 12px;padding:11px 13px;
  background:var(--live-soft);border:1px solid var(--live-border);
  border-radius:var(--r-md);
  font-size:var(--fs-cap);font-weight:700;color:var(--live);
}
.wx-submit{
  width:calc(100% - 36px);height:52px;
  margin:6px 18px calc(env(safe-area-inset-bottom) + 18px);
  border-radius:var(--r-md);
  background:var(--volt-grad);color:#fff;
  font-weight:800;font-size:15px;
  display:grid;place-items:center;
  box-shadow:var(--sh-volt);
}
.wx-steps{display:flex;gap:6px;padding:14px 18px}
.wx-file-preview{
  display:flex;align-items:center;gap:11px;
  margin:0 18px 14px;padding:11px;
  background:var(--sunken);border-radius:var(--r-md);
}
.wx-file-thumb{
  width:44px;height:44px;border-radius:var(--r-sm);flex-shrink:0;
  object-fit:cover;background:var(--sunken-2);
}
.wx-req-head{padding:0 18px;margin-bottom:9px}
.wx-req-info{flex:1;min-width:0}
.wx-req-title{font-weight:800;font-size:var(--fs-sm);color:var(--ink)}
.wx-req-desc{font-size:var(--fs-cap);color:var(--ink-4);margin-top:3px;line-height:1.5}
.wx-req-action{margin-top:9px}
.wx-req-progress{height:5px;background:var(--sunken);border-radius:3px;overflow:hidden;margin-top:8px}
.wx-req-progress-fill{height:100%;background:var(--volt);border-radius:3px;transition:width .5s}

/* ── notices ── */
.ntc-banner{
  display:flex;align-items:flex-start;gap:11px;
  margin:0 var(--gutter) 9px;padding:13px 14px;
  background:var(--paper);
  border:1px solid var(--line);
  border-left:3px solid var(--volt);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  animation:viewIn .3s ease;
}
.ntc-banner.info{border-left-color:var(--info)}
.ntc-banner.success{border-left-color:var(--win)}
.ntc-banner.warning{border-left-color:var(--brass)}
.ntc-banner.error{border-left-color:var(--live)}
.ntc-icon{font-size:var(--fs-lg);flex-shrink:0;line-height:1.2}
.ntc-content{flex:1;min-width:0}
.ntc-title{font-weight:800;font-size:var(--fs-sm);color:var(--ink);letter-spacing:-.01em}
.ntc-msg{font-size:var(--fs-cap);color:var(--ink-3);margin-top:3px;line-height:1.55}
.ntc-time{font-size:var(--fs-micro);color:var(--ink-4);margin-top:5px;font-weight:700}
.ntc-view{font-size:var(--fs-tiny);font-weight:800;color:var(--volt);margin-top:7px;cursor:pointer}
.ntc-actions{display:flex;gap:8px;margin-top:10px}
.ntc-dismiss{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:var(--sunken);color:var(--ink-4);
  display:grid;place-items:center;font-size:var(--fs-tiny);cursor:pointer;
}
.ntc-detail-header{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--line)}
.ntc-detail-icon-ring{
  width:46px;height:46px;border-radius:var(--r-lg);flex-shrink:0;
  display:grid;place-items:center;font-size:var(--fs-xl);
  background:var(--volt-soft);
}
.ntc-detail-title{
  font-family:var(--f-display);font-weight:700;font-size:var(--fs-lg);
  letter-spacing:-.03em;color:var(--ink);
}
.ntc-detail-type{
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);
}
.ntc-detail-body{padding:18px}
.ntc-detail-message{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.65}
.ntc-detail-meta{font-size:var(--fs-tiny);color:var(--ink-4);margin-top:14px}
.ntc-detail-footer{
  display:flex;gap:10px;padding:14px 18px calc(env(safe-area-inset-bottom) + 18px);
  border-top:1px solid var(--line);
}
.ntc-detail-btn{
  flex:1;height:48px;border-radius:var(--r-md);
  background:var(--volt-grad);color:#fff;
  font-weight:800;font-size:var(--fs-sm);
  display:grid;place-items:center;box-shadow:var(--sh-volt);
}
.ntc-detail-close{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--sunken);color:var(--ink-3);
  display:grid;place-items:center;cursor:pointer;
}
.ntc-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* shared bits the modules reach for */
.fh-team-away{text-align:right}
.disabled{opacity:.5;pointer-events:none;cursor:not-allowed}
.mdp-tab-label{line-height:1}

/* ── visibility hooks toggled by renderTopbar() ── */
.auth-only,.guest-only{}
.notice-stack,.ntc-stack{display:flex;flex-direction:column;padding-top:12px}
.notice-stack:empty,.ntc-stack:empty{display:none}
.openBetsBadge:empty{display:none}
.tournament-list-sidebar{}
.vp-verify-btn-text{display:inline-block}