fix(ui): centred toolbar icons; full-width spectrum; needle at rest; drop dynamic bg

Toolbar icons (off-centre inside hit box)
- Legacy .header-btn had padding: 4px 6px and inline-flex with no
  justify-content. With box-sizing: content-box and width: 36px, the
  asymmetric horizontal padding shifted icons to the upper-left of
  the 36×36 hit box.
- Override now sets display: inline-flex; align-items: center;
  justify-content: center; padding: 0; box-sizing: border-box and
  forces SVG children to display: block 16x16 so icons sit dead-
  centre.

Spectrum width — root cause finally found and removed
- An old override block (lines 4821–4878) was still in the file:
  .spectrum { max-width: 360px } + .spectrum span { width: 3px;
  flex: 0 0 3px } + 30 nth-child rules. They had equal/higher
  specificity for some props than the .now-playing-scoped rules
  and were declared first, so width was capping the row.
- Deleted that whole block. .now-playing .spectrum is now the
  single source of truth. Combined with the explicit
  grid-template-columns: repeat(40, minmax(0, 1fr)) (set both in
  CSS literal and from JS via gridTemplateColumns), the row
  reliably fills the column.

VU needle resting position
- CSS default rotation changed from -22deg (pointing upper-left)
  to -45deg — the conventional VU meter rest at silence (-∞ dB).
  Matches stopVuWobble() which also settles the needle there.

Dynamic background — removed
- .bg-shader-canvas hidden via display: none.
- Toggle button (#bgToggle) hidden so the toolbar is cleaner.
- Canvas + JS module stay in DOM so the existing JS doesn't crash.

media_server/static/css/styles.css

@@ -216,35 +216,10 @@
     box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
 }
 
