/* AscendEX brand — clean logo + launch animation + purple tint */
:root[data-theme="ascendex"] {
  --blue: #a78bfa;
  --blue-soft: #c4b5fd;
  --blue-glow: rgba(167, 139, 250, 0.3);
  --bg: #0b0814;
  --text: #ffffff;
  --muted: #b7adc8;
  --line: rgba(255, 255, 255, 0.08);
  --glass: rgba(22, 14, 40, 0.8);
  --gradient-1: linear-gradient(135deg, #c084ff 0%, #8b5cf6 50%, #6d28d9 100%);
  --gradient-2: linear-gradient(180deg, #0b0814 0%, #140a22 48%, #0b0814 100%);
  --ax-surface: rgba(24, 16, 42, 0.92);
  --ax-surface-2: rgba(32, 22, 56, 0.95);
  --ax-border: rgba(168, 130, 255, 0.18);
  --ax-accent-dim: rgba(139, 92, 246, 0.16);
}

:root[data-theme="ascendex"] body,
:root[data-theme="ascendex"] #app {
  background: var(--gradient-2) !important;
  color: var(--text);
}

:root[data-theme="ascendex"] body::before {
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(139, 92, 246, 0.24), transparent 52%),
    radial-gradient(ellipse 40% 35% at 100% 28%, rgba(124, 58, 237, 0.12), transparent 50%),
    radial-gradient(ellipse 45% 40% at 0% 72%, rgba(91, 33, 182, 0.1), transparent 50%) !important;
}

/* Logo — no white wash */
:root[data-theme="ascendex"] .ascendex-wordmark {
  display: flex !important;
  align-items: center;
  gap: 11px;
}
:root[data-theme="ascendex"] .ascendex-mark-img {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  background: transparent !important;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.55));
}
:root[data-theme="ascendex"] .header-size .ascendex-mark-img {
  width: 28px !important;
  height: 28px !important;
  /* no white glow in header */
  filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.55)) !important;
  opacity: 1;
}
:root[data-theme="ascendex"] .header-size .ascendex-wordmark {
  filter: none !important;
}
:root[data-theme="ascendex"] .splash-size .ascendex-mark-img {
  width: 72px !important;
  height: 72px !important;
}
:root[data-theme="ascendex"] .ascendex-icon { display: none !important; }
:root[data-theme="ascendex"] .ascendex-text {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff !important;
  line-height: 1;
  text-shadow: none !important;
}
:root[data-theme="ascendex"] .header-size .ascendex-text {
  font-size: 1.08rem;
  text-shadow: none !important;
  filter: none !important;
}
:root[data-theme="ascendex"] .splash-size .ascendex-text { font-size: 2.35rem; }
:root[data-theme="ascendex"] .ax-brand-a,
:root[data-theme="ascendex"] .ax-brand-rest,
:root[data-theme="ascendex"] .ax-brand-ex {
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: #fff !important;
}

/* ═══════════ Splash — clean branded launch ═══════════ */
:root[data-theme="ascendex"] .splash {
  background: #0a0614 !important;
  overflow: hidden;
}
:root[data-theme="ascendex"] .splash::before,
:root[data-theme="ascendex"] .splash::after,
:root[data-theme="ascendex"] .splash-rings,
:root[data-theme="ascendex"] .splash-ring,
:root[data-theme="ascendex"] .ascendex-mark-shine {
  display: none !important;
  animation: none !important;
}

:root[data-theme="ascendex"] .splash-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  left: 50%;
  top: 42%;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.45) 0%, rgba(109, 40, 217, 0.12) 48%, transparent 70%);
  z-index: 1;
  opacity: 0;
  animation: axGlowIn 0.6s ease forwards;
  pointer-events: none;
  filter: none;
}
@keyframes axGlowIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

