.auth-page {
    align-items: center;
    background:
        radial-gradient(ellipse at 15% 18%, rgba(113, 177, 255, .22), transparent 36%),
        radial-gradient(ellipse at 88% 78%, rgba(82, 145, 231, .18), transparent 34%),
        linear-gradient(135deg, #edf5ff, #f7faff 58%, #e7f0fc);
    color: #17385d;
    display: flex;
    height: auto;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(1rem, 4vw, 3.5rem);
    position: relative;
}

.auth-page *,
.auth-page *::before,
.auth-page *::after {
    box-sizing: border-box;
}

.auth-page :where(p, h1, h2, h3, h4, h5, h6, li, label, small, a, button, span) {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.auth-page p {
    text-align: justify;
    text-justify: inter-word;
}

.auth-page .particle-network {
    height: 100%;
    inset: 0;
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: 0;
}

.auth-page .auth-shell {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 1.5rem;
    box-shadow: 0 24px 70px rgba(23, 58, 99, .16);
    display: grid;
    height: auto;
    grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr);
    margin: auto;
    max-width: 1100px;
    min-height: 610px;
    overflow: hidden;
    position: relative;
    width: min(100%, 1100px);
    z-index: 1;
}

.auth-page .brand-panel {
    align-items: flex-start;
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .13), transparent 30%),
        linear-gradient(145deg, #092b58, #0b4da1 58%, #1672d4);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4rem);
    position: relative;
}

.auth-page .brand-panel::after {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    content: "";
    height: 330px;
    position: absolute;
    right: -145px;
    top: -165px;
    width: 330px;
}

.auth-page .brand-identity {
    align-items: center;
    display: flex;
    gap: .9rem;
    margin-bottom: clamp(2rem, 5vw, 4rem);
    position: relative;
    z-index: 1;
}

.auth-page .brand-logo {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 1rem;
    height: 68px;
    object-fit: contain;
    padding: .4rem;
    width: 68px;
}

.auth-page .brand-identity strong {
    display: block;
    font-size: 1.06rem;
    letter-spacing: .01em;
}

.auth-page .brand-identity span {
    color: rgba(255, 255, 255, .78);
    display: block;
    font-size: .8rem;
    margin-top: .18rem;
}

.auth-page .brand-kicker,
.auth-page .error-kicker {
    color: #c3dcff;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .13em;
    margin: 0 0 .75rem;
    text-transform: uppercase;
}

