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/css/core/variables.css

@@ -31,8 +31,10 @@
     --accent-cyan-dim: rgba(74, 163, 255, 0.16);
     --accent-cyan-hover: #6bb3ff;
     --accent-green: #38c180;
+    --accent-green-hover: #16a34a;
     --accent-green-dim: rgba(56, 193, 128, 0.18);
     --accent-red: #e25d5d;
+    --accent-red-hover: #dc2626;
     --accent-red-dim: rgba(226, 93, 93, 0.16);
     --accent-orange: #d6a85e;
     --accent-orange-dim: rgba(214, 168, 94, 0.16);
@@ -96,7 +98,7 @@
        TYPOGRAPHY
        ============================================ */
     --font-sans: 'Roboto Condensed', 'Arial Narrow', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    --font-mono: 'Roboto Condensed', 'Arial Narrow', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', Consolas, monospace;
 
     /* Font sizes */
     --text-xs: 10px;
@@ -189,8 +191,10 @@
     --accent-cyan-dim: rgba(31, 95, 168, 0.12);
     --accent-cyan-hover: #2c73bf;
     --accent-green: #1f8a57;
+    --accent-green-hover: #167a4a;
     --accent-green-dim: rgba(31, 138, 87, 0.12);
     --accent-red: #c74444;
+    --accent-red-hover: #b33a3a;
     --accent-red-dim: rgba(199, 68, 68, 0.12);
     --accent-orange: #b5863a;
     --accent-orange-dim: rgba(181, 134, 58, 0.12);