:root[data-theme="ascendex"] .splash-orbit {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 118px;
  height: 118px;
  margin: -59px 0 0 -59px;
  border-radius: 50%;
  border: 1.5px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.06);
  z-index: 2;
  opacity: 0;
  transform: scale(0.6);
  animation: axOrbitIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
  pointer-events: none;
}
@keyframes axOrbitIn {
  0% { opacity: 0; transform: scale(0.55); }
  70% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

:root[data-theme="ascendex"] .splash .brand-logo.splash-size {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}
:root[data-theme="ascendex"] .splash .ascendex-wordmark {
  flex-direction: column;
  gap: 40px;
  align-items: center;
  animation: none !important;
}
:root[data-theme="ascendex"] .splash .ascendex-mark-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
}
:root[data-theme="ascendex"] .splash .ascendex-mark-img {
  width: 72px !important;
  height: 72px !important;
  opacity: 0;
  transform: scale(0.7);
  animation: axMarkIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
  filter: drop-shadow(0 8px 20px rgba(109, 40, 217, 0.55)) !important;
}
@keyframes axMarkIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

:root[data-theme="ascendex"] .splash .ascendex-text {
  opacity: 0;
  transform: translateY(8px);
  animation: axTextIn 0.45s ease 0.45s forwards !important;
  filter: none !important;
  letter-spacing: -0.02em !important;
}
@keyframes axTextIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

:root[data-theme="ascendex"] .splash-bar {
  position: relative;
  z-index: 3;
  width: 140px;
  height: 3px;
  margin-top: 30px;
  background: rgba(167, 139, 250, 0.15);
  border-radius: 99px;
  overflow: hidden;
  opacity: 0;
  animation: axBarIn 0.3s ease 0.55s forwards;
}
@keyframes axBarIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
:root[data-theme="ascendex"] .splash-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #6d28d9, #a78bfa) !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.55) !important;
  animation: axLoadFill 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards !important;
  transform: none !important;
}
@keyframes axLoadFill {
  from { width: 0%; }
  to { width: 100%; }
}

:root[data-theme="ascendex"] .splash-tag {
  position: relative;
  z-index: 3;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.7);
  opacity: 0;
  animation: axTagIn 0.4s ease 0.7s forwards;
}
@keyframes axTagIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

:root[data-theme="ascendex"] .splash.hide {
  transition: opacity 0.4s ease, visibility 0.4s ease;
  transform: none;
  filter: none;
}

/* Soft purple UI tint */
:root[data-theme="ascendex"] .topbar {
  background: rgba(11, 8, 20, 0.94) !important;
  border-bottom-color: var(--ax-border) !important;
}
:root[data-theme="ascendex"] .top-balance strong { color: #f5f3ff !important; }
:root[data-theme="ascendex"] .brand-sub { color: var(--muted) !important; }

:root[data-theme="ascendex"] .btn-main,
:root[data-theme="ascendex"] .ex3d-btn-green,
:root[data-theme="ascendex"] .ex3d-btn.ex3d-btn-green {
  background: linear-gradient(135deg, #c084ff 0%, #8b5cf6 48%, #6d28d9 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(109, 40, 217, 0.38) !important;
}

:root[data-theme="ascendex"] .navbar-v2 .nav.active,
:root[data-theme="ascendex"] .navbar-v2 .nav.active .nav-ico {
  color: #c4b5fd !important;
}
:root[data-theme="ascendex"] .nav-indicator {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(109, 40, 217, 0.14)) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.22) !important;
}

:root[data-theme="ascendex"] .glass,
:root[data-theme="ascendex"] .glass-pill,
:root[data-theme="ascendex"] .markets-card-v2,
:root[data-theme="ascendex"] .ex3d-card {
  border-color: var(--ax-border) !important;
  background: var(--ax-surface) !important;
}

:root[data-theme="ascendex"] .qa-btn.active,
:root[data-theme="ascendex"] .pair-switcher-item.active,
:root[data-theme="ascendex"] .method-btn.active {
  border-color: rgba(167, 139, 250, 0.55) !important;
  background: rgba(139, 92, 246, 0.16) !important;
  color: #f5f3ff !important;
}

