/* login.css */


/* ================================================================
   SAVE YOUR COINS
   LOGIN PAGE
================================================================ */


/* ================================================================
   PAGE
================================================================ */

body.auth_page.login_page {

    min-height:
        100vh;

    margin:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        32px 24px;

    overflow-x:
        hidden;

    color:
        #203a50;

    background:
        linear-gradient(
            135deg,
            #edf8f5 0%,
            #f7fafb 48%,
            #e7f4f8 100%
        );
}


/* ================================================================
   BACK LINK
================================================================ */

.auth_page.login_page
.auth_back_link {

    width:
        min(
            100%,
            1080px
        );

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 auto 18px;

    color:
        #607b8f;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color 0.15s ease,
        transform 0.15s ease;
}


.auth_page.login_page
.auth_back_link:hover {

    color:
        #2980b9;

    transform:
        translateX(-2px);
}



/* ================================================================
   MAIN LOGIN CARD
================================================================ */

.auth_page.login_page
.auth_page_container {

    width:
        min(
            100%,
            1080px
        );

    min-height:
        600px;

    display:
        grid;

    grid-template-columns:
        46% 54%;

    margin:
        0 auto;

    overflow:
        hidden;

    border:
        1px solid
        rgba(32, 58, 80, 0.08);

    border-radius:
        24px;

    background:
        #ffffff;

    box-shadow:
        0 24px 70px
        rgba(32, 58, 80, 0.13);
}



/* ================================================================
   LEFT BRAND PANEL
================================================================ */

.auth_page.login_page
.auth_brand_panel {

    position:
        relative;

    min-width:
        0;

    min-height:
        600px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        34px;

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        linear-gradient(
            150deg,
            #193d52 0%,
            #1d5d65 58%,
            #21816f 100%
        );
}


.auth_page.login_page
.auth_brand_panel::before {

    content:
        "";

    position:
        absolute;

    width:
        320px;

    height:
        320px;

    top:
        -190px;

    right:
        -135px;

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

    border-radius:
        50%;

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


.auth_page.login_page
.auth_brand_panel::after {

    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    left:
        -125px;

    bottom:
        -110px;

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

    border-radius:
        50%;
}


.auth_page.login_page
.auth_brand_header,
.auth_page.login_page
.auth_login_brand_copy,
.auth_page.login_page
.auth_coino_compact,
.auth_page.login_page
.auth_login_reassurance {

    position:
        relative;

    z-index:
        2;
}



/* ================================================================
   LOGO
================================================================ */

.auth_page.login_page
.auth_brand_header {

    display:
        flex;

    align-items:
        flex-start;
}


.auth_page.login_page
.auth_brand_logo {

    width:
        165px;

    height:
        auto;

    max-height:
        58px;

    object-fit:
        contain;

    object-position:
        left center;
}



/* ================================================================
   LEFT PANEL COPY
================================================================ */

.auth_page.login_page
.auth_login_brand_copy {

    margin:
        52px 0 auto;
}


.auth_page.login_page
.auth_panel_eyebrow {

    margin:
        0 0 11px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.6px;

    text-transform:
        uppercase;
}


.auth_page.login_page
.auth_login_brand_copy h1 {

    max-width:
        390px;

    margin:
        0 0 17px;

    color:
        #ffffff;

    font-size:
        clamp(
            39px,
            4vw,
            50px
        );

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -1.7px;
}


.auth_page.login_page
.auth_login_brand_copy > p:last-child {

    max-width:
        390px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.76);

    font-size:
        14px;

    line-height:
        1.7;
}



/* ================================================================
   COINO MESSAGE
================================================================ */

.auth_page.login_page
.auth_coino_compact {

    display:
        grid;

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

    align-items:
        center;

    gap:
        13px;

    margin-top:
        32px;

    padding:
        14px 16px;

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

    border-radius:
        16px;

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

    backdrop-filter:
        blur(10px);
}


.auth_page.login_page
.auth_coino_compact img {

    width:
        50px;

    height:
        50px;

    border-radius:
        50%;

    object-fit:
        contain;
}


