/* Shared account screens use the dashboard's violet palette and typography. */
.auth-page {
    --auth-ink: var(--ub-neutral-text, #222539);
    --auth-muted: var(--ub-neutral-muted, #626a7e);
    --auth-purple: var(--ub-violet-fill, #5952ce);
    --auth-purple-dark: var(--ub-violet-fill, #453eb2);
    --auth-paper: var(--ub-neutral-surface, #f5f6fa);
    --auth-line: var(--ub-blue-border, #dfe2eb);
    --auth-lavender: var(--ub-violet-surface, #eeedfc);
    box-sizing: border-box;
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    color: var(--auth-ink);
    background: var(--ub-neutral-surface, 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(--ub-violet-text, 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 var(--ub-violet-border, #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: var(--ub-neutral-surface, 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: var(--ub-neutral-text, white); }
.auth-page .auth-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ub-neutral-text, white); font-size: 13px; font-weight: 600; letter-spacing: .05px; text-decoration: none; }
.auth-brand .auth-icon { width: 25px; height: 25px; color: var(--ub-neutral-text, #e2deff); }
.auth-page .auth-brand:hover { color: var(--ub-neutral-text, #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: var(--ub-neutral-text, #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 var(--ub-violet-border, #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 var(--ub-violet-border, #eee9ff5e); border-radius: 6px; }
.auth-linework i::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 24px; height: 1px; background: var(--ub-violet-surface, #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: var(--ub-neutral-surface, white); border: 1px solid var(--ub-blue-border, #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: var(--ub-neutral-muted, #7b8093); opacity: 1; }
.auth-input:hover { border-color: var(--ub-violet-border, #a8a7bf); }
.auth-input:focus { border-color: var(--auth-purple); outline: none; background: var(--ub-neutral-surface, 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: var(--ub-red-border, #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(--ub-violet-text, 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; }
/* Google's widget handles its own theme; keep the iframe canvas transparent. */
.auth-captcha .g-recaptcha { min-height: 78px; color-scheme: light; }
.auth-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 18px; color: var(--ub-neutral-text, 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: var(--ub-neutral-text, 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 var(--ub-neutral-border, #ffffff60); border-top-color: var(--ub-neutral-border, 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(--ub-violet-text, var(--auth-purple-dark)); }
.auth-button-secondary:hover > .auth-icon { transform: none; }
.auth-button-secondary:hover { background: var(--auth-lavender); border-color: var(--ub-violet-border, #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: var(--ub-neutral-muted, #8b8aa0); }
.auth-error, .auth-page .field-validation-error { display: block; margin-top: 7px; color: var(--ub-red-text, #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 var(--ub-violet-border, #dedaf1); border-radius: 8px; color: var(--ub-neutral-muted, #514b72); background: var(--ub-violet-surface, #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: var(--ub-red-text, #9c2f3a); background: var(--ub-red-surface, #fff4f4); border-color: var(--ub-red-border, #f0d2d6); }
.auth-notice.alert-success { color: var(--ub-green-text, #226448); background: var(--ub-green-surface, #eef8f2); border-color: var(--ub-green-border, #cde6d7); }
.auth-notice.alert-warning { color: var(--ub-amber-text, #835717); background: var(--ub-amber-surface, #fffaee); border-color: var(--ub-amber-border, #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: var(--ub-green-text, #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(--ub-violet-text, 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: var(--ub-neutral-muted, #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; }
}

@media screen {
    html[data-theme="dark"] .auth-welcome {
        background: linear-gradient(145deg, #302743 0%, #211f32 55%, #1a1d24 100%);
        border-right: 1px solid #343b49;
    }
    html[data-theme="dark"] .auth-page .auth-brand { color: #edf0f6; }
    html[data-theme="dark"] .auth-linework i { background: #b2a4ff08; border-color: #8275bf; }
    html[data-theme="dark"] .auth-linework i::after { background: #8275bf; }
    html[data-theme="dark"] .auth-main {
        max-width: 420px;
        padding: 32px;
        border: 1px solid #343b49;
        border-radius: 16px;
        background: #1a1d24;
        box-shadow: 0 16px 48px #00000020;
    }
    html[data-theme="dark"] .auth-heading { margin-bottom: 28px; }
    html[data-theme="dark"] .auth-input { background: #15181f; }
    @media (max-width: 760px) {
        html[data-theme="dark"] .auth-welcome { border-right: 0; border-bottom: 1px solid #343b49; }
        html[data-theme="dark"] .auth-main { padding: 24px; }
        html[data-theme="dark"] .auth-panel { padding: 24px 16px; }
    }
}