Style audio device select, hide mini player volume on tablet

- Native select with explicit font stack and focus glow
- Hide mini player volume section below 900px

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

media_server/static/css/styles.css

@@ -1151,13 +1151,22 @@ button:disabled {
 }
 
 .audio-device-selector select {
-    padding: 0.5rem 0.625rem;
+    width: 100%;
-    border-radius: 8px;
+    padding: 10px;
     border: 1px solid var(--border);
+    border-radius: 4px;
     background: var(--bg-tertiary);
     color: var(--text-primary);
-    font-size: 0.875rem;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    font-size: 1rem;
     cursor: pointer;
+    transition: border-color 0.25s ease, box-shadow 0.25s ease;
+}
+
+.audio-device-selector select:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15);
 }
 
 .audio-device-status {
@@ -3025,6 +3034,10 @@ footer .separator {
 
 /* Tablet breakpoint */
 @media (min-width: 601px) and (max-width: 900px) {
+    .mini-volume-container {
+        display: none;
+    }
+
     .browser-list-bitrate {
         display: none;
     }

media_server/static/js/app.js

@@ -477,7 +477,6 @@
             try {
                 const token = localStorage.getItem('media_server_token');
 
-                // Fetch devices and current status in parallel
                 const [devicesResp, statusResp] = await Promise.all([
                     fetch('/api/media/visualizer/devices', {
                         headers: { 'Authorization': `Bearer ${token}` }
@@ -497,7 +496,6 @@
                     return;
                 }
 
-                // Show section
                 section.style.display = '';
 
                 // Populate dropdown (keep auto-detect as first option)
@@ -519,10 +517,8 @@
                     }
                 }
 
-                // Update status indicator
                 updateAudioDeviceStatus(status);
             } catch (e) {
-                // Silently hide if unavailable
                 section.style.display = 'none';
             }
         }
@@ -562,7 +558,6 @@
                 if (resp.ok) {
                     const result = await resp.json();
                     updateAudioDeviceStatus(result);
-                    // Re-check visualizer availability since device changed
                     await checkVisualizerAvailability();
                     if (visualizerEnabled) applyVisualizerMode();
                     showToast(t('settings.audio.device_changed'), 'success');