ui(player): square vinyl stage, brighter tonearm, tilted sleeve

- Restore 1:1 aspect-ratio on .vinyl-stage; the previous 1:0.85
  override created an inconsistent crop on resize. Replace the
  tonearm sibling's aspect-ratio with explicit height:36% so its
  vertical span tracks the stage instead of its own width.
- Brighten the tonearm SVG: lighter pivot/arm gradient stops,
  thicker stroke widths, stronger cartridge highlight.
- Add a subtle -2deg tilt to the sleeve so it reads as physically
  resting on the disc rather than rectilinearly composed.

media_server/static/css/styles.css

@@ -4416,15 +4416,9 @@ header .brand-sub {
 }
 
 /* ─── Vinyl stage ──────────────────────────────────────────── */
-/* Aspect-ratio is intentionally wider than tall: the sleeve+disc
-   composition only fills the top ~82% of a square; a strict 1:1 stage
-   left an ~18% empty band below the disc and forced the grid row
-   taller than the masthead column, painting a large dead gap at the
-   bottom of the page. 1:0.85 trims that band while keeping the disc
-   (bottom anchor at top:19.4% + 63% = 82.4% of height) safely inside. */
 .album-art-container.vinyl-stage {
     position: relative;
-    aspect-ratio: 1 / 0.85;
+    aspect-ratio: 1;
     width: 100%;
     max-width: none;
     padding: 0;
@@ -4561,7 +4555,7 @@ header .brand-sub {
     top: 26%;
     right: -6%;
     width: 36%;
-    aspect-ratio: 1;
+    height: 36%;
     pointer-events: none;
     transform-origin: 88% 12%;
     transform: rotate(-22deg);
@@ -4667,6 +4661,12 @@ body.visualizer-active .vinyl-stage .spectrogram-canvas {
         -2px 8px 24px rgba(0, 0, 0, 0.5),
         -4px 18px 44px rgba(0, 0, 0, 0.35);
     overflow: hidden;
+    /* Subtle counterclockwise tilt — sleeve rests on the disc as if
+       casually placed, breaking up the otherwise rigid rectilinear
+       grid. The shadow above carries the same diagonal so the lean
+       reads as physical rather than transformed. */
+    transform: rotate(-2deg);
+    transform-origin: 50% 60%;
 }
 :root[data-theme="light"] .vinyl-stage .sleeve {
     background: transparent;
@@ -7950,10 +7950,16 @@ select option {
     display: inline-flex;
     align-items: center;
     gap: 10px;
-    /* Allow text to wrap so we don't ellipsis-truncate the model name */
+    min-width: 0;
+}
+/* Truncate the monitor name itself, not its sibling badge — putting
+   overflow:hidden on the parent flex container clipped the favourite
+   star whenever the model name was long enough to ellipsis. */
+.display-container .display-monitor-name-text {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    min-width: 0;
 }
 .display-container .display-monitor-details {
     font-family: var(--mono);
@@ -7973,6 +7979,7 @@ select option {
     margin: 0;
     line-height: 0;
     vertical-align: middle;
+    flex-shrink: 0;
     filter: drop-shadow(0 0 4px var(--copper-glow));
 }
 .display-container .display-primary-badge svg {