.signin_content {
    position: relative;
    width: 100vw;
    z-index: 1;
    min-height: calc(100vh - 226px);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* full-width split auth: light visual | dark form (see mockup) */
.signin_content.auth_page_split_root {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
    min-height: inherit;
    align-items: stretch;
    justify-content: stretch;
}

.auth_page_split_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-height: inherit;
    align-items: stretch;
}

.auth_page_split_visual {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    background: transparent;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.auth_name_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 22px;
}

.auth_name_row .signin_input {
    margin-top: 0;
}

@media screen and (max-width: 420px) {
    .auth_name_row {
        grid-template-columns: 1fr;
    }
}

/* aurora panel — fills padded left column */
.aurora_square {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    isolation: isolate;
    background-color: rgb(7, 11, 24);
    background-image: url("/_assets/images/aurora_square_bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow:
        inset 0 0 110px rgba(0, 0, 0, 0.16),
        inset 0 -80px 120px rgba(0, 10, 22, 0.38),
        inset 60px 0 100px rgba(0, 8, 20, 0.14),
        inset -60px 0 100px rgba(18, 8, 28, 0.13);
}

.aurora_square_home_row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 16px 18px 12px 18px;
    box-sizing: border-box;
    pointer-events: auto;
}

/* desktop: mobile top bar hidden; home row lives inside .aurora_square */
.auth_page_split_mobile_top_bar {
    display: none;
}

.auth_page_split_corner_mobile_bar {
    display: none;
}

.auth_page_split_mobile_top_bar_leading {
    min-width: 0;
    flex: 1 1 auto;
}

.aurora_square_back_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.aurora_square_back_btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.aurora_square_back_btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.65);
    outline-offset: 2px;
}

.aurora_square_back_icon {
    display: block;
    margin-top: 1px;
}

.aurora_square_brand_link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.02em;
}

.aurora_square_brand_link:hover {
    color: rgba(255, 255, 255, 0.9);
}

.aurora_square_brand_logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    object-fit: contain;
}

.aurora_square_brand_title {
    white-space: nowrap;
}

.aurora_square_zentro_ad {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 52px 24px 80px;
    box-sizing: border-box;
    text-align: center;
    pointer-events: none;
}

.aurora_square_zentro_ad_eyebrow {
    display: inline-block;
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.aurora_square_zentro_ad_title {
    margin: 0 0 10px;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 1.1;
}

.aurora_square_zentro_ad_copy {
    margin: 0;
    max-width: 26rem;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.72);
}

.aurora_square_zentro_ad_cta_row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
    pointer-events: auto;
}

.aurora_square_zentro_ad_btn,
.aurora_square_zentro_ad_btn_secondary {
    pointer-events: auto;
}

/* footer: desktop = overlay bottom of .auth_page_split_visual; mobile = below .aurora_square */
.aurora_square_footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    margin: 0;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 12px 23px 16px 18px;
    box-sizing: border-box;
    row-gap: 4px;
    background: none;
}

@media screen and (min-width: 901px) {
    .auth_page_split_visual .aurora_square_footer {
        padding-right: 30px;
        padding-bottom: 22px;
        margin-right: 14px;
        margin-bottom: 14px;
    }
}

.auth_page_split_side {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: min(640px, calc(100dvh - 200px));
    background: transparent;
    color: #fff;
}

.auth_page_split_corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 22px clamp(20px, 3vw, 32px);
    text-align: right;
}

.auth_page_split_alternate {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.45;
}

.auth_page_split_alternate_btn {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth_page_split_alternate_btn:hover {
    color: rgba(255, 255, 255, 0.92);
}

.auth_page_split_center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 100%;
    margin-left: 0;
    padding: clamp(40px, 6vh, 72px) clamp(24px, 4vw, 40px);
    overflow-y: auto;
    box-sizing: border-box;
}

.auth_split_form_panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    max-width: 440px;
    max-height: fit-content;
    height: fit-content;
    padding: 0;
    box-sizing: border-box;
    min-width: 0;
    flex: 0 0 auto;
    margin-top: -55px;
}

.auth_split_form_header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 0;
}

.auth_split_title {
    margin-bottom: 0;
}

@keyframes auth_title_reveal {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.auth_title_reveal {
    animation: auth_title_reveal 0.55s cubic-bezier(0.34, 1.15, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .auth_title_reveal {
        animation: none;
    }

    .signin_submitbutton,
    .signin_submitbutton_label {
        transition: none;
    }

    .signin_submitbutton:hover:not(:disabled),
    .signin_submitbutton:hover:not(:disabled) .signin_submitbutton_label {
        transform: none;
    }

    .auth_open_account_btn {
        transition: none;
    }

    .aurora_square .button {
        transition: none;
    }

    .aurora_square .button:hover {
        transform: none;
    }
}

/* stacked layers: inactive out of flow so row height = active form only (keeps block centred) */
.auth_form_layers {
    display: grid;
    grid-template: auto / minmax(0, 1fr);
    width: 100%;
    margin-top: 6px;
    position: relative;
    min-height: 0;
}

.auth_form_layer {
    grid-area: 1 / 1;
    width: 100%;
    min-width: 0;
    transition: none;
}

.auth_form_layer[data-active="true"] {
    position: relative;
    pointer-events: auto;
    opacity: 1;
    transform: none;
    z-index: 1;
    visibility: visible;
}

.auth_form_layer[data-active="false"] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
    opacity: 0;
    transform: none;
    z-index: 0;
    visibility: hidden;
}

.auth_form_layer .signin_input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.auth_inline_hint {
    margin: -22px 0 0 10px;
    padding-bottom: 10px;
    font-size: 14px;
    line-height: 1.35;
    min-height: 1.35em;
}

.auth_inline_hint_ok {
    color: rgba(140, 255, 190, 0.95);
}

.auth_inline_hint_bad {
    color: #ff8e8e;
}

.auth_inline_hint_pending {
    color: rgba(255, 255, 255, 0.55);
}

.auth_inline_hint_username,
.auth_inline_hint_password_match {
    text-align: right;
    margin-left: 0;
    padding-right: 10px;
}

/* keep slot in layout while hiding copy (stops signup fields jumping when hints appear) */
.auth_inline_hint_reserve {
    visibility: hidden;
}

@media screen and (max-width: 900px) {
    /* stacked layout: home row strip (top) → sign-in → aurora+zentro+footer pinned to bottom */
    .auth_page_split_grid {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .auth_page_split_mobile_top_bar {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
        flex-shrink: 0;
        order: 1;
        padding: 20px 20px 6px;
        box-sizing: border-box;
        width: 100%;
    }

    .auth_page_split_mobile_top_bar_leading {
        align-self: flex-start;
        flex: 0 1 auto;
        min-width: 0;
    }

    .auth_page_split_mobile_top_bar .aurora_square_home_row_mobile_strip {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        z-index: 1;
        padding-top: 0;
        padding-right: 20px;
        padding-bottom: 30px;
        padding-left: 0;
        margin: 0;
        margin-bottom: 10px;
        margin-right: 10px;
        min-width: 0;
        width: max-content;
        max-width: 100%;
    }

    .auth_page_split_corner_mobile_bar {
        display: block;
        flex: 0 0 auto;
        flex-shrink: 0;
        margin-left: auto;
        align-self: flex-start;
        padding: 0 0 0 8px;
        text-align: right;
        width: auto;
        max-width: calc(100% - 120px);
    }

    .auth_page_split_corner_mobile_bar .auth_page_split_alternate {
        text-align: right;
        margin: 0;
        width: 100%;
    }

    .auth_page_split_corner {
        position: static;
        top: auto;
        right: auto;
    }

    .auth_page_split_corner_desktop_only {
        display: none !important;
    }

    .aurora_square_home_row_aurora_panel {
        display: none !important;
    }

    .auth_page_split_visual {
        order: 3;
        flex: 0 0 auto;
        margin-top: auto;
        height: auto;
        min-height: 0;
        padding: 12px 20px 20px;
        box-sizing: border-box;
        border-right: none;
        border-bottom: none;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .auth_page_split_visual .aurora_square {
        height: auto;
        min-height: 260px;
    }

    .auth_page_split_visual .aurora_square_footer {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        padding: 10px 2px 0 0;
        margin-top: 6px;
        justify-content: flex-end;
    }

    .auth_page_split_side {
        order: 2;
        flex: 1 1 auto;
        min-height: 0;
    }

    .auth_page_split_center {
        padding-top: 18px;
    }
}

                .signin_heading1 {
                    font-size: 40px;
                    font-weight: 700;
                    letter-spacing: 0.6px;
                    color: white;
                    margin: 0;
                    margin-bottom: -10px;
                }

                .signin_heading1.auth_split_title {
                    margin-bottom: 20px;
                }

                .signlink {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    width: max-content;
                }

                @media screen and (max-width: 600px) {
                    .signlink {
                        margin-top: 10px;
                    }
                }

                    .signup_heading {
                        font-size: 16px;
                        font-weight: 300;
                        letter-spacing: 0px;
                        color: white;
                        margin: 0;
                        margin-left: 16px;
                    }

                    @media screen and (max-width: 600px) {
                        .signup_heading {
                            margin-left: 0px;
                        }
                    }

                    .signup_link {
                        color: white;
                        font-weight: 500;
                        margin-left: 4px;
                        text-decoration: underline;
                    }

                    .signup_link {
                        text-decoration: underline;
                    }

                    .tb {
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                    }

            .signin_form {
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                width: 100%;
                min-width: 0;
            }

                .forgotp {
                    width: inherit;
                    color: white;
                    text-align: right;
                    margin-top: 7px;
                    margin-bottom: -10px;
                    opacity: 0.7;
                }

                .forgotp:hover {
                    opacity: 1;
                }

                .usernameaval {
                    position: absolute;
                    width: 410px;
                    text-align: right;
                    margin-top: 22px;
                    z-index: 0;
                }

                @media screen and (max-width: 430px) {
                    .usernameaval {
                        width: calc(84vw + 10px);
                    }
                }

                .signin_input {
                    z-index: 1;
                    width: 100%;
                    max-width: 100%;
                    box-sizing: border-box;
                    height: auto;
                    color: rgba(255, 255, 255, 0.95);
                    font-size: 17px;
                    letter-spacing: +0.5px;
                    background-color: transparent;
                    margin-top: 22px;
                    outline: none;
                    border-width: 0px;
                    border-color: rgba(255, 255, 255, 0.842);
                    border-bottom-width: 2px;
                    border-radius: 6px;
                    border-style: solid;
                    padding-left: 10px;
                    padding-right: 10px;
                    padding-bottom: 4px;
                }
                

                .signin_buttoncontainer {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-end;
                }

                    .signin_submitbutton {
                        margin-top: 28px;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        appearance: none;
                        background-color: transparent;
                        color: white;
                        padding-top: 4px;
                        padding-bottom: 4px;
                        width: 70px;
                        box-sizing: border-box;
                        border-radius: 6px;
                        border-width: 0px;
                        border-left-width: 1px;
                        border-right-width: 1px;
                        border-color: white;
                        border-style: solid;
                        font-size: 19px;
                        font-weight: 500;
                        letter-spacing: 0px;
                        font-family: inherit;
                        transform-origin: right center;
                        transition: transform 250ms ease-in-out;
                    }

                    .signin_submitbutton_label {
                        display: inline-block;
                        transform-origin: center center;
                        transition: transform 250ms ease-in-out;
                    }

                    .signin_submitbutton:hover:not(:disabled) {
                        cursor: pointer;
                        /* ~100px visual width vs 70px layout; no width animation */
                        transform: scaleX(calc(100 / 70));
                    }

                    .signin_submitbutton:hover:not(:disabled) .signin_submitbutton_label {
                        /* cancel horizontal stretch on label glyphs */
                        transform: scaleX(calc(70 / 100));
                    }

                    .signin_submitbutton:disabled {
                        cursor: not-allowed;
                        opacity: 0.5;
                        transform: none;
                    }

                    .signin_submitbutton:focus-visible {
                        outline: 2px solid rgba(255, 255, 255, 0.65);
                        outline-offset: 2px;
                    }

.errormessage_container {
    margin-bottom: 12px;
}

.errormessage_container .errortext {
    margin: 0;
    color: #ff6b6b;
    font-size: 15px;
}

/* open account (oauth) — shared sign-in / sign-up block */
.auth_open_account_block {
    width: 100%;
    margin-bottom: 4px;
}

.auth_open_account_btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.auth_open_account_btns_single {
    grid-template-columns: 1fr;
}

.auth_open_account_btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.94);
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.auth_open_account_btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
}

.auth_open_account_btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.auth_open_account_btn_full {
    grid-column: 1 / -1;
}

.auth_open_account_icon {
    flex-shrink: 0;
}

.auth_open_account_icon_apple {
    width: 23px;
    height: 23px;
    margin-top: -2px;
}

.auth_open_account_divider {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 22px;
    margin-bottom: -20px;
    box-sizing: border-box;
}

.auth_open_account_divider_line {
    flex: 1 1 auto;
    min-width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
}

.auth_open_account_divider_text {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12px;
    color: rgba(255, 255, 255, 0.62);
    text-transform: lowercase;
}

@media screen and (max-width: 420px) {
    .auth_open_account_btns {
        grid-template-columns: 1fr;
    }

    .auth_open_account_btn_full {
        grid-column: 1;
    }
}