[x-cloak] { display: none !important; }

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-color: #020617; 
    color: #f8fafc; 
    -webkit-tap-highlight-color: transparent; 
    overflow-x: hidden;
}

.glass { 
    background: rgba(30, 41, 59, 0.45); 
    backdrop-filter: blur(12px); 
    border: 1px solid rgba(255,255,255,0.08); 
}

.gradient-text { 
    background: linear-gradient(to bottom right, #818cf8, #22d3ee, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-primary { 
    @apply bg-indigo-600 hover:bg-indigo-500 active:scale-95 transition-all px-6 py-4 rounded-2xl font-bold text-white shadow-xl shadow-indigo-900/20; 
}

.btn-secondary { 
    @apply bg-slate-800 hover:bg-slate-700 transition-all px-4 py-3 rounded-xl text-sm font-medium text-slate-400; 
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }

/* Simple Tailwind-compatible animations */
.animate-in { animation-duration: 0.3s; animation-fill-mode: both; }
.fade-in { animation-name: fadeIn; }
.zoom-in { animation-name: zoomIn; }
.slide-in-from-right { animation-name: slideInRight; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }