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>

Components/Shared/SessionCredentialsModal.razor

@@ -7,10 +7,10 @@
 
 @if (_visible)
 {
-    <div class="modal-overlay">
+    <div class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="connect-modal-title">
         <div class="modal-dialog">
             <div class="modal-header">
-                <h3>Connect to Microsoft</h3>
+                <h3 id="connect-modal-title">Connect to Microsoft</h3>
                 <p class="text-muted">
                     Authenticate to access <strong>@Session.CurrentProfile?.Name</strong>.
                     Your session token is stored in your browser only — never saved to disk.
@@ -22,14 +22,14 @@
                 <div class="alert alert-error">@_error</div>
             }
 
-            <div class="flex-row mt-8">
+            <div class="modal-footer">
+                <button class="btn btn-secondary" @onclick="Cancel" disabled="@_connecting">Cancel</button>
                 <button class="btn btn-primary" @onclick="ConnectAsync" disabled="@_connecting">
                     @(_connecting ? "Redirecting…" : "Connect via Microsoft")
                 </button>
-                <button class="btn btn-secondary" @onclick="Cancel" disabled="@_connecting">Cancel</button>
             </div>
 
-            <p class="text-muted" style="font-size:11px;margin-top:8px">
+            <p class="text-muted" style="font-size:11px;margin-top:8px;text-align:right">
                 You will be redirected to Microsoft login. MFA is supported.
             </p>
         </div>
@@ -43,9 +43,9 @@
     private bool   _connecting;
     private string _error = string.Empty;
 
-    public async Task ShowAsync()
+    public async Task ShowAsync(string? error = null)
     {
-        _error      = string.Empty;
+        _error      = error ?? string.Empty;
         _connecting = false;
         _visible    = true;
         await InvokeAsync(StateHasChanged);