frontend/src/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;
.slider-hf::-webkit-slider-thumb {
  @apply appearance-none w-4 h-4 rounded-full cursor-pointer;
  background: linear-gradient(45deg, #FFD21E, #FF9D00);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.slider-hf::-moz-range-thumb {
  @apply w-4 h-4 rounded-full cursor-pointer border-0;
  background: linear-gradient(45deg, #FFD21E, #FF9D00);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Custom pause icon with filled bars */
.pause-filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.pause-filled::before,
.pause-filled::after {
  content: '';
  width: 2px;
  height: 10px;
  background-color: currentColor;
  border-radius: 1px;
}

.pause-filled::before {
  margin-right: 2px;
}

.pause-filled::after {
  margin-left: 2px;
}