/* --- COLOR VARIABLES (WITH GRADIENTS) --- */
    :root {
        /* Standard Colors */
        --primary-color: #1e3a8a;
        --text-color: #1e293b;
        --panel-bg: #f8fafc; /* Keep panel off-white for readability */
        --input-bg: #ffffff;
        --accent-color: #3b82f6;

        /* Gradient Colors */
        --bg-gradient: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%); /* Subtle slate gradient for body */
        --btn-gradient: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); /* Deep Navy to Bright Blue for buttons */
        --loader-bg: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%); /* Light airy gradient for loader */
    }

    body {
        font-family: 'Inter', sans-serif;
        background: var(--bg-gradient); /* Applied gradient here */
        color: var(--text-color);
        overflow-x: hidden;
        min-height: 100vh; /* Ensure gradient covers full height */
    }

    /* --- LOADING SCREEN (Gradient Background) --- */
    #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--loader-bg); /* Gradient background */
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        transition: opacity 0.8s ease-out, visibility 0.8s;
    }

    body.loaded #loader-wrapper {
        opacity: 0;
        visibility: hidden;
    }

    .loader-icon {
        width: 100px;
        height: auto;
        margin-bottom: 20px;
    }

    .loader-text {
        color: var(--primary-color);
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0% { opacity: 0.6; }
        50% { opacity: 1; }
        100% { opacity: 0.6; }
    }

    /* --- LAYOUT STYLES --- */
    .min-vh-100 { min-height: 100vh; }

    /* Left Panel (Branding) */
    .brand-panel {
        /* Enhanced gradient for the brand panel */
        background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #3b82f6 100%);
        position: relative;
        overflow: hidden;
    }
    
    .brand-panel::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: radial-gradient(circle at 20% 150%, rgba(255,255,255,0.1) 0%, transparent 50%);
        z-index: 1;
    }
    
    .brand-content { position: relative; z-index: 2; }

    /* Right Panel (Login Form) */
    .login-panel {
        background-color: var(--panel-bg);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .login-container { 
        width: 100%; 
        max-width: 480px; 
        padding: 2.5rem; 
    }

    /* --- TABS --- */
    .nav-pills {
        background-color: #e2e8f0;
        padding: 5px;
        border-radius: 12px;
        margin-bottom: 2rem;
    }
    
    .nav-pills .nav-link {
        color: #64748b;
        font-weight: 600;
        padding: 12px 15px;
        border-radius: 8px;
        transition: all 0.2s ease;
    }
    
    .nav-pills .nav-link.active {
        background-color: var(--panel-bg);
        color: var(--primary-color);
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* --- INPUTS --- */
    .form-floating > .form-control {
        background-color: var(--input-bg);
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        height: 3.5rem;
    }
    
    .form-floating > .form-control:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
        background-color: #fff;
    }

    /* --- BUTTONS (Gradient Applied) --- */
    .btn-primary {
        background: var(--btn-gradient); /* Gradient button */
        border: none; /* Removed border to let gradient shine */
        padding: 15px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 1.1rem;
        letter-spacing: 0.5px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .btn-primary:hover {
        /* Slightly modify gradient or add shadow on hover */
        background: linear-gradient(135deg, #172554 0%, #1d4ed8 100%); 
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    }

    .logo-box {
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 20px;
        padding: 1.5rem;
        display: inline-block;
        margin-bottom: 2rem;
    }

    /* --- MOBILE RESPONSIVENESS --- */
    @media screen and (max-width: 768px) {
        
        .login-container {
            padding: 1.5rem;
            max-width: 100%;
        }

        h2.fw-bold {
            font-size: 1.75rem;
        }

        .text-muted {
            font-size: 0.9rem;
        }

        .nav-pills .nav-link {
            font-size: 0.9rem;
            padding: 10px;
        }

        .btn-primary {
            padding: 12px;
            font-size: 1rem;
        }

        .loader-icon {
            width: 80px;
        }
    }