/* ── Login Page ── */
.login-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  position: relative; overflow: hidden;
}

/* Animated background */
.login-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: var(--color-bg);
}
.login-bg-orb {
  position: absolute; border-radius: 50%;
  animation: orbFloat var(--dur, 10s) ease-in-out infinite alternate;
}
.login-bg-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle at center, rgba(37,99,235,.18) 0%, transparent 70%);
  top: -200px; right: -150px; --dur: 9s;
}
.login-bg-orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle at center, rgba(14,165,233,.14) 0%, transparent 70%);
  bottom: -150px; left: -100px; --dur: 12s;
  animation-delay: -4s;
}
.login-bg-orb-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle at center, rgba(99,102,241,.10) 0%, transparent 70%);
  top: 45%; left: 35%; --dur: 15s;
  animation-delay: -7s;
}
.login-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .25;
}
[data-theme="dark"] .login-bg-grid { opacity: .06; }

@keyframes orbFloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(24px, -28px) scale(1.04); }
}

/* Card */
.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl), 0 0 60px rgba(37,99,235,.12);
  padding: var(--space-10) var(--space-8);
  animation: cardIn 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: scale(.92) translateY(24px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Logo */
.login-logo {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.login-logo-mark {
  width: 76px; height: 76px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--blue-600), var(--sky-400));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(37,99,235,.35), 0 0 0 8px rgba(37,99,235,.08);
  animation: logoIn 600ms cubic-bezier(0.34,1.56,0.64,1) 100ms both;
}
@keyframes logoIn {
  from { opacity:0; transform: scale(.5) rotate(-10deg); }
  to   { opacity:1; transform: scale(1) rotate(0deg); }
}
.login-logo-mark svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.login-app-name {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  letter-spacing: -0.02em;
  animation: fadeInUp 400ms 150ms both;
}
.login-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  animation: fadeInUp 400ms 200ms both;
}

/* Error */
.login-error {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: var(--radius-md);
  color: var(--danger);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  animation: fadeInUp 200ms both;
}
.login-error.hidden { display: none; }

/* Form */
.login-form { display: flex; flex-direction: column; gap: var(--space-5); }
.login-form .input-group:nth-child(1) { animation: fadeInUp 400ms 250ms both; }
.login-form .input-group:nth-child(2) { animation: fadeInUp 400ms 300ms both; }
.login-remember { animation: fadeInUp 400ms 340ms both; }

/* Remember me */
.login-remember {
  display: flex; align-items: center;
  gap: var(--space-3); cursor: pointer;
}
.login-remember input[type="checkbox"] {
  width: 16px; height: 16px;
  border-radius: 4px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Submit */
.login-submit {
  width: 100%;
  height: 50px;
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
  animation: fadeInUp 400ms 370ms both;
  box-shadow: 0 4px 20px rgba(37,99,235,.35);
  gap: var(--space-2);
}
.login-submit:hover {
  box-shadow: 0 6px 28px rgba(37,99,235,.45);
  transform: translateY(-1px);
}
.login-submit:active { transform: translateY(0); }

/* Footer */
.login-footer {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  animation: fadeIn 600ms 400ms both;
}

@media (max-width: 480px) {
  .login-card { padding: var(--space-8) var(--space-5); }
}