/* =====================================================================
   NexusTrade — Enterprise Trading Terminal & FinTech CSS System
   Tailwind CSS v3.4 Extension + Vanilla ES6+ Trading Components
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Core Terminal Tokens — Cyberpunk Synthwave Dark & Light Theme */
  --bg-terminal: #050811;
  --bg-surface: #080D1A;
  --bg-card: rgba(8, 14, 28, 0.85);
  --bg-card-hover: rgba(13, 22, 42, 0.95);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(0, 240, 255, 0.25);

  /* Trading Colors — Electric Cyan Bull & Neon Magenta Bear */
  --trade-bull: #00F0FF;
  --trade-bull-glow: rgba(0, 240, 255, 0.55);
  --trade-bull-bg: rgba(0, 240, 255, 0.12);
  --trade-bear: #FF007F;
  --trade-bear-glow: rgba(255, 0, 127, 0.55);
  --trade-bear-bg: rgba(255, 0, 127, 0.14);

  /* Brand Accents — Synthwave Cyan, Electric Magenta, Ultra Violet */
  --brand-cyan: #00F0FF;
  --brand-cyan-glow: rgba(0, 240, 255, 0.55);
  --brand-magenta: #FF007F;
  --brand-magenta-glow: rgba(255, 0, 127, 0.55);
  --brand-matrix: #00F0FF;
  --brand-amber: #F59E0B;
  --brand-purple: #8B5CF6;
}

/* Light Mode Overrides */
html.light {
  --bg-terminal: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-card-hover: rgba(248, 250, 252, 0.95);
  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-card: rgba(2, 132, 199, 0.25);
  --trade-bull-bg: rgba(2, 132, 199, 0.1);
  --trade-bear-bg: rgba(225, 29, 72, 0.1);
}

/* Base Terminal Settings */
html, body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-terminal);
  color: #F1F5F9;
  overflow-x: hidden;
}

html.light, html.light body {
  color: #0F172A;
}

.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Glassmorphism Containers */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel:hover {
  border-color: rgba(0, 240, 255, 0.35);
}

.glass-panel-glow {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 30px -5px rgba(0, 240, 255, 0.22);
}

/* Ambient Cyber Mesh Gradient Background (Synthwave Edition) */
.trading-mesh-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.mesh-glow-1 {
  position: absolute;
  top: -15%;
  left: 10%;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.24) 0%, rgba(0, 240, 255, 0) 70%);
  filter: blur(85px);
  animation: floatMesh 18s ease-in-out infinite alternate;
}

.mesh-glow-2 {
  position: absolute;
  top: 35%;
  right: -10%;
  width: 750px;
  height: 750px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 127, 0.22) 0%, rgba(255, 0, 127, 0) 70%);
  filter: blur(95px);
  animation: floatMesh 22s ease-in-out infinite alternate-reverse;
}

.mesh-glow-3 {
  position: absolute;
  bottom: -15%;
  left: 30%;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0) 70%);
  filter: blur(90px);
  animation: floatMesh 20s ease-in-out infinite alternate;
}

@keyframes floatMesh {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.05); }
  100% { transform: translate(-30px, -40px) scale(0.95); }
}

/* Live Ticker Marquee Bar */
.ticker-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.ticker-move {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 35s linear infinite;
}

.ticker-wrap:hover .ticker-move {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Order Book Flash Animations (Cyberpunk Synthwave) */
@keyframes flashBid {
  0% { background-color: rgba(0, 240, 255, 0.35); }
  100% { background-color: transparent; }
}

@keyframes flashAsk {
  0% { background-color: rgba(255, 0, 127, 0.35); }
  100% { background-color: transparent; }
}

.flash-bid {
  animation: flashBid 0.75s ease-out;
}

.flash-ask {
  animation: flashAsk 0.75s ease-out;
}

/* Live Recent Trades Drop-in Animation */
@keyframes tradeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
    background-color: rgba(0, 240, 255, 0.2);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    background-color: transparent;
  }
}

.trade-row-new {
  animation: tradeSlideIn 0.4s ease-out;
}

/* Bull / Bear Text & Badges */
.text-bull {
  color: var(--trade-bull) !important;
}

.text-bear {
  color: var(--trade-bear) !important;
}

.bg-bull-subtle {
  background-color: var(--trade-bull-bg) !important;
  color: var(--trade-bull) !important;
}

.bg-bear-subtle {
  background-color: var(--trade-bear-bg) !important;
  color: var(--trade-bear) !important;
}

