@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;700&family=Fira+Code&display=swap');

body { 
    font-family: 'Noto Sans SC', 'Inter', sans-serif; 
    overflow: hidden; 
    margin: 0;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }
.light .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.light .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Loading Screen */
#app-loading {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #f8fafc; z-index: 99999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #475569; transition: opacity 0.5s;
}

.spinner {
    width: 40px; height: 40px; 
    border: 4px solid #cbd5e1; 
    border-top-color: #059669; 
    border-radius: 50%;
    animation: spin 1s linear infinite; 
    margin-bottom: 16px;
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-in { animation: fadeIn 0.2s ease-out forwards; }
.animate-zoom-in { animation: zoomIn 0.2s ease-out forwards; }
.animate-slide-up { animation: slideUp 0.3s ease-out forwards; }