body { background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; height: 100vh; font-family: 'Segoe UI', sans-serif; }
        .login-card { width: 100%; max-width: 400px; padding: 40px; background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
        .form-control:focus { box-shadow: none; border-color: #0d6efd; }
        .d-none { display: none !important; }

@media (max-width: 576px) {
    body {
        background-color: #ffffff; /* White background for seamless look */
        align-items: flex-start; /* Push content to top, not center */
    }

    .login-card {
        box-shadow: none; /* Remove shadow to look flat */
        border-radius: 0; /* Remove corners */
        padding: 2rem 1.5rem;
        max-width: 100%; /* Allow full width */
        height: 100vh; /* Take up full screen height */
        
        /* Center content vertically inside the mobile view */
        display: flex;
        flex-direction: column;
        justify-content: center; 
    }

    /* Make buttons easier to tap with thumbs */
    .btn-lg {
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-size: 1.1rem;
    }

    /* Make the logo bigger on phone */
    h1 {
        font-size: 3rem; 
        color: #0d6efd; /* Bootstrap Primary Blue */
    }
}