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_history.html

@@ -10,7 +10,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     {% endif %}
     <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_history.css') }}">
@@ -608,7 +608,12 @@
             }
             const dayEndLocal = new Date(dayStartLocal.getTime() + (24 * 60 * 60 * 1000));
             const dayLabel = dayStartLocal.toLocaleDateString();
-            const confirmed = window.confirm(`Delete ADS-B history for ${dayLabel}? This cannot be undone.`);
+            const confirmed = await AppFeedback.confirmAction({
+                title: 'Delete Day History',
+                message: `Delete ADS-B history for ${dayLabel}? This cannot be undone.`,
+                confirmLabel: 'Delete',
+                confirmClass: 'btn-danger'
+            });
             if (!confirmed) {
                 return;
             }
@@ -623,7 +628,12 @@
         }
 
         async function clearAllHistory() {
-            const confirmed = window.confirm('Delete ALL ADS-B history records? This cannot be undone.');
+            const confirmed = await AppFeedback.confirmAction({
+                title: 'Delete All History',
+                message: 'Delete ALL ADS-B history records? This cannot be undone.',
+                confirmLabel: 'Delete All',
+                confirmClass: 'btn-danger'
+            });
             if (!confirmed) {
                 return;
             }