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>

static/js/modes/meshtastic.js

@@ -266,8 +266,10 @@ const Meshtastic = (function() {
             }
         } catch (err) {
             console.error('Failed to start Meshtastic:', err);
+            reportActionableError('Start Meshtastic', err, {
+                onRetry: () => start()
+            });
             updateStatusIndicator('disconnected', 'Connection error');
-            showStatusMessage('Connection error: ' + err.message, 'error');
         }
     }
 
@@ -283,6 +285,7 @@ const Meshtastic = (function() {
             showNotification('Meshtastic', 'Disconnected');
         } catch (err) {
             console.error('Failed to stop Meshtastic:', err);
+            reportActionableError('Stop Meshtastic', err);
         }
     }
 
@@ -589,7 +592,9 @@ const Meshtastic = (function() {
             }
         } catch (err) {
             console.error('Failed to configure channel:', err);
-            showStatusMessage('Error configuring channel: ' + err.message, 'error');
+            reportActionableError('Configure Channel', err, {
+                onRetry: () => saveChannel()
+            });
         }
     }
 
@@ -1246,11 +1251,11 @@ const Meshtastic = (function() {
             }
         } catch (err) {
             console.error('Failed to send message:', err);
+            reportActionableError('Send Message', err, {
+                onRetry: () => sendMessage()
+            });
             optimisticMsg._failed = true;
             updatePendingMessage(optimisticMsg, true);
-            if (typeof showNotification === 'function') {
-                showNotification('Meshtastic', 'Send error: ' + err.message);
-            }
         } finally {
             if (sendBtn) {
                 sendBtn.disabled = false;
@@ -1382,6 +1387,9 @@ const Meshtastic = (function() {
             }
         } catch (err) {
             console.error('Traceroute error:', err);
+            reportActionableError('Send Traceroute', err, {
+                onRetry: () => sendTraceroute(destination)
+            });
             showTracerouteModal(destination, { error: err.message }, false);
         }
     }
@@ -1564,7 +1572,9 @@ const Meshtastic = (function() {
             }
         } catch (err) {
             console.error('Position request error:', err);
-            showStatusMessage('Error requesting position: ' + err.message, 'error');
+            reportActionableError('Request Position', err, {
+                onRetry: () => requestPosition(nodeId)
+            });
         }
     }
 
@@ -2085,7 +2095,9 @@ const Meshtastic = (function() {
             }
         } catch (err) {
             console.error('Range test error:', err);
-            showStatusMessage('Error starting range test: ' + err.message, 'error');
+            reportActionableError('Start Range Test', err, {
+                onRetry: () => startRangeTest()
+            });
         }
     }
 
@@ -2099,6 +2111,7 @@ const Meshtastic = (function() {
             showNotification('Meshtastic', 'Range test stopped');
         } catch (err) {
             console.error('Error stopping range test:', err);
+            reportActionableError('Stop Range Test', err);
         }
     }
 
@@ -2243,7 +2256,9 @@ const Meshtastic = (function() {
             }
         } catch (err) {
             console.error('S&F request error:', err);
-            showStatusMessage('Error: ' + err.message, 'error');
+            reportActionableError('Request Store & Forward History', err, {
+                onRetry: () => requestStoreForwardHistory()
+            });
         }
     }