@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ==========================================
   1. THE ANIMATED MESH BACKGROUND
   ========================================== */
body {
    font-family: 'Outfit', sans-serif !important;
    background: linear-gradient(-45deg, #f8fafc, #e0e7ff, #f3e8ff, #f1f5f9);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    color: #0f172a;
}
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==========================================
   2. FLOATING GLASS NAVBAR
   ========================================== */
nav {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05) !important;
    margin: 10px 20px;
    border-radius: 20px;
    top: 10px !important;
}

/* ==========================================
   3. ULTRA-PREMIUM GLASS CARDS
   ========================================== */
.bg-white, .bg-gray-900 {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 20px 40px -10px rgba(31, 38, 135, 0.07), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    border-radius: 24px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bg-white:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -15px rgba(31, 38, 135, 0.15), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.bg-gray-900.border-b {
    background: rgba(15, 23, 42, 0.85) !important;
    color: white !important;
}

/* ==========================================
   4. LIQUID NEON BUTTONS
   ========================================== */
button, .bg-blue-600, .bg-emerald-600, .bg-purple-600, .bg-indigo-600 {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease !important;
    border: none !important;
}
.bg-blue-600 { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.5) !important; }
.bg-blue-600:hover { box-shadow: 0 15px 25px -5px rgba(59, 130, 246, 0.7), 0 0 15px rgba(59, 130, 246, 0.5) !important; transform: scale(1.02) translateY(-2px); }
.bg-emerald-600 { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.5) !important; }
.bg-emerald-600:hover { box-shadow: 0 15px 25px -5px rgba(16, 185, 129, 0.7), 0 0 15px rgba(16, 185, 129, 0.5) !important; transform: scale(1.02) translateY(-2px); }
.bg-purple-600 { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important; box-shadow: 0 10px 20px -5px rgba(139, 92, 246, 0.5) !important; }
.bg-purple-600:hover { box-shadow: 0 15px 25px -5px rgba(139, 92, 246, 0.7), 0 0 15px rgba(139, 92, 246, 0.5) !important; transform: scale(1.02) translateY(-2px); }
.bg-indigo-600 { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important; box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.5) !important; }
.bg-indigo-600:hover { box-shadow: 0 15px 25px -5px rgba(99, 102, 241, 0.7), 0 0 15px rgba(99, 102, 241, 0.5) !important; transform: scale(1.02) translateY(-2px); }

/* ==========================================
   5. 3D HOVER TABLES
   ========================================== */
table { border-collapse: separate !important; border-spacing: 0 8px !important; background: transparent !important; padding: 0 10px; }
thead th, .bg-gray-50 { background: transparent !important; border: none !important; font-weight: 800 !important; letter-spacing: 1px; }
tbody tr { background: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(10px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; border-radius: 12px; }
tbody tr td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
tbody tr td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-right: none;}
tbody tr td { border-top: 1px solid rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.4); }
tbody tr:hover { transform: scale(1.015) translateX(5px); background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.1), 0 0 20px rgba(59, 130, 246, 0.1) !important; z-index: 50; position: relative; }

/* ==========================================
   6. FLOATING INPUT FIELDS
   ========================================== */
input, select, textarea {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(5px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}
/* Removed aggressive blue focus */
input:focus, select:focus, textarea:focus {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ==========================================
   7. CHAT UI OVERRIDES
   ========================================== */
body.bg-\[\#efeae2\] { background: transparent !important; }
header.bg-white, footer.bg-\[\#f0f2f5\], .w-1\/3.bg-white {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}
.bg-\[\#d9fdd3\] { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%) !important; backdrop-filter: blur(12px); border: 1px solid rgba(139, 92, 246, 0.3) !important; box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.15) !important; color: #1e293b !important; transition: transform 0.2s ease; }
.bg-\[\#d9fdd3\]:hover { transform: translateY(-2px); }
main#chat-box .bg-white { background: rgba(255, 255, 255, 0.65) !important; backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.8) !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important; transition: transform 0.2s ease; }
main#chat-box .bg-white:hover { transform: translateY(-2px); }
.bg-yellow-100 { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%) !important; backdrop-filter: blur(12px); border: 1px solid rgba(245, 158, 11, 0.4) !important; box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.15) !important; }

#input-container { background: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.8) !important; box-shadow: inset 0 2px 5px rgba(0,0,0,0.02), 0 5px 15px rgba(0,0,0,0.05) !important; transition: all 0.3s ease !important; }
#input-container:focus-within { background: rgba(255, 255, 255, 0.95) !important; border-color: #cbd5e1 !important; transform: translateY(-2px); }

/* Modal Cinematic Pop */
[id^="modal_"] > div, #modal_ajax_response > div, #modal_diag_result > div { animation: cinematicPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes cinematicPop { 0% { opacity: 0; transform: scale(0.9) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

/* Enhanced Glass Panels */
.bg-white, .bg-gray-900 {     
    background: rgba(255, 255, 255, 0.35) !important;     
    backdrop-filter: blur(20px);     
    -webkit-backdrop-filter: blur(20px);     
    border: 1px solid rgba(255, 255, 255, 0.6) !important;     
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;     
    border-radius: 24px !important;     
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* Fluid Table Rows */
tbody tr { 
    background: rgba(255, 255, 255, 0.4) !important; 
    backdrop-filter: blur(12px); 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; 
    border-radius: 12px; 
}
tbody tr:hover { 
    transform: scale(1.01) translateX(4px); 
    background: rgba(255, 255, 255, 0.8) !important; 
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 0 15px rgba(59, 130, 246, 0.15) !important; 
}