:root { 
    --deep-bg: #050507;   
    --surface: #0a0a0c;   
    --border: #1e293b;    
    --brand-blue: #3b82f6;     
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-color: var(--deep-bg); 
    color: #e0f2fe;
    overflow-x: hidden; 
    overflow-y: auto !important; 
}

/* --- PREMIUM HOVER EFFECTS --- */
.glass-card { 
    background: var(--surface); 
    border: 1px solid rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(12px);
    border-radius: 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover { 
    border-color: rgba(59, 130, 246, 0.4); 
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -20px rgba(59, 130, 246, 0.3);
}

.nav-item {
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.nav-item:hover {
    background: rgba(59, 130, 246, 0.1);
    color: white;
    border-color: rgba(59, 130, 246, 0.2);
    transform: translateX(5px);
}

/* --- MOBILE SIDEBAR DRAWER --- */
@media (max-width: 768px) {
    #sidebar {
        position: fixed !important;
        left: -100%; 
        top: 0;
        height: 100vh;
        width: 80%;
        background: #08080a;
        z-index: 100;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex !important;
        border-right: 1px solid var(--brand-blue);
    }
    #sidebar.active {
        left: 0;
        box-shadow: 20px 0 60px rgba(0,0,0,0.8);
    }
    #mobile-overlay.active {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.8);
        backdrop-filter: blur(8px);
        z-index: 90;
    }
}

#mobile-overlay { display: none; }

.blue-glow {
    color: #3b82f6;
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}