*{margin:0;padding:0;box-sizing:border-box}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
:root{
  --bg:#f1f5f9;--bg-card:#fff;--bg-input:#f7f9fc;--bg-input2:#eef2f7;
  /* Brand gold — muted antique gold (#d8ab4e -> #b48c36) on charcoal (#040404).
     --accent is darkened to gold-ink on light backgrounds so it clears AA (≈5:1)
     as body text/icons; --brand-gold-grad carries the literal bright gradient for
     hero CTAs, which always pair it with --on-gold (dark) text, never --on-accent. */
  --accent:#8a6a24;--accent-light:rgba(180,140,54,.14);
  --on-accent:#fff;
  --brand-gold-grad:linear-gradient(135deg,#d8ab4e,#b48c36);--on-gold:#040404;
  --accent2:#f97316;--accent2-light:#ffedd5;
  --text:#1e293b;--text-muted:#59697d;--text-light:#5f6e82;
  --danger:#ef4444;--danger-light:#fee2e2;
  --success:#16a34a;--success-light:#dcfce7;
  --warning:#d97706;--warning-light:#fef3c7;
  --border:#e2e8f0;--border2:#cbd5e1;
  --purple:#7c3aed;--purple-light:#ede9fe;
  --tumbok:#1d4ed8;--tumbok-light:#dbeafe;
  --sahod:#0891b2;--sahod-light:#cffafe;
  --gitnaan:#7c3aed;--gitnaan-light:#ede9fe;
  /* Wallet "Light Gold" palette — tuned to the brand gold family */
  --wallet-grad:linear-gradient(135deg,#fffdf7 0%,#fdf3da 50%,#f2dcac 100%);
  --wallet-gold:#b48c36;--wallet-gold-bright:#d8ab4e;--wallet-gold-soft:rgba(180,140,54,.12);--wallet-gold-text:#8a6a24;--wallet-promo-text:#0f7a36;--wallet-refund-text:#b45309;
  --shadow-sm:0 1px 3px rgba(0,0,0,.07);
  --shadow:0 4px 16px rgba(0,0,0,.09);
  --shadow-lg:0 8px 32px rgba(0,0,0,.13);
  --shadow-card:0 1px 2px rgba(15,23,42,.04),0 4px 14px rgba(15,23,42,.07);
  --radius:14px;--radius-sm:8px;--radius-lg:20px;
  color-scheme:light
}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg-input2);color:var(--text)}
.is-submitting{opacity:.6;cursor:progress!important}
.wrap{width:100%;max-width:450px;min-height:100vh;margin:0 auto;background:var(--bg);box-shadow:var(--shadow-lg);position:relative;padding-bottom:80px}
/* Place Bet's final card already contributes a 12px bottom margin. Its
   slightly smaller shell clearance still exceeds the fixed nav height while
   avoiding a 5px document tail at the 1366x900 desktop QA boundary. */
body:has(#drawSelector)>.wrap{padding-bottom:74px}
/* ── Top Nav ── */
.topnav{background:var(--bg-card);padding:0 16px;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 1px 0 var(--border),var(--shadow-sm)}
.topnav-left{display:flex;align-items:center;gap:12px}
.topnav h2{font-size:1rem;font-weight:700;color:var(--text)}
.menu-btn{width:38px;height:38px;background:var(--bg-input2);border:none;border-radius:12px;color:var(--text);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.menu-btn:hover{background:var(--border)}
/* Extra separation from the adjacent money button — a burger mis-tap must not open a money modal. */
.menu-btn-r{margin-left:6px}
#themeToggleBtn{color:var(--accent)!important}
#themeToggleBtn:hover{color:var(--accent)!important;background:var(--accent-light)!important}
.topnav-player{display:flex;align-items:center;min-width:0}
/* Balance chip — tappable (opens sidebar). Shows spendable balance = balance − reserved; amount is never truncated. */
.tnp-bal{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--accent-light),var(--wallet-gold-soft));border:1.5px solid rgba(180,140,54,.22);border-radius:13px;padding:0 13px 0 10px;height:42px;font-family:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s,opacity .15s}
.tnp-bal:hover{border-color:rgba(180,140,54,.42);box-shadow:0 2px 8px rgba(180,140,54,.18)}
.tnp-bal:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tnp-bal>i{font-size:1.05rem;flex-shrink:0}
.tnp-text{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0}
.tnp-bal-lbl{font-size:.54rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;line-height:1.3;white-space:nowrap}
.tnp-bal-amt{font-size:.85rem;font-weight:800;white-space:nowrap;line-height:1.25;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* Per-state colors — reuse the exact vars/hex the sidebar wallet cards already use for the same wallets. */
.tnp-c-welcome{color:var(--accent)}
.tnp-c-balance{color:var(--accent)}
.tnp-c-rebate{color:var(--wallet-gold-text)}
.tnp-c-promo{color:var(--success)}
.tnp-c-refund{color:#f39c12}
@media (prefers-reduced-motion:reduce){.tnp-bal{transition:border-color .15s,box-shadow .15s}}
.topnav-right{display:flex;gap:8px}
.topnav-p .topnav-right{align-items:center}
.btn-cashin{background:var(--success-light);color:var(--success);border:none;padding:7px 14px;border-radius:var(--radius-sm);font-size:.78rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px}
.btn-cashout{background:var(--danger-light);color:var(--danger);border:none;padding:7px 14px;border-radius:var(--radius-sm);font-size:.78rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px}
/* Jewel-tone in/out pair — deeper, less saturated than stock Tailwind green/red so
   they sit naturally beside the antique-gold brand instead of clashing with it.
   Semantics (in=green, out=red) unchanged. */
/* Cash In / Cash Out both carry the gold brand gradient (brand-color adoption,
   2026-07-04) — the +/− icon + label is the differentiator, not hue. --on-gold
   (charcoal) text clears AA on gold; white-on-gold does not. */
.btn-player-cashin{background:var(--brand-gold-grad);color:var(--on-gold);border:none;height:42px;padding:0 16px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;box-shadow:0 2px 8px rgba(180,140,54,.35);transition:transform .15s,box-shadow .15s}
.btn-player-cashin:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(180,140,54,.45)}
.btn-player-cashin:active{transform:translateY(0)}
.btn-player-cashout{background:var(--brand-gold-grad);color:var(--on-gold);border:none;height:42px;padding:0 16px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;box-shadow:0 2px 8px rgba(180,140,54,.35);transition:transform .15s,box-shadow .15s}
.btn-player-cashout:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(180,140,54,.45)}
.btn-player-cashout:active{transform:translateY(0)}
.player-money-icon{display:none}
/* Player topnav — progressive compression on small screens; the header must stay one 58px row.
   Scoped to .topnav-p so the admin topnav is untouched. Side padding stays the base 16px so the
   chip/burger align with the 16px gutter used by content cards below (e.g. .wallet-hero). */
