/* ═══════════════════════════════════════════════════════════
   TNT STUDIO — WALLET PAGES PREMIUM DESIGN
   ═══════════════════════════════════════════════════════════ */

.wp-page {
  animation: wpFadeIn .4s cubic-bezier(0, 0, .2, 1) both;
  max-width: 720px;
}
@keyframes wpFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.wp-header { margin-bottom: 20px; }
.wp-header h2 {
  font-family: Orbitron, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -.02em;
}
.wp-header .wp-sub {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin: 0;
}

.wp-card {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s, box-shadow .2s;
}
.wp-card:hover {
  border-color: rgba(255,107,26,.1);
  box-shadow: 0 4px 24px rgba(0,0,0,.2);
}

/* ─── FIELDS ─── */
.wp-field { margin-bottom: 14px; }
.wp-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 6px;
}
.wp-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.wp-input-wrap:focus-within {
  border-color: rgba(255,107,26,.4);
  box-shadow: 0 0 0 3px rgba(255,107,26,.08);
}
.wp-input-wrap svg { flex-shrink: 0; opacity: .5; }
.wp-input-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 14px;
  min-width: 0;
}
.wp-input-wrap input::placeholder { color: rgba(255,255,255,.3); }

textarea#wp-support-msg {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 14px;
  color: #fff;
  font-size: 14px;
  resize: vertical;
  outline: none;
  transition: border-color .2s;
}
textarea#wp-support-msg:focus { border-color: rgba(255,107,26,.4); }

/* ─── BUTTONS ─── */
.wp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #ff6b1a, #ff4d00);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, opacity .2s;
}
.wp-btn-primary:hover { box-shadow: 0 4px 24px rgba(255,107,26,.35); }
.wp-btn-primary:active { transform: scale(.96); }
.wp-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.wp-btn-primary.wp-btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); }

