/* ════════════════════════════════════════════════════════
   Desktop v3 (2026-05-12) — desktop_v2.html 适配
   Activates on body.ui-v3 + viewport ≥1024px
   ════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  body.ui-v3 {
    background: #08090C !important;
  }

  /* Center main content with max-width like Stake/desktop_v2 */
  body.ui-v3 #bs-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 24px 120px !important;
  }

  /* Top bar — keep but enlarge, gold accents */
  body.ui-v3 .v3-topbar {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 32px 12px !important;
  }
  body.ui-v3 .v3-avatar { width: 44px !important; height: 44px !important; font-size: 16px !important; }
  body.ui-v3 .v3-greet-1 { font-size: 12px !important; }
  body.ui-v3 .v3-greet-2 { font-size: 16px !important; }
  body.ui-v3 .v3-icon-btn { width: 42px !important; height: 42px !important; font-size: 18px !important; }

  /* Hero — wider, horizontal split (balance left, actions right) */
  body.ui-v3 .v3-hero {
    padding: 32px 36px !important;
    max-width: 1400px;
    margin: 8px auto 16px !important;
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    gap: 32px !important;
    align-items: center !important;
  }
  body.ui-v3 .v3-balance .num { font-size: 56px !important; }
  body.ui-v3 .v3-balance .cur { font-size: 18px !important; }
  body.ui-v3 .v3-hero-row { font-size: 14px !important; }
  body.ui-v3 .v3-hero-sub { font-size: 13px !important; }
  body.ui-v3 .v3-hero-actions {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 12px !important; margin-top: 0 !important;
  }
  body.ui-v3 .v3-btn { height: 48px !important; font-size: 14px !important; }

  /* Wager strip — wider */
  body.ui-v3 .v3-wager {
    max-width: 1400px;
    margin: 0 auto 16px !important;
    padding: 14px 24px !important;
  }

  /* Stories — show all 6 + bigger */
  body.ui-v3 .v3-stories {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 32px 24px !important;
    justify-content: flex-start;
    gap: 16px !important;
  }
  body.ui-v3 .v3-story { width: 84px !important; }
  body.ui-v3 .v3-story-ring { width: 72px !important; height: 72px !important; }
  body.ui-v3 .v3-story-inner { font-size: 28px !important; }
  body.ui-v3 .v3-story-label { font-size: 11px !important; }

  /* Live ticker — wider */
  body.ui-v3 .v3-ticker {
    max-width: 1400px;
    margin: 0 auto 24px !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
  }

  /* Section headers */
  body.ui-v3 .v3-sec-head {
    max-width: 1400px;
    margin: 24px auto 14px !important;
    padding: 0 8px;
  }
  body.ui-v3 .v3-sec-head h3 { font-size: 18px !important; }
  body.ui-v3 .v3-sec-head a { font-size: 13px !important; }

  /* Featured carousel — 3 cards visible @ wider */
  body.ui-v3 .v3-featured {
    max-width: 1400px;
    margin: 0 auto !important;
    padding: 0 8px 32px !important;
    gap: 16px !important;
  }
  body.ui-v3 .v3-feat {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 360px !important;
    height: 200px !important;
  }
  body.ui-v3 .v3-feat-title { font-size: 22px !important; }
  body.ui-v3 .v3-feat-meta { font-size: 13px !important; }

  /* Jackpot banner — wider + bigger */
  body.ui-v3 .v3-jackpot {
    max-width: 1400px;
    margin: 0 auto 24px !important;
    padding: 20px 28px !important;
  }
  body.ui-v3 .v3-jp-ic { font-size: 44px !important; }
  body.ui-v3 .v3-jp-amt { font-size: 32px !important; }
  body.ui-v3 .v3-jp-sub { font-size: 12px !important; }
  body.ui-v3 .v3-jp-cta { font-size: 13px !important; padding: 10px 18px !important; }

  /* Game grid — 6 cols on desktop */
  body.ui-v3 .games-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 14px !important;
    padding: 0 8px !important;
    max-width: 1400px;
    margin: 0 auto !important;
  }
  body.ui-v3 .game-tile { border-radius: 12px !important; }

  /* Category pills row — bigger */
  body.ui-v3 .cat-row {
    max-width: 1400px;
    margin: 0 auto 16px !important;
    padding: 0 8px !important;
    gap: 10px !important;
  }
  body.ui-v3 .cat-btn { padding: 10px 18px !important; font-size: 14px !important; }

  /* Hide mobile bnav on desktop */
  body.ui-v3 .bottom-nav { display: none !important; }
  body.ui-v3 #bs-container { padding-bottom: 60px !important; }

  /* Show topbar-like top desktop navigation */
  body.ui-v3 .v3-topbar {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(8,9,12,0.92) !important;
    backdrop-filter: blur(16px);
    position: sticky; top: 0; z-index: 60;
  }
  body.ui-v3 .v3-topbar::before {
    content: 'PLATFOUND';
    font-weight: 900; font-size: 18px;
    letter-spacing: -.02em; color: var(--v3-text);
    margin-right: 18px;
    background: linear-gradient(180deg, #E8C25C, #D4A93A);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* v3 toggle pill desktop position */
  body.ui-v3 .ui-v3-toggle {
    bottom: 16px !important; left: 16px !important;
    font-size: 10px !important; padding: 4px 10px !important;
  }

  /* Modal-deposit sheet should be centered modal on desktop, not bottom sheet */
  body.ui-v3 .v3-sheet-host {
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,.6);
  }
  body.ui-v3 .v3-sheet {
    max-width: 520px !important;
    max-height: 92vh !important;
    border-radius: 20px !important;
    animation: v3-modal-pop .25s cubic-bezier(.2,.8,.2,1) !important;
  }
  @keyframes v3-modal-pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

  /* Game detail full-screen on desktop becomes centered modal */
  body.ui-v3 .v3-detail-host {
    width: 90vw !important; max-width: 1100px !important;
    height: 88vh !important; max-height: 800px !important;
    top: 50% !important; left: 50% !important; inset: auto !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
  }
  body.ui-v3 .v3-detail-cta {
    max-width: 1100px !important;
    border-radius: 0 0 20px 20px !important;
  }
}

/* Larger desktop ≥1440 — more breathing room */
@media (min-width: 1440px) {
  body.ui-v3 .games-grid { grid-template-columns: repeat(7, 1fr) !important; }
  body.ui-v3 .v3-feat { min-width: 400px !important; }
}

/* Override the @media 769px show rule from mobile-v3.css */
@media (min-width: 1024px) {
  body.ui-v3 nav.bottom-nav,
  body.ui-v3 .bottom-nav,
  body.ui-v3 .bnav-inner { display: none !important; }
}

/* 桌面也隐 marquee + 任何 KASINO #1 MALAYSIA 滚动条 */
@media (min-width: 1024px) {
  body.ui-v3 .bs-d-marquee,
  body.ui-v3 .bs-d-marquee-track,
  body.ui-v3 [class*='marquee'] { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════ */
/* 2026-05-12 unified gold — override per-brand colors in bs3 modals     */
/* All brands now share gold gradient per design system mandate          */
/* ════════════════════════════════════════════════════════════════════ */
body.ui-v3 .bs3-modal[data-brand="918"],
body.ui-v3 .bs3-modal[data-brand="pg"],
body.ui-v3 .bs3-modal[data-brand="jili"],
body.ui-v3 .bs3-modal[data-brand="pussy"],
body.ui-v3 .bs3-modal[data-brand="mega"],
body.ui-v3 .bs3-modal[data-brand="spade"] {
  --bsm-brand:      var(--ds-gold-400);
  --bsm-brand-2:    var(--ds-gold-600);
  --bsm-brand-soft: var(--ds-gold-soft);
  --bsm-brand-glow: var(--ds-gold-glow);
  /* Use design-system surface/bg */
  --bsm-bg:        var(--ds-bg);
  --bsm-surface:   var(--ds-surface);
  --bsm-elevated:  var(--ds-surface-2);
  --bsm-text:      var(--ds-text);
  --bsm-text-2:    var(--ds-text-2);
  --bsm-text-3:    var(--ds-text-3);
  --bsm-text-4:    var(--ds-text-4);
  --bsm-border:    var(--ds-border);
  --bsm-border-2:  var(--ds-border-strong);
}

/* Primary CTA: dark text on gold (better contrast than white) */
body.ui-v3 .bs3-cta-primary { color: #1a1a1a !important; }

/* Hero amount — strict 32px display + JBM mono per design system */
body.ui-v3 .bs3-hero-amount {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xl);
  font-variant-numeric: tabular-nums;
}

/* Lobby wallet amount — keep gold tint but use mono */
body.ui-v3 .bs3-lobby-wallet .amt {
  color: var(--ds-gold-400);
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Brand mark — gold gradient + dark text */
body.ui-v3 .bs3-brand-mark { color: #1a1a1a; }

/* Active segment + filter — dark text on gold */
body.ui-v3 .bs3-seg-btn.active,
body.ui-v3 .bs3-filter.active { color: #1a1a1a; }
body.ui-v3 .bs3-filter.active { background: var(--ds-gradient-gold); border-color: var(--ds-gold-500); }

/* Quick chip selected — gold-tinted */
body.ui-v3 .bs3-quick.selected {
  background: var(--ds-gold-soft);
  border-color: var(--ds-gold-400);
  color: var(--ds-gold-400);
}

/* ════════════════════════════════════════════════════════════════════ */
/* v3 Layout Normalization (2026-05-12)                                  */
/* Container limits · Gutters → 16/24px grid · Winner ticker → narrow    */
/* ════════════════════════════════════════════════════════════════════ */

/* PC 1200px center + H5 16px gutter — applied to main app shell */
body.ui-v3 #bs-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ds-s-3);   /* 16px on mobile */
  padding-right: var(--ds-s-3);
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  body.ui-v3 #bs-container {
    padding-left: var(--ds-s-4);  /* 24px on desktop */
    padding-right: var(--ds-s-4);
  }
}

/* Right-rail layout — keep rail outside container but respect width */
@media (min-width: 1280px) {
  body.ui-v3 #bs-container { padding-right: 358px !important; max-width: 1200px; }
}

/* Game grids — strict 16px gutter (was 10-12) */
body.ui-v3 .games-grid,
body.ui-v3 .game-grid,
body.ui-v3 .v3-game-grid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: var(--ds-s-3) !important;
}

/* Category row — same gutter */
body.ui-v3 .cat-row {
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: var(--ds-s-2) !important;
}

/* Hero, sections, modules — vertical rhythm */
body.ui-v3 #v3-hero-host { margin-bottom: var(--ds-s-4); }
body.ui-v3 section + section,
body.ui-v3 .section + .section { margin-top: var(--ds-s-5); }

/* ──── Winner ticker — collapse fixed bottom-left toast into bar ──── */
body.ui-v3 #winner-ticker {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  width: 100% !important;
  max-width: 100% !important;
  background: var(--ds-surface) !important;
  border-top: 1px solid var(--ds-border) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  padding: 6px var(--ds-s-3) !important;
  z-index: 40 !important;
  pointer-events: auto !important;
}
body.ui-v3 #winner-ticker > * {
  font-size: var(--ds-text-xs) !important;
  color: var(--ds-text-2) !important;
  max-width: 100% !important;
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
@media (min-width: 1024px) {
  body.ui-v3 #winner-ticker { bottom: 0 !important; }
}

/* Promo / live-now / news scrolling marquees — same narrow style */
body.ui-v3 .v3-ticker,
body.ui-v3 .v3-marquee,
body.ui-v3 .bs-live-now-bar,
body.ui-v3 .marquee {
  height: 32px;
  padding: 0 var(--ds-s-3);
  background: var(--ds-surface);
  border: none;
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
  border-radius: 0;
  display: flex;
  align-items: center;
}
body.ui-v3 .v3-ticker .v3-ticker-text,
body.ui-v3 .marquee .marquee-text {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-2);
}