.auth_page.login_page
.auth_coino_compact span {

    display:
        block;

    margin-bottom:
        3px;

    color:
        rgba(255, 255, 255, 0.65);

    font-size:
        10px;

    font-weight:
        700;
}


.auth_page.login_page
.auth_coino_compact p {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        13px;

    line-height:
        1.55;
}



/* ================================================================
   REASSURANCE PILLS
================================================================ */

.auth_page.login_page
.auth_login_reassurance {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        17px;
}


.auth_page.login_page
.auth_login_reassurance span {

    padding:
        6px 9px;

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

    border-radius:
        999px;

    color:
        rgba(255, 255, 255, 0.69);

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

    font-size:
        9px;

    font-weight:
        600;
}



/* ================================================================
   RIGHT FORM PANEL
================================================================ */

.auth_page.login_page
.auth_form_panel {

    min-width:
        0;

    min-height:
        600px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        46px 58px;

    background:
        #ffffff;
}


.auth_page.login_page
.auth_form_inner {

    width:
        100%;

    max-width:
        470px;
}



/* ================================================================
   FORM HEADER
================================================================ */

.auth_page.login_page
.auth_form_header {

    margin:
        0 0 28px;
}


.auth_page.login_page
.auth_form_eyebrow {

    margin:
        0 0 7px;

    color:
        #607b8f;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;
}


.auth_page.login_page
.auth_form_header h2 {

    margin:
        0 0 7px;

    color:
        #203a50;

    font-size:
        clamp(
            27px,
            3vw,
            34px
        );

    font-weight:
        800;

    line-height:
        1.18;

    letter-spacing:
        -0.9px;
}


.auth_page.login_page
.auth_form_header > p:last-child {

    margin:
        0;

    color:
        #718096;

    font-size:
        12px;

    line-height:
        1.6;
}



/* ================================================================
   MOBILE BRAND
================================================================ */

.auth_page.login_page
.auth_mobile_brand {

    display:
        none;
}



/* ================================================================
   FORM
================================================================ */

.auth_page.login_page
#login_form {

    width:
        100%;
}



/* ================================================================
   INPUT GROUPS
================================================================ */

.auth_page.login_page
.auth_input_group {

    width:
        100%;

    margin:
        0 0 18px;
}


.auth_page.login_page
.auth_input_group > label,
.auth_page.login_page
.auth_label_row label {

    display:
        block;

    margin:
        0;

    color:
        #203a50;

    font-size:
        12px;

    font-weight:
        700;
}


.auth_page.login_page
.auth_label_row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        7px;
}


.auth_page.login_page
.auth_input_group > label {

    margin-bottom:
        7px;
}



/* ================================================================
   INPUT SHELL
================================================================ */

