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;