/* --- 1. COLOR VARIABLES --- */
        :root {
            /* LIGHT THEME (Petrol/Sand) */
            --bg-base: #265166; /* Dark Petrol Blue */
            --bg-gradient-start: #547C90; /* Muted Blue-Grey */
            --bg-gradient-end: #265166; /* Dark Petrol Blue */
            --card-bg: rgba(255, 255, 255, 0.9);
            --text-main: #1E3745;
            --text-muted: #547C90;
            --input-bg: #F6FAFD;
            --input-border: #BACFDA;
            --primary-btn: #265166;
            --primary-btn-hover: #1E3745;
            --shape-color: rgba(255, 255, 255, 0.2); /* For the animation */
            --logo-color: #265166;
        }

        [data-theme="dark"] {
            /* DARK THEME (Navy/Teal) */
            --bg-base: #121212;
            --bg-gradient-start: #193A4A; /* Deep Navy */
            --bg-gradient-end: #121212;   /* Near Black */
            --card-bg: rgba(25, 58, 74, 0.7); /* Deep Navy Transparent */
            --text-main: #F6FAFD;
            --text-muted: #BACFDA;
            --input-bg: rgba(0, 0, 0, 0.3);
            --input-border: #2D6079;
            --primary-btn: #547C90;
            --primary-btn-hover: #2D6079;
            --shape-color: rgba(45, 96, 121, 0.3); /* Darker shapes */
            --logo-color: #84B8A7;
        }

        /* --- 2. GLOBAL RESET & ANIMATED BACKGROUND --- */
        body {
            font-family: 'Cairo', sans-serif;
            /* Gradient Background matching your palette */
            background: var(--bg-base); 
            background: -webkit-linear-gradient(to left, var(--bg-gradient-start), var(--bg-gradient-end));  
            background: linear-gradient(to left, var(--bg-gradient-start), var(--bg-gradient-end)); 
            
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: background 0.5s ease;
        }

        /* --- THE FLOATING ANIMATION (Restored from your file) --- */
        .circles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0; /* Behind the card */
            margin: 0;
            padding: 0;
        }
        .circles li {
            position: absolute;
            display: block;
            list-style: none;
            width: 20px;
            height: 20px;
            background: var(--shape-color);
            animation: animate 25s linear infinite;
            bottom: -150px;
            transition: background 0.5s ease;
        }
        .circles li:nth-child(1){ left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
        .circles li:nth-child(2){ left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
        .circles li:nth-child(3){ left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
        .circles li:nth-child(4){ left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
        .circles li:nth-child(5){ left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
        .circles li:nth-child(6){ left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
        .circles li:nth-child(7){ left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
        .circles li:nth-child(8){ left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
        .circles li:nth-child(9){ left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
        .circles li:nth-child(10){ left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }
        
        @keyframes animate {
            0%{ transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; }
            100%{ transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; }
        }

        /* --- 3. LOGIN CARD --- */
        .login-card {
            background: var(--card-bg);
            backdrop-filter: blur(10px); /* Frosted glass boost */
            -webkit-backdrop-filter: blur(10px);
            width: 100%;
            max-width: 420px;
            border-radius: 24px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            z-index: 1; /* Sit above animation */
            position: relative;
            border: 1px solid rgba(255,255,255,0.1);
            transition: background 0.3s ease;
        }

        .brand-header {
            text-align: center;
            padding: 40px 20px 20px;
        }
        
        .logo-icon {
            font-size: 3rem;
            color: var(--logo-color);
            margin-bottom: 10px;
        }

        .brand-title {
            font-weight: 800;
            color: var(--text-main);
            font-size: 1.8rem;
            margin-bottom: 5px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .brand-subtitle {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .login-body {
            padding: 20px 40px 40px;
        }

        .form-label {
            color: var(--text-main);
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 0.95rem;
        }

        .form-control {
            border-radius: 12px;
            padding: 12px 15px;
            border: 2px solid var(--input-border);
            background: var(--input-bg);
            color: var(--text-main);
            transition: all 0.3s;
        }

        .form-control:focus {
            border-color: var(--primary-btn);
            background: var(--input-bg);
            box-shadow: 0 0 0 4px rgba(38, 81, 102, 0.15);
            color: var(--text-main);
        }

        .btn-primary-custom {
            background: var(--primary-btn);
            border: none;
            color: #fff;
            padding: 14px;
            border-radius: 12px;
            font-weight: 700;
            width: 100%;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

        .btn-primary-custom:hover {
            transform: translateY(-2px);
            background-color: var(--primary-btn-hover);
            color: #fff;
        }

        .form-check-label {
            color: var(--text-muted);
            cursor: pointer;
        }
        
        .form-check-input {
            cursor: pointer;
        }
        .form-check-input:checked {
            background-color: var(--primary-btn);
            border-color: var(--primary-btn);
        }

        .footer-credit {
            text-align: center;
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 25px;
            opacity: 0.8;
        }

        /* Theme Toggle Button */
        .theme-toggle-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 100;
            color: #fff;
            backdrop-filter: blur(5px);
        }

        /* Fix placeholder visibility in dark theme */
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.7; /* Ensures it looks like a placeholder and not entered text */
}

/* For older browsers support */
[data-theme="dark"] .form-control:-ms-input-placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .form-control::-ms-input-placeholder {
    color: var(--text-muted);
}

.input-group-custom {
    position: relative;
    display: flex;
    align-items: center;
}

.password-toggle {
    position: absolute;
    left: 12px; /* Positioned on the left for RTL layout */
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.password-toggle:hover {
    color: var(--primary-btn);
}

/* Ensure the input has enough padding so text doesn't overlap the icon */
.input-group-custom .form-control {
    padding-left: 45px; 
    width: 100%;
}