/* Shared account screens use the dashboard's violet palette and typography. */
.auth-page {
    --auth-ink: #222539;
    --auth-muted: #626a7e;
    --auth-purple: #5952ce;
    --auth-purple-dark: #453eb2;
    --auth-paper: #f5f6fa;
    --auth-line: #dfe2eb;
    --auth-lavender: #eeedfc;
    box-sizing: border-box;
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    color: var(--auth-ink);
    background: white;
    font: 14px/1.5 "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.auth-page * { box-sizing: border-box; }
.auth-page [hidden] { display: none !important; }
.auth-page :where(button, input) { font: inherit; }
.auth-page button, .auth-page a { -webkit-tap-highlight-color: transparent; }
.auth-page a { color: var(--auth-purple-dark); text-decoration: none; }
.auth-page a:hover { text-decoration: underline; text-underline-offset: 4px; }
.auth-page :focus-visible { outline: 3px solid #827cec; outline-offset: 4px; }
.auth-page h1, .auth-page h2, .auth-page p { margin: 0; }
.auth-icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.auth-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.auth-skip { position: fixed; left: 18px; top: -100px; z-index: 10; padding: 12px 18px; background: white; border-radius: 6px; }
.auth-skip:focus { top: 12px; }
.auth-shell { display: grid; grid-template-columns: 43% 57%; width: 100%; min-height: 100vh; min-height: 100svh; }
.auth-shell > * { min-width: 0; }
.auth-welcome { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 42px 48px; background: var(--auth-purple); color: white; }
.auth-page .auth-brand { display: inline-flex; align-items: center; gap: 10px; color: white; font-size: 13px; font-weight: 600; letter-spacing: .05px; text-decoration: none; }
.auth-brand .auth-icon { width: 25px; height: 25px; color: #e2deff; }
.auth-page .auth-brand:hover { color: #e2deff; }
.auth-welcome-copy { position: relative; z-index: 1; margin: auto 0; padding: 55px 0 180px; }
.auth-welcome-copy h2 { font-size: 54px; line-height: 1.06; letter-spacing: -1.8px; font-weight: 650; }
.auth-welcome-copy p { margin-top: 20px; color: #e0ddfb; font-size: 14px; }
.auth-linework { position: absolute; left: 48px; right: 48px; bottom: 76px; height: 188px; }
.auth-linework i { position: absolute; display: block; width: 240px; height: 146px; border: 1px solid #e4dfff54; border-radius: 11px; background: #ffffff04; }
.auth-linework i:nth-child(1) { left: 0; top: 0; }
.auth-linework i:nth-child(2) { left: 36px; top: 24px; }
.auth-linework i:nth-child(3) { left: 72px; top: 48px; background: #ffffff07; }
.auth-linework i::before { content: ""; position: absolute; top: 24px; left: 24px; width: 24px; height: 24px; border: 1px solid #eee9ff5e; border-radius: 6px; }
.auth-linework i::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 24px; height: 1px; background: #e4dfff38; }
.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; }
.auth-main { width: 100%; max-width: 360px; min-width: 0; }
.auth-main:focus { outline: none; }
.auth-content { width: 100%; }
.auth-heading { margin-bottom: 34px; }
.auth-heading h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.8px; font-weight: 650; }
.auth-heading p { margin-top: 10px; color: var(--auth-muted); font-size: 13px; line-height: 1.7; }
.auth-field { margin-bottom: 20px; }
.auth-field > label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.auth-input-wrap { position: relative; }
.auth-input { display: block; width: 100%; height: 48px; padding: 12px 14px; color: var(--auth-ink); background: white; border: 1px solid #cbd0df; border-radius: 6px; outline: none; transition: border-color 150ms, box-shadow 150ms; }
.auth-input-wrap:has(.auth-password-toggle) > .auth-input { padding-right: 50px; }
.auth-input::placeholder { color: #7b8093; opacity: 1; }
.auth-input:hover { border-color: #a8a7bf; }
.auth-input:focus { border-color: var(--auth-purple); outline: none; background: white; box-shadow: 0 0 0 3px #5952ce16; }
.auth-input[readonly] { background: var(--auth-paper); color: var(--auth-muted); }
.auth-input[aria-invalid="true"], .auth-input.input-validation-error { border-color: #bf414b; }
.auth-password-toggle { position: absolute; display: grid; place-items: center; top: 3px; right: 3px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--auth-muted); cursor: pointer; }
.auth-password-toggle .auth-icon { width: 18px; height: 18px; }
.auth-password-toggle:hover, .auth-password-toggle[aria-pressed="true"] { background: var(--auth-lavender); color: var(--auth-purple-dark); }
.auth-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 1px 0 24px; font-size: 12px; }
.auth-options a { font-weight: 600; }
.auth-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; }
.auth-checkbox input { flex-shrink: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--auth-purple); cursor: pointer; }
.auth-captcha { margin: 24px 0; }
.auth-captcha .g-recaptcha { min-height: 78px; }
.auth-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 18px; color: white; background: var(--auth-purple); border: 1px solid var(--auth-purple); border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background 150ms, border-color 150ms, box-shadow 150ms; text-decoration: none; }
.auth-page a.auth-button { color: white; text-decoration: none; }
.auth-button:hover { background: var(--auth-purple-dark); border-color: var(--auth-purple-dark); box-shadow: 0 3px 8px #453eb21a; }
.auth-button > .auth-icon { width: 17px; height: 17px; transition: transform 150ms; }
.auth-button:hover > .auth-icon { transform: translateX(3px); }
.auth-button:disabled { cursor: wait; opacity: .65; }
.auth-button[aria-busy="true"]::after { content: ""; width: 14px; height: 14px; border: 2px solid #ffffff60; border-top-color: white; border-radius: 50%; animation: auth-spin .7s linear infinite; }
.auth-button[aria-busy="true"] > .auth-icon { display: none; }
.auth-button-secondary { background: transparent; border-color: var(--auth-line); color: var(--auth-purple-dark); }
.auth-button-secondary:hover > .auth-icon { transform: none; }
.auth-button-secondary:hover { background: var(--auth-lavender); border-color: #c9c4eb; }
.auth-back { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 24px auto 0; font-size: 12px; font-weight: 600; }
.auth-back .auth-icon { width: 15px; height: 15px; }
.auth-help { margin-top: 22px !important; color: var(--auth-muted); font-size: 12px; line-height: 1.7; }
.auth-help a { font-weight: 600; }
.auth-main-footer { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; max-width: 360px; margin-top: 30px; color: var(--auth-muted); font-size: 10px; }
.auth-main-footer .auth-icon { width: 12px; height: 12px; color: #8b8aa0; }
.auth-error, .auth-page .field-validation-error { display: block; margin-top: 7px; color: #a82f3b; font-size: 12px; line-height: 1.5; }
.auth-error:empty, .auth-page .field-validation-valid, .auth-page .validation-summary-valid { display: none; }
.auth-error-initial { display: none; }
.auth-notice, .auth-page .validation-summary-errors { padding: 13px 15px; margin-bottom: 22px; border: 1px solid #dedaf1; border-radius: 8px; color: #514b72; background: #f6f4fc; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.auth-notice p + p { margin-top: 8px; }
.auth-notice.auth-error, .auth-page .validation-summary-errors { color: #9c2f3a; background: #fff4f4; border-color: #f0d2d6; }
.auth-notice.alert-success { color: #226448; background: #eef8f2; border-color: #cde6d7; }
.auth-notice.alert-warning { color: #835717; background: #fffaee; border-color: #eee0bf; }
.auth-page .validation-summary-errors ul { padding-left: 17px; margin: 0; }
.auth-steps { display: flex; align-items: center; gap: 9px; padding: 0; margin: 0 0 25px; list-style: none; color: var(--auth-muted); font-size: 10px; }
.auth-steps li { display: flex; align-items: center; gap: 5px; }
.auth-steps .auth-icon { width: 13px; height: 13px; color: #28775b; }
.auth-steps li + li::before { content: ""; width: 22px; height: 1px; margin-right: 4px; background: var(--auth-line); }
.auth-steps [aria-current="step"] { color: var(--auth-purple-dark); font-weight: 600; }
.auth-otp { height: 64px; padding: 12px 14px 12px 29px; letter-spacing: 15px; text-align: center; font-variant-numeric: tabular-nums; }
.auth-page input.auth-otp { font-size: 28px; font-weight: 600; }
.auth-otp::placeholder { color: #76708e; }
.auth-steps + .auth-heading { margin-bottom: 22px; }
.auth-field-hint { display: flex; align-items: center; gap: 6px; margin-top: 9px !important; color: var(--auth-muted); font-size: 11px; }
.auth-field-hint .auth-icon { width: 14px; height: 14px; }
.auth-remember { align-items: flex-start; padding: 5px 0; margin: 20px 0; }
.auth-remember input { margin-top: 2px; }
.auth-remember strong { display: block; font-size: 12px; font-weight: 600; }
.auth-remember small { display: block; margin-top: 3px; color: var(--auth-muted); font-size: 11px; }
.auth-resend { display: flex; flex-direction: column; gap: 11px; margin-top: 24px; text-align: center; }
.auth-resend p { color: var(--auth-muted); font-size: 12px; }
.auth-resend button { min-height: 43px; font-size: 12px; }
.auth-password-hint { padding: 12px 14px; margin: -3px 0 20px !important; border-radius: 7px; background: var(--auth-paper); color: var(--auth-muted); font-size: 11px; line-height: 1.65; }
.auth-compact .auth-heading { margin-bottom: 22px; }
.auth-compact .auth-field { margin-bottom: 15px; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
    .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .auth-welcome { padding: 26px 30px; min-height: 124px; }
    .auth-welcome-copy { padding: 0; margin: 18px 0 0; }
    .auth-welcome-copy h2 { font-size: 23px; letter-spacing: -.4px; }
    .auth-welcome-copy br, .auth-welcome-copy p, .auth-linework { display: none; }
    .auth-panel { padding: 32px 30px; justify-content: flex-start; }
    .auth-heading h1 { font-size: 28px; }
    .auth-page .auth-input:not(.auth-otp) { font-size: 16px; }
}
@media (max-width: 359px) {
    .auth-welcome, .auth-panel { padding-inline: 22px; }
    .auth-captcha .g-recaptcha { transform: scale(.9); transform-origin: left top; margin-bottom: -8px; min-height: 71px; }
    .auth-options { gap: 8px; font-size: 11px; }
    .auth-checkbox { font-size: 11px; }
    .auth-otp { letter-spacing: 12px; padding-left: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-page *, .auth-page *::before, .auth-page *::after { animation: none !important; transition: none !important; }
}