.auth_page.login_page
.auth_input_shell {

    position:
        relative;

    width:
        100%;

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    border:
        1px solid
        #d9e3e8;

    border-radius:
        12px;

    background:
        #fbfdfe;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}


.auth_page.login_page
.auth_input_shell:hover {

    border-color:
        #c7d6df;
}


.auth_page.login_page
.auth_input_shell:focus-within {

    border-color:
        #3498db;

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(52, 152, 219, 0.09);
}



/* ================================================================
   INPUT ICON
================================================================ */

.auth_page.login_page
.auth_input_icon {

    position:
        static;

    width:
        44px;

    flex:
        0 0 44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #8196a5;

    font-size:
        14px;

    pointer-events:
        none;
}



/* ================================================================
   INPUT
================================================================ */

.auth_page.login_page
.auth_input_shell input {

    position:
        static;

    width:
        100%;

    min-width:
        0;

    height:
        50px;

    min-height:
        50px;

    flex:
        1 1 auto;

    margin:
        0;

    padding:
        0 12px 0 0;

    border:
        0;

    border-radius:
        0;

    outline:
        0;

    color:
        #203a50;

    background:
        transparent;

    font:
        inherit;

    font-size:
        13px;

    box-shadow:
        none;
}


.auth_page.login_page
.auth_input_shell input::placeholder {

    color:
        #9aa9b5;

    opacity:
        1;
}



/* ================================================================
   PASSWORD SHOW BUTTON
================================================================ */

.auth_page.login_page
.password_toggle {

    position:
        static;

    inset:
        auto;

    width:
        auto;

    height:
        auto;

    min-width:
        58px;

    min-height:
        34px;

    flex:
        0 0 auto;

    margin:
        0 8px 0 4px;

    padding:
        0 10px;

    border:
        0;

    border-radius:
        8px;

    color:
        #2980b9;

    background:
        transparent;

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1;

    cursor:
        pointer;

    transform:
        none;

    transition:
        color 0.15s ease,
        background 0.15s ease;
}


.auth_page.login_page
.password_toggle:hover,
.auth_page.login_page
.password_toggle:focus-visible {

    color:
        #206b9a;

    background:
        rgba(52, 152, 219, 0.08);

    outline:
        none;

    transform:
        none;
}



/* ================================================================
   FORGOT PASSWORD
================================================================ */

.auth_page.login_page
.forgot_password_link {

    color:
        #2980b9;

    font-size:
        10px;

    font-weight:
        700;

    text-decoration:
        none;
}


.auth_page.login_page
.forgot_password_link:hover {

    text-decoration:
        underline;
}



/* ================================================================
   LOGIN BUTTON
================================================================ */

.auth_page.login_page
.auth_submit_button {

    width:
        100%;

    min-height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin:
        4px 0 0;

    padding:
        0 18px;

    border:
        0;

    border-radius:
        11px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #2980b9 0%,
            #1abc9c 100%
        );

    box-shadow:
        0 9px 22px
        rgba(41, 128, 185, 0.18);

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;
}


.auth_page.login_page
.auth_submit_button:hover:not(:disabled) {

    transform:
        translateY(-1px);

    box-shadow:
        0 12px 27px
        rgba(41, 128, 185, 0.24);
}


.auth_page.login_page
.auth_submit_button:disabled {

    opacity:
        0.62;

    cursor:
        not-allowed;
}


.auth_page.login_page
.auth_submit_arrow {

    font-size:
        15px;
}



/* ================================================================
   LOGIN MESSAGE
================================================================ */

.auth_page.login_page
.auth_message {

    min-height:
        0;

    margin:
        12px 0 0;

    font-size:
        11px;

    line-height:
        1.5;

    text-align:
        center;
}


.auth_page.login_page
.auth_message:empty {

    display:
        none;
}



/* ================================================================
   DIVIDER
================================================================ */

.auth_page.login_page
.auth_simple_divider {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        27px 0 17px;
}


.auth_page.login_page
.auth_simple_divider::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        50%;

    height:
        1px;

    background:
        #e1e9ed;
}


.auth_page.login_page
.auth_simple_divider span {

    position:
        relative;

    z-index:
        1;

    padding:
        0 11px;

    color:
        #8595a2;

    background:
        #ffffff;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.9px;

    text-transform:
        uppercase;
}



/* ================================================================
   CREATE ACCOUNT PROMPT
================================================================ */

.auth_page.login_page
.auth_create_account_prompt {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        15px;

    border:
        1px solid
        #dfe7ec;

    border-radius:
        13px;

    background:
        #f8fbfc;
}


.auth_page.login_page
.auth_create_account_prompt strong {

    display:
        block;

    margin:
        0 0 4px;

    color:
        #203a50;

    font-size:
        11px;
}


.auth_page.login_page
.auth_create_account_prompt p {

    margin:
        0;

    color:
        #718096;

    font-size:
        11px;

    line-height:
        1.45;
}


.auth_page.login_page
.auth_secondary_action {

    min-height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    padding:
        0 12px;

    border:
        1px solid
        rgba(41, 128, 185, 0.20);

    border-radius:
        9px;

    color:
        #2980b9;

    background:
        #ffffff;

    font-size:
        9px;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}


.auth_page.login_page
.auth_secondary_action:hover {

    border-color:
        rgba(41, 128, 185, 0.38);

    background:
        #f2f9fd;
}



/* ================================================================
   SECURITY NOTE
================================================================ */

.auth_page.login_page
.auth_login_security_note {

    margin:
        17px 0 0;

    color:
        #8293a0;

    font-size:
        10px;

    line-height:
        1.5;

    text-align:
        center;
}



