/* ---------------- BASE & ANIMATIONS ---------------- */
:root { --void: #090a0f; --ink-1: #11131a; }
body {
  background: linear-gradient(180deg, var(--void) 0%, var(--ink-1) 100%);
  color: white;
  font-family: ui-sans-serif, system-ui, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
}

#smoke-canvas { 
  position: fixed; inset: 0; z-index: 1; pointer-events: none; filter: blur(60px); opacity: 0.15; 
  /* बस ये 2 नई लाइनें जोड़ दें (GPU को काम देने के लिए) */
  transform: translateZ(0);
  will-change: filter, transform;
}

#root { position: relative; z-index: 10; }

.profit-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 999px; background: #3a3f4d; outline: none; transition: background 0.2s;
}
.profit-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  border-radius: 50%; background: #0066FF; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,102,255,0.5), 0 0 0 4px rgba(0,102,255,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spinners { -moz-appearance: textfield; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }

/* ---------------- NEW FEATURE STYLES (COMPOUNDING LOCK) ---------------- */
.compounding-locked {
    filter: brightness(0.4) blur(1px);
    opacity: 0.6;
    pointer-events: none;
    transition: all 0.4s ease-in-out;
}

/* ---------------- LOGIN SPECIFIC STYLES ---------------- */
.login-wrapper {
  position: relative; width: 100vw; height: 100vh; overflow: hidden; display: flex; 
  align-items: center; justify-content: center; 
  background: linear-gradient(135deg, #0a0f1e 0%, #111827 40%, #0d1525 100%);
}
#particles-background, #particles-foreground {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
#particles-background { z-index: 0; }
#particles-foreground { z-index: 1; }
#trading-chart-login {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none;
}

.login-content {
  position: relative; z-index: 10; width: 100%; max-width: 440px; 
  padding: 40px 20px; display: flex; flex-direction: column; align-items: center;
}
.login-logo {
  height: 96px; margin-bottom: 16px; object-fit: contain; 
  filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0,0,0,0.3)); opacity: 0.68;
}
.login-brand-name {
  color: #ffffff; font-size: 18px; font-weight: 700; text-transform: uppercase; 
  letter-spacing: 0.35em; margin-bottom: 40px; white-space: nowrap; text-align: center;
}

.login-card {
  width: 100%; border-radius: 16px; padding: 28px 28px 32px; 
  background: rgba(15, 20, 35, 0.75); backdrop-filter: blur(24px); 
  -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.08); 
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  /* बस ये 2 नई लाइनें जोड़ दें (टाइपिंग लैग खत्म करने के लिए) */
  transform: translateZ(0);
  will-change: backdrop-filter, transform;
}

.spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); 
  border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes popInCenter { 
  0% { transform: scale(0.9); opacity: 0; } 
  100% { transform: scale(1); opacity: 1; } 
}
.popup-anim-center { 
  animation: popInCenter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
}

@keyframes popInStandard { 
  0% { transform: scale(0.9); opacity: 0; } 
  100% { transform: scale(1); opacity: 1; } 
}
.popup-anim { animation: popInStandard 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }