diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css
index a1fa246..de18647 100644
--- a/docker/frontend/src/styles/app.css
+++ b/docker/frontend/src/styles/app.css
@@ -1638,14 +1638,17 @@ button.hint:disabled { cursor: default; }
    line says where the value is, the ring says where the knob is. The colour sits
    on the track and not on the input (where it used to be drawn) because the
    line is what is read — a background on the box would have shown through
-   around the hairline every other knob is drawn with. */
-.track-temp::-webkit-slider-runnable-track { background: linear-gradient(90deg, #3f6fd8, #b9c2cc 50%, #e8a33d); height: 4px; }
-.track-tint::-webkit-slider-runnable-track { background: linear-gradient(90deg, #3f9d55, #b9c2cc 50%, #c04ec4); height: 4px; }
-.track-temp::-moz-range-track { background: linear-gradient(90deg, #3f6fd8, #b9c2cc 50%, #e8a33d); height: 4px; }
-.track-tint::-moz-range-track { background: linear-gradient(90deg, #3f9d55, #b9c2cc 50%, #c04ec4); height: 4px; }
+   around the hairline every other knob is drawn with.
+   Each selector keeps the base rule's own `input[type="range"]` on it: the
+   class alone ties with that rule on specificity, and the later one — the plain
+   grey — would have won the track. */
+input[type="range"].track-temp::-webkit-slider-runnable-track { background: linear-gradient(90deg, #3f6fd8, #b9c2cc 50%, #e8a33d); height: 4px; }
+input[type="range"].track-tint::-webkit-slider-runnable-track { background: linear-gradient(90deg, #3f9d55, #b9c2cc 50%, #c04ec4); height: 4px; }
+input[type="range"].track-temp::-moz-range-track { background: linear-gradient(90deg, #3f6fd8, #b9c2cc 50%, #e8a33d); height: 4px; }
+input[type="range"].track-tint::-moz-range-track { background: linear-gradient(90deg, #3f9d55, #b9c2cc 50%, #c04ec4); height: 4px; }
 /* The node is centred on a track twice the hairline's height, so it shifts up
    the one pixel the base rule does not account for. */
-.track-temp::-webkit-slider-thumb, .track-tint::-webkit-slider-thumb { margin-top: -3px; }
+input[type="range"].track-temp::-webkit-slider-thumb, input[type="range"].track-tint::-webkit-slider-thumb { margin-top: -3px; }
 
 /* --- responsive --------------------------------------------------------- */
 @media (max-width: 860px) {