/* ── Login Page ── */
body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }

.login-wrapper { width: 100%; max-width: 420px; }

.logo-area { text-align: center; margin-bottom: 40px; }
.logo-area.anim-slide-down { animation-delay: 0s; }

.logo-icon {
  width: 80px; height: 80px;
  margin: 0 auto 16px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 8px 8px 18px var(--shadow-dark), -8px -8px 18px var(--shadow-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
}

.logo-area h1 { font-size: 34px; font-weight: 800; color: var(--text-primary); letter-spacing: -1px; }
.logo-area h1 span { color: var(--accent); }
.logo-area p  { color: var(--text-secondary); font-size: 14px; margin-top: 6px; }

.card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  box-shadow: 14px 14px 28px var(--shadow-dark), -14px -14px 28px var(--shadow-light);
}

.tabs  { margin-bottom: 28px; }
.alert { margin-bottom: 18px; }

.footer-text { text-align: center; margin-top: 22px; font-size: 13px; color: var(--text-secondary); }
.footer-text strong { color: var(--accent); }

.form-panel { display: none; }
.form-panel.active { display: block; }

@media (max-width: 480px) {
  .card { padding: 30px 24px; border-radius: var(--radius-lg); }
  .logo-area h1 { font-size: 28px; }
}