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/nav.html

@@ -159,14 +159,15 @@
 
     {# Dynamic dashboard button (shown when in satellite mode) #}
     <div class="mode-nav-actions">
-        <a href="/satellite/dashboard" target="_blank" class="nav-action-btn" id="satelliteDashboardBtn" style="display: none;">
+        <a href="/satellite/dashboard" target="_blank" class="nav-action-btn" id="satelliteDashboardBtn">
             <span class="nav-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></span>
             <span class="nav-label">Full Dashboard</span>
         </a>
     </div>
 
-    {# Nav Utilities (clock, theme, tools) #}
+    {# Nav Utilities (clock, SSE status, theme, tools) #}
     <div class="nav-utilities">
+        <span class="status-dot inactive" id="sseStatusDot" data-tooltip="No active streams" aria-label="Stream connection status"></span>
         <div class="nav-clock">
             <span class="utc-label">UTC</span>
             <span class="utc-time" id="headerUtcTime">--:--:--</span>
@@ -426,9 +427,15 @@
     // showHelp is defined by the help-modal.html partial
 
     if (typeof logout === 'undefined') {
-        window.logout = function(e) {
+        window.logout = async function(e) {
             if (e) e.preventDefault();
-            if (confirm('Are you sure you want to logout?')) {
+            const confirmed = await AppFeedback.confirmAction({
+                title: 'Logout',
+                message: 'Are you sure you want to logout?',
+                confirmLabel: 'Logout',
+                confirmClass: 'btn-danger'
+            });
+            if (confirmed) {
                 window.location.href = '/logout';
             }
         };