feat: dashboard UI/UX overhaul from full review

Shared foundation:
- New Modal component on native <dialog>.showModal() (focus trap, inert
  background, Escape, focus restore, scroll lock); all eight dialogs and
  both globalThis.confirm calls migrated to it
- Design tokens for success/warning/danger surfaces; pill danger variant;
  .sr-only utility; toast layering above dialog backdrops; not-allowed
  cursor for validity-disabled buttons

Conversations/attention: auto-scroll with jump-to-latest, per-conversation
draft persistence, suggestion undo, 30s auto-refresh with refresh controls,
unread emphasis and counts, blur-consistent share dialog, empty-accounts
guidance, collapsed user lookup, relative timestamps, danger pills for
critical items

Media/library/outreach: click-blurred-to-reveal, lightbox with arrow
navigation and captions, dirty-form preservation across refetches, upload
validation with thumbnail preview, save feedback, result counts with
load-more and clear-filters, ticking countdowns from a single clock

Overview/performance/operations/settings: mutation errors inside the
confirm dialog, live sending-window countdown, offline-aware loading
states, per-panel loading/error with retry, 7/30/90-day range toggle,
console scroll yielding with shown/retained counts, risky-save matching
by subreddit name instead of index, useBlocker unsaved-changes guard,
single-pass validation with focus-to-first-error, access panel JSON
validation and input reset

Tests: 806 -> 844 passing; both typechecks clean.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

apps/dashboard/src/features/settings/settings.css

@@ -28,13 +28,14 @@
 .settings-save-bar { position: sticky; bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; margin-top: 1rem; background: rgba(23, 35, 30, .97); border: 1px solid var(--border); border-radius: .8rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3); }
 .settings-save-bar > div:first-child { display: grid; gap: .15rem; color: var(--muted); }
 .save-success { color: var(--accent); }
+.save-warning { color: var(--warning); }
 .risk-list { display: grid; gap: .5rem; padding-left: 1.2rem; color: var(--warning); }
 .access-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
 .access-actions a { display: inline-flex; align-items: center; text-decoration: none; }
 .settings-notice { padding: .75rem; border-radius: .65rem; }
-.settings-notice.success { color: #aaf0c4; background: #163a26; }
-.settings-notice.warning { color: #ffe1a0; background: #42351b; }
-.settings-notice.error { color: #ffd1ce; background: #461b18; }
+.settings-notice.success { color: var(--success-text); background: var(--success-bg); }
+.settings-notice.warning { color: var(--warning-text); background: var(--warning-bg); }
+.settings-notice.error { color: var(--danger-text); background: var(--danger-bg); }
 
 @media (min-width: 42rem) {
   .settings-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -53,7 +54,7 @@
 
 .reddit-account-row {
   align-items: center;
-  border: 1px solid var(--border-color, #d9d9d9);
+  border: 1px solid var(--border);
   border-radius: .75rem;
   display: flex;
   gap: 1rem;
@@ -62,7 +63,7 @@
 }
 
 .reddit-account-row.is-active {
-  border-color: var(--accent, #ff6534);
+  border-color: var(--accent);
 }
 
 .reddit-account-row > div {