feat: UI/UX overhaul — CSS cleanup, accessibility, error handling, inline style extraction

Phase 0 — CSS-only fixes:
- Fix --font-mono to use real monospace stack (JetBrains Mono, Fira Code, etc.)
- Replace hardcoded hex colors with CSS variables across 16+ files
- Merge global-nav.css (507 lines) into layout.css, delete original
- Reduce !important in responsive.css from 71 to 8 via .app-shell specificity
- Standardize breakpoints to 480/768/1024/1280px

Phase 1 — Loading states & SSE connection feedback:
- Add centralized SSEManager (sse-manager.js) with exponential backoff
- Add SSE status indicator dot in nav bar
- Add withLoadingButton() + .btn-loading CSS spinner
- Add mode section crossfade transitions

Phase 2 — Accessibility:
- Add aria-labels to icon-only buttons across mode partials
- Add for/id associations to 42 form labels in 5 mode partials
- Add aria-live on toast stack, enableListKeyNav() utility

Phase 3 — Destructive action guards & list overflow:
- Add confirmAction() styled modal, replace all 25 native confirm() calls
- Add toast cap at 5 simultaneous toasts
- Add list overflow indicator CSS

Phase 4 — Inline style extraction:
- Refactor switchMode() in app.js and index.html to use classList.toggle()
- Add CSS toggle rules for all switchMode-controlled elements
- Remove inline style="display:none" from 7+ HTML elements
- Add utility classes (.hidden, .d-flex, .d-grid, etc.)

Phase 5 — Mobile UX polish:
- pre/code overflow handling already in place
- Touch target sizing via --touch-min variable

Phase 6 — Error handling consistency:
- Add reportActionableError() to user-facing catch blocks in 5 mode JS files
- 28 error toast additions alongside existing console.error calls

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

templates/adsb_dashboard.html

@@ -21,7 +21,7 @@
     <!-- Core CSS variables -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/core/variables.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/responsive.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/global-nav.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/core/layout.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/settings.css') }}?v={{ version }}&r=maptheme17">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/help-modal.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/adsb_dashboard.css') }}">
@@ -2162,7 +2162,7 @@ sudo make install</code>
                 if (remoteConfig === false) return;
                 // Check for agent SDR conflicts
                 if (useAgent && typeof checkAgentModeConflict === 'function') {
-                    if (!checkAgentModeConflict('adsb')) {
+                    if (!await checkAgentModeConflict('adsb')) {
                         return;  // User cancelled or conflict not resolved
                     }
                 }
@@ -3661,11 +3661,12 @@ sudo make install</code>
 
             // Check if ADS-B tracking is using this device
             if (isTracking && adsbActiveDevice !== null && device === adsbActiveDevice) {
-                const useAnyway = confirm(
-                    `Warning: ADS-B tracking is using SDR ${adsbActiveDevice}.\n\n` +
-                    'Using the same device for airband will stop ADS-B tracking.\n\n' +
-                    'Select a different SDR device for airband listening, or click OK to stop tracking and listen.'
-                );
+                const useAnyway = await AppFeedback.confirmAction({
+                    title: 'SDR Device Conflict',
+                    message: `ADS-B tracking is using SDR ${adsbActiveDevice}. Using the same device for airband will stop ADS-B tracking. Select a different SDR device for airband listening, or continue to stop tracking and listen.`,
+                    confirmLabel: 'Continue',
+                    confirmClass: 'btn-danger'
+                });
                 if (!useAnyway) {
                     return;
                 }
@@ -3900,7 +3901,7 @@ sudo make install</code>
             }
         }
 
-        function startAcars() {
+        async function startAcars() {
             const acarsSelect = document.getElementById('acarsDeviceSelect');
             const compositeVal = acarsSelect.value || 'rtlsdr:0';
             const [sdr_type, deviceIdx] = compositeVal.includes(':') ? compositeVal.split(':') : ['rtlsdr', compositeVal];
@@ -3913,12 +3914,12 @@ sudo make install</code>
 
             // Warn if using same device as ADS-B (only for local mode)
             if (!isAgentMode && isTracking && adsbActiveDevice !== null && device === String(adsbActiveDevice)) {
-                const useAnyway = confirm(
-                    `Warning: ADS-B tracking is using SDR device ${adsbActiveDevice}.\n\n` +
-                    'ACARS uses VHF frequencies (129-131 MHz) while ADS-B uses 1090 MHz.\n' +
-                    'You need TWO separate SDR devices to receive both simultaneously.\n\n' +
-                    'Click OK to start ACARS on device ' + device + ' anyway.'
-                );
+                const useAnyway = await AppFeedback.confirmAction({
+                    title: 'SDR Device Conflict',
+                    message: `ADS-B tracking is using SDR device ${adsbActiveDevice}. ACARS uses VHF frequencies (129-131 MHz) while ADS-B uses 1090 MHz. You need TWO separate SDR devices to receive both simultaneously. Continue to start ACARS on device ${device} anyway.`,
+                    confirmLabel: 'Continue',
+                    confirmClass: 'btn-danger'
+                });
                 if (!useAnyway) return;
             }
 
@@ -4348,7 +4349,7 @@ sudo make install</code>
             }
         }
 
-        function startVdl2() {
+        async function startVdl2() {
             const vdl2Select = document.getElementById('vdl2DeviceSelect');
             const compositeVal = vdl2Select.value || 'rtlsdr:0';
             const [sdr_type, deviceIdx] = compositeVal.includes(':') ? compositeVal.split(':') : ['rtlsdr', compositeVal];
@@ -4361,12 +4362,12 @@ sudo make install</code>
 
             // Warn if using same device as ADS-B (only for local mode)
             if (!isAgentMode && isTracking && adsbActiveDevice !== null && device === String(adsbActiveDevice)) {
-                const useAnyway = confirm(
-                    `Warning: ADS-B tracking is using SDR device ${adsbActiveDevice}.\n\n` +
-                    'VDL2 uses VHF frequencies (~137 MHz) while ADS-B uses 1090 MHz.\n' +
-                    'You need TWO separate SDR devices to receive both simultaneously.\n\n' +
-                    'Click OK to start VDL2 on device ' + device + ' anyway.'
-                );
+                const useAnyway = await AppFeedback.confirmAction({
+                    title: 'SDR Device Conflict',
+                    message: `ADS-B tracking is using SDR device ${adsbActiveDevice}. VDL2 uses VHF frequencies (~137 MHz) while ADS-B uses 1090 MHz. You need TWO separate SDR devices to receive both simultaneously. Continue to start VDL2 on device ${device} anyway.`,
+                    confirmLabel: 'Continue',
+                    confirmClass: 'btn-danger'
+                });
                 if (!useAnyway) return;
             }