/* ═══════════════════════════════════════════════════════════════
 * Platfound Mobile v3 — Stake×918KISS hybrid (2026-05-12)
 * Opt-in via body.ui-v3 (set by mobile-v3-init.js when ?ui=v3 or
 * localStorage.bs_ui = "v3"). 100% additive; old UI untouched.
 * ═══════════════════════════════════════════════════════════════ */

body.ui-v3 {
  --v3-bg-0: #08090C;
  --v3-bg-1: #0F1117;
  --v3-bg-2: #161922;
  --v3-bg-3: #1E222D;
  --v3-line: rgba(255,255,255,0.06);
  --v3-line-strong: rgba(255,255,255,0.12);
  --v3-text: #FFFFFF;
  --v3-text-dim: #A8B0C2;
  --v3-text-mute: #6C7588;
  --v3-primary: #D4A93A;
  --v3-primary-glow: rgba(212,169,58,0.35);
  --v3-primary-deep: #9C7B22;
  --v3-gold: #D4A93A;
  --v3-red: #FF4D54;
  --v3-r: 12px;
  --v3-r-lg: 18px;
  --v3-r-xl: 24px;
  --v3-glow-primary: 0 0 0 1px rgba(212,169,58,.25), 0 8px 24px rgba(212,169,58,.18);

  background: var(--v3-bg-0) !important;
  color: var(--v3-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body.ui-v3 #bs-container,
body.ui-v3 .bs-container,
body.ui-v3 main,
body.ui-v3 .app-root {
  background: var(--v3-bg-0) !important;
}

/* ═══ Bottom nav glassy + green active ═══ */
body.ui-v3 .bottom-nav,
body.ui-v3 nav.bottom-nav {
  background: rgba(17,21,29,.92) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--v3-line) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,.5);
}

body.ui-v3 .bnav-inner {
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}

body.ui-v3 .bnav-item {
  color: var(--v3-text-mute) !important;
  font-size: 10px;
  gap: 3px;
}
body.ui-v3 .bnav-item .bnav-ico { width: 22px; height: 22px; }
body.ui-v3 .bnav-item.active { color: var(--v3-primary) !important; }
body.ui-v3 .bnav-item.active .bnav-ico { filter: drop-shadow(0 0 6px var(--v3-primary-glow)); }

body.ui-v3 .bnav-center {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, var(--v3-primary), var(--v3-primary-deep)) !important;
  display: grid !important;
  place-items: center !important;
  color: #1A1305 !important;
  margin-top: -20px;
  box-shadow: 0 8px 20px rgba(212,169,58,.45), 0 0 0 4px var(--v3-bg-1) !important;
  border: none !important;
}
body.ui-v3 .bnav-center svg { color: #1A1305 !important; stroke: #1A1305 !important; }
body.ui-v3 .bnav-item[data-nav="live"] span:not(.bnav-center) { color: var(--v3-text-dim); }

body.ui-v3 .bnav-badge {
  background: var(--v3-red) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px var(--v3-bg-1) !important;
  font-weight: 800 !important;
}

/* ═══ Top header re-skin ═══ */
body.ui-v3 .top-header,
body.ui-v3 .topbar,
body.ui-v3 #top-header,
body.ui-v3 header {
  background: linear-gradient(180deg, rgba(11,14,19,.96), rgba(11,14,19,.80)) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--v3-line) !important;
}

/* ═══ Section titles cleaner ═══ */
body.ui-v3 .section-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  color: var(--v3-text) !important;
  margin-bottom: 10px !important;
}
body.ui-v3 .section-title::before {
  content: "" !important;
  display: inline-block;
  width: 3px;
  height: 16px;
  background: var(--v3-primary);
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--v3-primary-glow);
}

/* ═══ Live now widget cleaner ═══ */
body.ui-v3 #bs-live-now {
  background: var(--v3-bg-1) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r) !important;
  padding: 10px 14px !important;
}
body.ui-v3 #bs-live-now span[style*="background:#10b981"] {
  background: var(--v3-red) !important;
}
body.ui-v3 #bs-live-now [data-i18n="liveTxNow"],
body.ui-v3 #bs-live-now span:not([style*="color:#10b981"]):not([style*="color:var(--gold)"]) {
  color: var(--v3-text-dim);
}

/* ═══ Category buttons (pill) ═══ */
body.ui-v3 .cat-row {
  gap: 8px !important;
  padding-bottom: 4px;
}
body.ui-v3 .cat-btn {
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--v3-bg-1) !important;
  border: 1px solid var(--v3-line) !important;
  color: var(--v3-text-dim) !important;
  white-space: nowrap;
}
body.ui-v3 .cat-btn.active {
  background: var(--v3-text) !important;
  color: #000 !important;
  border-color: var(--v3-text) !important;
}

/* ═══ Game tiles ═══ */
body.ui-v3 .games-grid {
  gap: 10px !important;
}
body.ui-v3 .game-tile {
  border-radius: var(--v3-r-lg) !important;
  border: 1px solid var(--v3-line) !important;
  overflow: hidden;
  transition: transform .12s;
}
body.ui-v3 .game-tile:active {
  transform: scale(0.97);
}
body.ui-v3 .wallet-mode-badge {
  font-size: 8px !important;
  font-weight: 800 !important;
  padding: 3px 5px !important;
  border-radius: 4px !important;
  backdrop-filter: blur(4px);
}
body.ui-v3 .wallet-mode-badge.seamless {
  background: rgba(212,169,58,.18) !important;
  color: var(--v3-primary) !important;
  border: 1px solid rgba(212,169,58,.4);
}
body.ui-v3 .wallet-mode-badge.transfer {
  background: rgba(255,184,0,.16) !important;
  color: var(--v3-gold) !important;
  border: 1px solid rgba(255,184,0,.4);
}
body.ui-v3 .game-badge.hot,
body.ui-v3 .game-badge.top {
  background: var(--v3-red) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}

/* ═══ Feature tiles (quick actions) — gradient circle icons ═══ */
body.ui-v3 .feat-tile {
  background: transparent !important;
  border: none !important;
  padding: 8px 4px !important;
}
body.ui-v3 .feat-ico-wrap {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  margin: 0 auto 6px !important;
  background: linear-gradient(135deg, var(--v3-bg-2), var(--v3-bg-3)) !important;
  display: grid; place-items: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  border: 1px solid var(--v3-line);
}
body.ui-v3 .feat-tile[data-feat="deposit"] .feat-ico-wrap,
body.ui-v3 .feat-tile[data-feat="freecredit"] .feat-ico-wrap {
  background: linear-gradient(135deg, #FF4D54, #FF8A00) !important;
  border: none;
}
body.ui-v3 .feat-tile[data-feat="withdraw"] .feat-ico-wrap,
body.ui-v3 .feat-tile[data-feat="rebate"] .feat-ico-wrap {
  background: linear-gradient(135deg, #00B4FF, #D4A93A) !important;
  border: none;
}
body.ui-v3 .feat-tile[data-feat="promo"] .feat-ico-wrap,
body.ui-v3 .feat-tile[data-feat="vip"] .feat-ico-wrap {
  background: linear-gradient(135deg, var(--v3-gold), #FF8A00) !important;
  border: none;
}
body.ui-v3 .feat-tile[data-feat="invite"] .feat-ico-wrap,
body.ui-v3 .feat-tile[data-feat="leaderboard"] .feat-ico-wrap {
  background: linear-gradient(135deg, #A78BFA, #FF4D54) !important;
  border: none;
}
body.ui-v3 .feat-tile[data-feat="spin"] .feat-ico-wrap,
body.ui-v3 .feat-tile[data-feat="lucky"] .feat-ico-wrap {
  background: linear-gradient(135deg, #06B6D4, #1E40AF) !important;
  border: none;
}
body.ui-v3 .feat-tile[data-feat="checkin"] .feat-ico-wrap,
body.ui-v3 .feat-tile[data-feat="mission"] .feat-ico-wrap {
  background: linear-gradient(135deg, #14532D, var(--v3-primary)) !important;
  border: none;
}
body.ui-v3 .feat-ico-wrap svg { color: #fff !important; stroke: #fff !important; }
body.ui-v3 .feat-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--v3-text) !important;
}

/* ═══ Drawer user block — Stake fintech balance ═══ */
body.ui-v3 #drawer-user-block {
  background: linear-gradient(180deg, var(--v3-bg-2), var(--v3-bg-1)) !important;
  border: 1px solid var(--v3-line-strong) !important;
  border-radius: var(--v3-r-xl) !important;
  padding: 18px !important;
  position: relative;
  overflow: hidden;
}
body.ui-v3 #drawer-user-block::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 80px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(212,169,58,.10), transparent 50%),
    radial-gradient(100% 80% at 100% 0%, rgba(255,184,0,.08), transparent 50%);
  pointer-events: none;
}
body.ui-v3 #drawer-user-name {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}
body.ui-v3 #drawer-user-block > div:last-child {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  color: var(--v3-text) !important;
  margin-top: 8px !important;
  display: flex; align-items: baseline; gap: 6px;
}
body.ui-v3 #drawer-user-block > div:last-child::before {
  content: "MYR";
  font-size: 13px;
  color: var(--v3-text-dim);
  font-weight: 600;
}
body.ui-v3 #drawer-user-block > div:last-child > span {
  color: var(--v3-text) !important;
}

/* ═══ Drawer auth pills ═══ */
body.ui-v3 .drawer-btn-login {
  background: var(--v3-bg-2) !important;
  border: 1px solid var(--v3-line-strong) !important;
  color: var(--v3-text) !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}
body.ui-v3 .drawer-btn-register {
  background: linear-gradient(180deg, var(--v3-primary), var(--v3-primary-deep)) !important;
  color: #1A1305 !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  box-shadow: var(--v3-glow-primary) !important;
  border: none !important;
}

/* ═══ Drawer items ═══ */
body.ui-v3 .drawer-item {
  padding: 12px 10px !important;
  border-radius: 10px !important;
  font-weight: 600;
}
body.ui-v3 .drawer-item:hover,
body.ui-v3 .drawer-item:active {
  background: var(--v3-bg-2) !important;
}
body.ui-v3 .drawer-title {
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--v3-text-mute) !important;
  font-weight: 700;
}

/* ═══ Topnav balance pill (logged in) ═══ */
body.ui-v3 #topnav-balance-amt,
body.ui-v3 .topnav-balance {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 800 !important;
  color: var(--v3-text) !important;
}

/* ═══ Float live chat button ═══ */
body.ui-v3 .float-live-btn,
body.ui-v3 #float-live {
  background: linear-gradient(135deg, var(--v3-primary), var(--v3-primary-deep)) !important;
  color: #1A1305 !important;
  box-shadow: 0 8px 24px rgba(212,169,58,.35) !important;
  border: none !important;
}
body.ui-v3 .float-live-btn svg,
body.ui-v3 #float-live svg { color: #1A1305 !important; }
body.ui-v3 .float-live-label { color: #1A1305 !important; font-weight: 700; }
body.ui-v3 .online-dot { background: var(--v3-gold) !important; box-shadow: 0 0 0 4px var(--v3-bg-0); }

/* ═══ Payment grid tiles ═══ */
body.ui-v3 .pay-cell {
  background: var(--v3-bg-1) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r) !important;
}
body.ui-v3 .pay-cat-head {
  font-size: 11px !important;
  font-weight: 700;
  color: var(--v3-text-dim) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 14px 0 8px;
}

