fix(player): real audio level on VU; full-width spectrum; hide canvas under vinyl

VU needle reflects actual audio output
- Was just a synthetic wobble bounded by the volume slider value.
  Now reads RMS of the FFT bins (skipping bin 0 / DC) the visualizer
  feeds in, multiplies by current volume, and applies attack/release
  smoothing for analog-feeling ballistics.
- Falls back to the synthetic wobble when audio capture isn't
  running so the needle still looks alive on the static fallback.
- When playback stops, needle settles to the bottom of the swing
  (-45deg) instead of holding the volume position.

Spectrum width — actually fixed this time
- Root cause: CSS repeat() does NOT accept a CSS variable for its
  count argument, so my `repeat(var(--spectrum-bars), 1fr)` rule
  was invalid and silently dropped, leaving the legacy/auto sizing
  behavior. Set grid-template-columns directly from JS to
  `repeat(40, minmax(0, 1fr))`.
- CSS retains a `repeat(40, minmax(0, 1fr))` literal as a default
  so the row renders sane even before JS executes.

Spectrogram canvas under vinyl
- Hidden via display: none — the editorial .spectrum row already
  shows the audio spectrum; the canvas was redundant and ugly.
  Element stays in DOM so the visualizer JS keeps rendering (drives
  album-art bass-pulse + dynamic background bands).

media_server/static/css/styles.css

@@ -6711,21 +6711,12 @@ footer .separator { color: var(--ink-ghost); margin: 0 8px; }
 
 @keyframes sr-snap-spin { to { transform: rotate(360deg); } }
 
-/* Spectrogram canvas hidden by default; toggle reveals it. */
+/* Spectrogram canvas: hidden — the editorial .spectrum row in the
+   track-masthead already shows the audio spectrum. The canvas
+   element stays in the DOM so the visualizer JS keeps rendering
+   (drives the album-art bass-pulse + dynamic background). */
 .now-playing .spectrogram-canvas {
-    position: absolute;
-    bottom: -52px;
-    left: 7%; right: 7%;
-    width: 86%;
-    height: 38px;
-    border-radius: 0;
-    opacity: 0;
-    transition: opacity 240ms var(--ease);
-    pointer-events: none;
-}
-.now-playing.visualizer-active .spectrogram-canvas,
-body.visualizer-active .now-playing .spectrogram-canvas {
-    opacity: 0.6;
+    display: none !important;
 }
 
 /* ─── Track masthead ──────────────────────────────────────── */
@@ -6867,11 +6858,12 @@ body.visualizer-active .now-playing .spectrogram-canvas {
 
 /* ─── Spectrum bars (JS-injected; real audio from backend FFT) ── */
 .now-playing .spectrum {
-    /* Explicit equal-width columns. The CSS variable --spectrum-bars
-       is set by JS so adding/removing bars stays in sync. */
+    /* grid-template-columns is set from JS to repeat(N, minmax(0, 1fr))
+       because CSS repeat() does NOT accept a CSS variable as its count.
+       Falling back to a 40-column default ensures something sane renders
+       even if JS hasn't executed yet. */
     display: grid !important;
-    grid-template-columns: repeat(var(--spectrum-bars, 40), minmax(0, 1fr)) !important;
-    grid-auto-flow: column;
+    grid-template-columns: repeat(40, minmax(0, 1fr));
     align-items: end;
     column-gap: 4px;
     height: 70px;