/* ═══════════════════════════════════════════════════════
   BetPulse — Neutral dark theme
   ═══════════════════════════════════════════════════════ */
:root {
  --bg:      #1a1c23;
  --bg2:     #13151b;
  --bg3:     #21242e;
  --card:    #1d1f27;
  --sidebar: #13151b;
  --border:  #21242e;
  --border2: #1a1d25;
  --gold:    #1aaa5e;
  --gold2:   #158f4f;
  --blue:    #1aaa5e;
  --blue2:   #158f4f;
  --teal:    #22c875;
  --red:     #ef4444;
  --green:   #1aaa5e;
  --text:    #ffffff;
  --text2:   #6e7380;
  --text3:   #4b505d;
  --live:    #ef4444;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }

/* ── Header ── */
.hdr {
  background:var(--bg2); border-bottom:1px solid var(--border);
  height:52px; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:500;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.logo { font-size:20px; font-weight:900; color:var(--gold); letter-spacing:-.5px; }
.logo span { color:var(--text2); font-size:11px; font-weight:400; margin-left:6px; }
.hdr-mid { display:flex; align-items:center; gap:2px; }
.hnav { background:transparent; border:none; color:var(--text2); font-size:13px; font-weight:600;
  cursor:pointer; padding:8px 16px; border-radius:4px; position:relative; }
.hnav:hover, .hnav.on { color:var(--text); background:rgba(255,255,255,.06); }
.hnav.on::after { content:''; position:absolute; bottom:-1px; left:16px; right:16px;
  height:2px; background:var(--gold); border-radius:2px; }
.hlive { color:var(--red) !important; }
.hlive::before { content:''; display:inline-block; width:7px; height:7px;
  background:var(--red); border-radius:50%; margin-right:6px;
  animation:livepulse 1.2s ease-in-out infinite; }
@keyframes livepulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }
.hdr-right { display:flex; align-items:center; gap:14px; }
.stxt { font-size:11px; color:var(--text3); letter-spacing:.2px; }
/* Auth */
.auth-user { display:flex; align-items:center; gap:12px; }
.auth-name { font-size:12px; font-weight:800; color:var(--text);
  text-transform:uppercase; letter-spacing:.4px; padding:4px 10px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:14px; }

/* Multi-currency balance pills — Lek / Eur / Usd shown side by side. */
.auth-bal-row { display:flex; align-items:center; gap:6px; }
.auth-bal {
  font-size:12px; font-weight:800;
  padding:4px 10px; border-radius:14px;
  border:1px solid var(--border);
  font-variant-numeric:tabular-nums;
  transition:all .15s ease;
}
/* The user's actual currency — gold/highlighted so it's the eye-catcher. */
.auth-bal.on  {
  color:var(--gold);
  background:linear-gradient(180deg, rgba(26,170,94,.18), rgba(26,170,94,.08));
  border-color:rgba(26,170,94,.55);
  box-shadow:0 0 0 1px rgba(26,170,94,.15) inset;
}
/* Currencies the user doesn't hold — muted so the eye skips them but they're
   still visible to communicate "you have nothing in this currency". */
.auth-bal.off { color:var(--text3); background:transparent; opacity:.7; }
.auth-bal.off:hover { opacity:1; }

.auth-btn  { background:var(--gold); color:#fff; border:none; border-radius:6px;
  padding:7px 18px; font-size:12px; font-weight:800; cursor:pointer;
  letter-spacing:.3px; transition:background .12s; }
.auth-btn:hover { background:var(--gold2); }
.auth-btn.auth-logout { background:transparent; color:var(--text2);
  border:1px solid var(--border); padding:6px 14px; }
.auth-btn.auth-logout:hover { background:rgba(255,255,255,.06); color:var(--text);
  border-color:var(--text2); }

/* ── App shell ── */
.app { display:flex; min-height:calc(100vh - 52px); }

/* ── Sidebar ── */
.sidebar {
  width:200px; flex-shrink:0; background:var(--sidebar);
  border-right:1px solid var(--border); padding:8px 0;
  position:sticky; top:52px; height:calc(100vh - 52px);
  overflow-y:auto;
}
.sidebar::-webkit-scrollbar { width:3px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--border2); }
.sport-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px; cursor:pointer; font-size:12px; font-weight:600;
  color:var(--text2); border-left:3px solid transparent; transition:.12s;
}
.sport-item:hover, .sport-item.on {
  color:var(--text); background:rgba(255,255,255,.04); border-left-color:var(--gold);
}
.sport-item.on { color:var(--gold); }
.sport-icon { font-size:14px; margin-right:8px; }
.sport-cnt  { background:var(--bg3); color:var(--text2); font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:10px; min-width:24px; text-align:center; }
.sport-item.on .sport-cnt { background:var(--gold); color:#fff; }

/* ── Content area ── */
.content { flex:1; overflow-x:auto; min-width:0; }

/* ── Market tab bar ── */
.mktbar {
  background:var(--bg2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:2px; padding:0 12px;
  position:sticky; top:52px; z-index:100; overflow-x:auto;
}
.mktbar::-webkit-scrollbar { height:2px; }
.mkt-tab {
  background:transparent; border:none; color:var(--text2); font-size:11px; font-weight:600;
  cursor:pointer; padding:9px 14px; white-space:nowrap; position:relative;
  border-bottom:2px solid transparent;
}
.mkt-tab:hover { color:var(--text); }
.mkt-tab.on    { color:var(--gold); border-bottom-color:var(--gold); }

/* ── Table ── */
.otbl { width:100%; border-collapse:collapse; font-size:12px; min-width:700px; }

/* Column header rows */
.otbl thead tr.r1 th.grp {
  background:var(--bg2); color:var(--text2); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid var(--border); border-right:1px solid var(--border);
  padding:6px 0; text-align:center;
}
.otbl thead tr.r2 th.sub {
  background:var(--bg3); color:var(--text2); font-size:10px; font-weight:700;
  border-bottom:2px solid var(--border); border-right:1px solid var(--border2);
  padding:6px 10px; text-align:center; min-width:54px;
}
.otbl thead tr.r1 th.mcol {
  background:var(--bg2); border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
}
.otbl thead tr.r2 th.mcol2 {
  background:var(--bg3); border-bottom:2px solid var(--border);
  border-right:1px solid var(--border);
}

/* League row */
.lgrow td {
  background:#1d1f27; color:var(--text2); font-size:11px; font-weight:700;
  padding:6px 12px; letter-spacing:.3px; text-transform:uppercase;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.lgrow td .lcount { color:var(--text3); font-weight:400; margin-left:6px; font-size:10px; }

/* Match row */
.mrow { border-bottom:1px solid var(--border2); }
.mrow:hover td { background:rgba(255,255,255,.025); }

/* Match cell */
td.cm { padding:0; border-right:1px solid var(--border); min-width:200px; max-width:260px; }
.mc { padding:7px 10px; display:flex; flex-direction:column; gap:2px; }
.mc-top { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.mc-time {
  font-size:11px; font-weight:800; color:var(--live); min-width:36px;
  font-variant-numeric:tabular-nums;
}
.mc-time.stopped { color:var(--text3); }
.mc-ht { font-size:10px; font-weight:900; color:var(--gold);
  background:rgba(26,170,94,.1); padding:1px 5px; border-radius:3px; }
.mc-score { font-size:14px; font-weight:900; color:var(--text);
  letter-spacing:1px; font-variant-numeric:tabular-nums; }
.mc-period { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; }
/* Auto-suspend badge — appears for 45s after a goal so the player sees the
   match is locked even before the next API poll arrives. */
.mc-autosusp {
  font-size:9px; font-weight:900; color:#fff;
  background:var(--red); padding:1px 6px; border-radius:3px;
  letter-spacing:.4px; animation:pulseSusp 1s ease-in-out infinite;
}
@keyframes pulseSusp { 0%,100%{opacity:1} 50%{opacity:.55} }
/* Pulsing dot on a ticking clock so users instantly see "live and counting". */
.mc-time:not(.stopped)::before {
  content:"●"; color:var(--live); font-size:8px; margin-right:4px;
  animation:pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes opPulse  { 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,.6)}
                       50%{transform:scale(1.08);box-shadow:0 0 0 4px rgba(239,68,68,0)} }
.mc-teams { display:flex; flex-direction:column; gap:1px; }
.mc-team  { font-size:12px; font-weight:600; color:var(--text); line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.mc-team.lead { color:var(--gold); }
.mc-mktcount { font-size:10px; color:var(--teal); margin-top:3px; cursor:pointer; }
.mc-mktcount:hover { color:var(--gold); }

/* Odds cell */
td.oc { padding:5px 4px; text-align:center; border-right:1px solid var(--border2);
  min-width:54px; vertical-align:middle; }
.odds-btn {
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--border);
  border-radius:4px; padding:4px 6px; cursor:pointer; width:48px;
  font-size:13px; font-weight:800; color:var(--text);
  transition:background .12s, color .12s, transform .08s;
  user-select:none; position:relative; overflow:hidden;
}
.odds-btn:hover { background:#2c3040; border-color:var(--teal); color:#fff; }
.odds-btn.sel   { background:var(--gold); border-color:var(--gold2); color:#fff; }
.odds-btn.sel:hover { background:var(--gold2); }
.odds-btn.susp  { background:var(--bg3); border-color:var(--border); color:var(--text3);
  font-size:8px; font-weight:700; letter-spacing:.5px; cursor:not-allowed; }
.odds-dash { color:var(--text3); font-size:12px; }

/* Market count badge (rightmost column) */
td.mktcnt { padding:5px 8px; text-align:center; border-right:none; min-width:44px; }
.mktbadge {
  display:inline-block; background:#1d2030; color:var(--teal);
  font-size:10px; font-weight:800; padding:3px 7px; border-radius:4px; cursor:pointer;
  border:1px solid var(--border2);
}
.mktbadge:hover { background:var(--gold); color:#fff; }

/* Flash animations */
@keyframes fup { 0%{background:#1a3040} 60%{background:#1a3040} 100%{background:var(--card)} }
@keyframes fdn { 0%{background:#3d1a1a} 60%{background:#3d1a1a} 100%{background:var(--card)} }
.fl-up { animation:fup .9s ease-out; }
.fl-dn { animation:fdn .9s ease-out; }
@keyframes mc-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }

/* ── Match Center Live Card ─────────────────────────────────────────── */
.mc-live-card { background:var(--bg2);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:6px }
.mc-live-topbar { display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:var(--bg3);border-bottom:1px solid var(--border) }
.mc-live-status { font-size:11px;font-weight:600;letter-spacing:.4px;color:var(--text2) }
.mc-live-status.live { color:#ef4444 }
.mc-live-league { font-size:11px;color:var(--text2) }
.mc-live-score-row { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 12px }
.mc-live-team { font-size:13px;font-weight:600;color:var(--text);line-height:1.3 }
.mc-live-team-h { text-align:right }
.mc-live-team-a { text-align:left }
.mc-live-score-center { padding:0 16px;text-align:center }
.mc-live-score { font-size:24px;font-weight:700;color:var(--text);letter-spacing:2px;line-height:1 }
.mc-live-dash { color:var(--text2);margin:0 4px }
.mc-live-sub { font-size:9px;color:var(--text2);margin-top:4px;letter-spacing:.4px }
.mc-live-incs { padding:8px 12px 10px;border-top:1px solid var(--border) }
.mc-live-sec-lbl { font-size:9px;font-weight:700;letter-spacing:.6px;color:var(--text2);margin-bottom:6px;text-transform:uppercase }
.mc-inc-row { display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12px }
.mc-inc-min { font-size:10px;color:var(--text2);min-width:28px;flex-shrink:0 }
.mc-inc-ball { width:16px;height:16px;border-radius:50%;background:#fbbf24;display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:#0d1117;font-weight:700;flex-shrink:0 }
.mc-inc-card { width:11px;height:15px;border-radius:2px;background:#facc15;display:inline-block;flex-shrink:0 }
.mc-inc-card.red { background:#ef4444 }
.mc-inc-name { color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.mc-inc-side { font-size:10px;color:var(--text2);flex-shrink:0 }

/* ── Stats collapsible ──────────────────────────────────────────────── */
.mc-stats-details { background:var(--bg2);border:1px solid var(--border);border-radius:8px;overflow:hidden }
.mc-stats-details[open] .mc-stats-arrow { transform:rotate(180deg) }
.mc-stats-summary { display:flex;align-items:center;justify-content:space-between;padding:9px 12px;cursor:pointer;list-style:none;font-size:12px;font-weight:600;color:var(--text);background:var(--bg3);border-bottom:1px solid transparent;user-select:none }
.mc-stats-details[open] .mc-stats-summary { border-bottom-color:var(--border) }
.mc-stats-summary::-webkit-details-marker { display:none }
.mc-stats-arrow { font-size:12px;color:var(--text2);transition:transform .2s }
.mc-stats-body { padding:10px 12px }
.mc-stat-list { display:grid;gap:8px;margin-bottom:10px }
.mc-stat-item {}
.mc-stat-vals { display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px }
.mc-stat-h { font-size:13px;font-weight:700;color:#3b82f6;min-width:28px }
.mc-stat-lbl { font-size:11px;color:var(--text2);text-align:center;flex:1 }
.mc-stat-a { font-size:13px;font-weight:700;color:#ef4444;min-width:28px;text-align:right }
.mc-stat-bar { display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--bg3) }
.mc-stat-bar-h { background:#3b82f6;transition:width .3s }
.mc-stat-bar-a { flex:1;background:#ef4444 }
.mc-cards-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px }
.mc-card-box { background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:8px 10px }
.mc-card-box-lbl { font-size:9px;font-weight:700;letter-spacing:.4px;color:var(--text2);margin-bottom:5px;text-transform:uppercase }
.mc-card-box-vals { display:flex;align-items:center;justify-content:space-between }
.mc-card-box-vals span:first-child,.mc-card-box-vals span:last-child { font-size:18px;font-weight:700 }
.mc-card-icon { width:14px;height:19px;border-radius:2px;display:inline-block }

/* ── State (empty/error) ── */
.state { display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 20px; color:var(--text2); gap:10px; text-align:center; }
.state .ico { font-size:40px; opacity:.15; }

/* ── Bet Slip ── */
/* Right-column layout:
     ┌──────────────────────┐
     │  slip-info-zone      │  ← empty placeholder, takes upper half
     │  (future stats,      │     (flex:1 fills available space)
     │   momentum, etc.)    │
     ├──────────────────────┤
     │  slip-hdr            │
     │  Bet Slip            │
     ├──────────────────────┤
     │  slip-inner          │  ← max 50vh, scrolls if content overflows
     │  picks · stake ·     │
     │  Place Bet           │
     └──────────────────────┘
   .collapsed shrinks the whole column to 0px on demand. */
.slip-panel {
  width:340px; flex-shrink:0; background:var(--bg2); border-left:1px solid var(--border);
  display:flex; flex-direction:column; transition:width .22s ease; overflow:hidden;
  position:sticky; top:52px; height:calc(100vh - 52px);
}
.slip-panel.collapsed { width:0 !important; }
/* slip-info-zone: fixed height — does NOT grow with content.
   Scrolling happens inside mc-body so the hdr/tabs stay pinned. */
.slip-info-zone {
  flex:0 0 26vh; height:26vh; overflow:hidden;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
}
/* Mobile match center zone — sibling of #detail-inner inside #detail-col.
   Hidden on desktop (slip-info-zone is used there). Shown below markets on mobile. */
.mob-mc-zone { display:none; }
/* detail-inner wrapper: ensures innerHTML rewrites don't evict mob-mc-zone sibling */
#detail-inner { width:100%; flex-shrink:0; }

/* ── Match Center widget (tabbed) ── */
/* mc-wrap fills the fixed slip-info-zone. hdr + tabs are rigid at top/bottom;
   mc-body takes the remaining space and scrolls internally. */
.mc-wrap { display:flex; flex-direction:column; height:100%; min-height:0; }
.mc-hdr { flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 10px; border-bottom:1px solid var(--border); background:var(--bg3);
  font-size:11px; font-weight:800; color:var(--gold); letter-spacing:.2px; }
.mc-team { flex:0 1 auto; max-width:42%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.mc-team-h { text-align:right; }
.mc-team-a { text-align:left; }
.mc-vs { color:var(--text3); font-weight:600; font-size:10px; }
.mc-body { flex:1; min-height:0; overflow-y:auto; }
.mc-tabs { flex-shrink:0; display:flex; border-top:1px solid var(--border); background:var(--bg3); }
.mc-tab { flex:1; background:none; border:none; padding:6px 0;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  color:var(--text3); cursor:pointer; font-size:9px; font-weight:600;
  border-top:2px solid transparent; }
.mc-tab:hover { color:var(--text2); background:var(--bg2); }
.mc-tab.on { color:var(--gold); border-top-color:var(--gold); background:var(--bg2); }
.mc-tab-ic { font-size:14px; line-height:1; }
.mc-tab-lbl { font-size:9px; }
.mc-loading, .mc-empty { padding:30px 14px; text-align:center;
  color:var(--text3); font-size:11px; line-height:1.5; }

/* Pitch tab */
.mc-pitch { padding:18px 10px; }
.mc-pitch-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:12px; }
.mc-pitch-team { display:flex; flex-direction:column; align-items:center; gap:6px; }
.mc-jersey { font-size:32px; line-height:1; }
.mc-pitch-name { font-size:11px; font-weight:700; color:var(--text); text-align:center; }
.mc-pitch-score { font-size:22px; font-weight:800; color:var(--gold); }
.mc-pitch-ko { text-align:center; margin-top:14px; font-size:10px; color:var(--text3); }

/* Stats tab */
.mc-stats { padding:4px 6px 8px; }
.mc-stats-hdr { display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:3px 2px 5px; border-bottom:1px solid var(--border);
  font-size:9px; font-weight:700; color:var(--text3); letter-spacing:.3px; }
.mc-stats-h { text-align:left; color:var(--text2); }
.mc-stats-a { text-align:right; color:var(--text2); }
.mc-stats-lbl { color:var(--gold); font-size:8px; padding:0 4px; }
.mc-stats-row { display:grid; grid-template-columns:42px 1fr 42px;
  align-items:center; padding:5px 4px; border-bottom:1px dashed var(--border);
  font-size:11px; }
.mc-stats-row:last-child { border-bottom:none; }
.mc-stats-h-val { text-align:left; font-weight:700; color:var(--text); }
.mc-stats-a-val { text-align:right; font-weight:700; color:var(--text); }
.mc-stats-row-lbl { text-align:center; color:var(--text2); font-size:10px;
  text-transform:uppercase; letter-spacing:.3px; }
.mc-card { display:inline-block; padding:1px 5px; border-radius:2px;
  font-size:10px; font-weight:700; color:#000; }
.mc-card-y { background:#fbbf24; }
.mc-card-r { background:#ef4444; color:#fff; margin-left:2px; }
.mc-stats-section { padding:6px 8px 4px; font-size:9px; font-weight:700;
  color:var(--text3); text-transform:uppercase; letter-spacing:.4px;
  border-top:1px solid var(--border); margin-top:4px; text-align:center; }
.mc-stats-row-bold { background:rgba(26,170,94,.06); }
.mc-stats-row-bold .mc-stats-h-val,
.mc-stats-row-bold .mc-stats-a-val { color:var(--gold); font-size:13px; font-weight:900; }
.mc-stats-foot { padding:6px 8px 8px; text-align:center; font-size:9px;
  color:var(--text3); font-style:italic; }

/* ── Stats v2: score, possession bar, categorized sections, comparison bars ── */
.mc-score-row { display:flex; align-items:center; justify-content:center;
  gap:14px; padding:8px 10px 4px;
  background:rgba(26,170,94,.05); border-bottom:1px solid var(--border); }
.mc-score-val { font-size:22px; font-weight:900; color:var(--gold);
  font-variant-numeric:tabular-nums; line-height:1; }
.mc-score-vs { color:var(--text3); font-size:11px; font-weight:600; }

/* ── Event info card (ℹ️ tab) ── */
.mc-event-card { padding:6px 10px 8px; }
.mc-ev-row {
  display:grid; grid-template-columns:54px 1fr;
  align-items:baseline; gap:6px;
  padding:4px 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.mc-ev-row:last-child { border-bottom:none; }
.mc-ev-lbl {
  font-size:9px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.5px;
}
.mc-ev-val {
  font-size:11px; color:var(--text); font-weight:500; line-height:1.3;
}

.mc-poss-wrap { padding:8px 10px; border-bottom:1px solid var(--border); }
.mc-poss-lbl { font-size:9px; font-weight:700; color:var(--text3);
  text-align:center; letter-spacing:.4px; margin-bottom:4px; }
.mc-poss-bar { display:flex; height:18px; border-radius:3px; overflow:hidden;
  background:var(--bg3); }
.mc-poss-h, .mc-poss-a { display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#fff; min-width:30px;
  transition:width .3s ease; }
.mc-poss-h { background:linear-gradient(90deg, #1aaa5e, #158f4f); color:#fff; }
.mc-poss-a { background:linear-gradient(90deg, #6e7380, #565b66); }

/* Collapsible category (Top stats / Shots / Passes / Defence / etc) */
.mc-stat-cat { border-bottom:1px solid var(--border); }
.mc-stat-cat > summary {
  list-style:none; padding:7px 10px; cursor:pointer;
  font-size:10px; font-weight:800; color:var(--text2);
  text-transform:uppercase; letter-spacing:.4px;
  display:flex; align-items:center; gap:6px; user-select:none;
}
.mc-stat-cat > summary::-webkit-details-marker { display:none; }
.mc-stat-cat > summary::before {
  content:'▶'; font-size:8px; color:var(--text3); margin-right:4px;
  transition:transform .15s ease;
}
.mc-stat-cat[open] > summary::before { transform:rotate(90deg); }
.mc-stat-cat > summary:hover { background:var(--bg3); color:var(--text); }
.mc-cat-cnt { margin-left:auto; background:var(--bg3); border:1px solid var(--border);
  padding:1px 6px; border-radius:8px; font-size:9px; color:var(--text3); }
.mc-stat-rows { padding:4px 8px 8px; }

/* One stat row inside a category */
.mc-stat-r { background:var(--bg3); border:1px solid var(--border); border-radius:3px;
  padding:3px 6px; }
.mc-stat-r + .mc-stat-r { margin-top:2px; }
.mc-stat-r-top { display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:6px; padding:0 0 3px; }
.mc-stat-h { text-align:left;  font-size:10px; font-weight:700;
  color:#3b82f6; font-variant-numeric:tabular-nums; }
.mc-stat-a { text-align:right; font-size:10px; font-weight:700;
  color:#ef4444; font-variant-numeric:tabular-nums; }
.mc-stat-l { text-align:center; font-size:8px; font-weight:600;
  color:var(--text2); text-transform:uppercase; letter-spacing:.2px;
  white-space:nowrap; }

/* The split comparison bar */
.mc-stat-bar { display:flex; height:4px; border-radius:2px; overflow:hidden;
  background:var(--bg2); }
.mc-bar-h { background:#3b82f6cc; transition:width .25s ease; border-radius:2px 0 0 2px; }
.mc-bar-a { background:#ef4444cc; transition:width .25s ease; border-radius:0 2px 2px 0; }
.mc-bar-h.hi { background:#3b82f6; }
.mc-bar-a.hi { background:#ef4444; }

/* 1st-half nested collapsible — sits inside a category */
.mc-stat-1h { margin:6px 0 0; border-top:1px dashed var(--border); padding-top:4px; }
.mc-stat-1h > summary {
  list-style:none; cursor:pointer; padding:3px 4px;
  font-size:9px; font-weight:600; color:var(--text3);
  text-transform:uppercase; letter-spacing:.3px; user-select:none;
}
.mc-stat-1h > summary::-webkit-details-marker { display:none; }
.mc-stat-1h > summary::before {
  content:'+'; margin-right:4px; color:var(--text3);
}
.mc-stat-1h[open] > summary::before { content:'−'; }
.mc-stat-1h > summary:hover { color:var(--text); }
.mc-stat-1h .mc-stat-rows { padding:2px 0 2px; }

/* H2H tab */
/* Match meta (Info tab) */
.mc-meta { padding:8px; display:flex; flex-direction:column; gap:4px; }
.mc-meta-row { display:grid; grid-template-columns:22px 100px 1fr;
  align-items:center; gap:6px; padding:5px 6px; background:var(--bg3);
  border:1px solid var(--border); border-radius:3px; font-size:11px; }
.mc-meta-ic  { font-size:13px; text-align:center; }
.mc-meta-lbl { color:var(--text3); font-size:9px; text-transform:uppercase;
  letter-spacing:.5px; font-weight:600; }
.mc-meta-val { color:var(--text); font-weight:600; word-break:break-word; }

.mc-h2h { padding:8px; }
.mc-h2h-summary { display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 4px 10px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.mc-h2h-pill { padding:6px 10px; border-radius:4px; font-size:14px; font-weight:800;
  color:#fff; min-width:38px; text-align:center; line-height:1; }
.mc-h2h-pill span { display:block; font-size:8px; opacity:.85; margin-top:2px;
  font-weight:600; letter-spacing:.4px; }
.mc-h2h-w { background:#1aaa5e; }
.mc-h2h-d { background:#6b7280; }
.mc-h2h-l { background:#dc2626; }
.mc-h2h-summary-lbl { font-size:9px; color:var(--text3); margin-left:8px;
  letter-spacing:.3px; }
.mc-h2h-list { display:flex; flex-direction:column; gap:3px; }
.mc-h2h-row { display:grid; grid-template-columns:60px 1fr 24px;
  align-items:center; gap:6px; padding:4px 6px; background:var(--bg3);
  border:1px solid var(--border); border-radius:3px; font-size:10px; }
.mc-h2h-date { color:var(--text3); font-size:9px; }
.mc-h2h-teams { color:var(--text); }
.mc-h2h-teams b { color:var(--gold); padding:0 2px; }
.mc-h2h-result { width:22px; height:18px; line-height:18px; text-align:center;
  border-radius:3px; font-size:10px; font-weight:800; color:#fff; }
.mc-h2h-r-w { background:#1aaa5e; }
.mc-h2h-r-d { background:#6b7280; }
.mc-h2h-r-l { background:#dc2626; }

/* Events tab */
.mc-events { padding:6px 8px; display:flex; flex-direction:column; gap:3px; }
.mc-event-row { display:grid; grid-template-columns:1fr 36px 1fr;
  align-items:center; gap:4px; padding:4px 6px; background:var(--bg3);
  border:1px solid var(--border); border-radius:3px; font-size:10px; }
.mc-ev-home { display:flex; align-items:center; gap:4px; }
.mc-ev-away { display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.mc-ev-mid  { display:flex; flex-direction:column; align-items:center; gap:1px; }
.mc-event-min { color:var(--gold); font-weight:700; font-size:10px; text-align:center; }
.mc-event-ic { font-size:13px; }
.mc-event-text { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-assist { display:block; color:var(--text3); font-size:9px; font-style:italic; }
.mc-period-sep { text-align:center; font-size:9px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.8px; padding:4px 0 2px;
  border-top:1px solid var(--border); margin-top:3px; }

/* ── Lineups (renders inside .slip-info-zone) ── */
.lu-wrap { padding:8px 10px 10px; font-size:11px; color:var(--text); }
.lu-hdr { font-size:11px; font-weight:800; text-align:center; padding:4px 0 8px;
  color:var(--gold); letter-spacing:.2px; }
.lu-cols { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.lu-loading, .lu-empty { padding:30px 14px; text-align:center;
  color:var(--text3); font-size:11px; line-height:1.5; }
.lu-empty-small { padding:14px 8px; text-align:center; color:var(--text3); font-size:10px; }
.lu-team {
  background:var(--bg3); border:1px solid var(--border); border-radius:4px;
  padding:6px 5px; min-width:0;
}
.lu-team-hdr {
  display:flex; align-items:center; justify-content:space-between;
  font-size:9px; font-weight:800; padding-bottom:3px; margin-bottom:3px;
  border-bottom:1px solid var(--border);
}
.lu-formation { color:var(--gold); }
.lu-rating { color:var(--text2); font-weight:700; }
.lu-coach { font-size:9px; color:var(--text3); margin-bottom:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lu-line { margin-bottom:5px; }
.lu-line-lbl {
  font-size:8px; font-weight:800; color:var(--text2);
  letter-spacing:.5px; margin-bottom:2px;
}
.lu-players { display:flex; flex-direction:column; gap:1px; }
.lu-p {
  display:flex; align-items:center; gap:3px;
  padding:2px 4px; border-radius:2px; font-size:10px;
  background:rgba(255,255,255,.02);
}
.lu-p:hover { background:rgba(255,255,255,.06); }
.lu-num {
  display:inline-block; min-width:18px; text-align:right; font-weight:800;
  color:var(--gold); font-variant-numeric:tabular-nums; font-size:9px;
}
.lu-name {
  flex:1; min-width:0; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; font-size:10px;
}
.lu-c { color:var(--gold); font-weight:800; font-size:9px; }
.lu-events { font-size:9px; line-height:1; }
.lu-pr {
  font-size:9px; font-weight:800; color:var(--text2);
  background:rgba(0,0,0,.3); padding:1px 4px; border-radius:2px;
  font-variant-numeric:tabular-nums;
}
.lu-sub-out, .lu-sub-in {
  font-size:8px; font-weight:700; padding:0 2px; border-radius:2px;
}
.lu-sub-out { color:#ef4444; }
.lu-sub-in  { color:#1aaa5e; }
.lu-subs, .lu-unav {
  margin-top:6px; font-size:9px; color:var(--text2);
}
.lu-subs summary, .lu-unav summary {
  cursor:pointer; padding:3px 4px; font-weight:700;
  background:var(--bg2); border-radius:2px; list-style:none;
}
.lu-subs summary::before, .lu-unav summary::before {
  content:'▸ '; font-size:9px;
}
.lu-subs[open] summary::before, .lu-unav[open] summary::before {
  content:'▾ ';
}
.lu-p-out .lu-name { color:var(--text3); }
.lu-reason { font-size:8px; color:#ef4444; white-space:nowrap; }
.slip-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border);
  font-size:12px; font-weight:700; white-space:nowrap;
}
.slip-cnt  { background:var(--gold); color:#fff; font-size:9px; font-weight:900;
  padding:1px 6px; border-radius:10px; margin-left:6px; }
.slip-close { background:none; border:none; color:var(--text2); font-size:15px; cursor:pointer; padding:2px 6px; }
.slip-close:hover { color:var(--text); }
.slip-type-lbl { margin-left:auto; margin-right:8px; font-size:10px; font-weight:800;
  padding:2px 9px; border-radius:10px; background:var(--bg3); color:var(--text2);
  border:1px solid var(--border); letter-spacing:.4px; text-transform:uppercase; }
.slip-type-lbl.is-acca { background:var(--gold); color:#fff; border-color:var(--gold); }
.slip-inner {
  /* Bet slip claims the remaining space of the slip-panel after the
     match-center widget (which sizes to its own content with a 55vh cap).
     If the slip itself overflows, it scrolls internally. */
  flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px;
}
.slip-empty { font-size:11px; color:var(--text3); text-align:center; padding:30px 0;
  line-height:1.6; }
.slip-sel {
  background:var(--bg3); border:1px solid var(--border); border-radius:4px;
  padding:6px 8px; margin-bottom:4px; position:relative;
}
.slip-match { font-size:9px; color:var(--text2); margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:calc(100% - 20px); padding-right:18px; }
.slip-pick  { font-size:11px; font-weight:700; color:var(--text); line-height:1.25; }
.slip-odds  { color:var(--gold); margin-left:6px; font-variant-numeric:tabular-nums; }
.slip-rm    { position:absolute; top:4px; right:4px; background:none; border:none;
  color:var(--text3); cursor:pointer; font-size:11px; padding:2px 4px; line-height:1; }
.slip-rm:hover { color:var(--red); }
/* Slip selection locked — match is suspended (HT/FT/SU/45s window). */
.slip-sel.locked  { border-color:var(--red); background:#2a1414; }
.slip-locked      { font-size:9px; font-weight:700; color:var(--red);
  margin-top:3px; letter-spacing:.2px; }
.slip-types { display:flex; gap:5px; margin-bottom:10px; }
.stype { flex:1; background:var(--bg3); border:1px solid var(--border); color:var(--text2);
  font-size:11px; font-weight:700; padding:7px; border-radius:4px; cursor:pointer; }
.stype.on { background:var(--gold); color:#fff; border-color:var(--gold); }
.stype:disabled { opacity:.4; cursor:not-allowed; }
/* Currency dropdown row in the bet slip — sits just above the stake input.
   All 3 currencies are always listed; the option label includes the
   user's balance so they can pick from the same view. */
.slip-ccy-row { display:flex; align-items:center; gap:8px; margin:12px 0 6px; }
.slip-ccy-row label { font-size:10px; color:var(--text2); white-space:nowrap;
  text-transform:uppercase; letter-spacing:.4px; }
.slip-ccy-row select {
  flex:1; background:var(--bg); border:1px solid var(--border); border-radius:4px;
  padding:6px 8px; color:var(--text); font-size:12px; font-weight:700; outline:none;
  cursor:pointer;
}
.slip-ccy-row select:focus { border-color:var(--gold); }

.slip-stake { display:flex; align-items:center; gap:8px; margin:6px 0; }
.slip-stake label { font-size:10px; color:var(--text2); white-space:nowrap; text-transform:uppercase; }
.slip-stake input {
  flex:1; background:var(--bg); border:1px solid var(--border); border-radius:4px;
  padding:7px 10px; color:var(--text); font-size:13px; font-weight:800; outline:none;
}
.slip-stake input:focus { border-color:var(--gold); }
.slip-ret   { font-size:11px; color:var(--text2); margin-bottom:12px; }
.slip-combo { font-size:12px; color:var(--text2); margin:4px 0 8px; padding:6px 8px;
              background:var(--bg3); border-radius:5px; border-left:3px solid var(--gold); }
.slip-combo strong { color:var(--gold); font-size:14px; }
.slip-combo-n { font-size:10px; color:var(--text3); margin-left:4px; }
.slip-place {
  width:100%; background:var(--gold); color:#fff; border:none; border-radius:6px;
  padding:11px; font-size:13px; font-weight:900; cursor:pointer; letter-spacing:.3px;
}
.slip-place:hover { background:var(--gold2); }

/* ── FAB (mobile slip) ── */
.slip-fab {
  display:none; position:fixed; bottom:20px; right:20px;
  background:var(--gold); color:#fff; border:none; border-radius:24px;
  padding:11px 22px; font-size:13px; font-weight:800; cursor:pointer;
  box-shadow:0 4px 20px rgba(26,170,94,.5); z-index:900;
}
/* Mobile responsive overrides — see full block at end of file */

/* ── Login overlay ── */
#login-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.85);
  z-index:10000; align-items:center; justify-content:center;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px;
  /* Keep content near top on mobile so keyboard doesn't hide the button */
  align-items:flex-start;
  padding-top:clamp(12px, 8vh, 60px);
}
.login-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:36px; width:340px; max-width:100%; box-shadow:0 24px 64px rgba(0,0,0,.7);
  /* Center horizontally even when align-items is flex-start */
  margin:0 auto;
}
.login-card h2 { font-size:22px; color:var(--gold); margin-bottom:4px; }
.login-card p  { font-size:12px; color:var(--text2); margin-bottom:20px; }
.lf { margin-bottom:14px; }
.lf label { display:block; font-size:10px; color:var(--text2); margin-bottom:5px; text-transform:uppercase; letter-spacing:.5px; }
.lf input {
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:6px;
  padding:10px 13px; color:var(--text); font-size:16px; outline:none;
  /* font-size:16px prevents iOS auto-zoom on focus */
  box-sizing:border-box;
}
.lf input:focus { border-color:var(--gold); }
#l-err { color:var(--red); font-size:12px; min-height:16px; margin-bottom:10px; }
.login-btn {
  width:100%; background:var(--gold); color:#fff; border:none; border-radius:6px;
  padding:13px; font-size:15px; font-weight:900; cursor:pointer; touch-action:manipulation;
  /* Larger tap target */
  min-height:48px;
}
.login-btn:active { background:var(--gold2); }

/* ── Toast ── */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#fff; padding:11px 24px; border-radius:8px;
  font-size:13px; font-weight:600; z-index:2000; display:none;
  max-width:400px; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.toast.err { background:var(--red); }

/* ── My Bets section ── */
/* Full width: gives ticket cards horizontal room AND lets the per-ticket
   row stay short so more tickets fit on screen at once. Card density is
   tuned via .mb-card padding below, not by squeezing the container. */
#bets-section { padding:18px 24px; width:100%; margin:0; }
.bet-row { padding:12px 0; border-bottom:1px solid var(--border); font-size:12px; }
.bet-status { display:inline-block; padding:2px 9px; border-radius:10px; font-size:10px; font-weight:700; }
.bet-status.open  { background:#1d2030; color:var(--teal); }
.bet-status.won   { background:rgba(26,170,94,.15); color:#1aaa5e; }
.bet-status.lost  { background:#450a0a; color:#f87171; }
.bet-status.void  { background:var(--bg3); color:var(--text2); }

/* ── Event detail expansion panel ── */
.cm-click { cursor:pointer; }
.cm-click:hover .mc-teams { color:var(--gold); }
.mrow.expanded .cm-click { background:rgba(26,170,94,.06); border-left:2px solid var(--gold); }

.detail-row td { padding:0; background:var(--bg2); }
.detail-loading { padding:16px; text-align:center; color:var(--text2); font-size:12px; }
.detail-error   { padding:16px; text-align:center; color:var(--red);   font-size:12px; }

.detail-panel {
  border-top:1px solid var(--gold);
  border-bottom:2px solid var(--border);
  background:var(--bg2);
  padding:14px 16px;
}
.detail-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.detail-teams {
  font-size:13px; font-weight:700; color:var(--text);
}
.detail-teams .vs { color:var(--text3); font-weight:400; margin:0 6px; }
.detail-close {
  background:none; border:1px solid var(--border); border-radius:4px;
  color:var(--text2); font-size:12px; padding:3px 9px; cursor:pointer;
}
.detail-close:hover { border-color:var(--red); color:var(--red); }

.detail-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:10px;
}
.detail-mkt {
  background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:10px;
}
.detail-mkt-title {
  font-size:10px; font-weight:700; color:var(--text2);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px;
}
.detail-mkt-odds {
  display:flex; flex-wrap:wrap; gap:5px;
}
.detail-odds {
  flex:1; min-width:48px; padding:6px 8px !important;
  font-size:12px !important; text-align:center;
}
.detail-odds .odds-lbl {
  display:block; font-size:9px; color:var(--text2); margin-bottom:2px;
  font-weight:600; text-transform:uppercase;
}
.detail-odds .odds-val {
  display:block; font-size:13px; font-weight:800; color:var(--text);
}
.detail-odds.susp {
  background:var(--bg) !important; color:var(--text3) !important; cursor:not-allowed;
}

/* ═════════════════════════════════════════════════════════════════════════
   MOZZART-STYLE LIST + DETAIL LAYOUT
   ═════════════════════════════════════════════════════════════════════════ */

/* Two-column main: left = match list, right = detail panel.
   Bet slip lives in its own panel to the right of detail (see .slip-panel
   below — defaults to open at 340px on the live page). */
.content-split { display:flex; gap:0; min-width:0; }
.match-list-col {
  width:300px; flex-shrink:0;
  background: #13151b;
  border-right:none;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.03);
  display:flex; flex-direction:column;
  height:calc(100vh - 52px);
}

/* ── Drag-to-resize handles ─────────────────────────────────── */
.resize-handle {
  width:6px; flex-shrink:0; cursor:col-resize; position:relative; z-index:20;
  background:transparent;
}
.resize-handle::after {
  content:''; position:absolute; inset:0; left:2px; width:2px;
  background:transparent; transition:background .2s;
}
.resize-handle:hover::after,
.resize-handle.dragging::after { background:var(--teal); }
.detail-col {
  flex:1; min-width:0; overflow-y:auto;
  background:var(--bg);
  height:calc(100vh - 52px);
}

/* Match-list header (above tabs) */
.match-list-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px;
  background: #13151b;
  border-bottom:1px solid #21242e;
  box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.ml-title { font-size:13px; font-weight:800; color:var(--text); letter-spacing:.3px; }
.ml-cnt   { background:var(--gold); color:#fff; font-size:11px; font-weight:800;
  padding:2px 8px; border-radius:10px; }

/* League filter chips */
.match-list-tabs {
  display:flex; gap:4px; padding:8px 10px;
  background: #13151b;
  border-bottom:1px solid #21242e;
  box-shadow: 0 1px 6px rgba(0,0,0,.35), inset 0 -1px 0 rgba(0,0,0,.2);
  overflow-x:auto;
}
.match-list-tabs::-webkit-scrollbar { height:0; }
.ml-tab {
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
  font-size:10px; font-weight:700; padding:5px 10px; border-radius:12px;
  cursor:pointer; white-space:nowrap;
}
.ml-tab:hover { color:var(--text); border-color:var(--teal); }
.ml-tab.on    { background:var(--gold); color:#fff; border-color:var(--gold); }

/* Scrollable list itself */
.match-list { flex:1; overflow-y:auto; }
.match-list::-webkit-scrollbar { width:6px; }
.match-list::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

/* Section header (LIVE / UPCOMING) */
.ml-section {
  background: #0f1116;
  padding:6px 10px; font-size:10px; font-weight:800;
  color:var(--text2); text-transform:uppercase; letter-spacing:.8px;
  position:sticky; top:0; z-index:5;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.ml-section.live { color:var(--live); border-top:2px solid var(--live); }
.ml-section.fav  { color:#f59e0b; border-top:2px solid #f59e0b; background:rgba(245,158,11,.06); }
.ml-section .dot {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--live); margin-right:6px; vertical-align:middle;
  animation:pulseDot 1.4s ease-in-out infinite;
}

/* League sub-header inside the list — mirrors .ml-row grid so 1 X 2 labels align */
.ml-league {
  display:grid;
  grid-template-columns: 38px 1fr 112px 22px 22px;
  align-items:center; gap:5px;
  background: #13151b;
  color:var(--text2);
  padding:4px 9px; letter-spacing:.3px;
  border-bottom:1px solid #21242e;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25), inset 1px 0 0 rgba(255,255,255,.02);
}
.ml-lg-name {
  grid-column: 1 / 3;   /* spans time + teams columns */
  font-size:9px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ml-lg-hdr {
  display:flex; gap:3px;
}
.ml-lg-hdr span {
  flex:1; text-align:center;
  font-size:9px; font-weight:900; color:var(--text3);
  letter-spacing:.2px;
}

/* Single match row — tightened for 280px sidebar.
   The 4th column (was the 1+ markets badge) is gone — that 32px went
   back into the team-names column for fewer truncations. */
.ml-row {
  display:grid;
  grid-template-columns: 38px 1fr 112px 22px 22px;
  align-items:center; gap:5px;
  padding:7px 9px; cursor:pointer;
  background: #161820;
  border-bottom:1px solid #1e212a;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
  transition:background .12s, border-color .12s;
}
.ml-mkts { display:none; }

/* ── Inline 1X2 odds buttons ── */
.ml-odds { display:flex; gap:3px; align-items:stretch; }
.ml-odd {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; background:var(--card); border:1px solid var(--border);
  border-radius:3px; padding:3px 2px; cursor:pointer; min-width:0;
  transition:background .1s, border-color .1s;
}
.ml-odd:hover:not(:disabled) { background:#2c3040; border-color:var(--teal); }
.ml-odd.sel  { background:var(--gold); border-color:var(--gold); color:#fff; }
.ml-odd.susp { opacity:.4; cursor:not-allowed; }
.ml-odd-lbl { font-size:9px; font-weight:900; color:var(--text3); line-height:1; }
.ml-odd-dec { font-size:10px; font-weight:800; color:var(--teal); line-height:1.3;
  font-variant-numeric:tabular-nums; }
.ml-odd.sel .ml-odd-lbl,
.ml-odd.sel .ml-odd-dec { color:#fff; }
.ml-row:hover { background:rgba(255,255,255,.04); }
.ml-row.on    { background:rgba(26,170,94,.08); border-left:3px solid var(--gold);
  padding-left:6px; }
.ml-row.susp  { background:rgba(239,68,68,.08); }

.ml-time-cell { font-variant-numeric:tabular-nums; font-size:10px; font-weight:800; }
.ml-time      { color:var(--live); }
.ml-time.stopped { color:var(--text3); }
.ml-ko        { color:var(--text2); font-weight:700; }
.ml-ht        { color:var(--gold); font-weight:900;
  background:rgba(26,170,94,.1); padding:1px 5px; border-radius:3px; }
.ml-ft        { color:var(--text3); font-weight:800; }
.ml-susp      { color:#fff; background:var(--red); padding:1px 5px; border-radius:3px;
  font-weight:900; font-size:9px; animation:pulseSusp 1s ease-in-out infinite; }

.ml-teams { min-width:0; }
.ml-team  {
  font-size:10px; font-weight:600; color:var(--text); line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ml-team.lead { color:var(--gold); }

.ml-score { display:flex; flex-direction:column; align-items:flex-end; gap:0; }
.ml-s     { font-size:12px; font-weight:900; color:var(--text);
  font-variant-numeric:tabular-nums; line-height:1.35; }
.ml-s.lead { color:var(--gold); }

.ml-fav {
  background:none; border:none; cursor:pointer;
  font-size:14px; line-height:1; padding:2px;
  color:var(--text3); transition:color .15s, transform .15s;
  display:flex; align-items:center; justify-content:center;
}
.ml-fav:hover { color:#f59e0b; transform:scale(1.2); }
.ml-fav.on    { color:#f59e0b; }
.ml-s.placeholder { color:var(--text3); font-weight:600; }

.ml-mkts {
  font-size:9px; font-weight:800; color:var(--teal);
  background:#1d2030; padding:2px 4px; border-radius:3px;
  text-align:center; border:1px solid var(--border2);
}

/* ═════════ DETAIL PANEL (right column) ═════════ */
.detail-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; padding:40px 20px; color:var(--text2); gap:12px;
}
.detail-empty .ico { font-size:60px; opacity:.15; }

.detail-panel { padding:0; }

.detail-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; background:var(--bg2);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
}
.d-hdr-left  { display:flex; align-items:center; gap:14px; }
.d-hdr-right { display:flex; align-items:center; gap:12px; }
.d-time {
  font-size:14px; font-weight:900; color:var(--live); font-variant-numeric:tabular-nums;
  background:rgba(239,68,68,.12); padding:4px 10px; border-radius:4px;
}
.d-time.stopped { color:var(--text3); background:transparent; border:1px solid var(--border); }
.d-time.ht { color:var(--gold); background:rgba(26,170,94,.12); }
.d-time.ft { color:var(--text3); background:transparent; border:1px solid var(--border); }
.detail-teams { font-size:16px; font-weight:800; color:var(--text);
  display:flex; align-items:center; gap:10px; }
.detail-teams .vs { color:var(--text3); font-size:11px; font-weight:600;
  text-transform:uppercase; }
.d-score {
  font-size:18px; font-weight:900; color:var(--gold);
  font-variant-numeric:tabular-nums; letter-spacing:1px;
  background:var(--bg3); padding:4px 12px; border-radius:4px;
}
.d-mktcnt { font-size:11px; color:var(--text3); }
.detail-close {
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
  font-size:11px; font-weight:700; padding:6px 12px; border-radius:4px;
  cursor:pointer;
}
.detail-close:hover { background:var(--red); color:#fff; border-color:var(--red); }

.d-banner.susp {
  background:#3d1a1a; color:#fff; padding:10px 16px;
  font-size:12px; font-weight:800; letter-spacing:.3px; text-align:center;
  border-bottom:1px solid var(--red);
}

/* Market list — stacked full-width rows. Each market has a title above
   a row of equal-width selection buttons. Designed to leave the top of
   the page free for the in-play info panel (corners/cards/possession). */
.detail-grid {
  display:flex; flex-direction:column;
  gap:0; padding:6px 8px;
}
.d-card {
  background:transparent; border:0; border-radius:0;
  padding:0; margin-bottom:6px;
}
.d-card.susp { opacity:.5; }
.d-card-title {
  font-size:10px; font-weight:700; color:var(--text); letter-spacing:.2px;
  text-transform:none; margin:0 0 3px 2px; padding:0;
  border-bottom:0;
}
/* Collapsible variant — clickable title row with chevron + count badge */
.d-card-title.d-collapsible {
  cursor:pointer; display:flex; align-items:center; gap:5px;
  padding:3px 4px; margin:0 0 3px;
  border-radius:3px; user-select:none;
  transition:background .12s;
}
.d-card-title.d-collapsible:hover { background:rgba(255,255,255,.04); }
.d-chev {
  display:inline-block; width:10px; font-size:9px; color:var(--text3);
  transition:transform .12s;
  font-variant:tabular-nums;
}
.d-card-count {
  margin-left:auto; background:var(--bg3); border:1px solid var(--border);
  padding:1px 6px; border-radius:8px; font-size:9px; font-weight:700;
  color:var(--text3);
}
.d-card.d-collapsed .d-card-count { color:var(--gold); border-color:var(--gold); }
.d-card-odds {
  display:flex; flex-direction:row; flex-wrap:wrap;   /* wrap when overcrowded */
  gap:2px; width:100%;
}
.d-odd {
  /* Buttons grow to fill the row but won't shrink below 120px so
     longer labels stay readable. Dense markets — Match Corners (13
     selections), Final Score (20+), 3-Way Handicap (15) — now wrap
     onto 2-3 rows automatically because 13×120=1560px exceeds the
     ~1100px markets column. Standard markets (1X2, O/U, BTTS, DC) with
     2-3 selections stay on a single row at full width.
     min-height keeps a row of one-line buttons aligned with two-line
     wrapping ones (HT/FT combos), so the grid stays tidy. */
  flex:1 1 120px; min-width:120px; min-height:34px;
  display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  background:var(--bg3); border:1px solid var(--border); border-radius:2px;
  padding:5px 7px; cursor:pointer; gap:4px;
  position:relative;
  transition:background .12s, border-color .12s;
}
.d-odd:hover { background:#2c3040; border-color:var(--teal); }
.d-odd .lbl  {
  font-size:10px; color:var(--text2); font-weight:600;
  /* Allow labels to wrap to 2 lines for long combos like
     "Floreat Athena - Floreat Athena" (HT/FT) or
     "Goal Before (50:00)". Single-line labels (most markets) still
     render on one line — flex item picks up the natural height. */
  white-space:normal; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  line-clamp:2;
  word-break:break-word;
  flex:1; min-width:0; text-align:left; line-height:1.15;
}
.d-odd .val  {
  font-size:11px; color:var(--gold); font-weight:800;
  font-variant-numeric:tabular-nums; line-height:1.15; flex-shrink:0;
}
.d-odd:hover .val { color:#fff; }
.d-odd:hover .lbl { color:var(--text); }
.d-odd.susp  { opacity:.5; cursor:not-allowed; background:var(--bg3); }
.d-odd.susp .val { color:var(--text3); font-size:10px; }
/* Reserved zone for an odds-movement indicator strip later (red/green
   thin bar at the bottom of the button). Hidden until we wire it up. */
.d-odd::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:transparent; pointer-events:none;
}

.detail-loading, .detail-error {
  padding:40px 20px; text-align:center; color:var(--text2);
  font-size:13px;
}
.detail-error { color:var(--red); }

/* Responsive layout — handled in the comprehensive mobile block at end of file */

/* Yellow dot when TU is stale (>90s) — BetsAPI scrape lag indicator. */
.ml-time.stale { color:#f0b429; }

/* ═════════════════════════════════════════════════════════════════════════
   SPORTSBOOK PREMATCH VIEW (default landing)
   ═════════════════════════════════════════════════════════════════════════ */

/* Day filter tabs at the top of the left column */
.sb-day-tabs { display:flex; gap:6px; padding:4px; }
.sb-day {
  flex:1; background:transparent; border:1px solid var(--border); color:var(--text2);
  font-size:11px; font-weight:700; padding:7px 10px; border-radius:14px;
  cursor:pointer;
}
.sb-day:hover { color:var(--text); }
.sb-day.on    { background:transparent; color:var(--green); border-color:var(--green); }

/* Sport list (Football active, others greyed) */
.sb-sports {
  display:flex; flex-direction:column;
  border-bottom:1px solid var(--border);
}
.sb-sport {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; font-size:12px; font-weight:700; color:var(--text2);
  border-left:3px solid transparent; cursor:pointer;
}
.sb-sport:hover { color:var(--text); background:rgba(255,255,255,.04); }
.sb-sport.on   { color:var(--green); border-left-color:var(--green);
  background:rgba(26,170,94,.06); }
.sb-sport.disabled { opacity:.4; cursor:not-allowed; }
.sb-sport-icon { font-size:14px; margin-right:8px; }
.sb-sport-cnt {
  background:rgba(26,170,94,.12); color:var(--green); font-size:11px; font-weight:800;
  padding:2px 9px; border-radius:11px; min-width:30px; text-align:center;
}
.sb-sport.disabled .sb-sport-cnt { background:var(--bg3); color:var(--text3); }

/* FEATURED header */
.sb-featured-hdr {
  padding:10px 14px 6px; font-size:11px; font-weight:800;
  color:var(--gold); letter-spacing:.5px;
}

/* Country list */
.sb-countries { flex:1; overflow-y:auto; }
.sb-countries::-webkit-scrollbar { width:6px; }
.sb-countries::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

.sb-country { border-bottom:1px solid var(--border2); }

.sb-c-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; cursor:pointer; user-select:none;
}
.sb-c-row:hover { background:rgba(255,255,255,.04); }
.sb-c-row.on    { background:rgba(26,170,94,.06); }
.sb-c-arrow { color:var(--text3); width:10px; text-align:center; font-size:11px; }
.sb-c-flag  { font-size:16px; }
.sb-c-name  { flex:1; font-size:12px; font-weight:700; color:var(--text); }
.sb-c-live  { background:var(--red); color:#fff; font-size:9px; font-weight:900;
  padding:1px 6px; border-radius:3px; min-width:18px; text-align:center;
  animation:pulseSusp 1.5s ease-in-out infinite; }
.sb-c-cnt   { background:var(--bg3); color:var(--text2); font-size:10px; font-weight:800;
  padding:2px 8px; border-radius:10px; min-width:26px; text-align:center; }
.sb-c-fav   { background:none; border:none; cursor:pointer; font-size:14px; line-height:1;
  padding:2px 0 2px 4px; color:var(--text3); transition:color .15s, transform .15s;
  flex-shrink:0; }
.sb-c-fav:hover { color:#f59e0b; transform:scale(1.2); }
.sb-c-fav.on    { color:#f59e0b; }

/* League list when a country is expanded */
.sb-c-leagues { background:#0f1116; padding:4px 0 4px 36px; }
.sb-lg {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 14px 6px 0; font-size:11px; color:var(--text2); cursor:pointer;
  border-radius:3px;
}
.sb-lg:hover { color:var(--text); }
.sb-lg.on { color:var(--gold); font-weight:700; }
.sb-lg-name { flex:1; }
.sb-lg-cnt  { color:var(--text3); font-size:10px; font-weight:700; }

/* Right pane: league match list */
.sb-match-list { padding:8px 14px 20px; }
.sb-match {
  display:grid; grid-template-columns:60px 1fr 200px;
  align-items:center; gap:10px;
  padding:10px 12px; cursor:pointer;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:6px; margin-bottom:6px;
  transition:border-color .12s, background .12s;
}
.sb-match:hover { border-color:var(--teal); }
.sb-m-time {
  font-size:11px; font-weight:800; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.sb-m-teams { min-width:0; }
.sb-m-team  { font-size:13px; font-weight:600; color:var(--text); line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-m-odds  { display:grid; grid-template-columns:repeat(3, 60px); gap:4px; }
.sb-odd     {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--bg3); border:1px solid var(--border); border-radius:4px;
  padding:4px 6px; cursor:pointer; min-height:40px;
  font-size:10px; color:var(--text2); font-weight:700;
}
.sb-odd:hover { background:#2c3040; border-color:var(--teal); color:#fff; }
.sb-odd span { color:var(--text); font-size:13px; font-weight:800;
  font-variant-numeric:tabular-nums; }
.sb-odd.ph    { opacity:.45; cursor:default; }
.sb-odd.ph span { color:var(--text3); }

/* Three-mode header buttons */
.hnav.hlive { color:var(--red) !important; }

/* ═════════════════════════════════════════════════════════════════════════
   MY BETS — tabs + date filter + per-ticket cards + pagination
   ═════════════════════════════════════════════════════════════════════════ */
.mb-wrap   { width:100%; max-width:none; margin:0; padding:18px 32px 40px; }
.mb-hdr    { display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; }
.mb-title  { font-size:22px; font-weight:900; color:var(--text);
  letter-spacing:.3px; }
.mb-back   { background:var(--bg3) !important; color:var(--text2) !important;
  border:1px solid var(--border) !important; }

.mb-tabs   { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.mb-tab    {
  background:transparent; border:1px solid var(--border); color:var(--text2);
  font-size:12px; font-weight:700; padding:7px 14px; border-radius:14px;
  cursor:pointer;
}
.mb-tab:hover { color:var(--text); }
.mb-tab.on    { background:var(--gold); color:#fff; border-color:var(--gold); }

.mb-filters {
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px; padding:10px 14px;
  background:var(--bg2);
  border:1px solid var(--border); border-radius:8px; font-size:12px;
  color:var(--text2);
}
.mb-filters select, .mb-filters input[type=date] {
  background:var(--bg3); border:1px solid var(--border); color:var(--text);
  padding:6px 12px; border-radius:5px; font-size:12px;
}
.mb-tot { margin-left:auto; font-size:11px; color:var(--text3);
  background:var(--bg3); padding:5px 10px; border-radius:12px;
  border:1px solid var(--border); }

.mb-list { display:flex; flex-direction:column; gap:5px; }

/* Denser card: smaller padding + smaller font so 2x more tickets fit
   per viewport without losing legibility. Hover still bumps the border. */
.mb-card {
  background:var(--bg2);
  border:1px solid var(--border); border-radius:6px;
  padding:8px 12px;
  transition:border-color .15s, transform .15s;
}
.mb-card:hover {
  border-color:var(--border2);
}
.mb-card-top {
  display:flex; align-items:center; gap:8px; margin-bottom:5px;
  padding-bottom:5px; border-bottom:1px solid var(--border2);
}
.mb-id   { font-size:12px; font-weight:800; color:var(--text); }
.mb-type { font-size:9px; color:var(--text3); font-weight:700;
  letter-spacing:.4px; }
.mb-status { margin-left:auto; font-size:9px; font-weight:900;
  padding:2px 8px; border-radius:8px; letter-spacing:.3px; text-transform:uppercase; }
.mb-status.mb-open       { background:rgba(26,170,94,.15); color:var(--gold); }
.mb-status.mb-won        { background:rgba(26,170,94,.15);  color:var(--green); }
.mb-status.mb-lost       { background:rgba(239,68,68,.15);  color:var(--red); }
.mb-status.mb-cashed_out { background:rgba(59,130,246,.15); color:var(--teal); }
.mb-status.mb-void       { background:rgba(148,163,184,.15);color:var(--text2); }

.mb-sels  { display:flex; flex-direction:column; gap:3px; margin-bottom:5px; }
.mb-sel   {
  padding:4px 8px; border-left:2px solid var(--border);
  background:var(--bg3); border-radius:0 3px 3px 0;
}
.mb-sel.mb-sel-win  { border-left-color:var(--green); }
.mb-sel.mb-sel-lose { border-left-color:var(--red);   opacity:.65; }
.mb-sel.mb-sel-void { border-left-color:var(--text3); opacity:.65; }
.mb-sel-event { font-size:10px; color:var(--text2); margin-bottom:1px; }
.mb-sel-pick  { display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:11px; }
.mb-sel-mkt   { color:var(--text3); }
.mb-sel-name  { color:var(--text); font-weight:700; }
.mb-sel-odds  { color:var(--gold); font-weight:800; }

.mb-card-foot {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:10px; color:var(--text2); padding-top:0;
}
.mb-money     { font-size:10px; color:var(--text2); }
.mb-money b   { color:var(--text); }
.mb-payout b  { color:var(--gold); }
.mb-rebate    { color:var(--green) !important; }
.mb-time      { margin-left:auto; color:var(--text3); font-size:10px; }

.mb-pager     { display:flex; align-items:center; justify-content:center;
  gap:14px; margin-top:18px; }
.mb-pg-btn    { background:var(--bg3); border:1px solid var(--border);
  color:var(--text); font-size:12px; font-weight:700; padding:7px 14px;
  border-radius:4px; cursor:pointer; }
.mb-pg-btn:hover:not(:disabled) { background:var(--card); }
.mb-pg-btn:disabled { opacity:.4; cursor:not-allowed; }
.mb-pg-info   { font-size:12px; color:var(--text2); }

/* Stale-odds row in the slip — old → new + Accept button. */
.slip-sel.stale     { border-color:#f0b429; background:#2a230d; }
.slip-stale {
  display:flex; align-items:center; gap:6px;
  margin-top:4px; padding:4px 6px; border-radius:3px;
  background:rgba(26,170,94,.12);
  font-size:10px; font-weight:700;
}
.slip-stale.up      { color:var(--green); background:rgba(26,170,94,.10); }
.slip-stale.down    { color:var(--red);   background:rgba(239,68,68,.10); }
.slip-stale b       { font-variant-numeric:tabular-nums; }
.slip-accept {
  margin-left:auto; background:var(--gold); color:#fff;
  border:none; padding:4px 10px; border-radius:3px;
  font-size:11px; font-weight:800; cursor:pointer;
}
.slip-accept:hover  { background:var(--gold2); }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR
   Hidden on desktop; appears on ≤860px, replaces the FAB as slip entry point.
   ═══════════════════════════════════════════════════════════════════════════ */
.mob-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 850;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 20px rgba(0,0,0,.7);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mob-nav-row {
  display: flex; height: 54px; align-items: stretch;
}
.mob-nav-tab {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text3);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color .12s, background .12s;
  padding: 6px 4px 4px;
}
.mob-nav-tab:active { background: rgba(255,255,255,.05); }
.mob-nav-tab.on { color: var(--gold); }
.mob-nav-tab.on .mnav-ic { transform: translateY(-1px); }
.mnav-ic {
  font-size: 20px; line-height: 1;
  display: block; transition: transform .12s;
}
.mnav-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .2px;
  white-space: nowrap;
}
/* Gold underline for active tab */
.mob-nav-tab.on::before {
  content: ''; position: absolute; top: 0; left: 25%; right: 25%;
  height: 2px; background: var(--gold); border-radius: 0 0 2px 2px;
}
/* Slip count badge */
.mnav-slip-wrap { position: relative; display: inline-block; }
.mnav-cnt {
  display: none;
  position: absolute; top: -5px; right: -10px;
  min-width: 17px; height: 17px; line-height: 17px;
  background: var(--live); color: #fff;
  font-size: 9px; font-weight: 900; border-radius: 9px;
  text-align: center; padding: 0 3px;
}
/* Live pulsing dot on Live tab icon */
.mnav-live-ic { position: relative; }
.mnav-live-ic::after {
  content: ''; position: absolute; top: 0px; right: -3px;
  width: 7px; height: 7px;
  background: var(--live); border-radius: 50%;
  animation: livepulse 1.2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE  — Android & iOS
   Tiers: tablet-landscape ≤1024, bottom-nav ≤860, stacked ≤768, phone ≤480
   ═══════════════════════════════════════════════════════════════════════════ */

/* Android Chrome / iOS Safari theme colour */
/* (set via <meta name="theme-color"> in HTML) */

/* ── Mobile backdrop overlay (shown when slip is open on phones) ─────── */
.mob-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:840; touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.mob-backdrop.on { display:block; }

/* ── Tablet landscape (≤1024px): tighten fixed-width panels ─────────── */
@media (max-width:1024px) {
  .sidebar        { display:none !important; }
  .match-list-col { width:260px !important; }
  .slip-panel     { width:300px; }
}

/* ── Below 860px: bottom nav + slip as bottom sheet ─────────────────── */
@media (max-width:860px) {
  .resize-handle { display:none; }
  /* Show the mobile bottom nav */
  .mob-nav { display:block; }

  /* FAB is replaced by the bottom nav's Slip tab */
  .slip-fab { display:none !important; }

  /* Push app content up so nothing sits behind the nav bar */
  #app-body { padding-bottom:calc(54px + env(safe-area-inset-bottom, 0px)); }

  /* Desktop "Slip" header button hidden — bottom nav handles it */
  #slip-toggle-btn { display:none !important; }

  /* Bottom-sheet slip panel */
  .slip-panel {
    display:flex !important;
    position:fixed !important;
    bottom:0 !important; left:0 !important; right:0 !important;
    top:auto !important;
    width:100% !important;
    max-height:88vh !important;
    height:auto !important;
    border-radius:20px 20px 0 0;
    border:none !important;
    border-top:2px solid var(--border) !important;
    box-shadow:0 -12px 48px rgba(0,0,0,.85);
    z-index:900;
    transform:translateY(110%);
    transition:transform .32s cubic-bezier(0.32,0.72,0,1);
    overflow-y:auto;
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 8px);
  }
  /* Drag handle bar */
  .slip-panel::before {
    content:''; display:block; flex-shrink:0;
    width:40px; height:4px; margin:12px auto 4px;
    background:var(--border); border-radius:3px;
  }
  /* Open state — slide up */
  .slip-panel:not(.collapsed) { transform:translateY(0); }
  /* Collapsed */
  .slip-panel.collapsed { width:100% !important; transform:translateY(110%); }

  /* Limit info zone inside bottom sheet */
  .slip-info-zone { flex:0 0 14vh !important; height:14vh !important; max-height:14vh !important; }
}

/* ── Tablet portrait (≤768px): stack columns + headerless mobile ────── */
@media (max-width:768px) {
  /* Header completely hidden — bottom nav is the only navigation on mobile */
  .hdr { display:none !important; }
  /* Hide header auth panel items (already hidden by .hdr, but keep as safety) */
  .auth-bal.off { display:none; }
  .auth-btn { padding:6px 12px; font-size:11px; }

  /* ── Mobile account section ── */
  .mob-acct-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:12px; padding:20px 18px; margin-bottom:14px;
  }
  .mob-acct-name {
    font-size:18px; font-weight:800; color:var(--text);
    margin-bottom:14px;
  }
  .mob-acct-balances {
    display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;
  }
  .mob-acct-bal {
    flex:1; min-width:80px; text-align:center;
    background:var(--bg2); border:1px solid var(--border);
    border-radius:8px; padding:10px 8px;
    font-size:13px; color:var(--text2);
  }
  .mob-acct-bal.on {
    background:rgba(var(--gold-rgb,212,175,55),.12);
    border-color:var(--gold); color:var(--gold); font-weight:700;
  }
  .mob-acct-bal-label { font-size:10px; color:var(--text3); margin-bottom:2px; }
  .mob-acct-bal-amt   { font-size:15px; font-weight:700; }
  .mob-acct-actions { display:flex; gap:10px; margin-top:14px; }
  .mob-acct-actions .auth-btn { flex:1; text-align:center; min-height:44px; font-size:13px; }

  /* Finance widget inside mobile account card */
  .mob-finance-zone { margin-bottom:16px; }
  .mob-fin-title {
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--text3); margin-bottom:8px;
  }
  .mob-fin-row {
    display:flex; align-items:center; gap:8px;
    padding:7px 0; border-bottom:1px solid var(--border);
  }
  .mob-fin-row:last-child { border-bottom:none; }
  .mob-fin-ccy {
    width:30px; flex-shrink:0;
    font-size:11px; font-weight:700; color:var(--text2); text-align:center;
  }
  .mob-fin-bars { flex:1; display:flex; flex-direction:column; gap:5px; }
  .mob-fin-bar-wrap { display:flex; align-items:center; gap:5px; }
  .mob-fin-bar-label {
    width:36px; font-size:10px; font-weight:600; flex-shrink:0;
  }
  .mob-fin-bar-label.dep  { color:#60a5fa; }
  .mob-fin-bar-label.won  { color:#1aaa5e; }
  .mob-fin-bar-label.lost { color:#ef4444; }
  .mob-fin-bar-track {
    flex:1; height:10px; border-radius:5px;
    background:var(--bg3); overflow:hidden;
  }
  .mob-fin-bar {
    height:100%; border-radius:5px;
    transition:width .4s ease;
  }
  .mob-fin-bar.dep  { background:#60a5fa; }
  .mob-fin-bar.won  { background:#1aaa5e; }
  .mob-fin-bar.lost { background:#ef4444; }
  .mob-fin-bar-val {
    font-size:11px; font-weight:700; white-space:nowrap; min-width:52px; text-align:right;
  }
  .mob-fin-bar-val.dep  { color:#60a5fa; }
  .mob-fin-bar-val.won  { color:#1aaa5e; }
  .mob-fin-bar-val.lost { color:#ef4444; }
  .mob-fin-tkts {
    flex-shrink:0; font-size:10px; color:var(--text3);
    text-align:right; min-width:24px;
  }
  .mob-fin-bal {
    flex-shrink:0; text-align:right; min-width:56px;
  }
  .mob-fin-bal-lbl { font-size:9px; color:var(--text3); }
  .mob-fin-bal-amt { font-size:12px; font-weight:700; color:var(--text); }

  /* Sport chips bar hidden — header is gone so there's nothing to hang it below */
  .mob-sport-bar { display:none !important; }

  /* Sports list → thin horizontal chip bar on mobile */
  .sb-sports {
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:5px 8px;
    gap:5px;
    border-bottom:1px solid var(--border);
  }
  .sb-sports::-webkit-scrollbar { height:0; }
  .sb-sport {
    flex-shrink:0;
    border-left:none !important;
    border-radius:14px;
    border:1px solid var(--border);
    padding:4px 11px;
    font-size:11px;
    justify-content:center;
  }
  .sb-sport.on {
    background:rgba(26,170,94,.15) !important;
    border-color:var(--green) !important;
    color:var(--green) !important;
  }
  .sb-sport-icon { font-size:13px; margin-right:4px; }
  /* Hide count badge — not useful in compact chip row */
  .sb-sport-cnt { display:none; }

  /* No top padding needed — header is hidden */
  #app-body { padding-top:0 !important; }

  /* No horizontal scroll anywhere on mobile */
  html { overflow-x:hidden; max-width:100vw; }
  body { overflow-x:hidden; }
  #app-body, .content, .content-split,
  .match-list-col, .detail-col, .detail-panel { overflow-x:hidden !important; }

  /* Full-screen one-panel navigation: full viewport minus bottom nav only */
  .content-split {
    flex-direction:column !important;
    height:calc(100vh - 54px) !important;
    height:calc(100dvh - 54px) !important;
    overflow:hidden;
    position:relative;
  }
  /* Default: match list takes full height */
  .content-split .match-list-col {
    width:100% !important;
    flex:1 !important;
    max-height:none !important;
    height:100% !important;
    border-right:none !important;
    border-bottom:none !important;
    overflow-y:auto;
  }
  /* Default: detail panel hidden */
  .content-split .detail-col {
    display:none !important;
  }
  /* When a match / league is selected: swap — show detail, hide list */
  .content-split.mob-detail-open .match-list-col {
    display:none !important;
  }
  .content-split.mob-detail-open .detail-col {
    display:flex !important;
    flex-direction:column !important;
    flex:1 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow-y:auto;
  }

  /* Mobile match center shown ABOVE markets in the detail column */
  .mob-mc-zone {
    display:flex; flex-direction:column;
    flex-shrink:0;
    order:-1;
    height:42vh; overflow:hidden;
    border-bottom:2px solid var(--border);
    background:linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  }
  .mob-mc-zone .mc-wrap { height:100%; }
  .mob-mc-zone .mc-body { flex:1; min-height:0; overflow-y:auto; }

  /* Bigger touch targets for match rows */
  .ml-row     { padding:10px 10px; min-height:52px; }
  .ml-tab     { padding:5px 10px; min-height:28px; }
  .sport-item { padding:12px 14px; min-height:44px; }

  /* Market buttons: smaller min-width for more columns */
  .d-odd { flex:1 1 100px; min-width:100px; min-height:40px; }

  /* Detail header */
  .detail-header { padding:10px 12px; flex-wrap:wrap; gap:8px; }
  .detail-teams  { font-size:13px; }
  .d-score       { font-size:15px; padding:3px 10px; }

  /* Sportsbook: narrower odds columns */
  .sb-match { grid-template-columns:54px 1fr 168px; gap:8px; }
  .sb-m-odds { grid-template-columns:repeat(3, 52px); gap:3px; }

  /* Country accordion: larger tap target */
  .sb-c-row { padding:11px 14px; min-height:48px; }

  /* Back button in detail panel header on mobile */
  .content-split.mob-detail-open .detail-close {
    font-size:14px; padding:6px 12px; border-radius:4px;
    background:var(--bg3); border:1px solid var(--border) !important;
    color:var(--text) !important;
    display:inline-flex; align-items:center; gap:4px;
  }
  .content-split.mob-detail-open .detail-close:hover {
    background:var(--card);
  }

  /* My Bets: remove double-padding from #bets-section; mb-wrap handles spacing */
  #bets-section { padding:0 !important; }
  .mb-wrap { padding:12px 12px 24px; }
  /* Status tabs: single scrollable row so all 6 fit without wrapping */
  .mb-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .mb-tabs::-webkit-scrollbar { display:none; }
  .mb-tab { flex-shrink:0; white-space:nowrap; }

  /* Prevent any element inside the app from leaking outside viewport */
  .detail-grid, .d-card, .d-card-odds { max-width:100%; overflow-x:hidden; }
  .sb-match-list { overflow-x:hidden; }
  .sb-match { max-width:100%; }

  /* League filter tabs: single scrollable row on mobile — no wrapping */
  .match-list-tabs { flex-wrap:nowrap; overflow-x:auto; }
  .ml-tab { white-space:nowrap; flex-shrink:0; }
}

/* ── Phone (≤480px): full mobile treatment ───────────────────────────── */
@media (max-width:480px) {
  .mob-mc-zone { height:36vh !important; }

  /* Header is already hidden at ≤768px — no overrides needed here */
  .auth-bal { padding:3px 7px; font-size:11px; }

  /* content-split height already correct from ≤768px rule */

  /* More vertical space for match list on tall phones */
  .match-list-col { max-height:40vh !important; }

  /* iOS / Android 44px minimum touch targets */
  .ml-row     { min-height:54px; padding:8px 8px; }
  .ml-tab     { min-height:44px; padding:10px 12px; font-size:11px; }
  .sport-item { min-height:44px; padding:11px 14px; }
  .sb-day     { min-height:44px; }
  .odds-btn   { min-height:44px; width:54px; }
  .sb-odd     { min-height:48px; }
  .auth-btn   { min-height:44px; padding:6px 14px; }
  .mb-pg-btn  { min-height:44px; }

  /* Market odd buttons: 2-per-row on narrow phones */
  .d-odd {
    flex:1 1 calc(50% - 2px) !important;
    min-width:calc(50% - 2px) !important;
    min-height:44px;
  }

  /* Sportsbook match card: stack into single column */
  .sb-match {
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    gap:4px; padding:10px 10px;
  }
  .sb-m-odds {
    grid-template-columns:repeat(3, 1fr) !important;
    gap:4px;
  }
  /* Odds buttons: taller for thumb tap */
  .sb-odd {
    min-height:48px; border-radius:6px;
    font-size:11px;
  }
  .sb-odd span { font-size:14px; }

  /* Sportsbook country/league row: full bleed on phone */
  .sb-c-row    { padding:12px 14px; gap:12px; }
  .sb-c-name   { font-size:13px; }
  .sb-c-leagues { padding-left:16px; }
  .sb-lg       { padding:8px 14px 8px 0; min-height:40px; }
  .sb-lg-name  { font-size:12px; }

  /* Chips bar already hidden at ≤768px — no override needed */
  .mob-sport-chip { padding:6px 12px !important; font-size:11px !important; }

  /* Live match list rows on phone */
  .ml-league { padding:5px 10px; }
  .ml-section { padding:7px 10px; }

  /* My Bets: full-mobile layout */
  .mb-wrap { padding:8px 10px 20px; }
  .mb-hdr  { flex-direction:row; align-items:center; margin-bottom:10px; }
  .mb-title { font-size:16px; }
  .mb-back  { font-size:11px; padding:5px 10px !important; }
  .mb-filters {
    flex-direction:column; align-items:stretch; gap:6px;
  }
  .mb-filters select,
  .mb-filters input[type=date] { width:100%; }

  /* Login card: full-width on phones */
  .login-card { width:100%; padding:24px 18px; }
  #login-overlay { padding:12px; padding-top:clamp(8px,4vh,24px); }

  /* Detail panel: tighter on phone */
  .detail-header { padding:8px 10px; }
  .detail-teams  { font-size:12px; flex-wrap:wrap; }
  .d-score       { font-size:14px; }
  .detail-grid   { padding:4px 6px; }
}

/* ── Sport chip pill (used inside .mob-sport-bar) ────────────────────── */
.mob-sport-chip {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text2); font-size:12px; font-weight:700;
  padding:7px 14px; border-radius:20px; cursor:pointer;
  white-space:nowrap; flex-shrink:0;
  transition:color .12s, background .12s, border-color .12s;
  -webkit-tap-highlight-color:transparent;
}
.mob-sport-chip:active, .mob-sport-chip.on {
  background:rgba(26,170,94,.15);
  color:var(--gold); border-color:rgba(26,170,94,.5);
}
.mob-sport-chip.live-chip {
  color:var(--live); border-color:rgba(239,68,68,.35);
  background:rgba(239,68,68,.08);
}
.mob-sport-chip.live-chip.on {
  background:rgba(239,68,68,.18); border-color:var(--live);
}
.mob-sport-chip-ic { font-size:14px; }

/* ── Sport chips bar (hidden on desktop) ─────────────────────────────── */
.mob-sport-bar { display:none; }

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

/* ══════════════════════════════════════════════════════════════════════
   SA Finance — v2  (.sa-fin-*)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.sa-fin-toolbar {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:10px 14px; background:var(--bg2);
  border-bottom:1px solid var(--border); border-radius:8px 8px 0 0;
  margin-bottom:0;
}
.sa-fin-title {
  font-size:15px; font-weight:800; color:var(--text);
  letter-spacing:-.3px; margin-right:4px;
}
.sa-fin-quick { display:flex; gap:4px; }
.sa-fin-q {
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text2); font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:14px; cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.sa-fin-q:hover { background:rgba(52,211,103,.12); color:var(--gold); border-color:rgba(52,211,103,.4); }
.sa-fin-lbl { font-size:11px; color:var(--text2); display:flex; align-items:center; gap:5px; }
.sa-fin-date {
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); font-size:12px; padding:4px 8px;
  border-radius:6px; outline:none;
}
.sa-fin-date:focus { border-color:var(--gold); }
.sa-fin-refresh, .sa-fin-export {
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text2); font-size:12px; font-weight:600;
  padding:5px 12px; border-radius:6px; cursor:pointer;
  transition:background .12s, color .12s;
}
.sa-fin-refresh:hover { background:rgba(52,211,103,.12); color:var(--gold); }
.sa-fin-export:hover  { background:rgba(26,170,94,.12); color:#1aaa5e; }

/* ── Sub-tabs ────────────────────────────────────────────────────────── */
.sa-fin-tabs {
  display:flex; flex-wrap:wrap; gap:2px;
  padding:6px 14px; background:var(--bg2);
  border-bottom:1px solid var(--border);
}
.sa-fin-tab {
  background:transparent; border:none; border-bottom:2px solid transparent;
  color:var(--text2); font-size:12px; font-weight:600;
  padding:6px 14px; cursor:pointer; border-radius:4px 4px 0 0;
  transition:color .12s, background .12s, border-color .12s;
}
.sa-fin-tab:hover { color:var(--text); background:rgba(255,255,255,.04); }
.sa-fin-tab.on { color:var(--gold); border-bottom-color:var(--gold); background:rgba(52,211,103,.07); }

/* ── Loading / empty ─────────────────────────────────────────────────── */
.sa-fin-loading {
  padding:40px; text-align:center; color:var(--text2);
  font-size:13px; letter-spacing:.3px; animation:pulse 1.2s ease-in-out infinite;
}
.sa-fin-empty {
  padding:32px; text-align:center; color:var(--text3);
  font-size:13px; font-style:italic;
}

/* ── Currency card grid ──────────────────────────────────────────────── */
.sa-fin-ccy-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  padding:14px;
}
@media (max-width:900px) { .sa-fin-ccy-grid { grid-template-columns:1fr; } }
@media (max-width:1200px) and (min-width:901px) { .sa-fin-ccy-grid { grid-template-columns:repeat(2,1fr); } }

.sa-fin-ccy-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:10px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .15s;
}
.sa-fin-ccy-card:hover { box-shadow:0 4px 20px rgba(0,0,0,.35); }
.sa-fin-ccy-empty {
  opacity:.55; pointer-events:none;
}

.sa-fin-ccy-head {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px 8px;
  border-bottom:1px solid var(--border2);
  background:rgba(0,0,0,.18);
}
.sa-fin-ccy-name { font-size:14px; font-weight:800; color:var(--text); flex:1; }
.sa-fin-ccy-code {
  font-size:10px; font-weight:700; color:var(--text3);
  background:var(--bg2); border:1px solid var(--border);
  padding:2px 7px; border-radius:10px; letter-spacing:.5px;
}
.sa-fin-ccy-pnl { font-size:13px; font-weight:800; }
.sa-fin-ccy-none { padding:20px 14px; color:var(--text3); font-size:12px; font-style:italic; }

.sa-fin-ccy-tickets {
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  padding:7px 14px; border-bottom:1px solid var(--border2);
  font-size:11px;
}
.sa-fin-ccy-tpart b { font-size:13px; font-weight:800; }
.sa-fin-ccy-tpart.gold b   { color:var(--gold); }
.sa-fin-ccy-tpart.purple b { color:#a78bfa; }
.sa-fin-ccy-tpart.green b  { color:#1aaa5e; }
.sa-fin-ccy-tpart.red b    { color:#ef4444; }
.sa-fin-ccy-tdot { color:var(--text3); font-size:13px; }

.sa-fin-ccy-kpis { display:flex; flex-direction:column; gap:0; padding:4px 0; flex:1; }

/* ── KPI rows ────────────────────────────────────────────────────────── */
.sa-fin-kpi-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 14px; border-bottom:1px solid rgba(255,255,255,.03);
  transition:background .1s;
}
.sa-fin-kpi-row:last-child { border-bottom:none; }
.sa-fin-kpi-row:hover { background:rgba(255,255,255,.03); }
.sa-fin-kpi-row.pnl {
  border:1px solid; border-radius:6px; margin:8px 10px;
  background:rgba(0,0,0,.25); padding:8px 12px;
}
.sa-fin-kpi-lbl {
  font-size:10px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.6px;
}
.sa-fin-kpi-right { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.sa-fin-kpi-val { font-size:13px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.sa-fin-kpi-sub { font-size:9px; color:var(--text3); }

/* ── Total ticket bar ────────────────────────────────────────────────── */
.sa-fin-ticket-bar {
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
  margin:0 14px 14px; padding:10px 16px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:8px;
}
.sa-fin-tbar-item {
  display:flex; flex-direction:column; align-items:center;
  padding:4px 18px; flex:1; min-width:80px;
}
.sa-fin-tbar-val { font-size:22px; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; }
.sa-fin-tbar-lbl { font-size:9px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.6px; margin-top:2px; }
.sa-fin-tbar-sep { width:1px; align-self:stretch; background:var(--border); margin:4px 0; }

/* ── Daily breakdown ─────────────────────────────────────────────────── */
.sa-fin-days-wrap { display:flex; flex-direction:column; gap:16px; padding:0 14px 14px; }
.sa-fin-day-block { background:var(--bg3); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.sa-fin-day-hdr {
  padding:8px 14px; font-size:12px; font-weight:700; color:var(--text2);
  background:rgba(0,0,0,.2); border-bottom:1px solid var(--border2);
}

/* ── Tables ──────────────────────────────────────────────────────────── */
.sa-fin-table {
  width:100%; border-collapse:collapse;
  font-size:12px; color:var(--text);
}
.sa-fin-table thead tr {
  background:rgba(0,0,0,.3);
  position:sticky; top:0;
}
.sa-fin-table th {
  padding:8px 12px; text-align:left;
  font-size:10px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.sa-fin-table td {
  padding:7px 12px; border-bottom:1px solid rgba(255,255,255,.04);
  font-variant-numeric:tabular-nums; vertical-align:top;
}
.sa-fin-table tbody tr:hover { background:rgba(255,255,255,.03); }
.sa-fin-table tbody tr:last-child td { border-bottom:none; }
.sa-fin-table td.red    { color:#ef4444; }
.sa-fin-table td.orange { color:#f97316; }
.sa-fin-table td.muted  { color:var(--text2); }
.sa-fin-table td.pnl-cell { white-space:nowrap; }
.sa-fin-drill .sa-fin-td-name { font-weight:700; color:var(--text); }

/* Per-currency stacked lines inside a cell */
.sa-fin-cline {
  display:block; font-size:11px;
  font-variant-numeric:tabular-nums; line-height:1.6;
}
.sa-fin-nil { color:var(--text3); font-size:11px; }

/* ── Filter bar ──────────────────────────────────────────────────────── */
.sa-fin-filter { padding:8px 14px 0; }
.sa-fin-sel {
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); font-size:12px; padding:4px 8px;
  border-radius:6px; outline:none; cursor:pointer;
}
.sa-fin-sel:focus { border-color:var(--gold); }

/* ── Manual adjust panel ─────────────────────────────────────────────── */
.sa-fin-adj-wrap { padding:14px; max-width:640px; }
.sa-fin-adj-title {
  font-size:15px; font-weight:800; color:var(--text);
  margin-bottom:6px;
}
.sa-fin-adj-desc {
  font-size:12px; color:var(--text2); line-height:1.6;
  margin-bottom:14px;
}
.sa-fin-adj-grid { display:flex; flex-direction:column; gap:12px; }
.sa-fin-adj-row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:600px) { .sa-fin-adj-row3 { grid-template-columns:1fr; } }
.sa-fin-adj-field { display:flex; flex-direction:column; gap:4px; position:relative; }
.sa-fin-adj-lbl { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; }
.sa-fin-adj-input {
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); font-size:13px; padding:7px 10px;
  border-radius:6px; outline:none; width:100%;
}
.sa-fin-adj-input:focus { border-color:var(--gold); }
.sa-fin-adj-btns { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sa-fin-apply-btn {
  background:var(--gold); color:#fff;
  border:none; font-size:13px; font-weight:800;
  padding:8px 22px; border-radius:6px; cursor:pointer;
  transition:background .12s;
}
.sa-fin-apply-btn:hover { background:var(--gold2); }

/* User search results */
.sa-adj-results {
  position:absolute; top:100%; left:0; right:0; z-index:200;
  background:var(--card); border:1px solid var(--border);
  border-radius:0 0 8px 8px; max-height:180px; overflow-y:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.sa-adj-hit {
  padding:7px 12px; font-size:12px; cursor:pointer;
  border-bottom:1px solid var(--border2); transition:background .1s;
}
.sa-adj-hit:last-child { border-bottom:none; }
.sa-adj-hit:hover { background:rgba(52,211,103,.1); }
.sa-adj-no { padding:10px 12px; font-size:12px; color:var(--text3); font-style:italic; }
.sa-adj-picked {
  font-size:11px; color:var(--gold); font-weight:600;
  padding:4px 0; min-height:18px;
}
.sa-adj-msg { font-size:12px; font-weight:600; }
.sa-adj-msg.ok  { color:#1aaa5e; }
.sa-adj-msg.err { color:#ef4444; }

/* ── Client withdraw button ── */
.sa-fin-wd-btn {
  padding:3px 9px; border-radius:5px; border:1px solid #ef4444;
  background:transparent; color:#ef4444; font-size:11px; font-weight:700;
  cursor:pointer; transition:all .12s; white-space:nowrap;
}
.sa-fin-wd-btn:hover { background:#ef4444; color:#fff; }

/* ── Withdraw modal ── */
.sa-wd-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:2000;
}
.sa-wd-box {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2001; background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; padding:20px 24px; min-width:300px; max-width:420px;
  width:90%; display:flex; flex-direction:column; gap:12px;
}
.sa-wd-title {
  font-size:14px; font-weight:800; color:var(--text);
  border-bottom:1px solid var(--border); padding-bottom:8px;
}
.sa-wd-field { display:flex; flex-direction:column; gap:4px; }
.sa-wd-field label {
  font-size:10px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.5px;
}
.sa-wd-btns { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }