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/partials/modes/pager.html

@@ -3,7 +3,7 @@
     <div class="section">
         <h3>Frequency</h3>
         <div class="form-group">
-            <label>Frequency (MHz)</label>
+            <label for="frequency">Frequency (MHz)</label>
             <input type="text" id="frequency" value="153.350" placeholder="e.g., 153.350">
         </div>
         <div class="preset-buttons" id="presetButtons">
@@ -31,15 +31,15 @@
     <div class="section">
         <h3>Settings</h3>
         <div class="form-group">
-            <label>Gain (dB, 0 = auto)</label>
+            <label for="gain">Gain (dB, 0 = auto)</label>
             <input type="text" id="gain" value="0" placeholder="0-49 or 0 for auto">
         </div>
         <div class="form-group">
-            <label>Squelch Level</label>
+            <label for="squelch">Squelch Level</label>
             <input type="text" id="squelch" value="0" placeholder="0 = off">
         </div>
         <div class="form-group">
-            <label>PPM Correction</label>
+            <label for="ppm">PPM Correction</label>
             <input type="text" id="ppm" value="0" placeholder="Frequency correction">
         </div>
     </div>
@@ -53,7 +53,7 @@
             </label>
         </div>
         <div class="form-group">
-            <label>Log file path</label>
+            <label for="logFilePath">Log file path</label>
             <input type="text" id="logFilePath" value="pager_messages.log" placeholder="pager_messages.log">
         </div>
     </div>
@@ -67,7 +67,7 @@
             </label>
         </div>
         <div class="form-group">
-            <label>Hide messages containing (comma-separated)</label>
+            <label for="filterKeywords">Hide messages containing (comma-separated)</label>
             <input type="text" id="filterKeywords" placeholder="e.g. test, spam, alert" oninput="savePagerFilters()">
         </div>
         <div class="info-text" style="font-size: 10px; color: #666; margin-top: 5px;">