/* ═══ Testimonials / FAQ / Trust cleanup ═══ */
body.ui-v3 .faq-item {
  background: var(--v3-bg-1) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r) !important;
  margin-bottom: 8px !important;
}
body.ui-v3 .faq-q {
  color: var(--v3-text) !important;
  font-weight: 600 !important;
}
body.ui-v3 .faq-a {
  color: var(--v3-text-dim) !important;
}
body.ui-v3 .trust-badge {
  background: var(--v3-bg-1) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r) !important;
}
body.ui-v3 .trust-lbl {
  color: var(--v3-text-dim) !important;
  font-weight: 600;
}

/* ═══ Modal sheets (deposit / withdraw / wallet) ═══ */
body.ui-v3 .modal-content,
body.ui-v3 .bs-modal-content {
  background: var(--v3-bg-1) !important;
  border: 1px solid var(--v3-line-strong) !important;
  border-radius: 28px 28px 0 0 !important;
}
body.ui-v3 .modal-overlay,
body.ui-v3 .bs-modal-overlay {
  background: rgba(0,0,0,.7) !important;
  backdrop-filter: blur(8px);
}

/* ═══ Primary buttons site-wide ═══ */
body.ui-v3 .btn-primary,
body.ui-v3 button.primary,
body.ui-v3 .bs-btn-primary,
body.ui-v3 button[type="submit"]:not(.btn-secondary):not(.btn-ghost) {
  background: linear-gradient(180deg, var(--v3-primary), var(--v3-primary-deep)) !important;
  color: #1A1305 !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: var(--v3-glow-primary);
}

/* ═══ Footer ═══ */
body.ui-v3 .footer-copy {
  color: var(--v3-text-mute) !important;
}

/* ═══ Form inputs ═══ */
body.ui-v3 .bs-input,
body.ui-v3 input[type="text"],
body.ui-v3 input[type="number"],
body.ui-v3 input[type="email"],
body.ui-v3 input[type="tel"],
body.ui-v3 input[type="password"],
body.ui-v3 select,
body.ui-v3 textarea {
  background: var(--v3-bg-0) !important;
  border: 1px solid var(--v3-line-strong) !important;
  border-radius: var(--v3-r) !important;
  color: var(--v3-text) !important;
}
body.ui-v3 input:focus,
body.ui-v3 select:focus,
body.ui-v3 textarea:focus {
  border-color: var(--v3-primary) !important;
  box-shadow: 0 0 0 3px rgba(212,169,58,.15) !important;
  outline: none !important;
}

/* ═══ Toggle pill (top right corner) for v3 mode badge ═══ */
.ui-v3-toggle {
  position: fixed; right: 8px; top: 60px; z-index: 1000;
  padding: 4px 8px; background: var(--v3-gold, #D4A93A); color: #1A0E00;
  border-radius: 999px; font-size: 9px; font-weight: 800;
  letter-spacing: .04em; cursor: pointer; border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* ════ Injected hero (only when body.ui-v3) ════ */
body.ui-v3 .v3-hidden { display: none !important; }

body.ui-v3 #v3-hero-host { display: block; padding-top: 4px; }

body.ui-v3 .v3-hero {
  margin: 4px 12px 0;
  padding: 20px 18px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(212,169,58,.10), transparent 50%),
    radial-gradient(100% 80% at 100% 0%, rgba(255,184,0,.08), transparent 50%),
    linear-gradient(180deg, var(--v3-bg-2), var(--v3-bg-1));
  border: 1px solid var(--v3-line-strong);
  border-radius: var(--v3-r-xl);
  position: relative;
  overflow: hidden;
}
body.ui-v3 .v3-hero-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--v3-text-dim); margin-bottom: 6px;
}
body.ui-v3 .v3-delta {
  color: var(--v3-primary); font-weight: 700;
}
body.ui-v3 .v3-balance {
  display: flex; align-items: baseline; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; letter-spacing: -.02em;
  color: var(--v3-text);
}
body.ui-v3 .v3-balance .cur { font-size: 14px; color: var(--v3-text-dim); }
body.ui-v3 .v3-balance .num { font-size: 36px; line-height: 1; }
body.ui-v3 .v3-hero-sub {
  display: flex; gap: 16px; margin-top: 10px; font-size: 11px; color: var(--v3-text-dim);
}
body.ui-v3 .v3-hero-sub b { color: var(--v3-text); font-weight: 700; font-family: 'JetBrains Mono', monospace; }

body.ui-v3 .v3-hero-actions { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin-top: 16px; }
body.ui-v3 .v3-btn {
  padding: 12px 8px; border-radius: 14px; font-weight: 700; font-size: 13px;
  border: 1px solid var(--v3-line-strong); background: var(--v3-bg-3); color: var(--v3-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; transition: transform .08s; font-family: inherit;
}
body.ui-v3 .v3-btn:active { transform: scale(.97); }
body.ui-v3 .v3-btn-primary {
  background: linear-gradient(180deg, var(--v3-primary), var(--v3-primary-deep)) !important;
  color: #1A1305 !important; border-color: transparent !important;
  box-shadow: var(--v3-glow-primary) !important;
}

body.ui-v3 .v3-wager {
  margin: 12px 12px 0; padding: 12px 14px;
  background: var(--v3-bg-1); border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-lg); display: flex; align-items: center; gap: 12px;
}
body.ui-v3 .v3-wager-icon {
  width: 30px; height: 30px; border-radius: 10px;
  background: linear-gradient(135deg, var(--v3-gold), #FF8A00);
  display: grid; place-items: center; font-size: 14px; flex-shrink: 0;
}
body.ui-v3 .v3-wager-body { flex: 1; }
body.ui-v3 .v3-wager-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--v3-text-dim); margin-bottom: 4px; }
body.ui-v3 .v3-wager-row b { color: var(--v3-text); font-weight: 700; }
body.ui-v3 .v3-bar { height: 5px; border-radius: 999px; background: var(--v3-bg-3); overflow: hidden; }
body.ui-v3 .v3-bar > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--v3-gold), var(--v3-primary)); transition: width .4s; }

body.ui-v3 .v3-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 12px 0; }
body.ui-v3 .v3-chip {
  background: var(--v3-bg-1); border: 1px solid var(--v3-line); border-radius: var(--v3-r-lg);
  padding: 14px 6px; text-align: center; cursor: pointer;
  transition: transform .08s;
}
body.ui-v3 .v3-chip:active { transform: scale(.96); }
body.ui-v3 .v3-chip-icon {
  width: 44px; height: 44px; margin: 0 auto 6px;
  border-radius: 50%; display: grid; place-items: center; font-size: 22px;
}
body.ui-v3 .v3-chip-1 { background: linear-gradient(135deg, #FF4D54, #FF8A00); }
body.ui-v3 .v3-chip-2 { background: linear-gradient(135deg, #00B4FF, #D4A93A); }
body.ui-v3 .v3-chip-3 { background: linear-gradient(135deg, #A78BFA, #FF4D54); }
body.ui-v3 .v3-chip-4 { background: linear-gradient(135deg, var(--v3-gold), #FF8A00); }
body.ui-v3 .v3-chip-label { font-size: 11px; font-weight: 600; color: var(--v3-text); }

body.ui-v3 .v3-ticker {
  margin: 14px 12px 0; padding: 10px 12px;
  background: var(--v3-bg-1); border: 1px solid var(--v3-line);
  border-radius: var(--v3-r); display: flex; align-items: center; gap: 10px; overflow: hidden;
  font-size: 12px;
}
body.ui-v3 .v3-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--v3-red);
  box-shadow: 0 0 0 4px rgba(255,61,113,.15); animation: v3-pulse 1.6s infinite;
}
@keyframes v3-pulse { 50% { box-shadow: 0 0 0 8px rgba(255,61,113,0); } }
body.ui-v3 .v3-ticker-text { color: var(--v3-text-dim); }
body.ui-v3 .v3-ticker-text b { color: var(--v3-gold); font-weight: 700; }

/* 2026-05-12 Mz fix: move v3 toggle to bottom-left so wallet modal title not blocked */
body.ui-v3 .ui-v3-toggle {
  top: auto !important;
  right: auto !important;
  bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  left: 8px !important;
  font-size: 8px !important;
  padding: 3px 7px !important;
  opacity: 0.7;
}
body.ui-v3 .ui-v3-toggle:hover { opacity: 1; }

/* 2026-05-12 Mz: bottom nav already has Chat — hide floating Help button */
body.ui-v3 .float-live-btn,
body.ui-v3 #float-live,
body.ui-v3 .bs-d-float-live,
body.ui-v3 [class*="float-live"] {
  display: none !important;
}

/* 2026-05-12 Mz: 在 v3 模式下永远显示 bottom-nav（不论 viewport）
   原因：mobile-phase1.css \@media (min-width:769px) 把它隐了；v3 是 mobile app shell 不该锁 viewport */
@media (min-width: 769px) {
  body.ui-v3 .bottom-nav,
  body.ui-v3 nav.bottom-nav {
    display: block !important;
    max-width: 430px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
  body.ui-v3 { padding-bottom: 90px !important; }
}

/* 2026-05-12 Mz: 加宽 float-live selectors（之前漏掉 .bs-d-fab-* / 任何 fixed 在右下的客服按钮） */
body.ui-v3 a[href*="livechat"],
body.ui-v3 a[href*="whatsapp"][class*="float"],
body.ui-v3 .bs-d-fab-live,
body.ui-v3 .bs-d-fab,
body.ui-v3 .fab-chat,
body.ui-v3 [data-i18n="livechatLabel"] {
  display: none !important;
}

/* ════ 2026-05-12 Mz fix: wallet modal v3 redesign ════ */
/* Hide v3 toggle when ANY modal-backdrop visible (avoid blocking modal title) */
body.ui-v3:has(.modal-backdrop.active) .ui-v3-toggle,
body.ui-v3:has(.modal-backdrop.shown) .ui-v3-toggle,
body.ui-v3:has(.modal-backdrop[style*="display: flex"]) .ui-v3-toggle,
body.ui-v3:has(.modal-backdrop[style*="display:flex"]) .ui-v3-toggle {
  display: none !important;
}

/* Wallet modal container — clean Stake-style sheet */
body.ui-v3 #modal-wallet .modal {
  background: var(--v3-bg-0) !important;
  border: 1px solid var(--v3-line-strong) !important;
  border-radius: 24px !important;
  max-width: 430px !important;
  width: 96% !important;
}

/* Wallet modal header */
body.ui-v3 #modal-wallet > .modal > div:first-child {
  background: var(--v3-bg-0) !important;
  border-bottom: 1px solid var(--v3-line) !important;
  padding: 18px 18px 14px !important;
}
body.ui-v3 #modal-wallet h3 {
  color: var(--v3-text) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}
body.ui-v3 #modal-wallet h3 span { color: var(--v3-text) !important; }
body.ui-v3 #modal-wallet [data-close="modal-wallet"] {
  width: 32px; height: 32px; border-radius: 50% !important;
  background: var(--v3-bg-2) !important; color: var(--v3-text) !important;
  display: grid !important; place-items: center !important;
  font-size: 18px !important;
}

/* MAIN WALLET hero — Stake balance card */
body.ui-v3 #modal-wallet > .modal > div:nth-child(2) {
  margin: 14px 16px !important;
  padding: 22px 20px !important;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(212,169,58,.10), transparent 50%),
    radial-gradient(100% 80% at 100% 0%, rgba(255,184,0,.08), transparent 50%),
    linear-gradient(180deg, var(--v3-bg-2), var(--v3-bg-1)) !important;
  border: 1px solid var(--v3-line-strong) !important;
  border-radius: 20px !important;
  text-align: left !important;
}
body.ui-v3 #modal-wallet [data-i18n="wMain"] {
  color: var(--v3-text-dim) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
body.ui-v3 #modal-wallet #mw-main,
body.ui-v3 #modal-wallet .modal > div:nth-child(2) > div:nth-child(2) {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  color: var(--v3-text) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  text-align: left !important;
}
body.ui-v3 #modal-wallet #mw-bonus-row {
  color: var(--v3-text-dim) !important;
  font-size: 12px !important;
  text-align: left !important;
}
body.ui-v3 #modal-wallet #mw-bonus { color: var(--v3-primary) !important; }
body.ui-v3 #modal-wallet #mw-h5total { color: var(--v3-gold) !important; }

/* 4-action button row */
body.ui-v3 #modal-wallet .mw-action-btn {
  background: var(--v3-bg-2) !important;
  border: 1px solid var(--v3-line) !important;
  color: var(--v3-text) !important;
  border-radius: 14px !important;
  padding: 14px 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
body.ui-v3 #modal-wallet .mw-action-btn > div {
  font-size: 20px !important;
  margin-bottom: 4px !important;
  color: var(--v3-gold);
}
body.ui-v3 #modal-wallet #mw-btn-deposit { 
  background: linear-gradient(180deg, var(--v3-primary), var(--v3-primary-deep)) !important;
  color: #1A1305 !important; border-color: transparent !important;
  box-shadow: var(--v3-glow-primary);
}
body.ui-v3 #modal-wallet #mw-btn-deposit > div { color: #1A1305 !important; }

/* IN-GAME WALLET section header */
body.ui-v3 #modal-wallet [data-i18n="wInGame"] {
  color: var(--v3-text) !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  font-size: 14px !important;
}
body.ui-v3 #modal-wallet [data-i18n="wInGameSubtitle"] {
  color: var(--v3-text-dim) !important;
  font-size: 11px !important;
}

/* In-game wallet rows */
body.ui-v3 #modal-wallet #mw-ig-list > * {
  background: var(--v3-bg-1) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}

/* Tip box */
body.ui-v3 #modal-wallet [style*="background:rgba(59,130,246,0.1)"] {
  background: rgba(212,169,58,.06) !important;
  border-color: rgba(212,169,58,.3) !important;
  border-radius: 12px !important;
}
body.ui-v3 #modal-wallet [style*="background:rgba(59,130,246,0.1)"] b { color: var(--v3-primary) !important; }

/* 2026-05-12 Mz fix: .bnav-item overflow:hidden 把 FAB 上半剪掉 */
body.ui-v3 .bnav-item,
body.ui-v3 .bnav-inner,
body.ui-v3 .bottom-nav {
  overflow: visible !important;
}

/* ════════════════════════════════════════════════════════
   Phase 4 (2026-05-12) — UX expansion: topbar / VIP card /
   provider chips / recently played / promo cards
   ════════════════════════════════════════════════════════ */

/* Top bar */
body.ui-v3 .v3-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 8px;
}
body.ui-v3 .v3-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--v3-primary), var(--v3-gold));
  display: grid; place-items: center; font-weight: 800; color: #000;
  font-size: 14px; letter-spacing: -.02em;
}
body.ui-v3 .v3-greet { flex: 1; line-height: 1.15; }
body.ui-v3 .v3-greet-1 { font-size: 11px; color: var(--v3-text-dim); }
body.ui-v3 .v3-greet-2 { font-size: 13px; font-weight: 700; color: var(--v3-text); display: inline-flex; align-items: center; gap: 6px; }
body.ui-v3 .v3-vip-chip {
  font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 999px;
  background: linear-gradient(135deg, var(--v3-gold), #FF8A00);
  color: #1A0E00; letter-spacing: .04em;
}
body.ui-v3 .v3-icon-btn {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--v3-bg-2); border: 1px solid var(--v3-line);
  display: grid; place-items: center; color: var(--v3-text); cursor: pointer;
  position: relative; font-size: 16px;
}
body.ui-v3 .v3-icon-btn:active { transform: scale(0.96); }
body.ui-v3 .v3-notif-dot {
  position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--v3-red); box-shadow: 0 0 0 2px var(--v3-bg-0);
}

/* VIP progress card */
body.ui-v3 .v3-vip-card {
  margin: 14px 12px 0; padding: 14px;
  background: linear-gradient(135deg, rgba(255,184,0,.10), rgba(255,138,0,.06));
  border: 1px solid rgba(255,184,0,.25);
  border-radius: var(--v3-r-lg);
  display: flex; gap: 12px; align-items: center;
}
body.ui-v3 .v3-vip-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--v3-gold), #FF8A00);
  display: grid; place-items: center; font-size: 22px; flex-shrink: 0;
}
body.ui-v3 .v3-vip-body { flex: 1; min-width: 0; }
body.ui-v3 .v3-vip-row {
  display: flex; justify-content: space-between; font-size: 12px;
  color: var(--v3-text-dim); margin-bottom: 6px;
}
body.ui-v3 .v3-vip-row b { color: var(--v3-text); font-weight: 700; }
body.ui-v3 .v3-vip-pct b { color: var(--v3-gold); }
body.ui-v3 .v3-vip-perks {
  font-size: 10px; color: var(--v3-text-dim); margin-top: 6px;
  letter-spacing: .02em;
}
body.ui-v3 .v3-vip-cta {
  padding: 8px 12px; background: rgba(255,184,0,.15); border: 1px solid rgba(255,184,0,.4);
  color: var(--v3-gold); border-radius: 999px; font-size: 11px; font-weight: 700;
  cursor: pointer;
}

/* Section header (consistent) */
body.ui-v3 .v3-sec-head {
  margin: 18px 12px 8px; display: flex; align-items: center; justify-content: space-between;
}
body.ui-v3 .v3-sec-head h3 {
  margin: 0; font-size: 14px; font-weight: 800; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 6px; color: var(--v3-text);
}
body.ui-v3 .v3-sec-head a {
  font-size: 12px; color: var(--v3-text-dim); cursor: pointer;
}
body.ui-v3 .v3-sec-head a:hover { color: var(--v3-primary); }

