Add debug logging to file and fix blank startup screen

- Added write_log Tauri command that writes to frontend.log in app data dir
- App.svelte now logs each startup step (Tauri import, sidecar check, launch)
- Startup overlays use inline styles as fallback so they're visible even if
  CSS variables fail to load
- Debug status shown on the checking/connecting screens
- Rust side logs startup info to app.log (resource dir, data dir)

Log files location: %APPDATA%/net.anhonesthost.local-transcription/ (Windows)
or ~/Library/Application Support/net.anhonesthost.local-transcription/ (macOS)

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

src/App.svelte

@@ -13,6 +13,7 @@
 
   let showSettings = $state(false);
   let sidecarState = $state<SidecarState>("checking");
+  let debugLog = $state("");
 
   let obsDisplayUrl = $derived(backendStore.obsUrl);
   let syncDisplayUrl = $derived(backendStore.syncUrl);
@@ -27,13 +28,25 @@
     showSettings = false;
   }
 
+  let tauriInvoke: ((cmd: string, args?: Record<string, unknown>) => Promise<unknown>) | null = null;
+
+  function log(msg: string) {
+    console.log(`[App] ${msg}`);
+    debugLog = msg;
+    // Also write to file via Tauri if available
+    tauriInvoke?.("write_log", { message: msg });
+  }
+
   async function checkAndLaunchSidecar() {
     try {
+      log("Importing Tauri API...");
       const { invoke } = await import("@tauri-apps/api/core");
+      tauriInvoke = invoke;
 
-      // Check if sidecar is installed
+      log("Checking if sidecar is installed...");
       sidecarState = "checking";
       const installed = await invoke<boolean>("check_sidecar");
+      log(`Sidecar installed: ${installed}`);
 
       if (!installed) {
         sidecarState = "needs_setup";
@@ -41,9 +54,10 @@
       }
 
       await launchSidecar();
-    } catch {
+    } catch (err) {
       // Not running in Tauri (browser dev mode) - skip sidecar check
       // and connect directly to localhost:8081
+      log(`Tauri not available (${err}), using dev mode`);
       sidecarState = "starting";
       backendStore.setPort(8081);
       backendStore.connect();
@@ -55,15 +69,19 @@
     try {
       const { invoke } = await import("@tauri-apps/api/core");
 
+      log("Starting sidecar...");
       sidecarState = "starting";
       await invoke("start_sidecar");
 
+      log("Getting sidecar port...");
       const port = await invoke<number>("get_sidecar_port");
+      log(`Sidecar ready on port ${port}`);
       backendStore.setPort(port);
       backendStore.connect();
       configStore.loadConfig();
-    } catch {
+    } catch (err) {
       // If sidecar launch fails, still try connecting to default port
+      log(`Sidecar launch failed: ${err}, trying default port`);
       sidecarState = "starting";
       backendStore.connect();
       configStore.loadConfig();
@@ -84,13 +102,16 @@
 </script>
 
 {#if sidecarState === "checking"}
-  <div class="connecting-overlay">
-    <div class="connecting-content">
+  <div class="connecting-overlay" style="background:#1e1e1e;color:#e0e0e0;display:flex;align-items:center;justify-content:center;height:100%;width:100%;">
+    <div class="connecting-content" style="text-align:center;">
       <div class="connecting-icon">
         <div class="spinner"></div>
       </div>
-      <h2>Local Transcription</h2>
-      <p>Checking setup...</p>
+      <h2 style="font-size:20px;margin:16px 0 8px;">Local Transcription</h2>
+      <p style="color:#a0a0a0;font-size:14px;">Checking setup...</p>
+      {#if debugLog}
+        <p style="color:#707070;font-size:11px;margin-top:12px;">{debugLog}</p>
+      {/if}
     </div>
   </div>
 
@@ -98,8 +119,8 @@
   <SidecarSetup onComplete={onSidecarReady} />
 
 {:else if !isConnected}
-  <div class="connecting-overlay">
-    <div class="connecting-content">
+  <div class="connecting-overlay" style="background:#1e1e1e;color:#e0e0e0;display:flex;align-items:center;justify-content:center;height:100%;width:100%;">
+    <div class="connecting-content" style="text-align:center;">
       <div class="connecting-icon">
         {#if connectionState === "error"}
           <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2">
@@ -111,13 +132,16 @@
           <div class="spinner"></div>
         {/if}
       </div>
-      <h2>Local Transcription</h2>
+      <h2 style="font-size:20px;margin:16px 0 8px;">Local Transcription</h2>
       {#if connectionState === "error"}
-        <p>Cannot connect to backend</p>
+        <p style="color:#a0a0a0;">Cannot connect to backend</p>
         <p class="hint">Make sure the Python backend is running:<br>
           <code>uv run python -m backend.main_headless</code></p>
       {:else}
-        <p>Connecting to backend...</p>
+        <p style="color:#a0a0a0;">Connecting to backend...</p>
+      {/if}
+      {#if debugLog}
+        <p style="color:#707070;font-size:11px;margin-top:12px;">{debugLog}</p>
       {/if}
     </div>
   </div>