/* range-fx: real DOM fill instead of a custom-property gradient (repaints while dragging) */
.range-wrap{position:relative;flex:1;display:flex;align-items:center;min-height:24px;width:100%}
.range-wrap .range-bar{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:6px;border-radius:999px;background:var(--surface-3,rgba(128,128,128,.28));overflow:hidden;pointer-events:none}
.range-wrap .range-fill{display:block;height:100%;width:0;background:var(--accent,#e0a73c);border-radius:999px}
.range-wrap input[type="range"]{position:relative;z-index:1;width:100%;background:transparent !important;margin:0}
.range-wrap input[type="range"]{border:0 !important;box-shadow:none !important;outline:none;height:24px;padding:0;cursor:pointer}
/* ring only for keyboard focus — no orange frame while dragging with mouse/finger */
.range-wrap:has(input[type="range"]:focus-visible){outline:2px solid var(--accent,#e0a73c);outline-offset:6px;border-radius:999px}
.range-wrap input[type="range"]:focus{outline:none}
.range-wrap input[type="range"]:focus-visible{outline:none}
.range-wrap input[type="range"]::-webkit-slider-runnable-track{background:transparent}
.range-wrap input[type="range"]::-moz-range-track{background:transparent}
@media (prefers-reduced-motion:no-preference){.range-wrap .range-fill{transition:width .05s linear}}