.auth-page { width: 100%; }
.auth-page-head { max-width: 760px; margin-bottom: var(--gap-xl); }
.auth-page-head h1 { margin-top: var(--gap-sm); }
.auth-page-head .page-description { margin-bottom: 0; }

.auth-layout {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(400px, 1.2fr);
  gap: clamp(32px, 6vw, 80px);
  padding: var(--gap-xl) 0;
  border-top: var(--border-w) solid var(--fo-line);
  border-bottom: var(--border-w) solid var(--fo-line);
}
.auth-context {
  position: relative;
  padding: var(--gap-32) clamp(24px, 4vw, 56px) var(--gap-32) var(--gap-32);
  border-right: var(--border-w) solid var(--fo-line);
  clip-path: var(--fo-shape-panel);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8, 9, 11, .45) 0%, rgba(8, 9, 11, .30) 55%, var(--color-photo-tint-55) 100%),
    url('/static/img/auth-hero.png') center / cover no-repeat;
  color: var(--color-photo-text);
}
.auth-context h2, .auth-form h2 { margin: 0 0 var(--gap-sm); }
.auth-context h2 { color: var(--color-photo-text); }
.auth-context > p.muted { color: var(--color-photo-text-muted); }
.auth-feature-list {
  list-style: none;
  display: grid;
  gap: var(--gap-lg);
  margin: var(--gap-xl) 0 0;
  padding: 0;
}
.auth-feature-list li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--gap-sm);
  align-items: start;
  color: var(--color-photo-text-muted);
}
.auth-feature-index {
  color: var(--color-accent);
  font: 700 var(--fs-small)/1.5 var(--font-mono);
}
.auth-form-panel { width: 100%; max-width: 640px; min-width: 0; padding: var(--gap-32); }