@layer screens {
  .auth { position: relative; min-height: 100dvh; overflow: hidden; background: var(--color-surface); }

  .auth__glow {
    position: absolute; inset: 0 0 0 auto; width: 46%; pointer-events: none;
    background:
      radial-gradient(60% 50% at 70% 20%, rgb(32 139 218 / 55%), transparent 70%),
      radial-gradient(55% 45% at 60% 75%, rgb(22 96 194 / 70%), transparent 70%),
      radial-gradient(40% 40% at 95% 95%, rgb(22 96 194 / 90%), transparent 70%),
      linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 0%) 35%);
  }
  .auth__logo { position: absolute; top: 36px; left: 40px; width: 172px; height: auto; }
  .auth__main { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: var(--space-12) var(--space-4); }

  .auth__card {
    width: 100%; max-width: 420px; display: grid; gap: 22px; padding: 36px;
    background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sheet); box-shadow: var(--shadow-float);
  }
  .auth__card p { color: var(--color-text-muted); font-size: var(--text-md); }
  .auth__foot { position: absolute; left: 40px; bottom: 28px; font-size: var(--text-sm); color: var(--color-text-subtle); }

  @media (width <= 720px) {
    .auth__glow { display: none; }
    .auth__logo { position: static; margin: var(--space-6) auto 0; }
    .auth__main { min-height: auto; place-items: start center; padding-top: var(--space-8); }
    .auth__card { padding: var(--space-6); box-shadow: none; }
    .auth__foot { position: static; text-align: center; padding: var(--space-6); }
  }
  .error-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); }
  .error-page .card { max-width: 480px; }
}