/* ===== Login Animations ===== */
@keyframes login-glow {
  0%, 100% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 110% 110%;
  }
}

/* ===== Login Page ===== */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 56px);
  padding: 3rem 1rem 2rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(var(--neon-purple-rgb), 0.08) 0%, transparent 70%),
    linear-gradient(rgba(var(--bg-base-rgb), 0.8), rgba(var(--bg-base-rgb), 0.9)),
    url('/images/login-bg.png') center/cover no-repeat;
  animation: login-glow 10s ease-in-out infinite;
}

#main-content {
  scroll-margin-top: 72px;
}

.login-card {
  background: var(--bg-surface);
  border: 1px solid rgba(var(--neon-purple-rgb), 0.2);
  border-radius: 10px;
  padding: 2rem 2.25rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 0 30px rgba(var(--neon-purple-rgb), 0.15), 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
}

.login-card:hover {
  box-shadow: 0 0 30px rgba(var(--neon-purple-rgb), 0.25), 0 0 60px rgba(var(--neon-purple-rgb), 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

.login-card__title {
  text-align: center;
  margin-bottom: 1.5rem;
  font-family: var(--font-cyber, 'Century Gothic', Futura, sans-serif);
}

.login-card .form-group {
  margin-bottom: 1rem;
}

.login-card label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.login-card label small {
  font-weight: 400;
  color: var(--text-dim);
}

.login-card .required {
  color: #ef5350;
}

.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text-body);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  transition: border-color 0.15s;
}

.login-card input:focus {
  outline: none;
  border-color: var(--neon-purple);
  box-shadow: 0 0 0 2px rgba(var(--neon-purple-rgb), 0.2);
}

.login-card__submit {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
}

.login-card__toggle {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.login-card__toggle a {
  color: var(--neon-purple);
  font-weight: 500;
}

.login-card__toggle a:hover {
  text-decoration: underline;
}

/* ===== Error Messages ===== */

.form-error {
  background: rgba(239, 83, 80, 0.1);
  border: 1px solid rgba(239, 83, 80, 0.3);
  border-radius: 6px;
  color: #ef5350;
  font-size: 0.88rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}

.field-error {
  display: block;
  font-size: 0.82rem;
  color: #ef5350;
  margin-top: 0.25rem;
  min-height: 0;
}

/* ===== Responsive ===== */

@media (max-width: 480px) {
  .login-card {
    padding: 1.5rem 1.25rem;
  }

  .login-page {
    padding: 2.5rem 0.75rem 1.5rem;
  }
}