/* --- Global Styles --- */
body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }

/* --- Custom UI Elements --- */
.nexlev-card { transition: all 0.2s; }
.nexlev-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); border-color: #e2e8f0; }

/* --- RPM Slider Customization --- */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; margin: 10px 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #fff; border: 4px solid #dc2626; cursor: pointer; margin-top: -8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: transform 0.1s; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: linear-gradient(to right, #facc15, #f97316, #ef4444, #a855f7); border-radius: 3px; }

/* --- Animations --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }

/* --- Toast Notification --- */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; pointer-events: none; }
.toast { pointer-events: auto; animation: slideIn 0.3s ease-out forwards; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* --- Settings Modal --- */
.modal { transition: opacity 0.2s ease-in-out, visibility 0.2s; }
.modal.active { opacity: 1; visibility: visible; pointer-events: auto; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* --- Pagination Button Custom (Simple) --- */
.pagination-btn {
    @apply px-3 py-1 border rounded text-sm font-medium transition-colors bg-white hover:bg-slate-50 text-slate-600;
}
.pagination-btn.active {
    @apply bg-red-600 text-white border-red-600;
}
.pagination-btn.disabled {
    @apply text-slate-300 pointer-events-none;
}