Fix GUI polish issues across auth modal, theme, and 404

- Add missing modal CSS (.modal-overlay/.modal-dialog/.modal-header):
  the "Connect to Microsoft" auth modal was rendering unstyled inline
  at the bottom of the page. Now a centered dialog with backdrop.
- Surface OAuth connect errors in the modal instead of silently
  reopening it with no explanation.
- MainLayout: implement IDisposable so event handlers are actually
  unsubscribed (Dispose existed but was never invoked).
- Wire up the Settings theme selector (was a dead control): drop the
  unsupported Dark option, call sptb.setTheme on save and on load,
  resolve System via prefers-color-scheme.
- Add branded 404 page via UseStatusCodePagesWithReExecute + Routes
  <NotFound> (blank white page before).
- Add .progress-fill.indeterminate animation and .progress-panel.
- Home: replace inline JS hover handlers with a .feature-card CSS class.
- Define missing --surface-2 variable referenced by MainLayout.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

wwwroot/app.css

@@ -15,6 +15,7 @@
     --warn: #797673;
     --text: #323130;
     --text-muted: #605e5c;
+    --surface-2: #2d2d4e;
     --font: 'Segoe UI', system-ui, sans-serif;
 }
 
@@ -160,3 +161,44 @@ body {
 /* ── No-profile state ── */
 .no-profile { text-align: center; padding: 60px 20px; color: var(--text-muted); }
 .no-profile h2 { color: var(--text); }
+
+/* ── Modal ── */
+.modal-overlay {
+    position: fixed; inset: 0; z-index: 1000;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(0, 0, 0, .45);
+    padding: 20px;
+    animation: modal-fade .15s ease-out;
+}
+.modal-dialog {
+    background: var(--card-bg); border-radius: 8px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
+    width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
+    padding: 24px;
+    animation: modal-rise .15s ease-out;
+}
+.modal-header { margin-bottom: 16px; }
+.modal-header h3 { margin: 0 0 6px 0; font-size: 18px; font-weight: 600; color: var(--text); }
+.modal-header .text-muted { margin: 0; line-height: 1.4; }
+.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
+@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes modal-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+
+/* ── Progress panel ── */
+.progress-panel { margin: 8px 0; }
+.progress-fill.indeterminate {
+    width: 40%;
+    background: var(--accent);
+    animation: indeterminate 1.1s ease-in-out infinite;
+}
+@keyframes indeterminate {
+    0%   { margin-left: -40%; }
+    100% { margin-left: 100%; }
+}
+
+/* ── Feature cards (Home) ── */
+.feature-card { cursor: pointer; transition: box-shadow .15s, transform .15s; }
+.feature-card:hover { box-shadow: 0 2px 8px rgba(0, 120, 212, .2); transform: translateY(-1px); }
+
+/* ── Theme (light-only palette; System resolves via JS) ── */
+[data-theme="light"] { color-scheme: light; }

wwwroot/js/app.js

@@ -8,7 +8,12 @@ window.sptb = {
         document.body.removeChild(link);
     },
     setTheme: function(theme) {
-        document.documentElement.setAttribute('data-theme', theme);
+        var t = (theme || 'System').toLowerCase();
+        if (t === 'system') {
+            t = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+                ? 'dark' : 'light';
+        }
+        document.documentElement.setAttribute('data-theme', t);
     },
     scrollToBottom: function(el) {
         if (el) el.scrollTop = el.scrollHeight;