/* Cyberpunk Synthwave Trading Execution Buttons */
.btn-buy {
  background: linear-gradient(135deg, #0284C7 0%, #00F0FF 100%) !important;
  color: #050811 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 240, 255, 0.45) !important;
  border: 1px solid rgba(0, 240, 255, 0.5) !important;
}

.btn-buy * {
  color: #050811 !important;
  font-weight: 800 !important;
}

.btn-buy:hover {
  background: linear-gradient(135deg, #0369A1 0%, #38BDF8 100%) !important;
  box-shadow: 0 6px 26px 0px rgba(0, 240, 255, 0.65) !important;
}

.btn-sell {
  background: linear-gradient(135deg, #BE123C 0%, #FF007F 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 20px -2px rgba(255, 0, 127, 0.45) !important;
  border: 1px solid rgba(255, 0, 127, 0.5) !important;
}

.btn-sell * {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.btn-sell:hover {
  background: linear-gradient(135deg, #9F1239 0%, #F43F5E 100%) !important;
  box-shadow: 0 6px 26px 0px rgba(255, 0, 127, 0.65) !important;
}

/* Synthwave Hero Gradient Text & Master Action Buttons */
.text-gradient-synthwave {
  background: linear-gradient(135deg, #00F0FF 0%, #C084FC 50%, #FF007F 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block;
}

html.light .text-gradient-synthwave {
  background: linear-gradient(135deg, #0284C7 0%, #9333EA 50%, #E11D48 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block;
}

/* Synthwave Gradient Brand Buttons */
.btn-matrix,
.btn-synthwave,
.btn-synthwave-primary {
  background: linear-gradient(90deg, #00F0FF 0%, #8B5CF6 50%, #FF007F 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 22px -3px rgba(0, 240, 255, 0.45) !important;
  transition: all 0.25s ease !important;
}

.btn-matrix *,
.btn-synthwave *,
.btn-synthwave-primary * {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.btn-matrix:hover,
.btn-synthwave:hover,
.btn-synthwave-primary:hover {
  opacity: 0.95 !important;
  transform: translateY(-1px) scale(1.01) !important;
  box-shadow: 0 6px 28px 0px rgba(255, 0, 127, 0.55) !important;
}

html.light .btn-matrix,
html.light .btn-synthwave,
html.light .btn-synthwave-primary {
  background: linear-gradient(90deg, #0284C7 0%, #7C3AED 50%, #E11D48 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px 0 rgba(2, 132, 199, 0.35) !important;
}

html.light .btn-matrix *,
html.light .btn-synthwave *,
html.light .btn-synthwave-primary * {
  color: #FFFFFF !important;
}

/* Custom Scrollbars for Terminal Panels */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.45);
}

/* Active Nav Links */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94A3B8;
  transition: all 0.2s ease;
  position: relative;
}

.nav-link:hover {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.05);
}

.nav-link.active {
  color: #FFFFFF;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.18) 0%, rgba(255, 0, 127, 0.08) 100%);
  border-left: 3px solid #00F0FF;
  font-weight: 600;
  box-shadow: inset 0 0 15px -3px rgba(0, 240, 255, 0.25);
}

html.light .nav-link {
  color: #64748B;
}

html.light .nav-link:hover {
  color: #0F172A;
  background-color: rgba(15, 23, 42, 0.04);
}

html.light .nav-link.active {
  color: #0F172A;
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
  border-left-color: #0284C7;
}

/* Depth Bars for Orderbook */
.depth-bid-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 240, 255, 0.16);
  pointer-events: none;
  transition: width 0.3s ease;
}

.depth-ask-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 0, 127, 0.16);
  pointer-events: none;
  transition: width 0.3s ease;
}

/* Leverage Slider Styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  height: 6px;
  border-radius: 3px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00F0FF;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.8);
  transition: transform 0.1s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* =====================================================================
   Sidebar Header & Footer Absolute Stability System
   ===================================================================== */
aside#sidebar {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
}

/* Stable Brand Logo Header at Top of Sidebar */
aside#sidebar .sidebar-header,
aside#sidebar > div:first-child,
aside#sidebar div[class*="h-16 flex items-center justify-between"] {
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  background-color: var(--bg-surface, #080D1A) !important;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)) !important;
}

/* Stable Trader VIP & Profile Footer at Bottom of Sidebar */
aside#sidebar .sidebar-footer,
aside#sidebar > div:last-child,
aside#sidebar div[class*="border-t"][class*="bg-[#070A12]"] {
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 30 !important;
  background-color: var(--bg-surface, #080D1A) !important;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)) !important;
}

/* Middle Navigation List Scrolls Independently */
aside#sidebar .sidebar-nav-scroll,
aside#sidebar .px-3.py-4.space-y-6,
aside#sidebar div[class*="px-3 py-4 space-y-6"] {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* Light mode overrides for sidebar header & footer */
html.light aside#sidebar .sidebar-header,
html.light aside#sidebar > div:first-child,
html.light aside#sidebar div[class*="h-16 flex items-center justify-between"] {
  background-color: #FFFFFF !important;
  border-bottom-color: #E2E8F0 !important;
}

html.light aside#sidebar .sidebar-footer,
html.light aside#sidebar > div:last-child,
html.light aside#sidebar div[class*="border-t"][class*="bg-[#070A12]"] {
  background-color: #FFFFFF !important;
  border-top-color: #E2E8F0 !important;
}

/* Light / Dark Toggle Icons */
html.light .theme-toggle-btn [data-lucide="moon"] {
  display: none !important;
}

html.dark .theme-toggle-btn [data-lucide="sun"] {
  display: none !important;
}

/* =====================================================================
   Layout, Sidebar & Visibility Guarantees
   ===================================================================== */

/* Ensure desktop sidebar stays permanently fixed to viewport on large screens */
@media (min-width: 1024px) {
  #sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: 16rem !important;
    transform: none !important;
    display: flex !important;
    flex-shrink: 0 !important;
    z-index: 40 !important;
  }

  /* Main content wrapper offset ONLY for the direct sibling wrapper of the fixed desktop sidebar */
  aside#sidebar + div,
  aside#sidebar ~ .main-content-wrapper,
  .main-content-wrapper {
    margin-left: 16rem !important;
    width: calc(100% - 16rem) !important;
    max-width: calc(100% - 16rem) !important;
  }

  #sidebar-backdrop {
    display: none !important;
  }
}

