:root {
    --login-max-width: 460px;
}

.login-body {
    min-height: 100vh;
    background:
    radial-gradient(900px 500px at 12% 8%, rgba(74, 144, 217, 0.20), transparent 60%),
    radial-gradient(900px 500px at 88% 12%, rgba(30, 58, 95, 0.16), transparent 55%),
        var(--bg);
}

.login-main {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
}

.login-card {
    width: min(100%, var(--login-max-width));
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: var(--card);
    padding: 22px;
}

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

.login-title {
    margin: 0;
    color: var(--brand);
    letter-spacing: -0.02em;
}

.login-muted {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.login-form {
    margin-top: 16px;
}

.login-label {
    display: block;
    margin-top: 10px;
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--text);
}

.login-input {
    width: 100%;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    background: #fff;
}

.login-submit {
    width: 100%;
    margin-top: 16px;
    justify-content: center;
}

.login-links {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    gap: 14px;
    font-weight: 700;
    color: var(--brand);
}

.login-alert {
    margin-top: 14px;
    border: 1px solid var(--stroke);
    border-left: 4px solid var(--brand);
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
}

.login-success {
    margin-top: 14px;
    border: 1px solid var(--stroke);
    border-left: 4px solid var(--brand-2);
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
}