/* ──── Border noise removal — replace thin border with surface contrast ──── */
body.ui-v3 .card,
body.ui-v3 .panel,
body.ui-v3 .bs-card,
body.ui-v3 .info-card {
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  border-radius: var(--ds-r-lg);
}
/* Inner sections that used hairline dividers → use surface bg shift instead */
body.ui-v3 .card-divider,
body.ui-v3 hr.divider,
body.ui-v3 .panel hr,
body.ui-v3 .card hr {
  display: none;
}
body.ui-v3 .card > section + section,
body.ui-v3 .panel > section + section {
  margin-top: var(--ds-s-3);
  background: var(--ds-bg-elevated);
  border-radius: var(--ds-r-md);
  padding: var(--ds-s-3);
}

/* ──── Buttons — sweep legacy .btn-* classes to inherit ds- states ──── */
body.ui-v3 .btn-gold,
body.ui-v3 .btn-primary,
body.ui-v3 .bs-btn-primary {
  background: var(--ds-gradient-gold) !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: var(--ds-r-md) !important;
  font-weight: var(--ds-weight-bold) !important;
  font-family: var(--ds-font-sans) !important;
  box-shadow: var(--ds-shadow-gold) !important;
  transition: transform var(--ds-dur-1) var(--ds-ease),
              filter var(--ds-dur-2) var(--ds-ease),
              box-shadow var(--ds-dur-2) var(--ds-ease) !important;
}
body.ui-v3 .btn-gold:hover:not(:disabled),
body.ui-v3 .btn-primary:hover:not(:disabled),
body.ui-v3 .bs-btn-primary:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 12px 32px -8px var(--ds-gold-glow) !important;
}
body.ui-v3 .btn-gold:active:not(:disabled),
body.ui-v3 .btn-primary:active:not(:disabled),
body.ui-v3 .bs-btn-primary:active:not(:disabled) {
  transform: scale(0.97);
  filter: brightness(0.95);
}
body.ui-v3 .btn-gold:disabled,
body.ui-v3 .btn-primary:disabled,
body.ui-v3 .bs-btn-primary:disabled {
  background: var(--ds-surface-2) !important;
  color: var(--ds-text-4) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

body.ui-v3 .btn-ghost {
  background: transparent !important;
  color: var(--ds-text-2) !important;
  border: 1px solid var(--ds-border-strong) !important;
  border-radius: var(--ds-r-md) !important;
  transition: background var(--ds-dur-2) var(--ds-ease),
              border-color var(--ds-dur-2) var(--ds-ease) !important;
}
body.ui-v3 .btn-ghost:hover:not(:disabled) {
  background: var(--ds-overlay) !important;
  color: var(--ds-text) !important;
  border-color: var(--ds-border-gold) !important;
}
body.ui-v3 .btn-ghost:active:not(:disabled) { transform: scale(0.97); }
body.ui-v3 .btn-ghost:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

/* Same rules on desktop view */
body:not(.ui-v3) .btn-gold,
body:not(.ui-v3) .btn-primary,
body:not(.ui-v3) .bs-btn-primary {
  transition: transform var(--ds-dur-1) var(--ds-ease),
              filter var(--ds-dur-2) var(--ds-ease),
              box-shadow var(--ds-dur-2) var(--ds-ease) !important;
}
body:not(.ui-v3) .btn-gold:hover:not(:disabled),
body:not(.ui-v3) .btn-primary:hover:not(:disabled),
body:not(.ui-v3) .bs-btn-primary:hover:not(:disabled) {
  filter: brightness(1.05);
}
body:not(.ui-v3) .btn-gold:active:not(:disabled),
body:not(.ui-v3) .btn-primary:active:not(:disabled),
body:not(.ui-v3) .bs-btn-primary:active:not(:disabled) {
  transform: scale(0.97);
}

/* ──── PC desktop specifics ──── */
@media (min-width: 1024px) {
  body.ui-v3 .v3-hero,
  body.ui-v3 #v3-hero-host > * {
    max-width: 1152px;  /* 1200 - 2×24 padding */
    margin-left: auto;
    margin-right: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════ */
/* v3 Home Hero + Bottom Nav + Deposit Modal — design system pass        */
/* CSS-only override · keeps existing IDs / JS bindings intact            */
/* ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1) v3 HERO — balance card + actions + stories + ticker
─────────────────────────────────────────────────────────────────────── */
body.ui-v3 #v3-hero-host {
  display: flex;
  flex-direction: column;
  gap: var(--ds-s-3);
  margin-bottom: var(--ds-s-4);
}

/* Topbar */
body.ui-v3 .v3-topbar {
  display: flex;
  align-items: center;
  gap: var(--ds-s-3);
  padding: var(--ds-s-3) 0;
}
body.ui-v3 .v3-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ds-gradient-gold);
  color: #1a1a1a;
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-weight-bold);
  font-size: var(--ds-text-md);
  display: grid; place-items: center;
  flex-shrink: 0;
}
body.ui-v3 .v3-greet { flex: 1; min-width: 0; }
body.ui-v3 .v3-greet-1 {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-3);
  line-height: 1.3;
}
body.ui-v3 .v3-greet-2 {
  font-size: var(--ds-text-sm);
  color: var(--ds-text);
  font-weight: var(--ds-weight-semibold);
  display: flex; align-items: center; gap: var(--ds-s-2);
  margin-top: 2px;
}
body.ui-v3 .v3-vip-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-gold-soft);
  color: var(--ds-gold-400);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.5px;
}
body.ui-v3 .v3-icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  color: var(--ds-text);
  display: grid; place-items: center;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  transition: background var(--ds-dur-2) var(--ds-ease);
  border: none;
}
body.ui-v3 .v3-icon-btn:hover { background: var(--ds-surface-2); }
body.ui-v3 .v3-icon-btn:active { transform: scale(0.95); }
body.ui-v3 .v3-notif-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ds-error);
  border: 2px solid var(--ds-bg);
}

/* HERO balance card — design system surface + gold accents */
body.ui-v3 .v3-hero {
  background: linear-gradient(135deg, var(--ds-surface) 0%, var(--ds-bg-elevated) 100%);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-s-4);
  position: relative;
  overflow: hidden;
}
body.ui-v3 .v3-hero::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, var(--ds-gold-glow) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.6;
}
body.ui-v3 .v3-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--ds-text-xs);
  color: var(--ds-text-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: var(--ds-weight-medium);
  margin-bottom: var(--ds-s-2);
}
body.ui-v3 .v3-delta {
  font-size: var(--ds-text-xs);
  color: var(--ds-success);
  font-weight: var(--ds-weight-semibold);
  font-family: var(--ds-font-mono);
}
body.ui-v3 .v3-balance {
  display: flex;
  align-items: baseline;
  gap: var(--ds-s-2);
  font-family: var(--ds-font-mono);
  margin-bottom: var(--ds-s-3);
}
body.ui-v3 .v3-balance .cur {
  font-size: var(--ds-text-md);
  color: var(--ds-text-2);
  font-weight: var(--ds-weight-medium);
}
body.ui-v3 .v3-balance .num {
  font-size: 40px;
  font-weight: var(--ds-weight-bold);
  color: var(--ds-text);
  letter-spacing: -1.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
body.ui-v3 .v3-hero-sub {
  display: flex; gap: var(--ds-s-4);
  font-size: var(--ds-text-xs);
  color: var(--ds-text-3);
  padding-top: var(--ds-s-3);
  border-top: 1px solid var(--ds-border);
  margin-bottom: var(--ds-s-3);
}
body.ui-v3 .v3-hero-sub b {
  color: var(--ds-gold-400);
  font-family: var(--ds-font-mono);
  font-weight: var(--ds-weight-bold);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
body.ui-v3 .v3-hero-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--ds-s-2);
}
body.ui-v3 .v3-hero-actions .v3-btn {
  padding: 12px var(--ds-s-3);
  background: var(--ds-surface-2);
  color: var(--ds-text);
  border: none;
  border-radius: var(--ds-r-md);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  cursor: pointer;
  transition: background var(--ds-dur-2) var(--ds-ease), transform var(--ds-dur-1) var(--ds-ease);
}
body.ui-v3 .v3-hero-actions .v3-btn:hover { background: var(--ds-bg-elevated); }
body.ui-v3 .v3-hero-actions .v3-btn:active { transform: scale(0.97); }
body.ui-v3 .v3-hero-actions .v3-btn-primary {
  background: var(--ds-gradient-gold);
  color: #1a1a1a;
  font-weight: var(--ds-weight-bold);
  box-shadow: var(--ds-shadow-gold);
}
body.ui-v3 .v3-hero-actions .v3-btn-primary:hover { filter: brightness(1.05); }
body.ui-v3 .v3-hero-actions .v3-btn-primary:active { transform: scale(0.97); filter: brightness(0.95); }

/* Wager bar — flat surface, no thin borders */
body.ui-v3 .v3-wager {
  display: flex;
  align-items: center;
  gap: var(--ds-s-3);
  padding: var(--ds-s-3);
  background: var(--ds-surface);
  border-radius: var(--ds-r-md);
  border: none;
}
body.ui-v3 .v3-wager-icon {
  width: 36px; height: 36px;
  border-radius: var(--ds-r-sm);
  background: var(--ds-gold-soft);
  color: var(--ds-gold-400);
  display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
body.ui-v3 .v3-wager-body { flex: 1; min-width: 0; }
body.ui-v3 .v3-wager-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--ds-text-xs);
  color: var(--ds-text-2);
  margin-bottom: 6px;
}
body.ui-v3 .v3-wager-row b {
  color: var(--ds-text);
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
}
body.ui-v3 .v3-bar {
  height: 4px;
  background: var(--ds-bg-elevated);
  border-radius: 2px;
  overflow: hidden;
}
body.ui-v3 .v3-bar i {
  display: block;
  height: 100%;
  background: var(--ds-gradient-gold);
  width: 0%;
  border-radius: 2px;
  transition: width var(--ds-dur-3) var(--ds-ease);
}

/* Stories row — clean circles, no rainbow ring */
body.ui-v3 .v3-stories {
  display: flex;
  gap: var(--ds-s-3);
  overflow-x: auto;
  padding: var(--ds-s-1) 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.ui-v3 .v3-stories::-webkit-scrollbar { display: none; }
body.ui-v3 .v3-story {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  width: 64px;
  transition: transform var(--ds-dur-1) var(--ds-ease);
}
body.ui-v3 .v3-story:active { transform: scale(0.95); }
body.ui-v3 .v3-story-ring {
  width: 56px; height: 56px;
  border-radius: 50%;
  padding: 2px;
  background: var(--ds-gradient-gold);
}
body.ui-v3 .v3-story-ring.viewed {
  background: var(--ds-border-strong);
}
body.ui-v3 .v3-story-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--ds-surface);
  display: grid; place-items: center;
  font-size: 22px;
}
body.ui-v3 .v3-story-label {
  font-size: 11px;
  color: var(--ds-text-2);
  text-align: center;
  line-height: 1.3;
}

/* Ticker — narrow strip (was already overridden by layout-normalize) */
body.ui-v3 .v3-ticker {
  display: flex; align-items: center; gap: var(--ds-s-2);
  height: 32px;
  padding: 0 var(--ds-s-3);
  background: var(--ds-surface);
  border: none;
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
  border-radius: 0;
  overflow: hidden;
}
body.ui-v3 .v3-ticker .v3-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ds-error);
  box-shadow: 0 0 6px var(--ds-error);
  flex-shrink: 0;
  animation: bs3-pulse 2s infinite;
}
body.ui-v3 .v3-ticker-text {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.ui-v3 .v3-ticker-text b { color: var(--ds-gold-400); font-family: var(--ds-font-mono); font-weight: var(--ds-weight-bold); }

/* ─────────────────────────────────────────────────────────────────────
   2) BOTTOM NAV — unified states, 8px grid, glassy backdrop
─────────────────────────────────────────────────────────────────────── */
body.ui-v3 nav.bottom-nav,
body.ui-v3 .bottom-nav {
  background: rgba(17, 17, 21, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--ds-border) !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
  padding: 0 !important;
}
body.ui-v3 .bnav-inner {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--ds-s-2) var(--ds-s-3);
  padding-bottom: calc(var(--ds-s-2) + env(safe-area-inset-bottom));
  gap: 0 !important;
}
body.ui-v3 .bnav-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  background: transparent !important;
  border: none !important;
  border-radius: var(--ds-r-sm);
  color: var(--ds-text-3) !important;
  cursor: pointer;
  transition: color var(--ds-dur-2) var(--ds-ease),
              background var(--ds-dur-2) var(--ds-ease),
              transform var(--ds-dur-1) var(--ds-ease);
  font-family: var(--ds-font-sans);
}
body.ui-v3 .bnav-item:hover { color: var(--ds-text-2) !important; background: var(--ds-overlay); }
body.ui-v3 .bnav-item:active { transform: scale(0.92); }
body.ui-v3 .bnav-item.active,
body.ui-v3 .bnav-item[aria-current="page"] {
  color: var(--ds-gold-400) !important;
  background: var(--ds-gold-soft);
}
body.ui-v3 .bnav-item .bnav-icon,
body.ui-v3 .bnav-item svg,
body.ui-v3 .bnav-item .bnav-emoji {
  font-size: 20px;
  line-height: 1;
}
body.ui-v3 .bnav-item .bnav-label {
  font-size: 10px;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0.2px;
  text-transform: none;
}

/* ─────────────────────────────────────────────────────────────────────
   3) DEPOSIT MODAL — clean cards, no inline gradient noise
─────────────────────────────────────────────────────────────────────── */
body.ui-v3 #modal-deposit > .modal,
body.ui-v3 #modal-deposit > .auth-card {
  background: var(--ds-bg) !important;
  border: 1px solid var(--ds-border-strong) !important;
  border-radius: var(--ds-r-xl) !important;
  padding: var(--ds-s-4) !important;
  max-width: 480px !important;
  width: 96% !important;
  font-family: var(--ds-font-sans);
  color: var(--ds-text);
}
@media (max-width: 480px) {
  body.ui-v3 #modal-deposit > .modal,
  body.ui-v3 #modal-deposit > .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--ds-r-xl) var(--ds-r-xl) 0 0 !important;
    padding: var(--ds-s-3) !important;
  }
}

/* Title */
body.ui-v3 #modal-deposit h3 {
  font-size: var(--ds-text-lg) !important;
  font-weight: var(--ds-weight-bold) !important;
  letter-spacing: -0.3px;
  color: var(--ds-text) !important;
}

/* Back/close button */
body.ui-v3 #modal-deposit .mw-back-btn {
  background: var(--ds-overlay) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-text-2) !important;
  border-radius: var(--ds-r-sm) !important;
  padding: 6px var(--ds-s-2) !important;
  font-size: var(--ds-text-xs) !important;
  font-weight: var(--ds-weight-semibold) !important;
  transition: background var(--ds-dur-2) var(--ds-ease) !important;
}
body.ui-v3 #modal-deposit .mw-back-btn:hover { background: var(--ds-overlay-2) !important; color: var(--ds-text) !important; }

body.ui-v3 #modal-deposit [data-i18n="depositPickPg"],
body.ui-v3 #modal-deposit [data-i18n="depositPickMethod"] {
  font-size: var(--ds-text-xs) !important;
  color: var(--ds-text-3) !important;
}

/* Deposit card list */
body.ui-v3 #deposit-card-list,
body.ui-v3 .deposit-card-list {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ds-s-2) !important;
}
body.ui-v3 .deposit-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  padding: var(--ds-s-3) !important;
  cursor: pointer;
  transition: border-color var(--ds-dur-2) var(--ds-ease),
              background var(--ds-dur-2) var(--ds-ease),
              transform var(--ds-dur-1) var(--ds-ease) !important;
}
body.ui-v3 .deposit-card:hover { border-color: var(--ds-border-gold) !important; background: var(--ds-surface-2) !important; }
body.ui-v3 .deposit-card:active { transform: scale(0.99); }
body.ui-v3 .deposit-card.dc-active {
  border-color: var(--ds-gold-400) !important;
  background: var(--ds-gold-soft) !important;
  box-shadow: 0 0 0 2px var(--ds-gold-soft);
}

