Phase 8: Polish & UX — dark mode, toasts, keyboard shortcuts, responsive, accessibility

- Add dark mode with theme toggle, localStorage/cookie persistence, anti-FOUC script
- Add toast notification system with auto-dismiss and color-coded types
- Add api() fetch wrapper with auto JSON, X-Socket-ID, and error toasts
- Add keyboard shortcuts (/ search, b boards, ? help, n new card, Esc close)
- Add error page with status code and navigation
- Add focus trap utility and apply to CardModal with full ARIA dialog support
- Add hamburger menu for mobile, responsive columns, fullscreen card modal on mobile
- Add aria-labels to icon-only buttons and DnD live region
- Migrate all ~30 fetch calls to api() wrapper with success toasts
- Add dark: Tailwind variants to all 20+ pages and components

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/lib/components/Toast.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { getToasts, removeToast, type ToastType } from '$lib/stores/toasts.js';
+
+	const toasts = $derived(getToasts());
+
+	function typeClasses(type: ToastType): string {
+		switch (type) {
+			case 'success':
+				return 'bg-green-600 text-white';
+			case 'error':
+				return 'bg-red-600 text-white';
+			case 'warning':
+				return 'bg-yellow-500 text-white';
+			case 'info':
+				return 'bg-blue-600 text-white';
+		}
+	}
+
+	function typeIcon(type: ToastType): string {
+		switch (type) {
+			case 'success':
+				return 'M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z';
+			case 'error':
+				return 'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z';
+			case 'warning':
+				return 'M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z';
+			case 'info':
+				return 'M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z';
+		}
+	}
+</script>
+
+<div class="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none">
+	{#each toasts as t (t.id)}
+		<div
+			class="pointer-events-auto flex items-center gap-2 rounded-lg px-4 py-3 shadow-lg text-sm font-medium min-w-[280px] max-w-sm {typeClasses(t.type)}"
+			transition:fly={{ x: 100, duration: 300 }}
+		>
+			<svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
+				<path fill-rule="evenodd" d={typeIcon(t.type)} clip-rule="evenodd" />
+			</svg>
+			<span class="flex-1">{t.message}</span>
+			<button
+				onclick={() => removeToast(t.id)}
+				class="flex-shrink-0 opacity-70 hover:opacity-100 transition"
+				aria-label="Dismiss"
+			>
+				<svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+					<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+				</svg>
+			</button>
+		</div>
+	{/each}
+</div>