.onboarding-card {
    max-width: 460px;
}


.voucher-input {
    width: 100%;
    min-height: 122px;

    margin-bottom: 8px;

    padding:
        12px
        14px;

    resize: vertical;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        13px;

    outline: 0;

    background:
        var(--surface-soft);

    color:
        var(--text-primary);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 12px;
    line-height: 1.45;

    overflow-wrap: anywhere;
}


.voucher-input:focus {
    border-color:
        #8c8c93;
}


.onboarding-links {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 22px;

    text-align: center;
}


.onboarding-links a {
    color:
        var(--text-primary);

    font-size: 13px;
    font-weight: 650;

    text-decoration: none;
}


.onboarding-links a:hover {
    text-decoration: underline;
}


.voucher-contact-panel {
    padding: 18px;

    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border);

    border-radius:
        16px;
}


.voucher-contact-label {
    display: block;

    margin-bottom: 7px;

    color:
        var(--text-secondary);

    font-size: 12px;
    font-weight: 650;
}


.voucher-email-link {
    display: block;

    color:
        var(--text-primary);

    font-size: 17px;
    font-weight: 700;

    overflow-wrap: anywhere;

    text-decoration: none;
}


.voucher-email-link:hover {
    text-decoration: underline;
}


.voucher-instructions {
    margin:
        12px
        0
        0;

    color:
        var(--text-secondary);

    font-size: 13px;
    line-height: 1.5;
}


.onboarding-status {
    margin: 0;

    color:
        var(--text-secondary);

    font-size: 14px;
    line-height: 1.5;
}


/* ==================================================
   AUTHENTICATION PAGES
================================================== */

body.auth-body {
    position: relative;

    min-height: 100vh;
    min-height: 100dvh;

    background:
        radial-gradient(
            circle at 9% 8%,
            rgba(
                104,
                72,
                180,
                0.14
            ),
            transparent 34%
        ),
        radial-gradient(
            circle at 91% 92%,
            rgba(
                45,
                31,
                83,
                0.12
            ),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #f0eff4 0%,
            #f7f6f8 46%,
            #eceaf1 100%
        );

    color:
        #17151c;

    overflow-x:
        hidden;
}


body.auth-body::before,
body.auth-body::after {
    position: fixed;

    z-index: 0;

    border-radius: 999px;

    content: "";

    pointer-events: none;

    filter: blur(2px);
}


body.auth-body::before {
    top: -220px;
    left: -180px;

    width: 520px;
    height: 520px;

    border:
        1px solid
        rgba(
            80,
            55,
            137,
            0.09
        );

    background:
        rgba(
            255,
            255,
            255,
            0.22
        );
}


body.auth-body::after {
    right: -210px;
    bottom: -260px;

    width: 620px;
    height: 620px;

    border:
        1px solid
        rgba(
            80,
            55,
            137,
            0.08
        );

    background:
        rgba(
            75,
            49,
            130,
            0.035
        );
}


.login-page.auth-page {
    position: relative;

    z-index: 1;

    align-items: center;

    min-height: 100vh;
    min-height: 100dvh;

    padding:
        max(
            34px,
            env(safe-area-inset-top)
        )
        max(
            26px,
            env(safe-area-inset-right)
        )
        max(
            34px,
            env(safe-area-inset-bottom)
        )
        max(
            26px,
            env(safe-area-inset-left)
        );
}


.login-card.auth-shell {
    display: grid;

    grid-template-columns:
        minmax(
            0,
            0.94fr
        )
        minmax(
            0,
            1.06fr
        );

    width: 100%;
    max-width: 1180px;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(
            60,
            48,
            79,
            0.13
        );

    border-radius: 32px;

    background:
        rgba(
            255,
            255,
            255,
            0.88
        );

    box-shadow:
        0 32px 90px
        rgba(
            28,
            20,
            44,
            0.16
        ),
        0 4px 18px
        rgba(
            28,
            20,
            44,
            0.06
        );

    -webkit-backdrop-filter:
        blur(24px);

    backdrop-filter:
        blur(24px);
}


.auth-form-panel {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding:
        52px
        56px;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );
}


.auth-shell-register .auth-form-panel {
    padding-top: 44px;
    padding-bottom: 44px;
}


.login-brand.auth-brand {
    margin-bottom: 30px;
}


.auth-wordmark {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 32px;

    color:
        #17141c;

    font-size: 17px;
    font-weight: 760;

    letter-spacing: -0.35px;

    text-decoration: none;
}


.auth-wordmark-symbol {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.22
        );

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #2c203f 0%,
            #6540a8 100%
        );

    box-shadow:
        0 9px 24px
        rgba(
            76,
            47,
            128,
            0.2
        );

    color:
        #ffffff;

    font-size: 16px;
    font-weight: 800;
}