/* Deposit card badges — unify on ds-badge style */
body.ui-v3 .deposit-card-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: var(--ds-s-2) !important;
}
body.ui-v3 .deposit-card-badges .dc-badge {
  padding: 3px var(--ds-s-2) !important;
  background: var(--ds-bg-elevated) !important;
  color: var(--ds-text-2) !important;
  border-radius: var(--ds-r-pill) !important;
  font-size: 10px !important;
  font-weight: var(--ds-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  background-image: none !important;
}
body.ui-v3 .deposit-card-badges .dc-badge.dc-recommend {
  background: var(--ds-gold-soft) !important;
  color: var(--ds-gold-400) !important;
  background-image: none !important;
}
body.ui-v3 .deposit-card-badges .dc-badge.dc-instant {
  background: var(--ds-success-bg) !important;
  color: var(--ds-success) !important;
  background-image: none !important;
}

/* Bank logos row — neutral grey blocks, not rainbow */
body.ui-v3 .deposit-card-logos {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: var(--ds-s-2) !important;
}
body.ui-v3 .deposit-card-logos .dc-logo {
  padding: 2px 6px !important;
  background: var(--ds-bg) !important;
  color: var(--ds-text-3) !important;
  border-radius: 4px !important;
  font-size: 9px !important;
  font-weight: var(--ds-weight-semibold) !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

body.ui-v3 .deposit-card-title {
  font-size: var(--ds-text-md) !important;
  font-weight: var(--ds-weight-bold) !important;
  color: var(--ds-text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}
body.ui-v3 .deposit-card-title .dc-min {
  font-size: 10px !important;
  font-weight: var(--ds-weight-semibold) !important;
  color: var(--ds-text-3) !important;
  font-family: var(--ds-font-mono);
}
body.ui-v3 .deposit-card-sub {
  font-size: var(--ds-text-xs) !important;
  color: var(--ds-text-3) !important;
  line-height: 1.4;
}

/* Welcome promo banner — collapse to single tinted card */
body.ui-v3 #dep-welcome-banner {
  background: linear-gradient(135deg, var(--ds-gold-soft), transparent) !important;
  border: 1px solid var(--ds-border-gold) !important;
  border-radius: var(--ds-r-md) !important;
  padding: var(--ds-s-3) !important;
  text-align: left !important;
  color: var(--ds-text) !important;
  box-shadow: none !important;
}
body.ui-v3 #dep-welcome-banner > div:first-child {
  font-size: var(--ds-text-xs) !important;
  color: var(--ds-gold-400) !important;
  font-weight: var(--ds-weight-bold) !important;
}
body.ui-v3 #dep-welcome-banner > div:nth-child(2) {
  font-size: var(--ds-text-md) !important;
  color: var(--ds-text) !important;
  font-weight: var(--ds-weight-bold) !important;
}
body.ui-v3 #dep-welcome-banner > div:nth-child(3) {
  font-size: var(--ds-text-xs) !important;
  color: var(--ds-text-3) !important;
}

/* Amount field */
body.ui-v3 .dep-amount-label {
  font-size: var(--ds-text-xs) !important;
  color: var(--ds-text-2) !important;
  font-weight: var(--ds-weight-semibold) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--ds-s-2) !important;
}
body.ui-v3 #dep-amount {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  color: var(--ds-text) !important;
  font-family: var(--ds-font-mono) !important;
  font-size: var(--ds-text-md) !important;
  font-weight: var(--ds-weight-semibold) !important;
  padding: 14px var(--ds-s-3) !important;
}
body.ui-v3 #dep-amount:focus {
  border-color: var(--ds-gold-400) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--ds-gold-soft);
}
body.ui-v3 .bs-hint[data-i18n="depositMinMaxHint"] {
  font-size: var(--ds-text-xs) !important;
  color: var(--ds-text-3) !important;
  margin-top: 6px;
}

/* Quick amount chips — match bs3-quick style */
body.ui-v3 .dep-quick-row {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: var(--ds-s-1) !important;
  margin-top: var(--ds-s-2) !important;
}
body.ui-v3 .dep-quick-amt {
  padding: 10px 6px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-sm) !important;
  color: var(--ds-text-2) !important;
  font-family: var(--ds-font-mono) !important;
  font-size: var(--ds-text-xs) !important;
  font-weight: var(--ds-weight-bold) !important;
  cursor: pointer;
  transition: all var(--ds-dur-2) var(--ds-ease) !important;
}
body.ui-v3 .dep-quick-amt:hover { border-color: var(--ds-gold-400) !important; color: var(--ds-text) !important; }
body.ui-v3 .dep-quick-amt:active { transform: scale(0.95); }
body.ui-v3 .dep-quick-amt.selected,
body.ui-v3 .dep-quick-amt[aria-pressed="true"] {
  background: var(--ds-gold-soft) !important;
  border-color: var(--ds-gold-400) !important;
  color: var(--ds-gold-400) !important;
}

/* Promo block — tone down dashed border + colored bg */
body.ui-v3 .dep-promo-block {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  padding: var(--ds-s-3) !important;
  margin-top: var(--ds-s-3) !important;
}
body.ui-v3 .dep-promo-block label {
  color: var(--ds-gold-400) !important;
  font-size: var(--ds-text-xs) !important;
  font-weight: var(--ds-weight-bold) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--ds-s-2) !important;
}
body.ui-v3 #dep-promo-select {
  background: var(--ds-bg) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-sm) !important;
  color: var(--ds-text) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-text-sm) !important;
  padding: 10px var(--ds-s-3) !important;
}
body.ui-v3 #dep-promo-select:focus {
  border-color: var(--ds-gold-400) !important;
  outline: none;
}
body.ui-v3 #dep-promo-estimate {
  background: var(--ds-success-bg) !important;
  border: 1px solid var(--ds-success) !important;
  border-radius: var(--ds-r-sm) !important;
  color: var(--ds-success) !important;
  font-size: var(--ds-text-xs) !important;
}
body.ui-v3 #dep-promo-bonus-amt {
  font-family: var(--ds-font-mono) !important;
  color: var(--ds-gold-400) !important;
}

/* Action row */
body.ui-v3 .dep-actions {
  display: grid !important;
  grid-template-columns: 1fr 2fr !important;
  gap: var(--ds-s-2) !important;
  margin-top: var(--ds-s-3) !important;
}
body.ui-v3 .dep-submit-btn {
  padding: 14px var(--ds-s-3) !important;
  font-size: var(--ds-text-md) !important;
  border-radius: var(--ds-r-md) !important;
}

/* ════════════════════════════════════════════════════════════════════ */
/* v3 Generic Modal Sweep (2026-05-12)                                   */
/* Catches all non-bs3 modals (withdraw / transfer / profile / vip /     */
/* invite / promo / checkin / lucky / rebate / leaderboard / news /      */
/* wallet) and normalizes them to design-system tokens.                  */
/* ════════════════════════════════════════════════════════════════════ */

/* ──── Baseline modal chrome — applies to any .modal in v3 mode ──── */
body.ui-v3 .modal-backdrop {
  background: rgba(6, 8, 15, 0.72) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.ui-v3 .modal-backdrop > .modal:not(.bs3-modal) {
  background: var(--ds-bg) !important;
  border: 1px solid var(--ds-border-strong) !important;
  border-radius: var(--ds-r-xl) !important;
  padding: var(--ds-s-4) !important;
  color: var(--ds-text) !important;
  font-family: var(--ds-font-sans) !important;
  max-width: 480px !important;
  width: 96% !important;
  box-shadow: var(--ds-shadow-lg);
  max-height: 92vh;
  overflow-y: auto;
}
@media (max-width: 480px) {
  body.ui-v3 .modal-backdrop > .modal:not(.bs3-modal) {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--ds-r-xl) var(--ds-r-xl) 0 0 !important;
    padding: var(--ds-s-3) !important;
  }
}

/* ──── Modal title — h3 unified ──── */
body.ui-v3 .modal-backdrop > .modal h3 {
  font-size: var(--ds-text-lg) !important;
  font-weight: var(--ds-weight-bold) !important;
  color: var(--ds-text) !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

/* ──── Close + back buttons — neutral chip style ──── */
body.ui-v3 .modal-backdrop > .modal [data-close],
body.ui-v3 .modal-backdrop > .modal [data-back-to-wallet],
body.ui-v3 .modal-backdrop > .modal .mw-back-btn {
  background: var(--ds-overlay) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-text-2) !important;
  border-radius: var(--ds-r-sm) !important;
  padding: 6px var(--ds-s-2) !important;
  font-size: var(--ds-text-xs) !important;
  font-weight: var(--ds-weight-semibold) !important;
  cursor: pointer;
  transition: background var(--ds-dur-2) var(--ds-ease) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
}
body.ui-v3 .modal-backdrop > .modal [data-close]:hover,
body.ui-v3 .modal-backdrop > .modal .mw-back-btn:hover {
  background: var(--ds-overlay-2) !important;
  color: var(--ds-text) !important;
}

/* Make close ✕ specifically a circle */
body.ui-v3 .modal-backdrop > .modal button[data-close][aria-label="close"],
body.ui-v3 .modal-backdrop > .modal button[data-close][aria-label="Close"] {
  width: 32px; height: 32px;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  justify-content: center !important;
}

/* ──── Section dim text / hints ──── */
body.ui-v3 .modal-backdrop > .modal [data-i18n] + *,
body.ui-v3 .modal-backdrop > .modal .bs-hint,
body.ui-v3 .modal-backdrop > .modal .text-xs {
  color: var(--ds-text-3) !important;
}

/* ──── Inputs / fields ──── */
body.ui-v3 .modal-backdrop > .modal input.bs-input,
body.ui-v3 .modal-backdrop > .modal input[type="text"],
body.ui-v3 .modal-backdrop > .modal input[type="number"],
body.ui-v3 .modal-backdrop > .modal input[type="email"],
body.ui-v3 .modal-backdrop > .modal input[type="tel"],
body.ui-v3 .modal-backdrop > .modal select,
body.ui-v3 .modal-backdrop > .modal textarea {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  color: var(--ds-text) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-text-sm) !important;
  padding: 12px var(--ds-s-3) !important;
  outline: none !important;
  transition: border-color var(--ds-dur-2) var(--ds-ease), box-shadow var(--ds-dur-2) var(--ds-ease) !important;
}
body.ui-v3 .modal-backdrop > .modal input:focus,
body.ui-v3 .modal-backdrop > .modal select:focus,
body.ui-v3 .modal-backdrop > .modal textarea:focus {
  border-color: var(--ds-gold-400) !important;
  box-shadow: 0 0 0 3px var(--ds-gold-soft) !important;
}

/* Amount-style inputs should use mono */
body.ui-v3 .modal-backdrop > .modal input[type="number"],
body.ui-v3 .modal-backdrop > .modal input[inputmode="decimal"] {
  font-family: var(--ds-font-mono) !important;
  font-size: var(--ds-text-md) !important;
  font-weight: var(--ds-weight-semibold) !important;
  font-variant-numeric: tabular-nums;
}

/* ──── Labels ──── */
body.ui-v3 .modal-backdrop > .modal label,
body.ui-v3 .modal-backdrop > .modal .bs-label {
  font-size: var(--ds-text-xs) !important;
  color: var(--ds-text-2) !important;
  font-weight: var(--ds-weight-semibold) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--ds-s-2) !important;
  display: block;
}

/* ──── Cards inside modal ──── */
body.ui-v3 .modal-backdrop > .modal .panel,
body.ui-v3 .modal-backdrop > .modal .info-card,
body.ui-v3 .modal-backdrop > .modal .vip-card,
body.ui-v3 .modal-backdrop > .modal .stat-card,
body.ui-v3 .modal-backdrop > .modal .promo-card,
body.ui-v3 .modal-backdrop > .modal .bs-card,
body.ui-v3 .modal-backdrop > .modal .ck-card,
body.ui-v3 .modal-backdrop > .modal .ref-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  padding: var(--ds-s-3) !important;
}

/* ──── Section dividers — collapse hairlines, use bg shift ──── */
body.ui-v3 .modal-backdrop > .modal hr,
body.ui-v3 .modal-backdrop > .modal .divider {
  border: none !important;
  height: 1px !important;
  background: var(--ds-border) !important;
  margin: var(--ds-s-3) 0 !important;
}

/* ──── Amount displays inside modals (balance / withdrawable / etc) ──── */
body.ui-v3 .modal-backdrop > .modal .amount-big,
body.ui-v3 .modal-backdrop > .modal .balance-big,
body.ui-v3 .modal-backdrop > .modal .stat-value,
body.ui-v3 .modal-backdrop > .modal .vip-progress-num {
  font-family: var(--ds-font-mono) !important;
  font-variant-numeric: tabular-nums;
  font-weight: var(--ds-weight-bold) !important;
  color: var(--ds-text) !important;
}

/* ──── Tab strips inside modals (e.g. withdraw method tabs) ──── */
body.ui-v3 .modal-backdrop > .modal .tab-row,
body.ui-v3 .modal-backdrop > .modal .bs-tabs {
  display: flex !important;
  gap: 4px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 4px !important;
  margin-bottom: var(--ds-s-3) !important;
}
body.ui-v3 .modal-backdrop > .modal .tab-row > button,
body.ui-v3 .modal-backdrop > .modal .bs-tabs > button,
body.ui-v3 .modal-backdrop > .modal .bs-tab {
  flex: 1 !important;
  padding: var(--ds-s-2) var(--ds-s-3) !important;
  background: transparent !important;
  border: none !important;
  color: var(--ds-text-2) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-text-sm) !important;
  font-weight: var(--ds-weight-semibold) !important;
  border-radius: var(--ds-r-sm) !important;
  cursor: pointer;
  transition: background var(--ds-dur-2) var(--ds-ease) !important;
}
body.ui-v3 .modal-backdrop > .modal .bs-tab.active,
body.ui-v3 .modal-backdrop > .modal .tab-row .active {
  background: var(--ds-gradient-gold) !important;
  color: #1a1a1a !important;
}

/* ──── Action button row at bottom of modal ──── */
body.ui-v3 .modal-backdrop > .modal .modal-actions,
body.ui-v3 .modal-backdrop > .modal .form-actions,
body.ui-v3 .modal-backdrop > .modal .button-row {
  display: grid !important;
  grid-template-columns: 1fr 2fr !important;
  gap: var(--ds-s-2) !important;
  margin-top: var(--ds-s-4) !important;
}

/* ──── List items (referral history, leaderboard rows, etc) ──── */
body.ui-v3 .modal-backdrop > .modal .list-row,
body.ui-v3 .modal-backdrop > .modal .leaderboard-row,
body.ui-v3 .modal-backdrop > .modal .history-row,
body.ui-v3 .modal-backdrop > .modal .friend-row,
body.ui-v3 .modal-backdrop > .modal .ref-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-s-3) !important;
  padding: var(--ds-s-3) !important;
  background: var(--ds-surface) !important;
  border-radius: var(--ds-r-md) !important;
  margin-bottom: var(--ds-s-2) !important;
  border: none !important;
}

/* ──── VIP / Rank pills ──── */
body.ui-v3 .modal-backdrop > .modal .vip-pill,
body.ui-v3 .modal-backdrop > .modal .rank-pill,
body.ui-v3 .modal-backdrop > .modal .level-badge {
  background: var(--ds-gold-soft) !important;
  color: var(--ds-gold-400) !important;
  border: 1px solid var(--ds-border-gold) !important;
  border-radius: var(--ds-r-pill) !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  font-weight: var(--ds-weight-bold) !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ──── Checkin grid (7 days) ──── */
body.ui-v3 .modal-backdrop > .modal .checkin-grid,
body.ui-v3 .modal-backdrop > .modal .ck-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: var(--ds-s-2) !important;
  margin: var(--ds-s-3) 0 !important;
}
body.ui-v3 .modal-backdrop > .modal .checkin-cell,
body.ui-v3 .modal-backdrop > .modal .ck-day {
  aspect-ratio: 1;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-sm) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  font-size: 11px !important;
  color: var(--ds-text-2) !important;
}
body.ui-v3 .modal-backdrop > .modal .checkin-cell.claimed,
body.ui-v3 .modal-backdrop > .modal .ck-day.claimed {
  background: var(--ds-gold-soft) !important;
  border-color: var(--ds-gold-400) !important;
  color: var(--ds-gold-400) !important;
}
body.ui-v3 .modal-backdrop > .modal .checkin-cell.today,
body.ui-v3 .modal-backdrop > .modal .ck-day.today {
  background: var(--ds-gradient-gold) !important;
  color: #1a1a1a !important;
  font-weight: var(--ds-weight-bold) !important;
}

/* ──── Promo card list (modal-promo) ──── */
body.ui-v3 .modal-backdrop > .modal .promo-list,
body.ui-v3 .modal-backdrop > .modal .promo-card-list {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ds-s-2) !important;
}

/* ──── Lucky spin — center the wheel ──── */
body.ui-v3 #modal-lucky .modal {
  text-align: center;
}
body.ui-v3 #modal-lucky .wheel-wrap {
  margin: var(--ds-s-3) auto !important;
}

/* ──── Withdraw amount block — same treatment as deposit ──── */
body.ui-v3 #modal-withdraw .withdraw-amount-block,
body.ui-v3 #modal-withdraw #withdraw-amount {
  font-family: var(--ds-font-mono) !important;
  font-variant-numeric: tabular-nums;
}
body.ui-v3 #modal-withdraw .withdraw-quick-row,
body.ui-v3 #modal-withdraw .wd-quick-row {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: var(--ds-s-1) !important;
  margin-top: var(--ds-s-2) !important;
}
body.ui-v3 #modal-withdraw .wd-quick-amt,
body.ui-v3 #modal-withdraw .withdraw-quick-amt {
  padding: 10px 6px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-sm) !important;
  color: var(--ds-text-2) !important;
  font-family: var(--ds-font-mono) !important;
  font-size: var(--ds-text-xs) !important;
  font-weight: var(--ds-weight-bold) !important;
  cursor: pointer;
  transition: all var(--ds-dur-2) var(--ds-ease) !important;
}
body.ui-v3 #modal-withdraw .wd-quick-amt:hover,
body.ui-v3 #modal-withdraw .withdraw-quick-amt:hover {
  border-color: var(--ds-gold-400) !important;
  color: var(--ds-text) !important;
}

/* ──── Profile modal — avatar block + fields ──── */
body.ui-v3 #modal-profile .profile-avatar,
body.ui-v3 #modal-profile .avatar-big {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: var(--ds-gradient-gold) !important;
  color: #1a1a1a !important;
  display: grid !important;
  place-items: center !important;
  font-size: 28px !important;
  font-weight: var(--ds-weight-bold) !important;
  margin: 0 auto var(--ds-s-3) auto !important;
}

/* ──── Invite / referral — code box ──── */
body.ui-v3 #modal-invite .invite-code-box,
body.ui-v3 #modal-invite .ref-code-box {
  background: var(--ds-bg-elevated) !important;
  border: 1px dashed var(--ds-border-gold) !important;
  border-radius: var(--ds-r-md) !important;
  padding: var(--ds-s-3) !important;
  text-align: center !important;
  font-family: var(--ds-font-mono) !important;
  font-size: var(--ds-text-lg) !important;
  font-weight: var(--ds-weight-bold) !important;
  color: var(--ds-gold-400) !important;
  letter-spacing: 2px;
  margin: var(--ds-s-3) 0 !important;
}

/* ──── Leaderboard rows ──── */
body.ui-v3 #modal-leaderboard .lb-rank {
  width: 32px;
  font-family: var(--ds-font-mono);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-text-3);
  text-align: center;
}
body.ui-v3 #modal-leaderboard .lb-rank.top-1 { color: var(--ds-gold-400); }
body.ui-v3 #modal-leaderboard .lb-rank.top-2 { color: #c0c0c0; }
body.ui-v3 #modal-leaderboard .lb-rank.top-3 { color: #cd7f32; }
body.ui-v3 #modal-leaderboard .lb-amount {
  margin-left: auto;
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ds-gold-400);
  font-weight: var(--ds-weight-bold);
}

