diff --git a/src/styles.css b/src/styles.css
index c5f9dac..39395c3 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2179,28 +2179,86 @@ body.theme-light .modal {
     font-size: 13px;
 }
 
+/* ============================================
+   RANGE SLIDER — Twitch-purple track + thumb
+   ============================================
+   Track gets a subtle purple-tint behind a darker base so the slider
+   reads as part of the same family as the queue progress bar. Thumb
+   is a 16px purple circle with a hover halo. */
 .slider-group input[type="range"],
 .modal input[type="range"] {
     width: 100%;
     height: 6px;
     -webkit-appearance: none;
-    background: #1a1a1a;
-    border-radius: 3px;
+    appearance: none;
+    background: linear-gradient(90deg, rgba(145, 70, 255, 0.18) 0%, rgba(20, 20, 24, 0.95) 100%);
+    border-radius: 999px;
     outline: none;
+    cursor: pointer;
+    transition: box-shadow 0.18s;
+}
+
+.slider-group input[type="range"]:focus-visible,
+.modal input[type="range"]:focus-visible {
+    box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.22);
 }
 
 .slider-group input[type="range"]::-webkit-slider-thumb,
 .modal input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
+    appearance: none;
     width: 16px;
     height: 16px;
-    background: #E5A00D;
+    background: var(--accent);
+    border: 2px solid #fff;
     border-radius: 50%;
     cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+    transition: transform 0.15s, box-shadow 0.15s;
 }
 
-.modal input[type="range"]::-webkit-slider-thumb:hover {
-    background: #ffb825;
+.slider-group input[type="range"]::-moz-range-thumb,
+.modal input[type="range"]::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: var(--accent);
+    border: 2px solid #fff;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+    transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.slider-group input[type="range"]:hover::-webkit-slider-thumb,
+.modal input[type="range"]:hover::-webkit-slider-thumb {
+    background: var(--accent-hover);
+    transform: scale(1.15);
+    box-shadow: 0 3px 12px rgba(145, 70, 255, 0.55);
+}
+
+.slider-group input[type="range"]:hover::-moz-range-thumb,
+.modal input[type="range"]:hover::-moz-range-thumb {
+    background: var(--accent-hover);
+    transform: scale(1.15);
+    box-shadow: 0 3px 12px rgba(145, 70, 255, 0.55);
+}
+
+/* ============================================
+   NUMBER INPUT — hide OS spinners, rely on keyboard / scroll
+   ============================================
+   The default Webkit spinners are a tiny gray arrow stack that always
+   reads as "unfinished input field" no matter the theme. Hidden across
+   all number inputs; users type or use arrow keys. Spinner-on-hover
+   pattern could come back as a custom thing later if needed. */
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
 }
 
 .clip-time-display {