/* css/styles.css */
body { 
    font-family: 'Inter', sans-serif; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; 
    -webkit-tap-highlight-color: transparent; 
    transition: background-color 0.3s, color 0.3s; 
}

.glass-panel { 
    backdrop-filter: blur(24px); 
    -webkit-backdrop-filter: blur(24px); 
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); 
    transition: all 0.3s ease; 
}

.tab-content { display: none; opacity: 0; transition: opacity 0.4s ease; }
.tab-content.active { display: block; opacity: 1; animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.neon-glow { filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.4)); }

.shiny-btn {
    background: linear-gradient(90deg, #06b6d4, #8b5cf6, #06b6d4);
    background-size: 200% auto;
    animation: shine 3s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

.filter-btn { border: 1px solid rgba(148, 163, 184, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.filter-btn.active { background: var(--cat-color); color: white !important; border-color: var(--cat-color); box-shadow: 0 0 12px var(--cat-color); }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.search-input { width: 100%; padding: 12px 16px 12px 40px; border-radius: 8px; transition: all 0.3s ease; font-size: 0.875rem; }
@media (min-width: 768px) { .search-input { padding: 14px 20px 14px 50px; font-size: 0.95rem; } }
.search-input:focus { outline: none; border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34,211,238,0.1); }

#toast { position: fixed; bottom: 24px; right: 24px; transform: translateY(150px) scale(0.9); opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 9999; }
#toast.show { transform: translateY(0) scale(1); opacity: 1; }

.modal-overlay { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 60; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content { transform: scale(0.98); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.modal-overlay.active .modal-content { transform: scale(1); }

#drawer { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 70;}
#drawer.active { transform: translateX(0); }
#overlay { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
#overlay.active { opacity: 1; pointer-events: auto; }

.scan-line { width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #22d3ee, #a855f7, transparent); position: absolute; left: 0; box-shadow: 0 0 15px #22d3ee; animation: vScan 1.5s ease-in-out infinite; display: none; z-index: 50; }
@keyframes vScan { 0% { top: 0%; } 100% { top: 100%; } }