/* ──── Rebate / VIP — bar progress ──── */
body.ui-v3 .modal-backdrop > .modal .progress-bar,
body.ui-v3 .modal-backdrop > .modal .vip-progress {
  height: 6px !important;
  background: var(--ds-bg-elevated) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  border: none !important;
}
body.ui-v3 .modal-backdrop > .modal .progress-bar > *,
body.ui-v3 .modal-backdrop > .modal .vip-progress > * {
  background: var(--ds-gradient-gold) !important;
  height: 100% !important;
  border-radius: 3px !important;
  transition: width var(--ds-dur-3) var(--ds-ease);
}

/* ──── News / announcement modal ──── */
body.ui-v3 #modal-news .news-list .news-item {
  padding: var(--ds-s-3) !important;
  background: var(--ds-surface) !important;
  border-radius: var(--ds-r-md) !important;
  border: none !important;
  margin-bottom: var(--ds-s-2) !important;
}
body.ui-v3 #modal-news .news-title {
  font-size: var(--ds-text-sm) !important;
  font-weight: var(--ds-weight-bold) !important;
  color: var(--ds-text) !important;
  margin-bottom: 4px !important;
}
body.ui-v3 #modal-news .news-date {
  font-size: 11px !important;
  color: var(--ds-text-3) !important;
  font-family: var(--ds-font-mono);
}

/* ──── Empty states ──── */
body.ui-v3 .modal-backdrop > .modal .empty-state,
body.ui-v3 .modal-backdrop > .modal .no-data {
  text-align: center !important;
  padding: var(--ds-s-5) var(--ds-s-3) !important;
  color: var(--ds-text-3) !important;
  font-size: var(--ds-text-sm) !important;
}

/* ════════════════════════════════════════════════════════════════════ */
/* v3 Landing — Post-audit cleanup (2026-05-12)                          */
/* Game card unification · marquee dedup · nav dampening · PC fill       */
/* ════════════════════════════════════════════════════════════════════ */

/* ──── 1) Game cards (#sec-popular-games / .games-grid) — kill inline gradient ──── */
body.ui-v3 .games-grid .game-card,
body.ui-v3 .game-grid .game-card,
body.ui-v3 .popular-game-card,
body.ui-v3 .game-tile {
  background: var(--card-bg) !important;
  background-image: none !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  padding: var(--ds-s-3) !important;
  transition: border-color var(--ds-dur-2) var(--ds-ease),
              transform var(--ds-dur-1) var(--ds-ease) !important;
  overflow: hidden;
  position: relative;
}
body.ui-v3 .games-grid .game-card:hover,
body.ui-v3 .game-grid .game-card:hover,
body.ui-v3 .popular-game-card:hover,
body.ui-v3 .game-tile:hover {
  border-color: var(--primary-gold) !important;
  transform: translateY(-2px);
}
body.ui-v3 .games-grid .game-card:active,
body.ui-v3 .game-tile:active { transform: scale(0.98); }

/* Tag bg in game card (HOT / NEW / 最热) → ds-badge style */
body.ui-v3 .game-card [class*="badge"],
body.ui-v3 .game-card .tag,
body.ui-v3 .game-tile .tag,
body.ui-v3 .game-card .hot-pill {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--primary-gold) !important;
  border-radius: var(--ds-r-pill) !important;
  font-size: 10px !important;
  font-weight: var(--ds-weight-bold) !important;
  padding: 3px var(--ds-s-2) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Game title / provider — clean typography */
body.ui-v3 .game-card .game-name,
body.ui-v3 .game-tile .game-name,
body.ui-v3 .game-card .game-title {
  font-size: var(--ds-text-md) !important;
  font-weight: var(--ds-weight-bold) !important;
  color: var(--ds-text) !important;
}
body.ui-v3 .game-card .game-provider,
body.ui-v3 .game-tile .game-provider,
body.ui-v3 .game-card .game-meta {
  font-size: var(--ds-text-xs) !important;
  color: var(--ds-text-3) !important;
}
body.ui-v3 .game-card .game-stats,
body.ui-v3 .game-tile .game-stats {
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--primary-gold) !important;
  font-size: var(--ds-text-xs) !important;
}

/* ──── 2) Dedupe scrolling text: kill bottom landing marquee in v3 ──── */
body.ui-v3 .marquee,
body.ui-v3 .bs-d-marquee,
body.ui-v3 #landing-marquee {
  display: none !important;
}

/* But: only KEEP v3-ticker (the unified one) */
body.ui-v3 .v3-ticker { display: flex !important; }

/* ──── 3) Bottom nav badges & "Sembang" central pill — dampen ──── */
body.ui-v3 .bnav-item .bnav-badge,
body.ui-v3 .bnav-item .notif-badge,
body.ui-v3 .bnav-item [class*="red-dot"] {
  background: var(--ds-error) !important;
  color: white !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  font-size: 10px !important;
  border-radius: var(--ds-r-pill) !important;
  font-weight: var(--ds-weight-bold) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  position: absolute !important;
  top: 4px;
  right: calc(50% - 18px);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
}
body.ui-v3 .bnav-item {
  position: relative;
}

/* Central CTA tab (Sembang / chat) — keep prominent but cleaner */
body.ui-v3 .bnav-item[data-nav="live"],
body.ui-v3 .bnav-item.bnav-cta,
body.ui-v3 .bnav-item.is-fab {
  position: relative;
}
body.ui-v3 .bnav-item[data-nav="live"] .bnav-icon,
body.ui-v3 .bnav-item.bnav-cta .bnav-icon,
body.ui-v3 .bnav-item.is-fab .bnav-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--ds-gradient-gold) !important;
  color: #1a1a1a !important;
  display: grid !important;
  place-items: center !important;
  margin-top: -8px !important;
  box-shadow: 0 4px 12px var(--ds-gold-glow) !important;
}

/* ──── 4) PC ≥1280 — when visitor (no right-rail injected), expand main grid to 1 col ──── */
@media (min-width: 1280px) {
  /* Default grid 1fr 340 set in v3-binance-clean.css.
     If no #v3-rightrail mounted (visitor), :has selector falls back to single col. */
  body.ui-v3 #bs-container:not(:has(#v3-rightrail)) {
    grid-template-columns: 1fr !important;
    max-width: 1200px !important;
  }

  /* Center the popular-games strip + use full width */
  body.ui-v3 #sec-popular-games,
  body.ui-v3 [data-section="popular-games"] {
    grid-column: 1 !important;
  }
  body.ui-v3 .games-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: var(--ds-s-4) !important;
  }
}

/* ──── 5) Leaderboard top-10 (visitor-facing) — clean rows + golden top-1 ──── */
body.ui-v3 .leaderboard-table,
body.ui-v3 .lb-table,
body.ui-v3 #landing-leaderboard {
  background: var(--card-bg) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  padding: var(--ds-s-3) !important;
  overflow: hidden;
}
body.ui-v3 .leaderboard-table tr,
body.ui-v3 .lb-row {
  border: none !important;
  background: transparent !important;
}
body.ui-v3 .leaderboard-table tr td,
body.ui-v3 .lb-row td {
  border: none !important;
  padding: 10px var(--ds-s-3) !important;
  font-size: var(--ds-text-sm) !important;
  color: var(--ds-text) !important;
}
body.ui-v3 .leaderboard-table tr:not(:last-child) td,
body.ui-v3 .lb-row:not(:last-child) td {
  border-bottom: 1px solid var(--ds-border) !important;
}
body.ui-v3 .lb-row td.amount,
body.ui-v3 .leaderboard-table .amount,
body.ui-v3 .leaderboard-table .winnings {
  font-family: var(--ds-font-mono) !important;
  font-variant-numeric: tabular-nums;
  color: var(--primary-gold) !important;
  font-weight: var(--ds-weight-bold) !important;
  text-align: right;
}

/* ──── 6) Sections rhythm — make black gaps less yawning ──── */
body.ui-v3 main,
body.ui-v3 #bs-container {
  background: var(--surface-black) !important;
}
body.ui-v3 .section,
body.ui-v3 section[id^="sec-"] {
  margin-top: 0 !important;
  margin-bottom: var(--ds-s-5) !important;
  padding: 0 !important;
}

/* ──── 7) Visitor hero variant (login prompt) — keep CTA clear ──── */
body.ui-v3 .v3-hero .v3-hero-row + .v3-balance {
  cursor: pointer;
}
body.ui-v3:not(.is-logged-in) .v3-hero-row span:first-child::after { content: ''; }

/* ──── 8) Footer / bottom info — keep narrow + balance with ticker ──── */
body.ui-v3 footer,
body.ui-v3 .bs-footer {
  background: var(--surface-black) !important;
  border-top: 1px solid var(--ds-border) !important;
  padding: var(--ds-s-4) var(--ds-s-3) !important;
  font-size: var(--ds-text-xs) !important;
  color: var(--ds-text-3) !important;
}

/* ════════════════════════════════════════════════════════════════════ */
/* v3 Featured cards — unify to neutral surface (2026-05-12)             */
/* Was: 3 different brand gradients (purple/teal/red) → all card-bg      */
/* ════════════════════════════════════════════════════════════════════ */

/* Override all featured gradient backgrounds to single surface */
body.ui-v3 .v3-feat,
body.ui-v3 .v3-feat.feat-1,
body.ui-v3 .v3-feat.feat-2,
body.ui-v3 .v3-feat.feat-3 {
  background: var(--card-bg) !important;
  background-image: none !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
  padding: var(--ds-s-3) !important;
  min-width: 200px !important;
  position: relative;
  overflow: hidden;
  transition: border-color var(--ds-dur-2) var(--ds-ease),
              transform var(--ds-dur-1) var(--ds-ease) !important;
}
body.ui-v3 .v3-feat:hover {
  border-color: var(--primary-gold) !important;
  transform: translateY(-2px);
}

