/* =========================================
   CUSTOM SCROLLBAR STYLING
   ========================================= */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: rgba(203, 213, 225, 0.01);
  border-radius: 4px;
  transition: background-color 0.3s ease;
}
.is-scrolling ::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background-color: #cbd5e1; }
.dark ::-webkit-scrollbar-thumb { background-color: rgba(71, 85, 105, 0.01); }
.dark.is-scrolling ::-webkit-scrollbar-thumb,
.dark ::-webkit-scrollbar-thumb:hover,
.dark ::-webkit-scrollbar-thumb:active { background-color: #475569; }

/* =========================================
   RANGE SLIDER CUSTOMIZATION
   ========================================= */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px; width: 20px;
  border-radius: 50%;
  background: #10b981;
  cursor: pointer;
  margin-top: -8px; 
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.dark input[type=range]::-webkit-slider-thumb { border-color: #1e293b; }
input[type=range]::-webkit-slider-runnable-track {
  width: 100%; height: 4px;
  cursor: pointer;
  background: #E2E8F0;
  border-radius: 2px;
}
.dark input[type=range]::-webkit-slider-runnable-track { background: #334155; }

/* =========================================
   UTILITY CLASSES
   ========================================= */
.hidden-section { display: none; }