/* ============================================================
   VegasBet — Profile / Dashboard CSS
   Redesign (Claude Design "VegasBet Profile") translated to
   external classes. No blue, no inline styles, no frameworks.
   Purple accents + green/gold status only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ── Profile page background (glow) ─────────────────────────── */
body[class*="page-profile"] {
  background:
    radial-gradient(1200px 520px at 50% -12%, rgba(124, 58, 237, 0.14), transparent 70%),
    radial-gradient(900px 500px at 92% 0%, rgba(153, 0, 153, 0.10), transparent 60%),
    var(--bg-primary);
  background-attachment: fixed;
}

/* ── Local design tokens (scoped to profile) ────────────────── */
.profile-layout {
  --pf-panel:          linear-gradient(180deg, #1c1c22, #161619);
  --pf-border:         rgba(124, 58, 237, 0.18);
  --pf-border-strong:  rgba(168, 85, 247, 0.40);
  --pf-radius:         20px;
  --pf-radius-sm:      13px;
  --pf-idle:           #8f88a3;
  --pf-muted:          #7a7488;
  --pf-field:          #111114;
  --pf-lilac:          #c084fc;
  --pf-heading:        'Space Grotesk', 'Inter', sans-serif;

  font-family: 'Manrope', 'Inter', sans-serif;
}

/* ── Layout ─────────────────────────────────────────────────── */
.profile-layout {
  display: flex;
  gap: 28px;
  max-width: 1300px;
  margin: 34px auto;
  padding: 0 28px;
  align-items: flex-start;
}

.profile-content {
  flex: 1;
  min-width: 0;
  animation: pfFadeUp 0.5s cubic-bezier(.16, 1, .3, 1);
}

.profile-title {
  font-family: var(--pf-heading);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 28px;
  text-shadow: 0 0 30px rgba(168, 85, 247, .25);
}

@keyframes pfFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pfPulseGlow {
  0%, 100% { box-shadow: 0 0 22px rgba(168, 85, 247, .35), 0 8px 24px rgba(124, 58, 237, .35); }
  50%      { box-shadow: 0 0 34px rgba(168, 85, 247, .60), 0 8px 30px rgba(124, 58, 237, .50); }
}
@keyframes pfFloatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── Sidebar ────────────────────────────────────────────────── */
.profile-sidebar-nav {
  width: 300px;
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.psb-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 22px 20px;
  background: var(--pf-panel);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid rgba(124, 58, 237, 0.12);
  margin-bottom: -18px; /* fuse with nav card below */
}

.psb-avatar {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pf-heading);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(168, 85, 247, .45);
}

.psb-avatar-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid #161619;
  box-shadow: 0 0 8px var(--green);
}

.psb-user-info {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.psb-username {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}

.psb-email {
  font-size: 13px;
  color: var(--pf-idle);
  margin-top: 1px;
}

.psb-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 34px 22px 22px;
  background: var(--pf-panel);
  border: 1px solid var(--pf-border);
  border-top: none;
  border-radius: 0 0 var(--pf-radius) var(--pf-radius);
}

.psb-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 15px;
  border: 1px solid transparent;
  border-radius: var(--pf-radius-sm);
  background: transparent;
  color: var(--pf-idle);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .28s cubic-bezier(.4, 0, .2, 1), color .28s, border-color .28s, box-shadow .28s;
}

.psb-nav-link:hover {
  background: rgba(124, 58, 237, 0.08);
  color: #fff;
}

.psb-nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.30), rgba(168, 85, 247, 0.05));
  border-color: var(--pf-border-strong);
  box-shadow: 0 0 24px rgba(168, 85, 247, .22), inset 0 0 18px rgba(168, 85, 247, .06);
}

.psb-nav-link.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 24%;
  bottom: 24%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(#c084fc, #7c3aed);
  box-shadow: 0 0 12px var(--accent);
}

.psb-nav-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 1;
}

/* Section switch — MOBILE ONLY (see the ≤768px block at the end of
   this file). Hidden everywhere else, so the desktop sidebar keeps
   the avatar card fused straight onto the nav card by the -18px on
   .psb-avatar-row: a display:none flex item takes no gap. */
.psb-nav-toggle { display: none; }

/* Support block */
.psb-support {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.10), rgba(28, 28, 34, 0.60));
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: var(--pf-radius);
  padding: 22px;
}

.psb-support-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.psb-support-subtitle {
  font-size: 13.5px;
  color: var(--pf-idle);
  line-height: 1.5;
  margin-bottom: 16px;
}

.psb-support-btn {
  width: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.40);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .22s, box-shadow .22s;
}

.psb-support-btn:hover {
  background: rgba(124, 58, 237, 0.24);
  box-shadow: 0 0 20px rgba(168, 85, 247, .25);
}

.psb-support-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* ── Shared panel card ──────────────────────────────────────── */
.p-card {
  background: var(--pf-panel);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding: 26px;
}

/* ── Section header ─────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 38px 0 20px;
}

.section-header-title {
  font-family: var(--pf-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .8px;
  color: #fff;
  text-transform: uppercase;
}

.section-header svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ════════════════════════════════════════════════════════════
   PAGE 1 — PROFILE / DASHBOARD
   ════════════════════════════════════════════════════════════ */

.profile-top-row {
  display: flex;
  gap: 22px;
  margin-bottom: 8px;
  align-items: stretch;
}

/* Balance card */
.profile-balance-card {
  flex: 1;
  min-width: 0;
  padding: 30px;
}

.profile-balance-email {
  font-size: 14px;
  color: var(--pf-idle);
  margin-bottom: 22px;
  /* A real address can be far longer than the card on a phone, and an
     email has no break opportunity of its own. break-word first for
     browsers that do not know `anywhere`. */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

.balance-label-sm {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--pf-muted);
  margin-bottom: 6px;
}

.balance-big {
  font-family: var(--pf-heading);
  font-size: 52px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 26px;
  display: flex;
  align-items: baseline;
}

.balance-big .balance-cents {
  font-size: 30px;
  font-weight: 600;
  color: #9a94a8;
}

.profile-balance-btns {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.profile-deposit-btn,
.profile-withdraw-btn {
  flex: 1;
  padding: 15px;
  border-radius: var(--pf-radius-sm);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s, box-shadow .2s, background .2s;
}

.profile-deposit-btn {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border: none;
  color: #fff;
  box-shadow: 0 6px 22px rgba(124, 58, 237, .40);
}

.profile-deposit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(168, 85, 247, .60);
}

.profile-withdraw-btn {
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.35);
  color: var(--text-primary);
}

.profile-withdraw-btn:hover {
  background: rgba(124, 58, 237, 0.18);
  box-shadow: 0 0 20px rgba(168, 85, 247, .20);
}

.profile-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--pf-idle);
  cursor: pointer;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}

.profile-logout-btn:hover {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, .30);
}

.profile-logout-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Side cards column */
.profile-side-cards {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* KYC mini card */
.kyc-mini-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px;
  background: var(--pf-panel);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  text-decoration: none;
}

.kyc-mini-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .40);
}

.kyc-mini-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kyc-mini-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--red);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* verified variant (green) — apply .verified on the card */
.kyc-mini-card.verified {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), #161619);
  border-color: rgba(16, 185, 129, 0.28);
}
.kyc-mini-card.verified .kyc-mini-icon {
  background: rgba(16, 185, 129, 0.15);
}
.kyc-mini-card.verified .kyc-mini-icon svg {
  stroke: var(--green);
}

.kyc-mini-info {
  flex: 1;
  min-width: 0;
}

.kyc-mini-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--pf-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 2px;
}

.kyc-mini-status {
  font-size: 17px;
  font-weight: 800;
  color: var(--red);
}