.wp-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.wp-btn-ghost:hover { border-color: rgba(255,107,26,.3); color: #ff6b1a; background: rgba(255,107,26,.05); }

.wp-btn-danger {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 8px;
  color: #f87171;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s;
}
.wp-btn-danger:hover { background: rgba(239,68,68,.2); }

.wp-btn-sm { padding: 10px 16px; font-size: 13px; width: auto; }

/* ─── AMOUNT PRESETS ─── */
.wp-amount-presets {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.wp-amount-presets button {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.wp-amount-presets button:hover,
.wp-amount-presets button.active {
  background: rgba(255,107,26,.1);
  border-color: #ff6b1a;
  color: #ff6b1a;
}

/* ─── COPY ROW ─── */
.wp-copy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 14px;
}
.wp-copy-value {
  flex: 1;
  font-size: 13px;
  color: rgba(255,255,255,.8);
  font-family: 'JetBrains Mono', monospace;
  word-break: break-all;
  min-width: 0;
}
.wp-code-display { font-size: 18px; font-weight: 700; letter-spacing: .15em; color: #ff6b1a; }
.wp-copy-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.wp-copy-btn:hover { border-color: rgba(255,107,26,.3); color: #ff6b1a; }

/* ─── SHARE BUTTONS ─── */
.wp-share-btns { display: flex; gap: 10px; margin-top: 14px; }
.wp-share-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.wp-share-btn:hover { border-color: rgba(255,107,26,.2); color: #ff6b1a; }
.wp-share-wa { border-color: rgba(37,211,102,.2); color: #25d366; }
.wp-share-wa:hover { background: rgba(37,211,102,.08); border-color: rgba(37,211,102,.4); }

/* ─── INFO BOX ─── */
.wp-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,107,26,.04);
  border: 1px solid rgba(255,107,26,.08);
  font-size: 12px;
  color: rgba(255,255,255,.5);
}

/* ─── RECEIVE ─── */
.wp-qr-area { text-align: center; margin-bottom: 20px; }
.wp-qr-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 2px dashed rgba(255,107,26,.15);
}

/* ─── SWAP ─── */
.wp-swap-pair { position: relative; }
.wp-swap-from, .wp-swap-to {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 8px;
}
.wp-swap-label { font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .08em; }
.wp-swap-currency { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wp-swap-icon {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
}
.wp-tnt-icon { background: linear-gradient(135deg, #ff6b1a, #ff4d00); color: #fff; }
.wp-usd-icon { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.wp-swap-from input, .wp-swap-to input {
  width: 100%; background: transparent; border: none; outline: none;
  color: #fff; font-size: 24px; font-weight: 700;
}
.wp-swap-flip {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(20,24,32,.9);
  border: 2px solid rgba(255,107,26,.3);
  color: #ff6b1a;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s;
  z-index: 2;
}
.wp-swap-flip:hover { background: rgba(255,107,26,.1); }
.wp-swap-rate {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,.4);
  margin: 12px 0 16px;
}

/* ─── REWARDS ─── */
.wp-rewards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wp-reward-card {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 18px 14px;
  text-align: center;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, box-shadow .2s;
}
.wp-reward-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,107,26,.15);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.wp-reward-icon { margin-bottom: 10px; }
.wp-reward-card h3 { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.wp-reward-card p { font-size: 11px; color: rgba(255,255,255,.4); margin: 0 0 12px; }
.wp-streak-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.wp-streak-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.4);
  transition: all .2s;
}
.wp-streak-dot.filled {
  background: rgba(255,107,26,.15);
  border-color: #ff6b1a;
  color: #ff6b1a;
}

/* ─── REFERRAL HERO ─── */
.wp-referral-hero {
  text-align: center;
  overflow: hidden;
  position: relative;
}
.wp-referral-visual { margin: -20px -20px 16px; overflow: hidden; max-height: 140px; }
.wp-referral-img { width: 100%; object-fit: cover; opacity: .8; }
.wp-referral-hero h3 { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.wp-referral-hero p { font-size: 13px; color: rgba(255,255,255,.5); margin: 0; }
.wp-referral-hero strong { color: #ff6b1a; }

/* ─── STATS ─── */
.wp-stats-row { display: flex; gap: 12px; }
.wp-stat { flex: 1; text-align: center; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); }
.wp-stat-val { font-size: 24px; font-weight: 800; color: #ff6b1a; font-family: Orbitron, sans-serif; }
.wp-stat-label { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }
.wp-referral-stats h4 { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); margin: 0 0 12px; }

/* ─── SETTINGS ─── */
.wp-settings-group h4 {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7);
  margin: 0 0 14px; text-transform: uppercase; letter-spacing: .05em;
}
.wp-setting-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.wp-setting-item:last-child { border-bottom: none; }
.wp-setting-info span { display: block; font-size: 14px; color: #fff; font-weight: 500; }
.wp-setting-info small { font-size: 11px; color: rgba(255,255,255,.4); }
.wp-danger .wp-setting-info span { color: #f87171; }

/* Toggle switch */
.wp-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.wp-toggle input { opacity: 0; width: 0; height: 0; }
.wp-toggle-slider {
  position: absolute; inset: 0; background: rgba(255,255,255,.1);
  border-radius: 12px; cursor: pointer; transition: background .2s;
}
.wp-toggle-slider::before {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.wp-toggle input:checked + .wp-toggle-slider { background: #ff6b1a; }
.wp-toggle input:checked + .wp-toggle-slider::before { transform: translateX(20px); }

/* ─── FAQ ─── */
.wp-faq-item { border-bottom: 1px solid rgba(255,255,255,.04); }
.wp-faq-item:last-child { border-bottom: none; }
.wp-faq-item summary {
  padding: 14px 0; cursor: pointer; font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.8); list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.wp-faq-item summary::after {
  content: '+'; font-size: 18px; color: rgba(255,255,255,.3);
  transition: transform .2s;
}
.wp-faq-item[open] summary::after { content: '-'; color: #ff6b1a; }
.wp-faq-item p { padding: 0 0 14px; font-size: 13px; color: rgba(255,255,255,.5); margin: 0; line-height: 1.5; }

/* ─── ACTIVITY ─── */
.wp-activity-filters {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 14px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.wp-activity-filters::-webkit-scrollbar { display: none; }
.wp-filter {
  padding: 8px 14px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: transparent; color: rgba(255,255,255,.5);
  font-size: 12px; font-weight: 500; white-space: nowrap;
  cursor: pointer; transition: all .15s;
}
.wp-filter.active, .wp-filter:hover {
  background: rgba(255,107,26,.1);
  border-color: #ff6b1a;
  color: #ff6b1a;
}
.wp-tx-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  animation: wpFadeIn .3s cubic-bezier(0,0,.2,1) both;
}
.wp-tx-row:last-child { border-bottom: none; }
.wp-tx-info { flex: 1; min-width: 0; }
.wp-tx-type { display: block; font-size: 13px; font-weight: 500; color: #fff; }
.wp-tx-date { display: block; font-size: 11px; color: rgba(255,255,255,.4); }
.wp-tx-amount { font-size: 14px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.wp-tx-amount.positive { color: #4ade80; }
.wp-tx-amount.negative { color: #f87171; }

/* ─── SPINNER ─── */
.wp-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: wpSpin .6s linear infinite;
}
@keyframes wpSpin { to { transform: rotate(360deg); } }

.wp-loading { text-align: center; padding: 24px; color: rgba(255,255,255,.5); font-size: 13px; }
.wp-empty { text-align: center; padding: 32px; color: rgba(255,255,255,.4); font-size: 14px; }

/* ─── MOBILE ─── */
@media (max-width: 768px) {
  .wp-page { max-width: 100%; }
  .wp-rewards-grid { grid-template-columns: 1fr; }
  .wp-stats-row { flex-direction: column; }
  .wp-share-btns { flex-direction: column; }
  .wp-amount-presets { flex-wrap: wrap; }
  .wp-swap-flip { position: relative; left: auto; top: auto; transform: none; margin: -4px auto; }
}

/* ═══ DEPOSIT PAGE ═══ */
.wp-deposit {
  max-width: none;
}

.wp-subtitle {
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  margin: -8px 0 20px;
}

.wp-coin-packs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.wp-coin-pack {
  position: relative;
  background: rgba(20,20,35,0.8);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.wp-coin-pack:hover {
  border-color: rgba(255,107,26,0.3);
  transform: translateY(-2px);
}

.wp-coin-pack.is-selected {
  border-color: rgba(255,107,26,0.8);
  background: rgba(255,107,26,0.08);
  box-shadow: 0 0 20px rgba(255,107,26,0.15);
}

.wp-coin-pack.is-popular {
  border-color: rgba(255,107,26,0.4);
}

.wp-pack-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff6b1a, #ff8f4c);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.wp-pack-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
}

.wp-pack-coins {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.wp-pack-price {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,107,26,0.9);
  margin-bottom: 4px;
}

.wp-pack-bonus {
  font-size: 11px;
  color: rgba(76,217,100,0.9);
  font-weight: 600;
}

.wp-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: rgba(255,255,255,0.3);
  font-size: 12px;
  font-weight: 600;
}

.wp-divider::before,
.wp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.06);
}

.wp-custom-deposit {
  margin-bottom: 24px;
}

.wp-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wp-input-row {
  display: flex;
  align-items: center;
  background: rgba(10,10,20,0.8);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 0 16px;
  transition: border-color 0.2s;
}

.wp-input-row:focus-within {
  border-color: rgba(255,107,26,0.5);
}

.wp-input-prefix {
  color: rgba(255,255,255,0.4);
  font-size: 18px;
  font-weight: 600;
  margin-right: 8px;
}

.wp-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 18px;
  padding: 14px 0;
  width: 100%;
}

.wp-input::placeholder {
  color: rgba(255,255,255,0.25);
  font-size: 14px;
}

.wp-deposit-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, #ff6b1a, #ff8f4c);
  color: #fff;
  transition: opacity 0.2s, transform 0.2s;
}

.wp-deposit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.wp-deposit-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,107,26,0.4);
}

.wp-note {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  margin-top: 12px;
}

@media (max-width: 480px) {
  .wp-coin-packs {
    grid-template-columns: 1fr;
  }
}

/* ═══ DEPOSIT PAGE (full page version) ═══ */
.wallet-deposit-page {
  padding: 20px;
  max-width: none;
}

.wallet-deposit-page .deposit-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.wallet-deposit-page .deposit-header h3 {
  margin: 0;
}

.wp-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.wp-back-btn:hover {
  background: rgba(255,107,26,0.08);
  border-color: rgba(255,107,26,0.3);
  color: #ff6b1a;
}

.wallet-deposit-page .coin-packs {
  margin-bottom: 20px;
}

.wallet-deposit-page .custom-amount-row {
  margin-bottom: 20px;
}

.wallet-deposit-page .deposit-summary {
  margin-bottom: 16px;
  font-size: 15px;
  color: rgba(255,255,255,0.7);
}

.wallet-deposit-page .paypal-buttons-wrap {
  margin-bottom: 16px;
  min-height: 55px;
}

.wallet-deposit-page .paypal-placeholder {
  text-align: center;
  padding: 16px;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
}

.wallet-deposit-page .paypal-fallback {
  margin-bottom: 12px;
}

/* ═══ REFUND PAGE ═══ */
.wallet-refund-page {
  padding: 20px;
  max-width: none;
}

.refund-subtitle {
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  margin: -4px 0 20px;
}

.refund-empty {
  text-align: center;
  padding: 48px 20px;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
}

.refund-empty p {
  margin: 0;
}

.refund-tx-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.refund-tx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(16,16,28,0.7);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  transition: opacity 0.3s, transform 0.3s;
}

.refund-tx-info {
  flex: 1;
  min-width: 0;
}

.refund-tx-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.refund-tx-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

.refund-tx-btn {
  flex-shrink: 0;
  padding: 8px 16px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

/* ═══ WITHDRAW PAGE ═══ */
.wallet-withdraw-page {
  padding: 20px;
  max-width: none;
}

.withdraw-subtitle {
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  margin: -4px 0 24px;
}

.withdraw-subtitle strong {
  color: rgba(255,255,255,0.9);
}

.withdraw-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.withdraw-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.withdraw-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.withdraw-method {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(20,20,35,0.8);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}

.withdraw-method:hover {
  border-color: rgba(255,107,26,0.3);
  transform: translateY(-1px);
}

.withdraw-method.is-active {
  border-color: rgba(255,107,26,0.8);
  background: rgba(255,107,26,0.08);
  color: #fff;
  box-shadow: 0 0 16px rgba(255,107,26,0.12);
}

.withdraw-method svg {
  flex-shrink: 0;
}

.withdraw-bank-warn {
  font-size: 11px;
  color: #fbbf24;
  margin-top: 8px;
}

.withdraw-bank-warn a {
  color: #635bff;
  text-decoration: underline;
}

.withdraw-submit-btn {
  width: 100%;
  padding: 16px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
  margin-top: 4px;
}

/* ═══ WITHDRAW / CASH OUT PAGE ═══ */
.wo-page {
  padding: 24px 20px;
  max-width: 560px;
}

.wo-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.wo-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.2s;
}

.wo-back:hover {
  background: rgba(255,107,26,0.1);
  border-color: rgba(255,107,26,0.4);
  color: #ff6b1a;
}

.wo-title {
  margin: 0;
  font-family: Orbitron, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.wo-balance-card {
  background: linear-gradient(135deg, rgba(255,107,26,0.08) 0%, rgba(255,60,0,0.04) 100%);
  border: 1px solid rgba(255,107,26,0.15);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
  text-align: center;
}

.wo-balance-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 6px;
}

.wo-balance-amount {
  font-family: Orbitron, sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 20px rgba(255,107,26,0.3);
}

.wo-section {
  margin-bottom: 20px;
}

.wo-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.wo-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10,10,20,0.8);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 0 16px;
  transition: border-color 0.2s;
}

.wo-input-wrap:focus-within {
  border-color: rgba(255,107,26,0.5);
  box-shadow: 0 0 0 3px rgba(255,107,26,0.08);
}

.wo-input-prefix {
  color: rgba(255,107,26,0.7);
  font-size: 20px;
  font-weight: 700;
}

.wo-input-icon {
  flex-shrink: 0;
  color: rgba(255,255,255,0.3);
}

.wo-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 14px 0;
  width: 100%;
  font-family: Orbitron, sans-serif;
}

.wo-input-email {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
}

.wo-input::placeholder {
  color: rgba(255,255,255,0.2);
  font-weight: 400;
  font-family: inherit;
}

.wo-presets {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.wo-preset {
  flex: 1;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.wo-preset:hover {
  border-color: rgba(255,107,26,0.3);
  color: rgba(255,255,255,0.9);
}

.wo-preset.active {
  border-color: rgba(255,107,26,0.7);
  background: rgba(255,107,26,0.1);
  color: #ff6b1a;
}

.wo-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.wo-method-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(16,16,28,0.7);
  cursor: pointer;
  transition: all 0.2s;
}

.wo-method-card:hover {
  border-color: rgba(255,107,26,0.25);
  transform: translateY(-1px);
}

.wo-method-card.active {
  border-color: rgba(255,107,26,0.7);
  background: rgba(255,107,26,0.06);
  box-shadow: 0 0 20px rgba(255,107,26,0.1), inset 0 0 0 1px rgba(255,107,26,0.1);
}

.wo-method-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
}

.wo-method-icon svg {
  width: 40px;
  height: 40px;
}

.wo-method-info {
  flex: 1;
  min-width: 0;
}

.wo-method-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.wo-method-status {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

.wo-method-status.connected {
  color: rgba(76,217,100,0.9);
}

.wo-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.15);
  font-size: 12px;
  color: #fbbf24;
}

