/* === Слайдер: общий стиль === */
    .credit-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      background: linear-gradient(to right, #1e40af 0%, #1e40af var(--progress, 0%), #e5e7eb var(--progress, 0%), #e5e7eb 100%);
      border-radius: 999px;
      outline: none;
      cursor: pointer;
    }

    /* Десктопная версия — более высокий трек */
    .credit-slider.desktop {
      height: 30px;
    }

    /* === Ползунок (thumb) === */
    .credit-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #1e40af;
      /* blue-900 */
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      transition: transform 0.15s ease;
    }

    .credit-slider::-moz-range-thumb {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #1e40af;
      cursor: pointer;
      border: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      transition: transform 0.15s ease;
    }

    /* Анимация при наведении и нажатии */
    .credit-slider::-webkit-slider-thumb:hover,
    .credit-slider::-moz-range-thumb:hover {
      transform: scale(1.1);
    }

    .credit-slider::-webkit-slider-thumb:active,
    .credit-slider::-moz-range-thumb:active {
      transform: scale(1.05);
    }


    @media (max-width: 768px) {
      .credit-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #1e40af;
        /* blue-900 */
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        transition: transform 0.15s ease;
      }
    }