diff --git a/templates/index.html b/templates/index.html
index 3d8dfe0..03a7dad 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1014,6 +1014,12 @@
       let videoDuration = data.video_duration || endInit + 60;
       const segments = data.segments || [];
       
+      // Helper za inline styles (procent v stringu)
+      function pctOfStr(t, total) {
+        if (!total || total <= 0) return "0";
+        return ((t / total) * 100).toFixed(2);
+      }
+      
       const overlay = document.createElement("div");
       overlay.className = "modal-overlay";
       overlay.innerHTML = `
@@ -1026,20 +1032,20 @@
           <!-- iPhone-style trim bar -->
           <div id="trim-bar" style="position:relative; height:72px; margin-top:18px; background:#1a1a1a; border:2px solid #444; border-radius:8px; overflow:hidden; user-select:none; touch-action:none;">
             <!-- Selected region (highlighted) -->
-            <div id="trim-region" style="position:absolute; top:0; bottom:0; background:linear-gradient(180deg, rgba(255,107,107,0.35), rgba(255,107,107,0.2)); border-top:4px solid #ff6b6b; border-bottom:4px solid #ff6b6b; z-index:1;"></div>
+            <div id="trim-region" style="position:absolute; top:0; bottom:0; left:${pctOfStr(startInit, videoDuration)}%; right:${(100 - parseFloat(pctOfStr(endInit, videoDuration))).toFixed(2)}%; background:linear-gradient(180deg, rgba(255,107,107,0.35), rgba(255,107,107,0.2)); border-top:4px solid #ff6b6b; border-bottom:4px solid #ff6b6b; z-index:1;"></div>
             
             <!-- Left handle -->
-            <div id="trim-handle-left" style="position:absolute; top:0; bottom:0; width:24px; background:#ff6b6b; cursor:ew-resize; z-index:3; display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px rgba(255,107,107,0.6);">
+            <div id="trim-handle-left" style="position:absolute; top:0; bottom:0; left:calc(${pctOfStr(startInit, videoDuration)}% - 12px); width:24px; background:#ff6b6b; cursor:ew-resize; z-index:3; display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px rgba(255,107,107,0.6);">
               <div style="width:4px; height:32px; background:#fff; border-radius:2px;"></div>
             </div>
             
             <!-- Right handle -->
-            <div id="trim-handle-right" style="position:absolute; top:0; bottom:0; width:24px; background:#ff6b6b; cursor:ew-resize; z-index:3; display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px rgba(255,107,107,0.6);">
+            <div id="trim-handle-right" style="position:absolute; top:0; bottom:0; left:calc(${pctOfStr(endInit, videoDuration)}% - 12px); width:24px; background:#ff6b6b; cursor:ew-resize; z-index:3; display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px rgba(255,107,107,0.6);">
               <div style="width:4px; height:32px; background:#fff; border-radius:2px;"></div>
             </div>
             
             <!-- Playhead (current video position) -->
-            <div id="trim-playhead" style="position:absolute; top:-4px; bottom:-4px; width:3px; background:#fff; z-index:2; pointer-events:none; opacity:0.8; box-shadow:0 0 4px #fff;"></div>
+            <div id="trim-playhead" style="position:absolute; top:-4px; bottom:-4px; left:0%; width:3px; background:#fff; z-index:2; pointer-events:none; opacity:0.8; box-shadow:0 0 4px #fff;"></div>
             
             <!-- Time labels -->
             <div style="position:absolute; bottom:4px; left:8px; font-size:11px; color:#fff; pointer-events:none; z-index:4; text-shadow:0 0 4px #000;">0:00</div>