:root {
  --component-width: 80%;
  --label-width: 80px;
  --component-gap: 24px;
  --track-height: 2px;
  --pill-height: 40px;
  --pill-padding: 0 16px;
  --pill-bg: #fff;
  --pill-border: #ccc;
  --pill-radius: 999px;
  --pill-color: #333;
  --btn-size: 32px;
  --btn-border: #ccc;
  --btn-color: #333;
  --accent: #ff5722;
  --gap: 16px;
  --drag-size: 20px;
  --float-bg: #fff;
  --float-shadow: rgba(60,92,249,0.25);
}

.slider-component {
  display: flex;
  align-items: center;
  width: var(--component-width);
  gap: var(--component-gap);
}
.slider-label {
  width: var(--label-width);
  flex-shrink: 0;
}

.slider-bar-wrap {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: var(--pill-height);
  display: flex;
  align-items: center;
  user-select: none;
}

.slider-rail {
  position: absolute; left: 0; right: 0;
  height: var(--track-height);
  background: #ccc;
  border-radius: var(--track-height);
}
.slider-rail-fill {
  position: absolute; left: 0;
  height: var(--track-height);
  background: var(--accent);
  border-radius: var(--track-height);
  width: 50%;
  transition: width 0.1s;
}
.slider-snap {
  position: absolute;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.slider-btn {
  position: absolute; top: 50%;
  width: var(--btn-size); height: var(--btn-size);
  border-radius: 50%; border: 2px solid var(--btn-border);
  background: #fff; color: var(--btn-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; cursor: pointer;
  opacity: 0; transform: translateY(-50%);
  transition: opacity .15s, border-color .15s, color .15s;
  z-index: 3;
}
.slider-bar-wrap:hover .slider-btn {
  opacity: 1;
  border-color: var(--accent);
  color: var(--accent);
}
.slider-btn.dec { left: calc(var(--pos) - (var(--pill-width)/2) - var(--btn-size) - var(--gap) - 2px); }
.slider-btn.inc { left: calc(var(--pos) + (var(--pill-width)/2) + var(--gap) + 2px); }

.slider-pill {
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  height: var(--pill-height);
  padding: var(--pill-padding);
  background: var(--pill-bg);
  border: 2px solid var(--pill-border);
  border-radius: var(--pill-radius);
  color: var(--pill-color);
  font-weight: bold; cursor: grab;
  transition:
    border-color .2s,
    color .2s,
    width .2s,
    padding .2s,
    border-radius .2s,
    background .2s;
  z-index: 2;
  white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
}
.slider-bar-wrap:hover .slider-pill {
  border-color: var(--accent);
  color: var(--accent);
}
.slider-bar-wrap.dragging .slider-btn {
  opacity: 0 !important;
  pointer-events: none;
}
.slider-bar-wrap.dragging .slider-pill {
  width: var(--drag-size);
  height: var(--drag-size);
  padding: 0;
  border-radius: 50%;
  cursor: grabbing;
}

.slider-value-float {
  position: fixed; pointer-events: none;
  transform: translate(-50%, -100%);
  background: var(--float-bg);
  color: var(--accent);
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--float-shadow);
  padding: 4px 12px; z-index: 10;
  animation: popUp .15s cubic-bezier(.65,1.6,.54,.97);
}
@keyframes popUp {
  from { opacity: 0; transform: translate(-50%,-80%) scale(.85); }
  to   { opacity:1; transform: translate(-50%,-100%) scale(1); }
}