/* ==========================================================================
   WALLEXO COSMIC GOLD 3D FINTECH THEME — ULTRA-HIGH CONTRAST EDITION
   ========================================================================== */

/* 1. Global Color Variables */
:root {
  --w-cosmic-bg:      #06080E;
  --w-cosmic-canvas:  #080C14;
  --w-card-bg:        #101522;
  --w-card-surface:   #141C2E;
  --w-gold-primary:   #DFBA73;
  --w-gold-light:     #F6E3B4;
  --w-gold-shimmer:   #FFF4D6;
  --w-gold-deep:      #A67C2E;
  --w-emerald:        #10B981;
  --w-border-gold:    rgba(223, 186, 115, 0.35);
  --w-border-top:     rgba(246, 227, 180, 0.55);

  /* Tailwind CSS variable overrides for instant theme cascading */
  --color-slate-950: #06080E;
  --color-slate-900: #FFFFFF;
  --color-slate-850: #FFFFFF;
  --color-slate-800: #FFFFFF;
  --color-slate-700: #F1F5F9;
  --color-slate-600: #E2E8F0;
  --color-slate-500: #CBD5E1;
  --color-slate-400: #CBD5E1;
  --color-slate-300: #94A3B8;
  --color-slate-200: #475569;
  --color-slate-100: rgba(223, 186, 115, 0.25);
  --color-slate-50:  rgba(223, 186, 115, 0.12);

  --color-gray-950:  #06080E;
  --color-gray-900:  #FFFFFF;
  --color-gray-850:  #FFFFFF;
  --color-gray-800:  #FFFFFF;
  --color-gray-700:  #F1F5F9;
  --color-gray-600:  #E2E8F0;
  --color-gray-500:  #CBD5E1;
  --color-gray-400:  #CBD5E1;
  --color-gray-300:  #94A3B8;
  --color-gray-200:  #475569;
  --color-gray-100:  rgba(223, 186, 115, 0.25);
  --color-gray-50:   rgba(223, 186, 115, 0.12);

  --color-blue-600:  #DFBA73;
  --color-blue-500:  #F3DA9C;
  --color-blue-400:  #F8E6B8;
  --color-blue-100:  rgba(223, 186, 115, 0.35);
  --color-blue-50:   rgba(223, 186, 115, 0.15);
}

/* 2. Base Canvas & Ambient Starfield */
html, body, #root {
  background-color: #06080E !important;
  color: #FFFFFF !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

@media (width <= 500px) {
  body {
    background: #06080E !important;
  }
}

.phone-frame {
  background-color: #06080E !important;
  position: relative;
  overflow: hidden;
}

/* Ambient Floating Cosmic Starfield Motion */
.phone-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: 
    radial-gradient(1.5px 1.5px at 25px 35px, #FFFFFF, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 90px 140px, rgba(223, 186, 115, 0.95), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 170px 240px, #FFFFFF, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 260px 85px, rgba(246, 227, 180, 0.9), rgba(0,0,0,0)),
    radial-gradient(2.5px 2.5px at 330px 320px, rgba(223, 186, 115, 0.95), rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 45px 440px, #FFFFFF, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 220px 560px, rgba(246, 227, 180, 0.9), rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 315px 700px, #FFFFFF, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 135px 780px, rgba(223, 186, 115, 0.95), rgba(0,0,0,0)),
    radial-gradient(circle at 18% 22%, rgba(223, 186, 115, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 82% 60%, rgba(37, 99, 235, 0.1) 0%, transparent 48%),
    radial-gradient(circle at 50% 88%, rgba(16, 185, 129, 0.08) 0%, transparent 44%);
  background-size: 360px 420px, 360px 420px, 360px 420px, 360px 420px, 360px 420px, 360px 420px, 360px 420px, 360px 420px, 360px 420px, 100% 100%, 100% 100%, 100% 100%;
  animation: wallexo-stars-twinkle 7s ease-in-out infinite alternate;
}

@keyframes wallexo-stars-twinkle {
  0% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.02); }
  100% { opacity: 0.75; transform: scale(1); }
}

