/* ── Login page specific styles ─────────────────────────── */

/* Floating particles on background */
#bgGradient::before, #bgGradient::after {
  content: ''; position: absolute; border-radius: 50%; opacity: 0.07; filter: blur(40px);
}
#bgGradient::before {
  width: 300px; height: 300px; background: var(--particle-1); top: 10%; left: -5%;
  animation: float1 15s ease-in-out infinite alternate;
}
#bgGradient::after {
  width: 250px; height: 250px; background: var(--particle-2); bottom: 10%; right: -5%;
  animation: float2 18s ease-in-out infinite alternate;
}
@keyframes float1 { 0% { transform: translate(0,0); } 100% { transform: translate(40px,30px); } }
@keyframes float2 { 0% { transform: translate(0,0); } 100% { transform: translate(-30px,-40px); } }

/* Glass login card */
.login-card {
  background: var(--glass-bg-light);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--glass-border-light);
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px var(--glass-border);
}

/* Glass password input */
#password {
  background: var(--glass-bg-light) !important;
  border: 1px solid var(--glass-border) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#password:focus {
  border-color: var(--accent-1) !important;
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 20px var(--accent-glow) !important;
  outline: none;
}

/* Gradient submit button */
#submitBtn {
  background: var(--accent-gradient) !important;
  box-shadow: 0 2px 10px var(--accent-shadow);
  transition: box-shadow 0.3s ease, transform 0.15s ease;
}
#submitBtn:hover:not(:disabled) { box-shadow: 0 4px 20px var(--accent-glow-strong); }
#submitBtn:active:not(:disabled) { transform: scale(0.97); }

/* Password toggle */
#togglePw { transition: color 0.2s ease; }