.auth-brand .auth-eyebrow {
    margin:
        0
        0
        12px;

    color:
        #67489d;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.auth-brand h1 {
    max-width: 510px;

    margin: 0;

    color:
        #17141c;

    font-size:
        clamp(
            32px,
            4vw,
            43px
        );

    font-weight: 760;

    line-height: 1.06;

    letter-spacing: -1.65px;
}


.auth-brand .auth-introduction {
    max-width: 520px;

    margin:
        16px
        0
        0;

    color:
        #6e6976;

    font-size: 15px;
    line-height: 1.62;
}


.login-form.auth-form {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


.auth-field {
    display: flex;

    flex-direction: column;

    min-width: 0;
}


.auth-label-row {
    display: flex;

    align-items: baseline;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 8px;
}


.room-field-label.auth-label {
    margin: 0;

    color:
        #27222e;

    font-size: 13px;
    font-weight: 740;
}


.auth-field-limit {
    flex: 0 0 auto;

    color:
        #8b8592;

    font-size: 11px;
    font-weight: 650;
}


.login-input.auth-input,
.voucher-input.auth-input {
    width: 100%;

    margin: 0;

    border:
        1px solid
        #d9d5df;

    border-radius: 14px;

    outline: none;

    background:
        #f8f7fa;

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.86
        );

    color:
        #17141c;

    transition:
        border-color 150ms ease,
        background-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}


.login-input.auth-input {
    min-height: 52px;

    padding:
        0
        15px;

    font-size: 16px;
}


.voucher-input.auth-input {
    min-height: 112px;

    padding:
        14px
        15px;

    resize: vertical;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 12px;
    line-height: 1.55;

    overflow-wrap: anywhere;
}


.login-input.auth-input::placeholder,
.voucher-input.auth-input::placeholder {
    color:
        #aaa4b0;

    opacity: 1;
}


.login-input.auth-input:hover,
.voucher-input.auth-input:hover {
    border-color:
        #c5becd;

    background:
        #fbfafd;
}


.login-input.auth-input:focus,
.voucher-input.auth-input:focus {
    border-color:
        #6f4bae;

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(
            102,
            67,
            161,
            0.12
        );
}


.login-input.auth-input[aria-invalid="true"],
.voucher-input.auth-input[aria-invalid="true"] {
    border-color:
        #b94752;

    background:
        #fff9fa;

    box-shadow:
        0 0 0 4px
        rgba(
            185,
            71,
            82,
            0.1
        );
}


.login-input.auth-input:-webkit-autofill,
.login-input.auth-input:-webkit-autofill:hover,
.login-input.auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        #17141c;

    box-shadow:
        0 0 0 1000px
        #f8f7fa
        inset;

    transition:
        background-color
        9999s
        ease-out;
}


.auth-field-help {
    margin:
        7px
        2px
        0;

    color:
        #827c89;

    font-size: 11px;
    line-height: 1.48;
}


.login-error.auth-error {
    display: flex;

    flex-direction: column;

    gap: 7px;

    margin: 0;

    padding:
        13px
        14px;

    border:
        1px solid
        rgba(
            167,
            50,
            65,
            0.22
        );

    border-radius: 13px;

    background:
        #fff4f5;

    color:
        #812f3a;

    font-size: 12px;
    line-height: 1.48;
}


.form-error-message {
    display: block;

    font-weight: 620;
}


.form-error-code {
    display: block;

    color:
        #9b5b63;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 10px;
    font-weight: 650;

    letter-spacing: 0.2px;

    overflow-wrap: anywhere;
}


.room-action-button.primary.auth-primary-button {
    min-height: 54px;

    margin-top: 2px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #2c203f 0%,
            #5b3898 100%
        );

    box-shadow:
        0 12px 28px
        rgba(
            68,
            41,
            112,
            0.22
        );

    color:
        #ffffff;

    font-size: 14px;
    font-weight: 760;

    letter-spacing: 0.05px;

    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        opacity 150ms ease;
}


.room-action-button.primary.auth-primary-button:hover:not(
    :disabled
) {
    transform:
        translateY(
            -1px
        );

    box-shadow:
        0 16px 32px
        rgba(
            68,
            41,
            112,
            0.27
        );
}


.room-action-button.primary.auth-primary-button:active:not(
    :disabled
) {
    transform:
        translateY(
            0
        );

    box-shadow:
        0 9px 22px
        rgba(
            68,
            41,
            112,
            0.2
        );
}


.room-action-button.primary.auth-primary-button:disabled {
    cursor:
        wait;

    opacity: 0.62;
}


.auth-recovery-notice {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-top: 22px;

    padding:
        13px
        14px;

    border:
        1px solid
        #e6e1e9;

    border-radius: 13px;

    background:
        #f8f7f9;
}


