/* ========== PERFORMANCE GLOBAL OPTIMIZATION ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ══════════════════════════════════════════════════════
   NOVA CIPHER — SIGNATURE DESIGN SYSTEM
   Quantum banking interface · Cosmic luxury aesthetic
   ══════════════════════════════════════════════════════ */
/* ── NOVA VOID: Deep cosmic body background ── */
body.dark-mode {
  background: radial-gradient(ellipse at 20% 0%, rgba(173,111,251,0.06) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246,0.05) 0%, transparent 50%),
              #030209;
}

/* ── Glassmorphism card enhancement ── */
body.dark-mode .app {
  background: linear-gradient(180deg, #07051A 0%, #030209 100%);
}

/* ── NOVA CIPHER: Primary button ── */
.nova-btn-primary,
.primary-btn {
  background: linear-gradient(135deg, #8B5CF6, #A78BFA) !important;
  box-shadow: 0 0 30px rgba(139, 92, 246,0.35), 0 4px 20px rgba(0,0,0,0.3) !important;
  color: #030209 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* ── NOVA CIPHER: Secondary button ── */
.nova-btn-secondary,
.secondary-btn {
  background: linear-gradient(135deg, #AD6FFB, #7B22D0) !important;
  box-shadow: 0 0 35px rgba(173,111,251,0.28), 0 4px 20px rgba(0,0,0,0.3) !important;
}

/* ── Balance amount: Violet-tinted glow ── */
body.dark-mode .balance-amount {
  text-shadow: 0 0 40px rgba(139, 92, 246,0.3), 0 2px 12px rgba(0,0,0,0.6);
  color: #ECE8FF !important;
}

/* ── Active nav indicator: plasma teal glow ── */
body.dark-mode .bottom-nav .item.active::before {
  box-shadow: 0 0 12px rgba(139, 92, 246,0.8), 0 0 24px rgba(139, 92, 246,0.4);
}

/* ── Crypto item hover: quantum shimmer ── */
body.dark-mode .crypto-item:hover {
  background: rgba(139, 92, 246,0.04) !important;
  border-color: rgba(139, 92, 246,0.12) !important;
}

/* ── Card glow depth ── */

/* ── AURORA PEARL: light mode body ── */
body:not(.dark-mode) {
  background: linear-gradient(135deg, #EFECF8 0%, #E8E4F5 50%, #F0EDFA 100%);
}

/* ── Light mode app container ── */
body:not(.dark-mode) .app {
  background: #FAFAFF;
  box-shadow: 0 20px 60px rgba(123,34,208,0.1), 0 0 0 1px rgba(0,153,176,0.1);
  border-color: rgba(0,153,176,0.1);
}

/* ── Light mode header ── */
body:not(.dark-mode) .header {
  background: rgba(250, 250, 255, 0.94);
  border-bottom-color: rgba(0,153,176,0.1);
}

/* ── Balance card shimmer (second cosmic orb) ── */

/* ── Bottom nav: light mode aurora pearl ── */
body:not(.dark-mode) .bottom-nav {
  background: rgba(250,250,255,0.96);
  border-color: rgba(0,153,176,0.1);
}

/* ── Gradient text heading ── */
body.dark-mode .gradient-text {
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB, #FF6EBB) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Input focus: plasma teal glow ── */
body.dark-mode input:focus,
body.dark-mode textarea:focus {
  border-color: rgba(139, 92, 246,0.5) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246,0.12), 0 0 20px rgba(139, 92, 246,0.08) !important;
  outline: none !important;
}

/* ── Modal / sheet dark mode: glassmorphism ── */
body.dark-mode .modal-content,
body.dark-mode .sheet-content,
body.dark-mode [class*="modal"] {
  background: rgba(9, 7, 25, 0.96) !important;
  border: 1px solid rgba(139, 92, 246,0.08) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── Ticker bar: dark NOVA VOID ── */
body.dark-mode .nex-ticker-bar {
  background: linear-gradient(90deg, #030209 0%, #07051A 50%, #030209 100%);
  border-bottom-color: rgba(139, 92, 246,0.1);
}

/* ── Ticker price: teal accent ── */
body.dark-mode .nex-ticker-price {
  color: #A78BFA;
}

/* ── Balance card: extra cosmic depth inner ring ── */
@keyframes novaCipherShimmer {
  0%   { opacity: 0.4; transform: translateX(-100%); }
  100% { opacity: 0.0; transform: translateX(200%); }
}
.balance-card .nova-shimmer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(139, 92, 246,0.06) 50%, transparent 60%);
  animation: novaCipherShimmer 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* ══ END NOVA CIPHER SIGNATURE ══ */
body {
  margin: 0;
  font-family: 'Space Grotesk', 'DM Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.app,
.page,
.crypto-item,
.network-item,
.balance-card,
.action {
  will-change: transform, opacity;
}
button,
.action,
.crypto-item,
.network-item {
  touch-action: manipulation;
}
.gpu {
  transform: translateZ(0);
  backface-visibility: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Space Grotesk', 'DM Sans', 'Outfit', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* ── NOVA CIPHER — AURORA PEARL (LIGHT MODE) ── */
  --primary-color: #8B5CF6;          /* Vibrant Purple */
  --secondary-color: #7B22D0;        /* Rich Cosmic Violet */
  --accent-color: #D4900A;           /* Warm Meteorite Gold */
  --accent-cyan: #A78BFA;            /* Aurora Cyan */
  --accent-pink: #C0187A;            /* Deep Aurora Pink */
  --accent-green: #00936B;           /* Quantum Emerald */
  --accent-red: #A78BFA;             /* Purple Accent */
  --accent-purple: #7B22D0;          /* Deep Violet */

  --text-primary: #07030F;
  --text-secondary: #4E4468;
  --bg-primary: #EFECF8;             /* Soft Lavender Pearl */
  --bg-secondary: #FAFAFF;
  --card-bg: rgba(255, 255, 255, 0.97);
  --border-color: rgba(0, 153, 176, 0.12);
  --shadow-color: rgba(7, 3, 15, 0.08);

  --error-color: #D42042;
  --success-color: #00936B;
  --warning-color: #D4900A;

  --gradient-primary: linear-gradient(135deg, #8B5CF6, #A78BFA, #C4B5FD);
  --gradient-accent: linear-gradient(135deg, #8B5CF6, #A78BFA);
  --gradient-rainbow: linear-gradient(135deg, #8B5CF6, #A78BFA, #C4B5FD, #DDD6FE, #EDE9FE);
  --gradient-card: linear-gradient(135deg, #0F1535 0%, #0A0C28 40%, #160A35 100%);

  --pulse-shadow: 0 0 24px rgba(0, 153, 176, 0.35);
  --card-shadow: 0 4px 24px rgba(7,3,15,0.08), 0 1px 3px rgba(7,3,15,0.05);
  --hover-bg: rgba(0, 153, 176, 0.07);
  --hover-shadow: 0 12px 32px rgba(0, 153, 176, 0.18);
  --glow-effect: 0 0 18px rgba(0, 153, 176, 0.4);

  --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);

  --bottom-nav-bg: rgba(250, 250, 255, 0.97);
  --bottom-nav-shadow: 0 -1px 0 rgba(0,153,176,0.12), 0 -8px 32px rgba(7,3,15,0.07);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
}

body.dark-mode {
  /* ── NOVA CIPHER — NOVA VOID (DARK MODE) ── */
  --primary-color: #8B5CF6;          /* Vibrant Purple */
  --secondary-color: #AD6FFB;        /* Cosmic Violet */
  --accent-color: #FFD166;           /* Meteorite Gold */
  --accent-cyan: #C4B5FD;            /* Quantum Cyan */
  --accent-pink: #FF6EBB;            /* Nebula Pink */
  --accent-green: #A78BFA;           /* Aurora Green */
  --accent-red: #8B5CF6;             /* Purple Accent */
  --accent-purple: #C084FC;          /* Deep Violet */

  --text-primary: #ECE8FF;           /* Violet-tinted white */
  --text-secondary: #7B7499;         /* Muted violet-gray */
  --bg-primary: #030209;             /* Ultra-deep void */
  --bg-secondary: #07051A;           /* Deep space blue-violet */
  --card-bg: rgba(9, 7, 25, 0.96);
  --border-color: rgba(139, 92, 246, 0.1);
  --shadow-color: rgba(0, 0, 0, 0.7);

  --gradient-primary: linear-gradient(135deg, #8B5CF6, #A78BFA, #C4B5FD);
  --gradient-accent: linear-gradient(135deg, #8B5CF6, #A78BFA);
  --gradient-rainbow: linear-gradient(135deg, #8B5CF6, #A78BFA, #C4B5FD, #DDD6FE, #EDE9FE);
  --gradient-card: linear-gradient(135deg, #0A071E 0%, #060318 50%, #110721 100%);

  --pulse-shadow: 0 0 30px rgba(139, 92, 246, 0.35);
  --card-shadow: 0 8px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(139, 92, 246,0.08);
  --hover-bg: rgba(139, 92, 246, 0.07);
  --hover-shadow: 0 12px 40px rgba(139, 92, 246, 0.18);
  --glow-effect: 0 0 28px rgba(139, 92, 246, 0.45);

  --bottom-nav-bg: rgba(5, 3, 16, 0.97);
  --bottom-nav-shadow: 0 -1px 0 rgba(139, 92, 246,0.12), 0 -8px 40px rgba(0,0,0,0.7);
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 12px;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh; /* fallback for old browsers */
  min-height: 100dvh; /* dynamic — adjusts when browser chrome appears/disappears */
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 10px;
  height: 100vh; /* fallback */
  height: 100dvh;
}

.app {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 24px);
  max-width: 480px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px var(--border-color);
  border: 1px solid var(--border-color);
  position: relative;
}

body.dark-mode .app {
  background: #07051A;
  box-shadow: 0 20px 80px rgba(0,0,0,0.95), 0 0 0 1px rgba(139, 92, 246,0.07);
  border-color: rgba(139, 92, 246,0.07);
}

/* ── THEME SWITCHING: instant, no jank ──────────────────────────────────
   While the theme-switching class is present every transition is suppressed,
   so the dark/light swap is a single synchronous repaint — no cascade flicker,
   no bounce, no shake.  The class is removed on the very next animation frame
   by _applyThemeState(), restoring all interactive transitions immediately. */
body.theme-switching,
body.theme-switching *,
body.theme-switching *::before,
body.theme-switching *::after {
  transition: none !important;
  animation-duration: 0s !important;
}

.page {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  animation: fadeIn 0.4s var(--transition-bounce) forwards;
}

/* ========== SCROLLABLE CONTENT – INCREASED BOTTOM PADDING ========== */
.scrollable-page-content {
  flex: 1;
  overflow-y: auto;
  position: relative;
  /* 140px baseline + safe-area handles iOS home bar & Android gesture area */
  padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  scroll-behavior: smooth;
}

.scrollable-page-content::after {
  content: "";
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--bg-primary), transparent);
  pointer-events: none;
  z-index: 5;
}

/* Passcode pages - no bottom padding needed */
#passcode-setup-page .scrollable-page-content,
#passcode-lock-page .scrollable-page-content {
  padding-bottom: 0;
  min-height: 100%;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

#passcode-setup-page .scrollable-page-content::after,
#passcode-lock-page .scrollable-page-content::after {
  display: none;
}

.crypto-item:last-child,
.network-item:last-child {
  border-bottom: none;
}

/* Enhanced animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 25px 10px rgba(139, 92, 246, 0.3); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes bounceIn {
  0% { transform: scale(0.5); opacity: 0; }
  80% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes floatDollar {
  0% { transform: translate(0, 0) scale(0.8); opacity: 0.8; }
  50% { opacity: 0.6; }
  100% { transform: translate(var(--tx, 0), var(--ty, -140px)) scale(2); opacity: 0; }
}
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 15px var(--primary-color); }
  50% { box-shadow: 0 0 30px var(--primary-color), 0 0 10px var(--secondary-color); }
}
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

/* ==========================================
   NEXELTFI UPGRADE PACK — NEW COMPONENTS CSS
   ========================================== */
/* ── LIVE TICKER BAR ── */
.nex-ticker-bar {
  background: linear-gradient(90deg, #07051A 0%, #0f1628 50%, #07051A 100%);
  border-bottom: 1px solid rgba(139, 92, 246,0.12);
  overflow: hidden;
  height: 32px;
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}
.nex-ticker-bar::before,
.nex-ticker-bar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}
.nex-ticker-bar::before { left: 0; background: linear-gradient(90deg, #07051A, transparent); }
.nex-ticker-bar::after  { right: 0; background: linear-gradient(270deg, #07051A, transparent); }
body:not(.dark-mode) .nex-ticker-bar {
  background: linear-gradient(90deg, #EFECF8 0%, #F4F2FF 50%, #EFECF8 100%);
  border-bottom: 1px solid rgba(0,153,176,0.1);
}
body:not(.dark-mode) .nex-ticker-bar::before { background: linear-gradient(90deg, #EFECF8, transparent); }
body:not(.dark-mode) .nex-ticker-bar::after  { background: linear-gradient(270deg, #EFECF8, transparent); }

.nex-ticker-track {
  display: flex;
  align-items: center;
  gap: 0;
  animation: nex-ticker-scroll 38s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.nex-ticker-track:hover { animation-play-state: paused; }
@keyframes nex-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.nex-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
  font-size: 10.5px;
  font-weight: 600;
  color: #7B7499;
  border-right: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: color 0.2s;
}
.nex-ticker-item:hover { color: #e2e8f0; }
body:not(.dark-mode) .nex-ticker-item { color: #4E4468; }
body:not(.dark-mode) .nex-ticker-item:hover { color: #07030F; }
.nex-ticker-sym { font-weight: 700; color: #9B96B8; font-size: 10px; }
body:not(.dark-mode) .nex-ticker-sym { color: #4E4468; }
.nex-ticker-price { font-family: 'DM Mono', monospace; font-size: 10px; }
.nex-ticker-chg { font-size: 9.5px; font-weight: 700; }
.nex-ticker-chg.up   { color: #10B981; }
.nex-ticker-chg.down { color: #FF4D6A; }

/* ── MARKET INTEL BANNER ── */
.nex-intel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  margin: 12px 14px 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  position: relative;
}
.nex-intel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.nex-intel-item:not(:last-child) {
  border-right: 1px solid var(--border-color);
  padding-right: 8px;
  margin-right: 0;
}
.nex-intel-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.nex-intel-value {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'DM Mono', monospace;
  white-space: nowrap;
}
.nex-intel-value.fear    { color: #FF4D6A; }
.nex-intel-value.neutral { color: #D4900A; }
.nex-intel-value.greed   { color: #A78BFA; }
.nex-intel-value.up      { color: #10B981; }
.nex-intel-value.down    { color: #FF4D6A; }
.nex-intel-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 3px;
  background: currentColor;
  animation: nex-blink 2s infinite;
}
@keyframes nex-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── GAS TRACKER PILL ── */
.nex-gas-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(16,217,160,0.1);
  border: 1px solid rgba(16,217,160,0.2);
  border-radius: 20px;
  font-size: 9.5px;
  font-weight: 700;
  color: #A78BFA;
  cursor: pointer;
  transition: all 0.2s;
}
.nex-gas-pill:hover { background: rgba(16,217,160,0.18); transform: scale(1.04); }
.nex-gas-pill i { font-size: 8px; }

/* ── SECURITY SCORE CARD ── */
.nex-security-card {
  margin: 14px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  animation: fadeIn 0.5s var(--transition-bounce);
}
.nex-security-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.nex-security-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nex-security-title i { color: #A78BFA; }
.nex-security-score {
  font-size: 18px;
  font-weight: 800;
  color: #A78BFA;
  font-family: 'DM Mono', monospace;
}
.nex-security-bar {
  height: 6px;
  background: var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}
.nex-security-fill {
  height: 100%;
  background: linear-gradient(90deg, #8B5CF6, #A78BFA);
  border-radius: 6px;
  transition: width 1.2s cubic-bezier(0.34,1.56,0.64,1);
}
.nex-security-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nex-security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
}
.nex-security-row-label { color: var(--text-secondary); display: flex; align-items: center; gap: 5px; }
.nex-security-row-status { font-weight: 700; }
.nex-security-row-status.ok   { color: #A78BFA; }
.nex-security-row-status.warn { color: #D4900A; }
.nex-security-row-status.off  { color: #FF4D6A; }

/* ── PORTFOLIO TREND MINI CHART ── */
.nex-trend-card {
  margin: 0 14px 12px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  animation: fadeIn 0.6s var(--transition-bounce);
}
.nex-trend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.nex-trend-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nex-trend-tabs {
  display: flex;
  gap: 4px;
}
.nex-trend-tab {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s;
  border: none;
  background: transparent;
}
.nex-trend-tab.active {
  background: var(--primary-color);
  color: white;
}
.nex-sparkline-wrap {
  height: 50px;
  position: relative;
}
.nex-sparkline-wrap svg { width: 100%; height: 100%; }

/* ── QUICK STATS WIDGET ── */
.nex-quickstats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 14px 12px;
}
.nex-qs-card {
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--card-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  animation: fadeIn 0.7s var(--transition-bounce);
}
.nex-qs-card:hover { transform: translateY(-2px); box-shadow: var(--hover-shadow); }
.nex-qs-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nex-qs-label i { font-size: 9px; }
.nex-qs-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'DM Mono', monospace;
  letter-spacing: -0.5px;
}
.nex-qs-sub {
  font-size: 9px;
  color: var(--text-secondary);
  font-weight: 500;
}
.nex-qs-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 8.5px;
  font-weight: 700;
}
.nex-qs-badge.up   { background: rgba(16,217,160,0.12); color: #A78BFA; }
.nex-qs-badge.down { background: rgba(244,63,94,0.12); color: #FF4D6A; }

/* ── NOTIFICATION BADGE ── */
.nex-notif-bell {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  border-radius: 12px;

  cursor: pointer;

  color: var(--text-secondary);

  border: 1.5px solid var(--border-color);

  background: var(--hover-bg);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  flex-shrink: 0;

  /* SMOOTH EFFECTS ONLY */
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;

  /* STOP JITTER */
  transform: none !important;
  animation: none !important;
  will-change: auto;
}

.nex-notif-bell:hover {
  background: var(--hover-bg);

  color: var(--text-primary);

  border-color: var(--primary-color);

  /* REMOVE SCALE JUMP */
  transform: none !important;

  /* KEEP STATIC SHADOW */
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.15);
}

.nex-notif-bell:active {
  transform: scale(0.95) !important;
}

.nex-notif-badge {
  position: absolute;

  top: -5px;
  right: -5px;

  min-width: 17px;
  height: 17px;

  padding: 0 4px;

  background: #FF4D6A;

  border-radius: 999px;

  border: 2px solid var(--bg-secondary);

  font-size: 10px;
  font-weight: 800;

  color: #fff;

  display: none;

  align-items: center;
  justify-content: center;

  line-height: 1;

  box-shadow: 0 2px 8px rgba(244,63,94,0.55);

  z-index: 10;

  letter-spacing: 0;

  box-sizing: border-box;
}

/* ── NOTIFICATION FULL PAGE ── */
#nex-notif-page {
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
}

/* ── Header ─────────────────────────────────────────────────────────── */
.nxnp-header {
  display:flex; align-items:center; gap:12px;
  padding:16px 16px 14px;
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border-color);
  flex-shrink:0;
  position:relative;
}
.nxnp-header::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.3),rgba(168,85,247,.25),transparent);
}
.nxnp-back {
  width:34px; height:34px; border-radius:10px; border:1px solid var(--border-color);
  background:var(--hover-bg); color:var(--text-secondary);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:13px; transition:all 0.18s; flex-shrink:0; font-family:inherit;
}
.nxnp-back:hover { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
.nxnp-title-group { flex:1; display:flex; flex-direction:column; gap:1px; }
.nxnp-title { font-size:16px; font-weight:800; color:var(--text-primary); letter-spacing:-.02em; }
.nxnp-subtitle { font-size:10px; color:var(--text-secondary); font-weight:500; }
.nxnp-clear-all {
  font-size:11px; font-weight:700; color:var(--primary-color);
  cursor:pointer; border:1px solid rgba(139,92,246,.25);
  background:rgba(139,92,246,.08); padding:5px 11px;
  border-radius:10px; font-family:inherit;
  transition:all .15s;
}
.nxnp-clear-all:hover { background:rgba(139,92,246,.16); }

/* ── Search bar ─────────────────────────────────────────────────────── */
.nxnp-search-wrap {
  display:flex; align-items:center; gap:10px;
  margin:10px 14px 0;
  background:var(--hover-bg);
  border:1px solid var(--border-color);
  border-radius:12px; padding:8px 12px; flex-shrink:0;
  transition:border-color .15s;
}
.nxnp-search-wrap:focus-within { border-color:rgba(139,92,246,.4); background:var(--bg-secondary); }
.nxnp-search-icon { font-size:13px; color:var(--text-secondary); flex-shrink:0; }
.nxnp-search-input {
  flex:1; border:none; background:transparent; font-size:13px;
  color:var(--text-primary); font-family:inherit; outline:none; min-width:0;
}
.nxnp-search-input::placeholder { color:var(--text-secondary); }
.nxnp-search-clear {
  border:none; background:none; color:var(--text-secondary);
  cursor:pointer; font-size:12px; padding:2px 5px;
  border-radius:6px; font-family:inherit;
  transition:color .15s;
}
.nxnp-search-clear:hover { color:var(--text-primary); }

/* ── Live status bar ─────────────────────────────────────────────────── */
.nxnp-refresh-bar {
  display:flex; align-items:center; gap:6px;
  padding:7px 14px 0; font-size:10px;
  color:var(--text-secondary); flex-shrink:0;
}
.nxnp-refresh-dot {
  width:7px; height:7px; border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,.2);
  animation:nxnpDotPulse 2.4s ease-in-out infinite;
}
@keyframes nxnpDotPulse {
  0%,100%{ opacity:1; box-shadow:0 0 0 2px rgba(34,197,94,.25); }
  50%{ opacity:.55; box-shadow:0 0 0 5px rgba(34,197,94,.06); }
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.nxnp-tabs {
  display:flex; padding:10px 14px 8px;
  overflow-x:auto; flex-shrink:0;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; gap:6px;
}
.nxnp-tabs::-webkit-scrollbar { display:none; }
.nxnp-tab {
  padding:6px 13px; border-radius:10px; font-size:11px; font-weight:700;
  cursor:pointer; border:1px solid var(--border-color);
  color:var(--text-secondary); background:var(--hover-bg);
  white-space:nowrap; transition:all 0.16s;
  flex-shrink:0; font-family:inherit; letter-spacing:.01em;
}
.nxnp-tab:hover { border-color:rgba(139,92,246,.3); color:var(--primary-color); }
.nxnp-tab.active {
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff; border-color:transparent;
  box-shadow:0 3px 10px rgba(139,92,246,.3);
}

/* ── List ────────────────────────────────────────────────────────────── */
.nxnp-list {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:6px 14px 110px;
  display:flex; flex-direction:column; gap:6px;
}
.nxnp-list::-webkit-scrollbar { width:3px; }
.nxnp-list::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:2px; }

/* ── Card wrapper (swipe-to-delete) ─────────────────────────────────── */
.nxnp-wrap { position:relative; border-radius:14px; overflow:hidden; flex-shrink:0; }
.nxnp-del-bg {
  position:absolute; right:0; top:0; bottom:0; width:72px;
  background:linear-gradient(135deg,#ef4444,#f87171);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:3px;
  color:#fff; cursor:pointer; border-radius:0 14px 14px 0;
}
.nxnp-del-bg svg { width:18px; height:18px; stroke:#fff; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.nxnp-del-bg span { font-size:9px; font-weight:700; opacity:.9; }
.nxnp-del-bg:active { background:linear-gradient(135deg,#dc2626,#ef4444); }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.shake{ animation:shake 0.4s ease; }

/* ── Notification card ───────────────────────────────────────────────── */
.nxnp-card {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:12px;
  padding:13px 13px;
  background:var(--bg-secondary);
  border-radius:14px;
  border:1px solid var(--border-color);
  cursor:pointer; touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
  transition:transform 0.2s ease, border-color .15s;
  will-change:transform;
}
.nxnp-card:hover { border-color:rgba(139,92,246,.25); }
.nxnp-card.unread {
  background:linear-gradient(135deg,rgba(139,92,246,.04),var(--bg-secondary));
  border-color:rgba(139,92,246,.22);
}
.nxnp-card.unread::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:60%; min-height:28px; border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#7c3aed,#a855f7);
}

/* ── Card icon ───────────────────────────────────────────────────────── */
.nxnp-card-icon {
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; flex-shrink:0; font-weight:600;
  border:1px solid transparent;
}
.nxnp-card-icon.type-login       { background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(167,139,250,.08)); border-color:rgba(139,92,246,.18); color:#8B5CF6; }
.nxnp-card-icon.type-news        { background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(129,140,248,.08)); border-color:rgba(99,102,241,.18); color:#6366F1; }
.nxnp-card-icon.type-gas         { background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(251,191,36,.08)); border-color:rgba(245,158,11,.2); color:#F59E0B; }
.nxnp-card-icon.type-apy         { background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(52,211,153,.08)); border-color:rgba(16,185,129,.18); color:#10B981; }
.nxnp-card-icon.type-market      { background:linear-gradient(135deg,rgba(244,114,182,.16),rgba(251,113,133,.08)); border-color:rgba(244,114,182,.2); color:#F472B6; }
.nxnp-card-icon.type-pred        { background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(52,211,153,.08)); border-color:rgba(16,185,129,.18); color:#10B981; }
.nxnp-card-icon.type-virt        { background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(168,85,247,.08)); border-color:rgba(139,92,246,.18); color:#8B5CF6; }
.nxnp-card-icon.type-sell        { background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(96,165,250,.08)); border-color:rgba(59,130,246,.18); color:#3B82F6; }
.nxnp-card-icon.type-comment     { background:linear-gradient(135deg,rgba(168,85,247,.16),rgba(196,118,255,.08)); border-color:rgba(168,85,247,.18); color:#A855F7; }
.nxnp-card-icon.type-earn        { background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(217,119,6,.08)); border-color:rgba(245,158,11,.2); color:#D97706; }
.nxnp-card-icon.type-announcement{
  background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(168,85,247,.10));
  border-color:rgba(139,92,246,.28);
  box-shadow:0 0 0 3px rgba(139,92,246,.10);
  color:#8B5CF6;
}

/* ── Card body ───────────────────────────────────────────────────────── */
.nxnp-card-body { flex:1; min-width:0; }
.nxnp-card-title {
  font-size:13px; font-weight:700; color:var(--text-primary);
  margin-bottom:3px; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nxnp-card.unread .nxnp-card-title { color:var(--text-primary); }
.nxnp-card-msg {
  font-size:11.5px; color:var(--text-secondary); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nxnp-card-footer { display:flex; align-items:center; gap:6px; margin-top:5px; }
.nxnp-card-time {
  font-size:10px; color:var(--text-secondary); font-weight:500;
}
.nxnp-unread-dot {
  width:6px; height:6px; border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  flex-shrink:0; margin-left:auto;
  box-shadow:0 0 0 2px rgba(139,92,246,.2);
}

/* ── Skeleton ────────────────────────────────────────────────────────── */
.nxnp-skeleton {
  height:70px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(90deg,var(--hover-bg) 25%,var(--bg-secondary) 50%,var(--hover-bg) 75%);
  background-size:200% 100%; animation:nxnpSkel 1.2s ease infinite;
}
@keyframes nxnpSkel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Empty state ─────────────────────────────────────────────────────── */
.nxnp-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:70px 20px; text-align:center;
}
.nxnp-empty-icon {
  width:60px; height:60px; border-radius:18px;
  background:var(--hover-bg); border:1px solid var(--border-color);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); opacity:.6; margin-bottom:4px;
}
.nxnp-empty-icon svg { width:26px; height:26px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.nxnp-empty-title { font-size:14px; font-weight:700; color:var(--text-primary); }
.nxnp-empty-sub   { font-size:12px; color:var(--text-secondary); max-width:200px; line-height:1.5; }

/* ── Delete confirm modal ─────────────────────────────────────────────
   Moved inline into index.html (right next to the modal's HTML) so it can
   never be served from a stale cached copy of this external stylesheet.
   See index.html for the current rules. */

/* ── MARKET SENTIMENT GAUGE ── */
.nex-gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.nex-gauge-arc {
  width: 48px;
  height: 28px;
  position: relative;
  overflow: hidden;
}
.nex-gauge-arc svg { width: 100%; height: 100%; }

/* ── APP BANNER UPGRADE ── */
.nex-app-banner {
  background: linear-gradient(135deg, #0A071E, #060318, #110721);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(139, 92, 246,0.08);
  flex-shrink: 0;
}
.nex-brand { display: flex; align-items: center; gap: 8px; }
.nex-brand-icon {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  box-shadow: 0 0 14px rgba(139, 92, 246,0.3);
}
.nex-brand-name {
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, #e2e8f0, #7B7499);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.3px;
}
.nex-brand-tag {
  font-size: 8px;
  font-weight: 700;
  color: #8B5CF6;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: -2px;
}
.nex-header-right { display: flex; align-items: center; gap: 6px; }

/* ── LIVE PRICE ALERT TOAST ── */
/* ── DeFi APY SUMMARY ── */
@keyframes defiGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2), inset 0 1px 0 rgba(139, 92, 246, 0.1); }
  50% { box-shadow: 0 4px 30px rgba(139, 92, 246, 0.35), inset 0 1px 0 rgba(139, 92, 246, 0.15); }
}

.nex-defi-summary {
  margin: 0 14px 12px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(0, 200, 255, 0.08));
  border: 1.5px solid rgba(139, 92, 246, 0.2);
  border-radius: 18px;
  animation: fadeIn 0.8s var(--transition-bounce), defiGlow 4s ease infinite;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.nex-defi-summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 3s infinite;
  pointer-events: none;
}

.nex-defi-summary-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 1;
}
.nex-defi-rows { 
  display: flex; 
  flex-direction: column; 
  gap: 7px;
  position: relative;
  z-index: 1;
}
.nex-defi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  transition: all 0.2s ease;
  padding: 4px 0;
}
.nex-defi-row:hover {
  transform: translateX(4px);
  color: #8B5CF6;
}
.nex-defi-row-left { 
  display: flex; 
  align-items: center; 
  gap: 7px; 
  color: var(--text-primary); 
  font-weight: 600;
  transition: all 0.2s ease;
}
.nex-defi-row:hover .nex-defi-row-left {
  color: #8B5CF6;
}
.nex-defi-row-left img { 
  width: 18px; 
  height: 18px; 
  border-radius: 50%;
  transition: all 0.2s ease;
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.3));
}
.nex-defi-row:hover .nex-defi-row-left img {
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6));
  transform: scale(1.1);
}
.nex-defi-apy { 
  color: #8B5CF6; 
  font-weight: 800; 
  font-family: 'DM Mono', monospace; 
  font-size: 11px;
  background: linear-gradient(135deg, #8B5CF6, #A78BFA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.2s ease;
}
.nex-defi-row:hover .nex-defi-apy {
  filter: brightness(1.2);
}

/* Particle canvas */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   NEXELTFI PROFESSIONAL LANDING PAGE
   Professional Vault design + NexeltFi light/dark theme system.
   ═══════════════════════════════════════════════════════════ */
#nexeltfi-intro {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Space Grotesk', 'DM Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
#nexeltfi-intro::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 15% 10%, rgba(139,92,246,.12), transparent 34%),
    radial-gradient(circle at 85% 90%, rgba(167,139,250,.10), transparent 36%);
}
body.dark-mode #nexeltfi-intro {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(173,111,251,.06), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(139,92,246,.05), transparent 50%),
    #030209;
  color: #ECE8FF;
}

#nexeltfi-intro .pv-shell {
  width: 100%;
  max-width: 674px;
  min-height: 100%;
  margin: 0 auto;
  padding: 46px 38px 90px;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(250,250,255,.94));
  box-shadow: 0 0 60px rgba(123,34,208,.10);
}
body.dark-mode #nexeltfi-intro .pv-shell {
  background: linear-gradient(135deg, rgba(7,5,26,.97), rgba(3,2,9,.99));
  box-shadow: 0 0 60px rgba(139,92,246,.15);
}

#nexeltfi-intro .pv-header {
  padding: 0 38px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#nexeltfi-intro .pv-brand {
  font-size: 29px;
  font-weight: 900;
  letter-spacing: .8px;
  color: var(--text-primary);
}
#nexeltfi-intro .pv-header-actions { display:flex; align-items:center; gap:8px; }
#nexeltfi-intro .pv-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary-color);
  border: 1px solid rgba(139,92,246,.30);
  padding: 0 17px;
  border-radius: 36px;
  background: rgba(139,92,246,.08);
  text-transform: uppercase;
  white-space: nowrap;
}
#nexeltfi-intro .pv-status-dot {
  width: 11px; height: 11px; border-radius: 50%; background: #22c55e;
  animation: pvPulse 2s infinite;
}
@keyframes pvPulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.45)} 50%{opacity:.75;box-shadow:0 0 0 6px rgba(34,197,94,0)} }

#nexeltfi-intro .pv-hero { text-align:center; padding: 0 20px 18px; }
#nexeltfi-intro .pv-kicker {
  font-size: 27px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-color);
}
#nexeltfi-intro .pv-kicker span { color: var(--text-primary); }
#nexeltfi-intro .pv-hero p { margin:7px auto 0; max-width:440px; color:var(--text-secondary); font-size:15px; line-height:1.55; }

#nexeltfi-intro .pv-vault-card {
  margin: 0 0 30px;
  overflow: hidden;
  border-radius: 36px;
  border: 1.5px solid rgba(139,92,246,.25);
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(167,139,250,.04));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(139,92,246,.12), inset 0 1px 0 rgba(255,255,255,.5);
}
body.dark-mode #nexeltfi-intro .pv-vault-card { box-shadow:0 20px 60px rgba(139,92,246,.12),inset 0 1px 0 rgba(255,255,255,.05); }
#nexeltfi-intro .pv-vault-body { display:flex; align-items:center; gap:16px; padding:36px 38px 24px; }
#nexeltfi-intro .pv-shield-wrap { flex:0 0 178px; width:178px; height:178px; display:flex; align-items:center; justify-content:center; }
#nexeltfi-intro .pv-shield {
  width:178px; height:178px; object-fit:cover; border-radius:50%;
  border:2px solid rgba(139,92,246,.5); animation:pvFloatGlow 4s ease-in-out infinite;
}
@keyframes pvFloatGlow {
  0%,100%{transform:translateY(0) scale(1);box-shadow:0 0 15px rgba(139,92,246,.35);border-color:rgba(139,92,246,.5)}
  50%{transform:translateY(-8px) scale(1.02);box-shadow:0 10px 30px rgba(139,92,246,.7),0 0 20px rgba(167,139,250,.5);border-color:rgba(167,139,250,.9)}
}
#nexeltfi-intro .pv-vault-copy { flex:1; min-width:0; }
#nexeltfi-intro .pv-vault-copy h1 { font-size:23px; font-weight:900; color:var(--text-primary); margin-bottom:4px; letter-spacing:.5px; }
#nexeltfi-intro .pv-highlight { display:block; margin-bottom:6px; color:var(--primary-color); font-size:10px; font-weight:800; letter-spacing:1px; }
#nexeltfi-intro .pv-vault-copy p { color:var(--text-secondary); font-size:15px; line-height:1.45; margin-bottom:6px; }
#nexeltfi-intro .pv-vault-copy .pv-small { color:var(--text-secondary); opacity:.72; font-size:13px; }
#nexeltfi-intro .pv-actions { display:flex; gap:8px; padding:0 20px 20px; }
#nexeltfi-intro .pv-btn {
  flex:1; min-height:40px; padding:10px; border-radius:10px; cursor:pointer;
  font-size:10px; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:6px; transition:transform .2s,box-shadow .2s;
}
#nexeltfi-intro .pv-btn:active { transform:scale(.97); }
#nexeltfi-intro .pv-primary { border:0; color:#fff; background:linear-gradient(135deg,#8B5CF6,#A78BFA); box-shadow:0 8px 22px rgba(139,92,246,.25); }
#nexeltfi-intro .pv-secondary { background:transparent; border:1px solid rgba(139,92,246,.45); color:var(--primary-color); }

#nexeltfi-intro .pv-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; padding:0; }
#nexeltfi-intro .pv-feature,
#nexeltfi-intro .pv-badges > div {
  background:rgba(139,92,246,.055); border:1px solid rgba(139,92,246,.18); border-radius:12px;
  padding:12px 5px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px;
}
#nexeltfi-intro .pv-feature i,#nexeltfi-intro .pv-badges i { font-size:16px; color:var(--primary-color); }
#nexeltfi-intro .pv-feature span,#nexeltfi-intro .pv-badges span { font-size:8px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; line-height:1.2; }

#nexeltfi-intro .pv-dual { display:grid; grid-template-columns:1.2fr .8fr; gap:10px; padding:0 20px 16px; }
#nexeltfi-intro .pv-engine { background:linear-gradient(180deg,rgba(139,92,246,.08),rgba(139,92,246,.02)); border:1px solid rgba(139,92,246,.22); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:10px; }
#nexeltfi-intro .pv-engine-head { display:flex; justify-content:space-between; align-items:flex-start; }
#nexeltfi-intro .pv-panel-title { font-size:10px; font-weight:800; color:var(--text-primary); text-transform:uppercase; line-height:1.2; }
#nexeltfi-intro .pv-panel-title span { display:block; color:var(--primary-color); font-size:8px; margin-top:2px; }
#nexeltfi-intro .pv-toggle { width:34px; height:18px; border-radius:9px; background:#8B5CF6; border:1px solid #A78BFA; position:relative; }
#nexeltfi-intro .pv-toggle span { position:absolute; width:12px; height:12px; top:2px; left:18px; background:#fff; border-radius:50%; }
#nexeltfi-intro .pv-metrics,#nexeltfi-intro .pv-drawdown { background:rgba(0,0,0,.045); border:1px solid rgba(139,92,246,.10); border-radius:8px; padding:8px; }
body.dark-mode #nexeltfi-intro .pv-metrics,body.dark-mode #nexeltfi-intro .pv-drawdown { background:rgba(0,0,0,.2); }
#nexeltfi-intro .pv-metrics { display:flex; justify-content:space-between; gap:5px; }
#nexeltfi-intro .pv-metrics > div { text-align:center; flex:1; }
#nexeltfi-intro .pv-metrics small { display:block; color:var(--text-secondary); font-size:7px; text-transform:uppercase; margin-bottom:2px; }
#nexeltfi-intro .pv-metrics strong { font-size:11px; color:var(--text-primary); }
#nexeltfi-intro .pv-green { color:#10b981 !important; }
#nexeltfi-intro .pv-warning { color:#D4900A !important; }
#nexeltfi-intro .pv-red { color:#ef4444 !important; }
#nexeltfi-intro .pv-drawdown-head,#nexeltfi-intro .pv-slider-labels { display:flex; justify-content:space-between; font-size:8px; color:var(--text-secondary); }
#nexeltfi-intro .pv-drawdown-head b { color:var(--text-primary); }
#nexeltfi-intro .pv-slider { height:6px; margin:7px 0 6px; border-radius:3px; position:relative; background:linear-gradient(to right,#22c55e 0%,#eab308 50%,#ef4444 100%); }
#nexeltfi-intro .pv-slider span { position:absolute; top:-3px; left:35%; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid #A78BFA; box-shadow:0 0 8px rgba(0,0,0,.35),0 0 4px rgba(139,92,246,.7); }
#nexeltfi-intro .pv-chart-label { font-size:13px; color:var(--text-secondary); margin-top:2px; }
#nexeltfi-intro .pv-chart { height:80px; position:relative; }
#nexeltfi-intro .pv-chart svg { width:100%; height:100%; overflow:visible; }
#nexeltfi-intro .pv-chart-desc { margin:0; font-size:8px; color:var(--text-secondary); line-height:1.35; }
#nexeltfi-intro .pv-security { display:flex; flex-direction:column; gap:8px; }
#nexeltfi-intro .pv-sec-item { flex:1; background:rgba(139,92,246,.05); border:1px solid rgba(139,92,246,.18); border-radius:10px; padding:10px; display:flex; flex-direction:column; justify-content:center; }
#nexeltfi-intro .pv-sec-item small { font-size:8px; color:var(--text-secondary); margin-bottom:2px; }
#nexeltfi-intro .pv-sec-item strong { font-size:13px; color:var(--primary-color); display:flex; align-items:center; gap:4px; }
#nexeltfi-intro .pv-sec-item strong i { font-size:13px; }

#nexeltfi-intro .pv-section,#nexeltfi-intro .pv-stats-section { padding:0 20px 16px; }
#nexeltfi-intro .pv-section-title { font-size:11px; font-weight:800; color:var(--text-primary); text-transform:uppercase; margin-bottom:10px; letter-spacing:.05em; }
#nexeltfi-intro .pv-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
#nexeltfi-intro .pv-step { background:rgba(139,92,246,.05); border:1px solid rgba(139,92,246,.18); border-radius:12px; padding:12px 8px; text-align:center; position:relative; }
#nexeltfi-intro .pv-step > b { position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#8B5CF6; color:#fff; border:2px solid var(--bg-primary); font-size:10px; }
#nexeltfi-intro .pv-step > i { display:block; color:var(--primary-color); font-size:18px; margin:8px 0 6px; }
#nexeltfi-intro .pv-step h3 { font-size:13px; font-weight:800; color:var(--text-primary); text-transform:uppercase; margin-bottom:4px; }
#nexeltfi-intro .pv-step p { font-size:8px; line-height:1.4; color:var(--text-secondary); }
#nexeltfi-intro .pv-networks { display:flex; flex-wrap:wrap; gap:7px; }
#nexeltfi-intro .pv-networks span { display:inline-flex; align-items:center; gap:5px; padding:7px 9px; border-radius:10px; background:rgba(139,92,246,.055); border:1px solid rgba(139,92,246,.18); color:var(--text-secondary); font-size:8px; font-weight:700; }
#nexeltfi-intro .pv-networks i { color:var(--primary-color); }

#nexeltfi-intro .pv-stats-title { font-size:10px; font-weight:800; color:var(--primary-color); text-transform:uppercase; margin-bottom:8px; display:flex; gap:6px; align-items:center; }
#nexeltfi-intro .pv-stats-table { overflow:hidden; border-radius:14px; background:rgba(139,92,246,.045); border:1px solid rgba(139,92,246,.18); }
#nexeltfi-intro .pv-table-head,#nexeltfi-intro .pv-table-row { display:grid; grid-template-columns:1.2fr 1fr 1fr; align-items:center; gap:8px; }
#nexeltfi-intro .pv-table-head { padding:8px 12px; font-size:8px; color:var(--text-secondary); border-bottom:1px solid rgba(139,92,246,.10); }
#nexeltfi-intro .pv-table-head span:not(:first-child),#nexeltfi-intro .pv-value { text-align:right; }
#nexeltfi-intro .pv-table-row { padding:10px 12px; border-bottom:1px solid rgba(139,92,246,.10); font-size:10px; }
#nexeltfi-intro .pv-table-row:last-of-type { border-bottom:1px solid rgba(139,92,246,.10); }
#nexeltfi-intro .pv-asset { display:flex; align-items:center; gap:8px; min-width:0; }
#nexeltfi-intro .pv-asset-icon { width:24px; height:24px; flex:0 0 24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(139,92,246,.15); color:var(--primary-color); font-size:12px; font-weight:800; }
#nexeltfi-intro .pv-asset-icon.eth { background:rgba(99,102,241,.14); color:#6366f1; }
#nexeltfi-intro .pv-asset strong { display:block; font-size:10px; color:var(--text-primary); }
#nexeltfi-intro .pv-asset small { display:block; font-size:8px; color:var(--text-secondary); }
#nexeltfi-intro .pv-value { color:var(--text-secondary); font-size:13px; font-weight:700; }
#nexeltfi-intro .pv-status-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid rgba(139,92,246,.10); font-size:8px; color:var(--text-secondary); }
#nexeltfi-intro .pv-status-row:last-child { border-bottom:0; }
#nexeltfi-intro .pv-status-row strong { display:flex; align-items:center; gap:4px; font-size:8px; }

#nexeltfi-intro .pv-badges { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0 0 30px; }
#nexeltfi-intro .pv-footer { padding:25px 0 0; border-top:1px solid rgba(139,92,246,.12); text-align:center; display:flex; flex-direction:column; gap:4px; }
#nexeltfi-intro .pv-footer strong { font-size:12px; color:var(--text-primary); }
#nexeltfi-intro .pv-footer span { font-size:8px; color:var(--text-secondary); }

#nexeltfi-intro .pv-wallet-fab {
  position:fixed; right:max(30px,calc((100vw - 674px)/2 + 30px)); bottom:28px; z-index:10003;
  width:114px; height:114px; border:2px solid rgba(255,255,255,.15); border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; font-size:38px;
  background:linear-gradient(135deg,#8B5CF6,#A78BFA); box-shadow:0 8px 24px rgba(139,92,246,.5);
  transition:transform .25s cubic-bezier(.175,.885,.32,1.275),box-shadow .25s;
}
#nexeltfi-intro .pv-wallet-fab:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 12px 32px rgba(139,92,246,.7); }
#nexeltfi-intro .pv-wallet-fab:active { transform:scale(.95); }
#nexeltfi-intro .pv-wallet-fab.is-loading { cursor:wait; box-shadow:0 8px 28px rgba(139,92,246,.75); }

@media (max-width: 420px) {
  #nexeltfi-intro .pv-header { align-items:flex-start; }
  #nexeltfi-intro .pv-header-actions { flex-wrap:wrap; justify-content:flex-end; }
  #nexeltfi-intro .pv-status { font-size:7px; }
  #nexeltfi-intro .pv-vault-body { gap:12px; padding:16px; }
  #nexeltfi-intro .pv-shield-wrap,#nexeltfi-intro .pv-shield { width:76px; height:76px; flex-basis:76px; }
  #nexeltfi-intro .pv-feature-grid,#nexeltfi-intro .pv-badges { gap:5px; }
  #nexeltfi-intro .pv-feature,#nexeltfi-intro .pv-badges > div { padding:10px 3px; }
}
@media (max-width: 350px) {
  #nexeltfi-intro .pv-dual { grid-template-columns:1fr; }
  #nexeltfi-intro .pv-security { display:grid; grid-template-columns:1fr 1fr; }
  #nexeltfi-intro .pv-feature-grid,#nexeltfi-intro .pv-badges { grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  #nexeltfi-intro .pv-shield,#nexeltfi-intro .pv-status-dot { animation:none !important; }
}


/* ─────────────────────────────────────────────────────────────
   FINAL PROFESSIONAL-LANDING VISUAL OVERRIDES
   These rules intentionally come last so the landing page remains
   visually isolated from the legacy wallet CSS above.
   ───────────────────────────────────────────────────────────── */

#nexeltfi-intro {
  background:#05030d;
  color:#f4f0ff;
  font-family:"Space Grotesk","DM Sans","Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
#nexeltfi-intro::before{
  background:
    radial-gradient(circle at 15% 8%,rgba(124,58,237,.13),transparent 34%),
    radial-gradient(circle at 88% 88%,rgba(139,92,246,.10),transparent 35%),
    linear-gradient(180deg,#090513 0%,#07030f 48%,#05030d 100%);
}
#nexeltfi-intro .pv-shell{
  width:100%;
  max-width:674px;
  min-height:100%;
  margin:0 auto;
  padding:46px 38px 96px;
  background:transparent;
  box-shadow:none;
}
body.dark-mode #nexeltfi-intro .pv-shell{
  background:transparent;
  box-shadow:none;
}
#nexeltfi-intro .pv-header{
  padding:0;
  min-height:44px;
  margin-bottom:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
#nexeltfi-intro .pv-brand{
  font-size:29px;
  line-height:1;
  font-weight:900;
  letter-spacing:.7px;
  color:#f6f2ff;
}
#nexeltfi-intro .pv-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
}
#nexeltfi-intro .theme-toggle{
  width:38px;height:38px;flex:0 0 38px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;
  color:#b99cff;background:rgba(139,92,246,.08);
  border:1px solid rgba(139,92,246,.34);
  transition:.2s ease;
}
#nexeltfi-intro .theme-toggle:hover{transform:translateY(-1px);background:rgba(139,92,246,.15)}
#nexeltfi-intro .theme-toggle i{font-size:15px}
#nexeltfi-intro .pv-status{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:0 16px;
  border:1.5px solid rgba(139,92,246,.45);
  border-radius:22px;
  color:#a991e8;
  background:rgba(85,49,151,.15);
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
}
#nexeltfi-intro .pv-status-dot{
  width:11px;height:11px;flex:0 0 11px;
  border-radius:50%;
  background:#a78bfa;
  box-shadow:0 0 12px rgba(167,139,250,.6);
}
#nexeltfi-intro .pv-hero{
  text-align:center;
  padding:0 0 36px;
}
#nexeltfi-intro .pv-kicker{
  color:#f7f3ff;
  font-size:27px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
}
#nexeltfi-intro .pv-kicker::first-letter{color:#fbbf24}
#nexeltfi-intro .pv-kicker span{color:#f7f3ff}
#nexeltfi-intro .pv-hero p{
  margin:11px auto 0;
  max-width:560px;
  color:#9990a8;
  font-size:14px;
  line-height:1.5;
}
#nexeltfi-intro .pv-vault-card{
  margin:0 0 30px;
  overflow:hidden;
  border:2px solid rgba(139,92,246,.30);
  border-radius:36px;
  background:
    radial-gradient(circle at 15% 20%,rgba(139,92,246,.13),transparent 36%),
    linear-gradient(145deg,rgba(34,22,59,.90),rgba(19,12,36,.97));
  box-shadow:0 22px 65px rgba(0,0,0,.34),0 0 45px rgba(109,61,190,.09);
}
#nexeltfi-intro .pv-vault-body{
  display:grid;
  grid-template-columns:178px minmax(0,1fr);
  align-items:center;
  gap:24px;
  padding:36px 38px 24px;
}
#nexeltfi-intro .pv-shield-wrap{
  width:178px;height:178px;
  flex:0 0 178px;
  display:flex;align-items:center;justify-content:center;
}
#nexeltfi-intro .pv-shield{
  display:block;
  width:168px;height:168px;
  object-fit:cover;
  border-radius:50%;
  border:3px solid rgba(139,92,246,.72);
  box-shadow:0 0 0 6px rgba(139,92,246,.07),0 0 30px rgba(139,92,246,.45),0 14px 34px rgba(0,0,0,.45);
}
#nexeltfi-intro .pv-vault-copy{min-width:0}
#nexeltfi-intro .pv-vault-copy h1{
  margin:0 0 7px;
  color:#f6f2ff;
  font-size:22px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:.3px;
}
#nexeltfi-intro .pv-highlight{
  display:block;
  margin:0 0 15px;
  color:#a88cf0;
  font-size:15px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:1.5px;
}
#nexeltfi-intro .pv-vault-copy p{
  margin:0 0 12px;
  color:#aaa1b8;
  font-size:14px;
  line-height:1.48;
  text-transform:uppercase;
}
#nexeltfi-intro .pv-vault-copy .pv-small{
  margin:0;
  color:#766d81;
  font-size:12px;
  line-height:1.45;
  text-transform:none;
}
#nexeltfi-intro .pv-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  padding:0 38px 36px;
}
#nexeltfi-intro .pv-btn{
  min-height:68px;
  padding:0 18px;
  border-radius:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  cursor:pointer;
  font:inherit;
  font-size:15px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  transition:transform .2s ease,box-shadow .2s ease;
}
#nexeltfi-intro .pv-btn:hover{transform:translateY(-2px)}
#nexeltfi-intro .pv-primary{
  color:#08050f;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,#8750f4,#b18afc);
  box-shadow:0 10px 28px rgba(139,92,246,.24);
}
#nexeltfi-intro .pv-secondary{
  color:#a88cf0;
  border:2px solid rgba(139,92,246,.47);
  background:rgba(13,8,27,.28);
}
#nexeltfi-intro .pv-btn i{font-size:17px}
#nexeltfi-intro .pv-feature-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
  padding:0;
  margin:0 0 31px;
}
#nexeltfi-intro .pv-feature{
  min-height:116px;
  padding:18px 7px 14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:13px;text-align:center;
  border:2px solid rgba(139,92,246,.23);
  border-radius:23px;
  background:linear-gradient(145deg,rgba(29,18,51,.76),rgba(16,10,31,.91));
}
#nexeltfi-intro .pv-feature i{color:#a98cf3;font-size:23px}
#nexeltfi-intro .pv-feature span{color:#b0a7bd;font-size:11px;line-height:1.25;font-weight:800;text-transform:uppercase}
#nexeltfi-intro .pv-dual{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(210px,.77fr);
  gap:18px;
  padding:0;
  margin:0 0 32px;
}
#nexeltfi-intro .pv-engine{
  min-height:584px;
  padding:28px 27px 24px;
  display:flex;flex-direction:column;gap:19px;
  border:2px solid rgba(139,92,246,.28);
  border-radius:31px;
  background:linear-gradient(180deg,rgba(36,22,62,.78),rgba(17,10,33,.91));
  box-shadow:0 18px 45px rgba(0,0,0,.25);
}
#nexeltfi-intro .pv-engine-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:15px;
}
#nexeltfi-intro .pv-panel-title{
  color:#f3eefc;
  font-size:15px;
  line-height:1.22;
  font-weight:900;
  text-transform:uppercase;
}
#nexeltfi-intro .pv-panel-title span{color:#f3eefc;font-size:15px}
#nexeltfi-intro .pv-toggle{
  width:64px;height:35px;flex:0 0 64px;
  position:relative;border-radius:20px;
  border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(135deg,#8b52ef,#ad7bfa);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.18),0 4px 15px rgba(139,92,246,.24);
}
#nexeltfi-intro .pv-toggle span{
  position:absolute;width:26px;height:26px;right:4px;top:3px;
  border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.2);
}
#nexeltfi-intro .pv-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  padding:15px 10px;
  border:1px solid rgba(139,92,246,.12);
  border-radius:13px;background:rgba(6,3,15,.28);
}
#nexeltfi-intro .pv-metrics>div{text-align:center;padding:0 6px}
#nexeltfi-intro .pv-metrics small{display:block;margin-bottom:5px;color:#70677f;font-size:11px;line-height:1.1;text-transform:uppercase}
#nexeltfi-intro .pv-metrics strong{color:#f1edf8;font-size:16px;line-height:1}
#nexeltfi-intro .pv-green{color:#22c55e!important}
#nexeltfi-intro .pv-warning{color:#fbbf24!important}
#nexeltfi-intro .pv-drawdown{
  padding:16px;border:1px solid rgba(139,92,246,.12);border-radius:13px;background:rgba(6,3,15,.28)
}
#nexeltfi-intro .pv-drawdown-head,#nexeltfi-intro .pv-slider-labels{
  display:flex;justify-content:space-between;gap:10px;color:#847a92;font-size:11px;line-height:1.1
}
#nexeltfi-intro .pv-drawdown-head b{color:#eee9f7}
#nexeltfi-intro .pv-slider{
  height:8px;margin:15px 0 9px;position:relative;border-radius:8px;
  background:linear-gradient(90deg,#22c55e 0%,#eab308 50%,#ef4444 100%)
}
#nexeltfi-intro .pv-slider span{
  position:absolute;top:50%;left:36%;width:21px;height:21px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:#f8f5ff;border:3px solid #a78bfa;
  box-shadow:0 0 0 4px rgba(167,139,250,.22),0 3px 8px rgba(0,0,0,.4)
}
#nexeltfi-intro .pv-chart-label{margin-top:3px;color:#8d839b;font-size:12px;line-height:1.2}
#nexeltfi-intro .pv-chart{height:145px;position:relative;overflow:hidden;background:rgba(139,92,246,.015)}
#nexeltfi-intro .pv-chart svg{display:block;width:100%;height:100%;overflow:visible}
#nexeltfi-intro .pv-chart-desc{margin:0;color:#83798f;font-size:11px;line-height:1.42}
#nexeltfi-intro .pv-security{
  min-height:584px;display:grid;grid-template-rows:repeat(4,1fr);gap:17px
}
#nexeltfi-intro .pv-sec-item{
  min-height:0;padding:22px 20px;
  display:flex;flex-direction:column;justify-content:center;
  border:2px solid rgba(139,92,246,.23);border-radius:20px;
  background:linear-gradient(145deg,rgba(29,18,51,.70),rgba(15,9,29,.88))
}
#nexeltfi-intro .pv-sec-item small{margin-bottom:7px;color:#81778f;font-size:11px;line-height:1.25}
#nexeltfi-intro .pv-sec-item strong{display:flex;align-items:center;gap:7px;color:#a88cf0;font-size:14px;line-height:1.2;font-weight:800}
#nexeltfi-intro .pv-section{padding:0;margin:0 0 32px}
#nexeltfi-intro .pv-section-title{margin:0 0 24px;color:#f5f0fc;font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.7px;text-transform:uppercase}
#nexeltfi-intro .pv-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
#nexeltfi-intro .pv-step{
  min-height:180px;position:relative;padding:35px 18px 18px;text-align:center;
  border:2px solid rgba(139,92,246,.23);border-radius:22px;
  background:linear-gradient(145deg,rgba(29,18,51,.68),rgba(15,9,29,.88))
}
#nexeltfi-intro .pv-step>b{
  position:absolute;top:-16px;left:50%;width:34px;height:34px;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:3px solid #07030f;color:#fff;background:#8b52ef;font-size:14px;
  box-shadow:0 0 16px rgba(139,92,246,.35)
}
#nexeltfi-intro .pv-step>i{display:block;margin-bottom:12px;color:#a88cf0;font-size:25px}
#nexeltfi-intro .pv-step h3{margin:0 0 8px;color:#f0ebf7;font-size:13px;line-height:1.2;font-weight:900;text-transform:uppercase}
#nexeltfi-intro .pv-step p{margin:0;color:#7f758c;font-size:11px;line-height:1.45}
#nexeltfi-intro .pv-networks{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 32px}
#nexeltfi-intro .pv-networks span{display:inline-flex;align-items:center;gap:7px;padding:10px 13px;border:1px solid rgba(139,92,246,.22);border-radius:12px;color:#9d94aa;background:rgba(139,92,246,.045);font-size:11px;font-weight:700}
#nexeltfi-intro .pv-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:0;margin:0 0 30px}
#nexeltfi-intro .pv-badges>div{min-height:92px;padding:15px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;border:2px solid rgba(139,92,246,.20);border-radius:20px;background:rgba(139,92,246,.035)}
#nexeltfi-intro .pv-badges i{color:#a88cf0;font-size:18px}
#nexeltfi-intro .pv-badges span{color:#8e849b;font-size:10px;font-weight:800;text-transform:uppercase}
#nexeltfi-intro .pv-stats-section{padding:0;margin:0 0 30px}
#nexeltfi-intro .pv-stats-title{margin:0 0 12px;display:flex;align-items:center;gap:8px;color:#a88cf0;font-size:14px;font-weight:900;text-transform:uppercase}
#nexeltfi-intro .pv-footer{padding:25px 0 0;border-top:1px solid rgba(139,92,246,.13);text-align:center}
#nexeltfi-intro .pv-footer strong{display:block;margin-bottom:6px;color:#eeeaf6;font-size:14px}
#nexeltfi-intro .pv-footer span{color:#756b80;font-size:11px}
#nexeltfi-intro .pv-wallet-fab{
  position:fixed;right:max(30px,calc((100vw - 674px)/2 + 30px));bottom:28px;
  z-index:10003;width:114px;height:114px;
  border:2px solid rgba(255,255,255,.15);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;font-size:38px;
  background:radial-gradient(circle at 35% 30%,#a981fb 0%,#8650ed 60%,#7240d6 100%);
  box-shadow:0 12px 35px rgba(139,92,246,.48),0 0 34px rgba(139,92,246,.25);
  transition:transform .25s cubic-bezier(.175,.885,.32,1.275),box-shadow .25s
}
#nexeltfi-intro .pv-wallet-fab:hover{transform:scale(1.06) translateY(-3px)}
#nexeltfi-intro .pv-wallet-fab:active{transform:scale(.96)}
#nexeltfi-intro .pv-wallet-fab.is-loading{cursor:wait}
#nexeltfi-intro .pv-wallet-fab.is-loading i{animation:pvFabSpin .8s linear infinite}
@keyframes pvFabSpin{to{transform:rotate(360deg)}}

/* The supplied reference is the dark presentation. Light mode keeps
   exactly the same geometry while using NexeltFi's existing light palette. */
body:not(.dark-mode) #nexeltfi-intro{
  background:#f1eef8;color:#171021
}
body:not(.dark-mode) #nexeltfi-intro::before{
  background:
    radial-gradient(circle at 12% 5%,rgba(139,92,246,.13),transparent 34%),
    radial-gradient(circle at 88% 92%,rgba(196,181,253,.18),transparent 36%),
    linear-gradient(180deg,#faf9ff 0%,#f1eef8 100%)
}
body:not(.dark-mode) #nexeltfi-intro .pv-brand,
body:not(.dark-mode) #nexeltfi-intro .pv-kicker,
body:not(.dark-mode) #nexeltfi-intro .pv-kicker span,
body:not(.dark-mode) #nexeltfi-intro .pv-vault-copy h1,
body:not(.dark-mode) #nexeltfi-intro .pv-panel-title,
body:not(.dark-mode) #nexeltfi-intro .pv-panel-title span,
body:not(.dark-mode) #nexeltfi-intro .pv-section-title,
body:not(.dark-mode) #nexeltfi-intro .pv-step h3{color:#171021}
body:not(.dark-mode) #nexeltfi-intro .pv-status{color:#6d48bb;background:rgba(139,92,246,.07);border-color:rgba(109,72,187,.28)}
body:not(.dark-mode) #nexeltfi-intro .pv-hero p,
body:not(.dark-mode) #nexeltfi-intro .pv-vault-copy p,
body:not(.dark-mode) #nexeltfi-intro .pv-vault-copy .pv-small,
body:not(.dark-mode) #nexeltfi-intro .pv-feature span,
body:not(.dark-mode) #nexeltfi-intro .pv-chart-label,
body:not(.dark-mode) #nexeltfi-intro .pv-chart-desc,
body:not(.dark-mode) #nexeltfi-intro .pv-step p,
body:not(.dark-mode) #nexeltfi-intro .pv-footer span{color:#5e566b}
body:not(.dark-mode) #nexeltfi-intro .pv-vault-card,
body:not(.dark-mode) #nexeltfi-intro .pv-engine,
body:not(.dark-mode) #nexeltfi-intro .pv-sec-item,
body:not(.dark-mode) #nexeltfi-intro .pv-feature,
body:not(.dark-mode) #nexeltfi-intro .pv-step,
body:not(.dark-mode) #nexeltfi-intro .pv-badges>div{
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(245,241,252,.95));
  border-color:rgba(123,82,190,.22);
  box-shadow:0 14px 35px rgba(66,37,105,.07)
}
body:not(.dark-mode) #nexeltfi-intro .pv-metrics,
body:not(.dark-mode) #nexeltfi-intro .pv-drawdown{background:rgba(255,255,255,.65)}
body:not(.dark-mode) #nexeltfi-intro .pv-metrics strong,
body:not(.dark-mode) #nexeltfi-intro .pv-drawdown-head b{color:#2a2035}

/* Mobile: preserve the reference composition until it becomes genuinely
   too narrow, then stack only the pieces that cannot fit safely. */
@media(max-width:700px){
  #nexeltfi-intro .pv-shell{padding-left:clamp(18px,5.65vw,38px);padding-right:clamp(18px,5.65vw,38px)}
  #nexeltfi-intro .pv-brand{font-size:clamp(22px,4.3vw,29px)}
  #nexeltfi-intro .pv-status{font-size:clamp(9px,2.05vw,13px);padding:0 11px}
  #nexeltfi-intro .pv-kicker{font-size:clamp(20px,4vw,27px)}
  #nexeltfi-intro .pv-vault-body{grid-template-columns:130px minmax(0,1fr);gap:17px;padding:28px 24px 20px}
  #nexeltfi-intro .pv-shield-wrap{width:130px;height:130px;flex-basis:130px}
  #nexeltfi-intro .pv-shield{width:124px;height:124px}
  #nexeltfi-intro .pv-vault-copy h1{font-size:19px}
  #nexeltfi-intro .pv-highlight{font-size:13px}
  #nexeltfi-intro .pv-vault-copy p{font-size:12px}
  #nexeltfi-intro .pv-vault-copy .pv-small{font-size:10px}
  #nexeltfi-intro .pv-actions{padding:0 24px 27px}
  #nexeltfi-intro .pv-btn{min-height:58px;font-size:13px}
  #nexeltfi-intro .pv-engine,#nexeltfi-intro .pv-security{min-height:500px}
  #nexeltfi-intro .pv-wallet-fab{width:88px;height:88px;right:20px;bottom:20px;font-size:29px}
}
@media(max-width:560px){
  #nexeltfi-intro .pv-vault-body{grid-template-columns:1fr;text-align:center}
  #nexeltfi-intro .pv-shield-wrap{margin:0 auto}
  #nexeltfi-intro .pv-actions{grid-template-columns:1fr}
  #nexeltfi-intro .pv-feature-grid{grid-template-columns:repeat(2,1fr)}
  #nexeltfi-intro .pv-dual{grid-template-columns:1fr}
  #nexeltfi-intro .pv-security{grid-template-rows:none;grid-template-columns:repeat(2,1fr);min-height:0}
  #nexeltfi-intro .pv-sec-item{min-height:125px}
  #nexeltfi-intro .pv-steps{grid-template-columns:1fr}
  #nexeltfi-intro .pv-step{min-height:150px}
  #nexeltfi-intro .pv-badges{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:360px){
  #nexeltfi-intro .pv-shell{padding-top:30px}
  #nexeltfi-intro .pv-header{align-items:flex-start}
  #nexeltfi-intro .pv-status{max-width:165px;white-space:normal;text-align:center;line-height:1.1}
}

/* ═══════════════════════════════════════════════════════════
   NEX ONBOARDING — Terms / Privacy / Web3 Intro
   ═══════════════════════════════════════════════════════════ */
#nex-onboarding {
  position: fixed;
  inset: 0;
  z-index: 10001; /* above import page */
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  background: #f0f4ff;
}
body.dark-mode #nex-onboarding { background: #03070f; }

/* Shared animated BG orbs */
#nex-onboarding .nob-bg {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
#nex-onboarding .nob-orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
  animation: impOrbFloat 12s ease-in-out infinite;
}
#nex-onboarding .nob-orb-1 { width:380px;height:380px;background:rgba(139,92,246,.13);top:-90px;left:-90px;animation-delay:0s; }
#nex-onboarding .nob-orb-2 { width:300px;height:300px;background:rgba(139,92,246,.10);bottom:50px;right:-70px;animation-delay:-5s; }
#nex-onboarding .nob-orb-3 { width:220px;height:220px;background:rgba(16,217,160,.08);top:38%;left:28%;animation-delay:-9s; }
body:not(.dark-mode) #nex-onboarding .nob-orb-1 { background:rgba(139,92,246,.08); }
body:not(.dark-mode) #nex-onboarding .nob-orb-2 { background:rgba(139,92,246,.06); }
body:not(.dark-mode) #nex-onboarding .nob-orb-3 { background:rgba(16,217,160,.05); }
#nex-onboarding .nob-grid {
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(139,92,246,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.04) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at 50% 40%,black 30%,transparent 80%);
}
body:not(.dark-mode) #nex-onboarding .nob-grid {
  background-image:linear-gradient(rgba(139,92,246,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.03) 1px,transparent 1px);
}

/* ── Thin progress bar (replaces dots) ── */
.nob-progress {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 3px;
  background: rgba(139,92,246,.15);
  flex-shrink: 0;
}
.nob-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8B5CF6, #10D9A0);
  border-radius: 0 2px 2px 0;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
body.dark-mode .nob-progress { background: rgba(139,92,246,.20); }

/* ── Step counter label ── */
.nob-step-counter {
  position: relative;
  z-index: 2;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8B5CF6;
  padding: 8px 0 0;
  flex-shrink: 0;
}

/* ── Header section (icon + title + subtitle — NO SCROLL) ── */
.nob-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px 0;
  flex-shrink: 0;
  /* Isolate so background orbs can't create visual movement on header icon */
  isolation: isolate;
}

/* Icon badge — header (top of each step) */
.nob-icon {
  width: 62px; height: 62px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 12px;
  flex-shrink: 0;
  background: linear-gradient(145deg, #8B5CF6 0%, #6D28D9 100%);
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow:
    0 0 0 6px rgba(139,92,246,0.13),
    0 6px 22px rgba(139,92,246,0.38),
    inset 0 1px 0 rgba(255,255,255,0.22);
  animation: none !important;
  transition: none !important;
  isolation: isolate;
}
body.dark-mode .nob-icon {
  background: linear-gradient(145deg, #7C3AED 0%, #4C1D95 100%);
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 6px rgba(139,92,246,0.18),
    0 6px 26px rgba(139,92,246,0.45),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.nob-icon i {
  color: #fff !important;
  font-size: 24px;
  animation: none !important;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #fff !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22));
}

/* Title */
.nob-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -.4px;
  color: #160A35;
  margin: 0 0 4px;
  text-align: center;
}
body.dark-mode .nob-title { color: #ECE8FF; }

/* Subtitle */
.nob-subtitle {
  font-size: 0.74rem;
  color: #64748b;
  text-align: center;
  margin: 0 0 10px;
  line-height: 1.5;
}

/* ── Scrollable content area (replaces nob-body box) ── */
.nob-scroll {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  padding: 0 14px 6px;
  -webkit-overflow-scrolling: touch;
  /* Isolate so child cards are not affected by parent compositing */
  isolation: isolate;
}
.nob-scroll::-webkit-scrollbar { width: 3px; }
.nob-scroll::-webkit-scrollbar-track { background: transparent; }
.nob-scroll::-webkit-scrollbar-thumb { background: rgba(139,92,246,.3); border-radius: 2px; }

/* ══════════════════════════════════════
   ONBOARDING CARDS — rebuilt from scratch
   ══════════════════════════════════════ */
/* ── Card entrance animation ── */
@keyframes nobCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nobHlIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card wrapper ── */
.nob-card-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px 16px 13px 21px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 9px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(139,92,246,0.10);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 14px rgba(120,80,220,0.06),
    0 12px 32px rgba(120,80,220,0.04),
    inset 0 1px 0 rgba(255,255,255,0.80);
  animation: nobCardIn 0.42s cubic-bezier(.22,1,.36,1) both;
}

/* Stagger entrance delays */
.nob-scroll .nob-card-item:nth-child(1) { animation-delay: 0.06s; }
.nob-scroll .nob-card-item:nth-child(2) { animation-delay: 0.13s; }
.nob-scroll .nob-card-item:nth-child(3) { animation-delay: 0.20s; }
.nob-scroll .nob-card-item:nth-child(4) { animation-delay: 0.27s; }
.nob-scroll .nob-card-item:nth-child(5) { animation-delay: 0.34s; }
.nob-scroll .nob-card-item:nth-child(6) { animation-delay: 0.41s; }
.nob-scroll .nob-card-item:nth-child(7) { animation-delay: 0.48s; }

/* Left accent bar */
.nob-card-item::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #8B5CF6, #A78BFA);
  opacity: 0.75;
}

/* Watermark number */
.nob-card-item::after {
  content: attr(data-num);
  position: absolute;
  right: 13px; bottom: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 2.6rem; font-weight: 900;
  color: rgba(139,92,246,0.055);
  line-height: 1; letter-spacing: -0.06em;
  pointer-events: none; user-select: none;
}

body.dark-mode .nob-card-item {
  background: rgba(16,9,42,0.82);
  border-color: rgba(139,92,246,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 4px 20px rgba(0,0,0,0.35),
    0 12px 40px rgba(0,0,0,0.20),
    0 0 0 0.5px rgba(139,92,246,0.08);
}
body.dark-mode .nob-card-item::after { color: rgba(139,92,246,0.07); }

/* ── Card header: icon + title ── */
.nob-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.nob-card-header + p {
  margin-top: 0;
}

/* ── Icon badge ── */
.nob-card-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  animation: none !important;
  background: linear-gradient(145deg, #8B5CF6 0%, #6D28D9 100%);
  box-shadow:
    0 3px 10px rgba(139,92,246,0.42),
    0 0 0 1px rgba(255,255,255,0.14) inset,
    inset 0 1px 0 rgba(255,255,255,0.22);
}
body.dark-mode .nob-card-icon {
  background: linear-gradient(145deg, #7C3AED 0%, #5B21B6 100%);
  box-shadow:
    0 3px 14px rgba(139,92,246,0.55),
    0 0 0 1px rgba(255,255,255,0.08) inset;
}
#nex-onboarding .nob-card-icon i {
  color: #fff !important;
  font-size: 13px;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #fff !important;
  animation: none !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}

/* ── Card title ── */
.nob-pill {
  font-family: 'Outfit', sans-serif;
  font-size: 0.83rem;
  font-weight: 800;
  color: #140a33;
  letter-spacing: -0.01em;
  line-height: 1.3;
  display: block;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
body.dark-mode .nob-pill { color: #ddd6fe; }

/* ── Body text ── */
.nob-card-text { flex: 1; min-width: 0; }
.nob-card-text p,
.nob-card-item > p {
  font-size: 0.755rem;
  line-height: 1.72;
  color: #64748b;
  margin: 0;
  padding-left: 40px;
  margin-top: -2px;
}

/* Make onboarding titles feel integrated with the body instead of boxed */
.nob-pill {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.dark-mode .nob-card-text p,
body.dark-mode .nob-card-item > p { color: #8b96b3; }

/* ── Highlight / callout box ── */
.nob-highlight-box {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 16px 15px 21px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 9px;
  background: rgba(16,217,160,0.065);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(16,217,160,0.20);
  box-shadow:
    0 2px 12px rgba(16,217,160,0.08),
    0 8px 28px rgba(16,217,160,0.04),
    inset 0 1px 0 rgba(255,255,255,0.50);
  animation: nobHlIn 0.42s cubic-bezier(.22,1,.36,1) 0.05s both;
}

/* Teal left accent bar */
.nob-highlight-box::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #10D9A0, #059669);
}

/* Teal shimmer in top corner */
.nob-highlight-box::after {
  content: '';
  position: absolute;
  top: -30px; right: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,217,160,0.12) 0%, transparent 70%);
  pointer-events: none;
}

body.dark-mode .nob-highlight-box {
  background: rgba(16,217,160,0.07);
  border-color: rgba(16,217,160,0.17);
  box-shadow:
    0 2px 16px rgba(16,217,160,0.06),
    0 8px 32px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.nob-highlight-box > i {
  font-size: 15px;
  color: #10D9A0;
  margin-top: 3px;
  flex-shrink: 0;
  animation: none !important;
  filter: drop-shadow(0 0 4px rgba(16,217,160,0.50));
}
.nob-highlight-box p {
  font-size: 0.755rem;
  line-height: 1.72;
  color: #064e3b;
  margin: 0;
}
body.dark-mode .nob-highlight-box p { color: #6EE7B7; }
.nob-highlight-box strong {
  font-weight: 800;
  color: #047857;
}
body.dark-mode .nob-highlight-box strong { color: #34d399; }

/* ── Nav buttons row ── */
.nob-nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  padding: 6px 14px 16px;
  flex-shrink: 0;
}
.nob-nav-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

/* ── Scroll hint bar (shown until user scrolls to bottom) ── */
.nob-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(139,92,246,0.07);
  border: 1px solid rgba(139,92,246,0.14);
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #8B5CF6;
  letter-spacing: 0.01em;
  transition: opacity 0.3s ease, max-height 0.35s ease, padding 0.3s ease, border-width 0.3s ease;
  overflow: hidden;
  max-height: 50px;
}
.nob-scroll-hint i { font-size: 11px; animation: nob-bounce-arrow 1.4s ease-in-out infinite; }
@keyframes nob-bounce-arrow {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
.nob-scroll-hint.nob-hint-hidden {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  pointer-events: none;
}
body.dark-mode .nob-scroll-hint {
  background: rgba(139,92,246,0.10);
  border-color: rgba(139,92,246,0.22);
  color: #A78BFA;
}

.nob-btn-prev {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(139,92,246,.08);
  border: 1px solid rgba(139,92,246,.18);
  color: #8B5CF6;
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, transform .12s;
  display: flex; align-items: center; gap: 6px;
  -webkit-tap-highlight-color: transparent;
}
.nob-btn-prev:hover { background: rgba(139,92,246,.14); }
.nob-btn-prev:active { transform: scale(.97); }
body.dark-mode .nob-btn-prev { background: rgba(139,92,246,.10); border-color: rgba(139,92,246,.22); }

.nob-btn-next, .nob-btn-start {
  flex: 1;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8B5CF6, #A78BFA);
  border: none;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: .88rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .01em;
  box-shadow: 0 4px 16px rgba(139,92,246,.38);
  transition: filter .18s, transform .12s, box-shadow .18s, opacity .18s;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  -webkit-tap-highlight-color: transparent;
}
.nob-btn-next:hover, .nob-btn-start:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 22px rgba(139,92,246,.48);
  transform: translateY(-1px);
}
.nob-btn-next:active, .nob-btn-start:active {
  transform: translateY(0) scale(.98);
  filter: brightness(.97);
}

/* ── Locked button state (content not yet fully read) ── */
.nob-btn-next.nob-locked,
.nob-btn-start.nob-locked {
  opacity: 0.52;
  cursor: not-allowed;
  box-shadow: none;
  filter: none !important;
}
.nob-btn-next.nob-locked:hover,
.nob-btn-start.nob-locked:hover {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Shake animation when user tries to skip */
@keyframes nob-shake {
  0%,100% { transform: translateX(0); }
  16%     { transform: translateX(-6px); }
  33%     { transform: translateX(6px); }
  50%     { transform: translateX(-4px); }
  67%     { transform: translateX(4px); }
  83%     { transform: translateX(-2px); }
}
.nob-shake { animation: nob-shake 0.46s cubic-bezier(.36,.07,.19,.97) both !important; }

/* ── Scroll-gate toast notification ── */
#nob-toast {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 99999;
  background: #160a33;
  color: #ECE8FF;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 11px 18px 11px 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.30), 0 0 0 1px rgba(139,92,246,0.32);
  border: 1px solid rgba(139,92,246,0.30);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}
#nob-toast.nob-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#nob-toast i {
  font-size: 14px;
  color: #A78BFA;
  flex-shrink: 0;
}

/* ── Slide transitions ── */
.nob-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  opacity: 0;
  pointer-events: none;
  transform: translateX(40px);
  transition: opacity .32s cubic-bezier(.4,0,.2,1), transform .32s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.nob-step.active {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
}
.nob-step.exit-left {
  opacity: 0;
  transform: translateX(-40px);
}
.nob-step.exit-right {
  opacity: 0;
  transform: translateX(40px);
}

/* Phrase import page */
#phrase-import-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FAFAFF;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  padding: 16px;
}

body.dark-mode #phrase-import-page {
  background: #030209;
}

.import-container {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 28px;
  padding: 32px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(139, 92, 246, 0.12) inset;
  backdrop-filter: blur(20px);
  animation: slideUp 0.7s var(--transition-bounce);
  border: 1px solid rgba(139, 92, 246, 0.15);
}

body.dark-mode .import-container {
  background: rgba(9, 7, 25, 0.96);
  border: 1px solid rgba(139, 92, 246,0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(139, 92, 246,0.08) inset;
}
.import-title {
  text-align: center;
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  font-family: 'Outfit', sans-serif;
}
body.dark-mode .import-title {
  color: #ECE8FF;
}
.import-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-size: 1rem;
  line-height: 1.5;
}

.import-warning-banner {
  background: rgba(251, 146, 60, 0.08);
  border: 1px solid rgba(251, 146, 60, 0.25);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: slideDown 0.5s var(--transition-bounce);
}

body.dark-mode .import-warning-banner {
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.3);
}

.import-warning-banner i {
  color: #ea580c;
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

body.dark-mode .import-warning-banner i {
  color: #fb923c;
}

.import-warning-content {
  flex: 1;
}

.import-warning-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #92400e;
  margin-bottom: 4px;
}

body.dark-mode .import-warning-title {
  color: #FFD166;
}

.import-warning-text {
  font-size: 0.85rem;
  color: #b45309;
  line-height: 1.4;
}

body.dark-mode .import-warning-text {
  color: #fcd34d;
}
.phrase-input-container {
  margin-bottom: 24px;
  position: relative;
}
.phrase-textarea {
  width: 100%;
  height: 140px;
  padding: 18px;
  border-radius: 20px;
  border: 2px solid rgba(139, 92, 246, 0.4);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-size: 1rem;
  resize: none;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  line-height: 1.5;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}
.phrase-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.25), inset 0 2px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
}
body:not(.dark-mode) .phrase-textarea {
  background: rgba(0, 0, 0, 0.02);
  border: 2px solid rgba(139, 92, 246, 0.3);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}
body:not(.dark-mode) .phrase-textarea:focus {
  background: rgba(0, 0, 0, 0.03);
}
.phrase-counter {
  text-align: right;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.phrase-counter .valid {
  color: var(--success-color);
  font-weight: 600;
}
.import-status-fast {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 148px;
  margin: 0;
  text-align: center;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.04) 100%);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 24px 20px;
  border: 1.5px solid rgba(139, 92, 246, 0.25);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12), inset 0 2px 10px rgba(0,0,0,0.1);
  animation: fadeIn 0.5s ease-out;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-sizing: border-box;
}

body.dark-mode .import-status-fast {
  background: linear-gradient(135deg, rgba(173, 111, 251, 0.1) 0%, rgba(173, 111, 251, 0.05) 100%);
  border: 1.5px solid rgba(173, 111, 251, 0.3);
  box-shadow: 0 0 0 4px rgba(173, 111, 251, 0.15), inset 0 2px 10px rgba(0,0,0,0.3);
}

.import-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(139, 92, 246, 0.2);
  border-top-color: #8B5CF6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

body.dark-mode .import-spinner {
  border: 4px solid rgba(173, 111, 251, 0.2);
  border-top-color: #C084FC;
}

.import-message {
  font-weight: 700;
  color: #07030F;
  font-size: 1.15rem;
  letter-spacing: 0.4px;
}

body.dark-mode .import-message {
  color: #8B5CF6;
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.6);
}
.import-button {
  width: 100%;
  padding: 18px;
  border: none;
  border-radius: 18px;
  background: var(--gradient-primary);
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  margin-top: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  letter-spacing: 0.5px;
  box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.6);
}
.import-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.7s ease;
}
.import-button:hover::before {
  left: 100%;
}
.import-button:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 35px -8px rgba(139, 92, 246, 0.8);
}
.import-button.hidden { display: none; }
.security-warning {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 20px;
  padding: 18px;
  margin-top: 24px;
  font-size: 0.95rem;
  line-height: 1.5;
  animation: fadeIn 1s ease-out;
  backdrop-filter: blur(10px);
}
.warning-title {
  color: #7C3AED;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}
.warning-text {
  color: #991b1b;
  line-height: 1.6;
}
body.dark-mode .security-warning {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
}
body.dark-mode .warning-title {
  color: #f87171;
}
body.dark-mode .warning-text {
  color: #fca5a5;
}

/* ===== PASSCODE PAGES (new keypad style) ===== */
/* ── Passcode pages: full-screen immersive layout ─────────────── */
#passcode-setup-page,
#passcode-lock-page {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 10000;
  overflow: hidden;
  background: transparent;
}

/* Animated gradient background */
.nex-pc-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #0f0523 0%, #1a0840 40%, #0d1a3a 70%, #07091c 100%);
  z-index: 0;
  overflow: hidden;
}
body:not(.dark-mode) .nex-pc-bg {
  background: linear-gradient(145deg, #f8f4ff 0%, #ede0ff 35%, #dde8ff 70%, #f0f4ff 100%);
}
.nex-pc-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  animation: nxPcOrb 8s ease-in-out infinite alternate;
}
.nex-pc-orb1 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, #7c3aed, #a855f7);
  top: -80px; left: -60px;
  animation-delay: 0s;
}
.nex-pc-orb2 {
  width: 260px; height: 260px;
  background: radial-gradient(circle, #db2777, #ec4899);
  bottom: 60px; right: -50px;
  animation-delay: -3s;
}
.nex-pc-orb3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, #0ea5e9, #6366f1);
  bottom: 200px; left: 40px;
  animation-delay: -6s;
  opacity: 0.35;
}
body:not(.dark-mode) .nex-pc-orb { opacity: 0.22; }
@keyframes nxPcOrb {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(20px,30px) scale(1.12); }
}

/* Content wrapper */
.nex-pc-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(28px, 6vh, 56px) clamp(20px, 6vw, 32px) clamp(20px, 4vh, 40px);
  box-sizing: border-box;
  text-align: center;
  overflow-y: auto;
}

/* Lock icon badge */
.nex-pc-icon {
  width: clamp(68px, 12vw, 84px);
  height: clamp(68px, 12vw, 84px);
  min-width: clamp(68px, 12vw, 84px);
  min-height: clamp(68px, 12vw, 84px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  align-self: center;
  border-radius: clamp(20px, 3.5vw, 26px);
  background: rgba(139, 92, 246, 0.18);
  border: 1.5px solid rgba(139, 92, 246, 0.35);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: clamp(14px, 2.5vh, 22px);
  color: #a855f7;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(139,92,246,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
  animation: nxPcIconBounce 0.6s var(--transition-bounce, cubic-bezier(.34,1.56,.64,1));
}
body:not(.dark-mode) .nex-pc-icon {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.25);
  box-shadow: 0 8px 24px rgba(139,92,246,0.15);
}
@keyframes nxPcIconBounce {
  0%   { transform: scale(0.7) translateY(12px); opacity: 0; }
  100% { transform: scale(1) translateY(0);      opacity: 1; }
}

/* Title */
.nex-pc-title {
  font-family: '"Syne"', '"Outfit"', sans-serif;
  font-size: clamp(1.65rem, 5.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
  background: linear-gradient(135deg, #c4b5fd, #e879f9, #fb7185);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body:not(.dark-mode) .nex-pc-title {
  background: linear-gradient(135deg, #7c3aed, #a855f7, #db2777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle */
.nex-pc-sub {
  color: rgba(255,255,255,0.5);
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 clamp(18px, 3.5vh, 28px);
  letter-spacing: 0.01em;
}
body:not(.dark-mode) .nex-pc-sub { color: rgba(80,40,120,0.6); }

/* Dot indicators */
.nex-pc-dots {
  display: flex;
  gap: 14px;
  margin-bottom: clamp(6px, 1.5vh, 12px);
}
.nex-pc-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, 0.55);
  background: transparent;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s ease;
  display: inline-block;
}
.nex-pc-dot.filled {
  background: linear-gradient(135deg, #a855f7, #db2777);
  border-color: transparent;
  box-shadow: 0 0 10px rgba(168,85,247,0.6), 0 0 20px rgba(168,85,247,0.25);
  transform: scale(1.2);
}
.nex-pc-dot.error {
  background: #ef4444;
  border-color: transparent;
  box-shadow: 0 0 10px rgba(239,68,68,0.6);
  animation: nxPcDotShake 0.4s ease;
}
@keyframes nxPcDotShake {
  0%,100% { transform: translateX(0) scale(1.2); }
  25%      { transform: translateX(-4px) scale(1.2); }
  75%      { transform: translateX(4px) scale(1.2); }
}

/* Prompt / status text */
.nex-pc-prompt {
  color: rgba(255,255,255,0.6);
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 20px;
  margin: 0 0 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body:not(.dark-mode) .nex-pc-prompt { color: rgba(80,40,120,0.55); }

/* Error text */
.nex-pc-error {
  color: #f87171;
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 20px;
  margin-top: 10px;
  animation: nxPcErrShake 0.38s ease;
}
@keyframes nxPcErrShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  60%     { transform: translateX(6px); }
}

/* Forgot link */
.nex-pc-forgot {
  color: rgba(255,255,255,0.35);
  font-size: 0.8rem;
  margin-top: clamp(16px, 3vh, 26px);
  cursor: pointer;
  transition: color 0.2s;
  border-bottom: 1px dashed rgba(255,255,255,0.18);
  padding-bottom: 2px;
}
body:not(.dark-mode) .nex-pc-forgot { color: rgba(100,60,160,0.45); border-color: rgba(100,60,160,0.2); }
.nex-pc-forgot:hover { color: #a855f7; border-color: #a855f7; }
.glass-card {
  background: var(--card-bg);
  border-radius: 32px;
  padding: 40px 32px;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(20px);
  animation: slideUp 0.7s var(--transition-bounce);
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(173, 111, 251, 0.2) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 100%, rgba(236, 72, 153, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.glass-card > * {
  position: relative;
  z-index: 1;
}
body:not(.dark-mode) .glass-card {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(173, 111, 251, 0.2);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.15);
}
.gradient-text {
  color: var(--text-primary);
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: -0.5px;
  font-family: 'Syne', 'Outfit', sans-serif;
}
body.dark-mode .gradient-text {
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB, #FF6EBB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
/* Legacy passcode classes kept for compat — new design uses .nex-pc-* */
.passcode-prompt { display: none; }
.passcode-dots   { display: none; }
.numeric-keypad {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.5vh, 12px);
  margin-top: clamp(12px, 2.5vh, 20px);
  margin-bottom: 4px;
}
.keypad-row {
  display: flex;
  gap: clamp(8px, 2vw, 12px);
  justify-content: center;
}

/* ── 3-D keyboard-key style (matches image) ─────────────────────
   Larger squarish tiles with heavy rounded corners, strong bottom-
   wall shadow that compresses on :active — real key-press feel.
   ─────────────────────────────────────────────────────────────── */
.keypad-btn {
  width: clamp(72px, 22vw, 90px);
  height: clamp(72px, 22vw, 90px);
  min-width: clamp(72px, 22vw, 90px);
  min-height: clamp(72px, 22vw, 90px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 20px;
  background: linear-gradient(175deg, #f0eaff 0%, #e6dafc 55%, #daccf8 100%);
  color: #2d1b6b;
  font-size: 1.9rem;
  font-weight: 800;
  font-family: 'Outfit', 'DM Sans', sans-serif;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  border: 1.5px solid rgba(139, 92, 246, 0.22);
  border-bottom: none;
  /* bottom wall — gives the raised-key illusion */
  box-shadow:
    0 7px 0 0 #baacea,
    0 10px 18px rgba(80, 40, 180, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.72);
  outline: none;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    background 0.12s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
}

/* Top-face gloss */
.keypad-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(155deg,
    rgba(255,255,255,0.52) 0%,
    rgba(255,255,255,0.06) 52%,
    transparent 100%);
  pointer-events: none;
}

.keypad-btn:hover {
  background: linear-gradient(175deg, #ece0ff 0%, #dbd0fc 55%, #cfc2f5 100%);
  box-shadow:
    0 8px 0 0 #a894e2,
    0 12px 22px rgba(80, 40, 180, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.78);
  transform: translateY(-1px);
}

/* Press: wall collapses to 2px, key drops 5px — tactile punch-down */
.keypad-btn:active {
  transform: translateY(5px) !important;
  box-shadow:
    0 2px 0 0 #baacea,
    0 3px 6px rgba(80, 40, 180, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.5) !important;
  background: linear-gradient(175deg, #ddd0f8 0%, #cfc0f0 55%, #c4b4ec 100%) !important;
  transition-duration: 0.05s;
}

.keypad-btn i { font-size: 1.55rem; }

/* ── Done button ─────────────────────────────────────────────── */
#setup-done, #lock-done {
  background: linear-gradient(175deg, #a855f7 0%, #8b5cf6 55%, #7c3aed 100%) !important;
  color: #fff !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
  box-shadow:
    0 7px 0 0 #5b21b6,
    0 10px 22px rgba(139, 92, 246, 0.42),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.22);
}
#setup-done:hover, #lock-done:hover {
  background: linear-gradient(175deg, #b96dff 0%, #9d6cf8 55%, #8b5cf6 100%) !important;
  box-shadow:
    0 8px 0 0 #5b21b6,
    0 12px 26px rgba(139, 92, 246, 0.52),
    inset 0 1px 0 rgba(255,255,255,0.32) !important;
}
#setup-done:active, #lock-done:active {
  transform: translateY(5px) !important;
  background: linear-gradient(175deg, #7c3aed 0%, #6d28d9 100%) !important;
  box-shadow:
    0 2px 0 0 #4c1d95,
    0 3px 8px rgba(139, 92, 246, 0.32),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

/* ── Clear / backspace button ────────────────────────────────── */
#setup-clear, #lock-clear {
  background: linear-gradient(175deg, #fff1f1 0%, #fce9e9 55%, #fad9d9 100%) !important;
  color: #dc2626 !important;
  border-color: rgba(248, 113, 113, 0.32) !important;
  box-shadow:
    0 7px 0 0 #f5a8a8,
    0 10px 16px rgba(220, 38, 38, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.78) !important;
}
#setup-clear:hover, #lock-clear:hover {
  background: linear-gradient(175deg, #ffe5e5 0%, #fbd7d7 55%, #f8c9c9 100%) !important;
  box-shadow:
    0 8px 0 0 #f09292,
    0 12px 22px rgba(220, 38, 38, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.82) !important;
}
#setup-clear:active, #lock-clear:active {
  transform: translateY(5px) !important;
  background: linear-gradient(175deg, #fcd5d5 0%, #f9c2c2 100%) !important;
  box-shadow:
    0 2px 0 0 #f5a8a8,
    0 3px 6px rgba(220, 38, 38, 0.13),
    inset 0 1px 0 rgba(255,255,255,0.52) !important;
}

/* ── DARK MODE ───────────────────────────────────────────────── */
body.dark-mode .keypad-btn {
  background: linear-gradient(175deg, #2e2250 0%, #251b44 55%, #1e1538 100%) !important;
  color: #e2d9ff !important;
  border-color: rgba(139, 92, 246, 0.28) !important;
  box-shadow:
    0 7px 0 0 #120d28,
    0 10px 22px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
body.dark-mode .keypad-btn::after {
  background: linear-gradient(155deg,
    rgba(255,255,255,0.065) 0%,
    transparent 52%) !important;
}
body.dark-mode .keypad-btn:hover {
  background: linear-gradient(175deg, #3a2b62 0%, #2e2054 55%, #241848 100%) !important;
  box-shadow:
    0 8px 0 0 #120d28,
    0 12px 26px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255,255,255,0.09) !important;
}
body.dark-mode .keypad-btn:active {
  background: linear-gradient(175deg, #231a3d 0%, #1c1433 100%) !important;
  box-shadow:
    0 2px 0 0 #120d28,
    0 3px 8px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
body.dark-mode #setup-done,
body.dark-mode #lock-done {
  background: linear-gradient(175deg, #9d6cf8 0%, #8b5cf6 55%, #7c3aed 100%) !important;
  box-shadow:
    0 7px 0 0 #3b1fa8,
    0 10px 24px rgba(139, 92, 246, 0.48),
    inset 0 1px 0 rgba(255,255,255,0.17) !important;
}
body.dark-mode #setup-done:hover,
body.dark-mode #lock-done:hover {
  background: linear-gradient(175deg, #b07eff 0%, #9d6cf8 55%, #8b5cf6 100%) !important;
  box-shadow:
    0 8px 0 0 #3b1fa8,
    0 12px 28px rgba(139, 92, 246, 0.58),
    inset 0 1px 0 rgba(255,255,255,0.21) !important;
}
body.dark-mode #setup-done:active,
body.dark-mode #lock-done:active {
  box-shadow:
    0 2px 0 0 #3b1fa8,
    0 3px 8px rgba(139, 92, 246, 0.38),
    inset 0 1px 0 rgba(255,255,255,0.09) !important;
}
body.dark-mode #setup-clear,
body.dark-mode #lock-clear {
  background: linear-gradient(175deg, #3d1a1a 0%, #321414 55%, #280f0f 100%) !important;
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.24) !important;
  box-shadow:
    0 7px 0 0 #1a0808,
    0 10px 18px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255,255,255,0.055) !important;
}
body.dark-mode #setup-clear:hover,
body.dark-mode #lock-clear:hover {
  background: linear-gradient(175deg, #4a2020 0%, #3d1818 100%) !important;
  box-shadow:
    0 8px 0 0 #1a0808,
    0 12px 22px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255,255,255,0.075) !important;
}
body.dark-mode #setup-clear:active,
body.dark-mode #lock-clear:active {
  box-shadow:
    0 2px 0 0 #1a0808,
    0 3px 6px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.passcode-error {
  color: var(--error-color);
  font-size: 0.9rem;
  margin-top: 20px;
  min-height: 20px;
  font-weight: 500;
  animation: shake 0.4s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.text-secondary {
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.text-secondary:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* ===== REST OF STYLES (all original styles from the full wallet) ===== */
/* Enhanced header */
.header {
  padding: 18px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  animation: fadeIn 0.8s var(--transition-bounce);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.08);
}
body.dark-mode .header {
  background: rgba(5, 3, 18, 0.92);
  box-shadow: 0 4px 24px -5px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(139, 92, 246,0.08);
  border-bottom-color: rgba(139, 92, 246,0.08);
}
.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.avatar {
  width: 48px;
  height: 48px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  font-size: 22px;
  color: white;
  animation: pulse 3s infinite;
  box-shadow: var(--pulse-shadow);
  position: relative;
  overflow: hidden;
}
.avatar::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: rotate(45deg);
  animation: shimmer 4s infinite;
  z-index: 1;
  pointer-events: none;
}
/* Profile photo must sit above the shimmer layer */
#header-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: none;
  z-index: 2;
}
#header-avatar-initials {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  width: 100%;
  height: 100%;
  font-size: 22px;
}

#header-avatar-initials i {
  font-size: 18px;
  color: white;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6));
  transition: filter 0.3s ease;
  position: absolute;
  opacity: 0;
}

/* Cycle through camera, male, female avatars */
#header-avatar-initials .avatar-icon {
  animation: avatarCycle 9s linear infinite;
  animation-fill-mode: both;
}

@keyframes avatarCycle {
  0%     { opacity: 1; }
  32.9%  { opacity: 1; }
  33%    { opacity: 0; }
  100%   { opacity: 0; }
}

#header-avatar-initials .avatar-male {
  animation: avatarMaleCycle 9s linear infinite;
  animation-fill-mode: both;
}

@keyframes avatarMaleCycle {
  0%     { opacity: 0; }
  33%    { opacity: 0; }
  33.1%  { opacity: 1; }
  65.9%  { opacity: 1; }
  66%    { opacity: 0; }
  100%   { opacity: 0; }
}

#header-avatar-initials .avatar-female {
  animation: avatarFemaleCycle 9s linear infinite;
  animation-fill-mode: both;
}

@keyframes avatarFemaleCycle {
  0%     { opacity: 0; }
  66%    { opacity: 0; }
  66.1%  { opacity: 1; }
  99.9%  { opacity: 1; }
  100%   { opacity: 0; }
}

/* On hover: add glow + float WITHOUT killing the cycle animations */
.avatar-clickable:hover #header-avatar-initials .avatar-icon {
  animation: avatarCycle 9s linear infinite, float 1.5s ease-in-out infinite;
  animation-fill-mode: both;
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.9));
}
.avatar-clickable:hover #header-avatar-initials .avatar-male {
  animation: avatarMaleCycle 9s linear infinite, float 1.5s ease-in-out infinite;
  animation-fill-mode: both;
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.9));
}
.avatar-clickable:hover #header-avatar-initials .avatar-female {
  animation: avatarFemaleCycle 9s linear infinite, float 1.5s ease-in-out infinite;
  animation-fill-mode: both;
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.9));
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
/* When photo is loaded: kill shimmer + pulse so they never overlay the photo */
.avatar.has-photo {
  animation: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important;
}
.avatar.has-photo::after {
  display: none !important;
  animation: none !important;
}
/* ═══════════════════════════════════════════
   PROFILE EDIT PAGE — Improved
═══════════════════════════════════════════ */
#profile-edit-page {
  position: fixed !important;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9500;
  flex-direction: column;
  background: var(--bg-primary);
  padding: 0;
  overflow-y: auto;
  display: none;
}
.prof-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: 10;
  backdrop-filter: blur(12px);
}
.prof-header-title { font-size: 17px; font-weight: 800; color: var(--text-primary); flex: 1; }
.prof-body { display: flex; flex-direction: column; align-items: center; padding: 36px 24px 48px; gap: 32px; }

/* Avatar Zone */
.prof-avatar-zone { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.prof-avatar-ring-wrap {
  position: relative;
  width: 112px; height: 112px;
  cursor: pointer;
  transition: transform .2s;
}
.prof-avatar-ring-wrap:active { transform: scale(0.96); }
.prof-avatar-ring {
  width: 112px; height: 112px;
  border-radius: 50%;
  background: var(--gradient-primary);
  padding: 3px;
  box-shadow: 0 0 0 0 rgba(139, 92, 246,0);
  transition: box-shadow .3s;
}
.prof-avatar-ring:hover { box-shadow: 0 0 0 6px rgba(139, 92, 246,0.18); }
.prof-avatar-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
#prof-avatar-img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:none; }
#prof-avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  flex-direction: column; gap: 4px;
}
.prof-cam-icon-wrap {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(139, 92, 246,0.15);
  display: flex; align-items: center; justify-content: center;
}
.prof-cam-icon-wrap i { font-size: 18px; color: var(--primary-color); }
.prof-placeholder-label { font-size: 9.5px; font-weight: 700; color: var(--text-secondary); letter-spacing:.3px; text-align:center; }
.prof-avatar-cam-badge {
  position: absolute; bottom: 3px; right: 3px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: white;
  border: 2.5px solid var(--bg-primary);
  box-shadow: 0 2px 10px rgba(139, 92, 246,0.4);
  transition: background .2s;
}
/* Upload Option Pills */
.prof-upload-opts {
  display: flex; gap: 10px; width: 100%; max-width: 320px; justify-content: center;
}
.prof-upload-opt {
  flex: 1; padding: 18px 10px; border-radius: 18px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-secondary);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; font-family: inherit;
  transition: border-color .18s, box-shadow .18s, transform .15s;
}
.prof-upload-opt:active { transform: scale(0.97); box-shadow: 0 0 0 3px rgba(139, 92, 246,0.2); border-color: var(--primary-color); }
.prof-upload-opt-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(139, 92, 246,0.1);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.prof-upload-opt span { font-size: 12px; font-weight: 700; color: var(--text-primary); text-align: center; line-height: 1.3; }
/* Image action buttons */
.prof-img-actions { display: none; gap: 8px; flex-wrap: wrap; justify-content: center; }
.prof-img-actions.visible { display: flex; }
.prof-img-btn {
  padding: 8px 16px; border-radius: 20px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-secondary); color: var(--text-primary);
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; display: flex; align-items: center; gap: 6px;
  transition: background .15s, border-color .15s;
}
.prof-img-btn:active { background: var(--hover-bg); }
.prof-img-btn.danger { color: #FF4D6A; border-color: rgba(244,63,94,0.3); }
/* Edit tools canvas */
.prof-edit-tools { display: none; width: 100%; flex-direction: column; gap: 16px; }
.prof-edit-tools.visible { display: flex; }
.prof-edit-canvas-wrap {
  width: 100%; max-width: 270px; margin: 0 auto;
  border-radius: 18px; overflow: hidden;
  background: #111; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.prof-edit-canvas-wrap canvas { width: 100%; height: 100%; }
.prof-edit-label { font-size: 10.5px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px; }
.prof-slider-row { display: flex; align-items: center; gap: 10px; }
.prof-slider-row input[type=range] { flex: 1; accent-color: var(--primary-color); height: 4px; cursor: pointer; }
.prof-slider-val { font-size: 11px; color: var(--text-secondary); width: 36px; text-align: right; font-weight: 600; }
/* Name section */
.prof-name-section { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.prof-section-title {
  font-size: 11px; font-weight: 800; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .7px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}
.prof-name-input-wrap { position: relative; }
.prof-name-input {
  width: 100%; padding: 14px 52px 14px 16px;
  border-radius: 14px; border: 1.5px solid var(--border-color);
  background: var(--bg-secondary); color: var(--text-primary);
  font-size: 15px; font-weight: 600; font-family: inherit;
  box-sizing: border-box; outline: none; transition: border-color .2s, box-shadow .2s;
}
.prof-name-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(139, 92, 246,0.12); }
.prof-name-count { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.prof-name-hint { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.prof-name-hint.warn { color: #FF4D6A; }
.prof-save-btn {
  width: 100%; padding: 16px;
  border-radius: 14px; border: none;
  background: var(--gradient-primary); color: white;
  font-size: 15px; font-weight: 800; cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 18px rgba(139, 92, 246,0.38);
  transition: opacity .15s, transform .15s;
  letter-spacing: .2px;
}
.prof-save-btn:active { opacity: .87; transform: scale(0.99); }
/* Divider */
.prof-divider { width: 100%; height: 1px; background: var(--border-color); }

/* Reset Wallet button on face-auth overlay */
#auth-reset-wallet-btn {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: rgba(244,63,94,0.08);
  border: 1.5px solid rgba(244,63,94,0.22);
  border-radius: 12px;
  color: #FF4D6A;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
  position: relative;
  z-index: 1;
}
#auth-reset-wallet-btn:active { background: rgba(244,63,94,0.15); transform: scale(0.97); }
#auth-reset-wallet-btn svg { flex-shrink: 0; }

.header-info .name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.header-info .status {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.status-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-color);
  border-radius: 50%;
  animation: blink 2s infinite;
  box-shadow: 0 0 12px var(--accent-color);
}
.header-icons {
  display: flex;
  align-items: center;
  gap: 14px;
}

.icon-circle {
  width: 40px;
  height: 40px;

  min-width: 40px;
  min-height: 40px;

  border-radius: 50%;

  background: var(--hover-bg);

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;

  cursor: pointer;
  flex-shrink: 0;

  border: 1.5px solid var(--border-color);

  /* REMOVE MOVEMENT */
  transition: background 0.2s ease,
              border-color 0.2s ease;

  transform: none !important;
  animation: none !important;

  will-change: auto;
}

.icon-circle:hover {
  background: rgba(139, 92, 246, 0.15);

  /* REMOVE SCALE */
  transform: none !important;

  /* KEEP SHADOW STATIC */
  box-shadow: none;

  border-color: var(--primary-color);
}
body.dark-mode .icon-circle:hover {
  background: rgba(139, 92, 246, 0.12);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}
.icon-circle span {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #f87171, #fca5a5);
  color: white;
  font-size: 11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--bg-primary);
  animation: iconBadgePulse 2.4s ease-in-out infinite;
  font-weight: 700;
}
@keyframes iconBadgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.75; transform: scale(0.92); }
}
/* 3-state theme toggle — base */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-color);
  background: var(--hover-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
  position: relative;
  overflow: visible;
}
/* Per-state overrides — higher specificity wins over base */
.theme-toggle[data-theme="dark"] {
  background: rgba(139, 92, 246,0.12);
  border-color: rgba(139, 92, 246,0.35);
}
.theme-toggle[data-theme="light"] {
  background: rgba(251,191,36,0.14);
  border-color: rgba(251,191,36,0.45);
}
.theme-toggle:hover {
  transform: rotate(12deg) scale(1.08);
  box-shadow: 0 4px 14px rgba(139, 92, 246,0.2);
}
.theme-toggle i {
  font-size: 17px;
  color: var(--text-primary);
  transition: color 0.25s, transform 0.25s;
  display: block;
  line-height: 1;
  pointer-events: none;
}
.theme-toggle[data-theme="dark"]   i { color: #C4B5FD; }
.theme-toggle[data-theme="light"]  i { color: #FFD166; }

/* Enhanced balance card */
.balance-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
.balance-title {
  font-size: 13px;
  display: flex;
  align-items: center;
  font-weight: 600;
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.5px;
}
.balance-title i {
  margin-right: 8px;
  animation: spin 10s infinite linear;
}
.top-right-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  z-index: 2;
  gap: 8px;
}
.transaction-history {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  padding: 4px 8px;
  border-radius: 8px;
}
.transaction-history:hover {
  transform: translateX(6px);
  color: white;
  background: rgba(255, 255, 255, 0.15);
}
.transaction-history i {
  margin-left: 6px;
  transition: all 0.3s;
  font-size: 11px;
}
.add-money {
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,255,255,0.9));
  padding: 8px 18px;
  border-radius: 22px;
  font-weight: 700;
  font-size: 13px;
  color: var(--primary-color);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: none;
  box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.2);
}
.add-money::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  transition: left 0.6s ease;
}
.add-money:hover::before {
  left: 100%;
}
.add-money:hover {
  background: white;
  transform: translateY(-4px);
  box-shadow: 0 15px 30px -8px rgba(0, 0, 0, 0.3);
}
.add-money:active {
  transform: translateY(-2px);
}
.balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  margin-top: 10px;
}
.balance-amount {
  font-weight: 900;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
  font-size: 34px;
  height: 44px;
  display: flex;
  align-items: center;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  color: white;
  font-feature-settings: "tnum";
  font-family: 'Outfit', sans-serif;
}
.balance-amount.size-small { font-size: 24px; }
.balance-amount.size-extra-small { font-size: 20px; }
.balance-amount.size-tiny { font-size: 18px; }
.toggle-eye {
  background: rgba(255, 255, 255, 0.2);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  position: relative;
  z-index: 2;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
}
.toggle-eye:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.15) rotate(15deg);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
.toggle-eye i.fa-eye,
.toggle-eye i.fa-eye-slash {
  color: white;
  font-size: 18px;
}
.floating-dollar {
  position: absolute;
  font-weight: 900;
  opacity: 0;
  z-index: 1;
  animation: floatDollar 4s ease-out forwards;
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  font-size: 22px;
  text-shadow: 0 4px 12px rgba(255,255,255,0.3);
}

/* ===== GLOBAL BUTTON & ICON SAFETY ===== */
/* Prevent icon elements inside buttons from ever collapsing or hiding */
.theme-toggle i,
.icon-circle i,
.action i,
.bottom-nav .item i,
.detail-action-btn i,
.receive-action-btn i,
.page-close-btn i,
.modal-close-btn i,
.pcb-icon i,
.mcb-icon i,
.me-theme-btn i {
  pointer-events: none;
  flex-shrink: 0;
}
/* All clickable icon-buttons must meet 40px minimum touch target */
.theme-toggle,
.icon-circle,
.me-theme-btn,
.page-close-btn,
.modal-close-btn,
.detail-action-btn,
.receive-action-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Prevent text-fill-color from bleeding into button icons */
button i, .action i, .detail-action-btn i {
  -webkit-text-fill-color: currentColor;
}


.actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  background: var(--card-bg);
  margin: 12px 12px;
  border-radius: 22px;
  padding: 16px 10px;
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}
body.dark-mode .actions {
  background: rgba(10,16,32,0.7);
  border-color: rgba(139, 92, 246,0.08);
}
.action {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  transition: color 0.18s ease, background 0.18s ease;
  padding: 6px 2px;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.action:hover {
  background: var(--hover-bg);
  color: var(--primary-color);
}
.action:active i {
  transform: scale(0.88);
  box-shadow: 0 2px 6px rgba(139, 92, 246,0.25) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}
.action i {
  font-size: 18px;
  border-radius: 18px;
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.22s ease;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  margin: 0 auto;
  flex-shrink: 0;
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB);
  box-shadow: 0 4px 14px rgba(139, 92, 246,0.35);
  pointer-events: none;
  will-change: transform;
}
body.dark-mode .action i {
  background: linear-gradient(135deg, #0c3055, #2a1f5f);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(139, 92, 246,0.15);
  color: #C4B5FD;
}
.action:hover i {
  transform: scale(1.1);
  box-shadow: 0 8px 22px rgba(139, 92, 246, 0.5);
}
body.dark-mode .action:hover i {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
  color: #7dd3fc;
}
.action div {
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.1px;
  color: var(--text-secondary);
  transition: color 0.2s;
}
.action:hover div {
  color: var(--primary-color);
}

/* Enhanced search */
.search-container {
  position: relative;
  margin: 12px 12px;
}
.search-box {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border-radius: 16px;
  border: 1.5px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.22s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body.dark-mode .search-box {
  background: rgba(12,20,38,0.8);
  border-color: rgba(139, 92, 246,0.1);
}
.search-box:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
  background: var(--card-bg);
}
.search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 18px;
}

/* Tabs */
.tabs {
  display: flex;
  justify-content: center;
  margin: 0 12px 20px;
  background: var(--card-bg);
  border-radius: 24px;
  padding: 8px;
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(139, 92, 246, 0.2);
  box-shadow: var(--card-shadow), 0 0 20px rgba(139, 92, 246, 0.1);
  transition: all 0.3s ease;
}
.tab {
  flex: 1;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  padding: 10px 6px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  color: var(--text-secondary);
  border-radius: 18px;
  margin: 0 4px;
  font-size: 12px;
}
.tab:hover {
  color: #8B5CF6;
  background: rgba(139, 92, 246, 0.12);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}
.tab.active {
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #8B5CF6, #A78BFA);
  animation: fadeIn 0.4s var(--transition-bounce);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35);
}
body.dark-mode .tab.active {
  background: linear-gradient(135deg, #8B5CF6, #A78BFA);
  color: #fff;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}
.tab.active::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, #8B5CF6, #A78BFA);
  border-radius: 3px;
  animation: glow 2s infinite;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
}

.network-filter {
  margin: 0 12px 16px;
}

.network-button {
  background: var(--card-bg);
  color: var(--text-primary);

  padding: 16px 16px 16px 58px;

  border: 1px solid var(--border-color);
  border-radius: 24px;

  font-weight: 600;
  font-size: 15px;

  cursor: pointer;

  display: inline-flex;
  align-items: center;

  gap: 12px;

  position: relative;
  width: auto;

  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2);

  transition: background 0.2s ease,
              border-color 0.2s ease;

  transform: none !important;
  animation: none !important;

  min-height: 64px;
}

.network-button:hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: var(--primary-color);

  transform: none !important;
}

.network-button .network-icon {
  position: absolute;

  left: 16px;

  /* PERFECT CENTER WITHOUT JITTER */
  top: 50%;
  margin-top: -17px;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: var(--gradient-primary);

  box-shadow: 0 5px 15px -3px rgba(139, 92, 246, 0.6);

  border: 2px solid white;

  transition: none !important;
  animation: none !important;
  transform: none !important;
}

.network-button .network-icon i {
  font-size: 14px;
  color: white;
}

.network-button .network-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Crypto list */
.crypto-list {
  margin: 0;
  animation: fadeIn 0.35s ease-out;
  padding: 8px 0;
}
.crypto-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  animation: fadeIn 0.5s ease;
  position: relative;
  border-radius: 12px;
  margin: 4px 0;
}
.crypto-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(0, 200, 255, 0.05));
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.crypto-item:hover {
  background: rgba(139, 92, 246, 0.08);
  border-radius: 16px;
  transform: translateX(8px) translateY(-4px);
  box-shadow: 0 12px 35px rgba(139, 92, 246, 0.25);
  border-bottom-color: transparent;
}
.crypto-item:hover::before {
  opacity: 1;
}
.crypto-item:active {
  transform: translateX(4px) translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.15);
}

/* Light mode crypto-item enhancements */
body:not(.dark-mode) .crypto-item {
  border-radius: 12px;
  background: rgba(240, 242, 245, 0.6);
}
body:not(.dark-mode) .crypto-item:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(0, 200, 255, 0.1));
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.2);
}
body:not(.dark-mode) .crypto-item:active {
  box-shadow: 0 6px 15px rgba(139, 92, 246, 0.15);
}

/* ===== SWIPE-TO-HIDE WRAPPER ===== */
.crypto-swipe-wrap {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.crypto-swipe-wrap .crypto-item {
  border-bottom: none;
  position: relative;
  z-index: 1;
  background: var(--bg-primary);
  border-radius: 12px;
  transform: translateX(0);
  transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
  margin: 4px 8px;
}
.crypto-swipe-wrap .crypto-item:hover {
  background: rgba(139, 92, 246, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2);
}
.crypto-swipe-wrap.reveal-hide .crypto-item {
  transform: translateX(-80px);
}
.crypto-hide-action {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.15s ease;
}
.crypto-swipe-wrap.reveal-hide .crypto-hide-action {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.crypto-hide-action i {
  font-size: 18px;
  color: #fff;
}
.crypto-hide-action span {
  font-size: 9px;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.crypto-hide-action:hover {
  background: linear-gradient(135deg, #A78BFA, #8B5CF6);
}
.crypto-swipe-wrap.press-hold .crypto-item {
  background: rgba(139, 92, 246, 0.06);
}
/* Manage crypto footer */
.manage-crypto-footer {
  text-align: center;
  padding: 16px 0 8px;
  font-size: 12px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.manage-crypto-footer:active {
  opacity: 0.7;
}
/* Manage crypto modal */
.manage-crypto-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.65);
  display: none;
  align-items: flex-end;
  justify-content: center;
  -webkit-overflow-scrolling: touch;
}
.manage-crypto-modal.open {
  display: flex;
  animation: mcFadeIn 0.25s ease forwards;
}
@keyframes mcFadeIn { from { opacity: 0; } to { opacity: 1; } }
.manage-crypto-sheet {
  background: var(--bg-primary);
  border-radius: 28px 28px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.manage-crypto-sheet-header {
  padding: 20px 20px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}
.manage-crypto-sheet-header h3 {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0;
}
.manage-crypto-sheet-header button {
  background: var(--bg-secondary);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.manage-crypto-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}
.manage-crypto-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  cursor: pointer;
}
.manage-crypto-item:hover {
  background: rgba(139, 92, 246,0.06);
}
.manage-crypto-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: transparent;
  border: none;
  padding: 2px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  box-shadow:
    0 0 9px rgba(139,92,246,0.50),
    0 0 18px rgba(139,92,246,0.26),
    0 0 32px rgba(139,92,246,0.12);
}
.manage-crypto-item-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #7C3AED, #A855F7, #C084FC, #7C3AED, #6D28D9, #A855F7);
  border-radius: 14px;
  z-index: 0;
  pointer-events: none;
}
.manage-crypto-item-icon::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 11px;
  background: #07051A;
  z-index: 1;
  pointer-events: none;
}
body:not(.dark-mode) .manage-crypto-item-icon::after {
  background: #f0f0f8;
}
.manage-crypto-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  position: relative;
  z-index: 2;
  display: block;
}
.manage-crypto-item-info { flex: 1; }
.manage-crypto-item-sym { font-size: 13px; font-weight: 800; color: var(--text-primary); }
.manage-crypto-item-net { font-size: 11px; color: var(--text-secondary); }
.manage-crypto-enable-btn {
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 800;
  color: #10b981;
  cursor: pointer;
  white-space: nowrap;
}
.manage-crypto-enable-btn:hover {
  background: rgba(16,185,129,0.25);
}
.crypto-left {
  display: flex;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
  position: relative;
}
.crypto-logo {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  margin-right: 14px;
  margin-left: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
  border: 1.5px solid rgba(255,255,255,0.12);
}
/* When a real logo image exists — squircle + full glowing ring border */
.crypto-logo.has-logo {
  padding: 2.5px;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  box-shadow:
    0 0 10px rgba(139,92,246,0.55),
    0 0 22px rgba(139,92,246,0.30),
    0 0 40px rgba(139,92,246,0.15),
    0 4px 14px rgba(0,0,0,0.38);
  position: relative;
}
/* Full 360° glowing purple ring — static, no animation */
.crypto-logo.has-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #7C3AED, #A855F7, #C084FC, #7C3AED, #6D28D9, #A855F7);
  border-radius: 16px;
  z-index: 0;
  pointer-events: none;
}
/* Dark inner fill — sits above the ring, reveals only the 2.5px border */
.crypto-logo.has-logo::after {
  content: '';
  position: absolute;
  inset: 2.5px;
  border-radius: 13px;
  background: #07051A;
  z-index: 1;
  pointer-events: none;
}
body:not(.dark-mode) .crypto-logo.has-logo::after {
  background: #f0f0f8;
}
.crypto-logo > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0;
  background: none;
  position: relative;
  z-index: 2;
  padding: 3px;
}
/* network-overlay when placed as sibling after .crypto-logo inside .crypto-left */
.crypto-left > .network-overlay {
  position: absolute;
  bottom: calc(50% - 23px - 4px);
  left: calc(6px + 46px - 12px);
  z-index: 4;
}
.crypto-logo > img[src=""], .crypto-logo > img:not([src]) {
  display: none;
}
.crypto-logo i {
  font-size: 1.3rem;
  color: white;
}
.network-overlay {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 2px solid var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 3;
  flex-shrink: 0;
}
body.dark-mode .network-overlay {
  background: #07051A;
  border-color: #030209;
}
.network-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.network-overlay img[src=""], .network-overlay img:not([src]) {
  display: none;
}
.network-overlay i {
  font-size: 10px;
  color: var(--primary-color);
}
.crypto-item.custom-token .crypto-logo:not(.has-logo) {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}
.crypto-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 5px;
}
.crypto-row-1 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.crypto-symbol {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.crypto-chain {
  font-size: 10.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  background: rgba(139, 92, 246, 0.08);
  padding: 2px 7px;
  border-radius: 8px;
}
.crypto-row-2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.crypto-price {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.price-change {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 8px;
  text-align: center;
  animation: fadeIn 0.5s var(--transition-bounce);
  min-width: 56px;
}
.price-change.positive {
  background: rgba(52, 211, 153, 0.12);
  color: #10B981;
  border: 1px solid rgba(52, 211, 153, 0.25);
}
.price-change.negative {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.25);
}
.crypto-right {
  text-align: right;
  flex-shrink: 0;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.crypto-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crypto-worth {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Loading overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
  display: none;
}
body:not(.dark-mode) .loading-overlay {
  background: rgba(240, 242, 245, 0.9);
}

/* Light mode click effects */
body:not(.dark-mode) button:active,
body:not(.dark-mode) [role="button"]:active,
body:not(.dark-mode) .crypto-item:active {
  transform: scale(0.97) !important;
  box-shadow: 0 2px 8px rgba(123, 31, 162, 0.3) !important;
}

body:not(.dark-mode) button,
body:not(.dark-mode) [role="button"] {
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

body:not(.dark-mode) button:active::after,
body:not(.dark-mode) .action:active::after {
  animation: lightClickWave 0.6s ease-out !important;
}

@keyframes lightClickWave {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.8;
  }
  100% {
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}
.spinner-blue {
  width: 60px;
  height: 60px;
  border: 5px solid #8B5CF6;
  border-top: 5px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.8);
}

/* Enhanced networks page */
.networks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 12px 16px;
  animation: fadeIn 0.6s var(--transition-bounce);
}
.networks-title {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.networks-search-container {
  position: relative;
  margin: 0 12px 16px;
}
.networks-search {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 16px 16px 16px 48px;
  width: 100%;
  font-size: 15px;
  color: var(--text-primary);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2);
}
.networks-search:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25), 0 4px 20px -5px rgba(0,0,0,0.3);
  transform: translateY(-3px);
}
.networks-list {
  margin: 0;
}
.network-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 14px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  position: relative;
  animation: fadeIn 0.5s ease;
}
.network-item:hover {
  background: rgba(139, 92, 246, 0.1);
  border-radius: 24px;
  transform: translateX(8px) translateY(-4px);
  box-shadow: 0 10px 30px -8px rgba(139, 92, 246, 0.3);
  border-bottom-color: transparent;
}
.network-item.selected::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-left: 16px solid transparent;
  border-top: 16px solid var(--primary-color);
}
.network-item.selected .network-name {
  color: var(--primary-color);
  font-weight: 700;
}
.network-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}
.network-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  font-size: 15px;
  box-shadow: 0 8px 20px -5px rgba(139, 92, 246, 0.6);
  border: 2px solid white;
}
.network-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* Enhanced detail page */
#detail-page {
  display: none;
}
.detail-header {
  padding: 22px 18px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  animation: slideUp 0.5s var(--transition-bounce);
}
.detail-header-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.detail-icon-container {
  position: relative;
  display: inline-block;
}
.detail-icon-container .network-overlay {
  position: absolute;
  bottom: -4px;
  right: -4px;
  z-index: 4;
}
.detail-icon {
  width: 70px;
  height: 70px;
  border-radius: 24px;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  box-shadow: var(--pulse-shadow);
  animation: pulse 3s infinite;
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}
.detail-icon img {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  object-fit: cover;
}
.chain-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: var(--accent-color);
  color: white;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 18px;
  font-weight: 800;
  animation: bounceIn 0.5s var(--transition-bounce);
  box-shadow: 0 4px 15px -3px rgba(245, 158, 11, 0.6);
  border: 2px solid white;
}
.detail-title {
  flex: 1;
}
.detail-symbol {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 5px;
  letter-spacing: -0.5px;
}
.detail-name {
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.detail-values {
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: fadeIn 0.8s var(--transition-bounce);
}
.balance-group {
  display: flex;
  flex-direction: column;
}
.detail-balance {
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 5px;
  letter-spacing: -0.5px;
}
.detail-usd {
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.value-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.detail-price {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.detail-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 22px 18px;
  animation: fadeIn 0.9s var(--transition-bounce);
}
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 18px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  box-shadow: var(--card-shadow);
}
.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -10px var(--shadow-color);
  border-color: var(--primary-color);
}
.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.stat-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  font-feature-settings: "tnum";
}
.detail-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 22px 18px;
  background: var(--card-bg);
  border-radius: 24px;
  padding: 18px;
  border: 1px solid var(--border-color);
  animation: fadeIn 1s var(--transition-bounce);
  box-shadow: var(--card-shadow);
}
.detail-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  padding: 12px 6px;
  border-radius: 18px;
  gap: 8px;
}
.detail-action-btn:hover {
  background: rgba(139, 92, 246, 0.12);
  transform: translateY(-5px) scale(1.05);
}
.detail-action-btn i {
  font-size: 20px;
  background: var(--gradient-primary);
  border-radius: 18px;
  margin-bottom: 5px;
  color: white;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 8px 20px -5px var(--shadow-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  flex-shrink: 0;
  pointer-events: none;
}
.detail-action-btn:hover i {
  transform: scale(1.15) rotate(8deg);
  box-shadow: 0 15px 30px -5px rgba(139, 92, 246, 0.55);
}
.detail-action-btn span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}
.chart-container {
  margin: 22px 18px;
  background: var(--card-bg);
  border-radius: 24px;
  padding: 22px;
  border: 1px solid var(--border-color);
  animation: fadeIn 1.1s var(--transition-bounce);
  box-shadow: var(--card-shadow);
  height: 220px;
}
.tx-history-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 22px 18px 12px;
  color: var(--text-primary);
  font-weight: 700;
  animation: fadeIn 1.2s var(--transition-bounce);
  font-size: 1.1rem;
}
.view-all {
  color: var(--primary-color);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 12px;
}
.view-all:hover {
  transform: translateX(6px);
  text-decoration: underline;
  background: rgba(139, 92, 246, 0.1);
}
.tx-list {
  margin: 0 18px;
  animation: fadeIn 1.3s var(--transition-bounce);
}
.tx-placeholder {
  text-align: center;
  color: var(--text-secondary);
  padding: 36px 18px;
  font-size: 1rem;
  background: var(--card-bg);
  border-radius: 20px;
  border: 1px solid var(--border-color);
}

/* Enhanced send page */
#send-page {
  display: none;
}
.send-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 12px 16px;
  animation: fadeIn 0.6s var(--transition-bounce);
}
.send-page-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

/* Enhanced send crypto page */
#send-crypto-page {
  display: none;
}
.send-crypto-header {
  margin-bottom: 0;
  padding: 16px 18px 0;
}
.send-coin-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  border: 1.5px solid var(--border-color);
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
body.dark-mode .send-coin-card {
  background: rgba(10, 18, 36, 0.85);
  border-color: rgba(139, 92, 246,0.12);
}
.send-coin-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
  opacity: 0.3;
}
.send-coin-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139, 92, 246,0.15), rgba(129,140,248,0.15));
  border: 1.5px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
body.dark-mode .send-coin-logo {
  background: rgba(139, 92, 246,0.1);
  border-color: rgba(139, 92, 246,0.15);
}
.send-coin-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.send-coin-logo i {
  color: var(--primary-color);
  font-size: 1.1rem;
}
.send-coin-info {
  flex: 1;
  min-width: 0;
}
.send-coin-name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.send-coin-symbol-lbl {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.send-coin-network-lbl {
  font-size: 9.5px;
  color: var(--text-secondary);
  font-weight: 500;
  background: var(--hover-bg);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}
.send-coin-balance-row {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
.send-coin-balance-row span {
  color: var(--primary-color);
  font-weight: 700;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
}
.send-coin-price-row {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 2px;
  opacity: 0.7;
}
.send-crypto-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 18px;
}
.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.input-group label {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-left: 8px;
  font-weight: 600;
}
.send-crypto-form input {
  width: 100%;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 1rem;
  box-sizing: border-box;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2);
}
.send-crypto-form input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25), 0 4px 20px -5px rgba(0,0,0,0.3);
  transform: translateY(-3px);
}
.amount-input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  height: 65px;
  gap: 14px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2);
}
.amount-input-box:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25), 0 4px 20px -5px rgba(0,0,0,0.3);
  transform: translateY(-3px);
}
.amount-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 1rem;
  outline: none;
  font-weight: 600;
}
.amount-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.token-container {
  padding: 8px 16px;
  background: rgba(139, 92, 246, 0.15);
  border-radius: 16px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary-color);
  display: inline-block;
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.max-button {
  background: linear-gradient(135deg, var(--accent-color), #10b981);
  border: none;
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 8px 18px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  border-radius: 18px;
  box-shadow: 0 5px 18px -3px rgba(245, 158, 11, 0.6);
}
.max-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.8);
}
.max-button:active {
  transform: translateY(0);
}
body:not(.dark-mode) .amount-input-box {
  background: var(--card-bg);
}
.fee-info {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
  margin-top: 8px;
  font-size: 1rem;
}
.fee-label {
  color: var(--text-secondary);
  font-weight: 500;
}
.fee-amount {
  color: var(--text-primary);
  font-weight: 600;
}
.send-crypto-form button {
  padding: 18px;
  border: none;
  border-radius: 20px;
  font-weight: 700;
  background: var(--gradient-primary);
  color: white;
  cursor: pointer;
  margin-top: 14px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.6);
}
.send-crypto-form button:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 35px -8px rgba(139, 92, 246, 0.8);
}
.send-crypto-form button:active {
  transform: translateY(-2px);
}
.send-crypto-form button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}
.send-crypto-form button:focus:not(:active)::after {
  animation: ripple 1s ease-out;
}

/* Enhanced network selector */
.network-selector {
  position: relative;
}
.selected-network {
  display: flex;
  align-items: center;
  padding: 18px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  cursor: pointer;
  gap: 14px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2);
}
.selected-network:hover {
  border-color: var(--primary-color);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px -8px rgba(139, 92, 246, 0.4);
}
.selected-network .network-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gradient-primary);
  box-shadow: 0 5px 18px -3px rgba(139, 92, 246, 0.6);
  border: 2px solid white;
}
.selected-network .network-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.selected-network .network-name {
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1rem;
}
.selected-network .network-chevron {
  color: var(--text-secondary);
  font-size: 1rem;
  transition: transform 0.3s;
}
.selected-network.active .network-chevron {
  transform: rotate(180deg);
}
.network-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: var(--card-bg);
  border-radius: 20px;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.5);
  max-height: 380px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  animation: fadeInDown 0.3s var(--transition-bounce);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
}
.network-options.visible {
  display: block;
}
.network-option {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  gap: 14px;
  border-bottom: 1px solid var(--border-color);
}
.network-option:last-child {
  border-bottom: none;
}
.network-option:hover {
  background: rgba(139, 92, 246, 0.1);
}
.network-option.selected {
  background: rgba(139, 92, 246, 0.2);
}
.network-option .network-logo-container {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--gradient-primary);
  box-shadow: 0 5px 18px -3px rgba(139, 92, 246, 0.6);
  border: 2px solid white;
}
.network-option.custom-network .network-logo-container {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}
.network-option .network-logo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.network-option .network-logo-container i {
  font-size: 14px;
  color: white;
}
.network-option .network-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.network-option .network-name {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}
.network-option.custom-network .network-name {
  color: #7c3aed;
}
.network-option .network-type {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  display: none;
}
.network-option.custom-network .network-type {
  color: #C084FC;
}
.network-option .network-check {
  color: var(--primary-color);
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.2s;
}
.network-option.selected .network-check {
  opacity: 1;
}

/* Enhanced QR upload button */
.qr-upload-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qr-file-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  top: 0;
  left: 0;
  z-index: 2;
}
.icon-btn {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 16px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  position: relative;
  overflow: visible;
}
.icon-btn:hover {
  background: rgba(139, 92, 246, 0.3);
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 8px 22px -5px rgba(139, 92, 246, 0.6);
}
.icon-btn i {
  font-size: 1.2rem;
  color: var(--primary-color);
}

/* Address-bookmark badge + modal styling now lives entirely in index.html
   (see <style id="addr-bookmark-modal-styles">) per request. */
#qr-reader {
  width: 100%;
  display: none;
  margin-top: 14px;
  border-radius: 20px;
  overflow: hidden;
}

/* ═══════════════════════════════════════════
   BUY CRYPTO PAGE — Professional Redesign
═══════════════════════════════════════════ */
#buy-crypto-page {
  display: none;
}

/* ── Header ── */
.bcp-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px 10px;
}
.bcp-header-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(139,92,246,0.4);
  animation: none !important;
  transform: none !important;
  position: relative;
}
.bcp-header-text h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 2px;
  letter-spacing: -0.3px;
}
.bcp-header-text p {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Form container ── */
.bcp-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 16px 30px;
}

/* ── Section cards ── */
.bcp-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 18px;
  position: relative;
}
body.dark-mode .bcp-section {
  background: rgba(255,255,255,0.03);
  border-color: rgba(139,92,246,0.12);
}

/* ── Section label row ── */
.bcp-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.bcp-step-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bcp-secure-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #22c55e;
  background: rgba(34,197,94,0.1);
  border-radius: 20px;
  padding: 3px 8px;
  letter-spacing: 0.3px;
}

/* ── Amount input ── */
.bcp-amount-wrap {
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bcp-amount-wrap:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
}
.bcp-currency-flag {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0 4px 0 18px;
  flex-shrink: 0;
  line-height: 1;
}
.bcp-amount-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 26px !important;
  font-weight: 700;
  color: var(--text-primary);
  padding: 16px 8px !important;
  outline: none;
  transform: none !important;
}
.bcp-amount-input::placeholder { color: var(--text-secondary); opacity: 0.5; }
.bcp-amount-input::-webkit-inner-spin-button,
.bcp-amount-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.bcp-currency-pill {
  background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(109,40,217,0.1));
  border-left: 1px solid var(--border-color);
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 800;
  padding: 0 18px;
  height: 100%;
  display: flex;
  align-items: center;
  min-height: 58px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* ── Quick amount shortcuts ── */
.bcp-amount-shortcuts {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.bcp-shortcut {
  flex: 1;
  padding: 8px 4px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.bcp-shortcut:hover, .bcp-shortcut:active {
  background: rgba(139,92,246,0.1);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* ── Coin selector trigger ── */
.bcp-coin-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bcp-coin-trigger:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}
.bcp-coin-icon.coin-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(139,92,246,0.35);
  overflow: hidden;
  border: none;
}
.bcp-coin-icon.coin-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bcp-coin-meta {
  flex: 1;
  min-width: 0;
}
.bcp-coin-name.coin-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.bcp-coin-hint {
  font-size: 11px;
  color: var(--text-secondary);
}
.bcp-coin-chevron {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--hover-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 11px;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.2s ease;
}
.bcp-coin-trigger:hover .bcp-coin-chevron {
  background: rgba(139,92,246,0.15);
  color: var(--primary-color);
}

/* ── Coin dropdown (existing .coin-options, .coin-option) ── */
.coin-selector {
  position: relative;
}
.coin-options {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);
}
body.dark-mode .coin-options {
  background: #1a1f2e;
  border-color: rgba(139,92,246,0.2);
}
.coin-options.visible {
  display: block;
}
.coin-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s ease;
}
.coin-option:last-child { border-bottom: none; border-radius: 0 0 18px 18px; }
.coin-option:first-child { border-radius: 18px 18px 0 0; }
.coin-option:hover { background: rgba(139,92,246,0.08); }
.coin-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(139,92,246,0.3);
  border: none;
  position: relative;
}
.coin-icon img { width: 100%; height: 100%; object-fit: cover; }
.coin-info { flex: 1; }
.coin-name { color: var(--text-primary); font-weight: 700; font-size: 14px; }
.coin-symbol { color: var(--text-secondary); font-size: 11px; font-weight: 600; }

/* ── You will receive card ── */
.bcp-receive-card {
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(109,40,217,0.08));
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
}
.bcp-receive-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.bcp-receive-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-size: 32px;
  font-weight: 800;
  color: var(--primary-color);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 6px;
}
.bcp-receive-symbol {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0;
}
.bcp-receive-sub {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* ── Payment section - card visual ── */
.bcp-card-visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #2d1f5e, #1a1040);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
body:not(.dark-mode) .bcp-card-visual {
  background: linear-gradient(135deg, #5b21b6, #4c1d95);
}

/* ── Field rows ── */
.bcp-field-wrap {
  margin-bottom: 12px;
}
.bcp-field-wrap:last-child { margin-bottom: 0; }
.bcp-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.4px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.bcp-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-primary);
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  padding: 0 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bcp-input-row:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}
.bcp-field-icon {
  color: var(--text-secondary);
  flex-shrink: 0;
  opacity: 0.6;
}
.bcp-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  padding: 13px 0;
  outline: none;
  font-family: inherit;
}
.bcp-input::placeholder { color: var(--text-secondary); opacity: 0.5; }
.bcp-row-2 {
  display: flex;
  gap: 10px;
}
.bcp-row-2 .bcp-field-wrap {
  flex: 1;
  min-width: 0;
}
/* Keep payment-details card clipped so CVV stays inside the container */
.bcp-section.payment-details {
  overflow: hidden;
}

/* ── FLOAT-ELEMENT SAFETY NET ───────────────────────────────────────────────
   Prevents .float-element from ever wiggling real UI elements.
   Only pure decorative / background shapes should float.
   ─────────────────────────────────────────────────────────────────────────── */
i.float-element,
svg.float-element,
button.float-element,
a.float-element,
input.float-element,
label.float-element,
.bcp-header-icon,
[class*="toggle-icon"],
[class*="help-q"],
[class*="help-toggle"],
[class*="nav-icon"],
[class*="tab-icon"],
[class*="coin-icon"].float-element,
[class*="wallet-icon"].float-element,
[class*="menu-icon"].float-element,
[class*="header-icon"].float-element,
[class*="btn"].float-element,
[class*="help"].float-element {
  animation: none !important;
  transform: none !important;
}


.bcp-summary {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
}
body.dark-mode .bcp-summary {
  background: rgba(255,255,255,0.02);
}
.bcp-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 18px;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}
.bcp-summary-row:last-child { border-bottom: none; }
.bcp-summary-total {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 14px;
}

/* ── Submit button ── */
.bcp-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 24px rgba(139,92,246,0.45);
  transition: box-shadow 0.2s ease, opacity 0.15s ease;
  font-family: inherit;
}
.bcp-submit-btn:active {
  opacity: 0.88;
  box-shadow: 0 4px 12px rgba(139,92,246,0.3);
}
.bcp-submit-btn:hover {
  box-shadow: 0 12px 32px rgba(139,92,246,0.6);
}

/* ── Trust row ── */
.bcp-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.65;
  flex-wrap: wrap;
}
.bcp-trust-dot { opacity: 0.4; }

/* ── Conversion display (legacy compat) ── */
.conversion-display {
  display: none; /* replaced by bcp-receive-card */
}

/* ── Payment details base (keep for JS compat) ── */
.payment-details {
  margin: 0;
  animation: none;
}
.payment-details h3 { display: none; }

/* Enhanced custom token page */
#custom-token-page {
  display: none;
  width: 100%;
  animation: fadeIn 0.5s var(--transition-bounce);
}
.custom-token-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 18px;
  padding: 0 18px;
}
.custom-token-form .input-group {
  margin-bottom: 0;
  animation: fadeIn 0.6s var(--transition-bounce);
}
.custom-token-form input,
.custom-token-form select {
  width: 100%;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 1rem;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2);
}
.custom-token-form input:focus,
.custom-token-form select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25), 0 4px 20px -5px rgba(0,0,0,0.3);
  transform: translateY(-3px);
}
body:not(.dark-mode) .custom-token-form input,
body:not(.dark-mode) .custom-token-form select {
  background: var(--card-bg);
}
.form-row {
  display: flex;
  gap: 18px;
  width: 100%;
  animation: fadeIn 0.7s var(--transition-bounce);
}
.form-row .input-group {
  flex: 1;
  min-width: 0;
}
.token-preview {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(219, 39, 119, 0.15));
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 24px;
  padding: 26px;
  margin-top: 14px;
  display: none;
  animation: slideUp 0.5s var(--transition-bounce);
  box-shadow: 0 15px 35px -8px rgba(139, 92, 246, 0.3);
  backdrop-filter: blur(20px);
}
.token-preview.show {
  display: block;
}
.token-preview-header {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-color);
}
.preview-logo {
  width: 60px;
  height: 60px;
  border-radius: 22px;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
  font-size: 22px;
  color: white;
  box-shadow: var(--pulse-shadow);
  animation: pulse 3s infinite;
  border: 2px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.preview-logo.has-logo {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  animation: none !important;
  overflow: visible;
}
.preview-logo.has-logo img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
  border-radius: 0;
  background: none;
}
.preview-title {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.5px;
}
.preview-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-top: 4px;
  font-weight: 500;
}
.token-preview-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.preview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.preview-item:hover {
  background: rgba(139, 92, 246, 0.08);
  padding: 14px 12px;
  border-radius: 16px;
}
.preview-item:last-child {
  border-bottom: none;
}
.preview-label {
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
}
.preview-value {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1rem;
}
.price-positive {
  color: var(--success-color);
}
.price-negative {
  color: var(--error-color);
}
.preview-address {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(139, 92, 246, 0.1);
  padding: 12px;
  border-radius: 12px;
  word-break: break-all;
  margin-top: 10px;
  border: 1px solid rgba(139, 92, 246, 0.2);
}
.token-fetch-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.token-fetch-row input {
  flex: 1;
}
#add-custom-token-btn {
  margin-top: 22px;
  animation: fadeIn 1s var(--transition-bounce);
  width: 100%;
  padding: 18px;
  border: none;
  border-radius: 20px;
  background: var(--gradient-primary);
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.6);
  letter-spacing: 0.5px;
}
#add-custom-token-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.7s ease;
}
#add-custom-token-btn:hover::before {
  left: 100%;
}
#add-custom-token-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 35px -8px rgba(139, 92, 246, 0.8);
}
#add-custom-token-btn:active {
  transform: translateY(-2px);
}
.token-warning {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 18px;
  padding: 16px;
  margin-top: 18px;
  font-size: 0.95rem;
  color: #FFD166;
  display: none;
  animation: fadeIn 0.5s var(--transition-bounce);
  backdrop-filter: blur(10px);
}
.token-warning i {
  margin-right: 8px;
}
body:not(.dark-mode) .token-preview {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(219, 39, 119, 0.1));
}
.crypto-item.custom-token .crypto-logo:not(.has-logo) {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}
.crypto-item.custom-token .crypto-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
}
.crypto-item.custom-token .crypto-logo i {
  font-size: 1.2rem;
}

/* Enhanced menu page */
#menu-page {
  display: none;
}
.menu-header {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
  margin: 22px 18px 18px;
  color: var(--text-primary);
  animation: fadeIn 0.6s var(--transition-bounce);
  letter-spacing: -0.5px;
}
.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 18px;
  animation: fadeIn 0.8s var(--transition-bounce);
}
.menu-actions input {
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 1rem;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2);
}
.menu-actions input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25), 0 4px 20px -5px rgba(0,0,0,0.3);
  transform: translateY(-3px);
}
.menu-actions button {
  padding: 18px;
  border: none;
  border-radius: 20px;
  font-weight: 700;
  background: var(--gradient-primary);
  color: white;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  position: relative;
  overflow: hidden;
  font-size: 1rem;
  box-shadow: 0 8px 22px -5px rgba(139, 92, 246, 0.6);
  letter-spacing: 0.5px;
}
.menu-actions button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.7s ease;
}
.menu-actions button:hover::before {
  left: 100%;
}
.menu-actions button:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 35px -8px rgba(139, 92, 246, 0.8);
}
.menu-actions button:active {
  transform: translateY(-2px);
}
#clear-wallet-btn {
  background: linear-gradient(135deg, #f87171, #fca5a5);
  box-shadow: 0 8px 22px -5px rgba(248, 113, 113, 0.4);
}
#clear-wallet-btn:hover {
  box-shadow: 0 18px 35px -8px rgba(248, 113, 113, 0.6);
}
.error-message {
  color: var(--error-color);
  font-size: 0.95rem;
  margin-top: -12px;
  margin-bottom: 12px;
  display: none;
  animation: fadeIn 0.5s var(--transition-bounce);
  font-weight: 500;
  padding: 0 10px;
}

/* Enhanced modals */
#confirmation-modal, #buy-success-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s var(--transition-bounce);
  backdrop-filter: blur(20px);
  padding: 20px;
}

.modal-content {
  background: var(--card-bg);
  border-radius: 28px;
  padding: 32px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(139, 92, 246, 0.15) inset;
  border: 1px solid var(--border-color);
  animation: slideUp 0.4s var(--transition-bounce);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.03), transparent);
  pointer-events: none;
}

body.dark-mode .modal-content {
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.2) inset;
}

.modal-content h3 {
  color: var(--text-primary);
  margin-bottom: 18px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 1;
}

.modal-content p {
  color: var(--text-secondary);
  margin-bottom: 26px;
  text-align: center;
  line-height: 1.6;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}

.modal-buttons {
  display: flex;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.modal-buttons button {
  flex: 1;
  padding: 16px 24px;
  border: none;
  border-radius: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  position: relative;
  overflow: hidden;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

.modal-buttons button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.7s ease;
}

.modal-buttons button:hover::before {
  left: 100%;
}

.confirm-btn {
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 12px 25px -5px rgba(139, 92, 246, 0.4);
}

.confirm-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -8px rgba(139, 92, 246, 0.6);
}

.danger-btn {
  background: linear-gradient(135deg, #A78BFA, #8B5CF6);
  color: white;
  box-shadow: 0 12px 25px -5px rgba(239, 68, 68, 0.4);
}

.danger-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -8px rgba(239, 68, 68, 0.6);
}

.cancel-btn {
  background: rgba(139, 92, 246, 0.08);
  color: var(--text-primary);
  border: 1px solid rgba(139, 92, 246, 0.2);
  box-shadow: 0 4px 12px -2px rgba(139, 92, 246, 0.1);
}

.cancel-btn:hover {
  background: rgba(139, 92, 246, 0.12);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -4px rgba(139, 92, 246, 0.2);
}

.confirm-btn:active, .danger-btn:active {
  transform: translateY(-2px);
}

.cancel-btn:active {
  transform: translateY(-2px);
}

/* ========== PREMIUM FLOATING BOTTOM NAVIGATION ========== */
.bottom-nav {
  position: fixed;
  /* Use safe-area-inset-bottom so the nav stays above iOS home bar,
     Android gesture handle, and browser toolbars on all devices.
     max() ensures at least 8px gap even when safe area is 0. */
  bottom: max(8px, env(safe-area-inset-bottom, 8px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 440px;
  background: var(--bottom-nav-bg);
  padding: 10px 12px;
  /* Extra bottom padding absorbs the iOS home indicator / Android gesture bar */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px;
  display: flex;
  justify-content: space-around;
  box-shadow: var(--bottom-nav-shadow);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 1000 !important;
  border: 1px solid var(--border-color);
  margin: 0 auto;
}

.bottom-nav .item {
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.22s var(--transition-smooth);
  padding: 6px 0;
  border-radius: 14px;
  width: 52px;
  min-width: 44px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Virtuals nav SVG icon - matches FA icon behaviour exactly */
/* Stable bottom nav icons */
.bottom-nav .item .virt-nav-icon,
.bottom-nav .item i {
  color: var(--text-secondary);
  transition: color 0.22s var(--transition-smooth);
  transform: none !important;
  pointer-events: none;
  flex-shrink: 0;
  display: block;
  line-height: 1;
  will-change: auto;
}

/* Active + hover color only (NO movement) */
.bottom-nav .item:hover .virt-nav-icon,
.bottom-nav .item.active .virt-nav-icon,
.bottom-nav .item:hover i,
.bottom-nav .item.active i {
  color: var(--primary-color);
  transform: none !important;
}
.bottom-nav .item.active::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: var(--primary-color);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--primary-color);
}

/* Responsive adjustments for very small screens */
@media (max-width: 400px) {
  body {
    padding: 10px;
  }
  .app {
    height: calc(100dvh - 20px);
  }
  .balance-card {
    margin: 12px 10px;
    padding: 16px;
  }
  .balance-amount {
    font-size: 26px;
    height: 36px;
  }
  .actions {
    margin: 14px 10px;
    padding: 18px 12px;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
  .action i {
    width: 46px;
    height: 46px;
    font-size: 18px;
    padding: 12px;
  }
  .action div {
    font-size: 10px;
  }
  .bottom-nav {
    width: calc(100% - 20px);
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    bottom: max(6px, env(safe-area-inset-bottom, 6px));
    border-radius: 22px;
  }
  .bottom-nav .item {
    width: 52px;
    font-size: 9px;
  }
  .bottom-nav .item i {
    font-size: 18px;
  }
  .crypto-item {
    padding: 14px 0;
    gap: 14px;
  }
  .crypto-logo {
    width: 44px;
    height: 44px;
    margin-right: 14px;
  }
  .send-crypto-form,
  .custom-token-form,
  .menu-actions {
    padding: 0 14px;
  }
  .modal-content {
    padding: 24px;
    margin: 16px;
  }
  .detail-actions {
    gap: 8px;
    padding: 16px;
  }
  .detail-action-btn {
    padding: 10px 5px;
  }
  .detail-action-btn i {
    font-size: 20px;
    padding: 12px;
  }
  .detail-action-btn span {
    font-size: 10px;
  }
}

/* Tablets & Medium Devices */
@media (min-width: 401px) and (max-width: 768px) {
  body {
    padding: 12px;
  }
  .app {
    height: calc(100dvh - 24px);
  }
  .bottom-nav {
    width: calc(100% - 24px);
  }
  .crypto-item {
    padding: 16px 0;
  }
}

/* Large Devices */
@media (min-width: 769px) {
  body {
    padding: 16px;
  }
  .app {
    height: calc(100dvh - 32px);
  }
}

/* Performance: Disable animations on low-end devices */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Performance: Optimize for touch devices */
@media (hover: none) and (pointer: coarse) {
  .action:active i {
    transform: scale(0.88) !important;
    box-shadow: 0 2px 6px rgba(139, 92, 246,0.2) !important;
    transition: transform 0.08s ease !important;
  }
  .crypto-item:active,
  .bottom-nav .item:active {
    background: rgba(139, 92, 246, 0.15);
  }
}

/* Enhanced scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.35);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.65);
}
::selection {
  background: rgba(139, 92, 246, 0.45);
  color: #030209;
}
.fade-in {
  animation: fadeIn 0.5s var(--transition-bounce);
}
.slide-up {
  animation: slideUp 0.5s var(--transition-bounce);
}
.pulse {
  animation: pulse 2s infinite;
}
.hidden {
  display: none !important;
}
.visible {
  display: block !important;
}
#tx-success {
  display: none;
  padding: 18px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.2), rgba(52, 211, 153, 0.3));
  border-radius: 20px;
  margin-top: 18px;
  text-align: center;
  color: #A78BFA;
  font-weight: 700;
  animation: fadeIn 0.5s var(--transition-bounce);
  border: 1px solid rgba(52, 211, 153, 0.4);
  box-shadow: 0 8px 22px -5px rgba(52, 211, 153, 0.2);
  backdrop-filter: blur(10px);
}
#custom-error {
  color: var(--error-color);
  font-size: 0.95rem;
  margin-top: 8px;
  margin-bottom: 14px;
  display: none;
  animation: fadeIn 0.5s var(--transition-bounce);
  font-weight: 500;
  padding: 10px 14px;
  background: rgba(248, 113, 113, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.2);
}
.gradient-text {
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: unset;
}
.card-hover {
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px -12px var(--shadow-color);
}
.skeleton {
  background: linear-gradient(90deg, 
    var(--border-color) 25%, 
    rgba(255,255,255,0.1) 50%, 
    var(--border-color) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
}
.input-valid {
  border-color: var(--success-color) !important;
  background: rgba(52, 211, 153, 0.05) !important;
}
.input-invalid {
  border-color: var(--error-color) !important;
  background: rgba(248, 113, 113, 0.05) !important;
}
.validation-indicator {
  font-size: 12px;
  margin-top: 5px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
}
.validation-indicator.valid {
  color: var(--success-color);
}
.validation-indicator.invalid {
  color: var(--error-color);
}
.validation-indicator.pending {
  color: var(--warning-color);
}
.qr-processing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(139, 92, 246, 0.9);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  animation: fadeIn 0.3s;
}
.qr-processing i {
  color: white;
  font-size: 22px;
  animation: spin 1s linear infinite;
}
/* ========== NOTIFICATION SYSTEM (FIXED) ========== */
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 360px;
  width: calc(100% - 40px);
}

.notification {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(139, 92, 246, 0.15) inset;
  border-left: 4px solid var(--primary-color);
  color: var(--text-primary);
  transform: translateX(120%);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
  pointer-events: auto;
  border: 1px solid var(--border-color);
  animation: notificationEnter 0.4s var(--transition-bounce);
  position: relative;
  overflow: hidden;
}

.notification::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), transparent);
  pointer-events: none;
}

.notification.show { 
  transform: translateX(0);
  animation: notificationSlideIn 0.4s var(--transition-bounce);
}

.notification.hide { 
  transform: translateX(120%);
  opacity: 0;
  animation: notificationSlideOut 0.3s ease-out;
}

.notification.success {
  border-left-color: #10b981;
  --notif-color: #10b981;
}

.notification.success .notification-title i {
  color: #10b981;
}

.notification.error {
  border-left-color: #A78BFA;
  --notif-color: #A78BFA;
}

.notification.error .notification-title i {
  color: #A78BFA;
}

.notification.warning {
  border-left-color: #D4900A;
  --notif-color: #D4900A;
}

.notification.warning .notification-title i {
  color: #D4900A;
}

.notification.info {
  border-left-color: #7c3aed;
  --notif-color: #7c3aed;
}

.notification.info .notification-title i {
  color: #7c3aed;
}

body.dark-mode .notification {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.2) inset;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.notification-title {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}

.notification-title i {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.notification.show .notification-title i {
  animation: notificationIconBounce 0.6s var(--transition-bounce);
}

.notification-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 20px;
  padding: 0;
  line-height: 1;
  transition: all 0.2s ease;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.notification-close:hover {
  color: var(--text-primary);
  background: rgba(139, 92, 246, 0.1);
  transform: rotate(90deg);
}

.notification-message {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  position: relative;
  z-index: 1;
  font-weight: 500;
}

@keyframes notificationSlideIn {
  from {
    opacity: 0;
    transform: translateX(120%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes notificationSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes notificationIconBounce {
  0% { transform: scale(0.3) rotate(-45deg); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ========== MARKET PAGE STYLES (FIXED) ========== */
.market-header {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 20px 16px 16px;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.market-section {
  margin: 24px 16px;
}
.market-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.market-section-title i {
  color: var(--primary-color);
  font-size: 1.2rem;
}
.market-horizontal {
  display: flex;
  overflow-x: auto;
  gap: 14px;
  padding-bottom: 10px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.market-horizontal::-webkit-scrollbar {
  height: 4px;
}
.market-horizontal::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}
.market-card {
  flex: 0 0 auto;
  width: 130px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 16px 12px;
  backdrop-filter: blur(10px);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}
.market-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-color);
  box-shadow: 0 15px 30px -8px var(--shadow-color);
}
.market-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.market-card-top img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-primary);
  padding: 2px;
}
.market-card-symbol {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.market-card-price {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.market-card-change {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  display: inline-block;
}
.market-card-change.positive {
  background: rgba(52, 211, 153, 0.15);
  color: var(--success-color);
}
.market-card-change.negative {
  background: rgba(248, 113, 113, 0.15);
  color: var(--error-color);
}
body:not(.dark-mode) .receive-qr {
  background: #f0f2f5;
  border-color: rgba(0,0,0,0.1);
}
.receive-qr {
  background: white;
  padding: 16px;
  border-radius: 24px;
  box-shadow: var(--card-shadow);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--border-color);
}
.receive-qr canvas {
  width: 200px;
  height: 200px;
  display: block;
  border-radius: 12px;
}
.receive-actions {
  display: flex;
  gap: 16px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.receive-action-btn {
  background: var(--gradient-primary);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 18px;
  padding: 14px 24px;
  font-weight: 600;
  font-size: 1rem;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 8px 22px -5px var(--primary-color);
}
.receive-action-btn i {
  font-size: 1.1rem;
  display: block;
  line-height: 1;
  pointer-events: none;
}
.receive-action-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px -5px var(--primary-color);
  background: var(--gradient-accent);
}
.receive-action-btn:active {
  transform: translateY(-2px);
}

/* Receive Page Styles */
.receive-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  gap: 24px;
}
.receive-address-box {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 16px 20px;
  width: 100%;
  text-align: center;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: 14px;
  word-break: break-all;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
  color: var(--text-primary);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.receive-address-box:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color);
  box-shadow: 0 10px 25px -5px var(--primary-color);
}



/* ── Currency-loading skeleton — shown until first render with correct currency ── */
.bal-skeleton {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background: var(--border-color, rgba(148,163,184,0.25));
  border-radius: 6px;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
  min-width: 90px;
  height: 1em;
  vertical-align: middle;
}
.bal-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 40%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.18) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: bal-shimmer 1.4s ease-in-out infinite;
}
body:not(.dark-mode) .bal-skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.55) 40%,
    rgba(255,255,255,0.80) 50%,
    rgba(255,255,255,0.55) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
}
@keyframes bal-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
/* Keep hidden state working cleanly over skeleton */
.balance-amount .bal-skeleton { min-width: 120px; height: 0.8em; border-radius: 8px; }

/* ========== NEW ME PAGE STYLES (Integrated) ========== */
/* ===== ME PAGE PROFILE HEADER ===== */
#me-profile-header {
  position: relative;
  margin: 12px 0 8px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--gradient-primary);
  padding: 28px 20px 20px;
}
#me-profile-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 100%, rgba(219,39,119,0.3) 0%, transparent 50%);
  pointer-events: none;
}
#me-profile-header .me-avatar-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 3px solid rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  position: relative;
}
#me-profile-header .me-avatar-ring::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
}
#me-profile-header .me-name {
  font-size: 22px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

#me-profile-header .me-stats-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
#me-profile-header .me-stat-card {
  flex: 1;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 12px 10px;
  text-align: center;
  backdrop-filter: blur(6px);
}
#me-profile-header .me-stat-value {
  font-size: 16px;
  font-weight: 800;
  color: white;
}
#me-profile-header .me-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#me-profile-header .me-theme-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all 0.2s;
}

/* ===== TRADE ITEMS IN ME PAGE ===== */
#me-page .trade-item {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 14px;
}
#me-page .trade-item:last-child { border-bottom: none; }
#me-page .trade-item:hover { transform: translateX(3px); }
#me-page .trade-item-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
#me-page .trade-item-info { flex: 1; }
#me-page .trade-item-name {
  font-weight: 700; font-size: 14px;
  color: var(--text-primary);
}
#me-page .trade-item-desc {
  font-size: 12px; color: var(--text-secondary);
  margin-top: 2px;
}
#me-page .trade-item-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  letter-spacing: 0.04em;
}

/* ===== PERPS PAGE ===== */
.predictions-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 12px; flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
}
.predictions-back-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--card-bg); border: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-primary);
  transition: all 0.2s; flex-shrink: 0; font-size: 14px;
}
.predictions-back-btn:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.predictions-title-block h2 {
  font-size: 18px; font-weight: 800; margin: 0 0 2px;
  color: var(--text-primary);
}
.predictions-title-block p {
  font-size: 12px; color: var(--text-secondary); margin: 0;
}

/* ===== SHARED PAGE CLOSE BUTTON (Perps, Predictions, modals) ===== */
.page-close-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px 8px 12px;
  min-height: 40px;
  border-radius: 22px;
  border: 1.5px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  letter-spacing: 0.01em;
  user-select: none;
  white-space: nowrap;
}
.page-close-btn .pcb-icon {
  width: 24px; height: 24px;
  min-width: 24px; min-height: 24px;
  border-radius: 50%;
  background: rgba(139, 92, 246,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--primary-color);
  flex-shrink: 0; transition: all 0.2s;
}
.page-close-btn:hover {
  border-color: var(--primary-color);
  background: rgba(139, 92, 246,0.07);
  box-shadow: 0 4px 16px rgba(139, 92, 246,0.18);
  transform: translateY(-1px);
}
.page-close-btn:hover .pcb-icon {
  background: var(--primary-color);
  color: white;
}
.page-close-btn:active { transform: translateY(0); }

/* TOS / Privacy modal close button */
.modal-close-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px 7px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 12px; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  letter-spacing: 0.01em;
}
.modal-close-btn .mcb-icon {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(139, 92, 246,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--primary-color);
  flex-shrink: 0; transition: all 0.2s;
}
.modal-close-btn:hover {
  border-color: var(--primary-color);
  background: rgba(139, 92, 246,0.07);
  box-shadow: 0 4px 14px rgba(139, 92, 246,0.18);
}
.modal-close-btn:hover .mcb-icon {
  background: var(--primary-color);
  color: white;
}
.perps-coming-soon {
  text-align: center; padding: 24px 8px 8px;
}
.perps-icon-ring {
  width: 90px; height: 90px; margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(139, 92, 246,0.15), rgba(79,70,229,0.15));
  border: 2px solid rgba(139, 92, 246,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  box-shadow: 0 0 30px rgba(139, 92, 246,0.2);
  animation: perpsGlow 3s ease-in-out infinite;
}
@keyframes perpsGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246,0.2); }
  50% { box-shadow: 0 0 40px rgba(139, 92, 246,0.45), 0 0 60px rgba(79,70,229,0.15); }
}
.perps-coming-soon h3 {
  font-size: 26px; font-weight: 900; margin: 0 0 10px;
  background: linear-gradient(135deg, #7c3aed, #7B22D0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.perps-coming-soon > p {
  font-size: 14px; color: var(--text-secondary); line-height: 1.6;
  margin: 0 0 24px; max-width: 300px; margin-left: auto; margin-right: auto;
}
.perps-feature-list {
  background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 20px; padding: 8px 16px; margin-bottom: 24px; text-align: left;
}
.perps-feature-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border-color);
  font-size: 13px; color: var(--text-primary);
}
.perps-feature-row:last-child { border-bottom: none; }
.perps-feature-row i {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed, #7B22D0);
  color: white; font-size: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.perps-notify-wrap { margin-bottom: 24px; }
.perps-notify-btn {
  background: linear-gradient(135deg, #7c3aed, #7B22D0);
  color: white; border: none; border-radius: 18px;
  padding: 14px 32px; font-size: 15px; font-weight: 800;
  cursor: pointer; letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(139, 92, 246,0.4);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.perps-notify-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(139, 92, 246,0.55); }
.perps-notify-btn:active { transform: translateY(0); }
.perps-notify-btn.registered {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 8px 24px rgba(16,185,129,0.4);
}
.perps-notify-confirmed {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3);
  border-radius: 14px; padding: 12px 16px; margin-top: 12px;
  font-size: 13px; color: var(--accent-green); font-weight: 600;
  animation: fadeInUp 0.4s ease;
}
@keyframes fadeInUp {
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}
.perps-countdown-block {
  background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 20px; padding: 20px; margin-bottom: 20px;
}
.perps-countdown-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 14px;
}
.perps-countdown-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.perps-cd-unit {
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(135deg, rgba(139, 92, 246,0.12), rgba(79,70,229,0.12));
  border: 1px solid rgba(139, 92, 246,0.25); border-radius: 14px;
  padding: 10px 16px; min-width: 60px;
}
.perps-cd-unit span:first-child {
  font-size: 28px; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #7c3aed, #7B22D0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pcd-l { font-size: 9px; font-weight: 800; color: var(--text-secondary); letter-spacing: 0.06em; margin-top: 3px; }
.perps-cd-sep { font-size: 22px; font-weight: 900; color: var(--primary-color); margin-bottom: 16px; }
.perps-preview-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px;
}
.perps-preview-card {
  background: var(--card-bg); border: 1.5px solid var(--border-color);
  border-radius: 18px; padding: 14px 12px; text-align: left;
  position: relative; overflow: hidden;
  transition: all 0.2s ease;
}
.perps-preview-card::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 40px; height: 40px;
  background: linear-gradient(135deg, transparent, rgba(139, 92, 246,0.08));
  border-radius: 0 18px 0 40px;
}
.perps-preview-card:hover { border-color: var(--primary-color); box-shadow: 0 4px 20px rgba(139, 92, 246,0.12); }
.perps-preview-asset { font-size: 12px; font-weight: 800; color: var(--text-secondary); letter-spacing: 0.04em; margin-bottom: 6px; }
.perps-preview-price { font-size: 17px; font-weight: 900; color: var(--text-primary); margin-bottom: 4px; }
.perps-preview-change { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.perps-preview-change.up   { color: var(--accent-green); }
.perps-preview-change.down { color: var(--error-color); }
.perps-preview-leverage {
  font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(139, 92, 246,0.15), rgba(79,70,229,0.15));
  color: var(--primary-color); display: inline-block; letter-spacing: 0.03em;
}

/* ===== PREDICTIONS PAGE ===== */
#predictions-page {
  display: none; flex-direction: column;
  height: 100%; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
}
#predictions-page::-webkit-scrollbar { display: none; }
#predictions-page .pred-header {
  padding: 16px 16px 0; display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 12px;
  position: sticky; top: 0; z-index: 11;
  background: var(--bg-primary);
}
#predictions-page .pred-title {
  font-size: 20px; font-weight: 800;
  background: var(--gradient-primary); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
#predictions-page .pred-live-badge {
  background: linear-gradient(135deg, #A78BFA, #8B5CF6);
  color: white; font-size: 10px; font-weight: 800;
  padding: 4px 10px; border-radius: 20px;
  letter-spacing: 0.06em; animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(139, 92, 246,0); }
}
/* Tab bar */
.pred-tab-bar {
  display: flex; padding: 10px 16px 0; gap: 4px; flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
  position: sticky; top: 57px; z-index: 10;
  background: var(--bg-primary);
}
.pred-tab {
  padding: 8px 16px; font-size: 13px; font-weight: 700;
  border: none; background: none; cursor: pointer;
  color: var(--text-secondary); border-bottom: 2px solid transparent;
  transition: all 0.2s; margin-bottom: -1px;
}
.pred-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
/* Search + Sort row */
#predictions-page .pred-search {
  padding: 12px 16px 8px; flex-shrink: 0; display: flex; gap: 8px; align-items: center; position: relative;
}
#predictions-page .pred-search-wrap { position: relative; flex: 1; }
#predictions-page .pred-search-wrap i {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%); color: var(--text-secondary); font-size: 14px;
}
#predictions-page .pred-search-input {
  width: 100%; padding: 10px 16px 10px 40px;
  border-radius: 14px; border: 1.5px solid var(--border-color);
  background: var(--card-bg); color: var(--text-primary);
  font-size: 14px; outline: none; transition: border-color 0.2s;
}
#predictions-page .pred-search-input:focus { border-color: var(--primary-color); }
.pred-sort-btn {
  padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--border-color);
  background: var(--card-bg); color: var(--text-secondary);
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all 0.2s; display: flex; align-items: center; gap: 5px;
}
.pred-sort-btn:hover, .pred-sort-btn.active { border-color: var(--primary-color); color: var(--primary-color); }
/* Sort dropdown */
.pred-sort-dropdown {
  position: absolute; right: 16px; top: 54px; z-index: 999;
  background: var(--bg-secondary); border: 1.5px solid var(--border-color);
  border-radius: 14px; padding: 6px; min-width: 160px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15); display: none;
}
.pred-sort-dropdown.open { display: block; }
.pred-sort-option {
  padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  cursor: pointer; color: var(--text-secondary); transition: all 0.15s;
}
.pred-sort-option:hover { background: var(--card-bg); color: var(--text-primary); }
.pred-sort-option.active { color: var(--primary-color); font-weight: 800; }
/* Category tabs */
#predictions-page .pred-cats {
  display: flex; gap: 8px; padding: 0 16px 10px;
  overflow-x: auto; flex-shrink: 0; scrollbar-width: none;
}
#predictions-page .pred-cats::-webkit-scrollbar { display: none; }
#predictions-page .pred-cat {
  padding: 5px 12px; border-radius: 20px; border: 1.5px solid var(--border-color);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  cursor: pointer; transition: all 0.2s;
  color: var(--text-secondary); background: var(--card-bg);
}
#predictions-page .pred-cat.active {
  border-color: var(--primary-color); background: var(--primary-color); color: white;
}
/* Stats bar */
#predictions-page .pred-stats-bar {
  display: flex; gap: 8px; padding: 0 16px 10px; flex-shrink: 0;
}
#predictions-page .pred-stat-pill {
  flex: 1; background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 8px 10px; text-align: center;
}
#predictions-page .pred-stat-val {
  font-size: 14px; font-weight: 800;
  background: var(--gradient-primary); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
#predictions-page .pred-stat-lbl {
  font-size: 10px; color: var(--text-secondary); font-weight: 600; margin-top: 2px;
}
#predictions-page .pred-list {
  padding: 0 16px 80px; scrollbar-width: none;
}
#predictions-page .pred-list::-webkit-scrollbar { display: none; }
/* Market Cards */
.pred-card {
  background: var(--card-bg); border: 1.5px solid var(--border-color);
  border-radius: 20px; padding: 14px 14px 12px 18px; margin-bottom: 10px;
  cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
  position: relative; overflow: hidden;
}
.pred-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 4px; height: 100%; border-radius: 4px 0 0 4px;
  background: var(--gradient-primary);
}
.pred-card:hover { transform: translateY(-2px); box-shadow: var(--hover-shadow); border-color: var(--primary-color); }
.pred-card-trend-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(139, 92, 246,0.15));
  border: 1px solid rgba(245,158,11,0.4); color: #b45309;
  font-size: 9px; font-weight: 800; padding: 2px 7px;
  border-radius: 20px; letter-spacing: 0.04em; margin-bottom: 6px;
}
.pred-card-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.pred-card-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--gradient-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0; overflow: hidden;
}
.pred-card-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.pred-card-meta { flex: 1; min-width: 0; }
.pred-card-question {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  line-height: 1.4; margin-bottom: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pred-card-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.pred-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px; }
.pred-tag-cat  { background: rgba(139, 92, 246,0.12); color: var(--primary-color); }
.pred-tag-end  { background: rgba(245,158,11,0.12);  color: #92400e; }
.pred-tag-liq  { background: rgba(6,182,212,0.12);   color: #0e7490; }
.pred-tag-close { background: rgba(16,185,129,0.12); color: #065f46; }
.pred-odds-row { display: flex; align-items: center; gap: 0; margin-bottom: 6px; }
.pred-yes-pct { font-size: 20px; font-weight: 900; color: var(--accent-green); }
.pred-no-pct  { font-size: 20px; font-weight: 900; color: var(--error-color); }
.pred-odds-divider {
  flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 8px;
}
.pred-odds-divider-label { font-size: 9px; color: var(--text-secondary); font-weight: 600; }
.pred-prob-bar {
  width: 100%; height: 6px; border-radius: 6px;
  background: rgba(139, 92, 246,0.25); overflow: hidden; margin-bottom: 10px;
}
.pred-prob-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #10b981, #A78BFA); transition: width 0.6s ease;
}
.pred-card-footer { display: flex; align-items: center; justify-content: space-between; }
.pred-vol-line { font-size: 10px; color: var(--text-secondary); }
.pred-bet-btns { display: flex; gap: 5px; }
.pred-bet-yes, .pred-bet-no {
  padding: 6px 12px; border-radius: 10px; border: none;
  font-size: 11px; font-weight: 800; cursor: pointer; transition: all 0.2s;
}
.pred-bet-yes { background: linear-gradient(135deg, #10b981, #059669); color: white; box-shadow: 0 3px 10px rgba(16,185,129,0.3); }
.pred-bet-yes:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(16,185,129,0.5); }
.pred-bet-no  { background: linear-gradient(135deg, #A78BFA, #8B5CF6); color: white; box-shadow: 0 3px 10px rgba(139, 92, 246,0.3); }
.pred-bet-no:hover  { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(139, 92, 246,0.5); }
/* Payment network/token selector */
.pred-pay-net-btn, .pred-pay-tok-btn {
  padding:8px 10px; border-radius:10px; border:1.5px solid var(--border-color);
  background:var(--card-bg); color:var(--text-secondary);
  font-size:12px; font-weight:700; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; gap:5px; justify-content:center;
}
.pred-pay-net-btn.active, .pred-pay-tok-btn.active {
  border-color:var(--primary-color); background:rgba(139, 92, 246,0.1); color:var(--primary-color);
}
.pred-empty { text-align: center; padding: 40px 20px; color: var(--text-secondary); }
.pred-empty i { font-size: 38px; margin-bottom: 12px; display: block; opacity: 0.35; }
.pred-skeleton {
  background: var(--card-bg); border: 1.5px solid var(--border-color);
  border-radius: 20px; padding: 16px; margin-bottom: 10px; animation: skeletonPulse 1.5s infinite;
}
@keyframes skeletonPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.skel-line { height: 12px; border-radius: 6px; background: var(--border-color); margin-bottom: 8px; }
/* My Positions */
.pred-position-card {
  background: var(--card-bg); border: 1.5px solid var(--border-color);
  border-radius: 18px; padding: 14px; margin-bottom: 10px; position: relative; overflow: hidden;
}
.pred-position-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 4px; height: 100%; border-radius: 4px 0 0 4px;
}
.pred-position-card.pos-yes::before    { background: var(--accent-green); }
.pred-position-card.pos-no::before     { background: var(--error-color); }
.pred-position-card.res-won::before    { background: #D4900A; }
.pred-position-card.res-lost::before   { background: #6b7280; }
.pred-position-card.res-settled::before{ background: #AD6FFB; }
.pred-pos-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pred-pos-side-badge { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 20px; }
.pred-pos-side-badge.yes { background: rgba(16,185,129,0.15); color: #059669; }
.pred-pos-side-badge.no  { background: rgba(139, 92, 246,0.15);  color: #8B5CF6; }
.pred-pos-result-badge {
  font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 20px; margin-left: 6px;
}
.pred-pos-result-badge.won     { background:rgba(245,158,11,0.15);  color:#d97706; }
.pred-pos-result-badge.lost    { background:rgba(107,114,128,0.15); color:#6b7280; }
.pred-pos-result-badge.settled { background:rgba(173,111,251,0.15);  color:#7c3aed; }
.pred-pos-result-badge.pending { background:rgba(139, 92, 246,0.12);  color:var(--primary-color); }
.pred-pos-status { font-size: 10px; color: var(--text-secondary); font-weight: 600; }
.pred-pos-question { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; line-height: 1.4; }
.pred-pos-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); padding: 3px 0; }
.pred-pos-empty { text-align: center; padding: 40px 20px; color: var(--text-secondary); }
.pred-pos-tx { font-size: 10px; color: var(--text-secondary); margin-top: 8px; font-family: monospace; word-break: break-all; }
.pred-pos-payout-row { font-size:12px; font-weight:700; padding:4px 0; display:flex; justify-content:space-between; color: #059669; }
.pred-pos-note { font-size:11px; color:var(--primary-color); margin-top:6px; background:rgba(139, 92, 246,0.08); border-radius:8px; padding:6px 10px; line-height:1.5; }

/* ===== RESULTS TAB ===== */
#pred-results-view { display:none; padding:0 16px 80px; scrollbar-width:none; }
#pred-results-view::-webkit-scrollbar { display:none; }
.pred-results-filter-bar {
  display:flex; gap:8px; padding:10px 0 6px; align-items:center; flex-shrink:0;
}
.pred-results-filter-btn {
  padding:5px 13px; border-radius:20px; border:1.5px solid var(--border-color);
  font-size:11px; font-weight:700; white-space:nowrap; cursor:pointer;
  color:var(--text-secondary); background:var(--card-bg); transition:all 0.2s;
}
.pred-results-filter-btn.active {
  border-color:var(--primary-color); background:var(--primary-color); color:#fff;
}
.pred-results-search {
  position:relative; flex:1;
}
.pred-results-search i {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--text-secondary); font-size:12px; pointer-events:none;
}
.pred-results-search input {
  width:100%; padding:7px 12px 7px 30px; border-radius:12px;
  border:1.5px solid var(--border-color); background:var(--card-bg);
  color:var(--text-primary); font-size:13px; outline:none; transition:border-color 0.2s;
}
.pred-results-search input:focus { border-color:var(--primary-color); }
/* Result card */
.pred-result-card {
  background:var(--card-bg); border:1.5px solid var(--border-color);
  border-radius:20px; padding:14px 14px 12px 18px; margin-bottom:10px;
  position:relative; overflow:hidden; transition:all 0.25s;
}
.pred-result-card::before {
  content:''; position:absolute; top:0; left:0;
  width:4px; height:100%; border-radius:4px 0 0 4px;
}
.pred-result-card.res-yes::before  { background:linear-gradient(180deg,#10b981,#059669); }
.pred-result-card.res-no::before   { background:linear-gradient(180deg,#A78BFA,#8B5CF6); }
.pred-result-card.res-n\/a::before { background:linear-gradient(180deg,#6b7280,#4b5563); }
.pred-result-card:hover { transform:translateY(-1px); box-shadow:var(--hover-shadow); }
.pred-result-top { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.pred-result-icon {
  width:40px; height:40px; border-radius:12px;
  background:var(--bg-secondary); border:1px solid var(--border-color);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; flex-shrink:0; overflow:hidden;
}
.pred-result-icon img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
.pred-result-meta { flex:1; min-width:0; }
.pred-result-question {
  font-size:13px; font-weight:700; color:var(--text-primary);
  line-height:1.4; margin-bottom:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pred-result-tags { display:flex; gap:5px; flex-wrap:wrap; }
/* Outcome banner */
.pred-result-outcome-bar {
  display:flex; align-items:center; justify-content:space-between;
  border-radius:12px; padding:9px 14px; margin-bottom:10px;
  gap:10px;
}
.pred-result-outcome-bar.won  { background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.3); }
.pred-result-outcome-bar.lost { background:rgba(139, 92, 246,0.12);  border:1px solid rgba(139, 92, 246,0.3); }
.pred-result-outcome-bar.na   { background:rgba(107,114,128,0.1); border:1px solid rgba(107,114,128,0.25); }
.pred-result-outcome-label { font-size:11px; font-weight:800; letter-spacing:0.05em; }
.pred-result-outcome-bar.won  .pred-result-outcome-label { color:#059669; }
.pred-result-outcome-bar.lost .pred-result-outcome-label { color:#8B5CF6; }
.pred-result-outcome-bar.na   .pred-result-outcome-label { color:#6b7280; }
.pred-result-outcome-winner {
  font-size:16px; font-weight:900;
}
.pred-result-outcome-bar.won  .pred-result-outcome-winner { color:#10b981; }
.pred-result-outcome-bar.lost .pred-result-outcome-winner { color:#A78BFA; }
.pred-result-outcome-bar.na   .pred-result-outcome-winner { color:#6b7280; }
.pred-result-final-bar {
  width:100%; height:6px; border-radius:6px;
  background:rgba(139, 92, 246,0.25); overflow:hidden; margin-bottom:10px;
}
.pred-result-final-fill {
  height:100%; border-radius:6px;
  background:linear-gradient(90deg,#10b981,#A78BFA);
}
/* Final odds row */
.pred-result-odds-row { display:flex; align-items:center; gap:0; margin-bottom:8px; }
.pred-result-yes-pct { font-size:20px; font-weight:900; color:#10b981; }
.pred-result-no-pct  { font-size:20px; font-weight:900; color:#A78BFA; }
/* My bet badge on result */
.pred-result-my-bet {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:20px; font-size:10px; font-weight:800;
  margin-bottom:8px;
}
.pred-result-my-bet.win  { background:rgba(16,185,129,0.15); color:#059669; border:1px solid rgba(16,185,129,0.3); }
.pred-result-my-bet.loss { background:rgba(139, 92, 246,0.15);  color:#8B5CF6; border:1px solid rgba(139, 92, 246,0.3); }
/* Result footer */
.pred-result-footer {
  display:flex; align-items:center; justify-content:space-between;
  font-size:10px; color:var(--text-secondary);
}
/* Results summary bar */
.pred-results-summary {
  display:flex; gap:8px; padding:8px 0 6px; flex-shrink:0;
}
.pred-results-sum-pill {
  flex:1; background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:12px; padding:7px 8px; text-align:center;
}
.pred-results-sum-val {
  font-size:13px; font-weight:800;
  background:var(--gradient-primary); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.pred-results-sum-lbl { font-size:9px; color:var(--text-secondary); font-weight:600; margin-top:1px; }
.pred-results-sum-pill.green .pred-results-sum-val { background:linear-gradient(90deg,#10b981,#A78BFA); -webkit-background-clip:text; background-clip:text; }
.pred-results-sum-pill.red   .pred-results-sum-val { background:linear-gradient(90deg,#A78BFA,#f87171); -webkit-background-clip:text; background-clip:text; }
/* Results skeleton */
.pred-result-skel {
  background:var(--card-bg); border:1.5px solid var(--border-color);
  border-radius:20px; padding:16px; margin-bottom:10px;
  animation:skeletonPulse 1.5s infinite;
}

/* ===== BET BOTTOM SHEET ===== */
#pred-bet-modal {
  display: none; position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  align-items: flex-end; justify-content: center;
}
#pred-bet-modal.open { display: flex; }
.pred-bet-sheet {
  background: var(--bg-secondary); border-radius: 28px 28px 0 0;
  padding: 20px 20px 32px; width: 100%; max-width: 480px;
  border-top: 1.5px solid var(--border-color);
  animation: slideUpSheet 0.3s var(--transition-bounce);
  max-height: 90vh; overflow-y: auto;
}
@keyframes slideUpSheet {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes spinAnim { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.pred-sheet-handle {
  width: 36px; height: 4px; background: var(--border-color);
  border-radius: 4px; margin: 0 auto 16px; cursor: grab;
}
.pred-sheet-close {
  position: absolute; top: 18px; right: 18px;
  background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 50%; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary); font-size: 14px; transition: all 0.2s;
}
.pred-sheet-close:hover { background: var(--error-color); color: white; border-color: var(--error-color); }
.pred-sheet-market-q {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  line-height: 1.45; margin-bottom: 14px; padding-right: 36px;
}
/* YES / NO side toggle */
.pred-side-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.pred-side-btn {
  flex: 1; padding: 14px 10px; border-radius: 16px; text-align: center;
  border: 2px solid transparent; cursor: pointer; transition: all 0.2s;
}
.pred-side-btn.yes { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.25); }
.pred-side-btn.no  { background: rgba(139, 92, 246,0.08);  border-color: rgba(139, 92, 246,0.25); }
.pred-side-btn.yes.selected { background: rgba(16,185,129,0.18); border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }
.pred-side-btn.no.selected  { background: rgba(139, 92, 246,0.18);  border-color: #A78BFA;  box-shadow: 0 0 0 3px rgba(139, 92, 246,0.12); }
.pred-side-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.pred-side-btn.yes .pred-side-label { color: #059669; }
.pred-side-btn.no  .pred-side-label { color: #8B5CF6; }
.pred-side-pct { font-size: 24px; font-weight: 900; }
.pred-side-btn.yes .pred-side-pct { color: var(--accent-green); }
.pred-side-btn.no  .pred-side-pct { color: var(--error-color); }
.pred-side-ret { font-size: 10px; color: var(--text-secondary); margin-top: 2px; }
/* Order type */
.pred-order-type-row { display: flex; gap: 6px; margin-bottom: 12px; }
.pred-order-type-btn {
  flex: 1; padding: 8px; border-radius: 12px;
  border: 1.5px solid var(--border-color); background: var(--card-bg);
  font-size: 12px; font-weight: 700; cursor: pointer; text-align: center;
  color: var(--text-secondary); transition: all 0.2s;
}
.pred-order-type-btn.active {
  border-color: var(--primary-color); color: var(--primary-color);
  background: rgba(139, 92, 246,0.08);
}
/* Limit price */
.pred-limit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pred-limit-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.pred-limit-input {
  flex: 1; padding: 9px 12px; border-radius: 12px;
  border: 1.5px solid var(--border-color); background: var(--card-bg);
  color: var(--text-primary); font-size: 14px; font-weight: 700;
  outline: none; transition: border-color 0.2s;
}
.pred-limit-input:focus { border-color: var(--primary-color); }
.pred-limit-hint { font-size: 10px; color: var(--text-secondary); }
/* Amount */
.pred-amount-section label {
  display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px;
}
.pred-amount-input-wrap { position: relative; margin-bottom: 8px; }
.pred-amount-input-wrap .pred-currency {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 14px; font-weight: 800; color: var(--text-secondary);
}
.pred-amount-input {
  width: 100%; padding: 12px 12px 12px 28px; border-radius: 14px;
  border: 1.5px solid var(--border-color); background: var(--card-bg);
  color: var(--text-primary); font-size: 18px; font-weight: 800;
  outline: none; transition: border-color 0.2s;
}
.pred-amount-input:focus { border-color: var(--primary-color); }
.pred-presets { display: flex; gap: 6px; margin-bottom: 14px; }
.pred-preset-btn {
  flex: 1; padding: 7px 4px; border-radius: 10px;
  border: 1.5px solid var(--border-color); background: var(--card-bg);
  color: var(--text-secondary); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.2s; text-align: center;
}
.pred-preset-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
/* Expiration */
.pred-expiry-section { margin-bottom: 14px; }
.pred-expiry-section label {
  display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px;
}
.pred-expiry-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.pred-expiry-btn {
  padding: 6px 12px; border-radius: 10px;
  border: 1.5px solid var(--border-color); background: var(--card-bg);
  color: var(--text-secondary); font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.pred-expiry-btn.active { border-color: var(--primary-color); color: var(--primary-color); background: rgba(139, 92, 246,0.08); }
.pred-expiry-custom { display: none; margin-top: 8px; }
.pred-expiry-custom.show { display: block; }
.pred-expiry-date-input {
  width: 100%; padding: 8px 12px; border-radius: 12px;
  border: 1.5px solid var(--border-color); background: var(--card-bg);
  color: var(--text-primary); font-size: 13px; font-weight: 600;
  outline: none; transition: border-color 0.2s;
}
.pred-expiry-date-input:focus { border-color: var(--primary-color); }
/* Summary box */
.pred-summary-box {
  background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 14px;
}
.pred-sum-row {
  display: flex; justify-content: space-between; font-size: 12px;
  color: var(--text-secondary); padding: 3px 0;
}
.pred-sum-row.total {
  color: var(--text-primary); font-weight: 800; font-size: 14px;
  border-top: 1px solid var(--border-color); padding-top: 9px; margin-top: 5px;
}
/* Place button */
.pred-place-btn {
  width: 100%; padding: 15px; border-radius: 16px; border: none;
  font-size: 15px; font-weight: 800; cursor: pointer; letter-spacing: 0.02em;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.pred-place-btn.yes-bet { background: linear-gradient(135deg,#10b981,#059669); color: white; box-shadow: 0 8px 24px rgba(16,185,129,0.4); }
.pred-place-btn.no-bet  { background: linear-gradient(135deg,#A78BFA,#8B5CF6); color: white; box-shadow: 0 8px 24px rgba(139, 92, 246,0.4); }
.pred-place-btn:hover:not(:disabled) { transform: translateY(-2px); }
.pred-place-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
/* Confirm view */
.pred-confirm-view { display: none; }
.pred-confirm-view.active { display: block; }
.pred-confirm-header { text-align: center; margin-bottom: 16px; }
.pred-confirm-icon { font-size: 36px; margin-bottom: 6px; }
.pred-confirm-title { font-size: 17px; font-weight: 800; color: var(--text-primary); }
.pred-confirm-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
.pred-confirm-detail {
  background: var(--card-bg); border-radius: 16px; padding: 14px;
  border: 1px solid var(--border-color); margin-bottom: 14px;
}
.pred-confirm-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--text-secondary); }
.pred-confirm-row.big {
  font-weight: 800; font-size: 15px; color: var(--text-primary);
  padding: 8px 0 4px; border-top: 1px solid var(--border-color); margin-top: 4px;
}
.pred-confirm-btns { display: flex; gap: 10px; margin-bottom: 10px; }
.pred-back-btn2 {
  padding: 14px 18px; border-radius: 14px; border: 1.5px solid var(--border-color);
  background: var(--card-bg); color: var(--text-secondary);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.pred-back-btn2:hover { border-color: var(--primary-color); color: var(--primary-color); }
.pred-submit-btn {
  flex: 1; padding: 14px; border-radius: 14px; border: none;
  font-size: 14px; font-weight: 800; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.pred-submit-btn.yes { background: linear-gradient(135deg,#10b981,#059669); color: white; box-shadow: 0 6px 20px rgba(16,185,129,0.4); }
.pred-submit-btn.no  { background: linear-gradient(135deg,#A78BFA,#8B5CF6); color: white; box-shadow: 0 6px 20px rgba(139, 92, 246,0.4); }
.pred-submit-btn:hover:not(:disabled) { transform: translateY(-2px); }
.pred-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* Processing view */
.pred-processing-view { display: none; text-align: center; padding: 30px 0; }
.pred-processing-view.active { display: block; }
/* Success view */
.pred-success-view { display: none; text-align: center; padding: 8px 0; }
.pred-success-view.active { display: block; }
.pred-success-icon { font-size: 54px; margin-bottom: 12px; animation: bounceIn 0.7s var(--transition-bounce); display: block; }
.pred-success-title { font-size: 21px; font-weight: 900; color: var(--text-primary); margin-bottom: 5px; letter-spacing: -0.4px; }
.pred-success-sub { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 18px; line-height: 1.5; padding: 0 8px; }
.pred-success-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.pred-success-primary { width: 100%; padding: 15px; border: none; border-radius: 16px; background: linear-gradient(135deg, #10b981, #059669); color: white; font-size: 0.97rem; font-weight: 800; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 6px 20px rgba(16,185,129,0.4); }
.pred-success-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(16,185,129,0.5); }
.pred-success-secondary { width: 100%; padding: 12px; border: 1.5px solid var(--border-color); border-radius: 14px; background: transparent; color: var(--text-secondary); font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; }
.pred-success-secondary:hover { border-color: var(--primary-color); color: var(--primary-color); }
.pred-processing-spinner {
  font-size: 42px; display: inline-block;
  animation: spinAnim 1.2s linear infinite; margin-bottom: 14px;
}
.pred-usdc-note { text-align: center; font-size: 10px; color: var(--text-secondary); margin-top: 8px; }


#me-page .avatar {
  width: 64px;
  height: 64px;
  font-size: 28px;
}

#me-page .name {
  font-size: 20px;
  font-weight: 800;
}

#me-page .status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

#me-page code {
  background: rgba(139, 92, 246,0.15);
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 13px;
}

#me-page .balance-amount {
  font-size: 20px;
}

#me-page .pref-section {
  margin: 10px 0;
  background: var(--card-bg);
  border-radius: 20px;
  padding: 0 16px;
  border: 1px solid var(--border-color);
  transition: box-shadow 0.2s;
}

#me-page .pref-section:hover {
  box-shadow: 0 4px 20px rgba(139, 92, 246,0.08);
}

#me-page .pref-section-title {
  font-weight: 700;
  color: var(--text-primary);
  padding: 15px 0;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  font-size: 14px;
}

#me-page .pref-section-title .fa-chevron-down {
  margin-left: auto;
  transition: transform 0.25s ease;
}

#me-page .pref-section-title.open .fa-chevron-down {
  transform: rotate(180deg);
}

#me-page .section-content {
  padding: 8px 0 4px;
}

#me-page .pref-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}
#me-page .pref-option:last-child {
  border-bottom: none;
}
#me-page .pref-label {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 14px;
}
#me-page .pref-select {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 0.9rem;
  outline: none;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  width: auto;
  min-width: 150px;
}
#me-page .pref-select:focus {
  border-color: var(--primary-color);
}
#me-page .toggle-switch {
  width: 48px;
  height: 26px;
  background: rgba(139, 92, 246, 0.2);
  border-radius: 30px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
  border: 1px solid rgba(139, 92, 246, 0.4);
  flex-shrink: 0;
}
#me-page .toggle-switch.active {
  background: var(--primary-color);
}
#me-page .toggle-slider {
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: transform 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#me-page .toggle-switch.active .toggle-slider {
  transform: translateX(22px);
}
#me-page .max-button {
  background: linear-gradient(135deg, var(--accent-color), #10b981);
  border: none;
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 18px;
  box-shadow: 0 5px 18px -3px rgba(245, 158, 11, 0.6);
  transition: all 0.2s;
  flex-shrink: 0;
}
#me-page .max-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.8);
}
#me-page a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}
#me-page a:hover {
  text-decoration: underline;
}

/* ===== CUSTOM SELECTOR STYLES ===== */
.custom-selector-wrapper { position: relative; width: 100%; }
.custom-selector-field {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-secondary); border: 1.5px solid var(--border-color);
  border-radius: 18px; padding: 12px 16px; cursor: pointer; font-size: 14px;
  color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.2s;
  gap: 8px; user-select: none; -webkit-user-select: none;
}
.custom-selector-field:hover, .custom-selector-field.open {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(139, 92, 246,0.15);
}
.custom-selector-field.open i { transform: rotate(180deg); }
.custom-selector-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-secondary); border: 1.5px solid var(--border-color);
  border-radius: 18px; z-index: 9999; max-height: 220px; overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4); animation: dropdownIn 0.18s ease;
}
@keyframes dropdownIn {
  from { opacity:0; transform: translateY(-6px); }
  to { opacity:1; transform: translateY(0); }
}
.custom-selector-option {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  cursor: pointer; font-size: 14px; color: var(--text-primary);
  transition: background 0.15s; border-bottom: 1px solid var(--border-color);
}
.custom-selector-option:last-child { border-bottom: none; }
.custom-selector-option:hover, .custom-selector-option.selected {
  background: rgba(139, 92, 246,0.12); color: var(--primary-color); font-weight: 600;
}
#me-page .scrollable-page-content { overflow-y: auto; height: 100%; -webkit-overflow-scrolling: touch; }

/* ===== SUPPORT SOCIAL ITEMS ===== */
.support-social-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-color);
  text-decoration: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 12px;
  margin-bottom: 2px;
}
.support-social-item:last-child { border-bottom: none; }
.support-social-item:hover {
  background: rgba(139, 92, 246,0.08);
}
.support-social-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.support-social-info { flex: 1; }
.support-social-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.support-social-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ── Live Chat unread badge — red, blinking, shows unread count ────────── */
.livechat-unread-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
  animation: livechatBadgeBlink 1.4s ease-in-out infinite;
}
@keyframes livechatBadgeBlink {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); opacity: 1; }
  50%  { box-shadow: 0 0 0 5px rgba(239,68,68,0); opacity: 0.72; }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); opacity: 1; }
}

/* ===== HELP CENTER TOPICS ===== */
.help-topic {
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  padding: 12px 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.help-topic:last-child { border-bottom: none; }
.help-q {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
}
.help-toggle-icon {
  color: var(--primary-color);
  flex-shrink: 0;
  font-size: 12px;
  margin-top: 2px;
  transition: transform 0.2s;
}
.help-a {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
  padding: 10px 0 2px 22px;
  display: none;
}

/* ========== SWAP / SELL / EARN / STAKE SHARED STYLES ========== */
.swap-page-header, .sell-page-header, .earn-header, .stake-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-color);
  background: var(--card-bg);
  flex-shrink: 0;
}
.swap-back-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s;
}
.swap-back-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); transform: scale(1.1); }
.swap-page-title-block { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.swap-page-title { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.swap-live-badge, .sell-live-badge, .earn-live-badge, .stake-live-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
}
.swap-live-badge { background: rgba(139, 92, 246,0.15); color: var(--primary-color); }
.sell-live-badge { background: rgba(139, 92, 246,0.12); color: var(--accent-red); }
.earn-live-badge { background: rgba(16,185,129,0.12); color: var(--accent-green); }
/* Earn page tab bar — reuses stake-tab-row styles, just needs margin fix */
#earn-tab-row { margin: 0 16px 0; }
/* Earn tab views sit inside earn-scroll-main which handles the scroll.
   They only need to show/hide; no overflow or flex-chain needed here. */
#earn-products-view {
  display: block;
}
#earn-mystakes-view {
  display: none;
}
.stake-live-badge { background: rgba(245,158,11,0.15); color: var(--accent-color); }
.swap-settings-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-primary); color: var(--text-primary);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s;
}
.swap-settings-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* Settings panel */
.swap-settings-panel {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 14px 16px;
  animation: slideDown 0.25s ease;
}
.swap-settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.swap-settings-row:last-child { margin-bottom: 0; }
.slippage-btns { display: flex; gap: 6px; align-items: center; }
.slippage-btn {
  padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-color); background: var(--bg-primary);
  color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
}
.slippage-btn.active, .slippage-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.slippage-custom {
  width: 66px; padding: 5px 8px; border-radius: 20px; font-size: 12px;
  border: 1px solid var(--border-color); background: var(--bg-primary);
  color: var(--text-primary); text-align: center;
}
.slippage-custom:focus { outline: none; border-color: var(--primary-color); }

/* Swap form */
.swap-form-wrap { padding: 16px; display: flex; flex-direction: column; gap: 0; }
.swap-token-box {
  background: var(--card-bg);
  border: 1.5px solid var(--border-color);
  border-radius: 22px;
  padding: 16px;
  transition: border-color 0.25s;
}
.swap-token-box:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(139, 92, 246,0.1); }
.swap-box-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.swap-token-row { display: flex; align-items: center; gap: 12px; }
.swap-coin-selector {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--bg-primary); border: 1px solid var(--border-color);
  border-radius: 40px; padding: 8px 12px 8px 8px;
  min-width: 120px; transition: all 0.2s;
}
.swap-coin-selector:hover { border-color: var(--primary-color); background: rgba(139, 92, 246,0.06); }
.swap-coin-selector.locked { cursor: default; opacity: 0.85; }
.swap-coin-selector.locked:hover { border-color: var(--border-color); background: var(--bg-primary); }
.swap-coin-img {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gradient-primary); display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; overflow: hidden; flex-shrink: 0;
}
.swap-coin-img img { width: 100%; height: 100%; object-fit: cover; }
.swap-coin-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.swap-coin-sym { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.swap-coin-name-sm { font-size: 10px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swap-chev { font-size: 10px; color: var(--text-secondary); margin-left: auto; }
.swap-amount-side { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.swap-amount-input {
  width: 100%; text-align: right; font-size: 22px; font-weight: 800;
  border: none; background: transparent; color: var(--text-primary);
  outline: none; -moz-appearance: textfield;
}
.swap-amount-input::-webkit-inner-spin-button, .swap-amount-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.swap-to-amount { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.swap-balance-row { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.swap-usd-val { color: var(--text-secondary); }
.swap-bal-txt { color: var(--primary-color); font-weight: 600; cursor: pointer; }
.swap-pct-row { display: flex; gap: 6px; margin-top: 12px; justify-content: flex-end; }
.swap-pct-btn {
  padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--border-color); background: var(--bg-primary);
  color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
}
.swap-pct-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* Switch button */
.swap-switch-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; position: relative; z-index: 1; margin: -2px 0;
}
.swap-switch-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gradient-primary); color: #fff; border: 3px solid var(--bg-primary);
  font-size: 16px; cursor: pointer; transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 15px rgba(139, 92, 246,0.4); flex-shrink: 0;
}
.swap-switch-btn:hover { transform: rotate(180deg) scale(1.15); box-shadow: 0 8px 25px rgba(139, 92, 246,0.6); }
.swap-route-pill {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-primary); border: 1px solid var(--border-color);
  border-radius: 20px; padding: 4px 10px; flex: 1; text-align: center;
}

/* Info card */
.swap-info-card {
  background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 16px; padding: 14px; margin: 12px 0;
  animation: fadeIn 0.3s ease;
}
.swap-info-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 5px 0; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}
.swap-info-row:last-child { border-bottom: none; }
.swap-info-row span:last-child { font-weight: 700; color: var(--text-primary); }
.swap-info-payout span:last-child { color: var(--accent-green) !important; }
.swap-impact-low { color: var(--accent-green) !important; }
.swap-impact-med { color: var(--accent-color) !important; }
.swap-impact-high { color: var(--accent-red) !important; }

/* Confirm button */
.swap-confirm-btn {
  width: 100%; padding: 17px; border-radius: 22px; font-size: 16px; font-weight: 800;
  background: var(--gradient-primary); color: #fff; border: none; cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease; margin: 12px 0;
  box-shadow: 0 8px 25px -5px rgba(139, 92, 246,0.45);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.swap-confirm-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 35px -8px rgba(139, 92, 246,0.6); }
.swap-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; background: var(--text-secondary); box-shadow: none; }
.sell-confirm-btn { background: linear-gradient(135deg, #A78BFA, #8B5CF6, #7C3AED); box-shadow: 0 8px 25px -5px rgba(139, 92, 246,0.45); }
.sell-confirm-btn:hover:not(:disabled) { box-shadow: 0 12px 35px -8px rgba(139, 92, 246,0.6); }
.stake-confirm-btn { background: linear-gradient(135deg, #D4900A, #d97706, #b45309); box-shadow: 0 8px 25px -5px rgba(245,158,11,0.45); }

/* Recent list */
.swap-recent-header { font-size: 13px; font-weight: 800; color: var(--text-secondary); margin: 4px 0 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.swap-recent-list { display: flex; flex-direction: column; gap: 8px; }
.swap-no-recent { text-align: center; color: var(--text-secondary); font-size: 13px; padding: 20px 0; }
.swap-recent-item {
  background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 16px; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
  animation: fadeIn 0.3s ease;
}
.swap-recent-left { display: flex; flex-direction: column; gap: 2px; }
.swap-recent-pair { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.swap-recent-date { font-size: 11px; color: var(--text-secondary); }
.swap-recent-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.swap-recent-amount { font-size: 13px; font-weight: 700; color: var(--accent-green); }
.swap-recent-status { font-size: 10px; padding: 2px 7px; border-radius: 10px; background: rgba(16,185,129,0.12); color: var(--accent-green); font-weight: 600; }

/* Coin picker modal */
.swap-picker-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; z-index: 1100;
  backdrop-filter: blur(4px);
}
.swap-picker-sheet {
  width: 100%; background: var(--card-bg);
  border-radius: 28px 28px 0 0; padding: 0 0 0;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  max-height: 90vh; display: flex; flex-direction: column;
  animation: slideUp 0.3s var(--transition-bounce);
}
.swap-picker-handle { width: 40px; height: 4px; background: var(--border-color); border-radius: 2px; margin: 12px auto 0; }
.swap-picker-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border-color);
  font-size: 16px; font-weight: 800; color: var(--text-primary);
}
.swap-picker-header button {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-color);
  background: var(--bg-primary); color: var(--text-primary); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.swap-picker-search-wrap {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 16px; background: var(--bg-primary);
  border: 1px solid var(--border-color); border-radius: 40px; padding: 10px 16px;
}
.swap-picker-search-wrap i { color: var(--text-secondary); }
.swap-picker-search { border: none; background: transparent; flex: 1; font-size: 14px; color: var(--text-primary); outline: none; }
.swap-picker-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.swap-picker-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 10px;
  border-radius: 16px; cursor: pointer; transition: all 0.2s;
}
.swap-picker-item:hover { background: rgba(139, 92, 246,0.08); }
.swap-picker-item-img { width: 40px; height: 40px; border-radius: 50%; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; overflow: hidden; flex-shrink: 0; }
.swap-picker-item-img img { width: 100%; height: 100%; object-fit: cover; }
.swap-picker-item-info { flex: 1; }
.swap-picker-item-sym { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.swap-picker-item-name { font-size: 11px; color: var(--text-secondary); }
.swap-picker-item-bal { text-align: right; }
.swap-picker-item-bal-amt { font-size: 13px; font-weight: 700; color: var(--text-primary); display: block; }
.swap-picker-item-bal-usd { font-size: 11px; color: var(--text-secondary); display: block; }

/* ===== SELL PAGE ===== */
.sell-arrow-down {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #A78BFA, #7C3AED);
  color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 15px rgba(139, 92, 246,0.4); flex-shrink: 0;
}
.sell-fiat-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-primary); border: 1px solid var(--border-color);
  border-radius: 40px; padding: 8px 14px 8px 10px; min-width: 110px;
}
.sell-fiat-flag { font-size: 22px; }
.sell-payout-section { margin-top: 4px; }
.sell-payout-title {
  font-size: 13px; font-weight: 800; color: var(--text-secondary);
  margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  display: flex; align-items: center; gap: 6px;
}
.sell-payout-options { display: flex; gap: 8px; margin-bottom: 14px; }
.sell-payout-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px; border-radius: 16px; border: 1.5px solid var(--border-color);
  background: var(--card-bg); cursor: pointer; transition: all 0.25s; text-align: center;
}
.sell-payout-opt i { font-size: 20px; color: var(--text-secondary); }
.sell-payout-opt span { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.sell-payout-opt small { font-size: 10px; color: var(--text-secondary); }
.sell-payout-opt.active { border-color: var(--accent-red); background: rgba(139, 92, 246,0.07); }
.sell-payout-opt.active i { color: var(--accent-red); }
.sell-payout-opt:hover:not(.active) { border-color: var(--primary-color); transform: translateY(-2px); }
.sell-bank-fields { display: flex; flex-direction: column; gap: 10px; }
.sell-input {
  width: 100%; padding: 13px 16px; border-radius: 14px; font-size: 14px;
  border: 1.5px solid var(--border-color); background: var(--bg-primary);
  color: var(--text-primary); outline: none; transition: border-color 0.2s;
}
.sell-input:focus { border-color: var(--accent-red); }

/* ===== EARN PAGE ===== */
.earn-hero {
  background: linear-gradient(135deg, #10b981, #059669, #047857);
  margin: 12px 16px; border-radius: 22px; padding: 18px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 12px 30px -8px rgba(16,185,129,0.5); color: #fff; flex-shrink: 0;
}
.earn-hero-icon { font-size: 36px; flex-shrink: 0; }
.earn-hero-text { flex: 1; min-width: 120px; }
.earn-hero-title { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.earn-hero-sub { font-size: 11px; opacity: 0.85; }
.earn-hero-total { text-align: right; }
.earn-hero-total-label { font-size: 10px; opacity: 0.8; margin-bottom: 2px; }
.earn-hero-total-val { font-size: 18px; font-weight: 900; }
.earn-cat-row {
  display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; flex-shrink: 0;
}
.earn-cat-row::-webkit-scrollbar { display: none; }
.earn-cat-btn {
  padding: 7px 16px; border-radius: 20px; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--border-color); background: var(--card-bg);
  color: var(--text-secondary); cursor: pointer; transition: all 0.2s; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; min-width: max-content; line-height: 1; gap: 5px; flex-shrink: 0;
}
.earn-cat-btn.active { background: var(--accent-green); color: #fff; border-color: var(--accent-green); }
.earn-cat-btn:hover:not(.active) { border-color: var(--accent-green); color: var(--accent-green); }
.earn-products-list { display: flex; flex-direction: column; gap: 12px; padding: 0 16px; }
.earn-product-card {
  background: var(--card-bg); border: 1.5px solid var(--border-color);
  border-radius: 20px; padding: 16px; transition: all 0.25s;
  animation: fadeIn 0.4s ease;
}
.earn-product-card:hover { transform: translateY(-2px); box-shadow: var(--hover-shadow); border-color: var(--accent-green); }
.earn-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.earn-card-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.earn-card-info { flex: 1; }
.earn-card-name { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.earn-card-proto { font-size: 11px; color: var(--text-secondary); }
.earn-card-apy {
  text-align: right;
  font-size: 22px; font-weight: 900; color: var(--accent-green);
}
.earn-card-apy-label { font-size: 10px; color: var(--text-secondary); text-align: right; }
.earn-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.earn-tag {
  padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 700;
}
.earn-tag-type { background: rgba(16,185,129,0.1); color: var(--accent-green); }
.earn-tag-lock { background: rgba(245,158,11,0.1); color: var(--accent-color); }
.earn-tag-risk { background: rgba(139, 92, 246,0.1); color: var(--primary-color); }
.earn-card-stats { display: flex; gap: 0; }
.earn-card-stat { flex: 1; text-align: center; padding: 8px 0; border-right: 1px solid var(--border-color); }
.earn-card-stat:last-child { border-right: none; }
.earn-card-stat-val { font-size: 13px; font-weight: 800; color: var(--text-primary); }
.earn-card-stat-lbl { font-size: 10px; color: var(--text-secondary); margin-top: 2px; }
.earn-card-btn {
  width: 100%; padding: 12px; border-radius: 14px; font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; cursor: pointer;
  transition: all 0.25s; margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.earn-card-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -5px rgba(16,185,129,0.5); }
/* Earn modal */
.earn-modal-sheet { max-height: 90vh; }
.earn-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.earn-modal-product {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(5,150,105,0.1));
  border-radius: 16px; border: 1px solid rgba(16,185,129,0.2);
}
.earn-modal-coin { display: flex; align-items: center; gap: 8px; }
.earn-modal-projection {
  background: var(--bg-primary); border-radius: 14px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border-color);
}
.earn-proj-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--text-secondary);
}
.earn-proj-row span:last-child { font-weight: 700; color: var(--accent-green); }

/* ===== STAKE PAGE ===== */
.stake-portfolio-card {
  background: linear-gradient(135deg, #7c3aed, #7B22D0, #2563eb);
  margin: 12px 16px; border-radius: 22px; padding: 16px;
  box-shadow: 0 12px 30px -8px rgba(139, 92, 246,0.5); flex-shrink: 0;
}
.stake-port-row { display: flex; align-items: center; }
.stake-port-stat { flex: 1; text-align: center; }
.stake-port-val { font-size: 18px; font-weight: 900; color: #fff; }
.stake-rewards-val { color: #86efac; }
.stake-port-lbl { font-size: 10px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.stake-port-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.2); }
.stake-tab-row { display: flex; gap: 8px; padding: 12px 16px 0; flex-shrink: 0; }
.stake-tab-btn {
  flex: 1; padding: 10px; border-radius: 14px; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--border-color); background: var(--card-bg);
  color: var(--text-secondary); cursor: pointer; transition: all 0.25s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; line-height: 1;
}
.stake-tab-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.stake-filter-row { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; }
.stake-filter-row::-webkit-scrollbar { display: none; }
.stake-filter-btn {
  padding: 7px 16px; border-radius: 20px; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--border-color); background: var(--card-bg);
  color: var(--text-secondary); cursor: pointer; transition: all 0.2s; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; min-width: max-content; line-height: 1; gap: 5px; flex-shrink: 0;
}
.stake-filter-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.stake-filter-btn:hover:not(.active) { border-color: var(--primary-color); color: var(--primary-color); }
.stake-pools-list { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }
.stake-pool-card {
  background: var(--card-bg); border: 1.5px solid var(--border-color);
  border-radius: 20px; padding: 16px; transition: all 0.25s; animation: fadeIn 0.4s ease;
}
.stake-pool-card:hover { transform: translateY(-2px); box-shadow: var(--hover-shadow); border-color: var(--primary-color); }
.stake-pool-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.stake-pool-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.stake-pool-info { flex: 1; }
.stake-pool-name { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.stake-pool-proto { font-size: 11px; color: var(--text-secondary); }
.stake-pool-apy { text-align: right; }
.stake-pool-apy-val { font-size: 22px; font-weight: 900; color: var(--accent-color); }
.stake-pool-apy-lbl { font-size: 10px; color: var(--text-secondary); }
.stake-pool-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.stake-tag {
  padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 700;
}
.stake-tag-flex { background: rgba(16,185,129,0.1); color: var(--accent-green); }
.stake-tag-locked { background: rgba(245,158,11,0.1); color: var(--accent-color); }
.stake-tag-liquid { background: rgba(6,182,212,0.1); color: var(--accent-cyan); }
.stake-tag-hot { background: rgba(139, 92, 246,0.1); color: var(--accent-red); }
.stake-pool-stats { display: flex; gap: 0; border-top: 1px solid var(--border-color); padding-top: 12px; }
.stake-pool-stat { flex: 1; text-align: center; padding: 0 8px; border-right: 1px solid var(--border-color); }
.stake-pool-stat:last-child { border-right: none; }
.stake-pool-stat-val { font-size: 12px; font-weight: 800; color: var(--text-primary); }
.stake-pool-stat-lbl { font-size: 10px; color: var(--text-secondary); margin-top: 2px; }
.stake-pool-btn {
  width: 100%; padding: 12px; border-radius: 14px; font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, #7c3aed, #7B22D0); color: #fff; border: none; cursor: pointer;
  transition: all 0.25s; margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.stake-pool-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -5px rgba(139, 92, 246,0.5); }
/* My stake card */
.my-stake-card {
  background: var(--card-bg); border: 1.5px solid var(--border-color);
  border-radius: 20px; padding: 16px; animation: fadeIn 0.4s ease;
}
.my-stake-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.my-stake-badge { padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.my-stake-badge.active { background: rgba(16,185,129,0.1); color: var(--accent-green); }
.my-stake-info-row {
  display: flex; justify-content: space-between; font-size: 12px;
  padding: 5px 0; border-bottom: 1px solid var(--border-color); color: var(--text-secondary);
}
.my-stake-info-row:last-of-type { border-bottom: none; }
.my-stake-info-row span:last-child { font-weight: 700; color: var(--text-primary); }
.my-stake-actions { display: flex; gap: 8px; margin-top: 12px; }
.my-stake-btn {
  flex: 1; padding: 10px; border-radius: 12px; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--border-color); background: var(--bg-primary);
  color: var(--text-primary); cursor: pointer; transition: all 0.2s;
}
.my-stake-btn.claim { background: var(--accent-green); color: #fff; border-color: var(--accent-green); }
.my-stake-btn:hover { opacity: 0.85; transform: translateY(-1px); }


/* ===== VALIDATION STATES ===== */
.v-err { border-color: var(--accent-red) !important; box-shadow: 0 0 0 2px rgba(139, 92, 246,.18) !important; }
.v-ok  { border-color: var(--accent-green) !important; }
.v-msg { font-size:11px; font-weight:600; color:var(--accent-red); margin-top:3px; display:none; animation:fadeIn .2s ease; }
.v-msg.show { display:block; }
.swap-token-box.v-err { border-color: var(--accent-red) !important; box-shadow: 0 0 0 3px rgba(139, 92, 246,.12) !important; }
.swap-confirm-btn.ready {
  animation: btnPulse 2s ease-in-out infinite;
}
@keyframes btnPulse {
  0%,100% { box-shadow: 0 8px 25px -5px rgba(139, 92, 246,.45); }
  50%      { box-shadow: 0 12px 38px -5px rgba(139, 92, 246,.75); }
}
.sell-confirm-btn.ready { animation: btnPulseSell 2s ease-in-out infinite; }
@keyframes btnPulseSell {
  0%,100% { box-shadow: 0 8px 25px -5px rgba(139, 92, 246,.45); }
  50%      { box-shadow: 0 12px 38px -5px rgba(139, 92, 246,.75); }
}

/* ===== TX HISTORY PAGE ===== */
.txh-header {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px 12px; border-bottom:1px solid var(--border-color);
  background:var(--card-bg); flex-shrink:0;
}
.txh-title-block { flex:1; }
.txh-title  { font-size:18px; font-weight:800; color:var(--text-primary); display:block; }
.txh-subtitle { font-size:11px; color:var(--text-secondary); }
.txh-export-btn {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border-color); background:var(--bg-primary);
  color:var(--text-primary); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .25s;
}
.txh-export-btn:hover { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
.txh-stats-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:12px 16px 4px; flex-shrink:0;
}
.txh-stat-card {
  background:var(--card-bg); border:1.5px solid var(--border-color);
  border-radius:16px; padding:12px; text-align:center;
}
.txh-stat-val { font-size:16px; font-weight:900; color:var(--text-primary); }
.txh-stat-lbl { font-size:10px; color:var(--text-secondary); margin-top:2px; }
.txh-search-wrap {
  display:flex; align-items:center; gap:10px;
  margin:10px 16px 6px; background:var(--bg-primary);
  border:1.5px solid var(--border-color); border-radius:40px; padding:10px 16px;
  flex-shrink:0;
}
.txh-search-wrap i { color:var(--text-secondary); font-size:13px; }
.txh-search-input { border:none; background:transparent; flex:1; font-size:14px; color:var(--text-primary); outline:none; }
.txh-filter-row {
  display:flex; gap:8px; padding:6px 16px 10px; overflow-x:auto; flex-shrink:0;
}
.txh-filter-row::-webkit-scrollbar { display:none; }
.txh-filter-btn {
  padding:7px 16px; border-radius:20px; font-size:12px; font-weight:700;
  border:1.5px solid var(--border-color); background:var(--card-bg);
  color:var(--text-secondary); cursor:pointer; transition:all .2s; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; min-width:max-content; line-height:1; gap:5px; flex-shrink:0;
}
.txh-filter-btn.active { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
.txh-filter-btn:hover:not(.active) { border-color:var(--primary-color); color:var(--primary-color); }
.txh-list { padding:0 16px 16px; display:flex; flex-direction:column; gap:10px; }
.txh-empty {
  display:flex; flex-direction:column; align-items:center;
  padding:60px 20px; gap:12px; text-align:center;
}
.txh-empty-icon { font-size:52px; opacity:.2; }
.txh-empty-title { font-size:16px; font-weight:800; color:var(--text-primary); }
.txh-empty-sub { font-size:13px; color:var(--text-secondary); line-height:1.5; }
.txh-date-label { font-size:11px; font-weight:800; color:var(--text-secondary); padding:8px 0 4px; text-transform:uppercase; letter-spacing:.6px; }
.txh-item {
  background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:18px; padding:13px 15px;
  display:flex; align-items:center; gap:12px;
  animation:fadeIn .3s ease; transition:all .22s; cursor:pointer; position:relative; overflow:hidden;
}
.txh-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px 0 0 3px; }
.txh-item.tx-out::before { background:#A78BFA; }
.txh-item.tx-in::before  { background:#10b981; }
.txh-item.tx-neu::before { background:var(--primary-color); }
.txh-item:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(0,0,0,.1); border-color:rgba(139, 92, 246,.28); }
.txh-icon-stack { position:relative; width:46px; height:46px; flex-shrink:0; }
.txh-coin-avatar { width:46px; height:46px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; background:var(--gradient-primary); }
.txh-coin-avatar img { width:100%; height:100%; object-fit:cover; }
.txh-dir-badge { position:absolute; bottom:-2px; right:-2px; width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:900; border:2px solid var(--bg-secondary); }
.txh-dir-badge.dout { background:#A78BFA; color:#fff; }
.txh-dir-badge.din  { background:#10b981; color:#fff; }
.txh-dir-badge.dswap{ background:#7c3aed; color:#fff; }
.txh-dir-badge.dneu { background:#D4900A; color:#fff; }
.txh-body { flex:1; min-width:0; }
.txh-row1 { display:flex; align-items:center; gap:6px; }
.txh-pair { font-size:13px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.txh-pill { font-size:9px; font-weight:800; padding:2px 6px; border-radius:7px; text-transform:uppercase; letter-spacing:.3px; flex-shrink:0; }
.txh-meta { font-size:11px; color:var(--text-secondary); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.txh-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.txh-amount { font-size:13.5px; font-weight:800; }
.txh-amount.pos { color:#10b981; }
.txh-amount.neg { color:#A78BFA; }
.txh-amount.neu { color:var(--text-primary); }
.txh-status-row { display:flex; align-items:center; gap:4px; }
.txh-status-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.txh-status-dot.completed,.txh-status-dot.confirmed { background:#10b981; }
.txh-status-dot.pending { background:#D4900A; }
.txh-status-dot.failed  { background:#A78BFA; }
.txh-status-txt { font-size:10px; color:var(--text-secondary); }
.txh-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; }
.txh-badge.completed { background:rgba(16,185,129,.12); color:#10b981; }
.txh-badge.pending   { background:rgba(245,158,11,.12);  color:var(--accent-color); }
.txh-badge.failed    { background:rgba(139, 92, 246,.12);   color:var(--accent-red); }

/* ===== PROMO BANNER SLIDER ===== */
.promo-banner-wrap { margin: 0 0 16px; padding: 0; position: relative; height: 108px; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.18); }
.promo-slides { display: flex; height: 100%; width: 100%; position: relative; }
.promo-slide { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 0 20px; opacity: 0; transition: opacity 0.7s ease; cursor: pointer; pointer-events: none; overflow: hidden; }
.promo-slide.active { opacity: 1; pointer-events: auto; }
.promo-slide.slide-tron { background: linear-gradient(135deg, #7a0000 0%, #cc0000 50%, #ff4500 100%); }
.promo-slide.slide-reward { background: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #D4900A 100%); }
.promo-slide.slide-stake { background: linear-gradient(135deg, #5B21B6 0%, #8B5CF6 45%, #A78BFA 100%); }
.promo-slide.slide-binance { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 55%, #f3ba2f 100%); }
.promo-slide.slide-okx { background: linear-gradient(135deg, #121212 0%, #1a3a5c 55%, #2563eb 100%); }
.promo-slide-bg-circle { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.07); pointer-events: none; }
.promo-slide-icon { width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,0.22); backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
.promo-slide-body { flex: 1; min-width: 0; }
.promo-slide-tag { font-size: 9px; font-weight: 900; color: rgba(255,255,255,0.9); letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255,255,255,0.2); border-radius: 5px; padding: 2px 7px; display: inline-block; margin-bottom: 4px; }
.promo-slide-title { font-size: 13px; font-weight: 900; color: #fff; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.promo-slide-sub { font-size: 10.5px; color: rgba(255,255,255,0.88); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-slide-cta { font-size: 11px; font-weight: 900; color: #fff; background: rgba(255,255,255,0.28); border: 1.5px solid rgba(255,255,255,0.45); border-radius: 22px; padding: 6px 16px; flex-shrink: 0; white-space: nowrap; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.promo-slide.active .promo-slide-cta:active { background: rgba(255,255,255,0.45); transform: scale(0.96); }
.promo-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 10; }
.promo-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: all 0.35s cubic-bezier(.34,1.56,.64,1); }
.promo-dot.active { background: #fff; width: 18px; border-radius: 3px; }

/* ===== REWARDS PAGE ===== */
.deploy-progress { background: var(--card-bg); border-radius: 18px; border: 1px solid var(--border-color); padding: 18px; margin-bottom: 14px; display: none; }
.deploy-progress.visible { display: block; }
.deploy-progress h4 { font-size: 13px; font-weight: 800; color: var(--text-primary); margin: 0 0 16px; }
.deploy-step { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.deploy-step-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); }
.deploy-step.done .deploy-step-icon { background: rgba(16,185,129,0.12); border-color: var(--accent-green); color: var(--accent-green); }
.deploy-step.active .deploy-step-icon { background: rgba(204,0,0,0.1); border-color: #cc0000; color: #cc0000; animation: pulse 1.5s infinite; }
.deploy-step-text { flex: 1; }
.deploy-step-label { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.deploy-step-sub { font-size: 10px; color: var(--text-secondary); margin-top: 1px; }
.deployed-contract-item { background: var(--card-bg); border-radius: 16px; border: 1px solid var(--border-color); padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s; }
.deployed-contract-item:hover { border-color: #cc0000; box-shadow: 0 4px 16px rgba(204,0,0,0.1); }
.deployed-contract-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.deployed-contract-logo { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #cc0000, #ff6600); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #fff; flex-shrink: 0; position: relative; overflow: visible; }
.deployed-contract-net-badge { position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; overflow: hidden; border: 1px solid var(--card-bg); }
.deployed-contract-net-badge img { width: 100%; height: 100%; }
.deployed-contract-name { font-size: 13px; font-weight: 800; color: var(--text-primary); }
.deployed-contract-sym { font-size: 11px; color: var(--text-secondary); }
.deployed-contract-address { font-size: 10px; color: #cc0000; font-family: monospace; background: rgba(204,0,0,0.06); border-radius: 8px; padding: 4px 8px; margin-bottom: 8px; word-break: break-all; }
.deployed-contract-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dc-action-btn { font-size: 10px; font-weight: 700; padding: 5px 10px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; transition: all 0.2s; }
.dc-action-btn:hover { border-color: #cc0000; color: #cc0000; }
.dc-action-btn.primary { background: linear-gradient(135deg, #cc0000, #ff6600); color: #fff; border-color: transparent; }
.tron-interact-modal { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); align-items: flex-end; justify-content: center; padding: 0; }
.tron-interact-modal.open { display: flex; }
.tron-interact-sheet { background: var(--bg-secondary); border-radius: 28px 28px 0 0; padding: 24px; width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto; animation: slideUp 0.35s var(--transition-bounce); }
.tron-interact-title { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.tron-fn-btn { width: 100%; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--card-bg); color: var(--text-primary); font-size: 12px; font-weight: 700; cursor: pointer; text-align: left; margin-bottom: 8px; transition: all 0.2s; display: flex; align-items: center; gap: 10px; }
.tron-fn-btn:hover { border-color: #cc0000; color: #cc0000; }
.tron-fn-btn i { font-size: 14px; color: #cc0000; }


  /* ── Testnet mode styles ── */
  .testnet-active-glow {
    box-shadow: 0 0 0 2px rgba(245,166,35,0.4) !important;
  }
  #mainnet-btn.active-mode {
    border-color: var(--accent-green) !important;
    background: rgba(0,204,102,0.15) !important;
    color: var(--accent-green) !important;
  }
  #testnet-btn.active-mode {
    border-color: #f5a623 !important;
    background: rgba(245,166,35,0.15) !important;
    color: #f5a623 !important;
  }
  .testnet-chip {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(245,166,35,0.2);
    color: #f5a623;
    margin-left: 6px;
    vertical-align: middle;
  }
  /* TX type tabs */
  .txh-filter-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .txh-filter-row::-webkit-scrollbar { display: none; }
  /* TX item type badge */
  .tx-type-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 6px;
  }
  .tx-type-sent     { background: rgba(240,82,82,0.15);   color: #f05252; }
  .tx-type-received { background: rgba(0,204,102,0.15);   color: #00cc66; }
  .tx-type-swap     { background: rgba(139, 92, 246,0.15);  color: #8B5CF6; }
  .tx-type-contract { background: rgba(168,85,247,0.15);  color: #a855f7; }
  .tx-type-approve  { background: rgba(245,166,35,0.15);  color: #f5a623; }
  .tx-type-mint     { background: rgba(6,182,212,0.15);   color: #A78BFA; }
  .tx-type-burn     { background: rgba(139, 92, 246,0.15);   color: #A78BFA; }
  .tx-type-stake    { background: rgba(251,191,36,0.15);  color: #FFD166; }
  .tx-type-earn     { background: rgba(34,197,94,0.15);   color: #22c55e; }
  .tx-type-buy      { background: rgba(139, 92, 246,0.15);  color: #3b82f6; }
  .tx-type-sell     { background: rgba(139, 92, 246,0.15);   color: #A78BFA; }
  .tx-type-nft      { background: rgba(168, 85, 247, 0.15);  color: #a855f7; border-left: 3px solid #a855f7; padding-left: 12px; }
  .tx-type-failed   { background: rgba(107,114,128,0.15); color: #6b7280; }
  /* On-chain tx items in detail page */
  .chain-tx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
  }
  .chain-tx-item:hover { background: var(--hover-bg); }
  .chain-tx-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
  }
  .chain-tx-icon.sent     { background: rgba(240,82,82,0.15);   color: #f05252; }
  .chain-tx-icon.received { background: rgba(0,204,102,0.15);   color: #00cc66; }
  .chain-tx-icon.contract { background: rgba(168,85,247,0.15);  color: #a855f7; }
  .chain-tx-icon.approve  { background: rgba(245,166,35,0.15);  color: #f5a623; }
  .chain-tx-icon.failed   { background: rgba(107,114,128,0.15); color: #6b7280; }
  .chain-tx-main { flex: 1; min-width: 0; }
  .chain-tx-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
  .chain-tx-sub   { font-size: 11px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chain-tx-right { text-align: right; flex-shrink: 0; }
  .chain-tx-amount { font-size: 13px; font-weight: 700; }
  .chain-tx-amount.positive { color: var(--accent-green); }
  .chain-tx-amount.negative { color: #f05252; }
  .chain-tx-date  { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
  .chain-tx-load-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 12px 16px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--accent-green);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
  }
  .chain-tx-load-btn:hover { background: rgba(0,204,102,0.08); }


  .hidden { display: none !important; }
  .tx-hash-row { border-top: 1px solid var(--border-color); margin-top: 6px; }

/* ═══════════════════════════════════════════════════
   QUANTUM WALLET — COMPREHENSIVE DESIGN UPGRADES
   ═══════════════════════════════════════════════════ */
/* Header upgrades */
.header {
  padding: 14px 16px;
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}
body.dark-mode .header {
  background: rgba(8,14,26,0.98) !important;
  border-bottom-color: rgba(139, 92, 246,0.08) !important;
}
.header-info .name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.3px;
}
.status-dot {
  background: var(--accent-green) !important;
  box-shadow: 0 0 8px var(--accent-green) !important;
}
.avatar {
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB) !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246,0.4) !important;
}

/* Balance card elements */
.balance-title {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.7;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.balance-amount {
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.balance-subtitle {
  font-size: 13px;
  opacity: 0.65;
  font-weight: 500;
}
.portfolio-change {
  background: rgba(16, 217, 160, 0.15);
  border: 1px solid rgba(16, 217, 160, 0.3);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #A78BFA;
}
.portfolio-change.negative {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.3);
  color: #FF4D6A;
}

/* Crypto item upgrades */
.crypto-item {
  padding: 14px 14px;
  transition: all 0.18s ease !important;
}
.crypto-item:hover {
  background: var(--hover-bg) !important;
  border-radius: 16px !important;
  transform: translateX(4px) !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
}
.crypto-symbol {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.crypto-chain {
  font-size: 11px;
  font-weight: 600;
  background: var(--hover-bg);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 2px 8px;
}
.crypto-price {
  font-size: 13px;
  font-weight: 600;
}
.crypto-amount {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
}
.price-change {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 8px;
  min-width: 58px;
}
.price-change.positive {
  background: rgba(16, 217, 160, 0.12);
  color: #10B981;
  border: 1px solid rgba(16, 217, 160, 0.25);
}
.price-change.negative {
  background: rgba(244, 63, 94, 0.1);
  color: #FF4D6A;
  border: 1px solid rgba(244, 63, 94, 0.25);
}

/* Tabs */
.tabs {
  margin: 0 12px 12px;
  border-radius: 14px;
  padding: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  box-shadow: none;
}
body.dark-mode .tabs {
  background: rgba(12,20,38,0.6);
}
.tab {
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 6px;
}
.tab.active {
  background: var(--bg-secondary);
  color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
body.dark-mode .tab.active {
  background: rgba(14,30,60,0.9);
}
.tab.active::after { display: none; }

/* Detail page upgrades */
.detail-icon {
  width: 66px;
  height: 66px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(139, 92, 246,0.35);
  animation: none;
}
.chain-badge {
  background: var(--accent-color);
  font-size: 10px;
  font-weight: 800;
  border-radius: 10px;
  padding: 3px 10px;
  box-shadow: 0 3px 10px rgba(245,158,11,0.4);
}
.detail-symbol {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.detail-balance {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.detail-action-btn {
  background: var(--card-bg);
  border: 1.5px solid var(--border-color);
  border-radius: 16px;
  transition: all 0.2s ease;
}
.detail-action-btn:hover {
  border-color: var(--primary-color);
  background: var(--hover-bg);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(139, 92, 246,0.2);
}
.detail-action-btn i {
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246,0.35);
}
body.dark-mode .detail-action-btn i {
  background: linear-gradient(135deg, #0c3055, #2a1f5f) !important;
  color: #C4B5FD !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(139, 92, 246,0.12);
}

/* Stat cards */
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 14px 12px;
  transition: all 0.2s ease;
}
body.dark-mode .stat-card {
  background: rgba(10,16,32,0.7);
}
.stat-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246,0.15);
}
.stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.stat-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

/* Chart container */
.chart-container {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 14px;
  margin: 12px 0;
}
body.dark-mode .chart-container {
  background: rgba(8,14,26,0.6);
}

/* Send/Receive page upgrades */
.send-crypto-header {
  background: none;
  border-radius: 0;
  padding: 16px 18px 0;
}
.send-crypto-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
}
.input-group input,
.input-group textarea,
.menu-actions input {
  font-family: 'DM Sans', sans-serif;
  background: var(--card-bg);
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.2s ease;
}
body.dark-mode .input-group input,
body.dark-mode .input-group textarea,
body.dark-mode .menu-actions input {
  background: rgba(10,16,32,0.8);
}
.input-group input:focus,
.input-group textarea:focus,
.menu-actions input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246,0.15) !important;
  outline: none;
}
.input-group label,
.menu-actions label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: block;
}

/* Primary buttons */
#confirm-send-btn,
.import-button,
.menu-actions button:not(#clear-wallet-btn),
.confirm-btn {
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB) !important;
  box-shadow: 0 6px 20px rgba(139, 92, 246,0.4) !important;
  border-radius: 16px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  transition: all 0.22s ease !important;
}
#confirm-send-btn:hover,
.import-button:hover,
.confirm-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(139, 92, 246,0.55) !important;
}

/* Modal upgrades */
.modal-content {
  border-radius: 28px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 24px 60px rgba(0,0,0,0.2);
}
body.dark-mode .modal-content {
  background: #0c1526;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8);
}

/* Notification upgrades */
.notification {
  border-radius: 18px !important;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
  border: 1px solid var(--border-color);
}

/* Swap/Sell page upgrades */
.swap-token-box {
  border-radius: 20px;
  border-color: var(--border-color);
}
.swap-confirm-btn {
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB) !important;
  border-radius: 18px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 20px rgba(139, 92, 246,0.35) !important;
}
.swap-confirm-btn:hover:not(:disabled) {
  box-shadow: 0 10px 28px rgba(139, 92, 246,0.55) !important;
}

/* TX history upgrades */
.txh-item {
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
}
body.dark-mode .txh-item {
  background: rgba(10,16,32,0.6);
}
.txh-item:hover {
  border-color: rgba(139, 92, 246,0.25) !important;
  box-shadow: 0 4px 20px rgba(139, 92, 246,0.1) !important;
}

/* Keypad upgrades */
/* keypad overrides consolidated into the passcode section above */

/* Import page */
.import-container {
  border-radius: 24px;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
body.dark-mode .import-container {
  background: #0c1526;
  border-color: rgba(139, 92, 246,0.12);
  box-shadow: 0 24px 80px rgba(0,0,0,0.8);
}
.import-title {
  font-family: 'Outfit', sans-serif !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: var(--text-primary) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}
body.dark-mode .import-title {
  color: #ECE8FF !important;
}

/* Network items */
.network-item:hover {
  background: var(--hover-bg) !important;
  border-radius: 16px !important;
  transform: translateX(4px) !important;
  box-shadow: none !important;
}
.network-logo {
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246,0.3) !important;
}

/* Promo banner */
.promo-slide-cta {
  border-radius: 12px !important;
}

/* Glass card (passcode) */
.glass-card {
  border-radius: 28px;
  border: 1px solid var(--border-color);
}
body.dark-mode .glass-card {
  background: #0c1526;
  border-color: rgba(139, 92, 246,0.12);
}
.gradient-text {
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: var(--text-primary) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}
body.dark-mode .gradient-text {
  color: #e2e8f0 !important;
}

/* Earn/Stake upgrades */
.earn-card-btn {
  background: linear-gradient(135deg, #A78BFA, #8B5CF6) !important;
  border-radius: 14px !important;
}
.stake-pool-btn {
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB) !important;
  border-radius: 14px !important;
}

/* Receive QR */
.receive-qr {
  background: white;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* Address/hash monospace styling */
.tx-detail-hash,
[style*="monospace"] {
  font-family: 'DM Mono', monospace !important;
}


/* Scrollbar upgrade */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246,0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246,0.6);
}
::selection {
  background: rgba(139, 92, 246, 0.35);
  color: white;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--border-color) 25%, rgba(139, 92, 246,0.06) 50%, var(--border-color) 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite !important;
}

/* Loading overlay */
.spinner-blue {
  border-color: #8B5CF6;
  border-top-color: transparent;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
}

/* Validation indicators */
.input-valid { border-color: var(--accent-green) !important; }
.input-invalid { border-color: var(--accent-red) !important; }
.validation-indicator.valid { color: var(--accent-green); }
.validation-indicator.invalid { color: var(--accent-red); }

/* Max/Send button */
.max-button {
  background: rgba(139, 92, 246,0.12) !important;
  color: var(--primary-color) !important;
  border: 1px solid rgba(139, 92, 246,0.3) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  transition: all 0.18s ease !important;
}
.max-button:hover {
  background: rgba(139, 92, 246,0.22) !important;
}

/* Fee info */
.fee-info {
  background: var(--hover-bg);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 8px;
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fee-amount {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Badge styles */
.swap-live-badge, .earn-live-badge, .stake-live-badge, .sell-live-badge {
  background: rgba(16,217,160,0.12) !important;
  color: var(--accent-green) !important;
  border: 1px solid rgba(16,217,160,0.25) !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
}

/* Manage crypto modal dark mode */
body.dark-mode .manage-crypto-sheet {
  background: #0c1526;
}

/* Dark mode body */
body.dark-mode {
  background: #040810;
}

/* === SVG Price Chart === */
.chart-container {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 14px 14px 8px;
  margin: 12px 0;
}
body.dark-mode .chart-container {
  background: rgba(8,14,26,0.7);
}
.chart-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.chart-period-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-primary);
  border-radius: 10px;
  padding: 3px;
}
body.dark-mode .chart-period-tabs {
  background: rgba(0,0,0,0.3);
}
.chart-period {
  background: none;
  border: none;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: 'DM Sans', sans-serif;
}
.chart-period.active {
  background: var(--primary-color);
  color: white;
  box-shadow: 0 2px 8px rgba(139, 92, 246,0.4);
}
.chart-change-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 8px;
  font-family: 'DM Mono', monospace;
}
.chart-change-pill.positive {
  background: rgba(16,217,160,0.12);
  color: #10B981;
}
.chart-change-pill.negative {
  background: rgba(244,63,94,0.12);
  color: #FF4D6A;
}
.chart-price-hover {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
  min-height: 22px;
  letter-spacing: -0.3px;
}
.chart-wrap {
  position: relative;
  width: 100%;
  height: 140px;
  cursor: crosshair;
}
.chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-skeleton-lines {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
}
.csk-line {
  height: 3px;
  width: var(--w);
  background: var(--border-color);
  border-radius: 3px;
  animation: shimmer 1.4s var(--d, 0s) infinite ease-in-out;
}
@keyframes chartShimmer {
  0%,100% { opacity:.4; } 50% { opacity:1; }
}
.chart-xaxis {
  display: flex;
  justify-content: space-between;
  padding: 4px 0 0;
}
.chart-xaxis span {
  font-size: 9.5px;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
}
#price-svg-chart .chart-area {
  opacity: 0.18;
}
#price-svg-chart .chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#price-svg-chart .chart-dot {
  r: 4;
  stroke: white;
  stroke-width: 2;
}
#price-svg-chart .chart-crosshair {
  stroke-dasharray: 3 3;
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.1s;
}

/* === Small send coin card === */
.send-coin-card {
  background: linear-gradient(135deg, #0F1535, #060318, #130a2e);
  border-radius: 18px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  border: 1px solid rgba(139, 92, 246,0.15);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  position: relative;
  overflow: hidden;
}
.send-coin-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246,0.4), transparent);
}
.send-coin-logo {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(139, 92, 246,0.3);
}
.send-coin-logo img { width:100%;height:100%;object-fit:cover;border-radius:11px; }
.send-coin-logo i { color:white;font-size:1.1rem; }
.send-coin-info { flex:1;min-width:0; }
.send-coin-name-row { display:flex;align-items:baseline;gap:5px;margin-bottom:1px; }
.send-coin-symbol-lbl { font-family:'Outfit',sans-serif;font-size:1.05rem;font-weight:800;color:white;letter-spacing:-0.2px; }
.send-coin-network-lbl { font-size:9.5px;color:rgba(255,255,255,0.45);font-weight:500; }
/* Send page upgrades - theme-aware */
.send-coin-balance-row { font-size:11px; color:var(--text-secondary); font-weight:500; }
.send-coin-balance-row span { color:var(--primary-color); font-weight:700; font-family:'DM Mono',monospace; }
.send-coin-price-row { font-size:10px; color:var(--text-secondary); margin-top:1px; opacity:0.7; }

/* Responsive fix */
@media (max-width: 400px) {
  .balance-amount { font-size: 26px !important; }
  .actions { grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 10px 4px; }
  .action i { width: 40px; height: 40px; padding: 10px; font-size: 15px; }
  .bottom-nav { width: calc(100% - 20px); padding: 6px; }
  .chart-period { padding: 3px 7px; font-size: 9.5px; }
}

/* ═══════════════════════════════════════════════
   REDESIGNED IMPORT PAGE
═══════════════════════════════════════════════ */
#phrase-import-page {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f0f4ff;
  padding: 0 0 40px;
}
body.dark-mode #phrase-import-page {
  background: #03070f;
}
/* Animated bg */
.imp-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.imp-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: impOrbFloat 12s ease-in-out infinite;
}
.imp-orb-1 { width:360px; height:360px; background:rgba(139, 92, 246,0.14); top:-80px; left:-80px; animation-delay:0s; }
.imp-orb-2 { width:280px; height:280px; background:rgba(139, 92, 246,0.12); bottom:60px; right:-60px; animation-delay:-4s; }
.imp-orb-3 { width:200px; height:200px; background:rgba(16,217,160,0.10); top:40%; left:30%; animation-delay:-8s; }
body:not(.dark-mode) .imp-orb-1 { background:rgba(139, 92, 246,0.08); }
body:not(.dark-mode) .imp-orb-2 { background:rgba(139, 92, 246,0.06); }
body:not(.dark-mode) .imp-orb-3 { background:rgba(16,217,160,0.05); }
@keyframes impOrbFloat {
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-30px) scale(1.08); }
}
.imp-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(139, 92, 246,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 80%);
}
body:not(.dark-mode) .imp-grid {
  background-image:
    linear-gradient(rgba(139, 92, 246,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246,0.03) 1px, transparent 1px);
}
/* Main wrap */
.imp-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  padding: 36px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
/* Shield logomark */
.imp-logomark {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.imp-shield-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246,0.35);
  animation: impRingSpin 8s linear infinite;
  background: conic-gradient(from 0deg, rgba(139, 92, 246,0.3), transparent 60%, rgba(139, 92, 246,0.3), transparent);
}
body:not(.dark-mode) .imp-shield-ring {
  border: 2px solid rgba(139, 92, 246,0.25);
  background: conic-gradient(from 0deg, rgba(139, 92, 246,0.2), transparent 60%, rgba(139, 92, 246,0.2), transparent);
}
@keyframes impRingSpin { to { transform: rotate(360deg); } }
.imp-shield-inner {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0f2a44, #160A35);
  border: 1px solid rgba(139, 92, 246,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 32px rgba(139, 92, 246,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: impShieldPulse 3s ease-in-out infinite;
}
body:not(.dark-mode) .imp-shield-inner {
  background: linear-gradient(135deg, #e0f2fe, #f0e7ff);
  border: 1px solid rgba(139, 92, 246,0.3);
  box-shadow: 0 0 20px rgba(139, 92, 246,0.15), inset 0 1px 0 rgba(139, 92, 246,0.1);
}
@keyframes impShieldPulse {
  0%,100%{ box-shadow: 0 0 24px rgba(139, 92, 246,0.2), inset 0 1px 0 rgba(255,255,255,0.06); }
  50%    { box-shadow: 0 0 44px rgba(139, 92, 246,0.38), inset 0 1px 0 rgba(255,255,255,0.1); }
}
.imp-shield-inner i {
  font-size: 22px;
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body:not(.dark-mode) .imp-shield-inner i {
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Heading */
.imp-heading { text-align: center; width: 100%; }
.imp-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.6px;
  color: #ECE8FF;
  margin: 0 0 6px;
}
body:not(.dark-mode) .imp-title {
  color: #1e293b;
}
.imp-sub {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}
body:not(.dark-mode) .imp-sub {
  color: #64748b;
}
/* Word count toggle */
.imp-toggle-row { display:none; } /* removed */
/* Word grid */
.imp-grid-wrap { display:none; } /* removed */
/* Controls row */
.imp-ctrl-row { display:none; } /* removed */
/* Progress */
.imp-progress-wrap { display:none; } /* removed */
/* Word cell */
.imp-word-cell { display:none; }
.imp-word-input { display:none; }

/* ── Textarea replacement ── */
.imp-textarea-wrap {
  width: 100%;
  position: relative;
}
.imp-textarea-wrap .phrase-textarea {
  width: 100%;
  height: 148px;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1.5px solid rgba(139, 92, 246,0.18);
  background: rgba(255,255,255,0.04);
  color: #e2e8f0;
  font-size: 0.97rem;
  resize: none;
  font-family: 'DM Mono', 'SF Mono', Monaco, monospace;
  font-weight: 500;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  line-height: 1.65;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.35);
  caret-color: #8B5CF6;
  outline: none;
}
.imp-textarea-wrap .phrase-textarea::placeholder {
  color: #4E4468;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
}
.imp-textarea-wrap .phrase-textarea:focus {
  border-color: rgba(139, 92, 246,0.7);
  background: rgba(139, 92, 246,0.05);
  box-shadow: 0 0 0 4px rgba(139, 92, 246,0.12), inset 0 2px 10px rgba(0,0,0,0.3);
}
body:not(.dark-mode) .imp-textarea-wrap .phrase-textarea {
  background: rgba(255,255,255,0.85);
  color: #1e293b;
  border-color: rgba(139, 92, 246,0.25);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.06);
  caret-color: #8B5CF6;
}
body:not(.dark-mode) .imp-textarea-wrap .phrase-textarea::placeholder {
  color: #7B7499;
}
body:not(.dark-mode) .imp-textarea-wrap .phrase-textarea:focus {
  border-color: rgba(139, 92, 246,0.6);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 4px rgba(139, 92, 246,0.1), inset 0 2px 8px rgba(0,0,0,0.04);
}
.imp-word-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 0.78rem;
  color: #4E4468;
  font-weight: 500;
  padding: 0 2px;
}
.imp-word-counter strong { color: #7B7499; }
body:not(.dark-mode) .imp-word-counter {
  color: #64748b;
}
body:not(.dark-mode) .imp-word-counter strong {
  color: #7B7499;
}
.imp-valid-badge {
  color: #A78BFA;
  font-weight: 700;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: impCellIn 0.3s var(--transition-bounce);
}
/* Paste + Hide buttons */
.imp-action-row {
  display: flex;
  gap: 10px;
  width: 100%;
}
.imp-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1.5px solid rgba(139, 92, 246,0.18);
  background: rgba(255,255,255,0.04);
  color: #7B7499;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'DM Sans', sans-serif;
}
body:not(.dark-mode) .imp-action-btn {
  border: 1.5px solid rgba(139, 92, 246,0.25);
  background: rgba(139, 92, 246,0.08);
  color: #8B5CF6;
}
body:not(.dark-mode) .imp-action-btn:hover {
  background: rgba(139, 92, 246,0.15);
  border-color: rgba(139, 92, 246,0.5);
  color: #0284c7;
}
.imp-action-btn:hover {
  background: rgba(139, 92, 246,0.1);
  border-color: rgba(139, 92, 246,0.4);
  color: #8B5CF6;
}
.imp-action-btn i { font-size: 0.85rem; }
/* Status */
.imp-status {
  width: 100%;
  background: rgba(139, 92, 246,0.08);
  border: 1px solid rgba(139, 92, 246,0.2);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #7B7499;
  font-size: 0.85rem;
  font-weight: 600;
}
.imp-status-spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(139, 92, 246,0.2);
  border-top-color: #8B5CF6;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.imp-error {
  width: 100%;
  background: rgba(244,63,94,0.08);
  border: 1px solid rgba(244,63,94,0.25);
  border-radius: 12px;
  padding: 12px 16px;
  color: #FF4D6A;
  font-size: 0.8rem;
  font-weight: 600;
}
/* CTA button */
.imp-cta {
  width: 100%;
  padding: 17px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, #8B5CF6, #AD6FFB 50%, #A78BFA);
  color: white;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(139, 92, 246,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: impCTAIn 0.5s var(--transition-bounce);
}
.imp-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(139, 92, 246,0.6);
}
.imp-cta:active { transform: translateY(0); }
.imp-cta-text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.imp-cta-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: impShine 2.5s ease-in-out infinite;
}
@keyframes impShine {
  0%   { transform: translateX(-100%); }
  60%,100%{ transform: translateX(200%); }
}
@keyframes impCTAIn {
  from { opacity:0; transform:translateY(16px) scale(0.96); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
/* Security note */
.imp-security {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #4E4468;
  font-weight: 500;
}
.imp-security i { color: #A78BFA; font-size: 0.75rem; }
body:not(.dark-mode) .imp-security {
  color: #64748b;
}
body:not(.dark-mode) .imp-security i {
  color: #10b981;
}

/* ========== BEAUTIFUL VISUAL EFFECTS ========== */
/* === Animated Gradient Background === */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(139, 92, 246, 0.1); }
  50%      { box-shadow: 0 0 30px rgba(139, 92, 246, 0.6), 0 0 60px rgba(139, 92, 246, 0.2); }
}

@keyframes softGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.2), inset 0 0 15px rgba(139, 92, 246, 0.05); }
  50%      { box-shadow: 0 0 25px rgba(139, 92, 246, 0.4), inset 0 0 20px rgba(139, 92, 246, 0.1); }
}

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes floatUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  0% { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes neonGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(139, 92, 246, 0.4), 0 0 20px rgba(139, 92, 246, 0.2); }
  50% { text-shadow: 0 0 20px rgba(139, 92, 246, 0.8), 0 0 30px rgba(139, 92, 246, 0.4), 0 0 40px rgba(139, 92, 246, 0.2); }
}

@keyframes shimmerText {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

/* === Card Hover Effects === */
.card-glow {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-glow:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15), 0 0 30px rgba(139, 92, 246, 0.1);
}

/* === Button Ripple Effect === */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.btn-ripple:active::before {
  animation: ripple 0.6s ease-out;
}

/* === Smooth Number Animation === */
.number-animate {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* === Glowing Badge === */
.badge-glow {
  animation: softGlow 3s ease-in-out infinite;
  border-radius: 20px;
}

.badge-neon {
  animation: neonGlow 2s ease-in-out infinite;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* === Smooth Transitions === */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

button, a, [role="button"] {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Input Focus Glow === */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 0 20px rgba(139, 92, 246, 0.2);
}

/* === Modal Entrance Animation === */
.modal-enter {
  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Page Transition === */
.page-transition {
  animation: fadeIn 0.4s ease-out;
}

/* === Staggered List Animation === */
.list-item-fade {
  animation: floatUp 0.5s ease-out backwards;
}

.list-item-fade:nth-child(1) { animation-delay: 0.05s; }
.list-item-fade:nth-child(2) { animation-delay: 0.1s; }
.list-item-fade:nth-child(3) { animation-delay: 0.15s; }
.list-item-fade:nth-child(4) { animation-delay: 0.2s; }
.list-item-fade:nth-child(5) { animation-delay: 0.25s; }
.list-item-fade:nth-child(6) { animation-delay: 0.3s; }
.list-item-fade:nth-child(7) { animation-delay: 0.35s; }
.list-item-fade:nth-child(n+8) { animation-delay: 0.4s; }

/* === Floating Particles Effect === */
@keyframes float {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  25% { transform: translateY(-10px) translateX(5px); }
  50% { transform: translateY(-20px) translateX(-5px); }
  75% { transform: translateY(-10px) translateX(5px); }
}

.float-element {
  animation: float 6s ease-in-out infinite;
}

/* === Loading Shimmer === */
.shimmer-loading {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* === Icon Rotation === */
.icon-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-spin-slow {
  animation: spinSlow 3s linear infinite;
}

/* === Gradient Text === */
.gradient-text {
  background: linear-gradient(135deg, #8B5CF6 0%, #7c9cf5 50%, #8B5CF6 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* === Smooth Hover Scale === */
.hover-scale {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* === Active State Indicator === */
.active-indicator {
  position: relative;
  padding-right: 12px;
}

.active-indicator::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A78BFA, #8B5CF6);
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(16, 217, 160, 0.4);
}

/* === Success Pulse === */
.success-pulse {
  animation: pulse 1s ease-in-out;
}

/* === Smooth Dropdown === */
.dropdown-enter {
  animation: slideDown 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dropdown-exit {
  animation: slideUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Notification Slide === */
.notification-slide-in {
  animation: slideInRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Enhanced Focus States === */
.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1), 0 0 0 5px rgba(139, 92, 246, 0.2);
}

/* === Price Ticker Animation === */
.price-ticker {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.price-ticker.up {
  color: #10B981;
}

.price-ticker.down {
  color: #ff6b6b;
}

/* === Smooth Shadow Elevation === */
.elevation-1 { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.elevation-2 { box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.elevation-3 { box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
.elevation-4 { box-shadow: 0 12px 24px rgba(0,0,0,0.25); }
.elevation-5 { box-shadow: 0 16px 32px rgba(139, 92, 246, 0.15); }

/* === Organic Curve Animation === */
@keyframes organic-drift {
  0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg); }
  33% { transform: translateX(10px) translateY(-8px) rotate(1deg); }
  66% { transform: translateX(-8px) translateY(5px) rotate(-1deg); }
}

.organic-drift {
  animation: organic-drift 8s ease-in-out infinite;
}

/* === Smooth Color Transition === */
.color-transition {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* === Attention Seeker === */
@keyframes attention {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.05); }
  50% { transform: scale(1.08); }
  75% { transform: scale(1.05); }
}

.attention {
  animation: attention 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Smooth Modal Backdrop === */
.modal-backdrop-enter {
  animation: fadeIn 0.25s ease-out;
}

/* === Enhanced Scrollbar === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.1));
  border-radius: 4px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.6), rgba(139, 92, 246, 0.3));
}

/* === Glow on Active Elements === */
.nav-item.active {
  animation: softGlow 2s ease-in-out infinite;
}

/* === Smooth Bounce on Load === */
.bounce-in {
  animation: bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ── Currency-loading skeleton (shown until correct fx rate is applied) ── */
@keyframes _fxShimmer {
  0%   { background-position:  200% center; }
  100% { background-position: -200% center; }
}

/* Applied to <html> by the sync head script when pref-currency ≠ USD */
html[data-fx-pending] #balanceText {
  color: transparent !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.06) 25%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.06) 75%);
  background-size: 200% 100%;
  animation: _fxShimmer 1.4s ease infinite;
  border-radius: 12px;
  min-width: 170px;
  display: inline-block;
  pointer-events: none;
  user-select: none;
}

html[data-fx-pending] .crypto-worth {
  color: transparent !important;
  background: linear-gradient(90deg,
    var(--border-color, #e2e8f0) 25%,
    rgba(148,163,184,0.18)       50%,
    var(--border-color, #e2e8f0) 75%);
  background-size: 200% 100%;
  animation: _fxShimmer 1.4s ease infinite;
  border-radius: 6px;
  min-width: 52px;
  display: inline-block;
  pointer-events: none;
  user-select: none;
}

html[data-fx-pending] #me-stat-balance {
  color: transparent !important;
  background: linear-gradient(90deg,
    var(--border-color, #e2e8f0) 25%,
    rgba(148,163,184,0.18)       50%,
    var(--border-color, #e2e8f0) 75%);
  background-size: 200% 100%;
  animation: _fxShimmer 1.4s ease infinite;
  border-radius: 6px;
  min-width: 64px;
  display: inline-block;
  pointer-events: none;
  user-select: none;
}

/* Crypto-item price (per-coin price row) also shimmers during fx load */
html[data-fx-pending] .crypto-price {
  color: transparent !important;
  background: linear-gradient(90deg,
    var(--border-color, #e2e8f0) 25%,
    rgba(148,163,184,0.18)       50%,
    var(--border-color, #e2e8f0) 75%);
  background-size: 200% 100%;
  animation: _fxShimmer 1.4s ease infinite;
  border-radius: 4px;
  min-width: 36px;
  display: inline-block;
  pointer-events: none;
  user-select: none;
}

/* ========== COMMENT SECTION STYLES ========== */
.vc-reaction-btn {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative;
  overflow: hidden;
}

.vc-reaction-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25) !important;
}

.vc-reaction-btn:active {
  transform: translateY(0) scale(0.98);
}

.vc-action-btn {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.vc-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.vc-action-btn:active {
  transform: translateY(0) scale(0.96);
}

/* Comment count indicator */
#virt-comment-count {
  /* Overridden below in the dedicated badge rule block — this block is intentionally minimal */
  display: none; /* hidden by default; the badge rule block below sets position:absolute and display:inline-block */
}

#virt-comment-btn {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#virt-comment-btn:hover {
  background: rgba(139, 92, 246, 0.1) !important;
  color: var(--primary-color, #8B5CF6) !important;
  border-color: var(--primary-color, #8B5CF6) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15) !important;
}

#virt-comment-btn:active {
  transform: translateY(0) scale(0.96);
}

/* Responsive design for mobile */
@media (max-width: 640px) {
  .vc-reaction-btn {
    padding: 5px 9px !important;
    font-size: 10px !important;
  }
  
  .vc-action-btn {
    padding: 4px 6px !important;
    font-size: 11px !important;
  }
  
  #virt-comment-btn {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }
  
  #virt-comment-count {
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    line-height: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vc-reaction-btn,
  .vc-action-btn,
  #virt-comment-btn {
    transition: none !important;
  }
  
  .vc-reaction-btn:hover,
  .vc-action-btn:hover,
  #virt-comment-btn:hover {
    transform: none !important;
  }
}

/* ── COMMENT BUTTON: icon-only with floating external badge ── */
#virt-comment-btn {
  position: relative !important;
  border: none !important;
  background: rgba(139, 92, 246,0.1) !important;
  border-radius: 12px !important;
  color: var(--primary-color,#8B5CF6) !important;
  font-size: 17px !important;
  padding: 9px 11px !important;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
#virt-comment-btn:hover {
  background: rgba(139, 92, 246,0.2) !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 5px 16px rgba(139, 92, 246,0.25) !important;
}
#virt-comment-btn:active {
  transform: scale(0.94) !important;
  box-shadow: none !important;
}
/* Badge sits outside the button as a sibling inside a position:relative wrapper div.
   This is the same pattern as coin logo + network mini-badge — immune to overflow-y:auto clipping. */
#virt-comment-count {
  position: absolute !important;
  top: -7px !important;
  right: -8px !important;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 20px;
  background: #FF4D6A;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  line-height: 18px !important;
  text-align: center;
  box-shadow: 0 2px 6px rgba(244,63,94,0.45), 0 0 0 2px var(--bg-secondary,#1a2235);
  pointer-events: none;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
  display: inline-block !important;
  z-index: 2;
}
#virt-comment-count.vc-cnt-pop { transform: scale(1.4); }
#virt-comment-count[data-hidden="1"] { display: none !important; }

/* ── LIKE button ─────────────────────── */
.vc-like-btn {
  background: rgba(34,197,94,0.08) !important;
  color: #22c55e !important;
  border-color: rgba(34,197,94,0.35) !important;
}
.vc-like-btn:hover {
  background: rgba(34,197,94,0.18) !important;
  border-color: #22c55e !important;
  box-shadow: 0 3px 10px rgba(34,197,94,0.2) !important;
  transform: translateY(-1px);
}
.vc-like-btn.vc-active {
  background: #22c55e !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 12px rgba(34,197,94,0.38) !important;
}

/* ── DISLIKE button ──────────────────── */
.vc-dislike-btn {
  background: rgba(139, 92, 246,0.08) !important;
  color: #A78BFA !important;
  border-color: rgba(139, 92, 246,0.3) !important;
}
.vc-dislike-btn:hover {
  background: rgba(139, 92, 246,0.18) !important;
  border-color: #A78BFA !important;
  box-shadow: 0 3px 10px rgba(139, 92, 246,0.2) !important;
  transform: translateY(-1px);
}
.vc-dislike-btn.vc-active {
  background: #A78BFA !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 12px rgba(139, 92, 246,0.38) !important;
}

/* ── EDIT button ─────────────────────── */
.vc-edit-btn-new {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: 1.5px solid rgba(139, 92, 246,0.3) !important;
  background: rgba(139, 92, 246,0.07) !important;
  color: var(--primary-color,#8B5CF6) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.vc-edit-btn-new:hover {
  background: rgba(139, 92, 246,0.16) !important;
  border-color: var(--primary-color,#8B5CF6) !important;
  transform: translateY(-1px);
}

/* ── DELETE button ───────────────────── */
.vc-delete-btn-new {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border: 1.5px solid rgba(139, 92, 246,0.28) !important;
  background: rgba(139, 92, 246,0.07) !important;
  color: #A78BFA !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.vc-delete-btn-new:hover {
  background: rgba(139, 92, 246,0.16) !important;
  border-color: #A78BFA !important;
  transform: translateY(-1px);
}


/* ══════════════════════════════════════════════════════════
   XRP KEEP & EARN — Liquidity Provider toggle card
   Sits between the action buttons and the chart on XRP
   ══════════════════════════════════════════════════════════ */
@keyframes xrpEarnPulse {
  0%,100% { opacity:.55; transform:scale(1); }
  50%      { opacity:.9;  transform:scale(1.08); }
}
@keyframes xrpEarnSlideIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
/* ── CARD CONTAINER — Fixed dimensions, no shifts ── */
.xrp-earn-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-auto-flow: row;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 68px;
  padding: 14px 16px;
  gap: 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.18), rgba(6, 182, 212, 0.1));
  border: 1.5px solid rgba(139, 92, 246, 0.28);
  box-shadow: 0 4px 24px rgba(109, 40, 217, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  cursor: default;
  contain: layout style paint;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: auto;
}

/* ── GLOW EFFECT — Decorative, no layout impact ── */
.xrp-earn-glow {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.22) 0%, transparent 70%);
  pointer-events: none;
  animation: earnGlowPulse 3.5s ease-in-out infinite;
  z-index: 0;
}

/* ── LEFT SECTION — Icon + Text ── */
.xrp-earn-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  flex: 1;
  min-width: 0;
  z-index: 1;
}

/* ── ICON CONTAINER — FIXED SIZE, CENTERED SVG ── */
.xrp-earn-icon-wrap {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.35), rgba(6, 182, 212, 0.25));
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 3px 12px rgba(109, 40, 217, 0.25);
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
  contain: layout style;
  backface-visibility: hidden;
  transform: translateZ(0);
  animation: earnIconFloat 2.8s ease-in-out infinite, earnIconGlow 2.8s ease-in-out infinite;
}

/* ── SVG ICON — Clean, no inline styles ── */
.xrp-earn-icon-wrap svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}

/* ── TEXT SECTION — Flexible ── */
.xrp-earn-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

/* ── TITLE ── */
.xrp-earn-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #e0d7ff;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

/* ── SUBTITLE ── */
.xrp-earn-sub {
  font-size: 10.5px;
  color: rgba(167, 139, 250, 0.6);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* ── RIGHT SECTION — APY + Toggle (FIXED WIDTH) ── */
.xrp-earn-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  width: auto;
  height: 28px;
  z-index: 1;
}

/* ── APY BADGE — Fixed size ── */
.xrp-earn-apy {
  font-size: 11px;
  font-weight: 800;
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 8px;
  padding: 4px 9px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
  height: fit-content;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   TOGGLE SWITCH — COMPLETELY REWRITTEN FOR ZERO MOVEMENT
   ═════════════════════════════════════════════════════════════════════════════════ */
/* ── TOGGLE WRAPPER — Fixed dimensions ── */
.xrp-earn-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
}

/* ── HIDDEN CHECKBOX ── */
.xrp-earn-checkbox {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── TOGGLE TRACK (Container) — FIXED SIZE ── */
.xrp-earn-toggle-track {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 28px;
  min-width: 48px;
  min-height: 28px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  user-select: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  will-change: background, border-color, box-shadow;
  contain: layout style;
}

/* ── TOGGLE TRACK — ACTIVE STATE ── */
.xrp-earn-toggle-track.is-on {
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.25), 0 4px 14px rgba(6, 182, 212, 0.3);
}

/* ── TOGGLE THUMB (Knob) — FIXED SIZE ── */
.xrp-earn-toggle-thumb {
  position: absolute;
  left: 3px;
  top: 50%;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  user-select: none;
  transform: translateY(-50%);
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  will-change: transform;
  contain: layout style;
}

/* ── TOGGLE THUMB — ACTIVE STATE ── */
.xrp-earn-toggle-track.is-on .xrp-earn-toggle-thumb {
  transform: translateY(-50%) translateX(20px);
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ── TOGGLE THUMB HOVER STATE ── */
.xrp-earn-toggle-track:hover .xrp-earn-toggle-thumb {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EARN CONFIRMATION MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
#earn-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
#earn-confirm-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
#earn-confirm-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--bg-primary, #18122b);
  border-radius: 24px;
  padding: 0 0 28px;
  transform: scale(0.93) translateY(12px);
  transition: transform 0.28s cubic-bezier(.32,1.1,.6,1), opacity 0.22s ease;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(109,40,217,0.28);
  border: 1.5px solid rgba(139,92,246,0.25);
  opacity: 0;
}
#earn-confirm-overlay.visible #earn-confirm-sheet {
  transform: scale(1) translateY(0);
  opacity: 1;
}
#earn-confirm-overlay.closing #earn-confirm-sheet {
  transform: scale(0.93) translateY(12px);
  opacity: 0;
  transition: transform 0.2s ease-in, opacity 0.18s ease-in;
}
.earn-modal-drag-handle {
  display: none; /* hidden — bottom-sheet drag handle not needed for centered modal */
}
.earn-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px 0;
}
.earn-modal-icon {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(109,40,217,0.35), rgba(6,182,212,0.25));
  border: 1px solid rgba(139,92,246,0.3);
  display: grid; place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.earn-modal-title-block { flex: 1; min-width: 0; }
.earn-modal-coin-label {
  font-size: 11px; font-weight: 700;
  color: rgba(139,92,246,0.85);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 2px;
}
.earn-modal-title {
  font-size: 16px; font-weight: 800;
  color: var(--text-primary, #f0eeff);
  line-height: 1.2;
}
.earn-modal-divider {
  height: 1px;
  background: rgba(139,92,246,0.15);
  margin: 16px 22px;
}
.earn-modal-body {
  padding: 0 22px;
}
.earn-modal-desc {
  font-size: 12.5px;
  color: var(--text-secondary, rgba(200,190,240,0.7));
  line-height: 1.6;
  margin-bottom: 14px;
}
.earn-modal-sources-label {
  font-size: 11px; font-weight: 700;
  color: rgba(139,92,246,0.8);
  letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: 10px;
}
.earn-modal-sources {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-bottom: 22px;
}
.earn-modal-source-pill {
  font-size: 11px; font-weight: 600;
  color: rgba(167,139,250,0.9);
  background: rgba(109,40,217,0.13);
  border: 1px solid rgba(139,92,246,0.22);
  border-radius: 20px;
  padding: 4px 11px;
  line-height: 1.4;
  white-space: nowrap;
}
.earn-modal-source-pill.last-pill {
  color: rgba(167,139,250,0.6);
  background: rgba(109,40,217,0.07);
  border-color: rgba(139,92,246,0.13);
  font-style: italic;
}
.earn-modal-actions {
  display: flex; gap: 10px;
  padding: 0 22px;
}
.earn-modal-cancel-btn {
  flex: 1;
  height: 48px;
  border-radius: 14px;
  border: 1.5px solid rgba(139,92,246,0.3);
  background: rgba(139,92,246,0.08);
  color: rgba(167,139,250,0.85);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.earn-modal-cancel-btn:hover {
  background: rgba(139,92,246,0.14);
  border-color: rgba(139,92,246,0.45);
}
.earn-modal-confirm-btn {
  flex: 1.6;
  height: 48px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  color: #fff;
  font-size: 14px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(109,40,217,0.32);
  transition: opacity 0.15s, box-shadow 0.15s;
}
.earn-modal-confirm-btn:hover {
  opacity: 0.92;
  box-shadow: 0 6px 22px rgba(109,40,217,0.44);
}

</style>
</head>
<body>
<!-- ═══════════════════════════════════════════════════════════════════════
     🔒 SECURITY OVERLAY — Injected synchronously as the FIRST body child.
     A position:fixed black div at max z-index covers the entire viewport
     before a single pixel of app content can paint. Immune to CSS overrides
     and mid-page scripts touching body.style. Removed only by _asyncBoot
     once all security checks pass, or swept away by _wipe on error.
═══════════════════════════════════════════════════════════════════════ -->
<script>
(function(){
  var v = document.createElement('div');
  v.id = '_secVeil';
  v.setAttribute('aria-hidden','true');
  v.style.cssText =
    'position:fixed!important;top:0!important;left:0!important;' +
    'width:100%!important;height:100%!important;background:#000!important;' +
    'z-index:2147483647!important;pointer-events:all!important;' +
    'margin:0!important;padding:0!important;border:none!important;';
  var b = document.body || document.documentElement;
  b.insertBefore(v, b.firstChild);
})();
</script>

<!-- ═══════════════════════════════════════════════════════════
     NEXELTFI APP DOWNLOAD BANNER
     Shows after wallet is fully initialized.
     Dismisses permanently via localStorage.
══════════════════════════════════════════════════════════════ -->
<style>
/* ── Download banner — LIGHT mode (default) ── */
#nex-dl-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  padding: 0;
  animation: _dlBannerIn .3s ease both;
}
/* ── Download banner — DARK mode ── */
body.dark-mode #nex-dl-banner,
html.dark-mode #nex-dl-banner {
  background: #0d0d0d;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 16px rgba(0,0,0,0.60);
}
@keyframes _dlBannerIn {
  from { opacity:0; transform:translateY(-100%); }
  to   { opacity:1; transform:translateY(0);     }
}
#nex-dl-close {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.08);
  color: rgba(0,0,0,0.50);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  order: -1;
}
#nex-dl-close:hover { background: rgba(0,0,0,0.14); }
body.dark-mode #nex-dl-close,
html.dark-mode #nex-dl-close {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.70);
}
body.dark-mode #nex-dl-close:hover,
html.dark-mode #nex-dl-close:hover { background: rgba(255,255,255,0.20); }
#nex-dl-inner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  min-height: 54px;
}
#nex-dl-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: cover;
}
#nex-dl-icon-fb {
  display: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg,#8B5CF6,#AD6FFB);
  align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
#nex-dl-text { flex: 1; min-width: 0; overflow: hidden; }
#nex-dl-title {
  font-size: clamp(10px, 3vw, 13px);
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Outfit','DM Sans',sans-serif;
  transition: color .15s;
}
body.dark-mode #nex-dl-title,
html.dark-mode #nex-dl-title { color: #ffffff; }
#nex-dl-sub {
  font-size: clamp(9px, 2.5vw, 11px);
  color: rgba(0,0,0,0.45);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Outfit','DM Sans',sans-serif;
  transition: color .15s;
}
body.dark-mode #nex-dl-sub,
html.dark-mode #nex-dl-sub { color: rgba(255,255,255,0.50); }
#nex-dl-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 50px;
  background: linear-gradient(135deg,#8B5CF6,#7C3AED);
  color: #fff;
  font-size: clamp(10px, 2.5vw, 12px);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'Outfit','DM Sans',sans-serif;
  box-shadow: 0 2px 10px rgba(139,92,246,0.45);
  transition: opacity .15s;
  cursor: pointer;
  border: none;
}
#nex-dl-btn:hover { opacity: .88; }

/* ══════════════════════════════════════════════════════════════════════
   IMPORT PAGE DROPDOWN STYLING (Light & Dark Mode)
   ══════════════════════════════════════════════════════════════════════ */
/* ── Import page dropdown wrapper ── */
.imp-dropdown-wrapper {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Import page labels ── */
.imp-dropdown-label {
  font-size: 12px;
  font-family: monospace;
  font-weight: 600;
}

/* Light mode labels */
body:not(.dark-mode) .imp-dropdown-label {
  color: rgba(7, 3, 15, 0.65);
}

/* Dark mode labels */
body.dark-mode .imp-dropdown-label,
html.dark-mode .imp-dropdown-label {
  color: rgba(255, 255, 255, 0.55);
}

/* ── Import page select dropdowns ── */
#imp-mnemonic-standard,
#imp-word-length {
  border-radius: 10px;
  font-family: monospace;
  font-size: 12.5px;
  padding: 9px 10px;
  outline: none;
  cursor: pointer;
  border: 1.5px solid;
  transition: all 0.2s ease;
  font-weight: 600;
}

/* Light mode select styling */
body:not(.dark-mode) #imp-mnemonic-standard,
body:not(.dark-mode) #imp-word-length {
  background: rgba(139, 92, 246, 0.06);
  border-color: rgba(139, 92, 246, 0.22);
  color: #1a1033;
}

body:not(.dark-mode) #imp-mnemonic-standard:hover,
body:not(.dark-mode) #imp-word-length:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.35);
}

body:not(.dark-mode) #imp-mnemonic-standard:focus,
body:not(.dark-mode) #imp-word-length:focus {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* Dark mode select styling */
body.dark-mode #imp-mnemonic-standard,
body.dark-mode #imp-word-length,
html.dark-mode #imp-mnemonic-standard,
html.dark-mode #imp-word-length {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f0eeff;
}

body.dark-mode #imp-mnemonic-standard:hover,
body.dark-mode #imp-word-length:hover,
html.dark-mode #imp-mnemonic-standard:hover,
html.dark-mode #imp-word-length:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode #imp-mnemonic-standard:focus,
body.dark-mode #imp-word-length:focus,
html.dark-mode #imp-mnemonic-standard:focus,
html.dark-mode #imp-word-length:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* ── Select option styling ── */
#imp-mnemonic-standard option,
#imp-word-length option {
  padding: 8px 12px;
}

/* Light mode option styling */
body:not(.dark-mode) #imp-mnemonic-standard option,
body:not(.dark-mode) #imp-word-length option {
  background: #FAFAFF;
  color: #1a1033;
}

/* Dark mode option styling */
body.dark-mode #imp-mnemonic-standard option,
body.dark-mode #imp-word-length option,
html.dark-mode #imp-mnemonic-standard option,
html.dark-mode #imp-word-length option {
  background: #0A0C28;
  color: #f0eeff;
}



/* NEXELTFI PROFESSIONAL LANDING INLINE-BACKUP FINAL */
#nexeltfi-intro {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Space Grotesk', 'DM Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
#nexeltfi-intro::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 15% 10%, rgba(139,92,246,.12), transparent 34%),
    radial-gradient(circle at 85% 90%, rgba(167,139,250,.10), transparent 36%);
}
body.dark-mode #nexeltfi-intro {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(173,111,251,.06), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(139,92,246,.05), transparent 50%),
    #030209;
  color: #ECE8FF;
}

#nexeltfi-intro .pv-shell {
  width: 100%;
  max-width: 674px;
  min-height: 100%;
  margin: 0 auto;
  padding: 46px 38px 90px;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(250,250,255,.94));
  box-shadow: 0 0 60px rgba(123,34,208,.10);
}
body.dark-mode #nexeltfi-intro .pv-shell {
  background: linear-gradient(135deg, rgba(7,5,26,.97), rgba(3,2,9,.99));
  box-shadow: 0 0 60px rgba(139,92,246,.15);
}

#nexeltfi-intro .pv-header {
  padding: 0 38px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#nexeltfi-intro .pv-brand {
  font-size: 29px;
  font-weight: 900;
  letter-spacing: .8px;
  color: var(--text-primary);
}
#nexeltfi-intro .pv-header-actions { display:flex; align-items:center; gap:8px; }
#nexeltfi-intro .pv-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary-color);
  border: 1px solid rgba(139,92,246,.30);
  padding: 0 17px;
  border-radius: 36px;
  background: rgba(139,92,246,.08);
  text-transform: uppercase;
  white-space: nowrap;
}
#nexeltfi-intro .pv-status-dot {
  width: 11px; height: 11px; border-radius: 50%; background: #22c55e;
  animation: pvPulse 2s infinite;
}
@keyframes pvPulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.45)} 50%{opacity:.75;box-shadow:0 0 0 6px rgba(34,197,94,0)} }

#nexeltfi-intro .pv-hero { text-align:center; padding: 0 20px 18px; }
#nexeltfi-intro .pv-kicker {
  font-size: 27px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-color);
}
#nexeltfi-intro .pv-kicker span { color: var(--text-primary); }
#nexeltfi-intro .pv-hero p { margin:7px auto 0; max-width:440px; color:var(--text-secondary); font-size:15px; line-height:1.55; }

#nexeltfi-intro .pv-vault-card {
  margin: 0 0 30px;
  overflow: hidden;
  border-radius: 36px;
  border: 1.5px solid rgba(139,92,246,.25);
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(167,139,250,.04));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(139,92,246,.12), inset 0 1px 0 rgba(255,255,255,.5);
}
body.dark-mode #nexeltfi-intro .pv-vault-card { box-shadow:0 20px 60px rgba(139,92,246,.12),inset 0 1px 0 rgba(255,255,255,.05); }
#nexeltfi-intro .pv-vault-body { display:flex; align-items:center; gap:16px; padding:36px 38px 24px; }
#nexeltfi-intro .pv-shield-wrap { flex:0 0 178px; width:178px; height:178px; display:flex; align-items:center; justify-content:center; }
#nexeltfi-intro .pv-shield {
  width:178px; height:178px; object-fit:cover; border-radius:50%;
  border:2px solid rgba(139,92,246,.5); animation:pvFloatGlow 4s ease-in-out infinite;
}
@keyframes pvFloatGlow {
  0%,100%{transform:translateY(0) scale(1);box-shadow:0 0 15px rgba(139,92,246,.35);border-color:rgba(139,92,246,.5)}
  50%{transform:translateY(-8px) scale(1.02);box-shadow:0 10px 30px rgba(139,92,246,.7),0 0 20px rgba(167,139,250,.5);border-color:rgba(167,139,250,.9)}
}
#nexeltfi-intro .pv-vault-copy { flex:1; min-width:0; }
#nexeltfi-intro .pv-vault-copy h1 { font-size:23px; font-weight:900; color:var(--text-primary); margin-bottom:4px; letter-spacing:.5px; }
#nexeltfi-intro .pv-highlight { display:block; margin-bottom:6px; color:var(--primary-color); font-size:10px; font-weight:800; letter-spacing:1px; }
#nexeltfi-intro .pv-vault-copy p { color:var(--text-secondary); font-size:15px; line-height:1.45; margin-bottom:6px; }
#nexeltfi-intro .pv-vault-copy .pv-small { color:var(--text-secondary); opacity:.72; font-size:13px; }
#nexeltfi-intro .pv-actions { display:flex; gap:8px; padding:0 20px 20px; }
#nexeltfi-intro .pv-btn {
  flex:1; min-height:40px; padding:10px; border-radius:10px; cursor:pointer;
  font-size:10px; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:6px; transition:transform .2s,box-shadow .2s;
}
#nexeltfi-intro .pv-btn:active { transform:scale(.97); }
#nexeltfi-intro .pv-primary { border:0; color:#fff; background:linear-gradient(135deg,#8B5CF6,#A78BFA); box-shadow:0 8px 22px rgba(139,92,246,.25); }
#nexeltfi-intro .pv-secondary { background:transparent; border:1px solid rgba(139,92,246,.45); color:var(--primary-color); }

#nexeltfi-intro .pv-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; padding:0; }
#nexeltfi-intro .pv-feature,
#nexeltfi-intro .pv-badges > div {
  background:rgba(139,92,246,.055); border:1px solid rgba(139,92,246,.18); border-radius:12px;
  padding:12px 5px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px;
}
#nexeltfi-intro .pv-feature i,#nexeltfi-intro .pv-badges i { font-size:16px; color:var(--primary-color); }
#nexeltfi-intro .pv-feature span,#nexeltfi-intro .pv-badges span { font-size:8px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; line-height:1.2; }

#nexeltfi-intro .pv-dual { display:grid; grid-template-columns:1.2fr .8fr; gap:10px; padding:0 20px 16px; }
#nexeltfi-intro .pv-engine { background:linear-gradient(180deg,rgba(139,92,246,.08),rgba(139,92,246,.02)); border:1px solid rgba(139,92,246,.22); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:10px; }
#nexeltfi-intro .pv-engine-head { display:flex; justify-content:space-between; align-items:flex-start; }
#nexeltfi-intro .pv-panel-title { font-size:10px; font-weight:800; color:var(--text-primary); text-transform:uppercase; line-height:1.2; }
#nexeltfi-intro .pv-panel-title span { display:block; color:var(--primary-color); font-size:8px; margin-top:2px; }
#nexeltfi-intro .pv-toggle { width:34px; height:18px; border-radius:9px; background:#8B5CF6; border:1px solid #A78BFA; position:relative; }
#nexeltfi-intro .pv-toggle span { position:absolute; width:12px; height:12px; top:2px; left:18px; background:#fff; border-radius:50%; }
#nexeltfi-intro .pv-metrics,#nexeltfi-intro .pv-drawdown { background:rgba(0,0,0,.045); border:1px solid rgba(139,92,246,.10); border-radius:8px; padding:8px; }
body.dark-mode #nexeltfi-intro .pv-metrics,body.dark-mode #nexeltfi-intro .pv-drawdown { background:rgba(0,0,0,.2); }
#nexeltfi-intro .pv-metrics { display:flex; justify-content:space-between; gap:5px; }
#nexeltfi-intro .pv-metrics > div { text-align:center; flex:1; }
#nexeltfi-intro .pv-metrics small { display:block; color:var(--text-secondary); font-size:7px; text-transform:uppercase; margin-bottom:2px; }
#nexeltfi-intro .pv-metrics strong { font-size:11px; color:var(--text-primary); }
#nexeltfi-intro .pv-green { color:#10b981 !important; }
#nexeltfi-intro .pv-warning { color:#D4900A !important; }
#nexeltfi-intro .pv-red { color:#ef4444 !important; }
#nexeltfi-intro .pv-drawdown-head,#nexeltfi-intro .pv-slider-labels { display:flex; justify-content:space-between; font-size:8px; color:var(--text-secondary); }
#nexeltfi-intro .pv-drawdown-head b { color:var(--text-primary); }
#nexeltfi-intro .pv-slider { height:6px; margin:7px 0 6px; border-radius:3px; position:relative; background:linear-gradient(to right,#22c55e 0%,#eab308 50%,#ef4444 100%); }
#nexeltfi-intro .pv-slider span { position:absolute; top:-3px; left:35%; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid #A78BFA; box-shadow:0 0 8px rgba(0,0,0,.35),0 0 4px rgba(139,92,246,.7); }
#nexeltfi-intro .pv-chart-label { font-size:13px; color:var(--text-secondary); margin-top:2px; }
#nexeltfi-intro .pv-chart { height:80px; position:relative; }
#nexeltfi-intro .pv-chart svg { width:100%; height:100%; overflow:visible; }
#nexeltfi-intro .pv-chart-desc { margin:0; font-size:8px; color:var(--text-secondary); line-height:1.35; }
#nexeltfi-intro .pv-security { display:flex; flex-direction:column; gap:8px; }
#nexeltfi-intro .pv-sec-item { flex:1; background:rgba(139,92,246,.05); border:1px solid rgba(139,92,246,.18); border-radius:10px; padding:10px; display:flex; flex-direction:column; justify-content:center; }
#nexeltfi-intro .pv-sec-item small { font-size:8px; color:var(--text-secondary); margin-bottom:2px; }
#nexeltfi-intro .pv-sec-item strong { font-size:13px; color:var(--primary-color); display:flex; align-items:center; gap:4px; }
#nexeltfi-intro .pv-sec-item strong i { font-size:13px; }

#nexeltfi-intro .pv-section,#nexeltfi-intro .pv-stats-section { padding:0 20px 16px; }
#nexeltfi-intro .pv-section-title { font-size:11px; font-weight:800; color:var(--text-primary); text-transform:uppercase; margin-bottom:10px; letter-spacing:.05em; }
#nexeltfi-intro .pv-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
#nexeltfi-intro .pv-step { background:rgba(139,92,246,.05); border:1px solid rgba(139,92,246,.18); border-radius:12px; padding:12px 8px; text-align:center; position:relative; }
#nexeltfi-intro .pv-step > b { position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#8B5CF6; color:#fff; border:2px solid var(--bg-primary); font-size:10px; }
#nexeltfi-intro .pv-step > i { display:block; color:var(--primary-color); font-size:18px; margin:8px 0 6px; }
#nexeltfi-intro .pv-step h3 { font-size:13px; font-weight:800; color:var(--text-primary); text-transform:uppercase; margin-bottom:4px; }
#nexeltfi-intro .pv-step p { font-size:8px; line-height:1.4; color:var(--text-secondary); }
#nexeltfi-intro .pv-networks { display:flex; flex-wrap:wrap; gap:7px; }
#nexeltfi-intro .pv-networks span { display:inline-flex; align-items:center; gap:5px; padding:7px 9px; border-radius:10px; background:rgba(139,92,246,.055); border:1px solid rgba(139,92,246,.18); color:var(--text-secondary); font-size:8px; font-weight:700; }
#nexeltfi-intro .pv-networks i { color:var(--primary-color); }

#nexeltfi-intro .pv-stats-title { font-size:10px; font-weight:800; color:var(--primary-color); text-transform:uppercase; margin-bottom:8px; display:flex; gap:6px; align-items:center; }
#nexeltfi-intro .pv-stats-table { overflow:hidden; border-radius:14px; background:rgba(139,92,246,.045); border:1px solid rgba(139,92,246,.18); }
#nexeltfi-intro .pv-table-head,#nexeltfi-intro .pv-table-row { display:grid; grid-template-columns:1.2fr 1fr 1fr; align-items:center; gap:8px; }
#nexeltfi-intro .pv-table-head { padding:8px 12px; font-size:8px; color:var(--text-secondary); border-bottom:1px solid rgba(139,92,246,.10); }
#nexeltfi-intro .pv-table-head span:not(:first-child),#nexeltfi-intro .pv-value { text-align:right; }
#nexeltfi-intro .pv-table-row { padding:10px 12px; border-bottom:1px solid rgba(139,92,246,.10); font-size:10px; }
#nexeltfi-intro .pv-table-row:last-of-type { border-bottom:1px solid rgba(139,92,246,.10); }
#nexeltfi-intro .pv-asset { display:flex; align-items:center; gap:8px; min-width:0; }
#nexeltfi-intro .pv-asset-icon { width:24px; height:24px; flex:0 0 24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(139,92,246,.15); color:var(--primary-color); font-size:12px; font-weight:800; }
#nexeltfi-intro .pv-asset-icon.eth { background:rgba(99,102,241,.14); color:#6366f1; }
#nexeltfi-intro .pv-asset strong { display:block; font-size:10px; color:var(--text-primary); }
#nexeltfi-intro .pv-asset small { display:block; font-size:8px; color:var(--text-secondary); }
#nexeltfi-intro .pv-value { color:var(--text-secondary); font-size:13px; font-weight:700; }
#nexeltfi-intro .pv-status-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid rgba(139,92,246,.10); font-size:8px; color:var(--text-secondary); }
#nexeltfi-intro .pv-status-row:last-child { border-bottom:0; }
#nexeltfi-intro .pv-status-row strong { display:flex; align-items:center; gap:4px; font-size:8px; }

#nexeltfi-intro .pv-badges { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0 0 30px; }
#nexeltfi-intro .pv-footer { padding:25px 0 0; border-top:1px solid rgba(139,92,246,.12); text-align:center; display:flex; flex-direction:column; gap:4px; }
#nexeltfi-intro .pv-footer strong { font-size:12px; color:var(--text-primary); }
#nexeltfi-intro .pv-footer span { font-size:8px; color:var(--text-secondary); }

#nexeltfi-intro .pv-wallet-fab {
  position:fixed; right:max(30px,calc((100vw - 674px)/2 + 30px)); bottom:28px; z-index:10003;
  width:114px; height:114px; border:2px solid rgba(255,255,255,.15); border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; font-size:38px;
  background:linear-gradient(135deg,#8B5CF6,#A78BFA); box-shadow:0 8px 24px rgba(139,92,246,.5);
  transition:transform .25s cubic-bezier(.175,.885,.32,1.275),box-shadow .25s;
}
#nexeltfi-intro .pv-wallet-fab:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 12px 32px rgba(139,92,246,.7); }
#nexeltfi-intro .pv-wallet-fab:active { transform:scale(.95); }
#nexeltfi-intro .pv-wallet-fab.is-loading { cursor:wait; box-shadow:0 8px 28px rgba(139,92,246,.75); }

@media (max-width: 420px) {
  #nexeltfi-intro .pv-header { align-items:flex-start; }
  #nexeltfi-intro .pv-header-actions { flex-wrap:wrap; justify-content:flex-end; }
  #nexeltfi-intro .pv-status { font-size:7px; }
  #nexeltfi-intro .pv-vault-body { gap:12px; padding:16px; }
  #nexeltfi-intro .pv-shield-wrap,#nexeltfi-intro .pv-shield { width:76px; height:76px; flex-basis:76px; }
  #nexeltfi-intro .pv-feature-grid,#nexeltfi-intro .pv-badges { gap:5px; }
  #nexeltfi-intro .pv-feature,#nexeltfi-intro .pv-badges > div { padding:10px 3px; }
}
@media (max-width: 350px) {
  #nexeltfi-intro .pv-dual { grid-template-columns:1fr; }
  #nexeltfi-intro .pv-security { display:grid; grid-template-columns:1fr 1fr; }
  #nexeltfi-intro .pv-feature-grid,#nexeltfi-intro .pv-badges { grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  #nexeltfi-intro .pv-shield,#nexeltfi-intro .pv-status-dot { animation:none !important; }
}


/* ─────────────────────────────────────────────────────────────
   FINAL PROFESSIONAL-LANDING VISUAL OVERRIDES
   These rules intentionally come last so the landing page remains
   visually isolated from the legacy wallet CSS above.
   ───────────────────────────────────────────────────────────── */

#nexeltfi-intro {
  background:#05030d;
  color:#f4f0ff;
  font-family:"Space Grotesk","DM Sans","Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
#nexeltfi-intro::before{
  background:
    radial-gradient(circle at 15% 8%,rgba(124,58,237,.13),transparent 34%),
    radial-gradient(circle at 88% 88%,rgba(139,92,246,.10),transparent 35%),
    linear-gradient(180deg,#090513 0%,#07030f 48%,#05030d 100%);
}
#nexeltfi-intro .pv-shell{
  width:100%;
  max-width:674px;
  min-height:100%;
  margin:0 auto;
  padding:46px 38px 96px;
  background:transparent;
  box-shadow:none;
}
body.dark-mode #nexeltfi-intro .pv-shell{
  background:transparent;
  box-shadow:none;
}
#nexeltfi-intro .pv-header{
  padding:0;
  min-height:44px;
  margin-bottom:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
#nexeltfi-intro .pv-brand{
  font-size:29px;
  line-height:1;
  font-weight:900;
  letter-spacing:.7px;
  color:#f6f2ff;
}
#nexeltfi-intro .pv-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
}
#nexeltfi-intro .theme-toggle{
  width:38px;height:38px;flex:0 0 38px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;
  color:#b99cff;background:rgba(139,92,246,.08);
  border:1px solid rgba(139,92,246,.34);
  transition:.2s ease;
}
#nexeltfi-intro .theme-toggle:hover{transform:translateY(-1px);background:rgba(139,92,246,.15)}
#nexeltfi-intro .theme-toggle i{font-size:15px}
#nexeltfi-intro .pv-status{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:0 16px;
  border:1.5px solid rgba(139,92,246,.45);
  border-radius:22px;
  color:#a991e8;
  background:rgba(85,49,151,.15);
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
}
#nexeltfi-intro .pv-status-dot{
  width:11px;height:11px;flex:0 0 11px;
  border-radius:50%;
  background:#a78bfa;
  box-shadow:0 0 12px rgba(167,139,250,.6);
}
#nexeltfi-intro .pv-hero{
  text-align:center;
  padding:0 0 36px;
}
#nexeltfi-intro .pv-kicker{
  color:#f7f3ff;
  font-size:27px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
}
#nexeltfi-intro .pv-kicker::first-letter{color:#fbbf24}
#nexeltfi-intro .pv-kicker span{color:#f7f3ff}
#nexeltfi-intro .pv-hero p{
  margin:11px auto 0;
  max-width:560px;
  color:#9990a8;
  font-size:14px;
  line-height:1.5;
}
#nexeltfi-intro .pv-vault-card{
  margin:0 0 30px;
  overflow:hidden;
  border:2px solid rgba(139,92,246,.30);
  border-radius:36px;
  background:
    radial-gradient(circle at 15% 20%,rgba(139,92,246,.13),transparent 36%),
    linear-gradient(145deg,rgba(34,22,59,.90),rgba(19,12,36,.97));
  box-shadow:0 22px 65px rgba(0,0,0,.34),0 0 45px rgba(109,61,190,.09);
}
#nexeltfi-intro .pv-vault-body{
  display:grid;
  grid-template-columns:178px minmax(0,1fr);
  align-items:center;
  gap:24px;
  padding:36px 38px 24px;
}
#nexeltfi-intro .pv-shield-wrap{
  width:178px;height:178px;
  flex:0 0 178px;
  display:flex;align-items:center;justify-content:center;
}
#nexeltfi-intro .pv-shield{
  display:block;
  width:168px;height:168px;
  object-fit:cover;
  border-radius:50%;
  border:3px solid rgba(139,92,246,.72);
  box-shadow:0 0 0 6px rgba(139,92,246,.07),0 0 30px rgba(139,92,246,.45),0 14px 34px rgba(0,0,0,.45);
}
#nexeltfi-intro .pv-vault-copy{min-width:0}
#nexeltfi-intro .pv-vault-copy h1{
  margin:0 0 7px;
  color:#f6f2ff;
  font-size:22px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:.3px;
}
#nexeltfi-intro .pv-highlight{
  display:block;
  margin:0 0 15px;
  color:#a88cf0;
  font-size:15px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:1.5px;
}
#nexeltfi-intro .pv-vault-copy p{
  margin:0 0 12px;
  color:#aaa1b8;
  font-size:14px;
  line-height:1.48;
  text-transform:uppercase;
}
#nexeltfi-intro .pv-vault-copy .pv-small{
  margin:0;
  color:#766d81;
  font-size:12px;
  line-height:1.45;
  text-transform:none;
}
#nexeltfi-intro .pv-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  padding:0 38px 36px;
}
#nexeltfi-intro .pv-btn{
  min-height:68px;
  padding:0 18px;
  border-radius:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  cursor:pointer;
  font:inherit;
  font-size:15px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  transition:transform .2s ease,box-shadow .2s ease;
}
#nexeltfi-intro .pv-btn:hover{transform:translateY(-2px)}
#nexeltfi-intro .pv-primary{
  color:#08050f;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,#8750f4,#b18afc);
  box-shadow:0 10px 28px rgba(139,92,246,.24);
}
#nexeltfi-intro .pv-secondary{
  color:#a88cf0;
  border:2px solid rgba(139,92,246,.47);
  background:rgba(13,8,27,.28);
}
#nexeltfi-intro .pv-btn i{font-size:17px}
#nexeltfi-intro .pv-feature-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
  padding:0;
  margin:0 0 31px;
}
#nexeltfi-intro .pv-feature{
  min-height:116px;
  padding:18px 7px 14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:13px;text-align:center;
  border:2px solid rgba(139,92,246,.23);
  border-radius:23px;
  background:linear-gradient(145deg,rgba(29,18,51,.76),rgba(16,10,31,.91));
}
#nexeltfi-intro .pv-feature i{color:#a98cf3;font-size:23px}
#nexeltfi-intro .pv-feature span{color:#b0a7bd;font-size:11px;line-height:1.25;font-weight:800;text-transform:uppercase}
#nexeltfi-intro .pv-dual{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(210px,.77fr);
  gap:18px;
  padding:0;
  margin:0 0 32px;
}
#nexeltfi-intro .pv-engine{
  min-height:584px;
  padding:28px 27px 24px;
  display:flex;flex-direction:column;gap:19px;
  border:2px solid rgba(139,92,246,.28);
  border-radius:31px;
  background:linear-gradient(180deg,rgba(36,22,62,.78),rgba(17,10,33,.91));
  box-shadow:0 18px 45px rgba(0,0,0,.25);
}
#nexeltfi-intro .pv-engine-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:15px;
}
#nexeltfi-intro .pv-panel-title{
  color:#f3eefc;
  font-size:15px;
  line-height:1.22;
  font-weight:900;
  text-transform:uppercase;
}
#nexeltfi-intro .pv-panel-title span{color:#f3eefc;font-size:15px}
#nexeltfi-intro .pv-toggle{
  width:64px;height:35px;flex:0 0 64px;
  position:relative;border-radius:20px;
  border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(135deg,#8b52ef,#ad7bfa);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.18),0 4px 15px rgba(139,92,246,.24);
}
#nexeltfi-intro .pv-toggle span{
  position:absolute;width:26px;height:26px;right:4px;top:3px;
  border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.2);
}
#nexeltfi-intro .pv-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  padding:15px 10px;
  border:1px solid rgba(139,92,246,.12);
  border-radius:13px;background:rgba(6,3,15,.28);
}
#nexeltfi-intro .pv-metrics>div{text-align:center;padding:0 6px}
#nexeltfi-intro .pv-metrics small{display:block;margin-bottom:5px;color:#70677f;font-size:11px;line-height:1.1;text-transform:uppercase}
#nexeltfi-intro .pv-metrics strong{color:#f1edf8;font-size:16px;line-height:1}
#nexeltfi-intro .pv-green{color:#22c55e!important}
#nexeltfi-intro .pv-warning{color:#fbbf24!important}
#nexeltfi-intro .pv-drawdown{
  padding:16px;border:1px solid rgba(139,92,246,.12);border-radius:13px;background:rgba(6,3,15,.28)
}
#nexeltfi-intro .pv-drawdown-head,#nexeltfi-intro .pv-slider-labels{
  display:flex;justify-content:space-between;gap:10px;color:#847a92;font-size:11px;line-height:1.1
}
#nexeltfi-intro .pv-drawdown-head b{color:#eee9f7}
#nexeltfi-intro .pv-slider{
  height:8px;margin:15px 0 9px;position:relative;border-radius:8px;
  background:linear-gradient(90deg,#22c55e 0%,#eab308 50%,#ef4444 100%)
}
#nexeltfi-intro .pv-slider span{
  position:absolute;top:50%;left:36%;width:21px;height:21px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:#f8f5ff;border:3px solid #a78bfa;
  box-shadow:0 0 0 4px rgba(167,139,250,.22),0 3px 8px rgba(0,0,0,.4)
}
#nexeltfi-intro .pv-chart-label{margin-top:3px;color:#8d839b;font-size:12px;line-height:1.2}
#nexeltfi-intro .pv-chart{height:145px;position:relative;overflow:hidden;background:rgba(139,92,246,.015)}
#nexeltfi-intro .pv-chart svg{display:block;width:100%;height:100%;overflow:visible}
#nexeltfi-intro .pv-chart-desc{margin:0;color:#83798f;font-size:11px;line-height:1.42}
#nexeltfi-intro .pv-security{
  min-height:584px;display:grid;grid-template-rows:repeat(4,1fr);gap:17px
}
#nexeltfi-intro .pv-sec-item{
  min-height:0;padding:22px 20px;
  display:flex;flex-direction:column;justify-content:center;
  border:2px solid rgba(139,92,246,.23);border-radius:20px;
  background:linear-gradient(145deg,rgba(29,18,51,.70),rgba(15,9,29,.88))
}
#nexeltfi-intro .pv-sec-item small{margin-bottom:7px;color:#81778f;font-size:11px;line-height:1.25}
#nexeltfi-intro .pv-sec-item strong{display:flex;align-items:center;gap:7px;color:#a88cf0;font-size:14px;line-height:1.2;font-weight:800}
#nexeltfi-intro .pv-section{padding:0;margin:0 0 32px}
#nexeltfi-intro .pv-section-title{margin:0 0 24px;color:#f5f0fc;font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.7px;text-transform:uppercase}
#nexeltfi-intro .pv-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
#nexeltfi-intro .pv-step{
  min-height:180px;position:relative;padding:35px 18px 18px;text-align:center;
  border:2px solid rgba(139,92,246,.23);border-radius:22px;
  background:linear-gradient(145deg,rgba(29,18,51,.68),rgba(15,9,29,.88))
}
#nexeltfi-intro .pv-step>b{
  position:absolute;top:-16px;left:50%;width:34px;height:34px;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:3px solid #07030f;color:#fff;background:#8b52ef;font-size:14px;
  box-shadow:0 0 16px rgba(139,92,246,.35)
}
#nexeltfi-intro .pv-step>i{display:block;margin-bottom:12px;color:#a88cf0;font-size:25px}
#nexeltfi-intro .pv-step h3{margin:0 0 8px;color:#f0ebf7;font-size:13px;line-height:1.2;font-weight:900;text-transform:uppercase}
#nexeltfi-intro .pv-step p{margin:0;color:#7f758c;font-size:11px;line-height:1.45}
#nexeltfi-intro .pv-networks{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 32px}
#nexeltfi-intro .pv-networks span{display:inline-flex;align-items:center;gap:7px;padding:10px 13px;border:1px solid rgba(139,92,246,.22);border-radius:12px;color:#9d94aa;background:rgba(139,92,246,.045);font-size:11px;font-weight:700}
#nexeltfi-intro .pv-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:0;margin:0 0 30px}
#nexeltfi-intro .pv-badges>div{min-height:92px;padding:15px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;border:2px solid rgba(139,92,246,.20);border-radius:20px;background:rgba(139,92,246,.035)}
#nexeltfi-intro .pv-badges i{color:#a88cf0;font-size:18px}
#nexeltfi-intro .pv-badges span{color:#8e849b;font-size:10px;font-weight:800;text-transform:uppercase}
#nexeltfi-intro .pv-stats-section{padding:0;margin:0 0 30px}
#nexeltfi-intro .pv-stats-title{margin:0 0 12px;display:flex;align-items:center;gap:8px;color:#a88cf0;font-size:14px;font-weight:900;text-transform:uppercase}
#nexeltfi-intro .pv-footer{padding:25px 0 0;border-top:1px solid rgba(139,92,246,.13);text-align:center}
#nexeltfi-intro .pv-footer strong{display:block;margin-bottom:6px;color:#eeeaf6;font-size:14px}
#nexeltfi-intro .pv-footer span{color:#756b80;font-size:11px}
#nexeltfi-intro .pv-wallet-fab{
  position:fixed;right:max(30px,calc((100vw - 674px)/2 + 30px));bottom:28px;
  z-index:10003;width:114px;height:114px;
  border:2px solid rgba(255,255,255,.15);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;font-size:38px;
  background:radial-gradient(circle at 35% 30%,#a981fb 0%,#8650ed 60%,#7240d6 100%);
  box-shadow:0 12px 35px rgba(139,92,246,.48),0 0 34px rgba(139,92,246,.25);
  transition:transform .25s cubic-bezier(.175,.885,.32,1.275),box-shadow .25s
}
#nexeltfi-intro .pv-wallet-fab:hover{transform:scale(1.06) translateY(-3px)}
#nexeltfi-intro .pv-wallet-fab:active{transform:scale(.96)}
#nexeltfi-intro .pv-wallet-fab.is-loading{cursor:wait}
#nexeltfi-intro .pv-wallet-fab.is-loading i{animation:pvFabSpin .8s linear infinite}
@keyframes pvFabSpin{to{transform:rotate(360deg)}}

/* The supplied reference is the dark presentation. Light mode keeps
   exactly the same geometry while using NexeltFi's existing light palette. */
body:not(.dark-mode) #nexeltfi-intro{
  background:#f1eef8;color:#171021
}
body:not(.dark-mode) #nexeltfi-intro::before{
  background:
    radial-gradient(circle at 12% 5%,rgba(139,92,246,.13),transparent 34%),
    radial-gradient(circle at 88% 92%,rgba(196,181,253,.18),transparent 36%),
    linear-gradient(180deg,#faf9ff 0%,#f1eef8 100%)
}
body:not(.dark-mode) #nexeltfi-intro .pv-brand,
body:not(.dark-mode) #nexeltfi-intro .pv-kicker,
body:not(.dark-mode) #nexeltfi-intro .pv-kicker span,
body:not(.dark-mode) #nexeltfi-intro .pv-vault-copy h1,
body:not(.dark-mode) #nexeltfi-intro .pv-panel-title,
body:not(.dark-mode) #nexeltfi-intro .pv-panel-title span,
body:not(.dark-mode) #nexeltfi-intro .pv-section-title,
body:not(.dark-mode) #nexeltfi-intro .pv-step h3{color:#171021}
body:not(.dark-mode) #nexeltfi-intro .pv-status{color:#6d48bb;background:rgba(139,92,246,.07);border-color:rgba(109,72,187,.28)}
body:not(.dark-mode) #nexeltfi-intro .pv-hero p,
body:not(.dark-mode) #nexeltfi-intro .pv-vault-copy p,
body:not(.dark-mode) #nexeltfi-intro .pv-vault-copy .pv-small,
body:not(.dark-mode) #nexeltfi-intro .pv-feature span,
body:not(.dark-mode) #nexeltfi-intro .pv-chart-label,
body:not(.dark-mode) #nexeltfi-intro .pv-chart-desc,
body:not(.dark-mode) #nexeltfi-intro .pv-step p,
body:not(.dark-mode) #nexeltfi-intro .pv-footer span{color:#5e566b}
body:not(.dark-mode) #nexeltfi-intro .pv-vault-card,
body:not(.dark-mode) #nexeltfi-intro .pv-engine,
body:not(.dark-mode) #nexeltfi-intro .pv-sec-item,
body:not(.dark-mode) #nexeltfi-intro .pv-feature,
body:not(.dark-mode) #nexeltfi-intro .pv-step,
body:not(.dark-mode) #nexeltfi-intro .pv-badges>div{
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(245,241,252,.95));
  border-color:rgba(123,82,190,.22);
  box-shadow:0 14px 35px rgba(66,37,105,.07)
}
body:not(.dark-mode) #nexeltfi-intro .pv-metrics,
body:not(.dark-mode) #nexeltfi-intro .pv-drawdown{background:rgba(255,255,255,.65)}
body:not(.dark-mode) #nexeltfi-intro .pv-metrics strong,
body:not(.dark-mode) #nexeltfi-intro .pv-drawdown-head b{color:#2a2035}

/* Mobile: preserve the reference composition until it becomes genuinely
   too narrow, then stack only the pieces that cannot fit safely. */
@media(max-width:700px){
  #nexeltfi-intro .pv-shell{padding-left:clamp(18px,5.65vw,38px);padding-right:clamp(18px,5.65vw,38px)}
  #nexeltfi-intro .pv-brand{font-size:clamp(22px,4.3vw,29px)}
  #nexeltfi-intro .pv-status{font-size:clamp(9px,2.05vw,13px);padding:0 11px}
  #nexeltfi-intro .pv-kicker{font-size:clamp(20px,4vw,27px)}
  #nexeltfi-intro .pv-vault-body{grid-template-columns:130px minmax(0,1fr);gap:17px;padding:28px 24px 20px}
  #nexeltfi-intro .pv-shield-wrap{width:130px;height:130px;flex-basis:130px}
  #nexeltfi-intro .pv-shield{width:124px;height:124px}
  #nexeltfi-intro .pv-vault-copy h1{font-size:19px}
  #nexeltfi-intro .pv-highlight{font-size:13px}
  #nexeltfi-intro .pv-vault-copy p{font-size:12px}
  #nexeltfi-intro .pv-vault-copy .pv-small{font-size:10px}
  #nexeltfi-intro .pv-actions{padding:0 24px 27px}
  #nexeltfi-intro .pv-btn{min-height:58px;font-size:13px}
  #nexeltfi-intro .pv-engine,#nexeltfi-intro .pv-security{min-height:500px}
  #nexeltfi-intro .pv-wallet-fab{width:88px;height:88px;right:20px;bottom:20px;font-size:29px}
}
@media(max-width:560px){
  #nexeltfi-intro .pv-vault-body{grid-template-columns:1fr;text-align:center}
  #nexeltfi-intro .pv-shield-wrap{margin:0 auto}
  #nexeltfi-intro .pv-actions{grid-template-columns:1fr}
  #nexeltfi-intro .pv-feature-grid{grid-template-columns:repeat(2,1fr)}
  #nexeltfi-intro .pv-dual{grid-template-columns:1fr}
  #nexeltfi-intro .pv-security{grid-template-rows:none;grid-template-columns:repeat(2,1fr);min-height:0}
  #nexeltfi-intro .pv-sec-item{min-height:125px}
  #nexeltfi-intro .pv-steps{grid-template-columns:1fr}
  #nexeltfi-intro .pv-step{min-height:150px}
  #nexeltfi-intro .pv-badges{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:360px){
  #nexeltfi-intro .pv-shell{padding-top:30px}
  #nexeltfi-intro .pv-header{align-items:flex-start}
  #nexeltfi-intro .pv-status{max-width:165px;white-space:normal;text-align:center;line-height:1.1}
}



/* ── FINAL LANDING INTERACTION + REFERENCE GEOMETRY ─────────────────────── */
#nexeltfi-intro .pv-kicker strong{color:#fbbf24;font-weight:900}
#nexeltfi-intro .pv-kicker span{color:#f7f3ff}
#nexeltfi-intro .pv-wallet-fab{
  overflow:hidden;
  transform-origin:center;
}
#nexeltfi-intro .pv-wallet-fab.is-loading{
  animation:pvFabPulse .9s ease-in-out infinite;
}
#nexeltfi-intro .pv-wallet-fab.is-loading i{
  animation:pvFabSpin .72s linear infinite;
}
#nexeltfi-intro .pv-wallet-fab.is-success{
  background:radial-gradient(circle at 35% 30%,#b896ff 0%,#8d55ef 58%,#7440d8 100%);
  box-shadow:0 12px 38px rgba(139,92,246,.62),0 0 42px rgba(139,92,246,.38);
  animation:pvFabSuccess .28s cubic-bezier(.175,.885,.32,1.275) both;
}
#nexeltfi-intro .pv-wallet-fab.is-success i{
  animation:none!important;
}
@keyframes pvFabPulse{0%,100%{box-shadow:0 12px 35px rgba(139,92,246,.48),0 0 34px rgba(139,92,246,.25)}50%{box-shadow:0 12px 42px rgba(139,92,246,.72),0 0 48px rgba(139,92,246,.42)}}
@keyframes pvFabSuccess{0%{transform:scale(.9)}70%{transform:scale(1.08)}100%{transform:scale(1)}}


/* FINAL NEXELTFI LANDING REFERENCE POLISH — synchronized with index.html */


/* ── FINAL NEXELTFI REFERENCE POLISH ───────────────────────────────────── */
#nexeltfi-intro .pv-header{
  min-height:38px; margin-bottom:24px; gap:10px;
}
#nexeltfi-intro .pv-brand{
  font-size:22px; font-weight:850; letter-spacing:.45px;
}
#nexeltfi-intro .pv-header-actions{gap:7px}
#nexeltfi-intro .theme-toggle{
  width:32px;height:32px;flex-basis:32px;
  border-radius:10px;
}
#nexeltfi-intro .theme-toggle i{font-size:12px}
#nexeltfi-intro .pv-status{
  min-height:32px; padding:0 11px; gap:6px;
  border-radius:18px; font-size:9px; font-weight:800; letter-spacing:.035em;
}
#nexeltfi-intro .pv-status-dot{width:8px;height:8px;flex-basis:8px}
#nexeltfi-intro .pv-kicker{font-size:20px;letter-spacing:.35px}
#nexeltfi-intro .pv-hero{padding-bottom:26px}
#nexeltfi-intro .pv-hero p{font-size:11px;margin-top:8px}
#nexeltfi-intro .pv-vault-card{border-radius:28px;margin-bottom:22px}
#nexeltfi-intro .pv-vault-body{grid-template-columns:145px minmax(0,1fr);gap:18px;padding:28px 28px 19px}
#nexeltfi-intro .pv-shield-wrap{width:145px;height:145px;flex-basis:145px}
#nexeltfi-intro .pv-shield{width:136px;height:136px}
#nexeltfi-intro .pv-vault-copy h1{font-size:18px}
#nexeltfi-intro .pv-highlight{font-size:11px;letter-spacing:1.1px;margin-bottom:10px}
#nexeltfi-intro .pv-vault-copy p{font-size:11px;line-height:1.4;margin-bottom:8px}
#nexeltfi-intro .pv-vault-copy .pv-small{font-size:9.5px}
#nexeltfi-intro .pv-actions{gap:11px;padding:0 28px 28px}
#nexeltfi-intro .pv-btn{min-height:52px;border-radius:15px;padding:0 13px;font-size:11px;letter-spacing:.35px;gap:7px}
#nexeltfi-intro .pv-btn i{font-size:13px}
#nexeltfi-intro .pv-feature-grid{gap:11px;margin-bottom:24px}
#nexeltfi-intro .pv-feature{min-height:88px;padding:12px 5px 10px;border-radius:18px;gap:8px}
#nexeltfi-intro .pv-feature i{font-size:18px}
#nexeltfi-intro .pv-feature span{font-size:8px}
#nexeltfi-intro .pv-dual{gap:13px;margin-bottom:25px}
#nexeltfi-intro .pv-engine{min-height:455px;padding:21px 20px 19px;gap:14px;border-radius:25px}
#nexeltfi-intro .pv-panel-title{font-size:11px}
#nexeltfi-intro .pv-panel-title span{font-size:10px}
#nexeltfi-intro .pv-toggle{width:48px;height:27px;flex-basis:48px}
#nexeltfi-intro .pv-toggle span{width:20px;height:20px;right:3px;top:2px}
#nexeltfi-intro .pv-metrics{padding:11px 6px}
#nexeltfi-intro .pv-metrics small{font-size:8px}
#nexeltfi-intro .pv-metrics strong{font-size:12px}
#nexeltfi-intro .pv-drawdown{padding:12px}
#nexeltfi-intro .pv-drawdown-head,#nexeltfi-intro .pv-slider-labels{font-size:8px}
#nexeltfi-intro .pv-slider{height:6px;margin:11px 0 7px}
#nexeltfi-intro .pv-slider span{width:17px;height:17px}
#nexeltfi-intro .pv-chart-label{font-size:10px}
#nexeltfi-intro .pv-chart{height:115px}
#nexeltfi-intro .pv-chart-desc{font-size:9px}
#nexeltfi-intro .pv-security{min-height:455px;gap:12px}
#nexeltfi-intro .pv-sec-item{padding:16px;border-radius:16px}
#nexeltfi-intro .pv-sec-item small{font-size:8px}
#nexeltfi-intro .pv-sec-item strong{font-size:10px}
#nexeltfi-intro .pv-sec-item strong i{font-size:10px}
#nexeltfi-intro .pv-section{margin-bottom:25px}
#nexeltfi-intro .pv-section-title{margin-bottom:18px;font-size:14px}
#nexeltfi-intro .pv-step{min-height:145px;padding:28px 12px 14px;border-radius:18px}
#nexeltfi-intro .pv-step>b{width:27px;height:27px;top:-13px;font-size:11px}
#nexeltfi-intro .pv-step>i{font-size:20px;margin-bottom:9px}
#nexeltfi-intro .pv-step h3{font-size:10px}
#nexeltfi-intro .pv-step p{font-size:8.5px}
#nexeltfi-intro .pv-networks span{padding:7px 9px;font-size:9px}
#nexeltfi-intro .pv-stats-title{font-size:11px}
#nexeltfi-intro .pv-table-head{font-size:7px}
#nexeltfi-intro .pv-table-row{font-size:8px;padding:8px 10px}
#nexeltfi-intro .pv-asset-icon{width:20px;height:20px;flex-basis:20px;font-size:10px}
#nexeltfi-intro .pv-asset strong{font-size:8px}
#nexeltfi-intro .pv-asset small{font-size:7px}
#nexeltfi-intro .pv-value{font-size:9px}
#nexeltfi-intro .pv-status-row{font-size:7px;padding:8px 10px}
#nexeltfi-intro .pv-status-row strong{font-size:8px}
#nexeltfi-intro .pv-badges{gap:11px;margin-bottom:24px}
#nexeltfi-intro .pv-badges>div{min-height:72px;padding:11px 5px;border-radius:16px;gap:7px}
#nexeltfi-intro .pv-badges i{font-size:15px}
#nexeltfi-intro .pv-badges span{font-size:8px}
#nexeltfi-intro .pv-footer strong{font-size:11px}
#nexeltfi-intro .pv-footer span{font-size:8px}

/* The realized-yield row is an actual value, not a placeholder dash. */
#nexeltfi-intro #pv-realized-yield{
  color:#22c55e !important; font-size:10px; font-weight:900;
  text-shadow:0 0 12px rgba(34,197,94,.18);
}

/* Reference interaction: wallet -> spinner -> green check -> onboarding. */
#nexeltfi-intro .pv-wallet-fab{
  width:78px;height:78px;right:max(22px,calc((100vw - 674px)/2 + 22px));bottom:22px;
  font-size:24px;border-width:1.5px;
  box-shadow:0 9px 26px rgba(139,92,246,.42),0 0 24px rgba(139,92,246,.20);
}
#nexeltfi-intro .pv-wallet-fab.is-loading{
  background:radial-gradient(circle at 35% 30%,#ad82fb 0%,#8750ec 62%,#7040cf 100%);
}
#nexeltfi-intro .pv-wallet-fab.is-success{
  color:#fff !important;
  background:linear-gradient(145deg,#34d399,#16a34a) !important;
  border-color:rgba(187,247,208,.85) !important;
  box-shadow:0 10px 30px rgba(34,197,94,.48),0 0 32px rgba(34,197,94,.30) !important;
}
#nexeltfi-intro .pv-wallet-fab.is-success i{color:#fff !important;font-size:25px}

@media(max-width:700px){
  #nexeltfi-intro .pv-header{margin-bottom:20px}
  #nexeltfi-intro .pv-brand{font-size:19px}
  #nexeltfi-intro .pv-status{font-size:8px;min-height:29px;padding:0 9px}
  #nexeltfi-intro .theme-toggle{width:29px;height:29px;flex-basis:29px}
  #nexeltfi-intro .pv-vault-body{grid-template-columns:110px minmax(0,1fr);gap:14px;padding:22px 20px 16px}
  #nexeltfi-intro .pv-shield-wrap{width:110px;height:110px;flex-basis:110px}
  #nexeltfi-intro .pv-shield{width:103px;height:103px}
  #nexeltfi-intro .pv-actions{padding:0 20px 22px}
  #nexeltfi-intro .pv-btn{min-height:46px;font-size:10px;border-radius:13px}
  #nexeltfi-intro .pv-wallet-fab{width:66px;height:66px;right:17px;bottom:17px;font-size:21px}
  #nexeltfi-intro .pv-wallet-fab.is-success i{font-size:22px}
}
@media(max-width:560px){
  #nexeltfi-intro .pv-wallet-fab{width:62px;height:62px;right:15px;bottom:15px;font-size:20px}
}


/* NexeltFi compact security cards override */
#nexeltfi-intro .pv-security{min-height:0 !important;gap:8px !important;}
#nexeltfi-intro .pv-sec-item{min-height:0 !important;height:auto !important;padding:11px 12px !important;border-radius:12px !important;}
#nexeltfi-intro .pv-sec-item small{font-size:9px !important;margin-bottom:4px !important;}
#nexeltfi-intro .pv-sec-item strong{font-size:12px !important;gap:5px !important;}
#nexeltfi-intro .pv-sec-item strong i{font-size:11px !important;}
@media (min-width:700px){#nexeltfi-intro .pv-security{grid-template-rows:repeat(2,minmax(0,1fr));}}
@media (max-width:699px){#nexeltfi-intro .pv-security{grid-template-columns:1fr 1fr;gap:7px !important;}#nexeltfi-intro .pv-sec-item{padding:9px 10px !important;}}


/* ========================================================================
   NEXELTFI LANDING — FINAL CSS ISOLATION / VIEWPORT SAFETY
   Keep legacy wallet rules from changing the landing composition.
   ======================================================================== */
#nexeltfi-intro,
#nexeltfi-intro * ,
#nexeltfi-intro *::before,
#nexeltfi-intro *::after{
  box-sizing:border-box;
}
#nexeltfi-intro{
  width:100%;
  max-width:100%;
  min-width:0;
  height:100dvh;
  max-height:100dvh;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}
#nexeltfi-intro .pv-shell{
  width:100% !important;
  max-width:760px !important;
  min-width:0 !important;
  height:auto !important;
  min-height:max-content !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
  overflow:visible;
}
#nexeltfi-intro .pv-header,
#nexeltfi-intro .pv-hero,
#nexeltfi-intro .pv-vault-card,
#nexeltfi-intro .pv-feature-grid,
#nexeltfi-intro .pv-dual,
#nexeltfi-intro .pv-section,
#nexeltfi-intro .pv-stats,
#nexeltfi-intro .pv-badges,
#nexeltfi-intro .pv-footer{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
#nexeltfi-intro .pv-header{
  min-width:0;
}
#nexeltfi-intro .pv-header-actions{
  min-width:0;
  max-width:100%;
}
#nexeltfi-intro .pv-status{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
#nexeltfi-intro .pv-vault-body,
#nexeltfi-intro .pv-vault-copy,
#nexeltfi-intro .pv-feature,
#nexeltfi-intro .pv-step,
#nexeltfi-intro .pv-sec-item,
#nexeltfi-intro .pv-engine,
#nexeltfi-intro .pv-security{
  min-width:0;
  box-sizing:border-box;
}
#nexeltfi-intro img,
#nexeltfi-intro svg{
  max-width:100%;
}

@media(max-width:700px){
  #nexeltfi-intro .pv-shell{
    width:100% !important;
    max-width:none !important;
    padding-left:18px;
    padding-right:18px;
  }
  #nexeltfi-intro .pv-header-actions{
    flex-shrink:1;
  }
  #nexeltfi-intro .pv-status{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #nexeltfi-intro .pv-vault-card,
  #nexeltfi-intro .pv-feature-grid,
  #nexeltfi-intro .pv-dual,
  #nexeltfi-intro .pv-section,
  #nexeltfi-intro .pv-stats,
  #nexeltfi-intro .pv-badges{
    max-width:100%;
  }
}

@media(max-width:420px){
  #nexeltfi-intro .pv-header{
    align-items:center;
  }
  #nexeltfi-intro .pv-header-actions{
    gap:5px;
  }
  #nexeltfi-intro .pv-status{
    max-width:170px;
  }
}

/* ── LANDING HOST-WIDTH ISOLATION ────────────────────────────────────────
   index.css constrains the wallet application body to 480px. That must not
   constrain the fixed landing page while it is visible. */
body.nex-landing-active{
  width:100% !important; max-width:none !important; min-width:0 !important;
  margin:0 !important; padding:0 !important;
}
body.nex-landing-active #nexeltfi-intro{
  width:100vw !important; max-width:100vw !important; min-width:0 !important;
  left:0 !important; right:auto !important;
}
body.nex-landing-active #nexeltfi-intro .pv-shell{
  width:min(100%,674px) !important; max-width:674px !important;
  margin-left:auto !important; margin-right:auto !important;
}
@media(max-width:700px){
  body.nex-landing-active #nexeltfi-intro .pv-shell{
    width:100% !important; max-width:none !important;
    padding-left:18px !important; padding-right:18px !important;
  }
}