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/section/Section.svelte

@@ -38,7 +38,7 @@
 	let expanded = $state(section.isExpandedByDefault);
 </script>
 
-<div class="rounded-lg border border-gray-700 bg-gray-800/30">
+<div class="rounded-xl border border-border bg-card/30 shadow-sm">
 	<SectionHeader
 		title={section.title}
 		icon={section.icon}

src/lib/components/section/SectionHeader.svelte

@@ -12,10 +12,10 @@
 <button
 	type="button"
 	onclick={onToggle}
-	class="flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-gray-700/30"
+	class="flex w-full items-center gap-2 rounded-t-xl px-4 py-3 text-left transition-colors hover:bg-accent/30"
 >
 	<svg
-		class="h-4 w-4 shrink-0 text-gray-400 transition-transform duration-200"
+		class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
 		class:rotate-90={expanded}
 		xmlns="http://www.w3.org/2000/svg"
 		viewBox="0 0 24 24"
@@ -32,5 +32,5 @@
 		<span class="text-base">{icon}</span>
 	{/if}
 
-	<span class="font-medium text-white">{title}</span>
+	<span class="font-medium text-foreground">{title}</span>
 </button>