:root[data-theme="ascendex"] .timer-progress { stroke: #a78bfa !important; }
:root[data-theme="ascendex"] .icon-btn.accent { color: #c4b5fd !important; }
:root[data-theme="ascendex"] .m-right .m-price { color: #ddd6fe !important; }
:root[data-theme="ascendex"] .market-row-v2:hover {
  border-color: rgba(167, 139, 250, 0.3) !important;
}

:root[data-theme="ascendex"] .ex3d-btn-purple {
  background: rgba(139, 92, 246, 0.14) !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  color: #efe7ff !important;
  box-shadow: none !important;
}

:root[data-theme="ascendex"] .ex-wallet-avatar .ascendex-mark-img,
:root[data-theme="ascendex"] .td-brand-logo .ascendex-mark-img,
:root[data-theme="ascendex"] .wallet-hero-avatar .ascendex-mark-img {
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5)) !important;
}

/* ═══════════ Payment sheets — branded purple ═══════════ */
:root[data-theme="ascendex"] {
  --ax-card-bg: linear-gradient(160deg, rgba(36, 24, 58, 0.98), rgba(22, 14, 38, 0.98));
  --ax-card-border: rgba(167, 139, 250, 0.28);
}

:root[data-theme="ascendex"] .ax-pay-panel {
  --pay-bg: #120a1f;
  --pay-surface: #2a1d45;
  --pay-border: rgba(167, 139, 250, 0.32);
  --pay-text: #f5f3ff;
  --pay-muted: #b8a9d9;
  --pay-accent: #a78bfa;
}

:root[data-theme="ascendex"] .ax-pay-panel,
:root[data-theme="ascendex"] .ax-sheet-panel.ax-pay-panel,
:root[data-theme="ascendex"] .sheet-panel.pay-sheet,
:root[data-theme="ascendex"] .deposit-sheet,
:root[data-theme="ascendex"] .withdraw-sheet {
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(139, 92, 246, 0.28), transparent 55%),
    linear-gradient(180deg, #1f1535 0%, #120a1f 100%) !important;
  border-color: rgba(167, 139, 250, 0.35) !important;
  box-shadow: 0 -12px 40px rgba(76, 29, 149, 0.4) !important;
  color: #f5f3ff !important;
}

:root[data-theme="ascendex"] .ax-pay-handle,
:root[data-theme="ascendex"] .ax-pay-panel .ax-sheet-handle,
:root[data-theme="ascendex"] .pay-sheet .sheet-handle {
  background: rgba(196, 181, 253, 0.45) !important;
}

:root[data-theme="ascendex"] .ax-pay-field,
:root[data-theme="ascendex"] .ax-pay-input,
:root[data-theme="ascendex"] .pay-field,
:root[data-theme="ascendex"] .method-btn,
:root[data-theme="ascendex"] .ax-pay-method,
:root[data-theme="ascendex"] .ax-amount-chip,
:root[data-theme="ascendex"] .ax-pay-timer,
:root[data-theme="ascendex"] .ax-pay-support {
  background: linear-gradient(145deg, rgba(58, 38, 96, 0.95), rgba(36, 22, 62, 0.98)) !important;
  border: 1px solid rgba(167, 139, 250, 0.32) !important;
  color: #f5f3ff !important;
  box-shadow: 0 4px 18px rgba(76, 29, 149, 0.22) !important;
}

:root[data-theme="ascendex"] .ax-pay-head-ico.dep,
:root[data-theme="ascendex"] .ax-pay-head-ico.wd {
  background-color: rgba(139, 92, 246, 0.2) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}
:root[data-theme="ascendex"] .ax-pay-timer strong,
:root[data-theme="ascendex"] .ax-pay-timer .dep-timer {
  color: #c4b5fd !important;
}

:root[data-theme="ascendex"] .method-btn.active,
:root[data-theme="ascendex"] .ax-pay-method.active,
:root[data-theme="ascendex"] .ax-amount-chip.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(109, 40, 217, 0.22)) !important;
  border-color: rgba(196, 181, 253, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25), 0 8px 22px rgba(109, 40, 217, 0.3) !important;
}

:root[data-theme="ascendex"] .ax-pay-panel input,
:root[data-theme="ascendex"] .ax-pay-panel select,
:root[data-theme="ascendex"] .pay-sheet input,
:root[data-theme="ascendex"] .deposit-sheet input,
:root[data-theme="ascendex"] .withdraw-sheet input {
  background: rgba(15, 8, 28, 0.65) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
  color: #f5f3ff !important;
}
:root[data-theme="ascendex"] .ax-pay-panel input:focus,
:root[data-theme="ascendex"] .pay-sheet input:focus {
  border-color: #a78bfa !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22) !important;
}

