feat: add font size and zoom settings

- Add font_size config field (10-24px, default 14px)
- Add keyboard shortcuts: Ctrl++/- to adjust, Ctrl+0 to reset
- Add font size slider in Settings > Appearance
- Apply font size to Terminal and InputBar via CSS variable
- Persist font size preference between sessions

Closes #19

src/lib/components/ConfigSidebar.svelte

@@ -1,5 +1,13 @@
 <script lang="ts">
-  import { configStore, type HikariConfig, type Theme } from "$lib/stores/config";
+  import {
+    configStore,
+    type HikariConfig,
+    type Theme,
+    applyFontSize,
+    MIN_FONT_SIZE,
+    MAX_FONT_SIZE,
+    DEFAULT_FONT_SIZE,
+  } from "$lib/stores/config";
   import { claudeStore } from "$lib/stores/claude";
   import { getCurrentWindow } from "@tauri-apps/api/window";
 
@@ -17,6 +25,7 @@
     always_on_top: false,
     update_checks_enabled: true,
     character_panel_width: null,
+    font_size: 14,
   });
 
   let isOpen = $state(false);
@@ -388,23 +397,61 @@
       <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
         Appearance
       </h3>
-      <div class="flex gap-2">
-        <button
-          onclick={() => handleThemeChange("dark")}
-          class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'dark'
-            ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
-            : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
-        >
-          Dark
-        </button>
-        <button
-          onclick={() => handleThemeChange("light")}
-          class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'light'
-            ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
-            : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
-        >
-          Light
-        </button>
+
+      <!-- Theme Selection -->
+      <div class="mb-4">
+        <label class="block text-sm text-[var(--text-secondary)] mb-2">Theme</label>
+        <div class="flex gap-2">
+          <button
+            onclick={() => handleThemeChange("dark")}
+            class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'dark'
+              ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
+              : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
+          >
+            Dark
+          </button>
+          <button
+            onclick={() => handleThemeChange("light")}
+            class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'light'
+              ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
+              : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
+          >
+            Light
+          </button>
+        </div>
+      </div>
+
+      <!-- Font Size -->
+      <div class="mb-4">
+        <label for="font-size" class="block text-sm text-[var(--text-secondary)] mb-2">
+          Terminal Font Size
+        </label>
+        <div class="flex items-center gap-3">
+          <input
+            id="font-size"
+            type="range"
+            bind:value={config.font_size}
+            oninput={() => applyFontSize(config.font_size)}
+            min={MIN_FONT_SIZE}
+            max={MAX_FONT_SIZE}
+            step="1"
+            class="flex-1 h-2 bg-[var(--bg-primary)] rounded-lg appearance-none cursor-pointer"
+          />
+          <span class="text-sm text-gray-300 w-12 text-right">{config.font_size}px</span>
+          <button
+            onclick={() => {
+              config.font_size = DEFAULT_FONT_SIZE;
+              applyFontSize(DEFAULT_FONT_SIZE);
+            }}
+            class="px-2 py-1 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:border-[var(--accent-primary)] text-[var(--text-secondary)] transition-colors"
+            title="Reset to default (14px)"
+          >
+            Reset
+          </button>
+        </div>
+        <p class="text-xs text-[var(--text-tertiary)] mt-1">
+          Use Ctrl++ / Ctrl+- to quickly adjust, Ctrl+0 to reset
+        </p>
       </div>
     </section>
 

src/lib/components/InputBar.svelte

@@ -375,7 +375,7 @@ User: ${formattedMessage}`;
           : "Connect to Claude first..."}
         disabled={isSubmitting}
         rows={1}
-        style="height: {textareaHeight}px"
+        style="height: {textareaHeight}px; font-size: var(--terminal-font-size, 14px);"
         class="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-color)]
              rounded-lg text-[var(--text-primary)] placeholder-gray-500 resize-none
              focus:outline-none focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]

src/lib/components/StatusBar.svelte

@@ -48,6 +48,7 @@
     always_on_top: false,
     update_checks_enabled: true,
     character_panel_width: null,
+    font_size: 14,
   });
 
   onMount(async () => {

src/lib/components/Terminal.svelte

@@ -143,7 +143,8 @@
   <div
     bind:this={terminalElement}
     onscroll={handleScroll}
-    class="terminal-content h-[calc(100%-76px)] overflow-y-auto p-4 font-mono text-sm"
+    class="terminal-content h-[calc(100%-76px)] overflow-y-auto p-4 font-mono"
+    style="font-size: var(--terminal-font-size, 14px);"
   >
     {#if lines.length === 0}
       <div class="terminal-waiting italic">