.auth-page {
  background: radial-gradient(120% 100% at 20% 10%, color-mix(in oklab, var(--brand-300) 38%, var(--bg)), var(--bg));
  display: grid; place-items: center; min-height: 100dvh;
}

.login-container { width: 100%; max-width: 440px; padding: var(--s-6); }

.login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  display: grid; gap: var(--s-6);
  animation: fadeIn .5s ease both;
}

.login-brand { text-align: center; display: grid; gap: .5rem; }
.login-brand .brand-mark {
  width: 84px; height: 84px; border-radius: 26px;
  background: radial-gradient(100% 100% at 30% 30%, var(--brand-300), var(--brand-700));
  display: inline-grid; place-items: center; color: white; font-size: 2rem; margin: 0 auto var(--s-3);
  box-shadow: var(--shadow-1);
}
.login-brand .brand-name { font-family: var(--font-serif); font-size: 2.2rem; margin: 0; }
.login-brand .brand-name span { color: var(--brand); }
.login-brand .brand-sub { font-size: .95rem; color: var(--text-muted); }

.login-form { display: grid; gap: var(--s-4); }
.error-msg { color: var(--danger); font-size: .92rem; text-align: center; }
.hint { text-align: center; font-size: .86rem; color: var(--text-muted); }
.link { color: var(--brand); text-decoration: none; } .link:hover { text-decoration: underline; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }