.login-page {
    min-height: 100vh;

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

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            #f4f6f7 0%,
            #eaf7f7 100%
        );
}

.login-card {
    width: 100%;
    max-width: 430px;

    background:
        var(--erp-white);

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

    border-radius:
        18px;

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.08);

    overflow: hidden;
}

.login-top {
    padding:
        30px 30px 20px;

    text-align: center;
}

.login-logo {
    width: 58px;
    height: 58px;

    margin:
        0 auto 14px;

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

    background:
        var(--erp-primary);

    color:
        var(--erp-white);

    border-radius:
        15px;

    font-size:
        21px;

    font-weight:
        700;
}

.login-title {
    margin: 0;

    font-size:
        24px;
}

.login-subtitle {
    margin-top:
        5px;

    color:
        var(--erp-text-muted);
}

.login-body {
    padding:
        10px 30px 30px;
}

.login-footer {
    text-align:
        center;

    padding:
        15px;

    background:
        #fafafa;

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

    color:
        var(--erp-text-muted);

    font-size:
        12px;
}


@media (max-width: 480px) {

    .login-page {
        padding:
            12px;
    }

    .login-top {
        padding:
            24px 20px 15px;
    }

    .login-body {
        padding:
            10px 20px 24px;
    }

    .login-title {
        font-size:
            21px;
    }
}