.kyc-mini-status.verified {
  color: var(--green);
}

.kyc-mini-arrow {
  color: #6f6980;
  font-size: 18px;
  flex-shrink: 0;
}

/* Rakeback mini card */
.rakeback-mini-card {
  padding: 22px;
  background: var(--pf-panel);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
}

.rakeback-mini-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--pf-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
}

.rakeback-mini-amount {
  font-family: var(--pf-heading);
  font-size: 30px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 14px;
}

.rakeback-mini-btn {
  width: 100%;
  padding: 11px;
  border: 1px solid rgba(16, 185, 129, 0.30);
  border-radius: 11px;
  background: rgba(16, 185, 129, 0.08);
  color: var(--green);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s;
}

.rakeback-mini-btn:hover {
  background: rgba(16, 185, 129, 0.16);
}

/* Active Bonuses grid */
.bonus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.bonus-empty-card {
  grid-column: 1 / -1;
  background: var(--pf-panel);
  border: 1px solid var(--pf-border);
  border-radius: 18px;
  padding: 44px 24px;
  text-align: center;
}

.bonus-empty-text {
  color: var(--pf-idle);
  font-size: 14px;
  margin-bottom: 16px;
}

.bonus-card {
  background: var(--pf-panel);
  border: 1px solid rgba(124, 58, 237, 0.20);
  border-radius: 18px;
  padding: 22px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}

.bonus-card:hover {
  transform: translateY(-3px);
  border-color: var(--pf-border-strong);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .40);
}

.bonus-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.bonus-card-emoji {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.bonus-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.bonus-desc {
  font-size: 13px;
  color: var(--pf-idle);
  margin-bottom: 16px;
}

.bonus-progress-track {
  height: 7px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 8px;
}

.bonus-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #a855f7, #7c3aed);
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(168, 85, 247, .50);
  transition: width 0.4s ease;
}

.bonus-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--pf-muted);
}

/* ════════════════════════════════════════════════════════════
   PAGES 2 & 3 — DEPOSIT / WITHDRAW
   ════════════════════════════════════════════════════════════ */

.dw-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 22px;
  align-items: flex-start;
}

.dw-left {
  min-width: 0;
}

.dw-right {
  min-width: 0;
}

.dw-step {
  margin-bottom: 22px;
}

.dw-step-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--pf-muted);
  margin-bottom: 14px;
}

/* Method toggle buttons */
.dw-method-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dw-method-btn {
  position: relative;
  padding: 22px;
  background: rgba(255, 255, 255, 0.015);
  border: 1.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .22s, background .22s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.dw-method-btn.active {
  border-color: rgba(168, 85, 247, 0.55);
  background: rgba(124, 58, 237, 0.10);
  box-shadow: 0 0 26px rgba(168, 85, 247, .18), inset 0 0 22px rgba(168, 85, 247, .05);
}

.dw-method-btn.active::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow: 0 0 12px rgba(168, 85, 247, .60);
}

.dw-method-btn:hover:not(.coming-soon):not(.active) {
  border-color: rgba(124, 58, 237, 0.40);
}

.dw-method-btn.coming-soon {
  opacity: .55;
  cursor: not-allowed;
}

.dw-method-label {
  font-family: var(--pf-heading);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .5px;
}

.dw-method-btn.coming-soon .dw-method-label {
  color: var(--pf-muted);
}

.dw-method-icons {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.dw-method-icon-pill {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #c9c3d8;
}

.dw-method-btn.coming-soon .dw-method-icon-pill {
  background: rgba(255, 255, 255, 0.04);
  color: #6f6980;
}

.dw-coming-soon-overlay {
  position: static;
  background: none;
  display: block;
}

.dw-coming-soon-badge {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Method logos (coins + card brands) */
.dw-method-panel[hidden] { display: none !important; }

.dw-method-logos {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
}

.dw-coin-logo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dw-more-coins {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
}

.dw-card-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dw-card-logo svg { display: block; }

.dw-card-logo--visa {
  font-family: var(--pf-heading, 'Inter'), sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .5px;
  color: #f0eeff;
}

/* Crypto dropdown */
.dw-crypto-coin-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(245, 158, 11, .30);
}

.dw-crypto-select {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--pf-field);
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s;
}

.dw-crypto-select:hover {
  border-color: var(--pf-border-strong);
}

.dw-crypto-icon {
  width: 38px;
  height: 38px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #2a1c02;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(245, 158, 11, .40);
}

.dw-crypto-name {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.dw-crypto-ticker {
  font-size: 13px;
  font-weight: 700;
  color: var(--pf-idle);
}

.dw-crypto-arrow {
  color: var(--pf-muted);
  font-size: 11px;
  transition: transform .2s;
}

/* Crypto picker dropdown */
.dw-crypto-picker {
  position: relative;
}

.dw-crypto-select.open {
  border-color: rgba(168, 85, 247, .55);
}

.dw-crypto-select.open .dw-crypto-arrow {
  transform: rotate(180deg);
}

.dw-crypto-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: #1a1a20;
  border: 1px solid rgba(124, 58, 237, 0.30);
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6);
  animation: dwMenuIn .16s ease;
}

.dw-crypto-menu[hidden] { display: none; }

@keyframes dwMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dw-crypto-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 13px;
  border-radius: 10px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background .16s;
}

.dw-crypto-option:hover {
  background: rgba(124, 58, 237, 0.14);
}

.dw-crypto-option.selected {
  background: rgba(124, 58, 237, 0.20);
}

.dw-crypto-option img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dw-crypto-option-name {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.dw-crypto-option-ticker {
  font-size: 13px;
  font-weight: 700;
  color: var(--pf-idle);
}

/* Right column card */
.dw-right-card {
  background: var(--pf-panel);
  border: 1px solid rgba(124, 58, 237, 0.20);
  border-radius: var(--pf-radius);
  padding: 24px;
}

.dw-right-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.12);
}

.dw-right-card-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  flex: 1;
}

.dw-selected-badge {
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.30);
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 800;
  color: var(--pf-lilac);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.dw-right-card-body {
  padding: 0;
}

/* Address row (kept for parity) */
.dw-payment-step-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--pf-muted);
  margin-bottom: 9px;
}

.dw-address-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pf-field);
  border: 1px solid rgba(124, 58, 237, 0.20);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.dw-address-text {
  flex: 1;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12.5px;
  color: #c9c3d8;
  word-break: break-all;
  min-width: 0;
}

.dw-copy-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(124, 58, 237, 0.30);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
}

.dw-copy-btn:hover {
  background: rgba(124, 58, 237, 0.22);
}

.dw-copy-btn svg {
  width: 15px;
  height: 15px;
  stroke: var(--pf-lilac);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dw-info-text {
  font-size: 13px;
  color: var(--pf-idle);
  line-height: 1.5;
  margin-bottom: 16px;
}

.dw-info-rows {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.dw-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.dw-info-row:first-child {
  border-top: none;
}

.dw-info-row-label {
  font-size: 13px;
  color: var(--pf-muted);
}

.dw-info-row-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Withdraw inputs */
.dw-input-wrap {
  background: var(--pf-field);
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 11px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color .2s;
}

.dw-input-wrap:focus-within {
  border-color: rgba(168, 85, 247, .55);
}

/* Required field left empty when "Withdraw" is pressed */
.dw-input-wrap.dw-field-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
  animation: dwFieldShake 0.4s ease;
}

@keyframes dwFieldShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.dw-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 15px;
  padding: 13px 0;
}

.dw-input::placeholder {
  color: #5c5668;
}

.dw-input-prefix {
  font-size: 15px;
  font-weight: 700;
  color: var(--pf-muted);
  flex-shrink: 0;
}

