.auth-page {
  background: radial-gradient(ellipse at 18% 18%, #e6e6fc, transparent 60%), var(--paper);
}
.auth-theme {
  position: fixed;
  inset: 1rem 1rem auto auto;
  z-index: 1;
}
.auth-panel {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  width: min(100%, 820px);
  margin: 3rem 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 20px 70px #242c5b24;
}
.auth-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .7rem;
  padding: clamp(1.5rem, 5vw, 3.3rem);
  background: linear-gradient(145deg, #1d294e, #3e43a2 66%, #6350cc);
  color: #fff;
}
.auth-brand .brand { color: inherit; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.auth-brand .brand span { color: #c2b7ff; font-size: 1.1em; }
.auth-brand p { margin: 0; color: #eeeaff; }
.auth-content { min-width: 0; padding: clamp(1.4rem, 4vw, 2.6rem); }
.auth-content h1 { margin-bottom: 1.15rem; }
.auth-content form { display: grid; gap: .9rem; }
.auth-content form + form { margin-top: .7rem; }
.auth-content input { width: 100%; padding: .75rem .85rem; }
.auth-content .button { padding: .7rem 1rem; }
.auth-content .account-links { gap: .35rem; margin: 1rem 0 0; padding-top: .45rem; border-top: 1px solid var(--line); }
.auth-content .account-links a { color: var(--violet); padding: .65rem .25rem; }
[data-theme="dark"] .auth-page { background: radial-gradient(ellipse at 18% 18%, #242842, transparent 60%), var(--paper); }
[data-theme="dark"] .auth-brand { background: linear-gradient(145deg, #1d284a, #443b86); }
@media (max-width: 620px) {
  .auth-panel { grid-template-columns: minmax(0, 1fr); }
}