.login-page, .auth-page { max-width: 520px; margin: 0 auto; padding: var(--space-7) 0 var(--space-8); }
.login-page::before, .auth-page::before { display: block; margin-bottom: var(--space-2); color: var(--interactive); content: "IDENTITY / AUTH"; font: var(--weight-medium) var(--text-xs)/1.5 var(--font-mono); letter-spacing: .04em; }
.login-form, .auth-form { display: grid; gap: var(--space-2); padding: var(--space-5); border: var(--line-width) solid var(--border-strong); border-top: var(--line-width-strong) solid var(--interactive); background: var(--surface); }
.login-form label, .auth-form label { margin-top: var(--space-2); color: var(--text-primary); font-weight: var(--weight-bold); }
.login-form input:not([type="hidden"]), .auth-form input:not([type="hidden"]) { width: 100%; min-height: 48px; padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--border-strong); border-radius: var(--radius-control); background: var(--canvas); color: var(--text-primary); }
.auth-form input[dir="ltr"], .login-form input[dir="ltr"] { text-align: left; }
.login-form input:focus-visible, .auth-form input:focus-visible { border-color: var(--focus-ring); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.login-form .button-primary, .auth-form .button-primary { margin-top: var(--space-3); }
.auth-form button:disabled, .auth-resend-form button:disabled { opacity: .6; cursor: wait; }
.auth-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); }
.auth-links a { text-decoration-thickness: 1px; }
.auth-resend-form { display: grid; justify-items: start; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3) 0; border-top: var(--line-width) solid var(--border); }
.resend-status { min-height: 1.5em; margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.auth-form small { color: var(--text-secondary); }
.form-errors { padding: var(--space-2) var(--space-3); border-inline-start: var(--line-width-strong) solid var(--state-danger); background: var(--surface-danger); color: var(--state-danger); font-size: var(--text-sm); overflow-wrap: anywhere; }
.form-errors ul { margin: 0; padding-inline-start: 1.2rem; }

@media (max-width: 600px) {
  .login-page, .auth-page { padding: var(--space-6) 0 var(--space-7); }
  .login-form, .auth-form { padding: var(--space-4); }
  .auth-links { gap: var(--space-2) var(--space-4); }
}