.dw-max-btn {
  background: rgba(168, 85, 247, .12);
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  cursor: pointer;
  letter-spacing: .5px;
  transition: background .2s;
}

.dw-max-btn:hover {
  background: rgba(168, 85, 247, .22);
}

.dw-balance-hint {
  font-size: 12px;
  color: var(--pf-idle);
  text-align: right;
  margin-bottom: 9px;
}

.dw-withdraw-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border: none;
  border-radius: var(--pf-radius-sm);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
  animation: pfPulseGlow 3s ease-in-out infinite;
  transition: transform .2s;
}

.dw-withdraw-btn:hover {
  transform: translateY(-2px);
}

/* ── Withdraw button loading state (spinner, ~2.5s before the stub modal) ── */
.dw-withdraw-btn { position: relative; }
.dw-withdraw-spinner { display: none; }
.dw-withdraw-btn.dw-loading { pointer-events: none; opacity: 0.94; }
.dw-withdraw-btn.dw-loading .dw-withdraw-btn-label { visibility: hidden; }
.dw-withdraw-btn.dw-loading .dw-withdraw-spinner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dwSpin 0.6s linear infinite;
}
@keyframes dwSpin { to { transform: rotate(360deg); } }

/* ── Withdraw error plate — same look/animation as the login alert (.aap) ── */
.dw-alert:empty { display: none; }
.dw-alert {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 42px 13px 14px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(255, 50, 80, 0.14), rgba(255, 50, 80, 0.04));
  border: 1px solid rgba(255, 77, 109, 0.33);
  animation: dwAlertIn 0.45s cubic-bezier(0.2, 1.2, 0.3, 1) both,
             dwAlertShake 0.5s ease 0.1s,
             dwAlertGlow 2.4s ease-in-out infinite;
}
.dw-alert-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ff4d6d;
  box-shadow: 0 0 14px #ff4d6d;
}
.dw-alert-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ff4d6d;
  box-shadow: 0 0 18px #ff4d6d;
  animation: dwIconPop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.dw-alert-icon svg { width: 20px; height: 20px; display: block; }
.dw-alert-text {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #ffd0d8;
  line-height: 1.35;
}
.dw-alert-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #ffd0d8;
  opacity: 0.6;
  font-size: 17px;
  line-height: 1;
  border-radius: 6px;
  transition: opacity 0.18s;
}
.dw-alert-close:hover { opacity: 1; }
.dw-alert-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left;
  background: #ff4d6d;
  opacity: 0.8;
  animation: dwAlertBar 5s linear both;
}
@keyframes dwAlertIn {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.97); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dwAlertShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}
@keyframes dwAlertGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 70, 90, 0.35), 0 0 22px rgba(255, 50, 80, 0.20); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 70, 90, 0.55), 0 0 34px rgba(255, 50, 80, 0.42); }
}
@keyframes dwIconPop {
  0%   { transform: scale(0) rotate(-30deg); }
  70%  { transform: scale(1.25) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes dwAlertBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .dw-alert,
  .dw-alert-icon,
  .dw-alert-timer,
  .dw-withdraw-btn.dw-loading .dw-withdraw-spinner { animation: none !important; }
}

/* Test-mode deposit panel (dev only) */
.dw-testmode-panel {
  padding: 20px 0 4px;
}

.dw-testmode-warning {
  font-size: 12px;
  color: var(--pf-idle);
  border: 1px solid var(--pf-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.dw-testmode-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dw-testmode-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pf-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dw-testmode-input {
  width: 100%;
  background: var(--pf-field);
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 11px;
  padding: 12px 15px;
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}

.dw-testmode-input:focus {
  border-color: rgba(168, 85, 247, .55);
}

.dw-testmode-submit {
  align-self: flex-start;
}

.dw-testmode-msg {
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
}

.dw-testmode-msg--ok {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--green);
}

.dw-testmode-msg--error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--red);
}

/* ════════════════════════════════════════════════════════════
   PAGE 4 — BONUSES
   ════════════════════════════════════════════════════════════ */

.promo-code-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, rgba(124, 58, 237, 0.22), rgba(153, 0, 153, 0.12) 60%, rgba(28, 28, 34, 0.60));
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: var(--pf-radius);
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
}

.promo-code-left {
  flex: 1;
  min-width: 0;
}

.promo-code-title {
  font-family: var(--pf-heading);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.promo-code-subtitle {
  font-size: 14px;
  color: #c2bcd0;
  margin-bottom: 20px;
  line-height: 1.4;
}

.promo-code-input-row {
  display: flex;
  gap: 12px;
  max-width: 560px;
}

.promo-code-input {
  flex: 1;
  background: rgba(10, 10, 12, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 12px;
  padding: 14px 18px;
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
}

.promo-code-input::placeholder {
  color: #5c5668;
}

.promo-code-input:focus {
  border-color: rgba(168, 85, 247, .70);
}

.promo-code-activate-btn {
  padding: 14px 30px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(124, 58, 237, .40);
  transition: transform .2s;
}

.promo-code-activate-btn:hover {
  transform: translateY(-2px);
}

.promo-code-decoration {
  width: 110px;
  height: 110px;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.30);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 34px rgba(168, 85, 247, .25);
  animation: pfFloatY 3.5s ease-in-out infinite;
}

.promo-code-decoration svg {
  width: 52px;
  height: 52px;
  stroke: var(--pf-lilac);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Rakeback card */
.rakeback-card {
  background: var(--pf-panel);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding: 30px;
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: flex-start;
}

.rakeback-left {
  min-width: 0;
}

.rakeback-right {
  min-width: 0;
}

.rakeback-stat {
  margin-bottom: 22px;
}

.rakeback-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--pf-muted);
  margin-bottom: 8px;
}

.rakeback-stat-value {
  font-family: var(--pf-heading);
  font-size: 32px;
  font-weight: 700;
  color: #fff;
}

.rakeback-stat:nth-child(2) .rakeback-stat-value {
  color: var(--green);
}

.rakeback-claim-btn {
  padding: 13px 40px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 6px 22px rgba(124, 58, 237, .40);
  transition: transform .2s;
  margin-top: 4px;
}

.rakeback-claim-btn:hover {
  transform: translateY(-2px);
}

.rakeback-percent-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--pf-muted);
  margin-bottom: 6px;
  text-align: right;
}

.rakeback-percent-value {
  font-family: var(--pf-heading);
  font-size: 38px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 18px;
  text-align: right;
  text-shadow: 0 0 22px rgba(168, 85, 247, .40);
}

.rakeback-levels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rakeback-level {
  font-size: 11px;
  font-weight: 600;
  color: #6f6980;
  text-align: center;
}

.rakeback-level.active {
  color: var(--accent);
}

.rakeback-track {
  height: 9px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 14px;
}

.rakeback-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  border-radius: 20px;
  box-shadow: 0 0 14px rgba(168, 85, 247, .60);
}

.rakeback-how-link {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: block;
  text-align: right;
  transition: opacity .2s;
}

.rakeback-how-link:hover {
  opacity: 0.75;
}

.rakeback-msg {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
}

.rakeback-msg--ok {
  color: var(--green);
}

.rakeback-msg--error {
  color: var(--red);
}

.rakeback-claim-btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* ── Refer a Friend — Coming Soon modal ─────────────────────── */
.refer-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 4, 12, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.refer-modal-overlay.active { display: flex; }
.refer-modal {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 34px 30px 30px;
  text-align: center;
  background: linear-gradient(180deg, #201430, #16121d);
  border: 1px solid rgba(168, 85, 247, 0.34);
  border-radius: 20px;
  box-shadow: 0 30px 80px -24px rgba(124, 58, 237, 0.7);
  overflow: hidden;
  animation: referPop .32s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes referPop {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.refer-modal-glow {
  position: absolute;
  top: -70px; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 200px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.4), transparent 70%);
}
.refer-modal-close {
  position: absolute;
  top: 12px; right: 14px;
  width: 30px; height: 30px;
  background: transparent;
  border: none;
  color: var(--pf-muted, #8884aa);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s;
}
.refer-modal-close:hover { color: #fff; }
.refer-modal-icon {
  position: relative;
  width: 68px; height: 68px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #c084fc;
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.4);
  animation: referFloat 3.4s ease-in-out infinite;
}
.refer-modal-icon svg { width: 32px; height: 32px; }
@keyframes referFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.refer-modal-badge {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #d8b4fe;
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.4);
}
.refer-modal-title {
  position: relative;
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  font-family: var(--pf-heading, 'Inter', sans-serif);
}
.refer-modal-text {
  position: relative;
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pf-muted, #8884aa);
}
.refer-modal-btn {
  position: relative;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow: 0 8px 24px -6px rgba(124, 58, 237, 0.6);
  transition: transform .18s, box-shadow .18s;
}
.refer-modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(124, 58, 237, 0.75);
}
@media (prefers-reduced-motion: reduce) {
  .refer-modal, .refer-modal-icon { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   PAGE 5 — VERIFICATION
   ════════════════════════════════════════════════════════════ */

.verification-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  margin-bottom: 28px;
  align-items: flex-start;
}

.verification-stepper-col {
  position: relative;
  min-width: 0;
  padding-left: 8px;
}

.verification-action-col {
  min-width: 0;
}

/* Stepper */
.stepper {
  position: relative;
}

.stepper-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 14px 0;
  z-index: 1;
}

/* ── Connector rail ────────────────────────────────────────────
   One segment per step, drawn from THIS circle's centre to the NEXT one's.
   The old single line was absolutely positioned on .stepper at left:26px /
   top:26px while the circles centre on 19px / 33px — it ran visibly askew and
   poked out past the first and last circle. Anchoring each segment to its own
   step keeps it dead straight at any step height, and lets the rail carry
   progress: the segment leaving a cleared step is lit, the one leaving the
   step you are on fades into the pending rail.
   19px = half of the 38px circle; 33px = 14px step padding + that half.
   height:100% is exactly one step, so the segment lands on the next centre. */
.stepper-step::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 33px;
  height: 100%;
  width: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: rgba(124, 58, 237, 0.16);
  z-index: 0;
}

/* nothing to connect to below the last step */
.stepper-step:last-child::before { display: none; }

.stepper-step.is-done::before {
  background: linear-gradient(180deg, var(--accent), var(--purple));
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.45);
}

.stepper-step.is-current::before {
  background: linear-gradient(180deg, var(--purple), rgba(124, 58, 237, 0.14));
}

.stepper-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1c1c22;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.stepper-circle.current {
  background: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 0 16px rgba(124, 58, 237, .40);
}

.stepper-circle.done {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.40);
  box-shadow: 0 0 16px rgba(16, 185, 129, .28);
}

.stepper-circle svg {
  width: 18px;
  height: 18px;
  stroke: #6f6980;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stepper-circle.current svg {
  stroke: #fff;
}

.stepper-circle.done svg {
  stroke: var(--green);
}

.stepper-body {
  padding-top: 5px;
  flex: 1;
}

.stepper-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.stepper-desc {
  font-size: 13.5px;
  color: var(--pf-idle);
}

.stepper-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-idle);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding-left: 8px;
}

.stepper-note svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

/* Verification action card */
.verification-card {
  background: linear-gradient(160deg, rgba(124, 58, 237, 0.10), #161619);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding: 26px;
}

.verification-card-title {
  font-family: var(--pf-heading);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.verification-card-desc {
  font-size: 14px;
  color: #b7b1c4;
  line-height: 1.6;
  margin-bottom: 20px;
}

.verification-card-btns {
  display: flex;
  gap: 12px;
}

.verification-deposit-btn,
.verification-support-btn {
  flex: 1;
  padding: 13px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s, background .2s;
}

.verification-deposit-btn {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border: none;
  color: #fff;
}

.verification-deposit-btn:hover {
  transform: translateY(-2px);
}

.verification-support-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-primary);
}

.verification-support-btn:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* Verification bottom banner */
.verification-banner {
  background: linear-gradient(120deg, rgba(124, 58, 237, 0.14), rgba(28, 28, 34, 0.60));
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 18px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.verification-banner-text {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.verification-banner-sub {
  font-size: 14px;
  color: #b7b1c4;
}

.verification-livesupport-btn {
  padding: 13px 26px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(124, 58, 237, .40);
  transition: transform .2s;
  flex-shrink: 0;
}

.verification-livesupport-btn:hover {
  transform: translateY(-2px);
}

/* Verification step panels */
.verification-panel[hidden] { display: none !important; }

.verif-hero-card {
  min-height: 470px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 30px;
}

.verif-hero-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  background: radial-gradient(circle at 50% 34%, rgba(124, 58, 237, .30), rgba(124, 58, 237, .05));
  border: 1px solid rgba(124, 58, 237, .38);
}

.verif-hero-icon svg {
  width: 44px;
  height: 44px;
  stroke: #c9b8f5;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.verif-hero-icon--ok {
  background: radial-gradient(circle at 50% 34%, rgba(16, 185, 129, .24), rgba(16, 185, 129, .05));
  border-color: rgba(52, 211, 153, .42);
}

.verif-hero-icon--ok svg { stroke: #34d399; }

/* Nothing cleared yet — the same check badge, greyed out. It only earns the
   green (--ok) once the level-1 deposit lands. */
.verif-hero-icon--idle {
  background: radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border-color: rgba(255, 255, 255, .13);
}

.verif-hero-icon--idle svg { stroke: var(--pf-muted); }

.verif-hero-title {
  font-family: var(--pf-heading);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}

.verif-hero-desc {
  font-size: 14.5px;
  color: #b7b1c4;
  line-height: 1.6;
  max-width: 400px;
  margin-bottom: 24px;
}

.verif-accent { color: var(--gold); font-weight: 800; }

.verif-hero-note {
  font-size: 12.5px;
  color: var(--pf-muted);
  margin-top: 18px;
}

.verif-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(124, 58, 237, .45);
  transition: transform .18s, box-shadow .18s;
}

.verif-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(168, 85, 247, .55);
}

.verif-primary-btn svg { width: 18px; height: 18px; }

.verif-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: pointer;
  transition: background .18s;
}

.verif-secondary-btn:hover { background: rgba(255, 255, 255, .08); }

.verif-cta-row {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 400px;
}

.verif-cta-row .verif-primary-btn,
.verif-cta-row .verif-secondary-btn { flex: 1; }

/* Data-input form */
.verif-form {
  width: 100%;
  max-width: 460px;
  text-align: left;
}

.verif-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.verif-field { display: flex; flex-direction: column; }

.verif-label {
  font-size: 13px;
  font-weight: 700;
  color: #cfc9de;
  margin-bottom: 8px;
}

.verif-input {
  width: 100%;
  padding: 13px 15px;
  border-radius: 11px;
  background: var(--pf-field);
  border: 1px solid rgba(124, 58, 237, .22);
  color: #fff;
  font-size: 14.5px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.verif-input::placeholder { color: #5c5668; }

.verif-input:focus {
  border-color: rgba(168, 85, 247, .55);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .18);
}

.verif-input--error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .16);
  animation: dwFieldShake .4s ease;
}

.verif-form .verif-primary-btn {
  width: 100%;
  margin-top: 6px;
}

/* Processing spinner */
.verif-proc-spinner {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid rgba(124, 58, 237, .18);
  border-top-color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  animation: verifSpin 1.1s linear infinite;
}