:root[data-theme="ascendex"] .ax-pay-submit,
:root[data-theme="ascendex"] .pay-submit,
:root[data-theme="ascendex"] .deposit-submit,
:root[data-theme="ascendex"] .withdraw-submit {
  background: linear-gradient(135deg, #c084ff 0%, #8b5cf6 45%, #6d28d9 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 28px rgba(109, 40, 217, 0.45) !important;
}

:root[data-theme="ascendex"] .cabinet-pending-dep {
  border-color: rgba(167, 139, 250, 0.4) !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(76, 29, 149, 0.12)) !important;
  color: #f5f3ff !important;
}
:root[data-theme="ascendex"] .cabinet-pending-dep-ico {
  background: rgba(139, 92, 246, 0.2) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2'%3E%3Cpath d='M12 8v4l3 2'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px !important;
}
:root[data-theme="ascendex"] .cabinet-pending-dep-body strong { color: #f5f3ff !important; }
:root[data-theme="ascendex"] .cabinet-pending-dep-body em,
:root[data-theme="ascendex"] .cabinet-pending-dep-cta {
  color: #c4b5fd !important;
}
:root[data-theme="ascendex"] .cabinet-pending-dep-cta {
  background: rgba(139, 92, 246, 0.18) !important;
}

/* ═══════════ Trade / history / feed cards — purple ═══════════ */
:root[data-theme="ascendex"] .ax-hub-card,
:root[data-theme="ascendex"] .live-feed-head,
:root[data-theme="ascendex"] .explore-news-card,
:root[data-theme="ascendex"] .ex-digest,
:root[data-theme="ascendex"] .ex-fng,
:root[data-theme="ascendex"] .trade-row,
:root[data-theme="ascendex"] .trade-row.history-trade-card,
:root[data-theme="ascendex"] .hist-row,
:root[data-theme="ascendex"] .feed-trade-card,
:root[data-theme="ascendex"] .live-feed-card,
:root[data-theme="ascendex"] .rating-trade-row-v2,
:root[data-theme="ascendex"] .rating-lb-row-v2 {
  background: linear-gradient(155deg, rgba(38, 26, 62, 0.98), rgba(20, 12, 36, 0.98)) !important;
  border: 1px solid rgba(167, 139, 250, 0.28) !important;
  box-shadow: 0 6px 20px rgba(49, 20, 90, 0.28) !important;
  color: #f5f3ff !important;
}

:root[data-theme="ascendex"] .live-feed-card.win,
:root[data-theme="ascendex"] .trade-row.win,
:root[data-theme="ascendex"] .hist-row.win {
  border-color: rgba(52, 211, 153, 0.35) !important;
  background: linear-gradient(155deg, rgba(30, 40, 48, 0.4), rgba(20, 12, 36, 0.98)),
    linear-gradient(155deg, rgba(38, 26, 62, 0.98), rgba(20, 12, 36, 0.98)) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.12), 0 0 0 1px rgba(52, 211, 153, 0.08) inset !important;
}
:root[data-theme="ascendex"] .live-feed-card.lose,
:root[data-theme="ascendex"] .trade-row.lose,
:root[data-theme="ascendex"] .hist-row.lose {
  border-color: rgba(248, 113, 113, 0.3) !important;
}

:root[data-theme="ascendex"] .trade-row-top strong,
:root[data-theme="ascendex"] .hist-row strong,
:root[data-theme="ascendex"] .live-feed-name,
:root[data-theme="ascendex"] .rating-trade-row-v2 strong {
  color: #f5f3ff !important;
}
:root[data-theme="ascendex"] .trade-row-meta,
:root[data-theme="ascendex"] .trade-row-date,
:root[data-theme="ascendex"] .live-feed-ago,
:root[data-theme="ascendex"] .hist-row .muted {
  color: #a89bc8 !important;
}

:root[data-theme="ascendex"] .live-feed-tags span,
:root[data-theme="ascendex"] .trade-tag,
:root[data-theme="ascendex"] .hist-tag {
  background: rgba(139, 92, 246, 0.18) !important;
  border: 1px solid rgba(167, 139, 250, 0.28) !important;
  color: #ddd6fe !important;
}

:root[data-theme="ascendex"] .td-sheet,
:root[data-theme="ascendex"] .trade-detail-sheet,
:root[data-theme="ascendex"] .ax-sheet-panel {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(139, 92, 246, 0.18), transparent 50%),
    linear-gradient(180deg, #1a1230 0%, #120a1f 100%) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
}