/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { @apply bg-slate-300 dark:bg-slate-700 rounded-full; }

/* Custom Components */
.glass-panel {
    @apply bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-2xl border border-slate-200/60 dark:border-slate-700/60 transition-colors;
}

.dropzone {
    @apply border-2 border-dashed border-slate-200 dark:border-slate-700 rounded-[20px] p-10 text-center transition-all cursor-pointer bg-slate-50 dark:bg-slate-800/50 hover:border-blue-400 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-slate-800;
}

.range-slider {
    @apply w-full h-1.5 bg-slate-200 dark:bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-600 block;
}

.input-field {
    @apply w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500 transition font-medium text-slate-700 dark:text-slate-200;
}

.action-btn {
    @apply w-9 h-9 bg-white dark:bg-slate-800 rounded-full flex items-center justify-center text-slate-700 dark:text-slate-200 hover:scale-110 transition shadow-lg text-sm border border-slate-100 dark:border-slate-700;
}

/* Animations */
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.progress-shimmer {
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}
/* Toast Notifications */
#toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast {
    min-width: 250px; padding: 12px 16px; background: white; border-left: 4px solid; 
    border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    font-size: 0.9rem; font-weight: 600; animation: slideIn 0.3s ease-out forwards;
    display: flex; align-items: center; gap: 10px;
}
.toast.success { border-color: #22c55e; color: #15803d; } /* Green */
.toast.error { border-color: #ef4444; color: #b91c1c; }   /* Red */
.toast.info { border-color: #3b82f6; color: #1d4ed8; }     /* Blue */
.dark .toast { background: #1e293b; color: white; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
    to { transform: translateX(100%); opacity: 0; }
}