/* Drop the inner gradient overlay */
body.ui-v3 .v3-feat::after {
  display: none !important;
}

/* Small brand-color accent stripe at top instead of full-color bg */
body.ui-v3 .v3-feat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--ds-r-lg) var(--ds-r-lg) 0 0;
  pointer-events: none;
}
body.ui-v3 .v3-feat.feat-1::before { background: linear-gradient(90deg, #a855f7, #ec4899); }
body.ui-v3 .v3-feat.feat-2::before { background: linear-gradient(90deg, #10b981, #06b6d4); }
body.ui-v3 .v3-feat.feat-3::before { background: linear-gradient(90deg, #ef4444, #f59e0b); }

/* RTP pill — neutral chip top right */
body.ui-v3 .v3-feat-rtp {
  position: absolute !important;
  top: var(--ds-s-2) !important;
  right: var(--ds-s-2) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--primary-gold) !important;
  font-family: var(--ds-font-mono) !important;
  font-size: 10px !important;
  font-weight: var(--ds-weight-bold) !important;
  padding: 3px 8px !important;
  border-radius: var(--ds-r-pill) !important;
  letter-spacing: 0.3px;
}

/* Content row — tighter, no extra padding */
body.ui-v3 .v3-feat-content {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--ds-s-1);
  margin-top: var(--ds-s-3);
}

/* Tag — neutral, brand-colored text only */
body.ui-v3 .v3-feat-tag {
  display: inline-flex !important;
  align-items: center;
  align-self: flex-start;
  background: var(--ds-overlay-2) !important;
  color: var(--ds-text-2) !important;
  font-size: 10px !important;
  font-weight: var(--ds-weight-bold) !important;
  padding: 2px 8px !important;
  border-radius: var(--ds-r-pill) !important;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

/* Title — large + mono-style numbers ready */
body.ui-v3 .v3-feat-title {
  font-size: var(--ds-text-md) !important;
  font-weight: var(--ds-weight-bold) !important;
  color: var(--ds-text) !important;
  letter-spacing: -0.2px;
}

/* Meta — provider · plays */
body.ui-v3 .v3-feat-meta {
  font-size: 11px !important;
  color: var(--ds-text-3) !important;
}
body.ui-v3 .v3-feat-meta span:last-child {
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Featured strip container — proper gutter */
body.ui-v3 .v3-featured {
  gap: var(--ds-s-3) !important;
  padding: 0 !important;
}

/* Section head — tighter */
body.ui-v3 .v3-sec-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: var(--ds-s-3) !important;
  padding: 0 !important;
}
body.ui-v3 .v3-sec-head h3 {
  font-size: var(--ds-text-md) !important;
  font-weight: var(--ds-weight-bold) !important;
  color: var(--ds-text) !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: var(--ds-s-2);
}
body.ui-v3 .v3-sec-head h3 .em {
  font-size: 18px;
}
body.ui-v3 .v3-sec-head a {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-2);
  font-weight: var(--ds-weight-semibold);
}
body.ui-v3 .v3-sec-head a:hover { color: var(--primary-gold); }

/* ──── game-tile (the 8 brand logos grid) — clean dark surface ──── */
body.ui-v3 .games-grid .game-tile {
  background: var(--card-bg) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  aspect-ratio: 1 !important;
  position: relative;
  overflow: hidden;
  transition: border-color var(--ds-dur-2) var(--ds-ease),
              transform var(--ds-dur-1) var(--ds-ease) !important;
}
body.ui-v3 .games-grid .game-tile:hover {
  border-color: var(--primary-gold) !important;
  transform: translateY(-2px);
}
body.ui-v3 .games-grid .game-tile:active { transform: scale(0.97); }

body.ui-v3 .games-grid .game-tile .game-bg {
  background: transparent !important;
}
body.ui-v3 .games-grid .game-tile .game-bg img {
  filter: none !important;
}
body.ui-v3 .games-grid .game-tile .game-badge {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--primary-gold) !important;
  font-size: 10px !important;
  padding: 3px 8px !important;
  border-radius: var(--ds-r-pill) !important;
  font-weight: var(--ds-weight-bold) !important;
  letter-spacing: 0.4px;
}
body.ui-v3 .games-grid .game-tile .game-badge.new { color: var(--ds-success) !important; }
body.ui-v3 .games-grid .game-tile .game-badge.top { color: var(--primary-gold) !important; }
body.ui-v3 .games-grid .game-tile .wallet-mode-badge {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--ds-text-2) !important;
  font-size: 9px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-weight: var(--ds-weight-bold) !important;
  letter-spacing: 0.5px;
  background-image: none !important;
}

/* Cat-row buttons */
body.ui-v3 .cat-row {
  display: flex !important;
  gap: var(--ds-s-2) !important;
  margin-bottom: var(--ds-s-3) !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 !important;
}
body.ui-v3 .cat-row::-webkit-scrollbar { display: none; }
body.ui-v3 .cat-btn {
  flex-shrink: 0;
  padding: 6px 14px !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-pill) !important;
  color: var(--ds-text-2) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-text-xs) !important;
  font-weight: var(--ds-weight-bold) !important;
  cursor: pointer;
  transition: all var(--ds-dur-2) var(--ds-ease) !important;
  white-space: nowrap;
}
body.ui-v3 .cat-btn:hover { color: var(--ds-text) !important; }
body.ui-v3 .cat-btn.active {
  background: var(--ds-gradient-gold) !important;
  border-color: var(--primary-gold) !important;
  color: #1a1a1a !important;
}

/* ════════════════════════════════════════════════════════════════════ */
/* Visitor Features Grid (2026-05-12) — landing fill                     */
/* Hidden when user logged in (body.is-logged-in)                        */
/* ════════════════════════════════════════════════════════════════════ */

/* Hide entire block when logged-in */
body.is-logged-in #sec-visitor-features { display: none !important; }
body.ui-v3.is-logged-in #sec-visitor-features { display: none !important; }

#sec-visitor-features {
  margin: var(--ds-s-5) 0 !important;
}

.bs-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-s-3);
}
@media (min-width: 640px)  { .bs-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bs-features-grid { grid-template-columns: repeat(3, 1fr); } }

.bs-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-s-3);
  padding: var(--ds-s-4);
  background: var(--card-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg);
  transition: border-color var(--ds-dur-2) var(--ds-ease),
              transform var(--ds-dur-1) var(--ds-ease);
}
.bs-feature:hover {
  border-color: var(--primary-gold);
  transform: translateY(-2px);
}

.bs-feature-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--ds-r-md);
  background: var(--ds-gold-soft);
  color: var(--primary-gold);
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
}

.bs-feature-body {
  flex: 1;
  min-width: 0;
}
.bs-feature-title {
  font-size: var(--ds-text-md);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-text);
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.bs-feature-desc {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-3);
  line-height: var(--ds-leading-normal);
}

body.ui-v3 #sec-visitor-features.reveal,
body.ui-v3 #sec-visitor-features {
  opacity: 1 !important;
  transform: none !important;
}

/* ════════════════════════════════════════════════════════════════════ */
/* v3 Lang Switcher (2026-05-12) — chip + dropdown                       */
/* ════════════════════════════════════════════════════════════════════ */

body.ui-v3 .v3-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--ds-s-2);
  background: var(--card-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-pill);
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: border-color var(--ds-dur-2) var(--ds-ease),
              background var(--ds-dur-2) var(--ds-ease),
              transform var(--ds-dur-1) var(--ds-ease);
  flex-shrink: 0;
}
body.ui-v3 .v3-lang-btn:hover {
  border-color: var(--primary-gold);
  background: var(--ds-surface-2);
}
body.ui-v3 .v3-lang-btn:active { transform: scale(0.95); }

body.ui-v3 .v3-lang-flag {
  font-size: 16px;
  line-height: 1;
}
body.ui-v3 .v3-lang-code {
  font-family: var(--ds-font-sans);
  color: var(--primary-gold);
  font-weight: var(--ds-weight-bold);
}

/* ──── Dropdown ──── */
.v3-lang-dropdown {
  position: absolute;
  width: 180px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-shadow-lg);
  padding: 4px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--ds-dur-2) var(--ds-ease),
              transform var(--ds-dur-2) var(--ds-ease);
}
.v3-lang-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.v3-lang-opt {
  display: flex;
  align-items: center;
  gap: var(--ds-s-2);
  width: 100%;
  padding: 10px var(--ds-s-3);
  background: transparent;
  border: none;
  border-radius: var(--ds-r-sm);
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  cursor: pointer;
  text-align: left;
  transition: background var(--ds-dur-2) var(--ds-ease);
}
.v3-lang-opt:hover { background: var(--card-bg); }