.auth-recovery-icon {
    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    margin-top: 1px;

    border-radius: 999px;

    background:
        #e9e3f1;

    color:
        #5f427f;

    font-size: 12px;
    font-weight: 850;
}


.auth-recovery-notice p {
    margin: 0;

    color:
        #77717e;

    font-size: 11px;
    line-height: 1.52;
}


.auth-recovery-notice strong {
    color:
        #3a3440;

    font-weight: 750;
}


.onboarding-links.auth-links {
    display: flex;

    flex-direction: row;
    flex-wrap: wrap;

    justify-content: space-between;

    gap:
        10px
        18px;

    margin-top: 24px;

    padding-top: 22px;

    border-top:
        1px solid
        #ece9ef;

    text-align: left;
}


.onboarding-links.auth-links a {
    color:
        #746e7b;

    font-size: 12px;
    font-weight: 650;

    line-height: 1.4;

    text-decoration: none;

    transition:
        color 140ms ease;
}


.onboarding-links.auth-links a:hover {
    color:
        #4c2f78;

    text-decoration: none;
}


.onboarding-links.auth-links .auth-main-link {
    color:
        #563589;

    font-weight: 760;
}


/* ==================================================
   AUTH TRUST PANEL
================================================== */

.auth-trust-panel {
    position: relative;

    display: flex;

    align-items: center;

    min-width: 0;

    overflow: hidden;

    padding:
        58px
        58px;

    background:
        linear-gradient(
            150deg,
            #17131e 0%,
            #21182d 52%,
            #2e1d43 100%
        );

    color:
        #f7f3fb;

    isolation: isolate;
}


.auth-trust-panel::before {
    position: absolute;

    z-index: -2;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background:
        linear-gradient(
            115deg,
            rgba(
                255,
                255,
                255,
                0.035
            ),
            transparent 48%
        );

    content: "";
}


.auth-trust-panel::after {
    position: absolute;

    z-index: -1;

    right: -130px;
    bottom: -150px;

    width: 430px;
    height: 430px;

    border:
        1px solid
        rgba(
            214,
            190,
            255,
            0.1
        );

    border-radius: 999px;

    content: "";
}


.auth-trust-glow {
    position: absolute;

    z-index: -1;

    top: -150px;
    right: -160px;

    width: 440px;
    height: 440px;

    border-radius: 999px;

    background:
        radial-gradient(
            circle,
            rgba(
                137,
                88,
                207,
                0.25
            ),
            transparent 67%
        );

    pointer-events: none;
}


.auth-trust-content {
    position: relative;

    z-index: 1;

    width: 100%;
    max-width: 560px;

    margin:
        auto;
}


.auth-status-badge {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 30px;

    padding:
        0
        12px;

    border:
        1px solid
        rgba(
            216,
            198,
            242,
            0.15
        );

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            0.055
        );

    color:
        #ded1ed;

    font-size: 10px;
    font-weight: 760;

    letter-spacing: 0.65px;

    text-transform: uppercase;
}


.auth-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background:
        #9f7ad5;

    box-shadow:
        0 0 0 4px
        rgba(
            159,
            122,
            213,
            0.12
        );
}


.auth-trust-kicker {
    margin:
        34px
        0
        10px;

    color:
        #b69bd5;

    font-size: 11px;
    font-weight: 760;

    letter-spacing: 1.45px;

    text-transform: uppercase;
}


.auth-trust-panel h2 {
    max-width: 520px;

    margin: 0;

    color:
        #ffffff;

    font-size:
        clamp(
            34px,
            4vw,
            48px
        );

    font-weight: 720;

    line-height: 1.04;

    letter-spacing: -1.8px;
}


.auth-trust-lead {
    max-width: 540px;

    margin:
        18px
        0
        0;

    color:
        #c1b9ca;

    font-size: 14px;
    line-height: 1.67;
}


.auth-security-list {
    display: flex;

    flex-direction: column;

    gap: 0;

    margin:
        36px
        0
        0;

    padding: 0;

    list-style: none;
}


.auth-security-list li {
    display: grid;

    grid-template-columns:
        42px
        minmax(
            0,
            1fr
        );

    gap: 15px;

    padding:
        17px
        0;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );
}


.auth-security-list li:last-child {
    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );
}


.auth-security-mark {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(
            191,
            161,
            228,
            0.2
        );

    border-radius: 12px;

    background:
        rgba(
            134,
            89,
            190,
            0.11
        );

    color:
        #c9afe6;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 10px;
    font-weight: 760;
}


.auth-security-list strong {
    display: block;

    margin-top: 1px;

    color:
        #f7f3fb;

    font-size: 13px;
    font-weight: 720;

    line-height: 1.35;
}


