.slider {
      -webkit-appearance: none;
      width: 100%;
      height: 20px;
      border-radius: 10px !important;
      background: #e5e7eb; 
      border-radius: 2px;
      outline: none;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #1e40af; 
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 0 2px rgba(0,0,0,0.2);
    }
    .slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #1e40af;
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 0 2px rgba(0,0,0,0.2);
    }

    .slider::-moz-range-track {
      height: 4px;
      background: #e5e7eb;
      border-radius: 2px;
    }

    .progress-bar {
      width: 100%;
      height: 16px;
      background: #f3f4f6;
      border-radius: 8px;
      overflow: hidden;
      margin-top: 16px;
    }
    .progress-fill {
      height: 100%;
      background: #002D72;
      border-radius: 8px;
      width: 0%;
      transition: width 0.3s ease;
    }