/* Explicit Dimensions for Crypto Token SVGs and Avatars in Tables */
img[src*="assets/images/crypto/"],
.crypto-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Header & Navbar Logos */
.navbar-logo {
  height: 32px !important;
  width: auto !important;
  max-height: 32px !important;
  display: block !important;
}

/* Table Alignment & Typography Isolation */
table td {
  vertical-align: middle !important;
}

/* Card KPI Containers & Spacing */
.glass-panel {
  position: relative;
  overflow: hidden;
}

/* =====================================================================
   Cyberpunk FinTech & Matrix Design System (Bloomberg Pro x Web3)
   ===================================================================== */
:root {
  --neon-matrix: #00F0FF;
  --neon-matrix-glow: rgba(0, 240, 255, 0.45);
  --neon-amber: #F59E0B;
  --neon-amber-glow: rgba(245, 158, 11, 0.4);
  --neon-cyan: #00F0FF;
  --neon-pink: #FF007F;
}

/* CRT Scanline & HUD Grid Effect */
.terminal-hud-scanlines {
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  ), linear-gradient(
    90deg,
    rgba(255, 0, 127, 0.03),
    rgba(0, 240, 255, 0.02),
    rgba(139, 92, 246, 0.03)
  );
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
}

/* Glowing Neon Borders */
.border-matrix-glow {
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 20px -3px rgba(0, 240, 255, 0.25);
}

.border-matrix-glow:hover {
  border-color: rgba(0, 240, 255, 0.75);
  box-shadow: 0 0 28px 0px rgba(0, 240, 255, 0.45);
}

/* Hologram Orbit Keyframes */
@keyframes orbitSpinClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

@keyframes pulseLaserGlow {
  0%, 100% { opacity: 0.3; transform: scale(0.98); }
  50% { opacity: 0.8; transform: scale(1.02); }
}

.anim-orbit-clockwise {
  animation: orbitSpinClockwise 24s linear infinite;
}

.anim-orbit-counter {
  animation: orbitSpinCounter 16s linear infinite;
}

.anim-laser-pulse {
  animation: pulseLaserGlow 4s ease-in-out infinite;
}

/* High-Frequency Trading Persona Switcher */
.persona-select-card {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  background-color: rgba(8, 13, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.persona-select-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, 0.5);
}

.persona-select-card.active-hft {
  background-color: rgba(0, 240, 255, 0.12) !important;
  border-color: #00F0FF !important;
  box-shadow: 0 0 0 1px #00F0FF, 0 0 16px -3px rgba(0, 240, 255, 0.4) !important;
}

.persona-select-card.active-whale {
  background-color: rgba(139, 92, 246, 0.14) !important;
  border-color: #8B5CF6 !important;
  box-shadow: 0 0 0 1px #8B5CF6, 0 0 16px -3px rgba(139, 92, 246, 0.4) !important;
}

.persona-select-card.active-defi {
  background-color: rgba(255, 0, 127, 0.14) !important;
  border-color: #FF007F !important;
  box-shadow: 0 0 0 1px #FF007F, 0 0 16px -3px rgba(255, 0, 127, 0.4) !important;
}

/* Active Persona Badge in Right Card Header */
#active-persona-badge {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

#active-persona-badge.badge-hft {
  background-color: rgba(0, 240, 255, 0.15) !important;
  color: #00F0FF !important;
  border-color: rgba(0, 240, 255, 0.45) !important;
}

#active-persona-badge.badge-whale {
  background-color: rgba(139, 92, 246, 0.18) !important;
  color: #C084FC !important;
  border-color: rgba(139, 92, 246, 0.45) !important;
}

#active-persona-badge.badge-defi {
  background-color: rgba(255, 0, 127, 0.18) !important;
  color: #FF3B69 !important;
  border-color: rgba(255, 0, 127, 0.45) !important;
}

/* Audio Toggle Pulse Indicator */
.sfx-toggle-btn {
  transition: all 0.2s ease;
}

/* =====================================================================
   Cinematic Terminal Boot Preloader (Synthwave Multi-Gradient)
   ===================================================================== */
#nexus-preloader {
  position: fixed;
  inset: 0;
  background-color: #04060A;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
}

#nexus-preloader.preloader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-bar-fill {
  background: linear-gradient(90deg, #00F0FF 0%, #8B5CF6 50%, #FF007F 100%);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.7);
  transition: width 0.15s ease-out;
}

/* =====================================================================
   Cyberpunk Precision Crosshair & Ring Cursor
   ===================================================================== */
@media (pointer: fine) {
  .nx-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border: 1.5px solid rgba(0, 240, 255, 0.65);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
  }

  .nx-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    background-color: #00F0FF;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #00F0FF;
  }

  .nx-cursor-ring.cursor-hover {
    width: 48px;
    height: 48px;
    border-color: #FF007F;
    background-color: rgba(255, 0, 127, 0.1);
    box-shadow: 0 0 22px rgba(255, 0, 127, 0.55);
  }
}

/* =====================================================================
   Scroll Entrance Animations (Intersection Observer)
   ===================================================================== */
.nx-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.nx-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Number Flash upon Count-Up Finish */
@keyframes kpiNumberFlash {
  0% { color: #00F0FF; text-shadow: 0 0 14px rgba(0, 240, 255, 0.85); }
  100% { text-shadow: none; }
}

.kpi-flashed {
  animation: kpiNumberFlash 0.8s ease-out;
}

/* Enhanced Inner Glass Glow */
.glass-panel {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-panel:hover {
  box-shadow: inset 0 1px 0 rgba(0, 240, 255, 0.2), 0 12px 40px -8px rgba(0, 240, 255, 0.15);
}

/* Breathing Heatmap Tiles */
@keyframes heatmapBreatheGreen {
  0%, 100% { box-shadow: 0 0 15px -3px rgba(0, 240, 255, 0.18); border-color: rgba(0, 240, 255, 0.35); }
  50% { box-shadow: 0 0 26px 2px rgba(0, 240, 255, 0.38); border-color: rgba(0, 240, 255, 0.7); }
}

@keyframes heatmapBreatheRed {
  0%, 100% { box-shadow: 0 0 15px -3px rgba(255, 0, 127, 0.18); border-color: rgba(255, 0, 127, 0.35); }
  50% { box-shadow: 0 0 26px 2px rgba(255, 0, 127, 0.38); border-color: rgba(255, 0, 127, 0.7); }
}

/* =====================================================================
   Light Mode Enterprise Theme Engine & High-Contrast Polish
   ===================================================================== */
html.light body {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

/* Sidebar in Light Mode */
html.light aside#sidebar {
  background-color: #FFFFFF !important;
  border-right-color: #E2E8F0 !important;
  box-shadow: 2px 0 8px 0 rgba(15, 23, 42, 0.03) !important;
}

html.light aside#sidebar .text-gray-400 {
  color: #64748B !important;
  font-weight: 600;
}

html.light .nav-link {
  color: #475569 !important;
}

html.light .nav-link:hover {
  color: #0F172A !important;
  background-color: #F1F5F9 !important;
}

html.light .nav-link.active {
  color: #0F172A !important;
  background: linear-gradient(90deg, #E0F2FE 0%, #ECFDF5 100%) !important;
  border-left-color: #0284C7 !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 10px -2px rgba(2, 132, 199, 0.1) !important;
}

/* Top Header in Light Mode */
html.light header {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: #E2E8F0 !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04) !important;
}

/* Real-Time Crypto Ticker Marquee Bar in Light Mode */
html.light .crypto-ticker-bar,
html.light .ticker-wrap,
html.light div.ticker-wrap,
html.light div[class*="ticker-wrap"] {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

html.light .crypto-ticker-bar .text-white,
html.light .ticker-wrap .text-white,
html.light .ticker-move .text-white {
  color: #0F172A !important;
  font-weight: 700 !important;
}

html.light .crypto-ticker-bar .text-bull,
html.light .ticker-wrap .text-bull,
html.light .ticker-move .text-bull {
  color: #047857 !important;
  font-weight: 700 !important;
}

html.light .crypto-ticker-bar .text-bear,
html.light .ticker-wrap .text-bear,
html.light .ticker-move .text-bear {
  color: #DC2626 !important;
  font-weight: 700 !important;
}

html.light .open-search-modal {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #475569 !important;
}

html.light .open-search-modal:hover {
  background-color: #E2E8F0 !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
}

html.light .open-search-modal kbd {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #334155 !important;
}

html.light .sfx-toggle-btn {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #047857 !important;
}

html.light .sfx-toggle-btn:hover {
  background-color: #E2E8F0 !important;
  color: #047857 !important;
}

html.light .theme-toggle-btn {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #475569 !important;
}

html.light .theme-toggle-btn:hover {
  background-color: #E2E8F0 !important;
  color: #0F172A !important;
}

html.light #sidebar-toggle {
  color: #475569 !important;
}

html.light #sidebar-toggle:hover {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}

/* Cards, Glass Panels & Surface Elevation */
html.light .glass-panel {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04) !important;
}

html.light .glass-panel:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04) !important;
}

html.light .glass-panel-glow {
  background: #FFFFFF !important;
  border-color: #BAE6FD !important;
  box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.08) !important;
}

