Rearrange nav: logo left, search centered, nav items right

Use a 3-column CSS grid on desktop (auto | 1fr | auto) so the search
bar stays centered in the viewport while logo and nav items pin to
the edges. Mobile layout unchanged (logo left, hamburger right).

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

src/routes/+layout.svelte

@@ -26,8 +26,10 @@
 
 <div class="min-h-screen layout-page-bg">
 	<nav class="shadow-sm layout-nav-bg">
-		<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+		<div class="px-4 sm:px-6 lg:px-8">
-			<div class="flex h-14 items-center justify-between">
+			<!-- Desktop: 3-column grid (logo | search | nav) -->
+			<div class="hidden sm:grid sm:grid-cols-[auto_1fr_auto] h-14 items-center gap-4">
+				<!-- Left: Logo -->
 				<a href="/" class="flex items-center gap-2 text-white font-bold text-lg">
 					{#if data.tenant?.logoUrl}
 						<img src={data.tenant.logoUrl} alt="" class="h-7 w-auto" />
@@ -42,14 +44,17 @@
 					{data.tenant?.logoText ?? data.tenant?.name ?? 'Pounce'}
 				</a>
 
-				{#if data.user}
+				<!-- Center: Search -->
-					<div class="hidden sm:block">
+				<div class="flex justify-center">
-						<SearchBar />
+					{#if data.user}
-					</div>
+						<div class="w-full max-w-md">
-				{/if}
+							<SearchBar />
+						</div>
+					{/if}
+				</div>
 
-				<!-- Desktop nav -->
+				<!-- Right: Nav items -->
-				<div class="hidden sm:flex items-center gap-3">
+				<div class="flex items-center gap-3">
 					{#if data.user}
 						<a
 							href="/my-work"
@@ -120,9 +125,24 @@
 						</a>
 					{/if}
 				</div>
+			</div>
 
-				<!-- Mobile hamburger -->
+				<!-- Mobile header -->
-				<div class="flex items-center gap-2 sm:hidden">
+			<div class="flex h-14 items-center justify-between sm:hidden">
+				<a href="/" class="flex items-center gap-2 text-white font-bold text-lg">
+					{#if data.tenant?.logoUrl}
+						<img src={data.tenant.logoUrl} alt="" class="h-7 w-auto" />
+					{:else}
+						<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
+							<circle cx="7" cy="5" r="2.2" />
+							<circle cx="12" cy="3.5" r="2.2" />
+							<circle cx="17" cy="5" r="2.2" />
+							<ellipse cx="12" cy="14" rx="6" ry="7" />
+						</svg>
+					{/if}
+					{data.tenant?.logoText ?? data.tenant?.name ?? 'Pounce'}
+				</a>
+				<div class="flex items-center gap-2">
 					<button
 						onclick={toggleTheme}
 						class="rounded p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition"