diff --git a/web/static/app.js b/web/static/app.js
index 6a72643..e9c46d6 100644
--- a/web/static/app.js
+++ b/web/static/app.js
@@ -96,11 +96,11 @@ function applyStatus(st) {
   if (st.length > 0) {
     progressFill.style.width = (st.position / st.length * 100).toFixed(1) + '%';
     timeCurrent.textContent  = fmtTime(st.position);
-    timeLength.textContent   = fmtTime(st.length);
+    timeLength.textContent   = '-' + fmtTime(st.length - st.position);
   } else {
     progressFill.style.width = '0%';
     timeCurrent.textContent  = '0:00';
-    timeLength.textContent   = '0:00';
+    timeLength.textContent   = '-0:00';
   }
 
   btnPlay.textContent = st.state === 'playing' ? '⏸' : '▶';
@@ -130,12 +130,13 @@ document.querySelectorAll('.btn-seek').forEach(btn => {
 });
 
 $('progress-bar').addEventListener('click', async e => {
-  // We need current length — read from last status (stored in DOM for now via timeLength).
-  const total = parseTime(timeLength.textContent);
+  // Derive total from current + remaining (timeLength shows "-mm:ss").
+  const current = parseTime(timeCurrent.textContent);
+  const remaining = parseTime(timeLength.textContent.replace('-', ''));
+  const total = current + remaining;
   if (!total) return;
   const rect = e.currentTarget.getBoundingClientRect();
   const target = Math.round((e.clientX - rect.left) / rect.width * total);
-  const current = parseTime(timeCurrent.textContent);
   send({ cmd: 'seek', delta: target - current });
 });