.wo-warn a {
  color: #635bff;
  text-decoration: underline;
  font-weight: 600;
}

.wo-summary-card {
  background: rgba(16,16,28,0.6);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.wo-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

.wo-summary-row span:last-child {
  color: rgba(255,255,255,0.8);
  font-weight: 600;
}

.wo-summary-total {
  font-size: 15px;
  color: #fff !important;
}

.wo-summary-total span {
  color: #fff !important;
  font-weight: 700 !important;
}

.wo-summary-total span:last-child {
  color: #ff6b1a !important;
  font-size: 18px;
}

.wo-free {
  color: rgba(76,217,100,0.9) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
}

.wo-summary-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 0;
}

.wo-submit {
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  font-family: Rajdhani, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  background: linear-gradient(135deg, #ff6b1a 0%, #ff4500 100%);
  color: #fff;
  box-shadow: 0 4px 20px -4px rgba(255,107,26,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: all 0.2s;
}

.wo-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px -4px rgba(255,107,26,0.5);
}

.wo-submit:active:not(:disabled) {
  transform: scale(0.97);
}

.wo-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.wo-empty {
  text-align: center;
  padding: 60px 20px;
}

.wo-empty-icon {
  color: rgba(255,255,255,0.15);
  margin-bottom: 16px;
}

.wo-empty p {
  color: rgba(255,255,255,0.5);
  font-size: 15px;
  margin: 0 0 4px;
}

.wo-empty-bal {
  color: rgba(255,255,255,0.3) !important;
  font-size: 13px !important;
}

@media (max-width: 480px) {
  .wo-methods {
    grid-template-columns: 1fr;
  }
  .wo-balance-amount {
    font-size: 26px;
  }
}