/* ================================================================
   TWO FACTOR SECTION
================================================================ */

.auth_page.login_page
.verification_section {

    width:
        100%;
}



/* ================================================================
   TABLET
================================================================ */

@media (max-width: 850px) {

    body.auth_page.login_page {

        justify-content:
            flex-start;

        padding:
            24px 18px;
    }


    .auth_page.login_page
    .auth_page_container {

        grid-template-columns:
            1fr;
    }


    .auth_page.login_page
    .auth_brand_panel {

        min-height:
            auto;

        padding:
            28px;
    }


    .auth_page.login_page
    .auth_login_brand_copy {

        margin:
            32px 0 24px;
    }


    .auth_page.login_page
    .auth_login_brand_copy h1 {

        max-width:
            600px;

        font-size:
            40px;
    }


    .auth_page.login_page
    .auth_login_brand_copy > p:last-child {

        max-width:
            600px;
    }


    .auth_page.login_page
    .auth_login_reassurance {

        display:
            none;
    }


    .auth_page.login_page
    .auth_form_panel {

        min-height:
            auto;

        padding:
            40px 34px;
    }

}



/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 600px) {

    body.auth_page.login_page {

        padding:
            16px 12px 24px;
    }


    .auth_page.login_page
    .auth_back_link {

        margin-bottom:
            13px;
    }


    .auth_page.login_page
    .auth_page_container {

        width:
            100%;

        border-radius:
            19px;
    }


    .auth_page.login_page
    .auth_brand_panel {

        display:
            none;
    }


    .auth_page.login_page
    .auth_form_panel {

        padding:
            28px 20px 30px;
    }


    .auth_page.login_page
    .auth_mobile_brand {

        display:
            flex;

        align-items:
            center;

        gap:
            10px;

        margin-bottom:
            25px;
    }


    .auth_page.login_page
    .auth_mobile_brand img:first-child {

        width:
            38px;

        height:
            38px;
    }


    .auth_page.login_page
    .auth_mobile_brand img:last-child {

        width:
            126px;

        height:
            auto;
    }


    .auth_page.login_page
    .auth_form_header h2 {

        font-size:
            27px;
    }


    .auth_page.login_page
    .auth_create_account_prompt {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .auth_page.login_page
    .auth_secondary_action {

        width:
            100%;
    }

}

/* ================================================================
   LOGIN TWO-FACTOR COLOR ISOLATION

   The login experience uses its own light authentication design.
   Prevent application dark-theme variables from leaking into the
   white two-factor panel.
================================================================ */

.auth_page.login_page
.verification_section {

    color: #203a50;
}


.auth_page.login_page
.verification_header h2 {

    color: #203a50;
}


.auth_page.login_page
.verification_header p {

    color: #71869a;
}


.auth_page.login_page
.verification_header strong {

    color: #203a50;
}


.auth_page.login_page
.verification_section
.auth_form_eyebrow {

    color: #607b8f;
}


.auth_page.login_page
.auth_two_factor_icon {

    color: #2980b9;

    background:
        rgba(41, 128, 185, 0.08);
}


.auth_page.login_page
.verification_section
.auth_input_group label {

    color: #203a50;
}


.auth_page.login_page
.auth_code_input {

    border-color:
        rgba(32, 58, 80, 0.18);

    color: #203a50;

    background: #f7fafc;
}


.auth_page.login_page
.auth_code_input::placeholder {

    color: #8fa0ad;

    opacity: 1;
}


.auth_page.login_page
.auth_code_input:focus {

    border-color: #2980b9;

    background: #ffffff;

    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(41, 128, 185, 0.10);
}


.auth_page.login_page
.two_factor_trust_option {

    border-color:
        rgba(32, 58, 80, 0.18);

    background: #f8fafb;
}


.auth_page.login_page
.two_factor_trust_option:hover {

    border-color:
        rgba(41, 128, 185, 0.35);

    background: #f1f8fc;
}


.auth_page.login_page
.two_factor_trust_option strong {

    color: #203a50;
}


.auth_page.login_page
.two_factor_trust_option small {

    color: #71869a;
}