.v3-lang-opt-flag {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.v3-lang-opt-name {
  flex: 1;
  min-width: 0;
}
.v3-lang-opt-check {
  color: var(--primary-gold);
  font-weight: var(--ds-weight-bold);
  opacity: 0;
  font-size: 14px;
}
.v3-lang-opt.active {
  background: var(--ds-gold-soft);
  color: var(--primary-gold);
}
.v3-lang-opt.active .v3-lang-opt-check { opacity: 1; }

/* ──── Mobile vs PC sizing ──── */
@media (max-width: 768px) {
  body.ui-v3 .v3-lang-btn { height: 36px; padding: 0 10px; }
  body.ui-v3 .v3-lang-code { display: none; }  /* H5: flag only */
  body.ui-v3 .v3-lang-flag { font-size: 18px; }
}
@media (min-width: 1024px) {
  body.ui-v3 .v3-lang-btn { height: 40px; padding: 0 12px; }
}

/* ════════════════════════════════════════════════════════════════════ */
/* v3 Auth Modal + Footer (2026-05-12) — final landing polish            */
/* ════════════════════════════════════════════════════════════════════ */

/* ──── #modal-auth — login/register unified card ──── */
body.ui-v3 #modal-auth > .modal,
body.ui-v3 #modal-auth > .auth-card {
  background: var(--ds-bg) !important;
  border: 1px solid var(--ds-border-strong) !important;
  border-radius: var(--ds-r-xl) !important;
  padding: var(--ds-s-4) !important;
  max-width: 420px !important;
  width: 96% !important;
  font-family: var(--ds-font-sans) !important;
  color: var(--ds-text) !important;
  overflow: hidden !important;
  position: relative;
}
@media (max-width: 480px) {
  body.ui-v3 #modal-auth > .modal,
  body.ui-v3 #modal-auth > .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--ds-r-xl) var(--ds-r-xl) 0 0 !important;
    padding: var(--ds-s-3) !important;
  }
}

/* Top decorative glow → softer + golden */
body.ui-v3 #modal-auth > .modal > div:first-child {
  background: radial-gradient(ellipse at top, var(--ds-gold-glow) 0%, transparent 70%) !important;
  opacity: 0.5 !important;
}

/* Close button */
body.ui-v3 #modal-auth [data-close] {
  background: var(--ds-overlay) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  color: var(--ds-text-2) !important;
  font-size: 16px !important;
  display: grid !important;
  place-items: center !important;
}
body.ui-v3 #modal-auth [data-close]:hover {
  background: var(--ds-overlay-2) !important;
  color: var(--ds-text) !important;
}

/* Brand header — keep mascot + clean title (no rainbow text-fill) */
body.ui-v3 #modal-auth > .modal > div:nth-child(3) > div:nth-child(2) {
  background: var(--ds-gradient-gold) !important;
  background-size: auto !important;
  animation: none !important;
  font-family: var(--ds-font-sans) !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  font-weight: var(--ds-weight-black) !important;
  letter-spacing: 1px !important;
  font-size: var(--ds-text-lg) !important;
}
body.ui-v3 #modal-auth > .modal > div:nth-child(3) > div:nth-child(3) {
  color: var(--primary-gold) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
}
body.ui-v3 #modal-auth > .modal > div:nth-child(3) img {
  border: 2px solid var(--primary-gold) !important;
  box-shadow: 0 4px 16px var(--ds-gold-glow) !important;
}

/* Tabs */
body.ui-v3 .auth-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 4px !important;
  margin-bottom: var(--ds-s-3) !important;
}
body.ui-v3 .auth-tab {
  padding: 10px var(--ds-s-3) !important;
  text-align: center !important;
  border-radius: var(--ds-r-sm) !important;
  font-size: var(--ds-text-xs) !important;
  font-weight: var(--ds-weight-bold) !important;
  color: var(--ds-text-2) !important;
  background: transparent !important;
  cursor: pointer !important;
  letter-spacing: 0.5px;
  transition: all var(--ds-dur-2) var(--ds-ease);
}
body.ui-v3 .auth-tab:hover { color: var(--ds-text) !important; }
body.ui-v3 .auth-tab.active {
  background: var(--ds-gradient-gold) !important;
  color: #1a1a1a !important;
}

/* Form inputs — design system style */
body.ui-v3 #modal-auth .bs-field {
  margin-bottom: var(--ds-s-3) !important;
}
body.ui-v3 #modal-auth .bs-input {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  color: var(--ds-text) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-text-sm) !important;
  padding: 12px var(--ds-s-3) !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color var(--ds-dur-2) var(--ds-ease),
              box-shadow var(--ds-dur-2) var(--ds-ease) !important;
}
body.ui-v3 #modal-auth .bs-input:focus {
  border-color: var(--primary-gold) !important;
  box-shadow: 0 0 0 3px var(--ds-gold-soft) !important;
}

/* Phone prefix wrapper */
body.ui-v3 #modal-auth .phone-with-prefix {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  overflow: hidden !important;
}
body.ui-v3 #modal-auth .phone-with-prefix:focus-within {
  border-color: var(--primary-gold) !important;
  box-shadow: 0 0 0 3px var(--ds-gold-soft) !important;
}
body.ui-v3 #modal-auth .phone-with-prefix > span {
  background: var(--ds-surface-2) !important;
  color: var(--ds-text-2) !important;
  font-family: var(--ds-font-mono) !important;
  font-size: var(--ds-text-sm) !important;
  font-weight: var(--ds-weight-semibold) !important;
  border-right: 1px solid var(--ds-border) !important;
  padding: 12px var(--ds-s-3) !important;
}
body.ui-v3 #modal-auth .phone-with-prefix .bs-input {
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--ds-font-mono) !important;
  font-size: var(--ds-text-sm) !important;
}

/* Hints */
body.ui-v3 #modal-auth .bs-hint {
  font-size: var(--ds-text-xs) !important;
  color: var(--ds-text-3) !important;
  line-height: var(--ds-leading-normal) !important;
  margin-top: 4px !important;
}
body.ui-v3 #modal-auth .bs-hint.warn { color: var(--ds-warning) !important; }

/* OTP block — single neutral card, not blue noise */
body.ui-v3 #modal-auth [data-d2-applied="1"] {
  background: var(--ds-surface) !important;
  border-radius: var(--ds-r-md) !important;
  padding: var(--ds-s-3) !important;
  margin-top: var(--ds-s-2) !important;
}
body.ui-v3 #modal-auth [data-d2-applied="1"] > div:first-child {
  color: var(--ds-text-2) !important;
  font-weight: var(--ds-weight-semibold) !important;
  font-size: var(--ds-text-xs) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
body.ui-v3 #modal-auth #mreg-send-otp {
  background: var(--card-bg) !important;
  color: var(--ds-text) !important;
  border: 1px solid var(--ds-border-strong) !important;
  border-radius: var(--ds-r-sm) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-text-xs) !important;
  font-weight: var(--ds-weight-bold) !important;
  padding: 8px 12px !important;
}
body.ui-v3 #modal-auth #mreg-send-otp:hover {
  border-color: var(--primary-gold) !important;
  color: var(--primary-gold) !important;
}

/* Password strength bar */
body.ui-v3 #mreg-pw-strength {
  background: var(--ds-bg-elevated) !important;
  height: 4px !important;
  border-radius: 2px !important;
  overflow: hidden;
  margin-top: 6px;
}
body.ui-v3 #mreg-pw-strength-bar {
  background: var(--ds-gradient-gold) !important;
  height: 100% !important;
  border-radius: 2px;
  transition: width var(--ds-dur-3) var(--ds-ease);
}
body.ui-v3 #mreg-pw-strength-label {
  font-size: 11px !important;
  color: var(--ds-text-3) !important;
  margin-top: 4px !important;
}

/* Show password toggle */
body.ui-v3 #modal-auth [id$="-pw-toggle"] {
  color: var(--ds-text-3) !important;
}
body.ui-v3 #modal-auth [id$="-pw-toggle"]:hover {
  color: var(--primary-gold) !important;
}

/* Submit buttons (DAFTAR/LOG MASUK) */
body.ui-v3 #modal-auth .btn-gold {
  width: 100% !important;
  padding: 14px var(--ds-s-3) !important;
  background: var(--ds-gradient-gold) !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: var(--ds-r-md) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-text-md) !important;
  font-weight: var(--ds-weight-bold) !important;
  letter-spacing: 1px;
  box-shadow: var(--ds-shadow-gold) !important;
  cursor: pointer;
  margin-top: var(--ds-s-2) !important;
  transition: transform var(--ds-dur-1) var(--ds-ease),
              filter var(--ds-dur-2) var(--ds-ease) !important;
}
body.ui-v3 #modal-auth .btn-gold:hover { filter: brightness(1.05); }
body.ui-v3 #modal-auth .btn-gold:active { transform: scale(0.98); }

/* "Already have account?" footer text */
body.ui-v3 #modal-auth #mreg-go-login,
body.ui-v3 #modal-auth a[id$="-go-login"],
body.ui-v3 #modal-auth a[id$="-go-register"] {
  color: var(--primary-gold) !important;
  font-weight: var(--ds-weight-bold) !important;
}

/* ──── Landing footer ──── */
body.ui-v3 footer,
body.ui-v3 .bs-footer,
body.ui-v3 .footer-copy {
  background: var(--surface-black) !important;
  border-top: 1px solid var(--ds-border) !important;
  padding: var(--ds-s-5) var(--ds-s-3) !important;
  margin-top: var(--ds-s-5) !important;
  text-align: center;
}
body.ui-v3 footer *,
body.ui-v3 .bs-footer *,
body.ui-v3 .footer-copy * {
  font-size: var(--ds-text-xs) !important;
  color: var(--ds-text-3) !important;
  line-height: var(--ds-leading-normal);
}
body.ui-v3 footer a,
body.ui-v3 .bs-footer a,
body.ui-v3 .footer-copy a {
  color: var(--ds-text-2) !important;
  text-decoration: none;
  transition: color var(--ds-dur-2) var(--ds-ease);
}
body.ui-v3 footer a:hover,
body.ui-v3 .bs-footer a:hover,
body.ui-v3 .footer-copy a:hover {
  color: var(--primary-gold) !important;
}

/* Reveal class doesn't dim footer (visitor sees immediately) */
body.ui-v3 footer.reveal,
body.ui-v3 .bs-footer.reveal,
body.ui-v3 .footer-copy.reveal {
  opacity: 1 !important;
  transform: none !important;
}