Update media-server: Vinyl record mode and accent color picker

- Vinyl mode: album art as center label with grooves, spindle hole, vignette
- Smooth transition between normal and vinyl modes
- Accent color picker with 9 preset colors in header
- Fix progress bar hover layout shift (use scaleY instead of height)
- Fix glow position jump when toggling vinyl mode

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

media_server/static/js/app.js

@@ -156,6 +156,62 @@
             setTheme(newTheme);
         }
 
+        // Accent color management
+        const accentPresets = [
+            { name: 'Green', color: '#1db954', hover: '#1ed760' },
+            { name: 'Blue', color: '#3b82f6', hover: '#60a5fa' },
+            { name: 'Purple', color: '#8b5cf6', hover: '#a78bfa' },
+            { name: 'Pink', color: '#ec4899', hover: '#f472b6' },
+            { name: 'Orange', color: '#f97316', hover: '#fb923c' },
+            { name: 'Red', color: '#ef4444', hover: '#f87171' },
+            { name: 'Teal', color: '#14b8a6', hover: '#2dd4bf' },
+            { name: 'Cyan', color: '#06b6d4', hover: '#22d3ee' },
+            { name: 'Yellow', color: '#eab308', hover: '#facc15' },
+        ];
+
+        function initAccentColor() {
+            const saved = localStorage.getItem('accentColor');
+            if (saved) {
+                const preset = accentPresets.find(p => p.color === saved);
+                if (preset) applyAccentColor(preset.color, preset.hover);
+            }
+            renderAccentSwatches();
+        }
+
+        function applyAccentColor(color, hover) {
+            document.documentElement.style.setProperty('--accent', color);
+            document.documentElement.style.setProperty('--accent-hover', hover);
+            localStorage.setItem('accentColor', color);
+        }
+
+        function renderAccentSwatches() {
+            const dropdown = document.getElementById('accentDropdown');
+            if (!dropdown) return;
+            const current = localStorage.getItem('accentColor') || '#1db954';
+            dropdown.innerHTML = accentPresets.map(p =>
+                `<div class="accent-swatch ${p.color === current ? 'active' : ''}"
+                      style="background: ${p.color}"
+                      onclick="selectAccentColor('${p.color}', '${p.hover}')"
+                      title="${p.name}"></div>`
+            ).join('');
+        }
+
+        function selectAccentColor(color, hover) {
+            applyAccentColor(color, hover);
+            renderAccentSwatches();
+            document.getElementById('accentDropdown').classList.remove('open');
+        }
+
+        function toggleAccentPicker() {
+            document.getElementById('accentDropdown').classList.toggle('open');
+        }
+
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.accent-picker')) {
+                document.getElementById('accentDropdown')?.classList.remove('open');
+            }
+        });
+
         // Vinyl mode
         let vinylMode = localStorage.getItem('vinylMode') === 'true';
         let currentPlayState = 'idle';
@@ -380,8 +436,9 @@
             // Cache DOM references
             cacheDom();
 
-            // Initialize theme
+            // Initialize theme and accent color
             initTheme();
+            initAccentColor();
 
             // Initialize vinyl mode
             applyVinylMode();