@media (max-width:480px){
  .topnav-p{
    --money-action-ink:#0b233b;
    --money-action-white:#ffffff;
    --money-action-gold:linear-gradient(135deg,#d8ab4e,#c69b3d);
    --money-action-border:#d8ab4e;
    gap:8px
  }
  .topnav-p .topnav-left{gap:10px;min-width:0;flex:1}
  .topnav-p .topnav-player{max-width:100%}
  .topnav-p .topnav-right{gap:8px;flex-shrink:0}
  .topnav-p .tnp-bal{height:38px;padding:0 8px;max-width:100%;gap:6px;border-radius:12px}
  .topnav-p .tnp-bal>i{font-size:.875rem}
  .topnav-p .tnp-bal-lbl{font-size:.5rem;font-weight:650;letter-spacing:.025em;line-height:1.2;white-space:normal;text-align:left}
  .topnav-p .menu-btn-player{margin-left:0}
  /* Equal pills share the balance/menu's 38px visible height. The 44px native
     buttons preserve the tap area without making the header taller. */
  .topnav-p .btn-player-cashout{--money-action-fill:var(--money-action-white)}
  .topnav-p .btn-player-cashin{--money-action-fill:var(--money-action-gold)}
  .topnav-p .player-money-action{
    position:relative;isolation:isolate;min-width:72px;width:72px;height:44px;padding:0 8px;
    display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0;
    border:0;border-radius:999px;background:none;
    color:var(--money-action-ink);font-family:inherit;font-size:.6875rem;font-weight:650;line-height:14px;
    box-shadow:none;transition:none
  }
  .topnav-p .player-money-action::before{
    content:"";position:absolute;z-index:-1;box-sizing:border-box;inset:3px 0;border:1px solid var(--money-action-border);
    border-radius:999px;background:var(--money-action-fill);box-shadow:0 2px 5px rgba(80,53,10,.12);
    transition:box-shadow .15s;pointer-events:none
  }
  .topnav-p .player-money-action>i{display:none}
  .topnav-p .player-money-icon{display:none}
  .topnav-p .player-money-action>span{display:block;white-space:nowrap;line-height:14px}
  .topnav-p .player-money-action:hover,.topnav-p .player-money-action:active{transform:none;box-shadow:none}
  .topnav-p .player-money-action:active::before{
    box-shadow:inset 0 1px 3px rgba(80,53,10,.18)
  }
  /* The balance gets the remaining width instead of painting under an action. */
  .topnav-p .tnp-bal-amt{font-size:clamp(.625rem,3.4vw,.8125rem);font-weight:750}
}
@media (max-width:480px) and (prefers-reduced-motion:reduce){
  .topnav-p .player-money-action::before{transition:none}
}
@media (max-width:360px){
  .tnp-bal{padding:0 10px}
  .tnp-bal>i{display:none}
}
.money-mask{display:none;white-space:nowrap;letter-spacing:.04em}
html[data-balance-privacy="hidden"] .money-visible{display:none!important}
html[data-balance-privacy="hidden"] .money-mask{display:inline!important}
.adm-nav-badge{display:inline-block;background:#ef4444;color:#fff;font-size:.65rem;font-weight:700;padding:1px 7px;border-radius:99px;margin-left:4px;vertical-align:middle}
/* Cash-in amount: large money-styled field with a ₱ prefix. */
.cashin-amount{display:flex;align-items:center;gap:10px;
  background:var(--bg-input);border:1.5px solid var(--border);border-radius:12px;
  padding:6px 16px;transition:border-color .2s,box-shadow .2s}
.cashin-amount:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(180,140,54,.16);background:#fff}
.cashin-amount-peso{font-size:1.6rem;font-weight:800;color:var(--text-light);line-height:1;flex-shrink:0}
.cashin-amount input{flex:1;width:100%;border:none;background:transparent;color:var(--text);
  padding:10px 0;font-size:1.9rem;font-weight:800;letter-spacing:.5px;outline:none;font-family:inherit;box-shadow:none}
.cashin-amount input:focus{border:none;background:transparent;box-shadow:none}
.cashin-amount input::placeholder{color:var(--text-light);font-weight:700}
.cashin-amount-clear{flex-shrink:0;width:26px;height:26px;border:none;border-radius:99px;
  background:var(--bg-input2);color:var(--text-muted);font-size:.72rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.cashin-amount-clear:hover{background:var(--danger-light,#fee2e2);color:#ef4444}
/* Hide number-spinner arrows — the quick-picks cover increments. */
.cashin-amount input::-webkit-outer-spin-button,
.cashin-amount input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cashin-amount input[type=number]{-moz-appearance:textfield;appearance:textfield}
.cashin-amount-hint{font-size:.76rem;font-weight:600;color:var(--text-muted);margin:8px 2px 0;min-height:1em;transition:color .15s}
.cashin-amount-hint.err{color:#ef4444}
.cashin-amount-hint.ok{color:var(--success)}

.cashin-quickpicks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.qp-chip{background:var(--bg-input2);color:var(--text);border:1.5px solid transparent;padding:9px 4px;border-radius:10px;font-size:.82rem;font-weight:700;cursor:pointer;text-align:center;transition:background .15s,border-color .15s,color .15s,transform .05s}
.qp-chip:hover{background:var(--success-light);border-color:var(--success);color:var(--success)}
.qp-chip:active{transform:translateY(1px)}
.qp-chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cashin-secure{display:flex;align-items:center;justify-content:center;gap:7px;font-size:.74rem;font-weight:600;color:var(--text-light);margin:12px 0 0}
.cashin-secure i{font-size:.82rem;color:var(--success)}
[data-theme="dark"] .cashin-amount:focus-within{background:var(--bg-input)}
.deposit-banner{display:flex;align-items:center;gap:10px;padding:12px 16px;margin:0 0 14px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600}
.deposit-banner.success{background:rgba(34,197,94,.12);color:#15803d;border-left:3px solid #22c55e}
.deposit-banner.warn{background:rgba(250,204,21,.15);color:#a16207;border-left:3px solid #facc15}
/* ── Sidebar ── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:200;backdrop-filter:blur(2px)}
.sidebar-overlay.active{display:block}
/* height: 100dvh tracks the VISIBLE viewport on phones — plain 100vh is
   measured with the browser toolbar hidden, which pushed the drawer's pinned
   logout footer under the phone's URL/gesture bar. 100vh stays as the
   fallback for browsers without dvh (pre-iOS 15.4 / Chrome 108). */
.sidebar{position:fixed;top:0;left:-290px;width:280px;height:100vh;height:100dvh;background:var(--bg-card);z-index:300;transition:left .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.sidebar.active{left:0}
/* Player drawer slides from the right (burger lives at the topnav's right edge); admin keeps the left drawer. */
.sidebar.sidebar-r{left:auto;right:-290px;transition:right .28s cubic-bezier(.4,0,.2,1)}
.sidebar.sidebar-r.active{left:auto;right:0}
.sb-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 16px;border-bottom:1px solid var(--border)}
.sb-header-actions{display:flex;align-items:center;gap:8px}
.sb-logo{display:flex;align-items:center;gap:10px}
.sb-logo .logo-icon{width:36px;height:36px;background:var(--brand-gold-grad);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--on-gold);font-size:1rem}
.sb-logo h3{font-size:.95rem;font-weight:700;color:var(--text)}
.sb-close{width:32px;height:32px;background:var(--bg-input2);border:none;border-radius:8px;color:var(--text-muted);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sb-user{padding:16px 20px;border-bottom:1px solid var(--border);background:var(--bg-input)}
.sb-avatar{width:44px;height:44px;background:var(--brand-gold-grad);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--on-gold);font-size:1.1rem;font-weight:700;margin-bottom:10px}
.sb-name{font-size:.95rem;font-weight:700;color:var(--text)}
.role-tag{display:inline-block;background:var(--accent-light);color:var(--accent);font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px;margin-top:2px}
.sb-member-id{font-size:.68rem;color:var(--text-muted);margin-top:4px;letter-spacing:.02em}
.sb-bals{display:flex;flex-direction:column;gap:8px}
.sb-bals-row{display:flex;gap:8px}

.bal-box{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.bal-box .lbl{font-size:.75rem;line-height:1.2;white-space:nowrap;color:var(--text-muted);font-weight:600;text-transform:uppercase}
.bal-box .amt{font-size:.9rem;font-weight:800;color:var(--accent);margin-top:2px}
.bal-box .amt.rebate{color:var(--wallet-gold-text)}
.sb-nav{padding:10px 0;flex:1;overflow-y:auto}
.sb-nav a,.sb-nav .pwa-install-nav{display:flex;align-items:center;gap:14px;padding:12px 20px;color:var(--text-muted);text-decoration:none;font-size:.9rem;font-weight:600;margin:1px 10px;border-radius:10px;transition:all .18s}
.sb-nav .pwa-install-nav{box-sizing:border-box;width:calc(100% - 20px);border:0;background:transparent;font-family:inherit;text-align:left;cursor:pointer;appearance:none}
.sb-nav .pwa-install-nav[hidden]{display:none}
.sb-nav-section{margin:11px 20px 5px;padding-top:10px;border-top:1px solid var(--border);color:var(--text-light);font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.sb-nav-section:has(+ .pwa-install-nav[hidden]){display:none}
.sb-nav a i,.sb-nav .pwa-install-nav i{width:20px;text-align:center;font-size:.95rem}
.sb-nav a:hover,.sb-nav .pwa-install-nav:hover{background:var(--bg-input2);color:var(--text)}
.sb-nav a:focus-visible,.sb-nav .pwa-install-nav:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sb-nav a.active{background:var(--accent-light);color:var(--accent)}
.promo-nav-icon{position:relative;display:inline-flex;align-items:center;justify-content:center}
.promo-nav-dot{position:absolute;top:-3px;right:-6px;width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--bg-card)}
.sb-nav .promo-nav-icon{width:20px;flex:0 0 20px}
/* safe-area inset keeps Logout clear of the iOS home indicator (0 elsewhere) */
.sb-footer{padding:16px 20px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border)}
.logout-form{margin:0}
.sb-footer button{display:flex;align-items:center;gap:10px;width:100%;color:var(--danger);font:inherit;font-size:.88rem;font-weight:600;text-align:left;padding:10px 12px;border:0;border-radius:10px;background:var(--danger-light);cursor:pointer}
/* ── Flash ── */
.flash{position:fixed;top:16px;right:16px;z-index:9999;min-width:220px;max-width:min(calc(100vw - 32px),360px);padding:14px 18px;border-radius:12px;font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,.18);animation:toastIn .25s ease;transition:opacity .35s ease,transform .35s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
.flash.success{background:rgba(255,255,255,.15);color:var(--success);border:1.5px solid rgba(34,197,94,.55)}
.flash.error{background:rgba(255,255,255,.15);color:var(--danger);border:1.5px solid rgba(239,68,68,.55)}
.player-notification-region{display:none}
.player-notification-region.has-notification{display:flex;flex-direction:column;gap:8px;margin:10px 16px 12px}
.flash.player-flash{min-width:0;background:var(--bg-card)}
.player-notification-region .flash.player-flash{position:relative;top:auto;left:auto;right:auto;width:100%;max-width:none;box-sizing:border-box;transform:none;animation:playerToastIn .2s ease}
.flash.player-flash:not(.player-notification-region .player-flash){top:66px;left:50%;right:auto;width:min(calc(100vw - 28px),422px);transform:translateX(-50%);animation:playerToastInFixed .2s ease}
@keyframes playerToastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes playerToastInFixed{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.flash.player-flash{animation:none!important}}
.flash.player-flash.success{background:var(--bg-card);border-color:rgba(22,163,74,.55)}
.flash.player-flash.error{background:var(--bg-card);border-color:rgba(239,68,68,.55)}
.flash-message{flex:1;min-width:0;line-height:1.35}
.flash-close{width:44px;height:44px;flex:0 0 44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:var(--bg-input2);color:currentColor;font:inherit;font-size:1.15rem;line-height:1;cursor:pointer}
.flash-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* ── Bottom Nav ── */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--bg-card);display:flex;border-top:1px solid var(--border);z-index:100;box-shadow:0 -2px 12px rgba(0,0,0,.07);max-width:450px;width:100%;margin:0 auto}
.bottom-nav a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:10px 0 8px;color:var(--text-light);text-decoration:none;font-size:.62rem;font-weight:600;gap:4px;transition:color .18s}
.bottom-nav a i{font-size:1.15rem}
.bottom-nav a.active,.bottom-nav a:hover{color:var(--accent)}
.bottom-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:6px}
.pwa-install-overlay{z-index:450}
.pwa-install-sheet{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.pwa-install-eyebrow{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:2px}
.pwa-install-intro{font-size:.82rem;line-height:1.5;color:var(--text-muted);margin:-4px 0 16px}
.pwa-install-steps{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0 0 18px;padding:0}
.pwa-install-steps li{display:flex;align-items:center;gap:12px;padding:11px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:10px}
.pwa-install-step-icon{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.pwa-install-steps strong{display:block;font-size:.82rem;color:var(--text);margin-bottom:2px}
.pwa-install-steps small{display:block;font-size:.7rem;line-height:1.35;color:var(--text-muted)}
.pwa-install-done{width:100%;margin:0}
.pwa-install-announcer{position:fixed;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
body.pwa-install-open{overflow:hidden}
/* ── General ── */
.card{background:var(--bg-card);border-radius:var(--radius);padding:16px;margin:12px 16px;box-shadow:var(--shadow-card);border:1px solid var(--border)}
.section-title{font-size:.78rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin:16px 16px 8px}
/* Earn referral share card. The explicit 6px head gap prevents the rate badge
   from touching Share, while the asymmetric CSS padding balances glyph edges. */
.earn-referral-wrap{margin:16px 16px 14px}
.earn-referral-card{padding:13px 16px 17px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);color:var(--text)}
.earn-referral-head{height:20px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.earn-referral-eyebrow{min-width:0;color:var(--text-muted);font-size:.625rem;font-weight:850;line-height:1.1;letter-spacing:.075em;text-transform:uppercase;white-space:nowrap}
.earn-referral-rate{flex:none;padding:4px 8px;border-radius:99px;background:var(--accent-light);color:var(--accent);font-size:.625rem;font-weight:850;line-height:1.1;white-space:nowrap}
.earn-referral-actions{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:'link link' 'copy share';align-items:center;gap:7px;min-width:0}
.earn-referral-link{grid-area:link;height:34px;min-width:0}
.earn-referral-link-value{display:block;width:100%;height:34px;padding:0 9px;border:1px solid var(--border2);border-radius:8px;background:var(--bg-input);color:var(--text);font:700 .625rem/34px inherit;white-space:nowrap;overflow-x:auto;text-overflow:clip;outline:none}
.earn-referral-link-value:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.earn-referral-action{height:34px;border:0;border-radius:8px;font-family:inherit;font-size:.625rem;font-weight:850;line-height:1;cursor:pointer;white-space:nowrap;transition:filter .15s,transform .15s}
.earn-referral-action:hover{filter:brightness(.96)}
.earn-referral-action:active{transform:translateY(1px)}
.earn-referral-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.earn-referral-copy{grid-area:copy;background:var(--brand-gold-grad);color:var(--on-gold);box-shadow:0 2px 7px rgba(180,140,54,.24)}
.earn-referral-share{grid-area:share;background:var(--accent-light);color:var(--accent);border:1px solid rgba(180,140,54,.28)}
.earn-referral-note{margin:8px 0 0;color:var(--text-muted);font-size:.625rem;line-height:1.3}
@media (max-width:360px){
  .earn-referral-head{height:auto;flex-direction:column;align-items:flex-start;gap:6px}
  .earn-referral-eyebrow{max-width:100%;overflow:hidden;text-overflow:ellipsis}
}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 16px}
.stat-card{background:var(--bg-card);border-radius:var(--radius);padding:16px;border:1px solid var(--border);box-shadow:var(--shadow-card)}
.stat-card .s-label{font-size:.72rem;color:var(--text-muted);font-weight:600;margin-bottom:6px}
.stat-card .s-value{font-size:clamp(.85rem,4vw,1.2rem);font-weight:800;color:var(--text);overflow:hidden;white-space:nowrap}
/* Station identity color is admin-configured data (stations.color), not brand —
   kept per-card so players still scan by color, but the mix ratio flips toward
   black in dark theme so pastel picks don't glow like candy against charcoal. */
.station-card{background:linear-gradient(155deg,color-mix(in srgb,var(--stn-clr) 74%,#fff) 0%,var(--stn-clr) 100%);border-radius:var(--radius);padding:11px 14px;margin-bottom:10px;display:flex;flex-direction:column;gap:7px;cursor:pointer;transition:transform .18s,box-shadow .18s;box-shadow:0 4px 20px rgba(0,0,0,.18),0 1px 4px rgba(0,0,0,.1)}
.station-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.14)}
[data-theme="dark"] .station-card{background:linear-gradient(155deg,color-mix(in srgb,var(--stn-clr) 60%,#000) 0%,color-mix(in srgb,var(--stn-clr) 85%,#000) 100%)}
.stn-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(0deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.1) 65%,transparent 100%);margin:-2px -14px -11px;padding:8px 14px 11px;border-radius:0 0 var(--radius) var(--radius)}
.station-info{flex:1;min-width:0}
.stn-name-row{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.stn-live-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;flex-shrink:0;animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}60%{box-shadow:0 0 0 5px rgba(74,222,128,0)}}
.station-info h3{font-size:.95rem;font-weight:800;color:#fff;margin:0}
.stn-last-result{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-top:2px;margin-bottom:2px;padding-left:14px}
.stn-last-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.stn-last-cap{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.62)}
.stn-last-nums{font-size:.86rem;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.04em;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:2px 8px}
.stn-last-meta{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.stn-last-empty{font-size:.66rem;font-weight:600;color:rgba(255,255,255,.5)}
.btn-bet{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;border:none;padding:8px 16px;border-radius:10px;font-weight:800;font-size:.85rem;cursor:pointer;flex-shrink:0;box-shadow:0 3px 12px rgba(234,88,12,.45);transition:transform .15s,box-shadow .15s;margin-left:12px}
.btn-bet:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(234,88,12,.6)}
/* ── Badges ── */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.68rem;font-weight:700}
.badge-won{background:#dcfce7;color:#16a34a}
.badge-lost{background:#fee2e2;color:#dc2626}
.badge-pending{background:#fef3c7;color:#d97706}
.badge-open{background:#dbeafe;color:#2563eb}
.badge-closed{background:#e2e8f0;color:#475569}
.badge-betting-closed{background:#ffedd5;color:#ea580c}
.badge-locked{background:#fef3c7;color:#b45309}
.badge-paused{background:#fef3c7;color:#b45309}
.stn-badge-active{background:var(--success-light);color:var(--success)}
.stn-badge-active::before{content:'\25cf';margin-right:5px;font-size:.6rem;vertical-align:1px}
.stn-badge-inactive{background:var(--bg-input2);color:var(--text-muted)}
/* ── Auth ── */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#faf4e6,#f5efe0,#f7e9d0)}
[data-theme="dark"] .auth-wrap{background:linear-gradient(135deg,#040404,#141008,#1c1608)}
.auth-box{background:var(--bg-card);border-radius:var(--radius-lg);padding:36px 28px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.auth-logo{width:52px;height:52px;background:var(--brand-gold-grad);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--on-gold);font-size:1.4rem;margin-bottom:16px}
.auth-box h2{font-size:1.5rem;font-weight:800;color:var(--text);margin-bottom:4px}
.auth-box p{font-size:.85rem;color:var(--text-muted);margin-bottom:24px}
.auth-link{text-align:center;margin-top:16px;font-size:.85rem;color:var(--text-muted)}
.auth-link a{color:var(--accent);text-decoration:none;font-weight:700}
/* ── Auth tabs (Login / Register) — flush full-width header bar ── */
.auth-tabs{position:relative;display:flex;margin:-36px -28px 26px;background:var(--bg-input);border-bottom:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;isolation:isolate}
.auth-tabs-with-jackpot{margin-bottom:0}
.auth-tab-indicator{position:absolute;z-index:0;top:0;bottom:0;left:0;width:50%;background:var(--brand-gold-grad);transition:transform .34s cubic-bezier(.4,0,.2,1)}
.auth-tabs[data-active="register"] .auth-tab-indicator{transform:translateX(100%)}
.auth-tab{position:relative;z-index:1;flex:1;text-align:center;padding:16px 8px;font-size:.92rem;font-weight:700;letter-spacing:.01em;color:var(--text-muted);text-decoration:none;cursor:pointer;background:none;border:none;font-family:inherit;transition:color .28s ease;-webkit-tap-highlight-color:transparent}
.auth-tab:hover{color:var(--text)}
.auth-tab.active,.auth-tab.active:hover{color:var(--on-gold)}
.auth-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
/* ── Auth panels (animated form switch) ── */
.auth-panels{position:relative;overflow:hidden;transition:height .34s cubic-bezier(.4,0,.2,1)}
.auth-panel{display:none}
.auth-panel.active{display:block;animation:authPanelIn .38s cubic-bezier(.4,0,.2,1)}
@keyframes authPanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.auth-head{margin-bottom:22px}
.auth-head h2{font-size:1.5rem;font-weight:800;color:var(--text);margin-bottom:4px}
.auth-head p{font-size:.85rem;color:var(--text-muted);margin:0}
.auth-head-centered{text-align:center}
.auth-head-centered h2{margin-bottom:0}
.auth-head-centered p{margin-top:5px}
.auth-ref-ok{color:var(--success)!important;font-weight:600}
.auth-forgot-row{display:flex;justify-content:flex-end;margin:-5px 0 13px}
.auth-forgot-button{border:0;background:transparent;color:var(--accent);padding:3px 0;font:inherit;font-size:.8rem;font-weight:750;cursor:pointer}
.auth-forgot-button:hover{text-decoration:underline}
.auth-forgot-button:focus-visible{outline:3px solid rgba(11,99,206,.55);outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion:reduce){
  .auth-tab-indicator,.auth-panels{transition:none}
  .auth-panel.active{animation:none}
}
.pw-wrap{position:relative}.pw-wrap input{padding-right:44px!important}.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);min-width:24px;min-height:24px;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;font-size:.9rem;line-height:1;display:flex;align-items:center;justify-content:center}.pw-toggle:hover{color:var(--text)}
.form-group .pw-wrap.password-match-ok input{padding-right:70px!important;border-color:var(--success);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.form-group .pw-wrap.password-match-err input{padding-right:70px!important;border-color:var(--danger);box-shadow:0 0 0 3px rgba(239,68,68,.11)}
.pw-wrap.password-match-ok::after,.pw-wrap.password-match-err::after{position:absolute;right:41px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;line-height:1;pointer-events:none}
.pw-wrap.password-match-ok::after{content:'\2713';background:var(--success-light);color:var(--success)}
.pw-wrap.password-match-err::after{content:'!';background:var(--danger-light);color:var(--danger)}
/* ── Forms ── */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:.78rem;font-weight:700;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.form-group input,.form-group select{width:100%;background:var(--bg-input);border:1.5px solid var(--border);color:var(--text);padding:12px 14px;border-radius:10px;font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit}
.form-group input:focus,.form-group select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(180,140,54,.16);background:#fff}
.field-hint{font-size:.72rem;color:var(--text-muted);margin-top:5px;padding-left:2px}
.btn-primary{width:100%;background:var(--brand-gold-grad);color:var(--on-gold);border:none;padding:13px;border-radius:10px;font-size:.95rem;font-weight:700;cursor:pointer;transition:opacity .18s,transform .18s;font-family:inherit}
.btn-primary:hover{opacity:.92;transform:translateY(-1px)}
/* ── Balance Banner ── */
.balance-banner{background:linear-gradient(135deg,var(--accent),var(--purple));margin:12px 16px;border-radius:var(--radius);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow)}
.balance-banner .b-label{font-size:.75rem;color:rgba(255,255,255,.8);font-weight:600}
.balance-banner .b-amount{font-size:1.5rem;font-weight:800;color:#fff}
.balance-banner .b-icon{width:44px;height:44px;background:rgba(255,255,255,.15);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem}
/* ── Station Pills ── */
.station-pill-row{display:flex;gap:8px;margin:0 16px 14px;overflow-x:auto;padding:10px 2px 4px;-webkit-overflow-scrolling:touch}
.station-pill-row::-webkit-scrollbar{display:none}
.station-pill{flex-shrink:0;position:relative;padding:8px 16px;border-radius:20px;font-size:.78rem;font-weight:700;text-decoration:none;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-muted);transition:all .18s;white-space:nowrap}
.station-pill.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.station-pill-badge{position:absolute;top:-7px;right:-7px;background:var(--danger);color:#fff;border-radius:50%;min-width:17px;height:17px;font-size:.58rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1;border:2px solid var(--bg);pointer-events:none}
/* ── Draw Selector ── */
.draw-selector{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0;padding:2px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.draw-selector::-webkit-scrollbar{display:none}.draw-selector.ds-few{justify-content:center;overflow-x:hidden}.draw-btn{flex-shrink:0;width:100px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:7px 6px;text-align:center;cursor:pointer;transition:all .18s;box-shadow:var(--shadow-sm)}
.draw-selector.ds-few .draw-btn{flex-shrink:1;min-width:0}
.draw-btn:hover:not(.closed):not(.cancelled):not(.locked):not(.paused){border-color:var(--accent)}
.draw-btn{transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}
.draw-btn.active{border-color:var(--accent);background:var(--accent-light);transform:translateY(-1px);box-shadow:0 4px 12px rgba(180,140,54,.22)}
.draw-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 2px var(--bg-card),0 4px 12px rgba(180,140,54,.28)}
.draw-btn.closed{opacity:.45;cursor:not-allowed}
.draw-btn.cancelled{opacity:.5;cursor:not-allowed;background:#fff1f2;border-color:#fecdd3}
.draw-btn.locked{opacity:.6;cursor:not-allowed;background:#fffbeb;border-color:#fde68a}
.draw-btn.paused{opacity:.6;cursor:not-allowed;background:#fffbeb;border-color:#fde68a}
.draw-btn .d-lock{font-size:.62rem;color:#b45309;margin-top:2px}
.draw-btn .d-phase{font-size:.62rem;font-weight:700;color:var(--accent);text-transform:uppercase;margin-bottom:1px}
.draw-btn .d-time{font-size:.88rem;font-weight:800;color:var(--text)}
.draw-btn .d-label{font-size:.78rem;font-weight:800;color:var(--text);margin-top:1px}
.draw-btn .d-nums{font-size:.65rem;color:var(--warning);font-weight:700;margin-top:1px}
.draw-btn .d-badge{margin-top:2px}
.draw-btn .d-pending{font-size:.62rem;color:var(--text-muted);margin-top:2px}
/* ── Countdown ── */
.countdown-widget{margin:0 16px 14px;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm)}
.countdown-top{padding:10px 16px;display:flex;justify-content:space-between;align-items:center}
.countdown-top.state-open{background:var(--success-light)}
.countdown-top.state-betting-closed{background:var(--warning-light)}
.countdown-top.state-closed{background:var(--danger-light)}
.countdown-top.state-idle{background:var(--bg-input2)}
.countdown-top.state-waiting{background:var(--purple-light);animation:pulse-wait 2s ease-in-out infinite}
@keyframes pulse-wait{0%,100%{opacity:1}50%{opacity:.65}}
.countdown-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.state-open .countdown-label{color:var(--success)}
.state-betting-closed .countdown-label{color:var(--warning)}
.state-closed .countdown-label{color:var(--danger)}
.state-idle .countdown-label{color:var(--text-muted);font-weight:700}
.state-waiting .countdown-label{color:var(--purple)}
.countdown-timer{font-size:1.4rem;font-weight:800;letter-spacing:2px;font-variant-numeric:tabular-nums;font-family:'Courier New',monospace}
.state-open .countdown-timer{color:var(--success)}
.state-betting-closed .countdown-timer{color:var(--warning)}
.state-closed .countdown-timer{color:var(--danger)}
.state-idle .countdown-timer{color:var(--text-light)}
.state-waiting .countdown-timer{color:var(--purple);font-size:1.1rem;letter-spacing:6px}
.countdown-bar-wrap{height:5px;background:rgba(0,0,0,.08)}
.countdown-bar-fill{height:100%;transition:width 1s linear}
.state-open .countdown-bar-fill{background:var(--success)}
.state-betting-closed .countdown-bar-fill{background:var(--warning)}
.state-closed .countdown-bar-fill{background:var(--danger)}
.state-waiting .countdown-bar-fill{background:var(--purple)}
/* ── Game Mode Toggle ── */
.mode-toggle-header{margin:0 16px 0;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);cursor:pointer;user-select:none;transition:border-color .18s}
.mode-toggle-header:hover{border-color:var(--accent-light)}
.mode-toggle-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 14px}
.mode-toggle-left{display:flex;align-items:center;gap:10px}
.mode-toggle-label{font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:1px}
.mode-toggle-value{font-size:.9rem;font-weight:800;color:var(--accent)}
.mode-toggle-value.gi-val{color:var(--purple)}
.mode-toggle-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.mode-toggle-icon.ts-icon{background:var(--accent-light);color:var(--accent)}
.mode-toggle-icon.gi-icon{background:var(--purple-light);color:var(--purple)}
.mode-toggle-chevron{color:var(--text-muted);font-size:.85rem;transition:transform .25s}
.mode-toggle-chevron.open{transform:rotate(180deg)}
.mode-panel{margin:0 16px;overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s;opacity:0}
.mode-panel.expanded{max-height:200px;opacity:1}
.mode-panel-inner{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 0 4px}
.mode-card{padding:14px 12px;border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .18s;background:var(--bg-card);text-align:center;user-select:none}
.mode-card:hover:not(.disabled-mode){border-color:var(--accent-light)}
.mode-card .mc-icon{font-size:1.4rem;margin-bottom:6px}
.mode-card .mc-title{font-size:.88rem;font-weight:800;color:var(--text);margin-bottom:3px}
.mode-card .mc-sub{font-size:.68rem;color:var(--text-muted);line-height:1.4}
.mode-card.active-ts{border-color:var(--accent);background:var(--accent-light)}
.mode-card.active-ts .mc-title{color:var(--accent)}
.mode-card.active-gi{border-color:var(--purple);background:var(--purple-light)}
.mode-card.active-gi .mc-title{color:var(--purple)}
.mode-card.disabled-mode{opacity:.35;cursor:not-allowed;pointer-events:none}
.same-num-notice{margin:0 0 10px;padding:10px 14px;background:#fef9c3;border:1px solid #fde047;border-radius:var(--radius-sm);font-size:.78rem;color:#854d0e;font-weight:600;display:none;align-items:center;gap:8px}
/* ── Number inputs ── */
.num-inputs-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px}
.num-input-wrap label{display:block;font-size:.72rem;font-weight:700;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.num-input{width:100%;background:var(--bg-input);border:2px solid var(--border);border-radius:10px;padding:14px;text-align:center;color:var(--text);font-size:1.3rem;font-weight:800;outline:none;transition:all .2s;font-family:inherit}
.num-input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(180,140,54,.16)}
/* ── TS Amounts ── */
.ts-amounts{margin:0 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ts-amt-wrap{display:flex;flex-direction:column}
.ts-amt-box{border-radius:var(--radius-sm);overflow:hidden;border:2px solid var(--border)}
.ts-amt-box.amt-error{border-color:#e74c3c !important}
.gi-amount-wrap.amt-error{border-color:#e74c3c !important}
.ts-amt-box.tumbok-box{border-color:var(--tumbok)}
.ts-amt-box.sahod-box{border-color:var(--sahod)}
.ts-amt-label{padding:6px 10px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.tumbok-box .ts-amt-label{background:var(--tumbok-light);color:var(--tumbok)}
.sahod-box .ts-amt-label{background:var(--sahod-light);color:var(--sahod)}
.ts-amt-input{width:100%;border:none;background:var(--bg-input);color:var(--text);padding:10px 12px;font-size:1rem;font-weight:800;outline:none;font-family:inherit;text-align:center}
/* ── Gitnaan Amount ── */
.gi-amount{margin:0 0 12px}
.gi-amount-wrap{display:flex;align-items:center;background:var(--bg-input);border:2px solid var(--purple);border-radius:10px;overflow:hidden}
.gi-prefix{padding:0 14px;color:var(--purple);font-size:1rem;font-weight:700;border-right:1px solid var(--border);background:var(--purple-light);height:100%;display:flex;align-items:center;min-height:50px}
.gi-input{flex:1;border:none;background:transparent;color:var(--text);padding:14px;font-size:1.1rem;font-weight:700;outline:none;font-family:inherit}
/* ── Bettor Name (optional) ── */
.bettor-name-wrap{margin:0 0 8px}
.bettor-name-input{width:100%;background:var(--bg-input);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-size:.95rem;font-weight:600;outline:none;transition:all .2s;font-family:inherit}
.bettor-name-input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(180,140,54,.16)}
.bettor-name-input::placeholder{color:rgba(150,150,160,.7);font-weight:500}
/* ── Payout Panel ── */
.payout-panel{margin:0 0 12px;border-radius:8px;border:1.5px solid var(--border);overflow:hidden;background:var(--bg-card)}
.pp-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border);transition:background .18s}
.pp-row:last-child{border-bottom:none}
.pp-row.pp-total{background:var(--bg-input2)}
.pp-label{font-size:.78rem;color:var(--text-muted);font-weight:600;display:flex;align-items:center;gap:7px}
.pp-label i{color:var(--text-light);font-size:.85rem;opacity:.7}
.pp-mult{font-size:.62rem;font-weight:700;color:var(--text-light);background:var(--bg-input2);padding:2px 7px;border-radius:99px;letter-spacing:.3px;border:1px solid var(--border);margin-left:2px}
.pp-value{font-size:.92rem;font-weight:800;color:var(--text);display:inline-block;transition:color .15s}
.pp-value.win{color:var(--success)}
.pp-value.deduct{color:var(--danger)}
@keyframes ppPulse{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.pp-value.updated{animation:ppPulse .35s cubic-bezier(.4,0,.2,1)}
/* ── Bet Buttons ── */
.btn-place-bet{display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 32px);margin:12px 16px 10px;background:linear-gradient(135deg,#e0bb66 0%,#d8ab4e 50%,#b48c36 100%);color:var(--on-gold);border:none;padding:16px;border-radius:12px;font-size:1rem;font-weight:800;letter-spacing:.3px;cursor:pointer;font-family:inherit;position:relative;overflow:hidden;transition:all .18s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -3px 0 rgba(0,0,0,.18),0 6px 18px rgba(180,140,54,.4);text-shadow:0 1px 0 rgba(255,255,255,.25);user-select:none;-webkit-tap-highlight-color:transparent}
.btn-place-bet::before{content:'';position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,transparent 100%);pointer-events:none;border-radius:12px 12px 0 0;transition:opacity .18s}
.btn-place-bet:hover:not(:disabled):not([aria-disabled="true"]){background:linear-gradient(135deg,#eccb85 0%,#e0bb66 50%,#c49b46 100%);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.18),0 10px 24px rgba(180,140,54,.5)}
.btn-place-bet:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(1px);background:linear-gradient(135deg,#b48c36 0%,#96721f 50%,#7a5c19 100%);box-shadow:inset 0 3px 6px rgba(0,0,0,.3),inset 0 -1px 0 rgba(0,0,0,.1),0 2px 6px rgba(180,140,54,.3)}
.btn-place-bet:active:not(:disabled):not([aria-disabled="true"])::before{opacity:.2}
.btn-place-bet:disabled,.btn-place-bet[aria-disabled="true"]{background:linear-gradient(135deg,#94a3b8 0%,#94a3b8 100%);cursor:not-allowed;opacity:.7;filter:saturate(.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 3px rgba(0,0,0,.08)}
.btn-place-bet:disabled::before,.btn-place-bet[aria-disabled="true"]::before{display:none}
.btn-place-bet:disabled,.btn-place-bet[aria-disabled="true"]{opacity:.4;cursor:not-allowed;background:var(--border2);box-shadow:none}
/* ── Modals ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:400;align-items:flex-end;justify-content:center;backdrop-filter:blur(3px)}
.modal-overlay.active{display:flex}
.modal{background:var(--bg-card);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:24px;width:100%;max-width:450px;box-shadow:var(--shadow-lg);animation:slideUp .25s cubic-bezier(.4,0,.2,1);max-height:90vh;overflow-y:auto}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.password-reset-overlay{inset:var(--password-reset-vv-top,0) 0 auto;height:var(--password-reset-vv-height,100dvh);align-items:center;padding:12px;background:rgba(10,15,25,.62);z-index:520;overflow:hidden}
.password-reset-modal{position:relative;width:100%;max-width:354px;max-height:calc(var(--password-reset-vv-height,100dvh) - 24px);overflow-y:auto;overscroll-behavior:contain;padding:31px 26px 28px;background:var(--bg-card);border:1px solid rgba(148,163,184,.35);border-radius:16px;box-shadow:0 24px 70px rgba(15,23,42,.38);text-align:center;animation:passwordResetIn .22s cubic-bezier(.2,.75,.35,1)}
@keyframes passwordResetIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.password-reset-close{position:absolute;top:10px;right:10px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:transparent;color:var(--text-muted);font-size:1.05rem;cursor:pointer}
.password-reset-close:hover{background:var(--bg-input2);color:var(--text)}
.password-reset-close:focus-visible,.password-reset-resend:focus-visible,.password-reset-success .btn-primary:focus-visible{outline:3px solid #0b63ce;outline-offset:2px}
.password-reset-icon{width:70px;height:70px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;gap:1px;border:1px solid rgba(218,165,60,.34);border-radius:50%;background:linear-gradient(145deg,#fff8e8,#fff0c9);color:#c7952d;font-size:1.3rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.password-reset-icon .fa-mobile-alt{font-size:1.65rem;margin-left:-5px}
.password-reset-icon .fa-key{position:relative;z-index:1;transform:rotate(-10deg)}
.password-reset-modal>h2{margin:0;color:var(--text);font-size:1.38rem;font-weight:850;letter-spacing:-.015em}
.password-reset-modal>#passwordResetDescription{margin:5px 0 19px;color:var(--text-muted);font-size:.78rem;line-height:1.45}
.password-reset-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 20px;padding:0;list-style:none}
.password-reset-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--text-muted);font-size:.7rem;font-weight:650}
.password-reset-steps li:not(:last-child)::after{content:'';position:absolute;z-index:0;top:11px;left:calc(50% + 14px);width:calc(100% - 28px);height:2px;background:#d7dee8}
.password-reset-steps li.complete:not(:last-child)::after,.password-reset-steps li.active:not(:last-child)::after{background:linear-gradient(90deg,#d19b2d 0 58%,#d7dee8 58%)}
.password-reset-steps li.complete:not(:last-child)::after{background:#d19b2d}
.password-reset-steps span{position:relative;z-index:1;width:23px;height:23px;display:flex;align-items:center;justify-content:center;border:2px solid #ccd5e2;border-radius:50%;background:var(--bg-card);color:#94a3b8;font-size:.7rem;font-weight:850}
.password-reset-steps li.active{color:var(--text)}
.password-reset-steps li.active span,.password-reset-steps li.complete span{border-color:#d19b2d;background:#d19b2d;color:#17120a}
.password-reset-steps small{font:inherit}
.password-reset-message{margin:-4px 0 13px;padding:9px 11px;border:1px solid rgba(180,140,54,.28);border-radius:9px;background:rgba(180,140,54,.09);color:var(--text);font-size:.73rem;line-height:1.4;text-align:left}
.password-reset-message.error{border-color:rgba(220,38,38,.25);background:rgba(220,38,38,.08);color:var(--danger)}
.password-reset-message[hidden],.password-reset-panel[hidden],.password-reset-success[hidden],.password-reset-steps[hidden],.password-reset-icon[hidden]{display:none}
.password-reset-panel{text-align:left}
.password-reset-panel .form-group{margin-bottom:14px}
.password-reset-panel .form-group label{font-size:.71rem;letter-spacing:.075em}
.password-reset-panel .form-group input{min-height:46px;background:var(--bg-card)}
.password-reset-panel .btn-primary{min-height:45px}
.password-reset-resend{display:block;margin:12px auto 0;padding:4px 8px;border:0;background:transparent;color:var(--accent);font:inherit;font-size:.74rem;font-weight:750;cursor:pointer}
.password-reset-resend:disabled{color:var(--text-muted);cursor:not-allowed;opacity:.8}
.password-reset-success{padding-top:3px;text-align:center}
.password-reset-success-icon{width:64px;height:64px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--brand-gold-grad);color:var(--on-gold);font-size:1.35rem;box-shadow:0 10px 24px rgba(180,140,54,.25)}
.password-reset-success h3{margin:0 0 5px;color:var(--text);font-size:1.2rem;font-weight:850}
.password-reset-success p{margin:0 0 18px;color:var(--text-muted);font-size:.8rem;line-height:1.45}
.password-reset-success .btn-primary{display:flex;align-items:center;justify-content:center;min-height:45px;text-decoration:none}
[data-theme="dark"] .password-reset-icon{background:linear-gradient(145deg,#3a2c12,#231b0c);border-color:rgba(218,165,60,.4)}
@media (max-height:620px){.password-reset-modal{padding-top:22px;padding-bottom:20px}.password-reset-icon{width:55px;height:55px;margin-bottom:9px;font-size:1.05rem}.password-reset-icon .fa-mobile-alt{font-size:1.35rem}.password-reset-modal>#passwordResetDescription{margin-bottom:13px}.password-reset-steps{margin-bottom:14px}}
@media (prefers-reduced-motion:reduce){.password-reset-modal{animation:none}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-header h3{font-size:1.05rem;font-weight:800;color:var(--text)}
.modal-close{width:32px;height:32px;background:var(--bg-input2);border:none;border-radius:8px;color:var(--text-muted);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cashout-balance-summary{margin:0 0 14px;padding:4px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:12px}
.cashout-balance-summary>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--border)}
.cashout-balance-summary>div:last-child{border-bottom:0}
.cashout-balance-summary dt{color:var(--text-muted);font-size:.78rem;font-weight:700}
.cashout-balance-summary dd{margin:0;color:var(--text);font-size:.88rem;font-weight:800}
/* Player withdrawal — deliberate review step before the existing request seam. */
.withdrawal-review[hidden]{display:none}
.withdrawal-review-eyebrow{display:flex;align-items:center;gap:7px;margin:0 0 6px;color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase}
.withdrawal-review h4{margin:0 0 5px;color:var(--text);font-size:1.16rem;font-weight:900}
.withdrawal-review>p{margin:0 0 14px;color:var(--text-muted);font-size:.82rem;line-height:1.45}
.withdrawal-review .withdrawal-confirmation-details{margin-bottom:14px}
.withdrawal-review-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:9px}
.withdrawal-review-edit{min-width:0;border:1.5px solid var(--border);border-radius:10px;background:var(--bg-card);color:var(--text);padding:11px 8px;font:inherit;font-size:.83rem;font-weight:800;cursor:pointer}
.withdrawal-review-edit:hover{border-color:var(--border2);background:var(--bg-input)}
.withdrawal-review-edit:focus-visible,.withdrawal-review-confirm:focus-visible{outline:3px solid #0b63ce;outline-offset:2px}
.withdrawal-review-confirm{min-width:0;padding-left:8px;padding-right:8px;line-height:1.15}
.cashout-request-status{margin:10px 0 0;padding:11px 13px;border:1px solid rgba(180,140,54,.32);border-radius:10px;background:rgba(180,140,54,.1);color:var(--text);font-size:.82rem;font-weight:700;line-height:1.4}
.cashout-request-status[hidden]{display:none}
.cashout-request-status:focus,#withdrawalRequestRecoveryBanner:focus{outline:3px solid #0b63ce;outline-offset:2px}
/* Player withdrawal — confirmed request card. The gold treatment signals a
   received request without using success-green reserved for completed money. */
.withdrawal-confirmation{text-align:center;padding:4px 0 2px}
.withdrawal-confirmation[hidden]{display:none}
.withdrawal-confirmation-icon{width:70px;height:70px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--brand-gold-grad);color:var(--on-gold);font-size:1.65rem;box-shadow:0 12px 28px rgba(180,140,54,.28)}
.withdrawal-confirmation-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(180,140,54,.32);border-radius:999px;padding:6px 10px;background:rgba(180,140,54,.1);color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.035em;text-transform:uppercase}
.withdrawal-confirmation h4{margin:12px 0 5px;color:var(--text);font-size:1.3rem;font-weight:900}
.withdrawal-confirmation>p{margin:0 auto 18px;color:var(--text-muted);font-size:.86rem;line-height:1.5}
.withdrawal-confirmation-details{margin:0 0 18px;padding:5px 16px;background:var(--bg-input);border:1px solid var(--border);border-radius:12px;text-align:left}
.withdrawal-confirmation-details div{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--border)}
.withdrawal-confirmation-details div:last-child{border-bottom:0}
.withdrawal-confirmation-details dt{color:var(--text-muted);font-size:.76rem;font-weight:700}
.withdrawal-confirmation-details dd{margin:0;color:var(--text);font-size:.86rem;font-weight:800;text-align:right;overflow-wrap:anywhere}
.withdrawal-confirmation-done{margin-top:0}
.withdrawal-confirmation-history{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;color:var(--accent);font-size:.82rem;font-weight:800;text-decoration:none}
.withdrawal-confirmation-history:hover{text-decoration:underline}
/* ── Confirm Modal ── */
.confirm-nums{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 18px;padding:16px;background:var(--bg-input2);border-radius:var(--radius-sm)}
.cn-num{width:52px;height:52px;background:#fff;border-radius:14px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:900;color:var(--text);box-shadow:var(--shadow-sm)}
[data-theme="dark"] .cn-num{color:#1e293b}
.cn-dash{font-size:1.2rem;color:var(--text-muted)}
.confirm-rows{margin-bottom:18px}
.cr-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:.85rem}
.cr-row.confirm-bet-line{display:grid;grid-template-columns:5.8rem .35rem 3.5rem minmax(0,1fr);align-items:center;column-gap:5px}
.confirm-bet-label{color:var(--text-muted);font-weight:600;white-space:nowrap}
.confirm-bet-stake{min-width:0;text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
.confirm-bet-win{min-width:0;justify-self:stretch;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-row:last-child{border-bottom:none}
.confirm-payment{margin-top:8px;padding:0 10px;background:var(--accent-light);border:1px solid rgba(180,140,54,.32);border-radius:10px}
.confirm-payment .cr-row:last-child{border-bottom:none}
.cr-label{color:var(--text-muted);font-weight:600}
.cr-value{font-weight:700;color:var(--text)}
.cr-value.win{color:var(--success)}
.cr-value.deduct{color:var(--accent);font-size:1rem}
.cr-value.mode-ts{color:var(--accent)}
.cr-value.mode-gi{color:var(--purple)}
.confirm-btns{display:grid;grid-template-columns:minmax(78px,.7fr) minmax(0,1.3fr);gap:10px}
.confirm-cutoff{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-5px 0 12px;padding:9px 11px;border-radius:9px;background:var(--success-light);color:var(--success);font-size:.72rem;font-weight:700}
.confirm-cutoff[hidden]{display:none}
.confirm-cutoff strong{font-size:.9rem;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.confirm-cutoff.closed{background:var(--danger-light);color:var(--danger)}
.btn-cancel-confirm{background:var(--bg-input2);color:var(--text-muted);border:1.5px solid var(--border);padding:14px;border-radius:10px;font-size:.9rem;font-weight:700;cursor:pointer;font-family:inherit}
.btn-confirm-bet{background:var(--brand-gold-grad);color:var(--on-gold);border:none;padding:14px 6px;border-radius:10px;font-size:clamp(.72rem,3.3vw,.9rem);font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 4px 12px rgba(180,140,54,.35);white-space:nowrap}
.btn-confirm-bet:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
/* ── Wallet ── */
.wallet-hero{position:relative;background:var(--wallet-grad);border-radius:var(--radius);margin:12px 16px;box-shadow:0 8px 24px rgba(180,83,9,.16),0 0 0 1px rgba(245,158,11,.28);overflow:hidden}
.wallet-hero::before{content:'';position:absolute;width:170px;height:170px;background:radial-gradient(circle,rgba(251,191,36,.18),transparent 70%);border-radius:50%;top:-60px;right:-50px;pointer-events:none}
.wallet-hero::after{content:'';position:absolute;width:120px;height:120px;background:radial-gradient(circle,rgba(245,158,11,.12),transparent 70%);border-radius:50%;bottom:-34px;left:0;pointer-events:none}
.wallet-hero-top{padding:10px 14px 7px;position:relative;z-index:1}
.wh-heading-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wh-label{font-size:.55rem;color:var(--wallet-gold-text);font-weight:700;margin-bottom:2px;text-transform:uppercase;letter-spacing:.6px}
.wh-label-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--wallet-gold-bright);margin-right:5px;vertical-align:1px}
.balance-privacy-toggle{width:30px;height:30px;margin:-4px -4px 0 0;border:1px solid rgba(180,140,54,.22);border-radius:9px;background:rgba(255,255,255,.38);color:var(--wallet-gold-text);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.72rem}
.balance-privacy-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Banking-style amount: small gold peso, dominant integer, quiet decimals. */
.wh-amount{font-size:1.7rem;font-weight:800;color:#1e293b;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wh-amount .peso{font-size:.55em;font-weight:700;color:var(--wallet-gold-text);margin-right:1px}
.wh-amount .dec{font-size:.55em;font-weight:700;color:#67551f}
.wh-balance-breakdown{display:grid;gap:3px;margin-top:8px;padding:7px 9px;border:1px solid rgba(180,140,54,.2);border-radius:9px;background:rgba(255,255,255,.3)}
.wh-breakdown-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.62rem;color:#7c5419}
.wh-breakdown-row strong{color:#1e293b;font-size:.68rem;font-variant-numeric:tabular-nums;white-space:nowrap}
[data-theme="dark"] .wh-amount .peso{color:#d8ab4e}
[data-theme="dark"] .wh-amount .dec{color:#c9a75f}
[data-theme="dark"] .balance-privacy-toggle{background:rgba(216,171,78,.1);color:#d8ab4e;border-color:rgba(216,171,78,.25)}
[data-theme="dark"] .wh-balance-breakdown{background:rgba(0,0,0,.18);border-color:rgba(216,171,78,.18)}
[data-theme="dark"] .wh-breakdown-row{color:#c9a75f}
[data-theme="dark"] .wh-breakdown-row strong{color:#f3e6c8}
.wallet-hero-bottom{position:relative;z-index:1;background:rgba(255,255,255,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(180,140,54,.28);padding:8px 14px;display:flex;align-items:center;justify-content:space-between;gap:18px}
/* Sub-wallet strip: commission / promotion / refund as icon-chip rows with the
   Convert button riding the whole strip's right edge. Amounts keep the hero's
   ink (slate light / cream dark); chips reuse the app's tinted-icon language. */
.wh-subwallets{flex:1;min-width:0;display:flex;flex-direction:column}
.wh-subrow{display:flex;align-items:center;gap:8px;padding:6px 0}
.wh-subrow+.wh-subrow{border-top:1px solid rgba(180,140,54,.14)}
.wh-subicon{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.58rem;flex-shrink:0}
.wh-subicon.gold{background:var(--wallet-gold-soft);color:var(--wallet-gold-text)}
.wh-subicon.promo{background:var(--purple-light);color:var(--purple)}
.wh-subicon.refund{background:var(--sahod-light);color:var(--sahod)}
.wh-sublabel{font-size:.6rem;font-weight:600;color:#92400e;letter-spacing:.3px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-subamt{font-size:.78rem;font-weight:800;color:#1e293b;font-variant-numeric:tabular-nums}
[data-theme="dark"] .wh-sublabel{color:#d8ab4e}
[data-theme="dark"] .wh-subamt{color:#f3e6c8}
[data-theme="dark"] .wh-subrow+.wh-subrow{border-top-color:rgba(216,171,78,.15)}
/* Promotion/Refund rows collapse behind a whole-card tap (default hidden);
   .sub-open lives on .wallet-hero. Chevron is the visible cue + the real
   focusable control for keyboard/AT since hidden rows are display:none. */
.wallet-hero{cursor:pointer}
.wh-subrow.wh-extra{display:none}
.wallet-hero.sub-open .wh-subrow.wh-extra{display:flex}
.wh-more-btn{flex-shrink:0;width:26px;height:26px;border:none;border-radius:50%;background:var(--wallet-gold-soft);color:var(--wallet-gold-text);font-size:.58rem;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;transition:transform .25s ease}
.wallet-hero.sub-open .wh-more-btn{transform:rotate(180deg)}
[data-theme="dark"] .wh-more-btn{background:rgba(216,171,78,.15);color:#d8ab4e}
/* Dark theme: the light-gold hero has no cream surface to sit on, so it gets its
   own charcoal-gold gradient instead of the light .wallet-grad cream tint. */
[data-theme="dark"] .wallet-hero{background:linear-gradient(135deg,#1c1608 0%,#241c0d 50%,#2e2410 100%)}
[data-theme="dark"] .wh-amount{color:#f3e6c8}
[data-theme="dark"] .wallet-hero-bottom{background:rgba(0,0,0,.35);border-top-color:rgba(216,171,78,.25)}
/* Compact pill inline on the commission row (it converts commission only). */
.btn-convert{background:var(--brand-gold-grad);border:none;color:var(--on-gold);padding:4px 10px;border-radius:99px;font-size:.58rem;font-weight:800;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s,filter .15s;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;margin-left:10px;box-shadow:0 2px 8px rgba(180,140,54,.35)}
.btn-convert:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 4px 12px rgba(180,140,54,.45)}
.btn-convert:active{transform:translateY(0)}
.btn-convert:disabled,.btn-convert.is-ineligible{background:#f2e8ce;color:#826d36;border:1px solid #e5d4a5;box-shadow:none;cursor:not-allowed;filter:none;opacity:1}
.btn-convert:disabled:hover,.btn-convert.is-ineligible:hover{transform:none;filter:none;box-shadow:none}
[data-theme="dark"] .btn-convert:disabled,[data-theme="dark"] .btn-convert.is-ineligible{background:rgba(216,171,78,.12);color:#cdb77d;border-color:rgba(216,171,78,.28)}
.wh-rewards-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px}
.wh-rewards-row .btn-convert{grid-column:2/4;width:100%;min-height:32px;margin-left:0;justify-content:center;padding:6px 10px}
.rebate-hint{font-size:.7rem;color:rgba(255,255,255,.6);margin-top:4px}
.rebate-toast{position:fixed;top:16px;right:16px;background:rgba(15,23,42,.88);color:#fff;padding:13px 18px;border-radius:12px;font-size:.85rem;font-weight:600;z-index:9999;pointer-events:none;opacity:0;transform:translateX(24px);transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px)}
.rebate-toast.show{opacity:1;transform:translateX(0)}
/* ── Wallet History Tabs ── */
.wallet-history-wrap{margin:12px 16px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-card);overflow:visible;isolation:isolate}
.wallet-hist-tabs{position:sticky;top:58px;z-index:90;display:flex;background:var(--bg-card);border-top:1px solid var(--border);border-bottom:2px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 5px 10px rgba(15,23,42,.06)}
.wh-tab{flex:1;padding:10px 8px;border:none;background:transparent;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;cursor:pointer;color:var(--text-muted);font-family:inherit;transition:all .18s;border-bottom:2px solid transparent;margin-bottom:-2px}
.wh-tab + .wh-tab{border-left:1px solid var(--border)}
.wh-tab.active{color:var(--wallet-gold-text);background:var(--wallet-gold-soft);border-bottom-color:var(--wallet-gold)}
.promotion-tab-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-right:3px}
.promotion-tab-dot{position:absolute;top:-4px;right:-5px;width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--bg-card)}
.wh-tab.active .promotion-tab-dot{box-shadow:0 0 0 2px var(--wallet-gold-soft)}
.mission-claim-notice{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:10px 12px;border-radius:10px;background:var(--success-light);border:1px solid color-mix(in srgb,var(--success) 35%,transparent);color:var(--success);font-size:.78rem}
.wh-tab-pane{padding:0 16px;overflow:hidden;border-radius:0 0 var(--radius) var(--radius)}
/* The history card already supplies the page gutter. Cash-flow rows own their
   internal padding, so a second pane gutter only steals room from bank names. */
#wht-deposits{padding-inline:0}
/* Promotions already owns its page-level 16px gutter. Reusing the Wallet tab
   pane must not add a second horizontal inset beneath the full-width sub-tabs. */
.promotion-player-pane{padding-inline:0}
.tx-empty{text-align:center;color:var(--text-muted);padding:28px 0;font-size:.85rem}
.wallet-rewards-empty{min-height:70px;padding:12px 0;display:grid;grid-template-columns:34px minmax(0,1fr) 78px;align-items:center;gap:9px}
.wallet-rewards-empty-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--wallet-gold-soft);color:var(--wallet-gold-text);font-size:1rem;font-weight:900}
.wallet-rewards-empty-copy{min-width:0}
.wallet-rewards-empty-copy h3{margin:0 0 3px;color:var(--text);font-size:.69rem;line-height:1.15;font-weight:800}
.wallet-rewards-empty-copy p{margin:0;color:var(--text-muted);font-size:.5rem;line-height:1.25}
.wallet-rewards-empty-action{width:78px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--brand-gold-grad);color:var(--on-gold);font-size:.56rem;font-weight:800;text-decoration:none;box-shadow:0 2px 6px rgba(180,140,54,.25);transition:filter .15s,transform .15s}
.wallet-rewards-empty-action:hover{filter:brightness(.96)}
.wallet-rewards-empty-action:active{transform:translateY(1px)}
.wallet-rewards-empty-action:focus-visible{outline:2px solid var(--wallet-gold);outline-offset:2px}
.btn-show-more{display:block;width:100%;margin:12px 0 4px;padding:10px;background:none;border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.btn-show-more:hover:not(:disabled){background:var(--bg-card);color:var(--wallet-gold-text);border-color:var(--wallet-gold)}
.btn-show-more:disabled{opacity:.5;cursor:default}
/* Bet-history "Show More" sits among the bet cards — match their surface colour. */
#histMore{background:var(--bg-card)}
/* ── Transactions ── */
.tx-item{display:flex;align-items:center;gap:10px;padding:9px 0 9px 11px;border-left:3px solid transparent;border-bottom:1px solid var(--border)}
.tx-item:last-child{border-bottom:none}
/* Bet-linked Promo & Refund rows open a receipt on click (see receipt.js). */
.tx-item.tx-clickable{cursor:pointer;transition:background .1s}
.tx-item.tx-clickable:hover{background:var(--bg-input)}
.tx-info .ti-combo{font-size:.72rem;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-combo .ti-combo-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:var(--text);letter-spacing:.02em}
/* Bet-receipt modal entrance (receipt.js) — shared by Bet History + wallet. */
@keyframes histRcptIn     { from { opacity:0 } to { opacity:1 } }
@keyframes histRcptCardIn { from { transform:translateY(16px) scale(.94); opacity:0 } to { transform:none; opacity:1 } }
/* Amount TEXT is win/lose-color-neutral (owner rule 2026-07-10: a red loss
   column reads as "rigged") — direction lives in the quiet .amt-sign (muted
   minus, gold-ink plus). The stripes keep their colors: owner wants them. */
.tx-item.tx-credit{border-left-color:var(--success)}
.tx-item.tx-debit{border-left-color:var(--danger)}
.tx-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.tx-icon.credit{background:var(--success-light);color:var(--success)}
.tx-icon.debit{background:var(--danger-light);color:var(--danger)}
.tx-info{flex:1;min-width:0}
.tx-info .ti-title{font-size:.83rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-info .ti-date{font-size:.7rem;color:var(--text-muted);margin-top:1px}
.tx-info .ti-bal{font-size:.67rem;color:var(--text-light);margin-top:1px;font-variant-numeric:tabular-nums}
.bal-arrow{color:var(--border2);margin:0 2px}
.tx-amount{font-size:.9rem;font-weight:800;white-space:nowrap;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tx-amount.credit,.tx-amount.debit{color:var(--text)}
.tx-amount .amt-sign,.cf-amount .amt-sign{color:var(--text-light);font-weight:700;margin-right:1px}
.tx-amount.credit .amt-sign,.cf-amount.credit .amt-sign{color:var(--accent)}
/* ── Referral Rows ── */
.earn-earnings-wrap{margin:0 16px 14px}
.earn-earnings-card{overflow:hidden;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:0 5px 16px rgba(15,23,42,.08)}
.earn-earnings-brand{padding:14px 11px 10px;background:var(--bg-card);border-bottom:1px solid var(--border)}
.earn-earnings-brand::before,.earn-earnings-brand::after{content:none}
.earn-earnings-title{margin:0;padding:0 10px 13px;text-align:center;color:var(--text-muted);font-size:.86rem;font-weight:850;line-height:1.2;letter-spacing:.8px;text-transform:uppercase}
.earn-source-tabs{display:flex;min-width:0;gap:8px;background:transparent}
.earn-source-tab{flex:1;min-width:0;height:44px;border:1.5px solid var(--border2);border-radius:9px;padding:0 12px;background:var(--bg-card);color:var(--accent);font-family:inherit;font-size:.82rem;font-weight:800;line-height:1;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.earn-source-tab.active{background:var(--brand-gold-grad);border-color:transparent;color:var(--on-gold);box-shadow:0 3px 8px rgba(180,140,54,.22)}
.earn-source-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.earn-earnings-body{overflow:hidden;background:var(--bg-card)}
.earn-filter-bar{display:flex;align-items:center;gap:8px;padding:10px 11px;border-bottom:1px solid var(--border);background:var(--bg-input)}
.earn-player-filter,.earn-filter-bar>.pana-select[data-inline],.earn-filter-bar>#earnDateFilter{box-sizing:border-box;flex:0 0 calc(50% - 4px);width:calc(50% - 4px);min-width:0;height:44px}
.earn-player-filter{border:1.5px solid var(--border);border-radius:8px;padding:0 11px;font-size:.82rem;font-family:inherit;background:var(--bg-input);color:var(--text);outline:none}
.earn-player-filter:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.earn-filter-bar>.pana-select[data-inline]{display:block}
.earn-filter-bar>.pana-select .pana-select-btn{height:44px;padding-top:0;padding-bottom:0;border-radius:8px;background:var(--bg-input)}
.earn-custom-dates{gap:8px;flex-wrap:wrap;padding:9px 10px;border-bottom:1px solid var(--border);background:var(--bg-input)}
.earn-custom-apply{background:var(--brand-gold-grad);color:var(--on-gold);border:0;border-radius:7px;padding:8px 16px;font:800 .78rem/1 inherit;cursor:pointer;white-space:nowrap}
.earn-custom-apply:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:360px){
  .earn-filter-bar{flex-wrap:wrap}
  .earn-player-filter,.earn-filter-bar>.pana-select[data-inline],.earn-filter-bar>#earnDateFilter{flex:1 1 100%!important;width:100%!important}
  .earn-custom-dates>.adm-tbl-input{flex:1 1 calc(50% - 4px)!important;width:calc(50% - 4px)!important}
  .earn-custom-dates>.earn-custom-apply{flex:1 0 100%;width:100%}
}
.ref-tbl-head{display:flex;justify-content:space-between;gap:8px;padding:11px 12px;background:var(--bg-card);border-bottom:1px solid var(--border);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}
.earn-active-count{min-width:0;white-space:nowrap}
.earn-active-count strong{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
.earn-earnings-body #earnRows{padding:9px 10px 10px;background:var(--bg-card)}
.ref-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;padding:12px 10px 12px 12px;border:1.5px solid var(--border2);border-radius:9px;background:var(--bg-card);transition:background .1s,border-color .1s}
.ref-row:last-child{margin-bottom:0}
.ref-row:hover{background:var(--bg-input)}
.ref-identity{flex:1;min-width:0}
.ref-username{font-size:.85rem;font-weight:800;color:var(--text)}
.ref-meta{font-size:.7rem;color:var(--text-muted);margin-top:2px}
.ref-earned{flex-shrink:0;min-width:0;padding:9px 11px;text-align:right;font-size:.85rem;font-weight:800;color:var(--text);white-space:nowrap;background:color-mix(in srgb,var(--bg-card) 88%,var(--wallet-gold-bright));border:1px solid rgba(180,140,54,.3);border-radius:8px;font-variant-numeric:tabular-nums}
.ref-earned.has-earned .ref-earned-total{color:var(--success)}
.earn-first-referral{min-height:143px;padding:10px 20px 12px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:9px}
.earn-first-referral-icon{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--accent-light);color:var(--accent);font-size:.8rem;line-height:1}
.earn-first-referral h3{margin:5px 0 2px;color:var(--text);font-size:.8rem;line-height:1rem;font-weight:800}
.earn-first-referral p{max-width:270px;margin:0;color:var(--text-muted);font-size:.625rem;line-height:.82rem}
.earn-first-referral-action{min-width:132px;height:34px;margin-top:7px;padding:0 14px;border:0;border-radius:7px;background:var(--brand-gold-grad);color:var(--on-gold);font:800 .68rem/34px inherit;cursor:pointer;box-shadow:0 2px 5px rgba(180,140,54,.24);transition:filter .15s,transform .15s}
.earn-first-referral-action:hover{filter:brightness(.96)}
.earn-first-referral-action:active{transform:translateY(1px)}
.earn-first-referral-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.earn-no-match{min-height:195px;padding:14px 20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;background:var(--bg-card)}
.earn-no-match-icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--bg-input);color:var(--text-muted);font-size:1rem;line-height:1}
.earn-no-match h3{max-width:300px;margin:8px 0 3px;color:var(--text);font-size:.94rem;line-height:1.3;font-weight:850;overflow-wrap:anywhere}
.earn-no-match p{max-width:290px;margin:0;color:var(--text-muted);font-size:.76rem;line-height:1.4}
.earn-no-match-action{min-width:132px;height:38px;margin-top:18px;padding:0 16px;border:0;border-radius:8px;background:var(--brand-gold-grad);color:var(--on-gold);font:800 .76rem/38px inherit;cursor:pointer;box-shadow:0 3px 7px rgba(180,140,54,.28);transition:filter .15s,transform .15s}
.earn-no-match-action:hover{filter:brightness(.96)}
.earn-no-match-action:active{transform:translateY(1px)}
.earn-no-match-action:focus-visible{outline:3px solid #0b63ce;outline-offset:2px}
@media(max-width:360px){
  .earn-earnings-brand{padding:11px 9px 9px}
  .earn-earnings-title{padding-bottom:9px;font-size:.78rem}
  .earn-source-tabs{gap:6px}
  .earn-source-tab{height:42px;font-size:.78rem}
  .earn-filter-bar{gap:6px;padding:8px}
  .earn-player-filter,.earn-filter-bar>.pana-select[data-inline],.earn-filter-bar>#earnDateFilter{flex-basis:calc(50% - 3px);width:calc(50% - 3px);height:42px}
  .earn-filter-bar>.pana-select .pana-select-btn{height:42px}
  .ref-tbl-head{padding:9px 10px;font-size:.64rem;letter-spacing:.25px}
  .earn-earnings-body #earnRows{padding:7px 8px 8px}
  .ref-row{gap:6px;padding:10px 8px 10px 10px}
  .ref-meta{font-size:.65rem}
  .ref-earned{padding:7px 8px;font-size:.8rem}
}
/* ── Admin ── */
.admin-tabs{display:flex;margin:12px 16px;background:var(--bg-card);border-radius:var(--radius-sm);padding:4px;border:1px solid var(--border)}
.admin-tab-btn{flex:1;padding:10px;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-size:.82rem;background:transparent;color:var(--text-muted);transition:all .18s;font-family:inherit}
.admin-tab-btn.active{background:var(--accent);color:var(--on-accent)}
.admin-section{margin:12px 16px}
.admin-section h3{font-size:.78rem;font-weight:700;color:var(--text-muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:.8px}
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border)}
.admin-table{width:100%;border-collapse:collapse;font-size:.82rem;background:var(--bg-card)}
.admin-table th{text-align:left;padding:10px 14px;background:var(--bg-input);color:var(--text-muted);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border)}
.admin-table td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--text)}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:var(--bg-input)}
.btn-sm{padding:5px 12px;border-radius:6px;border:none;font-size:.75rem;font-weight:700;cursor:pointer;font-family:inherit}
.btn-sm-primary{background:var(--accent-light);color:var(--accent)}
.btn-sm-success{background:var(--success-light);color:var(--success)}
.btn-sm-danger{background:var(--danger-light);color:var(--danger)}
/* One always-visible result-lifecycle action. Neutral while either count loads,
   calm green when both queues are clear, and pulsing red when work remains. */
.rc-results-manager-btn{border:1px solid transparent;transition:background .18s,color .18s,box-shadow .18s;box-shadow:none;animation:none;white-space:nowrap}
.rc-results-manager-btn.is-loading{background:var(--bg-input2);color:var(--text-muted);border-color:var(--border)}
.rc-results-manager-btn.is-zero{background:var(--success-light);color:var(--success)}
.rc-results-manager-btn.is-pending{background:var(--danger);color:#fff;animation:rcEnterPulse 1.6s ease-in-out infinite}
@keyframes rcEnterPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}
  50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}
}
@media (prefers-reduced-motion:reduce){.rc-results-manager-btn.is-pending{animation:none;box-shadow:0 0 0 3px rgba(239,68,68,.35)}}
.admin-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px}
.admin-card-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.admin-card-header h4{font-size:1rem;font-weight:800}
.admin-card-body{padding:16px}
.payout-tag{background:var(--success-light);color:var(--success);padding:2px 10px;border-radius:12px;font-size:.7rem;font-weight:700}
.pending-badge{background:var(--warning-light);color:var(--warning);padding:2px 10px;border-radius:12px;font-size:.7rem;font-weight:700}
/* ── Reports ── */
/* Toolbar: period filter + range label + export/print actions */
.rpt-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 20px;flex-wrap:wrap;margin-bottom:18px;padding:16px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.rpt-filter{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.rpt-field{display:flex;flex-direction:column;gap:4px}
.rpt-field label{font-size:.66rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.rpt-field select,.rpt-field input{box-sizing:border-box;height:40px;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.9rem;font-weight:600;outline:none;transition:border-color .15s,box-shadow .15s}
.rpt-field select{cursor:pointer;min-width:150px}
.rpt-field select:focus,.rpt-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.rpt-go{box-sizing:border-box;height:40px;padding:0 22px;background:var(--accent);border:none;border-radius:8px;color:var(--on-accent);font-size:.9rem;font-weight:700;cursor:pointer;transition:filter .15s}
.rpt-go:hover{filter:brightness(1.07)}
.rpt-toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rpt-range-label{display:inline-flex;align-items:center;gap:9px;font-size:2.2rem;font-weight:700;color:var(--text);white-space:nowrap}
.rpt-range-label i{color:var(--accent);font-size:1.6rem}
.rpt-date-nav{display:inline-flex;align-items:center;gap:9px;font-size:2.2rem}
.rpt-date-arrow{display:inline-flex;align-items:center;justify-content:center;width:1.35em;height:1.35em;border-radius:12px;color:var(--accent);text-decoration:none;line-height:1;cursor:pointer;transition:background .12s ease,transform .12s ease}
.rpt-date-arrow:hover{background:var(--accent-light);transform:scale(1.08)}
.rpt-date-arrow:active{transform:scale(.96)}
.rpt-date-arrow.is-disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.rpt-menu{position:relative}
.rpt-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.8rem;font-weight:700;cursor:pointer;user-select:none}
.rpt-menu>summary::-webkit-details-marker{display:none}
.rpt-menu>summary:hover{border-color:var(--accent);color:var(--accent)}
.rpt-menu-caret{font-size:.62rem;transition:transform .15s}
.rpt-menu[open] .rpt-menu-caret{transform:rotate(180deg)}
.rpt-menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:2px}
.rpt-menu-list button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 11px;background:none;border:none;border-radius:7px;color:var(--text);font-size:.8rem;font-weight:600;cursor:pointer}
.rpt-menu-list button:hover{background:var(--bg-input)}
.rpt-menu-list button i{color:var(--text-muted);width:16px;text-align:center}
.rpt-print-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:var(--accent);border:none;border-radius:8px;color:var(--on-accent);font-size:.8rem;font-weight:700;cursor:pointer;transition:filter .15s}
.rpt-print-btn:hover{filter:brightness(1.07)}

/* Responsive dashboard grid */
.rpt-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:start}
.rpt-col-12{grid-column:1/-1}
.rpt-col-6{grid-column:span 6}
@media (max-width:1100px){.rpt-grid{grid-template-columns:1fr}.rpt-col-6,.rpt-col-12{grid-column:1/-1}}

/* Hero KPI zone */
.rpt-kpis{display:grid;grid-template-columns:minmax(280px,1fr) 2fr;gap:16px}
@media (max-width:900px){.rpt-kpis{grid-template-columns:1fr}}
.rpt-hero{position:relative;overflow:hidden;border-radius:var(--radius);padding:20px 22px;color:#fff;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.rpt-hero.pos{background:linear-gradient(135deg,#16a34a,#15803d)}
.rpt-hero.neg{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.rpt-hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rpt-hero-label{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;opacity:.95}
.rpt-hero-badge{font-size:.66rem;font-weight:800;background:rgba(255,255,255,.22);padding:4px 10px;border-radius:20px;white-space:nowrap}
.rpt-hero-val{font-size:2.3rem;font-weight:800;line-height:1.1;margin:12px 0 5px;letter-spacing:-.02em}
.rpt-hero-delta{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;opacity:.95}
.rpt-hero-delta.neutral{opacity:.8}
.rpt-hero-spark{position:relative;height:42px;margin-top:16px}
.rpt-hero-spark-lbl{display:block;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.75;margin-top:4px}
.rpt-kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:520px){.rpt-kpi-grid{grid-template-columns:1fr}}

/* Supporting KPI cards */
.rpt-kpi-card{background:var(--bg-card);border-radius:var(--radius);padding:14px 15px;border:1.5px solid var(--border);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:11px;overflow:hidden}
.rpt-kpi-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;background:var(--bg-input);color:var(--text-muted)}
.rpt-kpi-info{flex:1;min-width:0}
.rpt-kpi-card .kpi-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:2px}
.rpt-kpi-card .kpi-val{font-size:1.05rem;font-weight:800;color:var(--text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpt-kpi-card .kpi-sub{font-size:.62rem;color:var(--text-muted);margin-top:1px}
.rpt-kpi-card.blue{border-color:#bfdbfe}.rpt-kpi-card.blue .rpt-kpi-icon{background:#eff6ff;color:#2563eb}.rpt-kpi-card.blue .kpi-val{color:var(--accent)}
.rpt-kpi-card.green{border-color:#bbf7d0}.rpt-kpi-card.green .rpt-kpi-icon{background:#f0fdf4;color:#16a34a}.rpt-kpi-card.green .kpi-val{color:var(--success)}
.rpt-kpi-card.red{border-color:#fecaca}.rpt-kpi-card.red .rpt-kpi-icon{background:#fff1f2;color:#dc2626}.rpt-kpi-card.red .kpi-val{color:var(--danger)}
.rpt-kpi-card.orange{border-color:#fed7aa}.rpt-kpi-card.orange .rpt-kpi-icon{background:#fff7ed;color:#ea580c}.rpt-kpi-card.orange .kpi-val{color:var(--accent2)}
.kpi-delta{font-size:.6rem;font-weight:700;margin-top:3px}
.kpi-delta.pos{color:var(--success)}
.kpi-delta.neg{color:var(--danger)}

/* Card notes & header controls */
.rpt-chart-note{padding:0 16px 14px;font-size:.7rem;color:var(--text-muted);line-height:1.5}
.rpt-hd-sub{font-size:.72rem;color:var(--text-muted);font-weight:600}
.rpt-hd-btn{padding:5px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:7px;color:var(--text-muted);font-size:.72rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.rpt-hd-btn:hover{border-color:var(--accent);color:var(--accent)}
.rpt-table-scroll{overflow-x:auto}
.rpt-tfoot{background:var(--bg-input)}

/* Station Breakdown → phase drill-down */
.rpt-station-row td{font-weight:700}
.rpt-expandable{cursor:pointer}
.rpt-expandable:hover td{background:var(--bg-input)}
.rpt-expandable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rpt-caret{font-size:.62rem;color:var(--text-muted);width:12px;flex-shrink:0;transition:transform .18s ease}
.rpt-expandable.rpt-open .rpt-caret{transform:rotate(90deg);color:var(--accent)}
.rpt-caret-spacer{width:12px;flex-shrink:0;display:inline-block}
.rpt-phase-count{font-size:.58rem;font-weight:700;color:var(--text-muted);background:var(--bg-input);border:1px solid var(--border);border-radius:20px;padding:1px 7px;margin-left:2px;white-space:nowrap}
.rpt-phase-row td{background:var(--bg-input);border-bottom:1px solid var(--border);font-weight:400}
.rpt-phase-row td:first-child{padding-left:40px}
.rpt-phase-label{display:flex;align-items:center;gap:8px}
.rpt-phase-tag{font-size:.66rem;font-weight:800;letter-spacing:.3px;color:var(--accent);background:rgba(37,99,235,.1);border-radius:6px;padding:2px 8px;white-space:nowrap}
.rpt-phase-time{font-size:.72rem;color:var(--text-muted);font-weight:600}

/* Operating-expenses form */
.rpt-expense-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:16px 18px}
.rpt-ef-field{display:flex;flex-direction:column;gap:4px}
.rpt-ef-field.rpt-ef-grow{flex:1;min-width:160px}
.rpt-ef-field label{font-size:.66rem;color:var(--text-muted);font-weight:700}
.rpt-ef-field input,.rpt-ef-field select{padding:8px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.82rem;outline:none}
.rpt-ef-field input:focus,.rpt-ef-field select:focus{border-color:var(--accent)}
.rpt-ef-add{height:38px;padding:0 16px;background:var(--accent);border:none;border-radius:7px;color:var(--on-accent);font-size:.82rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.rpt-ef-add:hover{filter:brightness(1.07)}

/* Print / PDF: paper-friendly report (charts + tables), no chrome */
.rpt-print-head{display:none}
@media print{
  .adm-sidebar,.adm-topbar,.topnav,.rpt-toolbar,.rpt-no-print,.rpt-hd-btn,.rpt-menu,.rpt-print-btn{display:none!important}
  .adm-main{margin-left:0!important}
  .adm-content{padding:0!important}
  .rpt-print-head{display:block;margin-bottom:14px}
  .rpt-print-head h1{font-size:1.2rem;margin:0 0 2px}
  .rpt-print-head p{font-size:.85rem;color:#444;margin:0}
  .rpt-grid{display:block}
  .rpt-grid>*{margin-bottom:14px;break-inside:avoid;page-break-inside:avoid}
  .rpt-col-6,.rpt-col-12{grid-column:auto}
  .rpt-phase-row{display:table-row!important}
  .rpt-caret,.rpt-phase-count{display:none!important}
  .adm-section{box-shadow:none;border:1px solid #ccc}
  .rpt-hero{color:#111;background:none!important;border:1px solid #ccc}
  .rpt-hero-badge{background:#eee;color:#111}
  .rpt-hero-spark,.rpt-hero-spark-lbl{display:none}
}
/* ── Quick Grid ── */
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 16px 14px}
.quick-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;border-radius:var(--radius);text-decoration:none;color:#fff;box-shadow:var(--shadow)}
.quick-card i{font-size:2rem}
.quick-card span{font-weight:700;font-size:.9rem}
/* ── Bet History ── */
.hist-filter-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 14px 6px}
.hist-station-select,.hist-filter-bar>.pana-select:last-child{grid-column:1/-1}
.hist-select{width:100%;background:var(--bg-card);border:1.5px solid var(--border);color:var(--text);padding:9px 12px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;outline:none;cursor:pointer;font-family:inherit;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;transition:border-color .18s}
.hist-select:focus{border-color:var(--accent)}
select option{background:var(--bg-card);color:var(--text)}
/* ── Custom station dropdown (bet page) ── */
.station-dd{position:relative;display:block;width:100%}
.station-dd-btn{
  display:flex;width:100%;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#dcb668 0%,#d8ab4e 50%,#b48c36 100%);
  color:var(--on-gold);border:none;padding:14px 16px;
  font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;font-family:inherit;position:relative;overflow:hidden;
  transition:all .18s cubic-bezier(.4,0,.2,1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.18),0 2px 8px rgba(180,140,54,.35);
  text-shadow:0 1px 0 rgba(255,255,255,.25);user-select:none;-webkit-tap-highlight-color:transparent;
}
.station-dd-btn:hover{filter:brightness(1.06)}
.station-dd-btn:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.28);transform:translateY(1px)}
.station-dd-btn .sdd-pin{font-size:.95rem;flex-shrink:0}
.station-dd-btn .sdd-selected-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.station-dd-btn .sdd-caret{font-size:.68rem;flex-shrink:0;transition:transform .2s}
.station-dd.open .sdd-caret{transform:rotate(180deg)}
.station-dd-panel{position:fixed;min-width:210px;max-height:60vh;overflow-y:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;z-index:1000;display:none}
.station-dd-panel.open{display:block;animation:sddIn .14s ease}
@keyframes sddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.sdd-head{font-size:.6rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-light);padding:6px 12px 8px}
.station-dd-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;border-radius:9px;text-decoration:none;color:var(--text);font-size:.86rem;font-weight:600;white-space:nowrap}
.station-dd-item:hover{background:var(--bg-input)}
.station-dd-item.active{background:var(--accent-light);color:var(--accent);font-weight:800}
.sdd-badge{background:var(--danger);color:#fff;border-radius:10px;font-size:.6rem;font-weight:800;padding:2px 7px;line-height:1.4}
/* Awaiting-grant badge — distinct color from .sdd-badge (needs a result
   entered) since a station row in the Results Calendar's picker can show
   both at once for two different reasons. */
.sdd-badge-grant{background:var(--warning);color:#fff;border-radius:10px;font-size:.6rem;font-weight:800;padding:2px 7px;line-height:1.4;display:inline-flex;align-items:center;gap:3px}
.custom-date-wrap{margin:0 14px 6px;display:none}
.custom-date-wrap.visible{display:block}
.custom-date-label{display:block;margin:0 2px 5px;color:var(--text-muted);font-size:.7rem;font-weight:700;line-height:1.2}
.custom-date-input{width:100%;background:var(--bg-card);border:1.5px solid var(--accent);color:var(--text);padding:9px 12px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;outline:none;font-family:inherit}
.custom-date-input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.custom-date-error{margin:6px 2px 0;color:#b91c1c;font-size:.72rem;font-weight:700}
[data-theme="dark"] .custom-date-error{color:#f87171}
.custom-date-error[hidden]{display:none}
.hist-summary{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin:4px 14px 8px}
.hs-pill{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--border)}
.hs-pill:last-child{border-bottom:none}
.hs-pill .hp-lbl{font-size:.6rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;order:1}
.hs-pill .hp-val{font-size:.8rem;font-weight:800;color:var(--text);line-height:1;white-space:nowrap;order:2}
.hs-pill.hp-win .hp-val{color:var(--success)}
.history-wrap{padding:0 14px 8px}
.dg-header{font-size:.65rem;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.7px;padding:8px 0 4px;display:flex;align-items:center;gap:6px}
.dg-header::after{content:'';flex:1;height:1px;background:var(--border)}
.bh-card{background:var(--bg-card);border-radius:8px;margin-bottom:4px;border:1px solid var(--border);display:flex;overflow:hidden;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.bh-card:hover{transform:translateY(-1px);box-shadow:0 4px 14px -6px rgba(0,0,0,.25);border-color:var(--accent)}
.bh-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bh-card:active{transform:translateY(0)}
.bh-stripe{width:3px;flex-shrink:0}
.bh-card.s-won    .bh-stripe{background:#16a34a}
.bh-card.s-lost   .bh-stripe{background:#dc2626}
.bh-card.s-pending .bh-stripe{background:#d97706}
.bh-body{flex:1;min-width:0;padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.bh-line1{display:flex;align-items:center;justify-content:space-between}
.bh-line1-left{display:flex;align-items:center;gap:5px;flex:1;min-width:0;overflow:hidden}
.bh-num{width:26px;height:26px;background:var(--bg-input2);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:900;color:var(--text);border:1px solid var(--border);flex-shrink:0}
.bh-sep{font-size:.65rem;color:var(--text-light);font-weight:700;flex-shrink:0}
.bh-line1-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.bh-amt{font-size:.82rem;font-weight:800;color:var(--text)}
.bh-line2{display:flex;align-items:center;justify-content:space-between}
.bh-line2-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0;overflow:hidden}
.bh-info-text{font-size:.62rem;color:var(--text-muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-result-row{display:flex;align-items:center;gap:5px;font-size:.64rem;color:var(--text-muted)}
.bh-result-row strong{color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;letter-spacing:.03em}
.bh-footer-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.bh-outcome{font-size:clamp(.6rem,2.8vw,.72rem);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.bh-outcome.won{color:var(--success)}
.bh-outcome.processing,.bh-outcome.pending{color:var(--warning)}
.bh-outcome.lost{color:var(--danger)}
.bh-outcome.refunded{color:var(--text-muted)}
.bh-dot-sep{font-size:.55rem;color:var(--text-light);flex-shrink:0}
.bh-line2-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.bh-time{font-size:.62rem;color:var(--text-muted);white-space:nowrap;margin-left:auto}
.bh-bettor-inline{margin-left:10px;min-width:0;font-size:.72rem;font-weight:600;color:var(--text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdot{display:inline-flex;align-items:center;gap:2px;font-size:.6rem;font-weight:700;padding:1px 6px;border-radius:20px;white-space:nowrap}
.sdot.s-won{background:#dcfce7;color:#16a34a}
.sdot.s-lost{background:#fee2e2;color:#dc2626}
.sdot.s-pending{background:#fef3c7;color:#d97706}
.sdot::before{content:'';width:4px;height:4px;border-radius:50%;flex-shrink:0}
.sdot.s-won::before{background:#16a34a}
.sdot.s-lost::before{background:#dc2626}
.sdot.s-pending::before{background:#d97706;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* Text-less "Lost" chip → a compact, perfectly-round status jewel: soft inner ring,
   glossy gradient dot, subtle glow. :empty scopes it to the label-less badge only,
   so any text-bearing lost pill elsewhere keeps the normal pill shape. */
.sdot.s-lost:empty{width:16px;height:16px;padding:0;justify-content:center;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#f2726f,#dc2626);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 1px 3px rgba(220,38,38,.4)}
.sdot.s-lost:empty::before{content:'\00d7';width:auto;height:auto;border-radius:0;background:none;box-shadow:none;
  color:#fff;font-size:12px;font-weight:900;line-height:1;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;text-shadow:0 1px 1px rgba(127,29,29,.55)}
.empty-hist{text-align:center;padding:48px 20px}
.empty-hist .ei-icon{font-size:2.4rem;opacity:.18;margin-bottom:10px}
.empty-hist h3{font-size:.92rem;font-weight:700;color:var(--text);margin-bottom:4px}
.empty-hist p{font-size:.78rem;color:var(--text-muted)}
.no-results-msg{text-align:center;padding:34px 20px 28px;display:none}
.history-empty-icon{width:42px;height:42px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:var(--accent-light);color:var(--accent);font-size:17px}
.history-empty-title{color:var(--text);font-size:15px;font-weight:800;margin:0 0 4px}
.no-results-msg .history-empty-detail{color:var(--text-muted);font-size:12px;margin:0 auto 14px;line-height:1.45}
.history-empty-action{min-height:40px;padding:9px 18px;border:1px solid var(--accent);border-radius:10px;background:var(--brand-gold-grad);color:var(--on-gold);font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 3px 10px rgba(180,140,54,.2)}
.history-empty-action:hover{filter:brightness(1.04)}
.history-empty-action:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.history-empty-action[hidden]{display:none}
.mode-spacer{height:14px}
/* ── Admin Desktop Layout ── */
.adm-body{background:var(--bg);overflow-x:hidden}
.adm-layout{display:flex;min-height:100vh;width:100%;min-width:0;max-width:100%}
/* Sidebar */
.adm-sidebar{width:240px;background:#0a0a0a;flex-shrink:0;display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;overflow-y:visible;overflow-x:hidden;z-index:50;transition:width .16s ease}
.adm-brand{display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid rgba(255,255,255,.08)}
.adm-brand-icon{width:38px;height:38px;background:var(--brand-gold-grad);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--on-gold);font-size:1rem;flex-shrink:0}
.adm-brand-name{font-size:.95rem;font-weight:800;color:#fff;white-space:nowrap}
.adm-brand-sub{font-size:.68rem;color:#64748b;margin-top:1px;white-space:nowrap}
.adm-role-badge{display:inline-block;background:rgba(180,140,54,.16);color:var(--wallet-gold-text);font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:20px}
.adm-nav{padding:12px 0;flex:1;overflow-y:auto}
.adm-nav-item{display:flex;align-items:center;gap:12px;padding:11px 20px;color:#94a3b8;text-decoration:none;font-size:.87rem;font-weight:600;margin:1px 8px;border-radius:8px;border-left:2px solid transparent;transition:background .18s,color .18s;position:relative;white-space:nowrap}
.adm-nav-item i{width:18px;text-align:center;font-size:.9rem;flex-shrink:0}
.adm-nav-item:hover{background:rgba(255,255,255,.06);color:#e2e8f0}
.adm-nav-item.active{color:#fff;background:rgba(180,140,54,.18);border-left-color:var(--accent)}
/* Nav section labels */
.adm-nav-label{padding:14px 20px 4px;font-size:.68rem;font-weight:600;letter-spacing:.08em;color:#475569;text-transform:uppercase;white-space:nowrap}
/* Collapsible game groups beneath the plain GAMES label. */
.adm-nav-group{position:relative}
.adm-nav-group>.adm-nav-group-header{display:flex;align-items:center;gap:12px;padding:11px 20px;color:#94a3b8;font-size:.87rem;font-weight:600;margin:1px 8px;border-radius:8px;cursor:pointer;user-select:none;transition:all .18s;white-space:nowrap}
.adm-nav-group>.adm-nav-group-header:hover{background:rgba(255,255,255,.06);color:#e2e8f0}
.adm-nav-group.open>.adm-nav-group-header{color:#e2e8f0}
.adm-nav-chevron{margin-left:auto;font-size:.72rem;transition:transform .2s;flex-shrink:0}
.adm-nav-group.open>.adm-nav-group-header .adm-nav-chevron{transform:rotate(180deg)}
.adm-nav-subnav{display:none;padding-left:8px}
.adm-nav-group.open>.adm-nav-subnav{display:block}
.adm-nav-flyout-hd{display:none}
/* Sub-nav items */
.adm-nav-subitem{display:flex;align-items:center;gap:10px;padding:8px 14px;color:#64748b;font-size:.83rem;font-weight:600;border-radius:6px;transition:all .18s;text-decoration:none;border-left:2px solid transparent;margin:1px 4px;white-space:nowrap}
.adm-nav-subitem i{width:16px;text-align:center;font-size:.82rem;flex-shrink:0}
.adm-nav-subitem:hover{color:#e2e8f0;background:rgba(255,255,255,.04)}
.adm-nav-subitem.active{color:#fff;background:rgba(180,140,54,.18);border-left-color:var(--accent)}
.adm-logout{color:#f87171!important}
.adm-logout:hover{background:rgba(239,68,68,.1)!important}
/* Main area */
.adm-main{margin-left:240px;width:calc(100% - 240px);max-width:calc(100% - 240px);min-width:0;flex:1 1 auto;min-height:100vh;display:flex;flex-direction:column;transition:margin-left .16s ease,width .16s ease,max-width .16s ease}
.adm-topbar{background:var(--bg-card);padding:0 24px;height:58px;display:flex;align-items:center;gap:14px;justify-content:flex-start;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;flex-shrink:0}
.adm-sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:.92rem;cursor:pointer;transition:all .15s}
.adm-sidebar-toggle:hover{background:var(--bg-input2);color:var(--text)}
.adm-topbar-title{font-size:1.05rem;font-weight:800;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-topbar-title--uppercase{text-transform:uppercase}
.adm-topbar-actions{display:flex;align-items:center;gap:8px}
.adm-content{padding:24px;flex:1;min-width:0;max-width:100%;overflow-x:hidden}

/* Preserve the page name at the managed 1024px Admin boundary. Secondary
   action labels compact to their already-labelled icons before orientation
   text is allowed to collapse into an ambiguous ellipsis. */
@media(max-width:1200px) and (min-width:769px){
  .adm-topbar{gap:10px;padding-right:16px;padding-left:16px}
  .adm-topbar-title{flex:1 0 auto;min-width:max-content;overflow:visible;text-overflow:clip}
  .adm-topbar-actions{min-width:0;gap:6px}
  .adm-topbar .adm-topbar-alert{padding:5px 8px}
  .adm-topbar .adm-topbar-alert-label{display:none}
  .btn-cashin,.btn-cashout{width:36px;height:36px;padding:0;justify-content:center;font-size:0}
  .btn-cashin i,.btn-cashout i{font-size:.78rem}
  .adm-avatar-btn{padding:4px}
  .adm-avatar-name,.adm-avatar-caret{display:none}
  .adm-next-closing{grid-column:span 2}
}

/* ── Avatar menu (topbar) ── */
.adm-avatar-menu{position:relative;margin-left:2px}
.adm-avatar-btn{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 6px;background:transparent;border:1px solid var(--border);border-radius:20px;cursor:pointer;transition:background .15s}
.adm-avatar-btn:hover{background:var(--bg-input2)}
.adm-avatar-circle{width:28px;height:28px;border-radius:50%;background:var(--brand-gold-grad);color:var(--on-gold);font-size:.82rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.adm-avatar-name{font-size:.82rem;font-weight:700;color:var(--text);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-avatar-caret{font-size:.65rem;color:var(--text-muted);transition:transform .15s}
.adm-avatar-menu.open .adm-avatar-caret{transform:rotate(180deg)}
.adm-avatar-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:10px;z-index:60}
.adm-avatar-menu.open .adm-avatar-dropdown{display:block}
.adm-avatar-dd-head{padding:2px 6px 8px}
.adm-avatar-dd-uname{font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:5px}
.adm-avatar-dd-sep{height:1px;background:var(--border);margin:6px 0}
.adm-avatar-dd-link{display:flex;align-items:center;gap:8px;padding:8px 6px;border-radius:8px;text-decoration:none;font-size:.83rem;font-weight:600;transition:background .15s}
button.adm-avatar-dd-link{width:100%;border:0;background:transparent;color:inherit;font-family:inherit;text-align:left;cursor:pointer}

/* ── Collapsed icon rail ── */
body.adm-rail .adm-sidebar{width:64px}
body.adm-rail .adm-main{margin-left:64px;width:calc(100% - 64px);max-width:calc(100% - 64px)}
body.adm-rail .adm-brand{justify-content:center;padding:20px 0}
body.adm-rail .adm-brand>div:not(.adm-brand-icon){display:none}
body.adm-rail .adm-nav-item,body.adm-rail .adm-nav-group>.adm-nav-group-header{justify-content:center;padding:11px 0;gap:0;margin:1px 10px}
body.adm-rail .adm-nav-item>span:not(.adm-nav-badge),
body.adm-rail .adm-nav-group>.adm-nav-group-header>span:not(.adm-nav-chevron),
body.adm-rail .adm-nav-chevron,
body.adm-rail .adm-nav-label{display:none}
body.adm-rail .adm-nav-item i,body.adm-rail .adm-nav-group>.adm-nav-group-header i{width:auto}
/* Only the rail-icon badges (direct children of the collapsed .adm-nav-item)
   become a corner dot — badges inside game flyouts render inline as normal. */
body.adm-rail .adm-nav-item>.adm-nav-badge{position:absolute;top:4px;right:10px;margin-left:0}
/* Game flyouts: kept in normal flow (not display:none) so subitems stay tab-focusable —
   opacity/pointer-events hide it instead, letting :focus-within reveal it on keyboard nav. */
body.adm-rail .adm-nav-group>.adm-nav-subnav{
  display:block;position:absolute;left:100%;top:0;margin-left:8px;min-width:210px;
  background:#0a0a0a;border:1px solid rgba(255,255,255,.08);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);padding:8px;z-index:60;
  opacity:0;pointer-events:none;transition:opacity .12s ease;
}
body.adm-rail .adm-nav-group:hover>.adm-nav-subnav,
body.adm-rail .adm-nav-group:focus-within>.adm-nav-subnav{opacity:1;pointer-events:auto}
body.adm-rail .adm-nav-flyout-hd{display:block;padding:6px 10px 8px;font-size:.68rem;font-weight:700;letter-spacing:.06em;color:#64748b;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px}
/* Overview single-date stepper arrows — sized in em so they match the date text */
.ov-date-arrow{display:inline-flex;align-items:center;justify-content:center;width:1.35em;height:1.35em;border-radius:12px;color:var(--accent);text-decoration:none;line-height:1;cursor:pointer;transition:background .12s ease,transform .12s ease}
.ov-date-arrow:hover{background:var(--accent-light);transform:scale(1.08)}
.ov-date-arrow:active{transform:scale(.96)}
/* Stats row */
.adm-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.adm-stats-row--draws{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-bottom:0}
.gw-balance-grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.adm-stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center}
a.adm-stat-card{transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
a.adm-stat-card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.12);transform:translateY(-1px)}
/* Clickable summary cards that act as focus filters (Draws tab) */
button.adm-stat-card{font-family:inherit;text-align:left}
.adm-stat-card.is-filter{cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
.adm-stat-card.is-filter:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.12);transform:translateY(-1px)}
.adm-stat-card.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light)}
/* Click-to-sort table headers (Draws tab) */
.adm-members-table th.is-sortable{cursor:pointer;user-select:none;white-space:nowrap}
.adm-members-table th.is-sortable:hover{color:var(--accent)}
.adm-members-table th .sort-caret{margin-left:4px;font-size:.7rem;opacity:.3}
.adm-members-table th.is-sortable:hover .sort-caret{opacity:.6}
.adm-members-table th.sort-active{color:var(--accent)}
.adm-members-table th.sort-active .sort-caret{opacity:1;color:var(--accent)}
.adm-stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.95rem;grid-column:1;grid-row:1/3;align-self:center}
.adm-stat-icon.blue{background:var(--accent-light);color:var(--accent)}
.adm-stat-icon.green{background:var(--success-light);color:var(--success)}
.adm-stat-icon.purple{background:var(--purple-light);color:var(--purple)}
.adm-stat-icon.orange{background:var(--accent2-light);color:var(--accent2)}
.adm-stat-icon.red{background:var(--danger-light);color:var(--danger)}
.adm-stat-val{font-size:1.5rem;font-weight:800;color:var(--text);line-height:1;grid-column:2;grid-row:1;align-self:end}
.adm-stat-lbl{font-size:.72rem;font-weight:600;color:var(--text-muted);margin-top:3px;text-transform:uppercase;letter-spacing:.5px;grid-column:2;grid-row:2;align-self:start}
/* Overview dashboard: a fixed executive scan followed by semantically grouped detail.
   The fixed row makes the six decision metrics predictable; custom ordering is scoped
   to each detail group so cash, gaming, activity, and promotion meanings never mix. */
.ov-dashboard-toolbar{align-items:flex-end;gap:16px;flex-wrap:wrap}
.ov-dashboard-shell,#ov-pnl-section,.ov-operations-grid{width:min(100%,2240px);margin-left:auto;margin-right:auto}
.ov-filter-form,.ov-toolbar-right{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.ov-toolbar-right{margin-left:auto;align-items:center;gap:14px}
.ov-range-nav{display:flex;align-items:center;gap:6px;color:var(--text);font-size:1.42rem;font-weight:850;line-height:1;white-space:nowrap}
.ov-dashboard-body{padding:18px;background:var(--bg-input2)}
.ov-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}
.ov-section-eyebrow{display:block;margin-bottom:4px;color:var(--accent);font-size:.63rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.ov-section-heading h2{margin:0;color:var(--text);font-size:1.18rem;line-height:1.2}
.ov-section-heading p{margin:5px 0 0;color:var(--text-muted);font-size:.72rem;line-height:1.45}
.ov-executive-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ov-metric-card{position:relative;min-width:0;color:inherit;text-decoration:none;box-shadow:none;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
.ov-metric-card:is(a,[role="button"]){cursor:pointer}
.ov-metric-card:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--border));box-shadow:0 5px 16px rgba(15,23,42,.08)}
.ov-metric-card--hero{min-height:108px;padding:16px;grid-template-columns:38px minmax(0,1fr);column-gap:12px;border-top:3px solid color-mix(in srgb,var(--accent) 45%,var(--border))}
.ov-metric-card--hero .adm-stat-icon{width:38px;height:38px}
.ov-metric-card--hero .adm-stat-val{font-size:1.28rem}
.ov-metric-card--detail{min-height:86px;padding:13px 14px;grid-template-columns:36px minmax(0,1fr);column-gap:11px}
.ov-metric-card--detail .adm-stat-icon{width:36px;height:36px;border-radius:9px}
.ov-metric-card--detail .adm-stat-val{font-size:1.08rem}
.ov-card-content{min-width:0;align-self:center}
.ov-metric-card .adm-stat-val,.ov-metric-card .adm-stat-lbl{display:block;grid-column:auto;grid-row:auto;min-width:0;font-variant-numeric:tabular-nums}
.ov-metric-card .adm-stat-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-metric-card .adm-stat-lbl{line-height:1.3;white-space:normal}
.ov-card-meta{margin-top:5px;color:var(--text-muted);font-size:.62rem;font-weight:650;line-height:1.35}
.ov-metric-card.is-zero{border-color:var(--border);background:color-mix(in srgb,var(--bg-card) 84%,var(--bg-input2))}
.ov-metric-card.is-zero .adm-stat-val{color:var(--text-muted)!important}
.ov-metric-card.is-zero .adm-stat-icon{filter:grayscale(1);opacity:.62}
.ov-metric-card.is-live:not(.is-zero){border-color:color-mix(in srgb,var(--danger) 35%,var(--border))}
.ov-metric-card .adm-stat-count{position:absolute;top:8px;right:9px;display:inline-flex;align-items:center;padding:1px 7px;border-radius:10px;background:var(--bg-input2);color:var(--text-muted);font-size:.62rem;font-weight:800;line-height:1.7;white-space:nowrap}
.ov-metric-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.ov-metric-group{min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--bg-card);box-shadow:var(--shadow-sm)}
.ov-metric-group-head{display:flex;align-items:center;gap:11px;padding:13px 14px;border-bottom:1px solid var(--border)}
.ov-metric-group-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:9px;background:var(--accent-light);color:var(--accent);font-size:.8rem}
.ov-metric-group-head h3{margin:0;color:var(--text);font-size:.83rem;line-height:1.2}
.ov-metric-group-head p{margin:3px 0 0;color:var(--text-muted);font-size:.64rem;line-height:1.3}
.ov-metric-group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;padding:11px;background:var(--bg-input2)}
.ov-metric-group-grid.ov-editing{outline:2px dashed var(--accent);outline-offset:-5px}
@media(max-width:1500px){.ov-executive-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1050px){
  .ov-dashboard-toolbar{align-items:stretch}.ov-toolbar-right{width:100%;justify-content:space-between;margin-left:0}
  .ov-executive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ov-metric-groups{grid-template-columns:1fr}
  .ov-metric-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .ov-dashboard-body{padding:12px}.ov-section-heading{align-items:flex-start;flex-direction:column}
  .ov-executive-grid,.ov-metric-group-grid{grid-template-columns:1fr}.ov-range-nav{font-size:1.1rem}
}
/* "Next Closing" live widget (Draws tab) — ticks client-side; see script at the
   foot of _tab-draws.php. Escalates amber/red as the soonest cutoff nears. */
.adm-next-closing.is-empty{opacity:.55}
.adm-next-closing.is-empty .adm-stat-val{color:var(--text-muted)}
.adm-next-closing.is-warn .adm-stat-val{color:var(--warning)}
.adm-next-closing.is-urgent .adm-stat-val{color:var(--danger);animation:cashin-timer-blink 1s ease-in-out infinite}
/* Per-row countdown, rendered under the Status badge on today's open /
   betting-closed phases. Three states mirror Draw::status(): counting down to
   cutoff, counting down to draw time (calmer — betting's already closed), and
   expired (swaps to a refresh hint once the Result button is one reload away). */
.adm-row-timer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.7rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent);margin-top:3px}
.adm-row-timer i{font-size:.62rem;opacity:.8}
.adm-row-timer.is-warn{color:var(--warning)}
.adm-row-timer.is-urgent{color:var(--danger);animation:cashin-timer-blink 1s ease-in-out infinite}
.adm-row-timer.is-awaiting-draw{color:var(--text-muted)}
.adm-row-timer-refresh{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:10px;font-size:.68rem;font-weight:800;color:var(--accent);background:var(--accent-light);border:1px solid var(--accent);text-decoration:none}
.adm-row-timer-refresh:hover{text-decoration:underline}
/* Overview withdrawal-gateway picker — top-right radio on each live-balance card.
   The card is position:relative; the value text reserves right padding so a long
   balance never slides under the radio. Green accent matches the "• payouts" tag. */
.gw-wd-radio{position:absolute;top:9px;right:11px;z-index:2;display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);user-select:none}
.gw-wd-radio input{margin:0;width:15px;height:15px;cursor:pointer;accent-color:var(--success)}
.gw-wd-radio input:checked ~ span{color:var(--success)}
.gw-wd-radio.is-disabled,.gw-wd-radio.is-disabled input{cursor:not-allowed;opacity:.55}
#gw-wd-form .gw-balance-val{padding-right:62px}
/* Attention dot — red pulsing circle in a stat card's top-right corner. Used on the
   Pending Payouts card while money is owed (expanding-ring pulse, like .stn-live-dot). */
.adm-pulse-dot{position:absolute;top:10px;right:10px;width:10px;height:10px;border-radius:50%;background:var(--danger);z-index:2;pointer-events:none;animation:admPulseDot 1.6s ease-out infinite}
@keyframes admPulseDot{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 9px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
@media (prefers-reduced-motion:reduce){.adm-pulse-dot{animation:none}}
/* Section wrapper */
.adm-section{background:var(--bg-card);border:2px solid #b8c5d6;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.10)}
.adm-section-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.adm-section-title{font-size:.95rem;font-weight:800;color:var(--text)}
/* Overview company P&L: hybrid summary + detailed audit trail. The memo position is
   intentionally outside the calculation-card grid so it cannot read as a profit input. */
.pnl-hybrid{padding:16px;background:var(--bg-input2)}
.pnl-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.pnl-summary-card{min-width:0;display:flex;align-items:center;gap:12px;padding:15px;background:var(--bg-card);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow-sm)}
.pnl-summary-card.is-profit{border-color:color-mix(in srgb,var(--success) 34%,var(--border))}
.pnl-summary-card.is-cost{border-color:color-mix(in srgb,var(--danger) 28%,var(--border))}
.pnl-summary-icon,.pnl-detail-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--accent-light);color:var(--accent)}
.pnl-summary-card.is-profit .pnl-summary-icon{background:var(--success-light);color:var(--success)}
.pnl-summary-card.is-cost .pnl-summary-icon,.pnl-detail-icon.is-cost{background:var(--danger-light);color:var(--danger)}
.pnl-summary-icon.is-slot,.pnl-detail-icon.is-slot{background:var(--purple-light);color:var(--purple)}
.pnl-summary-label{display:block;margin-bottom:5px;color:var(--text-muted);font-size:.64rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnl-summary-card .pnl-amount{display:block;color:var(--text);font-size:1.18rem;font-weight:850;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.pnl-summary-card .pnl-amount.is-positive{color:var(--success)}
.pnl-summary-card .pnl-amount.is-negative{color:var(--danger)}
.pnl-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pnl-detail-card{min-width:0;display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:11px;overflow:hidden;box-shadow:var(--shadow-sm)}
.pnl-detail-head{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--border)}
.pnl-detail-head h3,.pnl-memo-head h3{margin:0;color:var(--text);font-size:.84rem;font-weight:850}
.pnl-detail-head p,.pnl-memo-head p{margin:2px 0 0;color:var(--text-muted);font-size:.64rem;line-height:1.35}
.pnl-detail-body{flex:1;padding:0 12px}
.pnl-detail-body.is-equation{display:flex;flex-direction:column;justify-content:center}
.pnl-line{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;min-height:42px;padding:8px 3px;border-bottom:1px solid var(--border)}
.pnl-line:last-child{border-bottom:0}
.pnl-line-copy{min-width:0;display:flex;flex-direction:column;gap:1px}
.pnl-line-label{color:var(--text);font-size:.75rem;font-weight:650;line-height:1.35}
.pnl-line-hint{color:var(--text-muted);font-size:.61rem;line-height:1.3}
.pnl-amount{color:var(--text);font-size:.76rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.pnl-amount.is-negative{color:var(--danger)}
.pnl-amount.is-positive{color:var(--success)}
.pnl-detail-total{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;background:var(--bg-input);border-top:1px solid var(--border);color:var(--text);font-size:.8rem;font-weight:850;text-transform:none}
.pnl-detail-total.is-cost{color:var(--danger)}
.pnl-detail-total.is-profit{background:var(--success-light);color:var(--success)}
.pnl-detail-total .pnl-amount{font-size:.86rem}
.pnl-memo{margin-top:12px;background:color-mix(in srgb,var(--accent-light) 36%,var(--bg-card));border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border));border-radius:11px;overflow:hidden;box-shadow:var(--shadow-sm)}
.pnl-memo-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 15px;border-bottom:1px solid var(--border)}
.pnl-memo-title{display:flex;align-items:center;gap:10px;min-width:0}
.pnl-memo-badge{flex:none;padding:4px 9px;border:1px solid color-mix(in srgb,var(--accent) 36%,var(--border));border-radius:99px;background:var(--bg-card);color:var(--accent);font-size:.58rem;font-weight:850;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap}
.pnl-memo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:color-mix(in srgb,var(--border) 82%,transparent);gap:1px}
.pnl-memo-item{min-width:0;display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--bg-card)}
.pnl-memo-label{color:var(--text);font-size:.68rem;font-weight:750;line-height:1.3}
.pnl-memo-item .pnl-amount{font-size:.82rem}
.pnl-memo-hint{color:var(--text-muted);font-size:.58rem;line-height:1.3}
.pnl-unavailable{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px;padding:20px;border:1px solid var(--danger);border-radius:10px;background:var(--danger-light);color:var(--danger);font-size:.78rem;font-weight:750;text-align:center}
.ov-operations-grid{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
@media(max-width:1050px){
  .pnl-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pnl-detail-grid{grid-template-columns:1fr}
  .pnl-memo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pnl-memo-item:last-child{grid-column:1/-1}
  .ov-operations-grid{grid-template-columns:1fr}
}
[data-theme="dark"] .pnl-hybrid{background:var(--bg)}
/* Promotions tab */
.promo-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.promo-stat-card{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm)}
.promo-stat-card .psc-icon{flex-shrink:0;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.promo-stat-card .psc-val{font-size:1.2rem;font-weight:800;color:var(--text);line-height:1.1}
.promo-stat-card .psc-lbl{font-size:.7rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-top:3px}
.promo-manage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:16px}
.promo-manage-card{padding:18px 20px}
.promo-subnav{display:flex;gap:6px;margin-bottom:16px;border-bottom:2px solid var(--border)}
.promo-subnav-btn{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;padding:10px 16px;font-size:.85rem;font-weight:700;color:var(--text-muted);cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:7px;transition:color .15s,border-color .15s}
.promo-subnav-btn:hover{color:var(--text)}
.promo-subnav-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.adm-section-body{padding:20px}
/* Draws grid */
.adm-draws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.adm-draw-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.adm-draw-card-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg-input)}
.adm-draw-card-title{font-size:.92rem;font-weight:800;color:var(--text)}
.adm-draw-list{padding:0 16px}
.adm-draw-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.adm-draw-item:last-of-type{border-bottom:none}
.adm-draw-info{display:flex;flex-direction:column;gap:4px}
.adm-draw-label{font-size:.87rem;font-weight:700;color:var(--text)}
.adm-draw-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.adm-draw-time{font-size:.75rem;color:var(--text-muted)}
/* Members table */
.adm-members-table{width:100%;border-collapse:collapse}
.adm-members-table th{text-align:left;padding:11px 16px;background:var(--bg-input);color:var(--text-muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid #b8c5d6;border-right:1px solid #d0d7e3}.adm-members-table th:last-child{border-right:none}
.adm-members-table td{padding:12px 16px;border-bottom:1px solid #d0d7e3;border-right:1px solid #d0d7e3;font-size:.85rem;color:var(--text)}.adm-members-table td:last-child{border-right:none}
.adm-members-table tr:last-child td{border-bottom:none}
.adm-members-table tr:hover td{background:var(--bg-input)}
.adm-table-lined th,.adm-table-lined td{border-right:1px solid var(--border)}
.adm-table-lined th:last-child,.adm-table-lined td:last-child{border-right:none}
.tx-pg-btn{padding:5px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.82rem;cursor:pointer;transition:opacity .15s}
.tx-pg-btn:disabled{opacity:.35;cursor:default}
/* Shared table pager — used by every paginated admin table. overflow:clip on
   the section preserves rounded clipping without turning it into the sticky
   footer's scroll container. Table-specific inner wrappers own horizontal
   scrolling; the controls never wrap. */
.adm-table-section{min-width:0;max-width:100%;overflow:clip}
.adm-table-footer{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 18px;border-top:1px solid var(--border);background:var(--bg-card);background:color-mix(in srgb,var(--bg-card) 94%,transparent);box-shadow:0 -8px 24px rgba(15,23,42,.08);backdrop-filter:blur(12px)}
.adm-table-count{font-size:.8rem;color:var(--text-muted);white-space:nowrap}
.adm-pager{display:flex;align-items:center;gap:7px;flex:0 1 auto;flex-wrap:nowrap;justify-content:flex-end;margin-left:auto;max-width:100%;overflow-x:auto;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;scrollbar-width:thin}
.adm-pager-nav,.adm-pager-tools{display:inline-flex;align-items:center;gap:4px;flex:none}
.adm-pager-btn{flex:none;min-width:34px;height:34px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.82rem;font-weight:700;line-height:1;cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s,opacity .12s;user-select:none}
.adm-pager-edge{min-width:38px;height:36px;padding:0;background:var(--bg-input);border-radius:8px;color:var(--text);font-family:Arial,sans-serif;font-size:1.15rem;font-weight:800}
.adm-pager-glyph{display:block;width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.adm-pager-btn:hover:not(:disabled):not(.is-active){background:var(--bg-input2);border-color:var(--border)}
.adm-pager-btn:disabled{opacity:.45;cursor:default}
.adm-pager-page.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 28%,transparent);opacity:1;cursor:default}
.adm-pager-gap{flex:none;min-width:24px;text-align:center;color:var(--text-muted);font-size:.8rem;user-select:none;pointer-events:none}
.adm-pager-divider{flex:none;width:1px;height:24px;background:var(--border)}
.adm-pager-size-slot{display:inline-flex;flex:none}
.adm-pager-size-select{height:34px;max-width:112px;padding:0 26px 0 11px;background:var(--bg-card);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.76rem;font-weight:600;outline:none;cursor:pointer}
.adm-pager-jump-label{margin-left:5px;color:var(--text-muted);font-size:.74rem;font-weight:600;white-space:nowrap}
.adm-pager-jump-input{width:52px;height:34px;box-sizing:border-box;padding:0 8px;text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.78rem;font-weight:700;outline:none;-moz-appearance:textfield}
.adm-pager-jump-input::-webkit-inner-spin-button,.adm-pager-jump-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.adm-pager-jump-input:focus,.adm-pager-size-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.adm-pager-go{flex:none;height:34px;padding:0 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.74rem;font-weight:700;cursor:pointer}
.adm-pager-go:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:720px){.adm-table-footer{padding:8px 10px}.adm-table-count{flex:1 0 100%}.adm-pager{width:100%;justify-content:flex-start;margin-left:0}}
/* Desktop modal centering for admin */
.adm-body .modal-overlay{align-items:center}
.adm-body .modal{border-radius:var(--radius-lg);animation:admModalIn .2s ease}
@keyframes admModalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.admin-idle-overlay{z-index:1200!important}
.admin-idle-modal{width:min(420px,calc(100vw - 32px))!important;padding:28px!important;text-align:center}
.admin-idle-icon{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-light);color:var(--accent);font-size:1.2rem}
.admin-idle-modal h3{margin:0 0 9px;color:var(--text);font-size:1.08rem;font-weight:850}
.admin-idle-modal p{margin:0;color:var(--text-muted);font-size:.82rem;line-height:1.55}
.admin-idle-countdown{margin:18px 0 16px;padding:12px;border:1px solid var(--border);border-radius:9px;background:var(--bg-input);color:var(--text-muted);font-size:.8rem}
.admin-idle-countdown strong{display:block;margin-top:3px;color:var(--danger);font-size:1.35rem;font-weight:900;font-variant-numeric:tabular-nums}
.admin-idle-stay{width:100%;margin:0}
.adm-wide-modal{max-width:700px!important}
/* View Bets modal: pin the title, filter toolbar and table column-headers so
   only the bet rows scroll (the list runs to thousands of rows). Scoped to
   .adm-wide-modal — the sole user of this class — so other modals are untouched.
   Overrides the shared .modal{overflow-y:auto}: the modal itself no longer
   scrolls; its inner #vb-scroll region does. */
.adm-wide-modal{display:flex;flex-direction:column;overflow:hidden}
.adm-wide-modal .modal-header{flex:0 0 auto}
.adm-wide-modal #vb-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.adm-wide-modal #vb-content .vb-static{flex:0 0 auto}
.adm-wide-modal #vb-scroll{flex:1 1 auto;min-height:0;overflow:auto}
.adm-wide-modal .adm-members-table thead th{position:sticky;top:0;z-index:2}
/* Draw item action buttons */
.btn-sm-warning{background:var(--warning-light);color:var(--warning)}
.adm-btn-view{background:var(--bg-input2);color:var(--text-muted)}
.adm-btn-view:hover{background:var(--border2);color:var(--text)}
/* Transaction type badges */
.adm-tx-type{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.68rem;font-weight:700}
.adm-tx-cashin{background:var(--success-light);color:var(--success)}
.adm-tx-cashout{background:var(--accent2-light);color:var(--accent2)}
.adm-tx-bet{background:var(--accent-light);color:var(--accent)}
.adm-tx-win{background:var(--success-light);color:var(--success)}
.adm-tx-rebate{background:var(--warning-light);color:var(--warning)}
.adm-tx-refund{background:var(--accent2-light);color:var(--accent2)}
.adm-tx-rebate_earned{background:var(--warning-light);color:var(--warning)}
.adm-tx-referral{background:var(--success-light);color:var(--success)}
.adm-bet-status-cell{min-width:150px;white-space:nowrap}
.adm-bet-status{display:inline-block;padding:3px 8px;border-radius:20px;font-size:.68rem;font-weight:700;white-space:nowrap}
.adm-bet-status+.adm-bet-status{margin-left:4px}
.adm-bet-status-pending{background:var(--warning-light);color:var(--warning)}
.adm-bet-status-won{background:var(--success-light);color:var(--success)}
.adm-bet-status-lost{background:var(--danger-light);color:var(--danger)}
.adm-bet-status-cancelled{background:var(--bg-input2);color:var(--text-muted)}
.adm-bet-refunded{background:var(--accent-light);color:var(--accent)}
.adm-bet-status-empty{color:var(--text-muted)}
/* Withdrawal status badges */
.adm-wd-status{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.68rem;font-weight:700;white-space:nowrap}
.adm-wd-pending{background:var(--warning-light);color:var(--warning)}
.adm-wd-processing{background:var(--accent-light);color:var(--accent)}
.adm-wd-status_unknown,.adm-wd-review_required{background:var(--warning-light);color:var(--warning)}
.adm-wd-successful{background:var(--success-light);color:var(--success)}
.adm-wd-failed{background:var(--accent2-light);color:var(--accent2)}
.adm-wd-cancelled{background:var(--bg-input2);color:var(--text-muted)}
/* Audit log filter pills and badges */
.al-pill{padding:5px 14px;border-radius:99px;border:1.5px solid var(--border);background:var(--bg-input2);color:var(--text-muted);font-size:.78rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s;font-family:inherit}
.al-pill:hover{background:var(--border)}
.al-pill.al-pill-active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.al-badge{display:inline-block;padding:3px 9px;border-radius:5px;font-size:.73rem;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.al-badge-danger{background:var(--danger-light);color:var(--danger)}
.al-badge-warning{background:var(--warning-light);color:var(--warning)}
.al-badge-success{background:var(--success-light);color:var(--success)}
.al-badge-info{background:var(--accent-light);color:var(--accent)}
.al-badge-muted{background:var(--bg-input2);color:var(--text-muted)}
.al-chip{display:inline-block;background:var(--bg-input2);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:.72rem;color:var(--text-muted);margin:1px 2px}
.al-chip strong{color:var(--text);font-weight:600}
/* Audit log table — full grid borders */
.adm-audit-table{width:100%;min-width:1000px;border-collapse:collapse;table-layout:fixed}
.adm-audit-table th,.adm-audit-table td{padding:10px 14px;border:1px solid var(--border);font-size:.82rem;vertical-align:middle;word-break:break-word}
.adm-audit-table th{background:var(--bg-input);color:var(--text-muted);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.adm-audit-table td{color:var(--text)}
.adm-audit-table tr:hover td{background:var(--bg-input)}
.adm-audit-table .col-time{width:140px}
.adm-audit-table .col-admin{width:120px}
.adm-audit-table .col-action{width:200px}
.adm-audit-table .col-target{width:130px}
.adm-audit-table .col-detail{width:auto}
.adm-audit-table .col-ip{width:130px}
/* Audit log — click-to-expand row + inline accordion detail panel */
.al-row{cursor:pointer}
.al-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.al-chevron{margin-left:6px;font-size:.65rem;color:var(--text-light);transition:transform .15s}
.al-row[aria-expanded="true"] .al-chevron{transform:rotate(90deg);color:var(--accent)}
.al-row[aria-expanded="true"] td{background:var(--bg-input)}
.al-detail-row td{background:var(--bg-input);padding:0}
.al-detail-panel{padding:14px 20px;animation:al-detail-in .15s ease-out}
@keyframes al-detail-in{from{opacity:0}to{opacity:1}}
.al-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 22px}
.al-detail-grid>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.al-detail-lbl{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.al-detail-grid code{background:var(--bg-input2);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:.76rem}
.al-detail-grid a{color:var(--accent);font-weight:600;text-decoration:none}
.al-detail-grid a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.al-chevron{transition:none}.al-detail-panel{animation:none}}
/* Audit log — stacked-card layout below 640px: a 6-column table with a Detail
   column that wraps unpredictably reads far better as one card per entry than
   as a horizontally-scrolling table. */
@media(max-width:640px){
  .adm-audit-table{min-width:0;table-layout:auto}
  .adm-audit-table thead{display:none}
  .adm-audit-table,.adm-audit-table tbody{display:block;width:100%}
  .adm-audit-table tr.al-detail-row{display:block;width:100%}
  /* .al-row is flex (not block) so `order` below can reflow the badge/time to the
     top of the card while the underlying markup stays Time-first for the desktop
     table and for screen readers/CSV export. */
  .adm-audit-table tr.al-row{display:flex;flex-direction:column;width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:12px;margin:0 0 10px;padding:8px 12px;box-shadow:var(--shadow-sm);background:var(--bg-card)}
  .adm-audit-table tr.al-row[aria-expanded="true"]{border-color:var(--accent)}
  .adm-audit-table tr.al-row td{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;padding:6px 0;border:none;font-size:.82rem;background:transparent !important}
  .adm-audit-table tr.al-row td::before{content:attr(data-label);flex:0 0 auto;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding-top:2px}
  .adm-audit-table tr.al-row td.col-time{order:-2;padding-top:0;color:var(--text-muted);font-size:.72rem}
  .adm-audit-table tr.al-row td.col-time::before{display:none}
  .adm-audit-table tr.al-row td.col-action{order:-1;padding-top:0}
  .adm-audit-table tr.al-row td.col-action::before{display:none}
  .al-detail-row{margin:-8px 0 10px}
  .al-detail-row td{display:block;border:1px solid var(--accent);border-top:none;border-radius:0 0 12px 12px;padding:0}
  .al-detail-panel{padding:12px 14px}
}
/* Report table footer */
.adm-members-table tfoot td{padding:12px 16px;font-size:.85rem;border-top:2px solid var(--border2)}
/* Draw table date filter */
.adm-date-filter{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.adm-date-filter label{font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:5px}
/* All filter controls share one fixed height so the native <select>, native
   <input type=date> (whose UA shadow-DOM reserves extra internal height), and
   the .btn-sm action buttons line up exactly. box-sizing:border-box is global. */
.adm-date-filter input[type=date]{height:38px;padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:.85rem;font-family:inherit;background:var(--bg-card);color:var(--text)}
.adm-date-filter input[type=date]:focus{outline:none;border-color:var(--accent)}
.adm-date-filter select{height:38px;padding-top:8px!important;padding-bottom:8px!important;border-width:1.5px!important}
.adm-date-filter select:focus{outline:none;border-color:var(--accent)}
.adm-date-filter .btn-sm{height:38px;display:inline-flex;align-items:center;justify-content:center}
/* Shared admin filter-control height. Tag any <select>/<input>/<button> in a
   filter row with .adm-fctl and they all render the SAME box height, so a native
   <select> lines up with a native <input type=date> (whose UA shadow-DOM reserves
   extra internal height it doesn't). Each filter row picks its own height via the
   --adm-fctl-h custom property (default 38px); per-control font-size/padding stay
   as authored. box-sizing:border-box is global (*). */
.adm-fctl{height:var(--adm-fctl-h,38px);box-sizing:border-box}
button.adm-fctl,a.adm-fctl{display:inline-flex;align-items:center;justify-content:center}
/* Native select arrows vary by browser and do not align with the date-picker
   calendar icon. Every single-value Admin select uses the same centered
   chevron, 12px right inset, and reserved text space. */
.adm-body select:not([multiple]){-webkit-appearance:none!important;appearance:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:12px 8px!important;padding-right:34px!important}
/* Date-group alternating rows */
.adm-tr-alt td{background:#f8fafc}
/* Draw table status badges */
.adm-status-draft{background:#fef9c3;color:#a16207}
.adm-status-complete{background:#ccfbf1;color:#0f766e}
.adm-status-no-result{background:#ffe4e6;color:#be123c}
.adm-status-upcoming{background:#ede9fe;color:#7c3aed}
.adm-status-open{background:#dbeafe;color:#2563eb}
.adm-status-betting-closed{background:#ffedd5;color:#ea580c}
.adm-status-closed{background:#e2e8f0;color:#475569}
.adm-status-paused{background:#fef3c7;color:#b45309}
/* Draw number bubbles */
.draw-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:.85rem;font-weight:800}
.draw-num.empty{background:var(--bg-input2);color:var(--text-light);font-weight:400;font-size:1rem}
.adm-status-no-draw{background:#cffafe;color:#0e7490}
.btn-sm-nodraw{background:#cffafe;color:#0e7490;border:none;font-family:inherit}
/* Station form inputs */
.adm-color-input{height:36px;border:1px solid var(--border);border-radius:6px;cursor:pointer;padding:2px}
.adm-tbl-input{border:1px solid var(--border);border-radius:6px;padding:7px 10px;font-size:.85rem;font-family:inherit;background:var(--bg-input);width:100%}
.adm-tbl-input:focus{outline:none;border-color:var(--accent);background:#fff}
.adm-tbl-select{border:1px solid var(--border);border-radius:6px;padding:7px 10px;font-size:.85rem;font-family:inherit;background:var(--bg-input);width:100%}
.adm-tbl-select:focus{outline:none;border-color:var(--accent)}
/* Add Station form grid */
.stn-add-grid{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.stn-add-name{flex:1;min-width:180px;margin-bottom:0}
.stn-add-field{margin-bottom:0}
.stn-color-swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:2px;flex-shrink:0}
.stn-field-group{display:flex;flex-direction:column;gap:5px}
.stn-field-group>label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}
/* Payout × suffix */
.stn-input-affix{position:relative;display:flex;align-items:center}
.stn-input-affix input{padding-right:26px}
.stn-input-affix>span{position:absolute;right:9px;font-size:.78rem;font-weight:700;color:var(--text-muted);pointer-events:none}
.stn-pill-btn{background:none;border:none;cursor:pointer;font-size:.65rem;border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.stn-pill-btn:hover{background:var(--bg-input2)}
.stn-pill-edit{color:var(--warning)}
.stn-pill-del{color:var(--danger)}
.stn-add-phase-btn{display:inline-flex;align-items:center;gap:4px;background:var(--success-light);color:var(--success);border:1px dashed var(--success);border-radius:20px;padding:3px 12px;font-size:.73rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.stn-add-phase-btn:hover{background:var(--success);color:#fff;border-style:solid}
/* ── Stations toolbar (search + add toggle) ── */
.stn-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:0 2px}
.stn-toolbar-left{display:flex;align-items:center;gap:10px}
.stn-toolbar-title{font-size:.95rem;font-weight:800;color:var(--text)}
.stn-toolbar-count{font-size:.72rem;font-weight:700;color:var(--text-muted);background:var(--bg-input2);padding:2px 9px;border-radius:99px;border:1px solid var(--border)}
.stn-toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stn-empty-inline{grid-column:1/-1}
.stn-search{position:relative;display:flex;align-items:center}
.stn-search>i{position:absolute;left:11px;color:var(--text-muted);font-size:.78rem;pointer-events:none}
.stn-search input{padding:8px 12px 8px 30px;font-size:.82rem;border:1px solid var(--border);border-radius:8px;background:var(--bg-input);color:var(--text);width:240px;transition:border-color .15s,box-shadow .15s;font-family:inherit}
.stn-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light,rgba(37,99,235,.15))}
.stn-add-toggle{padding:8px 16px!important;width:auto!important;font-size:.82rem!important;white-space:nowrap}
.stn-add-close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:.85rem;padding:4px 8px;border-radius:6px;transition:background .15s,color .15s;margin-left:auto}
.stn-add-close:hover{background:var(--bg-input2);color:var(--danger)}
.stn-color-dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border);flex-shrink:0}
.stn-color-swatch-inline{width:100%;height:36px;border-radius:6px;border:1px solid var(--border);cursor:pointer;padding:2px;background:var(--bg-input)}
/* ── Empty states ── */
.stn-empty{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;padding:32px;color:var(--text-muted);font-size:.85rem}
.stn-empty i{font-size:1rem;color:var(--border2)}
.stn-empty-full{text-align:center;padding:40px;color:var(--text-muted);font-size:.9rem}
.stn-empty-full i{font-size:2rem;margin-bottom:12px;display:block;color:var(--border2)}
/* Retained for delegated links emitted outside the Stations table. */
.stn-draw-link-btn{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;font-size:.66rem;font-weight:800;letter-spacing:.3px;text-transform:uppercase;text-decoration:none;color:var(--on-gold);background:var(--brand-gold-grad);box-shadow:0 2px 8px rgba(0,0,0,.15);transition:transform .15s,box-shadow .15s}
.stn-draw-link-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.22)}
.stn-draw-link-btn i{font-size:.62rem}
/* ── Mobile: tighten layout ── */
@media (max-width:640px){
  .stn-search input{width:100%}
  .stn-toolbar-right{width:100%}
  .stn-search{flex:1}
}
/* Section labels */
.stn-section-lbl{display:flex;align-items:center;gap:9px;padding:14px 22px 8px;font-size:1.05rem;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--text)}
.stn-section-lbl i{font-size:1rem;color:var(--stn-clr,var(--accent));opacity:.85}
.stn-section-count{margin-left:auto;font-size:.66rem;font-weight:800;color:var(--text-muted);background:var(--bg-input2);border:1px solid var(--border);border-radius:99px;padding:1px 9px}
.stn-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:8px;font-size:.83rem;font-weight:700;border:1px solid transparent;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap}
.stn-btn i{font-size:.78rem}
.stn-btn-primary{background:var(--brand-gold-grad);color:var(--on-gold);box-shadow:0 2px 10px rgba(180,140,54,.3)}
.stn-btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(180,140,54,.4)}
.stn-btn-primary:active{transform:translateY(0)}
.stn-btn-ghost{background:transparent;color:var(--text-muted);border-color:var(--border)}
.stn-btn-ghost:hover{background:var(--bg-input2);color:var(--text)}
.stn-btn-danger{background:var(--danger-light);color:var(--danger);border-color:transparent}
.stn-btn-danger:hover{background:var(--danger);color:#fff}
/* Mobile: stack footer buttons */
@media (max-width:640px){
  .stn-btn{justify-content:center;flex:1}
}
/* ── Station edit modal — centered, larger than default project modal ── */
.stn-edit-overlay{align-items:center !important}
/* Sub-modals launched from *inside* the station edit modal (the per-phase
   pencil → Edit Draw, and + Add Phase). Both they and the station modal are
   .modal-overlay (z-index:400), but _modals.php is emitted earlier in the DOM
   than _tab-stations.php, so on a tie the station modal paints on top and the
   sub-modal opens hidden behind it. Lift the sub-modals above it. */
#editDrawModal, #addPhaseModal{z-index:500}
/* ── Edit Station modal (centered, desktop default) ── */
.adm-body .stn-edit-overlay{justify-content:center;align-items:center}
.stn-edit-modal{position:relative;max-width:560px !important;width:min(560px,94vw);margin:0;padding:0 !important;border-radius:var(--radius-lg) !important;overflow:hidden;display:flex;flex-direction:column;max-height:90vh !important;border-top:5px solid var(--stn-clr,var(--accent));animation:admModalIn .2s ease}
.stn-modal-head{display:flex;align-items:center;gap:10px;padding:18px 22px;background:var(--bg-input);background:linear-gradient(to right,color-mix(in srgb,var(--stn-clr) 10%,var(--bg-input)),var(--bg-input));border-bottom:1px solid var(--border);flex-shrink:0}
.stn-modal-head .stn-color-dot{width:18px;height:18px;transition:background .1s}
.stn-modal-title{font-size:1.1rem;font-weight:800;margin:0;color:var(--text);flex:1;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stn-modal-body{flex:1;overflow-y:auto;padding:0;min-height:0}

/* Section cards inside the drawer body */
.stn-drawer-section{padding:16px 22px 20px;border-bottom:1px solid var(--border)}
.stn-drawer-section:last-of-type{border-bottom:none}
.stn-edit-modal .stn-field-group{width:auto;min-width:0;flex:none}
.stn-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.stn-field-grid .stn-field-group[data-span="full"]{grid-column:1 / -1}

/* Identity: color swatch + hex on its own line, station name on the next */
.stn-identity-row{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.stn-color-picker{display:flex;flex-direction:row;align-items:center;gap:8px;flex-shrink:0}
.stn-color-picker .stn-color-swatch-inline{width:52px;height:38px}
.stn-color-hex{font-size:.64rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* Segmented Active/Inactive status toggle */
.stn-status-toggle{display:inline-flex;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;width:fit-content;margin-top:12px}
.stn-status-opt{position:relative;cursor:pointer}
.stn-status-opt input{position:absolute;opacity:0;width:0;height:0}
.stn-status-opt span{display:flex;align-items:center;gap:6px;padding:8px 16px;font-size:.82rem;font-weight:700;color:var(--text-muted);transition:background .15s,color .15s;white-space:nowrap}
.stn-status-opt:first-child span{border-right:1.5px solid var(--border)}
.stn-status-opt input:checked+span{background:var(--success-light);color:var(--success)}
.stn-status-opt:last-child input:checked+span{background:var(--danger-light);color:var(--danger)}
.stn-status-opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-2px}

/* Draws: row list (replaces the old pill wrap). Prefixed .stn-drw- (not
   .stn-draw-) — the latter is already owned by the player-facing station-card
   countdown widget below; reusing it let that widget's dark gradient/white/
   uppercase styles win by source order. */
.stn-drw-rows{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.stn-drw-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc}
.stn-drw-info{flex:1;min-width:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.stn-drw-phase{font-weight:800;font-size:.86rem}
.stn-drw-time{font-size:.86rem;color:#64748b;font-variant-numeric:tabular-nums}
.stn-drw-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.stn-drw-actions .stn-pill-btn{width:32px;height:32px;font-size:.82rem;border-radius:8px}
.stn-drw-actions .stn-pill-btn:hover{background:rgba(0,0,0,.06)}
.stn-drw-empty{padding:14px;text-align:center;font-size:.8rem;color:var(--text-muted);font-style:italic;border:1px dashed var(--border);border-radius:10px}
.stn-add-draw-row{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;margin-top:8px;width:100%;border:1.5px dashed var(--success);border-radius:10px;background:var(--success-light);color:var(--success);font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit;transition:all .15s}
.stn-add-draw-row:hover{background:var(--success);color:#fff;border-style:solid}

/* Bet caps: merged read-only card */
.stn-caps-card{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-top:10px;background:var(--bg-input)}
.stn-caps-card+.stn-caps-card{margin-top:8px}
.stn-caps-card-title{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.stn-caps-manage-link{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--accent);text-decoration:none}
.stn-caps-manage-link:hover{text-decoration:underline}
.stn-caps-manage-link i{color:inherit}
.stn-caps-empty{font-size:.78rem;color:var(--text-muted);font-style:italic}
.stn-caps-chips{display:flex;flex-wrap:wrap;gap:6px}

/* Danger zone: delete moved out of the sticky footer */
.stn-danger-zone{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px dashed var(--danger);border-radius:10px;padding:12px 14px;background:var(--danger-light)}
.stn-danger-zone-text{font-size:.78rem;color:var(--text-muted)}
.stn-danger-zone-text strong{color:var(--danger);display:block;font-size:.82rem;margin-bottom:2px}

.stn-modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:14px 22px;background:var(--bg-input);border-top:1px solid var(--border);flex-shrink:0}
.stn-modal-foot-right{display:flex;align-items:center;gap:8px}
/* Dirty indicator on Save while the form has unsaved edits */
.stn-btn-primary.stn-btn-dirty{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent),0 2px 10px rgba(180,140,54,.3)}
.stn-btn-primary.stn-btn-dirty::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-left:2px;animation:stnDirtyPulse 1.6s ease-in-out infinite}
@keyframes stnDirtyPulse{0%,100%{opacity:.4}50%{opacity:1}}

/* Mobile: modal becomes a bottom sheet */
@media (max-width:640px){
  .stn-edit-overlay{align-items:flex-end !important;justify-content:center !important}
  .stn-edit-modal{max-width:100% !important;width:100%;border-radius:var(--radius-lg) var(--radius-lg) 0 0 !important;max-height:95vh !important;border-top:none;animation:slideUp .25s cubic-bezier(.4,0,.2,1)}
  .stn-field-grid{grid-template-columns:1fr}
  .stn-modal-foot{flex-direction:column-reverse;align-items:stretch;gap:8px}
  .stn-modal-foot-right{justify-content:space-between}
  .stn-modal-foot .stn-btn{justify-content:center;flex:1}
}
/* Refund wallet — sidebar card */
.bal-box-refund .refund-amt{color:var(--wallet-refund-text)}.bal-box .amt.promo{color:var(--wallet-promo-text)}
/* Bet page — wallet selector */
.wallet-opts{display:flex;flex-direction:column;gap:8px;margin:0 16px 14px}
.wallet-opt{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s;box-shadow:var(--shadow-sm)}
.wallet-opt-active{border-color:var(--purple);background:var(--purple-light);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.wo-radio{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--border2);position:relative;transition:border-color .18s}
.wallet-opt-active .wo-radio{border-color:var(--purple)}
.wallet-opt-active .wo-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--purple)}
.wo-label{font-size:.84rem;font-weight:700;color:var(--text)}
.wo-amt{margin-left:auto;font-size:1rem;font-weight:800;color:var(--text)}
.wo-note{font-size:.68rem;color:#f39c12;margin-top:3px;font-weight:600}
/* History — Refund Wallet tag on bet card */
.bh-refund-tag{display:inline-block;background:rgba(243,156,18,.12);color:#f39c12;border:1px solid rgba(243,156,18,.3);border-radius:20px;padding:1px 7px;font-size:.65rem;font-weight:700;margin-left:4px;vertical-align:middle;flex-shrink:0}
/* History — Promotion Bonus tag on bet card */
.bh-promo-tag{display:inline-block;background:rgba(124,58,237,.12);color:#7c3aed;border:1px solid rgba(124,58,237,.3);border-radius:20px;padding:1px 7px;font-size:.65rem;font-weight:700;margin-left:4px;vertical-align:middle;flex-shrink:0}
/* History — Refunded status badge */
.sdot.s-cancelled{background:rgba(243,156,18,.12);color:#f39c12;border:1px solid rgba(243,156,18,.3)}
/* ── CashIn / CashOut redesign ── */
.cf-date-group{padding:7px 16px 5px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);background:var(--bg-input);border-bottom:1px solid var(--border)}
.cf-item{display:block;width:100%;padding:10px 8px 10px 11px;border:0;border-left:3px solid transparent;border-bottom:1px solid var(--border);background:transparent;color:inherit;text-align:left;font-family:inherit;cursor:pointer;transition:background .15s}.cf-item:hover{background:var(--bg-input)}.cf-info{width:100%;min-width:0}.cf-line1{display:flex;align-items:center;justify-content:space-between;gap:6px}.cf-line2{display:flex;align-items:center;justify-content:space-between;margin-top:3px;gap:8px}
.cf-item:last-child{border-bottom:none}
.cf-item.cf-pending{border-left-color:var(--warning)}
.cf-item.cf-paid{border-left-color:var(--success)}
.cf-item.cf-processing{border-left-color:var(--tumbok)}
.cf-item.cf-review,.cf-item.cf-unknown{border-left-color:var(--warning)}
.cf-item.cf-failed{border-left-color:var(--danger)}
.cf-item.cf-cancelled{border-left-color:var(--text-light)}
.cf-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;margin-top:1px}
.cf-icon.credit{background:var(--success-light);color:var(--success)}
.cf-icon.debit{background:var(--danger-light);color:var(--danger)}
.cf-icon.neutral{background:var(--bg-input2);color:var(--text-muted)}
.cf-body{flex:1;min-width:0}
.cf-title{font-size:.83rem;font-weight:700;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-title-long{font-size:.78rem;letter-spacing:-.005em}
.cf-meta-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;min-width:0}
.cf-date{font-size:.67rem;color:var(--text-muted);min-width:0;white-space:nowrap}
.cf-ref{font-size:.65rem;color:var(--text-light);font-family:monospace;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-right{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-shrink:0}
.cf-amount{font-size:.9rem;font-weight:800;white-space:nowrap;color:var(--text);flex-shrink:0}
.cf-amount.credit,.cf-amount.debit{color:var(--text);font-variant-numeric:tabular-nums}
.cf-status-icon{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;font-size:.72rem;line-height:1;flex-shrink:0}
.cf-status-icon.paid{color:var(--success)}
.cf-status-icon.pending,.cf-status-icon.review,.cf-status-icon.unknown{color:var(--warning)}
.cf-status-icon.processing{color:var(--tumbok)}
.cf-status-icon.failed{color:var(--danger)}
.cf-status-icon.cancelled{color:var(--text-muted)}
.cf-open{font-size:.62rem;color:var(--text-light);flex-shrink:0}
.cashflow-detail-modal{max-width:390px}
.cashflow-detail-amount{text-align:center;font-size:1.8rem;font-weight:850;font-variant-numeric:tabular-nums;color:var(--text);margin-top:2px}
.cashflow-detail-status{display:table;margin:7px auto 16px;padding:4px 10px;border-radius:99px;font-size:.7rem;font-weight:800;background:var(--warning-light);color:var(--warning)}
.cashflow-detail-status.paid{background:var(--success-light);color:var(--success)}
.cashflow-detail-status.processing{background:var(--tumbok-light);color:var(--tumbok)}
.cashflow-detail-status.review,.cashflow-detail-status.unknown{background:var(--warning-light);color:var(--warning)}
.cashflow-detail-status.failed{background:var(--danger-light);color:var(--danger)}
.cashflow-detail-status.cancelled{background:var(--bg-input2);color:var(--text-muted)}
.cashflow-detail-facts{display:grid;gap:0;margin:0 0 16px;padding:2px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:11px}
.cashflow-detail-facts>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:.75rem}
.cashflow-detail-facts>div:last-child{border-bottom:0}.cashflow-detail-facts dt{color:var(--text-muted)}.cashflow-detail-facts dd{margin:0;color:var(--text);font-weight:700;text-align:right;min-width:0;overflow-wrap:anywhere}
.cashflow-timeline{display:grid;grid-template-columns:repeat(3,1fr);margin:4px 2px 16px}
.cashflow-timeline-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;color:var(--text-light);font-size:.64rem;font-weight:700;padding:0 3px}
.cashflow-timeline-step:not(:last-child)::after{content:'';position:absolute;height:2px;top:6px;left:calc(50% + 8px);right:calc(-50% + 8px);background:var(--border)}
.cashflow-timeline-step.reached{color:var(--text)}.cashflow-timeline-step.reached:not(:last-child)::after{background:var(--wallet-gold)}
.cashflow-timeline-dot{position:relative;z-index:1;width:14px;height:14px;border-radius:50%;background:var(--bg-card);border:2px solid var(--border)}
.cashflow-timeline-step.reached .cashflow-timeline-dot{border-color:var(--wallet-gold);background:var(--wallet-gold)}
.cashflow-detail-note{margin:0;padding:10px 12px;border-radius:9px;background:var(--warning-light);color:#92400e;font-size:.72rem;line-height:1.45}
/* ── Game Type Bar ── */
/* ── Grand-jackpot banner (players, slot enabled): charcoal plaque in the slot
   brand's gold — deliberately theme-fixed (it matches the game art) so it reads
   identically in light and dark. Sheen sweep mirrors the in-game GRAND meter
   (slot.php). Tap → slot-games picker modal. ── */
.jp-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:calc(100% - 32px);margin:4px 16px;padding:10px 14px 10px 10px;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,#2a2010,#151006);border:1px solid #b48c36;border-radius:var(--radius);cursor:pointer;text-align:left;
  box-shadow:0 4px 14px rgba(180,140,54,.32);-webkit-tap-highlight-color:transparent;transition:transform .15s}
.jp-banner:active{transform:scale(.98)}
.jp-banner::before{content:'';position:absolute;inset:2px;border-radius:11px;border:1px solid rgba(216,171,78,.25);pointer-events:none}
.jp-banner::after{content:'';position:absolute;top:-40%;bottom:-40%;left:0;width:36%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,240,200,.14) 45%,rgba(255,240,200,.22) 50%,transparent 60%);
  transform:skewX(-18deg) translateX(-160%);animation:jpsheen 3.6s ease-in-out 1 both}
@keyframes jpsheen{0%,55%{transform:skewX(-18deg) translateX(-160%)}85%,100%{transform:skewX(-18deg) translateX(420%)}}
@media (prefers-reduced-motion:reduce){.jp-banner::after{animation:none}}
.jp-banner-art{width:46px;height:46px;border-radius:10px;flex-shrink:0}
.jp-banner-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.jp-banner-t{font-size:.6rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#f0cd7e}
.jp-banner-v{font-size:1.25rem;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.01em;line-height:1.15;
  background:linear-gradient(180deg,#fff3cf 10%,#f0cd7e 45%,#d8ab4e 70%,#b48c36);-webkit-background-clip:text;background-clip:text;color:transparent}
.jp-banner-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:#040404;background:linear-gradient(140deg,#f3d488,#d8ab4e 45%,#b48c36);padding:7px 12px;border-radius:99px}
.jp-banner-cta i{font-size:.6rem}
.auth-jp-banner{width:calc(100% + 56px);margin:0 -28px 26px;padding:12px 20px;font-family:inherit;border-left:0;border-right:0;border-radius:0;box-shadow:none}
.auth-jp-banner::before{display:none}
.auth-jp-banner .jp-banner-txt{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.auth-jp-banner .jp-banner-t{font-size:.58rem;letter-spacing:1.2px;white-space:nowrap}
.auth-jp-banner .jp-banner-v{font-size:1rem;white-space:nowrap}
.auth-jp-crown{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#f0cd7e;font-size:1.05rem}
.auth-jp-chevron{flex:0 0 auto;color:#d8ab4e;font-size:.82rem}
.auth-jp-banner:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (max-width:360px){
  .auth-jp-banner{padding-left:15px;padding-right:15px;gap:8px}
  .auth-jp-banner .jp-banner-t{font-size:.53rem;letter-spacing:.8px}
  .auth-jp-banner .jp-banner-v{font-size:.9rem}
}
@media (max-width:360px){
  .jp-banner-art{display:none}
}
/* Slot-games picker modal: rows reuse the banner's charcoal-gold plaque look */
.sg-list{display:flex;flex-direction:column;gap:10px}
.sg-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--radius);text-decoration:none;
  background:linear-gradient(180deg,#1c1712,#0f0c08);border:1px solid #3a3020;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.sg-row:active{transform:scale(.98)}
.sg-art{width:52px;height:52px;border-radius:12px;flex-shrink:0}
.sg-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sg-name{font-size:.85rem;font-weight:800;color:#f0cd7e;letter-spacing:.5px}
.sg-jp{font-size:.7rem;font-weight:700;color:#8d8168;text-transform:uppercase;letter-spacing:1px}
.sg-jp b{color:#d8ab4e;font-variant-numeric:tabular-nums;margin-left:2px}
.sg-play{position:relative;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-size:.64rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:#040404;background:linear-gradient(140deg,#f3d488,#d8ab4e 45%,#b48c36);padding:6px 11px;border-radius:99px}
.sg-play i{font-size:.58rem}
/* launching: text+chevron inherit transparent, spinner takes the pill */
.sg-row.loading{pointer-events:none}
.sg-row.loading .sg-play{color:transparent}
.sg-row.loading .sg-play::after{content:'';position:absolute;inset:0;margin:auto;width:12px;height:12px;border-radius:50%;
  border:2px solid rgba(4,4,4,.25);border-top-color:#040404;animation:sgspin .7s linear infinite}
@keyframes sgspin{to{transform:rotate(360deg)}}
/* ── Station in-card countdown ── */
.stn-draw-row{display:flex;align-items:center;justify-content:flex-start;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.24));border-radius:var(--radius) var(--radius) 0 0;padding:6px 14px;gap:10px;margin:-11px -14px 0}
.stn-draw-info{display:flex;align-items:center;gap:4px;font-size:.67rem;font-weight:600;color:rgba(255,255,255,.75);flex-shrink:0}
/* Draw caption ("1st Draw") shown all-caps here to match the card's bold header look —
   the formatter emits mixed case; this is the designed-uppercase spot (see Draw::ballLabel). */
.stn-draw-phase{text-transform:uppercase}
.stn-draw-dot{opacity:.45;margin:0 1px}
.stn-draw-timer{font-size:.9rem;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.04em;flex-shrink:0}
.stn-draw-timer.timer-urgent{color:#fca5a5;text-shadow:0 0 8px rgba(252,165,165,.5)}
.stn-draw-mult{margin-left:auto;display:flex;align-items:center;gap:4px;flex-shrink:0;font-size:.82rem;font-weight:900;color:#fff;letter-spacing:-.01em;white-space:nowrap}
.stn-draw-mult i{font-size:.7rem;opacity:.8}
.stn-draw-row-empty .stn-draw-none-txt{font-size:.67rem;color:rgba(255,255,255,.55)}
/* ── Favorite-station star (sits beside the payout multiplier) ── */
@media (max-width:360px){
  .stn-draw-row{padding-left:9px;padding-right:9px;gap:5px}
  .stn-draw-info{gap:2px;font-size:.6rem}
  .stn-draw-dot{margin:0}
  .stn-draw-timer{font-size:.78rem;letter-spacing:0}
  .stn-draw-mult{gap:2px;font-size:.72rem}
  .stn-draw-mult i{font-size:.62rem}
}
@container (max-width:350px){
  .stn-draw-row{padding-left:9px;padding-right:9px;gap:5px}
  .stn-draw-info{gap:2px;font-size:.6rem}
  .stn-draw-dot{margin:0}
  .stn-draw-timer{font-size:.78rem;letter-spacing:0}
  .stn-draw-mult{gap:2px;font-size:.72rem}
  .stn-draw-mult i{font-size:.62rem}
}
@media (max-width:359px){
  /* Preserve phase, scheduled time, live countdown, and multiplier at 320px.
     Only the decorative clock is removed; tighter gutters and gaps
     keep the complete information row inside the station card. */
  .stn-draw-row{padding-left:6px;padding-right:6px;gap:3px}
  .stn-draw-info{gap:1px}
  .stn-draw-info>i{display:none}
  .stn-draw-mult{gap:1px;font-size:.68rem}
}
/* ── Game Mode Toggle Switch ── */
.mode-switch{position:relative;display:inline-block;width:52px;height:28px;flex-shrink:0}
.mode-switch input{opacity:0;width:0;height:0;position:absolute}
.mode-switch-slider{position:absolute;cursor:pointer;inset:0;background:var(--border2);border-radius:99px;transition:background .22s}
.mode-switch-slider::before{content:'';position:absolute;height:22px;width:22px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.mode-switch input:checked + .mode-switch-slider{background:linear-gradient(135deg,var(--tumbok),var(--purple))}
.mode-switch input:checked + .mode-switch-slider::before{transform:translateX(24px)}
.mode-switch input:disabled + .mode-switch-slider{opacity:.45;cursor:not-allowed}
/* ── Segmented tab bar (Game Mode) ── */
.mode-segment{display:flex;background:var(--bg-input2);position:relative;gap:0}
.mode-segment .ms-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:none;padding:12px 14px;font-size:.82rem;font-weight:700;color:var(--text-muted);cursor:pointer;transition:background .22s,color .22s;font-family:inherit;white-space:nowrap;position:relative}
.mode-segment .ms-btn i{font-size:.85rem;opacity:.65;transition:opacity .22s}
.mode-segment .ms-btn:hover:not(.active){color:var(--text);background:rgba(0,0,0,.03)}
.mode-segment .ms-btn.active{background:var(--bg-card);color:var(--accent)}
.mode-segment .ms-btn.active i{opacity:1}
.mode-segment .ms-btn.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent)}
.mode-segment .ms-btn#msGitnaan.active{color:var(--purple)}

[data-theme="dark"]{
  /* Brand charcoal (#040404) — true-black backdrop lifted to stepped surfaces so
     body text never sits on raw black (halation guard); gold accents are
     low-luminance enough that gold-on-black doesn't glow the way white-on-black does. */
  --bg:#040404;--bg-card:#161616;--bg-input:#101010;--bg-input2:#0a0a0a;
  --text:#e5e7eb;--text-muted:#9ca3af;--text-light:#8d96a4;
  --border:#2b2b2b;--border2:#3d3d3d;
  --shadow-sm:0 1px 3px rgba(0,0,0,.45);--shadow:0 4px 16px rgba(0,0,0,.55);--shadow-lg:0 8px 32px rgba(0,0,0,.65);
  --shadow-card:0 1px 3px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.55);
  /* Bright brand gold accent (kept distinct from --danger red so actions ≠ errors) */
  --accent:#d8ab4e;--accent-light:rgba(216,171,78,.18);
  --on-accent:#040404;
  --success-light:rgba(22,163,74,.15);--danger-light:rgba(239,68,68,.15);
  --warning-light:rgba(217,119,6,.15);--purple-light:rgba(124,58,237,.2);
  --tumbok-light:rgba(29,78,216,.2);--sahod-light:rgba(8,145,178,.15);
  --gitnaan-light:rgba(124,58,237,.2);
  /* Wallet gold reads brighter on dark surfaces */
  --wallet-gold-bright:#d8ab4e;--wallet-gold-soft:rgba(216,171,78,.18);--wallet-gold-text:#d8ab4e;--wallet-promo-text:#22c55e;--wallet-refund-text:#f39c12;
  color-scheme:dark
}
/* ── Dark mode overrides — only values that differ from the variable defaults ── */
[data-theme="dark"] .bal-box{background:var(--bg-input)}
[data-theme="dark"] .flash.success,[data-theme="dark"] .flash.error{background:rgba(15,23,42,.25)}
[data-theme="dark"] .flash.player-flash.success,[data-theme="dark"] .flash.player-flash.error{background:var(--bg-card)}
[data-theme="dark"] .form-group input:focus,[data-theme="dark"] .form-group select:focus{background:var(--bg-input)}
[data-theme="dark"] .form-group input::placeholder,[data-theme="dark"] .form-group select::placeholder{color:var(--text-light)}
[data-theme="dark"] .num-input:focus{background:var(--bg-input)}
[data-theme="dark"] .bettor-name-input::placeholder{color:var(--text-light)}
[data-theme="dark"] .bettor-name-input:focus{background:var(--bg-input)}
[data-theme="dark"] .draw-btn.cancelled{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.2)}
[data-theme="dark"] .draw-btn.locked{background:rgba(234,179,8,.06);border-color:rgba(234,179,8,.2)}
[data-theme="dark"] .draw-btn.paused{background:rgba(234,179,8,.06);border-color:rgba(234,179,8,.2)}
[data-theme="dark"] .ts-amt-box{background:var(--bg-input);border-color:var(--border)}
[data-theme="dark"] .bottom-nav-item{color:var(--text-muted)}
[data-theme="dark"] .bottom-nav-item.active{color:var(--accent)}

[data-theme="dark"] input[type=number]{background:var(--bg-input);color:var(--text)}
[data-theme="dark"] .mode-segment .ms-btn:hover:not(.active){background:rgba(255,255,255,.04)}
/* ── Admin dark overrides ── */
[data-theme="dark"] .adm-section{border-color:var(--border)}
[data-theme="dark"] .adm-tbl-input:focus{background:var(--bg-input)}
[data-theme="dark"] .adm-members-table th,[data-theme="dark"] .adm-members-table td{border-color:var(--border)}
[data-theme="dark"] .adm-tr-alt td{background:rgba(255,255,255,.03)}
[data-theme="dark"] .adm-status-draft{background:rgba(161,98,7,.25);color:#fbbf24}
[data-theme="dark"] .adm-status-complete{background:rgba(15,118,110,.25);color:#5eead4}
[data-theme="dark"] .adm-status-no-result{background:rgba(190,18,60,.25);color:#fb7185}
[data-theme="dark"] .adm-status-upcoming{background:rgba(124,58,237,.25);color:#c4b5fd}
[data-theme="dark"] .adm-status-open{background:rgba(37,99,235,.25);color:#93c5fd}
[data-theme="dark"] .adm-status-betting-closed{background:rgba(234,88,12,.25);color:#fb923c}
[data-theme="dark"] .adm-status-closed{background:rgba(71,85,105,.25);color:var(--border2)}
[data-theme="dark"] .adm-status-no-draw{background:rgba(14,116,144,.2);color:#22d3ee}
[data-theme="dark"] .adm-status-paused{background:rgba(161,98,7,.25);color:#fbbf24}
[data-theme="dark"] .btn-sm-nodraw{background:rgba(14,116,144,.2);color:#22d3ee}
[data-theme="dark"] .same-num-notice{background:rgba(161,98,7,.2);border-color:#f59e0b;color:#fbbf24}
[data-theme="dark"] .sdot.s-won{background:rgba(22,163,74,.2);color:#86efac}
[data-theme="dark"] .sdot.s-lost{background:rgba(220,38,38,.2);color:#fca5a5}
[data-theme="dark"] .sdot.s-lost:empty{
  background:radial-gradient(circle at 50% 35%,#ef4444,#b91c1c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 1px 3px rgba(0,0,0,.5)}
[data-theme="dark"] .sdot.s-pending{background:rgba(217,119,6,.2);color:#fcd34d}
[data-theme="dark"] .rpt-kpi-card.blue{border-color:rgba(37,99,235,.35)}
[data-theme="dark"] .rpt-kpi-card.blue .rpt-kpi-icon{background:rgba(37,99,235,.18);color:#93c5fd}
[data-theme="dark"] .rpt-kpi-card.green{border-color:rgba(22,163,74,.35)}
[data-theme="dark"] .rpt-kpi-card.green .rpt-kpi-icon{background:rgba(22,163,74,.18);color:#86efac}
[data-theme="dark"] .rpt-kpi-card.red{border-color:rgba(220,38,38,.35)}
[data-theme="dark"] .rpt-kpi-card.red .rpt-kpi-icon{background:rgba(220,38,38,.18);color:#fca5a5}
[data-theme="dark"] .rpt-kpi-card.orange{border-color:rgba(234,88,12,.35)}
[data-theme="dark"] .rpt-kpi-card.orange .rpt-kpi-icon{background:rgba(234,88,12,.18);color:#fdba74}
[data-theme="dark"] .rpt-phase-tag{color:#93c5fd;background:rgba(59,130,246,.16)}
[data-theme="dark"] .rpt-expandable.rpt-open .rpt-caret{color:#93c5fd}
[data-theme="dark"] .al-pill:hover{background:var(--bg-input)}
/* ── Lucky Pick button — ghost-gold secondary action (Place Bet below it
   carries the solid-gold primary treatment; this stays visually lighter). ── */
.btn-lucky{
  width:100%;
  border:none;
  border-top:1px solid var(--border);
  background:var(--accent-light);
  color:var(--accent);
  padding:13px 16px;
  font-size:.88rem;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  font-family:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:background .18s,color .18s;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.btn-lucky:hover:not(:disabled){background:rgba(180,140,54,.22)}
.btn-lucky:hover #diceIcon{transform:rotate(14deg) scale(1.08)}
.btn-lucky:active:not(:disabled){background:rgba(180,140,54,.3)}
.btn-lucky:active #diceIcon{transform:rotate(-10deg) scale(.94)}
.btn-lucky:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.6);
}
.btn-lucky #diceIcon{
  font-size:1.1rem;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  display:inline-block;
}
/* Draws & Results — strong row hover (background + accent bar + light border) */
#draws-results-table tbody tr {
  transition: background-color .12s ease, box-shadow .12s ease, color .12s ease;
}
#draws-results-table tbody tr:hover td,
#draws-results-table tbody tr.adm-tr-alt:hover td {
  background: #f2e6c9 !important;
  color: #3d2f0f !important;
  font-weight: 600 !important;
  border-top:    1px solid #cbab63 !important;
  border-bottom: 1px solid #cbab63 !important;
}
#draws-results-table tbody tr:hover td:first-child {
  box-shadow: inset 4px 0 0 #b48c36;
  border-left: 1px solid #cbab63 !important;
}
#draws-results-table tbody tr:hover td:last-child {
  border-right: 1px solid #cbab63 !important;
}

/* ── Cash-in iframe payment step ───────────────────────────── */
#playerCashinModalBox { padding: 20px; }
/* During payment, expand the modal so the gateway's QR page fits without being
   clipped by the 90vh cap or the step-1 padding. Scoped via .cashin-paying so
   the amount form (step 1) keeps its compact sizing. */
#playerCashinModalBox.cashin-paying { padding: 16px; max-width: 480px; max-height: 96vh; }
.cashin-iframe-wrap {
  border-radius: 12px;
  overflow: hidden;
  background: #f1f5f9;
  margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,.07);
  -webkit-overflow-scrolling: touch;
}
.cashin-iframe-wrap iframe {
  width: 100%;
  /* Viewport-relative so the full CoinPay QR page shows on tall screens, while
     scrolling="yes" on the iframe covers anything still taller. Clamped so it
     never collapses on short screens or grows unwieldy on desktop. */
  height: calc(96vh - 150px);
  min-height: 460px;
  max-height: 760px;
  border: none;
  display: block;
}
.cashin-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--text-muted);
  padding: 2px 0;
}
.cashin-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: cashin-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes cashin-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .45; transform: scale(.75); }
}
/* Step-2 payment layout */
.cashin-pay-topbar { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.cashin-pay-topbar .cashin-timer { margin-left: auto; }
.cashin-pay-footer { text-align: center; padding-top: 10px; }
.cashin-scan-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-muted);
  pointer-events: none;
  user-select: none;
}
.cashin-scan-label i { font-size: .88rem; color: var(--accent); opacity: .75; }
/* Status text mirrors the scan/save label typography for visual consistency */
#cashinStatusText {
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Countdown timer pill */
.cashin-timer {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .4px;
  white-space: nowrap;
  border: 1.5px solid #bfdbfe;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37,99,235,.12);
  transition: background .4s, color .4s, border-color .4s, box-shadow .4s;
}
.cashin-timer i { font-size: .78rem; opacity: .8; }
.cashin-timer.warning {
  border-color: #fcd34d;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #b45309;
  box-shadow: 0 2px 8px rgba(180,83,9,.12);
}
.cashin-timer.urgent {
  border-color: #fca5a5;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #dc2626;
  box-shadow: 0 2px 8px rgba(220,38,38,.15);
  animation: cashin-timer-blink 1s ease-in-out infinite;
}
@keyframes cashin-timer-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}
[data-theme="dark"] .cashin-timer {
  background: linear-gradient(135deg, rgba(37,99,235,.18) 0%, rgba(37,99,235,.1) 100%);
  border-color: rgba(37,99,235,.35);
  color: #93c5fd;
}
[data-theme="dark"] .cashin-timer.warning {
  background: linear-gradient(135deg, rgba(245,158,11,.18) 0%, rgba(245,158,11,.1) 100%);
  border-color: rgba(245,158,11,.35);
  color: #fcd34d;
}
[data-theme="dark"] .cashin-timer.urgent {
  background: linear-gradient(135deg, rgba(239,68,68,.18) 0%, rgba(239,68,68,.1) 100%);
  border-color: rgba(239,68,68,.35);
  color: #f87171;
}

/* Active Stations panel card */
.stations-panel{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-card);margin:0 16px 20px;overflow:hidden;position:relative}
/* Bottom fade for the scrollable stations list — overlays the foot of the panel so the
   peeked 4th card dissolves into the card background; toggled .is-visible from JS. */
.stations-fade{position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--bg-card));opacity:0;transition:opacity .18s ease}
.stations-fade.is-visible{opacity:1}
.stations-panel-head{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--border);container-type:inline-size}
.stations-panel-title{font-size:.78rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px}
.stations-panel-count{font-size:.7rem;font-weight:700;color:var(--text-muted);background:var(--bg-input2);border:1px solid var(--border);border-radius:99px;padding:2px 9px}
.stations-panel-body{padding:14px 12px 14px;container-type:inline-size}

/* LIGAHO results modal – modern redesign */
.btn-ligaho{background:var(--accent-light);color:var(--accent);border:1.5px solid var(--accent);padding:5px 14px;border-radius:99px;font-size:.72rem;font-weight:800;cursor:pointer;letter-spacing:.05em;transition:transform .15s,background .15s;flex-shrink:0;white-space:nowrap}
.btn-ligaho:hover{transform:translateY(-1px);background:rgba(180,140,54,.22)}
.btn-ligaho:active{transform:translateY(0)}
.ligaho-modal{max-height:92vh;padding:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:flex;flex-direction:column;overflow:hidden}
.ligaho-accent-bar{height:3px;background:var(--brand-gold-grad);flex-shrink:0}
.ligaho-head{background:#fff;border-bottom:1px solid var(--border);flex-shrink:0;padding:10px 12px;display:flex;align-items:center;gap:6px}
.ligaho-head .station-dd{flex:1;min-width:0}
.ligaho-month-lbl{font-size:.85rem;font-weight:900;color:var(--text);letter-spacing:.04em;min-width:36px;text-align:center;text-transform:uppercase}
.ligaho-month-lbl.ligaho-current-month{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.ligaho-month-lbl.ligaho-current-month::after{content:'CURRENT';margin-top:3px;color:var(--wallet-gold-text);font-size:.44rem;font-weight:900;letter-spacing:.75px}
.ligaho-head .station-dd-btn{
  background:linear-gradient(135deg,#fbf1da 0%,#f2dcac 50%,#ecd398 100%);
  color:var(--wallet-gold-text);border:1px solid var(--border);border-radius:12px;
  padding:10px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 3px rgba(180,140,54,.15);
  text-shadow:none;
}
.ligaho-head .station-dd-btn .sdd-pin,.ligaho-head .station-dd-btn .sdd-caret{color:var(--wallet-gold-text)}
[data-theme="dark"] .ligaho-head .station-dd-btn{
  background:linear-gradient(135deg,rgba(216,171,78,.18) 0%,rgba(216,171,78,.12) 100%);
  border-color:rgba(216,171,78,.35);box-shadow:none;
  color:var(--wallet-gold-text);
}
.ligaho-nav-btn{background:var(--bg-input2);border:1px solid var(--border);border-radius:8px;width:30px;height:30px;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:.72rem;transition:all .15s;font-family:inherit;flex-shrink:0}
.ligaho-nav-btn:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ligaho-nav-btn:disabled,.ligaho-nav-btn:disabled:hover{opacity:.28;cursor:default;box-shadow:none;background:var(--bg-input2);color:var(--text-muted);border-color:var(--border)}
#ligahoStationPanel .station-dd-item{width:100%;border:0;background:transparent;font-family:inherit;cursor:pointer;text-align:left}
#ligahoStationPanel .station-dd-item:hover{background:var(--bg-input)}
#ligahoStationPanel .station-dd-item.active{background:var(--accent-light)}
#ligahoStationPanel .station-dd-item:focus-visible{outline:3px solid #0b63ce;outline-offset:-3px;background:color-mix(in srgb,#0b63ce 12%,var(--bg-card));box-shadow:inset 0 0 0 1px #fff}
.ligaho-station-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.ligaho-station-tabs::-webkit-scrollbar{display:none}
.ligaho-tab{background:var(--bg-input2);border:2px solid transparent;border-radius:99px;padding:5px 14px;font-size:.7rem;font-weight:800;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:all .18s;font-family:inherit;letter-spacing:.03em;flex-shrink:0}
.ligaho-tab:hover{color:var(--text);background:var(--bg-input)}
.ligaho-tab-active{background:#fff}
.ligaho-table-wrap{overflow:auto;flex:1;overscroll-behavior:contain}
.ligaho-table{width:100%;border-collapse:collapse;font-size:.8rem}
.ligaho-table thead{position:sticky;top:0;z-index:5}
.ligaho-table thead th{background:var(--bg-input);padding:9px 10px;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);text-align:center;border-bottom:2px solid var(--border);white-space:nowrap}
.ligaho-th-day{text-align:left;min-width:68px;padding-left:14px}
.ligaho-table tbody tr{border-bottom:1px solid var(--bg-input2);transition:background .1s}
.ligaho-table tbody tr:hover:not(.ligaho-today){background:var(--bg-input)}
.ligaho-today{background:color-mix(in srgb,var(--accent) 7%,transparent) !important}
.ligaho-today .ligaho-dnum{color:var(--accent)}
.ligaho-today .ligaho-day-cell{border-left:3px solid var(--accent)}
.ligaho-future .ligaho-dow,.ligaho-future .ligaho-dnum{opacity:.3}
.ligaho-future .ligaho-result{opacity:.18}
.ligaho-sun .ligaho-dow,.ligaho-sun .ligaho-dnum{color:#f97316}
.ligaho-day-cell{padding:8px 10px 8px 14px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.ligaho-dow{font-size:.63rem;font-weight:700;color:var(--text-muted);width:26px;flex-shrink:0}
.ligaho-dnum{font-weight:900;color:var(--text);font-size:.88rem;line-height:1;min-width:18px}
.ligaho-result{text-align:center;padding:6px 8px;border-left:1px solid var(--border)}
.ligaho-pill{display:inline-block;background:var(--bg-input2);border:1px solid var(--border);border-radius:6px;padding:3px 9px;font-size:.76rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.04em;font-family:monospace}
.ligaho-empty{color:var(--border2);font-size:.75rem;line-height:1}
.ligaho-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:10px;color:var(--text-muted);font-size:.82rem}
.ligaho-loading i{font-size:1.6rem;color:var(--accent);opacity:.65}
.ligaho-err{display:flex;align-items:center;justify-content:center;padding:40px 20px;color:var(--text-muted);gap:8px;font-size:.84rem}
[data-theme="dark"] .ligaho-head{background:var(--bg-card)}
[data-theme="dark"] .ligaho-tab-active{background:var(--bg-card)}
[data-theme="dark"] .ligaho-pill{background:var(--bg-input)}

/* Dashboard station search box */
.dash-stn-search{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.dash-stn-search-icon{position:absolute;left:13px;font-size:.76rem;color:var(--accent);opacity:.75;pointer-events:none;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.dash-stn-search-input{width:100%;height:34px;padding:0 32px 0 32px;border-radius:99px;border:1.5px solid var(--border);background:var(--bg-input2);color:var(--text);font-size:.74rem;font-weight:700;letter-spacing:.05em;font-family:inherit;transition:border-color .18s,box-shadow .18s,background .18s}
.dash-stn-search-input::placeholder{color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:1}
.dash-stn-search-input:focus{outline:none;border-color:var(--accent);background:var(--bg-input);box-shadow:0 0 0 3px rgba(216,171,78,.18),0 0 14px rgba(216,171,78,.25)}
.dash-stn-search-input:focus ~ .dash-stn-search-icon{color:var(--accent);opacity:1;transform:rotate(-12deg) scale(1.08)}
.dash-stn-search-clear{position:absolute;right:6px;width:24px;height:24px;border:none;border-radius:50%;background:var(--bg-input);color:var(--text-muted);font-size:.66rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;animation:dashStnClearIn .15s ease}
.dash-stn-search-clear:hover{background:var(--accent-light);color:var(--accent)}
@container (max-width:311px){
  .dash-stn-search-input{padding-left:30px;padding-right:24px;font-size:.68rem;letter-spacing:.02em}
  .dash-stn-search-input::placeholder{letter-spacing:.02em}
}
@keyframes dashStnClearIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

/* Dashboard station search empty state */
.dash-stn-search-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:34px 20px;color:var(--text-muted);font-size:.8rem;text-align:center}
.dash-stn-search-empty i{font-size:1.5rem;color:var(--border2)}
.dash-stn-search-empty span{font-weight:600}

/* ── Dashboard Recent Bets card ── */
.dash-recent-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-card);margin:0 16px 16px;overflow:hidden}
.dash-recent-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 10px;border-bottom:1px solid var(--border)}
.dash-recent-title{font-size:.78rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:6px}
.dash-recent-title i{font-size:.72rem;color:var(--text-muted)}
.dash-recent-more{font-size:.7rem;font-weight:700;color:var(--accent);text-decoration:none;display:flex;align-items:center;gap:4px}
.dash-recent-more i{font-size:.6rem}
.dash-recent-list{padding:0}
/* Recent Winners rows are a CSS grid, not flexbox: dash-winners-inner defines
   6 shared column tracks (dot|nums|station|when|combo|amount) and every
   .dash-bet-row is a `subgrid` that maps its 6 direct children 1:1 onto those
   SAME tracks. Because every row shares one set of track widths, "when" (and
   every other column) sits at an identical x-position on every row — a wider
   win amount on one row grows only the amount track, never displaces "when"
   or "station" on any row. This replaces an earlier flex layout where the
   amount pill (flex-shrink:0, variable width per row) ate into the row's
   remaining space and made the time/date column drift left/right per row.
   Station is the sole flexible column (minmax(0,1fr)) and is the only piece
   that ellipsizes under pressure. */
/* The 12px horizontal inset lives on dash-winners-inner (the real grid), not
   on dash-bet-row (the subgrid) — a subgrid's tracks must land on the exact
   same grid lines as its parent, so giving the row its own horizontal
   padding shrinks its content box below what those inherited tracks need,
   and the browser compresses/misaligns the columns (the dot ends up
   overlapping the username). Row padding is vertical-only for that reason. */
.dash-winners-inner{display:grid;grid-template-columns:8px auto minmax(0,1fr) auto auto auto;column-gap:7px;padding:0 12px}
.dash-bet-row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;column-gap:7px;padding:7px 0;border-bottom:1px solid var(--bg-input2)}
.dash-bet-row:last-child{border-bottom:none}
.dash-bet-dot{width:8px;height:8px;border-radius:50%}
.dash-bet-nums{font-size:.7rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-bet-station{font-size:.65rem;color:var(--text-muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.dash-bet-when{font-size:.65rem;color:var(--text-muted);font-weight:600;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.dash-bet-amount{font-size:.75rem;font-weight:800;color:var(--text)}
.dash-bet-status{display:inline-flex;align-items:center;justify-content:center;align-self:center;justify-self:end;font-size:.65rem;font-weight:800;padding:2px 6px;border-radius:99px;text-transform:capitalize;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-bet-pending{background:var(--bg-input2);color:var(--text-muted)}
.dash-bet-won{background:#dcfce7;color:#16a34a}
.dash-bet-lost{background:#fee2e2;color:#dc2626}
.dash-bet-cancelled{background:var(--bg-input2);color:var(--text-muted);text-decoration:line-through}
[data-theme="dark"] .dash-bet-won{background:rgba(22,163,74,.2);color:#4ade80}
[data-theme="dark"] .dash-bet-lost{background:rgba(220,38,38,.2);color:#f87171}

/* Recent Winners */
.dash-recent-title i.fa-star{color:var(--wallet-gold-bright)}
.dash-winner-combo{display:inline-flex;align-items:center;justify-content:center;align-self:center;justify-self:center;font-size:.8rem;font-weight:900;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.06em;background:var(--bg-input2);border:1px solid var(--border);border-radius:6px;padding:2px 6px;min-width:48px;text-align:center;white-space:nowrap}
/* The player shell is capped at 450px even on desktop, so Recent Winners
   always uses its compact two-line composition. Time/date sits below the
   identity row, preserving a meaningful station track throughout the shell. */
.dash-winners-inner{grid-template-columns:8px auto minmax(28px,1fr) auto auto}
.dash-bet-row{grid-template-columns:subgrid;grid-template-rows:auto auto;row-gap:2px}
.dash-bet-dot{grid-column:1;grid-row:1}
.dash-bet-nums{grid-column:2;grid-row:1}
.dash-bet-station{grid-column:3;grid-row:1}
.dash-winner-combo{grid-column:4;grid-row:1/3}
.dash-bet-status{grid-column:5;grid-row:1/3}
.dash-bet-when{grid-column:2/4;grid-row:2;text-align:left}
/* Narrow phones also slim the fixed-width columns down a notch. */
@media (max-width:400px){
  .dash-winners-inner,.dash-bet-row{column-gap:6px}
  .dash-winners-inner{padding:0 10px}
  .dash-bet-nums{font-size:.64rem}
  .dash-bet-station{font-size:.62rem}
  .dash-bet-when{font-size:.62rem}
  .dash-bet-status{font-size:.62rem;padding:2px 5px}
  .dash-winner-combo{min-width:44px;padding:2px 4px}
}
/* Tiny screens intentionally omit the station label. The flexible third
   track remains as breathing room while draw time occupies the second row. */
@media (max-width:365px){
  .dash-winners-inner{grid-template-columns:8px auto minmax(0,1fr) auto auto}
  .dash-winners-inner,.dash-bet-row{column-gap:5px}
  .dash-bet-station{display:none}
  .dash-bet-nums{font-size:.6rem}
  .dash-bet-when{font-size:.6rem}
  .dash-bet-status{font-size:.6rem;padding:2px 4px}
  .dash-winner-combo{font-size:.74rem;padding:2px 3px}
}

/* Recent Winners ticker. JS sizes the viewport to five complete rows and moves
   between row offsets, while native touch/wheel scrolling remains available. */
.dash-recent-list{height:228px;overflow-y:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dash-recent-list::-webkit-scrollbar{display:none}
.dash-recent-empty{display:flex;align-items:center;justify-content:center;gap:9px;min-height:88px;padding:20px;color:var(--text-muted);font-size:.82rem;text-align:center}
.dash-recent-empty i{color:var(--accent);opacity:.75}

/* Exact-count station setup */
.station-setup-shell{margin:16px 16px 24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.station-setup-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:24px;border-bottom:1px solid var(--border)}
.station-setup-kicker{display:block;color:var(--accent);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.station-setup-head h1{margin:0 0 7px;color:var(--text);font-size:1.45rem;line-height:1.15}
.station-setup-head p{max-width:650px;margin:0;color:var(--text-muted);font-size:.84rem;line-height:1.55}
.station-count-badge{display:flex;align-items:baseline;gap:5px;flex:0 0 auto;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-input);color:var(--text-muted);font-size:.75rem;white-space:nowrap}
.station-count-badge strong{font-size:1.2rem;color:var(--danger);font-variant-numeric:tabular-nums}
.station-setup-shell.is-complete .station-count-badge strong{color:var(--success)}
.station-setup-notice{display:flex;align-items:flex-start;gap:9px;margin:16px 20px 0;padding:11px 13px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:10px;background:var(--accent-light);color:var(--text);font-size:.8rem;line-height:1.45}
.station-setup-notice.is-warning{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.1)}
.station-setup-notice.is-warning i{color:var(--warning)}
.station-setup-error{margin:14px 20px 0;padding:10px 12px;border-radius:9px;background:var(--danger-light);color:var(--danger);font-size:.78rem;font-weight:700}
.station-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:20px}
.station-choice-card{position:relative;display:flex;align-items:center;gap:11px;min-width:0;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg-card);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.station-choice-card:hover{border-color:var(--station-color);transform:translateY(-1px)}
.station-choice-card.is-selected{border-color:var(--station-color);background:color-mix(in srgb,var(--station-color) 8%,var(--bg-card))}
.station-choice-card.is-readonly{cursor:default;opacity:.9;transform:none}
.station-choice-card>input{position:absolute;opacity:0;pointer-events:none}
.station-choice-mark{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border:1.5px solid var(--border2);border-radius:7px;color:transparent;background:var(--bg-input)}
.station-choice-card.is-selected .station-choice-mark{color:#fff;background:var(--station-color);border-color:var(--station-color)}
.station-choice-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--station-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--station-color) 14%,transparent)}
.station-choice-copy{display:flex;flex-direction:column;min-width:0;gap:2px}
.station-choice-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:.88rem}
.station-choice-copy small{color:var(--text-muted);font-size:.7rem}
.station-setup-actions{display:flex;justify-content:flex-end;padding:0 20px 20px}
.station-setup-actions .btn-primary{width:auto;min-width:190px;margin:0}
.station-dashboard-link{text-align:center;text-decoration:none}
.station-change-notice{position:relative;display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:12px;background:var(--bg-card);box-shadow:var(--shadow-card);color:var(--text);font-size:.78rem;line-height:1.4}
.station-change-notice.has-flash{top:auto}
.station-change-notice>i{color:var(--accent)}
.station-change-notice>span{flex:1;min-width:0}
.station-change-notice>a{color:var(--accent);font-weight:800}
.station-change-notice>button{border:0;background:var(--bg-input);color:var(--text-muted);border-radius:7px;width:44px;height:44px;flex:0 0 44px;font-size:1.1rem;cursor:pointer}
@media(max-width:560px){
  .stations-panel-head{flex-wrap:nowrap;gap:8px}
  .stations-panel-head .btn-ligaho{height:44px;padding:0 10px;font-size:.75rem;letter-spacing:.025em}
  .dash-stn-search{flex:1 1 0;min-width:0}
  .dash-stn-search-input{height:44px;min-width:0;padding:0 36px 0 30px;font-size:1rem;letter-spacing:normal}
  .dash-stn-search-input::placeholder{text-transform:none;letter-spacing:normal}
  .dash-stn-search-icon{left:11px}
  .dash-stn-search-clear{right:4px;width:28px;height:28px}
  .station-setup-head{flex-direction:column;padding:20px}
  .station-count-badge{align-self:stretch;justify-content:center}
  .station-choice-grid{grid-template-columns:1fr;padding:16px}
  .station-setup-actions{padding:0 16px 16px}
  .station-setup-actions .btn-primary{width:100%}
}

.pd-station-manager{margin:14px 0 20px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--bg-input)}
.pd-station-manager-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.pd-station-manager-head h4{margin:2px 0 0;color:var(--text);font-size:1rem}
#pd-station-count{padding:5px 9px;border-radius:99px;background:var(--danger-light);color:var(--danger);font-size:.7rem;font-weight:800;white-space:nowrap}
#pd-station-count.is-complete{background:var(--success-light);color:var(--success)}
.pd-station-message{margin:0 0 12px;color:var(--text-muted);font-size:.75rem}
.pd-station-policy{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;margin-bottom:12px}
.pd-station-policy label{display:flex;flex-direction:column;gap:5px;color:var(--text-muted);font-size:.7rem;font-weight:800}
.pd-station-policy input{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--bg-card);color:var(--text);font:inherit;font-weight:500}
.pd-station-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:11px}
.pd-station-option{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 9px;border:1px solid var(--border);border-radius:9px;background:var(--bg-card);cursor:pointer}
.pd-station-option:has(input:checked){border-color:var(--station-color)}
.pd-station-option input{position:absolute;opacity:0;pointer-events:none}
.pd-station-option-mark{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border:1px solid var(--border2);border-radius:5px;color:transparent}
.pd-station-option input:checked+.pd-station-option-mark{color:#fff;background:var(--station-color);border-color:var(--station-color)}
.pd-station-option strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:.75rem}
.pd-station-pending{margin-left:auto;color:var(--warning);font-size:.66rem;font-weight:800;white-space:nowrap}
.pd-station-lock-note{display:flex;align-items:flex-start;gap:7px;margin:0 0 12px;color:var(--text-muted);font-size:.7rem;line-height:1.45}
.pd-station-lock-note i{color:var(--accent);margin-top:2px}
.pd-station-manager .btn-primary{width:100%;margin:0}
@media(max-width:700px){.pd-station-policy,.pd-station-grid{grid-template-columns:1fr}}

[data-theme="dark"] .form-group textarea{background:var(--bg-input);color:var(--text);border-color:var(--border)}

/* ── Dark-theme leftovers ──
   Now that --accent/--brand-gold-grad are the single brand gold in both themes,
   most of the old per-component "amber-ize" overrides became exact duplicates of
   their (now gold) base rules and were removed. What's left is genuinely
   dark-specific (deeper shadows/tints that only make sense against near-black).
   Semantic blues — status "open" badges and the blue KPI card — stay blue. */
[data-theme="dark"] .wallet-hero{box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 1px rgba(216,171,78,.25)}
[data-theme="dark"] #draws-results-table tbody tr:hover td,[data-theme="dark"] #draws-results-table tbody tr.adm-tr-alt:hover td{background:rgba(216,171,78,.14)!important;color:var(--text)!important;border-top-color:rgba(216,171,78,.40)!important;border-bottom-color:rgba(216,171,78,.40)!important}
[data-theme="dark"] #draws-results-table tbody tr:hover td:first-child{box-shadow:inset 4px 0 0 #d8ab4e;border-left-color:rgba(216,171,78,.40)!important}

/* ── PanaSelect — native <select>s enhanced to match the station selector ──
   Reuses .station-dd-panel / .station-dd-item / .sdd-head / .sdd-caret. The
   trigger mirrors the light "ligaho-head" pill; the panel is appended to
   <body> and positioned (fixed) by JS so a modal's overflow never clips it. */
.pana-select{position:relative;display:block;width:100%}
.pana-select[data-inline]{display:inline-block;width:auto;vertical-align:middle}
.pana-select-btn{
  display:flex;width:100%;align-items:center;gap:8px;justify-content:space-between;
  background:var(--bg-card);
  color:var(--text);border:1px solid var(--border);border-radius:12px;
  padding:10px 14px;font-size:.82rem;font-weight:700;letter-spacing:.02em;
  cursor:pointer;white-space:nowrap;font-family:inherit;text-align:left;
  box-shadow:var(--shadow-sm);
  transition:border-color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;
}
.pana-select-btn:hover{border-color:var(--border2)}
.pana-select-btn:active{transform:translateY(1px)}
.pana-select-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pana-select-btn .sdd-caret{color:var(--text-muted);font-size:.66rem;flex-shrink:0;transition:transform .2s}
.pana-select.open .sdd-caret{transform:rotate(180deg)}
.pana-select.pana-invalid .pana-select-btn{animation:panaShake .4s;border-color:var(--danger)}
@keyframes panaShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.pana-select-panel{overflow-x:hidden}
.pana-select-panel .station-dd-item{width:100%;border:none;background:none;font-family:inherit;cursor:pointer;text-align:left}
.pana-select-panel .station-dd-item>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pana-select-check{visibility:hidden;font-size:.72rem;color:var(--accent);flex-shrink:0}
.pana-select-panel .station-dd-item.active .pana-select-check{visibility:visible}
.pana-select-panel .station-dd-item:focus-visible{outline:none;background:var(--bg-input);box-shadow:inset 0 0 0 1px var(--accent)}
[data-theme="dark"] .pana-select-btn{background:var(--bg-input);box-shadow:none}

/* Searchable panels: sticky label + filter bar that stays pinned while the
   options scroll underneath. Offsets the panel's 6px padding so the bar sits
   flush to the top edge. */
.pana-select-top{
  position:sticky;top:-6px;z-index:1;
  margin:-6px -6px 4px;padding:6px 6px 0;
  background:var(--bg-card);border-radius:14px 14px 0 0;
}
.pana-select-searchable .pana-select-top{border-bottom:1px solid var(--border);padding-bottom:8px}
.pana-select-search{position:relative;display:flex;align-items:center}
.pana-select-search .fa-search{
  position:absolute;left:12px;font-size:.74rem;color:var(--text-light);pointer-events:none;
}
.pana-select-search input{
  width:100%;box-sizing:border-box;
  padding:9px 12px 9px 30px;
  font-family:inherit;font-size:.84rem;color:var(--text);
  background:var(--bg-input);border:1px solid var(--border);border-radius:10px;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.pana-select-search input::placeholder{color:var(--text-light)}
.pana-select-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.pana-select-noresults{
  padding:18px 12px;text-align:center;font-size:.82rem;font-weight:600;color:var(--text-light);
}
[data-theme="dark"] .pana-select-top{background:var(--bg-card)}
.field-hint.err{color:var(--danger)}
.field-hint.ok{color:var(--success)}
.form-group.cp-err input{border-color:var(--danger)}
.form-group.cp-ok input{border-color:var(--success)}
.form-group.cp-err input:focus{border-color:var(--danger);box-shadow:0 0 0 3px rgba(239,68,68,.1)}
.form-group.cp-ok input:focus{border-color:var(--success);box-shadow:0 0 0 3px rgba(22,163,74,.1)}