.verif-proc-spinner svg {
  width: 42px;
  height: 42px;
  stroke: #c9b8f5;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: verifSpinCounter 1.1s linear infinite;
}

@keyframes verifSpin { to { transform: rotate(360deg); } }
@keyframes verifSpinCounter { to { transform: rotate(-360deg); } }

@media (max-width: 560px) {
  .verif-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   PAGE 6 — SETTINGS
   ════════════════════════════════════════════════════════════ */

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.settings-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--pf-muted);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-bottom: 20px;
}

/* Empty state */
.settings-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0;
}

.settings-empty-icon {
  width: 48px;
  height: 48px;
  background: rgba(124, 58, 237, 0.10);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.settings-empty-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-empty-text {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.settings-empty-sub {
  font-size: 12px;
  color: var(--pf-idle);
  margin-bottom: 14px;
  line-height: 1.4;
}

.settings-empty-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 14px;
  display: block;
}

/* Personal data rows (when populated) */
.settings-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.settings-data-row:first-child {
  border-top: none;
}

.settings-data-label {
  font-size: 13.5px;
  color: var(--pf-idle);
}

.settings-data-value {
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}

/* Password form */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pf-idle);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.settings-field-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 15px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 11px;
  background: var(--pf-field);
  transition: border-color .2s;
}

.settings-field-input-wrap:focus-within {
  border-color: rgba(168, 85, 247, .55);
}

.settings-field-input {
  width: 100%;
  background: none;
  border: none;
  padding: 13px 0;
  color: #fff;
  font-size: 15px;
  outline: none;
}

.settings-field-input[type="password"],
.settings-field-input.has-eye {
  padding-right: 32px;
}

.settings-eye-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pf-muted);
  display: flex;
  align-items: center;
  padding: 0;
  transition: color .2s;
}

.settings-eye-btn:hover {
  color: var(--pf-idle);
}

.settings-eye-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-update-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 6px 22px rgba(124, 58, 237, .40);
  transition: transform .2s;
  margin-top: 6px;
}

.settings-update-btn:hover {
  transform: translateY(-2px);
}

/* VIP card */
.settings-grid .p-card.vip-card {
  background: linear-gradient(150deg, rgba(245, 158, 11, 0.08), #161619);
  border-color: rgba(245, 158, 11, 0.22);
}

.vip-level-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  justify-content: space-between;
}

.vip-level-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pf-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
}

.vip-dot {
  width: 11px;
  height: 11px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 12px var(--gold);
}

.vip-arrow {
  color: #6f6980;
  font-size: 16px;
  text-decoration: none;
  transition: color .2s;
}

.vip-arrow:hover {
  color: var(--accent);
}

.vip-xp-text {
  font-size: 13px;
  color: var(--pf-idle);
  margin-bottom: 8px;
  font-weight: 600;
}

.vip-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 10px;
}

.vip-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(245, 158, 11, .50);
}

.vip-bonus-text {
  font-size: 12.5px;
  color: var(--pf-muted);
}

/* ════════════════════════════════════════════════════════════
   PAGE 7 — TRANSACTIONS / HISTORY
   ════════════════════════════════════════════════════════════ */

.tabs-row {
  display: flex;
  gap: 6px;
  padding: 5px;
  width: fit-content;
  background: rgba(28, 28, 34, 0.60);
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 14px;
  margin-bottom: 24px;
}

.tab-btn {
  padding: 11px 26px;
  background: transparent;
  border: none;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--pf-idle);
  cursor: pointer;
  border-radius: 10px;
  transition: background .25s, color .25s, box-shadow .25s;
}

.tab-btn.active {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 16px rgba(124, 58, 237, .45);
}

.tab-btn:hover:not(.active) {
  color: #fff;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Finance table (deposits / withdrawals) */
.tx-table-header {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1fr 1fr 70px;
  gap: 8px;
  padding: 16px 24px;
  background: var(--pf-panel);
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-bottom: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 18px 18px 0 0;
}

.tx-table-col {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--pf-muted);
}

.tx-table-col:last-child {
  text-align: right;
}

.tx-empty {
  padding: 56px 16px;
  text-align: center;
  background: var(--pf-panel);
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-top: none;
  border-radius: 0 0 18px 18px;
}

.tx-empty-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--pf-idle);
  margin-bottom: 6px;
}

.tx-empty-sub {
  font-size: 12px;
  color: var(--pf-muted);
  margin-bottom: 20px;
}

.tx-table-body {
  background: var(--pf-panel);
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-top: none;
  border-radius: 0 0 18px 18px;
}

.tx-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1fr 1fr 70px;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  align-items: center;
  transition: background .2s;
}

.tx-row:hover {
  background: rgba(124, 58, 237, 0.05);
}

.tx-currency {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.tx-currency-icon {
  width: 34px;
  height: 34px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #2a1c02;
  flex-shrink: 0;
}

/* Coin mark on a deposit row: the real logo (static/img/coins/<asset>.svg)
   laid over a tinted initial, the same layering the deposit page's
   .cd-coin-badge uses — an asset with no logo file still reads as its
   letter instead of an empty circle. The tints are the deposit page's. */
.tx-coin {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--purple);
}

.tx-coin img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tx-coin--btc  { background: #f7931a; color: #2a1602; }
.tx-coin--eth  { background: #6f7390; }
.tx-coin--bnb  { background: #f0b90b; color: #2a2102; }
.tx-coin--trx  { background: #ef4444; }
.tx-coin--sol  { background: #a855f7; }
.tx-coin--usdt { background: #10b981; color: #06281d; }
.tx-coin--ton,
.tx-coin--xrp,
.tx-coin--usdc { background: #8884aa; color: #1a1830; }

.tx-currency-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-amount {
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
}

.tx-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.tx-status-badge.completed {
  background: rgba(16, 185, 129, 0.14);
  color: var(--green);
}

.tx-status-badge.pending,
.tx-status-badge.processing {
  background: rgba(245, 158, 11, 0.14);
  color: var(--gold);
}

.tx-status-badge.failed {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
}

.tx-date {
  font-size: 13.5px;
  color: #c9c3d8;
}

.tx-row > div:last-child {
  text-align: right;
}

.tx-more-btn {
  width: 32px;
  height: 32px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.20);
  color: var(--pf-lilac);
  cursor: pointer;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: background .2s;
}

.tx-more-btn:hover {
  background: rgba(124, 58, 237, 0.20);
}

/* ── Transfers tab — client-to-client balance transfers ──────
   Four columns instead of five (no currency/status: a transfer is
   always USD and always already settled). */
.tx-table-header--transfers,
.tx-row--transfer {
  grid-template-columns: 1fr 1.4fr 1fr 1.3fr;
}

.tx-transfer-type {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.tx-transfer-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tx-transfer-icon svg {
  width: 15px;
  height: 15px;
}

.tx-transfer-icon.is-out {
  color: var(--red);
  background: rgba(239, 68, 68, 0.12);
}

.tx-transfer-icon.is-in {
  color: var(--green);
  background: rgba(16, 185, 129, 0.12);
}

.tx-transfer-login {
  font-size: 14px;
  font-weight: 600;
  color: #c9c3d8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-amount--out { color: var(--red); }
.tx-amount--in  { color: var(--green); }

/* Bets table */
.bets-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pf-panel);
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 18px;
  overflow: hidden;
}

.bets-table thead th {
  padding: 16px 18px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--pf-muted);
  border-bottom: 1px solid rgba(124, 58, 237, 0.12);
}

.bets-table tbody td {
  padding: 15px 18px;
  font-size: 13.5px;
  color: #c9c3d8;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.bets-table tbody tr:hover {
  background: rgba(124, 58, 237, 0.05);
}

.bet-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--pf-idle);
  background: rgba(255, 255, 255, 0.05);
}

.bet-status-won,
.bet-status-half_won {
  color: var(--green);
  background: rgba(16, 185, 129, 0.14);
}

.bet-status-lost,
.bet-status-half_lost {
  color: var(--red);
  background: rgba(239, 68, 68, 0.12);
}

.bet-status-pending,
.bet-status-open {
  color: var(--gold);
  background: rgba(245, 158, 11, 0.14);
}

.bet-status-void,
.bet-status-push {
  color: var(--pf-idle);
  background: rgba(255, 255, 255, 0.05);
}

/* ── Multiple (express) — expandable legs row ─────────────── */

.bet-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #c9c3d8;
  transition: color 0.2s ease;
}

.bet-expand-btn:hover {
  color: var(--accent);
}

.bet-expand-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}

.bet-expand-btn.open .bet-expand-chevron {
  transform: rotate(180deg);
}

.bets-table tbody .bet-legs-row td {
  padding: 0;
  border-top: none;
}

.bets-table tbody tr.bet-legs-row:hover {
  background: none;
}

.bet-legs-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.bet-legs-collapse.open {
  grid-template-rows: 1fr;
}

.bet-legs-inner {
  overflow: hidden;
  min-height: 0;
}

.bet-legs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 18px 16px 42px;
  background: rgba(124, 58, 237, 0.04);
}

