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

   .login-page {
    min-height:
        100vh;
    background:
        radial-gradient(
            circle at 12% 18%,
            color-mix(
                in srgb,
                var(--blue) 13%,
                transparent
            ),
            transparent 30%
        ),
        radial-gradient(
            circle at 84% 20%,
            color-mix(
                in srgb,
                var(--pink) 11%,
                transparent
            ),
            transparent 28%
        ),
        radial-gradient(
            circle at 70% 85%,
            color-mix(
                in srgb,
                var(--purple) 10%,
                transparent
            ),
            transparent 30%
        ),
        var(--bg);
}

.login-shell {
    width:
        100%;
    min-height:
        100vh;
    display:
        grid;
    place-items:
        center;
    padding:
        28px;
}

.login-card {
    width:
        min(100%, 470px);
    padding:
        34px;
    border:
        1px solid var(--border);
    border-radius:
        24px;
    background:
        color-mix(
            in srgb,
            var(--surface) 94%,
            transparent
        );
    box-shadow:
        var(--shadow-large);
}

.login-brand {
    display:
        flex;
    align-items:
        center;
    gap:
        12px;
    margin-bottom:
        42px;
}

.login-brand .brand-mark {
    width:
        44px;
    height:
        44px;
}

.brand-name {
    display:
        block;
    color:
        var(--text);
    font-size:
        18px;
    font-weight:
        700;
}

.brand-tagline {
    display:
        block;
    margin-top:
        2px;
    color:
        var(--text-muted);
    font-size:
        11px;
    font-weight:
        600;
}

.login-heading {
    margin-bottom:
        26px;
}

.login-heading h1 {
    margin:
        0 0 9px;
    color:
        var(--text);
    font-size:
        29px;
    letter-spacing:
        -0.04em;
}

.login-heading p {
    margin:
        0;
    color:
        var(--text-secondary);
    font-size:
        13px;
    line-height:
        1.65;
}

.login-form {
    display:
        flex;
    flex-direction:
        column;
    gap:
        17px;
}

.login-form .form-field {
    gap:
        8px;
}

.login-form input {
    height:
        48px;
    padding:
        0 14px;
    font-size:
        13px;
}

.login-submit {
    width:
        100%;
    height:
        48px;
    margin-top:
        3px;
}

.login-forgot-password {
    align-self:
        center;
    padding:
        3px;
    border:
        0;
    background:
        transparent;
    color:
        var(--brand);
    font-size:
        12px;
    font-weight:
        700;
}

.login-forgot-password:hover {
    text-decoration:
        underline;
    text-underline-offset:
        3px;
}

.login-error {
    padding:
        11px 13px;
    border:
        1px solid color-mix(
            in srgb,
            var(--red) 25%,
            var(--border)
        );
    border-radius:
        10px;
    background:
        var(--red-soft);
    color:
        var(--red);
    font-size:
        12px;
    line-height:
        1.5;
}

.login-footer {
    display:
        flex;
    justify-content:
        space-between;
    gap:
        16px;
    margin-top:
        28px;
    padding-top:
        17px;
    border-top:
        1px solid var(--border);
    color:
        var(--text-muted);
    font-size:
        10px;
    font-weight:
        600;
}

@media (max-width: 500px) {

    .login-shell {
        padding:
            14px;
    }

    .login-card {
        padding:
            25px 20px;
        border-radius:
            20px;
    }

    .login-brand {
        margin-bottom:
            34px;
    }

}

.legal-links {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        18px;

    color:
        var(--text-muted);

    font-size:
        10px;
}

.legal-links a {
    color:
        var(--text-muted);

    font-weight:
        600;

    text-decoration:
        none;
}

.legal-links a:hover {
    color:
        var(--brand);

    text-decoration:
        underline;
}