/* ═══════════════════════════════════════════════════════════ */
/* Auth Pages — Login & Register                               */
/* ═══════════════════════════════════════════════════════════ */

.auth-page {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 24px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}
.auth-card h1 {
  font-size: 1.4rem; font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
.auth-sub {
  color: var(--text-secondary);
  font-size: .88rem;
  margin-bottom: 24px;
}

.auth-form {
  display: flex; flex-direction: column;
}

.auth-error {
  padding: 10px 14px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: .84rem;
  margin-bottom: 14px;
  animation: shake .35s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.auth-footer {
  text-align: center;
  font-size: .84rem;
  color: var(--text-secondary);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.auth-footer a { font-weight: 600; }

@media (max-width: 640px) {
  .auth-card { padding: 28px 20px; }
}