/* Shared account pages: Fine Accounting, light and dark. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
.auth-portal {
    --page-bg: #0b1218;
    --story-bg: #1b2833;
    --story-curve: #121c24;
    --text: #f7f8fa;
    --muted: #a9bdce;
    --line: #30414e;
    --field-bg: #10191f;
    --feature-bg: rgba(18, 28, 36, .45);
    --accent: #42c8f2;
    --link: #58d9f7;
    --icon-bg: #1c303d;
    background: var(--page-bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
html[data-theme="light"] .auth-portal {
    --page-bg: #fff;
    --story-bg: #e8f5ff;
    --story-curve: #f1f9ff;
    --text: #101827;
    --muted: #657994;
    --line: #cddff0;
    --field-bg: #fff;
    --feature-bg: rgba(255, 255, 255, .88);
    --accent: #2fc5f7;
    --link: #009dda;
    --icon-bg: #e5f6ff;
    background: var(--page-bg);
    color: var(--text);
}
.auth-shell { display: grid; grid-template-columns: 52.1% 47.9%; min-height: 100svh; }
.auth-story { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 6vh, 64px) clamp(36px, 5vw, 88px); background: var(--story-bg); }
.auth-story::before { content: ""; position: absolute; z-index: -1; width: 190%; height: 160%; right: 0; top: -18%; border-radius: 50%; background: var(--story-curve); border: 1px solid var(--line); }
html[data-theme="light"] .auth-story::before { border-color: #fff; }
.auth-brand { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 560px; margin-inline: auto; color: var(--muted); font-size: 16px; text-decoration: none; }
.auth-brand:hover { color: var(--muted); }
.auth-brand .brand-logo { height: 42.9px; width: auto; max-width: 170.5px; align-self: flex-start; object-fit: contain; transform: translateY(-6px); }
.auth-story-content { position: relative; width: 100%; max-width: 560px; margin: 48px auto 0; }
.auth-story h2 { font-size: clamp(36px, 3.1vw, 52px); font-weight: 500; line-height: 1.12; letter-spacing: -.035em; margin: 0 0 20px; }
.auth-story h2 span { color: var(--accent); font-weight: 600; }
html[data-theme="light"] .auth-story h2 span { color: #0095ce; }
.auth-story-intro { color: var(--muted); font-size: 20px; line-height: 1.55; margin: 0 0 28px; letter-spacing: -.015em; }
.auth-features { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.auth-features li { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--feature-bg); }
.auth-feature-icon { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 12px; background: var(--icon-bg); color: var(--link); }
.auth-feature-icon svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.auth-features h3 { font-size: 18px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.015em; }
.auth-features p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.auth-main { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; padding: 112px clamp(36px, 5vw, 88px); }
.auth-form-container { width: 100%; max-width: 440px; }
.auth-heading { margin-bottom: 32px; }
.auth-heading h1 { color: var(--text); font-size: clamp(30px, 2.4vw, 40px); line-height: 1.2; font-weight: 600; letter-spacing: -.03em; margin: 0 0 12px; }
.auth-heading p { font-size: 18px; color: var(--muted); line-height: 1.5; margin: 0; letter-spacing: -.01em; }
.auth-portal .form-label { color: var(--text); font-size: 16px; line-height: 1.4; margin-bottom: 8px; }
.auth-portal .input-group { height: 56px; border: 1px solid var(--line); background: var(--field-bg); border-radius: 10px; }
.auth-portal .input-group-text { width: 52px; padding-left: 18px; color: var(--muted); }
.auth-portal .field-icon, .auth-portal .password-eye { width: 20px; height: 20px; flex-basis: 20px; }
.auth-portal .form-control { color: var(--text); font-size: 16px; }
.auth-portal .form-control::placeholder { color: var(--muted); opacity: .9; }
.auth-portal .input-group:focus-within { border-color: var(--accent); background: var(--field-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.auth-portal .toggle-password { width: 56px; padding: 0 18px; color: var(--muted); border-left-color: var(--line) !important; }
.auth-portal .toggle-password:hover { color: var(--link); }
.auth-portal #loginForm > .mb-3, .auth-portal .auth-field { margin-bottom: 22px !important; }
.auth-portal #loginForm > .d-flex { margin: 0 0 28px !important; gap: 16px; }
.auth-portal .form-check { padding-left: 26px; margin: 0; }
.auth-portal .form-check-input { width: 20px; height: 20px; margin-left: -26px; margin-top: 2px; background-color: var(--field-bg); border-color: var(--link); border-radius: 5px; }
.auth-portal .form-check-input:checked { background-color: #009dda; border-color: #009dda; }
.auth-portal .form-check-label { color: var(--text); font-size: 15px; padding-left: 4px; }
.auth-portal .forgot-link { color: var(--link); font-size: 15px; }
.auth-portal .forgot-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.auth-portal .btn-login { min-height: 56px; padding: 12px 44px; background: #007cac; color: #fff; border-radius: 10px; box-shadow: none; font-size: 17px; font-weight: 600; }
.auth-portal .btn-login:hover, .auth-portal .btn-login:focus, .auth-portal .btn-login:active { background: #006c98 !important; color: #fff !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 18%, transparent) !important; filter: none; }
.auth-portal .btn-arrow { right: 20px; font-size: 25px; font-weight: 400; }
.auth-portal .auth-back-button { border: 0; color: var(--link); margin-top: 22px; font-size: 17px; }
.auth-portal .auth-back-button:hover { background: var(--icon-bg); }
.auth-portal .theme-switch { position: absolute; top: 50px; right: 45px; height: 44px; border-color: var(--line); background: transparent; box-shadow: none; }
.auth-portal .theme-switch-thumb { transition: left .2s ease; }
html[data-theme="light"] .auth-portal .theme-switch-track { background: #c5edff; border-color: #e4f6ff; }
html[data-theme="light"] .auth-portal .theme-switch-thumb { background: #e5f7ff; }
html[data-theme="light"] .auth-portal .theme-icon-sun { color: #008eca; }
.auth-portal .login-footer { position: static; margin: 32px 0 0; font-size: 13px; }
.auth-portal .login-powered-by-logo { height: 25px; opacity: .9; }
html[data-theme="dark"] .auth-portal .login-powered-by-logo { opacity: .48; }
.auth-portal .form-control.auth-standalone-field { height: 56px; border: 1px solid var(--line); background: var(--field-bg); color: var(--text); }
.auth-portal .form-control.auth-standalone-field:focus { border-color: var(--accent); }
.auth-portal .input-group .form-control:-webkit-autofill, .auth-portal .form-control.auth-standalone-field:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text); }
.auth-portal :is(button, a, input, select):focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.auth-portal .input-group input:focus-visible { outline: none; }
.auth-portal .mfa-trust-select { background-color: var(--field-bg); color: var(--text); border-color: var(--line) !important; height: 56px; }
.auth-portal .mfa-trust-select option { background: var(--field-bg); color: var(--text); }
.auth-portal .core-otp-row { display: flex; gap: 12px; }
.auth-portal .core-otp-input { width: 0; flex: 1; min-width: 0; height: 62px; text-align: center; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--field-bg); font-size: 26px; }
.auth-portal .mfa-secondary-actions { flex-wrap: wrap; }
html[data-theme="light"] .auth-portal .brand-logo { filter: brightness(0) saturate(100%); }
html[data-theme] .auth-portal .input-group { background: var(--field-bg); border-color: var(--line); }
html[data-theme] .auth-portal .input-group:focus-within { border-color: var(--accent); }
html[data-theme] .auth-portal .input-group .toggle-password { border-left-color: var(--line) !important; }
html[data-theme] .auth-portal .form-label, html[data-theme] .auth-portal .form-check-label { color: var(--text); }
html[data-theme] .auth-portal .form-check-input { border-color: var(--link); background-color: var(--field-bg); }
html[data-theme] .auth-portal .form-check-input:checked { background-color: #009dda; }
html[data-theme] .auth-portal .theme-switch { box-shadow: none; border-color: var(--line); background: transparent; }
html[data-theme="light"] .auth-portal .login-powered-by-logo { filter: brightness(.5); opacity: 1; }
@media (max-width: 1250px) {
    .auth-story { padding-left: 4vw; padding-right: 4vw; }
    .auth-main { padding-left: 5vw; padding-right: 5vw; }
    .auth-features li { gap: 16px; padding: 15px; }
    .auth-portal .form-check-label, .auth-portal .forgot-link { font-size: 15px; }
}
@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-story { padding: 28px 28px 22px; }
    .auth-story::before, .auth-story-content { display: none; }
    .auth-brand { gap: 8px; font-size: 14px; max-width: none; }
    .auth-brand .brand-logo { height: 33px; }
    .auth-main { position: static; padding: 32px 28px; justify-content: flex-start; }
    .auth-heading h1 { font-size: 34px; }
    .auth-portal .theme-switch { top: 28px; right: 25px; min-width: 0; gap: 6px; padding: 0 8px; }
    .auth-shell { min-height: 100svh; grid-template-rows: auto 1fr; }
}
@media (max-width: 380px) {
    .auth-brand { font-size: 12px; }
    .auth-main { padding-right: 20px; padding-left: 20px; }
    .auth-portal .theme-switch { right: 18px; }
    .auth-portal .form-check-label { padding-left: 5px; }
    .auth-portal .forgot-link { font-size: 14px; }
}