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/widget/AppWidget.svelte

@@ -39,10 +39,10 @@
 	href={app.url}
 	target="_blank"
 	rel="noopener noreferrer"
-	class="group flex flex-col items-center gap-2 rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center transition-colors hover:border-indigo-500/50 hover:bg-gray-800"
+	class="card-hover group flex flex-col items-center gap-2 rounded-xl border border-border bg-card p-4 text-center transition-colors hover:border-primary/50"
 >
 	<!-- Icon -->
-	<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-700 transition-colors group-hover:bg-gray-600">
+	<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-muted transition-colors group-hover:bg-accent">
 		{#if app.iconType === 'emoji' && app.icon}
 			<span class="text-2xl">{app.icon}</span>
 		{:else if iconSrc}
@@ -52,14 +52,14 @@
 				class="h-8 w-8 object-contain"
 			/>
 		{:else}
-			<span class="text-lg font-bold text-gray-400">
+			<span class="text-lg font-bold text-muted-foreground">
 				{app.name.charAt(0).toUpperCase()}
 			</span>
 		{/if}
 	</div>
 
 	<!-- Name -->
-	<span class="text-sm font-medium text-white group-hover:text-indigo-300 transition-colors truncate w-full">
+	<span class="w-full truncate text-sm font-medium text-foreground transition-colors group-hover:text-primary">
 		{app.name}
 	</span>