.auth-page .brand-panel h1,
.auth-page .brand-panel h2 {
    color: #fff;
    font-size: clamp(1.9rem, 3.7vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.14;
    margin: 0;
    max-width: 15ch;
}

.auth-page .brand-copy {
    color: rgba(242, 248, 255, .84);
    font-size: .98rem;
    line-height: 1.7;
    margin: 1rem 0 1.7rem;
    max-width: 43ch;
}

.auth-page .brand-benefits {
    display: grid;
    gap: .85rem;
    list-style: none;
    margin: .2rem 0 0;
    padding: 0;
}

.auth-page .brand-benefits li {
    align-items: center;
    color: rgba(255, 255, 255, .91);
    display: flex;
    font-size: .9rem;
    gap: .75rem;
}

.auth-page .benefit-icon {
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .7rem;
    color: #d8eaff;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.auth-page .brand-footnote {
    color: rgba(255, 255, 255, .7);
    font-size: .78rem;
    line-height: 1.55;
    margin: auto 0 0;
    padding-top: 2rem;
    position: relative;
    z-index: 1;
}

.auth-page .login-section,
.auth-page .error-section {
    align-items: center;
    display: flex;
    justify-content: center;
    min-width: 0;
    padding: clamp(1.5rem, 4.5vw, 4rem);
}

.auth-page .login-container,
.auth-page .error-container {
    background: transparent;
    border: 0;
    box-shadow: none;
    max-width: 440px;
    padding: 0;
    width: 100%;
}

.auth-page .login-header {
    margin-bottom: 1.7rem;
    text-align: left;
}

.auth-page .login-header .brand-image {
    display: none;
}

.auth-page .login-header h1,
.auth-page .error-container h1 {
    color: #17385d;
    font-size: clamp(1.7rem, 2.8vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.2;
    margin: 0;
}

.auth-page .subtitle {
    color: #647b96;
    font-size: .93rem;
    line-height: 1.6;
    margin: .55rem 0 0;
    text-align: justify;
    text-justify: inter-word;
}

.auth-page .form-group {
    margin-bottom: 1rem;
}

.auth-page .form-group label {
    color: #294969;
    display: block;
    font-size: .86rem;
    font-weight: 600;
    margin: 0 0 .42rem;
}

.auth-page .form-group input {
    background: #fff;
    border: 1px solid #c9d7e7;
    border-radius: .75rem;
    color: #17385d;
    font: inherit;
    min-height: 3.35rem;
    min-width: 0;
    padding: .78rem .9rem;
    transition: border-color .16s ease, box-shadow .16s ease;
    width: 100%;
}

.auth-page .form-group input::placeholder {
    color: #8799ad;
    opacity: 1;
}

.auth-page .form-group input:focus {
    border-color: #2878db;
    box-shadow: 0 0 0 4px rgba(40, 120, 219, .18);
    outline: 0;
}

.auth-page .form-group input[aria-invalid="true"] {
    border-color: #b42332;
}

.auth-page .field-error {
    color: #a51f2d;
    display: block;
    font-size: .79rem;
    line-height: 1.45;
    margin-top: .35rem;
}

.auth-page .field-error[hidden],
.auth-page .login-feedback[hidden] {
    display: none;
}

.auth-page .login-feedback {
    background: #fff2f1;
    border: 1px solid #f0c7c4;
    border-radius: .7rem;
    color: #85242a;
    font-size: .87rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    padding: .75rem .9rem;
}

.auth-page .password-wrapper {
    position: relative;
}

.auth-page .password-wrapper input {
    padding-right: 3.3rem;
}

.auth-page .password-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: .5rem;
    color: #55708d;
    cursor: pointer;
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    position: absolute;
    right: .42rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
}

.auth-page .password-toggle:hover {
    background: #edf4fc;
}

.auth-page .password-toggle:focus-visible,
.auth-page a:focus-visible,
.auth-page button:focus-visible {
    outline: 3px solid #2878db;
    outline-offset: 3px;
}

.auth-page .remember-me {
    align-items: center;
    color: #405a76;
    display: flex;
    font-size: .88rem;
    gap: .55rem;
    margin: .15rem 0 1.15rem;
}

.auth-page .remember-me input,
.auth-page .legal-acknowledge input {
    accent-color: #1769c2;
    height: 1.05rem;
    width: 1.05rem;
}

.auth-page .legal-summary {
    color: #657c95;
    font-size: .82rem;
    line-height: 1.55;
    margin: .1rem 0 1.25rem;
}

.auth-page .legal-summary a {
    color: #125eae;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-page .login-btn,
.auth-page .error-action {
    align-items: center;
    background: #1769c2;
    border: 1px solid #1769c2;
    border-radius: .75rem;
    box-shadow: 0 7px 16px rgba(23, 105, 194, .2);
    color: #fff;
    display: inline-flex;
    font: inherit;
    font-size: .94rem;
    font-weight: 700;
    justify-content: center;
    min-height: 3.25rem;
    padding: .75rem 1.1rem;
    text-align: center;
    text-decoration: none;
    transition: background-color .16s ease, transform .16s ease;
    width: 100%;
}

.auth-page .login-btn {
    cursor: pointer;
}

.auth-page .login-btn:hover,
.auth-page .error-action:hover {
    background: #1058a8;
    color: #fff;
    text-decoration: none;
}

.auth-page .login-btn:disabled {
    cursor: wait;
    opacity: .78;
}

.auth-page .login-progress {
    align-items: center;
    color: #486683;
    display: flex;
    font-size: .82rem;
    gap: .55rem;
    margin: .7rem 0 0;
    min-height: 1.25rem;
}

.auth-page .signature {
    color: #788da4;
    font-size: .78rem;
    line-height: 1.8;
    margin-top: 1.55rem;
    text-align: center;
}

.auth-page .signature a {
    color: #325b86;
    text-decoration: none;
}

.auth-page .signature a:hover {
    text-decoration: underline;
}

.auth-page .error-code {
    align-items: center;
    background: #eaf3ff;
    border: 1px solid #d4e5fa;
    border-radius: 999px;
    color: #145da8;
    display: inline-flex;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: 1.2rem;
    padding: .48rem .85rem;
}

.auth-page .error-kicker {
    color: #2878c8;
    margin-bottom: .55rem;
}

.auth-page .error-details {
    color: #617992;
    font-size: .94rem;
    line-height: 1.7;
    margin: .8rem 0 1.5rem;
}

.auth-page .error-actions {
    display: grid;
    gap: .7rem;
}

.auth-page .error-action.secondary {
    background: #fff;
    border-color: #cbd9e8;
    box-shadow: none;
    color: #28527d;
}

.auth-page .error-action.secondary:hover {
    background: #f1f6fc;
    color: #17385d;
}

.auth-page .error-support {
    color: #71869d;
    font-size: .8rem;
    line-height: 1.55;
    margin: 1.2rem 0 0;
}

.auth-page .tfa-container {
    max-width: 480px;
}

.auth-page .tfa-eyebrow {
    color: #1769c2;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    margin: 0 0 .6rem;
    text-transform: uppercase;
}

.auth-page .tfa-eyebrow i {
    margin-right: .3rem;
}

.auth-page .auth-feedback {
    border: 1px solid;
    border-radius: .7rem;
    font-size: .86rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    padding: .75rem .9rem;
}

.auth-page .auth-feedback p {
    margin: 0;
}

.auth-page .auth-feedback ul {
    margin: .35rem 0 0;
    padding-left: 1.25rem;
}

.auth-page .auth-feedback-error {
    background: #fff2f1;
    border-color: #f0c7c4;
    color: #85242a;
}

.auth-page .auth-feedback-success {
    background: #effaf5;
    border-color: #bce7d1;
    color: #176044;
}

.auth-page .tfa-help {
    color: #647b96;
    display: block;
    font-size: .79rem;
    line-height: 1.5;
    margin-top: .4rem;
}

.auth-page .otp-input {
    font-size: 1.35rem !important;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .38em;
    text-align: center;
}

.auth-page .otp-input::placeholder {
    letter-spacing: .38em;
}

.auth-page .tfa-security-note {
    align-items: flex-start;
    color: #647b96;
    display: flex;
    font-size: .79rem;
    gap: .5rem;
    line-height: 1.55;
    margin: 1.1rem 0 0;
}

.auth-page .tfa-security-note i {
    color: #2878c8;
    margin-top: .15rem;
}

.auth-page .tfa-steps {
    counter-reset: setup-step;
    display: grid;
    gap: .65rem;
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
}

.auth-page .tfa-steps li {
    align-items: flex-start;
    color: #486683;
    counter-increment: setup-step;
    display: flex;
    font-size: .82rem;
    gap: .6rem;
    line-height: 1.45;
}

.auth-page .tfa-steps li span {
    flex: 0 0 1.6rem;
}

.auth-page .tfa-steps li span {
    align-items: center;
    background: #eaf3ff;
    border-radius: 50%;
    color: #145da8;
    display: inline-flex;
    flex: 0 0 1.6rem;
    font-size: .75rem;
    font-weight: 700;
    height: 1.6rem;
    justify-content: center;
}

.auth-page .qr-code {
    background: #f7faff;
    border: 1px solid #d7e4f2;
    border-radius: .9rem;
    margin: 0 0 1rem;
    padding: .8rem;
    text-align: center;
}

.auth-page .qr-code figcaption {
    color: #486683;
    font-size: .79rem;
    font-weight: 600;
    margin-bottom: .65rem;
}

.auth-page .qr-code-image {
    align-items: center;
    background: #fff;
    border: 1px solid #e0e9f3;
    border-radius: .6rem;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    max-width: 100%;
    overflow: auto;
    padding: .45rem;
    width: fit-content;
}

.auth-page .qr-code-image svg,
.auth-page .qr-code-image img {
    display: block;
    height: auto;
    max-width: min(100%, 220px);
}

.auth-page [data-progress-button]:disabled {
    cursor: wait;
    opacity: .78;
}

.auth-page .legal-dialog,
.auth-page .legal-document-card,
.auth-page .legal-document-body,
.auth-page .legal-header > div,
.auth-page .legal-footer > div {
    min-width: 0;
}

.auth-page .legal-document-body {
    overflow-wrap: anywhere;
}

.auth-page .legal-document-body p,
.auth-page .legal-document-body li {
    line-height: 1.65;
    text-align: justify;
    text-justify: inter-word;
}

.auth-page .legal-step,
.auth-page .legal-footer button,
.auth-page .legal-acknowledge label {
    overflow-wrap: anywhere;
}

.auth-page .legal-modal[hidden] {
    display: none !important;
}

@media (max-width: 820px) {
    .auth-page {
        align-items: flex-start;
        padding: clamp(.75rem, 3vw, 1.5rem);
    }

    .auth-page .auth-shell {
        grid-template-columns: 1fr;
        max-width: 610px;
        min-height: 0;
    }

    .auth-page .brand-panel {
        min-height: 210px;
        padding: 1.5rem clamp(1.5rem, 6vw, 2.5rem);
    }

    .auth-page .brand-identity {
        margin-bottom: 1.2rem;
    }

    .auth-page .brand-logo {
        height: 54px;
        width: 54px;
    }

    .auth-page .brand-panel h1,
    .auth-page .brand-panel h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
        max-width: 26ch;
    }

    .auth-page .brand-copy {
        margin: .55rem 0 0;
    }

    .auth-page .brand-benefits,
    .auth-page .brand-footnote {
        display: none;
    }

    .auth-page .login-section,
    .auth-page .error-section {
        padding: clamp(1.5rem, 6vw, 2.75rem);
    }
}

@media (max-width: 420px) {
    .auth-page {
        display: block;
        padding: 0;
    }

    .auth-page .auth-shell {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
        min-height: 100dvh;
        width: 100%;
    }

    .auth-page .brand-panel {
        min-height: 175px;
        padding: 1.15rem 1.25rem;
    }

    .auth-page .brand-identity {
        gap: .7rem;
        margin-bottom: 1rem;
    }

    .auth-page .brand-logo {
        border-radius: .75rem;
        height: 46px;
        width: 46px;
    }

    .auth-page .brand-identity strong {
        font-size: .96rem;
    }

    .auth-page .brand-identity span {
        font-size: .72rem;
    }

    .auth-page .brand-panel h1,
    .auth-page .brand-panel h2 {
        font-size: 1.42rem;
    }

    .auth-page .brand-copy {
        font-size: .84rem;
        line-height: 1.45;
    }

    .auth-page .login-section,
    .auth-page .error-section {
        padding: 1.5rem 1.25rem 2rem;
    }

    .auth-page .login-header {
        margin-bottom: 1.3rem;
    }

    .auth-page .login-header h1,
    .auth-page .error-container h1 {
        font-size: clamp(1.45rem, 6.4vw, 1.7rem);
    }

    .auth-page .subtitle,
    .auth-page .error-details {
        font-size: .9rem;
        line-height: 1.6;
    }

    .auth-page .form-group label {
        font-size: .84rem;
    }

    .auth-page .form-group input {
        font-size: 1rem;
    }

    .auth-page .login-btn,
    .auth-page .error-action {
        font-size: .9rem;
        padding-left: .8rem;
        padding-right: .8rem;
    }

    .auth-page .legal-dialog {
        max-height: 94vh;
        max-height: 94dvh;
    }

    .auth-page .legal-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .auth-page .legal-required {
        margin-left: auto;
    }

    .auth-page .legal-step {
        align-items: flex-start;
        font-size: .7rem;
        line-height: 1.35;
    }

    .auth-page .legal-document-body {
        padding: .75rem;
    }

    .auth-page .legal-document-body h1 {
        font-size: 1rem;
    }

    .auth-page .legal-document-body h2 {
        font-size: .88rem;
    }

    .auth-page .legal-document-body p,
    .auth-page .legal-document-body li,
    .auth-page .legal-acknowledge label {
        font-size: .78rem;
    }
}

.legal-page {
    background:
        radial-gradient(ellipse at 12% 5%, rgba(113, 177, 255, .15), transparent 34%),
        linear-gradient(180deg, #f3f8ff, #fff 42rem, #f5f9ff);
    color: #17385d;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    min-height: 100vh;
    padding: clamp(1rem, 4vw, 3rem);
}

.legal-page *,
.legal-page *::before,
.legal-page *::after {
    box-sizing: border-box;
}

.legal-page :where(p, h1, h2, h3, h4, h5, h6, li, a) {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.legal-page main {
    background: #fff;
    border: 1px solid #dce7f3;
    border-radius: 1.25rem;
    box-shadow: 0 18px 50px rgba(23, 58, 99, .1);
    margin: 0 auto;
    max-width: 900px;
    padding: clamp(1.25rem, 4vw, 3rem);
    width: 100%;
}

.legal-page h1 {
    color: #17385d;
    font-size: clamp(1.65rem, 4vw, 2.25rem);
    line-height: 1.2;
    margin: 0 0 1rem;
}

.legal-page h2 {
    color: #244c75;
    font-size: clamp(1.05rem, 2.6vw, 1.25rem);
    line-height: 1.35;
    margin: 1.5rem 0 .5rem;
}

.legal-page p,
.legal-page li {
    color: #4f6883;
    font-size: clamp(.92rem, 1.4vw, 1rem);
    line-height: 1.75;
    text-align: justify;
    text-justify: inter-word;
}

.legal-page ul,
.legal-page ol {
    padding-left: 1.35rem;
}

.legal-page a {
    color: #1769c2;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.legal-page a:focus-visible {
    outline: 3px solid #2878db;
    outline-offset: 3px;
}

@media (max-width: 420px) {
    .legal-page {
        font-size: .94rem;
        line-height: 1.65;
        padding: .65rem;
    }

    .legal-page main {
        border-radius: .9rem;
        padding: 1.1rem;
    }

    .legal-page h1 {
        font-size: clamp(1.45rem, 7vw, 1.7rem);
    }

    .legal-page p,
    .legal-page li {
        font-size: .9rem;
        line-height: 1.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page .particle-network {
        display: none;
    }

    .auth-page *,
    .auth-page *::before,
    .auth-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}