@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800;900&family=Prompt:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Prompt', 'Outfit', sans-serif;
            background: transparent;
            min-height: 100vh;
            -webkit-tap-highlight-color: transparent;
        }

        /* Number Font Override */
        h1, h2, h3, h4, h5, h6, .font-mono, .font-black {
            font-family: 'Outfit', 'Prompt', sans-serif;
        }

        /* Minimalist Clean UI */
        .glass {
            background: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
        }
        .glass-nav {
            background: rgba(255, 255, 255, 0.98) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            border-bottom: 1px solid #f1f5f9 !important;
        }

        /* Force SweetAlert to use the correct font and professional radius */
        .swal2-popup {
            border-radius: 1.5rem !important;
        }
        .swal2-popup, .swal2-title, .swal2-content, .swal2-html-container {
            font-family: 'Prompt', 'Outfit', sans-serif !important;
        }
        
        /* Mobile Responsiveness Overrides */
        @media (max-width: 640px) {
            .p-8, .p-10 { padding: 1.25rem !important; }
            .p-6 { padding: 1rem !important; }
            .text-2xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
            .text-3xl { font-size: 1.5rem !important; line-height: 2rem !important; }
        }
        
        /* Responsive Tables */
        .glass:has(table) {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
        }
        table {
            min-width: 600px;
            width: 100%;
        }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        
        .fade-in { animation: fadeIn 0.4s ease-out forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        .hover-lift { transition: all 0.3s ease; }
        .hover-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02); }
        
        
        .btn-gradient { 
            background: #0f172a; /* Slate 900 */
            color: white;
            transition: all 0.2s ease; 
            border: 1px solid #0f172a;
        }
        .btn-gradient:hover { 
            background: #1e293b; /* Slate 800 */
            transform: translateY(-2px); 
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 
        }

        .brand-text-gradient {
            color: #0f172a;
        }
        
        #spss-report-content * { font-size: 16px !important; line-height: 1.6 !important; }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        @media print { body { background: white !important; } .print\:hidden { display: none !important; } }
        
        /* Connection Status Bar */
        #conn-status-bar {
            position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
            transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        #conn-status-bar.show { transform: translateY(0); }
        #conn-status-bar .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
        #conn-status-bar .status-dot.online { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.5); }
        #conn-status-bar .status-dot.offline { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.5); animation: pulse-dot 2s infinite; }
        @keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

        /* Dark Mode Overrides */
        html.dark body { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; color: #f8fafc !important; }
        html.dark .glass, html.dark .glass-nav { background: rgba(15, 23, 42, 0.75) !important; border-color: rgba(255, 255, 255, 0.05) !important; color: #f1f5f9 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important; }
        html.dark .text-slate-800, html.dark .text-slate-700, html.dark .text-slate-900 { color: #f8fafc !important; }
        html.dark .text-slate-600, html.dark .text-slate-500 { color: #cbd5e1 !important; }
        html.dark .bg-slate-50, html.dark .bg-slate-100, html.dark .bg-slate-200 { background-color: rgba(30, 41, 59, 0.8) !important; border-color: rgba(255,255,255,0.05) !important; color: #e2e8f0 !important; }
        html.dark input, html.dark select, html.dark textarea { background-color: rgba(15, 23, 42, 0.8) !important; border-color: rgba(255,255,255,0.1) !important; color: #f8fafc !important; }
        html.dark th, html.dark td, html.dark tr { border-color: rgba(255,255,255,0.05) !important; }
        html.dark thead { background-color: rgba(30, 41, 59, 0.5) !important; color: #94a3b8 !important; }
        html.dark .brand-text-gradient { background: linear-gradient(135deg, #60a5fa 0%, #bfdbfe 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }