#chart-live-clock-overlay {
  display: none;
}

/* =========================================================================
   SECURITY INPUTS, COUNTRY PHONE SELECTOR & PASSWORD STRENGTH METER
   ========================================================================= */

.auth-input-feedback {
  font-size: 11.5px;
  line-height: 1.4;
  margin-top: 5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.auth-input-feedback.error {
  color: #ef4444;
}

.auth-input-feedback.info {
  color: #6366f1;
}

/* Right Status Icon inside input */
.auth-input-status-icon {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding-left: 6px;
  flex-shrink: 0;
  cursor: default;
}

.auth-input-status-icon.visible {
  display: inline-flex;
}

/* SVG Country Flag Image */
.country-flag-img {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* Phone Country Selector Group */
.phone-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.country-select-wrap {
  position: relative;
  width: 120px;
  flex-shrink: 0;
}

.country-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: 46px;
  padding: 0 10px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.country-select-btn:hover,
.country-select-btn:focus {
  border-color: #6c00ff;
  box-shadow: 0 0 0 3px rgba(108, 0, 255, 0.1);
}

.phone-number-wrap {
  flex: 1;
  min-width: 0;
}

.country-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 270px;
  max-height: 240px;
  overflow-y: auto;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  z-index: 999999;
  display: none;
  padding: 6px;
}

.country-dropdown-menu.active {
  display: block;
  animation: fadeInDown 0.2s ease;
}

.country-search-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 6px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.country-search-input:focus {
  border-color: #6c00ff;
}

.country-options-list {
  max-height: 180px;
  overflow-y: auto;
}

.country-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: #1e293b;
  transition: background 0.15s;
}

.country-option-item:hover,
.country-option-item.selected {
  background: rgba(108, 0, 255, 0.08);
  color: #6c00ff;
  font-weight: 600;
}

/* Password Strength Meter */
.pw-strength-meter-card {
  background: rgba(108, 0, 255, 0.03);
  border: 1px solid rgba(108, 0, 255, 0.15);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0 14px 0;
}

.pw-strength-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.pw-strength-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
}

.pw-strength-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.pw-strength-badge.weak {
  background: #fee2e2;
  color: #dc2626;
}

.pw-strength-badge.medium {
  background: #fef3c7;
  color: #d97706;
}

.pw-strength-badge.strong {
  background: #d1fae5;
  color: #059669;
}

.pw-strength-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.pw-bar-segment {
  height: 5px;
  background: #e2e8f0;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.pw-bar-segment.fill-weak {
  background: #ef4444;
}

.pw-bar-segment.fill-medium {
  background: #f59e0b;
}

.pw-bar-segment.fill-strong {
  background: #10b981;
}

.pw-req-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin-top: 8px;
  font-size: 11px;
  color: #64748b;
}

.pw-req-item {
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
}

.pw-req-item.met {
  color: #059669;
  font-weight: 600;
}

.pw-req-item svg {
  flex-shrink: 0;
}

.pw-example-hint {
  font-size: 11px;
  color: #6c00ff;
  margin-top: 8px;
  font-weight: 600;
  background: rgba(108, 0, 255, 0.06);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

.charts {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  left: 0;
  user-select: none;
  width: 100%;
}

.charts {
  height: 100%;
  position: absolute;
  top: 0;
}

.layout-container {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100%;
}

.layout-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.layout-container .chart-item {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 100%;
  flex: 1 1 100%;
  height: 100%;
  position: relative;
}

.charts.single .chart {
  height: 100%;
  width: 100%;
}

.charts .chart {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  cursor: default;
  display: block;
  position: absolute;
  user-select: none;
}

.charts .chart .chart-container {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.drop-down-modal-wrap {
  background: transparent;
  bottom: 0;
  content: "";
  cursor: default;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 11;
}

.chart,
.chart-container {
  width: 100%;
  height: 100%;
}

.input-control__hint p {
  margin-top: 0;
}

.overlay {
  opacity: 0.3;
}

/* Sleek Chart blink effect when toggling between Live & Demo */
@keyframes chartBlinkEffect {
  0% {
    opacity: 1;
    filter: brightness(1) blur(0px);
  }

  35% {
    opacity: 0.25;
    filter: brightness(1.4) blur(1.5px);
  }

  100% {
    opacity: 1;
    filter: brightness(1) blur(0px);
  }
}

.chart-blink-active {
  animation: chartBlinkEffect 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes chartSpinnerSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   WALLET PAGE REDESIGN STYLES — Zenance Trading Theme Compatible
   ============================================================ */

/* ── Available Balances Card Left-Alignment and Layout ── */
.wallet-balance-card {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 24px 28px !important;
  min-height: 110px !important;
}

.wallet-balance-banner-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.wallet-balance-sub {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
}

.wallet-balance-divider {
  width: 1px !important;
  height: 14px !important;
  background-color: var(--border-color) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.wallet-balance-icon-wrap {
  position: absolute !important;
  right: 28px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 60px !important;
  height: 60px !important;
  background-color: var(--primary-light) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary) !important;
  flex-shrink: 0 !important;
}

/* ── Form Steps and Vertical Spacing ── */
.wallet-form-layout {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.wallet-step-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.wallet-step-label {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--text-primary) !important;
  margin-bottom: 2px !important;
  display: block !important;
}

/* ── Mode Selection Buttons (Dark/Light Responsive) ── */
.wallet-mode-row {
  display: flex !important;
  gap: 14px !important;
  width: 100% !important;
}

.wallet-mode-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  border-radius: var(--radius-sm) !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1.5px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  font-family: var(--font-family) !important;
  outline: none !important;
}

/* Dark active mode */
.wallet-mode-btn.wallet-mode-btn--active {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background-color: var(--primary-light) !important;
}

/* Light theme button background overrides */
body.light-theme .wallet-mode-btn {
  background-color: rgba(0, 0, 0, 0.02) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  color: #64748b !important;
}

body.light-theme .wallet-mode-btn.wallet-mode-btn--active {
  background-color: rgba(26, 183, 109, 0.06) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.wallet-mode-btn:hover:not(.wallet-mode-btn--active) {
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: var(--text-primary) !important;
}

body.light-theme .wallet-mode-btn:hover:not(.wallet-mode-btn--active) {
  border-color: rgba(0, 0, 0, 0.18) !important;
  color: #0f172a !important;
}

/* Radio buttons nested inside mode buttons */
.wallet-mode-radio {
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  border: 2px solid var(--text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: var(--transition) !important;
}

.wallet-mode-radio--active {
  border-color: var(--primary) !important;
}

body.light-theme .wallet-mode-radio {
  border-color: #cbd5e1 !important;
}

body.light-theme .wallet-mode-radio--active {
  border-color: var(--primary) !important;
}

.wallet-mode-radio-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  transition: background-color 0.2s !important;
}

.wallet-mode-radio--active .wallet-mode-radio-dot {
  background-color: var(--primary) !important;
}

/* ── Amount Input Suffix ── */
.wallet-amount-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.wallet-amount-input {
  width: 100% !important;
  padding-right: 56px !important;
}

.wallet-amount-suffix {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* ── Info Hint Box ── */
.wallet-info-hint {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  background-color: var(--primary-light) !important;
  border: 1px solid rgba(26, 183, 109, 0.18) !important;
  border-radius: var(--radius-sm) !important;
  padding: 13px 15px !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
}

body.light-theme .wallet-info-hint {
  background-color: rgba(26, 183, 109, 0.05) !important;
  border-color: rgba(26, 183, 109, 0.15) !important;
  color: #334155 !important;
}

.wallet-info-hint svg {
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  color: var(--primary) !important;
}

/* Hide broken QR Code box on initial invoice render */
#invoice-qr-code[src=""] {
  display: none !important;
}

/* ── Cancel Button Overrides ── */
.wallet-cancel-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: var(--transition) !important;
}

.wallet-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body.light-theme .wallet-cancel-btn {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .wallet-cancel-btn:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

/* ── Centered and Constrained Profile Tabs on Desktop ── */
@media (min-width: 768px) {
  .profile-main-tabs {
    justify-content: center !important;
  }

  .profile-tab-pill {
    flex: none !important;
    width: auto !important;
    min-width: 140px !important;
    max-width: 180px !important;
  }
}

/* ── Google Sign-in SDK Centering overrides ── */
#google-signin-btn-login iframe,
#google-signin-btn-signup iframe {
  margin: 0 auto !important;
  display: block !important;
}

/* ── Prevent Mobile Double-Tap Zoom ── */
html,
body {
  touch-action: pan-x pan-y !important;
}

/* ── Notifications Dropdown Popup ── */
.notifications-dropdown {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.notifications-dropdown::-webkit-scrollbar {
  width: 4px;
}

.notifications-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.notifications-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.notification-history-item {
  transition: background-color 0.2s ease;
  cursor: default;
  margin: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
  background: transparent !important;
}

.notification-history-item:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Light theme overrides for dropdown */
body.light-theme .notifications-dropdown {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .notifications-dropdown>div {
  background: #ffffff !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .notifications-dropdown span {
  color: #0f172a !important;
}

body.light-theme .notifications-dropdown-list div {
  color: #64748b !important;
}

body.light-theme .notification-history-item {
  border-bottom-color: rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .notification-history-item:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* ── Executive Redesign for Profile Settings Logout Button ── */
.settings-logout-btn {
  width: 100% !important;
  max-width: 260px !important;
  margin: 24px auto 32px auto !important;
  height: 48px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(168, 85, 247, 0.08) 100%) !important;
  color: #f87171 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  letter-spacing: 0.3px !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.08) !important;
  position: relative !important;
}

body.light-theme .settings-logout-btn {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(124, 58, 237, 0.05) 100%) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.06) !important;
}

.settings-logout-btn:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

.settings-logout-btn svg {
  color: inherit !important;
  stroke: currentColor !important;
  transition: transform 0.2s ease !important;
}

.settings-logout-btn:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  transform: translateX(-3px) !important;
}

@keyframes otp-digit-pop {
  0% {
    transform: scale(1);
    box-shadow: none;
  }

  50% {
    transform: scale(1.15);
    border-color: var(--primary) !important;
    box-shadow: 0 0 14px rgba(26, 183, 109, 0.3);
    text-shadow: 0 0 6px rgba(26, 183, 109, 0.5);
  }

  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

/* ============================================================
   NEXTER GENERAL SETTINGS: SECURITY VERIFICATION MODALS REDESIGN
   Compatible with both Dark Theme and Light / Bright Theme
   ============================================================ */

/* ── Modal Overlay Backdrop ── */
.security-verify-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: rgba(8, 4, 18, 0.76) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: opacity 0.25s ease !important;
}

body.light-theme .security-verify-modal {
  background: rgba(15, 23, 42, 0.38) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* ── Modal Glass Card ── */
.security-verify-card {
  position: relative !important;
  width: 100% !important;
  max-width: 420px !important;
  padding: 32px 28px 28px 28px !important;
  border-radius: 24px !important;
  box-sizing: border-box !important;
  background: linear-gradient(165deg, rgba(28, 18, 48, 0.95) 0%, rgba(16, 10, 30, 0.98) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.26) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 40px rgba(124, 58, 237, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  color: #f8fafc !important;
  animation: secModalCardPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

body.light-theme .security-verify-card {
  background: linear-gradient(165deg, #ffffff 0%, #faf8ff 100%) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  box-shadow: 0 24px 60px rgba(124, 58, 237, 0.12), 0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 1px #ffffff !important;
  color: #0f172a !important;
}

@keyframes secModalCardPop {
  0% {
    opacity: 0;
    transform: scale(0.93) translateY(12px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── Close Button ── */
.security-modal-close-btn {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 !important;
  z-index: 10 !important;
}

.security-modal-close-btn:hover {
  background: rgba(168, 85, 247, 0.2) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  color: #ffffff !important;
  transform: rotate(90deg) scale(1.05) !important;
}

body.light-theme .security-modal-close-btn {
  border: 1px solid rgba(124, 58, 237, 0.16) !important;
  background: rgba(124, 58, 237, 0.06) !important;
  color: #64748b !important;
}

body.light-theme .security-modal-close-btn:hover {
  background: rgba(124, 58, 237, 0.14) !important;
  border-color: rgba(124, 58, 237, 0.35) !important;
  color: #7c3aed !important;
}

/* ── Top Security Header Badge ── */
.security-modal-badge-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  margin: 0 auto 16px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(124, 58, 237, 0.1) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.22) !important;
  color: #c084fc !important;
}

body.light-theme .security-modal-badge-icon {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%) !important;
  border: 1.5px solid rgba(124, 58, 237, 0.25) !important;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.12) !important;
  color: #7c3aed !important;
}

/* ── Stepper (Progress Tracker) ── */
.security-stepper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 22px !important;
  width: 100% !important;
}

.security-step-dot {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
}

.security-step-dot.upcoming {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

body.light-theme .security-step-dot.upcoming {
  background: #f1edfa !important;
  border: 1.5px solid rgba(124, 58, 237, 0.18) !important;
  color: #8b5cf6 !important;
}

.security-step-dot.active {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.55), 0 2px 8px rgba(124, 58, 237, 0.4) !important;
  transform: scale(1.08) !important;
}

.security-step-dot.completed {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.35) !important;
}

.security-step-line {
  height: 2.5px !important;
  flex: 1 !important;
  max-width: 32px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  transition: all 0.3s ease !important;
}

body.light-theme .security-step-line {
  background: rgba(124, 58, 237, 0.15) !important;
}

.security-step-line.active {
  background: linear-gradient(90deg, #a855f7, #7c3aed) !important;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.45) !important;
}

/* ── Typography (Titles & Descriptions) ── */
.security-modal-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  margin: 0 0 8px 0 !important;
  text-align: center !important;
  letter-spacing: -0.3px !important;
  color: #ffffff !important;
}

body.light-theme .security-modal-title {
  color: #0f172a !important;
}

.security-modal-desc {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: 0 auto 20px auto !important;
  text-align: center !important;
  max-width: 330px !important;
  color: #94a3b8 !important;
}

body.light-theme .security-modal-desc {
  color: #64748b !important;
}

/* ── Form Controls & Labels ── */
.security-modal-form-group {
  margin-bottom: 16px !important;
  text-align: left !important;
}

.security-modal-label {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 7px !important;
  display: block !important;
  color: #c084fc !important;
}

body.light-theme .security-modal-label {
  color: #6d28d9 !important;
}

.security-modal-input {
  width: 100% !important;
  height: 48px !important;
  border-radius: 13px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 14px !important;
  padding: 0 16px !important;
  outline: none !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.22) !important;
  color: #ffffff !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.security-modal-input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.security-modal-input:focus {
  border-color: #a855f7 !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.28) !important;
}

body.light-theme .security-modal-input {
  background: #ffffff !important;
  border: 1.5px solid rgba(124, 58, 237, 0.2) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

body.light-theme .security-modal-input::placeholder {
  color: rgba(15, 23, 42, 0.38) !important;
}

body.light-theme .security-modal-input:focus {
  border-color: #7c3aed !important;
  background: #ffffff !important;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.22) !important;
}

/* ── OTP Fields Redesign ── */
.security-otp-field {
  width: 44px !important;
  height: 50px !important;
  border-radius: 12px !important;
  text-align: center !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  outline: none !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.25) !important;
  color: #ffffff !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.security-otp-field:focus {
  border-color: #a855f7 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.4) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

body.light-theme .security-otp-field {
  background: #ffffff !important;
  border: 1.5px solid rgba(124, 58, 237, 0.22) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

body.light-theme .security-otp-field:focus {
  border-color: #7c3aed !important;
  background: #ffffff !important;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.3) !important;
  color: #0f172a !important;
}

/* ── Buttons Row & Dedicated Styles ── */
.security-modal-btn-row {
  display: flex !important;
  gap: 12px !important;
  margin-top: 22px !important;
  width: 100% !important;
}

/* CANCEL BUTTON */
.security-modal-btn-cancel {
  flex: 1 !important;
  height: 46px !important;
  border-radius: 14px !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #cbd5e1 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.security-modal-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

body.light-theme .security-modal-btn-cancel {
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  background: rgba(124, 58, 237, 0.06) !important;
  color: #475569 !important;
}

body.light-theme .security-modal-btn-cancel:hover {
  background: rgba(124, 58, 237, 0.12) !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
  color: #1e1b4b !important;
  transform: translateY(-1px) !important;
}

/* PRIMARY ACTION BUTTON */
.security-modal-btn-primary {
  flex: 2 !important;
  height: 46px !important;
  border-radius: 14px !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: none !important;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.security-modal-btn-primary:hover {
  transform: translateY(-1.5px) !important;
  background: linear-gradient(135deg, #b366ff 0%, #8b46ff 50%, #7c3aed 100%) !important;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.6) !important;
}

.security-modal-btn-primary:active {
  transform: scale(0.98) !important;
}

.security-modal-btn-primary:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* STRICT EXCLUSION: Strip pseudo-element glossy bubbles from these buttons */
.security-verify-card .security-modal-btn-primary::before,
.security-verify-card .security-modal-btn-primary::after,
.security-verify-card .security-modal-btn-cancel::before,
.security-verify-card .security-modal-btn-cancel::after {
  display: none !important;
  content: none !important;
}

/* ── Error Box ── */
.security-modal-error {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  padding: 10px 14px !important;
  margin-top: 14px !important;
  text-align: center !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.4 !important;
}

body.light-theme .security-modal-error {
  background: #fef2f2 !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #dc2626 !important;
}

/* ── Forgot Password Modal Explicit Dark Styling (Auth Screen Isolation) ── */
#forgot-password-modal>div {
  background: #111A13 !important;
  border: 1px solid #1F3323 !important;
}

#forgot-password-modal h3 {
  color: #D4EFD9 !important;
  font-weight: 700 !important;
}

#forgot-password-modal p,
#forgot-password-modal p.text-secondary,
#forgot-password-modal .text-secondary {
  color: #8AADA0 !important;
  /* clear readable gray-green secondary text */
}

#forgot-password-modal .form-label {
  color: #8AADA0 !important;
}

/* ── OTP Field Styling ── */
.otp-field {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.15)) !important;
  color: var(--text-primary, #ffffff) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.light-theme .otp-field {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #0c1a0f !important;
}

.otp-field:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 10px rgba(26, 183, 109, 0.25) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px);
  color: var(--text-primary, #ffffff) !important;
}

body.light-theme .otp-field:focus {
  background: #ffffff !important;
  color: #0c1a0f !important;
}

.otp-field.has-value {
  animation: otp-digit-pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: rgba(26, 183, 109, 0.1) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

body.light-theme .otp-field.has-value {
  background: rgba(26, 183, 109, 0.06) !important;
  color: #1a7a4a !important;
}

/* Force dark style on Forgot Password inputs & OTP fields regardless of body theme */
#forgot-password-modal .form-control {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

#forgot-password-modal .form-control::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

#forgot-password-modal .otp-field {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

#forgot-password-modal .otp-field:focus {
  border-color: #22c55e !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.25) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

#forgot-password-modal .otp-field.has-value {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: #22c55e !important;
  color: #22c55e !important;
}

@keyframes success-wave {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.05);
    border-color: #22c55e;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.45);
  }
}

.otp-inputs-wrapper.otp-complete .otp-field {
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, 0.08) !important;
  color: #22c55e !important;
}

body.light-theme .otp-inputs-wrapper.otp-complete .otp-field {
  background: rgba(34, 197, 94, 0.04) !important;
}

.otp-inputs-wrapper.otp-complete .otp-field:nth-child(1) {
  animation: success-wave 0.45s ease 0s;
}

.otp-inputs-wrapper.otp-complete .otp-field:nth-child(2) {
  animation: success-wave 0.45s ease 0.05s;
}

.otp-inputs-wrapper.otp-complete .otp-field:nth-child(3) {
  animation: success-wave 0.45s ease 0.1s;
}

.otp-inputs-wrapper.otp-complete .otp-field:nth-child(4) {
  animation: success-wave 0.45s ease 0.15s;
}

.otp-inputs-wrapper.otp-complete .otp-field:nth-child(5) {
  animation: success-wave 0.45s ease 0.2s;
}

.otp-inputs-wrapper.otp-complete .otp-field:nth-child(6) {
  animation: success-wave 0.45s ease 0.25s;
}

@keyframes tick-pop-spin {
  0% {
    transform: scale(0.3) rotate(-45deg);
    opacity: 0;
  }

  70% {
    transform: scale(1.25) rotate(10deg);
  }

  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

.otp-success-badge {
  display: none;
  align-items: center;
  justify-content: center;
  margin: 12px auto 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.5);
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
}

.otp-inputs-wrapper.otp-complete+.otp-success-badge {
  display: flex;
  animation: tick-pop-spin 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Leaderboard Enhancements ── */
.leaderboard-trader-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 140px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}

.profile-streak-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 2px 5px !important;
  border-radius: 5px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  height: 14px !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

.user-rank-banner {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.user-rank-banner:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

body.light-theme .user-rank-banner {
  background: rgba(26, 183, 109, 0.05) !important;
  border-color: rgba(26, 183, 109, 0.25) !important;
}

/* Restrict padding and disable horizontal scrolling on desktop slide-out drawer */
.desktop-leaderboard-drawer .drawer-content {
  padding: 12px 8px !important;
  overflow-x: hidden !important;
}

.desktop-leaderboard-drawer .leaderboard-trader-name {
  max-width: 90px !important;
  /* truncate trader name dynamically in drawer view */
}

/* Responsive constraints on mobile viewports to prevent horizontal overflow */
@media (max-width: 767px) {
  .leaderboard-trader-name {
    max-width: 120px !important;
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ============================================================
   REDESIGNED ACTIVE & CLOSED TRADES PANEL STYLES
   ============================================================ */

/* Outer tab button flex widths override */
#tc-tab-active {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

#tc-tab-pending {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* Base Tab Button Styling Updates */
.tc-tab-btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
}

.tab-badge {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  padding: 1px 5px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.tc-tab-btn.active .tab-badge {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

body.light-theme .tab-badge {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

body.light-theme .tc-tab-btn.active .tab-badge {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* Custom layout for trade rows */
.tc-trade-row-new {
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 12px !important;
  background: transparent !important;
  gap: 6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body.light-theme .tc-trade-row-new {
  border-bottom-color: rgba(0, 0, 0, 0.04) !important;
}

.tc-trade-row-top,
.tc-trade-row-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.tc-trade-row-top-left,
.tc-trade-row-bottom-left {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.tc-trade-row-top-right,
.tc-trade-row-bottom-right {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Chevron caret dropdown arrow */
.tc-trade-caret {
  width: 13px !important;
  height: 13px !important;
  fill: rgba(255, 255, 255, 0.3) !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  margin-right: 2px !important;
}

body.light-theme .tc-trade-caret {
  fill: rgba(0, 0, 0, 0.3) !important;
}

/* Flags overlapping container */
.tc-trade-flags-container {
  display: flex !important;
  align-items: center !important;
  transform: scale(0.7) !important;
  transform-origin: left center !important;
  width: 30px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  margin-right: -4px !important;
}

/* Asset name text */
.tc-trade-symbol-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.15px !important;
}

body.light-theme .tc-trade-symbol-text {
  color: #0f172a !important;
}

/* Time/countdown text format 00:00:05 */
.tc-trade-time-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px !important;
}

body.light-theme .tc-trade-time-text {
  color: #334155 !important;
}

/* Arrow indicator inside circle */
.tc-trade-arrow-circle {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

.tc-trade-arrow-circle.dir-up {
  background-color: #16c784 !important;
}

.tc-trade-arrow-circle.dir-down {
  background-color: #ff5252 !important;
}

/* Direction-colored stake amount */
.tc-trade-stake {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.tc-trade-stake.text-green {
  color: #16c784 !important;
}

.tc-trade-stake.text-danger {
  color: #ff5252 !important;
}

/* Result text (loss/win) */
.tc-trade-result-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.tc-trade-result-text.text-green {
  color: #16c784 !important;
}

.tc-trade-result-text.text-danger {
  color: #ff5252 !important;
}

.tc-trade-result-text.text-warning {
  color: #ffb300 !important;
}

/* Date Grouping Dividers */
.tc-trade-date-divider {
  font-family: 'Inter', sans-serif !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 14px 10px 6px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.light-theme .tc-trade-date-divider {
  color: rgba(0, 0, 0, 0.6) !important;
}

.tc-trade-date-badge {
  font-family: 'Inter', sans-serif !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 10px !important;
  padding: 1px 7px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  min-width: 18px !important;
  text-align: center !important;
}

body.light-theme .tc-trade-date-badge {
  background: rgba(0, 0, 0, 0.07) !important;
  color: #1e293b !important;
}

/* Hide original trade styles in .tc-trade-row to allow our new structure to take over */
.tc-trade-row {
  padding: 0 !important;
  border: none !important;
}

.tc-trade-row-left,
.tc-trade-row-right {
  display: none !important;
}

/* ============================================================
   DESKTOP TOP BAR TABS AND PLUS BUTTON LAYOUT UPDATES
   ============================================================ */

@media (min-width: 768px) {

  /* Tab Row container height */
  .trade-asset-tabs-row.desktop-only {
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px 0 32px !important;
  }

  /* Plus button: fixed first position, larger size, margin right */
  .asset-add-btn-desktop {
    width: 28px !important;
    height: 28px !important;
    margin-left: 0 !important;
    margin-right: 12px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  /* Align and stretch tabs list height */
  .asset-tabs-list {
    height: 100% !important;
    align-items: flex-end !important;
    gap: 6px !important;
  }

  /* Increase height of dynamic asset tabs */
  .asset-tab {
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
    background: #161c28 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px 6px 0 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border-bottom: none !important;
    transition: all 0.2s !important;
    margin-top: 12px !important;
  }

  .asset-tab:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
  }

  .asset-tab.active {
    background: #06070a !important;
    /* matches main trade body background */
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    height: 40px !important;
    margin-top: 8px !important;
  }

  /* Custom Overlapping Flag Wrapper inside desktop tabs */
  .tc-desktop-tab-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 22px !important;
    transform: scale(0.65) !important;
    transform-origin: center center !important;
    flex-shrink: 0 !important;
    margin-right: -4px !important;
    margin-left: -4px !important;
  }

  /* Light theme support override */
  body.light-theme .asset-tab {
    background: #e2e8f0 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: var(--text-secondary) !important;
    border-bottom: none !important;
  }

  body.light-theme .asset-tab.active {
    background: #ffffff !important;
    color: var(--primary) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    border-bottom: none !important;
  }

  body.light-theme .asset-tab:hover:not(.active) {
    background: #cbd5e1 !important;
    color: var(--text-primary) !important;
  }
}

/* ============================================================
   TOP TOOLBAR RIGHT: CHART THEME DROPDOWN
   ============================================================ */
.trade-top-toolbar-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 100% !important;
  padding-right: 8px !important;
  z-index: 100 !important;
}

.chart-theme-dropdown-wrap {
  position: relative !important;
}

.chart-theme-dropdown-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  height: 30px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  color: #e2e8f0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

body.light-theme .chart-theme-dropdown-btn {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

.chart-theme-dropdown-btn:hover {
  background: rgba(108, 0, 255, 0.1) !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
  color: #8b5cf6 !important;
}

body.light-theme .chart-theme-dropdown-btn:hover {
  background: rgba(108, 0, 255, 0.06) !important;
  border-color: #8b5cf6 !important;
  color: #6c00ff !important;
}

.chart-theme-dropdown-btn .ct-btn-label {
  opacity: 0.65 !important;
  font-size: 11px !important;
}

.chart-theme-dropdown-btn .ct-btn-value {
  font-weight: 700 !important;
  color: #a78bfa !important;
}

body.light-theme .chart-theme-dropdown-btn .ct-btn-value {
  color: #6c00ff !important;
}

.chart-theme-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  min-width: 175px !important;
  background: #111622 !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  border-radius: 8px !important;
  padding: 5px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 16px rgba(108, 0, 255, 0.12) !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

body.light-theme .chart-theme-dropdown-menu {
  background: #ffffff !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  box-shadow: 0 10px 28px rgba(108, 0, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.chart-theme-dropdown-menu[style*="display: none"] {
  display: none !important;
}

.chart-theme-option {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: #cbd5e1 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.18s ease !important;
  width: 100% !important;
}

body.light-theme .chart-theme-option {
  color: #334155 !important;
}

.chart-theme-option:hover {
  background: rgba(108, 0, 255, 0.08) !important;
  color: #8b5cf6 !important;
}

body.light-theme .chart-theme-option:hover {
  background: rgba(108, 0, 255, 0.06) !important;
  color: #6c00ff !important;
}

.chart-theme-option.active {
  background: rgba(108, 0, 255, 0.14) !important;
  color: #a78bfa !important;
  font-weight: 700 !important;
  border-left: 3px solid #8b5cf6 !important;
}

body.light-theme .chart-theme-option.active {
  background: rgba(108, 0, 255, 0.08) !important;
  color: #6c00ff !important;
  border-left: 3px solid #6c00ff !important;
}

.ct-default-badge {
  background: #8b5cf6 !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  letter-spacing: 0.5px !important;
  margin-left: 8px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 4px rgba(108, 0, 255, 0.3) !important;
}

/* ============================================================
   QUOTEX-STYLE ASSET PICKER DROPDOWN (DESKTOP & UNIFIED)
   ============================================================ */
@media (min-width: 768px) {
  /* Dropdown panel under the tab row on desktop */
  #asset-picker-modal.asset-picker-modal {
    position: absolute !important;
    top: 48px !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 460px !important;
    max-width: 90vw !important;
    height: calc(100% - 48px) !important;
    max-height: none !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: transparent !important;
    backdrop-filter: none !important;
    z-index: 250 !important;
  }

  .asset-picker-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 0 14px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: none !important;
    border-left: none !important;
    background: #11151f !important;
    box-shadow: 12px 20px 40px rgba(0, 0, 0, 0.45) !important;
    padding: 16px 18px 20px 18px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.light-theme .asset-picker-panel {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: none !important;
    border-left: none !important;
    box-shadow: 12px 20px 40px rgba(0, 0, 0, 0.08) !important;
  }
}

/* ── Unified Modern Select Asset Styling (Desktop & Mobile) ── */
.asset-picker-header,
body.light-theme .asset-picker-header,
.asset-picker-panel .asset-picker-header {
  padding: 0 0 2px 0 !important;
  margin: 0 0 8px 0 !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.asset-picker-title,
body.light-theme .asset-picker-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

body.light-theme .asset-picker-title {
  color: #0f172a !important;
}

.asset-picker-close-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
}

.asset-picker-close-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

body.light-theme .asset-picker-close-btn {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #475569 !important;
}

body.light-theme .asset-picker-close-btn:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}

/* Category Tabs (Directly under header) */
.asset-picker-categories,
body.light-theme .asset-picker-categories,
.asset-picker-panel .asset-picker-categories {
  display: flex !important;
  gap: 6px !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  background: transparent !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.asset-picker-categories::-webkit-scrollbar {
  display: none !important;
}

.category-btn {
  flex: 1 !important;
  padding: 6px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body.light-theme .category-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #64748b !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.category-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

body.light-theme .category-btn:hover {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.07) !important;
}

.category-btn.active,
body.light-theme .category-btn.active {
  background: #6c00ff !important;
  color: #ffffff !important;
  border-color: #6c00ff !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.35) !important;
}

/* Search Row with Star Favorites Filter Button */
.asset-picker-search-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 10px 0 !important;
  width: 100% !important;
}

.asset-picker-fav-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
  font-family: inherit !important;
}

body.light-theme .asset-picker-fav-filter-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #334155 !important;
}

.asset-picker-fav-filter-btn .fav-filter-star-icon {
  color: #f59e0b !important;
}

.asset-picker-fav-filter-btn .fav-filter-count {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

body.light-theme .asset-picker-fav-filter-btn .fav-filter-count {
  color: #0f172a !important;
}

.asset-picker-fav-filter-btn.active {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
}

.asset-picker-search-container,
body.light-theme .asset-picker-search-container {
  flex: 1 !important;
  height: 38px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  backdrop-filter: none !important;
  box-sizing: border-box !important;
}

body.light-theme .asset-picker-search-container {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.asset-picker-search-container:focus-within,
body.light-theme .asset-picker-search-container:focus-within {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
}

.asset-picker-search-container .search-icon-wrap {
  color: rgba(255, 255, 255, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 6px !important;
}

body.light-theme .asset-picker-search-container .search-icon-wrap {
  color: #94a3b8 !important;
}

.asset-picker-search,
body.light-theme .asset-picker-search {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: #ffffff !important;
  width: 100% !important;
  padding: 0 !important;
}

body.light-theme .asset-picker-search {
  color: #0f172a !important;
}

.asset-picker-search::placeholder,
body.light-theme .asset-picker-search::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

body.light-theme .asset-picker-search::placeholder {
  color: #94a3b8 !important;
}

/* Hide recent selected area completely */
.recent-assets-label,
.asset-picker-pills {
  display: none !important;
}

/* Single-column asset list layout */
.asset-picker-list {
  flex: 1 !important;
  max-height: none !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding-right: 4px !important;
  padding-bottom: 12px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(108, 0, 255, 0.25) transparent !important;
}

.asset-picker-list::-webkit-scrollbar {
  width: 5px !important;
}

.asset-picker-list::-webkit-scrollbar-track {
  background: transparent !important;
}

.asset-picker-list::-webkit-scrollbar-thumb {
  background: rgba(108, 0, 255, 0.25) !important;
  border-radius: 4px !important;
}

.asset-picker-list::-webkit-scrollbar-thumb:hover {
  background: rgba(108, 0, 255, 0.45) !important;
}

.asset-picker-list::-webkit-scrollbar-button {
  display: none !important;
  height: 0 !important;
}

body.light-theme .asset-picker-list {
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent !important;
}

body.light-theme .asset-picker-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .asset-picker-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28) !important;
}

/* Compact Asset Row & Left Alignment */
.asset-picker-row {
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 8px !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
}

.asset-picker-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

body.light-theme .asset-picker-row:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

.asset-row-left {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Star button on each asset row - clean borderless */
.asset-row-star-btn,
body.light-theme .asset-row-star-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  color: #f59e0b !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
}

.asset-row-star-btn svg {
  display: block !important;
  pointer-events: none !important;
  stroke: #f59e0b !important;
  width: 15px !important;
  height: 15px !important;
}

.asset-row-icon-wrap {
  display: flex !important;
  align-items: center !important;
}

.asset-row-names {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.asset-row-symbol {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

body.light-theme .asset-row-symbol {
  color: #0f172a !important;
}

.asset-row-fullname {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

body.light-theme .asset-row-fullname {
  color: #64748b !important;
}

/* Payout percentage & badge alignment */
.asset-row-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
}

.asset-row-payout {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #6c00ff !important;
  text-align: right !important;
}

body.light-theme .asset-row-payout {
  color: #6c00ff !important;
}

.asset-row-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

body.light-theme .asset-row-badge {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #64748b !important;
}

/* ============================================================
   SIDEBAR TIMEFRAME SELECTOR STYLING & POSITIONING
   ============================================================ */
.chart-floating-left-bar .chart-timeframes,
.chart-floating-left-bar .chart-style-wrap {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
}

.chart-floating-left-bar .tf-dropdown-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
}

.chart-floating-left-bar #tf-dropdown-btn.tf-dropdown-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  font-family: 'Outfit', sans-serif !important;
  border-radius: 8px !important;
}

.chart-floating-left-bar #tf-dropdown-btn.tf-dropdown-btn span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: inherit !important;
}

/* ============================================================
   SIDEBAR & TIMEFRAME LAYOUT OVERRIDES
   ============================================================ */

/* Ensure timeframe and chart style menus render in front of the clock overlay */
.tf-dropdown-menu,
.chart-style-menu {
  z-index: 100000 !important;
}

/* Global Rules (Mobile-first / Hidden by default) */
#chart-pressure-bar-wrapper,
.chart-pressure-bar-wrapper {
  display: none !important;
  /* hidden on mobile viewports */
}

/* Global Backdrop Styles for Pair Information Modal (both mobile & desktop) */
.pair-info-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 12, 18, 0.75) !important;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', 'Outfit', sans-serif !important;
}

body.light-theme .pair-info-backdrop {
  background: rgba(15, 23, 42, 0.4) !important;
}

/* Desktop-only viewport overrides */
@media (min-width: 768px) {

  /* Remove default border and shadow from app sidebar to merge with pressure wrapper */
  .app-nav {
    border-right: none !important;
    box-shadow: none !important;
  }

  /* Show vertical sentiment pressure bar wrapper as a dedicated sidebar strip */
  #chart-pressure-bar-wrapper,
  .chart-pressure-bar-wrapper {
    display: flex !important;
    position: absolute !important;
    left: 0 !important;
    /* flush to the far left of the chart area */
    top: 0 !important;
    /* stretches full height */
    bottom: 0 !important;
    width: 24px !important;
    /* dedicated narrow strip width */
    background: var(--bg-card) !important;
    /* matches app navigation sidebar background */
    border-right: 1px solid var(--border-color) !important;
    /* matches app navigation sidebar border */
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.03) !important;
    /* transfers sidebar shadow to the outer edge */
    flex-direction: column !important;
    align-items: center !important;
    z-index: 200 !important;
    box-sizing: border-box !important;
    padding: 12px 0 !important;
    /* top and bottom padding for spacing */
  }

  /* Percentage text labels above and below the bar */
  .pressure-percentage-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    text-align: center !important;
    line-height: 1 !important;
    width: 100% !important;
  }

  .pressure-percentage-label.label-red {
    color: #ff4a5a !important;
    margin-bottom: 5px !important;
  }

  .pressure-percentage-label.label-green {
    color: #10b981 !important;
    margin-top: 5px !important;
  }

  /* The actual bar container */
  .chart-pressure-bar-container {
    flex: 1 !important;
    width: 8px !important;
    /* bold vertical bar */
    border-radius: 4px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  }

  .pressure-bar-red {
    width: 100% !important;
    background: #f43f5e !important;
    /* red top */
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .pressure-bar-green {
    width: 100% !important;
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%) !important;
    /* green bottom */
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  body.light-theme .chart-pressure-bar-container {
    background: rgba(0, 0, 0, 0.08) !important;
  }

  /* Position timeframe button directly under chart type button inside floating sidebar */
  .chart-floating-left-bar #chart-timeframes.chart-timeframes,
  #chart-timeframes.chart-timeframes {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    z-index: 10 !important;
  }

  #chart-timeframes.chart-timeframes .tf-dropdown-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
  }

  #chart-timeframes.chart-timeframes #tf-dropdown-btn.tf-dropdown-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    font-family: 'Outfit', sans-serif !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  body.light-theme #chart-timeframes.chart-timeframes #tf-dropdown-btn.tf-dropdown-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--text-secondary) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  }

  #chart-timeframes.chart-timeframes #tf-dropdown-btn.tf-dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
  }

  body.light-theme #chart-timeframes.chart-timeframes #tf-dropdown-btn.tf-dropdown-btn:hover {
    background: #f1f5f9 !important;
    color: var(--text-primary) !important;
  }

  #chart-timeframes.chart-timeframes #tf-dropdown-btn.tf-dropdown-btn span {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: inherit !important;
    margin: 0 !important;
  }

  #chart-timeframes.chart-timeframes #tf-dropdown-btn.tf-dropdown-btn svg {
    display: none !important;
    /* Hide dropdown arrow on desktop */
  }

  /* Align timeframe dropdown menu upwards and to the right of the button */
  #chart-timeframes.chart-timeframes .tf-dropdown-menu {
    position: absolute !important;
    left: calc(100% + 10px) !important;
    bottom: 0 !important;
    top: auto !important;
    right: auto !important;
    z-index: 10000 !important;
    margin-top: 0 !important;
  }

  /* Align chart style menu upwards and to the right of the button */
  .chart-floating-left-bar .chart-style-menu {
    position: absolute !important;
    left: calc(100% + 10px) !important;
    bottom: 0 !important;
    top: auto !important;
    right: auto !important;
    z-index: 10000 !important;
    margin-top: 0 !important;
  }

  /* Position the floating sidebar tools at the bottom left corner */
  .chart-floating-left-bar {
    left: 32px !important;
    top: auto !important;
    bottom: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: center !important;
    z-index: 220 !important;
  }

  /* Reset margin on sidebar children wraps to use flex gap */
  .chart-floating-left-bar .chart-style-wrap {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Update main trade body height calculation based on taller tab row */
  .trade-body {
    height: calc(100vh - 98px) !important;
  }

  /* Live Clock Overlay inside Chart canvas wrap (Desktop Only) */
  #chart-live-clock-overlay {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    position: absolute !important;
    left: 42px !important;
    top: 14px !important;
    z-index: 40 !important;
    font-family: 'Inter', 'Outfit', sans-serif !important;
    font-size: 11px !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  #chart-live-clock-overlay .clock-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    pointer-events: none !important;
  }

  #pair-info-trigger-btn {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-family: 'Inter', 'Outfit', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.4) !important;
    transition: color 0.2s ease !important;
    outline: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
  }

  #pair-info-trigger-btn:hover {
    color: #a78bfa !important;
  }

  #pair-info-trigger-btn svg {
    width: 12px !important;
    height: 12px !important;
    fill: currentColor !important;
  }

  body.light-theme #pair-info-trigger-btn {
    color: rgba(0, 0, 0, 0.45) !important;
  }

  body.light-theme #pair-info-trigger-btn:hover {
    color: #6c00ff !important;
  }

  /* ================= PAIR INFORMATION MODAL STYLES ================= */

  /* Backdrop styles moved to global section */

  /* Modal Window */
  .pair-info-window {
    position: relative !important;
    width: 760px !important;
    max-width: 95vw !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, #141029 0%, #0d0a1b 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 40px rgba(108, 0, 255, 0.16) !important;
    padding: 26px 28px !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
  }

  body.light-theme .pair-info-window {
    background: #ffffff !important;
    border: 1px solid rgba(108, 0, 255, 0.18) !important;
    box-shadow: 0 20px 50px rgba(108, 0, 255, 0.12) !important;
    color: #0f172a !important;
  }

  /* Close Button */
  .pair-info-close-btn {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(139, 92, 246, 0.12) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    color: #c4b5fd !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    outline: none !important;
    transition: all 0.2s ease !important;
  }

  .pair-info-close-btn:hover {
    background: rgba(139, 92, 246, 0.25) !important;
    color: #ffffff !important;
    transform: rotate(90deg) scale(1.06) !important;
  }

  body.light-theme .pair-info-close-btn {
    background: rgba(108, 0, 255, 0.08) !important;
    border-color: rgba(108, 0, 255, 0.18) !important;
    color: #6c00ff !important;
  }

  /* Header Row */
  .pair-info-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding-right: 36px !important;
  }

  .pair-info-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .pair-info-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(108, 0, 255, 0.12) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 16px rgba(108, 0, 255, 0.2) !important;
    flex-shrink: 0 !important;
  }

  .pair-info-title-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .pair-info-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    letter-spacing: -0.3px !important;
  }

  body.light-theme .pair-info-title {
    color: #0f172a !important;
  }

  .pair-info-payout {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #6c00ff 0%, #8b5cf6 100%) !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(108, 0, 255, 0.35) !important;
    line-height: 1 !important;
  }

  .pair-info-market-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #c4b5fd !important;
    background: rgba(139, 92, 246, 0.12) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    padding: 2.5px 8px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
  }

  body.light-theme .pair-info-market-badge {
    color: #6c00ff !important;
    background: rgba(108, 0, 255, 0.08) !important;
    border-color: rgba(108, 0, 255, 0.2) !important;
  }

  .pair-info-halal-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #10b981 !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    padding: 2.5px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
  }

  .pair-info-subtitle {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
  }

  body.light-theme .pair-info-subtitle {
    color: rgba(15, 23, 42, 0.55) !important;
  }

  .pair-info-status-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 8px #10b981 !important;
    display: inline-block !important;
  }

  /* Price & Hero Section */
  .pair-info-section-row {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
  }

  body.light-theme .pair-info-section-row {
    background: #f8fafc !important;
    border: 1px solid rgba(108, 0, 255, 0.12) !important;
  }

  .pair-info-price-row {
    background: rgba(108, 0, 255, 0.07) !important;
    border: 1px solid rgba(139, 92, 246, 0.22) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  body.light-theme .pair-info-price-row {
    background: rgba(108, 0, 255, 0.04) !important;
    border: 1px solid rgba(108, 0, 255, 0.15) !important;
  }

  .pair-info-price-left {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    flex-wrap: wrap !important;
  }

  .pair-info-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin-bottom: 3px !important;
  }

  body.light-theme .pair-info-label {
    color: rgba(15, 23, 42, 0.5) !important;
  }

  .pair-info-value {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
  }

  body.light-theme .pair-info-value {
    color: #0f172a !important;
  }

  .pair-info-price {
    font-size: 24px !important;
    font-weight: 800 !important;
    font-family: 'Space Grotesk', monospace !important;
    letter-spacing: -0.5px !important;
    color: #ffffff !important;
  }

  body.light-theme .pair-info-price {
    color: #0f172a !important;
  }

  .pair-info-change {
    font-size: 18px !important;
    font-weight: 700 !important;
    font-family: 'Space Grotesk', monospace !important;
  }

  .pair-info-range-val {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }

  body.light-theme .pair-info-range-val {
    color: #334155 !important;
  }

  .pair-info-trade-btn {
    background: linear-gradient(135deg, #6c00ff 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 16px rgba(108, 0, 255, 0.4) !important;
    transition: all 0.2s ease !important;
  }

  .pair-info-trade-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(108, 0, 255, 0.55) !important;
  }

  /* Sentiment Row */
  .pair-info-sentiment-row {
    margin-bottom: 16px !important;
    padding: 14px 18px !important;
  }

  .pair-info-sentiment-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
  }

  .pair-info-sentiment-buy-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #10b981 !important;
  }

  .pair-info-sentiment-mid .pair-info-label {
    margin: 0 !important;
    font-size: 11px !important;
  }

  .pair-info-sentiment-sell-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ef4444 !important;
  }

  .pair-info-sentiment-bar-track {
    height: 8px !important;
    background: #ef4444 !important;
    border-radius: 4px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .pair-info-sentiment-bar-fill {
    height: 100% !important;
    background: #10b981 !important;
    border-radius: 4px 0 0 4px !important;
    transition: width 0.4s ease !important;
  }

  /* 12-Card Grid */
  .pair-info-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .pair-info-grid-box {
    background: rgba(17, 13, 34, 0.6) !important;
    border: 1px solid rgba(139, 92, 246, 0.12) !important;
    border-radius: 10px !important;
    padding: 11px 13px !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
  }

  .pair-info-grid-box:hover {
    border-color: rgba(139, 92, 246, 0.3) !important;
    background: rgba(139, 92, 246, 0.06) !important;
  }

  body.light-theme .pair-info-grid-box {
    background: #f8fafc !important;
    border: 1px solid rgba(108, 0, 255, 0.1) !important;
  }

  body.light-theme .pair-info-grid-box:hover {
    background: rgba(108, 0, 255, 0.04) !important;
    border-color: rgba(108, 0, 255, 0.25) !important;
  }

  .pair-info-profit {
    color: #a78bfa !important;
    font-weight: 800 !important;
  }

  body.light-theme .pair-info-profit {
    color: #6c00ff !important;
  }

  .pair-info-halal-text {
    color: #10b981 !important;
    font-weight: 700 !important;
  }

  /* Bottom Grid: Sparkline + Schedule */
  .pair-info-bottom-grid {
    display: grid !important;
    grid-template-columns: 320px 1fr !important;
    gap: 16px !important;
  }

  .pair-info-tabs-container {
    display: flex !important;
    gap: 4px !important;
    background: rgba(139, 92, 246, 0.08) !important;
    border-radius: 8px !important;
    padding: 3px !important;
    margin-bottom: 8px !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
  }

  body.light-theme .pair-info-tabs-container {
    background: #f1f5f9 !important;
    border-color: rgba(108, 0, 255, 0.1) !important;
  }

  .pair-info-tab {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    text-align: center !important;
    outline: none !important;
    transition: all 0.2s ease !important;
  }

  .pair-info-tab.active {
    background: linear-gradient(135deg, #6c00ff 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(108, 0, 255, 0.35) !important;
  }

  body.light-theme .pair-info-tab {
    color: rgba(15, 23, 42, 0.6) !important;
  }

  body.light-theme .pair-info-tab.active {
    color: #ffffff !important;
  }

  .pair-info-chart-wrap {
    background: rgba(9, 7, 18, 0.75) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    padding: 12px !important;
  }

  body.light-theme .pair-info-chart-wrap {
    background: #f8fafc !important;
    border-color: rgba(108, 0, 255, 0.12) !important;
  }

  .pair-info-spark-change {
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .pair-info-spark-range {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
  }

  body.light-theme .pair-info-spark-range {
    color: rgba(15, 23, 42, 0.5) !important;
  }

  .pair-info-spark-stats {
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .pair-info-spark-stats span {
    flex: 1 !important;
    background: rgba(139, 92, 246, 0.08) !important;
    border: 1px solid rgba(139, 92, 246, 0.14) !important;
    border-radius: 6px !important;
    padding: 5px 6px !important;
    font-size: 10.5px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-align: center !important;
  }

  body.light-theme .pair-info-spark-stats span {
    background: #f1f5f9 !important;
    border-color: rgba(108, 0, 255, 0.1) !important;
    color: #475569 !important;
  }

  /* Schedule Table */
  .pair-info-schedule-section {
    background: rgba(9, 7, 18, 0.6) !important;
    border: 1px solid rgba(139, 92, 246, 0.14) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
  }

  body.light-theme .pair-info-schedule-section {
    background: #f8fafc !important;
    border-color: rgba(108, 0, 255, 0.12) !important;
  }

  .pair-info-schedule-title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.2px !important;
  }

  body.light-theme .pair-info-schedule-title {
    color: #0f172a !important;
  }

  .pair-info-table-scroll {
    max-height: 180px !important;
    overflow-y: auto !important;
  }

  .pair-info-schedule-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 11.5px !important;
  }

  .pair-info-th {
    padding: 6px 8px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.4) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.15) !important;
    text-align: left !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  body.light-theme .pair-info-th {
    color: rgba(15, 23, 42, 0.5) !important;
    border-bottom-color: rgba(108, 0, 255, 0.12) !important;
  }

  #chart-live-clock-overlay #live-clock-time-text {
    font-weight: 700 !important;
    color: #ffffff !important;
  }

  body.light-theme #chart-live-clock-overlay #live-clock-time-text {
    color: #1e293b !important;
  }

  #chart-live-clock-overlay #live-clock-tz-text {
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin-left: 2px !important;
  }

  body.light-theme #chart-live-clock-overlay #live-clock-tz-text {
    color: rgba(0, 0, 0, 0.45) !important;
  }

  #chart-live-clock-overlay .clock-status-dot-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    background-color: rgba(139, 92, 246, 0.2) !important;
    border-radius: 50% !important;
  }

  #chart-live-clock-overlay .clock-status-dot {
    width: 6px !important;
    height: 6px !important;
    background-color: #8b5cf6 !important;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.8) !important;
    border-radius: 50% !important;
    display: inline-block !important;
  }
}

/* Mobile viewports layout for Live Clock & Pair Info */
@media (max-width: 767px) {
  #chart-live-clock-overlay {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    position: absolute !important;
    left: 10px !important;
    top: 8px !important;
    bottom: auto !important;
    z-index: 40 !important;
    background: transparent !important;
    pointer-events: auto !important;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s ease !important;
  }

  /* When mobile chart tools dropdown is expanded, slide clock to the right */
  #chart-live-clock-overlay.tools-expanded {
    left: 54px !important;
  }

  #chart-live-clock-overlay .clock-row {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    row-gap: 0 !important;
    column-gap: 4px !important;
    pointer-events: none !important;
  }

  #chart-live-clock-overlay .clock-status-dot-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 12px !important;
    height: 12px !important;
    background-color: rgba(139, 92, 246, 0.2) !important;
    border-radius: 50% !important;
  }

  #chart-live-clock-overlay .clock-status-dot {
    width: 5px !important;
    height: 5px !important;
    background-color: #8b5cf6 !important;
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.8) !important;
    border-radius: 50% !important;
    display: inline-block !important;
  }

  #chart-live-clock-overlay #live-clock-time-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
  }

  body.light-theme #chart-live-clock-overlay #live-clock-time-text {
    color: #1e293b !important;
  }

  #chart-live-clock-overlay #live-clock-tz-text {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    line-height: 1.1 !important;
  }

  body.light-theme #chart-live-clock-overlay #live-clock-tz-text {
    color: rgba(0, 0, 0, 0.45) !important;
  }

  /* Style trigger button as transparent icon on mobile */
  #pair-info-trigger-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    outline: none !important;
    color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: none !important;
  }

  body.light-theme #pair-info-trigger-btn {
    color: rgba(0, 0, 0, 0.45) !important;
  }

  #pair-info-trigger-btn span {
    display: none !important;
    /* Hide label text on mobile */
  }

  #pair-info-trigger-btn svg {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
    margin: 0 !important;
  }

  /* Mobile layout styling for Pair Info Modal Window */
  .pair-info-window {
    position: relative !important;
    width: 94% !important;
    max-width: 460px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    padding: 18px 14px !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 30px rgba(108, 0, 255, 0.15) !important;
    background: linear-gradient(180deg, #141029 0%, #0d0a1b 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    box-sizing: border-box !important;
  }

  body.light-theme .pair-info-window {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(108, 0, 255, 0.18) !important;
    box-shadow: 0 16px 40px rgba(108, 0, 255, 0.12) !important;
  }

  /* Close button */
  .pair-info-close-btn {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(139, 92, 246, 0.12) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    color: #c4b5fd !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    z-index: 10 !important;
    box-shadow: none !important;
  }

  body.light-theme .pair-info-close-btn {
    background: rgba(108, 0, 255, 0.08) !important;
    border-color: rgba(108, 0, 255, 0.18) !important;
    color: #6c00ff !important;
  }

  /* Header */
  .pair-info-header-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    padding-right: 36px !important;
    border-bottom: none !important;
    width: 100% !important;
  }

  .pair-info-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .pair-info-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(108, 0, 255, 0.12) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .pair-info-title-line {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .pair-info-title {
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  .pair-info-payout {
    font-size: 11.5px !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
  }

  .pair-info-market-badge {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
  }

  .pair-info-halal-badge {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
  }

  .pair-info-subtitle {
    font-size: 11px !important;
    margin-top: 3px !important;
  }

  /* Section Rows - Horizontal price row */
  .pair-info-section-row {
    padding: 11px 13px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }

  .pair-info-price-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(108, 0, 255, 0.08) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
  }

  .pair-info-price-left {
    display: flex !important;
    gap: 14px !important;
    align-items: center !important;
  }

  .pair-info-range-quick-group {
    display: none !important;
    /* Keep compact on mobile */
  }

  .pair-info-price-row .pair-info-label {
    font-size: 9.5px !important;
    white-space: nowrap !important;
    margin-bottom: 2px !important;
  }

  .pair-info-price {
    font-size: 17px !important;
  }

  .pair-info-change {
    font-size: 13.5px !important;
  }

  .pair-info-trade-btn {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: linear-gradient(135deg, #6c00ff 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: 0 3px 12px rgba(108, 0, 255, 0.35) !important;
  }

  .pair-info-trade-btn svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Sentiment Row Mobile */
  .pair-info-sentiment-row {
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
  }

  .pair-info-sentiment-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 6px !important;
  }

  .pair-info-sentiment-buy-title {
    font-size: 11.5px !important;
  }

  .pair-info-sentiment-sell-title {
    font-size: 11.5px !important;
  }

  .pair-info-sentiment-mid {
    display: none !important;
  }

  .pair-info-sentiment-bar-track {
    height: 6px !important;
    border-radius: 3px !important;
  }

  /* Grid Details on Mobile — 2-Column Responsive Grid */
  .pair-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 7px !important;
    margin-bottom: 12px !important;
  }

  .pair-info-grid-box {
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }

  .pair-info-grid-box .pair-info-label {
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }

  .pair-info-grid-box .pair-info-value {
    font-size: 12px !important;
  }

  /* Bottom Grid: Sparkline & Schedule on Mobile */
  .pair-info-bottom-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .pair-info-sparkline-section {
    display: block !important;
    width: 100% !important;
  }

  .pair-info-tabs-container {
    padding: 2px !important;
    margin-bottom: 6px !important;
  }

  .pair-info-tab {
    padding: 5px 2px !important;
    font-size: 10px !important;
  }

  .pair-info-chart-wrap {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  .pair-info-spark-stats {
    margin-top: 6px !important;
    gap: 4px !important;
  }

  .pair-info-spark-stats span {
    padding: 4px 6px !important;
    font-size: 9.5px !important;
  }

  .pair-info-schedule-section {
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  .pair-info-schedule-title {
    font-size: 11.5px !important;
    margin-bottom: 6px !important;
  }

  .pair-info-table-scroll {
    max-height: 140px !important;
  }

  .pair-info-schedule-table {
    font-size: 10.5px !important;
  }

  .pair-info-schedule-table th,
  .pair-info-schedule-table td {
    padding: 5px 6px !important;
  }
}

/* ============================================================
   PENDING TRADE SYSTEM STYLES
   ============================================================ */

/* Set Button - 3D Zenance Purple Pill */
.tc-pending-set-btn {
  background: linear-gradient(135deg, #7c14ff 0%, #6c00ff 60%, #5800d4 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  cursor: pointer !important;
  box-shadow: 0 2.5px 0 #4200a0, 0 4px 12px rgba(108, 0, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transition: all 0.15s ease !important;
}

.tc-pending-set-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3.5px 0 #4200a0, 0 6px 16px rgba(108, 0, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  background: linear-gradient(135deg, #8b2df7 0%, #750eff 60%, #5d02e0 100%) !important;
}

.tc-pending-set-btn:active {
  transform: translateY(1.5px) !important;
  box-shadow: 0 1px 0 #4200a0, 0 2px 6px rgba(108, 0, 255, 0.25) !important;
}

body.light-theme .tc-pending-set-btn {
  background: linear-gradient(135deg, #7c14ff 0%, #6c00ff 60%, #5800d4 100%) !important;
  color: #ffffff !important;
}

/* Drawer Close Button */
.pending-drawer-close-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.light-theme .pending-drawer-close-btn {
  color: rgba(30, 41, 59, 0.55) !important;
}

/* Toggle Switch Row */
.tc-pending-trade-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  transition: all 0.2s ease !important;
}

body.light-theme .tc-pending-trade-row {
  background: linear-gradient(135deg, rgba(108, 0, 255, 0.04) 0%, rgba(139, 92, 246, 0.02) 100%) !important;
  border: 1px solid rgba(108, 0, 255, 0.15) !important;
  box-shadow: 0 2px 10px rgba(108, 0, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  color: #1e293b !important;
}

body:not(.light-theme) .tc-pending-trade-row {
  background: linear-gradient(135deg, rgba(108, 0, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(108, 0, 255, 0.22) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.tc-pending-label-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tc-pending-clock-icon {
  width: 15px !important;
  height: 15px !important;
  fill: #6c00ff !important;
  filter: drop-shadow(0 0 6px rgba(108, 0, 255, 0.35)) !important;
}

body:not(.light-theme) .tc-pending-clock-icon {
  fill: #a78bfa !important;
}

.tc-pending-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  color: #6c00ff !important;
}

body:not(.light-theme) .tc-pending-label {
  color: #c4b5fd !important;
}

/* Pending Trade Drawer */
.pending-trade-drawer {
  position: fixed !important;
  width: 260px;
  background: #0e111a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
  padding: 16px !important;
  z-index: 500000 !important;
  display: none;
  flex-direction: column !important;
  gap: 14px !important;
  border-radius: 12px !important;
  height: auto !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
}

body.light-theme .pending-trade-drawer {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Tabs */
.pending-drawer-tabs {
  display: flex !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 6px !important;
  padding: 2px !important;
}

body.light-theme .pending-drawer-tabs {
  background: #f1f5f9 !important;
}

.pending-tab-btn {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 0 !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  text-align: center !important;
  transition: all 0.2s !important;
}

body.light-theme .pending-tab-btn {
  color: rgba(30, 41, 59, 0.55) !important;
}

.pending-tab-btn.active {
  background: linear-gradient(135deg, #7c14ff 0%, #6c00ff 60%, #5800d4 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

body.light-theme .pending-tab-btn.active {
  background: linear-gradient(135deg, #7c14ff 0%, #6c00ff 60%, #5800d4 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Drawer Body */
.pending-drawer-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  overflow-y: auto !important;
  flex: 1 !important;
  padding-bottom: 4px !important;
}

/* Input Box */
/* ── PDC Card System (matches main panel tc-mobile-col style) ── */
.pdc-card {
  position: relative !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 9px !important;
  padding: 14px 10px 10px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin-top: 8px !important;
}

body.light-theme .pdc-card {
  background: #f8fafc !important;
  border-color: rgba(139, 92, 246, 0.18) !important;
}

/* Floating label — same as tc-card-label */
.pdc-card-label {
  position: absolute !important;
  top: -8px !important;
  left: 10px !important;
  background: #0e111a !important;
  padding: 0 5px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #a78bfa !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  z-index: 1 !important;
}

body.light-theme .pdc-card-label {
  background: #ffffff !important;
  color: #6c00ff !important;
}

/* Input row — same as tc-input-row */
.pdc-input-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  justify-content: space-between !important;
}

/* Step buttons — same as tc-step-btn */
.pdc-step-btn {
  width: 28px !important;
  height: 28px !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: white !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.15s !important;
}

.pdc-step-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

body.light-theme .pdc-step-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  color: #1e293b !important;
}

/* Value input — same as tc-amount-input */
.pdc-value-input {
  flex: 1 !important;
  height: 28px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  border-radius: 5px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
  outline: none !important;
  width: 0 !important;
  min-width: 0 !important;
}

body.light-theme .pdc-value-input {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.09) !important;
  color: #1e293b !important;
}

/* Full-width time input (no step buttons) */
.pdc-time-input {
  width: 100% !important;
  flex: unset !important;
  height: 32px !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
}

/* Custom Dropdown Container */
.pdc-dropdown-trigger {
  position: relative !important;
}

.pdc-value-display {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-align: center !important;
}

body.light-theme .pdc-value-display {
  color: #1e293b !important;
}

.pdc-arrow {
  font-size: 8px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-left: 6px !important;
  transition: transform 0.2s !important;
}

body.light-theme .pdc-arrow {
  color: rgba(30, 41, 59, 0.55) !important;
}

.pdc-custom-dropdown {
  position: absolute !important;
  top: 105% !important;
  left: 0 !important;
  right: 0 !important;
  background: #0e111a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
  z-index: 10000 !important;
  display: none;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 4px 0 !important;
}

body.light-theme .pdc-custom-dropdown {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.pdc-dropdown-option {
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.15s !important;
}

.pdc-dropdown-option:first-child {
  border-top-left-radius: 7px !important;
  border-top-right-radius: 7px !important;
}

.pdc-dropdown-option:last-child {
  border-bottom-left-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
}

body.light-theme .pdc-dropdown-option {
  color: rgba(30, 41, 59, 0.7) !important;
}

.pdc-dropdown-option:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

body.light-theme .pdc-dropdown-option:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  color: #1e293b !important;
}

.pdc-dropdown-option.active {
  background: linear-gradient(135deg, #7c14ff 0%, #6c00ff 100%) !important;
  color: #ffffff !important;
}

body.light-theme .pdc-dropdown-option.active {
  background: linear-gradient(135deg, #7c14ff 0%, #6c00ff 100%) !important;
  color: #ffffff !important;
}

/* Subtext */
.pdc-subtext {
  font-size: 9px !important;
  color: rgba(255, 255, 255, 0.35) !important;
  text-align: center !important;
  margin-top: 1px !important;
}

body.light-theme .pdc-subtext {
  color: rgba(30, 41, 59, 0.45) !important;
}

/* SWITCH label row */
.pdc-switch-row {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  color: #6c00ff !important;
  text-align: center !important;
  letter-spacing: 0.6px !important;
  cursor: pointer !important;
  margin-top: 3px !important;
  text-transform: uppercase !important;
  transition: all 0.15s ease !important;
}

body:not(.light-theme) .pdc-switch-row {
  color: #a78bfa !important;
}

.pdc-switch-row:hover {
  color: #4f00b8 !important;
  text-shadow: 0 0 8px rgba(108, 0, 255, 0.25) !important;
}

body:not(.light-theme) .pdc-switch-row:hover {
  color: #ffffff !important;
}

/* 3D Glassy Action Buttons for Pending Drawer */
.pending-action-buttons {
  display: flex !important;
  gap: 10px !important;
  margin-top: 6px !important;
}

.pending-action-btn {
  flex: 1 !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  user-select: none !important;
  backdrop-filter: blur(18px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(190%) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.35) !important;
}

.pending-action-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 4px !important;
  right: 4px !important;
  height: 46% !important;
  border-radius: 12px 12px 6px 6px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.pending-action-btn::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 10% !important;
  right: 10% !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* Nexter / Zenance Theme UP Button (Purple Liquid Glass) */
body[data-candle-theme="nexter"] .pending-action-btn.btn-up,
body[data-candle-theme="zenance"] .pending-action-btn.btn-up,
body:not([data-candle-theme="classic"]) .pending-action-btn.btn-up {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.95) 0%, rgba(139, 92, 246, 0.9) 48%, rgba(108, 0, 255, 0.98) 100%) !important;
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.65), inset 0 -2px 4px rgba(88, 0, 212, 0.4) !important;
  border: 1.2px solid rgba(216, 180, 254, 0.45) !important;
}

body[data-candle-theme="nexter"] .pending-action-btn.btn-up:hover,
body[data-candle-theme="zenance"] .pending-action-btn.btn-up:hover,
body:not([data-candle-theme="classic"]) .pending-action-btn.btn-up:hover {
  transform: translateY(-1.5px) scale(1.01) !important;
  background: linear-gradient(180deg, rgba(180, 158, 255, 0.98) 0%, rgba(153, 107, 248, 0.94) 48%, rgba(124, 58, 237, 1) 100%) !important;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.55), 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.75) !important;
}

body[data-candle-theme="nexter"] .pending-action-btn.btn-up:active,
body[data-candle-theme="zenance"] .pending-action-btn.btn-up:active,
body:not([data-candle-theme="classic"]) .pending-action-btn.btn-up:active {
  transform: translateY(1.5px) scale(0.985) !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Classic Theme UP Button (Green Liquid Glass) */
body[data-candle-theme="classic"] .pending-action-btn.btn-up {
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.95) 0%, rgba(16, 185, 129, 0.9) 48%, rgba(5, 150, 105, 0.98) 100%) !important;
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.65), inset 0 -2px 4px rgba(4, 120, 87, 0.4) !important;
  border: 1.2px solid rgba(167, 243, 208, 0.45) !important;
}

body[data-candle-theme="classic"] .pending-action-btn.btn-up:hover {
  transform: translateY(-1.5px) scale(1.01) !important;
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.98) 0%, rgba(34, 197, 94, 0.94) 48%, rgba(16, 185, 129, 1) 100%) !important;
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.55), 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.75) !important;
}

body[data-candle-theme="classic"] .pending-action-btn.btn-up:active {
  transform: translateY(1.5px) scale(0.985) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* DOWN Button (Ruby Liquid Glass) */
.pending-action-btn.btn-down {
  background: linear-gradient(180deg, rgba(251, 113, 133, 0.95) 0%, rgba(244, 63, 94, 0.9) 48%, rgba(225, 29, 72, 0.98) 100%) !important;
  box-shadow: 0 6px 22px rgba(225, 29, 72, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.65), inset 0 -2px 4px rgba(190, 18, 60, 0.4) !important;
  border: 1.2px solid rgba(254, 205, 211, 0.45) !important;
}

.pending-action-btn.btn-down:hover {
  transform: translateY(-1.5px) scale(1.01) !important;
  background: linear-gradient(180deg, rgba(253, 164, 175, 0.98) 0%, rgba(244, 63, 94, 0.94) 48%, rgba(225, 29, 72, 1) 100%) !important;
  box-shadow: 0 10px 28px rgba(225, 29, 72, 0.55), 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.75) !important;
}

.pending-action-btn.btn-down:active {
  transform: translateY(1.5px) scale(0.985) !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.pending-action-icon {
  width: 14px !important;
  height: 14px !important;
  fill: #ffffff !important;
  position: relative !important;
  z-index: 4 !important;
}

.pending-arrow-icon {
  width: 12px !important;
  height: 12px !important;
  fill: #ffffff !important;
  position: relative !important;
  z-index: 4 !important;
}

.pending-how-it-works {
  text-align: center !important;
  margin-top: 6px !important;
}

.pending-how-it-works a {
  font-size: 10.5px !important;
  color: #6c00ff !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.15s ease !important;
}

body:not(.light-theme) .pending-how-it-works a {
  color: #a78bfa !important;
}

.pending-how-it-works a:hover {
  color: #4f00b8 !important;
  text-decoration: underline !important;
}

/* Pending Trade Card */
.pending-trade-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  position: relative !important;
}

body.light-theme .pending-trade-card {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.pending-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.pending-card-asset {
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.light-theme .pending-card-asset {
  color: #0f172a !important;
}

.pending-card-cancel {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  padding: 2px !important;
}

body.light-theme .pending-card-cancel {
  color: rgba(15, 23, 42, 0.6) !important;
}

.pending-card-info {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.pending-card-info span {
  font-weight: 600 !important;
}

.pending-card-info .text-green {
  font-weight: 700 !important;
  color: #1ab76d !important;
}

.pending-card-info .text-danger {
  font-weight: 700 !important;
  color: #ef4444 !important;
}

body.light-theme .pending-card-info {
  color: #1e293b !important;
}

/* Compact Pending Toggle Hidden by default on desktop */
.tc-mobile-pending-toggle {
  display: none !important;
}

/* Mobile responsive override */
@media (max-width: 767px) {

  /* Hide the large pending trade card box on mobile view to maximize chart space */
  .tc-pending-trade-row {
    display: none !important;
  }

  /* Compact Pending Toggle in Asset Selector Row */
  .tc-mobile-pending-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    user-select: none !important;
  }

  body.light-theme .tc-mobile-pending-toggle {
    background: transparent !important;
    border: none !important;
  }

  .tc-pending-toggle-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #38bdf8 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
  }

  body.light-theme .tc-pending-toggle-label {
    color: #0284c7 !important;
  }

  .tc-pending-switch {
    width: 28px !important;
    height: 16px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    position: relative !important;
    transition: background 0.2s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  body.light-theme .tc-pending-switch {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.04) !important;
  }

  .tc-pending-switch-handle {
    width: 12px !important;
    height: 12px !important;
    background: #94a3b8 !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 1px !important;
    left: 2px !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
  }

  body.light-theme .tc-pending-switch-handle {
    background: #64748b !important;
  }

  /* Active toggled state colors and position shift */
  .tc-mobile-pending-toggle.active {
    background: transparent !important;
    border: none !important;
  }

  .tc-mobile-pending-toggle.active .tc-pending-switch {
    background: #0088ff !important;
  }

  .tc-mobile-pending-toggle.active .tc-pending-switch-handle {
    transform: translateX(12px) !important;
    background: #ffffff !important;
  }

  .pending-trade-drawer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: auto !important;
    max-height: 52vh !important;
    width: 100% !important;
    border-top: 2px solid #8b5cf6 !important;
    border-left: none !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.85), 0 0 24px rgba(108, 0, 255, 0.25) !important;
    z-index: 500000 !important;
    padding: 10px 14px 16px 14px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .pending-trade-drawer .pending-drawer-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .pending-trade-drawer .pdc-card {
    padding: 5px 10px !important;
    margin-bottom: 0 !important;
    border-radius: 8px !important;
  }

  .pending-trade-drawer .pending-action-buttons {
    margin-top: 4px !important;
    gap: 8px !important;
  }

  .pending-trade-drawer .pending-action-btn {
    height: 40px !important;
    font-size: 13px !important;
  }

  .pending-trade-drawer .pending-how-it-works {
    margin-top: 4px !important;
  }

  body.light-theme .pending-trade-drawer {
    background: #ffffff !important;
    border-top: 2px solid #8b5cf6 !important;
    box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.18), 0 0 20px rgba(108, 0, 255, 0.12) !important;
  }
}

/* Guidance Modal Backdrop */
.pending-guide-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999999 !important;
  /* extremely high to cover everything */
  backdrop-filter: blur(4px) !important;
}

/* Modal Content Box */
.pending-guide-modal-content {
  background: #252a37 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  width: 90% !important;
  max-width: 500px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  padding: 24px !important;
  position: relative !important;
  animation: modalFadeIn 0.25s ease-out !important;
}

body.light-theme .pending-guide-modal-content {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header & Title */
.pending-guide-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.pending-guide-modal-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.pending-guide-clock-icon-wrap {
  width: 28px !important;
  height: 28px !important;
  background: rgba(255, 152, 0, 0.15) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pending-guide-clock-icon {
  width: 18px !important;
  height: 18px !important;
  fill: #ff9800 !important;
}

.pending-guide-modal-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

body.light-theme .pending-guide-modal-title {
  color: #1e293b !important;
}

.pending-guide-modal-close {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: color 0.15s !important;
  padding: 4px !important;
}

.pending-guide-modal-close:hover {
  color: #ffffff !important;
}

body.light-theme .pending-guide-modal-close {
  color: rgba(30, 41, 59, 0.4) !important;
}

body.light-theme .pending-guide-modal-close:hover {
  color: #1e293b !important;
}

/* Divider */
.pending-guide-modal-divider {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 16px 0 !important;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12) !important;
}

body.light-theme .pending-guide-modal-divider {
  background: rgba(0, 0, 0, 0.08) !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

/* Modal Body / Text Content */
.pending-guide-modal-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.pending-guide-modal-body p {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
}

body.light-theme .pending-guide-modal-body p {
  color: rgba(30, 41, 59, 0.8) !important;
}

.pending-guide-modal-body strong {
  color: #ff9800 !important;
  font-weight: 700 !important;
}

/* Prevent main page scrolling/rubber-banding when overlay is open on mobile */
html.gxm-overlay-open,
body.gxm-overlay-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* Ensure smooth WebKit scroll inside mobile popup container lists */
.gxm-mo-body,
.asset-picker-list {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Timezone Settings Dropdown styles */
.settings-select {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  outline: none !important;
  cursor: pointer !important;
  max-width: 140px !important;
  transition: all 0.2s ease !important;
}

.settings-select:focus {
  border-color: var(--primary) !important;
}

.settings-select option {
  background: #0f172a !important;
  color: #ffffff !important;
}

body.light-theme .settings-select {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .settings-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Light Theme Circular Buttons Contrast Overrides */
body.light-theme .profile-header-back-btn,
body.light-theme .profile-cog-btn,
body.light-theme .profile-add-btn {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06) !important;
}

body.light-theme .profile-header-back-btn:hover,
body.light-theme .profile-cog-btn:hover,
body.light-theme .profile-add-btn:hover {
  background: rgba(18, 130, 76, 0.08) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Glassmorphic KYC Lock Modal */
.kyc-lock-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(7, 9, 14, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 2000000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: kycFadeIn 0.3s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

.kyc-lock-modal {
  background: linear-gradient(145deg, rgba(20, 24, 34, 0.95), rgba(11, 14, 20, 0.98));
  border: 1px solid rgba(147, 51, 234, 0.25);
  border-radius: 24px;
  padding: 36px 28px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(124, 58, 237, 0.15);
  transform: scale(0.9);
  animation: kycPopIn 0.35s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #ffffff;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  position: relative;
}

.kyc-lock-icon-wrap {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.2) 0%, rgba(124, 58, 237, 0.1) 100%);
  border: 2px solid rgba(168, 85, 247, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #c084fc;
  box-shadow: 0 0 30px rgba(147, 51, 234, 0.3);
}

.kyc-lock-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.kyc-lock-text {
  font-size: 14px;
  line-height: 1.6;
  color: #94a3b8;
  margin-bottom: 28px;
  padding: 0 10px;
}

.kyc-lock-btn-primary {
  width: 100%;
  height: 48px;
  border-radius: 24px;
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 50%, #6d28d9 100%) !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45) !important;
  transition: all 0.25s ease;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.kyc-lock-btn-primary:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.6) !important;
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 50%, #7c3aed 100%) !important;
}

.kyc-lock-btn-secondary {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.kyc-lock-btn-secondary:hover {
  background: rgba(147, 51, 234, 0.1);
  color: #ffffff;
  border-color: rgba(147, 51, 234, 0.3);
}

/* Light Theme overrides */
body.light-theme .kyc-lock-modal {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(147, 51, 234, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 0 30px rgba(124, 58, 237, 0.1);
  color: #0f172a;
}

body.light-theme .kyc-lock-title {
  color: #0f172a;
}

body.light-theme .kyc-lock-text {
  color: #475569;
}

body.light-theme .kyc-lock-btn-secondary {
  background: rgba(0, 0, 0, 0.03);
  color: #475569;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .kyc-lock-btn-secondary:hover {
  background: rgba(147, 51, 234, 0.08);
  color: #7c3aed;
  border-color: rgba(147, 51, 234, 0.3);
}

background: rgba(0, 0, 0, 0.06);
color: #0f172a;
}

@keyframes kycFadeIn {
  to {
    opacity: 1;
  }
}

@keyframes kycPopIn {
  to {
    transform: scale(1);
  }
}

/* ==========================================================================
   QUOTEX-STYLE PAYMENT METHOD BOX BUTTONS (DEPOSIT & WITHDRAWAL)
   ========================================================================== */
.payment-methods-grid,
#deposit-methods-grid,
#withdraw-methods-grid,
#deposit-custom-select-options,
#withdraw-custom-select-options {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 10px !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
  position: relative !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 640px) {

  .payment-methods-grid,
  #deposit-methods-grid,
  #withdraw-methods-grid,
  #deposit-custom-select-options,
  #withdraw-custom-select-options {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* Quotex Box Button Card */
.payment-method-btn {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  position: relative !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  text-decoration: none !important;
  margin: 0 !important;
}

body:not(.light-theme) .payment-method-btn {
  background: #191e29 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.payment-method-btn:hover {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.05) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.15) !important;
}

.payment-method-btn.selected,
.payment-method-btn--active {
  border: 2px solid #10b981 !important;
  background: #f0fdf4 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

body:not(.light-theme) .payment-method-btn.selected,
body:not(.light-theme) .payment-method-btn--active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.05)) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.25) !important;
}

/* Left Section Inside Box Button */
.payment-method-btn-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

/* Icon Wrap Container */
.payment-method-icon-wrap {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.payment-method-icon-wrap img,
.payment-method-icon-wrap svg {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.12)) !important;
}

.payment-method-btn:hover .payment-method-icon-wrap,
.payment-method-btn.selected .payment-method-icon-wrap {
  background: transparent !important;
  border-color: transparent !important;
  transform: scale(1.08) !important;
}

/* Info Text Block */
.payment-method-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  text-align: left !important;
}

.payment-method-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

body:not(.light-theme) .payment-method-title {
  color: #ffffff !important;
}

.payment-method-sub {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

body:not(.light-theme) .payment-method-sub {
  color: #94a3b8 !important;
}

/* Arrow Icon Right */
.payment-method-arrow {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
  transition: all 0.2s ease !important;
}

.payment-method-btn:hover .payment-method-arrow,
.payment-method-btn.selected .payment-method-arrow {
  color: #10b981 !important;
  transform: translateX(3px) !important;
}

/* =========================================================================
   3D DARK/LIGHT PURPLE NOTIFICATIONS (TOASTS) - ROUNDED-MD
   ========================================================================= */

.toast-container {
  position: fixed !important;
  top: 24px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 99999999 !important;
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  pointer-events: none !important;
}

.toast,
body.light-theme .toast {
  pointer-events: auto !important;
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  /* rounded-md */
  background: linear-gradient(145deg, #1e0b3c 0%, #110522 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  box-shadow:
    0 16px 36px -6px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(108, 0, 255, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 1px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  color: #ffffff !important;
  overflow: hidden !important;
  transform-origin: top center !important;
  animation: toast3dEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease !important;
}

.toast.toast-exiting {
  animation: toast3dExit 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.toast:hover {
  transform: perspective(800px) translateY(-2px) scale(1.01) !important;
  box-shadow:
    0 20px 42px -6px rgba(0, 0, 0, 0.8),
    0 0 32px rgba(168, 85, 247, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px rgba(0, 0, 0, 0.5) !important;
}

/* Toast Icon Wrapper - 3D Rounded Square */
.toast-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, rgba(108, 0, 255, 0.45), rgba(168, 85, 247, 0.25)) !important;
  border: 1px solid rgba(192, 132, 252, 0.4) !important;
  box-shadow: 0 3px 10px rgba(108, 0, 255, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  color: #f3e8ff !important;
}

/* Status Type Overrides */
.toast-success .toast-icon {
  background: linear-gradient(135deg, rgba(108, 0, 255, 0.5), rgba(168, 85, 247, 0.3)) !important;
  border-color: rgba(192, 132, 252, 0.5) !important;
  color: #c084fc !important;
}

.toast-error .toast-icon {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.45), rgba(108, 0, 255, 0.3)) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fca5a5 !important;
}

.toast-warning .toast-icon {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.45), rgba(108, 0, 255, 0.3)) !important;
  border-color: rgba(252, 211, 77, 0.45) !important;
  color: #fde047 !important;
}

.toast-info .toast-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.45), rgba(168, 85, 247, 0.3)) !important;
  border-color: rgba(165, 180, 252, 0.45) !important;
  color: #c7d2fe !important;
}

/* Toast Body */
.toast-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.toast-title,
body.light-theme .toast-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  color: #f3e8ff !important;
  line-height: 1.3 !important;
}

.toast-subtitle,
body.light-theme .toast-subtitle {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #d8b4fe !important;
  line-height: 1.45 !important;
  word-break: break-word !important;
}

/* Close Button */
.toast-close,
body.light-theme .toast-close {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #d8b4fe !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.toast-close:hover {
  background: rgba(168, 85, 247, 0.25) !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
  border-color: rgba(192, 132, 252, 0.5) !important;
}

/* 3D Progress Line */
.toast::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 2.5px !important;
  width: 100% !important;
  background: linear-gradient(90deg, #6c00ff, #c084fc, #e879f9) !important;
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.8) !important;
  animation: toastProgress var(--toast-duration, 4000ms) linear forwards !important;
}

@keyframes toastProgress {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

/* 3D Smooth Animations */
@keyframes toast3dEnter {
  0% {
    opacity: 0;
    transform: perspective(800px) translateY(-32px) translateZ(-40px) rotateX(16deg) scale(0.92);
    filter: blur(4px);
  }

  60% {
    transform: perspective(800px) translateY(4px) translateZ(6px) rotateX(-2deg) scale(1.02);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: perspective(800px) translateY(0) translateZ(0) rotateX(0deg) scale(1);
    filter: blur(0);
  }
}

@keyframes toast3dExit {
  0% {
    opacity: 1;
    transform: perspective(800px) translateY(0) translateZ(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: perspective(800px) translateY(-24px) translateZ(-50px) rotateX(14deg) scale(0.92);
    filter: blur(3px);
  }
}

/* =========================================================================
   NEXTER TRADING — ULTRA-PREMIUM RADIANT PURPLE DASHBOARD & DESIGN SYSTEM
   Theme: Nexter Royal Purple (#6c00ff)
   Typography: Inter (UI/Body) & Outfit (Industrial Display & Digits)
   ========================================================================= */

:root {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --font-mono: 'Space Grotesk', monospace !important;
  --nexter-purple: #6c00ff !important;
  --nexter-purple-hover: #5800d4 !important;
  --nexter-purple-light: rgba(108, 0, 255, 0.12) !important;
  --nexter-purple-glow: rgba(108, 0, 255, 0.35) !important;
  --nexter-purple-gradient: linear-gradient(135deg, #6c00ff 0%, #8b3dff 100%) !important;
  --nexter-radiant: linear-gradient(135deg, #6c00ff 0%, #7d1ff0 42%, #8e38ff 78%, #4e00b8 100%) !important;
  --zenance-purple: var(--nexter-purple) !important;
  --zenance-purple-hover: var(--nexter-purple-hover) !important;
  --zenance-purple-light: var(--nexter-purple-light) !important;
  --zenance-purple-glow: var(--nexter-purple-glow) !important;
  --zenance-purple-gradient: var(--nexter-purple-gradient) !important;
  --zenance-radiant: var(--nexter-radiant) !important;
}

body,
html {
  font-family: var(--font-family) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Industrial Digits & Display Heads */
.balance-card-amount,
#dashboard-balance,
.stats-val,
.section-title,
.card-title,
.tc-amount-input,
.tc-payout-preview,
.tc-time-display-val,
.account-balance,
.market-price,
.trade-pnl-val,
.stats-card .stats-val,
.bal-btn,
.sidebar-trade-btn,
.btn-primary,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display) !important;
  font-feature-settings: 'tnum' 1, 'lnum' 1 !important;
  letter-spacing: -0.02em !important;
}

/* Floating Top Bar (No solid bar, completely transparent, seamless controls) */
/* Top Bar (Attached directly to top: 0, zero gap above, sleek rounded bottom corners) */
.floating-top-header,
#app-header.floating-top-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  background: rgba(18, 20, 30, 0.45) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-top: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0 0 20px 20px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
  max-width: 1280px !important;
  width: calc(100% - 48px) !important;
  margin: 0 auto !important;
  padding: 6px 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

body.light-theme .floating-top-header,
body.light-theme #app-header.floating-top-header {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-top: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 8px 24px rgba(108, 0, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

/* Floating Top Bar Left: Dynamic Welcome Greeting */
.floating-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 44px !important;
}

.header-welcome-greeting-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.header-welcome-text {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.4px !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
  filter: none !important;
}

body:not(.light-theme) .header-welcome-text {
  color: #ffffff !important;
  text-shadow: none !important;
  filter: none !important;
}

.header-welcome-text .welcome-highlight-name {
  color: #6c00ff !important;
  text-shadow: none !important;
  filter: none !important;
}

body:not(.light-theme) .header-welcome-text .welcome-highlight-name {
  color: #a855f7 !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Waving Hand Keyframe Animation */
/* Waving Hand Keyframe Animation */
@keyframes waveHandAnimation {
  0% {
    transform: rotate(14deg);
  }

  12% {
    transform: rotate(38deg);
  }

  25% {
    transform: rotate(-8deg);
  }

  38% {
    transform: rotate(36deg);
  }

  52% {
    transform: rotate(-6deg);
  }

  65% {
    transform: rotate(32deg);
  }

  78% {
    transform: rotate(2deg);
  }

  90% {
    transform: rotate(22deg);
  }

  100% {
    transform: rotate(14deg);
  }
}

/* Hand Icon: 52px, rotated 14deg at rest, natural wrist transform-origin, zero shadows */
.header-wave-hand-icon {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  display: inline-block !important;
  transform: rotate(14deg);
  transform-origin: 70% 85% !important;
  filter: none !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
  will-change: transform !important;
}

/* Plays waving animation once on initial page load / refresh / revisit */
.header-wave-hand-icon.wave-animated {
  animation: waveHandAnimation 1.8s cubic-bezier(0.25, 1, 0.5, 1) both !important;
}

/* Plays waving animation continuously on hover over hand or entire greeting text */
.header-wave-hand-icon:hover,
.header-wave-hand-icon.wave-hovering,
.header-welcome-greeting-wrap:hover .header-wave-hand-icon {
  animation: waveHandAnimation 1.3s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

.floating-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  /* Close, modern gap without serious space */
  height: 44px !important;
}

/* Floating Bell Button (Clean circle, no hover scaling) */
.floating-bell-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  padding: 0 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  transform: none !important;
}

body:not(.light-theme) .floating-bell-btn {
  background: #151824 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

.floating-bell-btn:hover {
  border-color: rgba(108, 0, 255, 0.4) !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.18) !important;
  transform: none !important;
  /* No layout shifting hover effect */
}

/* Universal 3D Bell Container */
.bell-icon-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  vertical-align: middle !important;
}

/* Universal 3D Bell Image */
.bell-3d-icon {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22)) !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Floating Bell Button (Desktop Header & Mobile Non-Dashboard Header): Prominent, beautifully balanced 32px */
.floating-bell-btn .bell-3d-icon {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}

/* Micro-interaction: Subtle bell ring tilt */
.floating-bell-btn:hover .bell-3d-icon,
.trade-bell-btn:hover .bell-3d-icon,
.mobile-hero-bell-btn:active .bell-3d-icon {
  transform: rotate(-10deg) scale(1.06) !important;
}

/* Universal Overlapped Notification Count Badge:
   Snugly anchored on 3D bell shoulder, true geometric circle, optically centered digits, high-contrast white border */
.bell-icon-wrap .bell-badge,
.bell-icon-wrap .notification-badge,
.floating-bell-btn .bell-badge,
.mobile-hero-bell-btn .bell-badge,
.trade-bell-btn .bell-badge,
.bell-badge,
.notification-badge {
  position: absolute !important;
  top: -2px !important;
  right: 1px !important;
  z-index: 10 !important;
  background: linear-gradient(135deg, #ff2442 0%, #e11d48 100%) !important;
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  min-width: 15px !important;
  height: 15px !important;
  border-radius: 999px !important;
  padding: 0 1px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.55), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.bell-badge:empty,
.notification-badge:empty,
.bell-badge[data-count="0"],
.notification-badge[data-count="0"],
.bell-badge.hidden,
.notification-badge.hidden,
.bell-badge[style*="display: none"],
.notification-badge[style*="display: none"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Notification Dropdown Title Bell */
.notif-dropdown-title-bell {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2)) !important;
}

/* Floating User Profile (Always-visible luxury capsule, perfectly stable, no hover expansion) */
.floating-user-profile {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  cursor: pointer !important;
  position: relative !important;
  height: 44px !important;
  border-radius: 28px !important;
  padding: 0 4px 0 14px !important;
  gap: 9px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  transform: none !important;
}

body:not(.light-theme) .floating-user-profile {
  background: #151824 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

.floating-user-profile:hover {
  border-color: rgba(108, 0, 255, 0.35) !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.15) !important;
  transform: none !important;
  /* No layout shifting */
}

/* Slide-out Info Container: ALWAYS VISIBLE by default, clean compact styling */
.floating-profile-slide-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-end !important;
  max-width: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.floating-user-firstname {
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.2px !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
  text-align: right !important;
}

body:not(.light-theme) .floating-user-firstname {
  color: #ffffff !important;
}

/* VERIFIED / UNVERIFIED text below username in header profile */
.floating-user-verified-badge-text {
  font-family: var(--font-display) !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  text-align: right !important;
  transition: color 0.2s ease, opacity 0.2s ease !important;
}

.floating-user-verified-badge-text.is-verified,
.floating-user-verified-badge-text:not(.is-unverified) {
  background: linear-gradient(135deg, #6c00ff 0%, #b800ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.floating-user-verified-badge-text.is-unverified {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #94a3b8 !important;
  color: #94a3b8 !important;
}

body:not(.light-theme) .floating-user-verified-badge-text.is-unverified {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.45) !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

.floating-avatar-wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
}

.floating-avatar-circle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #6c00ff !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.12) !important;
  border: 1.5px solid rgba(108, 0, 255, 0.2) !important;
  overflow: hidden !important;
  font-family: var(--font-display) !important;
  box-sizing: border-box !important;
}

body:not(.light-theme) .floating-avatar-circle {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: 1.8px solid #7c3aed !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4) !important;
}

.floating-avatar-circle img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}



/* Overlapping Verified Badge PNG (Bottom-Right of Avatar Circle) */
.floating-verified-badge-img {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  left: auto !important;
  top: auto !important;
  width: 15px !important;
  height: 15px !important;
  object-fit: contain !important;
  z-index: 10 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
  pointer-events: none !important;
}

.floating-user-profile .profile-name {
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.2px !important;
}

.floating-user-profile .profile-role {
  font-size: 10.5px !important;
  color: #64748b !important;
  font-weight: 600 !important;
  margin-top: 1px !important;
}

body:not(.light-theme) .floating-user-profile .profile-name {
  color: #ffffff !important;
}

body:not(.light-theme) .floating-user-profile .profile-role {
  color: #94a3b8 !important;
}

.app-content {
  padding-top: 14px !important;
}

#tab-dashboard {
  padding-top: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   TOTAL BALANCE CARD: RADIANT PURPLE & HEIGHT-ALIGNED WITH VISA CARD
   ────────────────────────────────────────────────────────────────────────── */

.zenance-balance-card-wrapper,
.balance-card-wrapper {
  position: relative !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  overflow: visible !important;
  width: 100% !important;
}

/* Remove 3D coin image completely */
.balance-card-bg-img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* Card Container */
.zenance-radiant-balance-card,
.dashboard-balance-card {
  position: relative !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 24px !important;
  padding: 26px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: linear-gradient(135deg, #6c00ff 0%, #7d1ff0 42%, #8e38ff 78%, #4e00b8 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 16px 40px rgba(108, 0, 255, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Equal Height Alignment with Zenance Visa Card on Desktop */
@media (min-width: 768px) {

  .zenance-radiant-balance-card,
  .dashboard-balance-card {
    min-height: 318px !important;
    height: 318px !important;
    max-height: 318px !important;
  }

  #dashboard-visa-card-panel {
    min-height: 318px !important;
    height: 318px !important;
    max-height: 318px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
}

/* Ambient Radial Glow */
.zenance-radiant-balance-card::before {
  content: '' !important;
  position: absolute !important;
  top: -40px !important;
  right: -40px !important;
  width: 250px !important;
  height: 250px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(141, 61, 255, 0.12) 55%, transparent 75%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Shimmer Light Reflection */
.zenance-radiant-balance-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -150% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.12) 35%,
      rgba(255, 255, 255, 0.26) 50%,
      rgba(255, 255, 255, 0.12) 65%,
      rgba(255, 255, 255, 0) 100%) !important;
  transform: skewX(-25deg) !important;
  animation: balanceCardShine 7s infinite ease-in-out !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

@keyframes balanceCardShine {
  0% {
    left: -150%;
  }

  30%,
  100% {
    left: 150%;
  }
}

/* Top Row Layout */
.bal-card-top-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

.bal-card-label-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.balance-card-label {
  font-family: var(--font-family) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
}

/* Proper White Badge with Purple USD Text */
.balance-currency-badge {
  background: #ffffff !important;
  color: #6c00ff !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  padding: 2px 9px !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}

/* 3D White Crypto Coins Floating Visual Asset (Enlarged, No Hover Scale) */
.bal-card-3d-coins {
  position: absolute !important;
  right: 18px !important;
  bottom: 8px !important;
  width: 240px !important;
  height: 240px !important;
  max-height: 90% !important;
  object-fit: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.38)) !important;
  transform: none !important;
  transition: none !important;
}

/* Explicitly disable hover scaling as requested */
.zenance-radiant-balance-card:hover .bal-card-3d-coins,
.bal-card-3d-coins:hover {
  transform: none !important;
  scale: 1 !important;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.38)) !important;
}

@media (max-width: 900px) {
  .bal-card-3d-coins {
    right: 10px !important;
    bottom: 8px !important;
    width: 175px !important;
    height: 175px !important;
    opacity: 0.9 !important;
  }
}

@media (max-width: 600px) {
  .bal-card-3d-coins {
    right: 6px !important;
    bottom: 8px !important;
    width: 130px !important;
    height: 130px !important;
    opacity: 0.85 !important;
  }
}

/* Center Section */
.bal-card-center-section {
  position: relative !important;
  z-index: 2 !important;
  margin: 12px 0 16px 0 !important;
}

.dashboard-balance-card .balance-card-amount,
#dashboard-balance {
  font-family: var(--font-display) !important;
  font-size: 44px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.8px !important;
  line-height: 1.05 !important;
  margin: 0 0 6px 0 !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.16) !important;
  font-feature-settings: 'tnum' 1, 'lnum' 1 !important;
}

.dashboard-balance-card .balance-card-status {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
}

/* Remove green dot completely */
.dashboard-balance-card .status-dot,
.balance-card-status .status-dot {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.dashboard-balance-card .status-text {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600 !important;
  font-family: var(--font-family) !important;
  letter-spacing: 0.15px !important;
}

/* Bottom Deposit and Withdraw Actions with Lucide Icons */
.balance-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

.bal-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  letter-spacing: 0.2px !important;
}

.bal-btn .lucide-icon {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.5px !important;
  flex-shrink: 0 !important;
}

.bal-btn-deposit {
  background: #ffffff !important;
  color: #5500ce !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14) !important;
}

.bal-btn-deposit:hover {
  background: #f7f4ff !important;
  color: #4200a0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
}

.bal-btn-withdraw {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.bal-btn-withdraw:hover {
  background: rgba(255, 255, 255, 0.26) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   SIDEBAR & GLOBAL BRAND COLORS: ZENANCE ROYAL PURPLE
   ────────────────────────────────────────────────────────────────────────── */

/* Active Sidebar Navigation Item (deprecated legacy replaced by Liquid Glass below) */
.nav-item.active {
  border-left: none !important;
  border-right: none !important;
}

/* Sidebar Trade Now Button */
.sidebar-trade-btn,
.btn-primary {
  background: var(--zenance-purple-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.32) !important;
  border: none !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

.sidebar-trade-btn:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, #5800d4 0%, #7d26ff 100%) !important;
  box-shadow: 0 6px 22px rgba(108, 0, 255, 0.42) !important;
  transform: translateY(-1px) !important;
}

/* Notifications Dropdown inside Total Balance Card */
.bal-card-user-meta .notifications-dropdown {
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 330px !important;
  background: #151828 !important;
  border: 1px solid rgba(108, 0, 255, 0.25) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

.bal-card-user-meta .notifications-dropdown-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.bal-card-user-meta .notif-clear-btn {
  background: none !important;
  border: none !important;
  color: #8b3dff !important;
  font-size: 11px !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  padding: 0 !important;
  font-family: var(--font-family) !important;
}

.bal-card-user-meta .notif-clear-btn:hover {
  color: #a768ff !important;
}

/* Light Theme overrides to preserve Radiant Purple Balance Card & Accents */
body.light-theme .dashboard-balance-card,
body.light-theme .zenance-radiant-balance-card {
  background: var(--zenance-radiant) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 16px 40px rgba(108, 0, 255, 0.22), 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

body.light-theme .dashboard-balance-card .balance-card-amount,
body.light-theme #dashboard-balance {
  color: #ffffff !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.14) !important;
}

body.light-theme .dashboard-balance-card .balance-card-label {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.light-theme .dashboard-balance-card .status-text {
  color: rgba(255, 255, 255, 0.82) !important;
}

body.light-theme .bal-btn-deposit {
  background: #ffffff !important;
  color: #5500ce !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14) !important;
}

body.light-theme .bal-btn-deposit:hover {
  background: #f7f4ff !important;
  color: #4200a0 !important;
}

body.light-theme .bal-btn-withdraw {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

body.light-theme .bal-btn-withdraw:hover {
  background: rgba(255, 255, 255, 0.26) !important;
}

body.light-theme .nav-item.active {
  border-left: none !important;
  border-right: none !important;
}

body.light-theme .sidebar-trade-btn,
body.light-theme .btn-primary {
  background: var(--zenance-purple-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.28) !important;
}

/* 0. Trading Performance Header & Purple Demo/Live Toggle */
.dashboard-stats-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 4px !important;
  margin-bottom: 11px !important;
  padding: 0 2px !important;
}

.dashboard-stats-heading {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--text, #ffffff) !important;
  letter-spacing: -0.2px !important;
}

body.light-theme .dashboard-stats-heading {
  color: #0f172a !important;
}

.stats-mode-pill-toggle {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  padding: 3px !important;
  gap: 3px !important;
  backdrop-filter: blur(8px) !important;
}

body.light-theme .stats-mode-pill-toggle {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.stats-mode-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 13px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  font-family: 'Outfit', -apple-system, sans-serif !important;
  color: var(--text-muted, #94a3b8) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  line-height: 1 !important;
}

.stats-mode-pill-btn:hover,
.stats-mode-pill-btn:active,
.stats-mode-pill-btn:focus,
body.light-theme .stats-mode-pill-btn:hover,
body:not(.light-theme) .stats-mode-pill-btn:hover {
  transform: none !important;
}

.stats-mode-pill-btn:not(.active):hover {
  color: var(--text-muted, #94a3b8) !important;
  background: transparent !important;
}

/* Purple Theme Active Pill for Toggle */
.stats-mode-pill-btn.active {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.38) !important;
  transform: none !important;
}

.stats-mode-pill-btn.active:hover {
  transform: none !important;
}

.stats-mode-pill-toggle:hover {
  transform: none !important;
}

.stats-mode-indicator-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  transition: background 0.2s ease !important;
}

.stats-mode-indicator-dot.live-dot {
  background: #10b981 !important;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6) !important;
}

.stats-mode-pill-btn.active .stats-mode-indicator-dot.live-dot {
  background: #34d399 !important;
  box-shadow: 0 0 8px #34d399 !important;
}

.stats-mode-indicator-dot.demo-dot {
  background: #a855f7 !important;
}

.stats-mode-pill-btn.active .stats-mode-indicator-dot.demo-dot {
  background: #e9d5ff !important;
  box-shadow: 0 0 8px #e9d5ff !important;
}

.stats-demo-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #a855f7 !important;
  display: inline-block !important;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.7) !important;
}

@media (max-width: 640px) {
  .dashboard-stats-header {
    margin-bottom: 9px !important;
  }

  .dashboard-stats-heading {
    font-size: 13.5px !important;
  }

  .stats-mode-pill-btn {
    padding: 3.5px 10px !important;
    font-size: 11px !important;
  }
}

/* 1. Nexus Top Stats Row - Always 3 equal columns in ONE row on ALL screens */
.dashboard-stats-row {
  position: relative !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.dashboard-stats-row:has(.stats-card-pnl:hover),
.dashboard-stats-row:has(.stats-card-pnl.tooltip-open),
.dashboard-stats-row.has-tooltip-open {
  z-index: 999999 !important;
}

@media (max-width: 900px) {
  .dashboard-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
}

@media (max-width: 540px) {
  .dashboard-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
}

@media (max-width: 370px) {
  .dashboard-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-bottom: 12px !important;
  }
}

.dashboard-stats-row .stats-card,
.dashboard-stats-row .stats-card:nth-child(1),
.dashboard-stats-row .stats-card:nth-child(2),
.dashboard-stats-row .stats-card:nth-child(3) {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 0% !important;
  background: linear-gradient(145deg, #0f1320 0%, #090c15 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 13px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  min-height: 88px !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Subtle top accent gleams per card */
.dashboard-stats-row .stats-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 15% !important;
  right: 15% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.45), transparent) !important;
  pointer-events: none !important;
}

.dashboard-stats-row .stats-card.stats-card-trades::before {
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.45), transparent) !important;
}

.dashboard-stats-row .stats-card.stats-card-pnl::before {
  background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.5), transparent) !important;
}

.dashboard-stats-row .stats-card:hover {
  border-color: rgba(168, 85, 247, 0.38) !important;
  box-shadow: 0 8px 26px rgba(108, 0, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px) !important;
}

.dashboard-stats-row .stats-card.stats-card-trades:hover {
  border-color: rgba(16, 185, 129, 0.38) !important;
  box-shadow: 0 8px 26px rgba(16, 185, 129, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .dashboard-stats-row .stats-card,
body.light-theme .dashboard-stats-row .stats-card:nth-child(1),
body.light-theme .dashboard-stats-row .stats-card:nth-child(2),
body.light-theme .dashboard-stats-row .stats-card:nth-child(3) {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 #ffffff !important;
}

body.light-theme .dashboard-stats-row .stats-card::before {
  background: linear-gradient(90deg, transparent, rgba(108, 0, 255, 0.3), transparent) !important;
}

body.light-theme .dashboard-stats-row .stats-card.stats-card-trades::before {
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.3), transparent) !important;
}

body.light-theme .dashboard-stats-row .stats-card:hover {
  border-color: rgba(108, 0, 255, 0.3) !important;
  box-shadow: 0 8px 20px rgba(108, 0, 255, 0.08) !important;
}

/* Mobile card sizing */
@media (max-width: 768px) {

  .dashboard-stats-row .stats-card,
  .dashboard-stats-row .stats-card:nth-child(1),
  .dashboard-stats-row .stats-card:nth-child(2),
  .dashboard-stats-row .stats-card:nth-child(3) {
    padding: 10px 8px !important;
    min-height: 72px !important;
    border-radius: 13px !important;
  }
}

@media (max-width: 380px) {

  .dashboard-stats-row .stats-card,
  .dashboard-stats-row .stats-card:nth-child(1),
  .dashboard-stats-row .stats-card:nth-child(2),
  .dashboard-stats-row .stats-card:nth-child(3) {
    padding: 8px 6px !important;
    min-height: 66px !important;
    border-radius: 11px !important;
  }
}

/* Header */
.stats-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 6px !important;
}

@media (max-width: 768px) {
  .stats-card-header {
    margin-bottom: 4px !important;
  }
}

.stats-label {
  font-family: var(--font-family) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #8b92a5 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  width: 100% !important;
}

body.light-theme .stats-label {
  color: #64748b !important;
}

@media (max-width: 768px) {
  .stats-label {
    font-size: 9px !important;
    letter-spacing: 0.4px !important;
  }
}

@media (max-width: 380px) {
  .stats-label {
    font-size: 8px !important;
    letter-spacing: 0.2px !important;
  }
}

.stats-menu-dots {
  color: #64748b !important;
  opacity: 0.7 !important;
  cursor: pointer !important;
}

/* Body */
.stats-card-body {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 5px !important;
  position: relative !important;
  min-width: 0 !important;
}

.stats-val {
  font-family: var(--font-display) !important;
  font-size: 20.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.4px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

body.light-theme .stats-val {
  color: #0f172a !important;
}

@media (max-width: 900px) {
  .stats-val {
    font-size: 18px !important;
    letter-spacing: -0.3px !important;
  }
}

@media (max-width: 768px) {
  .stats-val {
    font-size: 15px !important;
    letter-spacing: -0.3px !important;
  }
}

@media (max-width: 400px) {
  .stats-val {
    font-size: 13.5px !important;
    letter-spacing: -0.2px !important;
  }
}

@media (max-width: 350px) {
  .stats-val {
    font-size: 12px !important;
  }
}

/* Net P&L card & value styling */
.dashboard-stats-row .stats-card.stats-card-pnl {
  overflow: visible !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 2 !important;
}

.dashboard-stats-row .stats-card.stats-card-pnl:hover,
.dashboard-stats-row .stats-card.stats-card-pnl.tooltip-open {
  z-index: 999999 !important;
}

.stats-card-pnl .stats-val {
  color: #c084fc !important;
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.light-theme .stats-card-pnl .stats-val {
  color: #7c3aed !important;
}

/* Full vs Compact value toggle */
.pnl-val-full {
  display: inline !important;
}

.pnl-val-compact {
  display: none !important;
}

@media (max-width: 768px) {
  .pnl-val-full {
    display: none !important;
  }

  .pnl-val-compact {
    display: inline !important;
    letter-spacing: -0.2px !important;
  }
}

/* Net P&L Info Trigger Icon */
.pnl-info-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #8b92a5 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.pnl-info-icon:hover {
  background: rgba(168, 85, 247, 0.18) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  color: #c084fc !important;
}

body.light-theme .pnl-info-icon {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #64748b !important;
}

body.light-theme .pnl-info-icon:hover {
  background: rgba(108, 0, 255, 0.1) !important;
  border-color: rgba(108, 0, 255, 0.25) !important;
  color: #7c3aed !important;
}

@media (max-width: 768px) {
  .pnl-info-icon {
    width: 15px !important;
    height: 15px !important;
  }

  .pnl-info-icon svg {
    width: 9px !important;
    height: 9px !important;
  }
}

/* Badges */
.stats-trend-badge,
.stats-trend-badge.trend-purple,
.stats-trend-badge.trend-up {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--font-display) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 2.5px 7px !important;
  border-radius: 16px !important;
  background: rgba(168, 85, 247, 0.14) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.28) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* Live badge emerald styling */
.stats-card-trades .stats-trend-badge {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
}

body.light-theme .stats-trend-badge,
body.light-theme .stats-trend-badge.trend-purple,
body.light-theme .stats-trend-badge.trend-up {
  background: rgba(108, 0, 255, 0.08) !important;
  color: #7c3aed !important;
  border: 1px solid rgba(108, 0, 255, 0.2) !important;
}

body.light-theme .stats-card-trades .stats-trend-badge {
  background: rgba(16, 185, 129, 0.10) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.stats-trend-badge svg {
  stroke: currentColor !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {

  .stats-trend-badge,
  .stats-trend-badge.trend-purple,
  .stats-trend-badge.trend-up {
    font-size: 9px !important;
    padding: 2px 5px !important;
    gap: 2.5px !important;
    border-radius: 10px !important;
  }

  .stats-trend-badge svg {
    width: 8px !important;
    height: 8px !important;
  }
}

@media (max-width: 380px) {

  .stats-trend-badge,
  .stats-trend-badge.trend-purple,
  .stats-trend-badge.trend-up {
    font-size: 8px !important;
    padding: 1.5px 3.5px !important;
  }
}

/* Live Pulsing Dot */
.stats-live-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 6px #10b981 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  animation: statsLivePulse 1.8s infinite ease-in-out !important;
}

@keyframes statsLivePulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.35);
    opacity: 0.4;
  }
}

/* Sparkline Wrap in Net P&L */
.stats-sparkline-wrap {
  width: 44px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.stats-sparkline-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .stats-sparkline-wrap {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 38px !important;
    height: 20px !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
}

@media (max-width: 380px) {
  .stats-sparkline-wrap {
    width: 30px !important;
    height: 18px !important;
  }
}

/* ─── Detail Tooltip Popover (Desktop: Hover | Mobile: Press/Tap) ─── */
.stats-pnl-tooltip {
  position: absolute !important;
  bottom: calc(100% + 9px) !important;
  right: 0 !important;
  width: 220px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 10px 12px !important;
  background: linear-gradient(145deg, #131728 0%, #0c0f1a 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 13px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.75), 0 0 18px rgba(168, 85, 247, 0.22) !important;
  z-index: 9999999 !important;
  box-sizing: border-box !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(6px) !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease !important;
  text-align: left !important;
}

.pnl-tooltip-arrow {
  position: absolute !important;
  bottom: -6px !important;
  right: 24px !important;
  width: 10px !important;
  height: 10px !important;
  background: #0d101c !important;
  border-right: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.35) !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
}

.pnl-tooltip-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 5px !important;
  gap: 8px !important;
}

.pnl-tooltip-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.pnl-tooltip-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #a855f7 !important;
  box-shadow: 0 0 6px #a855f7 !important;
  flex-shrink: 0 !important;
}

.pnl-tooltip-title {
  font-family: var(--font-family) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #c084fc !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}

.pnl-tooltip-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.pnl-tooltip-close:hover {
  background: rgba(244, 63, 94, 0.2) !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
  color: #f43f5e !important;
}

.pnl-tooltip-amount {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #10b981 !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}

.pnl-tooltip-desc {
  font-family: var(--font-family) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  line-height: 1.35 !important;
}

/* Light theme tooltip overrides */
body.light-theme .stats-pnl-tooltip {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(108, 0, 255, 0.24) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 0 14px rgba(108, 0, 255, 0.1) !important;
}

body.light-theme .pnl-tooltip-arrow {
  background: #f8fafc !important;
  border-right-color: rgba(108, 0, 255, 0.24) !important;
  border-bottom-color: rgba(108, 0, 255, 0.24) !important;
}

body.light-theme .pnl-tooltip-title {
  color: #7c3aed !important;
}

body.light-theme .pnl-tooltip-close {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #64748b !important;
}

body.light-theme .pnl-tooltip-close:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #dc2626 !important;
}

body.light-theme .pnl-tooltip-desc {
  color: #64748b !important;
}

/* Desktop hover behavior */
@media (min-width: 769px) {
  .stats-card-pnl:hover .stats-pnl-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .pnl-tooltip-close {
    display: none !important;
  }
}

/* Mobile tap/press behavior */
@media (max-width: 768px) {
  .stats-card-pnl.tooltip-open .stats-pnl-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}

/* 2. Nexus Markets Card Container */
.nexus-markets-card {
  background: #0d101a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important;
  padding: 22px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .nexus-markets-card {
    padding: 16px 12px !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 420px) {
  .nexus-markets-card {
    padding: 14px 10px !important;
    border-radius: 16px !important;
  }
}

body.light-theme .nexus-markets-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.markets-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.terminal-view-link {
  color: #6c00ff !important;
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

.terminal-view-link:hover {
  opacity: 0.8 !important;
}

/* 3. Nexus Markets Grid - 2 In A Row on ALL screen sizes (Desktop & Mobile) */
.nexus-markets-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 18px !important;
}

@media (max-width: 768px) {
  .nexus-markets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }
}

@media (max-width: 420px) {
  .nexus-markets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
}

@media (max-width: 360px) {
  .nexus-markets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }
}

.nexus-market-card {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 175px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .nexus-market-card {
    padding: 12px 10px !important;
    border-radius: 14px !important;
    min-height: 135px !important;
  }
}

@media (max-width: 420px) {
  .nexus-market-card {
    padding: 10px 8px !important;
    border-radius: 12px !important;
    min-height: 125px !important;
  }
}

body.light-theme .nexus-market-card {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.nexus-market-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(108, 0, 255, 0.35) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

body.light-theme .nexus-market-card:hover {
  box-shadow: 0 8px 24px rgba(108, 0, 255, 0.12) !important;
}

.nmc-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

@media (max-width: 768px) {
  .nmc-header {
    margin-bottom: 8px !important;
    gap: 4px !important;
  }
}

.nmc-coin-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

@media (max-width: 768px) {
  .nmc-coin-info {
    gap: 6px !important;
  }
}

.nmc-coin-img {
  width: 54px !important;
  height: 54px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.22)) !important;
}

@media (max-width: 768px) {
  .nmc-coin-img {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2)) !important;
  }
}

@media (max-width: 380px) {
  .nmc-coin-img {
    width: 32px !important;
    height: 32px !important;
  }
}

.nmc-names {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.nmc-symbol {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  .nmc-symbol {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 380px) {
  .nmc-symbol {
    font-size: 12px !important;
  }
}

body.light-theme .nmc-symbol {
  color: #0f172a !important;
}

.nmc-pair {
  font-size: 11px !important;
  color: #8e9297 !important;
  font-weight: 600 !important;
}

@media (max-width: 768px) {
  .nmc-pair {
    font-size: 9.5px !important;
    opacity: 0.8 !important;
  }
}

.nmc-fullname {
  font-size: 11px !important;
  color: #8e9297 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 768px) {
  .nmc-fullname {
    display: none !important;
  }
}

.nmc-change-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  .nmc-change-badge {
    font-size: 10px !important;
    padding: 2.5px 6px !important;
    gap: 2px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 380px) {
  .nmc-change-badge {
    font-size: 9px !important;
    padding: 2px 4px !important;
  }
}

.nmc-change-badge.up {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
}

.nmc-change-badge.down {
  background: rgba(244, 63, 94, 0.15) !important;
  color: #f43f5e !important;
}

.nmc-price-row {
  margin-bottom: 6px !important;
}

@media (max-width: 768px) {
  .nmc-price-row {
    margin-bottom: 2px !important;
  }
}

.nmc-price {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.3px !important;
  transition: color 0.3s ease, text-shadow 0.3s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  line-height: 1.2 !important;
}

body.light-theme .nmc-price {
  color: #0f172a !important;
}

@media (max-width: 768px) {
  .nmc-price {
    font-size: 16px !important;
    letter-spacing: -0.3px !important;
  }
}

@media (max-width: 420px) {
  .nmc-price {
    font-size: 14.5px !important;
    letter-spacing: -0.2px !important;
  }
}

@media (max-width: 360px) {
  .nmc-price {
    font-size: 13px !important;
  }
}

.nmc-price.flash-up {
  color: #10b981 !important;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.45) !important;
}

.nmc-price.flash-down {
  color: #f43f5e !important;
  text-shadow: 0 0 10px rgba(244, 63, 94, 0.45) !important;
}

.nmc-graph-container {
  width: 100% !important;
  height: 58px !important;
  position: relative !important;
  margin-top: 4px !important;
}

@media (max-width: 768px) {
  .nmc-graph-container {
    height: 42px !important;
    margin-top: 2px !important;
  }
}

@media (max-width: 420px) {
  .nmc-graph-container {
    height: 36px !important;
  }
}

.nmc-sparkline-svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.nmc-sparkline-svg path {
  transition: d 0.35s ease, stroke 0.35s ease, fill 0.35s ease !important;
}

/* Real-time Glowing Pulsing Tip Dot on Sparkline */
.nmc-sparkline-dot {
  transition: cx 0.35s ease, cy 0.35s ease, fill 0.35s ease !important;
  animation: nmcDotPulse 1.8s infinite ease-in-out !important;
}

@keyframes nmcDotPulse {
  0% {
    r: 3.5px;
    opacity: 0.85;
    filter: drop-shadow(0 0 2px currentColor);
  }

  50% {
    r: 5px;
    opacity: 1;
    filter: drop-shadow(0 0 6px currentColor);
  }

  100% {
    r: 3.5px;
    opacity: 0.85;
    filter: drop-shadow(0 0 2px currentColor);
  }
}

/* 4. Hover Details Overlay (Accurate Binance 24h stats & CTA) */
.nmc-hover-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(13, 16, 26, 0.94) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 16px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.22s ease !important;
  transform: translateY(6px) !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .nmc-hover-overlay {
    padding: 8px !important;
    border-radius: 14px !important;
  }
}

body.light-theme .nmc-hover-overlay {
  background: rgba(255, 255, 255, 0.96) !important;
}

.nexus-market-card:hover .nmc-hover-overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.nmc-hover-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

@media (max-width: 768px) {
  .nmc-hover-grid {
    gap: 4px !important;
  }
}

.nmc-stat-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.nmc-k {
  font-size: 10px !important;
  color: #8e9297 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

@media (max-width: 768px) {
  .nmc-k {
    font-size: 7.5px !important;
  }
}

body.light-theme .nmc-k {
  color: #64748b !important;
}

.nmc-v {
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}

@media (max-width: 768px) {
  .nmc-v {
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

body.light-theme .nmc-v {
  color: #0f172a !important;
}

.nmc-trade-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 30px !important;
  background: linear-gradient(135deg, #6c00ff 0%, #8b3dff 100%) !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.35) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease !important;
}

@media (max-width: 768px) {
  .nmc-trade-action {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
}

.nmc-trade-action:hover {
  transform: scale(1.02) !important;
}

/* 5. Luxury Notifications Dropdown Panel (Re-designed) */
.bell-dropdown-container .notifications-dropdown {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  width: 330px !important;
  max-width: 90vw !important;
  background: #0f111a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45) !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 99999 !important;
  box-sizing: border-box !important;
}

body.light-theme .bell-dropdown-container .notifications-dropdown {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.12) !important;
}

.bell-dropdown-container .notifications-dropdown-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

body.light-theme .bell-dropdown-container .notifications-dropdown-header {
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.bell-dropdown-container .notif-header-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

body.light-theme .bell-dropdown-container .notif-header-title-wrap {
  color: #0f172a !important;
}

.bell-dropdown-container .notif-header-title-wrap svg {
  color: #6c00ff !important;
}

body:not(.light-theme) .bell-dropdown-container .notif-header-title-wrap svg {
  color: #c084fc !important;
  stroke: #c084fc !important;
}

.bell-dropdown-container .notif-clear-btn {
  background: rgba(108, 0, 255, 0.12) !important;
  color: #6c00ff !important;
  border: none !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.bell-dropdown-container .notif-clear-btn:hover {
  background: #6c00ff !important;
  color: #ffffff !important;
}

/* Radiant Purple Gradient Clear All Button in Dark Mode */
body:not(.light-theme) .bell-dropdown-container .notif-clear-btn,
body:not(.light-theme) .notifications-dropdown .notif-clear-btn {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(192, 132, 252, 0.45) !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35) !important;
}

body:not(.light-theme) .bell-dropdown-container .notif-clear-btn:hover,
body:not(.light-theme) .notifications-dropdown .notif-clear-btn:hover {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%) !important;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.45) !important;
}

.bell-dropdown-container .notifications-dropdown-list {
  max-height: 320px !important;
  overflow-y: auto !important;
  padding: 6px 0 !important;
}

.empty-notif-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 30px 20px !important;
  text-align: center !important;
}

.empty-notif-icon-circle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(108, 0, 255, 0.1) !important;
  color: #6c00ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
}

body:not(.light-theme) .empty-notif-icon-circle {
  background: rgba(168, 85, 247, 0.16) !important;
  color: #c084fc !important;
  border: 1px solid rgba(192, 132, 252, 0.4) !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25) !important;
}

body:not(.light-theme) .empty-notif-icon-circle svg {
  stroke: #c084fc !important;
}

.empty-notif-title {
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 3px !important;
}

body.light-theme .empty-notif-title {
  color: #0f172a !important;
}

.empty-notif-desc {
  font-size: 11.5px !important;
  color: #8e9297 !important;
}

/* Notification Items in Purple Theme (Replaces old green) */
.notifications-dropdown .notification-history-item,
.notifications-dropdown .history-transaction-card {
  padding: 12px 18px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: background 0.2s ease !important;
}

body:not(.light-theme) .notifications-dropdown .notification-history-item,
body:not(.light-theme) .notifications-dropdown .history-transaction-card {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.notifications-dropdown .notification-history-item:hover {
  background: rgba(108, 0, 255, 0.06) !important;
}

body:not(.light-theme) .notifications-dropdown .notification-history-item:hover {
  background: rgba(168, 85, 247, 0.08) !important;
}

.notifications-dropdown .tx-card-icon-wrap,
.notifications-dropdown .icon-bg-inflow,
.notifications-dropdown .icon-bg-purple,
.notifications-dropdown .icon-bg-reward,
.icon-bg-purple {
  background: rgba(108, 0, 255, 0.12) !important;
  color: #6c00ff !important;
  border: 1px solid rgba(108, 0, 255, 0.25) !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.notifications-dropdown .tx-card-icon-wrap svg,
.notifications-dropdown .icon-bg-inflow svg,
.notifications-dropdown .icon-bg-purple svg,
.notifications-dropdown .tx-card-icon {
  stroke: #6c00ff !important;
}

/* Radiant Purple Glow for Icons in Dark Mode */
body:not(.light-theme) .notifications-dropdown .tx-card-icon-wrap,
body:not(.light-theme) .notifications-dropdown .icon-bg-inflow,
body:not(.light-theme) .notifications-dropdown .icon-bg-purple,
body:not(.light-theme) .notifications-dropdown .icon-bg-reward,
body:not(.light-theme) .icon-bg-purple {
  background: rgba(168, 85, 247, 0.16) !important;
  color: #c084fc !important;
  border: 1px solid rgba(192, 132, 252, 0.4) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.2) !important;
}

body:not(.light-theme) .notifications-dropdown .tx-card-icon-wrap svg,
body:not(.light-theme) .notifications-dropdown .icon-bg-inflow svg,
body:not(.light-theme) .notifications-dropdown .icon-bg-purple svg,
body:not(.light-theme) .notifications-dropdown .tx-card-icon {
  stroke: #c084fc !important;
}

.notifications-dropdown .tx-card-title {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

body:not(.light-theme) .notifications-dropdown .tx-card-title {
  color: #f1f5f9 !important;
}

.notifications-dropdown .tx-card-details,
.notifications-dropdown .tx-card-date {
  color: #8e9297 !important;
  font-size: 11px !important;
}

/* Balance Card Compact Layout */
.bal-card-top-row {
  margin-bottom: 4px !important;
}

.bal-card-center-section {
  position: relative !important;
  z-index: 2 !important;
  margin: 4px 0 10px 0 !important;
}

.balance-card-amount {
  font-family: var(--font-display) !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  margin-bottom: 2px !important;
}

.balance-card-status {
  margin-bottom: 0 !important;
}

.balance-card-status .status-text {
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600 !important;
}

.balance-card-actions {
  margin-top: 4px !important;
}

/* 3D White Crypto Coins (Enlarged to 290px, No Hover Animation) */
.bal-card-3d-coins {
  position: absolute !important;
  right: 8px !important;
  bottom: 0px !important;
  width: 290px !important;
  height: 290px !important;
  max-height: 98% !important;
  object-fit: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.42)) !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================
   1. WELCOME BACK VISIBILITY: DASHBOARD ONLY
   ============================================================ */
body:not([data-active-screen="dashboard"]) #floating-header-welcome {
  display: none !important;
}

/* ============================================================
   2. DARK & LIGHT THEME NEXTER LOGO OVERRIDES & SIZING
   ============================================================ */
.logo-desktop {
  height: 48px !important;
  max-height: 52px !important;
  width: auto !important;
  max-width: 195px !important;
  object-fit: contain !important;
}

.logo-desktop-container {
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.trade-logo-img {
  height: 34px !important;
  max-height: 38px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain !important;
}

body:not(.light-theme) .logo-desktop,
body:not(.light-theme) .header-logo-img,
body:not(.light-theme) .splash-logo,
body:not(.light-theme) .trade-logo-area img,
body:not(.light-theme) .trade-logo-img,
body:not(.light-theme) .auth-logo-img {
  content: url('/images/logos/Dark theme.png') !important;
}

body.light-theme .logo-desktop,
body.light-theme .header-logo-img,
body.light-theme .splash-logo,
body.light-theme .trade-logo-area img,
body.light-theme .trade-logo-img,
body.light-theme .auth-logo-img {
  content: url('/images/logos/on white theme purple.png') !important;
}

/* Small icons */
body:not(.light-theme) .logo-mobile {
  content: url('/images/logos/on dark theme logo only.png') !important;
}

body.light-theme .logo-mobile {
  content: url('/images/logos/on white theme logo only.png') !important;
}

/* ============================================================
   3. PURPLE NEXTER CLEANUP (History Tabs, Icons & Visa Card)
   ============================================================ */
#tab-history .tab-headers .tab-btn.active,
.history-filter-tab.active,
.history-tabs .tab.active {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  color: #ffffff !important;
  border-color: rgba(192, 132, 252, 0.7) !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45) !important;
}

.icon-bg-inflow,
.tx-card-icon-wrap,
.tx-card-icon-wrap.inflow,
.tx-icon-down,
.history-transaction-card .tx-icon,
.history-transaction-card .tx-card-icon-wrap {
  background: rgba(108, 0, 255, 0.12) !important;
  color: #6c00ff !important;
  border: 1px solid rgba(108, 0, 255, 0.25) !important;
}

.icon-bg-inflow svg,
.tx-card-icon-wrap svg,
.history-transaction-card svg {
  stroke: #6c00ff !important;
}

/* Visa Lock Icon Container & Claim Card Buttons */
.visa-lock-icon-container {
  background: rgba(108, 0, 255, 0.15) !important;
  color: #6c00ff !important;
  border: 1px solid rgba(108, 0, 255, 0.3) !important;
}

.visa-lock-icon-container svg,
.visa-solid-lock {
  fill: #6c00ff !important;
  color: #6c00ff !important;
}

.visa-card-blur-content .btn-primary,
#tab-claim-card .btn-primary,
.btn-primary.visa-claim-btn {
  background: linear-gradient(135deg, #6c00ff 0%, #8b3dff 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.35) !important;
}

.visa-card-blur-content .btn-primary:hover,
#tab-claim-card .btn-primary:hover {
  background: linear-gradient(135deg, #5800d4 0%, #7626f2 100%) !important;
  box-shadow: 0 6px 20px rgba(108, 0, 255, 0.5) !important;
}

/* ============================================================
   4. THICK, GRABABLE ZENANCE PURPLE SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
  width: 9px !important;
  height: 9px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

body.light-theme ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03) !important;
}

body:not(.light-theme) ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02) !important;
}

::-webkit-scrollbar-thumb,
body.light-theme ::-webkit-scrollbar-thumb,
body:not(.light-theme) ::-webkit-scrollbar-thumb,
#app-content::-webkit-scrollbar-thumb,
.screen::-webkit-scrollbar-thumb,
.list-container::-webkit-scrollbar-thumb,
#history-list-container::-webkit-scrollbar-thumb {
  background: #6c00ff !important;
  border-radius: 10px !important;
  border: 1.5px solid transparent !important;
  background-clip: padding-box !important;
}

::-webkit-scrollbar-thumb:hover,
body.light-theme ::-webkit-scrollbar-thumb:hover,
body:not(.light-theme) ::-webkit-scrollbar-thumb:hover {
  background: #8b3dff !important;
  border: 1px solid transparent !important;
  background-clip: padding-box !important;
}

* {
  scrollbar-width: thin !important;
  scrollbar-color: #6c00ff transparent !important;
}

/* ============================================================
   SIDEBAR SCROLLBAR HIDDEN
   ============================================================ */
#app-nav,
.app-nav,
.nav-items-group-top,
.nav-items-group-bottom {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#app-nav::-webkit-scrollbar,
.app-nav::-webkit-scrollbar,
.nav-items-group-top::-webkit-scrollbar,
.nav-items-group-bottom::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ============================================================
   GLASSMORPHISM CONTROLS (Floating Bell & Profile Capsule)
   ============================================================ */
.floating-bell-btn {
  background: rgba(30, 32, 40, 0.75) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

body.light-theme .floating-bell-btn {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

.floating-user-profile {
  background: rgba(30, 32, 40, 0.75) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

body.light-theme .floating-user-profile {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

.floating-header-actions {
  margin-left: auto !important;
  /* Always pins controls to the far right */
}

/* ============================================================
   PROFILE PAGE: BELL ICON ONLY ON THE FAR RIGHT
   ============================================================ */
body[data-active-screen="profile"] .floating-user-profile,
body[data-active-screen="profile"] .header-user-profile,
body[data-active-screen="profile"] #floating-header-welcome {
  display: none !important;
}

body[data-active-screen="profile"] .floating-header-actions {
  margin-left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* ============================================================
   PROFILE AVATAR: CLEAN 104px WRAPPER + STACKED IMAGE & FALLBACK
   ============================================================ */
.profile-hero-avatar-wrap {
  position: relative !important;
  width: 104px !important;
  height: 104px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 3px solid #6c00ff !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 20px rgba(108, 0, 255, 0.25) !important;
  box-sizing: border-box !important;
}

.profile-hero-avatar-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.profile-hero-avatar-fallback {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.profile-hero-avatar-fallback[style*="display: none"],
.profile-hero-avatar-fallback[style*="display:none"] {
  display: none !important;
}

.profile-hero-avatar-img[style*="display: none"],
.profile-hero-avatar-img[style*="display:none"] {
  display: none !important;
}

.profile-hero-avatar-fallback .profile-avatar-letter {
  font-family: var(--font-display) !important;
  font-size: 44px !important;
  font-weight: 800 !important;
  color: #6c00ff !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body.light-theme .profile-hero-avatar-fallback,
body:not(.light-theme) .profile-hero-avatar-fallback {
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

body.light-theme .profile-hero-avatar-fallback .profile-avatar-letter,
body:not(.light-theme) .profile-hero-avatar-letter,
body:not(.light-theme) .profile-hero-avatar-fallback .profile-avatar-letter {
  color: #6c00ff !important;
}

/* ============================================================
   PROFILE VERIFIED BADGE PILL (No Safeguard, Custom Colors)
   - Light Mode: Purple Badge & White Text
   - Dark Mode: White Badge & Purple Text
   ============================================================ */
.profile-verified-pill,
#profile-verification-status-wrap .verification-badge.status-verified,
body.light-theme .profile-verified-pill,
body.light-theme #profile-verification-status-wrap .verification-badge.status-verified {
  background: #6c00ff !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.4 !important;
}

body:not(.light-theme) .profile-verified-pill,
body:not(.light-theme) #profile-verification-status-wrap .verification-badge.status-verified {
  background: #ffffff !important;
  color: #6c00ff !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.4 !important;
}

.profile-verified-badge-img {
  width: 20px !important;
  height: 20px !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
  display: inline-block !important;
  object-fit: contain !important;
}

/* ============================================================
   GLASSMORPHIC WITHDRAW BUTTON (Frosted Glass in BOTH Themes)
   ============================================================ */
.bal-btn-withdraw,
body.light-theme .bal-btn-withdraw {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  border-radius: 20px !important;
}

.bal-btn-withdraw:hover,
body.light-theme .bal-btn-withdraw:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
}

/* ============================================================
   BADGES: REMOVE CIRCULAR CONTAINER & FLOATING 3D ICONS
   ============================================================ */
.badge-icon-wrap,
#tab-profile .badge-icon-wrap,
.profile-badge-card .badge-icon-wrap {
  width: auto !important;
  height: auto !important;
  min-width: 56px !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.profile-tier-badge-img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.3)) !important;
  transform: none !important;
}

.profile-badge-card:hover .profile-tier-badge-img {
  transform: none !important;
}

/* ============================================================
   REDESIGNED INVITE AREA (Luxury Glassmorphism & Timeline)
   ============================================================ */
.invite-tab-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 10px 0 40px 0 !important;
}

.invite-hero-card {
  position: relative !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 0%, rgba(108, 0, 255, 0.18) 0%, rgba(18, 20, 32, 0.65) 75%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 24px !important;
  padding: 32px 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
}

body.light-theme .invite-hero-card {
  background: radial-gradient(circle at 50% 0%, rgba(108, 0, 255, 0.1) 0%, rgba(255, 255, 255, 0.75) 75%) !important;
  border: 1px solid rgba(108, 0, 255, 0.14) !important;
  box-shadow: 0 12px 32px rgba(108, 0, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.invite-hero-safe-wrap {
  flex-shrink: 0 !important;
  width: 96px !important;
  height: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.invite-hero-safe-img {
  width: 96px !important;
  height: 96px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 28px rgba(108, 0, 255, 0.4)) !important;
  animation: floatSafe 4s ease-in-out infinite alternate !important;
}

@keyframes floatSafe {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  100% {
    transform: translateY(-8px) rotate(-2deg);
  }
}

.invite-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  background: rgba(108, 0, 255, 0.15) !important;
  border: 1px solid rgba(108, 0, 255, 0.3) !important;
  color: #a855f7 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

body.light-theme .invite-badge-pill {
  background: rgba(108, 0, 255, 0.08) !important;
  color: #6c00ff !important;
}

.invite-hero-title {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin: 0 0 8px 0 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.3px !important;
}

.invite-hero-desc {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}

.invite-cards-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

@media (max-width: 767px) {
  .invite-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .invite-hero-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 24px 18px !important;
  }
}

.invite-glass-card {
  background: rgba(18, 20, 32, 0.65) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

body.light-theme .invite-glass-card {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 24px rgba(108, 0, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.invite-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.invite-card-icon-pill {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: rgba(108, 0, 255, 0.12) !important;
  color: #a855f7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

body.light-theme .invite-card-icon-pill {
  color: #6c00ff !important;
}

.invite-card-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.invite-card-subtitle {
  font-size: 11.5px !important;
  color: var(--text-secondary) !important;
  margin-top: 1px !important;
}

.invite-code-display-wrap,
.invite-link-display-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(108, 0, 255, 0.25) !important;
  border-radius: 14px !important;
  padding: 6px 6px 6px 14px !important;
}

body.light-theme .invite-code-display-wrap,
body.light-theme .invite-link-display-wrap {
  background: rgba(108, 0, 255, 0.04) !important;
  border: 1px solid rgba(108, 0, 255, 0.18) !important;
}

.invite-code-pill-text {
  font-family: 'SF Mono', 'Courier New', monospace !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  color: #a855f7 !important;
  flex-grow: 1 !important;
}

body.light-theme .invite-code-pill-text {
  color: #6c00ff !important;
}

.invite-link-input {
  background: transparent !important;
  border: none !important;
  color: var(--text-primary) !important;
  font-size: 12.5px !important;
  font-family: monospace !important;
  width: 100% !important;
  outline: none !important;
}

.invite-copy-action-btn {
  background: linear-gradient(135deg, #6c00ff, #8b3dff) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.35) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  flex-shrink: 0 !important;
}

.invite-copy-action-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(108, 0, 255, 0.5) !important;
}

.invite-benefits-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}

@media (max-width: 640px) {
  .invite-benefits-row {
    grid-template-columns: 1fr !important;
  }
}

.invite-benefit-pill {
  background: rgba(18, 20, 32, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body.light-theme .invite-benefit-pill {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.invite-benefit-icon {
  font-size: 20px !important;
}

.invite-benefit-info strong {
  display: block !important;
  font-size: 12.5px !important;
  color: var(--text-primary) !important;
}

.invite-benefit-info span {
  font-size: 11px !important;
  color: var(--text-secondary) !important;
}

.invite-how-glass-container {
  background: rgba(18, 20, 32, 0.65) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

body.light-theme .invite-how-glass-container {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.invite-how-header {
  margin-bottom: 20px !important;
}

.invite-how-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
}

.invite-how-subtitle {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
}

.invite-timeline-steps {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr !important;
  align-items: center !important;
  gap: 12px !important;
}

@media (max-width: 767px) {
  .invite-timeline-steps {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .invite-step-divider {
    display: none !important;
  }
}

.invite-step-divider {
  width: 24px !important;
  height: 2px !important;
  background: rgba(108, 0, 255, 0.3) !important;
}

.invite-step-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.invite-step-number-badge {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #6c00ff, #8b3dff) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(108, 0, 255, 0.35) !important;
  margin-bottom: 4px !important;
}

.invite-step-heading {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.invite-step-detail {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* ============================================================
   BALANCE CARD CURRENCY SWAP ICON & TOOLTIP (Image 1 - Beside Balance)
   ============================================================ */
.bal-amount-row-with-swap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative !important;
}

.bal-amount-row-with-swap .balance-card-amount {
  margin: 0 !important;
}

.balance-currency-swap-icon-btn {
  position: relative !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 4px !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  opacity: 0.88 !important;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  vertical-align: middle !important;
}

.balance-currency-swap-icon-btn:hover,
.balance-currency-swap-icon-btn:focus-visible {
  opacity: 1 !important;
  transform: scale(1.16) !important;
}

.balance-currency-swap-icon-btn .swap-icon-svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #ffffff !important;
  display: block !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.balance-currency-swap-icon-btn:hover .swap-icon-svg {
  transform: rotate(180deg) !important;
}

/* Tooltip: "swap currency" */
.swap-currency-tooltip {
  position: absolute !important;
  bottom: calc(100% + 7px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(4px) !important;
  background: rgba(14, 15, 22, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #ffffff !important;
  font-family: var(--font-family) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  text-transform: lowercase !important;
  white-space: nowrap !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s !important;
  z-index: 1000 !important;
}

.swap-currency-tooltip::after {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-width: 4px !important;
  border-style: solid !important;
  border-color: rgba(14, 15, 22, 0.95) transparent transparent transparent !important;
}

.balance-currency-swap-icon-btn:hover .swap-currency-tooltip,
.balance-currency-swap-icon-btn:focus-visible .swap-currency-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* ============================================================
   SELECT CURRENCY SUB-SCREEN (RedotPay Model & Image 2 Reference)
   ============================================================ */
#profile-sub-currency-select.profile-sub-active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 16px 12px 36px 12px !important;
  box-sizing: border-box !important;
}

.currency-select-inner-card {
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  background: #11131a !important;
  background: linear-gradient(180deg, #131520 0%, #0d0f16 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 24px !important;
  padding: 18px 16px 20px 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  position: relative !important;
  max-height: calc(100vh - 120px) !important;
}

body.light-theme .currency-select-inner-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 16px 40px rgba(108, 0, 255, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

/* Top Header */
.currency-select-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  padding: 0 4px !important;
}

.currency-select-back-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.15s !important;
  padding: 0 !important;
}

.currency-select-back-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  transform: translateX(-2px) !important;
}

body.light-theme .currency-select-back-btn {
  background: #f1f3f9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #111827 !important;
}

.currency-select-back-btn svg {
  width: 18px !important;
  height: 18px !important;
}

.currency-select-title {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-align: center !important;
  letter-spacing: -0.2px !important;
}

body.light-theme .currency-select-title {
  color: #0f172a !important;
}

.currency-select-header-space {
  width: 36px !important;
}

/* Search Bar (Matching Image 2) */
.currency-search-bar-wrap {
  margin-bottom: 12px !important;
}

.currency-search-bar {
  display: flex !important;
  align-items: center !important;
  background: #191b24 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  padding: 10px 16px !important;
  gap: 10px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.currency-search-bar:focus-within {
  border-color: rgba(108, 0, 255, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(108, 0, 255, 0.15) !important;
}

body.light-theme .currency-search-bar {
  background: #f4f5fa !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.currency-search-icon {
  width: 17px !important;
  height: 17px !important;
  color: #717789 !important;
  flex-shrink: 0 !important;
}

.currency-search-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: var(--font-family) !important;
  font-size: 14px !important;
  color: #ffffff !important;
  padding: 0 !important;
}

.currency-search-input::placeholder {
  color: #636879 !important;
  font-weight: 400 !important;
}

body.light-theme .currency-search-input {
  color: #0f172a !important;
}

.currency-search-clear {
  background: transparent !important;
  border: none !important;
  color: #717789 !important;
  cursor: pointer !important;
  padding: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.currency-search-clear svg {
  width: 14px !important;
  height: 14px !important;
}

/* Body: Scroll List & Fast Jump Alphabet Rail */
.currency-picker-body {
  display: flex !important;
  position: relative !important;
  flex: 1 !important;
  overflow: hidden !important;
  min-height: 380px !important;
  max-height: calc(100vh - 230px) !important;
}

.currency-scroll-list {
  flex: 1 !important;
  overflow-y: auto !important;
  padding-right: 12px !important;
  padding-bottom: 24px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent !important;
}

.currency-scroll-list::-webkit-scrollbar {
  width: 4px !important;
}

.currency-scroll-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14) !important;
  border-radius: 4px !important;
}

/* Alphabet Group Header */
.currency-group-section {
  margin-bottom: 8px !important;
}

.currency-group-header {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #727788 !important;
  text-transform: uppercase !important;
  padding: 10px 4px 6px 4px !important;
  letter-spacing: 0.5px !important;
}

/* Currency Row Item */
.currency-row-item {
  display: flex !important;
  align-items: center !important;
  padding: 10px 10px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  gap: 14px !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}

.currency-row-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.currency-row-item:active {
  transform: scale(0.99) !important;
}

.currency-row-item.active-currency {
  background: rgba(108, 0, 255, 0.1) !important;
  border: 1px solid rgba(108, 0, 255, 0.25) !important;
}

body.light-theme .currency-row-item:hover {
  background: #f1f3fa !important;
}

body.light-theme .currency-row-item.active-currency {
  background: rgba(108, 0, 255, 0.08) !important;
  border: 1px solid rgba(108, 0, 255, 0.2) !important;
}

/* Circular Flag */
.currency-flag-circle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.currency-flag-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.currency-flag-fallback {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* Currency Info */
.currency-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.currency-code {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
}

body.light-theme .currency-code {
  color: #0f172a !important;
}

.currency-name {
  font-size: 12px !important;
  color: #83899d !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
}

/* Checkmark on active */
.currency-check-icon {
  width: 18px !important;
  height: 18px !important;
  color: #a855f7 !important;
  flex-shrink: 0 !important;
}

/* Alphabet Fast-Jump Rail (Right Rail) */
.currency-alphabet-rail {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 2px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #636879 !important;
  user-select: none !important;
  width: 18px !important;
  flex-shrink: 0 !important;
  opacity: 0.75 !important;
  transition: opacity 0.2s !important;
}

.currency-alphabet-rail:hover {
  opacity: 1 !important;
}

.currency-alphabet-rail span {
  cursor: pointer !important;
  padding: 1px 2px !important;
  transition: color 0.15s, transform 0.15s !important;
  display: inline-block !important;
}

.currency-alphabet-rail span:hover {
  color: #ffffff !important;
  transform: scale(1.3) !important;
}

body.light-theme .currency-alphabet-rail span:hover {
  color: #6c00ff !important;
}

/* ============================================================
   TOP BAR & AVATAR VISIBILITY ON CARD SCREENS
   ============================================================ */
body[data-active-screen="claim-card"] #app-header {
  display: flex !important;
}

body[data-active-screen="claim-card"] .floating-user-profile {
  display: inline-flex !important;
}

/* ============================================================
   GLASSMORPHISM: LAYERS, LAYOUTS & CONTAINERS
   ============================================================ */
body:not(.light-theme) .card:not(.balance-card-inner),
body:not(.light-theme) .markets-card,
body:not(.light-theme) .recent-activity-card,
body:not(.light-theme) .history-transaction-card,
body:not(.light-theme) .profile-badge-card,
body:not(.light-theme) .invite-block,
body:not(.light-theme) .invite-how-section,
body:not(.light-theme) .feed-card,
body:not(.light-theme) .profile-settings-user-card,
body:not(.light-theme) .settings-menu-list,
body:not(.light-theme) .wallet-balance-card,
body:not(.light-theme) .notifications-dropdown {
  background: rgba(16, 18, 28, 0.68) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35) !important;
}

body:not(.light-theme) .card:not(.balance-card-inner):hover,
body:not(.light-theme) .recent-activity-card:hover,
body:not(.light-theme) .history-transaction-card:hover,
body:not(.light-theme) .profile-badge-card:hover {
  background: rgba(24, 27, 42, 0.78) !important;
  border-color: rgba(108, 0, 255, 0.35) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45) !important;
}

body.light-theme .card:not(.balance-card-inner),
body.light-theme .markets-card,
body.light-theme .recent-activity-card,
body.light-theme .history-transaction-card,
body.light-theme .profile-badge-card,
body.light-theme .invite-block,
body.light-theme .invite-how-section,
body.light-theme .feed-card,
body.light-theme .profile-settings-user-card,
body.light-theme .settings-menu-list,
body.light-theme .wallet-balance-card,
body.light-theme .notifications-dropdown {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(108, 0, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

body.light-theme .card:not(.balance-card-inner):hover,
body.light-theme .recent-activity-card:hover,
body.light-theme .history-transaction-card:hover,
body.light-theme .profile-badge-card:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(108, 0, 255, 0.25) !important;
}

/* ============================================================
   GLASSMORPHISM: BUTTONS & TABS
   ============================================================ */
body:not(.light-theme) .profile-tab-pill:not(.active),
body:not(.light-theme) #tab-history .tab-headers .tab-btn:not(.active),
body:not(.light-theme) .quick-link-item,
body:not(.light-theme) .history-back-btn,
body:not(.light-theme) .profile-header-back-btn,
body:not(.light-theme) .profile-cog-btn,
body:not(.light-theme) .profile-add-btn,
body:not(.light-theme) .wallet-mode-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

body:not(.light-theme) .profile-tab-pill:not(.active):hover,
body:not(.light-theme) #tab-history .tab-headers .tab-btn:not(.active):hover,
body:not(.light-theme) .quick-link-item:hover,
body:not(.light-theme) .wallet-mode-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(108, 0, 255, 0.35) !important;
  color: #ffffff !important;
}

body.light-theme .profile-tab-pill:not(.active),
body.light-theme #tab-history .tab-headers .tab-btn:not(.active),
body.light-theme .quick-link-item,
body.light-theme .history-back-btn,
body.light-theme .profile-header-back-btn,
body.light-theme .profile-cog-btn,
body.light-theme .profile-add-btn,
body.light-theme .wallet-mode-btn {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .profile-tab-pill:not(.active):hover,
body.light-theme #tab-history .tab-headers .tab-btn:not(.active):hover,
body.light-theme .quick-link-item:hover,
body.light-theme .wallet-mode-btn:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(108, 0, 255, 0.25) !important;
  color: #0f172a !important;
}

/* ============================================================
   CONDITIONAL GLOBAL LOADER TYPOGRAPHY & TRANSITIONS
   ============================================================ */
.global-loader-text-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 6px !important;
  text-align: center !important;
  max-width: 380px !important;
}

.global-loader-title {
  font-family: var(--font-display), 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
  line-height: 1.35 !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  animation: loaderTitleGlow 2.5s ease-in-out infinite alternate !important;
}

body.light-theme .global-loader-title {
  color: #0f172a !important;
}

.global-loader-subtitle {
  font-family: var(--font-sans), 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #a855f7 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.4 !important;
  opacity: 0.9 !important;
  transition: opacity 0.3s ease !important;
}

body.light-theme .global-loader-subtitle {
  color: #6c00ff !important;
  opacity: 0.85 !important;
}

@keyframes loaderTitleGlow {
  0% {
    opacity: 0.88;
  }

  100% {
    opacity: 1;
  }
}

/* =========================================================================
   ZENANCE SIGNATURE TRADING CONTROLS SIDEBAR: 3D BUTTONS & GLASSY UI
   ========================================================================= */

/* 1. Sidebar Container: Glassmorphic Backdrop */
.trade-controls-panel {
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  transition: all 0.3s ease !important;
}

body.light-theme .trade-controls-panel {
  background: rgba(255, 255, 255, 0.90) !important;
  border-left: 1px solid rgba(108, 0, 255, 0.10) !important;
  box-shadow: -6px 0 30px rgba(108, 0, 255, 0.04), -1px 0 0 rgba(108, 0, 255, 0.06) !important;
}

body:not(.light-theme) .trade-controls-panel {
  background: rgba(11, 14, 22, 0.88) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: -8px 0 35px rgba(0, 0, 0, 0.45) !important;
}

/* 2. Top Asset Selector: Glassy Card */
.tc-asset-selector-btn {
  padding: 6px 10px !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

body.light-theme .tc-asset-selector-btn {
  background: rgba(108, 0, 255, 0.035) !important;
  border: 1px solid rgba(108, 0, 255, 0.12) !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.03) !important;
}

body:not(.light-theme) .tc-asset-selector-btn {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.tc-asset-selector-btn:hover {
  border-color: #6c00ff !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.15) !important;
  transform: translateY(-1px) !important;
}

.tc-asset-name-val {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
}

.tc-asset-payout-val {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #6c00ff !important;
  /* Zenance Purple */
  text-shadow: 0 0 14px rgba(108, 0, 255, 0.3) !important;
}

body:not(.light-theme) .tc-asset-payout-val {
  color: #a78bfa !important;
  text-shadow: 0 0 14px rgba(167, 139, 250, 0.45) !important;
}

/* 3. Timer and Investment Cards: Glassmorphic Floating Boxes */
.tc-mobile-col {
  border-radius: 14px !important;
  height: 56px !important;
  min-height: 56px !important;
  transition: all 0.2s ease !important;
}

body.light-theme .tc-mobile-col {
  background: rgba(248, 250, 252, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(108, 0, 255, 0.12) !important;
  box-shadow: 0 2px 10px rgba(108, 0, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body:not(.light-theme) .tc-mobile-col {
  background: rgba(17, 22, 34, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(108, 0, 255, 0.22) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.tc-mobile-col:hover {
  border-color: #6c00ff !important;
  box-shadow: 0 4px 20px rgba(108, 0, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Floating Card Labels in Purple Theme */
.tc-card-label {
  top: -7px !important;
  left: 12px !important;
  padding: 1px 8px !important;
  border-radius: 5px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
}

body.light-theme .tc-card-label {
  background: #ffffff !important;
  color: #6c00ff !important;
  border: 1px solid rgba(108, 0, 255, 0.2) !important;
  box-shadow: 0 1px 4px rgba(108, 0, 255, 0.08) !important;
}

body:not(.light-theme) .tc-card-label {
  background: #0b0e14 !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(108, 0, 255, 0.35) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Display Values */
.tc-time-display-val,
.tc-amount-input {
  font-family: 'Space Grotesk', 'Inter', monospace !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

body.light-theme .tc-time-display-val,
body.light-theme .tc-amount-input {
  color: #0f172a !important;
}

body:not(.light-theme) .tc-time-display-val,
body:not(.light-theme) .tc-amount-input {
  color: #ffffff !important;
}

/* 3D Stepper +/- Buttons */
.tc-step-btn,
.tc-time-step-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body.light-theme .tc-step-btn,
body.light-theme .tc-time-step-btn {
  background: linear-gradient(145deg, #ffffff, #f1f5f9) !important;
  border: 1px solid rgba(108, 0, 255, 0.18) !important;
  color: #6c00ff !important;
  box-shadow: 0 2px 4px rgba(108, 0, 255, 0.06), inset 0 1px 0 #ffffff !important;
}

body:not(.light-theme) .tc-step-btn,
body:not(.light-theme) .tc-time-step-btn {
  background: linear-gradient(145deg, #1c2438, #111622) !important;
  border: 1px solid rgba(108, 0, 255, 0.25) !important;
  color: #c4b5fd !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.tc-step-btn:hover,
.tc-time-step-btn:hover {
  background: #6c00ff !important;
  color: #ffffff !important;
  border-color: #6c00ff !important;
  box-shadow: 0 3px 10px rgba(108, 0, 255, 0.4) !important;
  transform: scale(1.1) !important;
}

.tc-step-btn:active,
.tc-time-step-btn:active {
  transform: scale(0.95) !important;
  box-shadow: 0 1px 3px rgba(108, 0, 255, 0.2) !important;
}

/* Zenance Purple Switch Links */
.tc-switch-container,
.tc-time-switch-container {
  bottom: -7px !important;
  border-radius: 4px !important;
  padding: 0 6px !important;
}

body.light-theme .tc-switch-container,
body.light-theme .tc-time-switch-container {
  background: #ffffff !important;
}

body:not(.light-theme) .tc-switch-container,
body:not(.light-theme) .tc-time-switch-container {
  background: #0b0e14 !important;
}

.tc-switch-link {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.7px !important;
  color: #6c00ff !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  transition: all 0.15s ease !important;
}

body:not(.light-theme) .tc-switch-link {
  color: #a78bfa !important;
}

.tc-switch-link:hover {
  color: #4f00b8 !important;
  text-shadow: 0 0 10px rgba(108, 0, 255, 0.3) !important;
}

body:not(.light-theme) .tc-switch-link:hover {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.5) !important;
}

/* 4. Profit / Investment Preview Box: Glassmorphic */
.tc-profit-preview {
  margin-top: 2px !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}

body.light-theme .tc-profit-preview {
  background: linear-gradient(135deg, rgba(108, 0, 255, 0.025) 0%, rgba(255, 255, 255, 0.6) 100%) !important;
  border: 1px solid rgba(108, 0, 255, 0.10) !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.02) !important;
}

body:not(.light-theme) .tc-profit-preview {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.tc-profit-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 12.5px !important;
  margin-bottom: 6px !important;
}

.tc-profit-row:last-child {
  margin-bottom: 0 !important;
}

.tc-preview-label {
  font-weight: 600 !important;
}

body.light-theme .tc-preview-label {
  color: #64748b !important;
}

body:not(.light-theme) .tc-preview-label {
  color: rgba(255, 255, 255, 0.5) !important;
}

.tc-dotted-connector {
  flex: 1 !important;
  margin: 0 8px !important;
  border-bottom: 1.5px dotted rgba(108, 0, 255, 0.18) !important;
}

body:not(.light-theme) .tc-dotted-connector {
  border-bottom: 1.5px dotted rgba(255, 255, 255, 0.15) !important;
}

.tc-preview-val.text-green {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #10b981 !important;
  /* Green stays green */
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.25) !important;
}

body.light-theme .tc-preview-val.text-white {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

body:not(.light-theme) .tc-preview-val.text-white {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* 5. LIQUID GLASS UP AND DOWN TRADE BUTTONS */
.tc-action-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 4px !important;
}

.tc-action-buttons .tc-trade-btn,
.tc-trade-btn {
  position: relative !important;
  height: 66px !important;
  min-height: 66px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none !important;
  padding: 0 !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.35) !important;
}

/* Liquid Glass Curved Specular Sheen */
.tc-action-buttons .tc-trade-btn::before,
.tc-trade-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 4px !important;
  right: 4px !important;
  height: 46% !important;
  border-radius: 14px 14px 8px 8px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Liquid Glass Specular Rim Flare */
.tc-action-buttons .tc-trade-btn::after,
.tc-trade-btn::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 10% !important;
  right: 10% !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.92) 50%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* UP Button: Classic Theme (Emerald Liquid Glass) */
body[data-candle-theme="classic"] .tc-action-buttons .tc-trade-btn.tc-btn-up,
body[data-candle-theme="classic"] .tc-trade-btn.tc-btn-up,
.tc-action-buttons .tc-trade-btn.tc-btn-up {
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.95) 0%, rgba(16, 185, 129, 0.9) 48%, rgba(5, 150, 105, 0.98) 100%) !important;
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.65), inset 0 -2px 5px rgba(4, 120, 87, 0.45) !important;
  border: 1.2px solid rgba(167, 243, 208, 0.45) !important;
}

body[data-candle-theme="classic"] .tc-action-buttons .tc-trade-btn.tc-btn-up:hover,
body[data-candle-theme="classic"] .tc-trade-btn.tc-btn-up:hover,
.tc-action-buttons .tc-trade-btn.tc-btn-up:hover {
  transform: translateY(-2px) scale(1.008) !important;
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.98) 0%, rgba(34, 197, 94, 0.94) 48%, rgba(16, 185, 129, 1) 100%) !important;
  box-shadow: 0 12px 36px rgba(16, 185, 129, 0.58), 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.75), inset 0 -2px 6px rgba(4, 120, 87, 0.5) !important;
}

body[data-candle-theme="classic"] .tc-action-buttons .tc-trade-btn.tc-btn-up:active,
body[data-candle-theme="classic"] .tc-trade-btn.tc-btn-up:active,
.tc-action-buttons .tc-trade-btn.tc-btn-up:active {
  transform: translateY(1.5px) scale(0.985) !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* DOWN Button: Ruby / Coral Liquid Glass */
.tc-action-buttons .tc-trade-btn.tc-btn-down,
.tc-trade-btn.tc-btn-down {
  background: linear-gradient(180deg, rgba(251, 113, 133, 0.95) 0%, rgba(244, 63, 94, 0.9) 48%, rgba(225, 29, 72, 0.98) 100%) !important;
  box-shadow: 0 8px 28px rgba(225, 29, 72, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.65), inset 0 -2px 5px rgba(190, 18, 60, 0.45) !important;
  border: 1.2px solid rgba(254, 205, 211, 0.45) !important;
}

.tc-action-buttons .tc-trade-btn.tc-btn-down:hover,
.tc-trade-btn.tc-btn-down:hover {
  transform: translateY(-2px) scale(1.008) !important;
  background: linear-gradient(180deg, rgba(253, 164, 175, 0.98) 0%, rgba(244, 63, 94, 0.94) 48%, rgba(225, 29, 72, 1) 100%) !important;
  box-shadow: 0 12px 36px rgba(225, 29, 72, 0.58), 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.75), inset 0 -2px 6px rgba(190, 18, 60, 0.5) !important;
}

.tc-action-buttons .tc-trade-btn.tc-btn-down:active,
.tc-trade-btn.tc-btn-down:active {
  transform: translateY(1.5px) scale(0.985) !important;
  box-shadow: 0 3px 12px rgba(225, 29, 72, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   NEXTER THEME OVERRIDES (When data-candle-theme="nexter", "zenance" or default)
   UP button turns into Radiant Nexter Purple Liquid Glass
   ═════════════════════════════════════════════════════════════════════════════ */
body[data-candle-theme="nexter"] .tc-action-buttons .tc-trade-btn.tc-btn-up,
body[data-candle-theme="zenance"] .tc-action-buttons .tc-trade-btn.tc-btn-up,
body:not([data-candle-theme="classic"]) .tc-action-buttons .tc-trade-btn.tc-btn-up,
body[data-candle-theme="nexter"] .tc-trade-btn.tc-btn-up,
body[data-candle-theme="zenance"] .tc-trade-btn.tc-btn-up,
body:not([data-candle-theme="classic"]) .tc-trade-btn.tc-btn-up {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.95) 0%, rgba(139, 92, 246, 0.9) 48%, rgba(108, 0, 255, 0.98) 100%) !important;
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.65), inset 0 -2px 5px rgba(88, 0, 212, 0.45) !important;
  border: 1.2px solid rgba(216, 180, 254, 0.45) !important;
}

body[data-candle-theme="nexter"] .tc-action-buttons .tc-trade-btn.tc-btn-up:hover,
body[data-candle-theme="zenance"] .tc-action-buttons .tc-trade-btn.tc-btn-up:hover,
body:not([data-candle-theme="classic"]) .tc-action-buttons .tc-trade-btn.tc-btn-up:hover,
body[data-candle-theme="nexter"] .tc-trade-btn.tc-btn-up:hover,
body[data-candle-theme="zenance"] .tc-trade-btn.tc-btn-up:hover,
body:not([data-candle-theme="classic"]) .tc-trade-btn.tc-btn-up:hover {
  transform: translateY(-2px) scale(1.008) !important;
  background: linear-gradient(180deg, rgba(180, 158, 255, 0.98) 0%, rgba(153, 107, 248, 0.94) 48%, rgba(124, 58, 237, 1) 100%) !important;
  box-shadow: 0 12px 36px rgba(124, 58, 237, 0.58), 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.75), inset 0 -2px 6px rgba(88, 0, 212, 0.5) !important;
}

body[data-candle-theme="nexter"] .tc-action-buttons .tc-trade-btn.tc-btn-up:active,
body[data-candle-theme="zenance"] .tc-action-buttons .tc-trade-btn.tc-btn-up:active,
body:not([data-candle-theme="classic"]) .tc-action-buttons .tc-trade-btn.tc-btn-up:active,
body[data-candle-theme="nexter"] .tc-trade-btn.tc-btn-up:active,
body[data-candle-theme="zenance"] .tc-trade-btn.tc-btn-up:active,
body:not([data-candle-theme="classic"]) .tc-trade-btn.tc-btn-up:active {
  transform: translateY(1.5px) scale(0.985) !important;
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Nexter Thermometer */
body[data-candle-theme="nexter"] .pressure-percentage-label.label-green,
body[data-candle-theme="zenance"] .pressure-percentage-label.label-green,
body:not([data-candle-theme="classic"]) .pressure-percentage-label.label-green {
  color: #8b5cf6 !important;
}

body[data-candle-theme="nexter"] .pressure-bar-green,
body[data-candle-theme="zenance"] .pressure-bar-green,
body:not([data-candle-theme="classic"]) .pressure-bar-green {
  background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 100%) !important;
}

/* Nexter Payout Text */
body[data-candle-theme="nexter"] #tc-payout-preview.text-green,
body[data-candle-theme="zenance"] #tc-payout-preview.text-green,
body:not([data-candle-theme="classic"]) #tc-payout-preview.text-green {
  color: #8b5cf6 !important;
}

/* Nexter Active Trade & Closed Result Pills */
body[data-candle-theme="nexter"] .active-trade-pill:not(.down),
body[data-candle-theme="zenance"] .active-trade-pill:not(.down),
body:not([data-candle-theme="classic"]) .active-trade-pill:not(.down) {
  background-color: #8b5cf6 !important;
}

body[data-candle-theme="nexter"] .closed-trade-result-pill:not(.lose),
body[data-candle-theme="zenance"] .closed-trade-result-pill:not(.lose),
body:not([data-candle-theme="classic"]) .closed-trade-result-pill:not(.lose) {
  background-color: #8b5cf6 !important;
}

body[data-candle-theme="nexter"] .closed-trade-result-pill:not(.lose)::after,
body[data-candle-theme="zenance"] .closed-trade-result-pill:not(.lose)::after,
body:not([data-candle-theme="classic"]) .closed-trade-result-pill:not(.lose)::after {
  border-color: transparent transparent transparent #8b5cf6 !important;
}

/* ============================================================
   TRADE SECTION THEME COLORS: PURPLE FOR NEXTER, GREEN FOR CLASSIC
   ============================================================ */

/* 1. NEXTER THEMES (Nexter Curved & Nexter Classic): UP is Purple, DOWN is Red */
body[data-candle-theme="nexter"] .tc-trade-arrow-circle.dir-up,
body[data-candle-theme="zenance"] .tc-trade-arrow-circle.dir-up,
body:not([data-candle-theme="classic"]) .tc-trade-arrow-circle.dir-up {
  background-color: #8b5cf6 !important;
  box-shadow: 0 0 6px rgba(139, 92, 246, 0.45) !important;
}

body[data-candle-theme="nexter"] .tc-trade-stake.text-green,
body[data-candle-theme="nexter"] .tc-trade-result-text.text-green,
body[data-candle-theme="nexter"] .tc-trade-row .text-green,
body[data-candle-theme="nexter"] .tc-trade-details .text-green,
body[data-candle-theme="nexter"] .trade-pending-mini .text-green,
body[data-candle-theme="nexter"] .pending-card-info .text-green,
body[data-candle-theme="nexter"] .pending-card-dir.up,
body[data-candle-theme="zenance"] .tc-trade-stake.text-green,
body[data-candle-theme="zenance"] .tc-trade-result-text.text-green,
body[data-candle-theme="zenance"] .tc-trade-row .text-green,
body[data-candle-theme="zenance"] .tc-trade-details .text-green,
body[data-candle-theme="zenance"] .trade-pending-mini .text-green,
body[data-candle-theme="zenance"] .pending-card-info .text-green,
body[data-candle-theme="zenance"] .pending-card-dir.up,
body:not([data-candle-theme="classic"]) .tc-trade-stake.text-green,
body:not([data-candle-theme="classic"]) .tc-trade-result-text.text-green,
body:not([data-candle-theme="classic"]) .tc-trade-row .text-green,
body:not([data-candle-theme="classic"]) .tc-trade-details .text-green,
body:not([data-candle-theme="classic"]) .trade-pending-mini .text-green,
body:not([data-candle-theme="classic"]) .pending-card-info .text-green,
body:not([data-candle-theme="classic"]) .pending-card-dir.up {
  color: #8b5cf6 !important;
}

/* 2. CLASSIC THEMES (Classic Curved & Classic Edge): UP is Green, DOWN is Red */
body[data-candle-theme="classic"] .tc-trade-arrow-circle.dir-up {
  background-color: #16c784 !important;
  box-shadow: none !important;
}

body[data-candle-theme="classic"] .tc-trade-stake.text-green,
body[data-candle-theme="classic"] .tc-trade-result-text.text-green,
body[data-candle-theme="classic"] .tc-trade-row .text-green,
body[data-candle-theme="classic"] .tc-trade-details .text-green,
body[data-candle-theme="classic"] .trade-pending-mini .text-green,
body[data-candle-theme="classic"] .pending-card-info .text-green,
body[data-candle-theme="classic"] .pending-card-dir.up {
  color: #16c784 !important;
}

/* 3. RED DOWN TRADES: Always strictly Red across all themes */
.tc-trade-arrow-circle.dir-down {
  background-color: #ff5252 !important;
}

.tc-trade-stake.text-danger,
.tc-trade-result-text.text-danger,
.tc-trade-row .text-danger,
.tc-trade-details .text-danger,
.trade-pending-mini .text-danger,
.pending-card-info .text-danger,
.pending-card-dir.down {
  color: #ff5252 !important;
}

/* Button Content */
.tc-btn-content {
  position: relative !important;
  z-index: 4 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.tc-btn-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* 3D Arrow Badge */
.tc-action-buttons .tc-trade-btn .tc-btn-arrow {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* 6. Trades History Tabs: Zenance Purple Underline & Badges */
.tc-trades-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: 1.5px solid rgba(108, 0, 255, 0.12) !important;
  margin-bottom: 10px !important;
  margin-top: 8px !important;
}

body:not(.light-theme) .tc-trades-tabs {
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.06) !important;
}

.tc-tab-btn {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 8px 4px !important;
  cursor: pointer !important;
  text-align: center !important;
  border-bottom: 2.5px solid transparent !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

body.light-theme .tc-tab-btn {
  color: #64748b !important;
}

body:not(.light-theme) .tc-tab-btn {
  color: rgba(255, 255, 255, 0.45) !important;
}

.tc-tab-btn.active {
  color: #6c00ff !important;
  border-bottom: 2.5px solid #6c00ff !important;
  font-weight: 800 !important;
}

body:not(.light-theme) .tc-tab-btn.active {
  color: #a78bfa !important;
  border-bottom: 2.5px solid #8b5cf6 !important;
}

/* Purple Tab Badge */
.tab-badge {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

body.light-theme .tab-badge {
  background: rgba(108, 0, 255, 0.08) !important;
  color: #6c00ff !important;
}

body.light-theme .tc-tab-btn.active .tab-badge {
  background: #6c00ff !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(108, 0, 255, 0.35) !important;
}

body:not(.light-theme) .tab-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

body:not(.light-theme) .tc-tab-btn.active .tab-badge {
  background: #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4) !important;
}

/* 7. Trade History Cards: Glassmorphism */
.history-mini-item,
.active-mini-card {
  border-radius: 12px !important;
  padding: 10px 12px !important;
  transition: all 0.2s ease !important;
}

body.light-theme .history-mini-item,
body.light-theme .active-mini-card {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(108, 0, 255, 0.10) !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.03), inset 0 1px 0 #ffffff !important;
  color: #0f172a !important;
}

body:not(.light-theme) .history-mini-item,
body:not(.light-theme) .active-mini-card {
  background: rgba(17, 22, 34, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

.history-mini-item:hover,
.active-mini-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(108, 0, 255, 0.28) !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.08) !important;
}

/* ============================================================
   TRADES PANEL REDESIGN: EXPANDABLE SHEET OVER TRADE BUTTONS
   ============================================================ */

/* 7. Header Bar & Controls */
.tc-trades-header-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 6px 4px 2px !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.15) !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  user-select: none !important;
}

body.light-theme .tc-trades-header-bar {
  border-bottom: 1px solid rgba(108, 0, 255, 0.1) !important;
}

.tc-trades-header-bar .tc-trades-tabs {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

.tc-trades-toggle-btn {
  background: rgba(139, 92, 246, 0.12) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  border-radius: 6px !important;
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #a78bfa !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

body.light-theme .tc-trades-toggle-btn {
  background: rgba(108, 0, 255, 0.08) !important;
  border: 1px solid rgba(108, 0, 255, 0.18) !important;
  color: #6c00ff !important;
}

.tc-trades-toggle-btn:hover {
  background: #8b5cf6 !important;
  color: #ffffff !important;
  border-color: #8b5cf6 !important;
  transform: scale(1.06) !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4) !important;
}

.tc-trades-toggle-arrow {
  display: block !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* When expanded, the arrow rotates 180deg to point down (collapse) */
.tc-trades-panel-mobile-container.expanded .tc-trades-toggle-arrow,
.tc-trades-toggle-arrow.open {
  transform: rotate(180deg) !important;
}

/* Floating briefcase active trades badge: Zenance Purple */
.floating-badge,
#floating-trades-badge {
  background: #8b5cf6 !important;
  color: #ffffff !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid #111622 !important;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.6) !important;
  top: -4px !important;
  right: -4px !important;
}

body.light-theme .floating-badge,
body.light-theme #floating-trades-badge {
  border-color: #ffffff !important;
}

/* ============================================================
   DESKTOP EXPAND / COLLAPSE SHEET BEHAVIOR OVER ACTION BUTTONS
   ============================================================ */
@media (min-width: 768px) {
  .tc-trades-panel-mobile-container {
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Default unexpanded view: comfortable height with scrolling */
  .tc-trades-panel-mobile-container:not(.expanded) {
    flex: 1 1 200px !important;
    min-height: 170px !important;
    max-height: 240px !important;
    position: relative !important;
  }

  .tc-trades-panel-mobile-container:not(.expanded) .tc-trades-content {
    flex: 1 1 auto !important;
    max-height: 190px !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
  }

  /* EXPANDED VIEW: Slides UP directly OVER the UP/DOWN action buttons */
  .tc-trades-panel-mobile-container.expanded {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 130px !important;
    height: calc(100% - 130px) !important;
    max-height: calc(100% - 130px) !important;
    z-index: 150 !important;
    background: #0e121d !important;
    border-top: 2px solid #8b5cf6 !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 10px 12px 14px 12px !important;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.85), 0 0 24px rgba(108, 0, 255, 0.25) !important;
  }

  body.light-theme .tc-trades-panel-mobile-container.expanded {
    background: #ffffff !important;
    border-top: 2px solid #8b5cf6 !important;
    box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.18), 0 0 20px rgba(108, 0, 255, 0.12) !important;
  }

  .tc-trades-panel-mobile-container.expanded .tc-trades-content {
    flex: 1 1 auto !important;
    max-height: calc(100% - 46px) !important;
    overflow-y: auto !important;
    padding: 6px 2px 12px 2px !important;
  }

  /* Keep toggle arrow visible on desktop */
  #tc-trades-toggle-btn,
  .tc-trades-toggle-btn {
    display: flex !important;
  }
}

/* Mobile Chart Tools Dropdown (Hidden on Desktop) */
#mobile-tools-dropdown-btn {
  display: none !important;
}

/* ============================================================
   MOBILE OVERRIDES: TIMER DROPDOWN STACKING, TRADES BOTTOM SHEET & TIMEFRAME BUTTON ON LEFT
   ============================================================ */
@media (max-width: 767px) {

  /* 1. Stacking Context Fix: Ensure controls and timer popover render above the chart */
  .trade-chart-area {
    position: relative !important;
    z-index: 10 !important;
  }

  .trade-controls-panel {
    position: relative !important;
    z-index: 500 !important;
  }

  .tc-mobile-row {
    position: relative !important;
    z-index: 510 !important;
  }

  /* Expiry Time Popover (Timer dropup) renders 100% on top of graph */
  .tc-time-popover,
  #tc-time-popover {
    z-index: 100000 !important;
  }

  /* ── Compact Asset Selector Row on Mobile ── */
  .tc-mobile-asset-row {
    padding: 0 0 4px 0 !important;
    margin-bottom: 2px !important;
  }

  .tc-mobile-asset-row .tc-asset-selector-btn,
  .tc-asset-selector-btn {
    padding: 3px 8px !important;
    border-radius: 10px !important;
    gap: 6px !important;
  }

  #tc-mobile-asset-icon-wrap {
    width: 30px !important;
    height: 20px !important;
  }

  #tc-mobile-asset-icon-wrap img,
  #tc-mobile-asset-icon-wrap svg {
    width: 18px !important;
    height: 18px !important;
  }

  .tc-asset-name-val {
    font-size: 13.5px !important;
  }

  .tc-asset-payout-val {
    font-size: 13.5px !important;
  }

  .tc-asset-arrow-down {
    font-size: 7.5px !important;
  }

  .tc-pending-toggle-label {
    font-size: 8.5px !important;
    letter-spacing: 0.5px !important;
  }

  .tc-pending-switch {
    width: 30px !important;
    height: 17px !important;
  }

  .tc-pending-switch-handle {
    width: 13px !important;
    height: 13px !important;
  }

  /* ── Compact Timer & Investment Cards on Mobile ── */
  .tc-mobile-row {
    gap: 8px !important;
    margin-bottom: 2px !important;
  }

  .tc-mobile-col {
    height: 44px !important;
    min-height: 44px !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .tc-card-label {
    top: -6px !important;
    left: 10px !important;
    padding: 1px 6px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.5px !important;
  }

  .tc-time-row-desktop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .tc-time-display-val {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }

  .tc-mobile-col .tc-input-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Big, Thumb-Friendly Stepper Buttons */
  .tc-mobile-col .tc-step-btn,
  .tc-step-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .tc-amount-input {
    font-size: 15px !important;
    font-weight: 800 !important;
    text-align: center !important;
    height: auto !important;
    line-height: 1.1 !important;
    padding: 0 !important;
  }

  .tc-switch-container {
    bottom: -6px !important;
    padding: 0 5px !important;
  }

  .tc-switch-link {
    font-size: 8px !important;
    letter-spacing: 0.5px !important;
  }

  /* ── Disable scale-up and translateY jump effects on mobile trade controls ── */
  .tc-mobile-col,
  .tc-mobile-col:hover,
  .tc-mobile-col:active,
  .tc-mobile-col:focus,
  .tc-mobile-col:focus-within,
  .tc-time-group,
  .tc-time-group:hover,
  .tc-time-group:active,
  #tc-time-group-card,
  #tc-time-group-card:hover,
  #tc-time-group-card:active,
  .tc-amount-group,
  .tc-amount-group:hover,
  .tc-amount-group:active,
  .tc-asset-selector-btn,
  .tc-asset-selector-btn:hover,
  .tc-asset-selector-btn:active,
  .tc-mobile-asset-row .tc-asset-selector-btn,
  .tc-mobile-asset-row .tc-asset-selector-btn:hover,
  .tc-mobile-asset-row .tc-asset-selector-btn:active,
  .tc-step-btn,
  .tc-step-btn:hover,
  .tc-step-btn:active,
  .tc-time-step-btn,
  .tc-time-step-btn:hover,
  .tc-time-step-btn:active,
  .tc-switch-container,
  .tc-switch-container:hover,
  .tc-switch-container:active,
  .tc-switch-link,
  .tc-switch-link:hover,
  .tc-switch-link:active,
  .tc-profit-preview,
  .tc-profit-preview:hover,
  .tc-profit-preview:active,
  .tc-profit-row,
  .tc-profit-row:hover,
  .tc-profit-row:active,
  .tc-mobile-pending-toggle,
  .tc-mobile-pending-toggle:hover,
  .tc-mobile-pending-toggle:active {
    transform: none !important;
  }

  /* Single-Row Compact Investment & Payout Preview on Mobile */
  .tc-mobile-actions-row .tc-profit-preview,
  .tc-profit-preview {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 6px 10px !important;
    margin-top: 2px !important;
    margin-bottom: 4px !important;
  }

  .tc-mobile-actions-row .tc-profit-row,
  .tc-profit-row {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
    font-size: 11.5px !important;
  }

  .tc-profit-row:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-right: 10px !important;
  }

  body.light-theme .tc-profit-row:first-child {
    border-right: 1px solid rgba(108, 0, 255, 0.1) !important;
  }

  .tc-profit-row .tc-dotted-connector {
    flex: 1 !important;
    margin: 0 5px !important;
  }

  .tc-profit-row .tc-preview-label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  .tc-profit-row .tc-preview-val {
    white-space: nowrap !important;
  }

  .tc-profit-row .tc-preview-val.text-green {
    font-size: 13.5px !important;
  }

  .tc-profit-row .tc-preview-val.text-white {
    font-size: 13px !important;
  }

  /* Compact Single-Row Up & Down Trade Action Buttons */
  .tc-mobile-actions-row .tc-action-buttons,
  .tc-action-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 6px !important;
  }

  .tc-mobile-actions-row .tc-action-buttons .tc-trade-btn,
  .tc-action-buttons .tc-trade-btn,
  .tc-trade-btn {
    flex: 1 1 0 !important;
    width: 50% !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 14px !important;
  }

  .tc-action-buttons .tc-trade-btn .tc-btn-content,
  .tc-trade-btn .tc-btn-content {
    padding: 0 14px !important;
  }

  .tc-action-buttons .tc-trade-btn .tc-btn-title,
  .tc-trade-btn .tc-btn-title {
    font-size: 17px !important;
    font-weight: 800 !important;
  }

  .tc-action-buttons .tc-trade-btn .tc-btn-arrow,
  .tc-trade-btn .tc-btn-arrow {
    width: 28px !important;
    height: 28px !important;
    font-size: 15px !important;
  }

  .tc-action-buttons .tc-trade-btn .tc-btn-arrow svg,
  .tc-trade-btn .tc-btn-arrow svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* ── Mobile Chart Tools Dropdown (Collapsible Left Toolbar) ── */
  #mobile-tools-dropdown-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
  }

  #mobile-tools-dropdown-btn:active {
    transform: scale(0.92) !important;
  }

  .mobile-tools-chevron {
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: currentColor !important;
  }

  /* Collapsed by default on mobile: hide all tool buttons below the dropdown arrow */
  .chart-floating-left-bar:not(.tools-expanded) > :not(#mobile-tools-dropdown-btn) {
    display: none !important;
  }

  /* Expanded on mobile: smoothly drop down all tool buttons */
  .chart-floating-left-bar.tools-expanded #mobile-tools-dropdown-btn .mobile-tools-chevron {
    transform: rotate(180deg) !important;
  }

  .chart-floating-left-bar.tools-expanded > :not(#mobile-tools-dropdown-btn) {
    display: flex !important;
    animation: mobileToolDropIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  @keyframes mobileToolDropIn {
    0% {
      opacity: 0;
      transform: translateY(-8px) scale(0.92);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Active trade dot indicator on the dropdown toggle button */
  .mobile-tools-active-dot {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.8) !important;
    pointer-events: none !important;
  }

  /* ── Redesigned Mobile Select Asset Modal (Reference Style) ── */
  body.asset-picker-open #app-nav,
  body.asset-picker-open .app-nav {
    display: none !important;
  }

  #asset-picker-modal.asset-picker-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    z-index: 9999999 !important;
    background: rgba(0, 0, 0, 0.82) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .asset-picker-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    background: #11151f !important;
    padding: 10px 14px 14px 14px !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  body.light-theme .asset-picker-panel {
    background: #ffffff !important;
  }

  .asset-picker-header,
  body.light-theme .asset-picker-header,
  .asset-picker-panel .asset-picker-header {
    padding: 0 0 2px 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .asset-picker-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.2px !important;
  }

  body.light-theme .asset-picker-title {
    color: #0f172a !important;
  }

  .asset-picker-close-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  body.light-theme .asset-picker-close-btn {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #475569 !important;
  }

  /* Compact Category Tabs directly under header */
  .asset-picker-categories,
  body.light-theme .asset-picker-categories,
  .asset-picker-panel .asset-picker-categories {
    display: flex !important;
    gap: 6px !important;
    margin: 4px 0 8px 0 !important;
    padding: 0 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    background: transparent !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .asset-picker-categories::-webkit-scrollbar {
    display: none !important;
  }

  .category-btn {
    padding: 5px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }

  body.light-theme .category-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #64748b !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }

  .category-btn.active {
    background: #6c00ff !important;
    color: #ffffff !important;
    border-color: #6c00ff !important;
    box-shadow: 0 2px 8px rgba(108, 0, 255, 0.35) !important;
  }

  body.light-theme .category-btn.active {
    background: #6c00ff !important;
    color: #ffffff !important;
    border-color: #6c00ff !important;
  }

  /* Search Row with Star Favorites Filter Button */
  .asset-picker-search-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
  }

  .asset-picker-fav-filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
  }

  body.light-theme .asset-picker-fav-filter-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #334155 !important;
  }

  .asset-picker-fav-filter-btn .fav-filter-star-icon {
    color: #f59e0b !important;
  }

  .asset-picker-fav-filter-btn .fav-filter-count {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
  }

  body.light-theme .asset-picker-fav-filter-btn .fav-filter-count {
    color: #0f172a !important;
  }

  .asset-picker-fav-filter-btn.active {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
  }

  .asset-picker-search-container {
    flex: 1 !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
  }

  body.light-theme .asset-picker-search-container {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }

  .asset-picker-search {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-size: 13px !important;
    color: #ffffff !important;
    width: 100% !important;
    padding: 0 6px !important;
  }

  body.light-theme .asset-picker-search {
    color: #0f172a !important;
  }

  /* Compact Asset Row & Left Alignment */
  .asset-picker-row {
    padding: 8px 6px !important;
  }

  .asset-row-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Star button on each asset row */
  .asset-row-star-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    color: #f59e0b !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
  }

  body.light-theme .asset-row-star-btn {
    color: #f59e0b !important;
  }

  .asset-row-star-btn.active {
    color: #f59e0b !important;
  }

  .asset-row-star-btn svg {
    display: block !important;
    pointer-events: none !important;
    stroke: #f59e0b !important;
    width: 15px !important;
    height: 15px !important;
  }

  /* Hide recent selected area completely on mobile */
  .recent-assets-label,
  .asset-picker-pills {
    display: none !important;
  }

  .asset-picker-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-bottom: 24px !important;
  }

  /* 2. Mobile Trades & Pending Bottom Sheet */
  .tc-trades-mobile-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 999998 !important;
    opacity: 0;
    transition: opacity 0.28s ease !important;
    pointer-events: none;
  }

  .tc-trades-mobile-backdrop.active {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* 1. Eliminate duplicate pseudo-element grabber */
  .tc-trades-panel-mobile-container::before,
  #tc-trades-panel-mobile-container::before {
    display: none !important;
    content: none !important;
  }

  /* 2. Hide collapse arrow button on MOBILE ONLY (kept on desktop) */
  #tc-trades-toggle-btn,
  .tc-trades-toggle-btn {
    display: none !important;
  }

  /* 3. Mobile Trades Sheet: cut height in half when empty */
  .tc-trades-panel-mobile-container,
  #tc-trades-panel-mobile-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 150px !important;
    max-height: 50vh !important;
    background: #0e121d !important;
    border-top: 2px solid #8b5cf6 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.88), 0 0 24px rgba(108, 0, 255, 0.25) !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 14px 18px 14px !important;
    box-sizing: border-box !important;
    transform: translateY(105%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .tc-trades-panel-mobile-container.expanded,
  #tc-trades-panel-mobile-container.expanded {
    transform: translateY(0) !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  body.light-theme .tc-trades-panel-mobile-container,
  body.light-theme #tc-trades-panel-mobile-container {
    background: #ffffff !important;
    border-top: 2px solid #8b5cf6 !important;
    box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.18), 0 0 20px rgba(108, 0, 255, 0.12) !important;
  }

  body.light-theme #tc-trades-panel-mobile-container .tc-trades-content {
    background: #ffffff !important;
  }

  body.light-theme #tc-trades-panel-mobile-container .no-trades-mini {
    color: #64748b !important;
  }

  /* Single Drag Handle Bar (Top moving area) - generous touch area */
  .tc-trades-drag-handle-bar {
    width: 100% !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: grab !important;
    touch-action: none !important;
    flex-shrink: 0 !important;
    padding: 6px 0 !important;
    box-sizing: border-box !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .tc-trades-drag-pill {
    width: 48px !important;
    height: 5px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    pointer-events: none !important;
  }

  body.light-theme .tc-trades-drag-pill {
    background: rgba(0, 0, 0, 0.25) !important;
  }

  .tc-trades-panel-mobile-container .tc-trades-content {
    flex: 1 1 auto !important;
    max-height: calc(50vh - 65px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 2px 10px 2px !important;
  }

  /* 3. Timeframe button placed on left side right next to pen icon */
  .chart-price-header #chart-timeframes,
  #chart-timeframes {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 105 !important;
  }

  .chart-price-header #chart-timeframes .tf-dropdown-wrap,
  #chart-timeframes .tf-dropdown-wrap {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    width: auto !important;
  }

  .chart-price-header #chart-timeframes #tf-dropdown-btn.tf-dropdown-btn,
  #chart-timeframes #tf-dropdown-btn.tf-dropdown-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    height: 30px !important;
    min-height: 30px !important;
    width: auto !important;
    min-width: 48px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    color: #e2e8f0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
  }

  body.light-theme .chart-price-header #chart-timeframes #tf-dropdown-btn.tf-dropdown-btn,
  body.light-theme #chart-timeframes #tf-dropdown-btn.tf-dropdown-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  }

  .chart-price-header #chart-timeframes #tf-dropdown-btn.tf-dropdown-btn:hover,
  #chart-timeframes #tf-dropdown-btn.tf-dropdown-btn:hover {
    background: rgba(108, 0, 255, 0.12) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    color: #8b5cf6 !important;
  }

  .chart-price-header #chart-timeframes #tf-dropdown-btn.tf-dropdown-btn svg,
  #chart-timeframes #tf-dropdown-btn.tf-dropdown-btn svg {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    fill: currentColor !important;
    margin-left: 2px !important;
    flex-shrink: 0 !important;
  }

  .chart-price-header #chart-timeframes .tf-dropdown-menu,
  #chart-timeframes .tf-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 100000 !important;
    min-width: 90px !important;
    border-radius: 8px !important;
    background: #111622 !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    padding: 4px !important;
    margin-top: 0 !important;
  }

  body.light-theme .chart-price-header #chart-timeframes .tf-dropdown-menu,
  body.light-theme #chart-timeframes .tf-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid rgba(108, 0, 255, 0.2) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  }
}

/* 8. ENFORCED ZENANCE PURPLE TAB ACTIVE UNDERLINE & STYLING */
.tc-trades-tabs .tc-tab-btn.active,
body.light-theme .tc-trades-tabs .tc-tab-btn.active,
body.light-theme .tc-trades-panel-mobile-container .tc-tab-btn.active,
.tc-trades-panel-mobile-container .tc-tab-btn.active,
#tc-tab-active.active,
#tc-tab-pending.active {
  color: #6c00ff !important;
  border-bottom: 2.5px solid #6c00ff !important;
  border-bottom-color: #6c00ff !important;
  font-weight: 800 !important;
}

body:not(.light-theme) .tc-trades-tabs .tc-tab-btn.active,
body:not(.light-theme) .tc-trades-panel-mobile-container .tc-tab-btn.active,
body:not(.light-theme) #tc-tab-active.active,
body:not(.light-theme) #tc-tab-pending.active {
  color: #a78bfa !important;
  border-bottom: 2.5px solid #8b5cf6 !important;
  border-bottom-color: #8b5cf6 !important;
}

.tc-tab-btn.active svg,
#tc-tab-pending.active svg {
  fill: #6c00ff !important;
}

body:not(.light-theme) .tc-tab-btn.active svg,
body:not(.light-theme) #tc-tab-pending.active svg {
  fill: #a78bfa !important;
}

/* 9. DATE GROUP DIVIDER & BADGE IN TRADE SECTION */
.tc-trade-date-divider {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  color: #6c00ff !important;
  letter-spacing: 0.8px !important;
  font-weight: 800 !important;
}

body.light-theme .tc-trade-date-divider {
  color: #6c00ff !important;
}

body:not(.light-theme) .tc-trade-date-divider {
  color: #c4b5fd !important;
}

.tc-trade-date-badge {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 800 !important;
}

body.light-theme .tc-trade-date-badge {
  background: rgba(108, 0, 255, 0.10) !important;
  color: #6c00ff !important;
  border: 1px solid rgba(108, 0, 255, 0.20) !important;
  box-shadow: 0 1px 4px rgba(108, 0, 255, 0.08) !important;
}

body:not(.light-theme) .tc-trade-date-badge {
  background: rgba(108, 0, 255, 0.22) !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(108, 0, 255, 0.35) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

/* 10. TRADE ROW & EXPANDABLE DETAILS */
.tc-trade-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 52px !important;
  height: auto !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  margin-bottom: 6px !important;
  overflow: visible !important;
  transition: all 0.2s ease !important;
}

body.light-theme .tc-trade-row {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(108, 0, 255, 0.14) !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.04) !important;
}

body:not(.light-theme) .tc-trade-row {
  background: rgba(17, 22, 34, 0.75) !important;
  border: 1px solid rgba(108, 0, 255, 0.22) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.tc-trade-row:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(108, 0, 255, 0.40) !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.12) !important;
}

.tc-trade-row-new {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  gap: 6px !important;
}

body.light-theme .tc-trade-symbol-text {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.light-theme .tc-trade-time-text {
  color: #475569 !important;
  font-weight: 600 !important;
}

.tc-trade-caret {
  fill: #6c00ff !important;
  width: 14px !important;
  height: 14px !important;
  margin-right: 4px !important;
}

body:not(.light-theme) .tc-trade-caret {
  fill: #a78bfa !important;
}

.tc-trade-details {
  border-top: 1px solid rgba(108, 0, 255, 0.10) !important;
  background: rgba(108, 0, 255, 0.025) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body:not(.light-theme) .tc-trade-details {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(0, 0, 0, 0.25) !important;
}

/* 11. PENDING SECTION BELOW: Mini Cards & State */
.trade-pending-mini {
  flex-direction: column !important;
  gap: 8px !important;
  padding: 2px !important;
}

.trade-pending-mini[style*="display: none"] {
  display: none !important;
}

.trade-pending-mini:not([style*="display: none"]) {
  display: flex !important;
}

.trade-pending-mini .pending-trade-card {
  border-radius: 12px !important;
  padding: 10px 12px !important;
  transition: all 0.2s ease !important;
}

body.light-theme .trade-pending-mini .pending-trade-card {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(108, 0, 255, 0.14) !important;
  box-shadow: 0 2px 10px rgba(108, 0, 255, 0.03) !important;
  color: #0f172a !important;
}

body:not(.light-theme) .trade-pending-mini .pending-trade-card {
  background: rgba(17, 22, 34, 0.70) !important;
  border: 1px solid rgba(108, 0, 255, 0.25) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

.trade-pending-mini .pending-trade-card:hover {
  transform: translateY(-1px) !important;
  border-color: #6c00ff !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.14) !important;
}

.pending-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.pending-card-asset {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  color: #6c00ff !important;
}

body:not(.light-theme) .pending-card-asset {
  color: #c4b5fd !important;
}

.pending-card-cancel {
  background: rgba(108, 0, 255, 0.08) !important;
  color: #6c00ff !important;
  border: 1px solid rgba(108, 0, 255, 0.18) !important;
  border-radius: 50% !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.pending-card-cancel:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  transform: scale(1.1) !important;
}

.pending-card-info {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

body:not(.light-theme) .pending-card-info {
  color: rgba(255, 255, 255, 0.6) !important;
}

.no-trades-mini {
  color: #6c00ff !important;
  opacity: 0.7 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 16px 0 !important;
}

body:not(.light-theme) .no-trades-mini {
  color: #a78bfa !important;
}

/* ============================================================
   ZENANCE PURPLE SUITE: EXPIRY TIME POPOVER & PAYOUT THEME
   ============================================================ */

/* 1. EXPIRY TIME POPOVER (Quotex Style Popover Upgrade) */
.tc-time-popover {
  border-radius: 16px !important;
  border: 1.5px solid rgba(108, 0, 255, 0.28) !important;
  padding: 10px !important;
  width: 195px !important;
  max-width: 195px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(108, 0, 255, 0.18) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.light-theme .tc-time-popover {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(108, 0, 255, 0.22) !important;
  box-shadow: 0 12px 36px rgba(108, 0, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

body:not(.light-theme) .tc-time-popover {
  background: rgba(13, 17, 28, 0.94) !important;
  border-color: rgba(108, 0, 255, 0.35) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(108, 0, 255, 0.22) !important;
}

/* Popover Tabs (TIMER / TIME) Capsule */
.tc-time-popover-tabs {
  background: rgba(108, 0, 255, 0.08) !important;
  border: 1px solid rgba(108, 0, 255, 0.18) !important;
  border-radius: 10px !important;
  padding: 3px !important;
  gap: 3px !important;
}

body.light-theme .tc-time-popover-tabs {
  background: rgba(108, 0, 255, 0.06) !important;
  border-color: rgba(108, 0, 255, 0.14) !important;
}

.tc-popover-tab-btn {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  border-radius: 8px !important;
  padding: 5px 0 !important;
  color: #64748b !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body:not(.light-theme) .tc-popover-tab-btn {
  color: rgba(255, 255, 255, 0.5) !important;
}

.tc-popover-tab-btn:hover {
  color: #6c00ff !important;
}

body:not(.light-theme) .tc-popover-tab-btn:hover {
  color: #c4b5fd !important;
}

/* Active Tab: 3D Zenance Purple Pill */
.tc-popover-tab-btn.active,
body.light-theme .tc-popover-tab-btn.active {
  background: linear-gradient(135deg, #6c00ff 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

/* Preset Duration Grid Buttons */
.tc-grid-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 7px 0 !important;
  border: 1px solid transparent !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.light-theme .tc-grid-btn {
  background: rgba(108, 0, 255, 0.04) !important;
  border: 1px solid rgba(108, 0, 255, 0.10) !important;
  color: #1e293b !important;
}

body.light-theme .tc-grid-btn:hover {
  background: rgba(108, 0, 255, 0.10) !important;
  border-color: rgba(108, 0, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

body:not(.light-theme) .tc-grid-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}

body:not(.light-theme) .tc-grid-btn:hover {
  background: rgba(108, 0, 255, 0.18) !important;
  border-color: rgba(108, 0, 255, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Active Preset Duration Button: Tactile 3D Zenance Purple */
.tc-grid-btn.active,
body.light-theme .tc-grid-btn.active {
  background: linear-gradient(135deg, #6c00ff 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 12px rgba(108, 0, 255, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Set Manually Button */
.tc-popover-manual-btn,
body.light-theme .tc-popover-manual-btn {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  padding: 7px 0 !important;
  margin-top: 4px !important;
  color: #6c00ff !important;
  background: rgba(108, 0, 255, 0.06) !important;
  border: 1px dashed rgba(108, 0, 255, 0.35) !important;
  transition: all 0.2s ease !important;
}

body:not(.light-theme) .tc-popover-manual-btn {
  color: #c4b5fd !important;
  background: rgba(108, 0, 255, 0.10) !important;
  border-color: rgba(108, 0, 255, 0.4) !important;
}

.tc-popover-manual-btn:hover {
  background: rgba(108, 0, 255, 0.15) !important;
  border-color: #6c00ff !important;
  transform: scale(1.01) !important;
}

/* Manual inputs wrapper */
.tc-popover-manual-input-wrap {
  border-radius: 10px !important;
  padding: 8px !important;
}

body.light-theme .tc-popover-manual-input-wrap {
  background: rgba(108, 0, 255, 0.04) !important;
  border: 1px solid rgba(108, 0, 255, 0.12) !important;
}

body:not(.light-theme) .tc-popover-manual-input-wrap {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.tc-manual-input-col span {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  font-size: 9px !important;
  color: #6c00ff !important;
}

body:not(.light-theme) .tc-manual-input-col span {
  color: #c4b5fd !important;
}

.tc-manual-input-col input {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  padding: 5px 0 !important;
  transition: all 0.15s ease !important;
}

body.light-theme .tc-manual-input-col input {
  background: #ffffff !important;
  border: 1px solid rgba(108, 0, 255, 0.2) !important;
  color: #0f172a !important;
}

body:not(.light-theme) .tc-manual-input-col input {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(108, 0, 255, 0.3) !important;
  color: #ffffff !important;
}

.tc-manual-input-col input:focus {
  border-color: #6c00ff !important;
  box-shadow: 0 0 8px rgba(108, 0, 255, 0.35) !important;
}

/* 3D Tactile Apply Button */
.tc-popover-manual-apply-btn,
body.light-theme .tc-popover-manual-apply-btn {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  border-radius: 8px !important;
  padding: 7px 0 !important;
  margin-top: 4px !important;
  background: linear-gradient(135deg, #6c00ff 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tc-popover-manual-apply-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(108, 0, 255, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}

.tc-popover-manual-apply-btn:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 2px 6px rgba(108, 0, 255, 0.4) !important;
}

/* 2. ASSET SELECTOR MODAL PAYOUT PERCENTAGE (Screenshot 2) */
.asset-row-payout {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #6c00ff !important;
  letter-spacing: -0.2px !important;
}

body.light-theme .asset-row-payout {
  color: #6c00ff !important;
  text-shadow: 0 0 10px rgba(108, 0, 255, 0.2) !important;
}

body:not(.light-theme) .asset-row-payout {
  color: #a78bfa !important;
  text-shadow: 0 0 12px rgba(167, 139, 250, 0.4) !important;
}

/* Asset Selector Category Tabs Active Pill */
.category-btn.active,
body.light-theme .category-btn.active {
  background: linear-gradient(135deg, #6c00ff 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 10px rgba(108, 0, 255, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

/* 3. RIGHT BAR PAYOUT PREVIEW (Zenance Purple) */
#tc-payout-preview {
  color: #6c00ff !important;
  font-weight: 800 !important;
  text-shadow: 0 0 12px rgba(108, 0, 255, 0.25) !important;
}

body:not(.light-theme) #tc-payout-preview {
  color: #a78bfa !important;
  text-shadow: 0 0 12px rgba(167, 139, 250, 0.4) !important;
}

/* ================================================================
   TRADE HEADER — COMPLETE REDESIGN
   Halal badge, Avatar, Account Selector, Notifications Dropdown
   ================================================================ */

/* --- Trade Header Bar: top padding to prevent touching dead zone --- */
.trade-header-bar {
  padding-top: 4px !important;
  overflow: visible !important;
}

.trade-header-right {
  overflow: visible !important;
}

/* --- Halal Badge: floats above the account selector container --- */
.trade-halal-badge {
  position: absolute !important;
  top: -11px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  color: #0d6b3a !important;
  letter-spacing: 0.6px !important;
  font-family: 'Inter', 'Space Grotesk', sans-serif !important;
  white-space: nowrap !important;
  pointer-events: all !important;
  cursor: pointer !important;
  line-height: 1 !important;
  z-index: 10 !important;
  background: #e8fff4 !important;
  border: 1.5px solid #1ab76d !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 4px rgba(26, 183, 109, 0.2) !important;
  transition: background 0.2s !important;
}

body:not(.light-theme) .trade-halal-badge {
  background: rgba(26, 183, 109, 0.12) !important;
  border-color: rgba(26, 183, 109, 0.5) !important;
  color: #1ab76d !important;
  box-shadow: 0 1px 6px rgba(26, 183, 109, 0.15) !important;
}

.trade-halal-badge:hover {
  background: rgba(26, 183, 109, 0.2) !important;
}

/* --- Account selector container: room for the badge above --- */
.trade-account-selector {
  position: relative !important;
  margin-top: 10px !important;
}

/* --- Trade Header Avatar --- */
.trade-avatar-wrapper {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Trade avatar: clean circle without background shadow */
.trade-avatar-circle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

body:not(.light-theme) .trade-avatar-circle {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  border: 1.8px solid #7c3aed !important;
  box-shadow: none !important;
}

body.light-theme .trade-avatar-circle {
  background: #ffffff !important;
  border: 1.5px solid rgba(108, 0, 255, 0.3) !important;
  box-shadow: none !important;
}

.trade-avatar-wrapper:hover .trade-avatar-circle,
.trade-avatar-wrapper:active .trade-avatar-circle {
  box-shadow: none !important;
  transform: none !important;
}

#trade-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: none;
}

#trade-avatar-letter {
  font-size: 15px !important;
  font-weight: 800 !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  line-height: 1 !important;
  letter-spacing: -0.3px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:not(.light-theme) #trade-avatar-letter {
  color: #ffffff !important;
}

body.light-theme #trade-avatar-letter {
  color: #6c00ff !important;
}

/* Verified badge overlaid on avatar — clean drop-shadow */
.trade-verified-badge-img {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 15px !important;
  height: 15px !important;
  border: none !important;
  background: none !important;
  object-fit: contain !important;
  z-index: 10 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

body:not(.light-theme) .trade-verified-badge-img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

/* --- Notifications Dropdown Positioning Fix --- */
.notifications-dropdown {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  width: 340px !important;
  max-height: 580px !important;
  background: #111422 !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.1) !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
}

/* --- Account Dropdown Menu Upgrade --- */
.balance-dropdown-menu {
  background: #111422 !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.08) !important;
}

.balance-dropdown-item {
  transition: background 0.15s !important;
  border-radius: 8px !important;
  margin: 4px 8px !important;
}

.balance-dropdown-item:hover {
  background: rgba(139, 92, 246, 0.08) !important;
}

/* Active (selected) account row: purple accent */
.balance-dropdown-item.active {
  background: rgba(108, 0, 255, 0.14) !important;
  border-left: 3px solid #8b5cf6 !important;
  padding-left: 10px !important;
}

.menu-account-title {
  font-weight: 700 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Inter', 'Space Grotesk', sans-serif !important;
  transition: color 0.15s ease !important;
}

/* Active selected account title in Zenance Purple */
.balance-dropdown-item.active .menu-account-title {
  color: #a78bfa !important;
  font-weight: 800 !important;
}

body.light-theme .balance-dropdown-item.active .menu-account-title {
  color: #6c00ff !important;
}

/* Balance text: always clean white/slate — NEVER green */
.menu-account-balance {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin-top: 2px !important;
}

/* Active item balance in clean bright white */
.balance-dropdown-item.active .menu-account-balance {
  color: #ffffff !important;
  font-weight: 700 !important;
}

body.light-theme .menu-account-balance {
  color: #475569 !important;
}

body.light-theme .balance-dropdown-item.active .menu-account-balance {
  color: #0f172a !important;
}

/* Account trigger badge: DEMO & REAL in Zenance Purple */
.account-badge.badge-demo,
.account-badge.badge-real,
.account-badge.badge-live {
  color: #8b5cf6 !important;
  font-weight: 900 !important;
}

body.light-theme .account-badge.badge-demo,
body.light-theme .account-badge.badge-real,
body.light-theme .account-badge.badge-live {
  color: #6c00ff !important;
}

/* Header balance text: white in dark theme, dark slate in light theme (NEVER green) */
.trade-account-selector .account-balance {
  color: #ffffff !important;
  font-weight: 700 !important;
}

body.light-theme .trade-account-selector .account-balance {
  color: #0f172a !important;
}

/* Lightweight Stroke Bell Button */
.trade-bell-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: rgba(255, 255, 255, 0.65) !important;
  padding: 0 !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.trade-bell-btn svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  /* Lightweight outline stroke */
}

.trade-bell-btn .bell-3d-icon {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
}

.trade-bell-btn:hover {
  border-color: rgba(139, 92, 246, 0.45) !important;
  color: #ffffff !important;
  background: rgba(139, 92, 246, 0.1) !important;
}

body.light-theme .trade-bell-btn {
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #475569 !important;
}

body.light-theme .trade-bell-btn:hover {
  border-color: rgba(108, 0, 255, 0.35) !important;
  color: #6c00ff !important;
  background: rgba(108, 0, 255, 0.06) !important;
}

.demo-edit-icon {
  width: 14px !important;
  height: 14px !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  display: inline-block !important;
  vertical-align: middle !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s !important;
}

.demo-edit-icon:hover {
  opacity: 1 !important;
  color: #8b5cf6 !important;
}

.demo-reset-icon {
  width: 12px !important;
  height: 12px !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  margin-left: 6px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s !important;
}

.demo-reset-icon:hover {
  opacity: 1 !important;
  color: #8b5cf6 !important;
}

.account-select-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 8px !important;
}

/* ================================================================
   TRADE PAGE SIDEBAR — Tooltip-only Nav (desktop: icon + tooltip)
   Only affects sidebar when on the trade screen
   ================================================================ */

/* On desktop (768px+), trade screen sidebar shows icon-only with floating tooltips */
@media (min-width: 768px) {

  .app-container.trade-screen-active #app-nav,
  body[data-active-screen="trade"] #app-nav {
    overflow: visible !important;
  }

  /* Trade Screen & Collapsed Desktop Sidebar: Show icon logo ONLY, hide full text logo */
  .app-container.trade-screen-active #app-nav .logo-desktop-container,
  .app-container.trade-screen-active #app-nav .logo-desktop,
  body[data-active-screen="trade"] #app-nav .logo-desktop-container,
  body[data-active-screen="trade"] #app-nav .logo-desktop,
  .app-nav.collapsed .logo-desktop-container,
  .app-nav.collapsed .logo-desktop,
  body.sidebar-collapsed #app-nav .logo-desktop-container,
  body.sidebar-collapsed #app-nav .logo-desktop {
    display: none !important;
  }

  .app-container.trade-screen-active #app-nav .logo-mobile,
  body[data-active-screen="trade"] #app-nav .logo-mobile,
  .app-nav.collapsed .logo-mobile,
  body.sidebar-collapsed #app-nav .logo-mobile {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .app-container.trade-screen-active #app-nav .nav-logo-area,
  body[data-active-screen="trade"] #app-nav .nav-logo-area {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .app-container.trade-screen-active #app-nav .nav-items-group-top,
  .app-container.trade-screen-active #app-nav .nav-items-group-bottom,
  body[data-active-screen="trade"] #app-nav .nav-items-group-top,
  body[data-active-screen="trade"] #app-nav .nav-items-group-bottom {
    overflow: visible !important;
  }

  .app-container.trade-screen-active #app-nav .nav-item,
  body[data-active-screen="trade"] #app-nav .nav-item {
    position: relative !important;
    overflow: visible !important;
  }

  /* Hide textual label on desktop trade screen for minimalist icon-only aesthetic */
  .app-container.trade-screen-active #app-nav .nav-item .nav-label,
  body[data-active-screen="trade"] #app-nav .nav-item .nav-label {
    display: none !important;
  }

  /* Floating purple tooltip */
  .app-container.trade-screen-active #app-nav .nav-item::after,
  body[data-active-screen="trade"] #app-nav .nav-item::after {
    content: attr(data-nav-tooltip);
    position: absolute !important;
    left: calc(100% + 12px) !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(-6px) !important;
    background: #141029 !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    font-family: 'Inter', 'Space Grotesk', sans-serif !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 12px rgba(108, 0, 255, 0.25) !important;
    z-index: 999999 !important;
  }

  /* Tooltip arrow pointer */
  .app-container.trade-screen-active #app-nav .nav-item::before,
  body[data-active-screen="trade"] #app-nav .nav-item::before {
    content: '' !important;
    position: absolute !important;
    left: calc(100% + 7px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-width: 5px 5px 5px 0 !important;
    border-style: solid !important;
    border-color: transparent #141029 transparent transparent !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.18s ease !important;
    z-index: 999999 !important;
  }

  .app-container.trade-screen-active #app-nav .nav-item:hover::after,
  body[data-active-screen="trade"] #app-nav .nav-item:hover::after {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important;
  }

  .app-container.trade-screen-active #app-nav .nav-item:hover::before,
  body[data-active-screen="trade"] #app-nav .nav-item:hover::before {
    opacity: 1 !important;
  }
}

/* Mobile: keep sidebar nav labels visible and suppress floating tooltips */
@media (max-width: 767px) {

  #app-nav .nav-item::after,
  #app-nav .nav-item:not(.active)::before {
    display: none !important;
  }
}

/* Light theme tweaks for new trade header elements */
body.light-theme .trade-halal-badge {
  background: #e8fff4 !important;
  border-color: #1ab76d !important;
  color: #0d6b3a !important;
}

body.light-theme .trade-avatar-circle {
  border-color: rgba(108, 0, 255, 0.3) !important;
}

body.light-theme .notifications-dropdown {
  background: #ffffff !important;
  border-color: rgba(108, 0, 255, 0.15) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .balance-dropdown-menu {
  background: #ffffff !important;
  border-color: rgba(108, 0, 255, 0.15) !important;
}

body.light-theme .menu-account-title {
  color: #111 !important;
}

/* ================================================================
   HIDE GLOBAL FLOATING HEADER ON TRADE PAGE (Desktop & Mobile)
   The Trade page has its own dedicated Quotex-style .trade-header-bar.
   Hide #app-header exclusively on the trade screen on all devices.
   ================================================================ */
.app-container.trade-screen-active #app-header,
.app-container.trade-screen-active #app-header.floating-top-header,
.app-container.trade-screen-active .floating-top-header,
body[data-active-screen="trade"] #app-header,
body[data-active-screen="trade"] #app-header.floating-top-header,
body[data-active-screen="trade"] .floating-top-header,
#app-header.trade-screen-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* ============================================================
   APPLE LIQUID BUOYANT POP KEYFRAME ANIMATIONS (GLOBAL)
   ============================================================ */
@keyframes navIconBuoyantPop {
  0% {
    transform: scale(0.92);
  }

  45% {
    transform: scale(1.18);
  }

  75% {
    transform: scale(0.96);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes navLabelBuoyantPop {
  0% {
    transform: scale(0.92);
    opacity: 0.7;
  }

  55% {
    transform: scale(1.06);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================================
   PREMIUM MOBILE BOTTOM NAVIGATION BAR RE-DESIGN (STYLIZED & ENLARGED)
   ============================================================ */
@media (max-width: 767px) {

  /* 1. Remove obsolete SVG notch and floating circle elements */
  .nav-bg-container,
  .nav-indicator-circle,
  #app-nav .nav-bg-container,
  #app-nav .nav-indicator-circle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 2. Docked Bottom Navigation Bar */
  .app-nav,
  #app-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100vw !important;
    height: 68px !important;
    min-height: 68px !important;
    background: rgba(11, 14, 23, 0.92) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.6), 0 0 24px rgba(108, 0, 255, 0.12) !important;
    z-index: 99990 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 4px env(safe-area-inset-bottom, 0px) 4px !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.light-theme .app-nav,
  body.light-theme #app-nav {
    background: rgba(255, 255, 255, 0.94) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.2) !important;
    box-shadow: 0 -6px 24px rgba(108, 0, 255, 0.08), 0 -1px 2px rgba(0, 0, 0, 0.03) !important;
  }

  .app-container.has-bottom-nav .app-content:not(.trade-mode) {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Hide desktop-only elements inside nav */
  .app-nav .nav-logo-area,
  .app-nav .sidebar-resizer,
  .app-nav .desktop-only-nav,
  .app-nav .desktop-only-nav-bottom,
  .app-nav .nav-items-group-bottom,
  .sidebar-trade-btn-container {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* 3. Balanced Horizontal Items Group */
  .app-nav .nav-items-group-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    list-style: none !important;
    position: relative !important;
  }

  /* ============================================================
     3.5 iPhone 17 LIQUID GLASS DYNAMIC INDICATOR
     ============================================================ */
  .app-nav .nav-liquid-pill,
  #app-nav .nav-liquid-pill {
    position: absolute !important;
    top: 50% !important;
    margin-top: -27px !important;
    left: 0 !important;
    height: 54px !important;
    border-radius: 18px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0;
    will-change: transform, width;
    transition: opacity 0.2s ease !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(139, 92, 246, 0.25) 50%, rgba(108, 0, 255, 0.15) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 4px 22px rgba(124, 58, 237, 0.38), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
  }

  /* Specular gloss reflection curve across top of liquid capsule */
  .app-nav .nav-liquid-pill::after,
  #app-nav .nav-liquid-pill::after {
    content: '' !important;
    position: absolute !important;
    top: 1.5px !important;
    left: 8px !important;
    right: 8px !important;
    height: 42% !important;
    border-radius: 14px 14px 8px 8px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    pointer-events: none !important;
  }

  /* Internal specular refraction and caustic glow */
  .app-nav .nav-liquid-pill::before,
  #app-nav .nav-liquid-pill::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.3) 0%, transparent 65%) !important;
    pointer-events: none !important;
    border-radius: inherit !important;
  }

  /* Light Theme Liquid Glass */
  body.light-theme .app-nav .nav-liquid-pill,
  body.light-theme #app-nav .nav-liquid-pill {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(243, 238, 255, 0.96) 50%, rgba(232, 222, 255, 0.88) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    box-shadow: 0 4px 20px rgba(108, 0, 255, 0.16), inset 0 1.5px 2px rgba(255, 255, 255, 1), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  }

  body.light-theme .app-nav .nav-liquid-pill::after,
  body.light-theme #app-nav .nav-liquid-pill::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  }

  body.light-theme .app-nav .nav-liquid-pill::before,
  body.light-theme #app-nav .nav-liquid-pill::before {
    background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.6) 0%, transparent 65%) !important;
  }

  /* Apple Liquid Buoyant Pop Animations */
  @keyframes navIconBuoyantPop {
    0% {
      transform: scale(0.92);
    }

    45% {
      transform: scale(1.18);
    }

    75% {
      transform: scale(0.96);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes navLabelBuoyantPop {
    0% {
      transform: scale(0.92);
      opacity: 0.7;
    }

    55% {
      transform: scale(1.05);
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  /* ============================================================
     4. NAV ITEMS - PERFECT STRAIGHT HORIZONTAL LINE
     ============================================================ */
  .app-nav .nav-item,
  #app-nav .nav-item {
    flex: 1 1 20% !important;
    max-width: 20% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
    color: #94a3b8 !important;
    transform: none !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .app-nav .nav-item:active,
  #app-nav .nav-item:active {
    transform: scale(0.92) !important;
  }

  /* Strictly hide desktop-only items (Leaderboard and Card) on mobile */
  .app-nav .nav-item.desktop-only-nav,
  #app-nav .nav-item.desktop-only-nav,
  .app-nav #nav-leaderboard,
  .app-nav #nav-card,
  #nav-leaderboard,
  #nav-card {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    flex: 0 0 0% !important;
  }

  body.light-theme .app-nav .nav-item,
  body.light-theme #app-nav .nav-item {
    color: #64748b !important;
  }

  /* Icon Container - EXACT SAME VERTICAL BASELINE FOR ALL 5 */
  .app-nav .nav-item .nav-icon-wrapper,
  #app-nav .nav-item .nav-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
  }

  /* ENLARGED ICONS (26px) */
  .app-nav .nav-item svg,
  #app-nav .nav-item svg {
    width: 26px !important;
    height: 26px !important;
    fill: currentColor !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    margin: 0 auto !important;
    transition: all 0.22s ease !important;
  }

  /* Dashboard SVG with stroke */
  .app-nav #nav-dashboard svg,
  #app-nav #nav-dashboard svg {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }

  /* Stylized Label - Straight line typography */
  .app-nav .nav-item .nav-label,
  #app-nav .nav-item .nav-label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    color: #94a3b8 !important;
    line-height: 1.1 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    transition: color 0.2s ease, font-weight 0.2s ease !important;
    white-space: nowrap !important;
    text-transform: none !important;
  }

  body.light-theme .app-nav .nav-item .nav-label,
  body.light-theme #app-nav .nav-item .nav-label {
    color: #64748b !important;
  }

  /* ============================================================
     5. ACTIVE STATE (HIGHLIGHTED VIA LIQUID GLASS PILL)
     ============================================================ */
  .app-nav .nav-item.active,
  #app-nav .nav-item.active {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    transform: none !important;
  }

  body.light-theme .app-nav .nav-item.active,
  body.light-theme #app-nav .nav-item.active {
    color: #6c00ff !important;
    background: transparent !important;
    border: none !important;
    transform: none !important;
  }

  .app-nav .nav-item.active .nav-icon-wrapper,
  #app-nav .nav-item.active .nav-icon-wrapper {
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .app-nav .nav-item.active svg,
  #app-nav .nav-item.active svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: none !important;
    filter: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    animation: navIconBuoyantPop 0.58s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .app-nav .nav-item.active svg path,
  #app-nav .nav-item.active svg path {
    stroke: none !important;
  }

  .app-nav #nav-dashboard.active svg,
  #app-nav #nav-dashboard.active svg {
    fill: none !important;
    stroke: #ffffff !important;
    filter: none !important;
    animation: navIconBuoyantPop 0.58s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  body.light-theme .app-nav .nav-item.active svg,
  body.light-theme #app-nav .nav-item.active svg {
    color: #6c00ff !important;
    fill: #6c00ff !important;
    stroke: none !important;
    filter: drop-shadow(0 2px 8px rgba(108, 0, 255, 0.45)) !important;
    animation: navIconBuoyantPop 0.58s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  body.light-theme .app-nav #nav-dashboard.active svg,
  body.light-theme #app-nav #nav-dashboard.active svg {
    fill: none !important;
    stroke: #6c00ff !important;
    filter: drop-shadow(0 2px 8px rgba(108, 0, 255, 0.45)) !important;
    animation: navIconBuoyantPop 0.58s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .app-nav .nav-item.active .nav-label,
  #app-nav .nav-item.active .nav-label {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    transform: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-shadow: none !important;
    animation: navLabelBuoyantPop 0.58s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  body.light-theme .app-nav .nav-item.active .nav-label,
  body.light-theme #app-nav .nav-item.active .nav-label {
    color: #6c00ff !important;
    font-weight: 700 !important;
    text-shadow: none !important;
  }

  /* Suppress any extra ::before or ::after on nav items in favor of liquid pill */
  .app-nav .nav-item::before,
  .app-nav .nav-item::after,
  #app-nav .nav-item::before,
  #app-nav .nav-item::after {
    display: none !important;
  }

  /* Complete neutralization of any old elevated center wallet classes */
  .app-nav #nav-wallet,
  #app-nav #nav-wallet,
  .app-nav .nav-item.nav-wallet-center,
  .app-nav .nav-wallet-circle,
  #app-nav .nav-wallet-circle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ================================================================
   LIQUID GLASS CHART ZOOM CONTROLS (+ / - MAGNIFIER)
   Unified frosted capsule, specular rim, Apple physics micro-pop
   ================================================================ */
#chart-zoom-controls,
#chart-zoom-controls.chart-zoom-liquid-pill {
  position: absolute !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 55 !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 3px 4px !important;
  border-radius: 20px !important;
  background: rgba(14, 18, 30, 0.78) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.4), 0 0 16px rgba(108, 0, 255, 0.16) !important;
  pointer-events: all !important;
  overflow: hidden !important;
}

/* Specular gloss reflection curve across top of zoom capsule */
#chart-zoom-controls::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 6px !important;
  right: 6px !important;
  height: 42% !important;
  border-radius: 12px 12px 4px 4px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  pointer-events: none !important;
}

/* Internal caustic glow */
#chart-zoom-controls::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.25) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

/* Light theme liquid capsule */
body.light-theme #chart-zoom-controls,
body.light-theme #chart-zoom-controls.chart-zoom-liquid-pill {
  background: rgba(255, 255, 255, 0.90) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), inset 0 1.5px 1.5px rgba(255, 255, 255, 1), 0 0 14px rgba(108, 0, 255, 0.12) !important;
}

body.light-theme #chart-zoom-controls::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
}

body.light-theme #chart-zoom-controls::before {
  background: radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.6) 0%, transparent 70%) !important;
}

/* Glass divider */
.chart-zoom-divider {
  width: 1px !important;
  height: 14px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  margin: 0 1px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

body.light-theme .chart-zoom-divider {
  background: rgba(139, 92, 246, 0.22) !important;
}

/* Zoom button */
#chart-zoom-controls button,
#chart-zoom-controls .chart-zoom-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  user-select: none !important;
  position: relative !important;
  z-index: 2 !important;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

#chart-zoom-controls button svg,
#chart-zoom-controls .chart-zoom-btn svg {
  stroke: #ffffff !important;
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  transition: transform 0.18s ease !important;
}

/* Hover and active states (neutralizes green-theme.css green box) */
#chart-zoom-controls button:hover,
#chart-zoom-controls .chart-zoom-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(139, 92, 246, 0.4) 100%) !important;
  border: none !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}

#chart-zoom-controls button:hover svg,
#chart-zoom-controls .chart-zoom-btn:hover svg {
  stroke: #ffffff !important;
  transform: scale(1.08) !important;
}

#chart-zoom-controls button:active,
#chart-zoom-controls .chart-zoom-btn:active {
  transform: scale(0.9) !important;
}

/* Light Theme button colors */
body.light-theme #chart-zoom-controls button,
body.light-theme #chart-zoom-controls .chart-zoom-btn {
  color: #1e293b !important;
}

body.light-theme #chart-zoom-controls button svg,
body.light-theme #chart-zoom-controls .chart-zoom-btn svg {
  stroke: #1e293b !important;
}

body.light-theme #chart-zoom-controls button:hover,
body.light-theme #chart-zoom-controls .chart-zoom-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(108, 0, 255, 0.25) 100%) !important;
  border: none !important;
  color: #6c00ff !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

body.light-theme #chart-zoom-controls button:hover svg,
body.light-theme #chart-zoom-controls .chart-zoom-btn:hover svg {
  stroke: #6c00ff !important;
}

/* ========================================================================
   MODERN ZENANCE PURPLE TRADE NOTIFICATIONS (OPEN & COMPLETE)
   ======================================================================== */
.chart-notification-container,
#chart-notification-container {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  transform: none !important;
  z-index: 10000 !important;
  width: auto !important;
  max-width: 360px !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
  overflow: visible !important;
}

@media (max-width: 767px) {

  .chart-notification-container,
  #chart-notification-container {
    top: 10px !important;
    right: 10px !important;
    max-width: calc(100vw - 20px) !important;
    width: auto !important;
  }
}

.chart-notification {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px 12px 12px !important;
  border-radius: 14px !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #ffffff !important;
  pointer-events: auto !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 280px !important;
  max-width: 360px !important;
  overflow: hidden !important;

  /* Ultra-modern Zenance glassmorphism */
  background: linear-gradient(135deg, rgba(30, 16, 56, 0.94) 0%, rgba(18, 10, 36, 0.97) 100%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(139, 92, 246, 0.42) !important;
  box-shadow: 0 10px 36px rgba(108, 0, 255, 0.32), 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 1.5px rgba(255, 255, 255, 0.25) !important;

  /* Hidden state */
  opacity: 0 !important;
  transform: translateY(-14px) scale(0.95) !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    border 0.32s ease !important;
}

.chart-notification.show {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  max-height: 96px !important;
  padding-top: 10px !important;
  padding-bottom: 12px !important;
  border-top-width: 1px !important;
  border-bottom-width: 1px !important;
}

.chart-notification.fade-out {
  opacity: 0 !important;
  transform: translateY(-10px) scale(0.95) !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  pointer-events: none !important;
}

/* Subtle gloss reflection curve across top */
.chart-notification::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 8px !important;
  right: 8px !important;
  height: 38% !important;
  border-radius: 12px 12px 6px 6px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
  pointer-events: none !important;
}

/* Type variations */
.chart-notification.notif-type-open,
.chart-notification.notif-purple,
.chart-notification.notif-green {
  background: linear-gradient(135deg, rgba(32, 16, 62, 0.94) 0%, rgba(18, 9, 38, 0.98) 100%) !important;
  border: 1px solid rgba(167, 139, 250, 0.48) !important;
  box-shadow: 0 10px 36px rgba(124, 58, 237, 0.38), 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 1.5px rgba(255, 255, 255, 0.3) !important;
}

.chart-notification.notif-type-win {
  background: linear-gradient(135deg, rgba(38, 18, 76, 0.95) 0%, rgba(22, 10, 48, 0.98) 100%) !important;
  border: 1px solid rgba(192, 132, 252, 0.6) !important;
  box-shadow: 0 10px 40px rgba(139, 92, 246, 0.45), 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
}

.chart-notification.notif-type-lose,
.chart-notification.notif-red {
  background: linear-gradient(135deg, rgba(42, 16, 36, 0.95) 0%, rgba(24, 10, 24, 0.98) 100%) !important;
  border: 1px solid rgba(244, 63, 94, 0.45) !important;
  box-shadow: 0 10px 36px rgba(225, 29, 72, 0.32), 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 1.5px rgba(255, 255, 255, 0.22) !important;
}

/* Icon Badge */
.notif-icon-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.notif-type-open .notif-icon-badge,
.notif-purple .notif-icon-badge,
.notif-green .notif-icon-badge {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
}

.notif-type-win .notif-icon-badge {
  background: linear-gradient(135deg, #c084fc 0%, #8b5cf6 50%, #6c00ff 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 22px rgba(167, 139, 250, 0.8), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.6) !important;
}

.notif-type-lose .notif-icon-badge,
.notif-red .notif-icon-badge {
  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(225, 29, 72, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

/* Notification Body & Typography */
.notif-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex-grow: 1 !important;
  min-width: 0 !important;
  z-index: 2 !important;
}

.notif-header-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.notif-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #f5f3ff !important;
  white-space: nowrap !important;
}

.notif-type-open .notif-title {
  color: #c4b5fd !important;
}

.notif-type-win .notif-title {
  color: #e9d5ff !important;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.4) !important;
}

.notif-type-lose .notif-title {
  color: #fecdd3 !important;
}

.notif-time {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  white-space: nowrap !important;
}

.notif-details-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  white-space: nowrap !important;
}

.notif-coin {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.notif-dir-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 1.5px 6px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

.notif-dir-tag.dir-up {
  background: rgba(139, 92, 246, 0.3) !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(139, 92, 246, 0.45) !important;
}

.notif-dir-tag.dir-down {
  background: rgba(244, 63, 94, 0.25) !important;
  color: #fda4af !important;
  border: 1px solid rgba(244, 63, 94, 0.4) !important;
}

.notif-amount {
  font-weight: 700 !important;
  color: #ffffff !important;
}

.notif-amount.text-profit {
  color: #c4b5fd !important;
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.6) !important;
}

.notif-plain-msg {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

/* Close Button */
.notif-close-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.22s ease !important;
  margin-left: 2px !important;
  z-index: 2 !important;
}

.notif-close-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  transform: scale(1.08) rotate(90deg) !important;
}

/* Auto-dismiss Animated Progress Bar */
.notif-progress-bar {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 2.5px !important;
  width: 100% !important;
  background: linear-gradient(90deg, #8b5cf6, #c084fc, #6c00ff) !important;
  transform-origin: left center !important;
  animation: notifProgressShrink 4.8s linear forwards !important;
  opacity: 0.85 !important;
  z-index: 3 !important;
}

.notif-type-win .notif-progress-bar {
  background: linear-gradient(90deg, #c084fc, #a78bfa, #8b5cf6) !important;
}

.notif-type-lose .notif-progress-bar,
.notif-red .notif-progress-bar {
  background: linear-gradient(90deg, #f43f5e, #fb7185) !important;
}

@keyframes notifProgressShrink {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* ========================================================================
   LIGHT THEME SUPPORT FOR ZENANCE PURPLE NOTIFICATIONS
   ======================================================================== */
body.light-theme .chart-notification {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(245, 243, 255, 0.98) 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.32) !important;
  box-shadow: 0 10px 32px rgba(108, 0, 255, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
  color: #1e1b4b !important;
}

body.light-theme .notif-title {
  color: #3b0764 !important;
}

body.light-theme .notif-type-open .notif-title {
  color: #6c00ff !important;
}

body.light-theme .notif-type-win .notif-title {
  color: #7c3aed !important;
}

body.light-theme .notif-type-lose .notif-title {
  color: #be123c !important;
}

body.light-theme .notif-time {
  color: rgba(30, 27, 75, 0.5) !important;
}

body.light-theme .notif-details-line {
  color: #374151 !important;
}

body.light-theme .notif-coin {
  color: #111827 !important;
}

body.light-theme .notif-amount {
  color: #111827 !important;
}

body.light-theme .notif-amount.text-profit {
  color: #6c00ff !important;
  text-shadow: none !important;
}

body.light-theme .notif-plain-msg {
  color: #374151 !important;
}

body.light-theme .notif-close-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

body.light-theme .notif-close-btn:hover {
  background: rgba(0, 0, 0, 0.12) !important;
  color: #000000 !important;
}

/* ╔══════════════════════════════════════════════════════════════════════════
   ║  NEXTER LIQUID GLASS — GLOBAL BUTTON SYSTEM
   ║  Applies the same frosted glass specular layer to ALL platform buttons
   ║  while preserving Nexter's existing purple / red / neutral brand colors
   ╚══════════════════════════════════════════════════════════════════════════ */

/* ── Shared Liquid Glass mixin via a cascade helper ─────────────────────── */
.btn-primary,
.sidebar-trade-btn,
.kyc-btn-primary,
.kyc-lock-btn-primary,
.login-submit-primary-btn,
.signup-submit-primary-btn,
.btn-onboarding-signin,
.btn-onboarding-signup,
.btn-google-auth,
.profile-submit-btn,
.legal-modal-primary-btn,
.support-primary-action-btn,
.pair-info-trade-btn,
.wallet-cancel-btn,
.tc-pending-set-btn,
.pdc-step-btn,
.tc-step-btn {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
}

/* Specular sheen — upper half */
.btn-primary::before,
.sidebar-trade-btn::before,
.kyc-btn-primary::before,
.kyc-lock-btn-primary::before,
.login-submit-primary-btn::before,
.signup-submit-primary-btn::before,
.btn-onboarding-signin::before,
.btn-onboarding-signup::before,
.btn-google-auth::before,
.profile-submit-btn::before,
.legal-modal-primary-btn::before,
.support-primary-action-btn::before,
.pair-info-trade-btn::before,
.wallet-cancel-btn::before,
.tc-pending-set-btn::before,
.pdc-step-btn::before,
.tc-step-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 4px !important;
  right: 4px !important;
  height: 44% !important;
  border-radius: 10px 10px 6px 6px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Rim specular flare */
.btn-primary::after,
.sidebar-trade-btn::after,
.kyc-btn-primary::after,
.kyc-lock-btn-primary::after,
.login-submit-primary-btn::after,
.signup-submit-primary-btn::after,
.btn-onboarding-signin::after,
.btn-onboarding-signup::after,
.btn-google-auth::after,
.profile-submit-btn::after,
.legal-modal-primary-btn::after,
.support-primary-action-btn::after,
.pair-info-trade-btn::after,
.wallet-cancel-btn::after,
.tc-pending-set-btn::after,
.pdc-step-btn::after,
.tc-step-btn::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 12% !important;
  right: 12% !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.88) 50%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* ── Purple Primary Buttons (sidebar, auth, trade, profile, legal) ──────── */
.btn-primary,
.sidebar-trade-btn,
.login-submit-primary-btn,
.signup-submit-primary-btn,
.btn-onboarding-signin,
.btn-onboarding-signup,
.profile-submit-btn,
.legal-modal-primary-btn,
.support-primary-action-btn,
.pair-info-trade-btn {
  background: linear-gradient(160deg, rgba(167, 139, 250, 0.95) 0%, rgba(139, 92, 246, 0.9) 45%, rgba(108, 0, 255, 0.98) 100%) !important;
  border: 1.2px solid rgba(216, 180, 254, 0.4) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.42), 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(88, 0, 212, 0.38) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
}

.btn-primary:hover,
.btn-primary:hover,
.sidebar-trade-btn:hover,
.login-submit-primary-btn:hover,
.signup-submit-primary-btn:hover,
.btn-onboarding-signin:hover,
.btn-onboarding-signup:hover,
.legal-modal-primary-btn:hover,
.support-primary-action-btn:hover,
.pair-info-trade-btn:hover {
  transform: translateY(-1.5px) scale(1.01) !important;
  background: linear-gradient(160deg, rgba(180, 158, 255, 0.98) 0%, rgba(153, 107, 248, 0.94) 45%, rgba(124, 58, 237, 1) 100%) !important;
  box-shadow: 0 10px 32px rgba(124, 58, 237, 0.56), 0 3px 8px rgba(0, 0, 0, 0.32), inset 0 2px 2px rgba(255, 255, 255, 0.72) !important;
}

.profile-submit-btn:hover,
.profile-submit-btn:active {
  transform: none !important;
}

.btn-primary:active,
.sidebar-trade-btn:active,
.login-submit-primary-btn:active,
.signup-submit-primary-btn:active,
.btn-onboarding-signin:active,
.btn-onboarding-signup:active,
.legal-modal-primary-btn:active,
.support-primary-action-btn:active,
.pair-info-trade-btn:active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.32), inset 0 2px 4px rgba(0, 0, 0, 0.28) !important;
}

/* ── KYC Primary (Nexter Purple Gradient Liquid Glass) ─────────────────── */
.kyc-btn-primary,
.kyc-lock-btn-primary {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 50%, #6d28d9 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.45), 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  background-color: unset !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-weight: 700 !important;
}

.kyc-btn-primary:hover,
.kyc-lock-btn-primary:hover {
  transform: translateY(-1.5px) scale(1.01) !important;
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 50%, #7c3aed 100%) !important;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.6), 0 3px 8px rgba(0, 0, 0, 0.32), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
  background-color: unset !important;
}

.kyc-btn-primary:active,
.kyc-lock-btn-primary:active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.32), inset 0 2px 4px rgba(0, 0, 0, 0.28) !important;
}

/* ── Secondary / Ghost Liquid Glass Buttons ─────────────────────────────── */
.btn-secondary,
.kyc-btn-secondary,
.kyc-btn-warn,
.legal-modal-secondary-btn,
.wallet-cancel-btn,
.tc-pending-set-btn,
.pdc-step-btn,
.tc-step-btn {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

.btn-secondary:hover,
.kyc-btn-secondary:hover,
.kyc-btn-warn:hover,
.legal-modal-secondary-btn:hover,
.wallet-cancel-btn:hover,
.tc-pending-set-btn:hover,
.pdc-step-btn:hover,
.tc-step-btn:hover {
  transform: translateY(-1px) scale(1.01) !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.35) !important;
}

.btn-secondary:active,
.kyc-btn-secondary:active,
.kyc-btn-warn:active,
.legal-modal-secondary-btn:active,
.wallet-cancel-btn:active,
.tc-pending-set-btn:active,
.pdc-step-btn:active,
.tc-step-btn:active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18), inset 0 2px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ── Deposit Button (High-Contrast Crisp White Pill / Deep Royal Purple Text & Icon) ──────────────────── */
.bal-btn-deposit,
body:not(.light-theme) .bal-btn-deposit,
body.light-theme .bal-btn-deposit {
  background: #ffffff !important;
  color: #5b21b6 !important;
  border: 1.2px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(108, 0, 255, 0.18), inset 0 1.5px 1.5px rgba(255, 255, 255, 1) !important;
  backdrop-filter: blur(16px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(200%) !important;
  position: relative !important;
  overflow: hidden !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.bal-btn-deposit svg,
body:not(.light-theme) .bal-btn-deposit svg,
body.light-theme .bal-btn-deposit svg {
  stroke: #5b21b6 !important;
  color: #5b21b6 !important;
}

.bal-btn-deposit span,
body:not(.light-theme) .bal-btn-deposit span,
body.light-theme .bal-btn-deposit span {
  color: #5b21b6 !important;
  font-weight: 700 !important;
}

.bal-btn-deposit::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 4px !important;
  right: 4px !important;
  height: 44% !important;
  border-radius: 48px 48px 8px 8px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.bal-btn-deposit:hover,
body:not(.light-theme) .bal-btn-deposit:hover,
body.light-theme .bal-btn-deposit:hover {
  transform: translateY(-1.5px) scale(1.01) !important;
  background: #f5f3ff !important;
  color: #4c1d95 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(108, 0, 255, 0.25) !important;
}

.bal-btn-deposit:hover svg,
.bal-btn-deposit:hover span {
  stroke: #4c1d95 !important;
  color: #4c1d95 !important;
}

.bal-btn-deposit:active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: 0 2px 10px rgba(108, 0, 255, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.08) !important;
}

/* ── Withdraw Button (Frosted Purple Liquid Glass / Brilliant Crisp White Text & Icon) ──────────────────────── */
.bal-btn-withdraw,
body:not(.light-theme) .bal-btn-withdraw,
body.light-theme .bal-btn-withdraw {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.42) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(18px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(200%) !important;
  position: relative !important;
  overflow: hidden !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.bal-btn-withdraw svg,
body:not(.light-theme) .bal-btn-withdraw svg,
body.light-theme .bal-btn-withdraw svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.bal-btn-withdraw span,
body:not(.light-theme) .bal-btn-withdraw span,
body.light-theme .bal-btn-withdraw span {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}

.bal-btn-withdraw::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 4px !important;
  right: 4px !important;
  height: 44% !important;
  border-radius: 48px 48px 8px 8px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.bal-btn-withdraw:hover,
body:not(.light-theme) .bal-btn-withdraw:hover,
body.light-theme .bal-btn-withdraw:hover {
  transform: translateY(-1.5px) scale(1.01) !important;
  background: rgba(255, 255, 255, 0.32) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 2px 2px rgba(255, 255, 255, 0.42) !important;
}

.bal-btn-withdraw:hover svg,
.bal-btn-withdraw:hover span {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.bal-btn-withdraw:active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), inset 0 2px 3px rgba(0, 0, 0, 0.18) !important;
}

/* ── Wallet Mode Buttons (tab-style glass) ──────────────────────────────── */
.wallet-mode-btn {
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.wallet-mode-btn:hover {
  border-color: rgba(216, 180, 254, 0.35) !important;
  background: rgba(108, 0, 255, 0.1) !important;
}

.wallet-mode-btn--active {
  background: linear-gradient(160deg, rgba(167, 139, 250, 0.9) 0%, rgba(108, 0, 255, 0.92) 100%) !important;
  border: 1.2px solid rgba(216, 180, 254, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.35), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.5) !important;
}

/* ── Google Auth Button (dark glass) ────────────────────────────────────── */
.btn-google-auth {
  background: linear-gradient(160deg, rgba(60, 60, 80, 0.92) 0%, rgba(30, 30, 50, 0.96) 100%) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.18) !important;
}

.btn-google-auth:hover {
  background: linear-gradient(160deg, rgba(80, 80, 105, 0.96) 0%, rgba(45, 45, 70, 1) 100%) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.24) !important;
}

/* ── Light Theme Button Overrides ───────────────────────────────────────── */
body.light-theme .btn-primary,
body.light-theme .sidebar-trade-btn,
body.light-theme .login-submit-primary-btn,
body.light-theme .signup-submit-primary-btn,
body.light-theme .btn-onboarding-signin,
body.light-theme .btn-onboarding-signup,
body.light-theme .profile-submit-btn,
body.light-theme .legal-modal-primary-btn,
body.light-theme .support-primary-action-btn,
body.light-theme .pair-info-trade-btn {
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.92) 0%, rgba(108, 0, 255, 0.96) 100%) !important;
  border: 1.2px solid rgba(124, 58, 237, 0.5) !important;
  box-shadow: 0 6px 22px rgba(108, 0, 255, 0.32), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(88, 0, 212, 0.25) !important;
}

body.light-theme .btn-secondary,
body.light-theme .kyc-btn-secondary,
body.light-theme .kyc-btn-warn,
body.light-theme .legal-modal-secondary-btn,
body.light-theme .wallet-cancel-btn,
body.light-theme .tc-pending-set-btn,
body.light-theme .pdc-step-btn,
body.light-theme .tc-step-btn {
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%) !important;
  border: 1.2px solid rgba(0, 0, 0, 0.14) !important;
  color: #3b0764 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}

body.light-theme .btn-secondary:hover,
body.light-theme .kyc-btn-secondary:hover,
body.light-theme .kyc-btn-warn:hover,
body.light-theme .legal-modal-secondary-btn:hover,
body.light-theme .wallet-cancel-btn:hover,
body.light-theme .tc-pending-set-btn:hover,
body.light-theme .pdc-step-btn:hover,
body.light-theme .tc-step-btn:hover {
  background: linear-gradient(160deg, rgba(108, 0, 255, 0.08) 0%, rgba(108, 0, 255, 0.04) 100%) !important;
  border-color: rgba(108, 0, 255, 0.28) !important;
}

body.light-theme .bal-btn-withdraw {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.42) !important;
}

body.light-theme .wallet-mode-btn--active {
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.88) 0%, rgba(108, 0, 255, 0.92) 100%) !important;
}

/* ============================================================
   HISTORY PAGE REDESIGN & DETAIL MODAL
   ============================================================ */

/* ── History Page Container Layout (Zero Wasted Side Space) ── */
#tab-history {
  padding: 8px 8px 30px 8px !important;
  max-width: 880px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

#tab-history .history-page-header {
  padding: 4px 4px 12px 4px !important;
  margin-bottom: 8px !important;
}

#tab-history .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

#tab-history .list-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  padding: 4px 4px 24px 4px !important;
}

/* ── History Filter Tabs (Nexter Signature Royal Purple Gradient & Fluid Drag) ── */
#tab-history .tab-headers,
.scrollable-tabs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 6px 10px !important;
  margin-bottom: 14px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(108, 0, 255, 0.04) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  cursor: default !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  scroll-behavior: smooth !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#tab-history .tab-headers.is-dragging,
.scrollable-tabs.is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

body.light-theme #tab-history .tab-headers,
body.light-theme .scrollable-tabs {
  background: linear-gradient(135deg, rgba(245, 243, 255, 0.95) 0%, rgba(238, 233, 254, 0.85) 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.22) !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.06) !important;
}

#tab-history .tab-headers::-webkit-scrollbar,
.scrollable-tabs::-webkit-scrollbar,
#tab-history .tab-headers::-webkit-scrollbar-button,
.scrollable-tabs::-webkit-scrollbar-button,
#tab-history .tab-headers::-webkit-scrollbar-thumb,
.scrollable-tabs::-webkit-scrollbar-thumb,
#tab-history .tab-headers::-webkit-scrollbar-track,
.scrollable-tabs::-webkit-scrollbar-track {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

@media (min-width: 900px) {
  #tab-history .tab-headers,
  .scrollable-tabs {
    gap: 10px !important;
    padding: 6px 12px !important;
    justify-content: flex-start !important;
  }
  #tab-history .tab-headers .tab-btn,
  .scrollable-tabs .tab-btn {
    padding: 0 16px !important;
    font-size: 13px !important;
  }
}

#tab-history .tab-headers .tab-btn,
.scrollable-tabs .tab-btn {
  flex-shrink: 0 !important;
  touch-action: pan-x !important;
  height: 36px !important;
  line-height: 34px !important;
  padding: 0 18px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Inactive Tab - Dark Theme */
body:not(.light-theme) #tab-history .tab-headers .tab-btn:not(.active),
body:not(.light-theme) .scrollable-tabs .tab-btn:not(.active) {
  background: rgba(139, 92, 246, 0.1) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  color: #c084fc !important;
  box-shadow: none !important;
}

body:not(.light-theme) #tab-history .tab-headers .tab-btn:not(.active):hover,
body:not(.light-theme) .scrollable-tabs .tab-btn:not(.active):hover {
  background: rgba(139, 92, 246, 0.2) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Inactive Tab - Light Theme */
body.light-theme #tab-history .tab-headers .tab-btn:not(.active),
body.light-theme .scrollable-tabs .tab-btn:not(.active) {
  background: #ffffff !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  color: #6d28d9 !important;
  box-shadow: 0 1px 4px rgba(108, 0, 255, 0.05) !important;
}

body.light-theme #tab-history .tab-headers .tab-btn:not(.active):hover,
body.light-theme .scrollable-tabs .tab-btn:not(.active):hover {
  background: #f5f3ff !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
  color: #4c1d95 !important;
  transform: translateY(-1px) !important;
}

/* Active Tab - Unified Nexter Royal Purple Gradient (Both Dark and Light) */
#tab-history .tab-headers .tab-btn.active,
.scrollable-tabs .tab-btn.active,
body:not(.light-theme) #tab-history .tab-headers .tab-btn.active,
body.light-theme #tab-history .tab-headers .tab-btn.active {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  border: 1px solid rgba(192, 132, 252, 0.7) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45), 0 0 12px rgba(168, 85, 247, 0.3) !important;
  font-weight: 700 !important;
  transform: translateY(-1px) !important;
}

/* ── History Transaction Cards ── */
.history-transaction-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}

body:not(.light-theme) .history-transaction-card {
  background: rgba(16, 18, 28, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

body:not(.light-theme) .history-transaction-card:hover {
  background: rgba(24, 27, 42, 0.85) !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
  transform: translateY(-2px) !important;
}

body.light-theme .history-transaction-card {
  background: #ffffff !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(139, 92, 246, 0.14) !important;
  box-shadow: 0 4px 20px rgba(108, 0, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

body.light-theme .history-transaction-card:hover {
  background: #ffffff !important;
  border-color: rgba(139, 92, 246, 0.28) !important;
  box-shadow: 0 8px 26px rgba(108, 0, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-2px) !important;
}

.history-transaction-card:active {
  transform: scale(0.99) !important;
}

/* Category-specific icon wrappers */
.tx-card-icon-wrap {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.tx-card-icon-wrap svg {
  width: 18px !important;
  height: 18px !important;
}

.icon-bg-trade-win {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.icon-bg-trade-win svg {
  stroke: #10b981 !important;
}

.icon-bg-trade-loss {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.icon-bg-trade-loss svg {
  stroke: #ef4444 !important;
}

.icon-bg-deposit {
  background: rgba(14, 165, 233, 0.12) !important;
  color: #0ea5e9 !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
}

.icon-bg-deposit svg {
  stroke: #0ea5e9 !important;
}

.icon-bg-withdrawal {
  background: rgba(139, 92, 246, 0.12) !important;
  color: #8b5cf6 !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
}

.icon-bg-withdrawal svg {
  stroke: #8b5cf6 !important;
}

.icon-bg-reward {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

.icon-bg-reward svg {
  stroke: #f59e0b !important;
}

.icon-bg-convert {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #6366f1 !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
}

.icon-bg-convert svg {
  stroke: #6366f1 !important;
}

.tx-card-chevron {
  width: 16px !important;
  height: 16px !important;
  color: #64748b !important;
  opacity: 0.6 !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  flex-shrink: 0 !important;
}

.history-transaction-card:hover .tx-card-chevron {
  opacity: 1 !important;
  transform: translateX(2px) !important;
  color: #6c00ff !important;
}

/* History Card Content Typography & Alignment */
.history-transaction-card .tx-card-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.history-transaction-card .tx-card-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  text-align: left !important;
}

.history-transaction-card .tx-card-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.light-theme) .history-transaction-card .tx-card-title {
  color: #f1f5f9 !important;
}

body.light-theme .history-transaction-card .tx-card-title {
  color: #0f172a !important;
}

.history-transaction-card .tx-card-details {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.light-theme) .history-transaction-card .tx-card-details {
  color: #94a3b8 !important;
}

body.light-theme .history-transaction-card .tx-card-details {
  color: #64748b !important;
}

.history-transaction-card .tx-card-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  text-align: right !important;
}

.history-transaction-card .tx-card-amount {
  font-size: 14px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}

body:not(.light-theme) .history-transaction-card .tx-amount-inflow {
  color: #10b981 !important;
}

body.light-theme .history-transaction-card .tx-amount-inflow {
  color: #059669 !important;
}

body:not(.light-theme) .history-transaction-card .tx-amount-outflow {
  color: #f8fafc !important;
}

body.light-theme .history-transaction-card .tx-amount-outflow {
  color: #0f172a !important;
}

body:not(.light-theme) .history-transaction-card .tx-amount-neutral {
  color: #94a3b8 !important;
}

body.light-theme .history-transaction-card .tx-amount-neutral {
  color: #64748b !important;
}

.history-transaction-card .tx-amount-reward {
  color: #f59e0b !important;
}

.history-transaction-card .tx-card-date {
  font-size: 11px !important;
  font-weight: 500 !important;
}

body:not(.light-theme) .history-transaction-card .tx-card-date {
  color: #64748b !important;
}

body.light-theme .history-transaction-card .tx-card-date {
  color: #94a3b8 !important;
}

/* ── Transaction Detail Modal & Mobile Bottom Sheet ── */
.history-detail-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.68) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 10000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

.history-detail-overlay.active {
  display: flex !important;
  animation: historyOverlayFadeIn 0.2s ease forwards !important;
}

@keyframes historyOverlayFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.history-detail-sheet {
  width: 100% !important;
  max-width: 480px !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 88vh !important;
  overflow: hidden !important;
  position: relative !important;
  animation: historyModalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes historyModalPop {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

body:not(.light-theme) .history-detail-sheet {
  background: #111422 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

body.light-theme .history-detail-sheet {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}

.history-sheet-handle-wrap {
  display: none !important;
}

.history-sheet-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 22px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .history-sheet-header {
  border-bottom-color: rgba(0, 0, 0, 0.07) !important;
}

.history-sheet-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.history-sheet-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(108, 0, 255, 0.15) !important;
  color: #a78bfa !important;
  border: 1px solid rgba(108, 0, 255, 0.3) !important;
}

body.light-theme .history-sheet-badge {
  color: #6c00ff !important;
}

.history-sheet-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.history-sheet-close-btn {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  padding: 6px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.history-sheet-close-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

body.light-theme .history-sheet-close-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}

.history-sheet-body {
  padding: 20px 22px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.history-detail-hero {
  padding: 16px 18px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body:not(.light-theme) .history-detail-hero {
  background: rgba(255, 255, 255, 0.03) !important;
}

body.light-theme .history-detail-hero {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.history-detail-hero-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.history-detail-hero-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #94a3b8 !important;
}

.history-detail-hero-val {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

.history-price-track-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.light-theme .history-price-track-wrap {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.history-price-track-labels {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.history-specs-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.history-spec-box {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

body:not(.light-theme) .history-spec-box {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.light-theme .history-spec-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

.history-spec-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: #94a3b8 !important;
}

.history-spec-val {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  word-break: break-word !important;
}

.history-copy-id-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: #94a3b8 !important;
  padding: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.15s ease !important;
}

.history-copy-id-btn:hover {
  color: #6c00ff !important;
}

/* Mobile responsive bottom sheet */
@media (max-width: 768px) {
  .history-detail-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
    /* Offset the overlay bottom so the sheet clears the bottom nav bar */
    padding-bottom: 0 !important;
  }

  .history-detail-sheet {
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    /* Leave room for bottom nav (68px) + safe area */
    max-height: calc(85vh - 68px - env(safe-area-inset-bottom, 0px)) !important;
    /* Tuck 1px under nav bar top border to eliminate any hairline gap */
    margin-bottom: calc(67px + env(safe-area-inset-bottom, 0px)) !important;
    animation: historySheetSlideUp 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  @keyframes historySheetSlideUp {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  .history-sheet-handle-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 0 4px !important;
    cursor: pointer !important;
  }

  .history-sheet-handle {
    width: 40px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.25) !important;
  }

  body.light-theme .history-sheet-handle {
    background: rgba(0, 0, 0, 0.2) !important;
  }

  .history-sheet-header {
    padding: 10px 18px 12px !important;
  }

  .history-sheet-body {
    padding: 16px 18px 24px !important;
  }
}

/* ============================================================
   WALLET PAGE — COMPLETE REDESIGN (Nexter Purple Theme)
   ============================================================ */

/* ── Balance Banner ── */
.wallet-balance-card {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  padding: 28px 32px !important;
  min-height: 130px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

.wallet-balance-banner-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 8px !important;
  z-index: 1 !important;
}

.wallet-balance-banner-left .balance-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

body.light-theme .wallet-balance-banner-left .balance-label {
  color: rgba(15, 23, 42, 0.45) !important;
}

.wallet-balance-sub {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

body.light-theme .wallet-balance-sub {
  color: rgba(15, 23, 42, 0.5) !important;
}

.wallet-asset-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

body.light-theme .wallet-asset-pill {
  background: rgba(108, 0, 255, 0.07) !important;
  border-color: rgba(108, 0, 255, 0.15) !important;
  color: #5500ce !important;
}

.wallet-crypto-val {
  color: #a78bfa !important;
  font-weight: 700 !important;
}

body.light-theme .wallet-crypto-val {
  color: #6c00ff !important;
}

/* 3D wallet image (right side of banner) */
.wallet-balance-right {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.wallet-hero-3d-img {
  height: 170px !important;
  width: auto !important;
  object-fit: contain !important;
  opacity: 0.92 !important;
  filter: drop-shadow(0 12px 28px rgba(108, 0, 255, 0.35)) !important;
}

/* ── Wallet Deposit / Withdraw Tab Header ── */
.wallet-tab-header-wrap {
  margin: 20px 0 4px !important;
}

.wallet-nav-tabs {
  display: flex !important;
  gap: 8px !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.07) !important;
  padding-bottom: 0 !important;
}

body.light-theme .wallet-nav-tabs {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.wallet-nav-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  background: transparent !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: all 0.18s ease !important;
  color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
}

body.light-theme .wallet-nav-tab {
  color: #94a3b8 !important;
}

.wallet-nav-tab:hover {
  color: rgba(255, 255, 255, 0.78) !important;
  background: transparent !important;
}

body.light-theme .wallet-nav-tab:hover {
  color: #475569 !important;
}

.wallet-nav-tab.active {
  color: #a78bfa !important;
  border-bottom-color: #7c3aed !important;
  background: transparent !important;
}

body.light-theme .wallet-nav-tab.active {
  color: #6c00ff !important;
  border-bottom-color: #6c00ff !important;
}

/* ── Payment Methods Grid ── */
.payment-methods-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

@media (max-width: 480px) {
  .payment-methods-grid {
    grid-template-columns: 1fr !important;
  }
}

.payment-method-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 15px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  text-align: left !important;
  width: 100% !important;
  position: relative !important;
}

body.light-theme .payment-method-btn {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.payment-method-btn:hover {
  background: rgba(108, 0, 255, 0.08) !important;
  border-color: rgba(108, 0, 255, 0.3) !important;
}

.payment-method-btn.selected,
.payment-method-btn--active {
  background: rgba(108, 0, 255, 0.12) !important;
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(108, 0, 255, 0.1) !important;
}

body.light-theme .payment-method-btn.selected,
body.light-theme .payment-method-btn--active {
  background: rgba(108, 0, 255, 0.06) !important;
}

.payment-method-btn-left {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.payment-method-icon-wrap {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  transition: transform 0.18s ease !important;
}

body.light-theme .payment-method-icon-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.payment-method-icon-wrap img,
.payment-method-icon-wrap svg {
  width: 36px !important;
  height: 36px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22)) !important;
}

.payment-method-btn:hover .payment-method-icon-wrap,
.payment-method-btn.selected .payment-method-icon-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.08) !important;
}

.payment-method-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.payment-method-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.light-theme .payment-method-title {
  color: #0f172a !important;
}

.payment-method-sub {
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.42) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.light-theme .payment-method-sub {
  color: #94a3b8 !important;
}

.payment-method-arrow {
  color: rgba(255, 255, 255, 0.28) !important;
  flex-shrink: 0 !important;
  transition: color 0.18s ease, transform 0.18s ease !important;
}

body.light-theme .payment-method-arrow {
  color: #cbd5e1 !important;
}

.payment-method-btn:hover .payment-method-arrow,
.payment-method-btn.selected .payment-method-arrow {
  color: #a78bfa !important;
  transform: translateX(2px) !important;
}

/* ── Instructions Card (Crypto QR / Address) ── */
.wallet-instructions-card {
  border-radius: 16px !important;
  padding: 20px !important;
  display: flex;
  flex-direction: column !important;
  gap: 16px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .wallet-instructions-card {
  background: rgba(108, 0, 255, 0.03) !important;
  border-color: rgba(108, 0, 255, 0.12) !important;
}

.wallet-instructions-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body.light-theme .wallet-instructions-title {
  color: #64748b !important;
}

.wallet-instructions-text {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.6 !important;
}

body.light-theme .wallet-instructions-text {
  color: #475569 !important;
}

/* ── QR Code Block ── */
.wallet-qr-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

.wallet-qr-frame {
  padding: 12px !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.wallet-qr-frame img {
  width: 150px !important;
  height: 150px !important;
  display: block !important;
}

.wallet-qr-caption {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  text-align: center !important;
}

body.light-theme .wallet-qr-caption {
  color: #94a3b8 !important;
}

/* ── Wallet Address Copy Row ── */
.wallet-address-copy-wrap {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
}

.wallet-code-box {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 12.5px !important;
  font-family: 'Roboto Mono', 'Courier New', monospace !important;
  color: rgba(255, 255, 255, 0.8) !important;
  word-break: break-all !important;
  line-height: 1.5 !important;
}

body.light-theme .wallet-code-box {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1e293b !important;
}

.wallet-copy-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.85) 0%, rgba(108, 0, 255, 0.9) 100%) !important;
  border: 1px solid rgba(167, 139, 250, 0.3) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.wallet-copy-action-btn:hover {
  background: linear-gradient(135deg, rgba(153, 107, 248, 0.95) 0%, rgba(124, 58, 237, 1) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(108, 0, 255, 0.35) !important;
}

/* ── Quick Amount Presets ── */
.wallet-quick-amounts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.wallet-quick-amt-btn {
  padding: 6px 14px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-family: inherit !important;
}

body.light-theme .wallet-quick-amt-btn {
  background: rgba(108, 0, 255, 0.05) !important;
  border-color: rgba(108, 0, 255, 0.15) !important;
  color: #5500ce !important;
}

.wallet-quick-amt-btn:hover {
  background: rgba(108, 0, 255, 0.15) !important;
  border-color: rgba(108, 0, 255, 0.4) !important;
  color: #d8b4fe !important;
}

body.light-theme .wallet-quick-amt-btn:hover {
  background: rgba(108, 0, 255, 0.1) !important;
  color: #4200a0 !important;
}

/* ── E-Wallet Details Rows ── */
.wallet-ewallet-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.wallet-ewallet-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.wallet-ewallet-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  min-width: 130px !important;
  flex-shrink: 0 !important;
  padding-top: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

body.light-theme .wallet-ewallet-label {
  color: #94a3b8 !important;
}

.wallet-ewallet-val {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.4 !important;
}

body.light-theme .wallet-ewallet-val {
  color: #0f172a !important;
}

.wallet-ewallet-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.wallet-ewallet-input-wrap .wallet-code-box {
  flex: 1 !important;
}

/* ── Mobile responsive overrides ── */
@media (max-width: 768px) {
  .wallet-balance-card {
    padding: 20px 20px !important;
    min-height: 110px !important;
  }

  .wallet-balance-right {
    width: 140px !important;
  }

  .wallet-hero-3d-img {
    height: 120px !important;
  }

  .wallet-nav-tab {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  .wallet-address-copy-wrap {
    flex-direction: column !important;
  }

  .wallet-copy-action-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .wallet-ewallet-row {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .wallet-ewallet-label {
    min-width: unset !important;
  }
}

/* ============================================================
   WALLET PAGE — TARGETED FIXES (Nexter Purple Theme v2)
   All rules use high specificity to beat old green overrides
   ============================================================ */

/* ── 1. Mode selection buttons: FORCE purple active, never green ── */
#tab-wallet .wallet-mode-btn.wallet-mode-btn--active,
#wallet-deposit-section .wallet-mode-btn.wallet-mode-btn--active,
#wallet-withdraw-section .wallet-mode-btn.wallet-mode-btn--active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.85) 0%, rgba(108, 0, 255, 0.92) 100%) !important;
  border-color: rgba(167, 139, 250, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.22) !important;
}

body.light-theme #tab-wallet .wallet-mode-btn.wallet-mode-btn--active,
body.light-theme #wallet-deposit-section .wallet-mode-btn.wallet-mode-btn--active,
body.light-theme #wallet-withdraw-section .wallet-mode-btn.wallet-mode-btn--active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.9) 0%, rgba(108, 0, 255, 0.96) 100%) !important;
  border-color: rgba(139, 92, 246, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(108, 0, 255, 0.3) !important;
}

/* Radio dot on active mode button */
#tab-wallet .wallet-mode-btn.wallet-mode-btn--active .wallet-mode-radio {
  border-color: rgba(255, 255, 255, 0.7) !important;
}

#tab-wallet .wallet-mode-btn.wallet-mode-btn--active .wallet-mode-radio-dot {
  background-color: #ffffff !important;
}

/* Inactive mode button hover — purple tint, not green */
#tab-wallet .wallet-mode-btn:hover:not(.wallet-mode-btn--active) {
  background: rgba(108, 0, 255, 0.08) !important;
  border-color: rgba(108, 0, 255, 0.3) !important;
  color: #c4b5fd !important;
}

body.light-theme #tab-wallet .wallet-mode-btn:hover:not(.wallet-mode-btn--active) {
  background: rgba(108, 0, 255, 0.06) !important;
  border-color: rgba(108, 0, 255, 0.25) !important;
  color: #5500ce !important;
}

/* ── 2. Wallet info hint box: purple, not green ── */
#tab-wallet .wallet-info-hint {
  background: rgba(108, 0, 255, 0.08) !important;
  border-color: rgba(108, 0, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

#tab-wallet .wallet-info-hint svg {
  color: #a78bfa !important;
}

body.light-theme #tab-wallet .wallet-info-hint {
  background: rgba(108, 0, 255, 0.05) !important;
  border-color: rgba(108, 0, 255, 0.18) !important;
  color: #475569 !important;
}

body.light-theme #tab-wallet .wallet-info-hint svg {
  color: #6c00ff !important;
}

/* ── 3. QR code frame — fixed size, centered, never expands ── */
.wallet-qr-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.wallet-qr-frame {
  padding: 14px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3) !important;
  width: 178px !important;
  height: 178px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* Constrain the QR image tightly — prevents broken-image expansion */
.wallet-qr-frame img {
  width: 150px !important;
  height: 150px !important;
  min-width: 150px !important;
  min-height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  display: block !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* ── 4. Address display box — fixed height, no expansion ── */
.wallet-code-box {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 12px !important;
  font-family: 'Roboto Mono', 'Courier New', monospace !important;
  color: rgba(255, 255, 255, 0.82) !important;
  /* Prevent expansion — addresses are long but should scroll, not grow */
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.3 !important;
}

body.light-theme .wallet-code-box {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1e293b !important;
}

/* Address + copy button row */
.wallet-address-copy-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

/* ── 5. Wallet payout/address TEXTAREA — single-line height, no resize ── */
#withdraw-payout-details,
#tab-wallet textarea.form-control,
.wallet-step-group textarea.form-control {
  resize: none !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  overflow: hidden !important;
  line-height: 1.4 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* ── 6. Instructions card layout — QR + address side by side on wide screens ── */
.wallet-instructions-card {
  border-radius: 16px !important;
  padding: 20px !important;
  display: flex;
  flex-direction: column !important;
  gap: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .wallet-instructions-card {
  background: rgba(108, 0, 255, 0.03) !important;
  border-color: rgba(108, 0, 255, 0.12) !important;
}

.wallet-instructions-title {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin: 0 !important;
}

body.light-theme .wallet-instructions-title {
  color: #94a3b8 !important;
}

/* ── 7. Copy address button — always purple, consistent style ── */
.wallet-copy-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 18px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.9) 0%, rgba(108, 0, 255, 0.95) 100%) !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.3) !important;
}

.wallet-copy-action-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.95) 0%, rgba(124, 58, 237, 1) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(108, 0, 255, 0.42) !important;
}

.wallet-copy-action-btn:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.25) !important;
}

body.light-theme .wallet-copy-action-btn {
  background: linear-gradient(135deg, rgba(108, 0, 255, 0.88) 0%, rgba(88, 0, 212, 0.94) 100%) !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.25) !important;
}

/* ── 8. Quick amount preset buttons — purple theme ── */
.wallet-quick-amounts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 6px !important;
}

.wallet-quick-amt-btn {
  padding: 5px 14px !important;
  height: 30px !important;
  border-radius: 20px !important;
  background: rgba(108, 0, 255, 0.08) !important;
  border: 1px solid rgba(108, 0, 255, 0.2) !important;
  color: #c4b5fd !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-family: inherit !important;
  line-height: 1 !important;
}

body.light-theme .wallet-quick-amt-btn {
  background: rgba(108, 0, 255, 0.06) !important;
  border-color: rgba(108, 0, 255, 0.2) !important;
  color: #5500ce !important;
}

.wallet-quick-amt-btn:hover {
  background: rgba(108, 0, 255, 0.18) !important;
  border-color: rgba(108, 0, 255, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

body.light-theme .wallet-quick-amt-btn:hover {
  color: #4200a0 !important;
  background: rgba(108, 0, 255, 0.12) !important;
}

/* MAX button special style */
.wallet-quick-amt-max {
  background: rgba(124, 58, 237, 0.12) !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
  color: #a78bfa !important;
}

.wallet-quick-amt-max:hover {
  background: rgba(124, 58, 237, 0.22) !important;
  color: #ffffff !important;
}

/* ── 9. Scroll indicator dot (right side of tab header wrap) ── */
.wallet-tab-header-wrap {
  display: flex !important;
  align-items: center !important;
  margin: 18px 0 2px !important;
  position: relative !important;
}

.wallet-nav-tabs {
  flex: 1 !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.07) !important;
}

body.light-theme .wallet-nav-tabs {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* ── 10. Deposit instructions text + network info ── */
.wallet-instructions-text {
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

body.light-theme .wallet-instructions-text {
  color: #64748b !important;
}

/* ── 11. Payment method card selected state green → purple ── */
#tab-wallet .payment-method-btn.selected,
#tab-wallet .payment-method-btn--active {
  background: rgba(108, 0, 255, 0.1) !important;
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 2px rgba(108, 0, 255, 0.12) !important;
}

body.light-theme #tab-wallet .payment-method-btn.selected,
body.light-theme #tab-wallet .payment-method-btn--active {
  background: rgba(108, 0, 255, 0.06) !important;
  border-color: #7c3aed !important;
}

/* ── 12. "Get Code" link — purple, not green ── */
#btn-request-withdraw-code,
#tab-wallet a[onclick*="requestWithdrawalCode"] {
  color: #a78bfa !important;
}

body.light-theme #btn-request-withdraw-code,
body.light-theme #tab-wallet a[onclick*="requestWithdrawalCode"] {
  color: #6c00ff !important;
}

/* ── 13. Mobile layout fixes ── */
@media (max-width: 768px) {
  .wallet-balance-card {
    padding: 18px 16px !important;
    min-height: 100px !important;
  }

  .wallet-balance-right {
    width: 130px !important;
  }

  .wallet-hero-3d-img {
    height: 110px !important;
    opacity: 0.85 !important;
  }

  .wallet-nav-tab {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  /* Address copy row stacks on mobile */
  .wallet-address-copy-wrap {
    flex-direction: column !important;
  }

  .wallet-code-box {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  .wallet-copy-action-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* QR frame smaller on mobile */
  .wallet-qr-frame {
    width: 158px !important;
    height: 158px !important;
    padding: 10px !important;
  }

  .wallet-qr-frame img {
    width: 138px !important;
    height: 138px !important;
    min-width: 138px !important;
    min-height: 138px !important;
    max-width: 138px !important;
    max-height: 138px !important;
  }

  /* E-wallet rows stack on mobile */
  .wallet-ewallet-row {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .wallet-ewallet-label {
    min-width: unset !important;
  }

  /* Quick amounts wrap nicely */
  .wallet-quick-amounts {
    gap: 6px !important;
  }

  .wallet-quick-amt-btn {
    font-size: 12px !important;
    padding: 5px 12px !important;
  }
}

/* ======================================================================
   WALLET PAGE — FULL REDESIGN v3  (Nexter Purple Theme)
   Overrides all legacy rules. Scoped under #tab-wallet for isolation.
   ====================================================================== */

/* ── BALANCE BANNER ─────────────────────────────────────────────── */
#tab-wallet .wallet-balance-card {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 28px 190px 28px 32px !important;
  min-height: 140px !important;
  border-radius: 20px !important;
  text-align: left !important;
}

body:not(.light-theme) #tab-wallet .wallet-balance-card {
  background: linear-gradient(135deg, rgba(22, 14, 48, 0.95) 0%, rgba(30, 18, 70, 0.9) 60%, rgba(60, 20, 120, 0.5) 100%) !important;
  border: 1px solid rgba(124, 58, 237, 0.28) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(167, 139, 250, 0.15) !important;
  backdrop-filter: blur(24px) !important;
}

body.light-theme #tab-wallet .wallet-balance-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 240, 255, 0.95) 100%) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  box-shadow: 0 12px 36px rgba(108, 0, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

#tab-wallet .wallet-balance-banner-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  z-index: 1 !important;
  flex: 1 !important;
}

#tab-wallet .wallet-balance-banner-left .balance-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: rgba(167, 139, 250, 0.8) !important;
  margin: 0 !important;
}

body.light-theme #tab-wallet .wallet-balance-banner-left .balance-label {
  color: rgba(108, 0, 255, 0.6) !important;
}

#tab-wallet #wallet-balance-usd {
  font-size: 36px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  letter-spacing: -1px !important;
  text-align: left !important;
  width: auto !important;
  align-self: flex-start !important;
}

body.light-theme #tab-wallet #wallet-balance-usd {
  color: #0f172a !important;
}

#tab-wallet .wallet-balance-sub {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

#tab-wallet .wallet-asset-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: rgba(167, 139, 250, 0.12) !important;
  border: 1px solid rgba(167, 139, 250, 0.25) !important;
  color: rgba(167, 139, 250, 0.9) !important;
}

body.light-theme #tab-wallet .wallet-asset-pill {
  background: rgba(108, 0, 255, 0.08) !important;
  border-color: rgba(108, 0, 255, 0.2) !important;
  color: #5500ce !important;
}

#tab-wallet .wallet-crypto-val {
  color: #c4b5fd !important;
  font-weight: 700 !important;
}

body.light-theme #tab-wallet .wallet-crypto-val {
  color: #6c00ff !important;
}

/* 3D wallet image */
#tab-wallet .wallet-balance-right {
  position: absolute !important;
  right: -10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 210px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#tab-wallet .wallet-hero-3d-img {
  height: 170px !important;
  width: auto !important;
  object-fit: contain !important;
  opacity: 0.95 !important;
  filter: drop-shadow(0 12px 32px rgba(108, 0, 255, 0.4)) !important;
}

/* Deposit / Withdraw buttons inside balance card */
#tab-wallet .bal-btn {
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.18s ease !important;
  overflow: hidden !important;
}

#tab-wallet .bal-btn-deposit {
  background: linear-gradient(135deg, #8b5cf6 0%, #6c00ff 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(167, 139, 250, 0.4) !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.4) !important;
}

#tab-wallet .bal-btn-deposit:hover {
  background: linear-gradient(135deg, #9d6fff 0%, #7c1fff 100%) !important;
  box-shadow: 0 6px 20px rgba(108, 0, 255, 0.55) !important;
  transform: translateY(-1px) !important;
}

#tab-wallet .bal-btn-withdraw {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #ffffff !important;
  border: 1px solid rgba(167, 139, 250, 0.45) !important;
}

#tab-wallet .bal-btn-withdraw svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

#tab-wallet .bal-btn-withdraw:hover {
  background: rgba(139, 92, 246, 0.35) !important;
  border-color: rgba(167, 139, 250, 0.7) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

body.light-theme #tab-wallet .bal-btn-withdraw {
  background: rgba(108, 0, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(108, 0, 255, 0.35) !important;
}

body.light-theme #tab-wallet .bal-btn-withdraw svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* ── TAB NAV (Deposit Funds / Withdraw Assets) ─────────────────── */
#tab-wallet .wallet-tab-header-wrap {
  display: flex !important;
  align-items: center !important;
  margin: 20px 0 6px !important;
  gap: 4px !important;
}

#tab-wallet .wallet-nav-tabs {
  display: flex !important;
  flex: 1 !important;
  gap: 6px !important;
  background: rgba(20, 16, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 4px !important;
}

body.light-theme #tab-wallet .wallet-nav-tabs {
  background: rgba(20, 16, 42, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

#tab-wallet .wallet-nav-tab {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 10px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  opacity: 0.88 !important;
}

#tab-wallet .wallet-nav-tab svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

body.light-theme #tab-wallet .wallet-nav-tab {
  color: #ffffff !important;
  opacity: 0.88 !important;
}

body.light-theme #tab-wallet .wallet-nav-tab svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

#tab-wallet .wallet-nav-tab:hover:not(.active) {
  color: #ffffff !important;
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

body.light-theme #tab-wallet .wallet-nav-tab:hover:not(.active) {
  color: #ffffff !important;
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

#tab-wallet .wallet-nav-tab.active {
  background: linear-gradient(135deg, #7c3aed 0%, #6c00ff 100%) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

#tab-wallet .wallet-nav-tab.active svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

body.light-theme #tab-wallet .wallet-nav-tab.active {
  background: linear-gradient(135deg, #7c3aed 0%, #6c00ff 100%) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

body.light-theme #tab-wallet .wallet-nav-tab.active svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* ── FORM CARD ──────────────────────────────────────────────────── */
#tab-wallet .card.wallet-form-layout {
  border-radius: 20px !important;
  padding: 24px !important;
}

body:not(.light-theme) #tab-wallet .card.wallet-form-layout {
  background: rgba(14, 10, 32, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) !important;
}

body.light-theme #tab-wallet .card.wallet-form-layout {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
}

/* ── STEP LABELS ────────────────────────────────────────────────── */
#tab-wallet .wallet-step-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#tab-wallet .wallet-step-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  margin-bottom: 2px !important;
  display: block !important;
}

body.light-theme #tab-wallet .wallet-step-label {
  color: #64748b !important;
}

/* ── MODE / CATEGORY BUTTONS ────────────────────────────────────── */
#tab-wallet .wallet-mode-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  width: 100% !important;
}

#tab-wallet .wallet-mode-btn {
  flex: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 18px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  font-family: inherit !important;
  outline: none !important;
  width: 100% !important;
}

body:not(.light-theme) #tab-wallet .wallet-mode-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
}

body.light-theme #tab-wallet .wallet-mode-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.09) !important;
  color: #64748b !important;
  box-shadow: none !important;
}

body:not(.light-theme) #tab-wallet .wallet-mode-btn:hover:not(.wallet-mode-btn--active) {
  background: rgba(108, 0, 255, 0.08) !important;
  border-color: rgba(108, 0, 255, 0.28) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

body.light-theme #tab-wallet .wallet-mode-btn:hover:not(.wallet-mode-btn--active) {
  background: rgba(108, 0, 255, 0.05) !important;
  border-color: rgba(108, 0, 255, 0.22) !important;
  color: #4200a0 !important;
}

#tab-wallet .wallet-mode-btn.wallet-mode-btn--active,
body:not(.light-theme) #tab-wallet .wallet-mode-btn.wallet-mode-btn--active,
body.light-theme #tab-wallet .wallet-mode-btn.wallet-mode-btn--active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.88) 0%, rgba(108, 0, 255, 0.94) 100%) !important;
  border: 1.5px solid rgba(167, 139, 250, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: none !important;
}

#tab-wallet .wallet-mode-radio {
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

body.light-theme #tab-wallet .wallet-mode-radio {
  border-color: #cbd5e1 !important;
}

#tab-wallet .wallet-mode-btn.wallet-mode-btn--active .wallet-mode-radio {
  border-color: rgba(255, 255, 255, 0.7) !important;
}

#tab-wallet .wallet-mode-radio-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: transparent !important;
  transition: background 0.18s ease !important;
}

#tab-wallet .wallet-mode-btn.wallet-mode-btn--active .wallet-mode-radio-dot {
  background: #ffffff !important;
}

/* ── PAYMENT METHOD GRID ────────────────────────────────────────── */
#tab-wallet .payment-methods-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

#tab-wallet .payment-method-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  text-align: left !important;
  width: 100% !important;
}

body:not(.light-theme) #tab-wallet .payment-method-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.09) !important;
}

body.light-theme #tab-wallet .payment-method-btn {
  background: rgba(0, 0, 0, 0.025) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
}

#tab-wallet .payment-method-btn:hover {
  background: rgba(108, 0, 255, 0.08) !important;
  border-color: rgba(108, 0, 255, 0.28) !important;
}

#tab-wallet .payment-method-btn.selected,
#tab-wallet .payment-method-btn--active {
  background: rgba(108, 0, 255, 0.1) !important;
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 2px rgba(108, 0, 255, 0.12) !important;
}

.payment-method-btn-left {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.payment-method-icon-wrap {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.light-theme .payment-method-icon-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.payment-method-icon-wrap img,
.payment-method-icon-wrap svg {
  width: 36px !important;
  height: 36px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22)) !important;
}

.payment-method-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.payment-method-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body:not(.light-theme) .payment-method-title {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.light-theme .payment-method-title {
  color: #0f172a !important;
}

.payment-method-sub {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body:not(.light-theme) .payment-method-sub {
  color: rgba(255, 255, 255, 0.38) !important;
}

body.light-theme .payment-method-sub {
  color: #94a3b8 !important;
}

.payment-method-arrow {
  flex-shrink: 0 !important;
  transition: all 0.18s ease !important;
  color: rgba(255, 255, 255, 0.22) !important;
}

body.light-theme .payment-method-arrow {
  color: #cbd5e1 !important;
}

#tab-wallet .payment-method-btn:hover .payment-method-arrow,
#tab-wallet .payment-method-btn.selected .payment-method-arrow {
  color: #a78bfa !important;
  transform: translateX(3px) !important;
}

/* ── INSTRUCTIONS CARD ──────────────────────────────────────────── */
#tab-wallet .wallet-instructions-card {
  border-radius: 16px !important;
  padding: 20px !important;
  display: flex;
  flex-direction: column !important;
  gap: 16px !important;
}

body:not(.light-theme) #tab-wallet .wallet-instructions-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

body.light-theme #tab-wallet .wallet-instructions-card {
  background: rgba(108, 0, 255, 0.03) !important;
  border: 1px solid rgba(108, 0, 255, 0.11) !important;
}

#tab-wallet .wallet-instructions-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.light-theme #tab-wallet .wallet-instructions-title {
  color: #94a3b8 !important;
}

/* QR wrapper */
#tab-wallet .wallet-qr-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Fixed-size QR frame with shimmer loader */
#tab-wallet .wallet-qr-frame {
  width: 174px !important;
  height: 174px !important;
  min-width: 174px !important;
  min-height: 174px !important;
  max-width: 174px !important;
  max-height: 174px !important;
  padding: 12px !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28) !important;
  position: relative !important;
}

#tab-wallet .wallet-qr-frame::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%) !important;
  background-size: 200% 100% !important;
  animation: walletQrShimmer 1.4s ease infinite !important;
  z-index: 0 !important;
}

#tab-wallet .wallet-qr-frame img {
  width: 150px !important;
  height: 150px !important;
  min-width: 150px !important;
  min-height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  display: block !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

@keyframes walletQrShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

#tab-wallet .wallet-qr-caption {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-align: center !important;
}

body.light-theme #tab-wallet .wallet-qr-caption {
  color: #94a3b8 !important;
}

/* Address copy row */
#tab-wallet .wallet-address-copy-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

#tab-wallet .wallet-code-box {
  flex: 1 !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-family: 'Roboto Mono', 'Courier New', monospace !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body:not(.light-theme) #tab-wallet .wallet-code-box {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

body.light-theme #tab-wallet .wallet-code-box {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  color: #1e293b !important;
}

#tab-wallet .wallet-copy-action-btn {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.88) 0%, rgba(108, 0, 255, 0.94) 100%) !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.3) !important;
  transition: all 0.18s ease !important;
}

#tab-wallet .wallet-copy-action-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.94) 0%, rgba(124, 58, 237, 1) 100%) !important;
  box-shadow: 0 6px 20px rgba(108, 0, 255, 0.44) !important;
  transform: translateY(-1px) !important;
}

#tab-wallet .wallet-instructions-text {
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.48) !important;
}

body.light-theme #tab-wallet .wallet-instructions-text {
  color: #64748b !important;
}

/* ── E-WALLET DETAILS ───────────────────────────────────────────── */
#tab-wallet .wallet-ewallet-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

#tab-wallet .wallet-ewallet-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#tab-wallet .wallet-ewallet-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  min-width: 140px !important;
  flex-shrink: 0 !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

body.light-theme #tab-wallet .wallet-ewallet-label {
  color: #94a3b8 !important;
}

#tab-wallet .wallet-ewallet-val {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

body.light-theme #tab-wallet .wallet-ewallet-val {
  color: #0f172a !important;
}

#tab-wallet .wallet-ewallet-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#tab-wallet .ewallet-copy-btn,
.ewallet-copy-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

body:not(.light-theme) #tab-wallet .ewallet-copy-btn,
body:not(.light-theme) .ewallet-copy-btn {
  background: rgba(108, 0, 255, 0.1) !important;
  border: 1px solid rgba(108, 0, 255, 0.22) !important;
  color: #a78bfa !important;
}

body.light-theme #tab-wallet .ewallet-copy-btn,
body.light-theme .ewallet-copy-btn {
  background: rgba(108, 0, 255, 0.07) !important;
  border: 1px solid rgba(108, 0, 255, 0.18) !important;
  color: #6c00ff !important;
}

#tab-wallet .ewallet-copy-btn:hover,
.ewallet-copy-btn:hover {
  background: rgba(108, 0, 255, 0.2) !important;
  border-color: rgba(108, 0, 255, 0.4) !important;
  color: #c4b5fd !important;
  transform: scale(1.06) !important;
}

/* ── AMOUNT INPUT ───────────────────────────────────────────────── */
#tab-wallet .wallet-amount-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

#tab-wallet .wallet-amount-input {
  width: 100% !important;
  padding-right: 68px !important;
  height: 50px !important;
}

#tab-wallet .wallet-amount-suffix {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  pointer-events: none !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(108, 0, 255, 0.12) !important;
  color: #a78bfa !important;
  border: 1px solid rgba(108, 0, 255, 0.2) !important;
}

body.light-theme #tab-wallet .wallet-amount-suffix {
  background: rgba(108, 0, 255, 0.07) !important;
  color: #5500ce !important;
  border-color: rgba(108, 0, 255, 0.18) !important;
}

/* ── QUICK AMOUNT PILLS ─────────────────────────────────────────── */
#tab-wallet .wallet-quick-amounts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

#tab-wallet .wallet-quick-amt-btn {
  height: 30px !important;
  padding: 0 14px !important;
  border-radius: 20px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all 0.15s ease !important;
  background: rgba(108, 0, 255, 0.08) !important;
  border: 1px solid rgba(108, 0, 255, 0.2) !important;
  color: #c4b5fd !important;
  line-height: 1 !important;
}

body.light-theme #tab-wallet .wallet-quick-amt-btn {
  background: rgba(108, 0, 255, 0.06) !important;
  border-color: rgba(108, 0, 255, 0.18) !important;
  color: #5500ce !important;
}

#tab-wallet .wallet-quick-amt-btn:hover {
  background: rgba(108, 0, 255, 0.18) !important;
  border-color: rgba(108, 0, 255, 0.42) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

#tab-wallet .wallet-quick-amt-max {
  background: rgba(124, 58, 237, 0.12) !important;
  border-color: rgba(124, 58, 237, 0.28) !important;
  color: #a78bfa !important;
  font-weight: 700 !important;
}

#tab-wallet .wallet-quick-amt-max:hover {
  background: rgba(124, 58, 237, 0.24) !important;
  color: #ffffff !important;
}

/* ── INFO HINT (purple) ─────────────────────────────────────────── */
#tab-wallet .wallet-info-hint {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 13px 15px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  background: rgba(108, 0, 255, 0.08) !important;
  border: 1px solid rgba(108, 0, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

body.light-theme #tab-wallet .wallet-info-hint {
  background: rgba(108, 0, 255, 0.05) !important;
  border-color: rgba(108, 0, 255, 0.16) !important;
  color: #475569 !important;
}

#tab-wallet .wallet-info-hint svg {
  flex-shrink: 0 !important;
  color: #a78bfa !important;
}

body.light-theme #tab-wallet .wallet-info-hint svg {
  color: #6c00ff !important;
}

/* ── WALLET ADDRESS TEXTAREA ─────────────────────────────────────── */
#withdraw-payout-details {
  resize: none !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  overflow: hidden !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  line-height: 1.3 !important;
}

/* ── GET CODE LINK ──────────────────────────────────────────────── */
#btn-request-withdraw-code {
  color: #a78bfa !important;
  font-weight: 700 !important;
}

body.light-theme #btn-request-withdraw-code {
  color: #6c00ff !important;
}

/* ── PKR RATE NOTE ──────────────────────────────────────────────── */
#deposit-pkr-rate-note {
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.38) !important;
  margin-top: 6px !important;
}

body.light-theme #deposit-pkr-rate-note {
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════
   MOBILE (768px and below)
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #tab-wallet .wallet-balance-card {
    padding: 16px 95px 16px 16px !important;
    min-height: 95px !important;
  }

  #tab-wallet .wallet-balance-right {
    width: 85px !important;
    right: 10px !important;
  }

  #tab-wallet .wallet-hero-3d-img {
    height: 65px !important;
    max-height: 65px !important;
  }

  #tab-wallet #wallet-balance-usd {
    font-size: 26px !important;
    letter-spacing: -0.5px !important;
  }

  #tab-wallet .wallet-nav-tabs {
    padding: 3px !important;
  }

  #tab-wallet .wallet-nav-tab {
    padding: 9px 10px !important;
    font-size: 12.5px !important;
  }

  #tab-wallet .wallet-mode-btn {
    padding: 11px 12px !important;
    font-size: 13px !important;
  }

  #tab-wallet .payment-methods-grid {
    grid-template-columns: 1fr !important;
  }

  #tab-wallet .wallet-qr-frame {
    width: 154px !important;
    height: 154px !important;
    min-width: 154px !important;
    min-height: 154px !important;
    max-width: 154px !important;
    max-height: 154px !important;
    padding: 10px !important;
  }

  #tab-wallet .wallet-qr-frame img {
    width: 134px !important;
    height: 134px !important;
    min-width: 134px !important;
    min-height: 134px !important;
    max-width: 134px !important;
    max-height: 134px !important;
  }

  #tab-wallet .wallet-address-copy-wrap {
    flex-direction: column !important;
  }

  #tab-wallet .wallet-code-box {
    width: 100% !important;
  }

  #tab-wallet .wallet-copy-action-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  #tab-wallet .wallet-ewallet-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
  }

  #tab-wallet .wallet-ewallet-label {
    min-width: unset !important;
  }

  #tab-wallet .wallet-ewallet-input-wrap {
    width: 100% !important;
  }

  #tab-wallet .wallet-quick-amt-btn {
    font-size: 12px !important;
    padding: 0 11px !important;
    height: 28px !important;
  }
}

@media (max-width: 380px) {
  #tab-wallet .wallet-mode-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── WALLET FINAL FIXES ─────────────────────────────────────────── */

/* Balance label: tighter spacing so amount sits just below, starting directly from Account's 'A' */
#tab-wallet .wallet-balance-banner-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 2px !important;
}

#tab-wallet .wallet-balance-banner-left .balance-label {
  align-self: flex-start !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

#tab-wallet #wallet-balance-usd {
  align-self: flex-start !important;
  text-align: left !important;
  display: block !important;
  width: auto !important;
  margin: 1px 0 0 0 !important;
  padding: 0 !important;
}

#tab-wallet .wallet-balance-sub {
  align-self: flex-start !important;
  margin-top: 5px !important;
}

/* Reduced 3D wallet image */
#tab-wallet .wallet-hero-3d-img {
  height: 85px !important;
  max-height: 85px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 20px rgba(108, 0, 255, 0.32)) !important;
}

#tab-wallet .wallet-balance-right {
  width: 110px !important;
  right: 18px !important;
}

#tab-wallet .wallet-balance-card {
  padding: 22px 130px 22px 28px !important;
  min-height: 115px !important;
}

/* Mode/Category buttons — force single-line text, no wrapping */
#tab-wallet .wallet-mode-btn {
  white-space: nowrap !important;
  justify-content: flex-start !important;
  flex-shrink: 0 !important;
}

#tab-wallet .wallet-mode-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  width: 100% !important;
  overflow-x: auto !important;
  grid-template-columns: unset !important;
}

/* Scrollbar hidden but scrollable */
#tab-wallet .wallet-mode-row::-webkit-scrollbar {
  display: none !important;
}

#tab-wallet .wallet-mode-row {
  scrollbar-width: none !important;
}

/* Quick amounts — force single row, scroll if needed */
#tab-wallet .wallet-quick-amounts {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
}

#tab-wallet .wallet-quick-amounts::-webkit-scrollbar {
  display: none !important;
}

#tab-wallet .wallet-quick-amounts {
  scrollbar-width: none !important;
}

#tab-wallet .wallet-quick-amt-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  #tab-wallet .wallet-balance-card {
    padding: 16px 95px 16px 16px !important;
    min-height: 95px !important;
  }

  #tab-wallet .wallet-hero-3d-img {
    height: 65px !important;
    max-height: 65px !important;
  }

  #tab-wallet .wallet-balance-right {
    width: 85px !important;
    right: 10px !important;
  }

  #tab-wallet .wallet-mode-btn {
    font-size: 12.5px !important;
    padding: 11px 14px !important;
  }
}

/* ── WALLET MODE ROW FIX — proper 2-column side by side ──────────── */
/* Override the broken flex-row-full-width from previous attempt */
#tab-wallet .wallet-mode-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  flex-direction: unset !important;
  overflow-x: unset !important;
  gap: 10px !important;
  width: 100% !important;
}

#tab-wallet .wallet-mode-btn {
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  justify-content: flex-start !important;
  flex-shrink: unset !important;
}

/* Quick amounts: stay in one row, scroll if overflow */
#tab-wallet .wallet-quick-amounts {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 7px !important;
  padding-bottom: 3px !important;
  scrollbar-width: none !important;
}

#tab-wallet .wallet-quick-amounts::-webkit-scrollbar {
  display: none !important;
}

#tab-wallet .wallet-quick-amt-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 480px) {
  #tab-wallet .wallet-mode-row {
    grid-template-columns: 1fr 1fr !important;
  }

  #tab-wallet .wallet-mode-btn {
    font-size: 12px !important;
    padding: 11px 10px !important;
  }
}


/* ── WALLET METHOD ICONS & BUTTON TEXT OVERRIDES ─────────────────── */
/* Remove any outer box container from payment & withdrawal method icons */
#tab-wallet .payment-method-icon-wrap,
.payment-method-icon-wrap,
body.light-theme #tab-wallet .payment-method-icon-wrap,
body.light-theme .payment-method-icon-wrap {
  width: 38px !important;
  height: 38px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  padding: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#tab-wallet .payment-method-btn:hover .payment-method-icon-wrap,
#tab-wallet .payment-method-btn.selected .payment-method-icon-wrap,
#tab-wallet .payment-method-btn--active .payment-method-icon-wrap,
.payment-method-btn:hover .payment-method-icon-wrap,
.payment-method-btn.selected .payment-method-icon-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.06) !important;
}

#tab-wallet .payment-method-icon-wrap img,
#tab-wallet .payment-method-icon-wrap svg,
.payment-method-icon-wrap img,
.payment-method-icon-wrap svg {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22)) !important;
}

/* Force bright pure white text on Deposit & Withdrawal tab buttons */
#tab-wallet .wallet-nav-tab,
.wallet-nav-tab,
#wallet-tab-deposit-btn,
#wallet-tab-withdraw-btn,
body.light-theme #tab-wallet .wallet-nav-tab,
body.light-theme .wallet-nav-tab,
body.light-theme #wallet-tab-deposit-btn,
body.light-theme #wallet-tab-withdraw-btn {
  color: #ffffff !important;
}

#tab-wallet .wallet-nav-tab svg,
.wallet-nav-tab svg,
#wallet-tab-deposit-btn svg,
#wallet-tab-withdraw-btn svg,
body.light-theme #tab-wallet .wallet-nav-tab svg,
body.light-theme .wallet-nav-tab svg,
body.light-theme #wallet-tab-deposit-btn svg,
body.light-theme #wallet-tab-withdraw-btn svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

#tab-wallet .wallet-nav-tab.active,
.wallet-nav-tab.active,
body.light-theme #tab-wallet .wallet-nav-tab.active,
body.light-theme .wallet-nav-tab.active {
  background: linear-gradient(135deg, #7c3aed 0%, #6c00ff 100%) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

#tab-wallet .wallet-nav-tab.active svg,
.wallet-nav-tab.active svg,
body.light-theme #tab-wallet .wallet-nav-tab.active svg,
body.light-theme .wallet-nav-tab.active svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

#tab-wallet .wallet-nav-tab:hover:not(.active),
body.light-theme #tab-wallet .wallet-nav-tab:hover:not(.active) {
  color: #ffffff !important;
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Banner Deposit & Withdraw buttons - white text */
#tab-wallet .bal-btn-deposit,
#tab-wallet .bal-btn-withdraw,
.bal-btn-deposit,
.bal-btn-withdraw,
body.light-theme #tab-wallet .bal-btn-deposit,
body.light-theme #tab-wallet .bal-btn-withdraw {
  color: #ffffff !important;
}

/* ── STRICT HIDE/SHOW FOR WALLET INSTRUCTIONS CARDS ───────────── */
#tab-wallet .wallet-instructions-card.wallet-hidden,
#tab-wallet .wallet-instructions-card[style*="display: none"],
#tab-wallet #deposit-instructions.wallet-hidden,
#tab-wallet #deposit-instructions[style*="display: none"],
#tab-wallet #deposit-ewallet-instructions.wallet-hidden,
#tab-wallet #deposit-ewallet-instructions[style*="display: none"] {
  display: none !important;
}

#deposit-ewallet-qr-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 8px 0 14px !important;
  gap: 8px !important;
}


/* ==========================================================================
   DESKTOP SIDEBAR LIQUID GLASS DESIGN (LONG WIDE & SHORT COMPACT)
   Uses the dynamic fluid #nav-liquid-pill with vertical iOS-physics animation,
   specular sheen, caustic glow, and buoyant pop. Eliminates all harsh stroke
   outlines on hover and active states.
   ========================================================================== */
@media (min-width: 768px) {

  /* Ensure #app-nav and both navigation groups are relative for absolute liquid pill positioning */
  #app-nav {
    position: relative !important;
  }

  #app-nav .nav-items-group-top,
  #app-nav .nav-items-group-bottom {
    position: relative !important;
  }

  /* ── 1. DESKTOP LIQUID GLASS DYNAMIC INDICATOR PILL ── */
  #app-nav .nav-liquid-pill {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0;
    will-change: transform, width, height, border-radius;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(139, 92, 246, 0.28) 50%, rgba(108, 0, 255, 0.18) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 4px 22px rgba(124, 58, 237, 0.38), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: opacity 0.2s ease !important;
  }

  /* Specular gloss reflection curve across top 42% of liquid capsule */
  #app-nav .nav-liquid-pill::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 1.5px !important;
    left: 8px !important;
    right: 8px !important;
    height: 42% !important;
    border-radius: 14px 14px 8px 8px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 1 !important;
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Internal specular refraction and caustic glow */
  #app-nav .nav-liquid-pill::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.3) 0%, transparent 65%) !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    z-index: 1 !important;
    opacity: 1 !important;
    transform: none !important;
    border: none !important;
  }

  /* Light Theme Liquid Glass Pill */
  body.light-theme #app-nav .nav-liquid-pill {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(243, 238, 255, 0.96) 50%, rgba(232, 222, 255, 0.88) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    box-shadow: 0 4px 20px rgba(108, 0, 255, 0.16), inset 0 1.5px 2px rgba(255, 255, 255, 1), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  }

  body.light-theme #app-nav .nav-liquid-pill::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  }

  body.light-theme #app-nav .nav-liquid-pill::before {
    background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.6) 0%, transparent 65%) !important;
  }

  /* Short Compact Pill on Trade screen or collapsed sidebar - NEVER allow sticking out into chart */
  .app-container.trade-screen-active #app-nav .nav-liquid-pill,
  body[data-active-screen="trade"] #app-nav .nav-liquid-pill,
  .app-nav.collapsed .nav-liquid-pill,
  body.sidebar-collapsed #app-nav .nav-liquid-pill {
    width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
  }

  /* Long Wide Pill on Dashboard, Wallet, History, Profile, etc. */
  .app-container:not(.trade-screen-active) #app-nav:not(.collapsed) .nav-liquid-pill,
  body:not([data-active-screen="trade"]):not(.sidebar-collapsed) #app-nav:not(.collapsed) .nav-liquid-pill {
    max-width: calc(100% - 16px) !important;
    height: 48px !important;
    border-radius: 16px !important;
  }

  /* ── 2. NAV ITEMS GEOMETRY & CLEAN STATES ── */
  /* Long Wide Nav Items (Dashboard, Wallet, Profile, etc.) */
  .app-container:not(.trade-screen-active) #app-nav:not(.collapsed) .nav-item,
  body:not([data-active-screen="trade"]):not(.sidebar-collapsed) #app-nav:not(.collapsed) .nav-item {
    width: calc(100% - 16px) !important;
    height: 48px !important;
    margin: 4px 8px !important;
    padding: 0 16px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 2 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
    transition: color 0.18s ease !important;
  }

  /* Short Compact Nav Items (Trade screen or collapsed sidebar) */
  .app-container.trade-screen-active #app-nav .nav-item,
  body[data-active-screen="trade"] #app-nav .nav-item,
  .app-nav.collapsed .nav-item,
  body.sidebar-collapsed #app-nav .nav-item {
    width: 48px !important;
    height: 48px !important;
    margin: 4px auto !important;
    padding: 0 !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 2 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
    transition: color 0.18s ease !important;
  }

  /* Inactive Items Hover - NO WHITE STROKE, NO BOX OUTLINE! Subtle clean hover */
  #app-nav .nav-item:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    transform: none !important;
  }

  body.light-theme #app-nav .nav-item:hover:not(.active) {
    background: rgba(108, 0, 255, 0.04) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #6c00ff !important;
    transform: none !important;
  }

  /* Strictly remove any stroke, outline, or border on focus, active, or click */
  #app-nav .nav-item,
  #app-nav .nav-item:focus,
  #app-nav .nav-item:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Physical micro-spring press feedback on click / active */
  #app-nav .nav-item:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: scale(0.96) !important;
    transition: transform 0.08s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Active Nav Item - completely transparent because the liquid pill sits behind it */
  #app-nav .nav-item.active {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 3 !important;
    transform: none !important;
  }

  #app-nav .nav-item.active::before,
  #app-nav .nav-item.active::after {
    display: none !important;
    content: none !important;
  }

  /* ── 3. CONTENTS INSIDE ACTIVE ITEMS (Icons & Labels) ── */
  #app-nav .nav-item.active .nav-icon-wrapper,
  #app-nav .nav-item.active .nav-label,
  #app-nav .nav-item.active svg {
    position: relative !important;
    z-index: 4 !important;
  }

  #app-nav .nav-item.active .nav-label {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.2px !important;
    text-shadow: none !important;
    animation: navLabelBuoyantPop 0.58s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  #app-nav .nav-item.active svg {
    color: #ffffff !important;
    fill: currentColor !important;
    filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.75)) !important;
    animation: navIconBuoyantPop 0.58s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  #app-nav #nav-dashboard.active svg {
    fill: none !important;
    stroke: #ffffff !important;
  }

  body.light-theme #app-nav .nav-item.active .nav-label {
    color: #5500ce !important;
    font-weight: 700 !important;
    font-size: 14px !important;
  }

  body.light-theme #app-nav .nav-item.active svg {
    color: #6c00ff !important;
    fill: currentColor !important;
    filter: drop-shadow(0 2px 8px rgba(108, 0, 255, 0.45)) !important;
    animation: navIconBuoyantPop 0.58s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  body.light-theme #app-nav #nav-dashboard.active svg {
    fill: none !important;
    stroke: #6c00ff !important;
  }

  /* Short Compact Active SVG sizing */
  .app-container.trade-screen-active #app-nav .nav-item.active svg,
  body[data-active-screen="trade"] #app-nav .nav-item.active svg,
  .app-nav.collapsed .nav-item.active svg,
  body.sidebar-collapsed #app-nav .nav-item.active svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ============================================================
   DESKTOP LEADERBOARD PAGE DESIGN & RESPONSIVE BEHAVIOR
   ============================================================ */

/* On mobile (max-width: 767px): Keep mobile leaderboard 100% untouched */
/* Mobile Leaderboard Top Header with Purple Calligraphy Title */
@media (max-width: 767px) {
  .desktop-leaderboard-header {
    display: none !important;
  }

  .mobile-leaderboard-page-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    padding-top: 10px !important;
    position: relative !important;
  }

  .mobile-leaderboard-header-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    text-align: center !important;
    overflow: visible !important;
  }

  .mobile-leaderboard-calligraphy-title {
    font-family: 'Dancing Script', 'Alex Brush', cursive !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    font-style: italic !important;
    background: linear-gradient(135deg, #c084fc 0%, #a855f7 40%, #7c3aed 80%, #6c00ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #7c3aed !important;
    display: inline-block !important;
    padding: 4px 24px 8px 20px !important;
    margin: -4px -14px -8px -12px !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    filter: drop-shadow(0 2px 10px rgba(168, 85, 247, 0.45)) !important;
  }

  body.light-theme .mobile-leaderboard-calligraphy-title {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #6d28d9 !important;
    filter: drop-shadow(0 2px 8px rgba(124, 58, 237, 0.3)) !important;
  }
}

/* On desktop (min-width: 768px): Dedicated desktop page styling */
@media (min-width: 768px) {

  /* Hide mobile-style back header on desktop */
  #tab-leaderboard .history-page-header {
    display: none !important;
  }

  /* Desktop Leaderboard Screen Container */
  #tab-leaderboard {
    max-width: 1040px !important;
    margin: 0 auto !important;
    padding: 24px 28px 60px !important;
    box-sizing: border-box !important;
  }

  /* Desktop Header with 3D Rotated Trophy and Signature Calligraphy Title */
  .desktop-leaderboard-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-bottom: 24px !important;
    gap: 20px !important;
  }

  .desktop-leaderboard-header-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .desktop-leaderboard-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    overflow: visible !important;
  }

  .desktop-leaderboard-trophy-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .desktop-leaderboard-trophy-img {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
    transform: rotate(-14deg) !important;
    filter: drop-shadow(0 10px 22px rgba(168, 85, 247, 0.45)) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important;
  }

  .desktop-leaderboard-trophy-img:hover {
    transform: rotate(-8deg) scale(1.08) !important;
    filter: drop-shadow(0 14px 28px rgba(192, 132, 252, 0.6)) !important;
  }

  .desktop-leaderboard-title-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  .desktop-leaderboard-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .title-top-traders {
    font-family: 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    color: #ffffff !important;
    display: inline-block !important;
  }

  body.light-theme .title-top-traders {
    color: #0b0e14 !important;
  }

  /* Unclipped Desktop Leaderboard Calligraphy with extra horizontal/vertical padding so 'L' and 'd' never clip */
  .title-leaderboard-calligraphy {
    font-family: 'Dancing Script', 'Alex Brush', cursive !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    font-style: italic !important;
    background: linear-gradient(135deg, #c084fc 0%, #a855f7 40%, #7c3aed 80%, #6c00ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #a855f7 !important;
    display: inline-block !important;
    padding: 6px 26px 12px 22px !important;
    margin: -6px -16px -12px -14px !important;
    overflow: visible !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
    filter: drop-shadow(0 2px 10px rgba(168, 85, 247, 0.45)) !important;
  }

  body.light-theme .title-leaderboard-calligraphy {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 45%, #6c00ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #7c3aed !important;
    padding: 6px 26px 12px 22px !important;
    margin: -6px -16px -12px -14px !important;
    filter: drop-shadow(0 2px 8px rgba(124, 58, 237, 0.28)) !important;
  }

  .desktop-leaderboard-subtitle {
    font-size: 13.5px !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
    line-height: 1.45 !important;
  }

  /* Desktop Leaderboard Card & Table */
  #tab-leaderboard .card.leaderboard-card {
    background: rgba(14, 18, 28, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35) !important;
    padding: 20px 24px !important;
  }

  body.light-theme #tab-leaderboard .card.leaderboard-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(139, 92, 246, 0.18) !important;
    box-shadow: 0 16px 40px rgba(108, 0, 255, 0.08) !important;
  }

  #tab-leaderboard .leaderboard-table col.col-rank {
    width: 75px !important;
  }

  #tab-leaderboard .leaderboard-table col.col-trader {
    width: auto !important;
  }

  #tab-leaderboard .leaderboard-table col.col-streak {
    width: 110px !important;
  }

  #tab-leaderboard .leaderboard-table col.col-profit {
    width: 170px !important;
  }

  #tab-leaderboard .leaderboard-table th {
    padding: 14px 16px !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-weight: 700 !important;
  }

  #tab-leaderboard .leaderboard-table td {
    padding: 14px 16px !important;
    font-size: 13.5px !important;
  }

  /* Ensure desktop sidebar items fit and can scroll if needed */
  #app-nav {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
  }

  #app-nav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }
}

/* ============================================================
   UNIVERSAL LEADERBOARD ARCHITECTURE (ALL VIEWPORTS)
   ============================================================ */

#tab-leaderboard .card.leaderboard-card,
.card.leaderboard-card {
  position: relative !important;
  z-index: 10 !important;
  margin-top: 0 !important;
  overflow: visible !important;
  border-radius: 24px !important;
}

#tab-leaderboard .leaderboard-container,
.leaderboard-container {
  width: 100% !important;
  overflow: visible !important;
  overflow-x: visible !important;
}

#tab-leaderboard .leaderboard-table,
.leaderboard-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  table-layout: fixed !important;
  overflow: visible !important;
}

#tab-leaderboard .leaderboard-row,
.leaderboard-table tbody tr.leaderboard-row {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: none !important;
}

#tab-leaderboard .leaderboard-row td,
.leaderboard-table tbody tr.leaderboard-row td {
  background: rgba(255, 255, 255, 0.03) !important;
  border-top: 1px solid rgba(139, 92, 246, 0.14) !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.14) !important;
  border-left: none !important;
  border-right: none !important;
  padding: 13px 12px !important;
  vertical-align: middle !important;
  overflow: visible !important;
  font-size: 13px !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.light-theme #tab-leaderboard .leaderboard-row td,
body.light-theme .leaderboard-table tbody tr.leaderboard-row td {
  background: #ffffff !important;
  border-top: 1px solid rgba(139, 92, 246, 0.16) !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.16) !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.03) !important;
}

#tab-leaderboard .leaderboard-row td:first-child,
.leaderboard-table tbody tr.leaderboard-row td:first-child {
  border-left: 1px solid rgba(139, 92, 246, 0.14) !important;
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
}

body.light-theme #tab-leaderboard .leaderboard-row td:first-child,
body.light-theme .leaderboard-table tbody tr.leaderboard-row td:first-child {
  border-left: 1px solid rgba(139, 92, 246, 0.16) !important;
}

#tab-leaderboard .leaderboard-row td:last-child,
.leaderboard-table tbody tr.leaderboard-row td:last-child {
  border-right: 1px solid rgba(139, 92, 246, 0.14) !important;
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

body.light-theme #tab-leaderboard .leaderboard-row td:last-child,
body.light-theme .leaderboard-table tbody tr.leaderboard-row td:last-child {
  border-right: 1px solid rgba(139, 92, 246, 0.16) !important;
}

#tab-leaderboard .leaderboard-row:hover td,
.leaderboard-table tbody tr.leaderboard-row:hover td {
  background: rgba(139, 92, 246, 0.12) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
}

body.light-theme #tab-leaderboard .leaderboard-row:hover td,
body.light-theme .leaderboard-table tbody tr.leaderboard-row:hover td {
  background: rgba(245, 243, 255, 0.98) !important;
  border-color: rgba(139, 92, 246, 0.42) !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.1) !important;
}

#tab-leaderboard .leaderboard-avatar-img,
#tab-leaderboard .leaderboard-avatar-initials {
  width: 36px !important;
  height: 36px !important;
}

#tab-leaderboard .leaderboard-trader-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

/* ============================================================
   LEADERBOARD 3D ARCHITECTURAL PODIUM
   (Pillars emerge from behind the listing layer window)
   ============================================================ */

.leaderboard-podium-wrap {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 24px !important;
  margin: 28px auto -20px auto !important;
  padding: 10px 16px 0 16px !important;
  perspective: 1200px !important;
  position: relative !important;
  z-index: 2 !important;
  max-width: 840px !important;
  box-sizing: border-box !important;
}

/* ── NEXTER PURPLE SUNSET GLOW (ETHEREAL, ULTRA-SOFT, ZERO SOLID EDGES) ── */
.podium-half-circle-glow {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 620px !important;
  max-width: 96vw !important;
  height: 330px !important;
  border-radius: 330px 330px 0 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  background:
    radial-gradient(ellipse 220px 120px at 50% 100%, rgba(255, 255, 255, 0.35) 0%, rgba(233, 213, 255, 0.2) 40%, transparent 80%),
    radial-gradient(ellipse 420px 240px at 50% 100%, rgba(192, 132, 252, 0.35) 0%, rgba(168, 85, 247, 0.2) 50%, transparent 85%),
    radial-gradient(ellipse 620px 330px at 50% 100%, rgba(147, 51, 234, 0.25) 0%, rgba(124, 58, 237, 0.12) 50%, rgba(108, 0, 255, 0.03) 75%, transparent 95%) !important;
  filter: blur(26px) !important;
  box-shadow: 0 -24px 80px rgba(168, 85, 247, 0.38) !important;
  animation: sunsetGlowPulse 4.5s ease-in-out infinite alternate !important;
  overflow: visible !important;
}

body.light-theme .podium-half-circle-glow {
  border: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  background:
    radial-gradient(ellipse 220px 120px at 50% 100%, rgba(255, 255, 255, 0.6) 0%, rgba(243, 232, 255, 0.35) 40%, transparent 80%),
    radial-gradient(ellipse 420px 240px at 50% 100%, rgba(216, 180, 254, 0.45) 0%, rgba(192, 132, 252, 0.25) 50%, transparent 85%),
    radial-gradient(ellipse 620px 330px at 50% 100%, rgba(192, 132, 252, 0.35) 0%, rgba(168, 85, 247, 0.15) 50%, rgba(147, 51, 234, 0.03) 75%, transparent 95%) !important;
  filter: blur(22px) !important;
  box-shadow: 0 -18px 65px rgba(168, 85, 247, 0.22) !important;
}

/* Inner Glowing Sun Disc at Horizon behind Rank 1 Building - Ethereal Soft Core */
.podium-sunset-sun-disc {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 220px !important;
  height: 120px !important;
  border-radius: 120px 120px 0 0 !important;
  border: none !important;
  background: radial-gradient(ellipse at 50% 100%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(243, 232, 255, 0.45) 35%,
      rgba(216, 180, 254, 0.15) 65%,
      transparent 80%) !important;
  filter: blur(14px) !important;
  pointer-events: none !important;
}

body.light-theme .podium-sunset-sun-disc {
  border: none !important;
  background: radial-gradient(ellipse at 50% 100%,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(243, 232, 255, 0.55) 35%,
      rgba(216, 180, 254, 0.2) 65%,
      transparent 80%) !important;
  filter: blur(12px) !important;
}

/* Secondary Ambient Layer - Diffuse Bloom, ZERO Hard Contour Rims */
.podium-sunset-inner-glow {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 360px !important;
  height: 190px !important;
  border-radius: 190px 190px 0 0 !important;
  border: none !important;
  border-top: none !important;
  background: radial-gradient(ellipse at 50% 100%,
      rgba(233, 213, 255, 0.3) 0%,
      rgba(192, 132, 252, 0.16) 45%,
      rgba(168, 85, 247, 0.04) 68%,
      transparent 85%) !important;
  box-shadow: none !important;
  filter: blur(18px) !important;
  pointer-events: none !important;
}

body.light-theme .podium-sunset-inner-glow {
  border: none !important;
  border-top: none !important;
  background: radial-gradient(ellipse at 50% 100%,
      rgba(243, 232, 255, 0.5) 0%,
      rgba(216, 180, 254, 0.3) 40%,
      rgba(192, 132, 252, 0.08) 68%,
      transparent 85%) !important;
  box-shadow: none !important;
  filter: blur(16px) !important;
}

.podium-sunset-horizon-line {
  position: absolute !important;
  bottom: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 4px !important;
  border: none !important;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(216, 180, 254, 0.25) 25%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(216, 180, 254, 0.25) 75%,
      transparent 100%) !important;
  filter: blur(4px) !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.35) !important;
  pointer-events: none !important;
}

body.light-theme .podium-sunset-horizon-line {
  border: none !important;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(216, 180, 254, 0.3) 25%,
      rgba(255, 255, 255, 0.9) 50%,
      rgba(216, 180, 254, 0.3) 75%,
      transparent 100%) !important;
  filter: blur(4px) !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.2) !important;
}

@keyframes sunsetGlowPulse {
  0% {
    opacity: 0.82;
  }

  100% {
    opacity: 1;
  }
}

.podium-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
  flex: 1 !important;
  max-width: 240px !important;
  min-width: 130px !important;
  z-index: 2 !important;
}

.podium-column-rank-2 {
  order: 1 !important;
}

.podium-column-rank-1 {
  order: 2 !important;
  z-index: 4 !important;
}

.podium-column-rank-3 {
  order: 3 !important;
}

/* Floating Avatar Card (Rounded Square with Purple Gradient Stroke) */
.podium-avatar-card {
  position: relative !important;
  width: 84px !important;
  height: 84px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(22, 12, 38, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  margin-bottom: 12px !important;
  cursor: pointer !important;
  border: 2.5px solid rgba(168, 85, 247, 0.85) !important;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.4), 0 12px 26px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease !important;
  animation: podiumFloat 3.8s ease-in-out infinite !important;
}

body.light-theme .podium-avatar-card {
  background: #ffffff !important;
  border: 2.5px solid rgba(147, 51, 234, 0.75) !important;
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.22), 0 10px 22px rgba(108, 0, 255, 0.1) !important;
}

.podium-column-rank-1 .podium-avatar-card {
  width: 98px !important;
  height: 98px !important;
  border-radius: 22px !important;
  border: 3px solid #c084fc !important;
  box-shadow: 0 0 34px rgba(192, 132, 252, 0.65), 0 14px 30px rgba(0, 0, 0, 0.5) !important;
  animation-delay: 0s !important;
}

body.light-theme .podium-column-rank-1 .podium-avatar-card {
  border: 3px solid #9333ea !important;
  box-shadow: 0 0 28px rgba(147, 51, 234, 0.35), 0 12px 28px rgba(108, 0, 255, 0.16) !important;
}

.podium-column-rank-2 .podium-avatar-card {
  border: 2.5px solid rgba(168, 85, 247, 0.85) !important;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.4), 0 12px 26px rgba(0, 0, 0, 0.45) !important;
  animation-delay: 0.7s !important;
}

body.light-theme .podium-column-rank-2 .podium-avatar-card {
  border: 2.5px solid rgba(147, 51, 234, 0.75) !important;
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.22), 0 10px 22px rgba(108, 0, 255, 0.12) !important;
  animation-delay: 0.7s !important;
}

.podium-column-rank-3 .podium-avatar-card {
  border: 2.5px solid rgba(147, 51, 234, 0.75) !important;
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.35), 0 10px 24px rgba(0, 0, 0, 0.45) !important;
  animation-delay: 1.4s !important;
}

body.light-theme .podium-column-rank-3 .podium-avatar-card {
  border: 2.5px solid rgba(126, 34, 206, 0.65) !important;
  box-shadow: 0 0 18px rgba(126, 34, 206, 0.18), 0 8px 20px rgba(108, 0, 255, 0.1) !important;
  animation-delay: 1.4s !important;
}

.podium-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 17px !important;
  display: block !important;
}

.podium-column-rank-1 .podium-avatar-img {
  border-radius: 19px !important;
}

.podium-avatar-initials {
  width: 100% !important;
  height: 100% !important;
  border-radius: 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(26, 183, 109, 0.25)) !important;
}

/* Verified Badge PNG centered overlapping bottom of avatar card */
.podium-avatar-verified {
  position: absolute !important;
  bottom: -9px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  z-index: 6 !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65)) !important;
  pointer-events: none !important;
}

.podium-column-rank-1 .podium-avatar-verified {
  width: 25px !important;
  height: 25px !important;
  bottom: -11px !important;
}

@keyframes podiumFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Trader Info above Building (Name and Flag only) */
.podium-trader-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 12px !important;
  gap: 3px !important;
  width: 100% !important;
}

.podium-trader-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  max-width: 100% !important;
}

.podium-trader-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 140px !important;
  letter-spacing: -0.2px !important;
  cursor: pointer !important;
}

.podium-column-rank-1 .podium-trader-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  max-width: 165px !important;
}

/* 3D Buildings / Pillars in Pure Nexter Purple Gradient */
.podium-building {
  position: relative !important;
  width: 100% !important;
  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transform-style: preserve-3d !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3D Top Arched Bevel / Cap */
.podium-building::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 14px !important;
  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  pointer-events: none !important;
}

/* Circuit / Tech pattern overlay on pillar face */
.podium-building::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0.12 !important;
  background-image: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.45) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px) !important;
  background-size: 16px 16px, 20px 20px !important;
  pointer-events: none !important;
}

/* Military Badge with Bold Rank Digit After Badge on Building */
.podium-building-badge-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  z-index: 5 !important;
  margin-top: 4px !important;
}

.podium-building-badge {
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6)) !important;
  transition: transform 0.25s ease !important;
}

.podium-column-rank-1 .podium-building-badge {
  width: 68px !important;
  height: 68px !important;
}

.podium-building:hover .podium-building-badge {
  transform: scale(1.08) !important;
}

.podium-building-digit {
  font-family: 'Cinzel', 'Montserrat', serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0px !important;
  text-align: center !important;
  display: inline-block !important;
  width: auto !important;
  user-select: none !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 16px rgba(168, 85, 247, 0.9), 0 0 32px rgba(168, 85, 247, 0.55), 0 2px 6px rgba(0, 0, 0, 0.7) !important;
  filter: none !important;
  transition: transform 0.25s ease !important;
}

.podium-column-rank-1 .podium-building-digit {
  font-size: 38px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-image: none !important;
  text-shadow: 0 0 22px rgba(192, 132, 252, 0.95), 0 0 40px rgba(168, 85, 247, 0.7), 0 2px 8px rgba(0, 0, 0, 0.85) !important;
  filter: none !important;
}

body.light-theme .podium-building-digit {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
  text-shadow: 0 2px 8px rgba(124, 58, 237, 0.32), 0 0 2px rgba(124, 58, 237, 0.4) !important;
  filter: none !important;
}

body.light-theme .podium-column-rank-1 .podium-building-digit {
  font-size: 38px !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #6c00ff !important;
  -webkit-text-fill-color: #6c00ff !important;
  text-shadow: 0 2px 10px rgba(108, 0, 255, 0.45), 0 0 2px rgba(108, 0, 255, 0.5) !important;
  filter: none !important;
}

/* Rank 1 Center Pillar (Grand Imperial Purple Gradient) */
.podium-building-1 {
  height: 240px !important;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.52) 0%, rgba(124, 58, 237, 0.36) 38%, rgba(20, 8, 38, 0.96) 100%) !important;
  border: 1.5px solid rgba(192, 132, 252, 0.7) !important;
  border-bottom: none !important;
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.4),
    inset 1.5px 0 4px rgba(192, 132, 252, 0.4),
    inset -1.5px 0 4px rgba(124, 58, 237, 0.45),
    0 20px 48px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(168, 85, 247, 0.42) !important;
}

/* Rank 2 Left Pillar (Amethyst Violet Purple Gradient) */
.podium-building-2 {
  height: 195px !important;
  background: linear-gradient(180deg, rgba(147, 51, 234, 0.44) 0%, rgba(108, 0, 255, 0.3) 38%, rgba(16, 7, 32, 0.96) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.55) !important;
  border-bottom: none !important;
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.32),
    inset 1.5px 0 4px rgba(168, 85, 247, 0.32),
    inset -1.5px 0 4px rgba(108, 0, 255, 0.4),
    0 18px 42px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(147, 51, 234, 0.32) !important;
}

/* Rank 3 Right Pillar (Deep Velvet Purple Gradient) */
.podium-building-3 {
  height: 165px !important;
  background: linear-gradient(180deg, rgba(126, 34, 206, 0.38) 0%, rgba(88, 28, 135, 0.26) 38%, rgba(14, 6, 26, 0.96) 100%) !important;
  border: 1.5px solid rgba(147, 51, 234, 0.48) !important;
  border-bottom: none !important;
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.28),
    inset 1.5px 0 4px rgba(147, 51, 234, 0.26),
    inset -1.5px 0 4px rgba(88, 28, 135, 0.38),
    0 16px 38px rgba(0, 0, 0, 0.48),
    0 0 26px rgba(126, 34, 206, 0.25) !important;
}

/* Light Theme Adaptations for Podium Buildings */
body.light-theme .podium-building-1 {
  background: linear-gradient(180deg, rgba(233, 213, 255, 0.85) 0%, rgba(245, 243, 255, 0.94) 42%, #ffffff 100%) !important;
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 16px 36px rgba(124, 58, 237, 0.18), inset 0 2px 6px rgba(255, 255, 255, 0.95) !important;
}

body.light-theme .podium-building-2 {
  background: linear-gradient(180deg, rgba(243, 232, 255, 0.75) 0%, rgba(250, 245, 255, 0.92) 42%, #ffffff 100%) !important;
  border-color: rgba(147, 51, 234, 0.45) !important;
  box-shadow: 0 16px 36px rgba(108, 0, 255, 0.14), inset 0 2px 6px rgba(255, 255, 255, 0.95) !important;
}

body.light-theme .podium-building-3 {
  background: linear-gradient(180deg, rgba(245, 243, 255, 0.65) 0%, #ffffff 100%) !important;
  border-color: rgba(126, 34, 206, 0.36) !important;
  box-shadow: 0 16px 36px rgba(108, 0, 255, 0.1), inset 0 2px 6px rgba(255, 255, 255, 0.95) !important;
}

/* Circled Actual Country Flags (Unclipped Shadows) */
.table-flag-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  padding: 3px !important;
  margin: -3px 0 !important;
  line-height: 1 !important;
}

.country-flag-circle {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

body.light-theme .country-flag-circle {
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  box-shadow: 0 2px 5px rgba(108, 0, 255, 0.16) !important;
}

/* Table Avatar: Circular with Completely Unclipped Verified Badge */
.table-avatar-circle-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  margin: 1px 0 !important;
}

.table-avatar-circle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  border: 1.6px solid rgba(168, 85, 247, 0.45) !important;
  cursor: pointer !important;
}

body.light-theme .table-avatar-circle {
  border-color: rgba(139, 92, 246, 0.35) !important;
  box-shadow: 0 2px 6px rgba(108, 0, 255, 0.12) !important;
}

.table-avatar-circle-fallback {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: var(--bg-card-hover) !important;
  border: 1.6px solid rgba(168, 85, 247, 0.45) !important;
  cursor: pointer !important;
}

.table-avatar-verified-badge {
  position: absolute !important;
  bottom: -1px !important;
  right: -2px !important;
  width: 15px !important;
  height: 15px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1.5px 3px rgba(0, 0, 0, 0.5)) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Table Rank Numbers (4-20) */
.table-rank-num {
  font-family: 'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--text-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(139, 92, 246, 0.08) !important;
  border: 1px solid rgba(139, 92, 246, 0.22) !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

body.light-theme .table-rank-num {
  background: rgba(124, 58, 237, 0.05) !important;
  border-color: rgba(124, 58, 237, 0.18) !important;
  color: #6b21a8 !important;
  font-weight: 800 !important;
}

/* Table Rank for Top 3 (Military Badge + Bold Digit After Badge) */
.table-rank-badge-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}

.table-rank-top-badge {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45)) !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.table-rank-badge-wrap:hover .table-rank-top-badge {
  transform: scale(1.15) !important;
}

.table-rank-top-digit {
  font-family: 'Cinzel', 'Montserrat', serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0px !important;
  display: inline-block !important;
  user-select: none !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.8), 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  filter: none !important;
}

.table-rank-top-digit-1 {
  font-size: 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-image: none !important;
  text-shadow: 0 0 12px rgba(192, 132, 252, 0.9), 0 1px 4px rgba(0, 0, 0, 0.7) !important;
  filter: none !important;
}

body.light-theme .table-rank-top-digit {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
  text-shadow: 0 1px 3px rgba(124, 58, 237, 0.3) !important;
  filter: none !important;
}

body.light-theme .table-rank-top-digit-1 {
  font-size: 16px !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #6c00ff !important;
  -webkit-text-fill-color: #6c00ff !important;
  text-shadow: 0 1px 4px rgba(108, 0, 255, 0.4) !important;
  filter: none !important;
}

/* User Position VIP Banner in Nexter Signature Purple Glass */
.user-rank-banner {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.16) 0%, rgba(108, 0, 255, 0.08) 50%, rgba(20, 10, 36, 0.6) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  box-shadow: 0 10px 30px rgba(108, 0, 255, 0.18), inset 0 1px 1.5px rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  overflow: visible !important;
}

body.light-theme .user-rank-banner {
  background: linear-gradient(135deg, #ffffff 0%, rgba(245, 243, 255, 0.95) 100%) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.28) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12), inset 0 1px 2px #ffffff !important;
}

.user-rank-banner-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.user-rank-user-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.user-rank-name-cluster {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.user-rank-display-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.user-rank-label-tag {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  letter-spacing: 0.2px !important;
}

.user-rank-profit-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.user-rank-profit-val {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.user-rank-pos-pill {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35) !important;
  letter-spacing: 0.3px !important;
}

/* List View Streak: Clean Floating Crystals & Purple Gradient Digits (No rectangle layer) */
.table-streak-crystal-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  vertical-align: middle !important;
}

.table-streak-crystal-badge:hover {
  background: transparent !important;
  border-color: transparent !important;
}

.table-streak-crystal-img {
  width: 25px !important;
  height: 25px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(168, 85, 247, 0.6)) !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.table-streak-crystal-badge:hover .table-streak-crystal-img {
  transform: scale(1.15) !important;
}

.table-streak-purple-digits {
  font-family: 'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 45%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block !important;
  filter: drop-shadow(0 1px 3px rgba(168, 85, 247, 0.35)) !important;
}

body.light-theme .table-streak-purple-digits {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 50%, #6366f1 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 1px 3px rgba(124, 58, 237, 0.25)) !important;
}

/* Mobile Responsiveness for Podium and Standings */
@media (max-width: 767px) {
  .leaderboard-podium-wrap {
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    margin: 14px auto -14px auto !important;
    padding: 4px 4px 0 4px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .podium-half-circle-glow {
    width: 440px !important;
    max-width: 98vw !important;
    height: 255px !important;
    border-radius: 255px 255px 0 0 !important;
    bottom: 0 !important;
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    filter: blur(20px) !important;
    overflow: visible !important;
  }

  .podium-sunset-sun-disc {
    width: 170px !important;
    height: 90px !important;
    border-radius: 90px 90px 0 0 !important;
    border: none !important;
    filter: blur(12px) !important;
  }

  .podium-sunset-inner-glow {
    width: 290px !important;
    height: 155px !important;
    border-radius: 155px 155px 0 0 !important;
    border: none !important;
    border-top: none !important;
    filter: blur(16px) !important;
  }

  .podium-column {
    min-width: 0 !important;
    width: 32% !important;
    flex: 1 1 0 !important;
    max-width: none !important;
  }

  .podium-building {
    width: 100% !important;
    max-width: 100% !important;
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
  }

  .podium-avatar-card {
    width: 58px !important;
    height: 58px !important;
    border-radius: 15px !important;
    margin-bottom: 6px !important;
  }

  .podium-column-rank-1 .podium-avatar-card {
    width: 68px !important;
    height: 68px !important;
    border-radius: 18px !important;
    margin-bottom: 8px !important;
  }

  .podium-avatar-img {
    border-radius: 12px !important;
  }

  .podium-column-rank-1 .podium-avatar-img {
    border-radius: 15px !important;
  }

  .podium-avatar-verified {
    width: 16px !important;
    height: 16px !important;
    bottom: -6px !important;
    right: -6px !important;
  }

  .podium-column-rank-1 .podium-avatar-verified {
    width: 19px !important;
    height: 19px !important;
    bottom: -7px !important;
    right: -7px !important;
  }

  .podium-trader-name-row {
    width: 100% !important;
    justify-content: center !important;
    gap: 4px !important;
    max-width: 100% !important;
  }

  .podium-trader-name {
    font-size: 11px !important;
    max-width: 66px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    cursor: pointer !important;
  }

  .podium-column-rank-1 .podium-trader-name {
    font-size: 12px !important;
    max-width: 80px !important;
  }

  .podium-building-badge-group {
    gap: 4px !important;
    margin-top: 2px !important;
  }

  .podium-building-badge {
    width: 36px !important;
    height: 36px !important;
  }

  .podium-column-rank-1 .podium-building-badge {
    width: 44px !important;
    height: 44px !important;
  }

  .podium-building-digit {
    font-size: 20px !important;
  }

  .podium-column-rank-1 .podium-building-digit {
    font-size: 26px !important;
  }

  .table-rank-top-badge {
    width: 20px !important;
    height: 20px !important;
  }

  .table-rank-top-digit {
    font-size: 13px !important;
  }

  .podium-building-1 {
    height: 145px !important;
    padding-top: 10px !important;
  }

  .podium-building-2 {
    height: 118px !important;
    padding-top: 10px !important;
  }

  .podium-building-3 {
    height: 98px !important;
    padding-top: 8px !important;
  }

  /* Responsive column widths on mobile table to give maximum space to trader names */
  #tab-leaderboard .leaderboard-table col.col-rank {
    width: 38px !important;
  }

  #tab-leaderboard .leaderboard-table col.col-trader {
    width: auto !important;
  }

  #tab-leaderboard .leaderboard-table col.col-streak {
    width: 54px !important;
  }

  #tab-leaderboard .leaderboard-table col.col-profit {
    width: 90px !important;
  }

  #tab-leaderboard .leaderboard-table th {
    padding: 8px 3px !important;
    font-size: 10.5px !important;
  }

  #tab-leaderboard .leaderboard-table td {
    padding: 8px 3px !important;
    font-size: 12px !important;
  }

  #tab-leaderboard .leaderboard-table td.td-rank {
    padding-left: 4px !important;
    padding-right: 2px !important;
  }

  #tab-leaderboard .leaderboard-table td.td-trader {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  #tab-leaderboard .leaderboard-table td.td-streak {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  #tab-leaderboard .leaderboard-table td.td-profit {
    padding-right: 6px !important;
    padding-left: 2px !important;
  }

  #tab-leaderboard .leaderboard-avatar-wrap {
    gap: 6px !important;
  }

  #tab-leaderboard .leaderboard-trader-name {
    max-width: 125px !important;
    font-size: 12px !important;
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.25) !important;
  }

  #tab-leaderboard .leaderboard-trader-name:active {
    color: #a855f7 !important;
  }

  body.light-theme #tab-leaderboard .leaderboard-trader-name:active {
    color: #7c3aed !important;
  }
}

/* ── NEXTER THEMED LIQUID GLASS LEADERBOARD HOVER CARD ── */
.leaderboard-hover-card {
  position: fixed !important;
  width: 320px !important;
  background: rgba(13, 17, 28, 0.94) !important;
  backdrop-filter: blur(26px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(200%) !important;
  border: 1px solid rgba(139, 92, 246, 0.38) !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.7), 0 0 28px rgba(139, 92, 246, 0.25), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.35) !important;
  z-index: 999999 !important;
  display: none;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

.lh-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.lh-card-avatar-wrap {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
}

.lh-card-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(139, 92, 246, 0.6) !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.35) !important;
}

.lh-card-avatar-initials {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35) 0%, rgba(26, 183, 109, 0.25) 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.25) !important;
}

.lh-card-avatar-verified {
  display: none !important;
}

.lh-card-user-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  flex: 1 !important;
  overflow: visible !important;
}

.lh-card-country-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  font-weight: 600 !important;
  overflow: visible !important;
}

.lh-card-country {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.lh-card-username-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

.lh-card-username {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 140px !important;
}

.lh-card-verified-badge-img {
  width: 15px !important;
  height: 15px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)) !important;
}

.lh-card-vip {
  font-size: 13px !important;
  color: #a855f7 !important;
  flex-shrink: 0 !important;
}

.lh-card-streak-crystal-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(168, 85, 247, 0.16) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  padding: 1.5px 6px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

.lh-card-streak-crystal-img {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 3px rgba(168, 85, 247, 0.4)) !important;
}

.lh-card-streak-digits {
  color: #c084fc !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
}

.lh-card-divider {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.45), transparent) !important;
  margin-bottom: 12px !important;
}

.lh-card-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.lh-stat-tile {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 10px !important;
  padding: 7px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.lh-card-stat-label {
  font-size: 9px !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
}

.lh-card-stat-val {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
}

.lh-card-stat-val.profit {
  color: #1ab76d !important;
  text-shadow: 0 0 12px rgba(26, 183, 109, 0.3) !important;
}

.lh-card-stat-val.loss {
  color: #ef4444 !important;
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.3) !important;
}

/* Light Theme Hover Card */
body.light-theme .leaderboard-hover-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(139, 92, 246, 0.28) !important;
  box-shadow: 0 20px 50px rgba(108, 0, 255, 0.16), 0 2px 10px rgba(0, 0, 0, 0.04), inset 0 1.5px 2px rgba(255, 255, 255, 1) !important;
}

body.light-theme .lh-card-username {
  color: #0d111c !important;
}

body.light-theme .lh-card-avatar-initials {
  color: #6c00ff !important;
}

body.light-theme .lh-stat-tile {
  background: rgba(139, 92, 246, 0.04) !important;
  border-color: rgba(139, 92, 246, 0.12) !important;
}

body.light-theme .lh-card-stat-val {
  color: #0d111c !important;
}

/* ============================================================
   MOBILE TRADER TRADE DATA TOOLTIP MODAL
   (Centered modal with dark cosmic blur, clean border, close button)
   ============================================================ */

.leaderboard-trader-modal-backdrop,
.mobile-trader-tooltip-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(10, 6, 24, 0.78) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  z-index: 10000000 !important;
  cursor: pointer !important;
  display: none;
  animation: modalFadeIn 0.2s ease forwards !important;
}

.leaderboard-trader-modal-backdrop.active,
.leaderboard-trader-modal-backdrop[style*="display: block"],
.leaderboard-trader-modal-backdrop[style*="display:block"],
.mobile-trader-tooltip-backdrop.active {
  display: block !important;
}

body.light-theme .leaderboard-trader-modal-backdrop,
body.light-theme .mobile-trader-tooltip-backdrop {
  background: rgba(30, 16, 56, 0.45) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
}

.leaderboard-trader-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 336px !important;
  max-width: calc(100vw - 28px) !important;
  background: rgba(13, 17, 28, 0.96) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
  border-radius: 22px !important;
  padding: 18px 18px !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85), 0 0 35px rgba(168, 85, 247, 0.35), inset 0 1.5px 2px rgba(255, 255, 255, 0.25) !important;
  z-index: 10000001 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  display: none;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  animation: mobileModalPopCenter 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.leaderboard-trader-modal.active,
.leaderboard-trader-modal[style*="display: block"],
.leaderboard-trader-modal[style*="display:block"] {
  display: block !important;
}

body.light-theme .leaderboard-trader-modal {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.35) !important;
  box-shadow: 0 24px 60px rgba(108, 0, 255, 0.2), 0 4px 18px rgba(0, 0, 0, 0.06), inset 0 1.5px 2px rgba(255, 255, 255, 1) !important;
}

.lh-modal-close-btn,
.mobile-trader-tooltip-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(168, 85, 247, 0.2) !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  color: #c084fc !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.lh-modal-close-btn:hover,
.lh-modal-close-btn:active,
.mobile-trader-tooltip-close:hover,
.mobile-trader-tooltip-close:active {
  background: rgba(168, 85, 247, 0.4) !important;
  transform: scale(1.08) !important;
  color: #ffffff !important;
}

body.light-theme .lh-modal-close-btn,
body.light-theme .mobile-trader-tooltip-close {
  background: rgba(124, 58, 237, 0.12) !important;
  border: 1px solid rgba(124, 58, 237, 0.3) !important;
  color: #6d28d9 !important;
}

@keyframes mobileModalPopCenter {
  0% {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.92);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.mobile-trader-tooltip-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000000 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.mobile-trader-tooltip-modal.active,
.mobile-trader-tooltip-modal[style*="display: flex"],
.mobile-trader-tooltip-modal[style*="display:flex"] {
  display: flex !important;
}

.mobile-trader-tooltip-card {
  position: relative !important;
  width: 336px !important;
  max-width: calc(100vw - 32px) !important;
  background: rgba(14, 18, 30, 0.97) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
  border-radius: 22px !important;
  padding: 18px 18px 18px 18px !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85), 0 0 35px rgba(168, 85, 247, 0.35), inset 0 1.5px 2px rgba(255, 255, 255, 0.22) !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  animation: mobileModalPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

body.light-theme .mobile-trader-tooltip-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.35) !important;
  box-shadow: 0 24px 60px rgba(108, 0, 255, 0.22), 0 4px 18px rgba(0, 0, 0, 0.08), inset 0 1.5px 2px rgba(255, 255, 255, 1) !important;
}

#leaderboard-profile-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  background: rgba(0, 0, 0, 0.68) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

#leaderboard-profile-modal .modal-card {
  margin: auto !important;
  max-width: 360px !important;
  width: calc(100% - 24px) !important;
  border-radius: 20px !important;
  background: rgba(15, 20, 32, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(139, 92, 246, 0.25) !important;
  padding: 20px !important;
}

body.light-theme #leaderboard-profile-modal .modal-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(139, 92, 246, 0.22) !important;
  box-shadow: 0 20px 60px rgba(108, 0, 255, 0.16) !important;
}
}

/* ============================================================
   4. REDESIGNED SAAS TRADER PROFILE DASHBOARD (CENTERED)
   ============================================================ */

/* Center Column Layout */
.profile-dashboard-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: 960px !important;
  width: 100% !important;
  margin: 0 auto 40px auto !important;
  gap: 36px !important;
  box-sizing: border-box !important;
}

/* Centered Profile Hero Card */
.profile-main-card {
  width: 100% !important;
  max-width: 960px !important;
  flex: none !important;
  background: var(--bg-card, #131826) !important;
  border: 1px solid rgba(139, 92, 246, 0.16) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  margin: 0 auto !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.light-theme .profile-main-card {
  background: #ffffff !important;
  border-color: rgba(139, 92, 246, 0.15) !important;
  box-shadow: 0 8px 30px rgba(108, 0, 255, 0.05) !important;
}

/* Cover Banner */
.profile-cover-banner {
  height: 160px !important;
  background-color: #5b21b6 !important;
  background-image: var(--profile-cover-bg, linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%)) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.profile-cover-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.profile-cover-gradient-layer {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.profile-banner-edit-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  color: #ffffff !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 2 !important;
  font-family: 'Inter', sans-serif !important;
}

.profile-banner-edit-btn:hover {
  background: rgba(0, 0, 0, 0.75) !important;
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Centered Avatar Box in Middle */
.profile-avatar-center-container {
  display: flex !important;
  justify-content: center !important;
  margin-top: -55px !important;
  margin-bottom: 12px !important;
  position: relative !important;
  z-index: 5 !important;
}

.profile-avatar-rounded-square {
  width: 108px !important;
  height: 108px !important;
  border-radius: 28px !important;
  position: relative !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  cursor: pointer !important;
  transition: box-shadow 0.2s ease !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden !important;
  transform: none !important;
}

body:not(.light-theme) .profile-avatar-rounded-square {
  border: 3.5px solid #0f1322 !important;
}

body.light-theme .profile-avatar-rounded-square {
  border: 3.5px solid #ffffff !important;
  box-shadow: 0 10px 30px rgba(108, 0, 255, 0.18) !important;
}

.profile-avatar-rounded-square:hover {
  transform: none !important;
}

.profile-avatar-rounded-square img.profile-hero-avatar-img {
  width: 104% !important;
  height: 104% !important;
  border-radius: 24px !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  margin-bottom: -1px !important;
  display: block !important;
}

.profile-avatar-rounded-square .profile-hero-avatar-fallback {
  width: 100% !important;
  height: 100% !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(108, 0, 255, 0.3) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.profile-avatar-rounded-square .profile-avatar-letter {
  font-size: 40px !important;
  font-weight: 800 !important;
  color: #a78bfa !important;
  font-family: 'Space Grotesk', 'Outfit', sans-serif !important;
}

.profile-avatar-hover-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(10, 15, 28, 0.68) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-radius: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: #ffffff !important;
  opacity: 0 !important;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 8 !important;
  cursor: pointer !important;
}

.profile-avatar-rounded-square:hover .profile-avatar-hover-overlay {
  opacity: 1 !important;
}

.avatar-hover-view-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
  user-select: none !important;
}

.avatar-hover-view-icon {
  width: 13px !important;
  height: 13px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)) !important;
  transition: transform 0.2s ease !important;
}

.profile-avatar-rounded-square:hover .avatar-hover-view-icon {
  transform: translate(1.5px, -1.5px) !important;
}

/* Verified Badge PNG Icon: Mid white/dark stroke around silhouette, overlapping bottom border on top layer (z-index 25) */
.profile-avatar-verified-badge-img {
  position: absolute !important;
  bottom: -13px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  z-index: 25 !important;
  pointer-events: none !important;
  display: none;
  /* Controlled by JS kyc_status */
}

/* Dark theme: Mid dark stroke (clean, crisp, mid-weight - NOT thick) */
body:not(.light-theme) .profile-avatar-verified-badge-img,
body:not(.light-theme) .profile-lightbox-verified-icon,
body:not(.light-theme) .floating-verified-badge-img,
body:not(.light-theme) .trade-verified-badge-img {
  filter: drop-shadow(1.2px 0 0 #0f1322) drop-shadow(-1.2px 0 0 #0f1322) drop-shadow(0 1.2px 0 #0f1322) drop-shadow(0 -1.2px 0 #0f1322) !important;
}

/* Bright theme: Mid white stroke (clean, crisp, mid-weight - NOT thick) */
body.light-theme .profile-avatar-verified-badge-img,
body.light-theme .profile-lightbox-verified-icon,
body.light-theme .floating-verified-badge-img,
body.light-theme .trade-verified-badge-img {
  filter: drop-shadow(1.2px 0 0 #ffffff) drop-shadow(-1.2px 0 0 #ffffff) drop-shadow(0 1.2px 0 #ffffff) drop-shadow(0 -1.2px 0 #ffffff) !important;
}

/* Identity Details Centered */
.profile-identity-details {
  padding: 6px 24px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.profile-identity-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 2px !important;
}

.profile-identity-name {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  letter-spacing: -0.2px !important;
}

.profile-role-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(108, 0, 255, 0.14);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.28);
  letter-spacing: 0.2px;
  font-family: 'Inter', sans-serif;
}

.profile-role-pill:empty,
.profile-role-pill[style*="display: none"],
.profile-role-pill[style*="display:none"],
.profile-role-pill.hidden {
  display: none !important;
}

body.light-theme .profile-role-pill {
  background: rgba(108, 0, 255, 0.08);
  color: #6c00ff;
  border-color: rgba(108, 0, 255, 0.2);
}

.profile-identity-handle {
  font-size: 13.5px !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  margin-bottom: 12px !important;
  font-family: 'Inter', sans-serif !important;
}

/* Meta Pills: Location & Timezone */
.profile-meta-tags-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  max-width: 440px !important;
  width: 100% !important;
  margin: 6px auto 16px auto !important;
}

.profile-meta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(139, 92, 246, 0.14);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap !important;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s ease;
}

.profile-meta-pill.hidden,
.profile-meta-pill[style*="display: none"],
.profile-meta-pill[style*="display:none"] {
  display: none !important;
}

body.light-theme .profile-meta-pill {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.07);
}

.profile-meta-pill svg {
  color: #8b5cf6 !important;
  flex-shrink: 0 !important;
}

/* ── Profile Balance Showcase Card ── */
.profile-balance-showcase-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 12px 20px !important;
  margin: 12px auto 14px auto !important;
  max-width: 380px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(108, 0, 255, 0.05) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.light-theme .profile-balance-showcase-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 243, 255, 0.95) 100%) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.25) !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.08) !important;
}

.profile-balance-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  flex: 1 !important;
}

.profile-balance-badge-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6) !important;
  display: inline-block !important;
  margin-bottom: 2px !important;
}

.profile-balance-badge-dot.demo-dot {
  background: #f59e0b !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6) !important;
}

.profile-balance-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
}

body.light-theme .profile-balance-label {
  color: #475569 !important;
  font-weight: 800 !important;
}

.profile-balance-val {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  letter-spacing: -0.2px !important;
}

body.light-theme .profile-balance-val {
  color: #0f172a !important;
}

.profile-balance-divider {
  width: 1px !important;
  height: 36px !important;
  background: rgba(139, 92, 246, 0.25) !important;
}

body.light-theme .profile-balance-divider {
  background: rgba(139, 92, 246, 0.2) !important;
}

/* ── Light Theme High-Contrast Profile Text & Values ── */
body.light-theme .profile-identity-name {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .profile-identity-handle {
  color: #64748b !important;
  font-weight: 600 !important;
}

body.light-theme .metric-card-value {
  color: #0f172a !important;
  font-weight: 900 !important;
}

body.light-theme .metric-card-value.text-green {
  color: #059669 !important;
}

body.light-theme .metric-card-label {
  color: #475569 !important;
  font-weight: 600 !important;
}

body.light-theme .aspect-score-center-val {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .aspect-score-label {
  color: #475569 !important;
  font-weight: 600 !important;
}

body.light-theme .widget-card-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .attribute-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.light-theme .attribute-desc {
  color: #64748b !important;
}

body.light-theme .profile-meta-pill {
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* Action Buttons */
.profile-quick-actions-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  max-width: 360px !important;
  width: 100% !important;
  margin: 14px auto 0 auto !important;
}

.profile-action-btn {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 18px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: 'Inter', sans-serif !important;
  outline: none !important;
}

.profile-action-btn.primary {
  background: #6c00ff !important;
  color: #ffffff !important;
  border: 1px solid #6c00ff !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.35) !important;
}

.profile-action-btn.primary:hover {
  background: #5b00d6 !important;
  transform: translateY(-1px) !important;
}

.profile-action-btn.secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(139, 92, 246, 0.18) !important;
}

.profile-action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  transform: translateY(-1px) !important;
}

body.light-theme .profile-action-btn.secondary {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Widgets Grid: Full Width Centered */
.profile-widgets-grid {
  width: 100% !important;
  max-width: 960px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  margin: 12px auto 0 auto !important;
}

/* Top 3 Stat Cards Triad */
.profile-metrics-triad {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
}

.profile-metric-card {
  background: var(--bg-card, #131826) !important;
  border: 1px solid rgba(139, 92, 246, 0.14) !important;
  border-radius: 20px !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}

body.light-theme .profile-metric-card {
  background: #ffffff !important;
  border: 1px solid rgba(139, 92, 246, 0.12) !important;
  box-shadow: 0 4px 20px rgba(108, 0, 255, 0.04) !important;
}

.profile-metric-card:hover {
  transform: none !important;
  border-color: rgba(108, 0, 255, 0.4) !important;
}

.metric-card-value {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  font-family: 'Space Grotesk', 'Outfit', sans-serif !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
}

.metric-card-value.text-green {
  color: #10b981 !important;
}

.metric-card-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Row 2: Aspect Score Gauge + Overall Score Attributes */
.profile-widgets-row {
  display: grid !important;
  grid-template-columns: 1fr 1.35fr !important;
  gap: 16px !important;
  width: 100% !important;
}

.profile-widget-card {
  background: var(--bg-card, #131826) !important;
  border: 1px solid rgba(139, 92, 246, 0.14) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
}

body.light-theme .profile-widget-card {
  background: #ffffff !important;
  border: 1px solid rgba(139, 92, 246, 0.12) !important;
  box-shadow: 0 4px 20px rgba(108, 0, 255, 0.04) !important;
}

.widget-card-header {
  margin-bottom: 12px !important;
}

.widget-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Tooltips: Nexter-themed glassmorphism for desktop hover and mobile tap */
.widget-card-title-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
}

.nexter-tooltip-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.nexter-tooltip-trigger {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(108, 0, 255, 0.08) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  color: #a78bfa !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.light-theme .nexter-tooltip-trigger {
  background: rgba(108, 0, 255, 0.05) !important;
  border-color: rgba(108, 0, 255, 0.2) !important;
  color: #6c00ff !important;
}

.nexter-tooltip-trigger:hover,
.nexter-tooltip-wrap.active .nexter-tooltip-trigger {
  background: rgba(108, 0, 255, 0.25) !important;
  border-color: rgba(139, 92, 246, 0.6) !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 10px rgba(108, 0, 255, 0.3) !important;
}

.nexter-tooltip-popover {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: -10px !important;
  width: 300px !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-8px) scale(0.96) !important;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: rgba(15, 23, 42, 0.96) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.35) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(108, 0, 255, 0.2) !important;
  overflow: hidden !important;
  text-align: left !important;
}

body.light-theme .nexter-tooltip-popover {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.25) !important;
  box-shadow: 0 20px 50px rgba(108, 0, 255, 0.12), 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* Show on desktop hover or mobile active click */
@media (hover: hover) and (pointer: fine) {
  .nexter-tooltip-wrap:hover .nexter-tooltip-popover {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }
}

.nexter-tooltip-wrap.active .nexter-tooltip-popover {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.nexter-tooltip-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px 10px !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.15) !important;
}

.nexter-tooltip-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.nexter-tooltip-badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: rgba(108, 0, 255, 0.18) !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  color: #a78bfa !important;
}

.nexter-tooltip-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}

.nexter-tooltip-close {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-secondary) !important;
  font-size: 16px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
}

body.light-theme .nexter-tooltip-close {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.nexter-tooltip-close:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

.nexter-tooltip-content {
  padding: 12px 16px 14px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--text-secondary) !important;
}

.nexter-tooltip-desc {
  margin: 0 0 10px 0 !important;
  color: var(--text-primary) !important;
  font-size: 12.5px !important;
}

.nexter-tooltip-breakdown {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
}

body.light-theme .nexter-tooltip-breakdown {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}

.breakdown-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.breakdown-row .dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.breakdown-row .dot.green {
  background: #10b981 !important;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6) !important;
}

.breakdown-row .dot.yellow {
  background: #f59e0b !important;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6) !important;
}

.breakdown-row .dot.red {
  background: #ef4444 !important;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6) !important;
}

/* Aspect Score Gauge Card */
.aspect-score-card {
  align-items: center !important;
  text-align: center !important;
  justify-content: space-between !important;
}

.aspect-score-gauge-wrap {
  position: relative !important;
  width: 150px !important;
  height: 90px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  margin: 6px auto 10px !important;
}

.aspect-arc-svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.aspect-score-center-val {
  position: absolute !important;
  bottom: 0 !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  color: var(--text-primary) !important;
  font-family: 'Space Grotesk', 'Outfit', sans-serif !important;
  letter-spacing: -0.5px !important;
}

.aspect-score-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Overall Score Industry Card & Dynamic Tier Badges */
.attributes-score-card .widget-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.overall-tier-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.overall-tier-badge.unranked {
  background: rgba(148, 163, 184, 0.15) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

.overall-tier-badge.bad {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.2) !important;
}

.overall-tier-badge.average {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.2) !important;
}

.overall-tier-badge.good {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border: 1.5px solid rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.25) !important;
}

.attributes-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  margin-top: 6px !important;
  width: 100% !important;
}

.attribute-item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
}

.attribute-icon-pill,
.attribute-icon-pill.gold,
.attribute-icon-pill.purple,
.attribute-icon-pill.blue {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
  transform: none !important;
  transition: none !important;
}

body.light-theme .attribute-icon-pill,
body.light-theme .attribute-icon-pill.gold,
body.light-theme .attribute-icon-pill.purple,
body.light-theme .attribute-icon-pill.blue {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.attribute-icon-img {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain !important;
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
  transform: none !important;
  transition: none !important;
}

/* Strictly NO hover or scale effect on scoreboard icons */
.attribute-icon-pill:hover,
.attribute-item:hover .attribute-icon-pill,
.attribute-icon-pill:hover .attribute-icon-img,
.attribute-item:hover .attribute-icon-img,
.attribute-icon-img:hover {
  transform: none !important;
  scale: none !important;
  transition: none !important;
  filter: none !important;
}

.attribute-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.attribute-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}

.attribute-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', sans-serif !important;
}

.attribute-status-pill {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  line-height: 1 !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}

.attribute-status-pill.neutral {
  background: rgba(148, 163, 184, 0.15) !important;
  color: #94a3b8 !important;
}

.attribute-status-pill.bad {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

.attribute-status-pill.average {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
}

.attribute-status-pill.good {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
}

.attribute-desc {
  font-size: 11.8px !important;
  color: var(--text-secondary) !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.4 !important;
}

.attribute-progress-track {
  width: 100% !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin-top: 6px !important;
  overflow: hidden !important;
  position: relative !important;
}

body.light-theme .attribute-progress-track {
  background: rgba(0, 0, 0, 0.06) !important;
}

.attribute-progress-bar {
  height: 100% !important;
  border-radius: 999px !important;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease !important;
  background: linear-gradient(90deg, #8b5cf6, #6c00ff) !important;
}

.attribute-progress-bar.unranked {
  background: #94a3b8 !important;
}

.attribute-progress-bar.bad {
  background: linear-gradient(90deg, #ef4444, #f87171) !important;
}

.attribute-progress-bar.average {
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
}

.attribute-progress-bar.good {
  background: linear-gradient(90deg, #10b981, #00e676) !important;
}

/* ============================================================
   GLOBAL LIQUID GLASS SUBTABS (Single-Row, Shimmer Animation)
   ============================================================ */

.profile-main-tabs,
.liquid-glass-tab-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 36px auto 32px auto !important;
  max-width: fit-content !important;
  width: auto !important;
  overflow-x: auto !important;
  padding: 6px 8px !important;
  border-radius: 999px !important;
  scrollbar-width: none !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;

  /* Frosted Glass Floating Dock Base */
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35), inset 0 1px 1.5px rgba(255, 255, 255, 0.15) !important;
}

/* Responsive Profile Sub-Tabs Labels */
.tab-label-desktop {
  display: inline !important;
}

.tab-label-mobile {
  display: none !important;
}

body.light-theme .profile-main-tabs,
body.light-theme .liquid-glass-tab-container {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 12px 35px rgba(108, 0, 255, 0.08), inset 0 1.5px 2px rgba(255, 255, 255, 1), inset 0 -1.5px 2px rgba(0, 0, 0, 0.03) !important;
}

.profile-main-tabs::-webkit-scrollbar,
.liquid-glass-tab-container::-webkit-scrollbar {
  display: none !important;
}

.profile-tab-pill,
.liquid-glass-pill-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 26px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.1px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  line-height: 1 !important;
  user-select: none !important;
  outline: none !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Liquid Glass Inactive Dark Base Style */
body:not(.light-theme) .profile-tab-pill:not(.active),
body:not(.light-theme) .liquid-glass-pill-btn:not(.active) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  color: #94a3b8 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.2), inset 0 -1.5px 2px rgba(0, 0, 0, 0.25) !important;
}

/* Liquid Glass Inactive Light Base Style */
body.light-theme .profile-tab-pill:not(.active),
body.light-theme .liquid-glass-pill-btn:not(.active) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(245, 248, 255, 0.45) 100%) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  color: #475569 !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.05), inset 0 1.5px 2px rgba(255, 255, 255, 0.95), inset 0 -1.5px 2px rgba(0, 0, 0, 0.03) !important;
}

/* Glare sweep effect removed on hover for lightweight, clean transition */
.profile-tab-pill::before,
.liquid-glass-pill-btn::before,
.profile-tab-pill:hover::before,
.liquid-glass-pill-btn:hover::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.profile-tab-pill span,
.liquid-glass-pill-btn span {
  pointer-events: none !important;
}

body:not(.light-theme) .profile-tab-pill:not(.active):hover,
body:not(.light-theme) .liquid-glass-pill-btn:not(.active):hover {
  transform: none !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(108, 0, 255, 0.1) 100%) !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(108, 0, 255, 0.35), inset 0 1.5px 2px rgba(255, 255, 255, 0.35) !important;
}

body.light-theme .profile-tab-pill:not(.active):hover,
body.light-theme .liquid-glass-pill-btn:not(.active):hover {
  transform: none !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(235, 242, 255, 0.65) 100%) !important;
  color: #6c00ff !important;
  border-color: rgba(139, 92, 246, 0.45) !important;
  box-shadow: 0 8px 24px rgba(108, 0, 255, 0.15), inset 0 2px 3px rgba(255, 255, 255, 1) !important;
}

/* Liquid Fluid Vibrant Gradient Active State - Ultra Premium */
.profile-tab-pill.active,
.liquid-glass-pill-btn.active,
body.light-theme .profile-tab-pill.active,
body.light-theme .liquid-glass-pill-btn.active,
body:not(.light-theme) .profile-tab-pill.active,
body:not(.light-theme) .liquid-glass-pill-btn.active {
  background: linear-gradient(135deg, #7c3aed 0%, #6c00ff 50%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 8px 25px rgba(108, 0, 255, 0.5), 0 2px 8px rgba(108, 0, 255, 0.35), inset 0 2px 2.5px rgba(255, 255, 255, 0.7), inset 0 -2px 3px rgba(0, 0, 0, 0.3) !important;
  transform: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
}

.profile-tab-pill:active,
.liquid-glass-pill-btn:active {
  transform: none !important;
}

/* ============================================================
   PROFILE PICTURE LIGHTBOX MODAL (BIGGER VIEW)
   ============================================================ */

#profile-pic-lightbox-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(7, 10, 19, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: lightboxFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes lightboxFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.profile-pic-lightbox-card {
  width: 100% !important;
  max-width: 420px !important;
  background: var(--bg-card, #131826) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  border-radius: 28px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(108, 0, 255, 0.25) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  position: relative !important;
}

body.light-theme .profile-pic-lightbox-card {
  background: #ffffff !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  box-shadow: 0 25px 70px rgba(108, 0, 255, 0.15), 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

.profile-pic-lightbox-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.12) !important;
}

.profile-pic-lightbox-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.profile-pic-lightbox-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

.profile-pic-lightbox-close-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-secondary) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.light-theme .profile-pic-lightbox-close-btn {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.profile-pic-lightbox-close-btn:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
  transform: rotate(90deg) !important;
}

.profile-pic-lightbox-body {
  padding: 28px 24px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.profile-pic-lightbox-preview-wrap {
  width: 200px !important;
  height: 200px !important;
  border-radius: 36px !important;
  background: var(--bg-card-hover, #1a2234) !important;
  border: 4px solid var(--bg-card, #131826) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(139, 92, 246, 0.3) !important;
  position: relative !important;
  overflow: visible !important;
  margin: 0 auto 20px auto !important;
}

body.light-theme .profile-pic-lightbox-preview-wrap {
  background: #f8fafc !important;
  border-color: #ffffff !important;
  box-shadow: 0 15px 40px rgba(108, 0, 255, 0.12), 0 0 0 2px rgba(139, 92, 246, 0.25) !important;
}

.profile-lightbox-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 32px !important;
  display: none;
  z-index: 2 !important;
}

.profile-lightbox-image[style*="display: none"],
.profile-lightbox-image[style*="display:none"],
.profile-lightbox-image:not([src]),
.profile-lightbox-image[src=""] {
  display: none !important;
}

.profile-lightbox-fallback {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 32px !important;
  background: linear-gradient(135deg, rgba(108, 0, 255, 0.35) 0%, rgba(139, 92, 246, 0.18) 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1 !important;
}

.profile-lightbox-fallback span {
  font-size: 88px !important;
  font-weight: 800 !important;
  color: #a78bfa !important;
  font-family: 'Space Grotesk', 'Outfit', sans-serif !important;
}

.profile-lightbox-verified-icon {
  position: absolute !important;
  bottom: -16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 14px rgba(108, 0, 255, 0.6)) !important;
  z-index: 10 !important;
}

.profile-pic-lightbox-identity {
  margin-top: 4px !important;
}

.profile-lightbox-name {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
}

.profile-lightbox-handle {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
  font-family: 'Inter', sans-serif !important;
}

.profile-pic-lightbox-footer {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 24px 22px !important;
  border-top: 1px solid rgba(139, 92, 246, 0.12) !important;
}

.profile-lightbox-btn {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 18px !important;
  border-radius: 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: 'Inter', sans-serif !important;
}

.profile-lightbox-btn.primary {
  background: #6c00ff !important;
  color: #ffffff !important;
  border: 1px solid #6c00ff !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.4) !important;
}

.profile-lightbox-btn.primary:hover {
  background: #5b00d6 !important;
  transform: translateY(-1px) !important;
}

.profile-lightbox-btn.secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
}

body.light-theme .profile-lightbox-btn.secondary {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.profile-lightbox-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Dynamic Feed & Won Trades Container */
.profile-main-feed-container {
  max-width: 960px !important;
  width: 100% !important;
  margin: 0 auto 30px auto !important;
  box-sizing: border-box !important;
}

/* Won Trades Showcase Grid (Max 6 Recent Legit Trades) */
.profile-won-trades-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

.profile-won-trade-card {
  background: var(--bg-card, #131826) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.2) !important;
  border-radius: 20px !important;
  padding: 14px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
  position: relative !important;
  overflow: hidden !important;
}

body.light-theme .profile-won-trade-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(16, 185, 129, 0.22) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.profile-won-trade-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
}

.won-trade-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 170px !important;
}

.won-trade-icon-circle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.25) !important;
  color: #10b981 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.profile-won-trade-card:hover .won-trade-icon-circle {
  transform: none !important;
}

.won-trade-info {
  display: flex !important;
  flex-direction: column !important;
}

.won-trade-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  letter-spacing: -0.2px !important;
}

.won-trade-dir-pill {
  padding: 2px 8px !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.won-trade-dir-pill.up {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.won-trade-dir-pill.down {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.won-trade-meta {
  font-size: 12.5px !important;
  color: var(--text-secondary) !important;
  margin-top: 3px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

/* Center Graph Chart Section */
.won-trade-chart-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  min-width: 140px !important;
  max-width: 240px !important;
  padding: 0 10px !important;
}

.won-trade-sparkline-svg {
  width: 100% !important;
  height: 34px !important;
  overflow: visible !important;
}

.won-trade-prices-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  font-size: 10.5px !important;
  color: var(--text-secondary) !important;
  font-family: 'Space Grotesk', monospace !important;
  margin-top: 2px !important;
  letter-spacing: -0.2px !important;
}

.won-trade-prices-meta .price-val {
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.won-trade-prices-meta .price-win {
  color: #10b981 !important;
  font-weight: 800 !important;
}

.won-trade-beacon-pulse {
  animation: wonBeaconGlow 1.8s infinite ease-in-out !important;
}

@keyframes wonBeaconGlow {

  0%,
  100% {
    r: 3.5;
    opacity: 1;
  }

  50% {
    r: 5.5;
    opacity: 0.7;
  }
}

.won-trade-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  min-width: 110px !important;
}

.won-trade-profit-val {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #10b981 !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  letter-spacing: -0.3px !important;
  text-shadow: 0 0 14px rgba(16, 185, 129, 0.25) !important;
}

body.light-theme .won-trade-profit-val {
  color: #059669 !important;
  text-shadow: none !important;
}

.won-trade-time {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  margin-top: 3px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

@media (max-width: 640px) {
  .profile-won-trade-card {
    flex-wrap: wrap !important;
    padding: 14px 16px !important;
    gap: 12px !important;
  }

  .won-trade-chart-section {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 4px !important;
    padding: 0 !important;
  }

  .won-trade-right {
    min-width: auto !important;
  }
}

/* Empty Won Trades State Card */
.profile-empty-won-state {
  background: var(--bg-card, #131826) !important;
  border: 1px dashed rgba(139, 92, 246, 0.25) !important;
  border-radius: 20px !important;
  padding: 44px 24px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.light-theme .profile-empty-won-state {
  background: #ffffff !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
}

.profile-empty-icon {
  font-size: 38px !important;
  margin-bottom: 12px !important;
  filter: drop-shadow(0 6px 16px rgba(108, 0, 255, 0.3)) !important;
}

.profile-empty-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin-bottom: 6px !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
}

.profile-empty-desc {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  max-width: 360px !important;
  line-height: 1.5 !important;
  margin-bottom: 18px !important;
  font-family: 'Inter', sans-serif !important;
}

.profile-empty-btn {
  background: #6c00ff !important;
  color: #ffffff !important;
  border: none !important;
  padding: 9px 20px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.35) !important;
}

.profile-empty-btn:hover {
  background: #5b00d6 !important;
  transform: translateY(-1px) !important;
}

/* ── Mobile Responsive Profile Layout ── */
@media (max-width: 768px) {
  .profile-dashboard-layout {
    gap: 28px !important;
    padding: 0 10px !important;
  }

  .profile-main-card {
    border-radius: 20px !important;
  }

  .profile-cover-banner {
    height: 120px !important;
  }

  .profile-avatar-center-container {
    margin-top: -46px !important;
  }

  .profile-avatar-rounded-square {
    width: 92px !important;
    height: 92px !important;
    border-radius: 24px !important;
  }

  .profile-avatar-rounded-square img.profile-hero-avatar-img,
  .profile-avatar-rounded-square .profile-hero-avatar-fallback {
    border-radius: 20px !important;
  }

  .profile-avatar-verified-badge-img {
    width: 26px !important;
    height: 26px !important;
    bottom: -12px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
  }

  .profile-meta-tags-row {
    flex-direction: row !important;
    gap: 8px !important;
  }

  .profile-meta-pill {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  .profile-widgets-grid {
    gap: 22px !important;
    margin: 8px auto 0 auto !important;
  }

  .profile-metrics-triad {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .profile-metric-card {
    padding: 12px 8px !important;
    border-radius: 16px !important;
    align-items: center !important;
    text-align: center !important;
  }

  .metric-card-value {
    font-size: 20px !important;
    margin-bottom: 2px !important;
  }

  .metric-card-label {
    font-size: 11px !important;
  }

  .profile-widgets-row {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .profile-won-trades-grid {
    grid-template-columns: 1fr !important;
  }

  /* Mobile Compact Sizing for Liquid Glass Subtabs: Perfectly Fits All 4 Tabs in View */
  .profile-main-tabs,
  .liquid-glass-tab-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px auto 20px auto !important;
    padding: 3.5px !important;
    gap: 3px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
  }

  .tab-label-desktop {
    display: none !important;
  }

  .tab-label-mobile {
    display: inline !important;
  }

  .profile-tab-pill,
  .liquid-glass-pill-btn {
    flex: 1 1 auto !important;
    padding: 6.5px 5px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.25px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    line-height: 1.1 !important;
  }

  /* Mobile Centered Instructions Tooltip (Middle of Viewport) */
  .nexter-tooltip-backdrop {
    display: none;
  }

  .nexter-tooltip-wrap.active .nexter-tooltip-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(7, 10, 19, 0.6) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 99998 !important;
    animation: tooltipBackdropFade 0.2s ease-out !important;
  }

  @keyframes tooltipBackdropFade {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .nexter-tooltip-popover {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: min(320px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
    max-height: 85vh !important;
    z-index: 99999 !important;
    transform: scale(0.94) !important;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(108, 0, 255, 0.35) !important;
    border-radius: 20px !important;
  }

  body.light-theme .nexter-tooltip-popover {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 20px 50px rgba(108, 0, 255, 0.25), 0 4px 20px rgba(0, 0, 0, 0.12) !important;
  }

  .nexter-tooltip-wrap.active .nexter-tooltip-popover {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
  }
}

@media (max-width: 380px) {

  .profile-main-tabs,
  .liquid-glass-tab-container {
    padding: 3px !important;
    gap: 2px !important;
  }

  .profile-tab-pill,
  .liquid-glass-pill-btn {
    padding: 5.5px 4px !important;
    font-size: 9.8px !important;
    letter-spacing: -0.35px !important;
  }
}

/* ============================================================
   NEXTER 3D AVATAR SYSTEM & PRESET SELECTION REDESIGN
   ============================================================ */

/* Themed Auto-Switching Gradient Background for Transparent 3D Avatars (Square, not Circle) */
.nexter-avatar-3d-bg {
  border-radius: 24% !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Dark Theme: 100% Opaque Cosmic Purple Gradient */
body:not(.light-theme) .nexter-avatar-3d-bg {
  background: linear-gradient(145deg, #1b0733 0%, #350d63 35%, #581c87 70%, #7c3aed 100%) !important;
  border: 2px solid rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 8px 26px rgba(88, 28, 135, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
}

/* Light/Bright Theme: 100% Opaque Clean White & Rich Purple Gradient */
body.light-theme .nexter-avatar-3d-bg {
  background: linear-gradient(145deg, #ffffff 0%, #f3e8ff 35%, #e9d5ff 65%, #c084fc 100%) !important;
  border: 2px solid rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2), inset 0 1px 2px #ffffff !important;
}

/* Edit Profile Avatar Section */
.profile-avatar-wrap {
  position: relative !important;
  width: 100% !important;
  max-width: 440px !important;
  height: auto !important;
  min-height: unset !important;
  margin: 0 auto 30px auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.profile-edit-avatar-square {
  width: 110px !important;
  height: 110px !important;
  margin: 0 auto 14px auto !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.profile-edit-avatar-square:hover {
  border-color: #a855f7 !important;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.5) !important;
}

.profile-edit-avatar-img {
  width: 104% !important;
  height: 104% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  margin-bottom: -1px !important;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.3)) !important;
}

.avatar-edit-overlay-badge {
  position: absolute !important;
  bottom: 4px !important;
  right: 4px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7c3aed, #6c00ff) !important;
  border: 2px solid #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(108, 0, 255, 0.45) !important;
  z-index: 5 !important;
  transition: filter 0.2s ease !important;
}

.avatar-edit-overlay-badge:hover {
  filter: brightness(1.15) !important;
}

body.light-theme .avatar-edit-overlay-badge {
  border-color: #ffffff !important;
  background: linear-gradient(135deg, #7c3aed, #6c00ff) !important;
}

.profile-avatar-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.profile-avatar-buttons-group {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.avatar-change-trigger-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 22px !important;
  border-radius: 14px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  white-space: nowrap !important;
}

.avatar-change-trigger-btn.primary {
  background: linear-gradient(135deg, #7c3aed, #6c00ff) !important;
  border: 1px solid #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(108, 0, 255, 0.35) !important;
}

.avatar-change-trigger-btn.primary:hover {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 6px 24px rgba(108, 0, 255, 0.5) !important;
  transform: translateY(-1px) !important;
}

.avatar-change-trigger-btn.secondary {
  background: rgba(139, 92, 246, 0.1) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  color: #c084fc !important;
}

body.light-theme .avatar-change-trigger-btn.secondary {
  background: #f5f3ff !important;
  border: 1px solid rgba(124, 58, 237, 0.3) !important;
  color: #7c3aed !important;
}

.avatar-change-trigger-btn.secondary:hover {
  background: rgba(168, 85, 247, 0.18) !important;
  border-color: #a855f7 !important;
  transform: translateY(-1px) !important;
}

body.light-theme .avatar-change-trigger-btn.secondary:hover {
  background: rgba(124, 58, 237, 0.12) !important;
  border-color: #7c3aed !important;
}

.avatar-helper-hint {
  font-size: 12px !important;
  color: var(--text-secondary, #94a3b8) !important;
  font-family: 'Inter', sans-serif !important;
  text-align: center !important;
}

/* Edit Profile Card Styling */
.profile-edit-card {
  background: var(--bg-card, #131826) !important;
  border: 1px solid rgba(139, 92, 246, 0.18) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

body.light-theme .profile-edit-card {
  background: #ffffff !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
  box-shadow: 0 10px 30px rgba(108, 0, 255, 0.08) !important;
}

/* ================= PRESET AVATAR MODAL (Reference Image 2) ================= */
.preset-avatar-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(7, 10, 19, 0.78) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.preset-avatar-backdrop.active,
.preset-avatar-backdrop[style*="display: flex"],
.preset-avatar-backdrop[style*="display:flex"] {
  display: flex !important;
}

.preset-avatar-backdrop[style*="display: none"],
.preset-avatar-backdrop[style*="display:none"] {
  display: none !important;
}

.preset-avatar-card {
  width: 100% !important;
  max-width: 440px !important;
  max-height: 90vh !important;
  background: var(--bg-card, #131826) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.25) !important;
  border-radius: 32px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65), 0 0 40px rgba(108, 0, 255, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.light-theme .preset-avatar-card {
  background: #ffffff !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
  box-shadow: 0 25px 70px rgba(108, 0, 255, 0.14), 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.preset-avatar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 22px 10px 22px !important;
}

.preset-avatar-back-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--text-primary) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.light-theme .preset-avatar-back-btn {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.preset-avatar-back-btn:hover {
  background: rgba(108, 0, 255, 0.2) !important;
  color: #a855f7 !important;
}

.preset-avatar-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}

.preset-avatar-subtitle {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  text-align: center !important;
  margin: 0 0 16px 0 !important;
  font-family: 'Inter', sans-serif !important;
  padding: 0 20px !important;
}

/* Filter Tabs matching Nexter Purple */
.preset-avatar-tabs {
  display: flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  margin: 0 22px 16px 22px !important;
  gap: 4px !important;
}

body.light-theme .preset-avatar-tabs {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

.preset-tab-btn {
  flex: 1 !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.preset-tab-btn:hover {
  color: #a855f7 !important;
}

/* Nexter Purple Tab Active State in BOTH Light and Dark Theme */
.preset-tab-btn.active {
  background: linear-gradient(135deg, #7c3aed, #6c00ff) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.4) !important;
}

body.light-theme .preset-tab-btn.active {
  background: linear-gradient(135deg, #7c3aed, #6c00ff) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}

/* 3D Avatar Grid */
.preset-avatar-grid-scroll {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 4px 22px 14px 22px !important;
  max-height: 48vh !important;
  scrollbar-width: thin !important;
}

.preset-avatar-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

@media (max-width: 380px) {
  .preset-avatar-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
}

.preset-avatar-item {
  aspect-ratio: 1 / 1 !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

/* NO SCALE on hover */
.preset-avatar-item:hover {
  filter: brightness(1.08) !important;
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.35) !important;
}

.preset-avatar-item img {
  width: 104% !important;
  height: 104% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  margin-bottom: -1px !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)) !important;
}

/* Active Selected Avatar Card (Nexter Purple Border, NO SCALE) */
.preset-avatar-item.selected {
  border: 2.5px solid #7c3aed !important;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.55) !important;
}

body:not(.light-theme) .preset-avatar-item.selected {
  border-color: #a855f7 !important;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.65) !important;
}

/* Checkmark Badge on Selected Card: Inside card, top layer (z-index 10), Nexter Purple (NOT yellow) */
.preset-avatar-check-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 10 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #7c3aed !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.55) !important;
  pointer-events: none !important;
}

body.light-theme .preset-avatar-check-badge {
  background: #7c3aed !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Bottom Action Footer with Generous Breathing Room */
.preset-avatar-footer {
  padding: 16px 24px 26px 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}

body.light-theme .preset-avatar-footer {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}

.preset-use-avatar-btn {
  width: 100% !important;
  height: 48px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: filter 0.2s ease, box-shadow 0.2s ease !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}

/* Purple Use Avatar Button in BOTH Light and Dark Themes (NO BLACK BUTTONS) */
.preset-use-avatar-btn:not(:disabled) {
  background: linear-gradient(135deg, #7c3aed, #6c00ff) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(108, 0, 255, 0.35) !important;
}

body.light-theme .preset-use-avatar-btn:not(:disabled) {
  background: linear-gradient(135deg, #7c3aed, #6c00ff) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35) !important;
}

.preset-use-avatar-btn:not(:disabled):hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 10px 28px rgba(108, 0, 255, 0.5) !important;
}

.preset-use-avatar-btn.disabled,
.preset-use-avatar-btn:disabled {
  background: rgba(124, 58, 237, 0.25) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

body.light-theme .preset-use-avatar-btn.disabled,
body.light-theme .preset-use-avatar-btn:disabled {
  background: rgba(124, 58, 237, 0.12) !important;
  color: rgba(124, 58, 237, 0.4) !important;
  box-shadow: none !important;
}

/* ================= SUCCESS CONFIRMATION MODAL (Reference Image 2 Screen 3) ================= */
.avatar-success-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  background: rgba(7, 10, 19, 0.8) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.avatar-success-backdrop.active,
.avatar-success-backdrop[style*="display: flex"],
.avatar-success-backdrop[style*="display:flex"] {
  display: flex !important;
}

.avatar-success-backdrop[style*="display: none"],
.avatar-success-backdrop[style*="display:none"] {
  display: none !important;
}

.avatar-success-card {
  width: 100% !important;
  max-width: 320px !important;
  background: var(--bg-card, #131826) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.3) !important;
  border-radius: 32px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65), 0 0 40px rgba(108, 0, 255, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 34px 26px 30px 26px !important;
  animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.light-theme .avatar-success-card {
  background: #ffffff !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
  box-shadow: 0 25px 70px rgba(108, 0, 255, 0.15) !important;
}

.avatar-success-preview-circle-outer {
  width: 104px !important;
  height: 104px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.avatar-success-preview-square {
  width: 96px !important;
  height: 96px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

.avatar-success-img {
  width: 104% !important;
  height: 104% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  margin-bottom: -1px !important;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.3)) !important;
}

.avatar-success-title {
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: var(--text-primary) !important;
  margin: 0 0 22px 0 !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}

/* Nexter Purple Continue Button in BOTH Light and Dark Themes (NO BLACK BUTTON) */
.avatar-success-btn {
  width: 100% !important;
  height: 46px !important;
  border-radius: 14px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #7c3aed, #6c00ff) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(108, 0, 255, 0.35) !important;
  transition: filter 0.2s ease, box-shadow 0.2s ease !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.light-theme .avatar-success-btn {
  background: linear-gradient(135deg, #7c3aed, #6c00ff) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35) !important;
}

.avatar-success-btn:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 8px 26px rgba(108, 0, 255, 0.45) !important;
}

/* ============================================================
   PURPLE PERFECT THEMED CUSTOM AVATAR CROPPING MODAL
   ============================================================ */
.avatar-crop-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(8, 4, 18, 0.82) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.avatar-crop-backdrop.active,
.avatar-crop-backdrop[style*="display: flex"],
.avatar-crop-backdrop[style*="display:flex"] {
  display: flex !important;
  animation: cropFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes cropFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.avatar-crop-card {
  width: 100% !important;
  max-width: 440px !important;
  background: linear-gradient(180deg, rgba(24, 16, 42, 0.98) 0%, rgba(14, 9, 26, 0.99) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.32) !important;
  box-shadow: 0 24px 64px -12px rgba(108, 0, 255, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: 'Inter', sans-serif !important;
}

body.light-theme .avatar-crop-card {
  background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.24) !important;
  box-shadow: 0 24px 64px -12px rgba(124, 58, 237, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

/* Crop Modal Header */
.avatar-crop-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 22px 14px 22px !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.14) !important;
}

body.light-theme .avatar-crop-header {
  border-bottom-color: rgba(139, 92, 246, 0.12) !important;
}

.avatar-crop-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.avatar-crop-header-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(108, 0, 255, 0.25) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  color: #c084fc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.light-theme .avatar-crop-header-icon {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.1) !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
}

.avatar-crop-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  letter-spacing: -0.2px !important;
}

body.light-theme .avatar-crop-title {
  color: #0f172a !important;
}

.avatar-crop-subtitle {
  margin: 2px 0 0 0 !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

body.light-theme .avatar-crop-subtitle {
  color: #64748b !important;
}

.avatar-crop-close-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.light-theme .avatar-crop-close-btn {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  color: #64748b !important;
}

.avatar-crop-close-btn:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

/* Crop Stage Container */
.avatar-crop-stage-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 16px 20px 10px 20px !important;
}

.avatar-crop-stage {
  position: relative !important;
  width: 320px !important;
  height: 320px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #080412 !important;
  cursor: grab !important;
  user-select: none !important;
  touch-action: none !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6) !important;
}

.avatar-crop-stage:active {
  cursor: grabbing !important;
}

body.light-theme .avatar-crop-stage {
  background: #120b24 !important;
  border-color: rgba(139, 92, 246, 0.25) !important;
}

#avatar-crop-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Nexter Signature Cutout Mask (Rounded-Square Avatar Frame) */
.avatar-crop-mask-overlay {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.avatar-crop-cutout {
  position: relative !important;
  width: 230px !important;
  height: 230px !important;
  border-radius: 40px !important;
  box-shadow: 0 0 0 9999px rgba(8, 4, 18, 0.72), 0 0 24px rgba(168, 85, 247, 0.45), inset 0 0 16px rgba(168, 85, 247, 0.15) !important;
  border: 2px solid #a855f7 !important;
}

body.light-theme .avatar-crop-cutout {
  box-shadow: 0 0 0 9999px rgba(12, 8, 24, 0.65), 0 0 24px rgba(124, 58, 237, 0.45), inset 0 0 16px rgba(124, 58, 237, 0.15) !important;
  border-color: #8b5cf6 !important;
}

/* Corner Crop Indicators */
.crop-corner {
  position: absolute !important;
  width: 16px !important;
  height: 16px !important;
  border-color: #c084fc !important;
  border-style: solid !important;
  pointer-events: none !important;
}

.crop-corner.top-left {
  top: -2px !important;
  left: -2px !important;
  border-width: 3px 0 0 3px !important;
  border-top-left-radius: 40px !important;
}

.crop-corner.top-right {
  top: -2px !important;
  right: -2px !important;
  border-width: 3px 3px 0 0 !important;
  border-top-right-radius: 40px !important;
}

.crop-corner.bottom-left {
  bottom: -2px !important;
  left: -2px !important;
  border-width: 0 0 3px 3px !important;
  border-bottom-left-radius: 40px !important;
}

.crop-corner.bottom-right {
  bottom: -2px !important;
  right: -2px !important;
  border-width: 0 3px 3px 0 !important;
  border-bottom-right-radius: 40px !important;
}

/* 3x3 Grid Lines inside cutout */
.crop-grid-lines {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 40px !important;
  background-image:
    linear-gradient(to right, rgba(168, 85, 247, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168, 85, 247, 0.18) 1px, transparent 1px) !important;
  background-size: 33.333% 33.333% !important;
}

.avatar-crop-hint {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
  font-size: 11.5px !important;
  color: rgba(168, 85, 247, 0.85) !important;
  font-weight: 500 !important;
}

body.light-theme .avatar-crop-hint {
  color: #7c3aed !important;
}

/* Controls Toolbar */
.avatar-crop-controls {
  padding: 8px 22px 14px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.avatar-crop-zoom-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(168, 85, 247, 0.18) !important;
  border-radius: 14px !important;
  padding: 8px 14px !important;
}

body.light-theme .avatar-crop-zoom-group {
  background: #f8fafc !important;
  border-color: rgba(139, 92, 246, 0.18) !important;
}

.crop-zoom-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(168, 85, 247, 0.14) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  color: #c084fc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.light-theme .crop-zoom-btn {
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.2) !important;
  color: #7c3aed !important;
}

.crop-zoom-btn:hover {
  background: #7c3aed !important;
  color: #ffffff !important;
  border-color: #7c3aed !important;
}

.crop-slider-wrap {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.crop-range-slider {
  width: 100% !important;
  height: 6px !important;
  border-radius: 3px !important;
  background: rgba(168, 85, 247, 0.22) !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.crop-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #a855f7 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.7) !important;
  cursor: pointer !important;
  transition: transform 0.1s ease !important;
}

.crop-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15) !important;
}

.crop-range-slider::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #a855f7 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.7) !important;
  cursor: pointer !important;
}

.avatar-crop-aux-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: center !important;
}

.crop-aux-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.light-theme .crop-aux-btn {
  background: #f1f5f9 !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
  color: #475569 !important;
}

.crop-aux-btn:hover {
  background: rgba(168, 85, 247, 0.15) !important;
  border-color: #a855f7 !important;
  color: #c084fc !important;
}

body.light-theme .crop-aux-btn:hover {
  background: rgba(124, 58, 237, 0.1) !important;
  color: #7c3aed !important;
  border-color: #7c3aed !important;
}

/* Crop Modal Footer */
.avatar-crop-footer {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 22px 20px 22px !important;
  border-top: 1px solid rgba(168, 85, 247, 0.14) !important;
}

body.light-theme .avatar-crop-footer {
  border-top-color: rgba(139, 92, 246, 0.12) !important;
}

.avatar-crop-btn {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}

.avatar-crop-btn.secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .avatar-crop-btn.secondary {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.avatar-crop-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px) !important;
}

.avatar-crop-btn.primary {
  background: linear-gradient(135deg, #7c3aed, #6c00ff) !important;
  color: #ffffff !important;
  border: 1px solid #7c3aed !important;
  box-shadow: 0 4px 18px rgba(108, 0, 255, 0.45) !important;
}

.avatar-crop-btn.primary:hover {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  box-shadow: 0 6px 22px rgba(108, 0, 255, 0.6) !important;
  transform: translateY(-1px) !important;
}

.avatar-crop-btn:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Mobile Adjustments for Crop Modal */
@media (max-width: 500px) {
  .avatar-crop-card {
    max-width: 96% !important;
    border-radius: 20px !important;
  }

  .avatar-crop-stage {
    width: 270px !important;
    height: 270px !important;
  }

  .avatar-crop-cutout {
    width: 195px !important;
    height: 195px !important;
    border-radius: 34px !important;
  }

  .crop-corner.top-left {
    border-top-left-radius: 34px !important;
  }

  .crop-corner.top-right {
    border-top-right-radius: 34px !important;
  }

  .crop-corner.bottom-left {
    border-bottom-left-radius: 34px !important;
  }

  .crop-corner.bottom-right {
    border-bottom-right-radius: 34px !important;
  }
}

/* ============================================================
   PURPLE PERFECT THEMED PROFILE COVER CROPPING MODAL
   ============================================================ */
.cover-crop-backdrop {
  background: rgba(4, 2, 10, 0.82) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.cover-crop-card {
  width: 100% !important;
  max-width: 580px !important;
  background: linear-gradient(180deg, rgba(24, 16, 42, 0.98) 0%, rgba(14, 9, 26, 0.99) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.32) !important;
  box-shadow: 0 24px 64px -12px rgba(108, 0, 255, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: 'Inter', sans-serif !important;
  animation: modalScaleIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

body.light-theme .cover-crop-card {
  background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.24) !important;
  box-shadow: 0 24px 64px -12px rgba(124, 58, 237, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

/* Crop Modal Header */
.cover-crop-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 22px 14px 22px !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.14) !important;
}

body.light-theme .cover-crop-header {
  border-bottom-color: rgba(139, 92, 246, 0.12) !important;
}

.cover-crop-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.cover-crop-header-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(108, 0, 255, 0.25) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  color: #c084fc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.light-theme .cover-crop-header-icon {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.1) !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
}

.cover-crop-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  letter-spacing: -0.2px !important;
}

body.light-theme .cover-crop-title {
  color: #0f172a !important;
}

.cover-crop-subtitle {
  margin: 2px 0 0 0 !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

body.light-theme .cover-crop-subtitle {
  color: #64748b !important;
}

.cover-crop-close-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.light-theme .cover-crop-close-btn {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  color: #64748b !important;
}

.cover-crop-close-btn:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

/* Crop Stage Container */
.cover-crop-stage-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 16px 20px 10px 20px !important;
}

.cover-crop-stage {
  position: relative !important;
  width: 500px !important;
  height: 260px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #080412 !important;
  cursor: grab !important;
  user-select: none !important;
  touch-action: none !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6) !important;
}

.cover-crop-stage:active {
  cursor: grabbing !important;
}

body.light-theme .cover-crop-stage {
  background: #120b24 !important;
  border-color: rgba(139, 92, 246, 0.25) !important;
}

#cover-crop-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Nexter Signature 6:1 Widescreen Cutout Mask */
.cover-crop-mask-overlay {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cover-crop-cutout {
  position: relative !important;
  width: 450px !important;
  height: 75px !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 9999px rgba(8, 4, 18, 0.72), 0 0 24px rgba(168, 85, 247, 0.45), inset 0 0 16px rgba(168, 85, 247, 0.15) !important;
  border: 2px solid #a855f7 !important;
}

body.light-theme .cover-crop-cutout {
  box-shadow: 0 0 0 9999px rgba(12, 8, 24, 0.65), 0 0 24px rgba(124, 58, 237, 0.45), inset 0 0 16px rgba(124, 58, 237, 0.15) !important;
  border-color: #8b5cf6 !important;
}

.cover-crop-cutout .crop-corner.top-left {
  border-top-left-radius: 12px !important;
}

.cover-crop-cutout .crop-corner.top-right {
  border-top-right-radius: 12px !important;
}

.cover-crop-cutout .crop-corner.bottom-left {
  border-bottom-left-radius: 12px !important;
}

.cover-crop-cutout .crop-corner.bottom-right {
  border-bottom-right-radius: 12px !important;
}

.cover-crop-cutout .crop-grid-lines {
  border-radius: 12px !important;
}

.cover-crop-hint {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
  font-size: 11.5px !important;
  color: rgba(168, 85, 247, 0.85) !important;
  font-weight: 500 !important;
}

body.light-theme .cover-crop-hint {
  color: #7c3aed !important;
}

/* Controls Toolbar */
.cover-crop-controls {
  padding: 8px 22px 14px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.cover-crop-zoom-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.cover-crop-aux-group {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* Footer Buttons */
.cover-crop-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 14px 22px 18px 22px !important;
  border-top: 1px solid rgba(168, 85, 247, 0.14) !important;
}

body.light-theme .cover-crop-footer {
  border-top-color: rgba(139, 92, 246, 0.12) !important;
}

.cover-crop-btn {
  padding: 9px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', sans-serif !important;
}

.cover-crop-btn.secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .cover-crop-btn.secondary {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.cover-crop-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

body.light-theme .cover-crop-btn.secondary:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

.cover-crop-btn.primary {
  background: linear-gradient(135deg, #7c3aed 0%, #6c00ff 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.45) !important;
}

.cover-crop-btn.primary:hover {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  box-shadow: 0 6px 22px rgba(108, 0, 255, 0.6) !important;
  transform: translateY(-1px) !important;
}

.cover-crop-btn:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Mobile Adjustments for Cover Crop Modal */
@media (max-width: 540px) {
  .cover-crop-card {
    max-width: 96% !important;
    border-radius: 20px !important;
  }

  .cover-crop-stage {
    width: 320px !important;
    height: 180px !important;
  }

  .cover-crop-cutout {
    width: 288px !important;
    height: 48px !important;
    border-radius: 8px !important;
  }

  .cover-crop-cutout .crop-corner.top-left {
    border-top-left-radius: 8px !important;
  }

  .cover-crop-cutout .crop-corner.top-right {
    border-top-right-radius: 8px !important;
  }

  .cover-crop-cutout .crop-corner.bottom-left {
    border-bottom-left-radius: 8px !important;
  }

  .cover-crop-cutout .crop-corner.bottom-right {
    border-bottom-right-radius: 8px !important;
  }

  .cover-crop-cutout .crop-grid-lines {
    border-radius: 8px !important;
  }
}

/* ============================================================
   ABSOLUTE BAN ON HOVER/ACTIVE SCALE & SHIFT ON PROFILE/AVATAR
   ============================================================ */
#profile,
#profile *,
.profile-main-card,
.profile-main-card:hover,
.profile-cover-banner,
.profile-cover-banner:hover,
.profile-banner-edit-btn:hover,
.profile-avatar-center-container,
.profile-avatar-center-container:hover,
.profile-avatar-rounded-square,
.profile-avatar-rounded-square:hover,
.profile-avatar-rounded-square:active,
.profile-avatar-rounded-square img,
.profile-avatar-rounded-square img:hover,
.profile-hero-avatar-img,
.profile-hero-avatar-img:hover,
.profile-avatar-verified-badge-img,
.profile-avatar-verified-badge-img:hover,
.profile-avatar-wrap,
.profile-avatar-wrap:hover,
.profile-edit-avatar-square,
.profile-edit-avatar-square:hover,
.profile-edit-avatar-square:active,
.profile-tab-pill,
.profile-tab-pill:hover,
.profile-tab-pill:active,
.profile-action-btn,
.profile-action-btn:hover,
.profile-action-btn:active,
.profile-metric-card,
.profile-metric-card:hover,
.profile-badge-card,
.profile-badge-card:hover,
.profile-badge-card:hover *,
.profile-won-trade-card,
.profile-won-trade-card:hover,
.profile-won-trade-card:hover *,
.preset-avatar-item,
.preset-avatar-item:hover,
.preset-avatar-item:active,
.preset-avatar-item img,
.preset-avatar-item img:hover {
  transform: none !important;
}

/* ============================================================
   PURPLE CRYSTAL TRADING STREAK THEME & STYLES
   ============================================================ */

/* Header Streak Crystal Badge - Clean Floating Redesign */
.profile-streak-badge,
.profile-streak-crystal-badge,
.profile-header-actions .profile-streak-badge,
.profile-header-actions .profile-streak-crystal-badge {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease !important;
  user-select: none !important;
  text-decoration: none !important;
}

.profile-streak-badge:hover,
.profile-streak-crystal-badge:hover,
.profile-header-actions .profile-streak-badge:hover,
.profile-header-actions .profile-streak-crystal-badge:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1.5px) scale(1.06) !important;
}

body.light-theme .profile-streak-badge,
body.light-theme .profile-streak-crystal-badge,
body.light-theme .profile-header-actions .profile-streak-badge,
body.light-theme .profile-header-actions .profile-streak-crystal-badge {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 3D Crystal Icon - Larger & Floating */
.streak-crystal-header-icon,
#profile-main-streak-crystal-img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 8px rgba(168, 85, 247, 0.5)) !important;
  display: block !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease !important;
  animation: crystalBadgePulse 3.5s ease-in-out infinite !important;
}

.profile-streak-badge:hover .streak-crystal-header-icon,
.profile-streak-crystal-badge:hover .streak-crystal-header-icon,
.profile-streak-badge:hover #profile-main-streak-crystal-img,
.profile-streak-crystal-badge:hover #profile-main-streak-crystal-img {
  transform: scale(1.15) rotate(5deg) !important;
  filter: drop-shadow(0 6px 14px rgba(168, 85, 247, 0.75)) !important;
}

#leaderboard-popup-streak-crystal-img {
  width: 14px !important;
  height: 14px !important;
  animation: none !important;
  filter: none !important;
}

@keyframes crystalBadgePulse {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(-2px) rotate(2deg) scale(1.04);
  }
}

/* Streak Number in Vibrant Purple Gradient */
.profile-streak-badge .streak-count,
.profile-streak-crystal-badge .streak-count,
#profile-main-streak-count {
  font-family: 'Space Grotesk', 'Outfit', 'Inter', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.3px !important;
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 40%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block !important;
  filter: drop-shadow(0 2px 5px rgba(168, 85, 247, 0.3)) !important;
  transition: filter 0.2s ease !important;
}

body.light-theme .profile-streak-badge .streak-count,
body.light-theme .profile-streak-crystal-badge .streak-count,
body.light-theme #profile-main-streak-count {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 50%, #6366f1 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(147, 51, 234, 0.25)) !important;
}

.profile-streak-badge:hover .streak-count,
.profile-streak-crystal-badge:hover .streak-count {
  filter: drop-shadow(0 3px 8px rgba(168, 85, 247, 0.5)) !important;
}

/* Streak Sub-Screen Header */
.streak-page-header {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.streak-header-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.streak-header-level-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #c084fc !important;
  background: rgba(147, 51, 234, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  padding: 3px 9px !important;
  border-radius: 12px !important;
  letter-spacing: 0.3px !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}

body.light-theme .streak-header-level-badge {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
}

/* Container */
.streak-page-container {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 10px 16px 45px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

/* ================= 1. Crystal Hero Showcase Card ================= */
.streak-crystal-hero-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  padding: 26px 20px 20px 20px !important;
  text-align: center !important;
  background: linear-gradient(145deg, rgba(35, 12, 60, 0.75) 0%, rgba(18, 7, 34, 0.85) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.3) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

body.light-theme .streak-crystal-hero-card {
  background: linear-gradient(145deg, rgba(250, 245, 255, 0.95) 0%, rgba(243, 232, 255, 0.9) 100%) !important;
  border-color: rgba(147, 51, 234, 0.22) !important;
  box-shadow: 0 16px 40px rgba(124, 58, 237, 0.1), inset 0 1px 0 #ffffff !important;
}

.streak-crystal-aura-glow {
  position: absolute !important;
  top: -50px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 220px !important;
  height: 220px !important;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, rgba(147, 51, 234, 0.15) 50%, transparent 70%) !important;
  filter: blur(32px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Background Crystal Watermark: large duplicate, high opacity, upright, showing half on edge */
.streak-crystal-bg-watermark-wrap {
  position: absolute !important;
  top: -10px !important;
  right: -90px !important;
  width: 420px !important;
  height: 420px !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 0 !important;
  opacity: 0.30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

.streak-hero-bg-crystal-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

body.light-theme .streak-crystal-bg-watermark-wrap {
  opacity: 0.38 !important;
}

.streak-crystal-display-wrap {
  position: relative !important;
  width: 150px !important;
  height: 150px !important;
  margin: 0 auto 10px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1 !important;
}

.streak-page-crystal-img {
  width: 155px !important;
  height: 155px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 22px rgba(168, 85, 247, 0.75)) !important;
  animation: crystalHover 4s ease-in-out infinite !important;
  z-index: 2 !important;
  display: block !important;
}

@keyframes crystalHover {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(1.5deg);
  }
}

.streak-crystal-floating-ring {
  position: absolute !important;
  width: 105px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: none !important;
  bottom: 2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(ellipse at center, rgba(147, 51, 234, 0.4) 0%, rgba(147, 51, 234, 0.15) 45%, transparent 75%) !important;
  filter: blur(6px) !important;
  pointer-events: none !important;
  animation: crystalShadowGlow 4s ease-in-out infinite !important;
}

body.light-theme .streak-crystal-floating-ring {
  background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.24) 0%, rgba(147, 51, 234, 0.09) 45%, transparent 75%) !important;
  filter: blur(5px) !important;
}

@keyframes crystalShadowGlow {

  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.85;
  }

  50% {
    transform: translateX(-50%) scale(0.85);
    opacity: 0.5;
  }
}

.streak-crystal-tier-badge-wrap {
  margin-bottom: 6px !important;
  z-index: 1 !important;
  position: relative !important;
}

.streak-crystal-tier-pill {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.3) 0%, rgba(168, 85, 247, 0.15) 100%) !important;
  border: 1px solid rgba(192, 132, 252, 0.4) !important;
  color: #c084fc !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  font-family: 'Space Grotesk', sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.light-theme .streak-crystal-tier-pill {
  background: rgba(147, 51, 234, 0.1) !important;
  border-color: rgba(147, 51, 234, 0.3) !important;
  color: #7c3aed !important;
}

.streak-crystal-days-counter {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 4px 0 6px 0 !important;
  z-index: 1 !important;
  position: relative !important;
}

.streak-days-num {
  font-size: 52px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  background: linear-gradient(180deg, #ffffff 30%, #e9d5ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 30px rgba(168, 85, 247, 0.6) !important;
}

body.light-theme .streak-days-num {
  background: linear-gradient(180deg, #4c1d95 20%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.streak-days-text {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #a855f7 !important;
  letter-spacing: 1px !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Today's Streak Status & Countdown Timer */
/* Today's Streak Live Countdown Timer */
.streak-today-status-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 6px auto 14px auto !important;
  max-width: 420px !important;
  z-index: 1 !important;
  position: relative !important;
}

.streak-countdown-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(147, 51, 234, 0.12) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 24px !important;
  padding: 8px 18px !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.15) !important;
  transition: all 0.3s ease !important;
}

body.light-theme .streak-countdown-text {
  background: rgba(147, 51, 234, 0.08) !important;
  border-color: rgba(147, 51, 234, 0.25) !important;
  color: #1e293b !important;
}

.streak-countdown-clock-icon {
  color: #c084fc !important;
  flex-shrink: 0 !important;
}

body.light-theme .streak-countdown-clock-icon {
  color: #7e22ce !important;
}

.streak-countdown-text strong {
  font-variant-numeric: tabular-nums !important;
  color: #c084fc !important;
  font-weight: 800 !important;
  font-family: 'Space Grotesk', monospace !important;
  letter-spacing: 0.6px !important;
  font-size: 13px !important;
}

body.light-theme .streak-countdown-text strong {
  color: #7e22ce !important;
}

/* 30-Day Royal Radiant Champion Banner (Purple Themed) - ONLY visible once 30-Day milestone completed */
.streak-30day-banner {
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.5) 0%, rgba(126, 34, 206, 0.35) 50%, rgba(147, 51, 234, 0.4) 100%) !important;
  border: 1.5px solid rgba(192, 132, 252, 0.45) !important;
  border-radius: 22px !important;
  padding: 24px 20px 18px 20px !important;
  margin: 10px auto 16px auto !important;
  max-width: 420px !important;
  box-shadow: 0 10px 32px rgba(126, 34, 206, 0.3), 0 0 20px rgba(168, 85, 247, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
}

.streak-30day-banner.unlocked {
  display: flex !important;
}

body.light-theme .streak-30day-banner {
  background: linear-gradient(135deg, rgba(243, 232, 255, 0.95) 0%, rgba(233, 213, 255, 0.85) 100%) !important;
  border-color: rgba(147, 51, 234, 0.35) !important;
  box-shadow: 0 8px 24px rgba(147, 51, 234, 0.14) !important;
}

.streak-30day-crown-wrap {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 36px !important;
  margin-bottom: 8px !important;
}

.streak-30day-crown-img {
  position: absolute !important;
  top: -12px !important;
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 14px rgba(168, 85, 247, 0.7)) !important;
  animation: royalCrownFloat 3s ease-in-out infinite !important;
  z-index: 2 !important;
}

@keyframes royalCrownFloat {

  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }

  50% {
    transform: translateY(-5px) rotate(3deg);
  }
}

.streak-30day-username {
  font-size: 22px !important;
  font-weight: 800 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(192, 132, 252, 0.75) !important;
  line-height: 1.2 !important;
  z-index: 1 !important;
}

body.light-theme .streak-30day-username {
  color: #4c1d95 !important;
  text-shadow: none !important;
}

.streak-30day-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(168, 85, 247, 0.22) !important;
  border: 1px solid rgba(192, 132, 252, 0.4) !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  color: #f3e8ff !important;
  text-transform: uppercase !important;
  font-family: 'Space Grotesk', sans-serif !important;
  margin-bottom: 8px !important;
}

body.light-theme .streak-30day-badge-pill {
  background: rgba(147, 51, 234, 0.12) !important;
  border-color: rgba(147, 51, 234, 0.3) !important;
  color: #6b21a8 !important;
}

.streak-30day-desc {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  line-height: 1.5 !important;
  text-align: center !important;
  max-width: 360px !important;
  margin: 0 auto !important;
}

body.light-theme .streak-30day-desc {
  color: #581c87 !important;
}

.streak-crystal-next-hint {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  max-width: 420px !important;
  margin: 0 auto 16px auto !important;
  line-height: 1.45 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  z-index: 1 !important;
  position: relative !important;
}

body.light-theme .streak-crystal-next-hint {
  color: #475569 !important;
}

/* ================= 2. Crystal Evolution Timeline ================= */
.streak-evolution-timeline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  position: relative !important;
  z-index: 1 !important;
}

body.light-theme .streak-evolution-timeline {
  background: rgba(147, 51, 234, 0.05) !important;
  border-color: rgba(147, 51, 234, 0.15) !important;
}

.streak-evolution-node {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  z-index: 2 !important;
  transition: all 0.25s ease !important;
}

.evolution-node-icon-wrap {
  width: 50px !important;
  height: 50px !important;
  border-radius: 14px !important;
  background: rgba(147, 51, 234, 0.15) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

.evolution-node-icon-wrap img {
  width: 35px !important;
  height: 35px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.5)) !important;
  display: block !important;
}

.streak-evolution-node.active .evolution-node-icon-wrap {
  background: rgba(147, 51, 234, 0.35) !important;
  border-color: #c084fc !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.55) !important;
  transform: scale(1.05) !important;
}

.streak-evolution-node.locked .evolution-node-icon-wrap {
  opacity: 0.5 !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.light-theme .streak-evolution-node.locked .evolution-node-icon-wrap {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.evolution-node-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #e9d5ff !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

body.light-theme .evolution-node-label {
  color: #334155 !important;
}

.evolution-node-days {
  font-size: 10px !important;
  color: #a855f7 !important;
  font-weight: 600 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.streak-evolution-connector {
  flex: 1 !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 0 8px 24px 8px !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  position: relative !important;
}

body.light-theme .streak-evolution-connector {
  background: rgba(0, 0, 0, 0.06) !important;
}

.streak-evolution-connector-fill {
  height: 100% !important;
  width: 0% !important;
  background: linear-gradient(90deg, #a855f7, #c084fc) !important;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.6) !important;
  transition: width 0.5s ease !important;
}

/* ================= 3. FAQ Accordion: How Streak Milestones Work ================= */
.streak-crystal-info-card.streak-faq-accordion {
  background: linear-gradient(145deg, rgba(30, 10, 52, 0.65) 0%, rgba(18, 7, 34, 0.75) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.25) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

body.light-theme .streak-crystal-info-card.streak-faq-accordion {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 244, 255, 0.9) 100%) !important;
  border-color: rgba(147, 51, 234, 0.18) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.06) !important;
}

.streak-crystal-info-card.streak-faq-accordion:hover {
  border-color: rgba(192, 132, 252, 0.45) !important;
}

.streak-info-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background 0.2s ease !important;
  gap: 12px !important;
}

.streak-info-header:hover {
  background: rgba(168, 85, 247, 0.08) !important;
}

.streak-info-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
}

.streak-info-icon-badge {
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1.5px solid rgba(192, 132, 252, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #c084fc !important;
  flex-shrink: 0 !important;
}

body.light-theme .streak-info-icon-badge {
  background: rgba(147, 51, 234, 0.1) !important;
  color: #7c3aed !important;
  border-color: rgba(147, 51, 234, 0.25) !important;
}

.streak-info-heading-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.streak-info-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  letter-spacing: 0.2px !important;
}

body.light-theme .streak-info-title {
  color: #1e1b4b !important;
}

.streak-info-desc {
  display: none !important;
}

.streak-info-chevron-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #c084fc !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(168, 85, 247, 0.1) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease !important;
}

body.light-theme .streak-info-chevron-wrap {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.08) !important;
}

.streak-info-chevron {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: block !important;
}

.streak-faq-accordion.expanded .streak-info-chevron {
  transform: rotate(180deg) !important;
}

.streak-info-collapse-body {
  padding: 4px 18px 18px 18px !important;
  border-top: 1px solid rgba(168, 85, 247, 0.12) !important;
}

body.light-theme .streak-info-collapse-body {
  border-top-color: rgba(147, 51, 234, 0.1) !important;
}

.streak-info-steps-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.streak-info-step-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}

body.light-theme .streak-info-step-item {
  background: rgba(147, 51, 234, 0.04) !important;
  border-color: rgba(147, 51, 234, 0.1) !important;
}

.streak-step-number {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4) !important;
}

.streak-step-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.streak-step-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #e9d5ff !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

body.light-theme .streak-step-title {
  color: #3b0764 !important;
}

.streak-step-text {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

body.light-theme .streak-step-text {
  color: #475569 !important;
}

.streak-info-continuity-badge {
  margin-top: 12px !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.35 !important;
}

body.light-theme .streak-info-continuity-badge {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

/* ================= 4. Milestones & Rewards Cards ================= */
.streak-page-milestones-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 4px !important;
}

.streak-milestones-section-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 4px !important;
}

.streak-page-section-heading {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: 0.2px !important;
}

body.light-theme .streak-page-section-heading {
  color: #0f172a !important;
}

.streak-section-count-tag {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #c084fc !important;
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

body.light-theme .streak-section-count-tag {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.2) !important;
}

.streak-page-milestones-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 8px 10px 0 0 !important;
}

.streak-milestone-card {
  background: linear-gradient(145deg, rgba(28, 11, 48, 0.72) 0%, rgba(17, 7, 31, 0.82) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.25) !important;
  border-radius: 20px !important;
  padding: 16px 18px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  overflow: visible !important;
  margin-top: 22px !important;
}

body.light-theme .streak-milestone-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 244, 255, 0.92) 100%) !important;
  border-color: rgba(147, 51, 234, 0.18) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.06), inset 0 1px 0 #ffffff !important;
}

.streak-milestone-card:hover {
  border-color: rgba(192, 132, 252, 0.45) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 20px rgba(168, 85, 247, 0.2) !important;
}

.streak-milestone-card.achieved {
  border-color: rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 24px rgba(168, 85, 247, 0.25) !important;
}

.streak-milestone-card.claimed {
  border-color: rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(16, 185, 129, 0.15) !important;
}

/* 3D Corner Lock: Rotated, large size (58px), moved to top right corner, no shadow */
.streak-milestone-corner-lock {
  position: absolute !important;
  top: -38px !important;
  right: -28px !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.streak-corner-lock-img {
  width: 78px !important;
  height: 78px !important;
  object-fit: contain !important;
  filter: none !important;
  box-shadow: none !important;
  display: block !important;
  transform: rotate(14deg) !important;
}

.streak-milestone-top-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
}

.streak-milestone-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.streak-milestone-tier-icon {
  width: 50px !important;
  height: 50px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

body.light-theme .streak-milestone-tier-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.streak-milestone-tier-icon img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 10px rgba(168, 85, 247, 0.35)) !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}

.streak-milestone-card:hover .streak-milestone-tier-icon img {
  transform: scale(1.08) !important;
}

.streak-milestone-name {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 3px 0 !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.light-theme .streak-milestone-name {
  color: #0f172a !important;
}

.streak-milestone-vol-hint {
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

body.light-theme .streak-milestone-vol-hint {
  color: #64748b !important;
}

.streak-milestone-vol-hint strong {
  color: #c084fc !important;
  font-weight: 700 !important;
}

body.light-theme .streak-milestone-vol-hint strong {
  color: #7c3aed !important;
}

.streak-milestone-reward-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.streak-milestone-bonus-amount {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #10e271 !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 0 6px rgba(16, 226, 113, 0.25) !important;
  line-height: 1.1 !important;
}

body.light-theme .streak-milestone-bonus-amount {
  color: #00b848 !important;
  text-shadow: 0 0 4px rgba(0, 184, 72, 0.15) !important;
}

.streak-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: 0.3px !important;
}

.streak-status-badge.claimed {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.streak-status-badge.pending {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.streak-status-badge.achieved {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
}

.streak-status-badge.locked {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .streak-status-badge.locked {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #64748b !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.streak-status-lock-img {
  width: 13px !important;
  height: 13px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 3px rgba(168, 85, 247, 0.6)) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

/* Progress Track */
.streak-milestone-progress-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 2px !important;
}

.streak-milestone-progress-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11.5px !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}

.streak-progress-pct {
  color: #c084fc !important;
  font-weight: 700 !important;
}

body.light-theme .streak-progress-pct {
  color: #7c3aed !important;
}

.streak-progress-days {
  color: var(--text-primary, #ffffff) !important;
  font-weight: 700 !important;
}

.streak-milestone-track {
  height: 8px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  position: relative !important;
}

body.light-theme .streak-milestone-track {
  background: rgba(147, 51, 234, 0.08) !important;
  border-color: rgba(147, 51, 234, 0.12) !important;
}

.streak-milestone-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5) !important;
  transition: width 0.4s ease !important;
}

.streak-milestone-fill.complete {
  background: linear-gradient(90deg, #059669 0%, #10b981 100%) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5) !important;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  .streak-page-container {
    padding: 8px 12px 35px 12px !important;
    gap: 14px !important;
  }

  .streak-crystal-hero-card {
    padding: 22px 14px 18px 14px !important;
    border-radius: 22px !important;
  }

  .streak-crystal-display-wrap {
    width: 105px !important;
    height: 105px !important;
    margin-bottom: 6px !important;
  }

  .streak-page-crystal-img {
    width: 92px !important;
    height: 92px !important;
  }

  .streak-days-num {
    font-size: 42px !important;
  }

  .streak-days-text {
    font-size: 12px !important;
  }

  .streak-evolution-timeline {
    padding: 10px 10px !important;
  }

  .evolution-node-icon-wrap {
    width: 34px !important;
    height: 34px !important;
  }

  .evolution-node-icon-wrap img {
    width: 22px !important;
    height: 22px !important;
  }

  .evolution-node-label {
    font-size: 9.5px !important;
  }

  .evolution-node-days {
    font-size: 8.5px !important;
  }

  .streak-crystal-info-card.streak-faq-accordion {
    border-radius: 18px !important;
  }

  .streak-milestone-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .streak-milestone-bonus-amount {
    font-size: 18px !important;
  }

  .streak-crystal-bg-watermark-wrap {
    width: 320px !important;
    height: 320px !important;
    top: -10px !important;
    right: -90px !important;
  }
}

/* ======================================================================
   NEXTER VERTICAL DEBIT CARD SYSTEM (Custom CSS Design)
   Exact ID-1 dimensions: 53.98mm width x 85.60mm height (Ratio: 0.6306)
   ====================================================================== */

/* --- Card Stage & Aura --- */
.nexter-vertical-card-stage {
  position: relative !important;
  width: 240px !important;
  max-width: 100% !important;
  height: 380px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.nexter-vertical-card-stage.mobile-stage {
  width: 200px !important;
  height: 317px !important;
}

.vcard-ambient-aura {
  position: absolute !important;
  width: 220px !important;
  height: 340px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.35) 0%, rgba(124, 58, 237, 0.12) 50%, transparent 75%) !important;
  filter: blur(30px) !important;
  border-radius: 20px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* --- Vertical Card Body --- */
.nexter-vertical-card {
  position: relative !important;
  width: 240px !important;
  height: 380px !important;
  border-radius: 14px !important;
  background: linear-gradient(165deg, #24252a 0%, #17181c 45%, #0f1013 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.7), 0 8px 20px -4px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.22) !important;
  padding: 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 1 !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease !important;
  cursor: default !important;
}

.nexter-vertical-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 32px 64px -10px rgba(0, 0, 0, 0.8), 0 12px 28px -4px rgba(124, 58, 237, 0.35), inset 0 1px 1.5px rgba(255, 255, 255, 0.3) !important;
}

/* Frozen Card State */
.nexter-vertical-card.card-frozen {
  filter: grayscale(0.55) brightness(0.85) !important;
}

.nexter-vertical-card.card-frozen::after {
  content: 'FROZEN' !important;
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.18) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  backdrop-filter: blur(4px) !important;
}

/* Glass Reflection Sheen */
.vcard-gloss-sheen {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 45% !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%) !important;
  pointer-events: none !important;
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
}

/* Watermark: Nexter Logo + Italic "Nexter" in Corner */
.vcard-watermark {
  position: absolute !important;
  bottom: 70px !important;
  right: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  opacity: 0.18 !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 1 !important;
}

.vcard-watermark-icon {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain !important;
  display: block !important;
}

.vcard-watermark-text {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-style: italic !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

.dark-only {
  display: block !important;
}

.light-only {
  display: none !important;
}

body.light-theme .dark-only {
  display: none !important;
}

body.light-theme .light-only {
  display: block !important;
}

/* Top Section: Brand Lockup (Logo + Italic Nexter) & NFC/Chip */
.vcard-top-section {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
  z-index: 2 !important;
}

.vcard-brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-top: 2px !important;
  z-index: 2 !important;
}

.vcard-brand-icon {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

.vcard-brand-icon.dark-only {
  display: block !important;
}

.vcard-brand-icon.light-only {
  display: none !important;
}

body.light-theme .vcard-brand-icon.dark-only {
  display: none !important;
}

body.light-theme .vcard-brand-icon.light-only {
  display: block !important;
}

.vcard-brand-text {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

body.light-theme .vcard-brand-text {
  color: #000000 !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  font-style: normal !important;
}

.vcard-chip-nfc-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 2px !important;
}

.vcard-nfc-icon {
  width: 15px !important;
  height: 18px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.9 !important;
  display: block !important;
  transform: rotate(-90deg) !important;
}

.vcard-chip-img {
  width: 28px !important;
  height: 38px !important;
  object-fit: contain !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  filter: brightness(0) invert(1) !important;
  transform: none !important;
  display: block !important;
  margin-top: 2px !important;
}

body.light-theme .vcard-chip-img {
  filter: none !important;
}

/* Body Spacer */
.vcard-body-spacer {
  flex: 1 !important;
  min-height: 40px !important;
}

/* Bottom Section: Cardholder Name (Left) + VISA (Right) */
.vcard-bottom-section {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  width: 100% !important;
  z-index: 2 !important;
}

.vcard-holder-name {
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  letter-spacing: 0.2px !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 130px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.vcard-holder-first,
.vcard-holder-last {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.vcard-network-wrap {
  display: flex !important;
  align-items: flex-end !important;
  flex-shrink: 0 !important;
  padding-bottom: 2px !important;
}

.vcard-visa-logo {
  width: 48px !important;
  height: auto !important;
  filter: brightness(0) invert(1) !important;
  display: block !important;
  opacity: 0.96 !important;
}

/* --- Cards Hub Layout & Header --- */
#tab-claim-card {
  width: 100% !important;
  box-sizing: border-box !important;
}

#tab-claim-card.active-screen {
  min-height: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.nexter-card-hub-view {
  max-width: 960px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 20px 70px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 28px !important;
  box-sizing: border-box !important;
}

.nexter-card-hub-header {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

.nexter-card-hub-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  padding: 0 4px !important;
}

.nexter-title-brand {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px !important;
  color: #ffffff !important;
  line-height: 1 !important;
  display: inline-block !important;
}

body.light-theme .nexter-title-brand {
  color: #0f172a !important;
}

.nexter-title-calligraphy {
  font-family: 'Dancing Script', cursive !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.5px !important;
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block !important;
  padding: 2px 4px 4px 0 !important;
}

body.light-theme .nexter-title-calligraphy {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

@media (max-width: 640px) {
  .nexter-card-hub-header {
    gap: 6px !important;
    margin-bottom: 2px !important;
  }

  .nexter-card-hub-title {
    gap: 8px !important;
  }

  .nexter-title-brand {
    font-size: 30px !important;
    font-weight: 800 !important;
  }

  .nexter-title-calligraphy {
    font-size: 34px !important;
  }

  .nexter-card-hub-subtitle {
    font-size: 12.5px !important;
    max-width: 90% !important;
    line-height: 1.45 !important;
  }
}

/* Hero Center Showcase: Side-by-Side on Desktop (Card on Left, Status Panel on Right) */
.nexter-card-hero-showcase {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 52px !important;
  margin-top: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.nexter-card-hero-showcase .nexter-vertical-card-stage {
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.nexter-card-apply-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 18px !important;
  width: 380px !important;
  max-width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.nexter-card-apply-bar[style*="display: none"] {
  display: none !important;
}

.card-benefits-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.card-benefits-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.4) !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  width: fit-content !important;
}

body.light-theme .card-benefits-badge {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.35) !important;
  color: #ffffff !important;
}

.card-benefits-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: -0.3px !important;
}

body.light-theme .card-benefits-title {
  color: #0f172a !important;
}

.card-benefits-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.card-benefit-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.card-benefit-item:hover {
  background: rgba(168, 85, 247, 0.06) !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
}

body.light-theme .card-benefit-item {
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.light-theme .card-benefit-item:hover {
  background: rgba(147, 51, 234, 0.04) !important;
  border-color: rgba(147, 51, 234, 0.18) !important;
}

.benefit-gradient-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #c084fc 0%, #7c3aed 100%) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.6) !important;
  margin-top: 5px !important;
  flex-shrink: 0 !important;
}

.benefit-text-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.benefit-item-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

body.light-theme .benefit-item-title {
  color: #0f172a !important;
}

.benefit-item-desc {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #94a3b8 !important;
}

body.light-theme .benefit-item-desc {
  color: #64748b !important;
}

.nexter-card-apply-action-btn {
  width: 100% !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 0 24px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.nexter-card-apply-action-btn:hover {
  transform: translateY(-1px) scale(1.01) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.6) !important;
}

/* --- Redesigned Premium Owned / Applied Status (Clean Containerless Layout) --- */
.nexter-card-owned-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 380px !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.nexter-card-owned-bar[style*="display: none"] {
  display: none !important;
}

body.light-theme .nexter-card-owned-bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Status Badges */
.owned-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 7px 18px !important;
  border-radius: 9999px !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.1px !important;
  text-align: center !important;
  line-height: 1.3 !important;
  transition: all 0.25s ease !important;
}

/* DELIVERED STATUS BADGE:
   - NO purple dot
   - Text in WHITE
   - Background badge color: PURPLE GRADIENT
*/
.owned-status-pill.delivered {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45) !important;
  padding: 8px 22px !important;
}

.owned-status-pill.delivered .status-indicator-dot {
  display: none !important;
}

.owned-status-pill.delivered span,
.owned-status-pill.delivered #hub-owned-status-text {
  color: #ffffff !important;
}

body.light-theme .owned-status-pill.delivered {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35) !important;
}

body.light-theme .owned-status-pill.delivered .status-indicator-dot {
  display: none !important;
}

body.light-theme .owned-status-pill.delivered span,
body.light-theme .owned-status-pill.delivered #hub-owned-status-text {
  color: #ffffff !important;
}

/* Other Status Variants */
.owned-status-pill.pending {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #fbbf24 !important;
}

body.light-theme .owned-status-pill.pending {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #b45309 !important;
}

.owned-status-pill.shipping {
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

body.light-theme .owned-status-pill.shipping {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
  color: #2563eb !important;
}

.owned-status-pill.active {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #34d399 !important;
}

body.light-theme .owned-status-pill.active {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
  color: #059669 !important;
}

.status-indicator-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.owned-status-pill.pending .status-indicator-dot {
  background: #f59e0b !important;
  box-shadow: 0 0 8px #f59e0b !important;
}

.owned-status-pill.shipping .status-indicator-dot {
  background: #3b82f6 !important;
  box-shadow: 0 0 8px #3b82f6 !important;
}

.owned-status-pill.active .status-indicator-dot {
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
}

/* Status Description */
.owned-status-description {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 450 !important;
  color: #94a3b8 !important;
  text-align: center !important;
  line-height: 1.55 !important;
  margin: 14px 0 22px 0 !important;
  padding: 0 8px !important;
}

body.light-theme .owned-status-description {
  color: #475569 !important;
}

/* Action Buttons Group */
.owned-actions-group {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 12px !important;
  margin: 0 !important;
}

.btn-card-action {
  width: 100% !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 20px !important;
  border-radius: 14px !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  user-select: none !important;
  line-height: 1 !important;
}

/* Primary Button: Activate Card (Glowing Purple) */
.btn-card-activate {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.42) !important;
}

.btn-card-activate:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.52) !important;
}

/* Secondary Button: Deposit Funds */
.btn-card-deposit {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-weight: 600 !important;
}

.btn-card-deposit:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px) !important;
}

body.light-theme .btn-card-deposit {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .btn-card-deposit:hover {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}

/* When Card is Active, Deposit is Primary */
.owned-status-pill.active~.owned-actions-group .btn-card-deposit {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.42) !important;
}

/* --- Premium Debit Card Activation Modal --- */
.nexter-activation-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(4, 6, 12, 0.78) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.nexter-activation-modal-overlay.active {
  display: flex !important;
  animation: modalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.nexter-activation-card {
  position: relative !important;
  width: 100% !important;
  max-width: 380px !important;
  background: linear-gradient(180deg, #181922 0%, #121319 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  padding: 30px 24px 24px 24px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(168, 85, 247, 0.15) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  animation: cardPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes cardPopIn {
  from {
    transform: scale(0.94) translateY(10px);
    opacity: 0;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

body.light-theme .nexter-activation-card {
  background: #ffffff !important;
  border: 1px solid rgba(124, 58, 237, 0.16) !important;
  box-shadow: 0 25px 60px rgba(124, 58, 237, 0.12), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.activation-modal-close-btn {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-muted, #94a3b8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.activation-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

body.light-theme .activation-modal-close-btn {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #64748b !important;
}

body.light-theme .activation-modal-close-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.activation-modal-badge-wrap {
  position: relative !important;
  margin-bottom: 16px !important;
}

.activation-badge-glow {
  position: absolute !important;
  inset: -10px !important;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%) !important;
  filter: blur(12px) !important;
  pointer-events: none !important;
}

.activation-badge-circle {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(124, 58, 237, 0.35) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #c084fc !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3) !important;
}

body.light-theme .activation-badge-circle {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(124, 58, 237, 0.22) 100%) !important;
  color: #7c3aed !important;
  border-color: rgba(124, 58, 237, 0.35) !important;
}

.activation-modal-header {
  text-align: center !important;
  margin-bottom: 20px !important;
}

.activation-modal-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.3px !important;
}

body.light-theme .activation-modal-title {
  color: #0f172a !important;
}

.activation-modal-desc {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 13px !important;
  color: var(--text-muted, #94a3b8) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

body.light-theme .activation-modal-desc {
  color: #64748b !important;
}

.activation-bonus-pill {
  display: inline-block !important;
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  padding: 1px 7px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

.activation-modal-form {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.activation-input-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.activation-input-label {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--text-muted, #94a3b8) !important;
  text-align: center !important;
}

body.light-theme .activation-input-label {
  color: #64748b !important;
}

.activation-code-field {
  width: 100% !important;
  height: 54px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 14px !important;
  font-family: 'Space Grotesk', monospace !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: 12px !important;
  text-align: center !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
  transition: all 0.22s ease !important;
  outline: none !important;
}

.activation-code-field:focus {
  border-color: #a855f7 !important;
  background: rgba(168, 85, 247, 0.08) !important;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.22) !important;
}

body.light-theme .activation-code-field {
  background: #f8fafc !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
  color: #0f172a !important;
}

body.light-theme .activation-code-field:focus {
  border-color: #7c3aed !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18) !important;
}

.activation-input-hint {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  color: var(--text-muted, #94a3b8) !important;
}

body.light-theme .activation-input-hint {
  color: #64748b !important;
}

.activation-actions-row {
  display: flex !important;
  gap: 12px !important;
  width: 100% !important;
}

.btn-activation-cancel {
  flex: 1 !important;
  padding: 13px 16px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-muted, #94a3b8) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-activation-cancel:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

body.light-theme .btn-activation-cancel {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
}

body.light-theme .btn-activation-cancel:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.btn-activation-submit {
  flex: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 18px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
  border: 1px solid rgba(216, 180, 254, 0.35) !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-activation-submit:hover {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.5) !important;
}

/* --- Mobile Slider Slide 2 Adaptations --- */
.mobile-nexter-card-wrapper {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: 4px 6px !important;
}

.mobile-card-apply-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: rgba(147, 51, 234, 0.1) !important;
  border: 1px solid rgba(168, 85, 247, 0.28) !important;
  border-radius: 12px !important;
  padding: 9px 14px !important;
  width: 230px !important;
  max-width: 90% !important;
  box-sizing: border-box !important;
  margin-top: 14px !important;
}

.mobile-card-apply-bar[style*="display: none"] {
  display: none !important;
}

.mobile-card-apply-text {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
}

.mobile-card-apply-btn {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 7px 16px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(216, 180, 254, 0.35) !important;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.4) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.mobile-card-owned-actions {
  display: flex !important;
  width: 230px !important;
  max-width: 90% !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.mobile-card-owned-actions[style*="display: none"] {
  display: none !important;
}

.mobile-card-owned-btn {
  flex: 1 !important;
  padding: 10px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: rgba(147, 51, 234, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  text-align: center !important;
}

/* --- Responsive Queries --- */
@media (min-width: 769px) {
  #dashboard-visa-card-panel {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .nexter-card-hub-view {
    padding: 16px 14px calc(140px + env(safe-area-inset-bottom, 20px)) 14px !important;
    gap: 22px !important;
  }

  .nexter-card-hub-title {
    font-size: 22px !important;
  }

  .nexter-card-hub-subtitle {
    font-size: 12.5px !important;
  }

  .nexter-card-hero-showcase {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
  }

  .nexter-card-owned-bar {
    width: 100% !important;
    max-width: 350px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .nexter-card-apply-bar {
    width: 100% !important;
    max-width: 350px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 16px !important;
  }
}

/* --- Mobile Stage Vertical Card Dimensions (Exact 53.98mm x 85.60mm ratio) --- */
.mobile-stage .nexter-vertical-card {
  width: 200px !important;
  height: 317px !important;
  border-radius: 12px !important;
  padding: 18px 16px !important;
}

.mobile-stage .vcard-ambient-aura {
  width: 180px !important;
  height: 280px !important;
}

.mobile-stage .vcard-brand-lockup {
  gap: 6px !important;
}

.mobile-stage .vcard-brand-icon {
  width: 18px !important;
  height: 18px !important;
}

.mobile-stage .vcard-brand-text {
  font-size: 16px !important;
  font-style: normal !important;
}

.mobile-stage .vcard-chip-img {
  width: 24px !important;
  height: 32px !important;
  box-shadow: none !important;
  filter: brightness(0) invert(1) !important;
  transform: none !important;
  margin-top: 2px !important;
}

body.light-theme .mobile-stage .vcard-chip-img {
  filter: none !important;
}

.mobile-stage .vcard-nfc-icon {
  width: 13px !important;
  height: 16px !important;
}

.mobile-stage .vcard-holder-name {
  font-size: 13.5px !important;
  max-width: 105px !important;
}

.mobile-stage .vcard-visa-logo {
  width: 40px !important;
}

/* --- Light Theme Support (Matches Reference Image 1 Frosted Platinum) --- */
body.light-theme .nexter-vertical-card {
  background: linear-gradient(165deg, #f8fafc 0%, #edf1f6 45%, #dce2ea 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.16), 0 6px 16px -4px rgba(0, 0, 0, 0.08), inset 0 1px 1.5px rgba(255, 255, 255, 0.95) !important;
}

body.light-theme .vcard-gloss-sheen {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%) !important;
}

body.light-theme .vcard-holder-name {
  color: #0f172a !important;
}

body.light-theme .vcard-nfc-icon {
  filter: none !important;
  opacity: 0.85 !important;
  transform: rotate(-90deg) !important;
}

body.light-theme .vcard-visa-logo {
  filter: none !important;
  opacity: 1 !important;
}

body.light-theme .nexter-card-hub-title {
  color: #0f172a !important;
}

body.light-theme .nexter-card-hub-subtitle {
  color: #64748b !important;
}

body.light-theme .nexter-card-apply-bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.light-theme .mobile-card-apply-bar {
  background: rgba(147, 51, 234, 0.08) !important;
  border-color: rgba(147, 51, 234, 0.2) !important;
}

body.light-theme .mobile-card-apply-text {
  color: #0f172a !important;
}

/* ==========================================================================
   REDESIGNED KYC VERIFICATION (FULL PAGE VIEW & PURPLE THEME)
   ========================================================================== */

/* Full Page Wrapper Overriding Modal Appearance */
.kyc-modal-wrap.kyc-page-view {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #07090e !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 24px 16px 60px !important;
  display: none;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

body.light-theme .kyc-modal-wrap.kyc-page-view {
  background: #f8fafc !important;
}

/* Page Container (Max width for luxury layout) */
.kyc-page-container {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* Topbar with Back button & Header Badge */
.kyc-page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0 14px;
  border-bottom: none !important;
}

body.light-theme .kyc-page-topbar {
  border-bottom: none !important;
}

.kyc-page-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 8px 18px;
  color: #ffffff;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kyc-page-back-btn:hover {
  background: rgba(147, 51, 234, 0.15);
  border-color: rgba(147, 51, 234, 0.4);
  color: #c084fc;
  transform: translateX(-2px);
}

body.light-theme .kyc-page-back-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #0f172a;
}

body.light-theme .kyc-page-back-btn:hover {
  background: rgba(147, 51, 234, 0.1);
  border-color: rgba(147, 51, 234, 0.3);
  color: #7c3aed;
}

/* Hero Badge: Vibrant purple gradient, white text in ALL themes, NO LIGHT THEME OVERRIDE */
.kyc-page-hero-badge,
body.light-theme .kyc-page-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 16px !important;
  border-radius: 9999px !important;
  background-color: #7c3aed !important;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  background-image: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Page Title Section */
.kyc-page-title-box {
  text-align: center;
  padding: 10px 0 6px;
}

.kyc-page-heading {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

body.light-theme .kyc-page-heading {
  color: #0f172a;
}

.kyc-heading-accent {
  color: #c084fc !important;
  font-weight: 800;
  display: inline;
  text-shadow: 0 0 25px rgba(168, 85, 247, 0.45);
}

body.light-theme .kyc-heading-accent {
  color: #7c3aed !important;
  text-shadow: none;
}

.kyc-page-subheading {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 500px;
}

body.light-theme .kyc-page-subheading {
  color: #64748b;
}

/* Stepper Indicator (No dots, sleek purple gradient active states) */
.kyc-modal-wrap.kyc-page-view .kyc-steps-container {
  padding: 8px 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.kyc-modal-wrap.kyc-page-view .kyc-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  cursor: pointer;
}

.kyc-modal-wrap.kyc-page-view .kyc-step-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 700;
  color: #64748b;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.light-theme .kyc-modal-wrap.kyc-page-view .kyc-step-dot {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #94a3b8;
}

.kyc-modal-wrap.kyc-page-view .kyc-step-dot.active {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.5) !important;
  transform: scale(1.08);
}

.kyc-modal-wrap.kyc-page-view .kyc-step-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

body.light-theme .kyc-modal-wrap.kyc-page-view .kyc-step-label {
  color: #94a3b8;
}

.kyc-modal-wrap.kyc-page-view .kyc-step-label.active {
  color: #c084fc !important;
  font-weight: 700;
}

body.light-theme .kyc-modal-wrap.kyc-page-view .kyc-step-label.active {
  color: #7c3aed !important;
}

.kyc-modal-wrap.kyc-page-view .kyc-progress-line {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 12px;
  margin-bottom: 22px;
  transition: all 0.3s ease;
}

body.light-theme .kyc-modal-wrap.kyc-page-view .kyc-progress-line {
  background: rgba(0, 0, 0, 0.08);
}

.kyc-modal-wrap.kyc-page-view .kyc-progress-line.active {
  background: linear-gradient(90deg, #9333ea, #7c3aed) !important;
  box-shadow: 0 0 10px rgba(147, 51, 234, 0.5);
}

/* Main KYC Page Card */
.kyc-page-card {
  background: rgba(17, 22, 33, 0.75);
  border: 1px solid rgba(147, 51, 234, 0.22);
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 35px rgba(124, 58, 237, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: 100%;
  box-sizing: border-box;
}

body.light-theme .kyc-page-card {
  background: #ffffff;
  border-color: rgba(147, 51, 234, 0.2);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06), 0 0 25px rgba(124, 58, 237, 0.06);
}

/* Step Headers inside form */
.kyc-step-header {
  margin-bottom: 24px;
}

.kyc-step-heading {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

body.light-theme .kyc-step-heading {
  color: #0f172a;
}

.kyc-step-subheading {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
}

body.light-theme .kyc-step-subheading {
  color: #64748b;
}

/* Country Detection Badge: NO DOT, Solid/Gradient Purple */
.kyc-detect-wrap {
  margin-top: 8px;
  display: flex;
}

.kyc-country-detect-badge,
.kyc-env-badge,
#kyc-country-detect-msg,
body.light-theme .kyc-country-detect-badge,
body.light-theme .kyc-env-badge,
body.light-theme #kyc-country-detect-msg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  background-color: #7c3aed !important;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  background-image: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Inputs & Custom Select */
.kyc-modal-wrap.kyc-page-view .kyc-text-input,
.kyc-modal-wrap.kyc-page-view .custom-select-trigger {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  height: 48px;
  padding: 0 16px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

body.light-theme .kyc-modal-wrap.kyc-page-view .kyc-text-input,
body.light-theme .kyc-modal-wrap.kyc-page-view .custom-select-trigger {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

.kyc-modal-wrap.kyc-page-view .kyc-text-input:focus,
.kyc-modal-wrap.kyc-page-view .custom-select-trigger.active {
  border-color: #9333ea !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.25) !important;
  outline: none !important;
}

.kyc-modal-wrap.kyc-page-view .kyc-label {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 7px;
  display: block;
}

body.light-theme .kyc-modal-wrap.kyc-page-view .kyc-label {
  color: #334155;
}

.kyc-required-star {
  color: #f43f5e;
  font-weight: 700;
  margin-left: 2px;
}

.kyc-optional-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  margin-left: 4px;
}

/* Two-column Input Row */
.kyc-input-row {
  display: flex;
  gap: 14px;
}

.kyc-input-col {
  flex: 1;
}

@media (max-width: 540px) {
  .kyc-input-row {
    flex-direction: column;
    gap: 16px;
  }
}

/* Tips Box (Purple Glass) */
.kyc-modal-wrap.kyc-page-view .kyc-tips-box {
  background: rgba(147, 51, 234, 0.08) !important;
  border: 1px solid rgba(147, 51, 234, 0.25) !important;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

body.light-theme .kyc-modal-wrap.kyc-page-view .kyc-tips-box {
  background: rgba(147, 51, 234, 0.05) !important;
  border-color: rgba(147, 51, 234, 0.2) !important;
}

.kyc-modal-wrap.kyc-page-view .kyc-tips-icon {
  color: #c084fc !important;
  flex-shrink: 0;
}

body.light-theme .kyc-modal-wrap.kyc-page-view .kyc-tips-icon {
  color: #7c3aed !important;
}

.kyc-modal-wrap.kyc-page-view .kyc-tips-text {
  font-size: 13px;
  color: #e2e8f0;
  line-height: 1.5;
}

body.light-theme .kyc-modal-wrap.kyc-page-view .kyc-tips-text {
  color: #334155;
}

/* Upload Dropzones */
.kyc-modal-wrap.kyc-page-view .kyc-upload-zone {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 2px dashed rgba(147, 51, 234, 0.3) !important;
  border-radius: 16px !important;
  padding: 24px 16px !important;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kyc-modal-wrap.kyc-page-view .kyc-upload-zone:hover {
  border-color: #a855f7 !important;
  background: rgba(147, 51, 234, 0.05) !important;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.15);
}

body.light-theme .kyc-modal-wrap.kyc-page-view .kyc-upload-zone {
  background: rgba(147, 51, 234, 0.02) !important;
  border-color: rgba(147, 51, 234, 0.25) !important;
}

.kyc-upload-icon-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(147, 51, 234, 0.15);
  color: #c084fc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  border: 1px solid rgba(147, 51, 234, 0.3);
}

body.light-theme .kyc-upload-icon-circle {
  color: #7c3aed;
  background: rgba(147, 51, 234, 0.08);
}

.kyc-upload-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 3px;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
}

body.light-theme .kyc-upload-title {
  color: #0f172a;
}

.kyc-upload-subtitle {
  font-size: 12px;
  color: #64748b;
}

/* ================= BIOMETRIC CAMERA VIEWPORT ================= */
.kyc-modal-wrap.kyc-page-view .kyc-camera-box {
  border-radius: 22px;
  overflow: hidden;
  border: 1.5px solid rgba(147, 51, 234, 0.35);
  background: #060813;
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 250px;
  margin: 0 auto 16px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6), inset 0 0 24px rgba(124, 58, 237, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.light-theme .kyc-modal-wrap.kyc-page-view .kyc-camera-box {
  background: #f1f5f9;
  border-color: rgba(147, 51, 234, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.kyc-modal-wrap.kyc-page-view .kyc-camera-box.has-error .kyc-camera-guide {
  display: none !important;
}

.kyc-video-feed {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: block;
}

.kyc-selfie-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Face Oval Guide Overlay */
.kyc-camera-guide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.kyc-camera-guide-oval {
  width: 150px;
  height: 195px;
  border: 2px dashed rgba(192, 132, 252, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(147, 51, 234, 0.4), inset 0 0 20px rgba(147, 51, 234, 0.2);
}

.kyc-camera-guide-text {
  font-size: 11px;
  color: #e9d5ff;
  font-weight: 600;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  margin-top: 6px;
  background: rgba(15, 10, 30, 0.8);
  padding: 3px 12px;
  border-radius: 12px;
  border: 1px solid rgba(147, 51, 234, 0.3);
  backdrop-filter: blur(4px);
  letter-spacing: 0.2px;
}

/* Camera Live Status Badge */
.kyc-camera-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(15, 10, 30, 0.85);
  border: 1px solid rgba(147, 51, 234, 0.4);
  color: #c084fc;
  backdrop-filter: blur(8px);
}

.kyc-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: kycPulseDot 1.5s infinite;
}

@keyframes kycPulseDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

/* Sleek Fallback Card when Live Cam is Unavailable */
.kyc-camera-error-box {
  position: absolute;
  inset: 0;
  padding: 16px 20px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 3;
  background: radial-gradient(circle at center, rgba(147, 51, 234, 0.12) 0%, rgba(10, 13, 22, 0.96) 75%);
}

body.light-theme .kyc-camera-error-box {
  background: radial-gradient(circle at center, rgba(147, 51, 234, 0.08) 0%, #ffffff 80%);
}

.kyc-camera-error-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(147, 51, 234, 0.15);
  border: 1px solid rgba(147, 51, 234, 0.35);
  color: #c084fc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.25);
}

body.light-theme .kyc-camera-error-icon {
  color: #7c3aed;
  background: rgba(147, 51, 234, 0.1);
}

.kyc-camera-error-text {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

body.light-theme .kyc-camera-error-text {
  color: #0f172a;
}

.kyc-camera-error-sub {
  font-size: 11.5px;
  color: #94a3b8;
  max-width: 230px;
  line-height: 1.4;
  margin-bottom: 12px;
}

body.light-theme .kyc-camera-error-sub {
  color: #64748b;
}

.kyc-camera-fallback-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.kyc-camera-fallback-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.5);
}

/* Camera Action Buttons (Take Live Photo / Retake) */
.kyc-camera-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  width: 100%;
}

.kyc-camera-actions button {
  height: 42px;
  padding: 0 20px;
  border-radius: 21px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

/* Fallback Upload Box */
.kyc-selfie-fallback-zone {
  position: relative;
  border: 1.5px dashed rgba(147, 51, 234, 0.3);
  border-radius: 12px;
  background: rgba(147, 51, 234, 0.03);
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.kyc-selfie-fallback-zone:hover {
  border-color: #a855f7;
  background: rgba(147, 51, 234, 0.08);
}

.kyc-selfie-fallback-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kyc-upload-icon-circle-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(147, 51, 234, 0.15);
  color: #c084fc;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(147, 51, 234, 0.3);
  flex-shrink: 0;
}

.kyc-selfie-fallback-text {
  font-size: 12.5px;
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
}

body.light-theme .kyc-selfie-fallback-text {
  color: #64748b;
}

/* ================= ACTIONS ROW (BACK & PRIMARY BUTTONS) ================= */
/* Strictly single row, no awkward context wrapping */
.kyc-actions-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 22px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.kyc-actions-row .kyc-btn-secondary {
  flex: 0 0 auto !important;
  min-width: 80px !important;
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.kyc-actions-row .kyc-btn-secondary:hover {
  background: rgba(147, 51, 234, 0.12) !important;
  border-color: rgba(147, 51, 234, 0.35) !important;
  color: #c084fc !important;
}

body.light-theme .kyc-actions-row .kyc-btn-secondary {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}

body.light-theme .kyc-actions-row .kyc-btn-secondary:hover {
  background: rgba(147, 51, 234, 0.08) !important;
  border-color: rgba(147, 51, 234, 0.3) !important;
  color: #7c3aed !important;
}

.kyc-actions-row .kyc-btn-primary {
  flex: 1 1 auto !important;
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35) !important;
  transition: all 0.2s ease !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.kyc-actions-row .kyc-btn-primary:hover {
  background: linear-gradient(135deg, #b066f8 0%, #8b46ff 100%) !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5) !important;
  transform: translateY(-1px) !important;
}

.kyc-actions-row .kyc-btn-primary svg,
.kyc-actions-row .kyc-btn-secondary svg {
  flex-shrink: 0 !important;
}

/* ================= FOOTER TRUST BADGES ================= */
.kyc-footer-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
}

.kyc-trust-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  background: rgba(147, 51, 234, 0.1) !important;
  border: 1px solid rgba(147, 51, 234, 0.25) !important;
  color: #c084fc !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12) !important;
  white-space: nowrap !important;
}

body.light-theme .kyc-trust-badge {
  background: rgba(147, 51, 234, 0.07) !important;
  border-color: rgba(147, 51, 234, 0.2) !important;
  color: #7c3aed !important;
}

.kyc-trust-svg {
  color: inherit;
  flex-shrink: 0;
}

/* ================= MOBILE OPTIMIZATIONS ================= */
@media (max-width: 540px) {
  .kyc-modal-wrap.kyc-page-view {
    padding: 12px 10px 48px !important;
  }

  .kyc-page-container {
    gap: 14px !important;
  }

  .kyc-page-topbar {
    padding: 4px 0 10px !important;
  }

  .kyc-page-card {
    padding: 20px 14px !important;
    border-radius: 18px !important;
  }

  .kyc-page-heading {
    font-size: 22px !important;
    letter-spacing: -0.3px !important;
  }

  .kyc-page-subheading {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  .kyc-steps-container {
    padding: 4px 6px 10px !important;
  }

  .kyc-step-dot {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }

  .kyc-step-label {
    font-size: 10px !important;
  }

  .kyc-tips-box {
    padding: 10px 12px !important;
    margin-bottom: 16px !important;
    border-radius: 12px !important;
    gap: 10px !important;
  }

  .kyc-tips-text {
    font-size: 11.5px !important;
  }

  .kyc-upload-zone {
    padding: 16px 12px !important;
  }

  .kyc-upload-icon-circle {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 6px !important;
  }

  .kyc-upload-title {
    font-size: 13px !important;
  }

  .kyc-upload-subtitle {
    font-size: 11px !important;
  }

  .kyc-camera-box {
    max-width: 280px !important;
    height: 230px !important;
    margin-bottom: 12px !important;
  }

  .kyc-camera-guide-oval {
    width: 135px !important;
    height: 175px !important;
  }

  .kyc-actions-row {
    gap: 8px !important;
    margin-top: 18px !important;
  }

  .kyc-actions-row .kyc-btn-secondary {
    min-width: 72px !important;
    height: 42px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  .kyc-actions-row .kyc-btn-primary {
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  .kyc-footer-badges {
    gap: 6px !important;
  }

  .kyc-trust-badge {
    padding: 4px 10px !important;
    font-size: 10.5px !important;
  }
}

/* ============================================================
   KYC STATUS CARD & COMPLETED STATE (PURPLE DESIGN, DARK & LIGHT)
   ============================================================ */
#kyc-status-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 10px 0 6px !important;
}

.kyc-verified-hero-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* 3D Certificate Icon and Glowing Purple Aura */
.kyc-verified-icon-aura {
  position: relative !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.kyc-verified-glow-circle {
  position: absolute !important;
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, rgba(108, 0, 255, 0.15) 55%, transparent 70%) !important;
  filter: blur(24px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: kycAuraPulse 3s ease-in-out infinite alternate !important;
}

body.light-theme .kyc-verified-glow-circle {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(124, 58, 237, 0.12) 55%, transparent 70%) !important;
  filter: blur(20px) !important;
}

@keyframes kycAuraPulse {
  0% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

.kyc-verified-3d-img {
  width: 145px !important;
  height: 145px !important;
  object-fit: contain !important;
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(0 16px 32px rgba(108, 0, 255, 0.4)) !important;
  transform: none !important;
  animation: none !important;
}

.kyc-verified-hero-box:hover .kyc-verified-3d-img {
  transform: none !important;
}

/* Verified Status Tag Pill - Rich Nexter Purple Gradient */
.kyc-verified-tag,
body.light-theme .kyc-verified-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 22px !important;
  border-radius: 9999px !important;
  margin-bottom: 18px !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.5), 0 0 14px rgba(168, 85, 247, 0.35) !important;
}

.kyc-verified-check-svg {
  width: 15px !important;
  height: 15px !important;
  stroke: #ffffff !important;
  stroke-width: 3.2 !important;
}

/* Titles and Descriptions */
.kyc-verified-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.4px !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

body.light-theme .kyc-verified-title {
  color: #1e1b4b !important;
  text-shadow: none !important;
}

.kyc-verified-desc {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 auto 26px !important;
  max-width: 440px !important;
  color: #94a3b8 !important;
}

body.light-theme .kyc-verified-desc {
  color: #475569 !important;
}

/* 3 Unlocked Privilege Badges (Removed) */
.kyc-privilege-grid {
  display: none !important;
}

.kyc-privilege-item {
  display: none !important;
}

.kyc-privilege-item:hover {
  border-color: rgba(168, 85, 247, 0.45) !important;
  transform: translateY(-2px) !important;
}


/* Primary Done Button */
.kyc-verified-done-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 220px !important;
  height: 48px !important;
  border-radius: 24px !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
}

.kyc-verified-done-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
}

.kyc-verified-done-btn:active {
  transform: scale(0.97) !important;
}

/* Generic KYC Status Classes for Pending & Rejected (so they also have perfect light/dark contrast) */
.kyc-status-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin: 0 0 8px 0 !important;
  color: #ffffff !important;
}

body.light-theme .kyc-status-title {
  color: #0f172a !important;
}

.kyc-status-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin: 0 auto !important;
  max-width: 400px !important;
  color: #94a3b8 !important;
}

body.light-theme .kyc-status-desc {
  color: #475569 !important;
}

/* Mobile Responsiveness for KYC Completed */
@media (max-width: 540px) {
  .kyc-verified-3d-img {
    width: 115px !important;
    height: 115px !important;
  }

  .kyc-verified-glow-circle {
    width: 120px !important;
    height: 120px !important;
  }

  .kyc-verified-title {
    font-size: 21px !important;
  }

  .kyc-verified-desc {
    font-size: 12.5px !important;
    margin-bottom: 18px !important;
  }


  .kyc-verified-done-btn {
    max-width: 100% !important;
    height: 46px !important;
  }
}

/* ============================================================
   NEXTER TRADING MOBILE DASHBOARD REDESIGN (Mobile Only)
   ============================================================ */

/* Hide Mobile Hero Container on Desktop View */
@media (min-width: 769px) {
  .mobile-dashboard-hero {
    display: none !important;
  }
}

/* Scoped Mobile Dashboard Styling */
@media (max-width: 768px) {

  /* Hide Desktop-Style Scrollbars on Mobile Viewports */
  ::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
  }

  body,
  html,
  .screen,
  #app-content,
  .app-content {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  /* Ensure Full-Width Mobile View with Zero Side Gaps */
  .app-container {
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  .app-main-column {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Hide Old Floating Top Bar on Mobile Dashboard */
  body[data-active-screen="dashboard"] #app-header,
  body:not([data-active-screen]) #app-header {
    display: none !important;
  }

  /* Remove outer app-content padding on Dashboard so hero touches screen edges flush */
  body[data-active-screen="dashboard"] .app-content,
  body:not([data-active-screen]) .app-content,
  .app-content:has(#tab-dashboard.active-screen) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Remove excessive outer app-content padding on History screen for full card width */
  body[data-active-screen="history"] .app-content,
  .app-content:has(#tab-history.active-screen) {
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* History Screen Mobile Padding (Zero Wasted Gaps) */
  #tab-history,
  #tab-history.active-screen {
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 4px !important;
    padding-bottom: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Reset Dashboard Screen Padding for Flush Edge-to-Edge Hero */
  #tab-dashboard,
  #tab-dashboard.active-screen {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 28px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
  }

  /* Hide Desktop Cards & Old Slider on Mobile */
  #tab-dashboard .balance-card-wrapper,
  #tab-dashboard #dashboard-visa-card-panel,
  #tab-dashboard #desktop-balance-card-placeholder,
  #tab-dashboard #desktop-visa-card-placeholder,
  #mobile-cards-slider {
    display: none !important;
  }

  /* Keep Standard Side Padding for Dashboard Content Below Hero */
  #tab-dashboard .dashboard-left-col,
  #tab-dashboard .dashboard-right-col {
    padding: 0 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* ──────────────────────────────────────────────────────────
     1. Seamless Full-Width Hero Container (Primary Purple Gradient)
     ────────────────────────────────────────────────────────── */
  .mobile-dashboard-hero {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    background: linear-gradient(135deg, #6c00ff 0%, #7d1ff0 42%, #8e38ff 78%, #4e00b8 100%) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 28px !important;
    border-bottom-right-radius: 28px !important;
    box-shadow: 0 16px 40px rgba(108, 0, 255, 0.35), 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    padding: max(env(safe-area-inset-top, 0px), 20px) 18px 38px 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Background Canvas (Clips Ambient Aura cleanly to rounded bottom corners) */
  .mobile-hero-bg-canvas {
    position: absolute !important;
    inset: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 28px !important;
    border-bottom-right-radius: 28px !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .mobile-hero-ambient-glow {
    position: absolute !important;
    top: -40px !important;
    right: -40px !important;
    width: 250px !important;
    height: 250px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, rgba(141, 61, 255, 0.14) 55%, transparent 75%) !important;
    pointer-events: none !important;
  }

  .mobile-hero-3d-coins {
    display: none !important;
  }

  /* Content Wrapper */
  .mobile-hero-content {
    position: relative !important;
    z-index: 2 !important;
  }

  /* ──────────────────────────────────────────────────────────
     2. Integrated Top Header Row (White Stroke Avatar & Badge, Clean White Bell)
     ────────────────────────────────────────────────────────── */
  .mobile-hero-top-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
  }

  .mobile-hero-user-cluster {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    user-select: none !important;
  }

  .mobile-hero-avatar-wrap {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }

  /* Avatar Circle: Clean Solid White Stroke Border on Dashboard */
  .mobile-hero-avatar-circle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    border: 2.5px solid #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
    box-sizing: border-box !important;
  }

  .mobile-hero-avatar-circle img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .mobile-hero-avatar-circle span {
    font-family: 'Space Grotesk', -apple-system, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1 !important;
  }

  /* Verification Badge with Sleek Delicate White Stroke */
  .mobile-hero-verified-badge {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 18px !important;
    height: 18px !important;
    filter: drop-shadow(0.75px 0 0 #ffffff) drop-shadow(-0.75px 0 0 #ffffff) drop-shadow(0 0.75px 0 #ffffff) drop-shadow(0 -0.75px 0 #ffffff) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }

  .mobile-hero-greeting-block {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    line-height: 1.25 !important;
  }

  .mobile-hero-welcome-sub {
    font-family: 'Outfit', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    letter-spacing: 0.2px !important;
  }

  .mobile-hero-username {
    font-family: 'Space Grotesk', -apple-system, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.2px !important;
    margin-top: 1px !important;
  }

  /* Notification Bell: White circular stroke container, pure solid white bell */
  .mobile-hero-bell-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-hero-bell-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: 1.8px solid #ffffff !important;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.45), 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
  }

  .mobile-hero-bell-btn:active {
    transform: scale(0.94) !important;
  }

  .mobile-hero-bell-btn .bell-3d-icon {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28)) !important;
  }

  /* Overlapped Badge on Mobile 3D Bell: True Circle, Perfectly Centered */
  .mobile-hero-bell-btn .bell-badge {
    position: absolute !important;
    top: -2px !important;
    right: 1px !important;
    z-index: 10 !important;
    background: linear-gradient(135deg, #ff2442 0%, #e11d48 100%) !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    min-width: 15px !important;
    height: 15px !important;
    border-radius: 999px !important;
    padding: 0 1px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.55), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    pointer-events: none !important;
    user-select: none !important;
    white-space: nowrap !important;
  }

  /* ──────────────────────────────────────────────────────────
     3. Hero Balance Section
     ────────────────────────────────────────────────────────── */
  .mobile-hero-balance-section {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .mobile-hero-balance-label-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 6px !important;
  }

  .mobile-hero-balance-label {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    text-transform: uppercase !important;
  }

  .mobile-hero-currency-badge {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
    padding: 2px 7px !important;
    font-family: var(--font-display) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.3px !important;
  }

  .mobile-hero-amount-row {
    margin-bottom: 4px !important;
  }

  .mobile-hero-balance-val {
    font-family: var(--font-display) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.8px !important;
    line-height: 1.1 !important;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    font-feature-settings: 'tnum' 1, 'lnum' 1 !important;
  }

  .mobile-hero-balance-status {
    margin-bottom: 4px !important;
  }

  .mobile-hero-status-text {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    letter-spacing: 0.1px !important;
  }

  /* ──────────────────────────────────────────────────────────
     4. Floating Action Buttons (Deposit & Withdrawal - Exactly Half In, Half Out)
     ────────────────────────────────────────────────────────── */
  .mobile-hero-actions-container {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(50%) !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }

  .mobile-hero-btn {
    flex: 1 1 0% !important;
    height: 48px !important;
    max-width: 175px !important;
    border-radius: 24px !important;
    font-family: 'Space Grotesk', -apple-system, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    cursor: pointer !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease !important;
    text-decoration: none !important;
    user-select: none !important;
  }

  .mobile-hero-btn:active {
    transform: scale(0.96) !important;
  }

  /* Deposit Button: Solid High-Contrast White */
  .mobile-hero-btn-deposit {
    background: #ffffff !important;
    color: #6c00ff !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(108, 0, 255, 0.2) !important;
  }

  .mobile-hero-btn-deposit svg {
    stroke: #6c00ff !important;
    color: #6c00ff !important;
  }

  .mobile-hero-btn-deposit span {
    color: #6c00ff !important;
    font-weight: 700 !important;
  }

  .mobile-hero-btn-deposit:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(108, 0, 255, 0.25) !important;
  }

  /* Withdrawal Button: Frosted Glass */
  .mobile-hero-btn-withdraw {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
  }

  .mobile-hero-btn-withdraw svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
  }

  .mobile-hero-btn-withdraw span {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
  }

  .mobile-hero-btn-withdraw:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
  }

  /* ──────────────────────────────────────────────────────────
     5. Mid Quick Action Row (Squares with Rounded Corners, Larger 3D Icons)
     ────────────────────────────────────────────────────────── */
  .dashboard-quick-links-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin-top: 48px !important;
    /* Clears the 50% half-overlapping buttons */
    margin-bottom: 22px !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.light-theme .dashboard-quick-links-row .quick-link-item,
  body:not(.light-theme) .dashboard-quick-links-row .quick-link-item,
  body .dashboard-quick-links-row .quick-link-item,
  .dashboard-quick-links-row .quick-link-item,
  #tab-dashboard .quick-link-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform 0.18s ease !important;
    border-radius: 0 !important;
  }

  body.light-theme .dashboard-quick-links-row .quick-link-item:hover,
  body:not(.light-theme) .dashboard-quick-links-row .quick-link-item:hover,
  body .dashboard-quick-links-row .quick-link-item:hover,
  .dashboard-quick-links-row .quick-link-item:hover,
  #tab-dashboard .quick-link-item:hover,
  .dashboard-quick-links-row .quick-link-item:active,
  .dashboard-quick-links-row .quick-link-item:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Square with Rounded Corners: Light mode is crisp white with purple border */
  body.light-theme .dashboard-quick-links-row .quick-link-circle,
  body.light-theme #tab-dashboard .quick-link-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1.8px solid transparent !important;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #c084fc 0%, #7c3aed 50%, #4f46e5 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow: 0 6px 20px rgba(108, 0, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 8px !important;
    transition: none !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Dark mode: 4 icons shift to Purple Gradient with luminous stroke */
  body:not(.light-theme) #tab-dashboard .quick-link-circle,
  body:not(.light-theme) .dashboard-quick-links-row .quick-link-circle,
  .dashboard-quick-links-row .quick-link-circle,
  #tab-dashboard .quick-link-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #2b134f 0%, #3e1b78 50%, #1f0b3b 100%) !important;
    border: 1.8px solid rgba(192, 132, 252, 0.45) !important;
    box-shadow: 0 8px 24px rgba(108, 0, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
    margin-bottom: 8px !important;
    transition: none !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Enlarged 3D Icons inside the rounded squares (Zero hover scale) */
  .dashboard-quick-links-row .quick-link-circle img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.16)) !important;
    transition: none !important;
    transform: none !important;
  }

  .dashboard-quick-links-row .quick-link-item:hover .quick-link-circle img,
  .dashboard-quick-links-row .quick-link-item:active .quick-link-circle img {
    transform: none !important;
  }

  /* Label text right below the square */
  .dashboard-quick-links-row .quick-link-label {
    font-family: 'Space Grotesk', -apple-system, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    letter-spacing: -0.1px !important;
    text-transform: none !important;
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    margin-top: 0 !important;
  }

  body:not(.light-theme) .dashboard-quick-links-row .quick-link-label {
    color: rgba(255, 255, 255, 0.95) !important;
  }
}

/* ==========================================================================
   RADIANT PURPLE GRADIENT TEXT & BADGES (DARK MODE CONTRAST UPGRADE)
   Replaces dark, low-contrast purple (#6c00ff) on dark backgrounds with
   luminous, eye-friendly gradient purple everywhere.
   ========================================================================== */

/* 1. View All Link */
body:not(.light-theme) .view-all-link,
body:not(.light-theme) .card-title-row .view-all-link,
body:not(.light-theme) a.view-all-link,
body:not(.light-theme) .recent-activity-card .view-all-link {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #e879f9 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: #c084fc !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: inline-block !important;
}

/* 2. Positive / Win Amounts (Recent Activity, History, Trading, Profile Won Trades) */
body:not(.light-theme) #dashboard-recent-activity .item-val.text-green,
body:not(.light-theme) .activity-list-container .item-val.text-green,
body:not(.light-theme) .recent-activity-card .text-green,
body:not(.light-theme) .recent-activity-card .item-val.text-green,
body:not(.light-theme) .list-item .item-val.text-green,
body:not(.light-theme) .history-transaction-card .text-green,
body:not(.light-theme) .history-transaction-card .history-transaction-amount.positive,
body:not(.light-theme) .history-transaction-amount.text-green,
body:not(.light-theme) .history-transaction-card .tx-amount-inflow,
body:not(.light-theme) .history-transaction-card .tx-card-amount.tx-amount-inflow,
body:not(.light-theme) #tab-history .tx-amount-inflow,
body:not(.light-theme) #tab-history .tx-card-amount.tx-amount-inflow,
body:not(.light-theme) #history-list-container .tx-amount-inflow,
body:not(.light-theme) .tx-amount-inflow,
body:not(.light-theme) .profile-won-trade-card .won-trade-profit-val,
body:not(.light-theme) .tc-trade-profit.text-green,
body:not(.light-theme) .tc-preview-val.text-green,
body:not(.light-theme) .tc-trade-result-text.text-green,
body:not(.light-theme) .tc-trade-stake.text-green,
body:not(.light-theme) .item-val.text-green {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #e879f9 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: #c084fc !important;
  font-weight: 800 !important;
  display: inline-block !important;
}

/* 3. WIN and Approved Badges in Dark Mode (High-contrast, luminous, eye-friendly) */
body:not(.light-theme) #dashboard-recent-activity .badge-win,
body:not(.light-theme) .activity-list-container .badge-win,
body:not(.light-theme) .recent-activity-card .badge-win,
body:not(.light-theme) .badge.badge-win,
body:not(.light-theme) .badge-win,
body:not(.light-theme) .badge.badge-approved,
body:not(.light-theme) .badge-approved {
  background: rgba(168, 85, 247, 0.16) !important;
  border: 1px solid rgba(192, 132, 252, 0.45) !important;
  color: #e9d5ff !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 0 8px rgba(192, 132, 252, 0.35) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.2) !important;
}

/* 4. Trend Purple & Stats Trades Mode Badges */
body:not(.light-theme) .trend-purple,
body:not(.light-theme) #stats-trades-mode-badge {
  background: rgba(168, 85, 247, 0.16) !important;
  border: 1px solid rgba(192, 132, 252, 0.4) !important;
  color: #e9d5ff !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.2) !important;
}

/* 5. General .text-primary in Dark Mode */
body:not(.light-theme) .text-primary,
body:not(.light-theme) span.text-primary,
body:not(.light-theme) h4.text-primary {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #e879f9 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: #c084fc !important;
  display: inline-block !important;
}

/* 6. History Section Filter Tabs (All, Trade Wins, etc.) & Profile Sub-Tabs */
body:not(.light-theme) #tab-history .tab-headers .tab-btn.active,
body:not(.light-theme) .history-filter-tab.active,
body:not(.light-theme) .history-tabs .tab.active,
body:not(.light-theme) .profile-tab-pill.active,
body:not(.light-theme) .profile-sub-tab.active {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
  border: 1px solid rgba(192, 132, 252, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
  font-weight: 700 !important;
}

/* 7. History Trade Win Icons & Chevrons (Luminous Eye-Friendly Purple) */
body:not(.light-theme) .history-transaction-card .icon-bg-trade-win,
body:not(.light-theme) .history-transaction-card .icon-bg-inflow,
body:not(.light-theme) .history-transaction-card .tx-card-icon-wrap.icon-bg-trade-win,
body:not(.light-theme) .profile-won-trade-card .won-trade-icon-circle {
  background: rgba(168, 85, 247, 0.16) !important;
  border: 1px solid rgba(192, 132, 252, 0.4) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.2) !important;
  color: #c084fc !important;
}

body:not(.light-theme) .history-transaction-card .icon-bg-trade-win svg,
body:not(.light-theme) .history-transaction-card .icon-bg-inflow svg,
body:not(.light-theme) .profile-won-trade-card .won-trade-icon-circle svg {
  stroke: #c084fc !important;
}

body:not(.light-theme) .history-transaction-card .tx-card-chevron,
body:not(.light-theme) .history-transaction-card:hover .tx-card-chevron {
  color: #c084fc !important;
  opacity: 0.9 !important;
}

/* 8. Account Tiers Status & Progress Bars */
body:not(.light-theme) .badge-status.unlocked-text,
body:not(.light-theme) .unlocked-text {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #e879f9 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: #c084fc !important;
  font-weight: 800 !important;
  display: inline-block !important;
}

body:not(.light-theme) .badge-progress-bar-fill {
  background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.45) !important;
}

/* 9. History Detail Modal Win Value */
body:not(.light-theme) .history-detail-hero-val.text-green,
body:not(.light-theme) .history-detail-hero-val[style*="#10b981"],
body:not(.light-theme) .history-detail-hero-val[style*="rgb(16, 185, 129)"] {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #e879f9 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: #c084fc !important;
  font-weight: 800 !important;
  display: inline-block !important;
}

/* ==========================================================================
   NEXTER PURPLE REDESIGN: CLAIMED & REJECTED STATES + WON TRADE 3D ICON
   ========================================================================== */

/* 1. Account Tier Bonus Claimed / Approved State */
.badge-claim-approved,
.badge-claim-status-pill.approved {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Dark Mode Claimed State: Royal purple glass with luminous lavender border */
body:not(.light-theme) .badge-claim-approved,
body:not(.light-theme) .badge-claim-status-pill.approved {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(124, 58, 237, 0.26) 100%) !important;
  border: 1px solid rgba(192, 132, 252, 0.45) !important;
  color: #f3e8ff !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.18) !important;
}

body:not(.light-theme) .badge-claim-approved svg,
body:not(.light-theme) .badge-claim-status-pill.approved svg {
  stroke: #c084fc !important;
  filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.6)) !important;
}

/* Light Mode Claimed State: Frosted lavender pearl with deep royal purple text */
body.light-theme .badge-claim-approved,
body.light-theme .badge-claim-status-pill.approved {
  background: linear-gradient(135deg, rgba(245, 243, 255, 0.98) 0%, rgba(237, 233, 254, 0.96) 100%) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.38) !important;
  color: #6d28d9 !important;
  box-shadow: 0 3px 12px rgba(108, 0, 255, 0.08), inset 0 1px 1.5px rgba(255, 255, 255, 0.95) !important;
}

body.light-theme .badge-claim-approved svg,
body.light-theme .badge-claim-status-pill.approved svg {
  stroke: #7c3aed !important;
  filter: drop-shadow(0 1px 3px rgba(124, 58, 237, 0.3)) !important;
}

/* 2. Account Tier Bonus Rejected State */
.badge-claim-rejected,
.badge-claim-status-pill.rejected {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Dark Mode Rejected State */
body:not(.light-theme) .badge-claim-rejected,
body:not(.light-theme) .badge-claim-status-pill.rejected {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.14) 0%, rgba(185, 28, 28, 0.2) 100%) !important;
  border: 1px solid rgba(248, 113, 113, 0.38) !important;
  color: #fca5a5 !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

body:not(.light-theme) .badge-claim-rejected svg,
body:not(.light-theme) .badge-claim-status-pill.rejected svg {
  stroke: #f87171 !important;
}

/* Light Mode Rejected State */
body.light-theme .badge-claim-rejected,
body.light-theme .badge-claim-status-pill.rejected {
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.98) 0%, rgba(254, 226, 226, 0.95) 100%) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.32) !important;
  color: #b91c1c !important;
  box-shadow: 0 3px 12px rgba(239, 68, 68, 0.08), inset 0 1px 1.5px rgba(255, 255, 255, 0.95) !important;
}

body.light-theme .badge-claim-rejected svg,
body.light-theme .badge-claim-status-pill.rejected svg {
  stroke: #dc2626 !important;
}

/* 3. Account Tier Pending State */
.badge-claim-btn.pending,
.badge-claim-status-pill.pending {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  cursor: default !important;
}

body:not(.light-theme) .badge-claim-btn.pending,
body:not(.light-theme) .badge-claim-status-pill.pending {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(180, 83, 9, 0.2) 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.38) !important;
  color: #fde68a !important;
}

body.light-theme .badge-claim-btn.pending,
body.light-theme .badge-claim-status-pill.pending {
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.98) 0%, rgba(254, 243, 199, 0.95) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.32) !important;
  color: #b45309 !important;
}

/* 4. Won Trade 3D PNG Icon */
.won-trade-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.won-trade-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.won-trade-3d-img {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 12px rgba(108, 0, 255, 0.22)) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.profile-won-trade-card:hover .won-trade-3d-img {
  transform: scale(1.1) translateY(-1px) !important;
}

/* ================================================================
   DEDICATED MOBILE NOTIFICATIONS SCREEN (#tab-notifications)
   ================================================================ */
#tab-notifications {
  padding: 8px 16px 96px 16px !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 100vh !important;
}

/* Page Header */
#tab-notifications .mobile-notif-page-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 16px 0 !important;
  margin-bottom: 6px !important;
  position: relative !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.light-theme #tab-notifications .mobile-notif-page-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

#tab-notifications .mobile-notif-header-center {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#tab-notifications .mobile-notif-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#tab-notifications .mobile-notif-header-bell {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(108, 0, 255, 0.45)) !important;
}

#tab-notifications .mobile-notif-count-pill {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(124, 58, 237, 0.35) 100%) !important;
  color: #c084fc !important;
  border: 1px solid rgba(192, 132, 252, 0.35) !important;
  line-height: 1 !important;
}

body.light-theme #tab-notifications .mobile-notif-count-pill {
  background: rgba(108, 0, 255, 0.1) !important;
  color: #6c00ff !important;
  border-color: rgba(108, 0, 255, 0.2) !important;
}

/* Header Clear All Action Button */
#tab-notifications .mobile-notif-clear-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(124, 58, 237, 0.25) 100%) !important;
  border: 1px solid rgba(192, 132, 252, 0.3) !important;
  color: #e9d5ff !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 4px 12px rgba(108, 0, 255, 0.12) !important;
}

#tab-notifications .mobile-notif-clear-btn:active {
  transform: scale(0.95) !important;
}

body.light-theme #tab-notifications .mobile-notif-clear-btn {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* Filter Tabs — Strict 4 Columns on 1 Row, Zero Side Gaps, Zero Horizontal Scroll */
#tab-notifications .mobile-notif-filter-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 5px !important;
  margin: 12px 0 16px 0 !important;
  border-radius: 18px !important;
  background: rgba(17, 20, 34, 0.6) !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  overflow: visible !important;
}

body.light-theme #tab-notifications .mobile-notif-filter-tabs {
  background: rgba(245, 243, 255, 0.8) !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
}

#tab-notifications .mobile-notif-filter-tabs .tab-btn {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 8px 2px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#tab-notifications .mobile-notif-filter-tabs .tab-btn .filter-count-badge {
  position: absolute !important;
  top: -5px !important;
  right: -2px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  line-height: 16px !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(108, 0, 255, 0.45) !important;
  border: 1.5px solid #0f111a !important;
  z-index: 2 !important;
}

#tab-notifications .mobile-notif-filter-tabs .tab-btn .filter-count-badge.has-count {
  display: inline-flex !important;
}

body.light-theme #tab-notifications .mobile-notif-filter-tabs .tab-btn .filter-count-badge {
  border-color: #ffffff !important;
}

#tab-notifications .mobile-notif-filter-tabs .tab-btn.active {
  background: linear-gradient(135deg, #7c3aed 0%, #6c00ff 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.4) !important;
}

body.light-theme #tab-notifications .mobile-notif-filter-tabs .tab-btn {
  color: #64748b !important;
}

body.light-theme #tab-notifications .mobile-notif-filter-tabs .tab-btn.active {
  background: linear-gradient(135deg, #7c3aed 0%, #6c00ff 100%) !important;
  color: #ffffff !important;
}

/* Notification Content Wrap & List (Zero Side Gaps, Edge-to-Edge) */
#tab-notifications .mobile-notif-content-wrap {
  margin-left: -16px !important;
  margin-right: -16px !important;
  width: calc(100% + 32px) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

#tab-notifications .mobile-notif-list-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.mobile-notif-card {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(17, 20, 34, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.mobile-notif-card.unread {
  border-top-color: rgba(168, 85, 247, 0.35) !important;
  border-bottom-color: rgba(168, 85, 247, 0.35) !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(17, 20, 34, 0.85) 100%) !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.18) !important;
}

body.light-theme .mobile-notif-card {
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

body.light-theme .mobile-notif-card.unread {
  background: linear-gradient(135deg, #faf7ff 0%, #ffffff 100%) !important;
  border-top-color: rgba(108, 0, 255, 0.22) !important;
  border-bottom-color: rgba(108, 0, 255, 0.22) !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.07) !important;
}

/* Notification Icon Container */
.mobile-notif-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  flex-shrink: 0 !important;
}

.mobile-notif-icon-wrap.icon-type-win {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.3) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}

.mobile-notif-icon-wrap.icon-type-lose {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(220, 38, 38, 0.25) 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
}

.mobile-notif-icon-wrap.icon-type-purple {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.25) 0%, rgba(108, 0, 255, 0.35) 100%) !important;
  border: 1px solid rgba(192, 132, 252, 0.4) !important;
  color: #c084fc !important;
}

.mobile-notif-icon-wrap.icon-type-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
}

/* Card Body */
.mobile-notif-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.mobile-notif-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.mobile-notif-title {
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.light-theme .mobile-notif-title {
  color: #0f172a !important;
}

.mobile-notif-unread-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #a855f7 !important;
  box-shadow: 0 0 8px #c084fc !important;
  display: inline-block !important;
}

.mobile-notif-time {
  font-size: 11px !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
}

body.light-theme .mobile-notif-time {
  color: #64748b !important;
}

.mobile-notif-message {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #cbd5e1 !important;
  word-break: break-word !important;
}

body.light-theme .mobile-notif-message {
  color: #334155 !important;
}

.mobile-notif-action-chevron {
  color: #a855f7 !important;
  opacity: 0.85 !important;
  transition: transform 0.2s ease !important;
  margin-left: 2px !important;
  flex-shrink: 0 !important;
}

.mobile-notif-card.is-actionable:hover .mobile-notif-action-chevron,
.mobile-notif-card.is-actionable:active .mobile-notif-action-chevron {
  transform: translateX(2px) !important;
  color: #c084fc !important;
  opacity: 1 !important;
}

.mobile-notif-actions-group {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}

.mobile-notif-action-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.mobile-notif-action-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}

.mobile-notif-mail-btn.is-unread {
  color: #c084fc !important;
  background: rgba(124, 58, 237, 0.16) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.25) !important;
}

.mobile-notif-mail-btn.is-unread:hover {
  color: #ffffff !important;
  background: rgba(124, 58, 237, 0.35) !important;
  border-color: rgba(192, 132, 252, 0.6) !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.45) !important;
}

.mobile-notif-mail-btn.is-read {
  color: #64748b !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.mobile-notif-mail-btn.is-read:hover {
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.mobile-notif-dismiss-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #64748b !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.mobile-notif-dismiss-btn:hover {
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

.mobile-notif-card.is-actionable {
  cursor: pointer !important;
}

.mobile-notif-card.is-actionable:active {
  transform: scale(0.985) !important;
}

.mobile-notif-card.is-non-actionable {
  cursor: default !important;
}

body.light-theme .mobile-notif-action-btn {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #64748b !important;
}

body.light-theme .mobile-notif-mail-btn.is-unread {
  background: rgba(124, 58, 237, 0.1) !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
  color: #7c3aed !important;
}

body.light-theme .mobile-notif-mail-btn.is-read {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
  color: #94a3b8 !important;
}

body.light-theme .mobile-notif-dismiss-btn:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
}

/* Empty State */
.mobile-notif-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 20px !important;
  text-align: center !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mobile-notif-empty-bell-wrap {
  width: 84px !important;
  height: 84px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.25) 0%, rgba(108, 0, 255, 0.05) 70%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 35px rgba(108, 0, 255, 0.3) !important;
  margin-bottom: 8px !important;
}

.mobile-notif-empty-bell-img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 12px rgba(108, 0, 255, 0.5)) !important;
}

.mobile-notif-empty-title {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
}

body.light-theme .mobile-notif-empty-title {
  color: #0f172a !important;
}

.mobile-notif-empty-desc {
  font-size: 13.5px !important;
  color: #94a3b8 !important;
  max-width: 280px !important;
  line-height: 1.55 !important;
}

body.light-theme .mobile-notif-empty-desc {
  color: #64748b !important;
}

.mobile-notif-empty-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c3aed 0%, #6c00ff 100%) !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 24px rgba(108, 0, 255, 0.4) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.mobile-notif-empty-cta:active {
  transform: scale(0.96) !important;
}

/* Header View Button & Action Wrap in Desktop Dropdowns */
.notifications-dropdown .notif-header-actions-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.notifications-dropdown .notif-view-page-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1px solid rgba(192, 132, 252, 0.35) !important;
  color: #c084fc !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.notifications-dropdown .notif-view-page-btn span {
  color: inherit !important;
  transition: color 0.2s ease !important;
}

.notifications-dropdown .notif-view-page-btn svg {
  stroke: currentColor !important;
  transition: stroke 0.2s ease !important;
}

.notifications-dropdown .notif-view-page-btn:hover,
.notifications-dropdown .notif-view-page-btn:hover span,
body.light-theme .notifications-dropdown .notif-view-page-btn:hover,
body.light-theme .notifications-dropdown .notif-view-page-btn:hover span {
  background: linear-gradient(135deg, #7c3aed 0%, #6c00ff 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

.notifications-dropdown .notif-view-page-btn:hover svg,
body.light-theme .notifications-dropdown .notif-view-page-btn:hover svg {
  stroke: #ffffff !important;
}

body.light-theme .notifications-dropdown .notif-view-page-btn {
  background: rgba(108, 0, 255, 0.08) !important;
  border: 1px solid rgba(108, 0, 255, 0.22) !important;
  color: #6c00ff !important;
}

body.light-theme .notifications-dropdown .notif-view-page-btn span {
  color: #6c00ff !important;
}

body.light-theme .notifications-dropdown .notif-view-page-btn svg {
  stroke: #6c00ff !important;
}

/* Modern Card Styling Inside Desktop Notification Dropdowns */
.notifications-dropdown .notifications-dropdown-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}

.notifications-dropdown .mobile-notif-card {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  background: rgba(18, 21, 36, 0.9) !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.notifications-dropdown .mobile-notif-card:hover {
  background: rgba(26, 30, 50, 0.95) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  transform: translateY(-1px) !important;
}

.notifications-dropdown .mobile-notif-card.unread {
  border-color: rgba(168, 85, 247, 0.45) !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.16) 0%, rgba(18, 21, 36, 0.95) 100%) !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.15), inset 0 0 0 1px rgba(192, 132, 252, 0.15) !important;
}

body.light-theme .notifications-dropdown .mobile-notif-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

body.light-theme .notifications-dropdown .mobile-notif-card:hover {
  background: #f8fafc !important;
  border-color: rgba(108, 0, 255, 0.2) !important;
}

body.light-theme .notifications-dropdown .mobile-notif-card.unread {
  background: linear-gradient(135deg, #faf7ff 0%, #ffffff 100%) !important;
  border-color: rgba(108, 0, 255, 0.28) !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.08) !important;
}

.notifications-dropdown .mobile-notif-card .mobile-notif-icon-wrap {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
}

.notifications-dropdown .mobile-notif-card .mobile-notif-title {
  font-size: 12.5px !important;
}

.notifications-dropdown .mobile-notif-card .mobile-notif-message {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.notifications-dropdown .mobile-notif-card .mobile-notif-time {
  font-size: 11px !important;
}

/* Category-specific icon color themes */
.mobile-notif-icon-wrap.icon-type-cyan {
  background: rgba(6, 182, 212, 0.14) !important;
  border-color: rgba(6, 182, 212, 0.35) !important;
  color: #06b6d4 !important;
}

.mobile-notif-icon-wrap.icon-type-gold {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #f59e0b !important;
}

body.light-theme .mobile-notif-icon-wrap.icon-type-cyan {
  background: rgba(6, 182, 212, 0.1) !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
  color: #0891b2 !important;
}

body.light-theme .mobile-notif-icon-wrap.icon-type-gold {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #d97706 !important;
}

/* ── Remove Visible Scrollbars Across All Notification Lists ── */
.notifications-dropdown,
.notifications-dropdown-list,
.modern-notif-dropdown,
#tab-notifications,
.mobile-notif-content-wrap,
#notifications-list-container {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.notifications-dropdown::-webkit-scrollbar,
.notifications-dropdown-list::-webkit-scrollbar,
.modern-notif-dropdown::-webkit-scrollbar,
#tab-notifications::-webkit-scrollbar,
.mobile-notif-content-wrap::-webkit-scrollbar,
#notifications-list-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* ── Floating Back-to-Top Action Button ── */
.notif-scroll-top-btn {
  position: fixed !important;
  bottom: 85px !important;
  right: 18px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7c3aed 0%, #6c00ff 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 24px rgba(108, 0, 255, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 1000 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(12px) scale(0.9) !important;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.notif-scroll-top-btn.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.notif-scroll-top-btn:active {
  transform: scale(0.92) !important;
}

.notif-scroll-top-btn.notif-dropdown-top-btn {
  position: absolute !important;
  bottom: 12px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.4) !important;
}

/* ==========================================================================
   NEXTER COMMUNITY FEED & VERIFIED TRADE SHARING STYLES
   ========================================================================== */

/* Community Stream Header Bar */
.community-feed-header-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}

.community-feed-filter-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 4px !important;
  border-radius: 12px !important;
}

.community-filter-pill {
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.community-filter-pill:hover {
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.community-filter-pill.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(168, 85, 247, 0.25)) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

.community-create-trigger-btn {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 8px 18px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35) !important;
  transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.community-create-trigger-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5) !important;
}

.community-create-trigger-btn .share-btn-text-desktop {
  display: inline-block !important;
}

.community-create-trigger-btn .share-btn-text-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .community-create-trigger-btn .share-btn-text-desktop {
    display: none !important;
  }
  .community-create-trigger-btn .share-btn-text-mobile {
    display: inline-block !important;
  }
}

/* Community Post Cards Stream */
.community-feed-stream {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* ==========================================================================
   COMMUNITY FEED POST CARD - HIGH-END DUAL-THEME ARCHITECTURE
   ========================================================================== */

.community-post-card {
  background: linear-gradient(180deg, rgba(24, 19, 39, 0.75) 0%, rgba(17, 14, 27, 0.95) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.22) !important;
  border-radius: 18px !important;
  padding: 20px 22px !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), 0 0 20px rgba(124, 58, 237, 0.1) !important;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease !important;
  position: relative !important;
}

.community-post-card:hover {
  border-color: rgba(168, 85, 247, 0.42) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65), 0 0 28px rgba(168, 85, 247, 0.2) !important;
  transform: translateY(-1.5px) !important;
}

/* Light Theme: Clean, High-Contrast Modern White Card */
body.light-theme .community-post-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

body.light-theme .community-post-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.1), 0 3px 10px -2px rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-1.5px) !important;
}

/* Post Author Row */
.post-author-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

.post-author-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: default !important;
}

.post-avatar-img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3) !important;
  background: #1a162b !important;
}

body.light-theme .post-avatar-img {
  border: 2px solid #d8b4fe !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15) !important;
  background: #f8fafc !important;
}

.post-avatar-fallback {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  border: 2px solid rgba(168, 85, 247, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3) !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

body.light-theme .post-avatar-fallback {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
  border: 2px solid #d8b4fe !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2) !important;
}

.post-names-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.post-author-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.post-author-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}

body.light-theme .post-author-name {
  color: #0f172a !important;
}

/* NEXTER VERIFIED BADGE & UNVERIFIED STATUS (Clean text/icon, Zero background pill layout) */
.post-verified-pill,
.post-verified-badge-wrap,
.composer-verified-pill,
.composer-verified-pill.is-verified,
.composer-verified-pill.is-unverified {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 2px 0 0 0 !important; /* Zero left margin for exact flush alignment under username */
  vertical-align: middle !important;
  box-shadow: none !important;
  user-select: none !important;
}

body.light-theme .composer-verified-pill,
body.light-theme .composer-verified-pill.is-verified,
body.light-theme .composer-verified-pill.is-unverified,
body.light-theme .post-verified-pill,
body.light-theme .post-verified-badge-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 2px 0 0 0 !important;
}

.composer-verified-pill.is-unverified .nexter-verified-badge-img {
  display: none !important;
}

/* Verified text: vibrant purple, clean typography */
.composer-verified-pill.is-verified .nexter-verified-badge-text,
.post-verified-badge-wrap .nexter-verified-badge-text {
  color: #c084fc !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

body.light-theme .composer-verified-pill.is-verified .nexter-verified-badge-text,
body.light-theme .post-verified-badge-wrap .nexter-verified-badge-text {
  color: #7c3aed !important;
}

/* Unverified text: subtle muted grey, clean typography without pill box */
.composer-verified-pill.is-unverified .nexter-verified-badge-text {
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

body.light-theme .composer-verified-pill.is-unverified .nexter-verified-badge-text {
  color: #64748b !important;
}

.nexter-verified-badge-img {
  width: 13px !important;
  height: 13px !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

.comment-verified-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 1px 6px !important;
  margin-left: 4px !important;
  background: rgba(147, 51, 234, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 999px !important;
}

body.light-theme .comment-verified-pill {
  background: #f3e8ff !important;
  border: 1px solid #d8b4fe !important;
}

.comment-verified-pill .nexter-verified-badge-img {
  width: 12px !important;
  height: 12px !important;
}

.post-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  color: #94a3b8 !important;
}

body.light-theme .post-meta-row {
  color: #64748b !important;
}

.post-sentiment-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  letter-spacing: 0.2px !important;
}

.post-sentiment-tag.sentiment-bullish {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

body.light-theme .post-sentiment-tag.sentiment-bullish {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

.post-sentiment-tag.sentiment-bearish {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

body.light-theme .post-sentiment-tag.sentiment-bearish {
  background: #fff1f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecdd3 !important;
}

.post-author-actions {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.post-options-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.post-options-btn:hover {
  background: rgba(168, 85, 247, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  color: #c084fc !important;
  transform: scale(1.05) !important;
}

body.light-theme .post-options-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

body.light-theme .post-options-btn:hover {
  background: #f3e8ff !important;
  border-color: #d8b4fe !important;
  color: #7e22ce !important;
}

.post-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 6px !important;
  min-width: 170px !important;
  background: #130f24 !important;
  border: 1px solid rgba(168, 85, 247, 0.32) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 16px rgba(168, 85, 247, 0.15) !important;
  padding: 6px !important;
  display: none !important;
  flex-direction: column !important;
  gap: 3px !important;
  z-index: 100 !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.post-dropdown-menu.active {
  display: flex !important;
  animation: postDropdownFade 0.15s ease-out !important;
}

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

body.light-theme .post-dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(124, 58, 237, 0.08) !important;
}

.post-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 8px !important;
  color: #e2e8f0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: left !important;
}

.post-dropdown-item:hover {
  background: rgba(168, 85, 247, 0.16) !important;
  color: #ffffff !important;
}

body.light-theme .post-dropdown-item {
  color: #334155 !important;
}

body.light-theme .post-dropdown-item:hover {
  background: #f3e8ff !important;
  color: #7e22ce !important;
}

.post-dropdown-item.item-delete {
  color: #f87171 !important;
}

.post-dropdown-item.item-delete:hover {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #ef4444 !important;
}

body.light-theme .post-dropdown-item.item-delete {
  color: #ef4444 !important;
}

body.light-theme .post-dropdown-item.item-delete:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.post-private-tag {
  display: inline-flex;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 6px !important;
  padding: 1.5px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #c084fc !important;
  letter-spacing: 0.2px !important;
}

.post-private-tag.hidden,
.post-private-tag[style*="display: none"],
.post-private-tag[style*="display:none"] {
  display: none !important;
}

body.light-theme .post-private-tag {
  background: #f5f3ff !important;
  border: 1px solid #d8b4fe !important;
  color: #7e22ce !important;
}

/* Post Description Text & Purple Hashtag */
.post-caption-text {
  font-size: 15px !important;
  line-height: 1.62 !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  margin: 0 0 14px 0 !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  letter-spacing: -0.01em !important;
}

body.light-theme .post-caption-text {
  color: #0f172a !important;
}

.post-hashtag {
  color: #c084fc !important;
  font-weight: 700 !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  display: inline-block !important;
}

.post-hashtag:hover {
  color: #f0abfc !important;
  background: rgba(168, 85, 247, 0.18) !important;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.5) !important;
}

body.light-theme .post-hashtag {
  color: #7c3aed !important;
}

body.light-theme .post-hashtag:hover {
  color: #5b21b6 !important;
  background: rgba(124, 58, 237, 0.1) !important;
  text-shadow: none !important;
}

/* Post Attached Image */
.post-photo-wrap {
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 10px 0 14px 0 !important;
  max-height: 420px !important;
  background: #0d0b14 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Post Attached Image (Clean Container, No Blank Heights) */
.post-photo-wrap {
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 12px 0 14px 0 !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  line-height: 0 !important;
}

.post-photo-wrap:hover {
  border-color: rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

body.light-theme .post-photo-wrap {
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .post-photo-wrap:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

.post-photo-img {
  width: 100% !important;
  max-height: 480px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 14px !important;
  transition: transform 0.26s ease !important;
}

.post-photo-wrap:hover .post-photo-img {
  transform: scale(1.012) !important;
}

/* ==========================================================================
   REACTIONS SUMMARY ROW (STACKED TOP ICONS + TOTAL COUNT)
   ========================================================================== */
.post-reactions-summary-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 2px 10px 2px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  user-select: none !important;
  cursor: pointer !important;
}

body.light-theme .post-reactions-summary-row {
  color: #64748b !important;
}

.reactions-summary-icons {
  display: inline-flex !important;
  align-items: center !important;
}

.summary-reaction-bubble {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: -4px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  z-index: 2 !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: transparent !important;
}

.summary-reaction-bubble svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

body.light-theme .summary-reaction-bubble {
  background: transparent !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.reactions-total-count {
  font-weight: 700 !important;
  color: #e2e8f0 !important;
  margin-left: 6px !important;
}

body.light-theme .reactions-total-count {
  color: #0f172a !important;
}

/* ==========================================================================
   6-REACTION FLOATING GLASS DOCK (LINKEDIN STYLE)
   ========================================================================== */
.post-action-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
}

body.light-theme .post-action-bar {
  border-top: 1px solid #f1f5f9 !important;
}

.post-actions-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.post-action-react-wrapper {
  position: relative !important;
  display: inline-flex !important;
}

.post-reaction-dock {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important;
  display: none !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  z-index: 120 !important;
  background: rgba(18, 14, 28, 0.95) !important;
  border: 1px solid rgba(168, 85, 247, 0.38) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 24px rgba(124, 58, 237, 0.25) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  transform-origin: bottom left !important;
}

body.light-theme .post-reaction-dock {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.post-reaction-dock.show {
  display: flex !important;
  animation: dockPopIn 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes dockPopIn {
  0% { opacity: 0; transform: scale(0.7) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.reaction-dock-item {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  user-select: none !important;
  padding: 0 !important;
}

.reaction-dock-item:hover {
  transform: scale(1.35) translateY(-8px) !important;
  z-index: 10 !important;
}

.reaction-lottie-box {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.reaction-lottie-box svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
}

.react-btn-lottie-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

.react-btn-lottie-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.reaction-tooltip {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(0, 0, 0, 0.88) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2.5px 8px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.light-theme .reaction-tooltip {
  background: #0f172a !important;
  color: #ffffff !important;
}

.reaction-dock-item:hover .reaction-tooltip {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(-2px) !important;
}

/* Post Action Buttons */
.post-action-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  padding: 7px 14px !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}

.post-action-btn:hover {
  color: #ffffff !important;
  background: rgba(168, 85, 247, 0.12) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  transform: translateY(-1px) !important;
}

body.light-theme .post-action-btn {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

body.light-theme .post-action-btn:hover {
  color: #0f172a !important;
  background: #f3e8ff !important;
  border-color: #d8b4fe !important;
  transform: translateY(-1px) !important;
}

/* Reacted Button Highlight States */
.post-react-btn.reacted {
  font-weight: 700 !important;
}

.post-react-btn.reaction-like {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.14) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

.post-react-btn.reaction-celebrate {
  color: #34d399 !important;
  background: rgba(52, 211, 153, 0.14) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
}

.post-react-btn.reaction-support {
  color: #c084fc !important;
  background: rgba(192, 132, 252, 0.14) !important;
  border-color: rgba(192, 132, 252, 0.35) !important;
}

.post-react-btn.reaction-love {
  color: #f43f5e !important;
  background: rgba(244, 63, 94, 0.14) !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
}

.post-react-btn.reaction-insightful {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.14) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
}

.post-react-btn.reaction-funny {
  color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

body.light-theme .post-react-btn.reaction-like {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
}

body.light-theme .post-react-btn.reaction-celebrate {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #059669 !important;
}

body.light-theme .post-react-btn.reaction-support {
  background: #faf5ff !important;
  border-color: #e9d5ff !important;
  color: #7c3aed !important;
}

body.light-theme .post-react-btn.reaction-love {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #e11d48 !important;
}

body.light-theme .post-react-btn.reaction-insightful {
  background: #fefce8 !important;
  border-color: #fef08a !important;
  color: #b45309 !important;
}

body.light-theme .post-react-btn.reaction-funny {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #d97706 !important;
}

.react-btn-icon {
  font-size: 15px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Mobile Responsiveness for Community Feed */
@media (max-width: 640px) {
  .community-post-card {
    padding: 14px 14px !important;
    border-radius: 14px !important;
  }

  .post-action-bar {
    padding-top: 10px !important;
  }

  .post-action-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    gap: 5px !important;
  }

  .reaction-dock-item {
    width: 34px !important;
    height: 34px !important;
  }

  .reaction-static-icon {
    font-size: 22px !important;
  }

  .desktop-only-txt {
    display: none !important;
  }
}

/* ==========================================================================
   COMMUNITY COMPOSER MODAL STYLES
   ========================================================================== */

.community-composer-modal-card {
  background: #131122 !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(124, 58, 237, 0.2) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 580px !important;
  padding: 24px !important;
  color: #fff !important;
  position: relative !important;
}

.community-composer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.composer-header-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.composer-header-badge {
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(168, 85, 247, 0.15)) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #c084fc !important;
}

.community-composer-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  color: #ffffff !important;
}

.community-composer-sub {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  margin: 2px 0 0 0 !important;
}

.community-composer-close-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-secondary) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.community-composer-close-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* Composer Author Bar */
.composer-author-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.composer-user-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.composer-avatar-circle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 2px solid #7c3aed !important;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3) !important;
  position: relative !important;
}

.composer-avatar-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
  z-index: 2 !important;
}

.composer-avatar-img.hidden,
.composer-avatar-img[style*="display: none"],
.composer-avatar-img[style*="display:none"] {
  display: none !important;
  z-index: 0 !important;
}

.composer-avatar-letter {
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  user-select: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

.composer-avatar-letter.hidden,
.composer-avatar-letter[style*="display: none"],
.composer-avatar-letter[style*="display:none"] {
  display: none !important;
}

body.light-theme .composer-avatar-circle {
  border-color: #7c3aed !important;
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2) !important;
}

body.light-theme .composer-avatar-letter {
  color: #ffffff !important;
}

.composer-user-names {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 2px !important;
}

.composer-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

body.light-theme .composer-name {
  color: #0f172a !important;
}

.composer-badge-verified {
  font-size: 11px !important;
  color: #10b981 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Sentiment Selector */
.composer-sentiment-selector {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 3px !important;
  border-radius: 10px !important;
}

.sentiment-pill {
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.sentiment-pill:hover {
  color: #ffffff !important;
}

.sentiment-pill.active {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.sentiment-pill.sentiment-bullish.active {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
}

.sentiment-pill.sentiment-bearish.active {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #f87171 !important;
}

.sentiment-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
}

.sentiment-dot.green { background: #10b981 !important; box-shadow: 0 0 6px #10b981 !important; }
.sentiment-dot.red { background: #ef4444 !important; box-shadow: 0 0 6px #ef4444 !important; }

/* Composer Textarea */
.composer-textarea-wrap {
  position: relative !important;
  margin-bottom: 12px !important;
}

.composer-textarea {
  width: 100% !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 14px 26px 14px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-family: inherit !important;
  resize: vertical !important;
  min-height: 80px !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

.composer-textarea:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;
}

.composer-char-count {
  position: absolute !important;
  bottom: 8px !important;
  right: 12px !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
}

/* ==========================================================================
   ATTACHED TRADE PREVIEW IN COMPOSER (FLEX DEDICATED LAYOUT)
   ========================================================================== */

.composer-attached-trade-box {
  position: relative !important;
  margin-bottom: 12px !important;
  background: rgba(168, 85, 247, 0.08) !important;
  border: 1px solid rgba(168, 85, 247, 0.28) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  display: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.composer-attached-trade-box.active {
  display: flex !important;
}

.attached-trade-inner {
  flex: 1 !important;
  min-width: 0 !important;
}

.attached-trade-preview-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.attached-trade-preview-coin-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.attached-trade-preview-coin {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.attached-trade-preview-stats {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.attached-trade-preview-payout {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #34d399 !important;
}

.attached-trade-preview-roi {
  font-size: 11px !important;
  color: #c084fc !important;
  font-weight: 700 !important;
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
}

.attached-trade-remove-btn {
  position: static !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #94a3b8 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.attached-trade-remove-btn:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #ef4444 !important;
  transform: scale(1.08) !important;
}

/* Attached Photo Preview in Composer */
.composer-photo-preview-box {
  position: relative !important;
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  max-height: 200px !important;
  background: #000 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.composer-photo-preview-box img {
  width: 100% !important;
  max-height: 200px !important;
  object-fit: cover !important;
  display: block !important;
}

.photo-preview-remove-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* Error banner */
.composer-error-banner {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
}

/* Safety Indicator */
.composer-safety-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  margin-bottom: 14px !important;
  background: rgba(168, 85, 247, 0.06) !important;
  border: 1px solid rgba(168, 85, 247, 0.15) !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

/* Toolbar */
.composer-action-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding-top: 6px !important;
}

.composer-tools-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.composer-tool-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.composer-tool-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.composer-tools-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.composer-cancel-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}

.composer-cancel-btn:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.composer-publish-btn {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 22px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.composer-publish-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.6) !important;
}

.composer-publish-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ==========================================================================
   TRADE PICKER MODAL STYLES (NEXTER LUXURY SIGNATURE PURPLE THEME)
   ========================================================================== */

.trade-picker-modal-card {
  background: rgba(18, 16, 31, 0.98) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(168, 85, 247, 0.2) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 540px !important;
  padding: 22px !important;
  color: #fff !important;
  max-height: 85vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.trade-picker-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.trade-picker-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.trade-picker-icon {
  width: 38px !important;
  height: 38px !important;
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.trade-picker-title {
  font-size: 16.5px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  color: #ffffff !important;
}

.trade-picker-sub {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  margin: 2px 0 0 0 !important;
}

.trade-picker-close-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-secondary) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.trade-picker-close-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.trade-picker-body {
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-right: 4px !important;
}

.trade-pick-item-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(168, 85, 247, 0.18) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.trade-pick-item-card:hover {
  background: rgba(168, 85, 247, 0.1) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  transform: translateX(4px) !important;
}

.trade-pick-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.trade-pick-coin-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.trade-pick-coin {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.trade-pick-dir {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

.trade-pick-dir.up {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
}

.trade-pick-dir.down {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

.trade-pick-date {
  font-size: 11px !important;
  color: var(--text-secondary) !important;
}

.trade-pick-right {
  text-align: right !important;
}

.trade-pick-payout {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #34d399 !important;
}

.trade-pick-stake {
  font-size: 11px !important;
  color: var(--text-secondary) !important;
}

/* ==========================================================================
   COMMENTS DRAWER / SHEET STYLES
   ========================================================================== */

.community-comments-sheet {
  background: #131122 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 520px !important;
  padding: 20px !important;
  color: #fff !important;
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.comments-sheet-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.comments-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.comments-sheet-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  color: #fff !important;
}

.comments-count-pill {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #c084fc !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
}

.comments-close-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  color: var(--text-secondary) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.comments-list-wrap {
  overflow-y: auto !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  padding-right: 4px !important;
  max-height: 400px !important;
}

.comment-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.comment-avatar-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.comment-avatar-fallback {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

body.light-theme .comment-avatar-fallback {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
  border: 1.5px solid #d8b4fe !important;
  color: #ffffff !important;
}

.comment-content-wrap {
  flex: 1 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
}

.comment-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}

.comment-author-name {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
}

.comment-time {
  font-size: 11px !important;
  color: var(--text-secondary) !important;
}

.comment-body-text {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #cbd5e1 !important;
  margin: 0 !important;
  word-break: break-word !important;
}

.comments-composer-form {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
}

.comments-input {
  flex: 1 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  color: #fff !important;
  font-size: 13px !important;
  outline: none !important;
}

.comments-input:focus {
  border-color: #a855f7 !important;
}

.comments-send-btn {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  border: none !important;
  color: #fff !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
}

@media (max-width: 768px) {
  .community-composer-modal-card,
  .trade-picker-modal-card,
  .won-trade-lightbox-card,
  .community-comments-sheet {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    max-height: 90vh !important;
  }
}

/* ==========================================================================
   TRADE WON SHOWCASE CARD (CINEMATIC PROFESSIONAL DUAL-THEME VISUALS)
   ========================================================================== */

.trade-won-showcase-card {
  position: relative !important;
  width: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(168, 85, 247, 0.32) !important;
  background: radial-gradient(ellipse at 80% 20%, rgba(124, 58, 237, 0.22) 0%, rgba(11, 9, 20, 0.98) 80%) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65), 0 0 28px rgba(168, 85, 247, 0.14) !important;
  margin: 12px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 320px !important;
  user-select: none !important;
  transition: all 0.25s ease !important;
}

@media (max-width: 640px) {
  .trade-won-showcase-card {
    min-height: 280px !important;
  }
}

body.light-theme .trade-won-showcase-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.trade-won-chart-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.trade-won-chart-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.trade-won-price-label {
  stroke: #0b0914 !important;
  stroke-width: 3.5px !important;
  stroke-linejoin: round !important;
  paint-order: stroke fill !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

body.light-theme .trade-won-price-label {
  stroke: #ffffff !important;
  stroke-width: 3.5px !important;
  stroke-linejoin: round !important;
  paint-order: stroke fill !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}

/* Themed curved candles fade black from bottom to up (subtle fade so candles remain crisp) */
.trade-won-chart-fade-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(11, 9, 20, 0.75) 0%, rgba(11, 9, 20, 0.32) 40%, rgba(11, 9, 20, 0.05) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

body.light-theme .trade-won-chart-fade-overlay {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0) 100%) !important;
}

.trade-won-top-strip {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
}

.trade-won-top-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(168, 85, 247, 0.16) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #c084fc !important;
  letter-spacing: 0.4px !important;
}

body.light-theme .trade-won-top-pill {
  background: #f3e8ff !important;
  border: 1px solid #d8b4fe !important;
  color: #7e22ce !important;
}

.trade-won-top-symbol {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  letter-spacing: 0.5px !important;
}

body.light-theme .trade-won-top-symbol {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.trade-won-bottom-row {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: rgba(10, 8, 18, 0.78) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-top: 1px solid rgba(168, 85, 247, 0.22) !important;
  gap: 12px !important;
}

body.light-theme .trade-won-bottom-row {
  background: rgba(248, 250, 252, 0.94) !important;
  border-top: 1px solid #e2e8f0 !important;
}

.trade-won-user-block {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.trade-won-avatar-square {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
  background: #171426 !important;
}

body.light-theme .trade-won-avatar-square {
  border: 1.5px solid #d8b4fe !important;
  background: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1) !important;
}

.trade-won-avatar-square-fallback {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

body.light-theme .trade-won-avatar-square-fallback {
  border: 1.5px solid #d8b4fe !important;
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
  color: #ffffff !important;
}

.trade-won-user-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.trade-won-name-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.trade-won-user-fullname {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

body.light-theme .trade-won-user-fullname {
  color: #0f172a !important;
}

.trade-won-user-sub {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}

body.light-theme .trade-won-user-sub {
  color: #64748b !important;
}

.trade-won-data-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
}

.trade-won-coin-badge-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.trade-won-coin-symbol {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
}

body.light-theme .trade-won-coin-symbol {
  color: #0f172a !important;
}

.trade-won-profit-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.trade-won-payout-text {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #34d399 !important;
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.4) !important;
}

body.light-theme .trade-won-payout-text {
  color: #059669 !important;
  text-shadow: none !important;
}

.trade-won-roi-pill {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #c084fc !important;
  background: rgba(168, 85, 247, 0.18) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 6px !important;
  padding: 1.5px 6px !important;
}

body.light-theme .trade-won-roi-pill {
  color: #7e22ce !important;
  background: #f3e8ff !important;
  border: 1px solid #d8b4fe !important;
}

.trade-won-execution-meta {
  font-size: 10.5px !important;
  color: #94a3b8 !important;
  letter-spacing: 0.3px !important;
}

body.light-theme .trade-won-execution-meta {
  color: #64748b !important;
}

/* ==========================================================================
   COMPACT TRADE CHIP (When Image/Media is Uploaded)
   ========================================================================== */

.post-compact-trade-pill {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(26, 21, 41, 0.88) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 12px !important;
  padding: 7px 14px !important;
  margin: 8px 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  max-width: 100% !important;
  gap: 10px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.post-compact-trade-pill:hover {
  background: rgba(35, 28, 56, 0.95) !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25) !important;
}

body.light-theme .post-compact-trade-pill {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .post-compact-trade-pill:hover {
  background: #faf5ff !important;
  border-color: #c4b5fd !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12) !important;
}

.compact-trade-pill-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.compact-trade-coin {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
}

body.light-theme .compact-trade-coin {
  color: #0f172a !important;
}

.compact-trade-divider {
  width: 1px !important;
  height: 16px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  margin: 0 2px !important;
}

body.light-theme .compact-trade-divider {
  background: #e2e8f0 !important;
}

.compact-trade-pill-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.compact-trade-payout {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #10b981 !important;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
}

body.light-theme .compact-trade-payout {
  color: #059669 !important;
  text-shadow: none !important;
}

.compact-trade-roi {
  font-size: 11px !important;
  color: #c084fc !important;
  font-weight: 700 !important;
  background: rgba(168, 85, 247, 0.18) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 6px !important;
  padding: 1.5px 6px !important;
}

body.light-theme .compact-trade-roi {
  color: #7c3aed !important;
  background: #f3e8ff !important;
  border: 1px solid #d8b4fe !important;
}

.compact-trade-expand-icon {
  width: 13px !important;
  height: 13px !important;
  opacity: 0.65 !important;
  color: inherit !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.post-compact-trade-pill:hover .compact-trade-expand-icon {
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

/* Direction Tag Pill */
.trade-direction-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2.5px 7px !important;
  border-radius: 6px !important;
  letter-spacing: 0.3px !important;
}

.trade-direction-tag .dir-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.trade-direction-tag.direction-up {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.32) !important;
}

.trade-direction-tag.direction-up .dir-dot {
  background: #34d399 !important;
  box-shadow: 0 0 6px #34d399 !important;
}

body.light-theme .trade-direction-tag.direction-up {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

body.light-theme .trade-direction-tag.direction-up .dir-dot {
  background: #059669 !important;
  box-shadow: none !important;
}

.trade-direction-tag.direction-down {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.32) !important;
}

.trade-direction-tag.direction-down .dir-dot {
  background: #f87171 !important;
  box-shadow: 0 0 6px #f87171 !important;
}

body.light-theme .trade-direction-tag.direction-down {
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1px solid #fecdd3 !important;
}

body.light-theme .trade-direction-tag.direction-down .dir-dot {
  background: #e11d48 !important;
  box-shadow: none !important;
}

/* Lightbox Modal for Compact Trade Chip */
.won-trade-lightbox-card {
  background: rgba(18, 16, 31, 0.98) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(168, 85, 247, 0.2) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 600px !important;
  padding: 20px !important;
  color: #fff !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

body.light-theme .won-trade-lightbox-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

.won-trade-lightbox-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .won-trade-lightbox-header {
  border-bottom: 1px solid #e2e8f0 !important;
}

.won-trade-lightbox-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.won-trade-lightbox-title {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

body.light-theme .won-trade-lightbox-title {
  color: #0f172a !important;
}

.won-trade-lightbox-body {
  overflow-y: auto !important;
}

/* Light theme for comments drawer */
body.light-theme .community-comments-sheet {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

body.light-theme .comments-sheet-header {
  border-bottom: 1px solid #f1f5f9 !important;
}

body.light-theme .comments-sheet-title {
  color: #0f172a !important;
}

body.light-theme .comments-count-pill {
  background: #f3e8ff !important;
  color: #7e22ce !important;
}

body.light-theme .comment-content-wrap {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

body.light-theme .comment-author-name {
  color: #0f172a !important;
}

body.light-theme .comment-time {
  color: #64748b !important;
}

body.light-theme .comment-body-text {
  color: #334155 !important;
}

body.light-theme .comments-input {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme .comments-input:focus {
  border-color: #7c3aed !important;
}

/* Mobile Responsiveness (Dual-Theme Optimized) */
@media (max-width: 640px) {
  .community-post-card {
    padding: 14px 14px !important;
    border-radius: 14px !important;
  }

  .post-avatar-img,
  .post-avatar-fallback {
    width: 38px !important;
    height: 38px !important;
  }

  .post-author-name {
    font-size: 14px !important;
  }

  .post-caption-text {
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }

  .post-compact-trade-pill {
    padding: 6px 10px !important;
    gap: 8px !important;
    font-size: 12px !important;
    flex-wrap: wrap !important;
  }

  .trade-won-showcase-card {
    min-height: 220px !important;
  }

  .post-photo-wrap,
  .post-photo-img {
    max-height: 280px !important;
  }

  .trade-won-bottom-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  .trade-won-data-block {
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  body.light-theme .trade-won-data-block {
    border-top: 1px solid #e2e8f0 !important;
  }
}

/* ==========================================================================
   HIGH-CONTRAST LIGHT THEME SEGMENTED FILTER BUTTONS (ALL FEED / MY POSTS)
   ========================================================================== */
body.light-theme .community-feed-filter-group {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  padding: 4px !important;
  border-radius: 12px !important;
}

body.light-theme .community-filter-pill {
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

body.light-theme .community-filter-pill:hover {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .community-filter-pill.active {
  background: #7c3aed !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.38) !important;
  border: 1px solid #6d28d9 !important;
}

/* ==========================================================================
   SHARE TRADE OR SETUP COMPOSER MODAL - FULL LIGHT THEME OVERHAUL
   ========================================================================== */
body.light-theme .community-composer-modal-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}

body.light-theme .community-composer-header {
  border-bottom: 1px solid #e2e8f0 !important;
}

body.light-theme .composer-header-badge {
  background: #f3e8ff !important;
  border: 1px solid #d8b4fe !important;
  color: #7c3aed !important;
}

body.light-theme .community-composer-title {
  color: #0f172a !important;
}

body.light-theme .community-composer-sub {
  color: #64748b !important;
}

body.light-theme .community-composer-close-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

body.light-theme .community-composer-close-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

body.light-theme .composer-name {
  color: #0f172a !important;
}

body.light-theme .composer-sentiment-selector {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

body.light-theme .sentiment-pill {
  color: #64748b !important;
}

body.light-theme .sentiment-pill:hover {
  color: #0f172a !important;
}

body.light-theme .sentiment-pill.active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .sentiment-pill.sentiment-bullish.active {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
}

body.light-theme .sentiment-pill.sentiment-bearish.active {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
}

body.light-theme .composer-textarea {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme .composer-textarea::placeholder {
  color: #94a3b8 !important;
}

body.light-theme .composer-textarea:focus {
  background: #ffffff !important;
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

body.light-theme .composer-char-count {
  color: #94a3b8 !important;
}

body.light-theme .composer-attached-trade-box {
  background: #faf5ff !important;
  border: 1px solid #e9d5ff !important;
}

body.light-theme .attached-trade-preview-coin {
  color: #0f172a !important;
}

body.light-theme .attached-trade-preview-roi {
  background: #f3e8ff !important;
  border-color: #d8b4fe !important;
  color: #7e22ce !important;
}

body.light-theme .attached-trade-remove-btn {
  background: #fee2e2 !important;
  border: 1px solid #fca5a5 !important;
  color: #dc2626 !important;
}

body.light-theme .attached-trade-remove-btn:hover {
  background: #fecaca !important;
  color: #b91c1c !important;
}

body.light-theme .composer-photo-preview-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

body.light-theme .composer-safety-indicator {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

body.light-theme .composer-tool-btn {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

body.light-theme .composer-tool-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

body.light-theme .composer-cancel-btn {
  background: transparent !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

body.light-theme .composer-cancel-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

body.light-theme .trade-picker-modal-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18) !important;
  color: #0f172a !important;
}

body.light-theme .trade-picker-header {
  border-bottom: 1px solid #e2e8f0 !important;
}

body.light-theme .trade-picker-title {
  color: #0f172a !important;
}

body.light-theme .trade-picker-sub {
  color: #64748b !important;
}

body.light-theme .trade-picker-close-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

body.light-theme .trade-picker-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

body.light-theme .trade-picker-item:hover {
  background: #f1f5f9 !important;
  border-color: #7c3aed !important;
}

body.light-theme .trade-pick-coin {
  color: #0f172a !important;
}

/* ==========================================================================
   COMMUNITY MODALS HIGH Z-INDEX BACKDROPS
   ========================================================================== */
#profile-create-post-modal,
#community-trade-picker-modal,
#community-won-trade-lightbox,
#community-comments-drawer,
#community-delete-post-modal {
  z-index: 100005 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 16px !important;
}

body.light-theme #profile-create-post-modal,
body.light-theme #community-trade-picker-modal,
body.light-theme #community-won-trade-lightbox,
body.light-theme #community-comments-drawer,
body.light-theme #community-delete-post-modal {
  background: rgba(15, 23, 42, 0.45) !important;
}

/* ==========================================================================
   DELETE POST CONFIRMATION MODAL (DARK & LIGHT THEME)
   ========================================================================== */
.community-delete-modal-card {
  background: #131122 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(239, 68, 68, 0.15) !important;
  border-radius: 18px !important;
  width: 100% !important;
  max-width: 420px !important;
  padding: 24px 22px !important;
  text-align: center !important;
  color: #ffffff !important;
  position: relative !important;
}

body.light-theme .community-delete-modal-card {
  background: #ffffff !important;
  border: 1px solid #fca5a5 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16), 0 0 30px rgba(239, 68, 68, 0.08) !important;
  color: #0f172a !important;
}

.community-delete-icon-wrap {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 16px auto !important;
  border-radius: 50% !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ef4444 !important;
}

body.light-theme .community-delete-icon-wrap {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

.community-delete-modal-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  margin: 0 0 8px 0 !important;
  color: #ffffff !important;
}

body.light-theme .community-delete-modal-title {
  color: #0f172a !important;
}

.community-delete-modal-sub {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--text-secondary) !important;
  margin: 0 0 22px 0 !important;
}

body.light-theme .community-delete-modal-sub {
  color: #64748b !important;
}

.community-delete-modal-actions {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: center !important;
}

.community-delete-btn-cancel {
  flex: 1 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.community-delete-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

body.light-theme .community-delete-btn-cancel {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

body.light-theme .community-delete-btn-cancel:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.community-delete-btn-confirm {
  flex: 1 !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4) !important;
  transition: all 0.2s ease !important;
}

.community-delete-btn-confirm:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.55) !important;
}

/* ==========================================================================
   POST REACTIONS DETAIL MODAL / BOTTOM SHEET (FACEBOOK / LINKEDIN STYLE)
   ========================================================================== */
.post-reactions-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100000 !important;
  padding: 16px !important;
  opacity: 0;
  transition: opacity 0.25s ease !important;
}

.post-reactions-modal-overlay.open {
  display: flex !important;
  opacity: 1 !important;
}

.post-reactions-modal-sheet {
  background: #121024 !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 480px !important;
  max-height: 85vh !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(168, 85, 247, 0.15) !important;
  overflow: hidden !important;
  position: relative !important;
  animation: reactionsModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.light-theme .post-reactions-modal-sheet {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.15), 0 0 25px rgba(124, 58, 237, 0.08) !important;
}

@keyframes reactionsModalPop {
  0% {
    transform: scale(0.95) translateY(10px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.reactions-modal-handle-wrap {
  display: none;
  width: 100%;
  padding: 10px 0 4px 0;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.reactions-modal-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

body.light-theme .reactions-modal-handle {
  background: #cbd5e1;
}

.reactions-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px 12px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .reactions-modal-header {
  border-bottom: 1px solid #f1f5f9 !important;
}

.reactions-modal-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

body.light-theme .reactions-modal-title {
  color: #0f172a !important;
}

.reactions-modal-close-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.reactions-modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}

body.light-theme .reactions-modal-close-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

body.light-theme .reactions-modal-close-btn:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #ef4444 !important;
}

/* Tab Bar */
.reactions-modal-tabs-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.reactions-modal-tabs-bar::-webkit-scrollbar {
  display: none !important;
}

body.light-theme .reactions-modal-tabs-bar {
  border-bottom: 1px solid #f1f5f9 !important;
}

.reactions-modal-tab-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 13px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}

.reactions-modal-tab-pill:hover {
  background: rgba(168, 85, 247, 0.12) !important;
  color: #ffffff !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

.reactions-modal-tab-pill.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(124, 58, 237, 0.35)) !important;
  border-color: #a855f7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.25) !important;
}

body.light-theme .reactions-modal-tab-pill {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

body.light-theme .reactions-modal-tab-pill:hover {
  background: #f3e8ff !important;
  border-color: #d8b4fe !important;
  color: #7c3aed !important;
}

body.light-theme .reactions-modal-tab-pill.active {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.3) !important;
}

.reactions-tab-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.reactions-tab-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.reactions-tab-count {
  font-size: 12px !important;
  opacity: 0.9 !important;
  font-weight: 700 !important;
}

/* Modal Body / User List */
.reactions-modal-body {
  padding: 8px 12px 16px 12px !important;
  overflow-y: auto !important;
  max-height: calc(85vh - 125px) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 220px !important;
}

.reactions-users-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.reactions-user-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.reactions-user-row:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

body.light-theme .reactions-user-row:hover {
  background: #f8fafc !important;
}

.reactions-user-avatar-wrap {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.reactions-user-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-sizing: border-box !important;
  display: block !important;
}

body:not(.light-theme) .reactions-user-avatar,
body:not(.light-theme) .reactions-user-avatar-fallback {
  border: 3px solid #0f1322 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
}

body.light-theme .reactions-user-avatar,
body.light-theme .reactions-user-avatar-fallback {
  border: 3px solid #ffffff !important;
  box-shadow: 0 4px 12px rgba(108, 0, 255, 0.15) !important;
}

.reactions-user-avatar-fallback {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

body.light-theme .reactions-user-avatar-fallback {
  background: #f3e8ff !important;
  color: #7c3aed !important;
}

/* Overlapped Verified Badge: Exact Dashboard Profile Silhouette Style */
.reactions-avatar-verified-badge-img {
  position: absolute !important;
  bottom: -4px !important;
  right: -3px !important;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  z-index: 15 !important;
  pointer-events: none !important;
}

body:not(.light-theme) .reactions-avatar-verified-badge-img {
  filter: drop-shadow(1.2px 0 0 #0f1322) drop-shadow(-1.2px 0 0 #0f1322) drop-shadow(0 1.2px 0 #0f1322) drop-shadow(0 -1.2px 0 #0f1322) !important;
}

body.light-theme .reactions-avatar-verified-badge-img {
  filter: drop-shadow(1.2px 0 0 #ffffff) drop-shadow(-1.2px 0 0 #ffffff) drop-shadow(0 1.2px 0 #ffffff) drop-shadow(0 -1.2px 0 #ffffff) !important;
}

.reactions-user-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.reactions-user-name-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.reactions-user-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

body.light-theme .reactions-user-name {
  color: #0f172a !important;
}

.reactions-you-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  background: rgba(168, 85, 247, 0.2) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  color: #c084fc !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body.light-theme .reactions-you-badge {
  background: #f3e8ff !important;
  border-color: #d8b4fe !important;
  color: #7c3aed !important;
}

.reactions-user-sub {
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin-top: 1px !important;
}

body.light-theme .reactions-user-sub {
  color: #64748b !important;
}

/* Right Side: Animated Lottie Reaction Icon (Replaces obsolete View button) */
.reactions-user-reaction-icon {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 3px !important;
  transition: transform 0.2s ease !important;
}

.reactions-user-reaction-icon:hover {
  transform: scale(1.15) !important;
}

body.light-theme .reactions-user-reaction-icon {
  background: rgba(147, 51, 234, 0.08) !important;
}

.reactions-user-lottie-item {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.reactions-user-lottie-item svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Loading & Empty States */
.reactions-modal-loading,
.reactions-modal-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 20px !important;
  text-align: center !important;
  color: #94a3b8 !important;
  font-size: 13.5px !important;
  gap: 12px !important;
  flex: 1 !important;
}

body.light-theme .reactions-modal-loading,
body.light-theme .reactions-modal-empty {
  color: #64748b !important;
}

.reactions-spinner {
  width: 28px !important;
  height: 28px !important;
  border: 3px solid rgba(168, 85, 247, 0.2) !important;
  border-top-color: #a855f7 !important;
  border-radius: 50% !important;
  animation: reactionsSpin 0.75s linear infinite !important;
}

@keyframes reactionsSpin {
  to { transform: rotate(360deg); }
}

/* Mobile Bottom Sheet Layout */
@media (max-width: 640px) {
  .post-reactions-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .post-reactions-modal-sheet {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 80vh !important;
    animation: reactionsSheetUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .reactions-modal-handle-wrap {
    display: flex !important;
  }

  @keyframes reactionsSheetUp {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .reactions-modal-header {
    padding: 12px 16px 10px 16px !important;
  }

  .reactions-modal-tabs-bar {
    padding: 10px 16px !important;
  }

  .reactions-modal-body {
    padding: 6px 10px 20px 10px !important;
    max-height: calc(80vh - 120px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TRADE PAGE UPGRADES: RETURN-TO-LIVE BUTTON & PROPER ACCOUNT MODAL
   ══════════════════════════════════════════════════════════════════════════════ */

/* Header Account Pill Image Icon */
.account-status-img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 4px !important;
}

/* Quotex-Style Return to Live Chart Floating Button */
.chart-return-live-btn {
  position: absolute !important;
  right: 14px !important;
  bottom: 6px !important;
  z-index: 55 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  user-select: none !important;
  border: 1.5px solid rgba(139, 92, 246, 0.45) !important;
  background: linear-gradient(135deg, #1c1538 0%, #291a52 100%) !important;
  color: #c4b5fd !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35), 0 0 10px rgba(139, 92, 246, 0.2) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, opacity 0.2s ease !important;
  animation: returnBtnFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.chart-return-live-btn svg {
  width: 16px !important;
  height: 16px !important;
  pointer-events: none !important;
}

.chart-return-live-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.55), 0 0 14px rgba(139, 92, 246, 0.35) !important;
  color: #ffffff !important;
}

.chart-return-live-btn:active {
  transform: scale(0.92) !important;
}

body.light-theme .chart-return-live-btn {
  background: linear-gradient(135deg, #6c00ff 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(108, 0, 255, 0.3) !important;
  box-shadow: 0 4px 14px rgba(108, 0, 255, 0.38) !important;
}

body.light-theme .chart-return-live-btn:hover {
  box-shadow: 0 6px 20px rgba(108, 0, 255, 0.52) !important;
}

@keyframes returnBtnFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 767px) {
  .chart-return-live-btn {
    right: 14px !important;
    bottom: 6px !important;
    width: 30px !important;
    height: 30px !important;
  }
  .chart-return-live-btn svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* ── Proper Account Selection Modal ── */
#balance-dropdown-menu.account-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  z-index: 9999999 !important;
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  border: none !important;
  box-shadow: none !important;
}

.account-modal-panel {
  width: 100% !important;
  max-width: 410px !important;
  background: #111526 !important;
  border: 1.5px solid rgba(139, 92, 246, 0.28) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(139, 92, 246, 0.18) !important;
  padding: 22px !important;
  box-sizing: border-box !important;
  animation: accountModalIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

@keyframes accountModalIn {
  0% {
    opacity: 0;
    transform: scale(0.93) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

body.light-theme .account-modal-panel {
  background: #ffffff !important;
  border: 1.5px solid rgba(108, 0, 255, 0.15) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2), 0 0 25px rgba(108, 0, 255, 0.08) !important;
  color: #0f172a !important;
}

.account-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding-bottom: 4px !important;
}

.account-modal-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.account-modal-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
  margin: 0 !important;
}

body.light-theme .account-modal-title {
  color: #0f172a !important;
}

.account-modal-subtitle {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

body.light-theme .account-modal-subtitle {
  color: rgba(15, 23, 42, 0.55) !important;
}

.account-modal-close-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.account-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
}

body.light-theme .account-modal-close-btn {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: #475569 !important;
}

body.light-theme .account-modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

.account-modal-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.account-card-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 15px !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.account-card-item:hover {
  background: rgba(139, 92, 246, 0.09) !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
  transform: translateY(-1px) !important;
}

.account-card-item:active {
  transform: scale(0.985) !important;
}

.account-card-item.active {
  border-color: #8b5cf6 !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16) 0%, rgba(108, 0, 255, 0.08) 100%) !important;
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.22) !important;
}

body.light-theme .account-card-item {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}

body.light-theme .account-card-item:hover {
  background: rgba(108, 0, 255, 0.05) !important;
  border-color: rgba(108, 0, 255, 0.25) !important;
}

body.light-theme .account-card-item.active {
  background: linear-gradient(135deg, rgba(108, 0, 255, 0.08) 0%, rgba(139, 92, 246, 0.04) 100%) !important;
  border-color: #6c00ff !important;
  box-shadow: 0 0 20px rgba(108, 0, 255, 0.12) !important;
}

.account-card-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.account-card-icon-wrap.real {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

.account-card-icon-wrap.demo {
  background: rgba(139, 92, 246, 0.12) !important;
  border-color: rgba(139, 92, 246, 0.25) !important;
}

.account-card-img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  display: block !important;
}

.account-card-info {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.account-card-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.account-card-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.1px !important;
}

body.light-theme .account-card-name {
  color: #0f172a !important;
}

.account-card-tag {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  text-transform: uppercase !important;
}

.account-card-tag.real {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #10b981 !important;
}

.account-card-tag.demo {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #a78bfa !important;
}

body.light-theme .account-card-tag.demo {
  color: #6c00ff !important;
  background: rgba(108, 0, 255, 0.12) !important;
}

.account-card-balance-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.account-card-balance {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

body.light-theme .account-card-balance {
  color: #0f172a !important;
}

.account-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.account-action-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.account-action-btn:hover {
  background: rgba(139, 92, 246, 0.25) !important;
  color: #ffffff !important;
  border-color: #8b5cf6 !important;
  transform: scale(1.08) !important;
}

body.light-theme .account-action-btn {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: #475569 !important;
}

body.light-theme .account-action-btn:hover {
  background: rgba(108, 0, 255, 0.12) !important;
  color: #6c00ff !important;
  border-color: #6c00ff !important;
}

.account-card-check {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Edit Demo Balance Drawer Inside Modal */
.account-modal-edit-drawer {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  animation: modalDrawerDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes modalDrawerDown {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

body.light-theme .account-modal-edit-drawer {
  background: #f1f5f9 !important;
  border-color: rgba(108, 0, 255, 0.15) !important;
}

.demo-drawer-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #8b5cf6 !important;
}

.demo-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.demo-currency-symbol {
  position: absolute !important;
  left: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #8b5cf6 !important;
  pointer-events: none !important;
}

#demo-balance-input {
  width: 100% !important;
  padding: 10px 12px 10px 28px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.3) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

#demo-balance-input:focus {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.35) !important;
}

body.light-theme #demo-balance-input {
  background: #ffffff !important;
  border-color: rgba(108, 0, 255, 0.25) !important;
  color: #0f172a !important;
}

.demo-preset-chips {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
}

.demo-chip-btn {
  padding: 5px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.demo-chip-btn:hover {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #ffffff !important;
  border-color: #8b5cf6 !important;
}

.demo-chip-btn.active {
  background: #8b5cf6 !important;
  color: #ffffff !important;
  border-color: #8b5cf6 !important;
}

body.light-theme .demo-chip-btn {
  border-color: rgba(0, 0, 0, 0.08) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: #475569 !important;
}

body.light-theme .demo-chip-btn.active {
  background: #6c00ff !important;
  color: #ffffff !important;
  border-color: #6c00ff !important;
}

.account-modal-confirm-btn {
  width: 100% !important;
  padding: 11px !important;
  background: linear-gradient(135deg, #6c00ff 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 16px rgba(108, 0, 255, 0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.account-modal-confirm-btn:hover {
  box-shadow: 0 6px 20px rgba(108, 0, 255, 0.5) !important;
  transform: translateY(-1px) !important;
}

.account-modal-confirm-btn:active {
  transform: scale(0.98) !important;
}