.login-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(
            circle at top right,
            rgba(34, 197, 94, 0.14),
            transparent 34%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(56, 189, 248, 0.08),
            transparent 30%
        ),
        #07111f;
}

.login-container {
    width: 100%;
    max-width: 440px;
}

.login-card {
    border: 1px solid #1d334a;
    border-radius: 20px;
    background: rgba(13, 27, 45, 0.96);
    padding: 34px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

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

.login-brand strong {
    display: block;
    font-size: 19px;
}

.login-brand span {
    display: block;
    margin-top: 3px;
    color: #8fa3b8;
    font-size: 11px;
}

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

.login-heading h1 {
    margin: 8px 0 9px;
    font-size: 30px;
}

.login-heading p {
    margin: 0;
    color: #8fa3b8;
}

.login-card form {
    display: grid;
    gap: 18px;
}

.login-button {
    width: 100%;
    margin-top: 5px;
}

.login-alert {
    margin-bottom: 20px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    padding: 12px 14px;
    font-size: 13px;
}

.login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 27px;
    border-top: 1px solid #1d334a;
    color: #8fa3b8;
    padding-top: 20px;
    font-size: 11px;
}