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

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

    padding: 30px;

    background:
        radial-gradient(
            circle at top left,
            #eceaff,
            transparent 40%
        ),
        radial-gradient(
            circle at bottom right,
            #f1efff,
            transparent 40%
        ),
        #f6f7fb;
}

.login-container {
    width: 100%;

    max-width: 430px;
}

.login-card {
    background: #ffffff;

    border-radius: 24px;

    padding: 38px;

    box-shadow:
        0 20px 60px rgba(56, 52, 120, 0.12);
}

.login-logo {
    text-align: center;

    margin-bottom: 30px;
}

.login-logo-circle {
    width: 65px;
    height: 65px;

    margin: 0 auto 15px;

    border-radius: 18px;

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

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color: #ffffff;

    font-size: 26px;

    font-weight: 800;
}

.login-logo h1 {
    font-size: 24px;

    margin-bottom: 6px;
}

.login-logo p {
    font-size: 13px;

    color: var(--text-light);
}

.login-card .form-group {
    position: relative;
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 45px;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 14px;

    transform: translateY(-50%);

    border: none;

    background: none;

    color: #9ca3af;

    font-size: 17px;
}

.login-btn {
    width: 100%;

    margin-top: 5px;

    padding: 13px;

    font-size: 15px;
}

.login-footer {
    text-align: center;

    margin-top: 22px;

    font-size: 12px;

    color: var(--text-light);
}