:root {
            --page-bg: #2a65c9;
            /* Subtle gradient for the login card */
            --card-gradient-start: #ffffff;
            --card-gradient-end: #f0f4ff; /* Very light blueish white */
            --button-bg: #1c4b8f;
            --button-text: #ffffff;
            --input-border: #d1d5db;
            --placeholder-text: #9ca3af;
            --link-text: #3b82f6;
            --text-dark: #374151;
            --icon-color: #6b7280; /* Color for input icons */
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background-color: var(--page-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
            box-sizing: border-box;
            overflow: hidden; /* Hide scrollbars if canvas overflows slightly */
        }

        #backgroundCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0; /* Behind all content */
        }

        .login-section-container {
            display: flex;
            width: 100%;
            max-width: 900px;
            border-radius: 12px;
            overflow: hidden;
            position: relative; /* To be on top of canvas */
            z-index: 1;
            background-color: transparent; /* Container itself is transparent */
        }

        .login-form-column {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
             /* Removed bg color here, card will provide it */
        }

        .login-card {
            /* GRADIENT BACKGROUND FOR THE CARD */
            background-image: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
            padding: 30px 35px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            width: 100%;
            max-width: 380px;
            text-align: center;
        }

        .login-card-header {
            background-color: var(--button-bg);
            color: var(--button-text);
            font-size: 1.5rem;
            font-weight: bold;
            padding: 12px 20px;
            border-radius: 50px;
            margin-bottom: 30px;
            display: inline-block;
        }

        .login-form .form-group {
            margin-bottom: 20px;
            position: relative; /* For icon positioning */
        }

        .login-form .form-group .input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--icon-color);
            pointer-events: none; /* So it doesn't interfere with input click */
        }
        .login-form .form-group .input-icon svg {
            width: 18px;
            height: 18px;
        }

        .login-form .form-control {
            width: 100%;
            padding: 12px 15px 12px 45px; /* Added left padding for icon */
            border: 1px solid var(--input-border);
            border-radius: 50px;
            box-sizing: border-box;
            font-size: 0.95rem;
            color: var(--text-dark);
        }

        .login-form .form-control::placeholder {
            color: var(--placeholder-text);
        }

        .login-form .btn-login {
            background-color: var(--button-bg);
            color: var(--button-text);
            font-size: 1rem;
            font-weight: bold;
            padding: 12px 20px;
            border-radius: 50px;
            border: none;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s ease;
        }

        .login-form .btn-login:hover {
            background-color: #16417c;
        }

        .login-card-footer {
            margin-top: 25px;
            font-size: 0.85rem;
            color: var(--text-dark);
        }
        .login-card-footer p { margin: 8px 0; }
        .login-card-footer a {
            color: var(--link-text);
            text-decoration: none;
            font-weight: 500;
        }
        .login-card-footer a:hover { text-decoration: underline; }

        .login-image-column {
            flex: 1.2;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-image-column img {
            max-width: 80%;
            height: auto;
            display: block;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .login-section-container {
                flex-direction: column;
                background-color: transparent; /* Let card or body bg show */
            }
            .login-image-column {
                order: -1;
                padding: 30px 20px 0 20px;
                flex: none;
            }
             .login-image-column img {
                max-width: 60%;
                margin-bottom: 20px;
            }
            .login-form-column { padding: 20px; }
            .login-card { max-width: 100%; padding: 25px; }
        }
         @media (max-width: 480px) {
             .login-card-header { font-size: 1.3rem; padding: 10px 18px; margin-bottom: 25px;}
             .login-form .form-control,
             .login-form .btn-login { padding-top: 10px; padding-bottom: 10px; font-size: 0.9rem;}
             .login-form .form-control {padding-left: 40px;}
             .login-form .form-group .input-icon svg {width: 16px; height: 16px;}
             .login-image-column img { max-width: 70%;}
         }