.login-container {
            display: flex;
            min-height: 100vh;
        }

        /* Left Side: Branding/Image (Hidden on Mobile) */
        .login-aside {
            background: linear-gradient(rgba(0, 33, 71, 0.8), rgba(0, 33, 71, 0.9)), 
                        url('/images/mucabi/login_bg.jpg') center/cover;
            color: white;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 60px;
        }

        /* Right Side: Login Form */
        .login-form-area {
            flex: 1;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
        }

        .login-box {
            width: 100%;
            max-width: 400px;
        }

        .brand-logo {
            width: 80px;
            margin-bottom: 25px;
        }

        .form-label {
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--muc-navy);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .form-control {
            border: 1px solid #e0e0e0;
            padding: 12px 15px;
            border-radius: 8px;
            background-color: #fdfdfd;
        }

        .form-control:focus {
            border-color: var(--muc-gold);
            box-shadow: 0 0 0 3px rgba(241, 143, 52, 0.1);
        }

        .btn-login {
            background-color: var(--muc-navy);
            color: white;
            padding: 12px;
            border-radius: 8px;
            font-weight: 700;
            width: 100%;
            border: none;
            transition: 0.3s;
        }

        .btn-login:hover {
            background-color: #003366;
            color: var(--muc-gold);
            transform: translateY(-2px);
        }

        .forgot-link {
            font-size: 0.85rem;
            color: var(--muc-gold);
            text-decoration: none;
            font-weight: 600;
        }

        @media (max-width: 992px) {
            .login-aside { display: none; }
        }