/* Quality slider custom styles */
.quality-slider {
  background: linear-gradient(to right, #ef4444 0%, #f59e0b 25%, #eab308 50%, #84cc16 75%, #10b981 100%);
  height: 10px;
}

.quality-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid #3b82f6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.quality-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.quality-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid #3b82f6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* Format button active state */
.format-btn {
  transition: all 0.15s ease;
}

.format-btn.active {
  background-color: #2563eb !important;
  color: white !important;
  border-color: #2563eb !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3);
}

.format-btn:not(.active):hover {
  border-color: #93c5fd;
  background-color: #eff6ff;
}

.dark .format-btn:not(.active):hover {
  border-color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.15);
}

/* Drop zone active */
#drop-zone.drag-over {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.dark #drop-zone.drag-over {
  border-color: #60a5fa;
  background-color: rgba(59, 130, 246, 0.15);
}

/* Smooth transitions */
.fade-in {
  animation: fadeIn 0.25s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* File item */
.file-item {
  transition: background-color 0.15s ease;
}

.file-item:hover {
  background-color: #f8fafc;
}

.dark .file-item:hover {
  background-color: rgba(30, 41, 59, 0.8);
}