.bet-leg {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(124, 58, 237, 0.10);
}

.bet-leg-main {
  flex: 1;
  min-width: 0;
}

.bet-leg-match {
  font-size: 13px;
  font-weight: 600;
  color: #c9c3d8;
}

.bet-leg-selection {
  font-size: 12px;
  margin-top: 2px;
  color: var(--pf-muted);
}

.bet-leg-odds {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

.bets-loading,
.bets-error,
.bets-empty {
  padding: 40px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--pf-idle);
  background: var(--pf-panel);
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 18px;
}

.bets-error {
  color: var(--red);
}

.bets-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

.bets-pagination .btn-prev,
.bets-pagination .btn-next {
  padding: 9px 20px;
  background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(124, 58, 237, 0.30);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .2s;
}

.bets-pagination .btn-prev:hover:not(:disabled),
.bets-pagination .btn-next:hover:not(:disabled) {
  background: rgba(124, 58, 237, 0.22);
}

.bets-pagination .btn-prev:disabled,
.bets-pagination .btn-next:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.pagination-info {
  font-size: 13px;
  color: var(--pf-idle);
}

.is-hidden {
  display: none !important;
}

/* ── Bonus redemption badges (injected by profile.js) ─────── */
.bonus-promo-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: .5px;
  margin-bottom: 12px;
}

.bonus-promo-badge--bonus {
  background: rgba(16, 185, 129, 0.14);
  color: var(--green);
}

.bonus-promo-badge--match-pending {
  background: rgba(168, 85, 247, 0.16);
  color: var(--pf-lilac);
}

.bonus-promo-badge--match-used {
  background: rgba(255, 255, 255, 0.05);
  color: var(--pf-muted);
}

/* ════════════════════════════════════════════════════════════
   Withdrawal Error modal (table 2) — client not verified yet
   ════════════════════════════════════════════════════════════ */

.we-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  animation: wdBackdropIn .28s ease both;
}

.we-modal-backdrop[hidden] { display: none; }

.we-modal-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 460px;
  padding: 30px;
  border-radius: 26px;
  background: linear-gradient(165deg, rgba(38, 26, 64, 0.96), rgba(20, 15, 34, 0.98));
  border: 1px solid rgba(168, 85, 247, 0.28);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: weCardIn .7s cubic-bezier(.2, .9, .25, 1.15) both;
}

/* red-tinted top halo */
.we-modal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 220px at 50% -8%, rgba(255, 70, 90, 0.14), transparent 70%);
  pointer-events: none;
}

/* slow sheen across the card */
.we-modal-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: weSheen 4.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}

.we-modal-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  animation: weRise .6s ease-out .35s both;
}

.we-modal-title {
  margin: 0;
  font-family: var(--pf-heading);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .3px;
}

.we-modal-close {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #b8afce;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.we-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.we-modal-close svg { width: 16px; height: 16px; }

/* ── Warning banner ─────────────────────────────────────────── */
.we-modal-banner {
  position: relative;
  z-index: 2;
  overflow: hidden;
  height: 150px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(70, 30, 90, 0.9), rgba(120, 30, 70, 0.85));
  border: 1px solid rgba(255, 90, 120, 0.25);
  margin-bottom: 24px;
  animation: weRise .6s ease-out .45s both;
}

/* dotted texture */
.we-modal-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0);
  background-size: 26px 26px;
  pointer-events: none;
}

.we-modal-sign {
  position: relative;
  width: 88px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 22px rgba(255, 84, 112, .35));
  animation: weErrPulse 2.2s ease-in-out 1s infinite;
}

.we-modal-sign svg { width: 82px; height: 74px; }

/* ── Copy ───────────────────────────────────────────────────── */
.we-modal-lead {
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  animation: weRise .6s ease-out .55s both;
}

.we-modal-amount     { color: #7ce7b0; }
.we-modal-amount-sub { color: #9a90b4; }

.we-modal-text {
  position: relative;
  z-index: 2;
  margin: 0 0 24px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  color: #8a80a4;
  line-height: 1.6;
  animation: weRise .6s ease-out .62s both;
}

/* ── Actions ────────────────────────────────────────────────── */
.we-modal-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 14px;
  animation: weRise .6s ease-out .7s both;
}

.we-modal-btn {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px;
  border-radius: 14px;
  font-family: var(--pf-heading);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}

.we-modal-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.we-modal-btn--primary {
  border: none;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  box-shadow: 0 12px 28px rgba(124, 58, 237, .45);
}

.we-modal-btn--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  animation: weSheen 3.5s ease-in-out 1.6s infinite;
  pointer-events: none;
}

.we-modal-btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(168, 85, 247, .6);
}

.we-modal-btn--ghost {
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.08);
  color: #e4ddf3;
}

.we-modal-btn--ghost:hover {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.6);
}

/* ── Table 4 — "Wagering Required" ──────────────────────────
   Same card as the Withdrawal Error above (one design language, one set of
   animations); only the halo/banner tint changes from red to gold, because
   this is a "not yet" plaque, not a rejection. */

.we-modal-card--wager::before {
  background: radial-gradient(420px 220px at 50% -8%, rgba(245, 158, 11, .16), transparent 70%);
}

.we-modal-card--wager .we-modal-banner {
  background: linear-gradient(135deg, rgba(70, 30, 90, .9), rgba(120, 80, 20, .85));
  border-color: rgba(245, 158, 11, .3);
}

.we-modal-card--wager .we-modal-sign {
  filter: drop-shadow(0 0 22px rgba(245, 158, 11, .4));
}

.we-modal-card--wager .we-modal-sign svg { width: 74px; height: 74px; }

.wg-remaining {
  color: var(--gold, #f59e0b);
  white-space: nowrap;
}

/* Progress towards the requirement */
.wg-progress {
  position: relative;
  z-index: 2;
  margin: 0 0 18px;
  animation: weRise .6s ease-out .58s both;
}

.wg-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.wg-progress-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #8a80a4;
}

.wg-progress-figures {
  font-size: 13.5px;
  font-weight: 700;
}

