diff --git a/media_server/static/css/styles.css b/media_server/static/css/styles.css
index 858b2f0..00af07b 100644
--- a/media_server/static/css/styles.css
+++ b/media_server/static/css/styles.css
@@ -4630,7 +4630,7 @@ body.visualizer-active .vinyl-stage .spectrogram-canvas {
     margin-bottom: 0;
 }
 
-/* Editorial 4-cell metadata grid (now houses State / Source / Elapsed / Length) */
+/* Editorial metadata grid — 2 cells (State / Source); timecodes flank the timeline */
 .meta-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -4638,6 +4638,9 @@ body.visualizer-active .vinyl-stage .spectrogram-canvas {
     border-top: 1px solid var(--rule);
     border-bottom: 1px solid var(--rule);
 }
+.meta-grid.meta-grid-2 {
+    grid-template-columns: minmax(180px, auto) 1fr;
+}
 .meta-cell {
     padding: 16px 18px 16px 0;
     border-right: 1px solid var(--rule);
@@ -4919,6 +4922,7 @@ body.visualizer-active .vinyl-stage .spectrogram-canvas {
 /* ─── Progress (hairline editorial) ─────────────────────────── */
 .progress-container {
     margin-top: 28px;
+    margin-bottom: 0;     /* override legacy 2rem */
 }
 
 .time-display {
@@ -4934,10 +4938,24 @@ body.visualizer-active .vinyl-stage .spectrogram-canvas {
 
 .progress-bar {
     height: 2px;
+    width: 100%;
     background: var(--rule-strong);
     border-radius: 0;
     cursor: pointer;
     overflow: visible;
+    position: relative;
+    transform: none !important;       /* kill legacy :hover scaleY */
+    transition: background 200ms var(--ease);
+    min-width: 0;                     /* let grid shrink it */
+}
+
+.progress-bar:hover {
+    background: var(--rule-strong);
+    transform: none !important;       /* defeat legacy :hover transform */
+}
+.progress-bar.dragging {
+    transform: none !important;
+    background: var(--rule-strong);
 }
 
 .progress-fill {
@@ -4945,21 +4963,45 @@ body.visualizer-active .vinyl-stage .spectrogram-canvas {
     box-shadow: 0 0 12px var(--copper-glow);
     border-radius: 0;
     height: 100%;
+    width: 0;
     position: relative;
+    transition: width 0.1s linear;
 }
 
 .progress-fill::after {
     content: "";
     position: absolute;
     right: -5px;
-    top: -4px;
+    top: 50%;
+    transform: translateY(-50%) scale(1) !important;  /* always visible, override legacy scale(0) default */
     width: 10px;
     height: 10px;
     background: var(--copper);
     border-radius: 50%;
     box-shadow: 0 0 14px var(--copper-glow), 0 0 0 4px rgba(224, 128, 56, 0.12);
+    transition: none;
 }
 
+/* Progress row inside transport — grid layout for [time | bar | time] */
+.transport .progress-row,
+.progress-container.progress-row {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 18px;
+    align-items: center;
+    margin-top: 0;
+    margin-bottom: 26px;
+}
+.progress-row .timecode {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--ink-mute);
+    letter-spacing: 0.06em;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+}
+.progress-row .timecode.elapsed { color: var(--copper); font-weight: 500; }
+
 /* ─── Controls (circular transport) ─────────────────────────── */
 .controls {
     margin-top: 28px;
diff --git a/media_server/static/index.html b/media_server/static/index.html
index 74fc358..a6fa38c 100644
--- a/media_server/static/index.html
+++ b/media_server/static/index.html
@@ -198,8 +198,8 @@
                         <div id="album"></div>
                     </div>
 
-                    <!-- Editorial metadata grid (4 cells) -->
-                    <div class="meta-grid">
+                    <!-- Editorial metadata grid (State + Source; timecodes are on the timeline) -->
+                    <div class="meta-grid meta-grid-2">
                         <div class="meta-cell">
                             <div class="meta-label" data-i18n="meta.state">State</div>
                             <div class="meta-value">
@@ -216,14 +216,6 @@
                                 <span id="source" data-i18n="player.unknown_source">Unknown</span>
                             </div>
                         </div>
-                        <div class="meta-cell">
-                            <div class="meta-label" data-i18n="meta.elapsed">Elapsed</div>
-                            <div class="meta-value mono" id="meta-elapsed">0:00</div>
-                        </div>
-                        <div class="meta-cell">
-                            <div class="meta-label" data-i18n="meta.length">Length</div>
-                            <div class="meta-value mono" id="meta-length">0:00</div>
-                        </div>
                     </div>
 
                     <!-- Decorative spectrum bars -->
diff --git a/media_server/static/locales/en.json b/media_server/static/locales/en.json
index 6700727..bdd8f0e 100644
--- a/media_server/static/locales/en.json
+++ b/media_server/static/locales/en.json
@@ -27,8 +27,6 @@
   "header.edition_sub": "Studio Reference Edition",
   "meta.state": "State",
   "meta.source": "Source",
-  "meta.elapsed": "Elapsed",
-  "meta.length": "Length",
   "player.title_unavailable": "Title unavailable",
   "player.source": "Source:",
   "player.unknown_source": "Unknown",
diff --git a/media_server/static/locales/ru.json b/media_server/static/locales/ru.json
index 1dc7825..d6ce60d 100644
--- a/media_server/static/locales/ru.json
+++ b/media_server/static/locales/ru.json
@@ -27,8 +27,6 @@
   "header.edition_sub": "Studio Reference Edition",
   "meta.state": "Состояние",
   "meta.source": "Источник",
-  "meta.elapsed": "Прошло",
-  "meta.length": "Длина",
   "player.title_unavailable": "Название недоступно",
   "player.source": "Источник:",
   "player.unknown_source": "Неизвестно",