ui(player): widen spectrum to fill column; swap volume control to left of VU cluster

- Spectrum: switch from flex to grid auto-flow so each bar gets an
  equal-width column slot regardless of bar count. Fewer (40) but
  fatter bars now genuinely span the full grid column.
- Spectrum height bumped to 70px, gap 4px.
- VU cluster: flex-direction: row-reverse so volume controls sit on
  the LEFT, readout in the middle, VU meter on the RIGHT.
- Volume hairline divider switched from border-left to border-right
  so it stays between the volume controls and the readout.

media_server/static/css/styles.css

@@ -6867,21 +6867,23 @@ body.visualizer-active .now-playing .spectrogram-canvas {
 
 /* ─── Spectrum bars (JS-injected; real audio from backend FFT) ── */
 .now-playing .spectrum {
-    display: flex;
-    align-items: flex-end;
-    justify-content: stretch;
-    gap: 2px;
-    height: 64px;
+    /* Grid with explicit equal-width columns guarantees each bar
+       claims its share of the full container width, regardless of
+       the bar count. */
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    align-items: end;
+    column-gap: 4px;
+    height: 70px;
     margin: 36px 0 24px;
     width: 100%;
-    /* Force the spectrum to claim the full grid column width even
-       if siblings (meta-grid cells) report intrinsic widths. */
     box-sizing: border-box;
     min-width: 0;
 }
 .now-playing .spectrum span {
     display: block;
-    flex: 1 1 0;
+    width: 100%;
     min-width: 0;
     background: linear-gradient(to top, var(--copper-lo) 0%, var(--copper) 60%, var(--copper-hi) 100%);
     opacity: 0.92;
@@ -7026,10 +7028,11 @@ body.audio-spectrum-live .now-playing .spectrum span {
     width: 24px; height: 24px;
 }
 
-/* VU cluster — meter + readout + integrated volume control */
+/* VU cluster — volume left, readout center, VU meter right (reversed) */
 .now-playing .vu-cluster {
     margin-left: auto;
     display: flex;
+    flex-direction: row-reverse;
     align-items: center;
     gap: 16px;
     user-select: none;
@@ -7040,14 +7043,16 @@ body.audio-spectrum-live .now-playing .spectrum span {
 }
 .now-playing .vu-cluster.muted .vu-readout strong { color: var(--rust); }
 
-/* Integrated volume control: tiny mute icon + slim copper slider */
+/* Integrated volume control: tiny mute icon + slim copper slider.
+   Lives on the LEFT of the cluster (row-reverse), so its divider
+   sits on its RIGHT to separate it from the readout. */
 .now-playing .vu-volume {
     display: flex;
     align-items: center;
     gap: 10px;
-    padding-left: 12px;
-    border-left: 1px solid var(--rule);
-    margin-left: 4px;
+    padding-right: 12px;
+    border-right: 1px solid var(--rule);
+    margin-right: 4px;
 }
 .now-playing .vu-volume .mute-btn {
     background: transparent;

media_server/static/js/app.js

@@ -166,11 +166,12 @@ window.addEventListener('DOMContentLoaded', async () => {
     // Vinyl is now structural / always-on via CSS — no init call needed.
     // applyVinylMode();
 
-    // Build the editorial spectrum bars (60 spans). JS-managed so we can
+    // Build the editorial spectrum bars. Fewer, fatter bars read better
+    // than many thin ones at this column width. JS-managed so we can
     // drive heights from real audio data when available.
     const spectrumRoot = document.getElementById('player-spectrum');
     if (spectrumRoot && !spectrumRoot.children.length) {
-        const SPECTRUM_BARS = 60;
+        const SPECTRUM_BARS = 40;
         const frag = document.createDocumentFragment();
         for (let i = 0; i < SPECTRUM_BARS; i++) {
             const s = document.createElement('span');