/* Game provider quick chips horizontal scroll */
body.ui-v3 .v3-prov-row {
  display: flex; gap: 10px; margin: 0 12px; overflow-x: auto;
  padding-bottom: 4px; scrollbar-width: none;
}
body.ui-v3 .v3-prov-row::-webkit-scrollbar { display: none; }
body.ui-v3 .v3-prov {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; padding: 4px;
}
body.ui-v3 .v3-prov:active { transform: scale(0.95); }
body.ui-v3 .v3-prov-logo {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; font-weight: 900; font-size: 14px;
  color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
body.ui-v3 .prov-pg { background: linear-gradient(135deg, #FF8A00, #FF4D54); }
body.ui-v3 .prov-918 { background: linear-gradient(135deg, #BE185D, #831843); }
body.ui-v3 .prov-pp { background: linear-gradient(135deg, #1E3A8A, #4338CA); }
body.ui-v3 .prov-jili { background: linear-gradient(135deg, #14532D, #9C7B22); }
body.ui-v3 .prov-mega { background: linear-gradient(135deg, #06B6D4, #1E40AF); }
body.ui-v3 .prov-spade { background: linear-gradient(135deg, #7C2D12, #DC2626); }
body.ui-v3 .prov-pussy { background: linear-gradient(135deg, #A78BFA, #DB2777); }
body.ui-v3 .v3-prov span {
  font-size: 10px; color: var(--v3-text-dim); font-weight: 600;
  white-space: nowrap; max-width: 60px; overflow: hidden; text-overflow: ellipsis;
}

/* Recently played row */
body.ui-v3 .v3-recent-row {
  display: flex; gap: 10px; margin: 0 12px; overflow-x: auto;
  padding-bottom: 4px; scrollbar-width: none;
}
body.ui-v3 .v3-recent-row::-webkit-scrollbar { display: none; }

/* Hot promo cards horizontal */
body.ui-v3 .v3-promos-row {
  display: flex; gap: 10px; margin: 0 12px; overflow-x: auto;
  padding-bottom: 6px; scrollbar-width: none;
}
body.ui-v3 .v3-promos-row::-webkit-scrollbar { display: none; }
body.ui-v3 .v3-promo-card {
  flex: 0 0 auto; width: 140px; padding: 14px 12px;
  background: linear-gradient(135deg, #831843, #BE185D);
  border-radius: var(--v3-r-lg); position: relative;
  color: #fff; cursor: pointer; transition: transform .12s;
}
body.ui-v3 .v3-promo-card:active { transform: scale(0.97); }
body.ui-v3 .v3-promo-badge {
  display: inline-block; padding: 2px 7px; background: rgba(255,255,255,.18);
  border-radius: 6px; font-size: 9px; font-weight: 800; letter-spacing: .04em;
  margin-bottom: 4px;
}
body.ui-v3 .v3-promo-pct {
  font-size: 32px; font-weight: 900; line-height: 1;
  font-family: 'JetBrains Mono', monospace; letter-spacing: -.03em;
}
body.ui-v3 .v3-promo-pct small {
  font-size: 14px; font-weight: 700; margin-left: 2px;
}
body.ui-v3 .v3-promo-lbl {
  font-size: 10px; opacity: .85; margin-top: 6px; font-weight: 500;
}

/* ════════════════════════════════════════════════════════
   Phase 5 (2026-05-12) — mockup 1:1 复刻
   Stories ring / Featured carousel / Jackpot banner
   Source: D:\platfound new ui\mobile.html
   ════════════════════════════════════════════════════════ */

/* PROMO STORIES (Instagram-style ring) */
body.ui-v3 .v3-stories {
  padding: 2px 16px 18px; display: flex; gap: 10px;
  overflow-x: auto; scrollbar-width: none;
}
body.ui-v3 .v3-stories::-webkit-scrollbar { display: none; }
body.ui-v3 .v3-story {
  flex-shrink: 0; width: 74px; text-align: center; cursor: pointer;
}
body.ui-v3 .v3-story:active { transform: scale(0.95); }
body.ui-v3 .v3-story-ring {
  width: 64px; height: 64px; border-radius: 50%;
  padding: 2px; margin: 0 auto 6px;
  background: linear-gradient(135deg, var(--v3-gold, #D4A93A), #FF4D54, #9B72E6);
}
body.ui-v3 .v3-story-ring.viewed { background: var(--v3-bg-3); }
body.ui-v3 .v3-story-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--v3-bg-3); display: flex;
  align-items: center; justify-content: center; font-size: 24px;
  border: 2px solid var(--v3-bg-0);
}
body.ui-v3 .v3-story-label {
  font-size: 10px; color: var(--v3-text-dim); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* FEATURED carousel (3 big cards) */
body.ui-v3 .v3-featured {
  padding: 0 16px 22px; display: flex; gap: 12px; overflow-x: auto;
  scrollbar-width: none; scroll-snap-type: x mandatory;
}
body.ui-v3 .v3-featured::-webkit-scrollbar { display: none; }
body.ui-v3 .v3-feat {
  flex-shrink: 0; width: 280px; height: 140px;
  border-radius: var(--v3-r-lg, 14px); position: relative; overflow: hidden;
  cursor: pointer; scroll-snap-align: start;
  border: 1px solid var(--v3-line);
}
body.ui-v3 .v3-feat.feat-1 { background: linear-gradient(135deg, #3a1a4a 0%, #7e2680 60%, #c43dd0 100%); }
body.ui-v3 .v3-feat.feat-2 { background: linear-gradient(135deg, #1a3a4a 0%, #268072 60%, #3dd0a8 100%); }
body.ui-v3 .v3-feat.feat-3 { background: linear-gradient(135deg, #4a1a1a 0%, #8a2626 60%, #d03d3d 100%); }
body.ui-v3 .v3-feat::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.7));
}
body.ui-v3 .v3-feat-content {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1;
}
body.ui-v3 .v3-feat-tag {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 7px; border-radius: 3px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
  color: #fff; text-transform: uppercase; margin-bottom: 6px;
}
body.ui-v3 .v3-feat-title {
  font-size: 16px; font-weight: 700; color: #fff;
  margin-bottom: 2px; letter-spacing: -.01em;
}
body.ui-v3 .v3-feat-meta {
  font-size: 11px; color: rgba(255,255,255,.7); display: flex; gap: 8px;
}
body.ui-v3 .v3-feat-rtp {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; font-weight: 700;
  background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
  color: var(--v3-gold, #D4A93A);
  padding: 3px 7px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; z-index: 1;
}

/* JACKPOT banner (red glow + gold gradient text) */
body.ui-v3 .v3-jackpot {
  margin: 0 16px 22px; padding: 16px 18px;
  border-radius: var(--v3-r-lg, 14px);
  background:
    radial-gradient(ellipse at right, rgba(255,77,84,.2), transparent 60%),
    linear-gradient(135deg, #1A1D27 0%, #211520 100%);
  border: 1px solid var(--v3-line-strong);
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
}
body.ui-v3 .v3-jp-ic {
  font-size: 32px; flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(255,77,84,.4));
}
body.ui-v3 .v3-jp-info { flex: 1; min-width: 0; }
body.ui-v3 .v3-jp-label {
  font-size: 10px; font-weight: 600; color: var(--v3-red, #FF4D54);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px;
}
body.ui-v3 .v3-jp-amt {
  font-size: 22px; font-weight: 700; letter-spacing: -.01em;
  font-family: 'JetBrains Mono', monospace;
  background: linear-gradient(180deg, #fff, #FFB94A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.ui-v3 .v3-jp-sub {
  font-size: 10px; color: var(--v3-text-dim); margin-top: 2px;
}
body.ui-v3 .v3-jp-cta {
  font-size: 11px; font-weight: 700;
  color: var(--v3-text); background: var(--v3-bg-3);
  border: 1px solid var(--v3-line-strong);
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
}
body.ui-v3 .v3-jp-cta:active { transform: scale(0.96); }

/* ════════════════════════════════════════════════════════
   Phase 5b — Deposit bottom sheet (mockup 1:1)
   ════════════════════════════════════════════════════════ */
body.ui-v3 .v3-sheet-host {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}
body.ui-v3 .v3-sheet-host > * { pointer-events: auto; }
body.ui-v3 .v3-sheet-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
  cursor: pointer; animation: v3-fade .2s ease;
}
@keyframes v3-fade { from { opacity: 0; } to { opacity: 1; } }
body.ui-v3 .v3-sheet {
  position: relative; background: var(--v3-bg-1);
  border-top-left-radius: 24px; border-top-right-radius: 24px;
  padding: 8px 20px 24px;
  border-top: 1px solid var(--v3-line-strong);
  max-height: 90vh; overflow-y: auto; scrollbar-width: none;
  margin: 0 auto; width: 100%; max-width: 430px;
  animation: v3-slide-up .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes v3-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
body.ui-v3 .v3-sheet::-webkit-scrollbar { display: none; }
body.ui-v3 .v3-sheet-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--v3-bg-3); margin: 6px auto 16px;
}
body.ui-v3 .v3-sheet-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;
}
body.ui-v3 .v3-sheet-head h2 {
  margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--v3-text);
}
body.ui-v3 .v3-sheet-x {
  width: 32px; height: 32px; border-radius: 50%; background: var(--v3-bg-3);
  display: flex; align-items: center; justify-content: center;
  color: var(--v3-text-dim); font-size: 14px; cursor: pointer;
}

body.ui-v3 .v3-amount-block { margin-bottom: 18px; }
body.ui-v3 .v3-amount-label {
  font-size: 11px; font-weight: 600; color: var(--v3-text-dim);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px; display: flex; justify-content: space-between;
}
body.ui-v3 .v3-amt-bal {
  color: var(--v3-text); text-transform: none; letter-spacing: 0; font-weight: 500;
}
body.ui-v3 .v3-amt-bal b { font-family: 'JetBrains Mono', monospace; }
body.ui-v3 .v3-amount-input {
  background: var(--v3-bg-2); border: 1.5px solid #D4A93A;
  border-radius: 12px; padding: 14px 16px;
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
body.ui-v3 .v3-amount-input .cur {
  font-size: 15px; color: var(--v3-text-dim); font-weight: 600;
}
body.ui-v3 .v3-amount-input input {
  flex: 1; background: none; border: none; outline: none; color: var(--v3-text);
  font-size: 28px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace; letter-spacing: -.01em; width: 100%;
  -moz-appearance: textfield;
}
body.ui-v3 .v3-amount-input input::-webkit-outer-spin-button,
body.ui-v3 .v3-amount-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.ui-v3 .v3-amount-input .clear {
  color: var(--v3-text-dim); width: 24px; height: 24px;
  border-radius: 50%; background: var(--v3-bg-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer;
}
body.ui-v3 .v3-quick-chips {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
body.ui-v3 .v3-qchip {
  padding: 10px 0; background: var(--v3-bg-2);
  border: 1px solid var(--v3-line); border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--v3-text-dim);
  text-align: center; cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}
body.ui-v3 .v3-qchip.active {
  background: rgba(212,169,58,.12); border-color: rgba(212,169,58,.35); color: #D4A93A;
}
body.ui-v3 .v3-bonus-strip {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(212,169,58,.12), rgba(212,169,58,.04));
  border: 1px solid rgba(212,169,58,.35);
  display: flex; align-items: center; gap: 10px;
}
body.ui-v3 .v3-bonus-strip .ic { color: #D4A93A; font-size: 16px; }
body.ui-v3 .v3-bonus-strip .txt { flex: 1; font-size: 12px; color: var(--v3-text); }
body.ui-v3 .v3-bonus-strip .txt b { color: #D4A93A; font-weight: 600; }
body.ui-v3 .v3-toggle {
  width: 36px; height: 20px; border-radius: 10px;
  background: #D4A93A; position: relative; cursor: pointer;
  transition: background .2s;
}
body.ui-v3 .v3-toggle::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #1A1305;
  transition: all .2s;
}
body.ui-v3 .v3-toggle.off { background: var(--v3-bg-3); }
body.ui-v3 .v3-toggle.off::after { right: auto; left: 2px; background: var(--v3-text-dim); }

body.ui-v3 .v3-pg-section { margin-bottom: 18px; }
body.ui-v3 .v3-pg-label {
  font-size: 11px; font-weight: 600; color: var(--v3-text-dim);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;
}
body.ui-v3 .v3-pg-label .ok {
  font-size: 10px; color: #3DD68C; font-weight: 500;
  text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 4px;
}
body.ui-v3 .v3-pg-label .ok::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #3DD68C;
}
body.ui-v3 .v3-pg-grid { display: flex; flex-direction: column; gap: 8px; }
body.ui-v3 .v3-pg-card {
  background: var(--v3-bg-2); border: 1px solid var(--v3-line);
  border-radius: 12px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  position: relative;
}
body.ui-v3 .v3-pg-card.active {
  background: linear-gradient(180deg, rgba(212,169,58,.12), transparent), var(--v3-bg-2);
  border-color: #D4A93A;
}
body.ui-v3 .v3-pg-card.active .check {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: #D4A93A;
  display: flex; align-items: center; justify-content: center;
  color: #1A1305; font-size: 12px; font-weight: 700;
}
body.ui-v3 .v3-pg-logo {
  width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; letter-spacing: .02em;
}
body.ui-v3 .v3-pg-logo.wepay { background: linear-gradient(135deg, #2ECC71, #27AE60); color: #fff; }
body.ui-v3 .v3-pg-logo.s1pay { background: linear-gradient(135deg, #3498DB, #2980B9); color: #fff; }
body.ui-v3 .v3-pg-logo.speedpay { background: linear-gradient(135deg, #E67E22, #D35400); color: #fff; }
body.ui-v3 .v3-pg-logo.gmpay { background: linear-gradient(135deg, #9B59B6, #8E44AD); color: #fff; }
body.ui-v3 .v3-pg-info { flex: 1; min-width: 0; }
body.ui-v3 .v3-pg-name {
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
  color: var(--v3-text);
}
body.ui-v3 .v3-pg-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 5px; border-radius: 3px; text-transform: uppercase;
}
body.ui-v3 .v3-pg-badge.rec { background: rgba(61,214,140,.15); color: #3DD68C; }
body.ui-v3 .v3-pg-badge.fast { background: rgba(91,141,239,.15); color: #5B8DEF; }
body.ui-v3 .v3-pg-meta {
  font-size: 11px; color: var(--v3-text-dim); display: flex; gap: 10px;
}
body.ui-v3 .v3-pg-meta .sep { color: var(--v3-text-mute); }

body.ui-v3 .v3-summary {
  background: var(--v3-bg-2); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 16px;
}
body.ui-v3 .v3-sum-row {
  display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0;
}
body.ui-v3 .v3-sum-row .l { color: var(--v3-text-dim); }
body.ui-v3 .v3-sum-row .r { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--v3-text); }
body.ui-v3 .v3-sum-row.total {
  border-top: 1px dashed var(--v3-line-strong);
  margin-top: 6px; padding-top: 10px;
}
body.ui-v3 .v3-sum-row.total .l {
  color: var(--v3-text); font-weight: 600; font-family: 'Inter', sans-serif;
}

/* ════════════════════════════════════════════════════════
   Phase 5b — Deposit bottom sheet (mockup 1:1)
   ════════════════════════════════════════════════════════ */
body.ui-v3 .v3-sheet-host {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}
body.ui-v3 .v3-sheet-host > * { pointer-events: auto; }
body.ui-v3 .v3-sheet-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
  cursor: pointer; animation: v3-fade .2s ease;
}
@keyframes v3-fade { from { opacity: 0; } to { opacity: 1; } }
body.ui-v3 .v3-sheet {
  position: relative; background: var(--v3-bg-1);
  border-top-left-radius: 24px; border-top-right-radius: 24px;
  padding: 8px 20px 24px;
  border-top: 1px solid var(--v3-line-strong);
  max-height: 90vh; overflow-y: auto; scrollbar-width: none;
  margin: 0 auto; width: 100%; max-width: 430px;
  animation: v3-slide-up .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes v3-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
body.ui-v3 .v3-sheet::-webkit-scrollbar { display: none; }
body.ui-v3 .v3-sheet-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--v3-bg-3); margin: 6px auto 16px;
}
body.ui-v3 .v3-sheet-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;
}
body.ui-v3 .v3-sheet-head h2 {
  margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--v3-text);
}
body.ui-v3 .v3-sheet-x {
  width: 32px; height: 32px; border-radius: 50%; background: var(--v3-bg-3);
  display: flex; align-items: center; justify-content: center;
  color: var(--v3-text-dim); font-size: 14px; cursor: pointer;
}

body.ui-v3 .v3-amount-block { margin-bottom: 18px; }
body.ui-v3 .v3-amount-label {
  font-size: 11px; font-weight: 600; color: var(--v3-text-dim);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px; display: flex; justify-content: space-between;
}
body.ui-v3 .v3-amt-bal {
  color: var(--v3-text); text-transform: none; letter-spacing: 0; font-weight: 500;
}
body.ui-v3 .v3-amt-bal b { font-family: 'JetBrains Mono', monospace; }
body.ui-v3 .v3-amount-input {
  background: var(--v3-bg-2); border: 1.5px solid #D4A93A;
  border-radius: 12px; padding: 14px 16px;
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
body.ui-v3 .v3-amount-input .cur {
  font-size: 15px; color: var(--v3-text-dim); font-weight: 600;
}
body.ui-v3 .v3-amount-input input {
  flex: 1; background: none; border: none; outline: none; color: var(--v3-text);
  font-size: 28px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace; letter-spacing: -.01em; width: 100%;
  -moz-appearance: textfield;
}
body.ui-v3 .v3-amount-input input::-webkit-outer-spin-button,
body.ui-v3 .v3-amount-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.ui-v3 .v3-amount-input .clear {
  color: var(--v3-text-dim); width: 24px; height: 24px;
  border-radius: 50%; background: var(--v3-bg-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer;
}
body.ui-v3 .v3-quick-chips {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
body.ui-v3 .v3-qchip {
  padding: 10px 0; background: var(--v3-bg-2);
  border: 1px solid var(--v3-line); border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--v3-text-dim);
  text-align: center; cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}
body.ui-v3 .v3-qchip.active {
  background: rgba(212,169,58,.12); border-color: rgba(212,169,58,.35); color: #D4A93A;
}
body.ui-v3 .v3-bonus-strip {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(212,169,58,.12), rgba(212,169,58,.04));
  border: 1px solid rgba(212,169,58,.35);
  display: flex; align-items: center; gap: 10px;
}
body.ui-v3 .v3-bonus-strip .ic { color: #D4A93A; font-size: 16px; }
body.ui-v3 .v3-bonus-strip .txt { flex: 1; font-size: 12px; color: var(--v3-text); }
body.ui-v3 .v3-bonus-strip .txt b { color: #D4A93A; font-weight: 600; }
body.ui-v3 .v3-toggle {
  width: 36px; height: 20px; border-radius: 10px;
  background: #D4A93A; position: relative; cursor: pointer;
  transition: background .2s;
}
body.ui-v3 .v3-toggle::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #1A1305;
  transition: all .2s;
}
body.ui-v3 .v3-toggle.off { background: var(--v3-bg-3); }
body.ui-v3 .v3-toggle.off::after { right: auto; left: 2px; background: var(--v3-text-dim); }

body.ui-v3 .v3-pg-section { margin-bottom: 18px; }
body.ui-v3 .v3-pg-label {
  font-size: 11px; font-weight: 600; color: var(--v3-text-dim);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;
}
body.ui-v3 .v3-pg-label .ok {
  font-size: 10px; color: #3DD68C; font-weight: 500;
  text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 4px;
}
body.ui-v3 .v3-pg-label .ok::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #3DD68C;
}
body.ui-v3 .v3-pg-grid { display: flex; flex-direction: column; gap: 8px; }
body.ui-v3 .v3-pg-card {
  background: var(--v3-bg-2); border: 1px solid var(--v3-line);
  border-radius: 12px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  position: relative;
}
body.ui-v3 .v3-pg-card.active {
  background: linear-gradient(180deg, rgba(212,169,58,.12), transparent), var(--v3-bg-2);
  border-color: #D4A93A;
}
body.ui-v3 .v3-pg-card.active .check {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: #D4A93A;
  display: flex; align-items: center; justify-content: center;
  color: #1A1305; font-size: 12px; font-weight: 700;
}
body.ui-v3 .v3-pg-logo {
  width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; letter-spacing: .02em;
}
body.ui-v3 .v3-pg-logo.wepay { background: linear-gradient(135deg, #2ECC71, #27AE60); color: #fff; }
body.ui-v3 .v3-pg-logo.s1pay { background: linear-gradient(135deg, #3498DB, #2980B9); color: #fff; }
body.ui-v3 .v3-pg-logo.speedpay { background: linear-gradient(135deg, #E67E22, #D35400); color: #fff; }
body.ui-v3 .v3-pg-logo.gmpay { background: linear-gradient(135deg, #9B59B6, #8E44AD); color: #fff; }
body.ui-v3 .v3-pg-info { flex: 1; min-width: 0; }
body.ui-v3 .v3-pg-name {
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
  color: var(--v3-text);
}
body.ui-v3 .v3-pg-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 5px; border-radius: 3px; text-transform: uppercase;
}
body.ui-v3 .v3-pg-badge.rec { background: rgba(61,214,140,.15); color: #3DD68C; }
body.ui-v3 .v3-pg-badge.fast { background: rgba(91,141,239,.15); color: #5B8DEF; }
body.ui-v3 .v3-pg-meta {
  font-size: 11px; color: var(--v3-text-dim); display: flex; gap: 10px;
}
body.ui-v3 .v3-pg-meta .sep { color: var(--v3-text-mute); }

body.ui-v3 .v3-summary {
  background: var(--v3-bg-2); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 16px;
}
body.ui-v3 .v3-sum-row {
  display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0;
}
body.ui-v3 .v3-sum-row .l { color: var(--v3-text-dim); }
body.ui-v3 .v3-sum-row .r { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--v3-text); }
body.ui-v3 .v3-sum-row.total {
  border-top: 1px dashed var(--v3-line-strong);
  margin-top: 6px; padding-top: 10px;
}
body.ui-v3 .v3-sum-row.total .l {
  color: var(--v3-text); font-weight: 600; font-family: 'Inter', sans-serif;
}

/* Game detail view (mockup 1:1) */
body.ui-v3 .v3-detail-host {
  position: fixed; inset: 0; z-index: 999;
  background: #08090C;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  animation: v3-slide-from-right .25s ease;
}
@keyframes v3-slide-from-right { from { transform: translateX(8%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
body.ui-v3 .v3-detail-host::-webkit-scrollbar { display: none; }
body.ui-v3 .v3-detail-hero {
  height: 280px; position: relative;
  background: linear-gradient(135deg, #3a1a4a 0%, #7e2680 50%, #c43dd0 100%);
}
body.ui-v3 .v3-detail-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(212,169,58,.35), transparent 50%);
}
body.ui-v3 .v3-detail-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, #08090C 95%);
}
body.ui-v3 .v3-detail-back, body.ui-v3 .v3-detail-fav {
  position: absolute; top: 16px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.4); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
}
body.ui-v3 .v3-detail-back { left: 16px; font-size: 22px; font-weight: 600; }
body.ui-v3 .v3-detail-fav { right: 16px; font-size: 18px; }
body.ui-v3 .v3-detail-meta {
  position: absolute; bottom: 16px; left: 20px; right: 20px; z-index: 2;
  display: flex; align-items: flex-end; gap: 14px;
}
body.ui-v3 .v3-detail-thumb {
  width: 88px; height: 88px; border-radius: 14px;
  background: linear-gradient(135deg, #5a2a6a, #9e4690);
  border: 2px solid rgba(255,255,255,.15); flex-shrink: 0;
  box-shadow: 0 12px 30px -6px rgba(0,0,0,.6);
}
body.ui-v3 .v3-detail-title { flex: 1; min-width: 0; }
body.ui-v3 .v3-detail-title h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
body.ui-v3 .v3-detail-prov { font-size: 12px; color: rgba(255,255,255,.7); font-weight: 500; }
body.ui-v3 .v3-detail-rating { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: rgba(255,255,255,.85); }
body.ui-v3 .v3-detail-rating .star { color: #D4A93A; }
body.ui-v3 .v3-detail-body { padding-top: 18px; padding-bottom: 100px; }
body.ui-v3 .v3-detail-stats { margin: 0 16px 18px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
body.ui-v3 .v3-stat { background: #161922; border: 1px solid #1F2330; border-radius: 10px; padding: 10px 12px; }
body.ui-v3 .v3-stat .l { font-size: 10px; color: #A8B0C2; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: 3px; }
body.ui-v3 .v3-stat .v { font-size: 15px; font-weight: 700; font-family: 'JetBrains Mono', monospace; letter-spacing: -.01em; color: #F0F2F7; }
body.ui-v3 .v3-stat .v.gold { color: #D4A93A; }
body.ui-v3 .v3-stat .v.green { color: #3DD68C; }
body.ui-v3 .v3-bet-block { margin: 0 16px 18px; }
body.ui-v3 .v3-bet-input { background: #161922; border: 1px solid #2B3142; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
body.ui-v3 .v3-bet-label { font-size: 11px; color: #A8B0C2; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; }
body.ui-v3 .v3-bet-value { font-size: 24px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: #F0F2F7; }
body.ui-v3 .v3-reviews { margin: 0 16px 22px; }
body.ui-v3 .v3-review { background: #161922; border: 1px solid #1F2330; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
body.ui-v3 .v3-rev-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
body.ui-v3 .v3-rev-user { display: flex; align-items: center; gap: 8px; }
body.ui-v3 .v3-rev-ava { width: 26px; height: 26px; border-radius: 50%; background: #1E222D; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #A8B0C2; }
body.ui-v3 .v3-rev-name { font-size: 12px; font-weight: 600; color: #F0F2F7; }
body.ui-v3 .v3-rev-stars { font-size: 11px; color: #D4A93A; }
body.ui-v3 .v3-rev-text { font-size: 12px; color: #F0F2F7; line-height: 1.5; }
body.ui-v3 .v3-detail-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #0F1117; border-top: 1px solid #1F2330;
  padding: 14px 16px; display: flex; gap: 10px; z-index: 1000;
  max-width: 430px; margin: 0 auto;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
body.ui-v3 .v3-detail-cta .demo { flex: 1; height: 48px; border-radius: 12px; background: #1E222D; border: 1px solid #2B3142; color: #F0F2F7; font-weight: 600; font-size: 14px; cursor: pointer; }
body.ui-v3 .v3-detail-cta .play {
  flex: 2; height: 48px; border-radius: 12px; border: none;
  background: linear-gradient(180deg, #E8C25C, #D4A93A);
  color: #1A1305; font-weight: 700; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 6px 18px -4px rgba(212,169,58,.5);
}

/* 2026-05-12 force fix — !important to beat any inherited */
body.ui-v3 .v3-detail-host {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}
body.ui-v3 .v3-sheet-host {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
}

/* ════════════════════════════════════════════════════════
   Phase 6 (2026-05-12) — 全面位置/重叠修复 (Mz 真机反馈)
   ════════════════════════════════════════════════════════ */

/* 1. 顶部安全区 — avatar 不要贴边 */
body.ui-v3 .v3-topbar {
  padding-top: max(12px, env(safe-area-inset-top, 12px)) !important;
}

/* 2. 隐藏所有跟 v3 重复的老元素 */
body.ui-v3 #hot-promo-strip,                  /* PROMOSI HANGAT 重复 */
body.ui-v3 .hot-promo-strip,
body.ui-v3 .livetx-card,                       /* TRANSAKSI LANGSUNG (v3 已有 ticker) */
body.ui-v3 #bs-leaderboard,                   /* Senarai Pemain (legacy) */
body.ui-v3 .bs-d-marquee,                      /* 滚动条 */
body.ui-v3 .bs-d-live-ticker,                  /* 老 live ticker */
body.ui-v3 .bs-d-floating-ticker,
body.ui-v3 [class*="floating-ticker"],
body.ui-v3 [id*="floating-ticker"],
body.ui-v3 [class*="ltkr"],
body.ui-v3 [id*="ltkr"],
body.ui-v3 .float-ticker,
body.ui-v3 #live-tx-strip,
body.ui-v3 .live-tx-strip {
  display: none !important;
}

/* 3. Stories 边距 + 不剪 */
body.ui-v3 .v3-stories {
  padding-left: 12px !important;
  padding-right: 12px !important;
  overflow-x: auto !important;
  scroll-padding: 12px;
}
body.ui-v3 .v3-stories::after {
  /* 给最右一个 story 留些 padding */
  content: ''; flex: 0 0 4px;
}

/* 4. Featured carousel 第一卡 alignment fix */
body.ui-v3 .v3-featured {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
body.ui-v3 .v3-featured::after { content: ''; flex: 0 0 4px; }

/* 5. Jackpot 内 amount 不要被左侧 v3 toggle 挡 */
body.ui-v3 .v3-jackpot {
  margin-left: 16px !important;
  margin-right: 16px !important;
  position: relative;
  z-index: 5;
}

/* 6. v3 toggle 位置 — 移到底栏上方更小不挡内容 */
body.ui-v3 .ui-v3-toggle {
  bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  font-size: 8px !important;
  padding: 2px 8px !important;
  opacity: 0.5 !important;
  background: rgba(212,169,58,.8) !important;
  z-index: 99 !important;
}
body.ui-v3 .ui-v3-toggle:hover { opacity: 0.9 !important; }

/* 7. 主内容 padding-bottom — 让最后游戏 grid 不被 bnav 盖 */
body.ui-v3 #bs-container,
body.ui-v3 .bs-container {
  padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
}

/* 8. 老 game section + grid 间距整理 */
body.ui-v3 #sec-popular-games {
  margin-top: 4px !important;
}
body.ui-v3 .games-grid {
  padding: 0 12px !important;
  gap: 10px !important;
}

/* 9. cat-row 跟 v3 stories 间距 */
body.ui-v3 .cat-row {
  padding: 0 12px !important;
  margin-top: 6px !important;
  margin-bottom: 12px !important;
}

/* 10. 隐藏游戏 grid 下面的 .section（feat-tile 区域，跟 stories 重复） */
body.ui-v3 #sec-features,
body.ui-v3 .feat-tile-row,
body.ui-v3 .features-grid {
  display: none !important;
}

/* 11. wager-strip 的 "—" 占位符如果没数据 → 隐 */
body.ui-v3 #v3-wager-stat:empty,
body.ui-v3 #v3-wager-stat:contains("—") { display: none; }

/* 12. balance hero 左边 padding 不要顶死 */
body.ui-v3 .v3-hero {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
body.ui-v3 .v3-wager {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
body.ui-v3 .v3-ticker {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

/* 13. JACKPOT amount 字号小一档 + 不溢出 */
body.ui-v3 .v3-jp-amt {
  font-size: 20px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.ui-v3 .v3-jp-info { min-width: 0; overflow: hidden; }

/* 2026-05-12 hide #winner-ticker + #fab-cta-register (重复浮窗) */
body.ui-v3 #winner-ticker,
body.ui-v3 .winner-ticker,
body.ui-v3 .wt-leaving,
body.ui-v3 [class*='winner-ticker'],
body.ui-v3 #fab-cta-register,
body.ui-v3 .fab-floating-cta,
body.ui-v3 [class*='fab-floating'] {
  display: none !important;
}

/* 2026-05-12 toggle 移到底栏左下角小角落不挡内容 */
body.ui-v3 .ui-v3-toggle {
  bottom: 4px !important;
  left: 4px !important;
  right: auto !important;
  transform: none !important;
  font-size: 7px !important;
  padding: 1px 5px !important;
  opacity: 0.35 !important;
  z-index: 9 !important;
}
body.ui-v3 .ui-v3-toggle:hover { opacity: 0.85 !important; }

/* PWA install banner */
body.ui-v3 .v3-pwa-banner {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(82px + env(safe-area-inset-bottom));
  background: linear-gradient(135deg, #1A1D27, #211520);
  border: 1px solid rgba(212,169,58,.35); border-radius: 14px;
  padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  z-index: 95; box-shadow: 0 12px 28px -6px rgba(0,0,0,.6);
  max-width: 406px; margin: 0 auto;
  animation: v3-pwa-slide-up .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes v3-pwa-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
body.ui-v3 .v3-pwa-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #D4A93A, #9C7B22);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
body.ui-v3 .v3-pwa-body { flex: 1; min-width: 0; }
body.ui-v3 .v3-pwa-title { font-size: 13px; font-weight: 700; color: #F0F2F7; }
body.ui-v3 .v3-pwa-sub { font-size: 11px; color: #A8B0C2; margin-top: 2px; }
body.ui-v3 .v3-pwa-cta {
  background: linear-gradient(180deg, #E8C25C, #D4A93A);
  color: #1A1305; border: none; padding: 8px 16px;
  border-radius: 999px; font-size: 12px; font-weight: 800;
  cursor: pointer; flex-shrink: 0;
}
body.ui-v3 .v3-pwa-x {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.08); display: grid; place-items: center;
  color: #A8B0C2; font-size: 11px; cursor: pointer; flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════
   Phase 7 — Search / Notif / Sidebar / Right-rail
   ════════════════════════════════════════════════════════ */

body.ui-v3 .v3-modal-host {
  position: fixed; inset: 0; z-index: 1001;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 8vh;
}
body.ui-v3 .v3-modal-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px); cursor: pointer;
}
body.ui-v3 .v3-modal {
  position: relative; background: #0F1117;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
  width: calc(100% - 24px); max-width: 480px; max-height: 80vh;
  display: flex; flex-direction: column; overflow: hidden;
  animation: v3-modal-pop .25s cubic-bezier(.2,.8,.2,1);
}
body.ui-v3 .v3-modal-head {
  padding: 14px 16px; border-bottom: 1px solid #1F2330;
  display: flex; align-items: center; gap: 12px;
}
body.ui-v3 .v3-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: #F0F2F7; flex: 1; }
body.ui-v3 .v3-modal-x {
  width: 28px; height: 28px; border-radius: 50%;
  background: #1E222D; color: #A8B0C2; cursor: pointer;
  display: grid; place-items: center; font-size: 13px;
}

body.ui-v3 .v3-search-input-wrap {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: #161922; border: 1.5px solid #D4A93A;
  border-radius: 10px; padding: 10px 14px;
}
body.ui-v3 .v3-search-input-wrap .ic { color: #A8B0C2; font-size: 14px; }
body.ui-v3 .v3-search-input-wrap input {
  flex: 1; background: none; border: none; outline: none;
  color: #F0F2F7; font-size: 14px;
}
body.ui-v3 .v3-search-input-wrap input::placeholder { color: #6C7588; }
body.ui-v3 .v3-search-quick {
  padding: 12px 16px; display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; border-bottom: 1px solid #1F2330;
}
body.ui-v3 .v3-search-quick-label { font-size: 11px; color: #6C7588; margin-right: 4px; }
body.ui-v3 .v3-search-quick button {
  padding: 5px 10px; background: #1B202B; border: 1px solid #1F2330;
  border-radius: 999px; color: #A8B0C2; font-size: 11px;
  font-weight: 500; cursor: pointer;
}
body.ui-v3 .v3-search-quick button:hover { background: #262C3A; color: #F0F2F7; }
body.ui-v3 .v3-search-results { flex: 1; overflow-y: auto; padding: 8px; }
body.ui-v3 .v3-search-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 10px; cursor: pointer; transition: background .12s;
}
body.ui-v3 .v3-search-item:hover { background: #1B202B; }
body.ui-v3 .v3-search-thumb {
  width: 40px; height: 40px; border-radius: 8px;
  background: linear-gradient(135deg, #3a1a4a, #7e2680); flex-shrink: 0;
}
body.ui-v3 .v3-search-th-pgsoft { background: linear-gradient(135deg, #1a3a4a, #268072); }
body.ui-v3 .v3-search-th-jili { background: linear-gradient(135deg, #3a1a4a, #7e2680); }
body.ui-v3 .v3-search-th-pragmatic { background: linear-gradient(135deg, #4a1a1a, #8a2626); }
body.ui-v3 .v3-search-th-918kiss { background: linear-gradient(135deg, #2a2a4a, #26487e); }
body.ui-v3 .v3-search-th-pussy { background: linear-gradient(135deg, #3a2a1a, #7e6026); }
body.ui-v3 .v3-search-th-spade { background: linear-gradient(135deg, #4a1a1a, #8a2626); }
body.ui-v3 .v3-search-th-mega { background: linear-gradient(135deg, #1a4a2a, #267e50); }
body.ui-v3 .v3-search-info { flex: 1; min-width: 0; }
body.ui-v3 .v3-search-name {
  font-size: 14px; font-weight: 600; color: #F0F2F7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ui-v3 .v3-search-tag {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 3px; margin-left: 4px;
}
body.ui-v3 .v3-search-tag.tag-hot { background: rgba(255,77,84,.18); color: #FF4D54; }
body.ui-v3 .v3-search-tag.tag-new { background: rgba(61,214,140,.18); color: #3DD68C; }
body.ui-v3 .v3-search-meta { font-size: 11px; color: #A8B0C2; margin-top: 2px; }
body.ui-v3 .v3-search-play { color: #6C7588; font-size: 18px; }
body.ui-v3 .v3-search-empty {
  text-align: center; padding: 40px 16px; color: #6C7588; font-size: 13px;
}

body.ui-v3 .v3-notif-clear {
  background: rgba(212,169,58,.12); border: 1px solid rgba(212,169,58,.35);
  color: #D4A93A; font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
}
body.ui-v3 .v3-notif-tabs {
  padding: 8px 12px; display: flex; gap: 6px;
  border-bottom: 1px solid #1F2330;
}
body.ui-v3 .v3-notif-tab {
  padding: 6px 12px; background: transparent; border: 1px solid #1F2330;
  border-radius: 999px; color: #A8B0C2; font-size: 12px; cursor: pointer;
}
body.ui-v3 .v3-notif-tab.on { background: #D4A93A; color: #1A1305; border-color: #D4A93A; }
body.ui-v3 .v3-notif-list { flex: 1; overflow-y: auto; padding: 8px; }
body.ui-v3 .v3-notif-item {
  padding: 12px 14px; border-radius: 10px; margin-bottom: 4px;
  background: #161922; border: 1px solid #1F2330;
}
body.ui-v3 .v3-notif-item.unread { border-color: rgba(212,169,58,.35); background: rgba(212,169,58,.04); }
body.ui-v3 .v3-notif-title {
  font-size: 13px; font-weight: 600; color: #F0F2F7;
  display: flex; align-items: center; gap: 6px;
}
body.ui-v3 .v3-notif-dot-i { width: 6px; height: 6px; border-radius: 50%; background: #FF4D54; }
body.ui-v3 .v3-notif-body { font-size: 12px; color: #A8B0C2; margin-top: 4px; line-height: 1.45; }
body.ui-v3 .v3-notif-ts { font-size: 10px; color: #6C7588; margin-top: 4px; }
body.ui-v3 .v3-notif-loading,
body.ui-v3 .v3-notif-empty {
  text-align: center; padding: 30px 16px; color: #6C7588; font-size: 13px;
}

@media (min-width: 1024px) {
  body.ui-v3 .v3-sidebar {
    position: fixed; left: 0; top: 70px; bottom: 0;
    width: 64px; background: #0F1117;
    border-right: 1px solid #1E222D;
    padding: 14px 8px; z-index: 30;
    overflow-y: auto; scrollbar-width: none;
    transition: width .2s;
  }
  body.ui-v3 .v3-sidebar::-webkit-scrollbar { display: none; }
  body.ui-v3 .v3-sidebar:hover { width: 220px; }
  body.ui-v3 .v3-sb-group { margin-bottom: 16px; }
  body.ui-v3 .v3-sb-title {
    font-size: 10px; font-weight: 700; color: #454C5F;
    text-transform: uppercase; letter-spacing: .08em;
    padding: 0 10px 6px; display: none;
  }
  body.ui-v3 .v3-sidebar:hover .v3-sb-title { display: block; }
  body.ui-v3 .v3-sb-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: 8px; cursor: pointer;
    color: #A8B0C2; font-size: 13px; font-weight: 500;
    position: relative; margin-bottom: 1px;
    white-space: nowrap; overflow: hidden;
  }
  body.ui-v3 .v3-sb-item:hover { background: #161922; color: #F0F2F7; }
  body.ui-v3 .v3-sb-item.on { background: #161922; color: #F0F2F7; }
  body.ui-v3 .v3-sb-item.on::before {
    content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px;
    width: 3px; background: #D4A93A; border-radius: 0 2px 2px 0;
  }
  body.ui-v3 .v3-sb-item .ic {
    width: 18px; height: 18px; display: flex; align-items: center;
    justify-content: center; font-size: 16px; flex-shrink: 0;
  }
  body.ui-v3 .v3-sb-item.on .ic { color: #D4A93A; }
  body.ui-v3 .v3-sb-item .lab { display: none; }
  body.ui-v3 .v3-sidebar:hover .v3-sb-item .lab { display: block; }
  body.ui-v3 #bs-container { padding-left: 88px !important; }
}

@media (min-width: 1280px) {
  body.ui-v3 .v3-rightrail {
    position: fixed; right: 0; top: 70px; bottom: 0;
    width: 340px; background: #0F1117;
    border-left: 1px solid #1E222D;
    padding: 16px; z-index: 30;
    overflow-y: auto; scrollbar-width: thin;
  }
  body.ui-v3 .v3-rightrail::-webkit-scrollbar { width: 4px; }
  body.ui-v3 .v3-rightrail::-webkit-scrollbar-thumb { background: #1B202B; border-radius: 2px; }
  body.ui-v3 .v3-rr-card {
    background: #141821; border: 1px solid #1E222D;
    border-radius: 12px; padding: 14px; margin-bottom: 14px;
  }
  body.ui-v3 .v3-rr-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
  }
  body.ui-v3 .v3-rr-head h4 { margin: 0; font-size: 13px; font-weight: 700; color: #F0F2F7; }
  body.ui-v3 .v3-rr-meta { font-size: 10px; color: #6C7588; }
  body.ui-v3 .v3-rr-row {
    display: grid; grid-template-columns: 28px 1fr auto;
    align-items: center; padding: 7px 0; font-size: 12px;
    border-bottom: 1px solid #1B202B;
  }
  body.ui-v3 .v3-rr-row:last-child { border-bottom: none; }
  body.ui-v3 .v3-rr-rank { color: #6C7588; font-weight: 700; }
  body.ui-v3 .v3-rr-name { color: #F0F2F7; font-weight: 500; }
  body.ui-v3 .v3-rr-amt {
    color: #D4A93A; font-weight: 700;
    font-family: "JetBrains Mono", monospace;
  }
  body.ui-v3 .v3-rr-tx-row {
    display: grid; grid-template-columns: 60px 1fr auto;
    gap: 8px; padding: 6px 0; font-size: 11px;
    border-bottom: 1px solid #1B202B;
  }
  body.ui-v3 .v3-rr-tx-row:last-child { border-bottom: none; }
  body.ui-v3 .v3-rr-tx-user { color: #F0F2F7; font-weight: 600; }
  body.ui-v3 .v3-rr-tx-game { color: #A8B0C2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.ui-v3 .v3-rr-tx-amt {
    font-family: "JetBrains Mono", monospace; font-weight: 700; color: #FF4D54;
  }
  body.ui-v3 .v3-rr-tx-row.win .v3-rr-tx-amt { color: #3DD68C; }
  body.ui-v3 #bs-container { padding-right: 358px !important; }
}

/* ═════════════════════════════════════════════════════════════════ */
/* v3 Game Modal Redesign (2026-05-12) — Transfer & Lobby unified    */
/* 8px grid · semantic tokens · JetBrains Mono for amounts            */
/* ═════════════════════════════════════════════════════════════════ */
body.ui-v3 {
  --bsm-s1: 8px;  --bsm-s2: 16px; --bsm-s3: 24px; --bsm-s4: 32px;
  --bsm-bg:        #06080f;
  --bsm-surface:   #11172a;
  --bsm-elevated:  #1a2138;
  --bsm-overlay:   rgba(255,255,255,0.04);
  --bsm-overlay-2: rgba(255,255,255,0.08);
  --bsm-border:    rgba(255,255,255,0.08);
  --bsm-border-2:  rgba(255,255,255,0.14);
  --bsm-text:      #f1f4fa;
  --bsm-text-2:    #9da4b8;
  --bsm-text-3:    #6b7280;
  --bsm-text-4:    #4b5563;
  --bsm-r-sm:  8px;  --bsm-r-md: 12px; --bsm-r-lg: 16px; --bsm-r-pill: 999px;
  --bsm-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}

body.ui-v3 .bs3-modal[data-brand="918"]     { --bsm-brand: #ef4444; --bsm-brand-2: #fbbf24; --bsm-brand-soft: rgba(239,68,68,0.08); --bsm-brand-glow: rgba(239,68,68,0.25); }
body.ui-v3 .bs3-modal[data-brand="pg"]      { --bsm-brand: #8b5cf6; --bsm-brand-2: #a855f7; --bsm-brand-soft: rgba(139,92,246,0.08); --bsm-brand-glow: rgba(139,92,246,0.25); }
body.ui-v3 .bs3-modal[data-brand="jili"]    { --bsm-brand: #f59e0b; --bsm-brand-2: #fbbf24; --bsm-brand-soft: rgba(245,158,11,0.08); --bsm-brand-glow: rgba(245,158,11,0.25); }
body.ui-v3 .bs3-modal[data-brand="pussy"]   { --bsm-brand: #ec4899; --bsm-brand-2: #f472b6; --bsm-brand-soft: rgba(236,72,153,0.08); --bsm-brand-glow: rgba(236,72,153,0.25); }
body.ui-v3 .bs3-modal[data-brand="mega"]    { --bsm-brand: #ef4444; --bsm-brand-2: #fbbf24; --bsm-brand-soft: rgba(239,68,68,0.08); --bsm-brand-glow: rgba(239,68,68,0.25); }
body.ui-v3 .bs3-modal[data-brand="spade"]   { --bsm-brand: #dc2626; --bsm-brand-2: #f87171; --bsm-brand-soft: rgba(220,38,38,0.08); --bsm-brand-glow: rgba(220,38,38,0.25); }

body.ui-v3 .bs3-modal {
  max-width: 460px; width: 96%;
  background: var(--bsm-bg);
  border: 1px solid var(--bsm-border-2);
  border-radius: 20px;
  padding: var(--bsm-s3);
  color: var(--bsm-text);
  font-family: "Inter", "SF Pro Text", system-ui, sans-serif;
  display: flex; flex-direction: column;
  gap: var(--bsm-s3);
  max-height: 92vh;
  overflow-y: auto;
}
@media (max-width: 480px) {
  body.ui-v3 .bs3-modal { width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; padding: var(--bsm-s2); gap: var(--bsm-s2); }
}
body.ui-v3 .bs3-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--bsm-border-2); margin: 0 auto; }

body.ui-v3 .bs3-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bsm-s2); }
body.ui-v3 .bs3-brand { display: flex; align-items: center; gap: var(--bsm-s2); }
body.ui-v3 .bs3-brand-mark { width: 40px; height: 40px; border-radius: var(--bsm-r-md); background: linear-gradient(135deg, var(--bsm-brand) 0%, var(--bsm-brand-2) 100%); display: grid; place-items: center; font-size: 18px; font-weight: 800; color: #fff; box-shadow: 0 0 20px var(--bsm-brand-glow); }
body.ui-v3 .bs3-brand-title { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.2; }
body.ui-v3 .bs3-brand-subtitle { font-size: 12px; color: var(--bsm-text-2); margin-top: 2px; }
body.ui-v3 .bs3-close { width: 32px; height: 32px; background: var(--bsm-overlay); border: 1px solid var(--bsm-border); border-radius: 50%; color: var(--bsm-text-2); cursor: pointer; display: grid; place-items: center; font-size: 16px; padding: 0; line-height: 1; transition: background 0.15s; }
body.ui-v3 .bs3-close:hover { background: var(--bsm-overlay-2); color: var(--bsm-text); }

body.ui-v3 .bs3-hero { background: linear-gradient(135deg, var(--bsm-brand-soft) 0%, rgba(0,0,0,0) 100%); border: 1px solid var(--bsm-brand-glow); border-radius: var(--bsm-r-lg); padding: var(--bsm-s3); position: relative; overflow: hidden; }
body.ui-v3 .bs3-hero::before { content: ""; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; background: radial-gradient(circle, var(--bsm-brand-glow) 0%, transparent 70%); pointer-events: none; }
body.ui-v3 .bs3-hero-label { font-size: 12px; font-weight: 500; color: var(--bsm-text-2); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: var(--bsm-s1); display: flex; align-items: center; gap: 6px; }
body.ui-v3 .bs3-hero-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bsm-brand); box-shadow: 0 0 8px var(--bsm-brand); animation: bs3-pulse 2s infinite; }
@keyframes bs3-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
body.ui-v3 .bs3-hero-amount { font-family: var(--bsm-font-mono); font-size: 36px; font-weight: 700; color: var(--bsm-text); letter-spacing: -1px; line-height: 1.1; }
body.ui-v3 .bs3-hero-amount .currency { font-size: 18px; color: var(--bsm-text-2); margin-right: 6px; font-weight: 500; }
body.ui-v3 .bs3-hero-actions { display: flex; gap: var(--bsm-s1); margin-top: var(--bsm-s2); }
body.ui-v3 .bs3-chip { padding: 6px 12px; background: var(--bsm-overlay); border: 1px solid var(--bsm-border); border-radius: var(--bsm-r-pill); color: var(--bsm-text-2); font-size: 12px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all 0.15s; }
body.ui-v3 .bs3-chip:hover { background: var(--bsm-overlay-2); color: var(--bsm-text); }

body.ui-v3 .bs3-segment { background: var(--bsm-surface); border-radius: var(--bsm-r-md); padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border: 1px solid var(--bsm-border); }
body.ui-v3 .bs3-seg-btn { padding: var(--bsm-s1) var(--bsm-s2); border: none; background: transparent; color: var(--bsm-text-2); font-family: inherit; font-size: 13px; font-weight: 600; border-radius: var(--bsm-r-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; }
body.ui-v3 .bs3-seg-btn.active { background: linear-gradient(135deg, var(--bsm-brand) 0%, var(--bsm-brand-2) 100%); color: white; box-shadow: 0 2px 8px var(--bsm-brand-glow); }

body.ui-v3 .bs3-form { display: flex; flex-direction: column; gap: var(--bsm-s2); }
body.ui-v3 .bs3-field-label { font-size: 12px; font-weight: 600; color: var(--bsm-text-2); display: flex; justify-content: space-between; align-items: center; }
body.ui-v3 .bs3-field-label .hint { color: var(--bsm-text-3); font-weight: 400; }
body.ui-v3 .bs3-input-wrap { position: relative; background: var(--bsm-surface); border: 1px solid var(--bsm-border); border-radius: var(--bsm-r-md); transition: border-color 0.15s, box-shadow 0.15s; }
body.ui-v3 .bs3-input-wrap:focus-within { border-color: var(--bsm-brand); box-shadow: 0 0 0 3px var(--bsm-brand-soft); }
body.ui-v3 .bs3-input-prefix { position: absolute; left: var(--bsm-s2); top: 50%; transform: translateY(-50%); color: var(--bsm-text-3); font-weight: 500; font-family: var(--bsm-font-mono); font-size: 14px; pointer-events: none; }
body.ui-v3 .bs3-input { width: 100%; padding: 14px var(--bsm-s2) 14px 44px; background: transparent; border: none; outline: none; font-family: var(--bsm-font-mono); font-size: 18px; font-weight: 600; color: var(--bsm-text); }
body.ui-v3 .bs3-input::placeholder { color: var(--bsm-text-4); }
body.ui-v3 .bs3-quick-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bsm-s1); }
body.ui-v3 .bs3-quick { padding: 10px; background: var(--bsm-surface); border: 1px solid var(--bsm-border); border-radius: var(--bsm-r-sm); color: var(--bsm-text-2); font-family: var(--bsm-font-mono); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
body.ui-v3 .bs3-quick:hover { border-color: var(--bsm-brand); color: var(--bsm-text); }
body.ui-v3 .bs3-quick.selected { background: var(--bsm-brand-soft); border-color: var(--bsm-brand); color: var(--bsm-brand); }

body.ui-v3 .bs3-cta-bar { margin-top: auto; display: flex; flex-direction: column; gap: var(--bsm-s1); padding-top: var(--bsm-s2); border-top: 1px solid var(--bsm-border); }
body.ui-v3 .bs3-cta-primary { width: 100%; padding: 16px; background: linear-gradient(135deg, var(--bsm-brand) 0%, var(--bsm-brand-2) 100%); border: none; border-radius: var(--bsm-r-md); color: white; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px -8px var(--bsm-brand-glow); display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.1s; }
body.ui-v3 .bs3-cta-primary:active { transform: scale(0.98); }
body.ui-v3 .bs3-cta-primary:disabled { opacity: 0.5; cursor: not-allowed; }
body.ui-v3 .bs3-cta-secondary { width: 100%; padding: 14px; background: var(--bsm-overlay); border: 1px solid var(--bsm-border-2); border-radius: var(--bsm-r-md); color: var(--bsm-text); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.15s; }
body.ui-v3 .bs3-cta-secondary:hover { background: var(--bsm-overlay-2); }
body.ui-v3 .bs3-cta-hint { font-size: 11px; color: var(--bsm-text-3); text-align: center; line-height: 1.5; }

body.ui-v3 .bs3-modal-lobby { max-width: 720px; padding: 0; gap: 0; }
@media (max-width: 480px) { body.ui-v3 .bs3-modal-lobby { padding: 0; } }
body.ui-v3 .bs3-lobby-top { padding: var(--bsm-s3); background: linear-gradient(180deg, var(--bsm-brand-soft) 0%, transparent 100%); border-bottom: 1px solid var(--bsm-border); }
@media (max-width: 480px) { body.ui-v3 .bs3-lobby-top { padding: var(--bsm-s2); } }
body.ui-v3 .bs3-lobby-wallet { display: flex; align-items: center; justify-content: space-between; padding: var(--bsm-s2); background: var(--bsm-surface); border: 1px solid var(--bsm-border); border-radius: var(--bsm-r-md); margin-top: var(--bsm-s3); }
body.ui-v3 .bs3-lobby-wallet .label { font-size: 12px; color: var(--bsm-text-2); display: flex; align-items: center; gap: 6px; }
body.ui-v3 .bs3-lobby-wallet .amt { font-family: var(--bsm-font-mono); font-size: 18px; font-weight: 700; color: var(--bsm-brand); }
body.ui-v3 .bs3-lobby-wallet .amt .currency { font-size: 12px; color: var(--bsm-text-3); margin-right: 4px; font-weight: 500; }

body.ui-v3 .bs3-search-wrap { position: relative; margin-top: var(--bsm-s2); }
body.ui-v3 .bs3-search-icon { position: absolute; left: var(--bsm-s2); top: 50%; transform: translateY(-50%); color: var(--bsm-text-3); pointer-events: none; }
body.ui-v3 .bs3-search { width: 100%; padding: 12px var(--bsm-s2) 12px 40px; background: var(--bsm-surface); border: 1px solid var(--bsm-border); border-radius: var(--bsm-r-md); color: var(--bsm-text); font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.15s; }
body.ui-v3 .bs3-search:focus { border-color: var(--bsm-brand); }
body.ui-v3 .bs3-search::placeholder { color: var(--bsm-text-3); }

body.ui-v3 .bs3-filters { display: flex; gap: var(--bsm-s1); overflow-x: auto; padding: var(--bsm-s2) 0 4px; -webkit-overflow-scrolling: touch; }
body.ui-v3 .bs3-filters::-webkit-scrollbar { display: none; }
body.ui-v3 .bs3-filter { flex-shrink: 0; padding: 6px 14px; background: var(--bsm-surface); border: 1px solid var(--bsm-border); border-radius: var(--bsm-r-pill); color: var(--bsm-text-2); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; }
body.ui-v3 .bs3-filter.active { background: var(--bsm-brand); border-color: var(--bsm-brand); color: white; }
body.ui-v3 .bs3-filter .count { opacity: 0.7; margin-left: 4px; }

body.ui-v3 .bs3-grid-wrap { padding: var(--bsm-s3); overflow-y: auto; flex: 1; }
@media (max-width: 480px) { body.ui-v3 .bs3-grid-wrap { padding: var(--bsm-s2); } }
body.ui-v3 .bs3-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bsm-s2); }
@media (min-width: 600px) { body.ui-v3 .bs3-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { body.ui-v3 .bs3-grid { grid-template-columns: repeat(4, 1fr); } }
body.ui-v3 .bs3-game { border-radius: var(--bsm-r-md); overflow: hidden; position: relative; cursor: pointer; background: var(--bsm-surface); border: 1px solid var(--bsm-border); transition: transform 0.15s, border-color 0.15s; display: flex; flex-direction: column; }
body.ui-v3 .bs3-game:active { transform: scale(0.97); }
body.ui-v3 .bs3-game:hover { border-color: var(--bsm-brand); }
body.ui-v3 .bs3-game-thumb { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, #2a1f4d 0%, #4d2f3a 100%); background-size: cover; background-position: center; display: grid; place-items: center; font-size: 40px; }
body.ui-v3 .bs3-game-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.ui-v3 .bs3-game-info { padding: 8px 10px; background: var(--bsm-elevated); display: flex; flex-direction: column; justify-content: center; }
body.ui-v3 .bs3-game-name { font-size: 12px; font-weight: 600; color: var(--bsm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-v3 .bs3-game-meta { font-size: 10px; color: var(--bsm-text-3); margin-top: 2px; }
body.ui-v3 .bs3-badge { position: absolute; top: 6px; right: 6px; padding: 2px 6px; background: #ef4444; color: white; border-radius: var(--bsm-r-pill); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(239,68,68,0.4); }
body.ui-v3 .bs3-badge.new { background: #10b981; box-shadow: 0 2px 8px rgba(16,185,129,0.4); }

body.ui-v3 .bs3-lobby-custom { padding: var(--bsm-s2) var(--bsm-s3); background: var(--bsm-surface); border-top: 1px solid var(--bsm-border); display: flex; align-items: center; gap: var(--bsm-s1); }
body.ui-v3 .bs3-lobby-custom .lbl { font-size: 12px; color: var(--bsm-text-2); display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
body.ui-v3 .bs3-lobby-custom input { flex: 1; padding: 8px var(--bsm-s2); background: var(--bsm-bg); border: 1px solid var(--bsm-border); border-radius: var(--bsm-r-sm); color: var(--bsm-text); font-family: var(--bsm-font-mono); font-size: 13px; outline: none; }
body.ui-v3 .bs3-lobby-custom button { padding: 8px var(--bsm-s2); background: var(--bsm-brand); border: none; border-radius: var(--bsm-r-sm); color: white; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }

/* ════════════════════════════════════════════════════════════════════ */
/* 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);
}

body.ui-v3 .bs3-modal[data-brand="gold"] { --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); --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); }

/* ════════════════════════════════════════════════════════════════════ */
/* 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);
}

/* Force visitor features grid always visible (override .reveal opacity:0) */
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;
}