.auth-security-list p {
    margin:
        5px
        0
        0;

    color:
        #aaa2b4;

    font-size: 12px;
    line-height: 1.55;
}


.auth-principle {
    margin:
        30px
        0
        0;

    padding:
        18px
        19px;

    border:
        1px solid
        rgba(
            194,
            161,
            232,
            0.15
        );

    border-radius: 15px;

    background:
        rgba(
            255,
            255,
            255,
            0.045
        );
}


.auth-principle p {
    margin: 0;

    color:
        #ded5e7;

    font-size: 13px;
    font-weight: 560;

    line-height: 1.6;
}


.auth-security-caveat {
    margin:
        19px
        0
        0;

    color:
        #82798c;

    font-size: 10px;
    line-height: 1.55;
}


/* ==================================================
   AUTH ACCESSIBILITY
================================================== */

.auth-noscript {
    position: relative;

    z-index: 20;

    width:
        calc(
            100%
            - 32px
        );

    max-width: 900px;

    margin:
        16px
        auto
        0;

    padding:
        14px
        16px;

    border:
        1px solid
        #b94752;

    border-radius: 13px;

    background:
        #fff4f5;

    color:
        #7c2833;

    font-size: 13px;
    font-weight: 650;

    line-height: 1.5;
}


.auth-wordmark:focus-visible,
.auth-links a:focus-visible,
.auth-primary-button:focus-visible {
    outline:
        3px solid
        rgba(
            112,
            74,
            174,
            0.34
        );

    outline-offset: 3px;
}


.auth-trust-panel ::selection {
    background:
        rgba(
            173,
            126,
            228,
            0.34
        );

    color:
        #ffffff;
}


/* ==================================================
   AUTH RESPONSIVE
================================================== */

@media (
    max-width: 980px
) {

    .login-card.auth-shell {
        grid-template-columns:
            minmax(
                0,
                1fr
            );

        max-width: 720px;
    }


    .auth-form-panel {
        padding:
            48px
            52px;
    }


    .auth-shell-register .auth-form-panel {
        padding:
            44px
            52px;
    }


    .auth-trust-panel {
        padding:
            48px
            52px;
    }


    .auth-trust-content {
        max-width: none;
    }


    .auth-security-list {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        column-gap: 26px;
    }


    .auth-security-list li:nth-child(
        2
    ) {
        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                0.09
            );
    }


    .auth-security-list li:last-child {
        border-bottom: 0;
    }

}


@media (
    max-width: 680px
) {

    .login-page.auth-page {
        align-items:
            flex-start;

        padding:
            max(
                16px,
                env(safe-area-inset-top)
            )
            max(
                12px,
                env(safe-area-inset-right)
            )
            max(
                16px,
                env(safe-area-inset-bottom)
            )
            max(
                12px,
                env(safe-area-inset-left)
            );
    }


    .login-card.auth-shell {
        border-radius: 24px;

        box-shadow:
            0 20px 54px
            rgba(
                28,
                20,
                44,
                0.14
            );
    }


    .auth-form-panel,
    .auth-shell-register .auth-form-panel {
        padding:
            30px
            23px;
    }


    .auth-wordmark {
        margin-bottom: 27px;
    }


    .auth-brand h1 {
        font-size: 34px;

        letter-spacing: -1.25px;
    }


    .auth-brand .auth-introduction {
        font-size: 14px;
    }


    .auth-label-row {
        gap: 10px;
    }


    .auth-field-limit {
        font-size: 10px;
    }


    .onboarding-links.auth-links {
        flex-direction: column;

        align-items: flex-start;
    }


    .auth-trust-panel {
        padding:
            38px
            23px;
    }


    .auth-trust-panel h2 {
        font-size: 34px;

        letter-spacing: -1.25px;
    }


    .auth-security-list {
        display: flex;

        flex-direction: column;
    }


    .auth-security-list li:nth-child(
        2
    ) {
        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                0.09
            );
    }


    .auth-security-list li:last-child {
        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.09
            );
    }

}


@media (
    max-width: 400px
) {

    .auth-form-panel,
    .auth-shell-register .auth-form-panel {
        padding:
            27px
            18px;
    }


    .auth-trust-panel {
        padding:
            34px
            18px;
    }


    .auth-brand h1,
    .auth-trust-panel h2 {
        font-size: 30px;
    }


    .auth-security-list li {
        grid-template-columns:
            38px
            minmax(
                0,
                1fr
            );

        gap: 12px;
    }


    .auth-security-mark {
        width: 34px;
        height: 34px;
    }

}


@media (
    prefers-reduced-motion: reduce
) {

    .auth-input,
    .auth-primary-button,
    .auth-links a {
        transition:
            none !important;
    }

}