feat(mvp): phase 7 - UI polish & ambient backgrounds

Add layout system (sidebar, header, main layout), dark/light/system theme
with HSL customization, 3 ambient backgrounds (mesh gradient, particle field,
aurora), Cmd/Ctrl+K search dialog, page transitions, card hover effects,
status pulse animations, skeleton loaders, and responsive design. Polish
all existing pages with consistent theming.

src/lib/components/skeleton/BoardSkeleton.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	interface Props {
+		count?: number;
+	}
+
+	let { count = 3 }: Props = $props();
+
+	const items = $derived(Array.from({ length: count }, (_, i) => i));
+</script>
+
+{#each items as i (i)}
+	<div class="rounded-lg border border-border bg-card p-5">
+		<div class="flex items-start gap-3">
+			<div class="skeleton h-8 w-8 rounded-md"></div>
+			<div class="min-w-0 flex-1">
+				<div class="skeleton mb-2 h-5 w-1/2 rounded"></div>
+				<div class="skeleton mb-1 h-3 w-full rounded"></div>
+				<div class="skeleton mt-2 h-3 w-20 rounded"></div>
+			</div>
+		</div>
+	</div>
+{/each}

src/lib/components/skeleton/CardSkeleton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	interface Props {
+		count?: number;
+	}
+
+	let { count = 1 }: Props = $props();
+
+	const items = $derived(Array.from({ length: count }, (_, i) => i));
+</script>
+
+{#each items as i (i)}
+	<div class="rounded-lg border border-border bg-card p-4">
+		<div class="mb-3 flex items-start justify-between">
+			<div class="skeleton h-10 w-10 rounded-lg"></div>
+			<div class="skeleton h-5 w-14 rounded-full"></div>
+		</div>
+		<div class="skeleton mb-2 h-4 w-3/4 rounded"></div>
+		<div class="skeleton h-3 w-full rounded"></div>
+		<div class="skeleton mt-1 h-3 w-1/2 rounded"></div>
+	</div>
+{/each}

src/lib/components/skeleton/SectionSkeleton.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	interface Props {
+		count?: number;
+		widgetsPerSection?: number;
+	}
+
+	let { count = 2, widgetsPerSection = 4 }: Props = $props();
+
+	const sections = $derived(Array.from({ length: count }, (_, i) => i));
+	const widgets = $derived(Array.from({ length: widgetsPerSection }, (_, i) => i));
+</script>
+
+{#each sections as s (s)}
+	<div class="rounded-lg border border-border bg-card/50">
+		<!-- Section header skeleton -->
+		<div class="flex items-center gap-2 px-4 py-3">
+			<div class="skeleton h-4 w-4 rounded"></div>
+			<div class="skeleton h-4 w-32 rounded"></div>
+		</div>
+
+		<!-- Widget grid skeleton -->
+		<div class="grid grid-cols-2 gap-3 px-4 pb-4 sm:grid-cols-3 lg:grid-cols-4">
+			{#each widgets as w (w)}
+				<div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-card p-4">
+					<div class="skeleton h-12 w-12 rounded-lg"></div>
+					<div class="skeleton h-3 w-16 rounded"></div>
+					<div class="skeleton h-4 w-12 rounded-full"></div>
+				</div>
+			{/each}
+		</div>
+	</div>
+{/each}