.web-auth-page {
  min-height: 100vh;
  background: radial-gradient(circle at 16% 12%, rgba(255, 104, 47, .13), transparent 32rem), var(--cream);
}

.web-auth { width: min(1080px, calc(100% - 32px)); margin: 0 auto; }
.web-auth__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; }
.web-auth__brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-size: 20px; font-weight: 800; text-decoration: none; }
.web-auth__brand img { width: 48px; height: 48px; border-radius: 16px; }
.web-auth__card { width: min(470px, 100%); margin: clamp(28px, 8vh, 88px) auto 64px; padding: clamp(24px, 5vw, 42px); border: 1px solid var(--line); border-radius: 28px; background: var(--paper); box-shadow: var(--shadow); }
.web-auth__eyebrow { margin: 0 0 9px; color: var(--pink); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.web-auth__card h1 { margin: 0 0 12px; font-size: clamp(29px, 5vw, 37px); line-height: 1.1; }
.web-auth__card p { line-height: 1.5; }
.web-auth__form { display: grid; gap: 10px; margin: 26px 0 0; }
.web-auth__form label { font-size: 14px; font-weight: 750; }
.web-auth__form input:not([type=submit]) { width: 100%; min-height: 48px; padding: 11px 14px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; }
.web-auth__form input[type=submit] { min-height: 48px; margin-top: 10px; color: #fff; background: var(--purple); border: 0; border-radius: 12px; font-weight: 800; cursor: pointer; }
.web-auth__form input[type=submit]:hover { filter: brightness(1.08); }
.web-auth__foot { margin: 22px 0 0; color: var(--ink-soft); font-size: 14px; }
.web-auth__foot a { color: var(--purple); font-weight: 750; }
.web-auth__notice { padding: 12px 14px; border-radius: 12px; background: rgba(39, 169, 107, .12); }
.web-auth__notice--error { color: var(--danger); background: rgba(197, 54, 88, .1); }