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/routes/admin/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { LayoutData } from './$types.js';
+	import { page } from '$app/stores';
 
 	let { data, children }: { data: LayoutData; children: Snippet } = $props();
 
@@ -9,20 +10,24 @@
 		{ href: '/admin/groups', label: 'Groups' },
 		{ href: '/admin/settings', label: 'Settings' }
 	] as const;
+
+	function isActive(href: string): boolean {
+		return $page.url.pathname === href;
+	}
 </script>
 
-<div class="min-h-screen bg-background text-foreground">
-	<nav class="border-b border-border bg-card">
-		<div class="mx-auto flex max-w-6xl items-center gap-6 px-6 py-3">
-			<a href="/" class="text-sm text-muted-foreground hover:text-foreground">
-				&larr; Back to Dashboard
-			</a>
-			<span class="text-sm font-semibold text-card-foreground">Admin Panel</span>
-			<div class="flex gap-4">
+<div class="p-6">
+	<div class="mx-auto max-w-6xl">
+		<!-- Admin header -->
+		<div class="mb-6 flex flex-wrap items-center gap-4 rounded-xl border border-border bg-card p-4 shadow-sm">
+			<span class="text-sm font-semibold text-foreground">Admin Panel</span>
+			<div class="flex gap-1">
 				{#each navItems as item}
 					<a
 						href={item.href}
-						class="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
+						class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {isActive(item.href)
+							? 'bg-primary text-primary-foreground'
+							: 'text-muted-foreground hover:bg-accent hover:text-foreground'}"
 					>
 						{item.label}
 					</a>
@@ -32,8 +37,7 @@
 				{data.user.displayName} (admin)
 			</div>
 		</div>
-	</nav>
-	<main class="mx-auto max-w-6xl p-6">
+
 		{@render children()}
-	</main>
+	</div>
 </div>