.login-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
    padding: 40px 20px;
    overflow-y: auto;
}

.login-card {
    width: 100%;
    max-width: 420px; 
    border: 0;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    background: #fff;
}

    .login-card h4 {
        font-weight: 600;
        color: #2c3e50;
    }

    .login-card .form-control {
        height: 45px;
        border-radius: 10px;
        border: 1px solid #e0e0e0;
    }

        .login-card .form-control:focus {
            border-color: #6c7ae0;
            box-shadow: 0 0 0 0.15rem rgba(108, 122, 224, 0.15);
        }

    .login-card .btn-primary {
        background: #6c7ae0;
        border: none;
        border-radius: 10px;
        font-weight: 500;
        width: 100%;
    }

        .login-card .btn-primary:hover {
            background: #5a67d8;
        }

    .login-card a {
        color: #6c7ae0;
        font-size: 13px;
    }

        .login-card a:hover {
            text-decoration: underline;
        }

@media (max-width: 576px) {
    .login-page {
        padding: 20px 15px;
    }

    .login-card {
        border-radius: 12px;
    }
}