diff --git a/DeepDrftPublic.Client/Controls/MixWaveformVisualizer.razor.css b/DeepDrftPublic.Client/Controls/MixWaveformVisualizer.razor.css
index 4572c29..cc4f0a8 100644
--- a/DeepDrftPublic.Client/Controls/MixWaveformVisualizer.razor.css
+++ b/DeepDrftPublic.Client/Controls/MixWaveformVisualizer.razor.css
@@ -21,12 +21,14 @@
     -webkit-backdrop-filter: blur(2px);
 }
 
-/* Zoom slider — a small viewing control pinned to the bottom-right. Pointer events are re-enabled
-   here only (the backdrop stays inert), and it is never a seek surface. */
+/* Zoom slider — a small viewing control pinned to the top-right, clear of the player bar at
+   the bottom and the nav bar at the top. Pointer events are re-enabled here only (the backdrop
+   stays inert), and it is never a seek surface. top: 5rem sits just below the fixed nav bar
+   (~4.5rem tall) so neither the expanded player bar nor the nav occludes it. */
 .mix-waveform-zoom {
     position: absolute;
     right: 1.5rem;
-    bottom: 1.5rem;
+    top: 5rem;
     width: 180px;
     max-width: 40vw;
     pointer-events: auto;
diff --git a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css
index 7cfb9fe..b0b7fc4 100644
--- a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css
+++ b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css
@@ -1,4 +1,8 @@
 .deepdrft-footer {
+    /* position:relative + z-index:1 creates a stacking context that paints above the
+       MixWaveformVisualizer backdrop (z-index:0), keeping footer text fully legible. */
+    position: relative;
+    z-index: 1;
     background: var(--deepdrft-white);
     border-top: 1px solid var(--deepdrft-border);
     padding: 3rem;