.phone-frame > div, .scroll-area {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* 3. Universal High-Contrast Typography */
h1, h2, h3, h4, h5, h6,
.text-slate-900,
.text-slate-850,
.text-slate-800,
.text-gray-900,
.text-gray-800,
.text-gray-700,
[class*="374151"] {
  color: #FFFFFF !important;
}

/* High-Contrast Subtitles & Secondary Labels */
.text-slate-400,
.text-slate-500,
.text-gray-400,
.text-gray-500,
label,
span.text-slate-400,
div.text-slate-400,
span.text-gray-400,
div.text-gray-400 {
  color: #CBD5E1 !important;
  font-weight: 700 !important;
}

/* Financial Highlights & Accent Numbers */
.text-blue-600,
.text-amber-500,
[class*="b45309"] {
  color: #F5DA94 !important;
  font-weight: 900 !important;
}

/* Profit Green */
.text-emerald-500,
.text-emerald-600,
.text-green-500,
.text-green-600,
[class*="text-emerald"] {
  color: #10B981 !important;
  font-weight: 900 !important;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.45) !important;
}

/* 4. 3D Floating Surface Cards */
.bg-white,
.card-shadow,
div[class*="rounded-3xl"]:not(.wallexo-splash-screen),
div[class*="rounded-2xl"]:not(.wallexo-splash-screen) {
  background: linear-gradient(160deg, #141C2E 0%, #0D1322 100%) !important;
  border: 1.5px solid rgba(223, 186, 115, 0.3) !important;
  border-top: 1.5px solid rgba(246, 227, 180, 0.5) !important;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Inner borders between card rows */
.border-gray-100, .border-gray-50, .border-slate-100, .border-slate-50, .border-slate-200 {
  border-color: rgba(223, 186, 115, 0.22) !important;
}

/* Top Promo Banner on Home */
div[class*="bg-gradient-to-"] {
  background: linear-gradient(145deg, #182236 0%, #0F1626 60%, #090D17 100%) !important;
  border: 1.5px solid rgba(223, 186, 115, 0.35) !important;
  border-top: 1.5px solid rgba(246, 227, 180, 0.55) !important;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.85), 0 0 24px -6px rgba(223, 186, 115, 0.2) !important;
}

div[class*="bg-gradient-to-"] p,
div[class*="bg-gradient-to-"] div {
  color: #E2E8F0 !important;
  font-weight: 600 !important;
}

/* "JOIN NOW & EARN" pill */
span:contains("JOIN NOW"),
div:has-text("JOIN NOW"),
div[class*="rounded-3xl"] div[class*="text-amber"],
div[class*="rounded-3xl"] div[class*="bg-gradient"] {
  background: linear-gradient(135deg, #DFBA73 0%, #B88937 100%) !important;
  color: #070A10 !important;
  font-weight: 900 !important;
}

/* 5. 4 Quick Activity Tiles (Home) */
.grid-cols-4 > div {
  background: linear-gradient(155deg, #151D2E 0%, #0F1626 100%) !important;
  border: 1.5px solid rgba(223, 186, 115, 0.3) !important;
  border-top: 1.5px solid rgba(246, 227, 180, 0.45) !important;
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.8) !important;
  border-radius: 1.15rem !important;
}

.grid-cols-4 > div span {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 10.5px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* 6. P2P Order Book Cards (/buy) — High-Contrast Buying Orders */
span.text-xl.font-black.text-slate-900 {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 26px !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
}

/* Bank Tag on product cards */
span.bg-blue-50.text-blue-600.border.border-blue-100 {
  background: #182236 !important;
  border: 1.5px solid #DFBA73 !important;
  color: #F5DA94 !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

/* 10%+8 Reward Tag */
div.flex.items-center.gap-1\.5.mt-1 span.bg-blue-50 {
  background: rgba(16, 185, 129, 0.25) !important;
  border: 1.5px solid #10B981 !important;
  color: #34D399 !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

/* Quota Value (+3886.6) */
div.text-sm.font-black.text-slate-800 {
  color: #10B981 !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.45) !important;
}

/* Income Value (₹360.6) */
span.text-sm.font-black.text-blue-600 {
  color: #F5DA94 !important;
  font-weight: 900 !important;
  font-size: 16px !important;
}

/* 7. 3D Floating Designer Buttons */
button[type="submit"], 
button.bg-blue-600, 
button.btn-primary {
  background: linear-gradient(135deg, #FFF0CC 0%, #E5BE72 35%, #C2953E 72%, #8F661B 100%) !important;
  color: #070A10 !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  border-radius: 0.9rem !important;
  border: none !important;
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -2px 0 rgba(0, 0, 0, 0.3) inset,
    0 8px 24px -2px rgba(223, 186, 115, 0.6),
    0 3px 8px rgba(0, 0, 0, 0.8) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* P2P "Buy" Button on product cards */
button.rounded-full.bg-blue-600,
div.bg-white button,
div[class*="rounded-3xl"] button.bg-blue-600 {
  background: linear-gradient(135deg, #FFF0CC 0%, #E5BE72 35%, #C2953E 72%, #8F661B 100%) !important;
  color: #070A10 !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  padding: 8px 24px !important;
  border: none !important;
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -2px 0 rgba(0, 0, 0, 0.3) inset,
    0 6px 18px -2px rgba(223, 186, 115, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.8) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Filter Pills (/buy) */
.overflow-x-auto button.bg-blue-600 {
  background: linear-gradient(135deg, #FFF0CC 0%, #E5BE72 40%, #C2953E 80%, #946E20 100%) !important;
  color: #070A10 !important;
  font-weight: 900 !important;
  border: 1px solid #FFF5D6 !important;
  box-shadow: 0 0 16px rgba(223, 186, 115, 0.6), 0 4px 10px rgba(0, 0, 0, 0.7) !important;
}

.overflow-x-auto button.bg-white,
.overflow-x-auto button:not(.bg-blue-600) {
  background: linear-gradient(180deg, #151D2C 0%, #0E1420 100%) !important;
  color: #E2E8F0 !important;
  font-weight: 700 !important;
  border: 1.5px solid rgba(223, 186, 115, 0.3) !important;
  border-top: 1.5px solid rgba(246, 227, 180, 0.45) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}

/* History buttons ("INR History", "USDT History") */
button.rounded-full.border-slate-300,
button[class*="border-slate-300"] {
  background: linear-gradient(180deg, #182234 0%, #101826 100%) !important;
  border: 1.5px solid rgba(223, 186, 115, 0.35) !important;
  border-top: 1.5px solid rgba(246, 227, 180, 0.5) !important;
  color: #F5DA94 !important;
  font-weight: 900 !important;
  font-size: 12px !important;
}

/* Top Currency Tabs */
span.text-base.font-extrabold.text-blue-600 {
  color: #F5DA94 !important;
  text-shadow: 0 0 14px rgba(223, 186, 115, 0.6) !important;
}

span.text-base.font-extrabold.text-slate-800 {
  color: #94A3B8 !important;
}

div.h-1.bg-blue-600.rounded-full {
  background: #DFBA73 !important;
  box-shadow: 0 0 10px rgba(223, 186, 115, 0.8) !important;
}

/* Example Calculation Box on Home */
div[class*="bg-amber-500"] {
  background: #090E1A !important;
  border: 1.5px solid rgba(223, 186, 115, 0.35) !important;
  border-radius: 14px !important;
}

div[class*="bg-amber-500"] div {
  color: #F1F5F9 !important;
  font-weight: 700 !important;
}

div[class*="bg-amber-500"] span {
  color: #F5DA94 !important;
  font-weight: 900 !important;
}

/* 8. Profile Page (/my) Action Circles & Lists */
.gradient-brand {
  background: linear-gradient(150deg, #151E30 0%, #0C121E 100%) !important;
  border-bottom: 1px solid rgba(223, 186, 115, 0.3) !important;
}

/* Section titles ("Statistics", "History", "Setting") */
span.font-bold.text-slate-800.text-sm,
span.font-semibold.text-gray-800 {
  color: #F5DA94 !important;
  font-weight: 900 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* History row titles */
span.text-sm.text-gray-700 {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.grid-cols-4 .rounded-full.bg-blue-50,
.grid-cols-4 .rounded-full.bg-green-50,
.grid-cols-4 .rounded-full.bg-amber-50,
.grid-cols-4 .rounded-full.bg-purple-50 {
  background: linear-gradient(135deg, #1A2438 0%, #101726 100%) !important;
  border: 1.5px solid rgba(223, 186, 115, 0.35) !important;
  border-top: 1.5px solid rgba(246, 227, 180, 0.45) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

.grid-cols-4 .rounded-full i {
  color: #F5DA94 !important;
}

/* History Row Icons & Chevrons */
.rounded-lg.bg-blue-50,
.rounded-lg.bg-green-50,
.rounded-lg.bg-orange-50 {
  background: linear-gradient(135deg, #1A2438 0%, #101726 100%) !important;
  border: 1px solid rgba(223, 186, 115, 0.35) !important;
}

.rounded-lg i {
  color: #F5DA94 !important;
}

i.fa-chevron-right {
  color: #DFBA73 !important;
}

/* 9. PERFECTLY CENTERED BOTTOM NAVIGATION BAR & BANK BUTTON */
.nav-bar {
  background: linear-gradient(180deg, #0D1322 0%, #060911 100%) !important;
  border-top: 1px solid rgba(223, 186, 115, 0.3) !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.85) !important;
  height: 66px !important;
  backdrop-filter: blur(18px) !important;
  position: relative !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
}

.nav-item {
  color: #8E9BAE !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.nav-item i, .nav-item svg {
  color: #8E9BAE !important;
}

.nav-item.active {
  color: #F5DA94 !important;
  font-weight: 900 !important;
  text-shadow: 0 0 10px rgba(223, 186, 115, 0.6) !important;
}

.nav-item.active i, .nav-item.active svg {
  color: #F5DA94 !important;
  filter: drop-shadow(0 0 6px rgba(223, 186, 115, 0.8)) !important;
  transform: scale(1.08) !important;
}

/* Perfectly Centered 3D Floating Bank Orb */
.nav-item.upi-fab {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  height: 100% !important;
  padding-bottom: 8px !important;
}

.upi-circle {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #FFF0CC 0%, #E5BE72 35%, #C2953E 75%, #8F661B 100%) !important;
  border: 2px solid #FFF5D6 !important;
  box-shadow: 0 1px 0 #FFFFFF inset, 0 6px 20px rgba(223, 186, 115, 0.75), 0 3px 8px rgba(0, 0, 0, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: -18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

.nav-item.upi-fab.active .upi-circle {
  transform: translateX(-50%) scale(1.05) !important;
  box-shadow: 0 1px 0 #FFFFFF inset, 0 8px 24px rgba(223, 186, 115, 0.9), 0 4px 10px rgba(0, 0, 0, 0.9) !important;
}

.upi-circle i {
  color: #070A10 !important;
  font-weight: 900 !important;
  font-size: 19px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.nav-item.upi-fab span {
  color: #F5DA94 !important;
  font-weight: 800 !important;
  font-size: 10.5px !important;
  margin-top: 30px !important;
  display: block !important;
}

/* 10. Form Inputs & Modals */
input, select, textarea, .input-field {
  background-color: #0A0E18 !important;
  border: 1.5px solid rgba(223, 186, 115, 0.3) !important;
  color: #FFFFFF !important;
  border-radius: 0.85rem !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) inset !important;
}

input:focus, select:focus, textarea:focus, .input-field:focus {
  border-color: #DFBA73 !important;
  box-shadow: 0 0 0 3px rgba(223, 186, 115, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5) inset !important;
  outline: none !important;
}

input::placeholder {
  color: #64748B !important;
}

.modal-overlay {
  background: rgba(4, 6, 11, 0.9) !important;
  backdrop-filter: blur(14px) !important;
}


/* ==========================================================================
   WALLEXO CINEMATIC 3D FULL-SCREEN SPLASH ANIMATION (PRESERVED)
   ========================================================================== */

.wallexo-splash-screen {
  background: #05070B !important;
  z-index: 99999;
}

.wallexo-space-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, #141B2D 0%, #0A0E17 50%, #05070B 100%);
  pointer-events: none;
}

.wallexo-nebula-glow {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(223, 186, 115, 0.25) 0%, rgba(184, 137, 55, 0.08) 50%, transparent 70%);
  filter: blur(40px);
  animation: wallexo-nebula-pulse 4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes wallexo-nebula-pulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.wallexo-splash-center {
  z-index: 10;
  animation: wallexo-levitate 3.2s ease-in-out infinite;
}

@keyframes wallexo-levitate {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-10px) scale(1.02); }
}

.wallexo-logo-wrapper {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.wallexo-3d-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 28%;
  box-shadow: 
    0 20px 50px -10px rgba(0, 0, 0, 0.9),
    0 0 40px 4px rgba(223, 186, 115, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
  animation: wallexo-logo-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes wallexo-logo-reveal {
  0% { opacity: 0; transform: scale(0.7) rotate(-4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.wallexo-orbit-container {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 120px;
  pointer-events: none;
  perspective: 800px;
  z-index: 15;
}

.wallexo-orbit-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(223, 186, 115, 0.5);
  box-shadow: 
    0 0 16px rgba(223, 186, 115, 0.4),
    inset 0 0 16px rgba(223, 186, 115, 0.3);
  transform: rotateX(68deg) rotateY(-18deg);
  position: relative;
  animation: wallexo-orbit-spin 3s linear infinite;
}

@keyframes wallexo-orbit-spin {
  0% { transform: rotateX(68deg) rotateY(-18deg) rotateZ(0deg); }
  100% { transform: rotateX(68deg) rotateY(-18deg) rotateZ(360deg); }
}

.wallexo-orbit-star {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #FFF9EB;
  border-radius: 50%;
  box-shadow: 
    0 0 20px 6px #FFF9EB,
    0 0 45px 14px rgba(223, 186, 115, 0.9),
    0 0 80px 24px rgba(246, 227, 180, 0.7);
  animation: wallexo-star-flicker 1.5s ease-in-out infinite alternate;
}

@keyframes wallexo-star-flicker {
  0% { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 1; }
}

.wallexo-brand-title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-top: 24px;
  background: linear-gradient(90deg, #DFBA73 0%, #FFF4D6 40%, #DFBA73 70%, #A67C2E 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wallexo-gold-shimmer 2.8s linear infinite;
  text-shadow: 0 4px 20px rgba(223, 186, 115, 0.3);
}

@keyframes wallexo-gold-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.wallexo-brand-subtitle {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: #94A3B8;
  margin-top: 6px;
  opacity: 0.85;
}

.wallexo-loader-footer {
  z-index: 20;
}

.wallexo-progress-bar {
  width: 100%;
  height: 3.5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
}

.wallexo-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #A67C2E 0%, #DFBA73 60%, #FFF9EB 100%);
  border-radius: 999px;
  box-shadow: 0 0 14px 2px rgba(223, 186, 115, 0.8);
  animation: wallexo-loading-progress 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes wallexo-loading-progress {
  0% { width: 0%; }
  35% { width: 45%; }
  70% { width: 85%; }
  100% { width: 100%; }
}

.wallexo-status-text {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #DFBA73;
  opacity: 0.8;
  animation: wallexo-status-blink 1.4s ease-in-out infinite alternate;
}

@keyframes wallexo-status-blink {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

.wallexo-horizon-light {
  position: absolute;
  bottom: -90px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(223, 186, 115, 0.35) 0%, rgba(184, 137, 55, 0.12) 50%, transparent 75%);
  filter: blur(25px);
  pointer-events: none;
  z-index: 5;
}