fix(ui): snap player view directly from Studio Reference mockup

Wholesale replacement of the player view markup + a verbatim mockup
CSS block scoped to .now-playing. Previous approach kept restyling
legacy classes which left a layered, inconsistent result. This is a
clean snap: same DOM structure as the mockup, same CSS rules, mapped
onto existing JS-touched IDs.

Markup
- One <section class="now-playing"> with vinyl-stage on left and
  track-masthead on right
- Vinyl spins via data-playstate and contains album art as the
  circular center label (existing #album-art img preserved)
- SVG tonearm pivots in/out by data-playstate
- Track masthead: .kicker (copper italic mono), large italic-serif
  .track-title, italic .track-byline, mono .track-album
- Meta grid: 2 cells (State / Source) with mono labels + italic
  serif values
- 30 .spectrum bars between metadata and transport
- .transport: progress-row (timecode + .progress-track + timecode)
  and .controls (3 .btn-trans buttons + .vu-cluster)
- Volume slider, mute button, visualizer toggle moved to a
  .visually-hidden block — they remain functional for JS / a11y
  but no longer compete for visual real estate. Volume control
  happens via the always-visible mini player.

VU cluster (mockup-faithful)
- 140x60 VU meter with conic-gradient grid background, copper
  needle, "VU" label
- Stacked readout: "OUT <strong>SYS</strong>" / "VOL <strong>72%</strong>"
- Click anywhere on cluster toggles mute (calls toggleMute())
- When muted: needle turns rust, readout strong turns rust,
  OUT label switches to MUTE

JS hooks
- updatePlaybackState already sets :root[data-playstate] (drives
  spin + tonearm)
- Volume tick now updates #vu-vol and #vu-out
- updateMuteIcon updates #vu-out + .vu-cluster.muted class

Scoping
- All new CSS is .now-playing-prefixed so other tabs and dialogs
  are untouched
- Legacy .progress-bar:hover scaleY and ::after scale(0) are
  defeated with !important inside .now-playing

media_server/static/js/player.js

@@ -685,6 +685,11 @@ export function updateUI(status) {
             const deg = -45 + (status.volume / 100) * 90;
             needle.style.transform = `rotate(${deg}deg)`;
         }
+        // Editorial VU readout: VOL XX% / OUT (SYS or MUTED)
+        const vuVol = document.getElementById('vu-vol');
+        if (vuVol) vuVol.textContent = `${status.volume}%`;
+        const vuOut = document.getElementById('vu-out');
+        if (vuOut) vuOut.textContent = status.muted ? 'MUTE' : 'SYS';
     }
 
     updateMuteIcon(status.muted);
@@ -788,4 +793,8 @@ function updateMuteIcon(muted) {
     const path = muted ? SVG_MUTED : SVG_UNMUTED;
     dom.muteIcon.innerHTML = path;
     dom.miniMuteIcon.innerHTML = path;
+    const vuOut = document.getElementById('vu-out');
+    if (vuOut) vuOut.textContent = muted ? 'MUTE' : 'SYS';
+    const cluster = document.querySelector('.now-playing .vu-cluster');
+    if (cluster) cluster.classList.toggle('muted', muted);
 }