diff --git a/app/static/public/css/video.css b/app/static/public/css/video.css
index e0c6c0c..a17b8fe 100644
--- a/app/static/public/css/video.css
+++ b/app/static/public/css/video.css
@@ -679,23 +679,61 @@ body {
   width: 100%;
   appearance: none;
   background: transparent;
-  --timeline-track-bg: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
+  --cut-pct: 0%;
+  --keep-bg: rgba(255, 255, 255, 0.95);
+  --warn-bg: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.65) 0 6px, rgba(100, 116, 139, 0.9) 6px 12px);
 }
 
 .timeline-delete-zone::-webkit-slider-runnable-track {
   height: 8px;
   border-radius: 999px;
-  background: var(--timeline-track-bg);
+  background: var(--warn-bg);
   border: 1px solid rgba(148, 163, 184, 0.35);
 }
 
 .timeline-delete-zone::-moz-range-track {
   height: 8px;
   border-radius: 999px;
-  background: var(--timeline-track-bg);
+  background: var(--warn-bg);
   border: 1px solid rgba(148, 163, 184, 0.35);
 }
 
+.timeline-delete-zone[data-delete-side="right"]::-webkit-slider-runnable-track {
+  background: linear-gradient(90deg, var(--keep-bg) 0%, var(--keep-bg) var(--cut-pct), transparent var(--cut-pct), transparent 100%), var(--warn-bg);
+}
+
+.timeline-delete-zone[data-delete-side="right"]::-moz-range-track {
+  background: linear-gradient(90deg, var(--keep-bg) 0%, var(--keep-bg) var(--cut-pct), transparent var(--cut-pct), transparent 100%), var(--warn-bg);
+}
+
+.timeline-delete-zone[data-delete-side="left"]::-webkit-slider-runnable-track {
+  background: linear-gradient(90deg, transparent 0%, transparent var(--cut-pct), var(--keep-bg) var(--cut-pct), var(--keep-bg) 100%), var(--warn-bg);
+}
+
+.timeline-delete-zone[data-delete-side="left"]::-moz-range-track {
+  background: linear-gradient(90deg, transparent 0%, transparent var(--cut-pct), var(--keep-bg) var(--cut-pct), var(--keep-bg) 100%), var(--warn-bg);
+}
+
+.timeline-delete-zone::-webkit-slider-thumb {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  background: #111827;
+  margin-top: -5px;
+  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
+}
+
+.timeline-delete-zone::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  background: #111827;
+  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
+}
+
 .timeline-delete-zone.is-disabled {
   cursor: not-allowed;
 }
@@ -710,6 +748,12 @@ body {
   border-color: rgba(148, 163, 184, 0.45);
 }
 
+.timeline-delete-zone.is-disabled::-webkit-slider-thumb,
+.timeline-delete-zone.is-disabled::-moz-range-thumb {
+  background: #64748b;
+  border-color: #cbd5e1;
+}
+
 .edit-meta-grid {
   margin-bottom: 12px;
 }
diff --git a/app/static/public/js/video.js b/app/static/public/js/video.js
index bb58a33..a75d75d 100644
--- a/app/static/public/js/video.js
+++ b/app/static/public/js/video.js
@@ -202,16 +202,7 @@
     const valueRaw = Number(inputEl.value || 0);
     const value = Math.max(0, Math.min(max, Number.isFinite(valueRaw) ? valueRaw : 0));
     const pct = (value / max) * 100;
-    const side = String(inputEl.dataset.deleteSide || 'right');
-    const warnPattern = 'repeating-linear-gradient(135deg, rgba(148,163,184,0.38) 0 7px, rgba(100,116,139,0.58) 7px 14px)';
-    const keep = 'rgba(255,255,255,0.95)';
-    let bg = '';
-    if (side === 'left') {
-      bg = `linear-gradient(90deg, transparent 0%, transparent ${pct}%, ${keep} ${pct}%, ${keep} 100%), ${warnPattern}`;
-    } else {
-      bg = `linear-gradient(90deg, ${keep} 0%, ${keep} ${pct}%, transparent ${pct}%, transparent 100%), ${warnPattern}`;
-    }
-    inputEl.style.setProperty('--timeline-track-bg', bg);
+    inputEl.style.setProperty('--cut-pct', `${pct}%`);
   }
 
   function refreshAllDeleteZoneTracks() {
diff --git a/app/static/public/pages/video.html b/app/static/public/pages/video.html
index 63b68be..a026656 100644
--- a/app/static/public/pages/video.html
+++ b/app/static/public/pages/video.html
@@ -318,7 +318,7 @@
   <script src="/static/common/js/pwa.js?v=0.1.1"></script>
   <script src="/static/vendor/ffmpeg/ffmpeg.js?v=0.1.0"></script>
   <script src="/static/vendor/ffmpeg/ffmpeg-util.js?v=0.1.0"></script>
-  <script src="/static/public/js/video.js?v=0.5.39"></script>
+  <script src="/static/public/js/video.js?v=0.5.40"></script>
 </body>
 
 </html>