/* Remap Dark Surface Containers to Crisp Light Surfaces */
html.light .bg-\[\#090D18\],
html.light .bg-\[\#070A12\],
html.light .bg-\[\#080C16\],
html.light .bg-\[\#0C101D\],
html.light .bg-\[\#0A0E1A\],
html.light .bg-\[\#050811\] {
  background-color: #FFFFFF !important;
}

html.light .bg-\[\#090D18\]\/80,
html.light .bg-\[\#070A12\]\/90,
html.light .bg-\[\#070A12\]\/80 {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

html.light [class*="bg-gray-950"],
html.light [class*="bg-gray-900"],
html.light [class*="bg-black\/"],
html.light .bg-gray-900,
html.light .bg-gray-950,
html.light .bg-gray-900\/80,
html.light .bg-gray-900\/60,
html.light .bg-gray-900\/90,
html.light .bg-gray-950\/60,
html.light .bg-gray-950\/80,
html.light .bg-gray-950\/90 {
  background-color: #F8FAFC !important;
}

html.light .bg-gray-800,
html.light .bg-gray-800\/60,
html.light .bg-gray-800\/80,
html.light [class*="bg-gray-800"] {
  background-color: #F1F5F9 !important;
}

/* Secondary, Neutral, Preset & Tab Button Overrides in Light Mode */
html.light button.bg-gray-900,
html.light button[class*="bg-gray-900"],
html.light button.bg-gray-800,
html.light button[class*="bg-gray-800"],
html.light button.bg-gray-700,
html.light button[class*="bg-gray-700"],
html.light a.bg-gray-900,
html.light a[class*="bg-gray-900"],
html.light a.bg-gray-800,
html.light a[class*="bg-gray-800"],
html.light a.bg-gray-700,
html.light a[class*="bg-gray-700"] {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #1E293B !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05) !important;
}

html.light button.bg-gray-900 *,
html.light button[class*="bg-gray-900"] *,
html.light button.bg-gray-800 *,
html.light button[class*="bg-gray-800"] *,
html.light button.bg-gray-700 *,
html.light button[class*="bg-gray-700"] *,
html.light a.bg-gray-900 *,
html.light a[class*="bg-gray-900"] *,
html.light a.bg-gray-800 *,
html.light a[class*="bg-gray-800"] *,
html.light a.bg-gray-700 *,
html.light a[class*="bg-gray-700"] * {
  color: #1E293B !important;
}

html.light button.bg-gray-900:hover,
html.light button[class*="bg-gray-900"]:hover,
html.light button.bg-gray-800:hover,
html.light button[class*="bg-gray-800"]:hover,
html.light button.bg-gray-700:hover,
html.light button[class*="bg-gray-700"]:hover,
html.light a.bg-gray-900:hover,
html.light a[class*="bg-gray-900"]:hover,
html.light a.bg-gray-800:hover,
html.light a[class*="bg-gray-800"]:hover,
html.light a.bg-gray-700:hover,
html.light a[class*="bg-gray-700"]:hover {
  background-color: #F1F5F9 !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
}

html.light button.bg-gray-900:hover *,
html.light button[class*="bg-gray-900"]:hover *,
html.light button.bg-gray-800:hover *,
html.light button[class*="bg-gray-800"]:hover *,
html.light a.bg-gray-900:hover *,
html.light a[class*="bg-gray-900"]:hover * {
  color: #0F172A !important;
}

/* Secondary Button Icons */
html.light button.bg-gray-900 svg,
html.light button[class*="bg-gray-900"] svg,
html.light button.bg-gray-800 svg,
html.light button[class*="bg-gray-800"] svg,
html.light a.bg-gray-900 svg,
html.light a[class*="bg-gray-900"] svg,
html.light a.bg-gray-800 svg,
html.light a[class*="bg-gray-800"] svg {
  color: #475569 !important;
  stroke: #475569 !important;
}
html.light button.bg-gray-900:hover svg,
html.light button[class*="bg-gray-900"]:hover svg,
html.light button.bg-gray-800:hover svg,
html.light button[class*="bg-gray-800"]:hover svg,
html.light a.bg-gray-900:hover svg,
html.light a[class*="bg-gray-900"]:hover svg {
  color: #0F172A !important;
  stroke: #0F172A !important;
}

/* Inactive Tab & Segmented Switcher Buttons Across All Desks */
html.light button.text-gray-400,
html.light button.text-gray-500,
html.light a.text-gray-400,
html.light a.text-gray-500,
html.light [class*="text-gray-400"] button,
html.light .inline-flex button,
html.light .bg-gray-900 button,
html.light [class*="bg-gray-900"] button,
html.light .bg-gray-800 button,
html.light [class*="bg-gray-800"] button {
  color: #334155 !important;
  font-weight: 600 !important;
}

html.light button.text-gray-400:hover,
html.light button.text-gray-500:hover,
html.light a.text-gray-400:hover,
html.light a.text-gray-500:hover,
html.light [class*="text-gray-400"] button:hover,
html.light .inline-flex button:hover,
html.light .bg-gray-900 button:hover,
html.light [class*="bg-gray-900"] button:hover,
html.light .bg-gray-800 button:hover,
html.light [class*="bg-gray-800"] button:hover {
  color: #0F172A !important;
}

/* Cancel & Destructive Table Action Buttons */
html.light button[class*="hover:text-rose-400"],
html.light button[class*="hover:bg-rose-500"],
html.light a[class*="hover:text-rose-400"]:not(.logout-btn),
html.light a[class*="hover:bg-rose-500"]:not(.logout-btn) {
  background-color: #FFF1F2 !important;
  border: 1px solid #FECDD3 !important;
  color: #BE123C !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px 0 rgba(225, 29, 72, 0.05) !important;
}
html.light button[class*="hover:text-rose-400"] *,
html.light button[class*="hover:bg-rose-500"] * {
  color: #BE123C !important;
}
html.light button[class*="hover:text-rose-400"]:hover,
html.light button[class*="hover:bg-rose-500"]:hover,
html.light a[class*="hover:text-rose-400"]:not(.logout-btn):hover,
html.light a[class*="hover:bg-rose-500"]:not(.logout-btn):hover {
  background-color: #FFE4E6 !important;
  border-color: #FDA4AF !important;
  color: #9F1239 !important;
}
html.light button[class*="hover:text-rose-400"]:hover *,
html.light button[class*="hover:bg-rose-500"]:hover * {
  color: #9F1239 !important;
}

/* Modal Backdrops & Dialogs in Light Mode */
html.light #sidebar-backdrop,
html.light [id*="backdrop"] {
  background-color: rgba(15, 23, 42, 0.4) !important;
}
html.light #search-modal > div,
html.light [id*="modal"] .glass-panel {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
}

/* Borders in Light Mode */
html.light .border-gray-800,
html.light .border-gray-900,
html.light .border-gray-800\/80,
html.light .border-gray-800\/60,
html.light .border-gray-800\/50,
html.light .border-gray-700,
html.light .border-white\/5,
html.light .border-white\/10 {
  border-color: #E2E8F0 !important;
}

/* Typography & Contrast Overrides */
html.light .text-white {
  color: #0F172A !important;
}

html.light .text-gray-400 {
  color: #475569 !important;
}

html.light .text-gray-500 {
  color: #64748B !important;
}

html.light .text-gray-300 {
  color: #334155 !important;
}

html.light .text-gray-200 {
  color: #1E293B !important;
}

/* High-Contrast Badges & Chips Across All Pages */
html.light .bg-emerald-500\/10,
html.light .bg-emerald-500\/20,
html.light .bg-\[\#00FFA3\]\/20,
html.light .bg-emerald-500\/15 {
  background-color: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #047857 !important;
  font-weight: 600 !important;
}

html.light .bg-cyan-500\/10,
html.light .bg-cyan-500\/20,
html.light .bg-\[\#00E5FF\]\/20,
html.light .bg-cyan-500\/15 {
  background-color: #F0F9FF !important;
  border-color: #BAE6FD !important;
  color: #0369A1 !important;
  font-weight: 600 !important;
}

html.light .bg-rose-500\/10,
html.light .bg-rose-500\/20,
html.light .bg-red-500\/10,
html.light .bg-red-500\/20 {
  background-color: #FFF1F2 !important;
  border-color: #FECDD3 !important;
  color: #BE123C !important;
  font-weight: 600 !important;
}

html.light .bg-amber-500\/10,
html.light .bg-amber-500\/20,
html.light .bg-yellow-500\/10,
html.light .bg-yellow-500\/20 {
  background-color: #FFFBEB !important;
  border-color: #FDE68A !important;
  color: #B45309 !important;
  font-weight: 600 !important;
}

html.light .bg-purple-500\/10,
html.light .bg-purple-500\/20,
html.light .bg-indigo-500\/10,
html.light .bg-indigo-500\/20 {
  background-color: #F5F3FF !important;
  border-color: #DDD6FE !important;
  color: #6D28D9 !important;
  font-weight: 600 !important;
}

html.light .bg-blue-500\/10,
html.light .bg-blue-500\/20 {
  background-color: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #1D4ED8 !important;
  font-weight: 600 !important;
}

/* Pulsing Status Dots in Light Mode */
html.light .bg-emerald-400 {
  background-color: #059669 !important;
}

html.light .bg-cyan-400 {
  background-color: #0284C7 !important;
}

html.light .bg-rose-400 {
  background-color: #E11D48 !important;
}

/* Semantic Colored Text in Light Mode (WCAG Compliant Contrast) */
html.light .text-emerald-400,
html.light .text-emerald-300,
html.light .text-\[\#00FFA3\] {
  color: #047857 !important;
}

html.light .text-cyan-400,
html.light .text-cyan-300,
html.light .text-\[\#00E5FF\] {
  color: #0284C7 !important;
}

html.light .text-rose-400,
html.light .text-rose-300,
html.light .text-red-400 {
  color: #BE123C !important;
}

html.light .text-yellow-400,
html.light .text-yellow-300,
html.light .text-amber-400,
html.light .text-amber-300,
html.light .text-\[\#FF9500\] {
  color: #B45309 !important;
}

html.light .text-purple-400,
html.light .text-purple-300,
html.light .text-indigo-400 {
  color: #6D28D9 !important;
}

html.light .text-blue-400,
html.light .text-blue-300 {
  color: #1D4ED8 !important;
}

html.light .text-bull {
  color: #047857 !important;
}

html.light .text-bear {
  color: #BE123C !important;
}

/* Preserve Crisp White Text on ALL SOLID Filled Buttons & CTAs (Excluding Opacity Modifier Badges /10, /20, /30) */
html.light button.btn-primary,
html.light button.btn-primary *,
html.light a.btn-primary,
html.light a.btn-primary *,
html.light .btn-matrix,
html.light .btn-matrix *,
html.light button.bg-emerald-500,
html.light button.bg-emerald-500 *,
html.light button.bg-emerald-600,
html.light button.bg-emerald-600 *,
html.light button.bg-cyan-500,
html.light button.bg-cyan-500 *,
html.light button.bg-cyan-600,
html.light button.bg-cyan-600 *,
html.light button.bg-rose-500,
html.light button.bg-rose-500 *,
html.light button.bg-rose-600,
html.light button.bg-rose-600 *,
html.light button.bg-blue-600,
html.light button.bg-blue-600 *,
html.light button.bg-blue-500,
html.light button.bg-blue-500 *,
html.light button.bg-purple-600,
html.light button.bg-purple-600 *,
html.light button.bg-purple-500,
html.light button.bg-purple-500 *,
html.light button.bg-amber-600,
html.light button.bg-amber-600 *,
html.light button.bg-amber-500,
html.light button.bg-amber-500 *,
html.light button.bg-orange-600,
html.light button.bg-orange-600 *,
html.light button.bg-orange-500,
html.light button.bg-orange-500 *,
html.light button.bg-red-600,
html.light button.bg-red-600 *,
html.light button.bg-red-500,
html.light button.bg-red-500 *,
html.light button.bg-indigo-600,
html.light button.bg-indigo-600 *,
html.light a.bg-emerald-500,
html.light a.bg-emerald-500 *,
html.light a.bg-emerald-600,
html.light a.bg-emerald-600 *,
html.light a.bg-cyan-500,
html.light a.bg-cyan-500 *,
html.light a.bg-cyan-600,
html.light a.bg-cyan-600 *,
html.light a.bg-rose-500,
html.light a.bg-rose-500 *,
html.light a.bg-rose-600,
html.light a.bg-rose-600 *,
html.light a.bg-blue-600,
html.light a.bg-blue-600 *,
html.light a.bg-purple-600,
html.light a.bg-purple-600 *,
html.light a.bg-amber-600,
html.light a.bg-amber-600 *,
html.light .btn-buy,
html.light .btn-buy *,
html.light .btn-sell,
html.light .btn-sell *,
html.light .btn-execute-order,
html.light .btn-execute-order *,
html.light #btn-open-create-api,
html.light #btn-open-create-api *,
html.light #btn-save-preferences,
html.light #btn-save-preferences *,
html.light a[href*="security-kyc"].bg-cyan-500,
html.light a[href*="security-kyc"].bg-cyan-500 *,
html.light a[class*="bg-gradient-to-r"].text-white,
html.light a[class*="bg-gradient-to-r"].text-white *,
html.light button[class*="bg-gradient-to-r"].text-white,
html.light button[class*="bg-gradient-to-r"].text-white * {
  color: #FFFFFF !important;
}

html.light button.bg-emerald-500 svg,
html.light button.bg-emerald-600 svg,
html.light button.bg-cyan-500 svg,
html.light button.bg-cyan-600 svg,
html.light button.bg-rose-500 svg,
html.light button.bg-rose-600 svg,
html.light button.bg-blue-600 svg,
html.light button.bg-purple-600 svg,
html.light button.bg-amber-600 svg,
html.light button.bg-amber-500 svg,
html.light a.bg-cyan-500 svg,
html.light a.bg-emerald-500 svg,
html.light a[class*="bg-gradient-to-r"].text-white svg,
html.light button[class*="bg-gradient-to-r"].text-white svg,
html.light #btn-open-create-api svg,
html.light #btn-save-preferences svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Ensure Hotkey Badges & nested key elements inside Solid Buttons stay high-contrast */
html.light .btn-execute-order [class*="bg-black"],
html.light .btn-buy [class*="bg-black"],
html.light .btn-sell [class*="bg-black"] {
  background-color: rgba(0, 0, 0, 0.35) !important;
  color: #FFFFFF !important;
}

html.light .btn-execute-order svg,
html.light .btn-buy svg,
html.light .btn-sell svg {
  color: #FFFFFF !important;
}

html.light .btn-buy {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px 0 rgba(2, 132, 199, 0.3) !important;
  border-color: #0284C7 !important;
}

html.light .btn-buy * {
  color: #FFFFFF !important;
}

html.light .btn-sell {
  background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px 0 rgba(225, 29, 72, 0.3) !important;
  border-color: #BE123C !important;
}

html.light .btn-sell * {
  color: #FFFFFF !important;
}

html.light .btn-connect-wallet.text-white,
html.light .btn-connect-wallet.text-white * {
  color: #FFFFFF !important;
}

html.light .btn-connect-wallet.text-black,
html.light .btn-connect-wallet.text-black * {
  color: #0F172A !important;
  font-weight: 800 !important;
}

/* Form Inputs, Selects & Textareas */
html.light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.light select,
html.light textarea {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: #0284C7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
  outline: none !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #94A3B8 !important;
}

/* Tables & Orderbook Ledgers */
html.light thead,
html.light th {
  background-color: #F8FAFC !important;
  color: #475569 !important;
  border-color: #E2E8F0 !important;
  font-weight: 600;
}

html.light tbody tr {
  border-color: #F1F5F9 !important;
}

html.light tbody tr:hover {
  background-color: #F8FAFC !important;
}

html.light td {
  border-color: #F1F5F9 !important;
}

html.light .orderbook-ask {
  background-color: rgba(244, 63, 94, 0.04) !important;
}

html.light .orderbook-bid {
  background-color: rgba(16, 185, 129, 0.04) !important;
}

html.light .orderbook-size {
  color: #334155 !important;
}

/* Heatmap Tiles in Light Mode */
html.light .tile-breathe-green,
html.light [class*="from-emerald-950"] {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%) !important;
  border-color: #10B981 !important;
}

html.light .tile-breathe-red,
html.light [class*="from-rose-950"],
html.light [class*="from-red-950"] {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%) !important;
  border-color: #F43F5E !important;
}

html.light [class*="from-emerald-950"] .text-white,
html.light [class*="from-rose-950"] .text-white {
  color: #0F172A !important;
}

html.light [class*="from-emerald-950"] .text-emerald-300,
html.light [class*="from-emerald-950"] .text-emerald-400 {
  color: #047857 !important;
}

/* ApexCharts SVG Styling Guarantees */
html.light .apexcharts-datalabel-label {
  fill: #475569 !important;
  font-weight: 600 !important;
}

html.light .apexcharts-datalabel-value {
  fill: #0F172A !important;
  font-weight: 700 !important;
}

html.light .apexcharts-text tspan {
  fill: #0F172A !important;
}

html.light .apexcharts-xaxis-label,
html.light .apexcharts-yaxis-label {
  fill: #64748B !important;
}

html.light .apexcharts-gridline {
  stroke: #E2E8F0 !important;
}

html.light .apexcharts-pie-area {
  stroke: #FFFFFF !important;
}

/* Ambient Cyber Mesh in Light Mode */
html.light .mesh-glow-1,
html.light .mesh-glow-2,
html.light .mesh-glow-3 {
  opacity: 0.28;
}

html.light .trading-mesh-bg {
  opacity: 1 !important;
}

/* =====================================================================
   Auth Terminal (Login & Register) Polish in Light Mode
   ===================================================================== */
html.light .bg-\[\#04060A\],
html.light body.bg-\[\#04060A\],
html.light .bg-\[\#070B16\]\/90,
html.light .bg-\[\#080D1C\]\/95,
html.light .bg-\[\#090E1D\],
html.light .bg-\[\#050811\] {
  background-color: #FFFFFF !important;
}

/* Hide CRT scanlines and soften canvas in light mode */
html.light .terminal-hud-scanlines {
  display: none !important;
}

html.light #quantum-matrix-canvas {
  opacity: 0.85 !important;
}

/* Auth Cards in Login and Register */
html.light .lg\:col-span-7,
html.light .lg\:col-span-5 {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04) !important;
}

/* Header & Footer on Auth Pages */
html.light header.bg-\[\#060913\]\/90,
html.light footer.bg-\[\#060913\]\/90 {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #E2E8F0 !important;
}

/* Persona Selector Cards in Login (Light Mode) */
html.light .persona-select-card {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  box-shadow: none !important;
}

html.light .persona-select-card:hover {
  border-color: #CBD5E1 !important;
}

html.light .persona-select-card.active-hft {
  background-color: #ECFDF5 !important;
  border-color: #10B981 !important;
  box-shadow: 0 0 0 1px #10B981 !important;
}

html.light .persona-select-card.active-whale {
  background-color: #FAF5FF !important;
  border-color: #A855F7 !important;
  box-shadow: 0 0 0 1px #A855F7 !important;
}

html.light .persona-select-card.active-defi {
  background-color: #F0FDFA !important;
  border-color: #06B6D4 !important;
  box-shadow: 0 0 0 1px #06B6D4 !important;
}

/* Persona Badge in Login (Light Mode) */
html.light #active-persona-badge.badge-hft {
  background-color: #ECFDF5 !important;
  color: #047857 !important;
  border-color: #6EE7B7 !important;
}

html.light #active-persona-badge.badge-whale {
  background-color: #FAF5FF !important;
  color: #7E22CE !important;
  border-color: #D8B4FE !important;
}

html.light #active-persona-badge.badge-defi {
  background-color: #F0FDFA !important;
  color: #0E7490 !important;
  border-color: #67E8F9 !important;
}

/* Sub-containers & Telemetry HUD */
html.light .bg-\[\#090E1D\],
html.light .bg-\[\#050811\] {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

/* Web3 1-Click Fast Track on Register Page */
html.light .btn-connect-wallet.bg-gradient-to-r,
html.light [class*="from-cyan-950"] {
  background: linear-gradient(90deg, #0284C7 0%, #2563EB 50%, #7C3AED 100%) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}

html.light .btn-connect-wallet.bg-gradient-to-r *,
html.light [class*="from-cyan-950"] * {
  color: #FFFFFF !important;
}

/* Quick Action Buttons (Web3 Wallet & YubiKey/Bio) */
html.light button.btn-connect-wallet.bg-gray-900,
html.light button.btn-connect-wallet.bg-gray-900 *,
html.light button#btn-biometric-auth,
html.light button#btn-biometric-auth * {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

html.light button.btn-connect-wallet.bg-gray-900:hover,
html.light button#btn-biometric-auth:hover {
  background-color: #E2E8F0 !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
}

html.light button.btn-connect-wallet.bg-gray-900 [data-lucide],
html.light button.btn-connect-wallet.bg-gray-900 svg {
  color: #0284C7 !important;
}

html.light button#btn-biometric-auth [data-lucide],
html.light button#btn-biometric-auth svg {
  color: #059669 !important;
}

/* Logout Button in Sidebar */
html.light .logout-btn {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #64748B !important;
}

html.light .logout-btn:hover {
  background-color: #FFF1F2 !important;
  border-color: #FECDD3 !important;
  color: #BE123C !important;
}

/* Input Fields on Auth Pages */
html.light #login-email-input,
html.light #login-password-input,
html.light #reg-password,
html.light input[placeholder="QuantumWhale"],
html.light input[placeholder="desk@quantumfirm.io"] {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

html.light form input:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
}

/* Form Submit Buttons */
html.light button[type="submit"].bg-gradient-to-r,
html.light button[type="submit"] {
  box-shadow: 0 4px 15px 0 rgba(16, 185, 129, 0.3) !important;
}

html.light button[type="submit"].bg-gradient-to-r *,
html.light button[type="submit"] * {
  color: #0F172A !important;
  font-weight: 800 !important;
}