.wg-progress-done { color: #7ce7b0; }
.wg-progress-sep  { color: #6d6486; margin: 0 3px; }
.wg-progress-goal { color: #e4ddf3; }

.wg-progress-track {
  position: relative;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(168, 85, 247, .18);
}

.wg-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #f59e0b);
  box-shadow: 0 0 14px rgba(245, 158, 11, .45);
  transition: width .8s cubic-bezier(.2, .9, .25, 1);
}

/* the same slow sheen the card and the primary button carry */
.wg-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  animation: weSheen 3.5s ease-in-out 1.4s infinite;
  pointer-events: none;
}

@keyframes weCardIn {
  0%   { opacity: 0; transform: translateY(26px) scale(.94); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes weSheen {
  0%   { transform: translateX(-140%) skewX(-18deg); }
  100% { transform: translateX(240%) skewX(-18deg); }
}
@keyframes weRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes weErrPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (max-width: 480px) {
  .we-modal-card    { padding: 22px 20px; border-radius: 20px; }
  .we-modal-title   { font-size: 20px; }
  .we-modal-banner  { height: 120px; }
  .we-modal-sign    { width: 70px; height: 64px; }
  .we-modal-sign svg { width: 66px; height: 60px; }
  .we-modal-lead    { font-size: 15px; }
  .we-modal-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .we-modal-backdrop,
  .we-modal-card,
  .we-modal-card::after,
  .we-modal-head,
  .we-modal-banner,
  .we-modal-sign,
  .we-modal-lead,
  .we-modal-text,
  .we-modal-actions,
  .wg-progress,
  .wg-progress-fill::after,
  .we-modal-btn--primary::before { animation: none !important; }
  .wg-progress-fill { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════
   Withdraw stub modal — Phase 2.4 (TODO 8.1: remove with real flow)
   ════════════════════════════════════════════════════════════ */

.wd-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  animation: wdBackdropIn .28s ease both;
}

.wd-modal-backdrop[hidden] {
  display: none;
}

.wd-modal-card {
  background: var(--pf-panel);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: var(--pf-radius);
  padding: 34px 28px 26px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 0 48px rgba(124, 58, 237, 0.18), 0 8px 32px rgba(0, 0, 0, 0.60);
  animation: wdCardIn .5s cubic-bezier(.16, 1, .3, 1) both;
  will-change: transform, opacity;
}

.wd-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--pf-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: color .18s, background .18s;
}

.wd-modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.wd-modal-icon {
  width: 58px;
  height: 58px;
  margin: 4px auto 16px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: wdIconPop .55s cubic-bezier(.34, 1.56, .64, 1) .12s both;
}

.wd-modal-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--accent);
  fill: none;
}

/* Success variant — super accounts with "Фейковый вывод" on (agent panel →
   Настройки → Общее). Purely a display state: no balance is ever moved. */
.wd-modal-icon-success,
.wd-modal-card--success .wd-modal-icon-notice {
  display: none;
}

.wd-modal-card--success .wd-modal-icon-success {
  display: block;
}

.wd-modal-card--success {
  border-color: rgba(16, 185, 129, 0.4);
}

.wd-modal-card--success .wd-modal-icon {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
}

.wd-modal-card--success .wd-modal-icon svg {
  stroke: var(--green);
}

.wd-modal-card--success .wd-modal-btn {
  background: linear-gradient(135deg, #10b981, #059669);
}

.wd-modal-amount {
  font-family: var(--pf-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--green);
  margin: 0 0 10px;
  letter-spacing: .5px;
}

.wd-modal-amount[hidden] {
  display: none;
}

.wd-modal-title {
  font-family: var(--pf-heading);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.wd-modal-text {
  font-size: 13.5px;
  color: var(--pf-idle);
  line-height: 1.5;
  margin: 0 0 22px;
}

.wd-modal-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: transform .2s;
}

.wd-modal-btn:hover {
  transform: translateY(-2px);
}

/* Withdrawal Request modal — entrance animation */
@keyframes wdBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wdCardIn {
  0%   { opacity: 0; transform: translateY(26px) scale(.9); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wdIconPop {
  0%   { opacity: 0; transform: scale(0) rotate(-28deg); }
  60%  { opacity: 1; transform: scale(1.18) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes wdRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wd-modal-title { animation: wdRise .45s ease .14s backwards; }
.wd-modal-text  { animation: wdRise .45s ease .22s backwards; }
.wd-modal-btn   { animation: wdRise .45s ease .30s backwards; }

@media (prefers-reduced-motion: reduce) {
  .wd-modal-backdrop,
  .wd-modal-card,
  .wd-modal-icon,
  .wd-modal-title,
  .wd-modal-text,
  .wd-modal-btn { animation: none !important; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1040px) {
  /* STRETCH, not the desktop flex-start. In a column the cross axis is the
     WIDTH, so flex-start left every child content-sized: one wide thing
     inside the content — the four transaction tabs, the 640px min-width of
     the crypto-deposit history table once a first deposit filled it — made
     the whole content column that wide, and the phone cut its right side
     off (owner screenshots 2026-09-23). Stretched, the column is exactly the
     screen and anything wider scrolls or reflows inside it. */
  .profile-layout {
    flex-direction: column;
    align-items: stretch;
    padding: 0 16px;
    margin: 20px auto;
  }

  .profile-content {
    width: 100%;
  }

  .profile-sidebar-nav {
    width: 100%;
    position: static;
  }

  .psb-avatar-row {
    margin-bottom: -18px;
  }

  .psb-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .psb-nav-link.active::before {
    display: none;
  }
}

@media (max-width: 820px) {
  .profile-top-row {
    flex-direction: column;
  }

  .profile-side-cards {
    width: 100%;
    flex-direction: row;
  }

  .kyc-mini-card,
  .rakeback-mini-card {
    flex: 1;
  }

  .dw-layout,
  .verification-layout {
    grid-template-columns: 1fr;
  }

  .bonus-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  /* .page-wrapper already keeps 14px off each edge; a second 16px here left
     a phone's cards 60px narrower than the screen — room the transaction
     rows and deposit cards need more. */
  .profile-layout {
    padding: 0;
    margin: 16px auto;
  }

  .profile-title {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .profile-side-cards {
    flex-direction: column;
  }

  .settings-grid,
  .rakeback-card {
    grid-template-columns: 1fr;
  }

  .bonus-grid {
    grid-template-columns: 1fr;
  }

  .promo-code-banner {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .promo-code-input-row {
    flex-direction: column;
    max-width: none;
    width: 100%;
  }

  .promo-code-decoration {
    display: none;
  }

  .verification-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .psb-nav {
    grid-template-columns: 1fr;
  }

  /* ── Transactions on a phone ───────────────────────────────
     The tab strip spans the column; in English all four tabs fit, a
     longer language scrolls the strip sideways instead of pushing the
     page wider (profile.js keeps the active tab in view). */
  .tabs-row {
    width: 100%;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs-row::-webkit-scrollbar { display: none; }

  .tab-btn {
    flex: 1 0 auto;
    padding: 10px 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* Deposits / withdrawals: every row becomes a two-line card —
       [coin] TRX            $0.30
              23.09.2026  CREDITED
     Cells are placed by position, so the server-rendered withdrawals rows
     and the JS-built deposit rows share one layout. The "⋯" cell only ever
     carried a hover tooltip, which a touch screen cannot show. */
  .tx-table-header {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 16px;
  }
  .tx-table-header .tx-table-col:nth-child(n+3) { display: none; }
  .tx-table-header .tx-table-col:nth-child(2) { text-align: right; }

  .tx-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "cur  amt"
      "date st";
    column-gap: 12px;
    row-gap: 4px;
    padding: 14px 16px;
  }
  .tx-row > :nth-child(1) { grid-area: cur; min-width: 0; }
  .tx-row > :nth-child(2) { grid-area: amt; text-align: right; }
  .tx-row > :nth-child(3) { grid-area: st; justify-self: end; }
  .tx-row > :nth-child(4) {
    grid-area: date;
    display: block;
    padding-left: 44px;          /* under the name, past the 32px coin + gap */
    font-size: 12.5px;
    color: var(--pf-idle);
  }
  .tx-row > :nth-child(5) { display: none; }

  .tx-currency { gap: 12px; min-width: 0; }
  .tx-currency-icon,
  .tx-coin { width: 32px; height: 32px; }
  .tx-status-badge { padding: 4px 9px; font-size: 10.5px; }

  /* Transfers: [↗] Sent        −$25.00
                    @bob   23.09.2026 14:02 */
  .tx-table-header--transfers .tx-table-col:nth-child(3) {
    display: block;
    text-align: right;
  }
  .tx-table-header--transfers .tx-table-col:nth-child(2) { display: none; }
  .tx-row--transfer {
    grid-template-areas:
      "type  amt"
      "login date";
  }
  .tx-row--transfer > :nth-child(1) { grid-area: type; }
  .tx-row--transfer > :nth-child(2) { grid-area: login; padding-left: 37px; min-width: 0; }
  .tx-row--transfer > :nth-child(3) { grid-area: amt; justify-self: end; text-align: right; }
  .tx-row--transfer > :nth-child(4) {
    grid-area: date;
    padding-left: 0;
    text-align: right;
  }

  .tx-transfer-icon {
    width: 26px;
    height: 26px;
  }

  /* Bets: the eight-column table becomes one card per bet, each figure
     under its own label (td[data-label], set by profile.js):
       Arsenal vs Chelsea                 WON
       Match Winner: Arsenal
       ODDS      STAKE      POTENTIAL
       2.15      $10.00        $21.50
       Single                23.09.2026 */
  .bets-table {
    display: block;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  .bets-table thead { display: none; }
  .bets-table tbody { display: block; }

  .bets-table tbody tr:not(.bet-legs-row) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "match match status"
      "sel   sel   sel"
      "odds  stake pot"
      "type  type  placed";
    column-gap: 10px;
    row-gap: 8px;
    margin-bottom: 10px;
    padding: 14px 16px;
    background: var(--pf-panel);
    border: 1px solid rgba(124, 58, 237, 0.16);
    border-radius: 16px;
  }
  .bets-table tbody tr:not(.bet-legs-row):hover { background: var(--pf-panel); }

  .bets-table tbody td {
    display: block;
    min-width: 0;
    padding: 0;
    border: none;
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .bets-table td.bt-match     { grid-area: match; font-size: 14px; font-weight: 700; color: #fff; }
  .bets-table td.bt-status    { grid-area: status; justify-self: end; align-self: start; }
  .bets-table td.bt-selection { grid-area: sel; color: var(--pf-idle); }
  .bets-table td.bt-odds      { grid-area: odds; font-weight: 700; color: var(--pf-lilac); }
  .bets-table td.bt-stake     { grid-area: stake; font-weight: 700; color: #fff; }
  .bets-table td.bt-potential { grid-area: pot; font-weight: 700; color: var(--green); text-align: right; }
  .bets-table td.bt-type      { grid-area: type; font-size: 12px; color: var(--pf-muted); }
  .bets-table td.bt-placed    { grid-area: placed; font-size: 12px; color: var(--pf-muted); text-align: right; }

  .bets-table td.bt-odds::before,
  .bets-table td.bt-stake::before,
  .bets-table td.bt-potential::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--pf-muted);
  }

  /* A Multiple's legs slide out under their card like a drawer. The
     row's -10px cancels the card's margin while it is folded, so a closed
     drawer adds no space at all. */
  .bets-table tbody tr.bet-legs-row {
    display: block;
    margin: -10px 0 10px;
  }
  .bets-table tbody .bet-legs-row td { display: block; }
  .bet-legs {
    margin: 0 10px;
    padding: 10px;
    border: 1px solid rgba(124, 58, 237, 0.14);
    border-top: none;
    border-radius: 0 0 14px 14px;
  }
  .bet-leg { flex-wrap: wrap; gap: 6px 12px; }
}

/* ── Mobile: collapsible nav + no support plaque ─────────────
   On a phone the nav list alone fills the first screen, so ≤768px
   it folds behind a section bar. Default is OPEN — the client sees
   exactly what they saw before and chooses to fold it away; the
   choice is then remembered across the profile section, applied by
   profile.js before the first paint so it never flashes open.
   The collapse itself is a max-height + padding + opacity
   transition driven from JS-measured pixels: the panel carries its
   own padding and border, and grid's 0fr trick cannot take either
   of those to zero (`height: 0` on a border-box element still
   renders its padding). */
@media (max-width: 768px) {

  .profile-sidebar-nav.psb-has-toggle .psb-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    margin-bottom: -18px;          /* fuse with the nav card below */
    background: var(--pf-panel);
    border: 1px solid var(--pf-border);
    border-top: none;
    border-radius: 0;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-radius .42s cubic-bezier(.22, 1, .36, 1),
                background .22s ease;
  }

  /* Folded shut, the bar becomes the bottom of the card. */
  .profile-sidebar-nav.psb-has-toggle .psb-nav-toggle.is-collapsed {
    border-bottom-left-radius: var(--pf-radius);
    border-bottom-right-radius: var(--pf-radius);
  }

  .psb-nav-toggle-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .psb-nav-toggle-chev {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.42);
    background: rgba(124, 58, 237, 0.12);
    color: var(--accent);
    transform: rotate(180deg);     /* open = pointing up */
    transition: transform .42s cubic-bezier(.22, 1, .36, 1),
                background .22s ease, border-color .22s ease,
                box-shadow .22s ease;
  }
  .psb-nav-toggle.is-collapsed .psb-nav-toggle-chev {
    transform: rotate(0deg);       /* shut = pointing down */
  }
  .psb-nav-toggle:active .psb-nav-toggle-chev {
    background: rgba(124, 58, 237, 0.32);
    border-color: var(--accent);
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.40);
  }

  .psb-nav-toggle-chev svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* The bar supplies the breathing room the fused avatar card used
     to, so the list can start tighter under it.

     The fold's pixel cap arrives as a CUSTOM PROPERTY set inline by
     profile.js, and is spent HERE — inside the breakpoint. An inline
     `max-height` would be a plain declaration that no media query can
     take back, so a nav folded on a phone stayed clipped after a
     rotate into the desktop layout; a variable the desktop rules
     never read cannot leak that way, whether or not any resize event
     ever fires. Same reason every `.is-collapsed` declaration below
     lives in this block rather than on the bare class. */
  .profile-sidebar-nav.psb-has-toggle .psb-nav {
    padding-top: 16px;
    overflow: hidden;
    max-height: var(--psb-nav-max, none);
    transition-property: max-height, padding-top, padding-bottom,
                         opacity, border-color, visibility;
    transition-duration: .42s, .42s, .42s, .26s, .26s, 0s;
    transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  }

  /* The height is the measured cap above; everything the fold needs
     that cannot be measured is here. The border fades to transparent
     rather than to zero width so the collapse never reflows, and
     visibility flips only once the fold has finished, which is what
     takes the links out of the tab order without cutting the
     animation short. */
  .profile-sidebar-nav.psb-has-toggle .psb-nav.is-collapsed {
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border-color: transparent;
    visibility: hidden;
    transition-delay: 0s, 0s, 0s, 0s, 0s, .42s;
  }

  /* Owner rule: the support plaque goes on a phone. The floating
     chat bubble is on every page already, so nothing is lost. */
  .psb-support { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-sidebar-nav.psb-has-toggle .psb-nav,
  .profile-sidebar-nav.psb-has-toggle .psb-nav-toggle,
  .psb-nav-toggle-chev { transition: none; }
}