-/* Dynamic Background Canvas — editorial-toned (warm, subtle) */
-.bg-shader-canvas {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: -1;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.6s ease;
-    /* Sepia + slight desaturation keeps the shader colors palette-aligned */
-    filter: sepia(0.4) saturate(0.75) contrast(0.95) brightness(0.9) hue-rotate(-8deg);
-    /* Multiply blends the bright shader into the warm dark page background */
-    mix-blend-mode: screen;
-}
-
-.bg-shader-canvas.visible {
-    /* Lower max opacity so it reads as atmosphere, not foreground */
-    opacity: 0.45;
-}
-
-:root[data-theme="light"] .bg-shader-canvas {
-    filter: sepia(0.35) saturate(0.7) contrast(1.05) brightness(1.05) hue-rotate(-12deg);
-    mix-blend-mode: multiply;
-}
-:root[data-theme="light"] .bg-shader-canvas.visible {
-    opacity: 0.35;
-}
+/* Dynamic background removed per user request — canvas stays in DOM
+   so JS doesn't break, but is hidden + the toggle button is hidden. */
+.bg-shader-canvas { display: none !important; }
+#bgToggle { display: none !important; }
 
 body.dynamic-bg-active {
     background: transparent;
@@ -4259,8 +4234,21 @@ header .brand-sub {
     border-radius: 0;
     width: 36px;
     height: 36px;
+    /* Centre the icon inside the hit box; reset legacy padding. */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    box-sizing: border-box;
     transition: all 200ms var(--ease);
 }
+.header-btn > svg,
+.header-btn-logout > svg,
+.header-link > svg {
+    display: block;
+    width: 16px;
+    height: 16px;
+}
 .header-btn:hover,
 .header-btn-logout:hover,
 .header-link:hover {
@@ -4818,64 +4806,9 @@ body.visualizer-active .vinyl-stage .spectrogram-canvas {
 /* Hide the legacy .playback-state container (its data is now in meta-grid) */
 .track-info > .playback-state { display: none; }
 
-/* Spectrum decorative bars (centered, compact) */
-.spectrum {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    gap: 3px;
-    height: 32px;
-    margin: 28px auto 8px;
-    max-width: 360px;
-}
-.spectrum span {
-    display: block;
-    width: 3px;
-    flex: 0 0 3px;
-    background: linear-gradient(to top, var(--copper-lo), var(--copper-hi));
-    opacity: 0.85;
-    border-radius: 99px 99px 0 0;
-    transform-origin: bottom;
-    animation: sr-spectrum 1.1s ease-in-out infinite;
-    animation-play-state: paused;
-}
-:root[data-playstate="playing"] .spectrum span { animation-play-state: running; }
-
-.spectrum span:nth-child(1)  { animation-delay: -0.10s; height: 30%; }
-.spectrum span:nth-child(2)  { animation-delay: -0.45s; height: 60%; }
-.spectrum span:nth-child(3)  { animation-delay: -0.20s; height: 80%; }
-.spectrum span:nth-child(4)  { animation-delay: -0.55s; height: 50%; }
-.spectrum span:nth-child(5)  { animation-delay: -0.30s; height: 95%; }
-.spectrum span:nth-child(6)  { animation-delay: -0.05s; height: 70%; }
-.spectrum span:nth-child(7)  { animation-delay: -0.65s; height: 40%; }
-.spectrum span:nth-child(8)  { animation-delay: -0.25s; height: 85%; }
-.spectrum span:nth-child(9)  { animation-delay: -0.40s; height: 55%; }
-.spectrum span:nth-child(10) { animation-delay: -0.10s; height: 75%; }
-.spectrum span:nth-child(11) { animation-delay: -0.50s; height: 35%; }
-.spectrum span:nth-child(12) { animation-delay: -0.15s; height: 90%; }
-.spectrum span:nth-child(13) { animation-delay: -0.60s; height: 45%; }
-.spectrum span:nth-child(14) { animation-delay: -0.30s; height: 65%; }
-.spectrum span:nth-child(15) { animation-delay: -0.45s; height: 85%; }
-.spectrum span:nth-child(16) { animation-delay: -0.20s; height: 55%; }
-.spectrum span:nth-child(17) { animation-delay: -0.55s; height: 70%; }
-.spectrum span:nth-child(18) { animation-delay: -0.10s; height: 30%; }
-.spectrum span:nth-child(19) { animation-delay: -0.40s; height: 80%; }
-.spectrum span:nth-child(20) { animation-delay: -0.25s; height: 60%; }
-.spectrum span:nth-child(21) { animation-delay: -0.50s; height: 90%; }
-.spectrum span:nth-child(22) { animation-delay: -0.15s; height: 50%; }
-.spectrum span:nth-child(23) { animation-delay: -0.60s; height: 70%; }
-.spectrum span:nth-child(24) { animation-delay: -0.30s; height: 40%; }
-.spectrum span:nth-child(25) { animation-delay: -0.45s; height: 85%; }
-.spectrum span:nth-child(26) { animation-delay: -0.20s; height: 55%; }
-.spectrum span:nth-child(27) { animation-delay: -0.55s; height: 75%; }
-.spectrum span:nth-child(28) { animation-delay: -0.10s; height: 35%; }
-.spectrum span:nth-child(29) { animation-delay: -0.40s; height: 65%; }
-.spectrum span:nth-child(30) { animation-delay: -0.25s; height: 95%; }
-
-@keyframes sr-spectrum {
-    0%, 100% { transform: scaleY(0.4); }
-    50%      { transform: scaleY(1); }
-}
+/* (Legacy .spectrum + nth-child rules deleted — were capping the
+   row at max-width: 360px and forcing 3px-fixed bars. The
+   .now-playing-scoped rules below are the single source of truth.) */
 
 /* Transport — wraps progress + controls */
 .transport {
@@ -7147,7 +7080,8 @@ body.audio-spectrum-live .now-playing .spectrum span {
     height: 88%;
     background: linear-gradient(to top, var(--copper) 0%, var(--copper-hi) 70%, var(--ink) 100%);
     transform-origin: bottom center;
-    transform: rotate(-22deg);
+    /* Rest at full-left like a real VU meter at silence (-∞ dB) */
+    transform: rotate(-45deg);
     transition: transform 350ms var(--ease);
     box-shadow: 0 0 8px var(--copper-glow);
 }