.auth-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--paper); }
.auth-header { width: min(1180px, calc(100% - 64px)); height: 84px; margin-inline: auto; }
.auth-header .brand-logo { width: 156px; }
.auth-header-action { margin-left: auto; color: var(--ink-soft); font-size: 11px; }
.auth-header-action a { color: var(--brand-red); font-weight: 700; }
.auth-create { margin: 17px 0 0; color: var(--ink-soft); font-size: 11px; text-align: center; }
.auth-create a { color: var(--brand-red); font-weight: 700; }
.auth-create-primary { margin: 11px 0 24px; }
.auth-main { display: grid; place-items: center; padding: 40px 0 70px; }
.auth-layout { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(360px, 1fr); width: min(980px, calc(100% - 64px)); min-height: 490px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 18px 45px rgba(17,17,17,.08); }
.auth-intro { display: flex; flex-direction: column; justify-content: space-between; padding: 38px; background: var(--ink); color: var(--white); }
.auth-intro .eyebrow { color: #ff7a83; }
.auth-intro h1 { max-width: 330px; margin: 20px 0 17px; color: var(--white); font-size: clamp(34px, 4vw, 53px); letter-spacing: -2.5px; }
.auth-intro p:not(.eyebrow) { max-width: 300px; margin: 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.6; }
.auth-intro-footer { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.7); font-size: 11px; }
.auth-intro-footer span { color: #ff7a83; font-size: 17px; }
.auth-card { align-self: center; max-width: 440px; width: 100%; margin-inline: auto; padding: 40px 48px; }
.auth-card h2 { margin: 0 0 8px; font-size: 29px; letter-spacing: -1.2px; }
.auth-lead { margin: 0 0 27px; color: var(--ink-soft); font-size: 13px; }
.auth-form { display: grid; gap: 17px; }
.auth-field { display: grid; gap: 7px; }
.auth-field > span { color: var(--ink); font-size: 11px; font-weight: 700; }
.auth-field input { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 3px; outline: 0; color: var(--ink); background: var(--white); font-size: 12px; }
.auth-field input:focus { border-color: var(--brand-red); box-shadow: 0 0 0 2px rgba(223,31,45,.1); }
.auth-form-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-size: 10px; }
.auth-form-meta label { display: inline-flex; align-items: center; gap: 7px; }
.auth-form-meta input { accent-color: var(--brand-red); }
.auth-form-meta a { color: var(--brand-red); font-weight: 700; }
.auth-form .button { width: 100%; margin-top: 3px; }
.auth-error { margin: 8px 0 0; color: var(--brand-red); font-size: 11px; line-height: 1.45; }
.auth-error[hidden] { display: none; }
.auth-permission-note { margin-top: 24px; padding: 12px 13px; border-left: 3px solid var(--brand-red); background: var(--surface); color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.auth-permission-note strong { color: var(--ink); }
.auth-footer { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 18px 0 22px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; text-align: center; }
@media (max-width: 760px) { .auth-header { width: min(100% - 36px, 540px); height: 70px; } .auth-header-action { font-size: 10px; } .auth-main { padding: 27px 0 55px; } .auth-layout { grid-template-columns: 1fr; width: min(100% - 36px, 540px); } .auth-intro { min-height: 250px; padding: 27px; } .auth-intro h1 { margin: 13px 0 12px; font-size: 38px; } .auth-intro-footer { margin-top: 30px; } .auth-card { padding: 32px 24px; } .auth-footer { width: min(100% - 36px, 540px); } }