body {
            background-color: #f0f2f5;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        .login-container {
            width: 100%;
            max-width: 450px;
            background-color: #ffffff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            opacity: 0; /* Initially hidden for animation */
            transform: translateY(20px); /* Start slightly lower */
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }
        body.loaded .login-container {
            opacity: 1;
            transform: translateY(0);
        }
        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .login-header img {
            max-width: 150px;
            height: auto;
            margin-bottom: 15px;
        }
        .form-control {
            font-size: 1.1rem;
            padding: 12px 15px;
        }
        .form-label {
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        .btn-primary {
            font-size: 1.1rem;
            padding: 12px;
            border: none;
            border-radius: 5px;
        }
        .input-group-text {
            background-color: #fff;
            border-right: none;
        }
        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        .password-toggle {
            cursor: pointer;
        }