.login-page {

    min-height: 100vh;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(23, 78, 166, .11),
            transparent 24%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(37, 99, 235, .10),
            transparent 27%
        ),
        #f4f7fc;
}

.login-card {

    background:
        #ffffff;

    border-radius:
        22px;

    overflow: hidden;

    box-shadow:
        0 22px 60px
        rgba(17, 44, 90, .14);

    border:
        1px solid
        rgba(15, 55, 110, .08);
}

.login-brand-panel {

    position: relative;

    background:
        linear-gradient(
            145deg,
            #0a2c64 0%,
            #174ea6 60%,
            #2563eb 100%
        );

    color:
        #ffffff;

    min-height:
        560px;

    overflow: hidden;
}

.login-brand-panel::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            .06
        );

    top: -120px;
    right: -110px;
}

.login-brand-panel::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    border:
        45px solid
        rgba(
            255,
            255,
            255,
            .045
        );

    bottom: -100px;
    left: -70px;
}

.brand-content {

    position: relative;

    z-index: 2;

    padding:
        58px 48px;

    height: 100%;

    display: flex;

    flex-direction:
        column;

    justify-content:
        center;
}

.logo-wrapper {

    width: 90px;
    height: 90px;

    display: flex;

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

    background:
        rgba(
            255,
            255,
            255,
            .96
        );

    border-radius:
        20px;

    margin-bottom:
        26px;

    box-shadow:
        0 12px 30px
        rgba(
            0,
            0,
            0,
            .15
        );
}

.login-logo {

    width: 72px;
    height: 72px;

    object-fit:
        contain;
}

.brand-badge {

    display:
        inline-flex;

    width:
        fit-content;

    padding:
        6px 12px;

    margin-bottom:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            .12
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .16
        );

    border-radius:
        999px;

    font-size:
        .76rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}

.brand-content h1 {

    margin-bottom:
        18px;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -.03em;
}

.brand-content h1 span {

    display:
        block;

    color:
        #bfd7ff;
}

.brand-content p {

    max-width:
        430px;

    margin-bottom:
        28px;

    color:
        rgba(
            255,
            255,
            255,
            .80
        );

    font-size:
        1rem;

    line-height:
        1.7;
}

.security-note {

    display: flex;

    gap: 12px;

    align-items:
        flex-start;

    padding:
        15px;

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            .09
        );

    color:
        rgba(
            255,
            255,
            255,
            .88
        );

    font-size:
        .88rem;
}

.security-note i {

    font-size:
        1.3rem;

    color:
        #b9dcff;
}

.login-form-panel {

    min-height:
        560px;

    padding:
        58px 50px;

    display: flex;

    flex-direction:
        column;

    justify-content:
        center;
}

.login-form-panel h2 {

    font-weight:
        750;

    color:
        #172033;

    letter-spacing:
        -.02em;
}

.login-input {

    border-radius:
        12px;

    overflow:
        hidden;

    border:
        1px solid
        #dfe5ee;
}

.login-input:focus-within {

    border-color:
        #4d83d6;

    box-shadow:
        0 0 0 .2rem
        rgba(
            23,
            78,
            166,
            .10
        );
}

.login-input
.input-group-text {

    background:
        #f8fafc;

    border: 0;

    color:
        #58708f;

    padding-left:
        16px;
}

.login-input
.form-control {

    border: 0;

    box-shadow:
        none !important;

    min-height:
        50px;
}

.password-toggle {

    border: 0;

    background:
        #ffffff;

    color:
        #60758e;

    padding:
        0 16px;
}

.password-toggle:hover {

    color:
        #174ea6;
}

.login-btn {

    min-height:
        50px;

    border: 0;

    border-radius:
        12px;

    font-weight:
        650;

    background:
        linear-gradient(
            135deg,
            #174ea6,
            #2563eb
        );

    box-shadow:
        0 10px 24px
        rgba(
            23,
            78,
            166,
            .20
        );
}

.login-btn:hover {

    background:
        linear-gradient(
            135deg,
            #123f89,
            #1d55c7
        );
}

.login-footer {

    text-align:
        center;

    margin-top:
        28px;

    color:
        #8895a7;

    font-size:
        .78rem;
}

.system-footer {

    margin-top:
        20px;

    font-size:
        .78rem;

    color:
        #8693a5;
}

@media (
    max-width: 991.98px
) {

    .login-brand-panel {

        min-height:
            auto;
    }

    .brand-content {

        padding:
            40px 34px;
    }

    .login-form-panel {

        min-height:
            auto;

        padding:
            42px 34px;
    }

}

@media (
    max-width: 575.98px
) {

    .login-page {

        padding:
            18px 0;
    }

    .login-card {

        border-radius:
            16px;
    }

    .brand-content {

        padding:
            30px 24px;
    }

    .login-form-panel {

        padding:
            34px 24px;
    }

    .logo-wrapper {

        width: 72px;
        height: 72px;
    }

    .login-logo {

        width: 58px;
        height: 58px;
    }

}