.auth-pending .app-shell, .auth-pending .auth-layout { visibility: hidden; }
.auth-pending dialog, .auth-pending dialog::backdrop { visibility: hidden; pointer-events: none; }
.auth-loading { position: fixed; inset: 0; z-index: 30; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 24px; background: var(--canvas); color: var(--muted); text-align: center; }
html:not(.auth-pending) .auth-loading { display: none; }
.auth-loading p { margin: 0; max-width: 420px; }
.auth-page { min-height: 100dvh; }
.auth-layout { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(420px, 1fr); min-height: 100dvh; padding: 18px; gap: 18px; }
.auth-story { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 32px 38px; border-radius: 20px; background: #163b2d; color: #fff; }
.auth-brand { position: relative; z-index: 1; display: inline-flex; align-items: center; align-self: flex-start; gap: 10px; color: inherit; font-size: 24px; font-weight: 650; letter-spacing: -.6px; text-decoration: none; }
.auth-brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #2c7559; color: #fff; }
.auth-brand-mark svg { width: 25px; height: 25px; }
.auth-story-copy { position: relative; z-index: 1; margin: auto 0; padding: 40px 0 110px; max-width: 500px; }
.auth-access-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; color: #b5d3c2; font-size: 12px; font-weight: 550; }
.auth-access-label span { width: 6px; height: 6px; border-radius: 50%; background: #a8c9a6; }
.auth-story h1 { margin: 0 0 22px; font-size: clamp(36px, 3.7vw, 60px); font-weight: 550; letter-spacing: -2px; line-height: 1.12; }
.auth-story-copy > p { max-width: 340px; margin: 0; color: #bfd2c7; font-size: 15px; line-height: 1.8; }
.auth-story-foot { position: relative; z-index: 1; margin: 0; color: #9ebaab; font-size: 12px; }
.auth-weave { position: absolute; inset: auto -50px 70px 35%; display: grid; grid-template-columns: repeat(9, 1fr); gap: 12px; height: 200px; transform: rotate(-28deg); opacity: .28; }
.auth-weave i { border: 1px solid #8eb89e; background: linear-gradient(0deg, transparent 18%, #77a78c 18%, #77a78c 19%, transparent 19%, transparent 40%, #77a78c 40%, #77a78c 41%, transparent 41%, transparent 62%, #77a78c 62%, #77a78c 63%, transparent 63%, transparent 84%, #77a78c 84%, #77a78c 85%, transparent 85%); }
.auth-weave i:nth-child(2n) { transform: translateY(22px); background-color: #3f7258; }
.auth-form-panel { display: grid; place-items: center; padding: 24px 32px; }
.auth-card { width: min(100%, 390px); }
.auth-tabs { display: flex; gap: 6px; padding: 4px; margin-bottom: 28px; border: 1px solid var(--line); border-radius: 11px; background: #e9ede8; }
.auth-tabs[hidden] { display: none; }
.auth-tabs a { display: grid; place-items: center; width: 50%; min-height: 34px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.auth-tabs a[aria-current] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px #142c1912; }
.auth-form-heading .eyebrow { margin-bottom: 10px; }
.auth-form-heading h2 { margin: 0 0 8px; font-size: 28px; font-weight: 600; letter-spacing: -.9px; line-height: 1.2; }
.auth-form-heading > p:last-child { margin: 0 0 22px; color: var(--muted); line-height: 1.55; }
.auth-form { display: grid; gap: 16px; }
.auth-form[hidden], .auth-result[hidden] { display: none; }
.auth-field { display: grid; gap: 6px; }
.auth-field > label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 600; }
.auth-field > label span { color: var(--faint); font-size: 11px; font-weight: 450; }
.auth-inline-link { color: var(--accent); font-size: 12px; font-weight: 550; text-decoration: none; }
.auth-inline-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-field > input { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid #d3dcd4; border-radius: 9px; background: var(--surface); font-size: 15px; }
.auth-field > input[aria-invalid="true"] { border-color: var(--red); }
.auth-phone-inputs { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 9px; }
.auth-phone-inputs > :is(input, select) { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #d3dcd4; border-radius: 9px; background: var(--surface); font-size: 15px; }
.auth-phone-inputs > select { padding-right: 24px; text-overflow: ellipsis; }
.auth-phone-inputs > input[aria-invalid="true"] { border-color: var(--red); }
@media (max-width: 680px) { .auth-phone-inputs > :is(input, select) { font-size: 16px; } }
.auth-password-row { display: grid; gap: 16px; }
[data-auth-mode="register"] .auth-password-row, .auth-password-pair { grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { [data-auth-mode="register"] .auth-password-row, .auth-password-pair { grid-template-columns: 1fr; gap: 16px; } }
.auth-policy { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.auth-policy input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--accent); }
.auth-policy a { color: var(--accent); text-underline-offset: 3px; }
.auth-policy[aria-invalid="true"] { color: var(--red); }
.auth-form .button-wide, .auth-result .button-wide { min-height: 46px; justify-content: space-between; padding: 0 16px; }
.auth-form .form-error { margin: 0; }
.auth-result { display: grid; gap: 18px; }
.auth-result-status { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid #dce5dc; border-radius: 10px; background: #ecf1ea; color: #526650; }
.auth-result-mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--accent); }
.auth-result-mark svg { width: 20px; height: 20px; }
.auth-result-status div { display: grid; gap: 3px; min-width: 0; }
.auth-result-status strong { color: var(--ink); font-size: 13px; }
.auth-result-status span:not(.auth-result-mark) { overflow-wrap: anywhere; font-size: 12px; }
.auth-form-foot { margin: 18px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.auth-form-foot[hidden] { display: none; }
.auth-form-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-form-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-code-recipient { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -8px; color: var(--muted); font-size: 13px; }
.auth-code-input { font-variant-numeric: tabular-nums; letter-spacing: 9px; }
.auth-request-again { justify-self: center; border: 0; background: none; color: var(--accent); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.rail-account { flex-shrink: 0; border: 0; background: transparent; }
.account-dialog { width: min(400px, calc(100% - 32px)); }
.account-dialog h2 { margin: 0; font-size: 21px; }
.account-details { display: grid; gap: 7px; margin: 24px 0; }
.account-details strong { overflow-wrap: anywhere; font-size: 17px; }
.account-mobile { color: var(--muted); font-variant-numeric: tabular-nums; }
.account-details .pill { justify-self: start; margin-top: 7px; }
.account-storage-note { margin: 0 0 22px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.account-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.account-password { display: grid; gap: 12px; margin: 0 0 22px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.account-password[hidden] { display: none; }
.account-password h3 { margin: 0; font-size: 15px; }
.account-password .form-error { margin: 0; }
.account-password .dialog-actions { margin-top: 2px; }
@media (min-width: 1500px) { .auth-story { padding: 42px 58px; } }
@media (max-width: 850px) { .auth-layout { grid-template-columns: minmax(290px, .85fr) minmax(340px, 1fr); padding: 12px; gap: 0; } .auth-story { padding: 28px; } .auth-story h1 { font-size: 38px; letter-spacing: -1.3px; } .auth-form-panel { padding: 24px 26px; } }
@media (max-height: 760px) and (min-width: 681px) { .auth-form-panel { padding-block: 8px; } .auth-tabs { margin-bottom: 20px; } .auth-form-heading .eyebrow { display: none; } .auth-form-heading > p:last-child { margin-bottom: 16px; } .auth-form { gap: 13px; } .auth-password-row { gap: 13px; } .auth-field > input, .auth-phone-inputs > :is(input, select) { min-height: 42px; } }
@media (max-width: 680px) { .auth-layout { display: block; min-height: 100dvh; padding: 0; } .auth-story { min-height: 0; padding: 24px 26px; border-radius: 0; } .auth-brand { font-size: 22px; } .auth-story-copy { margin: 20px 0 0; padding: 0; } .auth-access-label { margin: 0; font-size: 11px; } .auth-story h1, .auth-story-copy > p, .auth-story-foot, .auth-weave { display: none; } .auth-form-panel { padding: 30px 24px 34px; } .auth-tabs { margin-bottom: 30px; } .auth-form-heading h2 { font-size: 28px; } .auth-field > input { font-size: 16px; } .auth-form-heading > p:last-child { margin-bottom: 24px; } }