.auth-page { max-width: 1440px; min-height: 100svh; margin-inline: auto; padding: 24px var(--page-gutter); display: grid; grid-template-rows: auto 1fr auto; }
.auth-page .site-header { margin: 0; }
.auth-page .site-footer { margin-top: 0; }
.auth-page .site-footer nav { flex-wrap: wrap; justify-content: center; }
.auth-main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(48px, 1fr) auto minmax(72px, 1fr); justify-items: center; padding-top: 32px; min-width: 0; }
.auth-main::before { content: ''; grid-column: 1; grid-row: 1; }
.auth-form { grid-column: 1; grid-row: 2; width: min(440px, 100%); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.auth-intro { display: grid; gap: 8px; }
.auth-intro h1 { font: 600 36px/1.444444 Onest, sans-serif; }
.auth-intro p { color: var(--muted); font-size: 16px; line-height: 1.5; }
.auth-field { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 12px; }
.auth-field label { grid-area: 1 / 1; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.46154; }
.auth-field > input, .password-field { grid-area: 2 / 1 / 3 / -1; }
.auth-field .field-error { grid-area: 1 / 2; text-align: right; align-self: center; font-size: 12px; line-height: 1.58334; }
.auth-field input { width: 100%; min-width: 0; min-height: 56px; height: 3.5em; padding: 0 18px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-input); color: var(--text); font: 400 16px/1.4375 Onest, sans-serif; transition: border-color 160ms ease, outline-color 160ms ease; }
.auth-field input::placeholder { color: var(--muted); opacity: 1; }
.auth-field input:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 2px; }
.auth-field input[aria-invalid="true"] { border-color: #ff7180; }
.auth-field input:autofill { caret-color: var(--text); }
.password-field { position: relative; }
.password-field:has(.password-toggle:not([hidden])) input { padding-right: calc(4em + 16px); }
.password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); white-space: nowrap; min-width: 60px; min-height: 44px; padding: 8px; border-radius: 8px; font-size: 13px; line-height: 1.53846; color: var(--muted); transition: color 160ms ease; }
.password-toggle:focus-visible { outline-offset: -2px; }
.remember-field { display: grid; }
.field-hint { color: var(--muted); font-size: 12px; line-height: 1.5; }
.remember-field .field-hint { padding-left: 30px; }
.remember-control { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; width: fit-content; max-width: 100%; color: var(--muted); font-size: 14px; line-height: 1.428572; cursor: pointer; }
.remember-control input { position: absolute; width: 20px; height: 20px; margin: 0; opacity: 0; }
.checkbox-mark { display: grid; place-items: center; flex: 0 0 20px; height: 20px; border: 1px solid var(--border-default); border-radius: 6px; background: #111114; transition: background-color 160ms ease, border-color 160ms ease; }
.checkbox-mark img { visibility: hidden; }
.remember-control input:checked + .checkbox-mark { background: #a41017; border-color: #a41017; }
.remember-control input:checked + .checkbox-mark img { visibility: visible; }
.remember-control input:focus-visible + .checkbox-mark { outline: 2px solid #ff7180; outline-offset: 4px; }
.remember-control:active { opacity: .88; }
.security-check { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-input); }
.security-check > div { min-width: 0; }
.security-indicator { flex: 0 0 20px; text-align: center; color: var(--muted); line-height: 20px; }
.security-title { font-size: 14px; font-weight: 500; line-height: 1.428572; }
.security-message { color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.security-check[data-state="checking"] .security-indicator { height: 20px; border: 2px solid #2b2b33; border-top-color: var(--brand); border-radius: 50%; font-size: 0; animation: verification-spin 800ms linear infinite; }
.security-check[data-state="verified"] .security-indicator { color: #8bd6ac; }
.security-check:is([data-state="error"], [data-state="expired"]) .security-indicator { color: #ff7180; }
@keyframes verification-spin { to { transform: rotate(360deg); } }
.auth-primary { overflow: hidden; font-size: 16px; line-height: 1.4375; box-shadow: inset 0 1px #ffadb838, 0 8px 18px -8px #ff14242e; }
.auth-primary::after { content: ""; position: absolute; inset: -92px -1px -10px; border-radius: 32px; background: linear-gradient(180deg, #03020200 0%, #06020300 48%, #4d01051f 68%, #e50e1f75 84%, #fff2f6eb 100%); pointer-events: none; }
.auth-primary > span { position: relative; z-index: 1; }
.auth-primary.login::after { inset: -85.5px -243.45px -9.36px -146.31px; }
.auth-primary.login { font-size: 18px; line-height: 1.222223; }
.auth-submit { width: 100%; min-height: 44px; }
.auth-submit:disabled { opacity: .5; cursor: not-allowed; }
.auth-submit[aria-busy="true"] { opacity: 1; cursor: progress; }
.auth-submit[aria-busy="true"] > span::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid #ffffff55; border-top-color: currentColor; border-radius: 50%; animation: verification-spin 800ms linear infinite; }
.field-error, .auth-status, .auth-notice { color: #ff9caa; font-size: 13px; line-height: 1.53846; overflow-wrap: anywhere; }
.auth-feedback { grid-column: 1; grid-row: 3; width: min(440px, 100%); min-width: 0; align-self: start; padding-block: 16px; }
.auth-status { margin: 0; overflow-wrap: anywhere; }
.auth-status + .auth-status { margin-top: 8px; }
.auth-status[data-tone="info"] { color: var(--muted); }
.auth-status[data-tone="success"] { color: #8bd6ac; }
.account-prompt { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; line-height: 1.428572; }
.account-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; background: linear-gradient(90deg, #ff3038, #ffb8c7); color: transparent; background-clip: text; transition: opacity 160ms ease; }
.account-link:active { opacity: .72; }
.terms-field { min-height: 64px; }
.terms-control { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; padding-inline: 12px; color: var(--muted); font-size: 14px; line-height: 1.428572; }
.terms-control > a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; transition: color 160ms ease, text-decoration-color 160ms ease; }
.terms-field .field-error { padding-inline: 12px; }
.remember-control input[aria-invalid="true"] + .checkbox-mark { border-color: #ff7180; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes inner-page-enter { from { opacity: .75; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .auth-page:has(.menu-ready) .auth-form, .auth-page:has(.menu-ready) .legal-intro { animation: inner-page-enter 220ms var(--ease-out); } }
.auth-page:has(.menu-ready) .entry-settled { animation: none; }
.auth-page [aria-disabled="true"] { cursor: not-allowed; }
@media (hover: hover) { .password-toggle:hover, .terms-control > a:hover { color: var(--text); } .terms-control > a:hover { text-decoration-color: currentColor; } .account-link:hover { opacity: .8; } }
@media (width < 600px) { .auth-main { padding-top: 0; grid-template-rows: minmax(40px, 1fr) auto minmax(72px, 1fr); } .auth-page { padding-inline: 20px; } }
@media (prefers-reduced-motion: reduce) { .auth-field input, .password-toggle, .checkbox-mark, .account-link, .terms-control > a { transition: none; } .security-check[data-state="checking"] .security-indicator, .auth-submit[aria-busy="true"] > span::before { animation: none; } }
@media (forced-colors: active) { .checkbox-mark, .remember-control input:checked + .checkbox-mark { border-color: ButtonText; } .remember-control input:checked + .checkbox-mark { background: Highlight; } .account-link { color: LinkText; background: none; } }