.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-icon {
  cursor: pointer;
  margin-left: 8px;
  color: #9CA3AF; /* gray-400 */
  transition: color 0.2s ease;
}

.tooltip-icon:hover {
  color: #6B7280; /* gray-500 */
}

.tooltip {
  visibility: hidden !important;
  width: 220px;
  background-color: #1F2937; /* gray-800 */
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -110px;
  opacity: 0 !important;
  transition: opacity 0.2s ease;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: normal;
  word-wrap: break-word;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #1F2937 transparent transparent transparent;
}

/* Slider styles */
.slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.slider::-webkit-slider-track {
  background: transparent;
  height: 12px;
}

.slider::-moz-range-track {
  background: transparent;
  height: 12px;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #4f46e5; /* primary-600 */
  height: 24px;
  width: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.slider::-moz-range-thumb {
  background: #4f46e5; /* primary-600 */
  height: 24px;
  width: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.slider::-webkit-slider-thumb:hover {
  background: #4338ca; /* primary-700 */
  transform: scale(1.1);
}

.slider::-moz-range-thumb:hover {
  background: #4338ca; /* primary-700 */
  transform: scale(1.1);
}

.slider:focus {
  outline: none;
}

.slider::-webkit-slider-thumb:focus {
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(79, 70, 229, 0.3);
}

.slider::-moz-range-thumb:focus {
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(79, 70, 229, 0.3);
}

/* Mobile-friendly positioning */
@media (max-width: 640px) {
  .tooltip {
    width: 200px;
    margin-left: -100px;
    bottom: 110%;
    font-size: 0.8rem;
  }
}

/* Hover states for both mobile and desktop */
.tooltip-container:hover .tooltip,
.tooltip-icon:hover ~ .tooltip,
.tooltip-icon:focus ~ .tooltip,
.tooltip-container:focus-within .tooltip,
.tooltip-container:hover .tooltip-icon + .tooltip,
.tooltip-icon:hover + .tooltip {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Touch support for mobile */
@media (hover: none) {
  .tooltip-icon:active ~ .tooltip,
  .tooltip-container:active .tooltip {
    visibility: visible;
    opacity: 1;
  }
}

#gradient-canvas {
  width: 100%;
  height: 100%;
  --gradient-color-1: #5a51eb;
  /* Slightly lighter than base */
  --gradient-color-2: #4F45E4;
  /* Your specified color */
  --gradient-color-3: #4439d6;
  /* Slightly darker */
  --gradient-color-4: #3a30c7;
  /* A bit darker */
}

#gradient-canvas2 {
  width: 100%;
  height: 100%;
  --gradient-color-1: #5a51eb;
  /* Slightly lighter than base */
  --gradient-color-2: #4F45E4;
  /* Your specified color */
  --gradient-color-3: #4439d6;
  /* Slightly darker */
  --gradient-color-4: #3a30c7;
  /* A bit darker */
}

#gradient-canvas3 {
  width: 100%;
  height: 100%;
  --gradient-color-1: #5a51eb;
  /* Slightly lighter than base */
  --gradient-color-2: #4F45E4;
  /* Your specified color */
  --gradient-color-3: #4439d6;
  /* Slightly darker */
  --gradient-color-4: #3a30c7;
  /* A bit darker */
}