From 8275f3a71b183300219365dcedc4b55a1cd5e085 Mon Sep 17 00:00:00 2001
From: Yusuf Suleman <yusuf@quadjourney.com>
Date: Wed, 1 Apr 2026 11:48:29 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20brain=20service=20=E2=80=94=20self-cont?=
 =?UTF-8?q?ained=20second=20brain=20knowledge=20manager?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Full backend service with:
- FastAPI REST API with CRUD, search, reprocess endpoints
- PostgreSQL + pgvector for items and semantic search
- Redis + RQ for background job processing
- Meilisearch for fast keyword/filter search
- Browserless/Chrome for JS rendering and screenshots
- OpenAI structured output for AI classification
- Local file storage with S3-ready abstraction
- Gateway auth via X-Gateway-User-Id header
- Own docker-compose stack (6 containers)

Classification: fixed folders (Home/Family/Work/Travel/Knowledge/Faith/Projects)
and fixed tags (28 predefined). AI assigns exactly 1 folder, 2-3 tags, title,
summary, and confidence score per item.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docker-compose.yml                            |    4 +
 frontend-v2/src/hooks.server.ts               |   31 +-
 .../assistant/FitnessAssistantDrawer.svelte   |  982 +++++
 .../src/lib/components/layout/AppShell.svelte |  406 ++
 .../lib/components/shared/PageIntro.svelte    |   87 +
 frontend-v2/src/lib/mockup/data.ts            |  243 ++
 .../dashboard/AtelierDashboardPage.svelte     |  798 ++++
 .../dashboard/LegacyDashboardPage.svelte      |  444 +++
 .../pages/fitness/AtelierFitnessPage.svelte   | 3340 +++++++++++++++++
 .../pages/fitness/LegacyFitnessPage.svelte    | 1605 ++++++++
 .../inventory/AtelierInventoryPage.svelte     | 1054 ++++++
 .../inventory/LegacyInventoryPage.svelte      |  902 +++++
 .../lib/pages/reader/AtelierReaderPage.svelte | 1183 ++++++
 .../lib/pages/reader/LegacyReaderPage.svelte  |  880 +++++
 .../pages/trips/AtelierTripDetailPage.svelte  | 1721 +++++++++
 .../lib/pages/trips/AtelierTripsPage.svelte   |  849 +++++
 .../lib/pages/trips/LegacyTripsPage.svelte    |  345 ++
 .../src/routes/(app)/+layout.server.ts        |    4 +-
 frontend-v2/src/routes/(app)/+layout.svelte   |   35 +-
 frontend-v2/src/routes/(app)/+page.svelte     |  450 +--
 .../src/routes/(app)/fitness/+page.svelte     | 1607 +-------
 .../routes/(app)/fitness/goals/+page.svelte   |   28 +
 .../src/routes/(app)/inventory/+page.svelte   |  904 +----
 .../src/routes/(app)/reader/+page.svelte      |  882 +----
 .../src/routes/(app)/trips/+page.svelte       |  374 +-
 .../src/routes/(app)/trips/trip/+page.svelte  |    7 +
 .../src/routes/assistant/fitness/+server.ts   |  885 +++++
 .../src/routes/atelier/+layout.server.ts      |   37 +
 frontend-v2/src/routes/atelier/+layout.svelte |   32 +
 frontend-v2/src/routes/atelier/+page.svelte   |   34 +
 .../src/routes/atelier/fitness/+page.svelte   | 2680 +++++++++++++
 .../src/routes/atelier/inventory/+page.svelte | 1054 ++++++
 .../src/routes/atelier/reader/+page.svelte    | 1006 +++++
 frontend-v2/src/routes/mockup/+layout.svelte  |  327 ++
 frontend-v2/src/routes/mockup/+page.svelte    |  334 ++
 .../src/routes/mockup/budget/+page.svelte     |   96 +
 .../src/routes/mockup/fitness/+page.svelte    |  149 +
 .../src/routes/mockup/inventory/+page.svelte  |  112 +
 .../src/routes/mockup/media/+page.svelte      |  117 +
 .../src/routes/mockup/reader/+page.svelte     |  109 +
 .../src/routes/mockup/settings/+page.svelte   |   95 +
 .../src/routes/mockup/tasks/+page.svelte      |  108 +
 .../src/routes/mockup/trips/+page.svelte      |  128 +
 gateway/config.py                             |    4 +-
 gateway/responses.py                          |    6 +-
 gateway/sessions.py                           |   21 +-
 services/brain/Dockerfile.api                 |   23 +
 services/brain/Dockerfile.worker              |   19 +
 services/brain/README.md                      |   76 +
 services/brain/app/__init__.py                |    0
 services/brain/app/api/__init__.py            |    0
 services/brain/app/api/deps.py                |   21 +
 services/brain/app/api/routes.py              |  319 ++
 services/brain/app/config.py                  |   55 +
 services/brain/app/database.py                |   18 +
 services/brain/app/main.py                    |   41 +
 services/brain/app/models/__init__.py         |    0
 services/brain/app/models/item.py             |   80 +
 services/brain/app/models/schema.py           |  109 +
 services/brain/app/search/__init__.py         |    0
 services/brain/app/search/engine.py           |  183 +
 services/brain/app/services/__init__.py       |    0
 services/brain/app/services/classify.py       |  125 +
 services/brain/app/services/embed.py          |   36 +
 services/brain/app/services/ingest.py         |  164 +
 services/brain/app/services/storage.py        |   81 +
 services/brain/app/worker/__init__.py         |    0
 services/brain/app/worker/tasks.py            |  156 +
 services/brain/docker-compose.yml             |  104 +
 services/brain/migrations/001_init.sql        |   56 +
 services/brain/requirements.txt               |   11 +
 .../frontend-legacy/src/lib/api/types.ts      |   12 +
 services/fitness/server.py                    |  102 +-
 73 files changed, 24081 insertions(+), 4209 deletions(-)
 create mode 100644 frontend-v2/src/lib/components/assistant/FitnessAssistantDrawer.svelte
 create mode 100644 frontend-v2/src/lib/components/layout/AppShell.svelte
 create mode 100644 frontend-v2/src/lib/components/shared/PageIntro.svelte
 create mode 100644 frontend-v2/src/lib/mockup/data.ts
 create mode 100644 frontend-v2/src/lib/pages/dashboard/AtelierDashboardPage.svelte
 create mode 100644 frontend-v2/src/lib/pages/dashboard/LegacyDashboardPage.svelte
 create mode 100644 frontend-v2/src/lib/pages/fitness/AtelierFitnessPage.svelte
 create mode 100644 frontend-v2/src/lib/pages/fitness/LegacyFitnessPage.svelte
 create mode 100644 frontend-v2/src/lib/pages/inventory/AtelierInventoryPage.svelte
 create mode 100644 frontend-v2/src/lib/pages/inventory/LegacyInventoryPage.svelte
 create mode 100644 frontend-v2/src/lib/pages/reader/AtelierReaderPage.svelte
 create mode 100644 frontend-v2/src/lib/pages/reader/LegacyReaderPage.svelte
 create mode 100644 frontend-v2/src/lib/pages/trips/AtelierTripDetailPage.svelte
 create mode 100644 frontend-v2/src/lib/pages/trips/AtelierTripsPage.svelte
 create mode 100644 frontend-v2/src/lib/pages/trips/LegacyTripsPage.svelte
 create mode 100644 frontend-v2/src/routes/assistant/fitness/+server.ts
 create mode 100644 frontend-v2/src/routes/atelier/+layout.server.ts
 create mode 100644 frontend-v2/src/routes/atelier/+layout.svelte
 create mode 100644 frontend-v2/src/routes/atelier/+page.svelte
 create mode 100644 frontend-v2/src/routes/atelier/fitness/+page.svelte
 create mode 100644 frontend-v2/src/routes/atelier/inventory/+page.svelte
 create mode 100644 frontend-v2/src/routes/atelier/reader/+page.svelte
 create mode 100644 frontend-v2/src/routes/mockup/+layout.svelte
 create mode 100644 frontend-v2/src/routes/mockup/+page.svelte
 create mode 100644 frontend-v2/src/routes/mockup/budget/+page.svelte
 create mode 100644 frontend-v2/src/routes/mockup/fitness/+page.svelte
 create mode 100644 frontend-v2/src/routes/mockup/inventory/+page.svelte
 create mode 100644 frontend-v2/src/routes/mockup/media/+page.svelte
 create mode 100644 frontend-v2/src/routes/mockup/reader/+page.svelte
 create mode 100644 frontend-v2/src/routes/mockup/settings/+page.svelte
 create mode 100644 frontend-v2/src/routes/mockup/tasks/+page.svelte
 create mode 100644 frontend-v2/src/routes/mockup/trips/+page.svelte
 create mode 100644 services/brain/Dockerfile.api
 create mode 100644 services/brain/Dockerfile.worker
 create mode 100644 services/brain/README.md
 create mode 100644 services/brain/app/__init__.py
 create mode 100644 services/brain/app/api/__init__.py
 create mode 100644 services/brain/app/api/deps.py
 create mode 100644 services/brain/app/api/routes.py
 create mode 100644 services/brain/app/config.py
 create mode 100644 services/brain/app/database.py
 create mode 100644 services/brain/app/main.py
 create mode 100644 services/brain/app/models/__init__.py
 create mode 100644 services/brain/app/models/item.py
 create mode 100644 services/brain/app/models/schema.py
 create mode 100644 services/brain/app/search/__init__.py
 create mode 100644 services/brain/app/search/engine.py
 create mode 100644 services/brain/app/services/__init__.py
 create mode 100644 services/brain/app/services/classify.py
 create mode 100644 services/brain/app/services/embed.py
 create mode 100644 services/brain/app/services/ingest.py
 create mode 100644 services/brain/app/services/storage.py
 create mode 100644 services/brain/app/worker/__init__.py
 create mode 100644 services/brain/app/worker/tasks.py
 create mode 100644 services/brain/docker-compose.yml
 create mode 100644 services/brain/migrations/001_init.sql
 create mode 100644 services/brain/requirements.txt

diff --git a/docker-compose.yml b/docker-compose.yml
index 0c34fe7..129ac2d 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -8,6 +8,7 @@ services:
     environment:
       - ORIGIN=${PLATFORM_V2_ORIGIN:-https://dash.quadjourney.com}
       - GATEWAY_URL=http://gateway:8100
+      - DEV_AUTO_LOGIN=${DEV_AUTO_LOGIN:-0}
       - IMMICH_URL=${IMMICH_URL}
       - IMMICH_API_KEY=${IMMICH_API_KEY}
       - KARAKEEP_URL=${KARAKEEP_URL:-http://192.168.1.42:3005}
@@ -35,6 +36,9 @@ services:
       - ADMIN_USERNAME=${ADMIN_USERNAME}
       - ADMIN_PASSWORD=${ADMIN_PASSWORD}
       - ADMIN_DISPLAY_NAME=${ADMIN_DISPLAY_NAME:-Admin}
+      - DEV_AUTO_LOGIN=${DEV_AUTO_LOGIN:-0}
+      - DEV_AUTO_LOGIN_USERNAME=${DEV_AUTO_LOGIN_USERNAME:-dev}
+      - DEV_AUTO_LOGIN_DISPLAY_NAME=${DEV_AUTO_LOGIN_DISPLAY_NAME:-Dev User}
       - PORT=8100
       - TRIPS_BACKEND_URL=http://trips-service:8087
       - FITNESS_BACKEND_URL=http://fitness-service:8095
diff --git a/frontend-v2/src/hooks.server.ts b/frontend-v2/src/hooks.server.ts
index ae1d79f..2d03ab2 100644
--- a/frontend-v2/src/hooks.server.ts
+++ b/frontend-v2/src/hooks.server.ts
@@ -2,17 +2,35 @@ import type { Handle } from '@sveltejs/kit';
 import { env } from '$env/dynamic/private';
 
 const gatewayUrl = env.GATEWAY_URL || 'http://localhost:8100';
+const devAutoLogin = ['1', 'true', 'yes', 'on'].includes((env.DEV_AUTO_LOGIN || '').toLowerCase());
 const immichUrl = env.IMMICH_URL || '';
 const immichApiKey = env.IMMICH_API_KEY || '';
 const karakeepUrl = env.KARAKEEP_URL || '';
 const karakeepApiKey = env.KARAKEEP_API_KEY || '';
 
 export const handle: Handle = async ({ event, resolve }) => {
+	function shouldUseDevAutoLogin(): boolean {
+		if (!devAutoLogin) return false;
+		const host = event.url.host.toLowerCase();
+		return host.includes(':4174') || host.startsWith('test.');
+	}
+
+	function normalizeSetCookieForHttp(value: string): string {
+		// The gateway issues Secure cookies by default. On local HTTP dev hosts
+		// like 192.168.x.x or localhost, browsers drop those cookies entirely.
+		// Relax only at the frontend proxy boundary when the current app URL is HTTP.
+		if (event.url.protocol !== 'http:') return value;
+		return value.replace(/;\s*Secure/gi, '');
+	}
+
 	async function isAuthenticated(request: Request): Promise<boolean> {
 		const cookie = request.headers.get('cookie') || '';
-		if (!cookie.includes('platform_session=')) return false;
+		if (!cookie.includes('platform_session=') && !shouldUseDevAutoLogin()) return false;
 		try {
-			const res = await fetch(`${gatewayUrl}/api/auth/me`, { headers: { cookie } });
+			const headers: Record<string, string> = {};
+			if (cookie) headers.cookie = cookie;
+			if (shouldUseDevAutoLogin()) headers['X-Dev-Auto-Login'] = '1';
+			const res = await fetch(`${gatewayUrl}/api/auth/me`, { headers });
 			if (!res.ok) return false;
 			const data = await res.json();
 			return data.authenticated === true;
@@ -187,6 +205,9 @@ export const handle: Handle = async ({ event, resolve }) => {
 				headers.set(key, value);
 			}
 		}
+		if (shouldUseDevAutoLogin()) {
+			headers.set('X-Dev-Auto-Login', '1');
+		}
 
 		try {
 			const response = await fetch(targetUrl, {
@@ -200,7 +221,11 @@ export const handle: Handle = async ({ event, resolve }) => {
 			// Forward set-cookie headers from gateway
 			const responseHeaders = new Headers();
 			for (const [key, value] of response.headers.entries()) {
-				responseHeaders.append(key, value);
+				if (key.toLowerCase() === 'set-cookie') {
+					responseHeaders.append(key, normalizeSetCookieForHttp(value));
+				} else {
+					responseHeaders.append(key, value);
+				}
 			}
 
 			return new Response(response.body, {
diff --git a/frontend-v2/src/lib/components/assistant/FitnessAssistantDrawer.svelte b/frontend-v2/src/lib/components/assistant/FitnessAssistantDrawer.svelte
new file mode 100644
index 0000000..a6a117b
--- /dev/null
+++ b/frontend-v2/src/lib/components/assistant/FitnessAssistantDrawer.svelte
@@ -0,0 +1,982 @@
+<script lang="ts">
+	import { invalidateAll } from '$app/navigation';
+	import { tick } from 'svelte';
+	import { Bot, Dumbbell, ImagePlus, SendHorizonal, Sparkles, X } from '@lucide/svelte';
+
+	type ChatRole = 'user' | 'assistant';
+	type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack';
+
+	type Message = {
+		role: ChatRole;
+		content: string;
+		image?: string;
+		imageName?: string;
+	};
+
+	type Draft = {
+		food_name?: string;
+		meal_type?: MealType;
+		entry_date?: string;
+		quantity?: number;
+		unit?: string;
+		calories?: number;
+		protein?: number;
+		carbs?: number;
+		fat?: number;
+		sugar?: number;
+		fiber?: number;
+		note?: string;
+	};
+
+	type DraftBundle = Draft[];
+
+	interface Props {
+		open: boolean;
+		onclose: () => void;
+		entryDate?: string | null;
+	}
+
+	let { open = $bindable(), onclose, entryDate = null }: Props = $props();
+
+	const intro = `Tell me what you ate, including multiple items or a nutrition label photo, then correct me naturally until it looks right.`;
+
+	let messages = $state<Message[]>([
+		{ role: 'assistant', content: intro }
+	]);
+	let draft = $state<Draft | null>(null);
+	let drafts = $state<DraftBundle>([]);
+	let input = $state('');
+	let sending = $state(false);
+	let error = $state('');
+	let composerEl: HTMLInputElement | null = $state(null);
+	let fileInputEl: HTMLInputElement | null = $state(null);
+	let threadEl: HTMLElement | null = $state(null);
+	let threadEndEl: HTMLDivElement | null = $state(null);
+	let photoPreview = $state<string | null>(null);
+	let photoName = $state('');
+	let attachedPhoto = $state<string | null>(null);
+	let attachedPhotoName = $state('');
+
+	async function scrollThreadToBottom(behavior: ScrollBehavior = 'smooth') {
+		await tick();
+		requestAnimationFrame(() => {
+			threadEndEl?.scrollIntoView({ block: 'end', behavior });
+		});
+	}
+
+	function resetThread() {
+		messages = [{ role: 'assistant', content: intro }];
+		draft = null;
+		drafts = [];
+		input = '';
+		error = '';
+		photoPreview = null;
+		photoName = '';
+		attachedPhoto = null;
+		attachedPhotoName = '';
+		if (fileInputEl) fileInputEl.value = '';
+	}
+
+	function beginRevision() {
+		if (!input.trim()) {
+			input = 'Actually ';
+		}
+		requestAnimationFrame(() => composerEl?.focus());
+	}
+
+	function retryCurrentGuess() {
+		void sendMessage("That's not right. Try again.", 'chat');
+	}
+
+	async function sendMessage(content: string, action: 'chat' | 'apply' = 'chat') {
+		const clean = content.trim();
+		if (!clean && !photoPreview && action === 'chat') return;
+
+		error = '';
+		sending = true;
+		const outgoingPhoto = action === 'chat' ? photoPreview : null;
+		const outgoingPhotoName = action === 'chat' ? photoName : '';
+
+		const nextMessages =
+			action === 'chat'
+				? [
+						...messages,
+						{
+							role: 'user' as const,
+							content: clean,
+							image: outgoingPhoto || undefined,
+							imageName: outgoingPhotoName || undefined
+						}
+				  ]
+				: messages;
+
+		if (action === 'chat') {
+			messages = nextMessages;
+			input = '';
+			if (outgoingPhoto) {
+				attachedPhoto = outgoingPhoto;
+				attachedPhotoName = outgoingPhotoName;
+				photoPreview = null;
+				photoName = '';
+				if (fileInputEl) fileInputEl.value = '';
+			}
+			void scrollThreadToBottom('auto');
+		}
+
+		try {
+			const response = await fetch('/assistant/fitness', {
+				method: 'POST',
+				headers: { 'content-type': 'application/json' },
+				body: JSON.stringify({
+					action,
+					messages: nextMessages,
+					draft,
+					drafts,
+					entryDate,
+					imageDataUrl: action === 'chat' ? outgoingPhoto || attachedPhoto : null
+				})
+			});
+
+			const data = await response.json();
+			if (!response.ok) {
+				throw new Error(data?.error || 'Assistant request failed');
+			}
+
+			if (data.draft) {
+				draft = data.draft;
+			}
+
+			if (Array.isArray(data.drafts)) {
+				drafts = data.drafts;
+				if (data.drafts.length > 0) {
+					draft = null;
+				}
+			} else if (data.draft) {
+				drafts = [];
+			}
+
+			if (data.reply) {
+				messages = [...nextMessages, { role: 'assistant', content: data.reply }];
+			}
+
+			if (data.applied) {
+				photoPreview = null;
+				photoName = '';
+				attachedPhoto = null;
+				attachedPhotoName = '';
+				if (fileInputEl) fileInputEl.value = '';
+				draft = null;
+				drafts = [];
+				window.dispatchEvent(
+					new CustomEvent('fitnessassistantapplied', {
+						detail: { entryDate: data.draft?.entry_date || data.drafts?.[0]?.entry_date || entryDate || null }
+					})
+				);
+				await invalidateAll();
+			}
+
+			await scrollThreadToBottom();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Assistant request failed';
+		} finally {
+			sending = false;
+			requestAnimationFrame(() => composerEl?.focus());
+		}
+	}
+
+	function handleSubmit() {
+		void sendMessage(input, 'chat');
+	}
+
+	function openPhotoPicker() {
+		fileInputEl?.click();
+	}
+
+	function loadPhoto(file: File | null) {
+		if (!file) return;
+		photoName = file.name;
+		const reader = new FileReader();
+		reader.onload = () => {
+			if (typeof reader.result === 'string') {
+				photoPreview = reader.result;
+			}
+		};
+		reader.readAsDataURL(file);
+	}
+
+	function clearPhoto() {
+		photoPreview = null;
+		photoName = '';
+		if (fileInputEl) fileInputEl.value = '';
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			onclose();
+			return;
+		}
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			handleSubmit();
+		}
+	}
+
+	$effect(() => {
+		if (open) {
+			requestAnimationFrame(() => composerEl?.focus());
+		}
+	});
+
+	$effect(() => {
+		if (!open) return;
+
+		document.body.classList.add('assistant-open');
+
+		return () => {
+			document.body.classList.remove('assistant-open');
+		};
+	});
+</script>
+
+{#if open}
+	<button class="assistant-backdrop" aria-label="Close assistant" onclick={onclose}></button>
+
+	<div class="assistant-drawer" role="dialog" aria-label="Fitness assistant">
+		<header class="assistant-head">
+			<div class="assistant-title-wrap">
+				<div class="assistant-mark">
+					<Dumbbell size={16} strokeWidth={1.9} />
+				</div>
+				<div>
+					<div class="assistant-kicker">Assistant</div>
+					<div class="assistant-title">Fitness chat</div>
+				</div>
+			</div>
+
+			<div class="assistant-head-actions">
+				<button class="assistant-ghost" onclick={resetThread}>Reset</button>
+				<button class="assistant-close" onclick={onclose} aria-label="Close assistant">
+					<X size={17} strokeWidth={1.9} />
+				</button>
+			</div>
+		</header>
+
+		<div class="assistant-body">
+			<section class="thread" bind:this={threadEl}>
+				<div class="thread-spacer" aria-hidden="true"></div>
+				{#each messages as message}
+					<div class="bubble-row" class:user={message.role === 'user'}>
+						{#if message.role === 'assistant'}
+							<div class="bubble-icon">
+								<Bot size={14} strokeWidth={1.8} />
+							</div>
+						{/if}
+						<div class="bubble-stack" class:user={message.role === 'user'}>
+							{#if message.image}
+								<div class="image-bubble" class:user={message.role === 'user'}>
+									<img src={message.image} alt={message.imageName || 'Sent food photo'} />
+									{#if message.imageName}
+										<div class="image-bubble-name">{message.imageName}</div>
+									{/if}
+								</div>
+							{/if}
+							{#if message.content}
+								<div class="bubble" class:user={message.role === 'user'}>
+									{message.content}
+								</div>
+							{/if}
+						</div>
+					</div>
+				{/each}
+
+				{#if drafts.length > 1}
+					<div class="bubble-row draft-row">
+						<div class="bubble-icon">
+							<Sparkles size={14} strokeWidth={1.8} />
+						</div>
+						<div class="draft-card bundle-card">
+							<div class="draft-card-top">
+								<div>
+									<div class="draft-card-kicker">Ready to add</div>
+									<div class="draft-card-title">{drafts.length} items</div>
+								</div>
+								<div class="draft-meal">{drafts[0]?.meal_type || 'meal'}</div>
+							</div>
+							<div class="bundle-list">
+								{#each drafts as item}
+									<div class="bundle-row">
+										<div class="bundle-name">{item.food_name}</div>
+										<div class="bundle-calories">{Math.round(item.calories || 0)} cal</div>
+									</div>
+								{/each}
+							</div>
+							<div class="draft-inline-metrics">
+								<span>{drafts.reduce((sum, item) => sum + Math.round(item.calories || 0), 0)} cal total</span>
+							</div>
+							<div class="draft-card-actions">
+								<button class="draft-apply subtle" onclick={beginRevision} disabled={sending}>
+									Edit
+								</button>
+								<button class="draft-apply" onclick={() => void sendMessage('', 'apply')} disabled={sending}>
+									{sending ? 'Adding...' : 'Add all'}
+								</button>
+							</div>
+						</div>
+					</div>
+				{:else if draft?.food_name}
+					<div class="bubble-row draft-row">
+						<div class="bubble-icon">
+							<Sparkles size={14} strokeWidth={1.8} />
+						</div>
+						<div class="draft-card">
+							<div class="draft-card-top">
+								<div>
+									<div class="draft-card-kicker">Ready to add</div>
+									<div class="draft-card-title">{draft.food_name}</div>
+								</div>
+								{#if draft.meal_type}
+									<div class="draft-meal">{draft.meal_type}</div>
+								{/if}
+							</div>
+							<div class="draft-inline-metrics">
+								<span>{Math.round(draft.calories || 0)} cal</span>
+								<span>{Math.round(draft.protein || 0)}p</span>
+								<span>{Math.round(draft.carbs || 0)}c</span>
+								<span>{Math.round(draft.fat || 0)}f</span>
+								<span>{Math.round(draft.sugar || 0)} sugar</span>
+								<span>{Math.round(draft.fiber || 0)} fiber</span>
+							</div>
+							<div class="draft-card-actions">
+								<button class="draft-apply subtle" onclick={beginRevision} disabled={sending}>
+									Edit
+								</button>
+								<button class="draft-apply subtle" onclick={retryCurrentGuess} disabled={sending}>
+									Try again
+								</button>
+								<button class="draft-apply" onclick={() => void sendMessage('', 'apply')} disabled={sending}>
+									{sending ? 'Adding...' : 'Add it'}
+								</button>
+							</div>
+						</div>
+					</div>
+				{/if}
+
+				<div class="thread-end" bind:this={threadEndEl} aria-hidden="true"></div>
+
+			</section>
+		</div>
+
+		{#if error}
+			<div class="assistant-error">{error}</div>
+		{/if}
+
+		<footer class="assistant-compose">
+			<div class="compose-shell">
+				<input
+					class="sr-only-file"
+					type="file"
+					accept="image/*"
+					bind:this={fileInputEl}
+					onchange={(event) => loadPhoto((event.currentTarget as HTMLInputElement).files?.[0] || null)}
+				/>
+				<div class="compose-tools">
+					<button class="compose-tool" type="button" onclick={openPhotoPicker}>
+						<ImagePlus size={14} strokeWidth={1.9} />
+						<span>Photo</span>
+					</button>
+				</div>
+				{#if photoPreview}
+					<div class="photo-staged">
+						<img src={photoPreview} alt="Selected food" />
+						<div class="photo-staged-copy">
+							<div class="photo-staged-title">{photoName || 'Food photo'}</div>
+							<div class="photo-staged-note">I’ll draft the entry from this photo.</div>
+						</div>
+						<button class="photo-staged-clear" type="button" onclick={clearPhoto}>Remove</button>
+					</div>
+				{:else if attachedPhoto}
+					<div class="photo-staged attached">
+						<img src={attachedPhoto} alt="Attached food context" />
+						<div class="photo-staged-copy">
+							<div class="photo-staged-title">{attachedPhotoName || 'Attached photo'}</div>
+							<div class="photo-staged-note">Still attached for follow-up corrections.</div>
+						</div>
+						<button class="photo-staged-clear" type="button" onclick={() => { attachedPhoto = null; attachedPhotoName = ''; }}>
+							Clear
+						</button>
+					</div>
+				{/if}
+				<input
+					class="compose-input"
+					bind:value={input}
+					bind:this={composerEl}
+					placeholder="Add 2 boiled eggs for breakfast..."
+					onkeydown={handleKeydown}
+					type="text"
+				/>
+				<button
+					class="compose-send"
+					onclick={handleSubmit}
+					disabled={sending || (!input.trim() && !photoPreview)}
+					aria-label="Send message"
+				>
+					<SendHorizonal size={16} strokeWidth={2} />
+				</button>
+			</div>
+		</footer>
+	</div>
+{/if}
+
+<style>
+	.assistant-backdrop {
+		position: fixed;
+		inset: 0;
+		border: none;
+		background: linear-gradient(180deg, rgba(239, 231, 220, 0.52), rgba(225, 215, 202, 0.34));
+		backdrop-filter: blur(6px) saturate(1.02);
+		z-index: 88;
+		overscroll-behavior: none;
+		touch-action: none;
+	}
+
+	:global(body.assistant-open) {
+		overflow: hidden;
+		overscroll-behavior: none;
+	}
+
+	.assistant-drawer {
+		position: fixed;
+		top: 18px;
+		right: 18px;
+		bottom: 18px;
+		width: min(430px, calc(100vw - 24px));
+		border-radius: 30px;
+		border: 1px solid rgba(36, 26, 18, 0.1);
+		background:
+			radial-gradient(circle at top right, rgba(54, 108, 86, 0.08), transparent 24%),
+			linear-gradient(180deg, rgba(252, 248, 242, 0.96), rgba(244, 236, 227, 0.94));
+		box-shadow: 0 28px 80px rgba(24, 16, 11, 0.2);
+		display: grid;
+		grid-template-rows: auto minmax(0, 1fr) auto auto;
+		overflow: hidden;
+		z-index: 89;
+	}
+
+	.assistant-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+		padding: 18px 18px 14px;
+		border-bottom: 1px solid rgba(36, 26, 18, 0.08);
+	}
+
+	.assistant-title-wrap {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+	}
+
+	.assistant-mark {
+		width: 38px;
+		height: 38px;
+		border-radius: 14px;
+		display: grid;
+		place-items: center;
+		background: linear-gradient(135deg, #215043, #3f7862);
+		color: #fff9f2;
+	}
+
+	.assistant-kicker {
+		font-size: 0.68rem;
+		font-weight: 700;
+		letter-spacing: 0.12em;
+		text-transform: uppercase;
+		color: #857362;
+	}
+
+	.assistant-title {
+		font-size: 1.05rem;
+		font-weight: 700;
+		letter-spacing: -0.03em;
+		color: #1f1710;
+	}
+
+	.assistant-head-actions {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.assistant-ghost,
+	.assistant-close {
+		border: 1px solid rgba(36, 26, 18, 0.08);
+		background: rgba(255, 255, 255, 0.62);
+		color: #65584c;
+	}
+
+	.assistant-ghost {
+		height: 34px;
+		padding: 0 12px;
+		border-radius: 999px;
+		font-size: 0.84rem;
+		font-weight: 600;
+		font-family: inherit;
+		cursor: pointer;
+	}
+
+	.assistant-close {
+		width: 34px;
+		height: 34px;
+		border-radius: 999px;
+		display: grid;
+		place-items: center;
+		cursor: pointer;
+	}
+
+	.assistant-body {
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.thread {
+		min-height: 0;
+		overflow: auto;
+		overscroll-behavior: contain;
+		-webkit-overflow-scrolling: touch;
+		touch-action: pan-y;
+		padding: 14px 18px 10px;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	.bundle-card {
+		gap: 12px;
+	}
+
+	.bundle-list {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.bundle-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+		padding: 10px 12px;
+		border-radius: 14px;
+		background: rgba(255, 255, 255, 0.56);
+		border: 1px solid rgba(36, 26, 18, 0.08);
+	}
+
+	.bundle-name {
+		font-size: 0.92rem;
+		font-weight: 600;
+		color: #201811;
+	}
+
+	.bundle-calories {
+		font-size: 0.82rem;
+		font-weight: 700;
+		color: #6d5b4f;
+		white-space: nowrap;
+	}
+
+	.thread-spacer {
+		display: none;
+	}
+
+	.thread-end {
+		width: 100%;
+		height: 1px;
+	}
+
+	.bubble-row {
+		display: flex;
+		align-items: flex-end;
+		gap: 8px;
+	}
+
+	.bubble-row.user {
+		justify-content: flex-end;
+	}
+
+	.bubble-stack {
+		display: grid;
+		gap: 8px;
+		max-width: 84%;
+	}
+
+	.bubble-stack.user {
+		justify-items: end;
+	}
+
+	.bubble-icon {
+		width: 28px;
+		height: 28px;
+		border-radius: 999px;
+		display: grid;
+		place-items: center;
+		background: rgba(47, 106, 82, 0.08);
+		color: #2f6a52;
+		flex-shrink: 0;
+	}
+
+	.bubble {
+		padding: 11px 13px;
+		border-radius: 18px 18px 18px 8px;
+		background: rgba(255, 255, 255, 0.78);
+		border: 1px solid rgba(36, 26, 18, 0.08);
+		color: #241c14;
+		font-size: 0.95rem;
+		line-height: 1.45;
+	}
+
+	.bubble.user {
+		border-radius: 18px 18px 8px 18px;
+		background: linear-gradient(180deg, #2d6450, #245242);
+		border-color: transparent;
+		color: #f8f4ee;
+	}
+
+	.image-bubble {
+		width: min(240px, 100%);
+		padding: 8px;
+		border-radius: 20px 20px 20px 10px;
+		background: rgba(255, 255, 255, 0.82);
+		border: 1px solid rgba(36, 26, 18, 0.08);
+		display: grid;
+		gap: 8px;
+	}
+
+	.image-bubble.user {
+		border-radius: 20px 20px 10px 20px;
+		background: linear-gradient(180deg, rgba(53, 102, 83, 0.16), rgba(39, 83, 66, 0.12)), rgba(255, 251, 246, 0.96);
+	}
+
+	.image-bubble img {
+		width: 100%;
+		aspect-ratio: 1 / 1;
+		object-fit: cover;
+		border-radius: 14px;
+		display: block;
+	}
+
+	.image-bubble-name {
+		padding: 0 4px 2px;
+		font-size: 0.74rem;
+		font-weight: 700;
+		color: #6b5c4f;
+		line-height: 1.25;
+		word-break: break-word;
+	}
+
+	.draft-meal {
+		padding: 6px 10px;
+		border-radius: 999px;
+		background: rgba(47, 106, 82, 0.1);
+		color: #2f6a52;
+		font-size: 0.76rem;
+		font-weight: 700;
+		text-transform: capitalize;
+	}
+
+	.draft-apply {
+		height: 40px;
+		padding: 0 14px;
+		border: none;
+		border-radius: 14px;
+		background: linear-gradient(180deg, #366d57, #245141);
+		color: #f8f4ee;
+		font-size: 0.88rem;
+		font-weight: 700;
+		font-family: inherit;
+		cursor: pointer;
+	}
+
+	.draft-apply.subtle {
+		background: rgba(255, 255, 255, 0.82);
+		color: #2c2016;
+		border: 1px solid rgba(36, 26, 18, 0.08);
+	}
+
+	.draft-apply:disabled {
+		opacity: 0.45;
+		cursor: default;
+	}
+
+	.draft-card {
+		max-width: 100%;
+		padding: 14px;
+		border-radius: 20px 20px 20px 10px;
+		border: 1px solid rgba(36, 26, 18, 0.08);
+		background:
+			radial-gradient(circle at top right, rgba(199, 137, 50, 0.08), transparent 30%),
+			rgba(255, 251, 246, 0.88);
+		display: grid;
+		gap: 12px;
+	}
+
+	.draft-card-top {
+		display: flex;
+		align-items: start;
+		justify-content: space-between;
+		gap: 12px;
+	}
+
+	.draft-card-kicker {
+		font-size: 0.68rem;
+		font-weight: 700;
+		letter-spacing: 0.12em;
+		text-transform: uppercase;
+		color: #8c7a68;
+	}
+
+	.draft-card-title {
+		margin-top: 4px;
+		font-size: 1rem;
+		font-weight: 700;
+		letter-spacing: -0.03em;
+		color: #201811;
+	}
+
+	.draft-inline-metrics {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+
+	.draft-inline-metrics span {
+		padding: 6px 9px;
+		border-radius: 999px;
+		background: rgba(255, 255, 255, 0.8);
+		border: 1px solid rgba(36, 26, 18, 0.06);
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: #5e5246;
+	}
+
+	.draft-card-actions {
+		display: flex;
+		gap: 8px;
+		justify-content: flex-end;
+	}
+
+	.draft-row {
+		align-items: stretch;
+	}
+
+	.assistant-error {
+		padding: 0 18px 10px;
+		color: #9b4337;
+		font-size: 0.86rem;
+	}
+
+	.assistant-compose {
+		padding: 14px 18px 18px;
+		border-top: 1px solid rgba(36, 26, 18, 0.08);
+	}
+
+	.compose-shell {
+		padding: 10px;
+		border-radius: 24px;
+		border: 1px solid rgba(36, 26, 18, 0.08);
+		background: rgba(255, 255, 255, 0.7);
+		display: grid;
+		gap: 10px;
+	}
+
+	.sr-only-file {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.compose-tools {
+		display: flex;
+		gap: 8px;
+	}
+
+	.compose-tool {
+		height: 30px;
+		padding: 0 10px;
+		border-radius: 999px;
+		border: 1px solid rgba(36, 26, 18, 0.08);
+		background: rgba(249, 245, 239, 0.78);
+		color: #6f6254;
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 0.76rem;
+		font-weight: 600;
+		font-family: inherit;
+	}
+
+	.compose-input {
+		width: 100%;
+		border: none;
+		background: transparent;
+		outline: none;
+		color: #201810;
+		font-size: 1rem;
+		line-height: 1.5;
+		font-family: inherit;
+		height: 42px;
+		padding: 0 2px;
+	}
+
+	.compose-input::placeholder {
+		color: #8f8071;
+	}
+
+	.compose-send {
+		justify-self: end;
+		width: 42px;
+		height: 42px;
+		border-radius: 14px;
+		border: none;
+		background: #2e6851;
+		color: #fff7f0;
+		display: grid;
+		place-items: center;
+		cursor: pointer;
+	}
+
+	.compose-send:disabled {
+		opacity: 0.45;
+		cursor: default;
+	}
+
+	.photo-staged {
+		display: grid;
+		grid-template-columns: 54px minmax(0, 1fr) auto;
+		align-items: center;
+		gap: 10px;
+		padding: 10px;
+		border-radius: 18px;
+		background: rgba(255, 251, 246, 0.86);
+		border: 1px solid rgba(36, 26, 18, 0.08);
+	}
+
+	.photo-staged.attached {
+		background: rgba(246, 240, 231, 0.8);
+	}
+
+	.photo-staged img {
+		width: 54px;
+		height: 54px;
+		object-fit: cover;
+		border-radius: 12px;
+		display: block;
+	}
+
+	.photo-staged-title {
+		font-size: 0.84rem;
+		font-weight: 700;
+		color: #221912;
+	}
+
+	.photo-staged-note {
+		font-size: 0.74rem;
+		color: #7a6858;
+	}
+
+	.photo-staged-clear {
+		border: none;
+		background: none;
+		color: #7d4d3e;
+		font-size: 0.76rem;
+		font-weight: 700;
+		font-family: inherit;
+		cursor: pointer;
+	}
+
+	@media (max-width: 768px) {
+		.assistant-drawer {
+			top: auto;
+			right: 0;
+			left: 0;
+			bottom: 0;
+			width: auto;
+			height: min(86dvh, 760px);
+			max-height: min(86dvh, 760px);
+			border-radius: 28px 28px 0 0;
+			border-left: none;
+			border-right: none;
+			border-bottom: none;
+			box-shadow: 0 -18px 42px rgba(24, 16, 11, 0.18);
+		}
+
+		.assistant-backdrop {
+			backdrop-filter: blur(6px);
+		}
+
+		.assistant-head {
+			padding-top: 14px;
+		}
+
+		.assistant-head::before {
+			content: '';
+			position: absolute;
+			top: 8px;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 42px;
+			height: 4px;
+			border-radius: 999px;
+			background: rgba(44, 31, 19, 0.16);
+		}
+
+		.bubble {
+			max-width: 90%;
+		}
+
+		.bubble-stack {
+			max-width: 90%;
+		}
+
+		.image-bubble {
+			width: min(220px, 100%);
+		}
+
+		.thread {
+			padding-top: 8px;
+			padding-bottom: 16px;
+			align-content: start;
+		}
+
+		.thread-spacer {
+			display: block;
+			height: clamp(120px, 22vh, 220px);
+		}
+
+		.assistant-compose {
+			padding-bottom: calc(14px + env(safe-area-inset-bottom));
+			background: linear-gradient(180deg, rgba(247, 240, 231, 0.88), rgba(243, 235, 225, 0.96));
+		}
+
+		.compose-shell {
+			border-radius: 22px;
+			gap: 8px;
+		}
+
+		.compose-input {
+			font-size: 16px;
+			height: 40px;
+		}
+
+		.draft-card-actions {
+			flex-direction: column;
+		}
+
+		.draft-apply,
+		.draft-apply.subtle {
+			width: 100%;
+		}
+	}
+</style>
diff --git a/frontend-v2/src/lib/components/layout/AppShell.svelte b/frontend-v2/src/lib/components/layout/AppShell.svelte
new file mode 100644
index 0000000..4aeeb74
--- /dev/null
+++ b/frontend-v2/src/lib/components/layout/AppShell.svelte
@@ -0,0 +1,406 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import {
+		BookOpen,
+		CalendarDays,
+		CircleDot,
+		Compass,
+		Dumbbell,
+		Landmark,
+		LibraryBig,
+		Menu,
+		Package2,
+		Search,
+		Settings2,
+		SquareCheckBig,
+		X
+	} from '@lucide/svelte';
+
+	interface Props {
+		children: any;
+		userName?: string;
+		visibleApps?: string[];
+		onOpenCommand?: () => void;
+	}
+
+	let {
+		children,
+		userName = '',
+		visibleApps = ['tasks', 'trips', 'fitness', 'inventory', 'budget', 'reader', 'media'],
+		onOpenCommand
+	}: Props = $props();
+
+	const baseItems = [
+		{ id: 'dashboard', href: '/', label: 'Overview', icon: CircleDot },
+		{ id: 'tasks', href: '/tasks', label: 'Tasks', icon: SquareCheckBig },
+		{ id: 'trips', href: '/trips', label: 'Trips', icon: Compass },
+		{ id: 'fitness', href: '/fitness', label: 'Fitness', icon: Dumbbell },
+		{ id: 'budget', href: '/budget', label: 'Budget', icon: Landmark },
+		{ id: 'inventory', href: '/inventory', label: 'Inventory', icon: Package2 },
+		{ id: 'reader', href: '/reader', label: 'Reader', icon: BookOpen },
+		{ id: 'media', href: '/media', label: 'Media', icon: LibraryBig },
+		{ id: 'settings', href: '/settings', label: 'Settings', icon: Settings2 }
+	];
+
+	const navItems = $derived(
+		baseItems.filter((item) => item.id === 'dashboard' || item.id === 'settings' || visibleApps.includes(item.id))
+	);
+
+	let mobileNavOpen = $state(false);
+
+	function isActive(href: string): boolean {
+		if (href === '/') return page.url.pathname === '/';
+		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
+	}
+</script>
+
+<div class="shell">
+	<div class="shell-glow shell-glow-a"></div>
+	<div class="shell-glow shell-glow-b"></div>
+
+	<aside class="shell-rail reveal">
+		<div class="rail-top">
+			<a class="brand" href="/">
+				<div class="brand-mark">P</div>
+				<div>
+					<div class="brand-name">Platform</div>
+					<div class="brand-sub">ops workspace</div>
+				</div>
+			</a>
+
+			<button class="command-trigger" onclick={onOpenCommand}>
+				<Search size={15} strokeWidth={1.8} />
+				<span>Assistant</span>
+				<kbd>Ctrl K</kbd>
+			</button>
+
+			<nav class="rail-nav">
+				{#each navItems as item}
+					<a href={item.href} class:active={isActive(item.href)}>
+						<item.icon size={16} strokeWidth={1.8} />
+						<span>{item.label}</span>
+					</a>
+				{/each}
+			</nav>
+		</div>
+
+		<div class="rail-bottom">
+			<div class="rail-date">
+				<CalendarDays size={14} strokeWidth={1.8} />
+				<span>{new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric' }).format(new Date())}</span>
+			</div>
+			<div class="rail-user">{userName || 'Platform user'}</div>
+		</div>
+	</aside>
+
+	<div class="shell-main">
+		<header class="mobile-bar">
+			<button class="mobile-menu-btn" onclick={() => (mobileNavOpen = true)} aria-label="Open navigation">
+				<Menu size={18} strokeWidth={1.9} />
+			</button>
+
+			<a class="mobile-brand" href="/">
+				<div class="brand-mark">P</div>
+				<div>
+					<div class="brand-name">Platform</div>
+					<div class="brand-sub">ops workspace</div>
+				</div>
+			</a>
+			<button class="command-trigger mobile" onclick={onOpenCommand}>
+				<Search size={15} strokeWidth={1.8} />
+			</button>
+		</header>
+
+		{#if mobileNavOpen}
+			<button class="mobile-nav-overlay" aria-label="Close navigation" onclick={() => (mobileNavOpen = false)}></button>
+			<aside class="mobile-nav-sheet">
+				<div class="mobile-nav-head">
+					<div>
+						<div class="brand-name">Platform</div>
+						<div class="brand-sub">ops workspace</div>
+					</div>
+					<button class="mobile-menu-btn" onclick={() => (mobileNavOpen = false)} aria-label="Close navigation">
+						<X size={18} strokeWidth={1.9} />
+					</button>
+				</div>
+
+				<nav class="mobile-nav-list">
+					{#each navItems as item}
+						<a href={item.href} class:active={isActive(item.href)} onclick={() => (mobileNavOpen = false)}>
+							<item.icon size={16} strokeWidth={1.8} />
+							<span>{item.label}</span>
+						</a>
+					{/each}
+				</nav>
+			</aside>
+		{/if}
+
+		<main class="shell-content">
+			{@render children()}
+		</main>
+	</div>
+</div>
+
+<style>
+	:global(body) {
+		background:
+			radial-gradient(circle at top left, rgba(214, 120, 58, 0.08), transparent 22%),
+			radial-gradient(circle at 85% 10%, rgba(65, 91, 82, 0.12), transparent 20%),
+			linear-gradient(180deg, #f5efe6 0%, #efe6da 48%, #ede7de 100%);
+	}
+
+	.shell {
+		--shell-ink: #1e1812;
+		--shell-muted: #6b6256;
+		--shell-line: rgba(35, 26, 17, 0.11);
+		min-height: 100vh;
+		display: grid;
+		grid-template-columns: 270px minmax(0, 1fr);
+		position: relative;
+	}
+
+	.shell-glow {
+		position: fixed;
+		border-radius: 999px;
+		filter: blur(80px);
+		pointer-events: none;
+		opacity: 0.4;
+	}
+
+	.shell-glow-a {
+		width: 340px;
+		height: 340px;
+		top: -120px;
+		right: 12%;
+		background: rgba(179, 92, 50, 0.16);
+	}
+
+	.shell-glow-b {
+		width: 260px;
+		height: 260px;
+		bottom: 10%;
+		left: 4%;
+		background: rgba(68, 95, 86, 0.14);
+	}
+
+	.shell-rail {
+		position: sticky;
+		top: 0;
+		height: 100vh;
+		padding: 28px 20px 24px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		background: linear-gradient(180deg, rgba(250, 246, 239, 0.82), rgba(244, 237, 228, 0.66));
+		border-right: 1px solid var(--shell-line);
+		backdrop-filter: blur(20px);
+	}
+
+	.rail-top {
+		display: grid;
+		gap: 18px;
+	}
+
+	.brand,
+	.mobile-brand {
+		display: flex;
+		align-items: center;
+		gap: 14px;
+	}
+
+	.brand-mark {
+		width: 42px;
+		height: 42px;
+		display: grid;
+		place-items: center;
+		border-radius: 14px;
+		background: linear-gradient(135deg, #211912, #5d4c3f);
+		color: white;
+		font-size: 18px;
+		font-weight: 700;
+		letter-spacing: 0.06em;
+	}
+
+	.brand-name {
+		font-size: 14px;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--shell-ink);
+	}
+
+	.brand-sub,
+	.rail-user {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: var(--shell-muted);
+	}
+
+	.command-trigger {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 10px 12px;
+		border-radius: 999px;
+		border: 1px solid rgba(35, 26, 17, 0.09);
+		background: rgba(255, 255, 255, 0.56);
+		color: var(--shell-muted);
+		font-size: 13px;
+	}
+
+	.command-trigger kbd {
+		margin-left: auto;
+		font-family: var(--mono);
+		font-size: 11px;
+		color: var(--shell-muted);
+	}
+
+	.rail-nav {
+		display: grid;
+		gap: 8px;
+	}
+
+	.rail-nav a {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 12px 14px;
+		border-radius: 999px;
+		color: var(--shell-muted);
+		transition: background 160ms ease, color 160ms ease, transform 160ms ease;
+	}
+
+	.rail-nav a:hover,
+	.rail-nav a.active {
+		background: rgba(255, 255, 255, 0.62);
+		color: var(--shell-ink);
+		transform: translateX(3px);
+	}
+
+	.rail-bottom {
+		display: grid;
+		gap: 10px;
+		padding-top: 18px;
+		border-top: 1px solid var(--shell-line);
+	}
+
+	.rail-date {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+		color: var(--shell-muted);
+	}
+
+	.shell-main {
+		min-width: 0;
+	}
+
+	.mobile-bar {
+		display: none;
+		align-items: center;
+		justify-content: space-between;
+		padding: 16px;
+		border-bottom: 1px solid var(--shell-line);
+		background: rgba(250, 246, 239, 0.78);
+		backdrop-filter: blur(20px);
+		position: sticky;
+		top: 0;
+		z-index: 20;
+	}
+
+	.command-trigger.mobile {
+		width: 40px;
+		height: 40px;
+		justify-content: center;
+		padding: 0;
+	}
+
+	.mobile-menu-btn {
+		display: none;
+		width: 40px;
+		height: 40px;
+		border-radius: 12px;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid rgba(35, 26, 17, 0.09);
+		background: rgba(255, 255, 255, 0.56);
+		color: var(--shell-muted);
+	}
+
+	.mobile-nav-overlay {
+		position: fixed;
+		inset: 0;
+		border: 0;
+		background: rgba(17, 13, 10, 0.28);
+		backdrop-filter: blur(4px);
+		z-index: 39;
+	}
+
+	.mobile-nav-sheet {
+		position: fixed;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		width: min(320px, 86vw);
+		padding: 18px 16px;
+		background: linear-gradient(180deg, rgba(250, 246, 239, 0.96), rgba(244, 237, 228, 0.94));
+		border-right: 1px solid var(--shell-line);
+		backdrop-filter: blur(20px);
+		z-index: 40;
+		display: grid;
+		align-content: start;
+		gap: 18px;
+	}
+
+	.mobile-nav-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+	}
+
+	.mobile-nav-list {
+		display: grid;
+		gap: 8px;
+	}
+
+	.mobile-nav-list a {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 12px 14px;
+		border-radius: 16px;
+		color: var(--shell-muted);
+		background: transparent;
+		transition: background 160ms ease, color 160ms ease;
+	}
+
+	.mobile-nav-list a.active {
+		background: rgba(255, 255, 255, 0.62);
+		color: var(--shell-ink);
+	}
+
+	.shell-content {
+		min-width: 0;
+	}
+
+	@media (max-width: 900px) {
+		.shell {
+			grid-template-columns: 1fr;
+		}
+
+		.shell-rail {
+			display: none;
+		}
+
+		.mobile-bar {
+			display: flex;
+		}
+
+		.mobile-menu-btn {
+			display: inline-flex;
+		}
+	}
+</style>
diff --git a/frontend-v2/src/lib/components/shared/PageIntro.svelte b/frontend-v2/src/lib/components/shared/PageIntro.svelte
new file mode 100644
index 0000000..8e902f5
--- /dev/null
+++ b/frontend-v2/src/lib/components/shared/PageIntro.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	interface Props {
+		eyebrow: string;
+		title: string;
+		description?: string;
+		meta?: string;
+		actions?: any;
+	}
+
+	let { eyebrow, title, description = '', meta = '', actions }: Props = $props();
+</script>
+
+<section class="page-intro reveal">
+	<div class="copy">
+		<div class="eyebrow">{eyebrow}</div>
+		<h1>{title}</h1>
+		{#if description}
+			<p>{description}</p>
+		{/if}
+	</div>
+	<div class="side">
+		{#if meta}
+			<div class="meta">{meta}</div>
+		{/if}
+		{#if actions}
+			<div class="actions">{@render actions()}</div>
+		{/if}
+	</div>
+</section>
+
+<style>
+	.page-intro {
+		display: flex;
+		align-items: end;
+		justify-content: space-between;
+		gap: 18px;
+		margin-bottom: 20px;
+	}
+
+	.eyebrow,
+	.meta {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: #8b7b6a;
+	}
+
+	h1 {
+		margin: 8px 0 10px;
+		max-width: 10ch;
+		font-size: clamp(2.2rem, 4vw, 3.8rem);
+		line-height: 0.95;
+		letter-spacing: -0.05em;
+		color: #1e1812;
+	}
+
+	p {
+		max-width: 46rem;
+		margin: 0;
+		color: #6b6256;
+		line-height: 1.65;
+	}
+
+	.side {
+		display: grid;
+		gap: 10px;
+		justify-items: end;
+	}
+
+	.actions {
+		display: flex;
+		gap: 10px;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+	}
+
+	@media (max-width: 900px) {
+		.page-intro {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		.side {
+			justify-items: start;
+		}
+	}
+</style>
diff --git a/frontend-v2/src/lib/mockup/data.ts b/frontend-v2/src/lib/mockup/data.ts
new file mode 100644
index 0000000..e7b2d15
--- /dev/null
+++ b/frontend-v2/src/lib/mockup/data.ts
@@ -0,0 +1,243 @@
+export const mockupNav = [
+	{ href: '/mockup', label: 'Overview' },
+	{ href: '/mockup/tasks', label: 'Tasks' },
+	{ href: '/mockup/trips', label: 'Trips' },
+	{ href: '/mockup/fitness', label: 'Fitness' },
+	{ href: '/mockup/budget', label: 'Budget' },
+	{ href: '/mockup/inventory', label: 'Inventory' },
+	{ href: '/mockup/reader', label: 'Reader' },
+	{ href: '/mockup/media', label: 'Media' },
+	{ href: '/mockup/settings', label: 'Settings' }
+];
+
+export const routeMeta: Record<string, { eyebrow: string; title: string; description: string }> = {
+	'/mockup': {
+		eyebrow: 'Platform mockup',
+		title: 'A calmer command center for everyday planning',
+		description: 'A single workspace for routes, meals, household stock, and spending without the current app chrome.'
+	},
+	'/mockup/tasks': {
+		eyebrow: 'Tasks',
+		title: 'Structure work by urgency, not by clutter',
+		description: 'A focused task board with today, backlog, and project lanes that stay readable under load.'
+	},
+	'/mockup/trips': {
+		eyebrow: 'Trips',
+		title: 'Plan each move against time, place, and weather',
+		description: 'Routes, stays, notes, and movement live in one continuous travel surface.'
+	},
+	'/mockup/fitness': {
+		eyebrow: 'Fitness',
+		title: 'Treat nutrition like a live operating log',
+		description: 'Meals, macros, hydration, and recovery stay readable at a glance.'
+	},
+	'/mockup/budget': {
+		eyebrow: 'Budget',
+		title: 'Track spend in the context of real life',
+		description: 'Cash flow, upcoming obligations, and category drift are grouped into one working view.'
+	},
+	'/mockup/inventory': {
+		eyebrow: 'Inventory',
+		title: 'Run the house like a stocked studio',
+		description: 'Expiry, restock, condition, and room-level coverage are laid out as an operational board.'
+	},
+	'/mockup/reader': {
+		eyebrow: 'Reader',
+		title: 'Read feeds like an editor, not a queue manager',
+		description: 'A split reading surface that keeps source, story, and save actions in one quiet frame.'
+	},
+	'/mockup/media': {
+		eyebrow: 'Media',
+		title: 'Collect books and music in one browsing room',
+		description: 'Discovery, downloads, and library curation share one flexible media workspace.'
+	},
+	'/mockup/settings': {
+		eyebrow: 'Settings',
+		title: 'Make connections and preferences feel deliberate',
+		description: 'Account state, themes, service links, and goals are grouped into one clear system page.'
+	}
+};
+
+export const overview = {
+	status: [
+		{ label: 'Open tasks', value: '14', note: '3 due before noon' },
+		{ label: 'Trip horizon', value: '2 routes', note: 'Austin and Santa Fe' },
+		{ label: 'Daily nutrition', value: '1,640 kcal', note: '82% of target logged' }
+	],
+	agenda: [
+		{ time: '08:30', title: 'Finalize Austin lodging shortlist', tag: 'Trips' },
+		{ time: '12:15', title: 'Log lunch and sync protein target', tag: 'Fitness' },
+		{ time: '15:00', title: 'Review uncategorized hardware spend', tag: 'Budget' },
+		{ time: '18:45', title: 'Restock pantry oils and rice', tag: 'Inventory' }
+	],
+	signals: [
+		{ label: 'Runway', value: '$4,280', detail: 'free cash after fixed obligations' },
+		{ label: 'Pantry coverage', value: '12 days', detail: 'grains, oils, frozen basics' },
+		{ label: 'Miles mapped', value: '1,148', detail: 'current spring route cluster' }
+	]
+};
+
+export const tasks = {
+	columns: [
+		{
+			name: 'Today',
+			items: [
+				{ title: 'Lock Austin hotel before price jump', meta: 'Trips · 31h left' },
+				{ title: 'Log lunch and hydration block', meta: 'Fitness · after noon' },
+				{ title: 'Tag camera battery expense', meta: 'Budget · quick admin' }
+			]
+		},
+		{
+			name: 'Next',
+			items: [
+				{ title: 'Pack spring road kit', meta: 'Inventory · checklist' },
+				{ title: 'Clear starred longreads', meta: 'Reader · evening' },
+				{ title: 'Pull jazz vinyl shortlist', meta: 'Media · weekend' }
+			]
+		},
+		{
+			name: 'Later',
+			items: [
+				{ title: 'Review pantry reorder levels', meta: 'Inventory · monthly' },
+				{ title: 'Tune May travel reserve', meta: 'Budget · before May 1' }
+			]
+		}
+	],
+	projects: ['Platform', 'Road Trips', 'Household', 'Reading', 'Studio']
+};
+
+export const trips = {
+	itineraries: [
+		{
+			name: 'Austin sprint',
+			window: 'Apr 11 to Apr 14',
+			status: 'Lodging hold expires in 31h',
+			stops: ['Home', 'Austin', 'Hill Country'],
+			weather: 'Warm evenings, light rain on arrival'
+		},
+		{
+			name: 'Santa Fe reset',
+			window: 'May 02 to May 07',
+			status: 'Drive blocks drafted',
+			stops: ['Home', 'Amarillo', 'Santa Fe'],
+			weather: 'Dry air, cold nights'
+		}
+	],
+	notes: [
+		'Keep one gas stop buffer before Amarillo.',
+		'Bookmark ceramic studios near Canyon Road.',
+		'Shift hotel check-in later if rain slows departure.'
+	]
+};
+
+export const fitness = {
+	today: [
+		{ meal: 'Breakfast', detail: 'Greek yogurt, berries, oats', value: '420 kcal' },
+		{ meal: 'Lunch', detail: 'Chicken wrap, citrus greens', value: '560 kcal' },
+		{ meal: 'Snack', detail: 'Protein shake, banana', value: '280 kcal' }
+	],
+	macros: [
+		{ label: 'Protein', value: '132g', target: '160g' },
+		{ label: 'Carbs', value: '148g', target: '220g' },
+		{ label: 'Fat', value: '46g', target: '70g' }
+	],
+	recovery: ['6.8h sleep', '3.1L water', 'Rest day with mobility block']
+};
+
+export const budget = {
+	streams: [
+		{ name: 'Home and studio', amount: '$1,240', note: 'rent, tools, utilities' },
+		{ name: 'Travel reserve', amount: '$680', note: 'fuel, stay holds, food buffer' },
+		{ name: 'Household flow', amount: '$420', note: 'groceries and restock cycle' }
+	],
+	watchlist: [
+		'Camera battery order still uncategorized',
+		'Flights remain off because both active trips are drive-first',
+		'April software spend drops after annual renewals clear'
+	]
+};
+
+export const inventory = {
+	rooms: [
+		{ name: 'Kitchen core', coverage: 'Stable', note: 'Grains and oils are healthy; spices need refill' },
+		{ name: 'Travel kit', coverage: 'Light', note: 'Restock charger pouch and toiletry minis' },
+		{ name: 'Studio shelf', coverage: 'Watch', note: 'Paper stock and tape are below preferred floor' }
+	],
+	restock: [
+		'Jasmine rice',
+		'Olive oil',
+		'AA batteries',
+		'Packing cubes',
+		'Gaffer tape'
+	]
+};
+
+export const reader = {
+	nav: [
+		{ label: 'Today', count: 38 },
+		{ label: 'Starred', count: 12 },
+		{ label: 'History', count: 164 }
+	],
+	feeds: [
+		{ name: 'Design Systems', count: 9 },
+		{ name: 'Travel Notes', count: 7 },
+		{ name: 'Personal Knowledge', count: 6 },
+		{ name: 'Tech Briefing', count: 16 }
+	],
+	articles: [
+		{
+			title: 'Why small software feels more trustworthy',
+			source: 'Dense Discovery',
+			time: '18 min',
+			excerpt: 'A better reading surface should help you keep context, make a decision, and move on without fighting the interface.'
+		},
+		{
+			title: 'The slow pleasures of regional train stations',
+			source: 'Field Notes',
+			time: '9 min',
+			excerpt: 'Travel planning improves when movement details sit beside atmosphere, weather, and timing rather than in separate tools.'
+		},
+		{
+			title: 'What to keep in a personal media archive',
+			source: 'Studio Ledger',
+			time: '11 min',
+			excerpt: 'Collections feel alive when acquisition, annotation, and retrieval share the same visual language.'
+		}
+	]
+};
+
+export const media = {
+	tabs: ['Books', 'Music', 'Library'],
+	books: [
+		{ title: 'The Rings of Saturn', detail: 'Downloaded · EPUB · 294 pages' },
+		{ title: 'A Swim in a Pond in the Rain', detail: 'Queued · EPUB · craft reading' }
+	],
+	music: [
+		{ title: 'Bill Evans Trio', detail: 'Jazz piano · 7 saved recordings' },
+		{ title: 'Khruangbin radio', detail: 'Travel mix · offline ready' }
+	],
+	library: [
+		{ title: 'Architecture shelf', detail: '42 items · strong notes density' },
+		{ title: 'Road reading', detail: '18 items · light, portable, re-readable' }
+	]
+};
+
+export const settings = {
+	account: [
+		{ label: 'Display name', value: 'Yusi' },
+		{ label: 'Theme', value: 'Sand / slate concept' },
+		{ label: 'Session mode', value: 'Connected to platform shell' }
+	],
+	connections: [
+		{ name: 'Trips', state: 'Connected' },
+		{ name: 'Fitness', state: 'Connected' },
+		{ name: 'Reader', state: 'Connected' },
+		{ name: 'Media', state: 'Needs review' }
+	],
+	goals: [
+		{ label: 'Calories', value: '2,000' },
+		{ label: 'Protein', value: '160g' },
+		{ label: 'Carbs', value: '220g' },
+		{ label: 'Fat', value: '70g' }
+	]
+};
diff --git a/frontend-v2/src/lib/pages/dashboard/AtelierDashboardPage.svelte b/frontend-v2/src/lib/pages/dashboard/AtelierDashboardPage.svelte
new file mode 100644
index 0000000..496c126
--- /dev/null
+++ b/frontend-v2/src/lib/pages/dashboard/AtelierDashboardPage.svelte
@@ -0,0 +1,798 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/state';
+  import TaskSlideOver from '$lib/components/dashboard/TaskSlideOver.svelte';
+
+  interface QuickTask {
+    id: string;
+    title: string;
+    startDate?: string;
+    dueDate?: string;
+    isAllDay?: boolean;
+    projectId: string;
+    _projectName: string;
+    _projectId: string;
+  }
+
+  const userName = $derived((page as any).data?.user?.display_name || 'there');
+
+  let loading = $state(true);
+  let taskPanelOpen = $state(false);
+  let taskToday = $state<QuickTask[]>([]);
+  let taskOverdue = $state<QuickTask[]>([]);
+  let inventoryIssueCount = $state(0);
+  let inventoryReviewCount = $state(0);
+  let budgetUncatCount = $state(0);
+  let budgetSpending = $state(0);
+  let budgetIncome = $state(0);
+  let readerUnread = $state(0);
+  let readerStarred = $state(0);
+  let fitnessCalLogged = $state(0);
+  let fitnessCalGoal = $state(2000);
+  let fitnessProtein = $state(0);
+  let fitnessProteinGoal = $state(150);
+  let fitnessCarbs = $state(0);
+  let fitnessCarbsGoal = $state(200);
+  let fitnessFat = $state(0);
+  let fitnessFatGoal = $state(65);
+
+  function getGreeting(): string {
+    const h = new Date().getHours();
+    if (h < 12) return 'Good morning';
+    if (h < 17) return 'Good afternoon';
+    return 'Good evening';
+  }
+
+  function getDateString(): string {
+    return new Date().toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric'
+    });
+  }
+
+  function formatMoney(value: number): string {
+    return '$' + Math.abs(value || 0).toLocaleString('en-US');
+  }
+
+  function formatSignedMoney(value: number): string {
+    const abs = '$' + Math.abs(value || 0).toLocaleString('en-US');
+    return value < 0 ? `-${abs}` : abs;
+  }
+
+  function formatTaskTime(t: QuickTask): string {
+    const d = t.startDate || t.dueDate;
+    if (!d || t.isAllDay) return '';
+    try {
+      const date = new Date(d);
+      const h = date.getHours();
+      const m = date.getMinutes();
+      if (h === 0 && m === 0) return '';
+      const ampm = h >= 12 ? 'PM' : 'AM';
+      const hour = h % 12 || 12;
+      return m > 0 ? `${hour}:${String(m).padStart(2, '0')} ${ampm}` : `${hour} ${ampm}`;
+    } catch {
+      return '';
+    }
+  }
+
+  const taskCount = $derived(taskToday.length + taskOverdue.length);
+  const fitPercent = $derived(fitnessCalGoal > 0 ? Math.min(100, Math.round((fitnessCalLogged / fitnessCalGoal) * 100)) : 0);
+  const fitnessRemaining = $derived(Math.max(0, fitnessCalGoal - fitnessCalLogged));
+  const nextTask = $derived(taskOverdue[0] || taskToday[0] || null);
+  const spendMagnitude = $derived(Math.abs(budgetSpending || 0));
+  const netCash = $derived(budgetIncome - spendMagnitude);
+  const spendVsIncomePercent = $derived(
+    budgetIncome > 0 ? Math.min(100, Math.round((spendMagnitude / budgetIncome) * 100)) : 0
+  );
+
+  const topSignals = $derived([
+    {
+      label: 'Open tasks',
+      value: String(taskCount),
+      note: taskOverdue.length > 0 ? `${taskOverdue.length} overdue` : taskToday[0] ? `${taskToday.length} scheduled today` : 'Nothing urgent'
+    },
+    {
+      label: 'Inventory pressure',
+      value: `${inventoryIssueCount + inventoryReviewCount}`,
+      note: `${inventoryIssueCount} issues · ${inventoryReviewCount} review`
+    },
+    {
+      label: 'Budget open',
+      value: `${budgetUncatCount}`,
+      note: `${formatMoney(budgetSpending)} spent this month`
+    },
+    {
+      label: 'Reader queue',
+      value: `${readerUnread}`,
+      note: `${readerStarred} starred reads`
+    }
+  ]);
+
+  async function loadDashboard() {
+    loading = true;
+    const now = new Date();
+    const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+
+    try {
+      const [tasksRes, invRes, budgetRes, uncatRes, fitTotalsRes, fitGoalsRes, readerCountersRes, readerStarredRes] = await Promise.all([
+        fetch('/api/tasks/today', { credentials: 'include' }),
+        fetch('/api/inventory/summary', { credentials: 'include' }),
+        fetch('/api/budget/summary', { credentials: 'include' }),
+        fetch('/api/budget/uncategorized-count', { credentials: 'include' }),
+        fetch(`/api/fitness/entries/totals?date=${today}`, { credentials: 'include' }),
+        fetch(`/api/fitness/goals/for-date?date=${today}`, { credentials: 'include' }),
+        fetch('/api/reader/feeds/counters', { credentials: 'include' }),
+        fetch('/api/reader/entries?starred=true&limit=1', { credentials: 'include' })
+      ]);
+
+      if (tasksRes.ok) {
+        const t = await tasksRes.json();
+        taskToday = t.today || [];
+        taskOverdue = t.overdue || [];
+      }
+
+      if (invRes.ok) {
+        const data = await invRes.json();
+        inventoryIssueCount = data.issueCount || 0;
+        inventoryReviewCount = data.reviewCount || 0;
+      }
+
+      if (budgetRes.ok) {
+        const data = await budgetRes.json();
+        budgetSpending = data.spendingDollars || 0;
+        budgetIncome = data.incomeDollars || 0;
+      }
+
+      if (uncatRes.ok) {
+        const data = await uncatRes.json();
+        budgetUncatCount = data.count || 0;
+      }
+
+      if (fitTotalsRes.ok) {
+        const data = await fitTotalsRes.json();
+        fitnessCalLogged = Math.round(data.total_calories || 0);
+        fitnessProtein = Math.round(data.total_protein || 0);
+        fitnessCarbs = Math.round(data.total_carbs || 0);
+        fitnessFat = Math.round(data.total_fat || 0);
+      }
+
+      if (fitGoalsRes.ok) {
+        const data = await fitGoalsRes.json();
+        fitnessCalGoal = data.calories || 2000;
+        fitnessProteinGoal = data.protein || 150;
+        fitnessCarbsGoal = data.carbs || 200;
+        fitnessFatGoal = data.fat || 65;
+      }
+
+      if (readerCountersRes.ok) {
+        const data = await readerCountersRes.json();
+        readerUnread = Object.values(data.unreads || {}).reduce((sum: number, value: any) => sum + (value as number), 0);
+      }
+
+      if (readerStarredRes.ok) {
+        const data = await readerStarredRes.json();
+        readerStarred = data.total || 0;
+      }
+    } catch {
+      // Keep partial dashboard rendering if one source fails.
+    }
+
+    loading = false;
+  }
+
+  onMount(loadDashboard);
+</script>
+
+<div class="dashboard-page">
+  <TaskSlideOver bind:open={taskPanelOpen} onclose={() => { taskPanelOpen = false; loadDashboard(); }} />
+
+  <div class="dashboard-grid">
+    <section class="hero-panel panel intro-sequence">
+      <div class="hero-copy">
+        <div class="panel-kicker">Today at a glance</div>
+        <h1>{getGreeting()}, {userName}.</h1>
+        <p>Scan the work that actually needs attention, then drop into the right app without bouncing through repeated modules.</p>
+      </div>
+
+      <div class="hero-signals">
+        {#each topSignals as item, index}
+          <div class="signal-line reveal-item" style={`--delay:${index * 80}ms`}>
+            <div>
+              <div class="signal-label">{item.label}</div>
+              <div class="signal-note">{item.note}</div>
+            </div>
+            <div class="signal-value">{loading ? '…' : item.value}</div>
+          </div>
+        {/each}
+      </div>
+    </section>
+
+    <section class="agenda-panel panel intro-sequence">
+      <div class="panel-head">
+        <div>
+          <div class="panel-kicker">Daily sequence</div>
+          <h2>Agenda</h2>
+        </div>
+        <button class="inline-link" onclick={() => taskPanelOpen = true}>Open tasks</button>
+      </div>
+
+      <div class="agenda-list">
+        {#if loading}
+          {#each [1, 2, 3, 4] as _}
+            <div class="agenda-row skeleton-row"></div>
+          {/each}
+        {:else if taskCount === 0}
+          <div class="agenda-empty">No tasks are due today.</div>
+        {:else}
+          {#each [...taskOverdue.slice(0, 2), ...taskToday.slice(0, 3)].slice(0, 4) as task}
+            <button class="agenda-row" onclick={() => taskPanelOpen = true}>
+              <div class="agenda-time">{taskOverdue.find((t) => t.id === task.id) ? 'Overdue' : formatTaskTime(task) || 'Today'}</div>
+              <div class="agenda-main">
+                <div class="agenda-title">{task.title}</div>
+                <div class="agenda-tag">{task._projectName}</div>
+              </div>
+            </button>
+          {/each}
+        {/if}
+      </div>
+    </section>
+
+    <section class="main-column intro-sequence">
+      <div class="panel budget-panel">
+        <div class="panel-head">
+          <div>
+            <div class="panel-kicker">Budget state</div>
+            <h2>Cash movement</h2>
+          </div>
+          <a href="/budget" class="inline-link">Open budget</a>
+        </div>
+
+        <div class="budget-figure">{formatMoney(spendMagnitude)}</div>
+        <div class="budget-copy">Spent this month with {budgetUncatCount} uncategorized transactions still open for review.</div>
+
+        <div class="budget-meter">
+          <div class="budget-meter-top">
+            <span>Spend vs income</span>
+            <strong>{spendVsIncomePercent}%</strong>
+          </div>
+          <div class="budget-bar"><span style={`width:${spendVsIncomePercent}%`}></span></div>
+        </div>
+
+        <div class="budget-breakdown">
+          <div>
+            <div class="mini-label">Income</div>
+            <div class="mini-value">{formatMoney(budgetIncome)}</div>
+          </div>
+          <div>
+            <div class="mini-label">Uncategorized</div>
+            <div class="mini-value">{budgetUncatCount}</div>
+          </div>
+          <div>
+            <div class="mini-label">Net</div>
+            <div class="mini-value">{formatSignedMoney(netCash)}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="side-column intro-sequence">
+      <div class="panel section-panel">
+        <div class="panel-head">
+          <div>
+            <div class="panel-kicker">Calorie target</div>
+            <h2>Calories</h2>
+          </div>
+          <a href="/fitness" class="inline-link">Open fitness</a>
+        </div>
+
+        <div class="nutrition-summary calories-only">
+          <div class="calorie-block">
+            <div class="calorie-head">
+              <strong>{fitnessCalLogged.toLocaleString()} / {fitnessCalGoal.toLocaleString()}</strong>
+              <span>{fitnessRemaining.toLocaleString()} left</span>
+            </div>
+            <div class="macro-bar calories"><span style={`width:${fitPercent}%`}></span></div>
+            <div class="calorie-note">{fitPercent}% of target logged today</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>
+
+<style>
+  .dashboard-page {
+    min-height: calc(100vh - 56px);
+  }
+
+  .dashboard-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.92fr);
+    gap: 18px;
+    padding: 24px 24px 120px;
+    max-width: 1460px;
+    margin: 0 auto;
+  }
+
+  .panel {
+    background: rgba(255, 252, 248, 0.82);
+    border: 1px solid rgba(35, 26, 17, 0.12);
+    backdrop-filter: blur(14px);
+    box-shadow: 0 18px 40px rgba(35, 24, 15, 0.05);
+  }
+
+  .hero-panel,
+  .agenda-panel,
+  .section-panel,
+  .budget-panel {
+    border-radius: 28px;
+  }
+
+  .hero-panel {
+    padding: 24px;
+    min-height: 330px;
+    display: grid;
+    align-content: space-between;
+    background:
+      linear-gradient(145deg, rgba(255, 250, 244, 0.9), rgba(246, 233, 220, 0.58)),
+      radial-gradient(circle at 86% 14%, rgba(179, 92, 50, 0.18), transparent 28%);
+  }
+
+  .hero-copy h1 {
+    margin: 8px 0 12px;
+    max-width: 10ch;
+    font-size: clamp(2.25rem, 3.9vw, 3.8rem);
+    line-height: 0.92;
+    letter-spacing: -0.07em;
+    color: #1e1812;
+  }
+
+  .hero-copy p,
+  .signal-note,
+  .budget-copy,
+  .focus-meta {
+    color: #5c5247;
+    line-height: 1.6;
+  }
+
+  .panel-kicker,
+  .signal-label,
+  .strip-label,
+  .mini-label,
+  .agenda-tag {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #7b6d5f;
+    font-weight: 700;
+  }
+
+  .hero-signals {
+    display: grid;
+    gap: 14px;
+  }
+
+  .signal-line {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: 14px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(35, 26, 17, 0.12);
+  }
+
+  .signal-value {
+    font-size: clamp(1.7rem, 3vw, 2.45rem);
+    font-weight: 600;
+    letter-spacing: -0.05em;
+    color: #1e1812;
+  }
+
+  .agenda-panel,
+  .section-panel,
+  .budget-panel {
+    padding: 20px 22px;
+  }
+
+  .panel-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  .panel-head h2 {
+    margin: 4px 0 0;
+    font-size: 1.45rem;
+    font-weight: 650;
+    line-height: 1;
+    letter-spacing: -0.05em;
+    color: #1e1812;
+  }
+
+  .inline-link,
+  .focus-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: none;
+    padding: 0;
+    font-size: 13px;
+    font-weight: 600;
+    color: #2f6a52;
+    cursor: pointer;
+    font-family: var(--font);
+  }
+
+  .agenda-list {
+    display: grid;
+    gap: 14px;
+  }
+
+  .agenda-row {
+    display: grid;
+    grid-template-columns: 82px minmax(0, 1fr);
+    gap: 12px;
+    align-items: start;
+    text-align: left;
+    padding-top: 12px;
+    border-top: 1px solid rgba(35, 26, 17, 0.11);
+    background: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+    cursor: pointer;
+    font-family: var(--font);
+    transition: color 160ms ease, transform 160ms ease;
+  }
+
+  .agenda-row:hover {
+    transform: translateX(2px);
+  }
+
+  .agenda-time {
+    font-size: 1rem;
+    color: #4e443a;
+    letter-spacing: -0.03em;
+  }
+
+  .agenda-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    letter-spacing: -0.04em;
+    color: #1e1812;
+  }
+
+  .agenda-main {
+    display: grid;
+    gap: 4px;
+  }
+
+  .agenda-empty {
+    padding: 18px 0 8px;
+    color: #6b6256;
+  }
+
+  .skeleton-row {
+    min-height: 48px;
+    opacity: 0.4;
+  }
+
+  .strip-row {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  .strip-block {
+    padding: 18px 18px 20px;
+    border-radius: 22px;
+    background: rgba(255, 252, 248, 0.66);
+    border: 1px solid rgba(35, 26, 17, 0.1);
+    backdrop-filter: blur(14px);
+    text-decoration: none;
+    color: inherit;
+    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
+  }
+
+  .strip-block:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 16px 34px rgba(35, 24, 15, 0.08);
+  }
+
+  .strip-top {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    align-items: center;
+  }
+
+  .strip-meta,
+  .strip-detail {
+    color: #6b6256;
+    font-size: 0.92rem;
+  }
+
+  .strip-title {
+    margin-top: 10px;
+    font-size: 1.55rem;
+    line-height: 1;
+    letter-spacing: -0.05em;
+    color: #1e1812;
+  }
+
+  .strip-detail {
+    margin-top: 6px;
+    line-height: 1.5;
+  }
+
+  .strip-bar,
+  .lane-meter,
+  .macro-bar {
+    height: 6px;
+    background: rgba(35, 26, 17, 0.08);
+    border-radius: 999px;
+    overflow: hidden;
+  }
+
+  .strip-bar {
+    margin-top: 14px;
+  }
+
+  .strip-fill,
+  .lane-meter span,
+  .macro-bar span {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, #346c56 0%, #4d8f73 100%);
+    transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .main-column {
+    display: grid;
+    gap: 18px;
+  }
+
+  .lane-title,
+  .focus-title {
+    font-size: 1.08rem;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #1e1812;
+  }
+
+  .lane-value,
+  .mini-value {
+    font-size: 1rem;
+    font-family: var(--mono);
+    color: #1e1812;
+  }
+
+  .budget-panel {
+    background:
+      linear-gradient(145deg, rgba(255, 251, 246, 0.96), rgba(241, 247, 243, 0.82)),
+      radial-gradient(circle at 88% 14%, rgba(47, 106, 82, 0.1), transparent 28%);
+  }
+
+  .budget-figure {
+    font-size: clamp(2.2rem, 4vw, 3.35rem);
+    line-height: 0.92;
+    letter-spacing: -0.07em;
+    color: #1e1812;
+    margin-bottom: 8px;
+  }
+
+  .budget-breakdown {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 14px;
+    margin-top: 18px;
+    padding-top: 14px;
+    border-top: 1px solid rgba(35, 26, 17, 0.09);
+  }
+
+  .budget-meter {
+    margin-top: 20px;
+    display: grid;
+    gap: 8px;
+  }
+
+  .budget-meter-top {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    align-items: center;
+    color: #6b6256;
+    font-size: 0.9rem;
+  }
+
+  .budget-meter-top strong {
+    color: #1e1812;
+    font-family: var(--mono);
+    font-weight: 600;
+  }
+
+  .budget-bar {
+    height: 10px;
+    border-radius: 999px;
+    background: rgba(35, 26, 17, 0.08);
+    overflow: hidden;
+  }
+
+  .budget-bar span {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, #2f6a52 0%, #7db592 100%);
+    transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .side-column {
+    display: grid;
+    gap: 18px;
+    align-content: start;
+  }
+
+  .nutrition-summary {
+    display: grid;
+    gap: 14px;
+  }
+
+  .calories-only {
+    min-height: 140px;
+    align-content: start;
+  }
+
+  .calorie-block {
+    display: grid;
+    gap: 10px;
+  }
+
+  .calorie-head {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    align-items: center;
+  }
+
+  .calorie-head strong {
+    color: #1e1812;
+    font-size: 1.18rem;
+    font-family: var(--mono);
+    font-weight: 600;
+  }
+
+  .calorie-head span,
+  .calorie-note {
+    color: #6b6256;
+    font-size: 0.92rem;
+  }
+
+  .macro-bar.calories span {
+    background: linear-gradient(90deg, #346c56 0%, #4d8f73 100%);
+  }
+
+  .macro-rows {
+    display: grid;
+    gap: 14px;
+  }
+
+  .macro-row {
+    display: grid;
+    gap: 6px;
+  }
+
+  .macro-top {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    align-items: center;
+    color: #6b6256;
+    font-size: 0.92rem;
+  }
+
+  .macro-top strong {
+    color: #1e1812;
+    font-family: var(--mono);
+    font-weight: 600;
+  }
+
+  .macro-bar.carbs span {
+    background: linear-gradient(90deg, #c88932 0%, #dca95e 100%);
+  }
+
+  .macro-bar.fat span {
+    background: linear-gradient(90deg, #8f5d42 0%, #b67c5b 100%);
+  }
+
+  .intro-sequence {
+    animation: riseIn 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
+  .intro-sequence:nth-child(1) { animation-delay: 20ms; }
+  .intro-sequence:nth-child(2) { animation-delay: 90ms; }
+  .intro-sequence:nth-child(3) { animation-delay: 140ms; }
+  .intro-sequence:nth-child(4) { animation-delay: 190ms; }
+  .intro-sequence:nth-child(5) { animation-delay: 230ms; }
+
+  .reveal-item {
+    opacity: 0;
+    animation: revealLine 560ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    animation-delay: var(--delay, 0ms);
+  }
+
+  @keyframes riseIn {
+    from {
+      opacity: 0;
+      transform: translateY(18px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes revealLine {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (max-width: 1100px) {
+    .dashboard-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .strip-row {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 768px) {
+    .dashboard-grid {
+      padding: 20px 16px 120px;
+      gap: 14px;
+    }
+
+    .hero-panel,
+    .agenda-panel,
+    .section-panel,
+    .budget-panel {
+      border-radius: 24px;
+      padding: 18px;
+    }
+
+    .hero-copy h1 {
+      font-size: 2.6rem;
+    }
+
+    .strip-row,
+    .budget-breakdown {
+      grid-template-columns: 1fr;
+    }
+
+    .lane-row {
+      grid-template-columns: 1fr;
+    }
+
+    .agenda-row {
+      grid-template-columns: 1fr;
+      gap: 4px;
+    }
+
+    .panel-head {
+      align-items: start;
+      flex-direction: column;
+    }
+  }
+</style>
diff --git a/frontend-v2/src/lib/pages/dashboard/LegacyDashboardPage.svelte b/frontend-v2/src/lib/pages/dashboard/LegacyDashboardPage.svelte
new file mode 100644
index 0000000..cc24b59
--- /dev/null
+++ b/frontend-v2/src/lib/pages/dashboard/LegacyDashboardPage.svelte
@@ -0,0 +1,444 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+	import BudgetModule from '$lib/components/dashboard/BudgetModule.svelte';
+	import FitnessModule from '$lib/components/dashboard/FitnessModule.svelte';
+	import IssuesModule from '$lib/components/dashboard/IssuesModule.svelte';
+	import TaskSlideOver from '$lib/components/dashboard/TaskSlideOver.svelte';
+
+	interface QuickTask {
+		id: string;
+		title: string;
+		startDate?: string;
+		dueDate?: string;
+		isAllDay?: boolean;
+		_projectName: string;
+		projectId: string;
+		_projectId: string;
+	}
+
+	const userName = $derived((page as any).data?.user?.display_name || 'there');
+
+	let inventoryIssueCount = $state(0);
+	let inventoryReviewCount = $state(0);
+	let budgetUncatCount = $state(0);
+	let budgetSpending = $state('');
+	let budgetIncome = $state('');
+	let fitnessCalRemaining = $state(0);
+	let fitnessCalLogged = $state(0);
+	let fitnessCalGoal = $state(2000);
+	let fitnessProtein = $state(0);
+	let fitnessCarbs = $state(0);
+	let fitnessProteinGoal = $state(150);
+	let fitnessCarbsGoal = $state(200);
+	let fitnessFat = $state(0);
+	let fitnessFatGoal = $state(65);
+	let headerTasks = $state<QuickTask[]>([]);
+	let headerOverdue = $state(0);
+	let headerTotalCount = $state(0);
+	let taskPanelOpen = $state(false);
+
+	function getGreeting(): string {
+		const h = new Date().getHours();
+		if (h < 12) return 'Good morning';
+		if (h < 17) return 'Good afternoon';
+		return 'Good evening';
+	}
+
+	function getDateString(): string {
+		return new Date().toLocaleDateString('en-US', {
+			weekday: 'long', month: 'long', day: 'numeric'
+		});
+	}
+
+	function formatTaskTime(t: QuickTask): string {
+		const d = t.startDate || t.dueDate;
+		if (!d || t.isAllDay) return '';
+		try {
+			const date = new Date(d);
+			const h = date.getHours(), m = date.getMinutes();
+			if (h === 0 && m === 0) return '';
+			const ampm = h >= 12 ? 'PM' : 'AM';
+			const hour = h % 12 || 12;
+			return m > 0 ? `${hour}:${String(m).padStart(2, '0')} ${ampm}` : `${hour} ${ampm}`;
+		} catch { return ''; }
+	}
+
+	const fitPercent = $derived(fitnessCalGoal > 0 ? Math.min(100, Math.round((fitnessCalLogged / fitnessCalGoal) * 100)) : 0);
+
+	async function loadTasks() {
+		try {
+			const res = await fetch('/api/tasks/today', { credentials: 'include' });
+			if (res.ok) {
+				const t = await res.json();
+				headerOverdue = t.overdueCount || 0;
+				const today = t.today || [];
+				const overdue = t.overdue || [];
+				headerTotalCount = today.length + overdue.length;
+				headerTasks = [...overdue, ...today].slice(0, 1);
+			}
+		} catch { /* silent */ }
+	}
+
+	onMount(async () => {
+		const n = new Date();
+		const today = `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, '0')}-${String(n.getDate()).padStart(2, '0')}`;
+
+		try {
+			const [invRes, budgetRes, uncatRes, fitTotalsRes, fitGoalsRes] = await Promise.all([
+				fetch('/api/inventory/summary', { credentials: 'include' }),
+				fetch('/api/budget/summary', { credentials: 'include' }),
+				fetch('/api/budget/uncategorized-count', { credentials: 'include' }),
+				fetch(`/api/fitness/entries/totals?date=${today}`, { credentials: 'include' }),
+				fetch(`/api/fitness/goals/for-date?date=${today}`, { credentials: 'include' }),
+			]);
+			if (invRes.ok) {
+				const data = await invRes.json();
+				inventoryIssueCount = data.issueCount || 0;
+				inventoryReviewCount = data.reviewCount || 0;
+			}
+			if (budgetRes.ok) {
+				const data = await budgetRes.json();
+				budgetSpending = '$' + Math.abs(data.spendingDollars || 0).toLocaleString('en-US');
+				budgetIncome = '$' + Math.abs(data.incomeDollars || 0).toLocaleString('en-US');
+			}
+			if (uncatRes.ok) {
+				const data = await uncatRes.json();
+				budgetUncatCount = data.count || 0;
+			}
+			if (fitTotalsRes.ok) {
+				const t = await fitTotalsRes.json();
+				fitnessCalLogged = Math.round(t.total_calories || 0);
+				fitnessProtein = Math.round(t.total_protein || 0);
+				fitnessCarbs = Math.round(t.total_carbs || 0);
+				fitnessFat = Math.round(t.total_fat || 0);
+			}
+			if (fitGoalsRes.ok) {
+				const g = await fitGoalsRes.json();
+				fitnessCalGoal = g.calories || 2000;
+				fitnessProteinGoal = g.protein || 150;
+				fitnessCarbsGoal = g.carbs || 200;
+				fitnessFatGoal = g.fat || 65;
+				fitnessCalRemaining = Math.max(0, fitnessCalGoal - fitnessCalLogged);
+			}
+		} catch { /* silent */ }
+
+		await loadTasks();
+	});
+</script>
+
+<div class="page">
+	<div class="db-surface">
+
+		<!-- ═══ HEADER ═══ -->
+		<div class="db-header">
+			<div>
+				<div class="db-date">{getDateString()}</div>
+				<h1 class="db-greeting">{getGreeting()}, <strong>{userName}</strong></h1>
+			</div>
+			<button class="task-pill" onclick={() => taskPanelOpen = true}>
+				<span class="tp-dot" class:tp-overdue={headerOverdue > 0}></span>
+				<span class="tp-text"><b>{headerTotalCount} task{headerTotalCount !== 1 ? 's' : ''}</b>
+					{#if headerTasks[0]} &middot; Next: {headerTasks[0].title}{/if}
+				</span>
+				<svg class="tp-arrow" width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M5 3l3.5 3.5L5 10"/></svg>
+			</button>
+		</div>
+
+		<TaskSlideOver bind:open={taskPanelOpen} onclose={() => { taskPanelOpen = false; loadTasks(); }} />
+
+		<!-- ═══ BENTO ROW 1: Budget (2fr) + Inventory (1fr) ═══ -->
+		<div class="bento stagger">
+			<a href="/budget" class="bc bc-emerald">
+				<div class="bc-top">
+					<span class="bc-label">Budget</span>
+					<div class="bc-icon emerald">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
+					</div>
+				</div>
+				<div class="bc-value">{budgetUncatCount}</div>
+				<div class="bc-desc">uncategorized transactions<br><strong>{budgetSpending} spent</strong> &middot; {budgetIncome} income</div>
+				<div class="bc-action">Review <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg></div>
+			</a>
+
+			<a href="/inventory" class="bc bc-rose">
+				<div class="bc-top">
+					<span class="bc-label">Inventory</span>
+					<div class="bc-icon rose">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
+					</div>
+				</div>
+				<div class="bc-value-sm">{inventoryIssueCount} issues</div>
+				<div class="bc-desc">{inventoryReviewCount} needs review<br>{inventoryIssueCount + inventoryReviewCount} items need attention</div>
+				<div class="bc-action">View <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg></div>
+			</a>
+		</div>
+
+		<!-- ═══ BENTO ROW 2: Calories (1fr) + Fitness detail (1fr) ═══ -->
+		<div class="bento-row2 stagger">
+			<a href="/fitness" class="bc bc-emerald">
+				<div class="bc-top">
+					<span class="bc-label">Calories</span>
+					<div class="bc-icon emerald">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+					</div>
+				</div>
+				<div class="bc-value">{fitnessCalRemaining.toLocaleString()}</div>
+				<div class="bc-desc">remaining today<br><strong>{fitnessCalLogged.toLocaleString()} logged</strong> &middot; {fitnessProtein}g protein &middot; {fitnessCarbs}g carbs</div>
+				<div class="bc-action">Log food <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg></div>
+			</a>
+
+			<div class="bc">
+				<div class="fit-header">
+					<div class="fit-av">Y</div>
+					<div>
+						<div class="fit-name">{userName}</div>
+						<div class="fit-sub">{fitnessCalLogged.toLocaleString()} cal &middot; {fitnessCalRemaining.toLocaleString()} left</div>
+					</div>
+				</div>
+				<div class="fit-bar"><div class="fit-fill" style="width: {fitPercent}%"></div></div>
+				<div class="fit-macros">
+					<div><span class="fm-v">{fitnessProtein}<span class="fm-u">/{fitnessProteinGoal}g</span></span><div class="fm-l">protein</div></div>
+					<div><span class="fm-v">{fitnessCarbs}<span class="fm-u">/{fitnessCarbsGoal}g</span></span><div class="fm-l">carbs</div></div>
+					<div><span class="fm-v">{fitnessFat}<span class="fm-u">/{fitnessFatGoal}g</span></span><div class="fm-l">fat</div></div>
+				</div>
+			</div>
+		</div>
+
+		<!-- ═══ MODULES: Budget detail (7fr) + Issues (3fr) ═══ -->
+		<div class="db-modules">
+			<BudgetModule />
+			<IssuesModule />
+		</div>
+
+	</div>
+</div>
+
+<style>
+	/* ═══ Dashboard — matches React mockup exactly ═══ */
+
+	.db-surface {
+		max-width: 1280px;
+		width: 100%;
+		margin: 0 auto;
+		padding: 0 24px;
+	}
+
+	/* ── Header ── */
+	.db-header {
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		gap: 32px;
+		margin-bottom: 28px;
+	}
+
+	.db-date {
+		font-size: 11px;
+		font-weight: 600;
+		color: var(--accent);
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		margin-bottom: 4px;
+	}
+
+	.db-greeting {
+		font-size: 28px;
+		font-weight: 400;
+		letter-spacing: -0.03em;
+		line-height: 1.1;
+		color: var(--text-1);
+		margin: 0;
+	}
+	.db-greeting strong { font-weight: 800; }
+
+	/* ── Task pill ── */
+	.task-pill {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 8px 14px 8px 10px;
+		border-radius: 999px;
+		background: var(--card);
+		border: 1px solid var(--border);
+		box-shadow: var(--shadow-sm);
+		cursor: pointer;
+		flex-shrink: 0;
+		white-space: nowrap;
+		transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
+		font-family: var(--font);
+	}
+	.task-pill:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
+	.task-pill:active { transform: scale(0.97); }
+
+	.tp-dot {
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		background: var(--accent);
+		flex-shrink: 0;
+		animation: breathe 2.5s ease-in-out infinite;
+	}
+	.tp-dot.tp-overdue { background: var(--error); }
+
+	@keyframes breathe {
+		0%, 100% { opacity: 1; transform: scale(1); }
+		50% { opacity: 0.4; transform: scale(0.85); }
+	}
+
+	.tp-text { font-size: 12px; font-weight: 500; color: var(--text-3); }
+	.tp-text b { color: var(--text-1); font-weight: 600; }
+
+	.tp-arrow { color: var(--text-4); transition: all 0.2s; }
+	.task-pill:hover .tp-arrow { color: var(--accent); transform: translateX(2px); }
+
+	/* ── Bento grids ── */
+	.bento {
+		display: grid;
+		grid-template-columns: 2fr 1fr;
+		gap: 10px;
+		margin-bottom: 10px;
+	}
+	.bento-row2 {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 10px;
+		margin-bottom: 10px;
+	}
+
+	/* ── Bento card ── */
+	.bc {
+		background: var(--card);
+		border: 1px solid var(--border);
+		border-radius: 16px;
+		padding: 22px 24px;
+		box-shadow: var(--shadow-sm);
+		cursor: pointer;
+		position: relative;
+		overflow: hidden;
+		text-decoration: none;
+		color: inherit;
+		display: flex;
+		flex-direction: column;
+		border-top: 2px solid transparent;
+		transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
+	}
+	.bc:hover {
+		transform: translateY(-3px);
+		box-shadow: var(--shadow-md);
+	}
+	.bc:active { transform: scale(0.985); }
+	.bc.bc-emerald:hover { border-top-color: var(--accent); }
+	.bc.bc-rose:hover { border-top-color: var(--error); }
+
+	.bc-top {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 14px;
+	}
+	.bc-label {
+		font-size: 10px;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: var(--text-4);
+	}
+	.bc-icon {
+		width: 28px;
+		height: 28px;
+		border-radius: 8px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.bc-icon.emerald { background: var(--accent-dim); color: var(--accent); }
+	.bc-icon.rose { background: var(--error-dim); color: var(--error); }
+
+	.bc-value {
+		font-size: 32px;
+		font-weight: 700;
+		font-family: var(--mono);
+		letter-spacing: -0.04em;
+		line-height: 1;
+		color: var(--text-1);
+		margin-bottom: 6px;
+	}
+	.bc-value-sm {
+		font-size: 20px;
+		font-weight: 700;
+		font-family: var(--mono);
+		letter-spacing: -0.03em;
+		color: var(--text-1);
+		margin-bottom: 4px;
+	}
+	.bc-desc {
+		font-size: 13px;
+		color: var(--text-3);
+		line-height: 1.5;
+	}
+	.bc-desc :global(strong) { color: var(--text-2); font-weight: 500; }
+
+	.bc-action {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		font-size: 11px;
+		font-weight: 600;
+		color: var(--accent);
+		margin-top: 10px;
+		letter-spacing: 0.02em;
+		transition: gap 0.2s;
+	}
+	.bc:hover .bc-action { gap: 7px; }
+
+	/* ── Fitness card (inline) ── */
+	.fit-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+	.fit-av {
+		width: 34px; height: 34px; border-radius: 50%;
+		background: var(--accent-dim); color: var(--accent);
+		display: flex; align-items: center; justify-content: center;
+		font-size: 12px; font-weight: 700;
+	}
+	.fit-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
+	.fit-sub { font-size: 11px; color: var(--text-4); margin-top: 1px; }
+	.fit-bar {
+		height: 4px; background: var(--card-hover); border-radius: 2px;
+		margin-bottom: 14px; overflow: hidden;
+	}
+	.fit-fill {
+		height: 100%; border-radius: 2px; background: var(--accent);
+		transition: width 1s cubic-bezier(0.16,1,0.3,1);
+	}
+	.fit-macros { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
+	.fm-v { font-size: 14px; font-weight: 600; font-family: var(--mono); color: var(--text-1); }
+	.fm-u { font-size: 10px; color: var(--text-4); }
+	.fm-l { font-size: 10px; color: var(--text-4); margin-top: 1px; }
+
+	/* ── Modules ── */
+	.db-modules {
+		display: grid;
+		grid-template-columns: 7fr 3fr;
+		gap: 10px;
+		align-items: start;
+	}
+	.db-modules > :global(.module) {
+		padding: 22px 24px;
+		border-radius: 16px;
+		min-width: 0;
+	}
+
+	/* ── Mobile ── */
+	@media (max-width: 900px) {
+		.db-header { flex-direction: column; align-items: flex-start; gap: 12px; }
+		.db-greeting { font-size: 22px; }
+		.task-pill { width: 100%; }
+	}
+
+	@media (max-width: 768px) {
+		.db-surface { padding: 0 16px; }
+		.bento, .bento-row2, .db-modules { grid-template-columns: 1fr; }
+		.bento > *, .bento-row2 > *, .db-modules > :global(*) { min-width: 0; max-width: 100%; }
+		.bc-value { font-size: 24px; }
+	}
+</style>
diff --git a/frontend-v2/src/lib/pages/fitness/AtelierFitnessPage.svelte b/frontend-v2/src/lib/pages/fitness/AtelierFitnessPage.svelte
new file mode 100644
index 0000000..0919cc1
--- /dev/null
+++ b/frontend-v2/src/lib/pages/fitness/AtelierFitnessPage.svelte
@@ -0,0 +1,3340 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack';
+  type FitnessTab = 'log' | 'foods' | 'templates';
+
+  interface FoodEntry {
+    id: string;
+    name: string;
+    serving: string;
+    calories: number;
+    protein: number;
+    carbs: number;
+    fat: number;
+    sugar: number;
+    fiber: number;
+    method: string;
+    image?: string;
+    note?: string;
+    meal: MealType;
+    rawQty: number;
+    rawUnit: string;
+  }
+
+  interface FoodItem {
+    id: string;
+    name: string;
+    info: string;
+    calories: number;
+    protein?: number;
+    carbs?: number;
+    fat?: number;
+    sugar?: number;
+    fiber?: number;
+    favorite?: boolean;
+  }
+
+  interface Template {
+    id: string;
+    name: string;
+    calories: number;
+    items: number;
+    meal: string;
+  }
+
+  const now = new Date();
+  const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+
+  let activeTab = $state<FitnessTab>('log');
+  let selectedDate = $state(todayStr);
+  let expandedMeals = $state<Set<string>>(new Set(['breakfast', 'lunch', 'dinner', 'snack']));
+  let foodSearch = $state('');
+  let highlightTemplate = $state('');
+  let loading = $state(true);
+  let foodsLoading = $state(false);
+  let templatesLoading = $state(false);
+
+  let entries = $state<FoodEntry[]>([]);
+  let goal = $state({ calories: 2000, protein: 150, carbs: 200, fat: 65, sugar: 0, fiber: 0 });
+  let foods = $state<FoodItem[]>([]);
+  let recentFoods = $state<FoodItem[]>([]);
+  let templates = $state<Template[]>([]);
+  let starterMeal = $state<MealType>(guessCurrentMeal());
+  let mealStarterFoods = $state<Record<MealType, FoodItem[]>>({
+    breakfast: [],
+    lunch: [],
+    dinner: [],
+    snack: []
+  });
+
+  function isIosSafari(): boolean {
+    const ua = navigator.userAgent;
+    const isIos = /iPhone|iPad|iPod/.test(ua);
+    const isWebKit = /WebKit/.test(ua);
+    const otherIosBrowser = /CriOS|FxiOS|EdgiOS|OPiOS|DuckDuckGo|YaBrowser/i.test(ua);
+    return isIos && isWebKit && !otherIosBrowser;
+  }
+
+  function openAssistant() {
+    window.dispatchEvent(new CustomEvent('openassistant', { detail: { entryDate: selectedDate } }));
+  }
+
+  // Map backend entry to UI entry
+  function mapEntry(e: any): FoodEntry {
+    return {
+      id: e.id,
+      name: e.snapshot_food_name || 'Unknown',
+      serving: e.serving_description || e.snapshot_serving_label || `${e.quantity || 1} ${e.unit || 'serving'}`,
+      calories: Math.round(e.snapshot_calories || 0),
+      protein: Math.round(e.snapshot_protein || 0),
+      carbs: Math.round(e.snapshot_carbs || 0),
+      fat: Math.round(e.snapshot_fat || 0),
+      sugar: Math.round(e.snapshot_sugar || 0),
+      fiber: Math.round(e.snapshot_fiber || 0),
+      method: e.entry_method || 'manual',
+      image: e.food_image_path,
+      note: e.note,
+      meal: (e.meal_type || 'snack') as MealType,
+      rawQty: e.quantity || 1,
+      rawUnit: e.unit || 'serving',
+    };
+  }
+
+  // Map backend food to UI food (handles both /foods and /foods/recent shapes)
+  function mapFood(f: any): FoodItem {
+    const id = f.id || f.food_id || '';
+    const name = f.name || f.snapshot_food_name || 'Unknown';
+    const brand = f.brand ? `${f.brand} · ` : '';
+    const unit = f.base_unit === '100g' ? '100g' : (f.servings?.[0]?.label || f.base_unit || 'serving');
+    return {
+      id,
+      name,
+      info: `${brand}${unit}`,
+      calories: Math.round(f.calories_per_base || 0),
+      protein: Math.round(f.protein_per_base || 0),
+      carbs: Math.round(f.carbs_per_base || 0),
+      fat: Math.round(f.fat_per_base || 0),
+      sugar: Math.round(f.sugar_per_base || 0),
+      fiber: Math.round(f.fiber_per_base || 0),
+      favorite: f.is_favorite || false,
+    };
+  }
+
+  // Map backend template to UI template
+  function mapTemplate(t: any): Template {
+    const items = t.items || [];
+    const totalCal = items.reduce((s: number, i: any) => s + (i.snapshot_calories || 0) * (i.quantity || 1), 0);
+    return {
+      id: t.id,
+      name: t.name,
+      calories: Math.round(totalCal),
+      items: items.length,
+      meal: t.meal_type || 'snack',
+    };
+  }
+
+  async function loadDayData() {
+    loading = true;
+    try {
+      const [entriesRes, goalsRes] = await Promise.all([
+        fetch(`/api/fitness/entries?date=${selectedDate}`, { credentials: 'include' }),
+        fetch(`/api/fitness/goals/for-date?date=${selectedDate}`, { credentials: 'include' }),
+      ]);
+      if (entriesRes.ok) {
+        const raw = await entriesRes.json();
+        entries = (Array.isArray(raw) ? raw : []).map(mapEntry);
+      } else {
+        entries = [];
+      }
+      if (goalsRes.ok) {
+        const g = await goalsRes.json();
+        goal = {
+          calories: g.calories || 2000,
+          protein: g.protein || 150,
+          carbs: g.carbs || 200,
+          fat: g.fat || 65,
+          sugar: g.sugar || 0,
+          fiber: g.fiber || 0
+        };
+      }
+    } catch { /* silent */ }
+    loading = false;
+  }
+
+  async function loadFoods(query?: string) {
+    foodsLoading = true;
+    try {
+      const url = query
+        ? `/api/fitness/foods/search?q=${encodeURIComponent(query)}&limit=30`
+        : `/api/fitness/foods?limit=100`;
+      const res = await fetch(url, { credentials: 'include' });
+      if (res.ok) {
+        const raw = await res.json();
+        foods = (Array.isArray(raw) ? raw : []).map(mapFood);
+      }
+    } catch { /* silent */ }
+    foodsLoading = false;
+  }
+
+  async function loadTemplates() {
+    templatesLoading = true;
+    try {
+      const res = await fetch('/api/fitness/templates', { credentials: 'include' });
+      if (res.ok) {
+        const raw = await res.json();
+        templates = (Array.isArray(raw) ? raw : []).map(mapTemplate);
+      }
+    } catch { /* silent */ }
+    templatesLoading = false;
+  }
+
+  async function loadRecentFoods() {
+    try {
+      const res = await fetch('/api/fitness/foods/recent?limit=8', { credentials: 'include' });
+      if (res.ok) {
+        const raw = await res.json();
+        recentFoods = (Array.isArray(raw) ? raw : []).map(mapFood);
+      } else {
+        recentFoods = [];
+      }
+    } catch {
+      recentFoods = [];
+    }
+  }
+
+  function dateDaysAgo(base: string, daysAgo: number): string {
+    const d = new Date(`${base}T00:00:00`);
+    d.setDate(d.getDate() - daysAgo);
+    return d.toISOString().slice(0, 10);
+  }
+
+  async function loadMealStarterFoods() {
+    try {
+      const dates = Array.from({ length: 14 }, (_, i) => dateDaysAgo(selectedDate, i + 1));
+      const responses = await Promise.all(
+        dates.map(async (entryDate) => {
+          const res = await fetch(`/api/fitness/entries?date=${entryDate}`, { credentials: 'include' });
+          if (!res.ok) return [];
+          const raw = await res.json();
+          return Array.isArray(raw) ? raw : [];
+        })
+      );
+
+      const buckets: Record<MealType, Map<string, { count: number; lastUsed: string; food: FoodItem }>> = {
+        breakfast: new Map(),
+        lunch: new Map(),
+        dinner: new Map(),
+        snack: new Map()
+      };
+
+      for (const dayEntries of responses) {
+        for (const entry of dayEntries) {
+          const meal = (entry.meal_type || 'snack') as MealType;
+          const foodId = entry.food_id;
+          if (!foodId || !buckets[meal]) continue;
+          const existing = buckets[meal].get(foodId);
+          const food: FoodItem = {
+            id: foodId,
+            name: entry.snapshot_food_name || 'Unknown',
+            info: entry.snapshot_serving_label || entry.serving_description || entry.unit || 'serving',
+            calories: Math.round(entry.snapshot_calories || 0)
+          };
+
+          if (existing) {
+            existing.count += 1;
+            if ((entry.created_at || '') > existing.lastUsed) existing.lastUsed = entry.created_at || existing.lastUsed;
+          } else {
+            buckets[meal].set(foodId, {
+              count: 1,
+              lastUsed: entry.created_at || '',
+              food
+            });
+          }
+        }
+      }
+
+      mealStarterFoods = {
+        breakfast: [...buckets.breakfast.values()].sort((a, b) => b.count - a.count || b.lastUsed.localeCompare(a.lastUsed)).map((item) => item.food).slice(0, 6),
+        lunch: [...buckets.lunch.values()].sort((a, b) => b.count - a.count || b.lastUsed.localeCompare(a.lastUsed)).map((item) => item.food).slice(0, 6),
+        dinner: [...buckets.dinner.values()].sort((a, b) => b.count - a.count || b.lastUsed.localeCompare(a.lastUsed)).map((item) => item.food).slice(0, 6),
+        snack: [...buckets.snack.values()].sort((a, b) => b.count - a.count || b.lastUsed.localeCompare(a.lastUsed)).map((item) => item.food).slice(0, 6)
+      };
+    } catch {
+      mealStarterFoods = {
+        breakfast: [],
+        lunch: [],
+        dinner: [],
+        snack: []
+      };
+    }
+  }
+
+  let expandedEntry = $state<string | null>(null);
+
+  async function deleteEntry(id: string) {
+    expandedEntry = null;
+    entries = entries.filter(e => e.id !== id);
+    try {
+      await fetch(`/api/fitness/entries/${id}`, { method: 'DELETE', credentials: 'include' });
+    } catch {
+      await loadDayData();
+    }
+  }
+
+  let editQtyValue = $state('');
+
+  function toggleEntry(id: string) {
+    if (expandedEntry === id) {
+      expandedEntry = null;
+    } else {
+      expandedEntry = id;
+      const entry = entries.find(e => e.id === id);
+      editQtyValue = entry ? String(entry.rawQty) : '1';
+    }
+  }
+
+  async function updateEntryQty(id: string) {
+    const newQty = parseFloat(editQtyValue);
+    if (!newQty || newQty <= 0) return;
+    expandedEntry = null;
+    try {
+      const res = await fetch(`/api/fitness/entries/${id}`, {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ quantity: newQty }),
+      });
+      if (res.ok) {
+        await loadDayData();
+      }
+    } catch { /* silent */ }
+  }
+
+  async function logTemplate(tpl: Template) {
+    try {
+      const res = await fetch(`/api/fitness/templates/${tpl.id}/log`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ meal_type: tpl.meal, entry_date: selectedDate }),
+      });
+      if (res.ok) {
+        activeTab = 'log';
+        await loadDayData();
+      }
+    } catch { /* silent */ }
+  }
+
+  async function quickAddRecentFood(food: FoodItem, meal: MealType) {
+    try {
+      const res = await fetch('/api/fitness/entries', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          food_id: food.id,
+          quantity: 1,
+          unit: 'serving',
+          meal_type: meal,
+          entry_date: selectedDate,
+          entry_method: 'search',
+          source: 'web'
+        })
+      });
+      if (res.ok) {
+        await loadDayData();
+      }
+    } catch { /* silent */ }
+  }
+
+  // ── AI Food Resolve (multi-item) ──
+  interface ResolvedItem {
+    result: any;
+    name: string;
+    qty: number;
+    unit: string;
+    calories: number;
+    protein: number;
+    carbs: number;
+    fat: number;
+  }
+
+  let resolveInput = $state('');
+  let resolveMeal = $state<MealType>('snack');
+  let resolving = $state(false);
+  let resolvedItems = $state<ResolvedItem[]>([]);
+  let resolveError = $state('');
+  let confirmLogging = $state(false);
+
+  function guessCurrentMeal(): MealType {
+    const h = new Date().getHours();
+    if (h >= 6 && h < 11) return 'breakfast';
+    if (h >= 11 && h < 15) return 'lunch';
+    if (h >= 17 && h < 21) return 'dinner';
+    return 'snack';
+  }
+
+  async function splitInputItems(input: string): Promise<string[]> {
+    // Use AI to split multi-item input into individual food items
+    try {
+      const res = await fetch('/api/fitness/foods/split', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ phrase: input }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data.items?.length > 0) return data.items;
+      }
+    } catch { /* fallback below */ }
+    // Fallback: comma split
+    return input.split(/,/).map(s => s.trim()).filter(s => s.length > 0);
+  }
+
+  function resolveToItem(r: any): ResolvedItem {
+    const qty = r.parsed?.quantity || 1;
+    const food = r.matched_food;
+    let cal = 0, pro = 0, carb = 0, f = 0;
+    if (food) {
+      cal = (food.calories_per_base || 0) * qty;
+      pro = (food.protein_per_base || 0) * qty;
+      carb = (food.carbs_per_base || 0) * qty;
+      f = (food.fat_per_base || 0) * qty;
+    } else if (r.ai_estimate) {
+      cal = (r.ai_estimate.calories_per_base || 0) * qty;
+      pro = (r.ai_estimate.protein_per_base || 0) * qty;
+      carb = (r.ai_estimate.carbs_per_base || 0) * qty;
+      f = (r.ai_estimate.fat_per_base || 0) * qty;
+    } else if (r.resolution_type === 'quick_add') {
+      cal = r.parsed?.quantity || 0;
+    }
+    const name = r.snapshot_name_override || food?.name || r.ai_estimate?.food_name || r.raw_text || 'Unknown';
+    return {
+      result: r,
+      name,
+      qty: Math.round(qty * 10) / 10,
+      unit: r.parsed?.unit || 'serving',
+      calories: Math.round(cal),
+      protein: Math.round(pro),
+      carbs: Math.round(carb),
+      fat: Math.round(f),
+    };
+  }
+
+  async function submitResolve() {
+    const phrase = resolveInput.trim();
+    if (!phrase) return;
+    resolving = true;
+    resolveError = '';
+    resolvedItems = [];
+    resolveMeal = guessCurrentMeal();
+
+    const parts = await splitInputItems(phrase);
+
+    try {
+      const results = await Promise.all(parts.map(async (part) => {
+        const res = await fetch('/api/fitness/foods/resolve', {
+          method: 'POST',
+          credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ raw_phrase: part, meal_type: resolveMeal, entry_date: selectedDate }),
+        });
+        if (!res.ok) {
+          if (res.status === 401) throw new Error('Not connected — connect fitness in Settings');
+          throw new Error(`Failed to resolve "${part}" (${res.status})`);
+        }
+        return res.json();
+      }));
+      resolvedItems = results.map(resolveToItem);
+    } catch (e: any) {
+      resolveError = e?.message || 'Network error';
+    }
+    resolving = false;
+  }
+
+  function updateItemQty(index: number, newQty: number) {
+    if (newQty <= 0) return;
+    const item = resolvedItems[index];
+    const r = item.result;
+    const food = r.matched_food;
+    const base = food || r.ai_estimate;
+    if (!base) return;
+    resolvedItems[index] = {
+      ...item,
+      qty: Math.round(newQty * 10) / 10,
+      calories: Math.round((base.calories_per_base || 0) * newQty),
+      protein: Math.round((base.protein_per_base || 0) * newQty),
+      carbs: Math.round((base.carbs_per_base || 0) * newQty),
+      fat: Math.round((base.fat_per_base || 0) * newQty),
+    };
+  }
+
+  function removeItem(index: number) {
+    resolvedItems = resolvedItems.filter((_, i) => i !== index);
+    if (resolvedItems.length === 0) cancelResolve();
+  }
+
+  const resolveTotalCal = $derived(resolvedItems.reduce((s, i) => s + i.calories, 0));
+
+  async function confirmResolve() {
+    if (resolvedItems.length === 0) return;
+    confirmLogging = true;
+    try {
+      for (const item of resolvedItems) {
+        const r = item.result;
+        let body: any;
+        if (r.resolution_type === 'quick_add' && !r.matched_food) {
+          body = {
+            entry_type: 'quick_add',
+            snapshot_food_name: r.raw_text || 'Quick add',
+            snapshot_calories: item.calories,
+            meal_type: resolveMeal,
+            entry_date: selectedDate,
+            source: 'web',
+            raw_text: r.raw_text,
+          };
+        } else if (r.matched_food) {
+          body = {
+            food_id: r.matched_food.id,
+            quantity: item.qty,
+            unit: item.unit,
+            meal_type: resolveMeal,
+            entry_date: selectedDate,
+            entry_method: r.resolution_type === 'ai_estimated' ? 'ai_label' : 'search',
+            source: 'web',
+            raw_text: r.raw_text,
+            confidence_score: r.confidence,
+            note: r.note || undefined,
+            snapshot_food_name_override: r.snapshot_name_override || undefined,
+          };
+        }
+        if (body) {
+          await fetch('/api/fitness/entries', {
+            method: 'POST',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+          });
+        }
+      }
+      resolvedItems = [];
+      resolveInput = '';
+      await loadDayData();
+    } catch { /* silent */ }
+    confirmLogging = false;
+  }
+
+  function cancelResolve() {
+    resolvedItems = [];
+    resolveError = '';
+  }
+
+  // ── Food Edit/Delete ──
+  let editingFood = $state<any>(null);
+  let editFoodName = $state('');
+  let editFoodCal = $state('');
+  let editFoodProtein = $state('');
+  let editFoodCarbs = $state('');
+  let editFoodFat = $state('');
+  let editFoodSugar = $state('');
+  let editFoodFiber = $state('');
+  let editFoodUnit = $state('');
+  let savingFood = $state(false);
+
+  function openFoodEdit(food: FoodItem) {
+    editingFood = food;
+    editFoodName = food.name;
+    editFoodCal = String(food.calories);
+    editFoodProtein = '';
+    editFoodCarbs = '';
+    editFoodFat = '';
+    editFoodSugar = '';
+    editFoodFiber = '';
+    editFoodUnit = food.info.split('·').pop()?.trim() || 'serving';
+    // Fetch full food data for macros
+    fetch(`/api/fitness/foods/${food.id}`, { credentials: 'include' })
+      .then(r => r.ok ? r.json() : null)
+      .then(data => {
+        if (data) {
+          editFoodProtein = String(Math.round(data.protein_per_base || 0));
+          editFoodCarbs = String(Math.round(data.carbs_per_base || 0));
+          editFoodFat = String(Math.round(data.fat_per_base || 0));
+          editFoodSugar = String(Math.round(data.sugar_per_base || 0));
+          editFoodFiber = String(Math.round(data.fiber_per_base || 0));
+          editFoodUnit = data.base_unit || 'serving';
+        }
+      })
+      .catch(() => {});
+  }
+
+  function closeFoodEdit() {
+    editingFood = null;
+  }
+
+  async function saveFoodEdit() {
+    if (!editingFood) return;
+    savingFood = true;
+    try {
+      await fetch(`/api/fitness/foods/${editingFood.id}`, {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: editFoodName.trim(),
+          calories_per_base: parseFloat(editFoodCal) || 0,
+          protein_per_base: parseFloat(editFoodProtein) || 0,
+          carbs_per_base: parseFloat(editFoodCarbs) || 0,
+          fat_per_base: parseFloat(editFoodFat) || 0,
+          sugar_per_base: parseFloat(editFoodSugar) || 0,
+          fiber_per_base: parseFloat(editFoodFiber) || 0,
+        }),
+      });
+      editingFood = null;
+      await loadFoods(foodSearch || undefined);
+    } catch { /* silent */ }
+    savingFood = false;
+  }
+
+  async function deleteFood() {
+    if (!editingFood) return;
+    savingFood = true;
+    try {
+      await fetch(`/api/fitness/foods/${editingFood.id}`, {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+      editingFood = null;
+      await loadFoods(foodSearch || undefined);
+    } catch { /* silent */ }
+    savingFood = false;
+  }
+
+  // Reload day data when date changes
+  $effect(() => {
+    selectedDate; // track
+    loadDayData();
+    loadMealStarterFoods();
+  });
+
+  // Reload foods when search changes (debounced)
+  let foodSearchTimeout: ReturnType<typeof setTimeout>;
+  $effect(() => {
+    const q = foodSearch;
+    clearTimeout(foodSearchTimeout);
+    foodSearchTimeout = setTimeout(() => loadFoods(q || undefined), q ? 300 : 0);
+  });
+
+  onMount(() => {
+    loadRecentFoods();
+    loadTemplates();
+
+    const handleAssistantApplied = (event: Event) => {
+      const detail = (event as CustomEvent<{ entryDate?: string | null }>).detail;
+      if (!detail?.entryDate || detail.entryDate === selectedDate) {
+        void loadDayData();
+        void loadMealStarterFoods();
+      }
+    };
+
+    window.addEventListener('fitnessassistantapplied', handleAssistantApplied);
+
+    const viewportMeta = document.querySelector('meta[name="viewport"]');
+    const originalViewport = viewportMeta?.getAttribute('content') ?? '';
+
+    if (viewportMeta && isIosSafari()) {
+      viewportMeta.setAttribute(
+        'content',
+        'width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover'
+      );
+    }
+
+    return () => {
+      window.removeEventListener('fitnessassistantapplied', handleAssistantApplied);
+      if (viewportMeta && originalViewport) {
+        viewportMeta.setAttribute('content', originalViewport);
+      }
+    };
+  });
+
+  function jumpToTemplates() {
+    activeTab = 'templates';
+    if (rankedTemplates.length > 0) {
+      highlightTemplate = rankedTemplates[0].name;
+      setTimeout(() => { highlightTemplate = ''; }, 2000);
+    }
+  }
+
+  const filteredFoods = $derived(foods);
+
+  const totals = $derived({
+    calories: entries.reduce((s, e) => s + e.calories, 0),
+    protein: entries.reduce((s, e) => s + e.protein, 0),
+    carbs: entries.reduce((s, e) => s + e.carbs, 0),
+    fat: entries.reduce((s, e) => s + e.fat, 0),
+    sugar: entries.reduce((s, e) => s + e.sugar, 0),
+    fiber: entries.reduce((s, e) => s + e.fiber, 0),
+    count: entries.length
+  });
+
+  const caloriesRemaining = $derived(goal.calories > 0 ? Math.max(goal.calories - totals.calories, 0) : 0);
+  const caloriesPercent = $derived(goal.calories > 0 ? Math.round((totals.calories / goal.calories) * 100) : 0);
+  const isToday = $derived(selectedDate === todayStr);
+
+  function entriesByMeal(meal: MealType) { return entries.filter(e => e.meal === meal); }
+  function mealCalories(meal: MealType) { return entriesByMeal(meal).reduce((s, e) => s + e.calories, 0); }
+  function mealProtein(meal: MealType) { return entriesByMeal(meal).reduce((s, e) => s + e.protein, 0); }
+
+  function toggleMeal(meal: string) {
+    const next = new Set(expandedMeals);
+    if (next.has(meal)) next.delete(meal); else next.add(meal);
+    expandedMeals = next;
+  }
+
+  function shiftDate(days: number) {
+    const d = new Date(selectedDate + 'T00:00:00');
+    d.setDate(d.getDate() + days);
+    selectedDate = d.toISOString().split('T')[0];
+  }
+
+  function formatDate(date: string) {
+    const d = new Date(date + 'T00:00:00');
+    return d.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' });
+  }
+
+  // Action-oriented coaching based on progress
+  function coachMessage(remaining: number, percent: number): string {
+    if (percent >= 100) return 'Done for the day — you hit your goal';
+    if (percent >= 90) return 'Almost done — keep it light';
+    if (percent >= 75) return 'Finish strong — ' + remaining.toLocaleString() + ' cal left';
+    if (percent >= 50) return 'You\'ve got room for a solid meal';
+    if (percent >= 25) return 'On track — plan your next meal';
+    if (percent > 0) return 'Just getting started — ' + remaining.toLocaleString() + ' cal to work with';
+    return 'Start logging to see your progress';
+  }
+
+  // Coaching focus — what the user needs most right now
+  type CoachFocus = 'protein' | 'low_carb' | 'low_fat' | 'light' | 'balanced';
+
+  function getCoachFocus(t: typeof totals, g: typeof goal, calLeft: number): CoachFocus {
+    const proteinPct = t.protein / g.protein;
+    const carbsPct = t.carbs / g.carbs;
+    const fatPct = t.fat / g.fat;
+    if (calLeft < 300) return 'light';
+    if (proteinPct < 0.7) return 'protein';
+    if (carbsPct > 0.8 && proteinPct < 0.8) return 'low_carb';
+    if (fatPct > 0.8) return 'low_fat';
+    return 'balanced';
+  }
+
+  const coachFocus = $derived(getCoachFocus(totals, goal, caloriesRemaining));
+
+  // "Best next move" — realistic meal suggestions
+  function bestNextMove(t: typeof totals, g: typeof goal, calRemaining: number): string {
+    if (calRemaining <= 0) return '';
+
+    const proteinPct = t.protein / g.protein;
+    const carbsPct = t.carbs / g.carbs;
+    const fatPct = t.fat / g.fat;
+    const proteinLeft = Math.max(g.protein - t.protein, 0);
+
+    // Protein-focused — use realistic meal combos
+    if (proteinPct < 0.4 && proteinLeft > 40) {
+      const lo = Math.round(proteinLeft * 0.3);
+      const hi = Math.round(proteinLeft * 0.45);
+      return `Best next: ~${lo}–${hi}g protein (chicken + rice, 3 eggs, or a shake)`;
+    }
+    if (proteinPct < 0.6 && proteinLeft > 25) {
+      const lo = Math.round(proteinLeft * 0.35);
+      const hi = Math.round(proteinLeft * 0.5);
+      return `Best next: ~${lo}–${hi}g protein (chicken, Greek yogurt, or protein shake)`;
+    }
+    if (proteinPct < 0.8 && proteinLeft > 10) {
+      return `Best next: ~${Math.round(proteinLeft * 0.6)}–${proteinLeft}g protein (eggs, yogurt, or tuna)`;
+    }
+
+    // Carbs running high + still need protein
+    if (carbsPct > 0.8 && proteinPct < 0.75) {
+      return 'Best next: skip the carbs — chicken salad, eggs, or a protein shake';
+    }
+
+    // Fat running high
+    if (fatPct > 0.85) {
+      return 'Best next: lean protein + rice or sweet potato — skip the oils';
+    }
+    if (fatPct > 0.7 && carbsPct < 0.5) {
+      return 'Best next: oatmeal, rice bowl, or pasta with grilled chicken';
+    }
+
+    // Low calories remaining
+    if (calRemaining < 200) {
+      return 'Best next: something light — yogurt, fruit, or veggies';
+    }
+    if (calRemaining < 400) {
+      return 'Best next: small meal — salad with chicken, or a shake with fruit';
+    }
+
+    // Everything balanced
+    return 'Best next: balanced plate — protein, carbs, and veggies';
+  }
+
+  // Macro guidance — considers both target gap and calories budget
+  function macroInstruction(macro: 'protein' | 'carbs' | 'fat', current: number, target: number, calLeft: number): string {
+    if (target <= 0) return 'Set target in goals';
+    const pct = Math.round((current / target) * 100);
+    if (pct >= 100) return 'On target';
+
+    const budgetTight = calLeft < 400;
+
+    if (macro === 'protein') {
+      if (pct < 50 && !budgetTight) return 'Prioritize protein';
+      if (pct < 50 && budgetTight) return 'Add lean protein';
+      if (pct < 80) return 'Add protein';
+      return 'Almost there';
+    }
+    if (macro === 'carbs') {
+      if (pct >= 85) return 'Ease off carbs';
+      if (pct >= 70) return 'Watch carbs';
+      return 'Carbs on track';
+    }
+    // fat
+    if (pct >= 85) return 'Keep fats minimal';
+    if (pct >= 70) return 'Keep fats light';
+    return 'Fats on track';
+  }
+
+  function macroLeft(current: number, target: number): string {
+    if (target <= 0) return 'Set goal';
+    const left = Math.max(target - current, 0);
+    if (left === 0) return '';
+    return `${left}g left`;
+  }
+
+  function nutrientPercent(current: number, target: number): number {
+    if (target <= 0) return 0;
+    return Math.min(Math.round((current / target) * 100), 100);
+  }
+
+  function extraInstruction(kind: 'sugar' | 'fiber', current: number, target: number): string {
+    if (target <= 0) return 'Set target in goals';
+    const pct = nutrientPercent(current, target);
+    if (kind === 'sugar') {
+      if (pct >= 100) return 'Over target';
+      if (pct >= 80) return 'Close to limit';
+      return 'Within target';
+    }
+
+    if (pct >= 100) return 'Goal hit';
+    if (pct >= 75) return 'Almost there';
+    if (pct >= 35) return 'Build fiber';
+    return 'Add fiber foods';
+  }
+
+  // Meal weight label — contextual per meal type
+  function mealWeight(mealCal: number, dailyGoal: number, meal: MealType): string {
+    if (mealCal === 0) return '';
+    const pct = Math.round((mealCal / dailyGoal) * 100);
+
+    if (meal === 'snack') {
+      // Snacks: bias toward Light/Snack
+      if (pct >= 25) return 'Heavy';
+      if (pct >= 12) return 'Moderate';
+      return 'Light';
+    }
+    if (meal === 'breakfast') {
+      // Breakfast: cap at Moderate
+      if (pct >= 30) return 'Moderate';
+      if (pct >= 12) return 'Light';
+      return 'Snack';
+    }
+    // Lunch / Dinner: normal scale
+    if (pct >= 35) return 'Heavy';
+    if (pct >= 20) return 'Moderate';
+    if (pct >= 8) return 'Light';
+    return 'Snack';
+  }
+
+  function mealEmptyCopy(meal: MealType): string {
+    if (meal === 'breakfast') return 'Start light or protein-first';
+    if (meal === 'lunch') return 'Nothing logged for midday yet';
+    if (meal === 'dinner') return 'Dinner is still open';
+    return 'Leave room for a snack or dessert';
+  }
+
+  // Template scoring — decisive ranking aligned with coaching focus
+  function templateScore(tpl: Template, t: typeof totals, g: typeof goal, calLeft: number, focus: CoachFocus): number {
+    let score = 0;
+    const hour = new Date().getHours();
+    const isProteinRich = /protein|chicken|egg|salmon/i.test(tpl.name);
+    const isCarbHeavy = /oatmeal|rice|pasta/i.test(tpl.name);
+
+    // ── Calorie fit (highest weight) ──
+    if (calLeft > 0) {
+      if (tpl.calories <= calLeft) {
+        const ratio = tpl.calories / calLeft;
+        // Perfect fit: within ±15%
+        if (ratio >= 0.85 && ratio <= 1.0) score += 50;
+        // Good fit: within ±30%
+        else if (ratio >= 0.7) score += 35;
+        // Usable: under budget but not close
+        else if (ratio >= 0.4) score += 15;
+      } else {
+        // Over remaining — penalize harder
+        const overBy = (tpl.calories - calLeft) / calLeft;
+        score -= overBy > 0.3 ? 30 : 15;
+      }
+    }
+
+    // ── Coaching alignment (reinforce "Best next" direction) ──
+    if (focus === 'protein' && isProteinRich) score += 35;
+    if (focus === 'protein' && !isProteinRich) score -= 5;
+    if (focus === 'low_carb' && isCarbHeavy) score -= 20;
+    if (focus === 'low_carb' && isProteinRich) score += 20;
+    if (focus === 'low_fat' && isProteinRich) score += 15;
+    if (focus === 'light' && tpl.calories < 350) score += 20;
+    if (focus === 'light' && tpl.calories > 500) score -= 20;
+
+    // ── Time-of-day ──
+    if (tpl.meal === 'breakfast' && hour >= 6 && hour < 11) score += 15;
+    if (tpl.meal === 'lunch' && hour >= 11 && hour < 15) score += 15;
+    if (tpl.meal === 'dinner' && hour >= 17 && hour < 21) score += 15;
+    if (tpl.meal === 'snack' && hour >= 14 && hour < 17) score += 10;
+
+    // ── Macro penalties ──
+    const carbsPct = t.carbs / g.carbs;
+    const fatPct = t.fat / g.fat;
+    if (carbsPct > 0.85 && isCarbHeavy) score -= 15;
+    if (fatPct > 0.85) score -= 5;
+
+    return score;
+  }
+
+  // Sorted templates by score (descending)
+  const rankedTemplates = $derived(
+    [...templates]
+      .map(tpl => ({ tpl, score: templateScore(tpl, totals, goal, caloriesRemaining, coachFocus) }))
+      .sort((a, b) => b.score - a.score)
+      .map(item => item.tpl)
+  );
+
+  // Template hints — selective, max 3 total, top-ranked only
+  function templateHints(ranked: Template[], t: typeof totals, g: typeof goal, calLeft: number): Map<string, string> {
+    const hints = new Map<string, string>();
+    const hour = new Date().getHours();
+    const proteinPct = t.protein / g.protein;
+    const proteinPhrases = ['High protein option', 'Great for protein', 'Helps close your protein gap'];
+    let proteinIdx = 0;
+    const MAX_HINTS = 3;
+
+    // Only consider top-ranked templates for hints
+    const candidates = ranked.slice(0, Math.min(ranked.length, 5));
+
+    for (const tpl of candidates) {
+      if (hints.size >= MAX_HINTS) break;
+
+      // Calorie fit — tight ±15%
+      if (calLeft > 0 && tpl.calories <= calLeft) {
+        const ratio = tpl.calories / calLeft;
+        if (ratio >= 0.85 && ratio <= 1.0) {
+          hints.set(tpl.name, 'Fits your remaining calories');
+          continue;
+        }
+      }
+
+      // Protein hint — varied phrasing, max 2
+      const isProteinRich = /protein|chicken|egg|salmon/i.test(tpl.name);
+      if (isProteinRich && proteinPct < 0.7 && proteinIdx < 2) {
+        hints.set(tpl.name, proteinPhrases[proteinIdx]);
+        proteinIdx++;
+        continue;
+      }
+
+      // Time-of-day — max 1
+      if (!Array.from(hints.values()).some(h => h.startsWith('Good '))) {
+        if (tpl.meal === 'breakfast' && hour >= 6 && hour < 11) { hints.set(tpl.name, 'Good for this morning'); continue; }
+        if (tpl.meal === 'lunch' && hour >= 11 && hour < 15) { hints.set(tpl.name, 'Good for lunch right now'); continue; }
+        if (tpl.meal === 'dinner' && hour >= 17 && hour < 21) { hints.set(tpl.name, 'Good dinner choice'); continue; }
+        if (tpl.meal === 'snack' && hour >= 14 && hour < 17) { hints.set(tpl.name, 'Good afternoon pick-me-up'); continue; }
+      }
+    }
+
+    return hints;
+  }
+
+  const templateHintMap = $derived(templateHints(rankedTemplates, totals, goal, caloriesRemaining));
+
+  const mealTypes: MealType[] = ['breakfast', 'lunch', 'dinner', 'snack'];
+  const starterFoods = $derived(
+    mealStarterFoods[starterMeal].length > 0
+      ? mealStarterFoods[starterMeal]
+      : recentFoods.slice(0, 6)
+  );
+</script>
+
+<div class="fitness-page">
+  <div class="fitness-shell">
+    <header class="fitness-header">
+      <div class="fitness-heading">
+        <h1>Nutrition</h1>
+        <p class="fitness-subcopy">
+          Daily intake, food memory, and quick meal decisions in one quieter workspace.
+        </p>
+        <div class="fitness-mobile-note">Daily intake and food memory.</div>
+      </div>
+
+      <div class="fitness-header-side">
+        <div class="date-nav">
+          <button class="btn-icon" onclick={() => shiftDate(-1)} aria-label="Previous day">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+          </button>
+          <label class="date-display">
+            <span class="date-display-text">{#if isToday}Today{:else}{formatDate(selectedDate)}{/if}</span>
+            <input type="date" class="date-display-input" bind:value={selectedDate} aria-label="Choose day" />
+          </label>
+          <button class="btn-icon" onclick={() => shiftDate(1)} aria-label="Next day">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </button>
+          {#if !isToday}
+            <button class="today-btn" onclick={() => selectedDate = todayStr}>Today</button>
+          {/if}
+        </div>
+      </div>
+    </header>
+
+    <div class="top-tabs">
+      <button class="top-tab" class:active={activeTab === 'log'} onclick={() => activeTab = 'log'}>Day log</button>
+      <button class="top-tab" class:active={activeTab === 'foods'} onclick={() => activeTab = 'foods'}>Food library</button>
+      <button class="top-tab" class:active={activeTab === 'templates'} onclick={() => activeTab = 'templates'}>Quick meals</button>
+    </div>
+
+    {#if activeTab === 'log'}
+      <div class="fitness-log-grid">
+        <aside class="fitness-rail">
+          <section class="rail-panel calorie-card">
+            <div class="panel-kicker">Daily target</div>
+            <div class="calorie-eaten">
+              <span class="calorie-number">{totals.calories.toLocaleString()}</span>
+              <span class="calorie-of">/ {goal.calories.toLocaleString()}</span>
+            </div>
+            <div class="calorie-meta-row">
+              <span class="calorie-meta-pill">{totals.count} entr{totals.count === 1 ? 'y' : 'ies'}</span>
+              <span class="calorie-meta-pill">{caloriesRemaining.toLocaleString()} left</span>
+            </div>
+            <div class="progress-bar">
+              <div class="progress-fill" style="width:{Math.min(caloriesPercent, 100)}%"></div>
+            </div>
+            <div class="calorie-coach">{coachMessage(caloriesRemaining, caloriesPercent)}</div>
+            {#if caloriesRemaining > 0}
+              {@const hint = bestNextMove(totals, goal, caloriesRemaining)}
+              {#if hint}
+                <button class="calorie-next" onclick={jumpToTemplates}>{hint} <span class="next-arrow">→</span></button>
+              {/if}
+            {/if}
+          </section>
+
+          <section class="rail-panel macro-panel">
+            <div class="panel-kicker">Nutrition balance</div>
+            <div class="macro-row">
+              <div class="macro-item">
+                <div class="macro-card-head">
+                  <span class="macro-name">Protein</span>
+                  <span class="macro-left">{macroLeft(totals.protein, goal.protein)}</span>
+                </div>
+                <div class="macro-bar-wrap">
+                  <div class="macro-bar-fill protein" style="width:{Math.min(totals.protein / goal.protein * 100, 100)}%"></div>
+                </div>
+                <div class="macro-label">
+                  <span class="macro-current">{totals.protein}g</span>
+                  <span class="macro-target">/ {goal.protein}g</span>
+                </div>
+                <div class="macro-guidance">
+                  <div class="macro-instruction">{macroInstruction('protein', totals.protein, goal.protein, caloriesRemaining)}</div>
+                </div>
+              </div>
+              <div class="macro-item">
+                <div class="macro-card-head">
+                  <span class="macro-name">Carbs</span>
+                  <span class="macro-left">{macroLeft(totals.carbs, goal.carbs)}</span>
+                </div>
+                <div class="macro-bar-wrap">
+                  <div class="macro-bar-fill carbs" style="width:{Math.min(totals.carbs / goal.carbs * 100, 100)}%"></div>
+                </div>
+                <div class="macro-label">
+                  <span class="macro-current">{totals.carbs}g</span>
+                  <span class="macro-target">/ {goal.carbs}g</span>
+                </div>
+                <div class="macro-guidance">
+                  <div class="macro-instruction">{macroInstruction('carbs', totals.carbs, goal.carbs, caloriesRemaining)}</div>
+                </div>
+              </div>
+              <div class="macro-item">
+                <div class="macro-card-head">
+                  <span class="macro-name">Fat</span>
+                  <span class="macro-left">{macroLeft(totals.fat, goal.fat)}</span>
+                </div>
+                <div class="macro-bar-wrap">
+                  <div class="macro-bar-fill fat" style="width:{Math.min(totals.fat / goal.fat * 100, 100)}%"></div>
+                </div>
+                <div class="macro-label">
+                  <span class="macro-current">{totals.fat}g</span>
+                  <span class="macro-target">/ {goal.fat}g</span>
+                </div>
+                <div class="macro-guidance">
+                  <div class="macro-instruction">{macroInstruction('fat', totals.fat, goal.fat, caloriesRemaining)}</div>
+                </div>
+              </div>
+            </div>
+            <div class="extra-nutrients-head">
+              <span>Tracked extras</span>
+            </div>
+            <div class="extra-nutrients-row">
+              <div class="macro-item extra-item sugar-item">
+                <div class="macro-card-head">
+                  <span class="macro-name">Sugar</span>
+                  <span class="macro-left">{macroLeft(totals.sugar, goal.sugar)}</span>
+                </div>
+                <div class="macro-bar-wrap">
+                  <div class="macro-bar-fill sugar" style="width:{nutrientPercent(totals.sugar, goal.sugar)}%"></div>
+                </div>
+                <div class="macro-label">
+                  <span class="macro-current">{totals.sugar}g</span>
+                  <span class="macro-target">{goal.sugar > 0 ? `/ ${goal.sugar}g` : '/ tracking only'}</span>
+                </div>
+                <div class="macro-guidance">
+                  <div class="macro-instruction">{extraInstruction('sugar', totals.sugar, goal.sugar)}</div>
+                </div>
+              </div>
+              <div class="macro-item extra-item fiber-item">
+                <div class="macro-card-head">
+                  <span class="macro-name">Fiber</span>
+                  <span class="macro-left">{macroLeft(totals.fiber, goal.fiber)}</span>
+                </div>
+                <div class="macro-bar-wrap">
+                  <div class="macro-bar-fill fiber" style="width:{nutrientPercent(totals.fiber, goal.fiber)}%"></div>
+                </div>
+                <div class="macro-label">
+                  <span class="macro-current">{totals.fiber}g</span>
+                  <span class="macro-target">{goal.fiber > 0 ? `/ ${goal.fiber}g` : '/ tracking only'}</span>
+                </div>
+                <div class="macro-guidance">
+                  <div class="macro-instruction">{extraInstruction('fiber', totals.fiber, goal.fiber)}</div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+        </aside>
+
+        <main class="fitness-workspace">
+          {#if totals.count === 0 && starterFoods.length > 0}
+            <section class="starter-panel">
+              <div class="starter-header">
+                <div>
+                  <div class="panel-kicker">Start with recent</div>
+                  <h3>Use something you already log for {starterMeal}.</h3>
+                  <p>These suggestions are ranked from your recent meal history, with your most repeated foods first.</p>
+                </div>
+                <div class="starter-meals">
+                  {#each mealTypes as meal}
+                    <button class="starter-meal-btn" class:active={starterMeal === meal} onclick={() => starterMeal = meal}>
+                      {meal}
+                    </button>
+                  {/each}
+                </div>
+              </div>
+
+              <div class="starter-grid">
+                {#each starterFoods as food}
+                  <button class="starter-food" onclick={() => quickAddRecentFood(food, starterMeal)}>
+                    <div class="starter-food-name">{food.name}</div>
+                    <div class="starter-food-meta">{food.info} · {food.calories} cal</div>
+                    <div class="starter-food-action">Add to {starterMeal}</div>
+                  </button>
+                {/each}
+              </div>
+            </section>
+          {/if}
+
+          <div class="meals-divider">
+            <span class="meals-label">Meals</span>
+            <span class="meals-count">{totals.count} entries</span>
+          </div>
+
+          {#each mealTypes as meal, i}
+            {@const mealEntries = entriesByMeal(meal)}
+            {@const mCal = mealCalories(meal)}
+            {@const mPro = mealProtein(meal)}
+            {@const expanded = expandedMeals.has(meal)}
+            {@const weight = mealWeight(mCal, goal.calories, meal)}
+            {@const mealPct = mCal > 0 ? Math.round((mCal / goal.calories) * 100) : 0}
+
+            <section class="meal-section">
+              <button class="meal-header" onclick={() => toggleMeal(meal)}>
+                <div class="meal-number" class:has-entries={mealEntries.length > 0}>{i + 1}</div>
+                <div class="meal-info">
+                  <div class="meal-top">
+                    <span class="meal-name">{meal}</span>
+                    {#if weight}
+                      <span class="meal-weight {weight.toLowerCase()}">{weight}</span>
+                    {/if}
+                  </div>
+                  {#if mCal > 0}
+                    <span class="meal-stats">{Math.round(mCal)} cal · {mealPct}% of daily · {Math.round(mPro)}g protein</span>
+                  {:else}
+                    <span class="meal-stats empty">{mealEmptyCopy(meal)}</span>
+                  {/if}
+                </div>
+                <svg class="meal-chevron" class:expanded viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+              </button>
+
+              {#if expanded}
+                <div class="meal-entries">
+                  {#if mealEntries.length > 0}
+                    {#each mealEntries as entry}
+                      <div class="entry-wrap">
+                        <!-- svelte-ignore a11y_no_static_element_interactions -->
+                        <div class="entry-row" onclick={() => toggleEntry(entry.id)}>
+                          <div class="entry-info">
+                            <div class="entry-name">
+                              {entry.name}
+                              {#if entry.method === 'ai_plate' || entry.method === 'ai_label'}
+                                <span class="entry-badge ai">AI</span>
+                              {/if}
+                              {#if entry.method === 'quick_add'}
+                                <span class="entry-badge quick">quick</span>
+                              {/if}
+                            </div>
+                            <div class="entry-serving">{entry.serving}</div>
+                            {#if entry.note}
+                              <div class="entry-note">{entry.note}</div>
+                            {/if}
+                          </div>
+                          <div class="entry-cals">
+                            <span class="entry-cal-value">{entry.calories}</span>
+                            <span class="entry-cal-label">cal</span>
+                          </div>
+                        </div>
+                        {#if expandedEntry === entry.id}
+                          <div class="entry-actions">
+                            <div class="entry-qty-control">
+                              <input
+                                type="number"
+                                class="entry-qty-input"
+                                bind:value={editQtyValue}
+                                onkeydown={(e) => { if (e.key === 'Enter') updateEntryQty(entry.id); }}
+                                step="0.5"
+                                min="0.1"
+                              />
+                              <span class="entry-qty-unit">{entry.rawUnit}</span>
+                              <button class="entry-qty-save" onclick={() => updateEntryQty(entry.id)}>Save</button>
+                            </div>
+                            <button class="entry-delete-btn" onclick={() => deleteEntry(entry.id)}>
+                              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                              Delete
+                            </button>
+                          </div>
+                        {/if}
+                      </div>
+                    {/each}
+                  {/if}
+
+                  <button class="add-food-btn" onclick={openAssistant}>
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                    Add to {meal}
+                  </button>
+                </div>
+              {/if}
+            </section>
+          {/each}
+        </main>
+      </div>
+    {:else if activeTab === 'foods'}
+      <section class="library-stage">
+        <div class="list-stage-header">
+          <div>
+            <div class="panel-kicker">Food library</div>
+            <h2>Search, edit, and curate your ingredients.</h2>
+          </div>
+          <div class="foods-nudge">
+            Looking for a quick option? <button class="nudge-link" onclick={() => activeTab = 'templates'}>Try Quick Meals →</button>
+          </div>
+        </div>
+
+        <div class="list-header">
+          <div class="search-wrap">
+            <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+            <input type="text" class="search-input" placeholder="Search food library..." bind:value={foodSearch} />
+            {#if foodSearch}
+              <button class="search-clear" onclick={() => foodSearch = ''}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            {/if}
+          </div>
+        </div>
+
+        <div class="list-card">
+          {#each filteredFoods as food (food.id || `${food.name}-${food.info}-${food.calories}`)}
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div class="list-row" onclick={() => openFoodEdit(food)}>
+              <div class="list-row-info">
+                <div class="list-row-name">
+                  {food.name}
+                  {#if food.favorite}
+                    <svg class="fav-icon" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+                  {/if}
+                </div>
+                <div class="list-row-meta">{food.info}</div>
+              </div>
+              <div class="list-row-right">
+                <span class="list-row-value">{food.calories} cal</span>
+                <svg class="list-row-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+              </div>
+            </div>
+          {/each}
+          {#if filteredFoods.length === 0}
+            <div class="empty-state empty-state-rich">
+              <div class="empty-state-kicker">Library is quiet</div>
+              <h3>{foodSearch ? 'No foods matched your search' : 'No foods in your library yet'}</h3>
+              <p>{foodSearch ? `Try a broader term than "${foodSearch}".` : 'Create foods or keep logging meals and the workspace will start building its own memory.'}</p>
+            </div>
+          {/if}
+        </div>
+      </section>
+    {:else if activeTab === 'templates'}
+      <section class="library-stage">
+        <div class="list-stage-header">
+          <div>
+            <div class="panel-kicker">Quick meals</div>
+            <h2>Reusable meals ranked against what your day still needs.</h2>
+          </div>
+          <div class="list-count">{#if templatesLoading}Loading...{:else if templates.length > 0}{templates.length} go-to meals · ranked for you{/if}</div>
+        </div>
+
+        <div class="list-card">
+          {#if rankedTemplates.length > 0}
+            {#each rankedTemplates as tpl}
+              {@const hint = templateHintMap.get(tpl.name) || ''}
+              <div class="list-row" class:highlighted={highlightTemplate === tpl.name}>
+                <div class="template-badge">{tpl.meal.charAt(0).toUpperCase()}</div>
+                <div class="list-row-info">
+                  <div class="list-row-name">{tpl.name}</div>
+                  <div class="list-row-meta"><span class="template-meal-label">{tpl.meal}</span> · {tpl.calories} cal</div>
+                  <div class="list-row-sub">{tpl.items} items</div>
+                  {#if hint}
+                    <div class="template-hint">{hint}</div>
+                  {/if}
+                </div>
+                <div class="list-row-right">
+                  <button class="log-btn" onclick={() => logTemplate(tpl)}>Log meal</button>
+                  <svg class="list-row-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+                </div>
+              </div>
+            {/each}
+          {:else}
+            <div class="empty-state empty-state-rich">
+              <div class="empty-state-kicker">Quick meals</div>
+              <h3>No reusable meals yet</h3>
+              <p>Once you save a go-to meal, this view can recommend the best fit for the rest of your day.</p>
+            </div>
+          {/if}
+        </div>
+      </section>
+    {/if}
+  </div>
+</div>
+
+<button class="fab assistant-fab" aria-label="Open fitness assistant" onclick={openAssistant}>
+  <span class="assistant-fab-mark">
+    <svg class="fab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.15"><path d="M8 10.5h8"/><path d="M8 14.5h5"/><path d="M12 3c4.97 0 9 3.358 9 7.5 0 1.944-.887 3.715-2.344 5.047-.392.36-.656.845-.735 1.372L17.5 20l-3.234-1.212a2.483 2.483 0 0 0-1.59 0L9.5 20l-.42-3.081a2.301 2.301 0 0 0-.735-1.372C6.887 14.215 6 12.444 6 10.5 6 6.358 10.03 3 15 3"/></svg>
+  </span>
+  <span class="assistant-fab-copy">
+    <span class="assistant-fab-title">Ask AI</span>
+    <span class="assistant-fab-sub">Log food or photo</span>
+  </span>
+</button>
+
+<!-- Food edit modal -->
+{#if editingFood}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="resolve-overlay" onclick={closeFoodEdit}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="resolve-modal" onclick={(e) => e.stopPropagation()}>
+      <div class="resolve-modal-header">
+        <div class="resolve-modal-title">Edit Food</div>
+        <button class="resolve-modal-close" onclick={closeFoodEdit}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+      <div class="resolve-modal-body">
+        <div class="food-edit-field">
+          <label class="food-edit-label">Name</label>
+          <input class="food-edit-input" type="text" bind:value={editFoodName} />
+        </div>
+        <div class="food-edit-row">
+          <div class="food-edit-field">
+            <label class="food-edit-label">Calories</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodCal} />
+          </div>
+          <div class="food-edit-field">
+            <label class="food-edit-label">Protein (g)</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodProtein} />
+          </div>
+        </div>
+        <div class="food-edit-row">
+          <div class="food-edit-field">
+            <label class="food-edit-label">Carbs (g)</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodCarbs} />
+          </div>
+          <div class="food-edit-field">
+            <label class="food-edit-label">Fat (g)</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodFat} />
+          </div>
+        </div>
+        <div class="food-edit-row">
+          <div class="food-edit-field">
+            <label class="food-edit-label">Sugar (g)</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodSugar} />
+          </div>
+          <div class="food-edit-field">
+            <label class="food-edit-label">Fiber (g)</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodFiber} />
+          </div>
+        </div>
+        <div class="food-edit-unit">Per 1 {editFoodUnit}</div>
+      </div>
+      <div class="resolve-modal-footer">
+        <button class="entry-delete-btn" onclick={deleteFood} disabled={savingFood}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+          Delete
+        </button>
+        <div class="resolve-footer-actions">
+          <button class="btn-secondary" onclick={closeFoodEdit}>Cancel</button>
+          <button class="btn-primary" onclick={saveFoodEdit} disabled={savingFood}>
+            {savingFood ? 'Saving...' : 'Save'}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<!-- Resolve confirmation modal -->
+{#if resolvedItems.length > 0}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="resolve-overlay" onclick={cancelResolve}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="resolve-modal" onclick={(e) => e.stopPropagation()}>
+      <div class="resolve-modal-header">
+        <div class="resolve-modal-title">
+          {resolvedItems.length === 1 ? 'Confirm entry' : `Confirm ${resolvedItems.length} items`}
+        </div>
+        <button class="resolve-modal-close" onclick={cancelResolve}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+
+      <div class="resolve-modal-body">
+        {#each resolvedItems as item, idx}
+          <div class="resolve-item" class:resolve-item-border={idx > 0}>
+            <div class="resolve-item-top">
+              <div class="resolve-item-info">
+                <div class="resolve-food-name">{item.name}</div>
+                <div class="resolve-food-detail">{item.calories} cal · {item.protein}g P · {item.carbs}g C · {item.fat}g F</div>
+              </div>
+              {#if resolvedItems.length > 1}
+                <button class="resolve-item-remove" onclick={() => removeItem(idx)} aria-label="Remove">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                </button>
+              {/if}
+            </div>
+            <div class="resolve-qty-row">
+              <button class="resolve-qty-btn" onclick={() => updateItemQty(idx, item.qty - 0.5)} disabled={item.qty <= 0.5}>−</button>
+              <span class="resolve-qty-value">{item.qty} {item.unit}</span>
+              <button class="resolve-qty-btn" onclick={() => updateItemQty(idx, item.qty + 0.5)}>+</button>
+            </div>
+          </div>
+        {/each}
+
+        <div class="resolve-meal-row">
+          <span class="resolve-meal-label">Meal</span>
+          <select class="resolve-meal-select" bind:value={resolveMeal}>
+            <option value="breakfast">Breakfast</option>
+            <option value="lunch">Lunch</option>
+            <option value="dinner">Dinner</option>
+            <option value="snack">Snack</option>
+          </select>
+        </div>
+
+        {#if resolvedItems.some(i => i.result.resolution_type === 'ai_estimated')}
+          <div class="resolve-note">Some items estimated by AI — values are approximate</div>
+        {/if}
+      </div>
+
+      <div class="resolve-modal-footer">
+        <div class="resolve-total">{resolveTotalCal} cal total</div>
+        <div class="resolve-footer-actions">
+          <button class="btn-secondary" onclick={cancelResolve}>Cancel</button>
+          <button class="btn-primary" onclick={confirmResolve} disabled={confirmLogging}>
+            {confirmLogging ? 'Logging...' : resolvedItems.length === 1 ? 'Log entry' : `Log ${resolvedItems.length} entries`}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  :global(:root) {
+    --fitness-bg: #efe6d8;
+    --fitness-bg-soft: #f7f1e8;
+    --fitness-paper: rgba(255, 251, 246, 0.82);
+    --fitness-paper-strong: rgba(255, 252, 248, 0.94);
+    --fitness-line: rgba(44, 31, 19, 0.09);
+    --fitness-line-strong: rgba(44, 31, 19, 0.16);
+    --fitness-text: #1f1710;
+    --fitness-muted: #6d5d4c;
+    --fitness-soft: #8f7f6d;
+    --fitness-accent: #2f6a52;
+    --fitness-accent-soft: rgba(47, 106, 82, 0.12);
+    --fitness-gold: #c88932;
+  }
+
+  .fitness-page {
+    min-height: calc(100vh - 56px);
+    background:
+      radial-gradient(circle at top left, rgba(255,255,255,0.7), transparent 30%),
+      linear-gradient(180deg, var(--fitness-bg-soft) 0%, var(--fitness-bg) 100%);
+  }
+
+  .fitness-shell {
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 22px 28px 120px;
+    color: var(--fitness-text);
+  }
+
+  .fitness-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 24px;
+    align-items: end;
+    margin-bottom: 14px;
+  }
+
+  .fitness-heading {
+    max-width: 640px;
+  }
+
+  .panel-kicker {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--fitness-soft);
+  }
+
+  .fitness-heading h1 {
+    margin: 6px 0 6px;
+    font-size: clamp(2.6rem, 5vw, 4.6rem);
+    line-height: 0.92;
+    letter-spacing: -0.07em;
+  }
+
+  .fitness-heading p {
+    margin: 0;
+    max-width: 560px;
+    color: var(--fitness-muted);
+    font-size: 0.96rem;
+    line-height: 1.5;
+  }
+
+  .fitness-mobile-note {
+    display: none;
+  }
+
+  .fitness-header-side {
+    display: grid;
+    gap: 10px;
+    justify-items: end;
+  }
+
+  .fitness-date-readout {
+    font-size: 1.1rem;
+    line-height: 1;
+    letter-spacing: -0.04em;
+    color: var(--fitness-text);
+    padding: 10px 14px;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.56);
+    border: 1px solid var(--fitness-line);
+  }
+
+  .top-tabs {
+    display: inline-flex;
+    gap: 4px;
+    padding: 4px;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.48);
+    border: 1px solid var(--fitness-line);
+    backdrop-filter: blur(12px);
+    margin-bottom: 18px;
+  }
+
+  .top-tab {
+    padding: 10px 16px;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--fitness-muted);
+    cursor: pointer;
+    font-size: 0.94rem;
+    font-weight: 600;
+    transition: all 180ms ease;
+    font-family: var(--font);
+  }
+
+  .top-tab:hover {
+    color: var(--fitness-text);
+  }
+
+  .top-tab.active {
+    background: var(--fitness-paper-strong);
+    color: var(--fitness-text);
+    box-shadow: 0 10px 24px rgba(33, 22, 14, 0.08);
+  }
+
+  .fitness-log-grid {
+    display: grid;
+    grid-template-columns: 356px minmax(0, 1fr);
+    gap: 18px;
+    align-items: start;
+  }
+
+  .fitness-rail {
+    display: grid;
+    gap: 14px;
+    position: sticky;
+    top: 78px;
+  }
+
+  .rail-panel,
+  .composer-panel,
+  .meal-section,
+  .list-card,
+  .fab-sheet,
+  .resolve-modal {
+    background: var(--fitness-paper);
+    border: 1px solid var(--fitness-line);
+    box-shadow: 0 16px 38px rgba(39, 28, 18, 0.07);
+    backdrop-filter: blur(16px);
+  }
+
+  .rail-panel,
+  .composer-panel,
+  .list-card {
+    border-radius: 28px;
+  }
+
+  .rail-panel {
+    padding: 20px 20px 22px;
+  }
+
+  .calorie-card {
+    background: linear-gradient(180deg, rgba(248, 245, 239, 0.98), rgba(240, 247, 241, 0.88));
+    border-color: rgba(47, 106, 82, 0.14);
+  }
+
+  .macro-panel {
+    background: linear-gradient(180deg, rgba(255,251,246,0.92), rgba(248,242,233,0.86));
+  }
+
+  .meals-summary {
+    background: linear-gradient(180deg, rgba(255,250,245,0.92), rgba(248,243,235,0.82));
+  }
+
+  .date-nav {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .date-display {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 36px;
+    min-width: 176px;
+    padding: 0 16px;
+    border-radius: 12px;
+    border: 1px solid var(--fitness-line);
+    background: rgba(255,255,255,0.72);
+    color: var(--fitness-text);
+    font-size: 0.92rem;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  .date-display-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .date-display-input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .btn-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 12px;
+    border: 1px solid var(--fitness-line);
+    background: rgba(255,255,255,0.62);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--fitness-muted);
+    transition: all 160ms ease;
+    flex-shrink: 0;
+  }
+
+  .btn-icon:hover {
+    color: var(--fitness-text);
+    background: rgba(255,255,255,0.9);
+  }
+
+  .btn-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .date-input,
+  .resolve-input,
+  .search-input,
+  .food-edit-input,
+  .entry-qty-input,
+  .resolve-meal-select {
+    border: 1px solid var(--fitness-line);
+    background: rgba(255,255,255,0.88);
+    color: var(--fitness-text);
+  }
+
+  .today-btn,
+  .entry-qty-save,
+  .resolve-submit,
+  .btn-primary,
+  .log-btn {
+    background: var(--fitness-accent);
+    color: #f9f6f1;
+    border: none;
+  }
+
+  .today-btn {
+    padding: 8px 14px;
+    border-radius: 999px;
+    font-size: 0.82rem;
+    font-weight: 700;
+    cursor: pointer;
+    font-family: var(--font);
+  }
+
+  .calorie-eaten {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    margin: 10px 0 8px;
+  }
+
+  .calorie-meta-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-bottom: 12px;
+  }
+
+  .calorie-meta-pill {
+    display: inline-flex;
+    align-items: center;
+    min-height: 24px;
+    padding: 0 9px;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.56);
+    border: 1px solid rgba(69, 53, 39, 0.08);
+    color: var(--fitness-muted);
+    font-size: 0.76rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+
+  .calorie-number {
+    font-size: clamp(2.4rem, 4vw, 3.4rem);
+    font-weight: 600;
+    letter-spacing: -0.08em;
+    line-height: 0.92;
+    color: var(--fitness-text);
+    font-family: var(--mono);
+  }
+
+  .calorie-of {
+    color: var(--fitness-soft);
+    font-size: 0.96rem;
+    font-family: var(--mono);
+  }
+
+  .progress-bar {
+    height: 9px;
+    background: rgba(69, 53, 39, 0.1);
+    border-radius: 999px;
+    overflow: hidden;
+    margin-bottom: 10px;
+  }
+
+  .progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #346c56 0%, #4d8f73 100%);
+    border-radius: inherit;
+    transition: width 500ms ease;
+  }
+
+  .calorie-coach {
+    font-size: 0.94rem;
+    line-height: 1.42;
+    color: var(--fitness-text);
+  }
+
+  .calorie-next,
+  .nudge-link {
+    margin-top: 10px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--fitness-accent);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font-size: 0.92rem;
+    font-weight: 600;
+    font-family: var(--font);
+    text-align: left;
+  }
+
+  .next-arrow {
+    transition: transform 160ms ease;
+  }
+
+  .calorie-next:hover .next-arrow,
+  .nudge-link:hover {
+    transform: translateX(2px);
+  }
+
+  .macro-panel .macro-row {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+    margin-top: 14px;
+  }
+
+  .macro-item {
+    padding: 14px 12px 13px;
+    border: 1px solid rgba(69, 53, 39, 0.08);
+    border-radius: 18px;
+    background: rgba(255, 252, 248, 0.72);
+    display: grid;
+    gap: 0;
+    align-content: start;
+  }
+
+  .macro-card-head {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    margin-bottom: 8px;
+  }
+
+  .macro-bar-wrap {
+    height: 6px;
+    border-radius: 999px;
+    background: rgba(69, 53, 39, 0.09);
+    overflow: hidden;
+    margin-bottom: 11px;
+  }
+
+  .macro-bar-fill { height: 100%; border-radius: inherit; transition: width 500ms ease; }
+  .macro-bar-fill.protein { background: #346c56; }
+  .macro-bar-fill.carbs { background: #c88932; }
+  .macro-bar-fill.fat { background: #8f5d42; }
+  .macro-bar-fill.sugar { background: #b77a38; }
+  .macro-bar-fill.fiber { background: #4c7e5f; }
+
+  .macro-label {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+    flex-wrap: wrap;
+  }
+
+  .macro-current {
+    font-size: 1.08rem;
+    font-weight: 600;
+    color: var(--fitness-text);
+    font-family: var(--mono);
+    line-height: 1;
+  }
+
+  .macro-name {
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    color: #3d2f23;
+  }
+
+  .macro-left {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 20px;
+    padding: 0 7px;
+    border-radius: 999px;
+    background: rgba(64, 50, 38, 0.06);
+    font-size: 0.67rem;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  .macro-target {
+    line-height: 1;
+  }
+
+  .macro-name,
+  .macro-target,
+  .macro-left,
+  .summary-label,
+  .summary-value,
+  .meals-count,
+  .meal-stats,
+  .entry-serving,
+  .entry-note,
+  .list-row-meta,
+  .list-row-sub,
+  .template-hint,
+  .foods-nudge,
+  .resolve-food-detail,
+  .food-edit-label,
+  .food-edit-unit,
+  .resolve-note,
+  .resolve-meal-label,
+  .resolve-total {
+    color: var(--fitness-muted);
+  }
+
+  .macro-guidance {
+    display: grid;
+    gap: 4px;
+    margin-top: 9px;
+    min-height: 38px;
+  }
+
+  .extra-nutrients-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-top: 16px;
+    padding-top: 14px;
+    border-top: 1px solid rgba(69, 53, 39, 0.08);
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--fitness-soft);
+    font-weight: 700;
+  }
+
+  .extra-nutrients-note {
+    color: var(--fitness-muted);
+    letter-spacing: 0.06em;
+  }
+
+  .extra-nutrients-row {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    margin-top: 10px;
+  }
+
+  .extra-item {
+    background: rgba(255, 250, 244, 0.68);
+    padding-top: 12px;
+  }
+
+  .sugar-item {
+    border-color: rgba(183, 122, 56, 0.16);
+  }
+
+  .fiber-item {
+    border-color: rgba(76, 126, 95, 0.16);
+  }
+
+  .macro-instruction,
+  .list-row-name,
+  .entry-name,
+  .meal-name,
+  .resolve-food-name,
+  .resolve-modal-title,
+  .fab-action-name,
+  .fitness-date-readout {
+    color: var(--fitness-text);
+  }
+
+  .summary-list {
+    display: grid;
+    gap: 10px;
+    margin-top: 14px;
+  }
+
+  .summary-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    padding-top: 10px;
+    border-top: 1px solid var(--fitness-line);
+  }
+
+  .summary-label {
+    text-transform: capitalize;
+  }
+
+  .summary-value {
+    font-family: var(--mono);
+  }
+
+  .fitness-workspace {
+    display: grid;
+    gap: 14px;
+  }
+
+  .composer-panel {
+    padding: 18px 20px;
+    background: linear-gradient(180deg, rgba(255,252,248,0.96), rgba(248,242,233,0.9));
+  }
+
+  .starter-panel {
+    padding: 22px;
+    border-radius: 28px;
+    background:
+      radial-gradient(circle at top right, rgba(47, 106, 82, 0.08), transparent 30%),
+      linear-gradient(180deg, rgba(255,252,248,0.96), rgba(246,240,231,0.9));
+    border: 1px solid var(--fitness-line);
+    box-shadow: 0 16px 38px rgba(39, 28, 18, 0.07);
+  }
+
+  .starter-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 18px;
+    align-items: end;
+    margin-bottom: 16px;
+  }
+
+  .starter-header h3 {
+    margin: 8px 0 6px;
+    font-size: 1.5rem;
+    line-height: 1.02;
+    letter-spacing: -0.05em;
+    color: var(--fitness-text);
+  }
+
+  .starter-header p {
+    margin: 0;
+    max-width: 520px;
+    color: var(--fitness-muted);
+    line-height: 1.55;
+  }
+
+  .starter-meals {
+    display: inline-flex;
+    gap: 4px;
+    padding: 4px;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.66);
+    border: 1px solid var(--fitness-line);
+    flex-wrap: wrap;
+  }
+
+  .starter-meal-btn {
+    padding: 8px 12px;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--fitness-muted);
+    text-transform: capitalize;
+    font-size: 0.86rem;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: var(--font);
+    transition: all 160ms ease;
+  }
+
+  .starter-meal-btn.active {
+    background: var(--fitness-accent);
+    color: #f9f6f1;
+  }
+
+  .starter-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .starter-food {
+    padding: 16px;
+    border-radius: 20px;
+    border: 1px solid rgba(44,31,19,0.08);
+    background: rgba(255,255,255,0.78);
+    text-align: left;
+    cursor: pointer;
+    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
+    font-family: var(--font);
+  }
+
+  .starter-food:hover {
+    transform: translateY(-1px);
+    background: rgba(255,255,255,0.94);
+    box-shadow: 0 12px 28px rgba(39, 28, 18, 0.06);
+  }
+
+  .starter-food-name {
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: var(--fitness-text);
+  }
+
+  .starter-food-meta {
+    margin-top: 4px;
+    font-size: 0.88rem;
+    color: var(--fitness-muted);
+  }
+
+  .starter-food-action {
+    margin-top: 12px;
+    font-size: 0.82rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--fitness-accent);
+  }
+
+  .composer-copy {
+    margin-bottom: 10px;
+  }
+
+  .composer-copy h2,
+  .list-stage-header h2 {
+    margin: 6px 0 4px;
+    font-size: clamp(1.5rem, 2vw, 2rem);
+    line-height: 1.02;
+    letter-spacing: -0.05em;
+  }
+
+  .composer-copy p {
+    margin: 0;
+    max-width: 560px;
+    color: var(--fitness-muted);
+    line-height: 1.4;
+    font-size: 0.92rem;
+  }
+
+  .resolve-bar {
+    display: flex;
+    gap: 10px;
+  }
+
+  .resolve-input {
+    flex: 1;
+    padding: 14px 16px;
+    border-radius: 18px;
+    font-size: 1rem;
+    transition: border-color 160ms ease, box-shadow 160ms ease;
+  }
+
+  .resolve-input::placeholder,
+  .search-input::placeholder {
+    color: var(--fitness-soft);
+  }
+
+  .resolve-input:focus,
+  .search-input:focus,
+  .food-edit-input:focus,
+  .entry-qty-input:focus,
+  .resolve-meal-select:focus,
+  .date-input:focus {
+    outline: none;
+    border-color: rgba(47, 106, 82, 0.38);
+    box-shadow: 0 0 0 4px rgba(47, 106, 82, 0.12);
+  }
+
+  .resolve-submit {
+    width: 52px;
+    height: 52px;
+    border-radius: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 160ms ease, opacity 160ms ease;
+    flex-shrink: 0;
+  }
+
+  .resolve-submit:hover:not(:disabled) {
+    transform: translateY(-1px);
+  }
+
+  .resolve-submit:disabled {
+    opacity: 0.45;
+    cursor: default;
+  }
+
+  .resolve-submit svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .resolve-spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid rgba(255,255,255,0.24);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+  }
+
+  .resolve-error {
+    margin-top: 10px;
+    color: #a13e2f;
+    font-size: 0.92rem;
+  }
+
+  .meals-divider {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2px 2px 0;
+  }
+
+  .meals-label {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--fitness-soft);
+  }
+
+  .meal-section {
+    padding: 8px 18px 14px;
+    border-radius: 26px;
+    background: linear-gradient(180deg, rgba(255,252,248,0.95), rgba(251,246,239,0.9));
+  }
+
+  .meal-header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 12px 2px;
+    background: none;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+    font-family: var(--font);
+  }
+
+  .meal-number {
+    width: 38px;
+    height: 38px;
+    border-radius: 999px;
+    background: rgba(69, 53, 39, 0.06);
+    color: var(--fitness-soft);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.82rem;
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+
+  .meal-number.has-entries {
+    background: var(--fitness-accent-soft);
+    color: var(--fitness-accent);
+  }
+
+  .meal-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .meal-top {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .meal-name {
+    font-size: 1.08rem;
+    font-weight: 700;
+    text-transform: capitalize;
+    letter-spacing: -0.03em;
+  }
+
+  .meal-weight {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    border-radius: 999px;
+    padding: 5px 8px;
+  }
+
+  .meal-weight.heavy { background: rgba(161, 62, 47, 0.1); color: #a13e2f; }
+  .meal-weight.moderate { background: rgba(200, 137, 50, 0.12); color: #9f5f18; }
+  .meal-weight.light { background: var(--fitness-accent-soft); color: var(--fitness-accent); }
+  .meal-weight.snack { background: rgba(69, 53, 39, 0.06); color: var(--fitness-muted); }
+
+  .meal-stats {
+    display: inline-block;
+    margin-top: 3px;
+    font-size: 0.92rem;
+  }
+
+  .meal-stats.empty {
+    color: var(--fitness-soft);
+    font-style: normal;
+  }
+
+  .meal-chevron {
+    width: 16px;
+    height: 16px;
+    color: var(--fitness-soft);
+    transition: transform 160ms ease;
+    flex-shrink: 0;
+  }
+
+  .meal-chevron.expanded {
+    transform: rotate(180deg);
+  }
+
+  .meal-entries {
+    display: grid;
+    gap: 10px;
+    padding-left: 14px;
+    border-left: 2px solid rgba(44,31,19,0.09);
+    margin-left: 18px;
+  }
+
+  .entry-wrap {
+    display: grid;
+    gap: 0;
+  }
+
+  .entry-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+    gap: 14px;
+    padding: 14px 16px;
+    border-radius: 18px;
+    background: rgba(255,255,255,0.78);
+    border: 1px solid rgba(44,31,19,0.07);
+    cursor: pointer;
+    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
+  }
+
+  .entry-row:hover {
+    background: rgba(255,255,255,0.94);
+    transform: translateY(-1px);
+    box-shadow: 0 10px 22px rgba(39, 28, 18, 0.06);
+  }
+
+  .entry-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .entry-name {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+  }
+
+  .entry-badge {
+    padding: 4px 7px;
+    border-radius: 999px;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    font-weight: 700;
+  }
+
+  .entry-badge.ai { background: rgba(47, 106, 82, 0.12); color: var(--fitness-accent); }
+  .entry-badge.quick { background: rgba(69, 53, 39, 0.08); color: var(--fitness-muted); }
+
+  .entry-serving,
+  .entry-note {
+    margin-top: 4px;
+    font-size: 0.92rem;
+    line-height: 1.45;
+  }
+
+  .entry-cals {
+    display: flex;
+    align-items: baseline;
+    gap: 3px;
+    flex-shrink: 0;
+    padding-top: 2px;
+  }
+
+  .entry-cal-value {
+    font-size: 1rem;
+    font-weight: 700;
+    font-family: var(--mono);
+    color: var(--fitness-text);
+  }
+
+  .entry-cal-label {
+    font-size: 11px;
+    color: var(--fitness-soft);
+  }
+
+  .entry-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px 0;
+  }
+
+  .entry-qty-control {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .entry-qty-input {
+    width: 74px;
+    padding: 9px 10px;
+    border-radius: 12px;
+    text-align: center;
+    font-family: var(--mono);
+    font-size: 0.96rem;
+  }
+
+  .entry-qty-unit {
+    font-size: 0.9rem;
+    color: var(--fitness-muted);
+  }
+
+  .entry-qty-save,
+  .entry-delete-btn,
+  .btn-secondary,
+  .btn-primary,
+  .log-btn {
+    padding: 10px 14px;
+    border-radius: 14px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    font-family: var(--font);
+    cursor: pointer;
+    transition: transform 160ms ease, opacity 160ms ease, background 160ms ease, color 160ms ease;
+  }
+
+  .entry-qty-save:hover,
+  .btn-primary:hover,
+  .log-btn:hover,
+  .today-btn:hover {
+    opacity: 0.92;
+  }
+
+  .entry-delete-btn,
+  .btn-secondary {
+    background: rgba(255,255,255,0.7);
+    color: #9a4b3f;
+    border: 1px solid rgba(154, 75, 63, 0.16);
+  }
+
+  .entry-delete-btn:hover,
+  .btn-secondary:hover {
+    background: rgba(154, 75, 63, 0.08);
+  }
+
+  .entry-delete-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .entry-delete-btn svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .add-food-btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: center;
+    padding: 14px;
+    border-radius: 18px;
+    border: 1px dashed rgba(47, 106, 82, 0.26);
+    background: rgba(47, 106, 82, 0.04);
+    color: var(--fitness-accent);
+    font-size: 0.92rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 160ms ease, transform 160ms ease;
+    font-family: var(--font);
+  }
+
+  .add-food-btn:hover {
+    background: rgba(47, 106, 82, 0.1);
+    transform: translateY(-1px);
+  }
+
+  .add-food-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .library-stage {
+    display: grid;
+    gap: 14px;
+  }
+
+  .list-stage-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 18px;
+    align-items: end;
+  }
+
+  .list-stage-header h2 {
+    max-width: 640px;
+  }
+
+  .list-header {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+
+  .list-count {
+    color: var(--fitness-muted);
+    font-size: 0.94rem;
+  }
+
+  .search-wrap {
+    flex: 1;
+    position: relative;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    color: var(--fitness-soft);
+    pointer-events: none;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 13px 42px 13px 40px;
+    border-radius: 18px;
+    font-size: 0.96rem;
+    transition: border-color 160ms ease, box-shadow 160ms ease;
+  }
+
+  .search-clear {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--fitness-soft);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .search-clear svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .list-card {
+    overflow: hidden;
+  }
+
+  .list-row {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 16px 18px;
+    border-bottom: 1px solid var(--fitness-line);
+    cursor: pointer;
+    transition: background 160ms ease;
+  }
+
+  .list-row:last-child {
+    border-bottom: none;
+  }
+
+  .list-row:hover {
+    background: rgba(255,255,255,0.54);
+  }
+
+  .list-row.highlighted {
+    background: rgba(47, 106, 82, 0.08);
+  }
+
+  .list-row-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .list-row-name {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+  }
+
+  .list-row-meta {
+    margin-top: 3px;
+    font-size: 0.92rem;
+  }
+
+  .list-row-sub {
+    margin-top: 3px;
+    font-size: 0.82rem;
+  }
+
+  .list-row-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .list-row-value {
+    font-size: 0.9rem;
+    color: var(--fitness-text);
+    font-family: var(--mono);
+  }
+
+  .list-row-chevron {
+    width: 14px;
+    height: 14px;
+    color: var(--fitness-soft);
+  }
+
+  .fav-icon {
+    width: 13px;
+    height: 13px;
+    color: var(--fitness-gold);
+  }
+
+  .empty-state {
+    padding: 36px 24px;
+    text-align: center;
+    color: var(--fitness-muted);
+  }
+
+  .empty-state-rich {
+    display: grid;
+    gap: 8px;
+    justify-items: start;
+    text-align: left;
+    padding: 28px 24px 30px;
+    background:
+      radial-gradient(circle at top right, rgba(47, 106, 82, 0.08), transparent 32%),
+      linear-gradient(180deg, rgba(255,252,248,0.66), rgba(248,243,236,0.44));
+  }
+
+  .empty-state-kicker {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--fitness-soft);
+  }
+
+  .empty-state-rich h3 {
+    margin: 0;
+    font-size: 1.35rem;
+    line-height: 1.05;
+    letter-spacing: -0.05em;
+    color: var(--fitness-text);
+  }
+
+  .empty-state-rich p {
+    margin: 0;
+    max-width: 520px;
+    font-size: 0.96rem;
+    line-height: 1.6;
+    color: var(--fitness-muted);
+  }
+
+  .template-badge {
+    width: 38px;
+    height: 38px;
+    border-radius: 14px;
+    background: rgba(47, 106, 82, 0.1);
+    color: var(--fitness-accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.92rem;
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+
+  .template-meal-label {
+    text-transform: capitalize;
+  }
+
+  .template-hint {
+    margin-top: 5px;
+    color: var(--fitness-accent);
+    font-size: 0.82rem;
+  }
+
+  .log-btn:hover {
+    transform: translateY(-1px);
+  }
+
+  .fab {
+    position: fixed;
+    right: 28px;
+    bottom: 28px;
+    min-height: 54px;
+    padding: 9px 12px 9px 9px;
+    border-radius: 18px;
+    border: 1px solid rgba(35, 26, 17, 0.1);
+    background: linear-gradient(180deg, rgba(255, 251, 245, 0.96) 0%, rgba(245, 237, 228, 0.96) 100%);
+    color: #20170f;
+    box-shadow: 0 14px 30px rgba(35, 26, 17, 0.11);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
+    z-index: 50;
+  }
+
+  .fab:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 22px 42px rgba(35, 26, 17, 0.16);
+  }
+
+  .fab-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .assistant-fab-mark {
+    width: 36px;
+    height: 36px;
+    border-radius: 12px;
+    background: linear-gradient(180deg, #2e6953 0%, #21493b 100%);
+    color: #f8f5f0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
+  }
+
+  .assistant-fab-copy {
+    display: grid;
+    align-content: center;
+    gap: 1px;
+    text-align: left;
+    min-width: 0;
+  }
+
+  .assistant-fab-title {
+    font-size: 0.84rem;
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    color: #1f1710;
+  }
+
+  .assistant-fab-sub {
+    font-size: 0.7rem;
+    color: #746758;
+  }
+
+  .fab-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(18, 12, 8, 0.32);
+    backdrop-filter: blur(8px);
+    z-index: 45;
+    animation: fadeIn 160ms ease;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .fab-sheet {
+    position: fixed;
+    left: 50%;
+    bottom: 18px;
+    transform: translateX(-50%);
+    width: min(720px, calc(100vw - 24px));
+    z-index: 48;
+    border-radius: 28px;
+    padding: 14px;
+    animation: slideUp 180ms ease;
+  }
+
+  @keyframes slideUp {
+    from { transform: translateX(-50%) translateY(18px); opacity: 0; }
+    to { transform: translateX(-50%) translateY(0); opacity: 1; }
+  }
+
+  .fab-sheet-handle {
+    width: 42px;
+    height: 4px;
+    border-radius: 999px;
+    background: rgba(44, 31, 19, 0.16);
+    margin: 4px auto 14px;
+  }
+
+  .fab-action {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px;
+    border: none;
+    border-radius: 18px;
+    background: transparent;
+    cursor: pointer;
+    text-align: left;
+    font-family: var(--font);
+    transition: background 160ms ease;
+  }
+
+  .fab-action:hover {
+    background: rgba(255,255,255,0.56);
+  }
+
+  .fab-action-icon {
+    width: 42px;
+    height: 42px;
+    border-radius: 14px;
+    background: rgba(255,255,255,0.7);
+    border: 1px solid var(--fitness-line);
+    color: var(--fitness-muted);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .fab-action-icon.accent {
+    background: var(--fitness-accent);
+    color: #f9f6f1;
+    border-color: transparent;
+  }
+
+  .fab-action-icon svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .fab-action-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .fab-action-desc {
+    margin-top: 2px;
+    color: var(--fitness-muted);
+    font-size: 0.9rem;
+  }
+
+  .resolve-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(18, 12, 8, 0.34);
+    backdrop-filter: blur(10px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 70;
+    animation: fadeIn 160ms ease;
+  }
+
+  .resolve-modal {
+    width: min(520px, calc(100vw - 24px));
+    border-radius: 28px;
+    overflow: hidden;
+    animation: modalUp 180ms ease;
+  }
+
+  @keyframes modalUp {
+    from { transform: translateY(16px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+
+  .resolve-modal-header,
+  .resolve-modal-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding: 18px 22px;
+    border-bottom: 1px solid var(--fitness-line);
+  }
+
+  .resolve-modal-footer {
+    border-top: 1px solid var(--fitness-line);
+    border-bottom: none;
+  }
+
+  .resolve-modal-close,
+  .resolve-item-remove {
+    width: 32px;
+    height: 32px;
+    border-radius: 999px;
+    border: none;
+    background: transparent;
+    color: var(--fitness-soft);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .resolve-modal-close:hover,
+  .resolve-item-remove:hover {
+    background: rgba(44, 31, 19, 0.06);
+    color: var(--fitness-text);
+  }
+
+  .resolve-modal-close svg,
+  .resolve-item-remove svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .resolve-modal-body {
+    padding: 20px 22px;
+  }
+
+  .resolve-item + .resolve-item {
+    margin-top: 14px;
+    padding-top: 14px;
+    border-top: 1px solid var(--fitness-line);
+  }
+
+  .resolve-item-top {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    align-items: start;
+  }
+
+  .resolve-item-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .resolve-food-name {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .resolve-food-detail {
+    margin-top: 4px;
+    font-size: 0.9rem;
+  }
+
+  .resolve-qty-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 12px;
+  }
+
+  .resolve-qty-btn {
+    width: 30px;
+    height: 30px;
+    border-radius: 999px;
+    border: 1px solid var(--fitness-line);
+    background: rgba(255,255,255,0.8);
+    color: var(--fitness-text);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .resolve-qty-btn:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
+
+  .resolve-qty-value {
+    min-width: 72px;
+    text-align: center;
+    color: var(--fitness-text);
+    font-family: var(--mono);
+    font-size: 0.92rem;
+  }
+
+  .resolve-meal-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 18px;
+    padding-top: 16px;
+    border-top: 1px solid var(--fitness-line);
+  }
+
+  .resolve-meal-select {
+    padding: 10px 12px;
+    border-radius: 14px;
+    font-size: 0.92rem;
+    font-family: var(--font);
+  }
+
+  .resolve-footer-actions {
+    display: flex;
+    gap: 10px;
+  }
+
+  .food-edit-field {
+    display: grid;
+    gap: 6px;
+  }
+
+  .food-edit-input {
+    padding: 12px 14px;
+    border-radius: 14px;
+    font-size: 0.95rem;
+    font-family: var(--font);
+  }
+
+  .food-edit-input[type="number"] {
+    font-family: var(--mono);
+  }
+
+  .food-edit-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    margin-top: 12px;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @media (max-width: 768px) {
+    .macro-panel .macro-row {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 8px;
+      overflow: visible;
+      padding-bottom: 0;
+      margin-right: 0;
+    }
+
+    .macro-item {
+      padding: 12px 10px 11px;
+      border-radius: 16px;
+      min-width: 0;
+    }
+
+    .macro-card-head {
+      gap: 6px;
+      margin-bottom: 8px;
+      align-items: start;
+      flex-direction: column;
+    }
+
+    .macro-label {
+      gap: 4px;
+      align-items: baseline;
+      flex-wrap: wrap;
+    }
+
+    .macro-current {
+      font-size: 0.9rem;
+    }
+
+    .macro-name,
+    .macro-target,
+    .macro-left,
+    .macro-instruction {
+      font-size: 0.74rem;
+      line-height: 1.3;
+    }
+
+    .macro-guidance {
+      margin-top: 6px;
+    }
+
+    .extra-nutrients-head {
+      margin-top: 14px;
+      padding-top: 12px;
+      font-size: 0.68rem;
+      flex-wrap: wrap;
+    }
+
+    .extra-nutrients-row {
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    .calorie-meta-row {
+      gap: 6px;
+      margin-bottom: 10px;
+    }
+
+    .calorie-meta-pill {
+      font-size: 0.72rem;
+      padding: 0 8px;
+    }
+  }
+
+  .summary-list {
+    display: grid;
+    gap: 10px;
+    margin-top: 14px;
+  }
+
+  @media (max-width: 768px) {
+    .fitness-log-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .fitness-shell {
+      padding: 20px 16px 120px;
+    }
+
+    .fitness-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 4px;
+      align-items: center;
+    }
+
+    .list-stage-header {
+      grid-template-columns: 1fr;
+      display: grid;
+      gap: 14px;
+      align-items: start;
+    }
+
+    .fitness-header-side {
+      justify-items: end;
+      width: auto;
+    }
+
+    .fitness-heading {
+      display: block;
+      max-width: none;
+    }
+
+    .fitness-heading h1 {
+      font-size: 2.15rem;
+      margin: 0;
+      line-height: 0.95;
+    }
+
+    .fitness-subcopy {
+      display: none;
+    }
+
+    .fitness-mobile-note {
+      display: none;
+    }
+
+    .date-nav {
+      width: auto;
+      display: grid;
+      grid-template-columns: 28px minmax(146px, auto) 28px auto;
+      gap: 4px;
+      align-items: center;
+    }
+
+    .date-display {
+      min-height: 32px;
+      min-width: 146px;
+      padding: 0 14px;
+      border-radius: 10px;
+      background: rgba(255,255,255,0.62);
+      font-size: 0.84rem;
+    }
+
+    .date-display-text {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .today-btn {
+      min-width: 44px;
+      padding: 6px 8px;
+      font-size: 0.72rem;
+    }
+
+    .btn-icon {
+      width: 28px;
+      height: 28px;
+      border-radius: 10px;
+    }
+
+    .btn-icon svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .fitness-header-side {
+      width: 100%;
+      justify-items: start;
+    }
+
+    .top-tabs {
+      width: 100%;
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      overflow: visible;
+      padding: 4px;
+      gap: 0;
+    }
+
+    .top-tab {
+      width: 100%;
+      min-width: 0;
+      text-align: center;
+      padding: 10px 8px;
+      font-size: 0.84rem;
+    }
+
+    .fitness-rail {
+      position: static;
+      grid-template-columns: 1fr;
+    }
+
+    .rail-panel,
+    .composer-panel,
+    .meal-section,
+    .list-card {
+      border-radius: 24px;
+    }
+
+    .resolve-bar,
+    .list-header,
+    .resolve-modal-footer,
+    .entry-actions,
+    .starter-header {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .starter-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .resolve-submit,
+    .entry-qty-save,
+    .entry-delete-btn,
+    .btn-secondary,
+    .btn-primary,
+    .log-btn {
+      width: 100%;
+      justify-content: center;
+    }
+
+    .meal-entries {
+      margin-left: 10px;
+      padding-left: 10px;
+    }
+
+    .entry-row,
+    .list-row {
+      padding: 14px;
+    }
+
+    .food-edit-row {
+      grid-template-columns: 1fr;
+    }
+
+    .fab {
+      right: 16px;
+      left: auto;
+      bottom: calc(14px + env(safe-area-inset-bottom));
+      min-height: 56px;
+      max-width: calc(100vw - 32px);
+      justify-content: flex-start;
+      box-shadow: 0 14px 28px rgba(35, 26, 17, 0.14);
+    }
+
+    .assistant-fab-title {
+      font-size: 0.9rem;
+    }
+
+    .assistant-fab-sub {
+      font-size: 0.74rem;
+    }
+
+    .fab-sheet {
+      left: 12px;
+      right: 12px;
+      width: auto;
+      transform: none;
+      bottom: 12px;
+    }
+
+    @keyframes slideUp {
+      from { transform: translateY(18px); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
+  }
+</style>
diff --git a/frontend-v2/src/lib/pages/fitness/LegacyFitnessPage.svelte b/frontend-v2/src/lib/pages/fitness/LegacyFitnessPage.svelte
new file mode 100644
index 0000000..0243911
--- /dev/null
+++ b/frontend-v2/src/lib/pages/fitness/LegacyFitnessPage.svelte
@@ -0,0 +1,1605 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack';
+  type FitnessTab = 'log' | 'foods' | 'templates';
+
+  interface FoodEntry {
+    id: string;
+    name: string;
+    serving: string;
+    calories: number;
+    protein: number;
+    carbs: number;
+    fat: number;
+    method: string;
+    image?: string;
+    note?: string;
+    meal: MealType;
+    rawQty: number;
+    rawUnit: string;
+  }
+
+  interface FoodItem {
+    id: string;
+    name: string;
+    info: string;
+    calories: number;
+    favorite?: boolean;
+  }
+
+  interface Template {
+    id: string;
+    name: string;
+    calories: number;
+    items: number;
+    meal: string;
+  }
+
+  const now = new Date();
+  const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+
+  let activeTab = $state<FitnessTab>('log');
+  let selectedDate = $state(todayStr);
+  let expandedMeals = $state<Set<string>>(new Set(['breakfast', 'lunch', 'dinner', 'snack']));
+  let foodSearch = $state('');
+  let highlightTemplate = $state('');
+  let fabOpen = $state(false);
+  let loading = $state(true);
+  let foodsLoading = $state(false);
+  let templatesLoading = $state(false);
+
+  let entries = $state<FoodEntry[]>([]);
+  let goal = $state({ calories: 2000, protein: 150, carbs: 200, fat: 65 });
+  let foods = $state<FoodItem[]>([]);
+  let templates = $state<Template[]>([]);
+
+  // Map backend entry to UI entry
+  function mapEntry(e: any): FoodEntry {
+    return {
+      id: e.id,
+      name: e.snapshot_food_name || 'Unknown',
+      serving: e.serving_description || e.snapshot_serving_label || `${e.quantity || 1} ${e.unit || 'serving'}`,
+      calories: Math.round(e.snapshot_calories || 0),
+      protein: Math.round(e.snapshot_protein || 0),
+      carbs: Math.round(e.snapshot_carbs || 0),
+      fat: Math.round(e.snapshot_fat || 0),
+      method: e.entry_method || 'manual',
+      image: e.food_image_path,
+      note: e.note,
+      meal: (e.meal_type || 'snack') as MealType,
+      rawQty: e.quantity || 1,
+      rawUnit: e.unit || 'serving',
+    };
+  }
+
+  // Map backend food to UI food (handles both /foods and /foods/recent shapes)
+  function mapFood(f: any): FoodItem {
+    const id = f.id || f.food_id || '';
+    const name = f.name || f.snapshot_food_name || 'Unknown';
+    const brand = f.brand ? `${f.brand} · ` : '';
+    const unit = f.base_unit === '100g' ? '100g' : (f.servings?.[0]?.label || f.base_unit || 'serving');
+    return {
+      id,
+      name,
+      info: `${brand}${unit}`,
+      calories: Math.round(f.calories_per_base || 0),
+      favorite: f.is_favorite || false,
+    };
+  }
+
+  // Map backend template to UI template
+  function mapTemplate(t: any): Template {
+    const items = t.items || [];
+    const totalCal = items.reduce((s: number, i: any) => s + (i.snapshot_calories || 0) * (i.quantity || 1), 0);
+    return {
+      id: t.id,
+      name: t.name,
+      calories: Math.round(totalCal),
+      items: items.length,
+      meal: t.meal_type || 'snack',
+    };
+  }
+
+  async function loadDayData() {
+    loading = true;
+    try {
+      const [entriesRes, goalsRes] = await Promise.all([
+        fetch(`/api/fitness/entries?date=${selectedDate}`, { credentials: 'include' }),
+        fetch(`/api/fitness/goals/for-date?date=${selectedDate}`, { credentials: 'include' }),
+      ]);
+      if (entriesRes.ok) {
+        const raw = await entriesRes.json();
+        entries = (Array.isArray(raw) ? raw : []).map(mapEntry);
+      } else {
+        entries = [];
+      }
+      if (goalsRes.ok) {
+        const g = await goalsRes.json();
+        goal = { calories: g.calories || 2000, protein: g.protein || 150, carbs: g.carbs || 200, fat: g.fat || 65 };
+      }
+    } catch { /* silent */ }
+    loading = false;
+  }
+
+  async function loadFoods(query?: string) {
+    foodsLoading = true;
+    try {
+      const url = query
+        ? `/api/fitness/foods/search?q=${encodeURIComponent(query)}&limit=30`
+        : `/api/fitness/foods?limit=100`;
+      const res = await fetch(url, { credentials: 'include' });
+      if (res.ok) {
+        const raw = await res.json();
+        foods = (Array.isArray(raw) ? raw : []).map(mapFood);
+      }
+    } catch { /* silent */ }
+    foodsLoading = false;
+  }
+
+  async function loadTemplates() {
+    templatesLoading = true;
+    try {
+      const res = await fetch('/api/fitness/templates', { credentials: 'include' });
+      if (res.ok) {
+        const raw = await res.json();
+        templates = (Array.isArray(raw) ? raw : []).map(mapTemplate);
+      }
+    } catch { /* silent */ }
+    templatesLoading = false;
+  }
+
+  let expandedEntry = $state<string | null>(null);
+
+  async function deleteEntry(id: string) {
+    expandedEntry = null;
+    entries = entries.filter(e => e.id !== id);
+    try {
+      await fetch(`/api/fitness/entries/${id}`, { method: 'DELETE', credentials: 'include' });
+    } catch {
+      await loadDayData();
+    }
+  }
+
+  let editQtyValue = $state('');
+
+  function toggleEntry(id: string) {
+    if (expandedEntry === id) {
+      expandedEntry = null;
+    } else {
+      expandedEntry = id;
+      const entry = entries.find(e => e.id === id);
+      editQtyValue = entry ? String(entry.rawQty) : '1';
+    }
+  }
+
+  async function updateEntryQty(id: string) {
+    const newQty = parseFloat(editQtyValue);
+    if (!newQty || newQty <= 0) return;
+    expandedEntry = null;
+    try {
+      const res = await fetch(`/api/fitness/entries/${id}`, {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ quantity: newQty }),
+      });
+      if (res.ok) {
+        await loadDayData();
+      }
+    } catch { /* silent */ }
+  }
+
+  async function logTemplate(tpl: Template) {
+    try {
+      const res = await fetch(`/api/fitness/templates/${tpl.id}/log`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ meal_type: tpl.meal, entry_date: selectedDate }),
+      });
+      if (res.ok) {
+        activeTab = 'log';
+        await loadDayData();
+      }
+    } catch { /* silent */ }
+  }
+
+  // ── AI Food Resolve (multi-item) ──
+  interface ResolvedItem {
+    result: any;
+    name: string;
+    qty: number;
+    unit: string;
+    calories: number;
+    protein: number;
+    carbs: number;
+    fat: number;
+  }
+
+  let resolveInput = $state('');
+  let resolveMeal = $state<MealType>('snack');
+  let resolving = $state(false);
+  let resolvedItems = $state<ResolvedItem[]>([]);
+  let resolveError = $state('');
+  let confirmLogging = $state(false);
+
+  function guessCurrentMeal(): MealType {
+    const h = new Date().getHours();
+    if (h >= 6 && h < 11) return 'breakfast';
+    if (h >= 11 && h < 15) return 'lunch';
+    if (h >= 17 && h < 21) return 'dinner';
+    return 'snack';
+  }
+
+  async function splitInputItems(input: string): Promise<string[]> {
+    // Use AI to split multi-item input into individual food items
+    try {
+      const res = await fetch('/api/fitness/foods/split', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ phrase: input }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data.items?.length > 0) return data.items;
+      }
+    } catch { /* fallback below */ }
+    // Fallback: comma split
+    return input.split(/,/).map(s => s.trim()).filter(s => s.length > 0);
+  }
+
+  function resolveToItem(r: any): ResolvedItem {
+    const qty = r.parsed?.quantity || 1;
+    const food = r.matched_food;
+    let cal = 0, pro = 0, carb = 0, f = 0;
+    if (food) {
+      cal = (food.calories_per_base || 0) * qty;
+      pro = (food.protein_per_base || 0) * qty;
+      carb = (food.carbs_per_base || 0) * qty;
+      f = (food.fat_per_base || 0) * qty;
+    } else if (r.ai_estimate) {
+      cal = (r.ai_estimate.calories_per_base || 0) * qty;
+      pro = (r.ai_estimate.protein_per_base || 0) * qty;
+      carb = (r.ai_estimate.carbs_per_base || 0) * qty;
+      f = (r.ai_estimate.fat_per_base || 0) * qty;
+    } else if (r.resolution_type === 'quick_add') {
+      cal = r.parsed?.quantity || 0;
+    }
+    const name = r.snapshot_name_override || food?.name || r.ai_estimate?.food_name || r.raw_text || 'Unknown';
+    return {
+      result: r,
+      name,
+      qty: Math.round(qty * 10) / 10,
+      unit: r.parsed?.unit || 'serving',
+      calories: Math.round(cal),
+      protein: Math.round(pro),
+      carbs: Math.round(carb),
+      fat: Math.round(f),
+    };
+  }
+
+  async function submitResolve() {
+    const phrase = resolveInput.trim();
+    if (!phrase) return;
+    resolving = true;
+    resolveError = '';
+    resolvedItems = [];
+    resolveMeal = guessCurrentMeal();
+
+    const parts = await splitInputItems(phrase);
+
+    try {
+      const results = await Promise.all(parts.map(async (part) => {
+        const res = await fetch('/api/fitness/foods/resolve', {
+          method: 'POST',
+          credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ raw_phrase: part, meal_type: resolveMeal, entry_date: selectedDate }),
+        });
+        if (!res.ok) {
+          if (res.status === 401) throw new Error('Not connected — connect fitness in Settings');
+          throw new Error(`Failed to resolve "${part}" (${res.status})`);
+        }
+        return res.json();
+      }));
+      resolvedItems = results.map(resolveToItem);
+    } catch (e: any) {
+      resolveError = e?.message || 'Network error';
+    }
+    resolving = false;
+  }
+
+  function updateItemQty(index: number, newQty: number) {
+    if (newQty <= 0) return;
+    const item = resolvedItems[index];
+    const r = item.result;
+    const food = r.matched_food;
+    const base = food || r.ai_estimate;
+    if (!base) return;
+    resolvedItems[index] = {
+      ...item,
+      qty: Math.round(newQty * 10) / 10,
+      calories: Math.round((base.calories_per_base || 0) * newQty),
+      protein: Math.round((base.protein_per_base || 0) * newQty),
+      carbs: Math.round((base.carbs_per_base || 0) * newQty),
+      fat: Math.round((base.fat_per_base || 0) * newQty),
+    };
+  }
+
+  function removeItem(index: number) {
+    resolvedItems = resolvedItems.filter((_, i) => i !== index);
+    if (resolvedItems.length === 0) cancelResolve();
+  }
+
+  const resolveTotalCal = $derived(resolvedItems.reduce((s, i) => s + i.calories, 0));
+
+  async function confirmResolve() {
+    if (resolvedItems.length === 0) return;
+    confirmLogging = true;
+    try {
+      for (const item of resolvedItems) {
+        const r = item.result;
+        let body: any;
+        if (r.resolution_type === 'quick_add' && !r.matched_food) {
+          body = {
+            entry_type: 'quick_add',
+            snapshot_food_name: r.raw_text || 'Quick add',
+            snapshot_calories: item.calories,
+            meal_type: resolveMeal,
+            entry_date: selectedDate,
+            source: 'web',
+            raw_text: r.raw_text,
+          };
+        } else if (r.matched_food) {
+          body = {
+            food_id: r.matched_food.id,
+            quantity: item.qty,
+            unit: item.unit,
+            meal_type: resolveMeal,
+            entry_date: selectedDate,
+            entry_method: r.resolution_type === 'ai_estimated' ? 'ai_label' : 'search',
+            source: 'web',
+            raw_text: r.raw_text,
+            confidence_score: r.confidence,
+            note: r.note || undefined,
+            snapshot_food_name_override: r.snapshot_name_override || undefined,
+          };
+        }
+        if (body) {
+          await fetch('/api/fitness/entries', {
+            method: 'POST',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+          });
+        }
+      }
+      resolvedItems = [];
+      resolveInput = '';
+      await loadDayData();
+    } catch { /* silent */ }
+    confirmLogging = false;
+  }
+
+  function cancelResolve() {
+    resolvedItems = [];
+    resolveError = '';
+  }
+
+  // ── Food Edit/Delete ──
+  let editingFood = $state<any>(null);
+  let editFoodName = $state('');
+  let editFoodCal = $state('');
+  let editFoodProtein = $state('');
+  let editFoodCarbs = $state('');
+  let editFoodFat = $state('');
+  let editFoodUnit = $state('');
+  let savingFood = $state(false);
+
+  function openFoodEdit(food: FoodItem) {
+    editingFood = food;
+    editFoodName = food.name;
+    editFoodCal = String(food.calories);
+    editFoodProtein = '';
+    editFoodCarbs = '';
+    editFoodFat = '';
+    editFoodUnit = food.info.split('·').pop()?.trim() || 'serving';
+    // Fetch full food data for macros
+    fetch(`/api/fitness/foods/${food.id}`, { credentials: 'include' })
+      .then(r => r.ok ? r.json() : null)
+      .then(data => {
+        if (data) {
+          editFoodProtein = String(Math.round(data.protein_per_base || 0));
+          editFoodCarbs = String(Math.round(data.carbs_per_base || 0));
+          editFoodFat = String(Math.round(data.fat_per_base || 0));
+          editFoodUnit = data.base_unit || 'serving';
+        }
+      })
+      .catch(() => {});
+  }
+
+  function closeFoodEdit() {
+    editingFood = null;
+  }
+
+  async function saveFoodEdit() {
+    if (!editingFood) return;
+    savingFood = true;
+    try {
+      await fetch(`/api/fitness/foods/${editingFood.id}`, {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: editFoodName.trim(),
+          calories_per_base: parseFloat(editFoodCal) || 0,
+          protein_per_base: parseFloat(editFoodProtein) || 0,
+          carbs_per_base: parseFloat(editFoodCarbs) || 0,
+          fat_per_base: parseFloat(editFoodFat) || 0,
+        }),
+      });
+      editingFood = null;
+      await loadFoods(foodSearch || undefined);
+    } catch { /* silent */ }
+    savingFood = false;
+  }
+
+  async function deleteFood() {
+    if (!editingFood) return;
+    savingFood = true;
+    try {
+      await fetch(`/api/fitness/foods/${editingFood.id}`, {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+      editingFood = null;
+      await loadFoods(foodSearch || undefined);
+    } catch { /* silent */ }
+    savingFood = false;
+  }
+
+  // Reload day data when date changes
+  $effect(() => {
+    selectedDate; // track
+    loadDayData();
+  });
+
+  // Reload foods when search changes (debounced)
+  let foodSearchTimeout: ReturnType<typeof setTimeout>;
+  $effect(() => {
+    const q = foodSearch;
+    clearTimeout(foodSearchTimeout);
+    foodSearchTimeout = setTimeout(() => loadFoods(q || undefined), q ? 300 : 0);
+  });
+
+  onMount(() => {
+    loadTemplates();
+  });
+
+  function jumpToTemplates() {
+    activeTab = 'templates';
+    if (rankedTemplates.length > 0) {
+      highlightTemplate = rankedTemplates[0].name;
+      setTimeout(() => { highlightTemplate = ''; }, 2000);
+    }
+  }
+
+  const filteredFoods = $derived(foods);
+
+  const totals = $derived({
+    calories: entries.reduce((s, e) => s + e.calories, 0),
+    protein: entries.reduce((s, e) => s + e.protein, 0),
+    carbs: entries.reduce((s, e) => s + e.carbs, 0),
+    fat: entries.reduce((s, e) => s + e.fat, 0),
+    count: entries.length
+  });
+
+  const caloriesRemaining = $derived(goal.calories > 0 ? Math.max(goal.calories - totals.calories, 0) : 0);
+  const caloriesPercent = $derived(goal.calories > 0 ? Math.round((totals.calories / goal.calories) * 100) : 0);
+  const isToday = $derived(selectedDate === todayStr);
+
+  function entriesByMeal(meal: MealType) { return entries.filter(e => e.meal === meal); }
+  function mealCalories(meal: MealType) { return entriesByMeal(meal).reduce((s, e) => s + e.calories, 0); }
+  function mealProtein(meal: MealType) { return entriesByMeal(meal).reduce((s, e) => s + e.protein, 0); }
+
+  function toggleMeal(meal: string) {
+    const next = new Set(expandedMeals);
+    if (next.has(meal)) next.delete(meal); else next.add(meal);
+    expandedMeals = next;
+  }
+
+  function shiftDate(days: number) {
+    const d = new Date(selectedDate + 'T00:00:00');
+    d.setDate(d.getDate() + days);
+    selectedDate = d.toISOString().split('T')[0];
+  }
+
+  function formatDate(date: string) {
+    const d = new Date(date + 'T00:00:00');
+    return d.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' });
+  }
+
+  // Action-oriented coaching based on progress
+  function coachMessage(remaining: number, percent: number): string {
+    if (percent >= 100) return 'Done for the day — you hit your goal';
+    if (percent >= 90) return 'Almost done — keep it light';
+    if (percent >= 75) return 'Finish strong — ' + remaining.toLocaleString() + ' cal left';
+    if (percent >= 50) return 'You\'ve got room for a solid meal';
+    if (percent >= 25) return 'On track — plan your next meal';
+    if (percent > 0) return 'Just getting started — ' + remaining.toLocaleString() + ' cal to work with';
+    return 'Start logging to see your progress';
+  }
+
+  // Coaching focus — what the user needs most right now
+  type CoachFocus = 'protein' | 'low_carb' | 'low_fat' | 'light' | 'balanced';
+
+  function getCoachFocus(t: typeof totals, g: typeof goal, calLeft: number): CoachFocus {
+    const proteinPct = t.protein / g.protein;
+    const carbsPct = t.carbs / g.carbs;
+    const fatPct = t.fat / g.fat;
+    if (calLeft < 300) return 'light';
+    if (proteinPct < 0.7) return 'protein';
+    if (carbsPct > 0.8 && proteinPct < 0.8) return 'low_carb';
+    if (fatPct > 0.8) return 'low_fat';
+    return 'balanced';
+  }
+
+  const coachFocus = $derived(getCoachFocus(totals, goal, caloriesRemaining));
+
+  // "Best next move" — realistic meal suggestions
+  function bestNextMove(t: typeof totals, g: typeof goal, calRemaining: number): string {
+    if (calRemaining <= 0) return '';
+
+    const proteinPct = t.protein / g.protein;
+    const carbsPct = t.carbs / g.carbs;
+    const fatPct = t.fat / g.fat;
+    const proteinLeft = Math.max(g.protein - t.protein, 0);
+
+    // Protein-focused — use realistic meal combos
+    if (proteinPct < 0.4 && proteinLeft > 40) {
+      const lo = Math.round(proteinLeft * 0.3);
+      const hi = Math.round(proteinLeft * 0.45);
+      return `Best next: ~${lo}–${hi}g protein (chicken + rice, 3 eggs, or a shake)`;
+    }
+    if (proteinPct < 0.6 && proteinLeft > 25) {
+      const lo = Math.round(proteinLeft * 0.35);
+      const hi = Math.round(proteinLeft * 0.5);
+      return `Best next: ~${lo}–${hi}g protein (chicken, Greek yogurt, or protein shake)`;
+    }
+    if (proteinPct < 0.8 && proteinLeft > 10) {
+      return `Best next: ~${Math.round(proteinLeft * 0.6)}–${proteinLeft}g protein (eggs, yogurt, or tuna)`;
+    }
+
+    // Carbs running high + still need protein
+    if (carbsPct > 0.8 && proteinPct < 0.75) {
+      return 'Best next: skip the carbs — chicken salad, eggs, or a protein shake';
+    }
+
+    // Fat running high
+    if (fatPct > 0.85) {
+      return 'Best next: lean protein + rice or sweet potato — skip the oils';
+    }
+    if (fatPct > 0.7 && carbsPct < 0.5) {
+      return 'Best next: oatmeal, rice bowl, or pasta with grilled chicken';
+    }
+
+    // Low calories remaining
+    if (calRemaining < 200) {
+      return 'Best next: something light — yogurt, fruit, or veggies';
+    }
+    if (calRemaining < 400) {
+      return 'Best next: small meal — salad with chicken, or a shake with fruit';
+    }
+
+    // Everything balanced
+    return 'Best next: balanced plate — protein, carbs, and veggies';
+  }
+
+  // Macro guidance — considers both target gap and calories budget
+  function macroInstruction(macro: 'protein' | 'carbs' | 'fat', current: number, target: number, calLeft: number): string {
+    const pct = Math.round((current / target) * 100);
+    const left = Math.max(target - current, 0);
+    if (pct >= 100) return 'On target';
+
+    const budgetTight = calLeft < 400;
+
+    if (macro === 'protein') {
+      if (pct < 50 && !budgetTight) return 'Prioritize protein';
+      if (pct < 50 && budgetTight) return 'Add lean protein';
+      if (pct < 80) return 'Add protein';
+      return 'Almost there';
+    }
+    if (macro === 'carbs') {
+      if (pct >= 85) return 'Ease off carbs';
+      if (pct >= 70) return 'Watch carbs';
+      return 'Carbs on track';
+    }
+    // fat
+    if (pct >= 85) return 'Keep fats minimal';
+    if (pct >= 70) return 'Keep fats light';
+    return 'Fats on track';
+  }
+
+  function macroLeft(current: number, target: number): string {
+    const left = Math.max(target - current, 0);
+    if (left === 0) return '';
+    return `${left}g left`;
+  }
+
+  // Meal weight label — contextual per meal type
+  function mealWeight(mealCal: number, dailyGoal: number, meal: MealType): string {
+    if (mealCal === 0) return '';
+    const pct = Math.round((mealCal / dailyGoal) * 100);
+
+    if (meal === 'snack') {
+      // Snacks: bias toward Light/Snack
+      if (pct >= 25) return 'Heavy';
+      if (pct >= 12) return 'Moderate';
+      return 'Light';
+    }
+    if (meal === 'breakfast') {
+      // Breakfast: cap at Moderate
+      if (pct >= 30) return 'Moderate';
+      if (pct >= 12) return 'Light';
+      return 'Snack';
+    }
+    // Lunch / Dinner: normal scale
+    if (pct >= 35) return 'Heavy';
+    if (pct >= 20) return 'Moderate';
+    if (pct >= 8) return 'Light';
+    return 'Snack';
+  }
+
+  // Template scoring — decisive ranking aligned with coaching focus
+  function templateScore(tpl: Template, t: typeof totals, g: typeof goal, calLeft: number, focus: CoachFocus): number {
+    let score = 0;
+    const hour = new Date().getHours();
+    const isProteinRich = /protein|chicken|egg|salmon/i.test(tpl.name);
+    const isCarbHeavy = /oatmeal|rice|pasta/i.test(tpl.name);
+
+    // ── Calorie fit (highest weight) ──
+    if (calLeft > 0) {
+      if (tpl.calories <= calLeft) {
+        const ratio = tpl.calories / calLeft;
+        // Perfect fit: within ±15%
+        if (ratio >= 0.85 && ratio <= 1.0) score += 50;
+        // Good fit: within ±30%
+        else if (ratio >= 0.7) score += 35;
+        // Usable: under budget but not close
+        else if (ratio >= 0.4) score += 15;
+      } else {
+        // Over remaining — penalize harder
+        const overBy = (tpl.calories - calLeft) / calLeft;
+        score -= overBy > 0.3 ? 30 : 15;
+      }
+    }
+
+    // ── Coaching alignment (reinforce "Best next" direction) ──
+    if (focus === 'protein' && isProteinRich) score += 35;
+    if (focus === 'protein' && !isProteinRich) score -= 5;
+    if (focus === 'low_carb' && isCarbHeavy) score -= 20;
+    if (focus === 'low_carb' && isProteinRich) score += 20;
+    if (focus === 'low_fat' && isProteinRich) score += 15;
+    if (focus === 'light' && tpl.calories < 350) score += 20;
+    if (focus === 'light' && tpl.calories > 500) score -= 20;
+
+    // ── Time-of-day ──
+    if (tpl.meal === 'breakfast' && hour >= 6 && hour < 11) score += 15;
+    if (tpl.meal === 'lunch' && hour >= 11 && hour < 15) score += 15;
+    if (tpl.meal === 'dinner' && hour >= 17 && hour < 21) score += 15;
+    if (tpl.meal === 'snack' && hour >= 14 && hour < 17) score += 10;
+
+    // ── Macro penalties ──
+    const carbsPct = t.carbs / g.carbs;
+    const fatPct = t.fat / g.fat;
+    if (carbsPct > 0.85 && isCarbHeavy) score -= 15;
+    if (fatPct > 0.85) score -= 5;
+
+    return score;
+  }
+
+  // Sorted templates by score (descending)
+  const rankedTemplates = $derived(
+    [...templates]
+      .map(tpl => ({ tpl, score: templateScore(tpl, totals, goal, caloriesRemaining, coachFocus) }))
+      .sort((a, b) => b.score - a.score)
+      .map(item => item.tpl)
+  );
+
+  // Template hints — selective, max 3 total, top-ranked only
+  function templateHints(ranked: Template[], t: typeof totals, g: typeof goal, calLeft: number): Map<string, string> {
+    const hints = new Map<string, string>();
+    const hour = new Date().getHours();
+    const proteinPct = t.protein / g.protein;
+    const proteinPhrases = ['High protein option', 'Great for protein', 'Helps close your protein gap'];
+    let proteinIdx = 0;
+    const MAX_HINTS = 3;
+
+    // Only consider top-ranked templates for hints
+    const candidates = ranked.slice(0, Math.min(ranked.length, 5));
+
+    for (const tpl of candidates) {
+      if (hints.size >= MAX_HINTS) break;
+
+      // Calorie fit — tight ±15%
+      if (calLeft > 0 && tpl.calories <= calLeft) {
+        const ratio = tpl.calories / calLeft;
+        if (ratio >= 0.85 && ratio <= 1.0) {
+          hints.set(tpl.name, 'Fits your remaining calories');
+          continue;
+        }
+      }
+
+      // Protein hint — varied phrasing, max 2
+      const isProteinRich = /protein|chicken|egg|salmon/i.test(tpl.name);
+      if (isProteinRich && proteinPct < 0.7 && proteinIdx < 2) {
+        hints.set(tpl.name, proteinPhrases[proteinIdx]);
+        proteinIdx++;
+        continue;
+      }
+
+      // Time-of-day — max 1
+      if (!Array.from(hints.values()).some(h => h.startsWith('Good '))) {
+        if (tpl.meal === 'breakfast' && hour >= 6 && hour < 11) { hints.set(tpl.name, 'Good for this morning'); continue; }
+        if (tpl.meal === 'lunch' && hour >= 11 && hour < 15) { hints.set(tpl.name, 'Good for lunch right now'); continue; }
+        if (tpl.meal === 'dinner' && hour >= 17 && hour < 21) { hints.set(tpl.name, 'Good dinner choice'); continue; }
+        if (tpl.meal === 'snack' && hour >= 14 && hour < 17) { hints.set(tpl.name, 'Good afternoon pick-me-up'); continue; }
+      }
+    }
+
+    return hints;
+  }
+
+  const templateHintMap = $derived(templateHints(rankedTemplates, totals, goal, caloriesRemaining));
+
+  const mealTypes: MealType[] = ['breakfast', 'lunch', 'dinner', 'snack'];
+</script>
+
+<div class="page">
+  <div class="app-surface">
+    <!-- Header -->
+    <div class="page-header">
+      <div class="page-title">FITNESS</div>
+      <div class="page-date">{#if isToday}Today{:else}{formatDate(selectedDate)}{/if}</div>
+    </div>
+
+    <!-- Top tabs (subtle) -->
+    <div class="top-tabs">
+      <button class="top-tab" class:active={activeTab === 'log'} onclick={() => activeTab = 'log'}>Food Log</button>
+      <button class="top-tab" class:active={activeTab === 'foods'} onclick={() => activeTab = 'foods'}>Food Library</button>
+      <button class="top-tab" class:active={activeTab === 'templates'} onclick={() => activeTab = 'templates'}>Quick Meals</button>
+    </div>
+
+    <!-- ═══════════════════════════════ -->
+    <!-- TAB: Food Log                   -->
+    <!-- ═══════════════════════════════ -->
+    {#if activeTab === 'log'}
+
+      <!-- Date nav -->
+      <div class="date-nav">
+        <button class="btn-icon" onclick={() => shiftDate(-1)} aria-label="Previous day">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+        </button>
+        <input type="date" class="date-input" bind:value={selectedDate} />
+        <button class="btn-icon" onclick={() => shiftDate(1)} aria-label="Next day">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+        </button>
+        {#if !isToday}
+          <button class="today-btn" onclick={() => selectedDate = todayStr}>Today</button>
+        {/if}
+      </div>
+
+      <!-- Calorie hero -->
+      <div class="calorie-card">
+        <div class="calorie-eaten">
+          <span class="calorie-number">{totals.calories.toLocaleString()}</span>
+          <span class="calorie-of">/ {goal.calories.toLocaleString()}</span>
+        </div>
+        <div class="progress-bar">
+          <div class="progress-fill" style="width:{Math.min(caloriesPercent, 100)}%"></div>
+        </div>
+        <div class="calorie-coach">{coachMessage(caloriesRemaining, caloriesPercent)}</div>
+        {#if caloriesRemaining > 0}
+          {@const hint = bestNextMove(totals, goal, caloriesRemaining)}
+          {#if hint}
+            <button class="calorie-next" onclick={jumpToTemplates}>{hint} <span class="next-arrow">→</span></button>
+          {/if}
+        {/if}
+      </div>
+
+      <!-- AI food input -->
+      <div class="resolve-bar">
+        <input
+          type="text"
+          class="resolve-input"
+          placeholder="Describe your meal... (e.g. 2 eggs and toast)"
+          bind:value={resolveInput}
+          onkeydown={(e) => { if (e.key === 'Enter') submitResolve(); }}
+          disabled={resolving}
+        />
+        <button class="resolve-submit" onclick={submitResolve} disabled={resolving || !resolveInput.trim()}>
+          {#if resolving}
+            <span class="resolve-spinner"></span>
+          {:else}
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+          {/if}
+        </button>
+      </div>
+      {#if resolveError}
+        <div class="resolve-error">{resolveError}</div>
+      {/if}
+
+      <!-- Macros — inline row, not cards -->
+      <div class="macro-row">
+        <div class="macro-item">
+          <div class="macro-bar-wrap">
+            <div class="macro-bar-fill protein" style="width:{Math.min(totals.protein / goal.protein * 100, 100)}%"></div>
+          </div>
+          <div class="macro-label">
+            <span class="macro-current">{totals.protein}g</span>
+            <span class="macro-name">Protein</span>
+          </div>
+          <div class="macro-guidance">
+            <div class="macro-instruction">{macroInstruction('protein', totals.protein, goal.protein, caloriesRemaining)}</div>
+            <div class="macro-left">{macroLeft(totals.protein, goal.protein)}</div>
+          </div>
+        </div>
+        <div class="macro-item">
+          <div class="macro-bar-wrap">
+            <div class="macro-bar-fill carbs" style="width:{Math.min(totals.carbs / goal.carbs * 100, 100)}%"></div>
+          </div>
+          <div class="macro-label">
+            <span class="macro-current">{totals.carbs}g</span>
+            <span class="macro-name">Carbs</span>
+          </div>
+          <div class="macro-guidance">
+            <div class="macro-instruction">{macroInstruction('carbs', totals.carbs, goal.carbs, caloriesRemaining)}</div>
+            <div class="macro-left">{macroLeft(totals.carbs, goal.carbs)}</div>
+          </div>
+        </div>
+        <div class="macro-item">
+          <div class="macro-bar-wrap">
+            <div class="macro-bar-fill fat" style="width:{Math.min(totals.fat / goal.fat * 100, 100)}%"></div>
+          </div>
+          <div class="macro-label">
+            <span class="macro-current">{totals.fat}g</span>
+            <span class="macro-name">Fat</span>
+          </div>
+          <div class="macro-guidance">
+            <div class="macro-instruction">{macroInstruction('fat', totals.fat, goal.fat, caloriesRemaining)}</div>
+            <div class="macro-left">{macroLeft(totals.fat, goal.fat)}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Meals label -->
+      <div class="meals-divider">
+        <span class="meals-label">Meals</span>
+        <span class="meals-count">{totals.count} entries</span>
+      </div>
+
+      <!-- Meal sections -->
+      {#each mealTypes as meal, i}
+        {@const mealEntries = entriesByMeal(meal)}
+        {@const mCal = mealCalories(meal)}
+        {@const mPro = mealProtein(meal)}
+        {@const expanded = expandedMeals.has(meal)}
+        {@const weight = mealWeight(mCal, goal.calories, meal)}
+        {@const mealPct = mCal > 0 ? Math.round((mCal / goal.calories) * 100) : 0}
+
+        <div class="meal-section">
+          <button class="meal-header" onclick={() => toggleMeal(meal)}>
+            <div class="meal-number" class:has-entries={mealEntries.length > 0}>{i + 1}</div>
+            <div class="meal-info">
+              <div class="meal-top">
+                <span class="meal-name">{meal}</span>
+                {#if weight}
+                  <span class="meal-weight {weight.toLowerCase()}">{weight}</span>
+                {/if}
+              </div>
+              {#if mCal > 0}
+                <span class="meal-stats">{Math.round(mCal)} cal · {mealPct}% of daily · {Math.round(mPro)}g protein</span>
+              {:else}
+                <span class="meal-stats empty">No entries yet</span>
+              {/if}
+            </div>
+            <svg class="meal-chevron" class:expanded viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+          </button>
+
+          {#if expanded}
+            <div class="meal-entries">
+              {#if mealEntries.length > 0}
+                {#each mealEntries as entry}
+                  <div class="entry-wrap">
+                    <!-- svelte-ignore a11y_no_static_element_interactions -->
+                    <div class="entry-row" onclick={() => toggleEntry(entry.id)}>
+                      <div class="entry-info">
+                        <div class="entry-name">
+                          {entry.name}
+                          {#if entry.method === 'ai_plate' || entry.method === 'ai_label'}
+                            <span class="entry-badge ai">AI</span>
+                          {/if}
+                          {#if entry.method === 'quick_add'}
+                            <span class="entry-badge quick">quick</span>
+                          {/if}
+                        </div>
+                        <div class="entry-serving">{entry.serving}</div>
+                        {#if entry.note}
+                          <div class="entry-note">{entry.note}</div>
+                        {/if}
+                      </div>
+                      <div class="entry-cals">
+                        <span class="entry-cal-value">{entry.calories}</span>
+                        <span class="entry-cal-label">cal</span>
+                      </div>
+                    </div>
+                    {#if expandedEntry === entry.id}
+                      <div class="entry-actions">
+                        <div class="entry-qty-control">
+                          <input
+                            type="number"
+                            class="entry-qty-input"
+                            bind:value={editQtyValue}
+                            onkeydown={(e) => { if (e.key === 'Enter') updateEntryQty(entry.id); }}
+                            step="0.5"
+                            min="0.1"
+                          />
+                          <span class="entry-qty-unit">{entry.rawUnit}</span>
+                          <button class="entry-qty-save" onclick={() => updateEntryQty(entry.id)}>Save</button>
+                        </div>
+                        <button class="entry-delete-btn" onclick={() => deleteEntry(entry.id)}>
+                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                          Delete
+                        </button>
+                      </div>
+                    {/if}
+                  </div>
+                {/each}
+              {/if}
+
+              <button class="add-food-btn" onclick={() => { resolveMeal = meal; const input = document.querySelector('.resolve-input') as HTMLInputElement; if (input) { input.focus(); input.placeholder = `Add to ${meal}...`; } }}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                Add to {meal}
+              </button>
+            </div>
+          {/if}
+        </div>
+      {/each}
+
+    <!-- ═══════════════════════════════ -->
+    <!-- TAB: Foods (neutral utility)    -->
+    <!-- ═══════════════════════════════ -->
+    {:else if activeTab === 'foods'}
+
+      <div class="foods-nudge">
+        Looking for a quick option? <button class="nudge-link" onclick={() => activeTab = 'templates'}>Try Quick Meals →</button>
+      </div>
+
+      <div class="list-header">
+        <div class="search-wrap">
+          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+          <input type="text" class="search-input" placeholder="Search food library..." bind:value={foodSearch} />
+          {#if foodSearch}
+            <button class="search-clear" onclick={() => foodSearch = ''}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+          {/if}
+        </div>
+      </div>
+
+      <div class="list-card">
+        {#each filteredFoods as food (food.name)}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div class="list-row" onclick={() => openFoodEdit(food)}>
+            <div class="list-row-info">
+              <div class="list-row-name">
+                {food.name}
+                {#if food.favorite}
+                  <svg class="fav-icon" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+                {/if}
+              </div>
+              <div class="list-row-meta">{food.info}</div>
+            </div>
+            <div class="list-row-right">
+              <span class="list-row-value">{food.calories} cal</span>
+              <svg class="list-row-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+            </div>
+          </div>
+        {/each}
+        {#if filteredFoods.length === 0}
+          <div class="empty-state">No foods found for "{foodSearch}"</div>
+        {/if}
+      </div>
+
+    <!-- ═══════════════════════════════ -->
+    <!-- TAB: Templates                  -->
+    <!-- ═══════════════════════════════ -->
+    {:else if activeTab === 'templates'}
+
+      <div class="list-header">
+        <div class="list-count">{#if templatesLoading}Loading...{:else if templates.length === 0}No quick meals yet{:else}{templates.length} go-to meals · ranked for you{/if}</div>
+      </div>
+
+      <div class="list-card">
+        {#each rankedTemplates as tpl}
+          {@const hint = templateHintMap.get(tpl.name) || ''}
+          <div class="list-row" class:highlighted={highlightTemplate === tpl.name}>
+            <div class="template-badge">{tpl.meal.charAt(0).toUpperCase()}</div>
+            <div class="list-row-info">
+              <div class="list-row-name">{tpl.name}</div>
+              <div class="list-row-meta"><span class="template-meal-label">{tpl.meal}</span> · {tpl.calories} cal</div>
+              <div class="list-row-sub">{tpl.items} items</div>
+              {#if hint}
+                <div class="template-hint">{hint}</div>
+              {/if}
+            </div>
+            <div class="list-row-right">
+              <button class="log-btn" onclick={() => logTemplate(tpl)}>Log meal</button>
+              <svg class="list-row-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+            </div>
+          </div>
+        {/each}
+      </div>
+
+    {/if}
+  </div>
+</div>
+
+<!-- FAB — always visible -->
+<button class="fab" class:open={fabOpen} aria-label="Add" onclick={() => fabOpen = !fabOpen}>
+  <svg class="fab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+</button>
+
+<!-- FAB bottom sheet -->
+{#if fabOpen}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="fab-overlay" onclick={() => fabOpen = false}></div>
+  <div class="fab-sheet">
+    <div class="fab-sheet-handle"></div>
+    <button class="fab-action" onclick={() => { fabOpen = false; activeTab = 'log'; }}>
+      <div class="fab-action-icon accent">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+      </div>
+      <div class="fab-action-text">
+        <div class="fab-action-name">Log food</div>
+        <div class="fab-action-desc">Add an entry to your daily log</div>
+      </div>
+    </button>
+    <button class="fab-action" onclick={() => { fabOpen = false; activeTab = 'foods'; foodSearch = ''; }}>
+      <div class="fab-action-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+      </div>
+      <div class="fab-action-text">
+        <div class="fab-action-name">Search food</div>
+        <div class="fab-action-desc">Find a food in your library</div>
+      </div>
+    </button>
+    <button class="fab-action" onclick={() => { fabOpen = false; activeTab = 'foods'; }}>
+      <div class="fab-action-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v6m0 0l3-3m-3 3L9 5"/><rect x="3" y="10" width="18" height="12" rx="2"/></svg>
+      </div>
+      <div class="fab-action-text">
+        <div class="fab-action-name">Create food</div>
+        <div class="fab-action-desc">Add a new food to your library</div>
+      </div>
+    </button>
+    <button class="fab-action" onclick={() => { fabOpen = false; activeTab = 'templates'; }}>
+      <div class="fab-action-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
+      </div>
+      <div class="fab-action-text">
+        <div class="fab-action-name">Create quick meal</div>
+        <div class="fab-action-desc">Save a reusable meal preset</div>
+      </div>
+    </button>
+  </div>
+{/if}
+
+<!-- Food edit modal -->
+{#if editingFood}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="resolve-overlay" onclick={closeFoodEdit}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="resolve-modal" onclick={(e) => e.stopPropagation()}>
+      <div class="resolve-modal-header">
+        <div class="resolve-modal-title">Edit Food</div>
+        <button class="resolve-modal-close" onclick={closeFoodEdit}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+      <div class="resolve-modal-body">
+        <div class="food-edit-field">
+          <label class="food-edit-label">Name</label>
+          <input class="food-edit-input" type="text" bind:value={editFoodName} />
+        </div>
+        <div class="food-edit-row">
+          <div class="food-edit-field">
+            <label class="food-edit-label">Calories</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodCal} />
+          </div>
+          <div class="food-edit-field">
+            <label class="food-edit-label">Protein (g)</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodProtein} />
+          </div>
+        </div>
+        <div class="food-edit-row">
+          <div class="food-edit-field">
+            <label class="food-edit-label">Carbs (g)</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodCarbs} />
+          </div>
+          <div class="food-edit-field">
+            <label class="food-edit-label">Fat (g)</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodFat} />
+          </div>
+        </div>
+        <div class="food-edit-unit">Per 1 {editFoodUnit}</div>
+      </div>
+      <div class="resolve-modal-footer">
+        <button class="entry-delete-btn" onclick={deleteFood} disabled={savingFood}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+          Delete
+        </button>
+        <div class="resolve-footer-actions">
+          <button class="btn-secondary" onclick={closeFoodEdit}>Cancel</button>
+          <button class="btn-primary" onclick={saveFoodEdit} disabled={savingFood}>
+            {savingFood ? 'Saving...' : 'Save'}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<!-- Resolve confirmation modal -->
+{#if resolvedItems.length > 0}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="resolve-overlay" onclick={cancelResolve}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="resolve-modal" onclick={(e) => e.stopPropagation()}>
+      <div class="resolve-modal-header">
+        <div class="resolve-modal-title">
+          {resolvedItems.length === 1 ? 'Confirm entry' : `Confirm ${resolvedItems.length} items`}
+        </div>
+        <button class="resolve-modal-close" onclick={cancelResolve}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+
+      <div class="resolve-modal-body">
+        {#each resolvedItems as item, idx}
+          <div class="resolve-item" class:resolve-item-border={idx > 0}>
+            <div class="resolve-item-top">
+              <div class="resolve-item-info">
+                <div class="resolve-food-name">{item.name}</div>
+                <div class="resolve-food-detail">{item.calories} cal · {item.protein}g P · {item.carbs}g C · {item.fat}g F</div>
+              </div>
+              {#if resolvedItems.length > 1}
+                <button class="resolve-item-remove" onclick={() => removeItem(idx)} aria-label="Remove">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                </button>
+              {/if}
+            </div>
+            <div class="resolve-qty-row">
+              <button class="resolve-qty-btn" onclick={() => updateItemQty(idx, item.qty - 0.5)} disabled={item.qty <= 0.5}>−</button>
+              <span class="resolve-qty-value">{item.qty} {item.unit}</span>
+              <button class="resolve-qty-btn" onclick={() => updateItemQty(idx, item.qty + 0.5)}>+</button>
+            </div>
+          </div>
+        {/each}
+
+        <div class="resolve-meal-row">
+          <span class="resolve-meal-label">Meal</span>
+          <select class="resolve-meal-select" bind:value={resolveMeal}>
+            <option value="breakfast">Breakfast</option>
+            <option value="lunch">Lunch</option>
+            <option value="dinner">Dinner</option>
+            <option value="snack">Snack</option>
+          </select>
+        </div>
+
+        {#if resolvedItems.some(i => i.result.resolution_type === 'ai_estimated')}
+          <div class="resolve-note">Some items estimated by AI — values are approximate</div>
+        {/if}
+      </div>
+
+      <div class="resolve-modal-footer">
+        <div class="resolve-total">{resolveTotalCal} cal total</div>
+        <div class="resolve-footer-actions">
+          <button class="btn-secondary" onclick={cancelResolve}>Cancel</button>
+          <button class="btn-primary" onclick={confirmResolve} disabled={confirmLogging}>
+            {confirmLogging ? 'Logging...' : resolvedItems.length === 1 ? 'Log entry' : `Log ${resolvedItems.length} entries`}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  /* ── Top tabs (subtle segmented control) ── */
+  .top-tabs {
+    display: flex; gap: var(--sp-0.5); margin-bottom: var(--sp-5);
+    border-bottom: 1px solid var(--border); padding-bottom: 0;
+  }
+  .top-tab {
+    flex: 1; padding: 10px 8px 12px; font-size: var(--text-sm); font-weight: 500;
+    color: var(--text-3); background: none; border: none; border-bottom: 2px solid transparent;
+    cursor: pointer; font-family: var(--font); transition: all var(--transition);
+    text-align: center; margin-bottom: -1px;
+  }
+  .top-tab:hover { color: var(--text-2); }
+  .top-tab.active { color: var(--text-1); border-bottom-color: var(--accent); font-weight: 600; }
+
+  /* ── Header ── */
+  .page-date { font-size: var(--text-2xl); font-weight: 300; color: var(--text-1); line-height: 1.2; }
+
+  /* ── Date nav ── */
+  .date-nav { display: flex; align-items: center; gap: var(--sp-1.5); margin-bottom: var(--sp-5); }
+  .btn-icon { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-3); transition: all var(--transition); flex-shrink: 0; }
+  .btn-icon:hover { color: var(--text-1); background: var(--card-hover); }
+  .btn-icon svg { width: 16px; height: 16px; }
+  .date-input { padding: 6px 10px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--text-1); font-size: var(--text-sm); font-family: var(--font); }
+  .today-btn { padding: 6px 12px; border-radius: var(--radius-md); background: var(--accent-bg); color: var(--accent); border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); transition: all var(--transition); }
+  .today-btn:hover { opacity: 0.8; }
+
+  /* ── Calorie hero ── */
+  .calorie-card {
+    background: var(--card); border-radius: var(--radius); padding: var(--sp-6);
+    border: 1px solid var(--border); box-shadow: var(--card-shadow);
+    margin-bottom: var(--sp-4);
+  }
+  .calorie-eaten { display: flex; align-items: baseline; gap: var(--sp-1.5); margin-bottom: 14px; }
+  .calorie-number { font-size: var(--text-3xl); font-weight: 300; font-family: var(--mono); color: var(--text-1); line-height: 1; letter-spacing: -0.02em; }
+  .calorie-of { font-size: var(--text-md); color: var(--text-3); font-family: var(--mono); }
+  .progress-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: var(--sp-3); }
+  .progress-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.6s ease; }
+  .calorie-coach { font-size: var(--text-md); font-weight: 500; color: var(--text-2); line-height: 1.4; }
+  .calorie-next {
+    display: inline-flex; align-items: center; gap: var(--sp-1);
+    font-size: var(--text-sm); color: var(--accent); margin-top: var(--sp-1.5); font-weight: 500; opacity: 0.85;
+    background: none; border: none; padding: 0; cursor: pointer;
+    font-family: var(--font); text-align: left; transition: opacity var(--transition);
+  }
+  .calorie-next:hover { opacity: 1; }
+  .next-arrow { font-size: var(--text-sm); opacity: 0.6; transition: transform var(--transition); }
+  .calorie-next:hover .next-arrow { transform: translateX(2px); opacity: 1; }
+
+  /* ── Macro row (compact, not cards) ── */
+  .macro-row {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
+    margin-bottom: var(--section-gap);
+  }
+  .macro-item {
+    background: var(--card); border-radius: 10px; padding: 14px;
+    border: 1px solid var(--border);
+  }
+  .macro-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
+  .macro-bar-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease; }
+  .macro-bar-fill.protein { background: #8B5CF6; }
+  .macro-bar-fill.carbs { background: #F59E0B; }
+  .macro-bar-fill.fat { background: #3B82F6; }
+  .macro-label { display: flex; align-items: baseline; gap: 5px; margin-bottom: 2px; }
+  .macro-current { font-size: var(--text-md); font-weight: 500; font-family: var(--mono); color: var(--text-1); letter-spacing: -0.01em; }
+  .macro-name { font-size: var(--text-sm); color: var(--text-3); }
+  .macro-guidance { margin-top: var(--sp-2); border-top: 1px solid var(--border); padding-top: var(--sp-2); }
+  .macro-instruction { font-size: var(--text-sm); font-weight: 500; color: var(--text-2); line-height: 1.3; }
+  .macro-left { font-size: var(--text-sm); color: var(--text-3); margin-top: 1px; font-family: var(--mono); }
+
+  /* ── Meals divider ── */
+  .meals-divider {
+    display: flex; align-items: center; justify-content: space-between;
+    margin-bottom: var(--sp-2); padding-bottom: var(--sp-2);
+  }
+  .meals-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
+  .meals-count { font-size: var(--text-sm); color: var(--text-4); }
+
+  /* ── Meal sections ── */
+  .meal-section { margin-bottom: var(--sp-1); }
+  .meal-header {
+    display: flex; align-items: center; gap: var(--sp-3); width: 100%;
+    padding: var(--sp-3) 0; background: none; border: none; cursor: pointer;
+    font-family: var(--font); color: inherit; text-align: left;
+  }
+  .meal-number {
+    width: 32px; height: 32px; border-radius: 50%;
+    background: var(--card-hover); display: flex; align-items: center; justify-content: center;
+    font-size: var(--text-sm); font-weight: 600; color: var(--text-4); flex-shrink: 0;
+    transition: all var(--transition);
+  }
+  .meal-number.has-entries { background: var(--accent-bg); color: var(--accent); }
+  .meal-info { flex: 1; min-width: 0; }
+  .meal-top { display: flex; align-items: center; gap: var(--sp-2); }
+  .meal-name { font-size: var(--text-md); font-weight: 600; color: var(--text-1); text-transform: capitalize; }
+  .meal-weight { font-size: var(--text-xs); font-weight: 600; padding: 1px 7px; border-radius: var(--radius-xs); text-transform: uppercase; letter-spacing: 0.03em; }
+  .meal-weight.heavy { background: rgba(239,68,68,0.1); color: #DC2626; }
+  .meal-weight.moderate { background: rgba(245,158,11,0.1); color: #B45309; }
+  .meal-weight.light { background: rgba(34,197,94,0.1); color: #15803D; }
+  .meal-weight.snack { background: var(--card-hover); color: var(--text-3); }
+  .meal-stats { font-size: var(--text-sm); color: var(--text-3); margin-top: 1px; }
+  .meal-stats.empty { color: var(--text-4); font-style: italic; }
+  .meal-chevron { width: 16px; height: 16px; color: var(--text-4); transition: transform var(--transition); flex-shrink: 0; }
+  .meal-chevron.expanded { transform: rotate(180deg); }
+
+  .meal-entries { padding-left: var(--sp-4); margin-left: var(--sp-4); border-left: 2px solid var(--border); padding-bottom: var(--sp-1.5); }
+
+  .entry-row {
+    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
+    padding: 11px 14px; border-radius: var(--radius-md); background: var(--card);
+    border: 1px solid var(--border); margin-bottom: var(--sp-1); transition: all var(--transition);
+  }
+  .entry-row:hover { background: var(--card-hover); }
+
+  .entry-info { flex: 1; min-width: 0; }
+  .entry-name { font-size: var(--text-base); font-weight: 500; color: var(--text-1); display: flex; align-items: center; gap: var(--sp-1.5); flex-wrap: wrap; }
+  .entry-badge { font-size: var(--text-xs); font-weight: 600; padding: 1px 6px; border-radius: var(--radius-xs); text-transform: uppercase; letter-spacing: 0.03em; }
+  .entry-badge.ai { background: rgba(59,130,246,0.1); color: #3B82F6; }
+  .entry-badge.quick { background: var(--card-hover); color: var(--text-4); }
+  .entry-serving { font-size: var(--text-sm); color: var(--text-3); margin-top: 1px; }
+  .entry-note { font-size: var(--text-sm); color: var(--text-3); font-style: italic; margin-top: 1px; }
+
+  .entry-wrap { margin-bottom: var(--sp-1); }
+  .entry-row { cursor: pointer; }
+  .entry-actions {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: var(--sp-2) var(--sp-3); background: var(--surface-secondary);
+    border: 1px solid var(--border); border-top: none;
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
+  }
+  .entry-wrap:has(.entry-actions) .entry-row {
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+  }
+  .entry-qty-control { display: flex; align-items: center; gap: var(--sp-2); }
+  .entry-qty-input {
+    width: 64px; padding: var(--sp-1.5) var(--sp-2); border-radius: var(--radius-sm);
+    border: 1px solid var(--border); background: var(--card); color: var(--text-1);
+    font-size: var(--text-md); font-family: var(--mono); text-align: center;
+  }
+  .entry-qty-input:focus { outline: none; border-color: var(--accent); }
+  .entry-qty-unit { font-size: var(--text-sm); color: var(--text-3); }
+  .entry-qty-save {
+    padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md);
+    background: var(--accent); color: white; border: none;
+    font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font);
+    transition: opacity var(--transition); white-space: nowrap;
+  }
+  .entry-qty-save:hover { opacity: 0.9; }
+  .entry-delete-btn {
+    display: flex; align-items: center; gap: var(--sp-1.5); padding: var(--sp-2) var(--sp-4);
+    border-radius: var(--radius-md); background: none; border: 1px solid var(--error);
+    color: var(--error); font-size: var(--text-sm); font-weight: 500; cursor: pointer;
+    font-family: var(--font); transition: all var(--transition); white-space: nowrap;
+  }
+  .entry-delete-btn:hover { background: var(--error-dim); }
+  .entry-delete-btn svg { width: 14px; height: 14px; }
+
+  .entry-cals { display: flex; align-items: baseline; gap: 3px; flex-shrink: 0; }
+  .entry-cal-value { font-size: var(--text-md); font-weight: 600; font-family: var(--mono); color: var(--text-1); }
+  .entry-cal-label { font-size: var(--text-xs); color: var(--text-3); }
+
+  .add-food-btn {
+    display: flex; align-items: center; gap: var(--sp-1.5);
+    padding: 10px 14px; margin-top: var(--sp-1); background: none; border: 1px dashed var(--border);
+    border-radius: var(--radius-md); width: 100%;
+    font-size: var(--text-sm); font-weight: 500; color: var(--accent); cursor: pointer;
+    font-family: var(--font); transition: all var(--transition);
+  }
+  .add-food-btn:hover { background: var(--accent-bg); border-color: var(--accent); }
+  .add-food-btn svg { width: 15px; height: 15px; }
+
+  /* ── Foods nudge ── */
+  .foods-nudge { font-size: var(--text-sm); color: var(--text-3); margin-bottom: 14px; }
+  .nudge-link { background: none; border: none; color: var(--accent); font-size: var(--text-sm); font-weight: 500; cursor: pointer; font-family: var(--font); padding: 0; transition: opacity var(--transition); }
+  .nudge-link:hover { opacity: 0.7; }
+
+  /* ── Shared list styles (Foods + Templates) ── */
+  .list-header { display: flex; gap: 10px; align-items: center; margin-bottom: var(--sp-3); }
+  .list-count { flex: 1; font-size: var(--text-sm); color: var(--text-3); }
+  .search-wrap { flex: 1; position: relative; }
+  .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-4); pointer-events: none; }
+  .search-input { width: 100%; padding: 9px 36px 9px 36px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--text-1); font-size: var(--text-sm); font-family: var(--font); transition: all var(--transition); }
+  .search-input::placeholder { color: var(--text-4); }
+  .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
+  .search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-4); padding: 4px; }
+  .search-clear svg { width: 14px; height: 14px; }
+  .btn-primary-sm { padding: 8px 14px; border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); transition: opacity var(--transition); white-space: nowrap; flex-shrink: 0; }
+  .btn-primary-sm:hover { opacity: 0.9; }
+
+  .list-card {
+    background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
+    box-shadow: var(--card-shadow-sm); overflow: hidden;
+  }
+  .list-row {
+    display: flex; align-items: center; gap: 12px;
+    padding: 13px 16px; border-bottom: 1px solid var(--border); cursor: pointer;
+    transition: background var(--transition);
+  }
+  .list-row:last-child { border-bottom: none; }
+  .list-row:hover { background: var(--card-hover); }
+  .list-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 68%, var(--card)); }
+  .list-row:nth-child(even):hover { background: var(--card-hover); }
+  .list-row-info { flex: 1; min-width: 0; }
+  .list-row-name { font-size: var(--text-base); font-weight: 500; color: var(--text-1); display: flex; align-items: center; gap: var(--sp-1.5); }
+  .list-row-meta { font-size: var(--text-sm); color: var(--text-3); margin-top: 1px; }
+  .list-row-right { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
+  .list-row-value { font-size: var(--text-sm); font-family: var(--mono); color: var(--text-2); }
+  .list-row-chevron { width: 14px; height: 14px; color: var(--text-4); opacity: 0.5; }
+  .list-row:hover .list-row-chevron { opacity: 1; }
+  .list-row.highlighted { background: var(--accent-bg); border-bottom-color: color-mix(in srgb, var(--accent) 12%, transparent); animation: highlight-pulse 2s ease-out; }
+  @keyframes highlight-pulse { 0% { box-shadow: 0 0 0 3px rgba(79,70,229,0.15); } 100% { box-shadow: none; } }
+  .fav-icon { width: 13px; height: 13px; color: #F59E0B; flex-shrink: 0; }
+  .empty-state { padding: var(--sp-8); text-align: center; color: var(--text-3); font-size: var(--text-base); }
+
+  .list-row-sub { font-size: var(--text-xs); color: var(--text-4); margin-top: 1px; }
+  .template-meal-label { text-transform: capitalize; }
+  .template-hint { font-size: var(--text-xs); color: var(--accent); margin-top: 3px; font-weight: 500; opacity: 0.75; }
+
+  /* Template-specific */
+  .template-badge {
+    width: 32px; height: 32px; border-radius: var(--radius-md);
+    background: var(--accent-bg); color: var(--accent);
+    display: flex; align-items: center; justify-content: center;
+    font-size: var(--text-sm); font-weight: 700; flex-shrink: 0;
+  }
+  .log-btn {
+    padding: 5px 12px; border-radius: var(--radius-sm); background: var(--accent-bg);
+    color: var(--accent); border: none; font-size: var(--text-sm); font-weight: 600;
+    cursor: pointer; font-family: var(--font); transition: all var(--transition);
+  }
+  .log-btn:hover { background: var(--accent); color: white; }
+
+  /* ── FAB ── */
+  .fab {
+    position: fixed; bottom: 24px; right: 24px; z-index: 50;
+    width: 56px; height: 56px; border-radius: 50%;
+    background: var(--accent); color: white; border: none;
+    box-shadow: 0 8px 24px rgba(79,70,229,0.3); cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    transition: all var(--transition);
+  }
+  .fab:hover { transform: scale(1.06); box-shadow: 0 12px 32px rgba(79,70,229,0.4); }
+  .fab-icon { width: 24px; height: 24px; transition: transform 200ms ease; }
+  .fab.open .fab-icon { transform: rotate(45deg); }
+
+  /* ── FAB bottom sheet ── */
+  .fab-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 45; animation: fadeIn 150ms ease; }
+  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+  .fab-sheet {
+    position: fixed; bottom: 0; left: 0; right: 0; z-index: 48;
+    background: var(--surface); border-top-left-radius: 20px; border-top-right-radius: 20px;
+    padding: 12px 16px 28px; box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
+    animation: slideUp 200ms ease;
+  }
+  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
+  .fab-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto var(--sp-4); }
+
+  .fab-action {
+    display: flex; align-items: center; gap: 14px; width: 100%;
+    padding: 14px 12px; border-radius: var(--radius); background: none; border: none;
+    cursor: pointer; font-family: var(--font); text-align: left;
+    transition: background var(--transition);
+  }
+  .fab-action:hover { background: var(--card-hover); }
+
+  .fab-action-icon {
+    width: 40px; height: 40px; border-radius: 10px;
+    background: var(--card); border: 1px solid var(--border);
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0; color: var(--text-3);
+  }
+  .fab-action-icon.accent { background: var(--accent); border-color: var(--accent); color: white; }
+  .fab-action-icon svg { width: 18px; height: 18px; }
+
+  .fab-action-text { flex: 1; min-width: 0; }
+  .fab-action-name { font-size: var(--text-md); font-weight: 500; color: var(--text-1); }
+  .fab-action-desc { font-size: var(--text-sm); color: var(--text-3); margin-top: 1px; }
+
+  /* ── AI Resolve bar ── */
+  .resolve-bar {
+    display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4);
+  }
+  .resolve-input {
+    flex: 1; padding: 10px 14px; border-radius: var(--radius); border: 1.5px solid var(--border);
+    background: var(--card); color: var(--text-1); font-size: var(--text-md); font-family: var(--font);
+    transition: all var(--transition);
+  }
+  .resolve-input::placeholder { color: var(--text-4); }
+  .resolve-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
+  .resolve-submit {
+    width: 42px; height: 42px; border-radius: var(--radius); background: var(--accent); color: white;
+    border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
+    transition: opacity var(--transition); flex-shrink: 0;
+  }
+  .resolve-submit:disabled { opacity: 0.4; cursor: default; }
+  .resolve-submit svg { width: 18px; height: 18px; }
+  .resolve-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .resolve-error { font-size: var(--text-sm); color: var(--error); margin-top: calc(-1 * var(--sp-3)); margin-bottom: var(--sp-3); }
+
+  /* ── Resolve modal ── */
+  .resolve-overlay {
+    position: fixed; inset: 0; background: var(--overlay); z-index: 70;
+    display: flex; align-items: center; justify-content: center; animation: resolveFade 150ms ease;
+  }
+  @keyframes resolveFade { from { opacity: 0; } to { opacity: 1; } }
+  .resolve-modal {
+    width: 420px; max-width: 92vw; background: var(--surface); border-radius: var(--radius);
+    box-shadow: var(--shadow-xl); animation: resolveSlide 200ms ease;
+  }
+  @keyframes resolveSlide { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+  .resolve-modal-header {
+    display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
+  }
+  .resolve-modal-title { font-size: var(--text-md); font-weight: 600; color: var(--text-1); }
+  .resolve-modal-close { background: none; border: none; cursor: pointer; color: var(--text-3); padding: var(--sp-1); border-radius: var(--radius-sm); }
+  .resolve-modal-close:hover { color: var(--text-1); background: var(--card-hover); }
+  .resolve-modal-close svg { width: 18px; height: 18px; }
+  .resolve-modal-body { padding: var(--sp-5); }
+  .resolve-item { padding-bottom: var(--sp-3); }
+  .resolve-item-border { padding-top: var(--sp-3); border-top: 1px solid var(--border); }
+  .resolve-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
+  .resolve-item-info { flex: 1; min-width: 0; }
+  .resolve-item-remove { background: none; border: none; cursor: pointer; color: var(--text-4); padding: var(--sp-1); border-radius: var(--radius-xs); flex-shrink: 0; }
+  .resolve-item-remove:hover { color: var(--error); background: var(--error-dim); }
+  .resolve-item-remove svg { width: 14px; height: 14px; }
+  .resolve-food-name { font-size: var(--text-base); font-weight: 600; color: var(--text-1); line-height: 1.3; }
+  .resolve-food-detail { font-size: var(--text-sm); color: var(--text-3); margin-top: 2px; font-family: var(--mono); }
+  .resolve-qty-row {
+    display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2);
+  }
+  .resolve-qty-btn {
+    width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border);
+    background: var(--card); color: var(--text-2); font-size: var(--text-md); font-weight: 600;
+    display: flex; align-items: center; justify-content: center; cursor: pointer;
+    transition: all var(--transition);
+  }
+  .resolve-qty-btn:hover { background: var(--card-hover); color: var(--text-1); }
+  .resolve-qty-btn:disabled { opacity: 0.3; cursor: default; }
+  .resolve-qty-value { font-size: var(--text-sm); font-family: var(--mono); color: var(--text-2); min-width: 60px; text-align: center; }
+  .resolve-meal-row {
+    display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-4);
+    padding-top: var(--sp-3); border-top: 1px solid var(--border);
+  }
+  .resolve-meal-label { font-size: var(--text-sm); color: var(--text-3); }
+  .resolve-meal-select {
+    padding: var(--sp-1.5) var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--border);
+    background: var(--card); color: var(--text-1); font-size: var(--text-sm); font-family: var(--font); cursor: pointer;
+  }
+  .resolve-note { font-size: var(--text-sm); color: var(--text-3); font-style: italic; margin-top: var(--sp-3); }
+  /* ── Food edit modal ── */
+  .food-edit-field { display: flex; flex-direction: column; gap: var(--sp-1); }
+  .food-edit-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-3); }
+  .food-edit-input {
+    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--border);
+    background: var(--surface-secondary); color: var(--text-1); font-size: var(--text-md); font-family: var(--font);
+  }
+  .food-edit-input:focus { outline: none; border-color: var(--accent); }
+  .food-edit-input[type="number"] { font-family: var(--mono); }
+  .food-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-3); }
+  .food-edit-field:first-child:not(:last-child) { margin-bottom: 0; }
+  .food-edit-unit { font-size: var(--text-sm); color: var(--text-4); margin-top: var(--sp-3); font-style: italic; }
+
+  .resolve-modal-footer {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border);
+  }
+  .resolve-total { font-size: var(--text-sm); font-weight: 600; font-family: var(--mono); color: var(--text-1); }
+  .resolve-footer-actions { display: flex; gap: var(--sp-2); }
+
+  /* ── Mobile ── */
+  @media (max-width: 768px) {
+    .page-date { font-size: var(--text-xl); }
+    .calorie-number { font-size: var(--text-3xl); }
+    .calorie-card { padding: 20px 16px; }
+    .macro-row { gap: var(--sp-2); }
+    .macro-item { padding: var(--sp-3); }
+    .macro-current { font-size: var(--text-base); }
+    .meal-entries { padding-left: var(--sp-3); margin-left: var(--sp-3); }
+    .entry-row { padding: 10px 12px; }
+    .top-tab { font-size: var(--text-sm); }
+    .list-header { flex-direction: column; }
+    .fab { bottom: 80px; right: 16px; width: 52px; height: 52px; }
+    .fab svg { width: 22px; height: 22px; }
+  }
+</style>
diff --git a/frontend-v2/src/lib/pages/inventory/AtelierInventoryPage.svelte b/frontend-v2/src/lib/pages/inventory/AtelierInventoryPage.svelte
new file mode 100644
index 0000000..20e945d
--- /dev/null
+++ b/frontend-v2/src/lib/pages/inventory/AtelierInventoryPage.svelte
@@ -0,0 +1,1054 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/state';
+  import ImmichPicker from '$lib/components/shared/ImmichPicker.svelte';
+
+  interface InventoryItem {
+    id: number;
+    name: string;
+    order: string;
+    sku: string;
+    serial: string;
+    status: string;
+    price: number;
+    tax: number;
+    total: number;
+    qty: number;
+    tracking: string;
+    vendor: string;
+    buyerName: string;
+    date: string;
+    notes: string;
+    photos: number;
+    photoUrls: string[];
+  }
+
+  interface ItemDetailRaw {
+    Id: number;
+    Item: string;
+    'Order Number': string;
+    'Serial Numbers': string;
+    SKU: string;
+    Received: string;
+    'Price Per Item': number;
+    Tax: number;
+    Total: number;
+    QTY: number;
+    'Tracking Number': string;
+    Source: string;
+    Name: string;
+    Date: string;
+    Notes: string;
+    photos: any[];
+    [key: string]: any;
+  }
+
+  let activeTab = $state<'issues' | 'review' | 'all'>('issues');
+  let searchQuery = $state('');
+  let detailOpen = $state(false);
+  let selectedItem = $state<InventoryItem | null>(null);
+  let selectedDetail = $state<ItemDetailRaw | null>(null);
+  let nocodbUrl = $state('');
+
+  let recentItems = $state<InventoryItem[]>([]);
+  let issueItems = $state<InventoryItem[]>([]);
+  let reviewItems = $state<InventoryItem[]>([]);
+  let recentLoaded = $state(false);
+  let loading = $state(true);
+  let searching = $state(false);
+  let searchResults = $state<InventoryItem[] | null>(null);
+  let saving = $state(false);
+  let debounceTimer: ReturnType<typeof setTimeout>;
+
+  const issueCount = $derived(issueItems.length);
+  const reviewCount = $derived(reviewItems.length);
+  const recentCount = $derived(recentItems.length);
+
+  const displayedItems = $derived(() => {
+    if (searchResults !== null) return searchResults;
+    if (activeTab === 'issues') return issueItems;
+    if (activeTab === 'review') return reviewItems;
+    return recentItems;
+  });
+  const activeCount = $derived(displayedItems().length);
+
+  function mapIssue(raw: any): InventoryItem {
+    return {
+      id: raw.id,
+      name: raw.item || '',
+      order: raw.orderNumber || '',
+      sku: raw.sku || '',
+      serial: raw.serialNumbers || '',
+      status: normalizeStatus(raw.received || ''),
+      price: 0,
+      tax: 0,
+      total: 0,
+      qty: 1,
+      tracking: raw.trackingNumber || '',
+      vendor: '',
+      buyerName: '',
+      date: '',
+      notes: raw.notes || '',
+      photos: 0,
+      photoUrls: []
+    };
+  }
+
+  const NOCODB_BASE = 'https://noco.quadjourney.com';
+
+  function extractPhotoUrls(photos: any[]): string[] {
+    if (!Array.isArray(photos)) return [];
+    return photos
+      .filter((p: any) => p && p.signedPath)
+      .map((p: any) => `${NOCODB_BASE}/${p.signedPath}`);
+  }
+
+  function mapDetail(raw: ItemDetailRaw): InventoryItem {
+    const photoUrls = extractPhotoUrls(raw.photos);
+    return {
+      id: raw.Id,
+      name: raw.Item || '',
+      order: raw['Order Number'] || '',
+      sku: raw.SKU || '',
+      serial: raw['Serial Numbers'] || '',
+      status: normalizeStatus(raw.Received || ''),
+      price: raw['Price Per Item'] || 0,
+      tax: raw.Tax || 0,
+      total: raw.Total || 0,
+      qty: raw.QTY || 1,
+      tracking: raw['Tracking Number'] || '',
+      vendor: raw.Source || '',
+      buyerName: raw.Name || '',
+      date: raw.Date || '',
+      notes: raw.Notes || '',
+      photos: Array.isArray(raw.photos) ? raw.photos.length : 0,
+      photoUrls
+    };
+  }
+
+  function normalizeStatus(received: string): string {
+    if (!received) return 'Pending';
+    const lower = received.toLowerCase();
+    if (lower === 'issue' || lower === 'issues') return 'Issue';
+    if (lower === 'needs review') return 'Needs Review';
+    if (lower === 'pending') return 'Pending';
+    if (lower === 'closed') return 'Closed';
+    return 'Received';
+  }
+
+  async function loadSummary() {
+    try {
+      const res = await fetch('/api/inventory/summary', { credentials: 'include' });
+      if (res.ok) {
+        const data = await res.json();
+        issueItems = (data.issues || []).map(mapIssue);
+        reviewItems = (data.needsReview || []).map(mapIssue);
+      }
+    } catch { /* silent */ }
+  }
+
+  function mapSearchResult(r: any): InventoryItem {
+    return {
+      id: r.id,
+      name: r.item || '',
+      order: '', sku: '', serial: '',
+      status: normalizeStatus(r.received || ''),
+      price: 0, tax: 0, total: 0, qty: 1,
+      tracking: '', vendor: '', buyerName: '', date: '',
+      notes: '', photos: 0, photoUrls: []
+    };
+  }
+
+  async function loadRecent() {
+    if (recentLoaded) return;
+    try {
+      const res = await fetch('/api/inventory/recent?limit=30', { credentials: 'include' });
+      if (res.ok) {
+        const data = await res.json();
+        recentItems = (data.items || []).map(mapSearchResult);
+        recentLoaded = true;
+      }
+    } catch { /* silent */ }
+  }
+
+  async function searchItems(query: string) {
+    if (!query.trim()) { searchResults = null; return; }
+    searching = true;
+    try {
+      const res = await fetch(`/api/inventory/search-records?q=${encodeURIComponent(query)}`, { credentials: 'include' });
+      if (res.ok) {
+        const data = await res.json();
+        searchResults = (data.results || []).map((r: any) => ({
+          id: r.id,
+          name: r.item || '',
+          order: '', sku: '', serial: '',
+          status: normalizeStatus(r.received || ''),
+          price: 0, tax: 0, total: 0, qty: 1,
+          tracking: '', vendor: '', buyerName: '', date: '',
+          notes: '', photos: 0, photoUrls: []
+        }));
+      }
+    } catch { searchResults = []; }
+    finally { searching = false; }
+  }
+
+  async function loadItemDetail(id: number) {
+    try {
+      const res = await fetch(`/api/inventory/item-details/${id}`, { credentials: 'include' });
+      if (res.ok) {
+        const data = await res.json();
+        selectedDetail = data.item;
+        selectedItem = mapDetail(data.item);
+        activePhoto = 0;
+        nocodbUrl = data.nocodb_url || '';
+        detailOpen = true;
+      }
+    } catch { /* silent */ }
+  }
+
+  async function updateField(field: string, value: string | number) {
+    if (!selectedItem) return;
+    saving = true;
+    try {
+      const res = await fetch(`/api/inventory/item/${selectedItem.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ [field]: value }),
+        credentials: 'include'
+      });
+      if (res.ok && selectedDetail) {
+        (selectedDetail as any)[field] = value;
+        selectedItem = mapDetail(selectedDetail);
+      }
+    } catch { /* silent */ }
+    finally { saving = false; }
+  }
+
+  function onSearchInput() {
+    clearTimeout(debounceTimer);
+    if (!searchQuery.trim()) { searchResults = null; return; }
+    debounceTimer = setTimeout(() => searchItems(searchQuery), 300);
+  }
+
+  function openDetail(item: InventoryItem) {
+    loadItemDetail(item.id);
+  }
+
+  async function refreshVisibleData() {
+    await loadSummary();
+    if (activeTab === 'all') {
+      recentLoaded = false;
+      await loadRecent();
+    }
+    if (searchQuery.trim()) {
+      await searchItems(searchQuery);
+    }
+  }
+
+  async function closeDetail() {
+    await refreshVisibleData();
+    detailOpen = false;
+    selectedItem = null;
+    selectedDetail = null;
+    activePhoto = 0;
+  }
+
+  const statusOptions = ['Issue', 'Needs Review', 'Pending', 'Received', 'Closed'];
+
+  function statusToReceived(status: string): string {
+    if (status === 'Issue') return 'Issues';
+    if (status === 'Needs Review') return 'Needs Review';
+    if (status === 'Pending') return 'Pending';
+    if (status === 'Closed') return 'Closed';
+    return new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  }
+
+  async function changeStatus(newStatus: string) {
+    if (!selectedItem) return;
+    const receivedValue = statusToReceived(newStatus);
+    await updateField('Received', receivedValue);
+  }
+
+  function statusColor(status: string) {
+    if (status === 'Issue' || status === 'Issues') return 'error';
+    if (status === 'Needs Review') return 'warning';
+    if (status === 'Received') return 'success';
+    if (status === 'Pending') return 'warning';
+    if (status === 'Closed') return 'muted';
+    return 'muted';
+  }
+
+  function formatPrice(n: number) {
+    return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  }
+
+  let editingField = $state('');
+  let editValue = $state('');
+
+  const editableFields: Record<string, { nocoField: string; type: 'text' | 'number' }> = {
+    'Item': { nocoField: 'Item', type: 'text' },
+    'Price Per Item': { nocoField: 'Price Per Item', type: 'number' },
+    'Tax': { nocoField: 'Tax', type: 'number' },
+    'Total': { nocoField: 'Total', type: 'number' },
+    'QTY': { nocoField: 'QTY', type: 'number' },
+    'SKU': { nocoField: 'SKU', type: 'text' },
+    'Serial Numbers': { nocoField: 'Serial Numbers', type: 'text' },
+    'Order Number': { nocoField: 'Order Number', type: 'text' },
+    'Source': { nocoField: 'Source', type: 'text' },
+    'Name': { nocoField: 'Name', type: 'text' },
+    'Date': { nocoField: 'Date', type: 'text' },
+    'Tracking Number': { nocoField: 'Tracking Number', type: 'text' },
+    'Notes': { nocoField: 'Notes', type: 'text' },
+  };
+
+  function startEdit(nocoField: string, currentValue: any) {
+    editingField = nocoField;
+    editValue = currentValue != null ? String(currentValue) : '';
+  }
+
+  async function saveEdit() {
+    if (!editingField || !selectedItem) return;
+    const field = editableFields[editingField];
+    const value = field?.type === 'number' ? Number(editValue) || 0 : editValue;
+    await updateField(editingField, value);
+    editingField = '';
+    editValue = '';
+  }
+
+  function handleEditKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') saveEdit();
+    if (e.key === 'Escape') { editingField = ''; editValue = ''; }
+  }
+
+  function rawField(field: string): any {
+    return selectedDetail ? (selectedDetail as any)[field] : '';
+  }
+
+  async function duplicateItem() {
+    if (!selectedItem) return;
+    saving = true;
+    try {
+      const res = await fetch(`/api/inventory/duplicate/${selectedItem.id}`, {
+        method: 'POST', credentials: 'include'
+      });
+      if (res.ok) {
+        const data = await res.json();
+        const newId = data.newId || data.id;
+        if (newId) loadItemDetail(newId);
+      }
+    } catch { /* silent */ }
+    finally { saving = false; }
+  }
+
+  async function sendToPhone() {
+    if (!selectedItem) return;
+    saving = true;
+    try {
+      await fetch('/api/inventory/send-to-phone', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ rowId: selectedItem.id }),
+        credentials: 'include'
+      });
+    } catch { /* silent */ }
+    finally { saving = false; }
+  }
+
+  let fileInput: HTMLInputElement;
+  let uploading = $state(false);
+  let uploadMenuOpen = $state(false);
+  let immichOpen = $state(false);
+  let activePhoto = $state(0);
+
+  function triggerUpload() {
+    fileInput?.click();
+  }
+
+  async function handleFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (!input.files?.length || !selectedItem) return;
+    uploading = true;
+    try {
+      const formData = new FormData();
+      formData.append('rowId', String(selectedItem.id));
+      for (const file of input.files) formData.append('photos', file);
+      const res = await fetch('/api/inventory/upload', {
+        method: 'POST',
+        body: formData,
+        credentials: 'include'
+      });
+      if (res.ok) loadItemDetail(selectedItem.id);
+    } catch { /* silent */ }
+    finally {
+      uploading = false;
+      input.value = '';
+    }
+  }
+
+  async function handleImmichSelect(assetIds: string[]) {
+    if (!selectedItem || !assetIds.length) return;
+    uploading = true;
+    try {
+      await fetch('/api/inventory/upload-from-immich', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ rowId: selectedItem.id, assetIds, deleteAfter: true })
+      });
+      loadItemDetail(selectedItem.id);
+    } catch { /* silent */ }
+    finally { uploading = false; }
+  }
+
+  async function createNewItem() {
+    saving = true;
+    try {
+      const res = await fetch('/api/inventory/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ Item: 'New Item' }),
+        credentials: 'include'
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data.id) loadItemDetail(data.id);
+      }
+    } catch { /* silent */ }
+    finally { saving = false; }
+  }
+
+  onMount(async () => {
+    await loadSummary();
+    loading = false;
+    const itemId = page.url.searchParams.get('item');
+    if (itemId) loadItemDetail(Number(itemId));
+  });
+</script>
+
+{#snippet editableRow(nocoField: string, displayValue: string, classes: string)}
+  {#if editingField === nocoField}
+    <div class="detail-row editing">
+      <span class="field-label">{nocoField}</span>
+      <input
+        class="edit-input {classes}"
+        type={editableFields[nocoField]?.type === 'number' ? 'number' : 'text'}
+        bind:value={editValue}
+        onkeydown={handleEditKeydown}
+        onblur={saveEdit}
+        autofocus
+      />
+    </div>
+  {:else}
+    <div class="detail-row editable" onclick={() => startEdit(nocoField, rawField(nocoField))}>
+      <span class="field-label">{nocoField}</span>
+      <span class="field-value {classes}">{displayValue}</span>
+    </div>
+  {/if}
+{/snippet}
+
+<div class="page">
+  <div class="app-surface">
+    <section class="inventory-command reveal">
+      <div class="command-copy">
+        <div class="command-label">Atelier inventory</div>
+        <h1>Inventory</h1>
+        <p>Review blockers, verify arrivals, and open records without leaving the live operating queue.</p>
+      </div>
+      <div class="command-actions">
+        <div class="command-kicker">Live queue</div>
+        <div class="command-stats">{issueCount + reviewCount} active · {recentCount} recent</div>
+        <button class="btn-primary intro-btn" onclick={createNewItem}>New item</button>
+      </div>
+    </section>
+
+    <section class="signal-strip stagger">
+      <button class="signal-card" class:active={activeTab === 'issues'} onclick={() => activeTab = 'issues'}>
+        <div class="signal-topline">
+          <div class="signal-label">Issues</div>
+          <div class="signal-value">{issueCount}</div>
+        </div>
+        <div class="signal-note">Blocked items that need a decision now.</div>
+      </button>
+      <button class="signal-card" class:active={activeTab === 'review'} onclick={() => activeTab = 'review'}>
+        <div class="signal-topline">
+          <div class="signal-label">Needs review</div>
+          <div class="signal-value">{reviewCount}</div>
+        </div>
+        <div class="signal-note">Arrivals waiting on confirmation, cleanup, or sorting.</div>
+      </button>
+      <button class="signal-card" class:active={activeTab === 'all'} onclick={() => { activeTab = 'all'; loadRecent(); }}>
+        <div class="signal-topline">
+          <div class="signal-label">Recent</div>
+          <div class="signal-value">{recentCount}</div>
+        </div>
+        <div class="signal-note">Fresh records for context beyond the active queues.</div>
+      </button>
+    </section>
+
+    <section class="inventory-layout">
+      <div class="inventory-main">
+        <div class="toolbar-card">
+          <div class="toolbar-head">
+            <div>
+              <div class="toolbar-label">Lookup</div>
+              <div class="toolbar-title">Search and open records</div>
+            </div>
+            <div class="toolbar-meta">
+              {#if searchQuery && searchResults !== null}
+                {activeCount} result{activeCount !== 1 ? 's' : ''}
+              {:else}
+                Showing {activeCount}
+              {/if}
+            </div>
+          </div>
+
+          <div class="search-wrap">
+            <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+            <input
+              type="text"
+              class="search-input"
+              placeholder="Search by item name, order number, serial number, SKU..."
+              bind:value={searchQuery}
+              oninput={onSearchInput}
+            />
+            {#if searchQuery}
+              <button class="search-clear" onclick={() => { searchQuery = ''; searchResults = null; }}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            {/if}
+          </div>
+
+          {#if searchQuery && searchResults !== null}
+            <div class="search-results-label">{displayedItems().length} result{displayedItems().length !== 1 ? 's' : ''} for "{searchQuery}"</div>
+          {/if}
+        </div>
+
+        <div class="queue-header">
+          <div>
+            <div class="queue-label">Working queue</div>
+            <div class="queue-title">
+              {#if activeTab === 'issues'}
+                Items with blockers
+              {:else if activeTab === 'review'}
+                Items waiting on verification
+              {:else}
+                Recent inventory records
+              {/if}
+            </div>
+            <div class="queue-summary">
+              {#if activeTab === 'issues'}
+                Direct triage for damaged, mismatched, or unresolved items.
+              {:else if activeTab === 'review'}
+                Validate condition, fields, and photos before records settle.
+              {:else}
+                Recent records from the live inventory feed.
+              {/if}
+            </div>
+          </div>
+          <div class="queue-freshness">{loading ? 'Syncing…' : 'Live from inventory API'}</div>
+        </div>
+
+        <div class="items-card">
+          {#each displayedItems() as item (item.id)}
+            <button class="item-row" class:has-issue={item.status === 'Issue'} class:has-review={item.status === 'Needs Review'} onclick={() => openDetail(item)}>
+              <div class="row-accent"></div>
+              <div class="item-info">
+                <div class="item-name">{item.name}</div>
+                <div class="item-meta">
+                  <span>Order #{item.order || '—'}</span>
+                  <span>SKU {item.sku || '—'}</span>
+                </div>
+              </div>
+              <div class="item-tail">
+                <span class="status-badge {statusColor(item.status)}">{item.status}</span>
+                <svg class="row-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+              </div>
+            </button>
+          {/each}
+          {#if displayedItems().length === 0}
+            <div class="empty">No items found</div>
+          {/if}
+        </div>
+      </div>
+
+      <aside class="inventory-side reveal">
+        <div class="side-card accent-card">
+          <div class="section-label">Attention</div>
+          <div class="side-stat">
+            <div class="side-value">{issueCount + reviewCount}</div>
+            <div class="side-note">records still need a human pass before they can disappear into archive flow</div>
+          </div>
+        </div>
+        <div class="side-card">
+          <div class="section-label">Current mode</div>
+          <div class="mode-panel">
+            <div class="mode-title">
+              {#if activeTab === 'issues'}
+                Issue queue
+              {:else if activeTab === 'review'}
+                Review queue
+              {:else}
+                Recent records
+              {/if}
+            </div>
+            <div class="mode-copy">
+              {#if activeTab === 'issues'}
+                Use this view when something is damaged, missing, duplicated, or just wrong.
+              {:else if activeTab === 'review'}
+                Use this view for arrivals that still need validation and cleanup.
+              {:else}
+                Use this view when you need broad recency context beyond the active blockers.
+              {/if}
+            </div>
+          </div>
+        </div>
+        <div class="side-card">
+          <div class="section-label">Field guide</div>
+          <div class="side-list">
+            <div>Search by item, order number, serial, or SKU.</div>
+            <div>Open a row to change status, edit fields, or attach photos.</div>
+            <div>Use the inspector as the source of truth while the queue stays stable behind it.</div>
+          </div>
+        </div>
+      </aside>
+    </section>
+  </div>
+</div>
+
+{#if detailOpen && selectedItem}
+  <div class="detail-overlay" onclick={closeDetail}>
+    <div class="detail-sheet" onclick={(e) => e.stopPropagation()}>
+      <div class="detail-header">
+        {#if editingField === 'Item'}
+          <input class="edit-input detail-title-edit" type="text" bind:value={editValue} onkeydown={handleEditKeydown} onblur={saveEdit} autofocus />
+        {:else}
+          <div class="detail-title editable" onclick={() => startEdit('Item', rawField('Item'))}>{selectedItem.name}</div>
+        {/if}
+        <button class="detail-close" onclick={closeDetail}>Close</button>
+      </div>
+
+      <div class="status-control">
+        {#each statusOptions as status}
+          <button class="status-seg" class:active={selectedItem.status === status} data-status={status} onclick={() => changeStatus(status)}>
+            {status}
+          </button>
+        {/each}
+      </div>
+
+      <div class="detail-hero">
+        <div class="detail-primary-photo">
+          {#if selectedItem.photoUrls.length > 0}
+            <img class="hero-photo-img" src={selectedItem.photoUrls[activePhoto]} alt="Item photo" loading="lazy" />
+          {:else}
+            <div class="photo-placeholder empty-photo"><span>No photos yet</span></div>
+          {/if}
+        </div>
+
+        {#if selectedItem.photoUrls.length > 1}
+          <div class="detail-photos">
+            {#each selectedItem.photoUrls as url, index}
+              <button class="photo-thumb" class:active={activePhoto === index} onclick={() => activePhoto = index}>
+                <img class="photo-img" src={url} alt="Item photo" loading="lazy" />
+              </button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+
+      <div class="actions-group">
+        <div class="actions-row">
+          <input type="file" accept="image/*" multiple class="hidden-input" bind:this={fileInput} onchange={handleFileSelect} />
+          <button class="action-btn primary" onclick={() => uploadMenuOpen = !uploadMenuOpen} disabled={uploading}>{uploading ? 'Uploading...' : 'Upload photos'}</button>
+          {#if uploadMenuOpen}
+            <div class="upload-menu">
+              <button class="upload-option" onclick={() => { uploadMenuOpen = false; triggerUpload(); }}>From device</button>
+              <button class="upload-option" onclick={() => { uploadMenuOpen = false; immichOpen = true; }}>From Immich</button>
+            </div>
+          {/if}
+          <button class="action-btn" onclick={sendToPhone}>Phone</button>
+          <button class="action-btn sm" onclick={duplicateItem}>Duplicate</button>
+        </div>
+      </div>
+
+      <div class="detail-body">
+        <div class="detail-column">
+          <div class="section-group">
+            <div class="section-label">Purchase</div>
+            <div class="detail-fields">
+              {@render editableRow('Price Per Item', formatPrice(selectedItem.price), 'mono')}
+              {@render editableRow('Tax', formatPrice(selectedItem.tax), 'mono')}
+              {@render editableRow('Total', formatPrice(selectedItem.total), 'mono strong')}
+              {@render editableRow('QTY', String(selectedItem.qty), '')}
+            </div>
+          </div>
+
+          <div class="section-group">
+            <div class="section-label">Notes</div>
+            <div class="detail-fields">
+              {@render editableRow('Notes', selectedItem.notes || 'Add notes...', '')}
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-column">
+          <div class="section-group">
+            <div class="section-label">Item info</div>
+            <div class="detail-fields">
+              {@render editableRow('SKU', selectedItem.sku || '—', 'mono')}
+              {@render editableRow('Serial Numbers', selectedItem.serial || '—', 'mono')}
+              {@render editableRow('Order Number', selectedItem.order || '—', 'mono')}
+              {@render editableRow('Source', selectedItem.vendor || '—', '')}
+              {@render editableRow('Tracking Number', selectedItem.tracking || '—', 'mono')}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <a class="action-btn ghost open-noco" href={nocodbUrl || '#'} target="_blank" rel="noopener">Open in NocoDB</a>
+    </div>
+  </div>
+{/if}
+
+{#if immichOpen}
+  <ImmichPicker bind:open={immichOpen} onselect={handleImmichSelect} />
+{/if}
+
+<style>
+  .page {
+    padding-top: 0;
+  }
+  .app-surface {
+    max-width: 1360px;
+  }
+  .inventory-command {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+    gap: 24px;
+    padding: 8px 0 18px;
+  }
+  .command-copy {
+    max-width: 640px;
+  }
+  .command-label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #8c7b69;
+    margin-bottom: 8px;
+  }
+  .command-copy h1 {
+    margin: 0;
+    font-size: clamp(2.1rem, 4.1vw, 3.5rem);
+    line-height: 0.94;
+    letter-spacing: -0.065em;
+    color: #17120d;
+  }
+  .command-copy p {
+    margin: 12px 0 0;
+    max-width: 46ch;
+    color: #5c5046;
+    font-size: 1rem;
+    line-height: 1.55;
+  }
+  .command-actions {
+    min-width: 220px;
+    display: grid;
+    justify-items: end;
+    gap: 8px;
+  }
+  .command-kicker {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #8c7b69;
+  }
+  .command-stats {
+    font-size: 1.15rem;
+    letter-spacing: -0.04em;
+    color: #221a13;
+  }
+  .intro-btn { background: #1e1812; border-color: #1e1812; color: white; box-shadow: none; }
+  .intro-btn:hover { filter: none; transform: none; box-shadow: none; opacity: 0.92; }
+  .signal-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
+  .signal-card, .inventory-main, .side-card, .toolbar-card {
+    border-radius: 28px; border: 1px solid rgba(35,26,17,0.08); background: rgba(255,252,248,0.68); backdrop-filter: blur(14px);
+  }
+  .signal-card { padding: 18px; text-align: left; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; }
+  .signal-card:hover { transform: translateY(-2px); background: rgba(255,255,255,0.82); }
+  .signal-card.active {
+    border-color: rgba(179,92,50,0.2);
+    background: linear-gradient(145deg, rgba(255,248,242,0.94), rgba(246,237,227,0.72));
+  }
+  .signal-topline {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 12px;
+  }
+  .signal-label, .toolbar-label, .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: #7d6f61; }
+  .signal-value, .side-value { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 0.95; letter-spacing: -0.05em; color: #1e1812; }
+  .signal-note, .side-note, .side-list, .toolbar-meta, .item-meta { color: #4f463d; line-height: 1.6; }
+  .inventory-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) 290px; gap: 18px; align-items: start; }
+  .inventory-main { padding: 16px; background: linear-gradient(180deg, rgba(255,252,248,0.84), rgba(244,237,229,0.74)); }
+  .toolbar-card { padding: 16px 16px 12px; margin-bottom: 8px; background: rgba(255,255,255,0.42); }
+  .toolbar-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
+  .toolbar-title { margin-top: 4px; font-size: 1.1rem; letter-spacing: -0.035em; color: #1e1812; }
+  .inventory-side { display: grid; gap: 12px; }
+  .side-card { padding: 20px; }
+  .accent-card {
+    background: linear-gradient(180deg, rgba(255,248,242,0.96), rgba(240,234,227,0.84));
+  }
+  .side-stat, .side-list { margin-top: 14px; }
+  .queue-header {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: 14px;
+    padding: 8px 4px 14px;
+  }
+  .queue-label, .queue-freshness {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: #7d6f61;
+  }
+  .queue-title {
+    margin-top: 4px;
+    font-size: 1.35rem;
+    letter-spacing: -0.04em;
+    color: #1e1812;
+  }
+  .queue-summary {
+    margin-top: 6px;
+    color: #6a5d50;
+    font-size: 0.94rem;
+    line-height: 1.45;
+  }
+  .search-wrap { position: relative; margin-bottom: var(--sp-4); }
+  .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #7f7365; pointer-events: none; }
+  .search-input {
+    width: 100%;
+    padding: var(--sp-3) var(--sp-10) var(--sp-3) 42px;
+    border-radius: var(--radius);
+    border: 1.5px solid rgba(35,26,17,0.12);
+    background: rgba(255,255,255,0.92);
+    color: #1e1812;
+    font-size: var(--text-md);
+    font-family: var(--font);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
+  }
+  .search-input::placeholder { color: #8b7b6a; }
+  .search-input:focus {
+    outline: none;
+    border-color: rgba(179,92,50,0.5);
+    box-shadow: 0 0 0 4px rgba(179,92,50,0.08);
+  }
+  .search-clear {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: #7f7365;
+  }
+  .search-clear:hover { color: #1e1812; }
+  .search-results-label { color: #5f564b; font-size: 13px; }
+  .items-card { background: rgba(255,255,255,0.82); border-radius: 24px; border: 1px solid rgba(35,26,17,0.06); overflow: hidden; box-shadow: 0 16px 44px rgba(42,30,19,0.05); }
+  .item-row { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 16px; width: 100%; background: none; border: none; text-align: left; transition: background 160ms ease, transform 160ms ease; }
+  .item-row:hover { background: rgba(255,248,242,0.88); transform: translateX(2px); }
+  .item-row + .item-row { border-top: 1px solid rgba(35,26,17,0.07); }
+  .row-accent {
+    align-self: stretch;
+    border-radius: 999px;
+    background: rgba(35,26,17,0.08);
+  }
+  .item-row.has-issue .row-accent { background: linear-gradient(180deg, #ff5d45, #ef3d2f); }
+  .item-row.has-review .row-accent { background: linear-gradient(180deg, #f6a33a, #e28615); }
+  .item-info { flex: 1; min-width: 0; }
+  .item-name {
+    font-size: 1rem;
+    font-weight: 700;
+    color: #1e1812;
+    line-height: 1.25;
+  }
+  .item-row:hover .item-name { color: #140f0b; }
+  .item-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    margin-top: 6px;
+    color: #5d5248;
+    font-size: 0.88rem;
+  }
+  .item-tail {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-left: auto;
+  }
+  .status-badge.error { background: var(--error-dim); color: var(--error); }
+  .status-badge.success { background: var(--success-dim); color: var(--success); }
+  .status-badge.warning { background: var(--warning-bg); color: var(--warning); }
+  .status-badge.muted { background: var(--card-hover); color: var(--text-4); }
+  .status-badge { font-size: var(--text-xs); font-weight: 700; padding: 5px 10px; border-radius: 999px; flex-shrink: 0; }
+  .row-chevron { width: 14px; height: 14px; color: #7d6f61; flex-shrink: 0; opacity: 0.7; }
+  .empty { color: #5f564b; }
+  .empty { padding: var(--sp-12); text-align: center; color: var(--text-3); font-size: var(--text-base); }
+  .detail-overlay { position: fixed; inset: 0; background: rgba(17,13,10,0.42); z-index: 60; display: flex; justify-content: flex-end; backdrop-filter: blur(12px); }
+  .detail-sheet { width: 680px; max-width: 100%; height: 100%; background: linear-gradient(180deg, #f8f1e8 0%, #f3eadc 100%); overflow-y: auto; padding: var(--sp-7); box-shadow: -20px 0 50px rgba(18,13,10,0.16); border-left: 1px solid rgba(35,26,17,0.08); color: #1e1812; animation: sheetIn 220ms ease; }
+  .detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: 16px; }
+  .detail-title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: #1e1812;
+    line-height: 1.12;
+    letter-spacing: -0.04em;
+    flex: 1;
+    min-width: 0;
+  }
+  .status-control { display: flex; justify-content: center; gap: 0; margin: 0 8px 22px; background: rgba(255,255,255,0.72); border: 1px solid rgba(35,26,17,0.09); border-radius: var(--radius); padding: 3px; }
+  .status-seg { flex: 1; padding: 8px 0; font-size: var(--text-sm); background: none; border: none; border-radius: 10px; }
+  .status-seg.active[data-status="Issue"] { background: var(--error-dim); color: var(--error); }
+  .status-seg.active[data-status="Pending"] { background: var(--warning-bg); color: var(--warning); }
+  .status-seg.active[data-status="Received"] { background: var(--success-dim); color: var(--success); }
+  .status-seg.active[data-status="Needs Review"] { background: rgba(217,119,6,0.12); color: #9a5d09; }
+  .detail-hero {
+    margin-bottom: var(--sp-5);
+  }
+  .detail-primary-photo {
+    width: 100%;
+    height: 280px;
+    border-radius: 18px;
+    overflow: hidden;
+    background: rgba(255,255,255,0.58);
+    border: 1px solid rgba(35,26,17,0.08);
+  }
+  .hero-photo-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    background: var(--card-hover);
+  }
+  .detail-photos { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; }
+  .photo-thumb {
+    border: none;
+    background: none;
+    padding: 0;
+    border-radius: 12px;
+    overflow: hidden;
+    opacity: 0.7;
+    transition: opacity 160ms ease, transform 160ms ease;
+  }
+  .photo-thumb.active,
+  .photo-thumb:hover {
+    opacity: 1;
+    transform: translateY(-1px);
+  }
+  .photo-img, .photo-placeholder { width: 116px; height: 88px; border-radius: 12px; flex-shrink: 0; }
+  .photo-img { object-fit: cover; background: var(--card-hover); display: block; }
+  .photo-placeholder { background: rgba(255,255,255,0.58); border: 1px dashed rgba(35,26,17,0.13); display: flex; align-items: center; justify-content: center; }
+  .empty-photo { width: 100%; height: 100%; }
+  .actions-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-7); }
+  .actions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); position: relative; }
+  .action-btn { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 14px; border-radius: var(--radius-md); background: rgba(255,255,255,0.8); border: 1px solid rgba(35,26,17,0.1); font-size: var(--text-sm); color: #1e1812; }
+  .action-btn.primary { background: #1e1812; border-color: #1e1812; color: white; }
+  .action-btn.ghost { background: none; color: #6b6256; }
+  .action-btn.sm { padding: 6px 11px; }
+  .open-noco { margin-top: 8px; }
+  .detail-body {
+    display: grid;
+    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+    gap: 14px;
+  }
+  .detail-column {
+    display: grid;
+    gap: 14px;
+    align-content: start;
+  }
+  .section-group {
+    display: grid;
+    gap: 8px;
+  }
+  .detail-fields { background: rgba(255,255,255,0.76); border-radius: var(--radius); border: 1px solid rgba(35,26,17,0.08); overflow: hidden; }
+  .detail-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
+  .detail-row + .detail-row { border-top: 1px solid rgba(35,26,17,0.08); }
+  .field-label { font-size: var(--text-sm); color: #6b5f53; opacity: 1; }
+  .field-value { font-size: var(--text-base); color: #1e1812; text-align: right; }
+  .detail-row.editable, .detail-title.editable { cursor: pointer; }
+  .detail-row.editable:hover { background: rgba(255,248,242,0.62); }
+  .edit-input { width: 100%; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: rgba(255,255,255,0.9); color: #1e1812; }
+  .detail-title-edit { font-size: var(--text-lg); font-weight: 600; text-align: left; flex: 1; min-width: 0; }
+  .upload-menu { position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--sp-1); z-index: 10; background: rgba(255,250,244,0.96); border: 1px solid rgba(35,26,17,0.09); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(18,13,10,0.1); }
+  .upload-option { display: flex; align-items: center; width: 100%; padding: 12px 16px; background: none; border: none; text-align: left; color: #1e1812; }
+  .upload-option + .upload-option { border-top: 1px solid rgba(35,26,17,0.08); }
+  .hidden-input { display: none; }
+  .open-noco { color: #5f564b; }
+  .open-noco:hover { color: #1e1812; }
+  .mode-panel {
+    margin-top: 14px;
+  }
+  .mode-title {
+    font-size: 1.15rem;
+    letter-spacing: -0.04em;
+    color: #20170f;
+  }
+  .mode-copy {
+    margin-top: 8px;
+    color: #5f564b;
+    line-height: 1.55;
+  }
+  .reveal {
+    animation: riseIn 280ms ease;
+  }
+  .stagger .signal-card:nth-child(1) { animation: riseIn 220ms ease; }
+  .stagger .signal-card:nth-child(2) { animation: riseIn 260ms ease; }
+  .stagger .signal-card:nth-child(3) { animation: riseIn 300ms ease; }
+  @keyframes riseIn {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes sheetIn {
+    from {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  @media (max-width: 768px) {
+    .inventory-command,
+    .signal-strip,
+    .inventory-layout { grid-template-columns: 1fr; }
+    .inventory-command {
+      display: grid;
+      align-items: start;
+      gap: 14px;
+    }
+    .command-actions {
+      justify-items: start;
+    }
+    .detail-sheet { width: 100%; padding: var(--sp-5); }
+    .queue-header,
+    .toolbar-head { flex-direction: column; align-items: flex-start; }
+    .item-row { align-items: flex-start; }
+    .item-tail { gap: 8px; }
+    .detail-primary-photo {
+      height: 220px;
+    }
+    .detail-body {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
diff --git a/frontend-v2/src/lib/pages/inventory/LegacyInventoryPage.svelte b/frontend-v2/src/lib/pages/inventory/LegacyInventoryPage.svelte
new file mode 100644
index 0000000..625b27f
--- /dev/null
+++ b/frontend-v2/src/lib/pages/inventory/LegacyInventoryPage.svelte
@@ -0,0 +1,902 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/state';
+  import ImmichPicker from '$lib/components/shared/ImmichPicker.svelte';
+
+  // ── Types matching NocoDB fields ──
+  interface InventoryItem {
+    id: number;
+    name: string;
+    order: string;
+    sku: string;
+    serial: string;
+    status: string;
+    price: number;
+    tax: number;
+    total: number;
+    qty: number;
+    tracking: string;
+    vendor: string;
+    buyerName: string;
+    date: string;
+    notes: string;
+    photos: number;
+    photoUrls: string[];
+  }
+
+  interface ItemDetailRaw {
+    Id: number;
+    Item: string;
+    'Order Number': string;
+    'Serial Numbers': string;
+    SKU: string;
+    Received: string;
+    'Price Per Item': number;
+    Tax: number;
+    Total: number;
+    QTY: number;
+    'Tracking Number': string;
+    Source: string;
+    Name: string;
+    Date: string;
+    Notes: string;
+    photos: any[];
+    [key: string]: any;
+  }
+
+  // ── State ──
+  let activeTab = $state<'issues' | 'review' | 'all'>('issues');
+  let searchQuery = $state('');
+  let detailOpen = $state(false);
+  let selectedItem = $state<InventoryItem | null>(null);
+  let selectedDetail = $state<ItemDetailRaw | null>(null);
+  let nocodbUrl = $state('');
+
+  let recentItems = $state<InventoryItem[]>([]);
+  let issueItems = $state<InventoryItem[]>([]);
+  let reviewItems = $state<InventoryItem[]>([]);
+  let recentLoaded = $state(false);
+  let loading = $state(true);
+  let searching = $state(false);
+  let searchResults = $state<InventoryItem[] | null>(null);
+  let saving = $state(false);
+  let debounceTimer: ReturnType<typeof setTimeout>;
+
+  // ── Derived ──
+  const issueCount = $derived(issueItems.length);
+  const reviewCount = $derived(reviewItems.length);
+
+  const displayedItems = $derived(() => {
+    if (searchResults !== null) return searchResults;
+    if (activeTab === 'issues') return issueItems;
+    if (activeTab === 'review') return reviewItems;
+    return recentItems;
+  });
+
+  // ── Map API response to our item shape ──
+  function mapIssue(raw: any): InventoryItem {
+    return {
+      id: raw.id,
+      name: raw.item || '',
+      order: raw.orderNumber || '',
+      sku: raw.sku || '',
+      serial: raw.serialNumbers || '',
+      status: normalizeStatus(raw.received || ''),
+      price: 0,
+      tax: 0,
+      total: 0,
+      qty: 1,
+      tracking: raw.trackingNumber || '',
+      vendor: '',
+      buyerName: '',
+      date: '',
+      notes: raw.notes || '',
+      photos: 0,
+      photoUrls: []
+    };
+  }
+
+  const NOCODB_BASE = 'https://noco.quadjourney.com';
+
+  function extractPhotoUrls(photos: any[]): string[] {
+    if (!Array.isArray(photos)) return [];
+    return photos
+      .filter((p: any) => p && p.signedPath)
+      .map((p: any) => `${NOCODB_BASE}/${p.signedPath}`);
+  }
+
+  function mapDetail(raw: ItemDetailRaw): InventoryItem {
+    const photoUrls = extractPhotoUrls(raw.photos);
+    return {
+      id: raw.Id,
+      name: raw.Item || '',
+      order: raw['Order Number'] || '',
+      sku: raw.SKU || '',
+      serial: raw['Serial Numbers'] || '',
+      status: normalizeStatus(raw.Received || ''),
+      price: raw['Price Per Item'] || 0,
+      tax: raw.Tax || 0,
+      total: raw.Total || 0,
+      qty: raw.QTY || 1,
+      tracking: raw['Tracking Number'] || '',
+      vendor: raw.Source || '',
+      buyerName: raw.Name || '',
+      date: raw.Date || '',
+      notes: raw.Notes || '',
+      photos: Array.isArray(raw.photos) ? raw.photos.length : 0,
+      photoUrls
+    };
+  }
+
+  function normalizeStatus(received: string): string {
+    if (!received) return 'Pending';
+    const lower = received.toLowerCase();
+    if (lower === 'issue' || lower === 'issues') return 'Issue';
+    if (lower === 'needs review') return 'Needs Review';
+    if (lower === 'pending') return 'Pending';
+    if (lower === 'closed') return 'Closed';
+    // Any date string or other value = Received
+    return 'Received';
+  }
+
+  // ── API calls ──
+  async function loadSummary() {
+    try {
+      const res = await fetch('/api/inventory/summary', { credentials: 'include' });
+      if (res.ok) {
+        const data = await res.json();
+        issueItems = (data.issues || []).map(mapIssue);
+        reviewItems = (data.needsReview || []).map(mapIssue);
+      }
+    } catch { /* silent */ }
+  }
+
+  function mapSearchResult(r: any): InventoryItem {
+    return {
+      id: r.id,
+      name: r.item || '',
+      order: '', sku: '', serial: '',
+      status: normalizeStatus(r.received || ''),
+      price: 0, tax: 0, total: 0, qty: 1,
+      tracking: '', vendor: '', buyerName: '', date: '',
+      notes: '', photos: 0, photoUrls: []
+    };
+  }
+
+  async function loadRecent() {
+    if (recentLoaded) return;
+    try {
+      const res = await fetch('/api/inventory/recent?limit=30', { credentials: 'include' });
+      if (res.ok) {
+        const data = await res.json();
+        recentItems = (data.items || []).map(mapSearchResult);
+        recentLoaded = true;
+      }
+    } catch { /* silent */ }
+  }
+
+  async function searchItems(query: string) {
+    if (!query.trim()) { searchResults = null; return; }
+    searching = true;
+    try {
+      const res = await fetch(`/api/inventory/search-records?q=${encodeURIComponent(query)}`, { credentials: 'include' });
+      if (res.ok) {
+        const data = await res.json();
+        searchResults = (data.results || []).map((r: any) => ({
+          id: r.id,
+          name: r.item || '',
+          order: '', sku: '', serial: '',
+          status: normalizeStatus(r.received || ''),
+          price: 0, tax: 0, total: 0, qty: 1,
+          tracking: '', vendor: '', buyerName: '', date: '',
+          notes: '', photos: 0
+        }));
+      }
+    } catch { searchResults = []; }
+    finally { searching = false; }
+  }
+
+  async function loadItemDetail(id: number) {
+    try {
+      const res = await fetch(`/api/inventory/item-details/${id}`, { credentials: 'include' });
+      if (res.ok) {
+        const data = await res.json();
+        selectedDetail = data.item;
+        selectedItem = mapDetail(data.item);
+        nocodbUrl = data.nocodb_url || '';
+        detailOpen = true;
+      }
+    } catch { /* silent */ }
+  }
+
+  async function updateField(field: string, value: string | number) {
+    if (!selectedItem) return;
+    saving = true;
+    try {
+      const res = await fetch(`/api/inventory/item/${selectedItem.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ [field]: value }),
+        credentials: 'include'
+      });
+      if (res.ok && selectedDetail) {
+        (selectedDetail as any)[field] = value;
+        selectedItem = mapDetail(selectedDetail);
+        // Update in lists
+        updateItemInLists(selectedItem);
+      }
+    } catch { /* silent */ }
+    finally { saving = false; }
+  }
+
+  function updateItemInLists(item: InventoryItem) {
+    const issueIdx = issueItems.findIndex(i => i.id === item.id);
+    const allIdx = allItems.findIndex(i => i.id === item.id);
+    if (allIdx >= 0) allItems[allIdx] = item;
+    // Add/remove from issues based on status
+    if (item.status === 'Issue') {
+      if (issueIdx < 0) issueItems = [...issueItems, item];
+      else issueItems[issueIdx] = item;
+    } else {
+      if (issueIdx >= 0) issueItems = issueItems.filter(i => i.id !== item.id);
+    }
+  }
+
+  // ── Event handlers ──
+  function onSearchInput() {
+    clearTimeout(debounceTimer);
+    if (!searchQuery.trim()) { searchResults = null; return; }
+    debounceTimer = setTimeout(() => searchItems(searchQuery), 300);
+  }
+
+  function openDetail(item: InventoryItem) {
+    loadItemDetail(item.id);
+  }
+
+  function closeDetail() {
+    detailOpen = false;
+    selectedItem = null;
+    selectedDetail = null;
+  }
+
+  const statusOptions = ['Issue', 'Needs Review', 'Pending', 'Received', 'Closed'];
+
+  // Maps our status to NocoDB "Received" field values
+  function statusToReceived(status: string): string {
+    if (status === 'Issue') return 'Issues';
+    if (status === 'Needs Review') return 'Needs Review';
+    if (status === 'Pending') return 'Pending';
+    if (status === 'Closed') return 'Closed';
+    // For "Received", we set today's date
+    return new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  }
+
+  async function changeStatus(newStatus: string) {
+    if (!selectedItem) return;
+    const receivedValue = statusToReceived(newStatus);
+    await updateField('Received', receivedValue);
+  }
+
+  function statusColor(status: string) {
+    if (status === 'Issue' || status === 'Issues') return 'error';
+    if (status === 'Needs Review') return 'warning';
+    if (status === 'Received') return 'success';
+    if (status === 'Pending') return 'warning';
+    if (status === 'Closed') return 'muted';
+    return 'muted';
+  }
+
+  function formatPrice(n: number) {
+    return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  }
+
+  // ── Inline editing ──
+  let editingField = $state('');
+  let editValue = $state('');
+
+  // NocoDB field name → our display label + item property
+  const editableFields: Record<string, { nocoField: string; type: 'text' | 'number' }> = {
+    'Item': { nocoField: 'Item', type: 'text' },
+    'Price Per Item': { nocoField: 'Price Per Item', type: 'number' },
+    'Tax': { nocoField: 'Tax', type: 'number' },
+    'Total': { nocoField: 'Total', type: 'number' },
+    'QTY': { nocoField: 'QTY', type: 'number' },
+    'SKU': { nocoField: 'SKU', type: 'text' },
+    'Serial Numbers': { nocoField: 'Serial Numbers', type: 'text' },
+    'Order Number': { nocoField: 'Order Number', type: 'text' },
+    'Source': { nocoField: 'Source', type: 'text' },
+    'Name': { nocoField: 'Name', type: 'text' },
+    'Date': { nocoField: 'Date', type: 'text' },
+    'Tracking Number': { nocoField: 'Tracking Number', type: 'text' },
+    'Notes': { nocoField: 'Notes', type: 'text' },
+  };
+
+  function startEdit(nocoField: string, currentValue: any) {
+    editingField = nocoField;
+    editValue = currentValue != null ? String(currentValue) : '';
+  }
+
+  async function saveEdit() {
+    if (!editingField || !selectedItem) return;
+    const field = editableFields[editingField];
+    const value = field?.type === 'number' ? Number(editValue) || 0 : editValue;
+    await updateField(editingField, value);
+    editingField = '';
+    editValue = '';
+  }
+
+  function cancelEdit() {
+    editingField = '';
+    editValue = '';
+  }
+
+  function handleEditKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') saveEdit();
+    if (e.key === 'Escape') cancelEdit();
+  }
+
+  // Get raw NocoDB value for a field
+  function rawField(field: string): any {
+    return selectedDetail ? (selectedDetail as any)[field] : '';
+  }
+
+  // ── Action handlers ──
+  async function duplicateItem() {
+    if (!selectedItem) return;
+    saving = true;
+    try {
+      const res = await fetch(`/api/inventory/duplicate/${selectedItem.id}`, {
+        method: 'POST', credentials: 'include'
+      });
+      if (res.ok) {
+        const data = await res.json();
+        const newId = data.newId || data.id;
+        if (newId) loadItemDetail(newId);
+      }
+    } catch { /* silent */ }
+    finally { saving = false; }
+  }
+
+  async function sendToPhone() {
+    if (!selectedItem) return;
+    saving = true;
+    try {
+      await fetch('/api/inventory/send-to-phone', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ rowId: selectedItem.id }),
+        credentials: 'include'
+      });
+    } catch { /* silent */ }
+    finally { saving = false; }
+  }
+
+  // ── Photo upload ──
+  let fileInput: HTMLInputElement;
+  let uploading = $state(false);
+  let uploadMenuOpen = $state(false);
+
+  function triggerUpload() {
+    fileInput?.click();
+  }
+
+  async function handleFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (!input.files?.length || !selectedItem) return;
+    uploading = true;
+    try {
+      const formData = new FormData();
+      formData.append('rowId', String(selectedItem.id));
+      for (const file of input.files) {
+        formData.append('photos', file);
+      }
+      const res = await fetch('/api/inventory/upload', {
+        method: 'POST',
+        body: formData,
+        credentials: 'include'
+      });
+      if (res.ok) {
+        // Reload item to get updated photos
+        loadItemDetail(selectedItem.id);
+      }
+    } catch { /* silent */ }
+    finally {
+      uploading = false;
+      input.value = '';
+    }
+  }
+
+  // ── Immich picker ──
+  let immichOpen = $state(false);
+
+  async function handleImmichSelect(assetIds: string[]) {
+    if (!selectedItem || !assetIds.length) return;
+    uploading = true;
+    try {
+      // Server-to-server: inventory service downloads from Immich and uploads to NocoDB
+      const res = await fetch('/api/inventory/upload-from-immich', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          rowId: selectedItem.id,
+          assetIds,
+          deleteAfter: true
+        })
+      });
+      if (res.ok) {
+        const data = await res.json();
+        console.log(`Uploaded ${data.uploadedCount} photos, deleted ${data.deletedCount} from Immich`);
+      }
+      // Reload to show new photos
+      loadItemDetail(selectedItem.id);
+    } catch { /* silent */ }
+    finally { uploading = false; }
+  }
+
+  async function createNewItem() {
+    saving = true;
+    try {
+      const res = await fetch('/api/inventory/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ Item: 'New Item' }),
+        credentials: 'include'
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data.id) loadItemDetail(data.id);
+      }
+    } catch { /* silent */ }
+    finally { saving = false; }
+  }
+
+  // ── Init ──
+  onMount(async () => {
+    await loadSummary();
+    loading = false;
+
+    // Auto-open from query param
+    const itemId = page.url.searchParams.get('item');
+    if (itemId) loadItemDetail(Number(itemId));
+  });
+</script>
+
+{#snippet editableRow(nocoField: string, displayValue: string, classes: string)}
+  {#if editingField === nocoField}
+    <div class="detail-row editing">
+      <span class="field-label">{nocoField}</span>
+      <input
+        class="edit-input {classes}"
+        type={editableFields[nocoField]?.type === 'number' ? 'number' : 'text'}
+        bind:value={editValue}
+        onkeydown={handleEditKeydown}
+        onblur={saveEdit}
+        autofocus
+      />
+    </div>
+  {:else}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="detail-row editable" onclick={() => startEdit(nocoField, rawField(nocoField))}>
+      <span class="field-label">{nocoField}</span>
+      <span class="field-value {classes}">{displayValue}</span>
+    </div>
+  {/if}
+{/snippet}
+
+<div class="page">
+  <div class="app-surface">
+    <div class="page-header">
+      <div class="header-row">
+        <div>
+          <div class="page-title">INVENTORY</div>
+          <div class="page-subtitle">{loading ? 'Loading...' : ''}<strong>{issueCount} issues</strong> · {reviewCount} needs review</div>
+        </div>
+        <button class="btn-primary" onclick={createNewItem}>+ New Item</button>
+      </div>
+    </div>
+
+    <!-- Search -->
+    <div class="search-wrap">
+      <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+      <input
+        type="text"
+        class="search-input"
+        placeholder="Search by item name, order number, serial number, SKU..."
+        bind:value={searchQuery}
+        oninput={onSearchInput}
+      />
+      {#if searchQuery}
+        <button class="search-clear" onclick={() => { searchQuery = ''; searchResults = null; }}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      {/if}
+    </div>
+
+    <!-- Tabs (hidden during search) -->
+    {#if !searchQuery && searchResults === null}
+      <div class="tabs">
+        <button class="tab" class:active={activeTab === 'issues'} onclick={() => activeTab = 'issues'}>
+          Issues <span class="tab-badge">{issueCount}</span>
+        </button>
+        <button class="tab" class:active={activeTab === 'review'} onclick={() => activeTab = 'review'}>
+          Needs Review <span class="tab-badge review">{reviewCount}</span>
+        </button>
+        <button class="tab" class:active={activeTab === 'all'} onclick={() => { activeTab = 'all'; loadRecent(); }}>
+          Recent
+        </button>
+      </div>
+    {:else}
+      <div class="search-results-label">{displayedItems().length} result{displayedItems().length !== 1 ? 's' : ''} for "{searchQuery}"</div>
+    {/if}
+
+    <!-- Item rows -->
+    <div class="items-card">
+      {#each displayedItems() as item (item.id)}
+        <button class="item-row" class:has-issue={item.status === 'Issue'} class:has-review={item.status === 'Needs Review'} onclick={() => openDetail(item)}>
+          <div class="item-info">
+            <div class="item-name">{item.name}</div>
+            <div class="item-meta">Order #{item.order} · SKU: {item.sku}</div>
+          </div>
+          <span class="status-badge {statusColor(item.status)}">{item.status}</span>
+          <svg class="row-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+        </button>
+      {/each}
+      {#if displayedItems().length === 0}
+        <div class="empty">No items found</div>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<!-- Detail sheet/modal -->
+{#if detailOpen && selectedItem}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="detail-overlay" onclick={closeDetail}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="detail-sheet" onclick={(e) => e.stopPropagation()}>
+      <!-- 1. Title (editable) -->
+      <div class="detail-header">
+        {#if editingField === 'Item'}
+          <input
+            class="edit-input detail-title-edit"
+            type="text"
+            bind:value={editValue}
+            onkeydown={handleEditKeydown}
+            onblur={saveEdit}
+            autofocus
+          />
+        {:else}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div class="detail-title editable" onclick={() => startEdit('Item', rawField('Item'))}>{selectedItem.name}</div>
+        {/if}
+        <button class="detail-close" onclick={closeDetail}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+
+      <!-- 2. Status control (segmented) -->
+      <div class="status-control">
+        {#each statusOptions as status}
+          <button
+            class="status-seg"
+            class:active={selectedItem.status === status}
+            data-status={status}
+            onclick={() => changeStatus(status)}
+          >
+            {status}
+          </button>
+        {/each}
+      </div>
+
+      <!-- 3. Photos -->
+      <div class="detail-photos">
+        {#if selectedItem.photoUrls.length > 0}
+          {#each selectedItem.photoUrls as url}
+            <img class="photo-img" src={url} alt="Item photo" loading="lazy" />
+          {/each}
+        {:else}
+          <div class="photo-placeholder empty-photo">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
+            <span>No photos yet</span>
+          </div>
+        {/if}
+      </div>
+
+      <!-- 4. Actions -->
+      <div class="actions-group">
+        <div class="actions-row">
+          <input type="file" accept="image/*" multiple class="hidden-input" bind:this={fileInput} onchange={handleFileSelect} />
+          <button class="action-btn primary" onclick={() => uploadMenuOpen = !uploadMenuOpen} disabled={uploading}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+            {uploading ? 'Uploading...' : 'Upload Photos'}
+          </button>
+          {#if uploadMenuOpen}
+            <div class="upload-menu">
+              <button class="upload-option" onclick={() => { uploadMenuOpen = false; triggerUpload(); }}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+                From device
+              </button>
+              <button class="upload-option" onclick={() => { uploadMenuOpen = false; immichOpen = true; }}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
+                From Immich
+              </button>
+            </div>
+          {/if}
+          <button class="action-btn" onclick={sendToPhone}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+            Phone
+          </button>
+        </div>
+        <div class="actions-row secondary">
+          <button class="action-btn sm" onclick={duplicateItem}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+            Duplicate
+          </button>
+          <a class="action-btn sm ghost" href={nocodbUrl || '#'} target="_blank" rel="noopener">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+            NocoDB
+          </a>
+        </div>
+      </div>
+
+      <!-- Purchase -->
+      <div class="section-group">
+        <div class="section-label">Purchase</div>
+        <div class="detail-fields">
+          {@render editableRow('Price Per Item', formatPrice(selectedItem.price), 'mono')}
+          {@render editableRow('Tax', formatPrice(selectedItem.tax), 'mono')}
+          {@render editableRow('Total', formatPrice(selectedItem.total), 'mono strong')}
+          {@render editableRow('QTY', String(selectedItem.qty), '')}
+        </div>
+      </div>
+
+      <!-- Item Info -->
+      <div class="section-group">
+        <div class="section-label">Item Info</div>
+        <div class="detail-fields">
+          {@render editableRow('SKU', selectedItem.sku || '—', 'mono')}
+          {@render editableRow('Serial Numbers', selectedItem.serial || '—', 'mono')}
+        </div>
+      </div>
+
+      <!-- Order -->
+      <div class="section-group">
+        <div class="section-label">Order</div>
+        <div class="detail-fields">
+          {@render editableRow('Order Number', selectedItem.order || '—', 'mono')}
+          {@render editableRow('Source', selectedItem.vendor || '—', '')}
+          {@render editableRow('Name', selectedItem.buyerName || '—', '')}
+          {@render editableRow('Date', selectedItem.date || '—', '')}
+        </div>
+      </div>
+
+      <!-- Shipping -->
+      <div class="section-group">
+        <div class="section-label">Shipping</div>
+        <div class="detail-fields">
+          {@render editableRow('Tracking Number', selectedItem.tracking || '—', 'mono')}
+        </div>
+      </div>
+
+      <!-- Notes -->
+      <div class="section-group">
+        <div class="section-label">Notes</div>
+        <div class="detail-fields">
+          {#if editingField === 'Notes'}
+            <div class="detail-row">
+              <textarea
+                class="edit-input edit-textarea"
+                bind:value={editValue}
+                onkeydown={handleEditKeydown}
+                onblur={saveEdit}
+                rows="3"
+              ></textarea>
+            </div>
+          {:else}
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div class="detail-row editable" onclick={() => startEdit('Notes', rawField('Notes'))}>
+              <span class="field-value" style="text-align:left;font-weight:400;color:var(--text-2);width:100%">{selectedItem.notes || 'Add notes...'}</span>
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if immichOpen}
+  <ImmichPicker bind:open={immichOpen} onselect={handleImmichSelect} />
+{/if}
+
+<style>
+  .header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
+  .page-subtitle { font-size: var(--text-2xl); font-weight: 300; color: var(--text-1); line-height: 1.2; }
+  .btn-primary { padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); transition: opacity var(--transition); }
+  .btn-primary:hover { opacity: 0.9; }
+
+  /* ── Search ── */
+  .search-wrap { position: relative; margin-bottom: var(--sp-4); }
+  .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-4); pointer-events: none; transition: color var(--transition); }
+  .search-input { width: 100%; padding: var(--sp-3) var(--sp-10) var(--sp-3) 42px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--card); color: var(--text-1); font-size: var(--text-md); font-family: var(--font); transition: all var(--transition); box-shadow: var(--shadow-xs); }
+  .search-input::placeholder { color: var(--text-4); }
+  .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim), var(--shadow-sm); }
+  .search-input:focus ~ .search-icon { color: var(--accent); }
+  .search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-4); padding: var(--sp-1); border-radius: var(--radius-xs); }
+  .search-clear:hover { color: var(--text-2); background: var(--card-hover); }
+  .search-clear svg { width: 16px; height: 16px; }
+  .search-results-label { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-3); }
+
+  /* ── Tabs ── */
+  .tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); }
+  .tab { padding: var(--sp-2) 14px; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; color: var(--text-3); background: none; border: none; cursor: pointer; transition: all var(--transition); font-family: var(--font); display: flex; align-items: center; gap: var(--sp-1.5); }
+  .tab:hover { color: var(--text-1); background: var(--card-hover); }
+  .tab.active { color: var(--text-1); background: var(--card); box-shadow: var(--shadow-xs); }
+  .tab-badge { font-size: var(--text-xs); font-weight: 600; background: var(--error); color: white; padding: 1px 7px; border-radius: 10px; }
+  .tab-badge.review { background: var(--warning); }
+  .tab-count { font-size: var(--text-xs); color: var(--text-4); }
+
+  /* ── Item rows ── */
+  .items-card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-md); overflow: hidden; }
+  .item-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; width: 100%; background: none; border: none; cursor: pointer; transition: background var(--transition); text-align: left; font-family: var(--font); color: inherit; }
+  .item-row:hover { background: var(--card-hover); }
+  .item-row + .item-row { border-top: 1px solid var(--border); }
+  .item-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 68%, var(--card)); }
+  .item-row:nth-child(even):hover { background: var(--card-hover); }
+  .item-row.has-issue { border-left: 4px solid var(--error); }
+  .item-row.has-review { border-left: 4px solid var(--warning); }
+  .item-info { flex: 1; min-width: 0; }
+  .item-name { font-size: var(--text-base); font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .item-meta { font-size: var(--text-sm); color: var(--text-2); margin-top: 3px; letter-spacing: 0.01em; }
+
+  .status-badge { font-size: var(--text-xs); font-weight: 500; padding: 3px 10px; border-radius: var(--radius-sm); flex-shrink: 0; }
+  .status-badge.error { background: var(--error-dim); color: var(--error); }
+  .status-badge.success { background: var(--success-dim); color: var(--success); }
+  .status-badge.warning { background: var(--warning-bg); color: var(--warning); }
+  .status-badge.muted { background: var(--card-hover); color: var(--text-4); }
+
+  .row-chevron { width: 14px; height: 14px; color: var(--text-4); flex-shrink: 0; opacity: 0.5; }
+  .item-row:hover .row-chevron { opacity: 1; }
+  .empty { padding: var(--sp-12); text-align: center; color: var(--text-3); font-size: var(--text-base); }
+
+  /* ── Detail sheet ── */
+  .detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 60; display: flex; justify-content: flex-end; animation: fadeIn 150ms ease; }
+  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+  .detail-sheet { width: 520px; max-width: 100%; height: 100%; background: var(--surface); overflow-y: auto; padding: var(--sp-7); box-shadow: -12px 0 40px rgba(0,0,0,0.12); animation: slideIn 200ms ease; }
+  @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
+
+  .detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: 18px; }
+  .detail-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-1); line-height: 1.35; flex: 1; min-width: 0; }
+
+  /* ── Status segmented control ── */
+  .status-control {
+    display: flex;
+    justify-content: center;
+    gap: 0;
+    margin: 0 8px 22px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 3px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+  }
+  .status-seg {
+    flex: 1;
+    padding: 8px 0;
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--text-3);
+    background: none;
+    border: none;
+    border-radius: 9px;
+    cursor: pointer;
+    font-family: var(--font);
+    transition: all var(--transition);
+    text-align: center;
+  }
+  .status-seg:hover { color: var(--text-2); }
+  .status-seg.active { color: var(--text-1); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
+  .status-seg.active[data-status="Issue"] { background: var(--error-dim); color: var(--error); }
+  .status-seg.active[data-status="Pending"] { background: var(--warning-bg); color: var(--warning); }
+  .status-seg.active[data-status="Received"] { background: var(--success-dim); color: var(--success); }
+  .status-seg.active[data-status="Closed"] { background: var(--card); color: var(--text-2); }
+  .detail-close { background: none; border: none; cursor: pointer; color: var(--text-4); padding: var(--sp-1.5); border-radius: var(--radius-md); transition: all var(--transition); }
+  .detail-close:hover { color: var(--text-1); background: var(--card-hover); }
+  .detail-close svg { width: 18px; height: 18px; }
+
+  /* ── Photos ── */
+  .detail-photos { display: flex; gap: 10px; margin-bottom: var(--sp-5); overflow-x: auto; padding-bottom: var(--sp-1); }
+  .detail-photos::-webkit-scrollbar { height: 4px; }
+  .detail-photos::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+  .photo-img { width: 140px; height: 105px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--card-hover); }
+  .photo-placeholder { width: 140px; height: 105px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 70%, var(--card)); border: 1px dashed var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1.5); flex-shrink: 0; color: var(--text-4); }
+  .photo-placeholder svg { width: 22px; height: 22px; opacity: 0.5; }
+  .empty-photo { width: 100%; height: 90px; border-radius: 10px; }
+  .empty-photo span { font-size: var(--text-sm); color: var(--text-4); }
+
+  /* ── Actions ── */
+  .actions-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-7); }
+  .actions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
+  .actions-row.secondary { grid-template-columns: repeat(2, 1fr); }
+  .action-btn {
+    display: flex; align-items: center; justify-content: center; gap: 5px;
+    padding: 8px 14px; border-radius: var(--radius-md); height: 34px; width: 100%;
+    background: var(--card); border: 1px solid var(--border);
+    font-size: var(--text-sm); font-weight: 500; color: var(--text-3);
+    cursor: pointer; font-family: var(--font);
+    transition: all var(--transition);
+  }
+  .action-btn:hover { border-color: var(--text-4); color: var(--text-1); }
+  .action-btn:active { transform: scale(0.97); }
+  .action-btn.primary { background: var(--accent); border-color: var(--accent); color: white; }
+  .action-btn.primary:hover { opacity: 0.9; border-color: var(--accent); color: white; }
+  .action-btn.sm { padding: 6px 11px; font-size: var(--text-sm); height: 30px; }
+  .action-btn.ghost { border-color: transparent; color: var(--text-4); background: none; }
+  .action-btn.ghost:hover { color: var(--text-2); background: var(--card-hover); border-color: transparent; }
+  .action-btn svg { width: 14px; height: 14px; }
+  .action-btn.sm svg { width: 13px; height: 13px; }
+
+  /* ── Section groups ── */
+  .section-group { margin-bottom: var(--sp-7); }
+  .section-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin-bottom: var(--sp-1.5); }
+
+  /* ── Detail fields ── */
+  .detail-fields { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
+  .detail-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
+  .detail-row + .detail-row { border-top: 1px solid var(--border); }
+  .detail-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 70%, var(--card)); }
+  .field-label { font-size: var(--text-sm); color: var(--text-1); opacity: 0.65; letter-spacing: 0.01em; }
+  .field-value { font-size: var(--text-base); font-weight: 400; color: var(--text-1); text-align: right; letter-spacing: -0.01em; }
+
+  /* ── Inline editing ── */
+  .detail-row.editable { cursor: pointer; }
+  .detail-row.editable:hover { background: var(--card-hover); }
+  .detail-title.editable { cursor: pointer; border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -4px; }
+  .detail-title.editable:hover { background: var(--card-hover); }
+  .edit-input {
+    width: 100%; padding: 6px 10px; border-radius: var(--radius-sm);
+    border: 1px solid var(--accent); background: var(--surface-secondary);
+    color: var(--text-1); font-size: var(--text-base); font-family: var(--font);
+    text-align: right; outline: none;
+    box-shadow: 0 0 0 3px var(--accent-border);
+  }
+  .edit-input.mono { font-family: var(--mono); }
+  .edit-input[type="number"] { font-family: var(--mono); }
+  .detail-title-edit {
+    font-size: var(--text-lg); font-weight: 600; text-align: left;
+    flex: 1; min-width: 0;
+  }
+  .edit-textarea {
+    text-align: left; resize: vertical; min-height: 60px;
+    width: 100%; font-size: var(--text-sm); line-height: 1.5;
+  }
+  .detail-row.editing { background: var(--accent-dim); }
+  .hidden-input { display: none; }
+  .upload-menu {
+    position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--sp-1); z-index: 10;
+    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12); overflow: hidden;
+  }
+  .upload-option {
+    display: flex; align-items: center; gap: 10px; width: 100%;
+    padding: 12px 16px; background: none; border: none; border-bottom: 1px solid var(--border);
+    font-size: var(--text-base); font-weight: 500; color: var(--text-1); cursor: pointer;
+    font-family: var(--font); transition: background var(--transition); text-align: left;
+  }
+  .upload-option:last-child { border-bottom: none; }
+  .upload-option:hover { background: var(--card-hover); }
+  .upload-option svg { width: 18px; height: 18px; color: var(--text-3); }
+  .actions-row { position: relative; }
+  .field-value.mono { font-family: var(--mono); }
+  .field-value.strong { font-weight: 600; color: var(--text-1); }
+
+  /* ── Mobile ── */
+  @media (max-width: 768px) {
+    .page-subtitle { font-size: var(--text-xl); }
+    .detail-sheet { width: 100%; padding: var(--sp-5); }
+    .detail-photos { gap: var(--sp-2); }
+    .photo-img { width: 120px; height: 90px; }
+    .photo-placeholder { width: 120px; height: 90px; }
+    .detail-title { font-size: var(--text-lg); }
+  }
+</style>
diff --git a/frontend-v2/src/lib/pages/reader/AtelierReaderPage.svelte b/frontend-v2/src/lib/pages/reader/AtelierReaderPage.svelte
new file mode 100644
index 0000000..3d7b8d1
--- /dev/null
+++ b/frontend-v2/src/lib/pages/reader/AtelierReaderPage.svelte
@@ -0,0 +1,1183 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  // ── Types ──
+  interface Feed { name: string; count: number; id?: number; }
+  interface FeedCategory { name: string; feeds: Feed[]; expanded: boolean; id?: number; }
+  interface Article {
+    id: number; title: string; feed: string; timeAgo: string; readingTime: string;
+    content: string; thumbnail?: string; starred: boolean; read: boolean;
+    author?: string; url?: string;
+  }
+
+  // ── State ──
+  let navItems = $state([
+    { label: 'Today', count: 0, icon: 'calendar' },
+    { label: 'Starred', count: 0, icon: 'star' },
+    { label: 'History', count: 0, icon: 'clock' }
+  ]);
+  let feedCategories = $state<FeedCategory[]>([]);
+  let articles = $state<Article[]>([]);
+  let activeNav = $state('Today');
+  let activeFeedId = $state<number | null>(null);
+  let selectedArticle = $state<Article | null>(null);
+  let filterMode = $state<'unread' | 'all'>('unread');
+  let sidebarOpen = $state(false);
+  let autoScrollActive = $state(false);
+  let autoScrollSpeed = $state(1.5);
+  let articleListEl: HTMLDivElement;
+  let scrollRAF: number | null = null;
+  let loading = $state(true);
+  let loadingMore = $state(false);
+  let hasMore = $state(true);
+  let totalUnread = $state(0);
+  const LIMIT = 50;
+  let feedCounters: Record<string, number> = {};
+
+  // ── Helpers ──
+  function timeAgo(dateStr: string): string {
+    const mins = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000);
+    if (mins < 1) return 'now';
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    return `${days}d ago`;
+  }
+
+  function extractThumb(html: string): string | null {
+    const match = html?.match(/<img[^>]+src=["']([^"']+)["']/i);
+    if (!match) return null;
+    return match[1].replace(/&amp;/g, '&');
+  }
+
+  function stripHtml(html: string): string {
+    if (!html) return '';
+    return html.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/\s+/g, ' ').trim();
+  }
+
+  function mapEntry(e: any): Article {
+    return {
+      id: e.id, title: e.title, feed: e.feed?.title || '', url: e.url,
+      timeAgo: timeAgo(e.published_at), readingTime: `${e.reading_time || 1} min`,
+      content: e.content || '', thumbnail: extractThumb(e.content),
+      starred: e.starred || false, read: e.status === 'read',
+      author: e.author || ''
+    };
+  }
+
+  // ── API ──
+  async function api(path: string, opts: RequestInit = {}) {
+    const res = await fetch(`/api/reader${path}`, { credentials: 'include', ...opts });
+    if (!res.ok) throw new Error(`${res.status}`);
+    return res.json();
+  }
+
+  async function loadSidebar() {
+    try {
+      const [cats, feeds, counters] = await Promise.all([
+        api('/categories'), api('/feeds'), api('/feeds/counters')
+      ]);
+      feedCounters = counters.unreads || {};
+      totalUnread = Object.values(feedCounters).reduce((s: number, c: any) => s + (c as number), 0);
+
+      feedCategories = cats.map((c: any) => ({
+        id: c.id, name: c.title,
+        expanded: false,
+        feeds: feeds
+          .filter((f: any) => f.category.id === c.id)
+          .map((f: any) => ({ id: f.id, name: f.title, count: feedCounters[String(f.id)] || 0 }))
+      })).filter((c: FeedCategory) => c.feeds.length > 0);
+
+      // Expand first category
+      if (feedCategories.length > 0) feedCategories[0].expanded = true;
+
+      // Update nav counts
+      navItems[0].count = totalUnread;
+      try {
+        const [starred, history] = await Promise.all([
+          api('/entries?starred=true&limit=1'),
+          api('/entries?status=read&limit=1')
+        ]);
+        navItems[1].count = starred.total || 0;
+        navItems[2].count = history.total || 0;
+      } catch { /* silent */ }
+    } catch { /* silent */ }
+  }
+
+  async function loadEntries(append = false) {
+    if (loadingMore) return;
+    if (!append) { loading = true; articles = []; hasMore = true; }
+    else loadingMore = true;
+
+    try {
+      let params = `limit=${LIMIT}&direction=desc&order=published_at`;
+      if (!append) params += '&offset=0';
+      else params += `&offset=${articles.length}`;
+
+      if (activeFeedId) {
+        params += `&feed_id=${activeFeedId}`;
+      }
+
+      if (activeNav === 'Today') {
+        params += '&status=unread';
+      } else if (activeNav === 'Starred') {
+        params += '&starred=true';
+      } else if (activeNav === 'History') {
+        params += '&status=read';
+      }
+
+      const data = await api(`/entries?${params}`);
+      const mapped = (data.entries || []).map(mapEntry);
+
+      if (append) {
+        articles = [...articles, ...mapped];
+      } else {
+        articles = mapped;
+      }
+      hasMore = mapped.length === LIMIT;
+    } catch { /* silent */ }
+    finally { loading = false; loadingMore = false; }
+  }
+
+  async function markEntryRead(id: number) {
+    try {
+      await api('/entries', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entry_ids: [id], status: 'read' })
+      });
+    } catch { /* silent */ }
+  }
+
+  async function markEntryUnread(id: number) {
+    try {
+      await api('/entries', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entry_ids: [id], status: 'unread' })
+      });
+    } catch { /* silent */ }
+  }
+
+  async function toggleStarAPI(id: number) {
+    try {
+      await api(`/entries/${id}/bookmark`, { method: 'PUT' });
+    } catch { /* silent */ }
+  }
+
+  async function markAllReadAPI() {
+    const ids = articles.filter(a => !a.read).map(a => a.id);
+    if (!ids.length) return;
+    try {
+      await api('/entries', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entry_ids: ids, status: 'read' })
+      });
+    } catch { /* silent */ }
+  }
+
+  // ── Karakeep ──
+  let karakeepIds = $state<Record<number, string>>({});
+  let savingToKarakeep = $state<Set<number>>(new Set());
+
+  async function toggleKarakeep(article: Article, e?: Event) {
+    e?.stopPropagation();
+    e?.preventDefault();
+    if (savingToKarakeep.has(article.id)) return;
+    const articleUrl = article.url || '';
+    console.log('Karakeep: saving', article.id, articleUrl);
+    if (!articleUrl && !karakeepIds[article.id]) {
+      console.log('Karakeep: no URL, skipping');
+      return;
+    }
+    savingToKarakeep = new Set([...savingToKarakeep, article.id]);
+    try {
+      if (karakeepIds[article.id]) {
+        const res = await fetch('/api/karakeep/delete', {
+          method: 'POST', credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ id: karakeepIds[article.id] })
+        });
+        console.log('Karakeep delete:', res.status);
+        const next = { ...karakeepIds };
+        delete next[article.id];
+        karakeepIds = next;
+      } else {
+        const res = await fetch('/api/karakeep/save', {
+          method: 'POST', credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ url: articleUrl })
+        });
+        const text = await res.text();
+        console.log('Karakeep save:', res.status, text);
+        try {
+          const data = JSON.parse(text);
+          if (res.ok && data.ok) {
+            karakeepIds = { ...karakeepIds, [article.id]: data.id };
+            console.log('Karakeep: saved as', data.id);
+          }
+        } catch { console.error('Karakeep: bad JSON response'); }
+      }
+    } catch (err) {
+      console.error('Karakeep error:', err);
+    } finally {
+      const next = new Set(savingToKarakeep);
+      next.delete(article.id);
+      savingToKarakeep = next;
+    }
+  }
+
+  // ── Touch to stop auto-scroll ──
+  function handleScrollInterrupt() {
+    if (autoScrollActive) stopAutoScroll();
+  }
+
+  // ── Event handlers ──
+  function decrementUnread(count = 1) {
+    totalUnread = Math.max(0, totalUnread - count);
+    navItems[0].count = totalUnread;
+    navItems = [...navItems];
+  }
+
+  const filteredArticles = $derived(articles);
+
+  const currentIndex = $derived(
+    selectedArticle ? filteredArticles.findIndex(a => a.id === selectedArticle!.id) : -1
+  );
+
+  function selectArticle(article: Article) {
+    selectedArticle = article;
+    if (!article.read) {
+      article.read = true;
+      articles = [...articles];
+      markEntryRead(article.id);
+      decrementUnread();
+    }
+  }
+
+  function closeArticle() { selectedArticle = null; }
+
+  function toggleStar(article: Article, e?: Event) {
+    e?.stopPropagation();
+    article.starred = !article.starred;
+    articles = [...articles];
+    toggleStarAPI(article.id);
+  }
+
+  function toggleRead(article: Article) {
+    const wasRead = article.read;
+    article.read = !article.read;
+    articles = [...articles];
+    if (article.read) { markEntryRead(article.id); decrementUnread(); }
+    else { markEntryUnread(article.id); totalUnread++; navItems[0].count = totalUnread; navItems = [...navItems]; }
+  }
+
+  function markAllRead() {
+    const unreadCount = articles.filter(a => !a.read).length;
+    markAllReadAPI();
+    articles = articles.map(a => ({ ...a, read: true }));
+    decrementUnread(unreadCount);
+  }
+
+  function goNext() {
+    if (currentIndex < filteredArticles.length - 1) selectArticle(filteredArticles[currentIndex + 1]);
+  }
+  function goPrev() {
+    if (currentIndex > 0) selectArticle(filteredArticles[currentIndex - 1]);
+  }
+
+  function toggleCategory(index: number) {
+    feedCategories[index].expanded = !feedCategories[index].expanded;
+  }
+
+  function selectFeed(feedId: number) {
+    activeFeedId = feedId;
+    activeNav = '';
+    sidebarOpen = false;
+    loadEntries();
+  }
+
+  function selectNav(label: string) {
+    activeNav = label;
+    activeFeedId = null;
+    sidebarOpen = false;
+    loadEntries();
+  }
+
+  // ── Auto-scroll (requestAnimationFrame for smoothness) ──
+  function usesPageScroll(): boolean {
+    return window.matchMedia('(max-width: 1024px)').matches;
+  }
+
+  function startAutoScroll() {
+    if (scrollRAF) cancelAnimationFrame(scrollRAF);
+    if (!usesPageScroll() && !articleListEl) return;
+    autoScrollActive = true;
+    function step() {
+      if (!autoScrollActive) return;
+
+      if (usesPageScroll()) {
+        const nextY = window.scrollY + autoScrollSpeed;
+        const maxY = Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
+        window.scrollTo({ top: Math.min(nextY, maxY), behavior: 'auto' });
+        if (nextY >= maxY) {
+          stopAutoScroll();
+          return;
+        }
+      } else {
+        if (!articleListEl) return;
+        articleListEl.scrollTop += autoScrollSpeed;
+        const maxScroll = articleListEl.scrollHeight - articleListEl.clientHeight;
+        if (articleListEl.scrollTop >= maxScroll) {
+          stopAutoScroll();
+          return;
+        }
+      }
+
+      scrollRAF = requestAnimationFrame(step);
+    }
+    scrollRAF = requestAnimationFrame(step);
+  }
+  function stopAutoScroll() {
+    autoScrollActive = false;
+    if (scrollRAF) { cancelAnimationFrame(scrollRAF); scrollRAF = null; }
+  }
+  function toggleAutoScroll() {
+    if (autoScrollActive) stopAutoScroll();
+    else startAutoScroll();
+  }
+  function adjustSpeed(delta: number) {
+    autoScrollSpeed = Math.max(0.25, Math.min(5, +(autoScrollSpeed + delta).toFixed(2)));
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'j' || e.key === 'ArrowDown') { e.preventDefault(); goNext(); }
+    if (e.key === 'k' || e.key === 'ArrowUp') { e.preventDefault(); goPrev(); }
+    if (e.key === 'Escape' && selectedArticle) { closeArticle(); }
+    if (e.key === 's' && selectedArticle) { toggleStar(selectedArticle); }
+    if (e.key === 'm' && selectedArticle) { toggleRead(selectedArticle); }
+  }
+
+  // ── Mark-as-read on scroll (throttled to avoid jitter) ──
+  let pendingReadIds: number[] = [];
+  let flushTimer: ReturnType<typeof setTimeout> | null = null;
+  let scrollCheckTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function handleListScroll() {
+    // Throttle: only check every 400ms
+    if (scrollCheckTimer) return;
+    scrollCheckTimer = setTimeout(() => {
+      scrollCheckTimer = null;
+      checkScrolledCards();
+    }, 400);
+  }
+
+  function checkScrolledCards() {
+    if (!articleListEl) return;
+
+    // Infinite scroll — load more when near bottom
+    const { scrollTop, scrollHeight, clientHeight } = articleListEl;
+    if (hasMore && !loadingMore && scrollHeight - scrollTop - clientHeight < 300) {
+      loadEntries(true);
+    }
+
+    const listTop = articleListEl.getBoundingClientRect().top;
+    const cards = articleListEl.querySelectorAll('[data-entry-id]');
+    let newlyRead = 0;
+
+    cards.forEach(card => {
+      if (card.getBoundingClientRect().bottom < listTop + 20) {
+        const id = Number(card.getAttribute('data-entry-id'));
+        if (!id) return;
+        const article = articles.find(a => a.id === id);
+        if (article && !article.read) {
+          article.read = true;
+          pendingReadIds.push(id);
+          newlyRead++;
+        }
+      }
+    });
+
+    if (newlyRead > 0) {
+      articles = [...articles];
+      decrementUnread(newlyRead);
+      if (flushTimer) clearTimeout(flushTimer);
+      flushTimer = setTimeout(flushPendingReads, 1000);
+    }
+  }
+
+  async function flushPendingReads() {
+    if (!pendingReadIds.length) return;
+    const ids = [...pendingReadIds];
+    pendingReadIds = [];
+    try {
+      await api('/entries', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entry_ids: ids, status: 'read' })
+      });
+    } catch { /* silent */ }
+  }
+
+  // ── Init ──
+  onMount(() => {
+    loadSidebar();
+    loadEntries();
+    return () => {
+      if (flushTimer) clearTimeout(flushTimer);
+    };
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="reader-layout">
+
+  <!-- Left Sidebar -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <aside class="reader-sidebar" class:open={sidebarOpen}>
+    <div class="sidebar-header">
+      <svg class="rss-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
+      <span class="sidebar-title">Reader</span>
+    </div>
+
+    <nav class="sidebar-nav">
+      {#each navItems as item}
+        <button
+          class="nav-item"
+          class:active={activeNav === item.label}
+          onclick={() => selectNav(item.label)}
+        >
+          <div class="nav-icon">
+            {#if item.icon === 'inbox'}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
+            {:else if item.icon === 'calendar'}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+            {:else if item.icon === 'star'}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+            {:else}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            {/if}
+          </div>
+          <span class="nav-label">{item.label}</span>
+          {#if item.count > 0}
+            <span class="nav-count">{item.count}</span>
+          {/if}
+        </button>
+      {/each}
+    </nav>
+
+    <div class="sidebar-separator"></div>
+
+    <div class="feeds-section">
+      <div class="feeds-header">Feeds</div>
+      {#each feedCategories as cat, i}
+        <div class="feed-category">
+          <button class="category-toggle" onclick={() => toggleCategory(i)}>
+            <svg class="expand-icon" class:expanded={cat.expanded} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+            <span class="category-name">{cat.name}</span>
+            <span class="category-count">{cat.feeds.reduce((s, f) => s + f.count, 0)}</span>
+          </button>
+          {#if cat.expanded}
+            <div class="feed-list">
+              {#each cat.feeds as feed}
+                <button class="feed-item" onclick={() => selectFeed(feed.id || 0)}>
+                  <span class="feed-name">{feed.name}</span>
+                  {#if feed.count > 0}
+                    <span class="feed-count">{feed.count}</span>
+                  {/if}
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </aside>
+
+  <!-- Sidebar overlay for mobile -->
+  {#if sidebarOpen}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="sidebar-overlay" onclick={() => sidebarOpen = false}></div>
+  {/if}
+
+  <!-- Middle Panel: Article List -->
+  <div class="reader-list">
+    <div class="list-header">
+      <div class="list-header-top">
+        <button class="mobile-menu" onclick={() => sidebarOpen = !sidebarOpen} aria-label="Toggle sidebar">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+        </button>
+        <div class="list-heading">
+          <div class="list-kicker">Reading desk</div>
+          <div class="list-view-name">{activeFeedId ? feedCategories.flatMap(c => c.feeds).find(f => f.id === activeFeedId)?.name || 'Feed' : activeNav} <span class="list-count">{activeNav === 'Today' && !activeFeedId ? totalUnread : filteredArticles.length}</span></div>
+          <div class="list-subtitle">
+            {#if activeFeedId}
+              Focused source view with full article detail one click away.
+            {:else if activeNav === 'Today'}
+              Fresh unread stories across your active feeds.
+            {:else if activeNav === 'Starred'}
+              Saved stories worth keeping in rotation.
+            {:else}
+              Previously read entries and archive context.
+            {/if}
+          </div>
+        </div>
+        <div class="list-actions">
+          <button class="btn-icon" title="Refresh">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+          </button>
+          <button class="btn-icon" title="Mark all read" onclick={markAllRead}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
+          </button>
+          <button class="btn-icon" class:active-icon={autoScrollActive} onclick={toggleAutoScroll} title="Auto-scroll feed">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14"/><path d="M19 12l-7 7-7-7"/></svg>
+          </button>
+          {#if autoScrollActive}
+            <div class="speed-control">
+              <button class="speed-btn" onclick={() => adjustSpeed(-0.25)}>-</button>
+              <span class="speed-value">{autoScrollSpeed}x</span>
+              <button class="speed-btn" onclick={() => adjustSpeed(0.25)}>+</button>
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+
+    <div class="mobile-scroll-fab" class:active={autoScrollActive}>
+      <button class="mobile-scroll-pill" onclick={toggleAutoScroll} title="Auto-scroll feed">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14"/><path d="M19 12l-7 7-7-7"/></svg>
+        <span>{autoScrollActive ? 'Stop' : 'Auto'}</span>
+      </button>
+      {#if autoScrollActive}
+        <div class="mobile-speed-pod">
+          <button class="speed-btn" onclick={() => adjustSpeed(-0.25)}>-</button>
+          <span class="speed-value">{autoScrollSpeed}x</span>
+          <button class="speed-btn" onclick={() => adjustSpeed(0.25)}>+</button>
+        </div>
+      {/if}
+    </div>
+
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="article-list" bind:this={articleListEl} ontouchstart={handleScrollInterrupt} onwheel={handleScrollInterrupt} onscroll={handleListScroll}>
+      {#each filteredArticles as article, index (article.id)}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="article-card"
+          class:featured={!selectedArticle && !article.read && article.thumbnail && index === 0}
+          class:selected={selectedArticle?.id === article.id}
+          class:is-read={article.read}
+          data-entry-id={article.id}
+          onclick={() => selectArticle(article)}
+        >
+          <!-- Card header: source + time + actions -->
+          <div class="card-header">
+            <div class="card-source">
+              <svg class="card-rss" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
+              <span class="card-feed-name">{article.feed}</span>
+              {#if article.author}
+                <span class="card-author">· {article.author}</span>
+              {/if}
+            </div>
+            <div class="card-header-right">
+              <button class="bookmark-btn" class:saved={!!karakeepIds[article.id]} onclick={(e) => toggleKarakeep(article, e)} title={karakeepIds[article.id] ? 'Saved to Karakeep' : 'Save to Karakeep'}>
+                {#if savingToKarakeep.has(article.id)}
+                  <svg class="spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+                {:else}
+                  <svg viewBox="0 0 24 24" fill={karakeepIds[article.id] ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+                {/if}
+              </button>
+              <span class="card-time">{article.timeAgo}</span>
+            </div>
+          </div>
+
+          <div class="card-main">
+            <div class="card-copy">
+              <div class="card-title">{article.title}</div>
+              <div class="card-preview">{stripHtml(article.content).slice(0, 200)}</div>
+            </div>
+
+            {#if article.thumbnail}
+              <div class="card-banner" style="background-image:url('{article.thumbnail}')"></div>
+            {/if}
+          </div>
+
+          <div class="card-footer">
+            <span class="card-reading-time">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+              {article.readingTime}
+            </span>
+            {#if !article.read}
+              <span class="card-state">Unread</span>
+            {/if}
+          </div>
+        </div>
+      {/each}
+      {#if filteredArticles.length === 0}
+        <div class="list-empty">No articles to show</div>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<!-- Reading pane — slide-in overlay -->
+{#if selectedArticle}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="pane-overlay" onclick={closeArticle}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="pane-sheet" onclick={(e) => e.stopPropagation()}>
+      <div class="pane-toolbar">
+        <div class="pane-nav">
+          <button class="pane-nav-btn" onclick={closeArticle} title="Close (Esc)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+          <button class="pane-nav-btn" onclick={goPrev} disabled={currentIndex <= 0} title="Previous (k)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+          </button>
+          <span class="pane-nav-pos">{currentIndex + 1} / {filteredArticles.length}</span>
+          <button class="pane-nav-btn" onclick={goNext} disabled={currentIndex >= filteredArticles.length - 1} title="Next (j)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </button>
+        </div>
+        <div class="pane-actions">
+          <button class="pane-action-btn" class:saved-karakeep={!!karakeepIds[selectedArticle.id]} onclick={() => toggleKarakeep(selectedArticle!)} title={karakeepIds[selectedArticle.id] ? 'Saved to Karakeep' : 'Save to Karakeep'}>
+            {#if savingToKarakeep.has(selectedArticle.id)}
+              <svg class="spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+            {:else}
+              <svg viewBox="0 0 24 24" fill={karakeepIds[selectedArticle.id] ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+            {/if}
+          </button>
+          <button class="pane-action-btn" onclick={() => toggleRead(selectedArticle!)} title="Toggle read (m)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+          </button>
+          {#if selectedArticle.url}
+            <a href={selectedArticle.url} target="_blank" rel="noopener" class="pane-action-btn" title="Open original">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+            </a>
+          {/if}
+        </div>
+      </div>
+
+      <div class="pane-scroll">
+        <div class="pane-content">
+          {#if selectedArticle.thumbnail}
+            <div class="pane-hero">
+              <div class="pane-hero-image" style="background-image:url('{selectedArticle.thumbnail}')"></div>
+            </div>
+          {/if}
+          <h1 class="pane-title">{selectedArticle.title}</h1>
+          <div class="pane-meta">
+            <span class="pane-source">{selectedArticle.feed}</span>
+            <span class="pane-dot"></span>
+            <span>{selectedArticle.timeAgo}</span>
+            <span class="pane-dot"></span>
+            <span>{selectedArticle.readingTime} read</span>
+            {#if selectedArticle.author}
+              <span class="pane-dot"></span>
+              <span class="pane-author">by {selectedArticle.author}</span>
+            {/if}
+          </div>
+          <div class="pane-body">
+            {@html selectedArticle.content}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .reader-layout {
+    display: grid;
+    grid-template-columns: 248px minmax(0, 1fr);
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    position: relative;
+    gap: 0;
+    background:
+      radial-gradient(circle at top left, rgba(255,251,245,0.82), transparent 34%),
+      linear-gradient(180deg, #f3eadf 0%, #e8ddce 100%);
+  }
+
+  /* ── Mobile menu ── */
+  .mobile-menu {
+    display: none; width: 32px; height: 32px; border-radius: 10px;
+    background: rgba(255,255,255,0.66); border: 1px solid rgba(35,26,17,0.08);
+    align-items: center; justify-content: center; cursor: pointer;
+    flex-shrink: 0; transition: all var(--transition);
+  }
+  .mobile-menu:hover { background: rgba(255,255,255,0.9); }
+  .mobile-menu svg { width: 16px; height: 16px; color: #5e5248; }
+
+  /* ── Sidebar ── */
+  .reader-sidebar {
+    width: 248px;
+    flex-shrink: 0;
+    min-height: 0;
+    background: rgba(245, 237, 228, 0.82);
+    border-right: 1px solid rgba(35,26,17,0.1);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    padding: 16px 0 12px;
+    backdrop-filter: blur(16px);
+  }
+  .sidebar-header { display: flex; align-items: center; gap: 8px; padding: 0 18px 12px; }
+  .rss-icon { width: 16px; height: 16px; color: #7f5f3d; }
+  .sidebar-title { font-size: 1rem; font-weight: 700; color: #1f1811; letter-spacing: -0.03em; }
+
+  .sidebar-nav { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
+  .nav-item {
+    display: flex; align-items: center; gap: var(--sp-2);
+    padding: 10px 12px; border-radius: 14px; background: none; border: none;
+    font-size: var(--text-sm); color: #65584c; cursor: pointer;
+    transition: all var(--transition); text-align: left; width: 100%; font-family: var(--font);
+  }
+  .nav-item:hover { background: rgba(255,248,241,0.72); color: #1f1811; }
+  .nav-item.active { background: rgba(255,248,241,0.92); color: #1f1811; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(35,26,17,0.08); }
+  .nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
+  .nav-icon svg { width: 15px; height: 15px; }
+  .nav-label { flex: 1; }
+  .nav-count { font-size: var(--text-xs); color: #8a7a68; font-family: var(--mono); }
+  .nav-item.active .nav-count { color: #7f5f3d; opacity: 0.8; }
+
+  .sidebar-separator { height: 1px; background: rgba(35,26,17,0.08); margin: 12px 18px; }
+
+  .feeds-section { padding: 0 12px; flex: 1; }
+  .feeds-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #8a7a68; padding: 6px 12px 8px; }
+  .feed-category { margin-bottom: 1px; }
+  .category-toggle {
+    display: flex; align-items: center; gap: 5px; width: 100%;
+    padding: 7px 12px; background: none; border: none; font-size: var(--text-sm);
+    font-weight: 500; color: #352b22; cursor: pointer; border-radius: 12px;
+    transition: all var(--transition); font-family: var(--font);
+  }
+  .category-toggle:hover { background: rgba(255,248,241,0.72); }
+  .category-name { flex: 1; text-align: left; }
+  .category-count { font-size: var(--text-xs); color: #8a7a68; font-family: var(--mono); }
+  .expand-icon { width: 11px; height: 11px; transition: transform var(--transition); flex-shrink: 0; color: #8a7a68; }
+  .expand-icon.expanded { transform: rotate(90deg); }
+
+  .feed-list { padding-left: 18px; }
+  .feed-item {
+    display: flex; align-items: center; justify-content: space-between; width: 100%;
+    padding: 6px 10px; background: none; border: none; font-size: var(--text-sm);
+    color: #65584c; cursor: pointer; border-radius: 10px;
+    transition: all var(--transition); text-align: left; font-family: var(--font);
+  }
+  .feed-item:hover { background: rgba(255,248,241,0.72); color: #1f1811; }
+  .feed-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .feed-count { font-size: var(--text-xs); font-family: var(--mono); color: #8a7a68; flex-shrink: 0; margin-left: var(--sp-1.5); }
+
+  .sidebar-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 39; }
+
+  /* ── Feed list panel ── */
+  .reader-list {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    background: transparent;
+    overflow: hidden;
+  }
+  .list-header { padding: 18px 22px 8px; background: transparent; border-bottom: none; flex-shrink: 0; }
+  .list-header-top { display: flex; align-items: start; justify-content: space-between; margin-bottom: 0; gap: 14px; }
+  .list-heading { display: grid; gap: 4px; }
+  .list-kicker {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #8a7a68;
+  }
+  .list-view-name { font-size: 1.86rem; font-weight: 700; color: #1b140d; display: flex; align-items: center; gap: 10px; letter-spacing: -0.055em; line-height: 0.96; }
+  .list-count { font-size: 0.82rem; font-weight: 500; color: #8a7a68; font-family: var(--mono); letter-spacing: 0; }
+  .list-subtitle { color: #5f5448; font-size: 0.9rem; line-height: 1.45; max-width: 40ch; }
+  .list-actions { display: flex; gap: var(--sp-1); }
+  .btn-icon { width: 32px; height: 32px; border-radius: 10px; background: rgba(252,247,241,0.8); border: 1px solid rgba(35,26,17,0.08); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #65584c; transition: all var(--transition); }
+  .btn-icon:hover { color: #1f1811; background: rgba(255,250,244,0.96); }
+  .btn-icon.active-icon { color: #7f5f3d; border-color: rgba(127,95,61,0.18); background: rgba(255,248,242,0.92); }
+  .btn-icon svg { width: 14px; height: 14px; }
+
+  .list-filters { display: flex; gap: var(--sp-1); }
+  .filter-btn {
+    padding: 4px 10px 6px; border-radius: 0; background: none;
+    border: none; border-bottom: 2px solid transparent; font-size: var(--text-sm); font-weight: 500;
+    color: var(--text-3); cursor: pointer; transition: all var(--transition); font-family: var(--font);
+    position: relative;
+  }
+  .filter-btn:hover { color: var(--text-2); }
+  .filter-btn.active { color: var(--text-1); font-weight: 600; border-bottom-color: var(--accent); }
+
+  .speed-control { display: flex; align-items: center; gap: var(--sp-0.5); margin-left: var(--sp-1); }
+  .speed-btn {
+    width: 22px; height: 22px; border-radius: 8px; background: rgba(255,255,255,0.72);
+    border: 1px solid rgba(35,26,17,0.08); font-size: var(--text-sm); font-weight: 600;
+    color: #65584c; cursor: pointer; display: flex; align-items: center; justify-content: center;
+  }
+  .speed-btn:hover { color: #1f1811; }
+  .speed-value { font-size: var(--text-xs); font-family: var(--mono); color: #65584c; min-width: 24px; text-align: center; }
+
+  /* ── Article cards (feed style) ── */
+  .article-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px 22px 72px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .mobile-scroll-fab {
+    display: none;
+  }
+  .article-card {
+    position: relative;
+    padding: 14px 2px 16px 14px;
+    border-radius: 0;
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid rgba(35,26,17,0.1);
+    box-shadow: none;
+    cursor: pointer; transition: all var(--transition);
+  }
+  .article-card::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 14px;
+    bottom: 14px;
+    width: 2px;
+    border-radius: 999px;
+    background: transparent;
+    transition: background 160ms ease;
+  }
+  .article-card:hover { transform: translateX(2px); background: linear-gradient(90deg, rgba(249, 241, 232, 0.58), rgba(249, 241, 232, 0)); }
+  .article-card.selected { background: linear-gradient(90deg, rgba(244,234,222,0.92), rgba(244,234,222,0.18) 58%, rgba(244,234,222,0)); border-bottom-color: rgba(127,95,61,0.16); }
+  .article-card.selected::before,
+  .article-card:not(.is-read)::before { background: rgba(127, 95, 61, 0.5); }
+  .article-card.featured {
+    padding: 20px 20px 20px 22px;
+    margin: 2px 0 10px;
+    border-radius: 26px;
+    background: linear-gradient(145deg, rgba(252,246,239,0.96), rgba(241,231,219,0.9));
+    border: 1px solid rgba(35,26,17,0.08);
+    box-shadow: 0 12px 28px rgba(45,32,21,0.045);
+  }
+  .article-card.featured .card-main {
+    grid-template-columns: minmax(0, 1fr) 208px;
+    gap: 22px;
+  }
+  .article-card.featured .card-title {
+    font-size: 1.72rem;
+    line-height: 1.02;
+  }
+  .article-card.featured .card-banner {
+    width: 208px;
+    height: 152px;
+    border-radius: 20px;
+  }
+  .article-card.featured .card-preview {
+    -webkit-line-clamp: 3;
+  }
+  .article-card.is-read { opacity: 0.76; }
+  .article-card.is-read .card-title { color: #695b4d; }
+  .article-card.is-read .card-preview { color: #8a7a68; }
+  .article-card.is-read:hover { opacity: 0.82; }
+
+  .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
+  .card-source { display: flex; align-items: center; gap: var(--sp-1); font-size: 10px; color: #6a5d51; font-weight: 600; min-width: 0; text-transform: uppercase; letter-spacing: 0.09em; }
+  .card-rss { width: 12px; height: 12px; color: #8a7a68; flex-shrink: 0; }
+  .card-feed-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .card-author { color: #8a7a68; font-weight: 400; white-space: nowrap; text-transform: none; letter-spacing: 0; }
+  .card-header-right { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
+  .card-time { font-size: 0.72rem; color: #8a7a68; }
+  .star-btn {
+    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
+    background: none; border: none; cursor: pointer; color: var(--text-4); border-radius: var(--radius-sm);
+    transition: all var(--transition); opacity: 0;
+  }
+  .article-card:hover .star-btn { opacity: 1; }
+  .star-btn.starred { opacity: 1; color: #F59E0B; }
+  .star-btn:hover { color: #F59E0B; }
+  .star-btn svg { width: 13px; height: 13px; }
+
+  .bookmark-btn {
+    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
+    background: none; border: none; cursor: pointer; color: #8a7a68; border-radius: 10px;
+    transition: all var(--transition); opacity: 0.45;
+  }
+  .article-card:hover .bookmark-btn { opacity: 0.85; }
+  .bookmark-btn.saved { opacity: 1; color: #F59E0B; }
+  .bookmark-btn:hover { opacity: 1; color: #F59E0B; }
+  .bookmark-btn svg { width: 13px; height: 13px; }
+
+  .spinning { animation: spin 0.8s linear infinite; }
+  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+  .card-main { display: grid; grid-template-columns: minmax(0, 1fr) 136px; gap: 14px; align-items: start; }
+  .card-copy {
+    min-width: 0;
+  }
+  .card-title { font-size: 1.04rem; font-weight: 700; color: #1b140d; line-height: 1.14; margin-bottom: 6px; letter-spacing: -0.038em; }
+  .card-banner { width: 136px; height: 96px; border-radius: 16px; background: rgba(229,220,209,0.8) center/cover no-repeat; }
+  .card-preview { font-size: 0.9rem; color: #5d5349; line-height: 1.52; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
+  .card-footer { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
+  .card-reading-time { display: flex; align-items: center; gap: 3px; font-size: var(--text-xs); color: #8a7a68; }
+  .card-reading-time svg { width: 11px; height: 11px; }
+  .card-state {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: #8a7a68;
+  }
+  .list-empty { padding: var(--sp-10); text-align: center; color: #65584c; font-size: var(--text-sm); }
+
+  /* ── Reading pane (slide-in sheet) ── */
+  .pane-overlay {
+    position: fixed; inset: 0; background: rgba(17,13,10,0.46); z-index: 60;
+    display: flex; justify-content: flex-end; animation: paneFadeIn 150ms ease;
+    backdrop-filter: blur(16px);
+  }
+  @keyframes paneFadeIn { from { opacity: 0; } to { opacity: 1; } }
+  .pane-sheet {
+    width: 740px; max-width: 100%; height: 100%; background: linear-gradient(180deg, #f7efe6 0%, #ece1d3 100%);
+    display: flex; flex-direction: column;
+    border-left: 1px solid rgba(35,26,17,0.1);
+    box-shadow: -16px 0 44px rgba(0,0,0,0.14);
+    animation: paneSlideIn 200ms ease;
+  }
+  @keyframes paneSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
+  .pane-scroll { flex: 1; overflow-y: auto; }
+
+  .pane-toolbar {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 22px; border-bottom: 1px solid rgba(35,26,17,0.1); flex-shrink: 0;
+    background: rgba(249,242,233,0.72);
+    backdrop-filter: blur(12px);
+  }
+  .pane-nav { display: flex; align-items: center; gap: var(--sp-1); }
+  .pane-nav-btn {
+    width: 34px; height: 34px; border-radius: 10px; background: rgba(255,250,244,0.74);
+    border: 1px solid rgba(35,26,17,0.08); display: flex; align-items: center; justify-content: center;
+    cursor: pointer; color: #65584c; transition: all var(--transition);
+  }
+  .pane-nav-btn:hover { color: #1f1811; background: rgba(255,250,244,0.95); }
+  .pane-nav-btn:disabled { opacity: 0.25; cursor: default; }
+  .pane-nav-btn svg { width: 14px; height: 14px; }
+  .pane-nav-pos { font-size: var(--text-xs); color: #8a7a68; font-family: var(--mono); min-width: 44px; text-align: center; }
+
+  .pane-actions { display: flex; align-items: center; gap: var(--sp-0.5); }
+  .pane-action-btn {
+    width: 34px; height: 34px; border-radius: 10px; background: none;
+    border: none; display: flex; align-items: center; justify-content: center;
+    cursor: pointer; color: #65584c; transition: all var(--transition); text-decoration: none;
+  }
+  .pane-action-btn:hover { color: #1f1811; background: rgba(255,250,244,0.92); }
+  .pane-action-btn.active { color: var(--accent); }
+  .pane-action-btn.saved-karakeep { color: #F59E0B; }
+  .pane-action-btn svg { width: 15px; height: 15px; }
+
+  .pane-content { max-width: 680px; margin: 0 auto; padding: 30px 36px 88px; }
+  .pane-hero { margin-bottom: 18px; }
+  .pane-hero-image {
+    width: 100%;
+    height: 280px;
+    border-radius: 24px;
+    background: rgba(228,217,204,0.9) center/cover no-repeat;
+    box-shadow: 0 16px 36px rgba(39,28,18,0.09);
+  }
+  .pane-title { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.04; color: #1b140d; margin: 0 0 14px; letter-spacing: -0.05em; }
+  .pane-meta {
+    display: flex; align-items: center; gap: var(--sp-1.5); flex-wrap: wrap;
+    font-size: var(--text-sm); color: #65584c; margin-bottom: var(--sp-6);
+    padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(35,26,17,0.08);
+  }
+  .pane-source { font-weight: 600; color: #1f1811; }
+  .pane-author { font-style: italic; }
+  .pane-dot { width: 3px; height: 3px; border-radius: 50%; background: #8a7a68; }
+  .pane-body { font-size: 1.02rem; line-height: 1.9; color: #42372d; }
+  .pane-body :global(p) { margin-bottom: 18px; }
+  .pane-body :global(img) { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--sp-3) 0; }
+  .pane-body :global(a) { color: var(--accent); text-decoration: underline; }
+  .pane-body :global(a:hover) { opacity: 0.8; }
+  .pane-body :global(blockquote) { border-left: 3px solid var(--border); padding-left: var(--sp-4); margin: var(--sp-4) 0; color: var(--text-3); font-style: italic; }
+  .pane-body :global(pre) { background: var(--surface-secondary); padding: 14px; border-radius: var(--radius-md); overflow-x: auto; font-size: var(--text-sm); font-family: var(--mono); margin: var(--sp-4) 0; }
+  .pane-body :global(code) { font-family: var(--mono); font-size: 0.9em; }
+  .pane-body :global(h1), .pane-body :global(h2), .pane-body :global(h3) { color: var(--text-1); margin: 20px 0 10px; }
+  .pane-body :global(ul), .pane-body :global(ol) { padding-left: var(--sp-5); margin-bottom: var(--sp-4); }
+  .pane-body :global(li) { margin-bottom: var(--sp-1.5); }
+
+  /* ── Responsive ── */
+  @media (min-width: 1025px) {
+    :global(body) {
+      overflow: hidden;
+    }
+
+    :global(.shell) {
+      height: 100vh;
+      min-height: 100vh;
+      overflow: hidden;
+    }
+
+    :global(.shell-main) {
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    :global(.shell-content) {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    :global(body) {
+      background: linear-gradient(180deg, #f3eadf 0%, #e8ddce 100%);
+      overflow: auto;
+    }
+
+    .reader-layout {
+      position: relative;
+      grid-template-columns: minmax(0, 1fr);
+      height: auto;
+      min-height: calc(100vh - 56px);
+      overflow: visible;
+    }
+
+    .reader-sidebar { display: none; }
+    .reader-sidebar.open { display: flex; position: fixed; left: 0; top: 56px; bottom: 0; z-index: 40; box-shadow: 8px 0 24px rgba(0,0,0,0.08); }
+    .mobile-menu { display: flex; }
+    .reader-list {
+      overflow: visible;
+    }
+    .article-list {
+      overflow: visible;
+    }
+  }
+  @media (max-width: 768px) {
+    .reader-sidebar { display: none; }
+    .reader-sidebar.open { display: flex; position: fixed; left: 0; top: 56px; bottom: 0; z-index: 40; box-shadow: 8px 0 24px rgba(0,0,0,0.08); width: 260px; }
+    .mobile-menu { display: flex; }
+    .reader-list {
+      background:
+        linear-gradient(180deg, rgba(245, 237, 227, 0.96) 0%, rgba(239, 230, 219, 0.94) 100%);
+      overflow: visible;
+    }
+    .list-header {
+      padding: 14px 14px 10px;
+      position: relative;
+      background: rgba(244, 236, 226, 0.92);
+      backdrop-filter: blur(14px);
+      border-bottom: 1px solid rgba(35,26,17,0.08);
+    }
+    .list-header-top {
+      gap: 12px;
+    }
+    .list-view-name { font-size: 1.44rem; }
+    .list-subtitle { font-size: 0.84rem; line-height: 1.4; }
+    .article-list {
+      padding: 6px 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
+      gap: 8px;
+      background: transparent;
+      overflow: visible;
+    }
+    .list-actions {
+      display: none;
+    }
+    .mobile-scroll-fab {
+      position: fixed;
+      right: 14px;
+      bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
+      z-index: 18;
+      display: grid;
+      justify-items: end;
+      gap: 8px;
+    }
+    .mobile-scroll-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 11px 14px;
+      border-radius: 999px;
+      border: 1px solid rgba(35,26,17,0.1);
+      background: rgba(249, 242, 233, 0.94);
+      color: #54493f;
+      box-shadow: 0 14px 28px rgba(31, 21, 14, 0.12);
+      backdrop-filter: blur(14px);
+      font-size: 0.84rem;
+      font-weight: 600;
+      letter-spacing: -0.01em;
+    }
+    .mobile-scroll-pill svg {
+      width: 15px;
+      height: 15px;
+    }
+    .mobile-scroll-fab.active .mobile-scroll-pill {
+      background: rgba(89, 69, 49, 0.92);
+      color: #fff8f0;
+      border-color: rgba(89, 69, 49, 0.92);
+    }
+    .mobile-speed-pod {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 7px 9px;
+      border-radius: 999px;
+      border: 1px solid rgba(35,26,17,0.1);
+      background: rgba(249, 242, 233, 0.94);
+      box-shadow: 0 12px 22px rgba(31, 21, 14, 0.1);
+      backdrop-filter: blur(14px);
+    }
+    .article-card {
+      padding: 12px 12px 13px;
+      border-radius: 18px;
+      background: rgba(250, 244, 237, 0.88);
+      border: 1px solid rgba(35,26,17,0.08);
+      box-shadow: 0 8px 18px rgba(35,24,15,0.035);
+    }
+    .article-card::before { display: none; }
+    .article-card:hover {
+      transform: none;
+    }
+    .article-card.selected {
+      background: rgba(247, 238, 227, 0.96);
+      border-color: rgba(127,95,61,0.16);
+    }
+    .article-card.featured {
+      padding: 16px;
+      margin: 0;
+      border-radius: 24px;
+    }
+    .card-main { grid-template-columns: 1fr; }
+    .article-card.featured .card-main {
+      grid-template-columns: 1fr;
+      gap: 12px;
+    }
+    .card-title { font-size: 1rem; }
+    .article-card.featured .card-title {
+      font-size: 1.24rem;
+    }
+    .card-banner { width: 100%; height: 148px; border-radius: 15px; margin-top: 6px; }
+    .card-preview { -webkit-line-clamp: 2; }
+    .pane-sheet { width: 100%; }
+    .pane-content { padding: 24px 18px 80px; }
+    .pane-hero-image {
+      height: 200px;
+      border-radius: 18px;
+    }
+    .pane-title { font-size: 1.8rem; }
+    .pane-body { font-size: var(--text-md); line-height: 1.75; }
+    .pane-toolbar {
+      padding: 10px 14px;
+      background: rgba(246, 238, 228, 0.94);
+    }
+  }
+</style>
diff --git a/frontend-v2/src/lib/pages/reader/LegacyReaderPage.svelte b/frontend-v2/src/lib/pages/reader/LegacyReaderPage.svelte
new file mode 100644
index 0000000..1ae89a9
--- /dev/null
+++ b/frontend-v2/src/lib/pages/reader/LegacyReaderPage.svelte
@@ -0,0 +1,880 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  // ── Types ──
+  interface Feed { name: string; count: number; id?: number; }
+  interface FeedCategory { name: string; feeds: Feed[]; expanded: boolean; id?: number; }
+  interface Article {
+    id: number; title: string; feed: string; timeAgo: string; readingTime: string;
+    content: string; thumbnail?: string; starred: boolean; read: boolean;
+    author?: string; url?: string;
+  }
+
+  // ── State ──
+  let navItems = $state([
+    { label: 'Today', count: 0, icon: 'calendar' },
+    { label: 'Starred', count: 0, icon: 'star' },
+    { label: 'History', count: 0, icon: 'clock' }
+  ]);
+  let feedCategories = $state<FeedCategory[]>([]);
+  let articles = $state<Article[]>([]);
+  let activeNav = $state('Today');
+  let activeFeedId = $state<number | null>(null);
+  let selectedArticle = $state<Article | null>(null);
+  let filterMode = $state<'unread' | 'all'>('unread');
+  let sidebarOpen = $state(false);
+  let autoScrollActive = $state(false);
+  let autoScrollSpeed = $state(1.5);
+  let articleListEl: HTMLDivElement;
+  let scrollRAF: number | null = null;
+  let loading = $state(true);
+  let loadingMore = $state(false);
+  let hasMore = $state(true);
+  let totalUnread = $state(0);
+
+  const LIMIT = 50;
+  let feedCounters: Record<string, number> = {};
+
+  // ── Helpers ──
+  function timeAgo(dateStr: string): string {
+    const mins = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000);
+    if (mins < 1) return 'now';
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    return `${days}d ago`;
+  }
+
+  function extractThumb(html: string): string | null {
+    const match = html?.match(/<img[^>]+src=["']([^"']+)["']/i);
+    if (!match) return null;
+    return match[1].replace(/&amp;/g, '&');
+  }
+
+  function stripHtml(html: string): string {
+    if (!html) return '';
+    return html.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/\s+/g, ' ').trim();
+  }
+
+  function mapEntry(e: any): Article {
+    return {
+      id: e.id, title: e.title, feed: e.feed?.title || '', url: e.url,
+      timeAgo: timeAgo(e.published_at), readingTime: `${e.reading_time || 1} min`,
+      content: e.content || '', thumbnail: extractThumb(e.content),
+      starred: e.starred || false, read: e.status === 'read',
+      author: e.author || ''
+    };
+  }
+
+  // ── API ──
+  async function api(path: string, opts: RequestInit = {}) {
+    const res = await fetch(`/api/reader${path}`, { credentials: 'include', ...opts });
+    if (!res.ok) throw new Error(`${res.status}`);
+    return res.json();
+  }
+
+  async function loadSidebar() {
+    try {
+      const [cats, feeds, counters] = await Promise.all([
+        api('/categories'), api('/feeds'), api('/feeds/counters')
+      ]);
+      feedCounters = counters.unreads || {};
+      totalUnread = Object.values(feedCounters).reduce((s: number, c: any) => s + (c as number), 0);
+
+      feedCategories = cats.map((c: any) => ({
+        id: c.id, name: c.title,
+        expanded: false,
+        feeds: feeds
+          .filter((f: any) => f.category.id === c.id)
+          .map((f: any) => ({ id: f.id, name: f.title, count: feedCounters[String(f.id)] || 0 }))
+      })).filter((c: FeedCategory) => c.feeds.length > 0);
+
+      // Expand first category
+      if (feedCategories.length > 0) feedCategories[0].expanded = true;
+
+      // Update nav counts
+      navItems[0].count = totalUnread;
+      try {
+        const [starred, history] = await Promise.all([
+          api('/entries?starred=true&limit=1'),
+          api('/entries?status=read&limit=1')
+        ]);
+        navItems[1].count = starred.total || 0;
+        navItems[2].count = history.total || 0;
+      } catch { /* silent */ }
+    } catch { /* silent */ }
+  }
+
+  async function loadEntries(append = false) {
+    if (loadingMore) return;
+    if (!append) { loading = true; articles = []; hasMore = true; }
+    else loadingMore = true;
+
+    try {
+      let params = `limit=${LIMIT}&direction=desc&order=published_at`;
+      if (!append) params += '&offset=0';
+      else params += `&offset=${articles.length}`;
+
+      if (activeFeedId) {
+        params += `&feed_id=${activeFeedId}`;
+      }
+
+      if (activeNav === 'Today') {
+        params += '&status=unread';
+      } else if (activeNav === 'Starred') {
+        params += '&starred=true';
+      } else if (activeNav === 'History') {
+        params += '&status=read';
+      }
+
+      const data = await api(`/entries?${params}`);
+      const mapped = (data.entries || []).map(mapEntry);
+
+      if (append) {
+        articles = [...articles, ...mapped];
+      } else {
+        articles = mapped;
+      }
+      hasMore = mapped.length === LIMIT;
+    } catch { /* silent */ }
+    finally { loading = false; loadingMore = false; }
+  }
+
+  async function markEntryRead(id: number) {
+    try {
+      await api('/entries', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entry_ids: [id], status: 'read' })
+      });
+    } catch { /* silent */ }
+  }
+
+  async function markEntryUnread(id: number) {
+    try {
+      await api('/entries', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entry_ids: [id], status: 'unread' })
+      });
+    } catch { /* silent */ }
+  }
+
+  async function toggleStarAPI(id: number) {
+    try {
+      await api(`/entries/${id}/bookmark`, { method: 'PUT' });
+    } catch { /* silent */ }
+  }
+
+  async function markAllReadAPI() {
+    const ids = articles.filter(a => !a.read).map(a => a.id);
+    if (!ids.length) return;
+    try {
+      await api('/entries', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entry_ids: ids, status: 'read' })
+      });
+    } catch { /* silent */ }
+  }
+
+  // ── Karakeep ──
+  let karakeepIds = $state<Record<number, string>>({});
+  let savingToKarakeep = $state<Set<number>>(new Set());
+
+  async function toggleKarakeep(article: Article, e?: Event) {
+    e?.stopPropagation();
+    e?.preventDefault();
+    if (savingToKarakeep.has(article.id)) return;
+    const articleUrl = article.url || '';
+    console.log('Karakeep: saving', article.id, articleUrl);
+    if (!articleUrl && !karakeepIds[article.id]) {
+      console.log('Karakeep: no URL, skipping');
+      return;
+    }
+    savingToKarakeep = new Set([...savingToKarakeep, article.id]);
+    try {
+      if (karakeepIds[article.id]) {
+        const res = await fetch('/api/karakeep/delete', {
+          method: 'POST', credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ id: karakeepIds[article.id] })
+        });
+        console.log('Karakeep delete:', res.status);
+        const next = { ...karakeepIds };
+        delete next[article.id];
+        karakeepIds = next;
+      } else {
+        const res = await fetch('/api/karakeep/save', {
+          method: 'POST', credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ url: articleUrl })
+        });
+        const text = await res.text();
+        console.log('Karakeep save:', res.status, text);
+        try {
+          const data = JSON.parse(text);
+          if (res.ok && data.ok) {
+            karakeepIds = { ...karakeepIds, [article.id]: data.id };
+            console.log('Karakeep: saved as', data.id);
+          }
+        } catch { console.error('Karakeep: bad JSON response'); }
+      }
+    } catch (err) {
+      console.error('Karakeep error:', err);
+    } finally {
+      const next = new Set(savingToKarakeep);
+      next.delete(article.id);
+      savingToKarakeep = next;
+    }
+  }
+
+  // ── Touch to stop auto-scroll ──
+  function handleScrollInterrupt() {
+    if (autoScrollActive) stopAutoScroll();
+  }
+
+  // ── Event handlers ──
+  function decrementUnread(count = 1) {
+    totalUnread = Math.max(0, totalUnread - count);
+    navItems[0].count = totalUnread;
+    navItems = [...navItems];
+  }
+
+  const filteredArticles = $derived(articles);
+
+  const currentIndex = $derived(
+    selectedArticle ? filteredArticles.findIndex(a => a.id === selectedArticle!.id) : -1
+  );
+
+  function selectArticle(article: Article) {
+    selectedArticle = article;
+    if (!article.read) {
+      article.read = true;
+      articles = [...articles];
+      markEntryRead(article.id);
+      decrementUnread();
+    }
+  }
+
+  function closeArticle() { selectedArticle = null; }
+
+  function toggleStar(article: Article, e?: Event) {
+    e?.stopPropagation();
+    article.starred = !article.starred;
+    articles = [...articles];
+    toggleStarAPI(article.id);
+  }
+
+  function toggleRead(article: Article) {
+    const wasRead = article.read;
+    article.read = !article.read;
+    articles = [...articles];
+    if (article.read) { markEntryRead(article.id); decrementUnread(); }
+    else { markEntryUnread(article.id); totalUnread++; navItems[0].count = totalUnread; navItems = [...navItems]; }
+  }
+
+  function markAllRead() {
+    const unreadCount = articles.filter(a => !a.read).length;
+    markAllReadAPI();
+    articles = articles.map(a => ({ ...a, read: true }));
+    decrementUnread(unreadCount);
+  }
+
+  function goNext() {
+    if (currentIndex < filteredArticles.length - 1) selectArticle(filteredArticles[currentIndex + 1]);
+  }
+  function goPrev() {
+    if (currentIndex > 0) selectArticle(filteredArticles[currentIndex - 1]);
+  }
+
+  function toggleCategory(index: number) {
+    feedCategories[index].expanded = !feedCategories[index].expanded;
+  }
+
+  function selectFeed(feedId: number) {
+    activeFeedId = feedId;
+    activeNav = '';
+    sidebarOpen = false;
+    loadEntries();
+  }
+
+  function selectNav(label: string) {
+    activeNav = label;
+    activeFeedId = null;
+    sidebarOpen = false;
+    loadEntries();
+  }
+
+  // ── Auto-scroll (requestAnimationFrame for smoothness) ──
+  function startAutoScroll() {
+    if (scrollRAF) cancelAnimationFrame(scrollRAF);
+    if (!articleListEl) return;
+    autoScrollActive = true;
+    function step() {
+      if (!autoScrollActive || !articleListEl) return;
+      articleListEl.scrollTop += autoScrollSpeed;
+      scrollRAF = requestAnimationFrame(step);
+    }
+    scrollRAF = requestAnimationFrame(step);
+  }
+  function stopAutoScroll() {
+    autoScrollActive = false;
+    if (scrollRAF) { cancelAnimationFrame(scrollRAF); scrollRAF = null; }
+  }
+  function toggleAutoScroll() {
+    if (autoScrollActive) stopAutoScroll();
+    else startAutoScroll();
+  }
+  function adjustSpeed(delta: number) {
+    autoScrollSpeed = Math.max(0.5, Math.min(5, +(autoScrollSpeed + delta).toFixed(1)));
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'j' || e.key === 'ArrowDown') { e.preventDefault(); goNext(); }
+    if (e.key === 'k' || e.key === 'ArrowUp') { e.preventDefault(); goPrev(); }
+    if (e.key === 'Escape' && selectedArticle) { closeArticle(); }
+    if (e.key === 's' && selectedArticle) { toggleStar(selectedArticle); }
+    if (e.key === 'm' && selectedArticle) { toggleRead(selectedArticle); }
+  }
+
+  // ── Mark-as-read on scroll (throttled to avoid jitter) ──
+  let pendingReadIds: number[] = [];
+  let flushTimer: ReturnType<typeof setTimeout> | null = null;
+  let scrollCheckTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function handleListScroll() {
+    // Throttle: only check every 400ms
+    if (scrollCheckTimer) return;
+    scrollCheckTimer = setTimeout(() => {
+      scrollCheckTimer = null;
+      checkScrolledCards();
+    }, 400);
+  }
+
+  function checkScrolledCards() {
+    if (!articleListEl) return;
+
+    // Infinite scroll — load more when near bottom
+    const { scrollTop, scrollHeight, clientHeight } = articleListEl;
+    if (hasMore && !loadingMore && scrollHeight - scrollTop - clientHeight < 300) {
+      loadEntries(true);
+    }
+
+    const listTop = articleListEl.getBoundingClientRect().top;
+    const cards = articleListEl.querySelectorAll('[data-entry-id]');
+    let newlyRead = 0;
+
+    cards.forEach(card => {
+      if (card.getBoundingClientRect().bottom < listTop + 20) {
+        const id = Number(card.getAttribute('data-entry-id'));
+        if (!id) return;
+        const article = articles.find(a => a.id === id);
+        if (article && !article.read) {
+          article.read = true;
+          pendingReadIds.push(id);
+          newlyRead++;
+        }
+      }
+    });
+
+    if (newlyRead > 0) {
+      articles = [...articles];
+      decrementUnread(newlyRead);
+      if (flushTimer) clearTimeout(flushTimer);
+      flushTimer = setTimeout(flushPendingReads, 1000);
+    }
+  }
+
+  async function flushPendingReads() {
+    if (!pendingReadIds.length) return;
+    const ids = [...pendingReadIds];
+    pendingReadIds = [];
+    try {
+      await api('/entries', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entry_ids: ids, status: 'read' })
+      });
+    } catch { /* silent */ }
+  }
+
+  // ── Init ──
+  onMount(() => {
+    loadSidebar();
+    loadEntries();
+    return () => {
+      if (flushTimer) clearTimeout(flushTimer);
+    };
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="reader-layout">
+
+  <!-- Left Sidebar -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <aside class="reader-sidebar" class:open={sidebarOpen}>
+    <div class="sidebar-header">
+      <svg class="rss-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
+      <span class="sidebar-title">Reader</span>
+    </div>
+
+    <nav class="sidebar-nav">
+      {#each navItems as item}
+        <button
+          class="nav-item"
+          class:active={activeNav === item.label}
+          onclick={() => selectNav(item.label)}
+        >
+          <div class="nav-icon">
+            {#if item.icon === 'inbox'}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
+            {:else if item.icon === 'calendar'}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+            {:else if item.icon === 'star'}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+            {:else}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            {/if}
+          </div>
+          <span class="nav-label">{item.label}</span>
+          {#if item.count > 0}
+            <span class="nav-count">{item.count}</span>
+          {/if}
+        </button>
+      {/each}
+    </nav>
+
+    <div class="sidebar-separator"></div>
+
+    <div class="feeds-section">
+      <div class="feeds-header">Feeds</div>
+      {#each feedCategories as cat, i}
+        <div class="feed-category">
+          <button class="category-toggle" onclick={() => toggleCategory(i)}>
+            <svg class="expand-icon" class:expanded={cat.expanded} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+            <span class="category-name">{cat.name}</span>
+            <span class="category-count">{cat.feeds.reduce((s, f) => s + f.count, 0)}</span>
+          </button>
+          {#if cat.expanded}
+            <div class="feed-list">
+              {#each cat.feeds as feed}
+                <button class="feed-item" onclick={() => selectFeed(feed.id || 0)}>
+                  <span class="feed-name">{feed.name}</span>
+                  {#if feed.count > 0}
+                    <span class="feed-count">{feed.count}</span>
+                  {/if}
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </aside>
+
+  <!-- Sidebar overlay for mobile -->
+  {#if sidebarOpen}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="sidebar-overlay" onclick={() => sidebarOpen = false}></div>
+  {/if}
+
+  <!-- Middle Panel: Article List -->
+  <div class="reader-list">
+    <div class="list-header">
+      <div class="list-header-top">
+        <button class="mobile-menu" onclick={() => sidebarOpen = !sidebarOpen} aria-label="Toggle sidebar">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+        </button>
+        <div class="list-view-name">{activeFeedId ? feedCategories.flatMap(c => c.feeds).find(f => f.id === activeFeedId)?.name || 'Feed' : activeNav} <span class="list-count">{activeNav === 'Today' && !activeFeedId ? totalUnread : filteredArticles.length}</span></div>
+        <div class="list-actions">
+          <button class="btn-icon" title="Refresh">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+          </button>
+          <button class="btn-icon" title="Mark all read" onclick={markAllRead}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
+          </button>
+          <button class="btn-icon" class:active-icon={autoScrollActive} onclick={toggleAutoScroll} title="Auto-scroll feed">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14"/><path d="M19 12l-7 7-7-7"/></svg>
+          </button>
+          {#if autoScrollActive}
+            <div class="speed-control">
+              <button class="speed-btn" onclick={() => adjustSpeed(-0.5)}>-</button>
+              <span class="speed-value">{autoScrollSpeed}x</span>
+              <button class="speed-btn" onclick={() => adjustSpeed(0.5)}>+</button>
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="article-list" bind:this={articleListEl} ontouchstart={handleScrollInterrupt} onwheel={handleScrollInterrupt} onscroll={handleListScroll}>
+      {#each filteredArticles as article (article.id)}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="article-card"
+          class:selected={selectedArticle?.id === article.id}
+          class:is-read={article.read}
+          data-entry-id={article.id}
+          onclick={() => selectArticle(article)}
+        >
+          <!-- Card header: source + time + actions -->
+          <div class="card-header">
+            <div class="card-source">
+              <svg class="card-rss" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
+              <span class="card-feed-name">{article.feed}</span>
+              {#if article.author}
+                <span class="card-author">· {article.author}</span>
+              {/if}
+            </div>
+            <div class="card-header-right">
+              <button class="bookmark-btn" class:saved={!!karakeepIds[article.id]} onclick={(e) => toggleKarakeep(article, e)} title={karakeepIds[article.id] ? 'Saved to Karakeep' : 'Save to Karakeep'}>
+                {#if savingToKarakeep.has(article.id)}
+                  <svg class="spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+                {:else}
+                  <svg viewBox="0 0 24 24" fill={karakeepIds[article.id] ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+                {/if}
+              </button>
+              <span class="card-time">{article.timeAgo}</span>
+            </div>
+          </div>
+
+          <!-- Title -->
+          <div class="card-title">{article.title}</div>
+
+          <!-- Banner image -->
+          {#if article.thumbnail}
+            <div class="card-banner" style="background-image:url('{article.thumbnail}')"></div>
+          {/if}
+
+          <!-- Preview text -->
+          <div class="card-preview">{stripHtml(article.content).slice(0, 200)}</div>
+
+          <!-- Footer -->
+          <div class="card-footer">
+            <span class="card-reading-time">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+              {article.readingTime}
+            </span>
+          </div>
+        </div>
+      {/each}
+      {#if filteredArticles.length === 0}
+        <div class="list-empty">No articles to show</div>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<!-- Reading pane — slide-in overlay -->
+{#if selectedArticle}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="pane-overlay" onclick={closeArticle}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="pane-sheet" onclick={(e) => e.stopPropagation()}>
+      <div class="pane-toolbar">
+        <div class="pane-nav">
+          <button class="pane-nav-btn" onclick={closeArticle} title="Close (Esc)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+          <button class="pane-nav-btn" onclick={goPrev} disabled={currentIndex <= 0} title="Previous (k)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+          </button>
+          <span class="pane-nav-pos">{currentIndex + 1} / {filteredArticles.length}</span>
+          <button class="pane-nav-btn" onclick={goNext} disabled={currentIndex >= filteredArticles.length - 1} title="Next (j)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </button>
+        </div>
+        <div class="pane-actions">
+          <button class="pane-action-btn" class:saved-karakeep={!!karakeepIds[selectedArticle.id]} onclick={() => toggleKarakeep(selectedArticle!)} title={karakeepIds[selectedArticle.id] ? 'Saved to Karakeep' : 'Save to Karakeep'}>
+            {#if savingToKarakeep.has(selectedArticle.id)}
+              <svg class="spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+            {:else}
+              <svg viewBox="0 0 24 24" fill={karakeepIds[selectedArticle.id] ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+            {/if}
+          </button>
+          <button class="pane-action-btn" onclick={() => toggleRead(selectedArticle!)} title="Toggle read (m)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+          </button>
+          {#if selectedArticle.url}
+            <a href={selectedArticle.url} target="_blank" rel="noopener" class="pane-action-btn" title="Open original">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+            </a>
+          {/if}
+        </div>
+      </div>
+
+      <div class="pane-scroll">
+        <div class="pane-content">
+          <h1 class="pane-title">{selectedArticle.title}</h1>
+          <div class="pane-meta">
+            <span class="pane-source">{selectedArticle.feed}</span>
+            <span class="pane-dot"></span>
+            <span>{selectedArticle.timeAgo}</span>
+            <span class="pane-dot"></span>
+            <span>{selectedArticle.readingTime} read</span>
+            {#if selectedArticle.author}
+              <span class="pane-dot"></span>
+              <span class="pane-author">by {selectedArticle.author}</span>
+            {/if}
+          </div>
+          <div class="pane-body">
+            {@html selectedArticle.content}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .reader-layout {
+    display: flex; height: calc(100vh - 56px);
+    overflow: hidden; position: relative;
+  }
+
+  /* ── Mobile menu ── */
+  .mobile-menu {
+    display: none; width: 30px; height: 30px; border-radius: var(--radius-sm);
+    background: none; border: 1px solid var(--border);
+    align-items: center; justify-content: center; cursor: pointer;
+    flex-shrink: 0; transition: all var(--transition);
+  }
+  .mobile-menu:hover { background: var(--card-hover); }
+  .mobile-menu svg { width: 16px; height: 16px; color: var(--text-3); }
+
+  /* ── Sidebar ── */
+  .reader-sidebar {
+    width: 220px; flex-shrink: 0; background: var(--surface);
+    border-right: 1px solid var(--border); display: flex;
+    flex-direction: column; overflow-y: auto; padding: var(--sp-4) 0 var(--sp-3);
+  }
+  .sidebar-header { display: flex; align-items: center; gap: 7px; padding: 0 16px 12px; }
+  .rss-icon { width: 16px; height: 16px; color: var(--accent); }
+  .sidebar-title { font-size: var(--text-base); font-weight: 600; color: var(--text-1); }
+
+  .sidebar-nav { display: flex; flex-direction: column; gap: var(--sp-0.5); padding: 0 10px; }
+  .nav-item {
+    display: flex; align-items: center; gap: var(--sp-2);
+    padding: var(--sp-2) 10px; border-radius: var(--radius-sm); background: none; border: none;
+    font-size: var(--text-sm); color: var(--text-3); cursor: pointer;
+    transition: all var(--transition); text-align: left; width: 100%; font-family: var(--font);
+  }
+  .nav-item:hover { background: var(--card-hover); color: var(--text-1); }
+  .nav-item.active { background: none; color: var(--accent); font-weight: 600; border-left: 2px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-left: 8px; }
+  .nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
+  .nav-icon svg { width: 15px; height: 15px; }
+  .nav-label { flex: 1; }
+  .nav-count { font-size: var(--text-xs); color: var(--text-4); font-family: var(--mono); }
+  .nav-item.active .nav-count { color: var(--accent); opacity: 0.7; }
+
+  .sidebar-separator { height: 1px; background: var(--border); margin: 10px 16px; }
+
+  .feeds-section { padding: 0 10px; flex: 1; }
+  .feeds-header { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); padding: 4px 10px 6px; }
+  .feed-category { margin-bottom: 1px; }
+  .category-toggle {
+    display: flex; align-items: center; gap: 5px; width: 100%;
+    padding: 5px 10px; background: none; border: none; font-size: var(--text-sm);
+    font-weight: 500; color: var(--text-2); cursor: pointer; border-radius: var(--radius-sm);
+    transition: all var(--transition); font-family: var(--font);
+  }
+  .category-toggle:hover { background: var(--card-hover); }
+  .category-name { flex: 1; text-align: left; }
+  .category-count { font-size: var(--text-xs); color: var(--text-4); font-family: var(--mono); }
+  .expand-icon { width: 11px; height: 11px; transition: transform var(--transition); flex-shrink: 0; color: var(--text-4); }
+  .expand-icon.expanded { transform: rotate(90deg); }
+
+  .feed-list { padding-left: var(--sp-4); }
+  .feed-item {
+    display: flex; align-items: center; justify-content: space-between; width: 100%;
+    padding: 4px 10px; background: none; border: none; font-size: var(--text-sm);
+    color: var(--text-3); cursor: pointer; border-radius: var(--radius-sm);
+    transition: all var(--transition); text-align: left; font-family: var(--font);
+  }
+  .feed-item:hover { background: var(--card-hover); color: var(--text-1); }
+  .feed-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .feed-count { font-size: var(--text-xs); font-family: var(--mono); color: var(--text-4); flex-shrink: 0; margin-left: var(--sp-1.5); }
+
+  .sidebar-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 39; }
+
+  /* ── Feed list panel ── */
+  .reader-list {
+    flex: 1; min-width: 0;
+    display: flex; flex-direction: column; background: var(--canvas);
+  }
+  .list-header { padding: 12px 20px 10px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
+  .list-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
+  .list-view-name { font-size: var(--text-base); font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: var(--sp-1.5); }
+  .list-count { font-size: var(--text-xs); font-weight: 400; color: var(--text-4); font-family: var(--mono); }
+  .list-actions { display: flex; gap: var(--sp-1); }
+  .btn-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); background: none; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-3); transition: all var(--transition); }
+  .btn-icon:hover { color: var(--text-1); background: var(--card-hover); }
+  .btn-icon.active-icon { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
+  .btn-icon svg { width: 14px; height: 14px; }
+
+  .list-filters { display: flex; gap: var(--sp-1); }
+  .filter-btn {
+    padding: 4px 10px 6px; border-radius: 0; background: none;
+    border: none; border-bottom: 2px solid transparent; font-size: var(--text-sm); font-weight: 500;
+    color: var(--text-3); cursor: pointer; transition: all var(--transition); font-family: var(--font);
+    position: relative;
+  }
+  .filter-btn:hover { color: var(--text-2); }
+  .filter-btn.active { color: var(--text-1); font-weight: 600; border-bottom-color: var(--accent); }
+
+  .speed-control { display: flex; align-items: center; gap: var(--sp-0.5); margin-left: var(--sp-1); }
+  .speed-btn {
+    width: 22px; height: 22px; border-radius: var(--radius-xs); background: var(--card);
+    border: 1px solid var(--border); font-size: var(--text-sm); font-weight: 600;
+    color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
+  }
+  .speed-btn:hover { color: var(--text-1); }
+  .speed-value { font-size: var(--text-xs); font-family: var(--mono); color: var(--text-2); min-width: 24px; text-align: center; }
+
+  /* ── Article cards (feed style) ── */
+  .article-list { flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-5) var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-2); }
+  .article-card {
+    padding: 14px 16px; border-radius: var(--radius);
+    background: var(--card); border: none;
+    box-shadow: var(--card-shadow-sm);
+    cursor: pointer; transition: all var(--transition);
+  }
+  .article-card:hover { box-shadow: var(--card-shadow); transform: translateY(-1px); }
+  .article-card.selected { box-shadow: 0 0 0 1.5px var(--accent); }
+  .article-card.is-read { opacity: 0.6; }
+  .article-card.is-read .card-title { color: var(--text-3); }
+  .article-card.is-read .card-preview { color: var(--text-4); }
+  .article-card.is-read:hover { opacity: 0.8; }
+
+  .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
+  .card-source { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); color: var(--text-3); font-weight: 500; min-width: 0; }
+  .card-rss { width: 12px; height: 12px; color: var(--text-4); flex-shrink: 0; }
+  .card-feed-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .card-author { color: var(--text-4); font-weight: 400; white-space: nowrap; }
+  .card-header-right { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
+  .card-time { font-size: var(--text-xs); color: var(--text-4); }
+  .star-btn {
+    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
+    background: none; border: none; cursor: pointer; color: var(--text-4); border-radius: var(--radius-sm);
+    transition: all var(--transition); opacity: 0;
+  }
+  .article-card:hover .star-btn { opacity: 1; }
+  .star-btn.starred { opacity: 1; color: #F59E0B; }
+  .star-btn:hover { color: #F59E0B; }
+  .star-btn svg { width: 13px; height: 13px; }
+
+  .bookmark-btn {
+    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
+    background: none; border: none; cursor: pointer; color: var(--text-4); border-radius: var(--radius-sm);
+    transition: all var(--transition); opacity: 0.5;
+  }
+  .article-card:hover .bookmark-btn { opacity: 0.8; }
+  .bookmark-btn.saved { opacity: 1; color: #F59E0B; }
+  .bookmark-btn:hover { opacity: 1; color: #F59E0B; }
+  .bookmark-btn svg { width: 13px; height: 13px; }
+
+  .spinning { animation: spin 0.8s linear infinite; }
+  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+  .card-title { font-size: var(--text-md); font-weight: 600; color: var(--text-1); line-height: 1.35; margin-bottom: var(--sp-1.5); }
+  .card-banner { width: 100%; height: 160px; border-radius: var(--radius-md); background: var(--card-hover) center/cover no-repeat; margin-bottom: var(--sp-2); }
+  .card-preview { font-size: var(--text-sm); color: var(--text-3); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--sp-1); }
+  .card-footer { display: flex; align-items: center; gap: var(--sp-2); }
+  .card-reading-time { display: flex; align-items: center; gap: 3px; font-size: var(--text-xs); color: var(--text-4); }
+  .card-reading-time svg { width: 11px; height: 11px; }
+  .list-empty { padding: var(--sp-10); text-align: center; color: var(--text-3); font-size: var(--text-sm); }
+
+  /* ── Reading pane (slide-in sheet) ── */
+  .pane-overlay {
+    position: fixed; inset: 0; background: var(--overlay); z-index: 60;
+    display: flex; justify-content: flex-end; animation: paneFadeIn 150ms ease;
+  }
+  @keyframes paneFadeIn { from { opacity: 0; } to { opacity: 1; } }
+  .pane-sheet {
+    width: 620px; max-width: 100%; height: 100%; background: var(--card);
+    display: flex; flex-direction: column;
+    border-left: 1px solid var(--border);
+    box-shadow: -6px 0 28px rgba(0,0,0,0.08);
+    animation: paneSlideIn 200ms ease;
+  }
+  @keyframes paneSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
+  .pane-scroll { flex: 1; overflow-y: auto; }
+
+  .pane-toolbar {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 12px 20px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); flex-shrink: 0;
+  }
+  .pane-nav { display: flex; align-items: center; gap: var(--sp-1); }
+  .pane-nav-btn {
+    width: 32px; height: 32px; border-radius: var(--radius-sm); background: none;
+    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
+    cursor: pointer; color: var(--text-3); transition: all var(--transition);
+  }
+  .pane-nav-btn:hover { color: var(--text-1); background: var(--card-hover); }
+  .pane-nav-btn:disabled { opacity: 0.25; cursor: default; }
+  .pane-nav-btn svg { width: 14px; height: 14px; }
+  .pane-nav-pos { font-size: var(--text-xs); color: var(--text-4); font-family: var(--mono); min-width: 44px; text-align: center; }
+
+  .pane-actions { display: flex; align-items: center; gap: var(--sp-0.5); }
+  .pane-action-btn {
+    width: 32px; height: 32px; border-radius: var(--radius-sm); background: none;
+    border: none; display: flex; align-items: center; justify-content: center;
+    cursor: pointer; color: var(--text-3); transition: all var(--transition); text-decoration: none;
+  }
+  .pane-action-btn:hover { color: var(--text-1); background: var(--card-hover); }
+  .pane-action-btn.active { color: var(--accent); }
+  .pane-action-btn.saved-karakeep { color: #F59E0B; }
+  .pane-action-btn svg { width: 15px; height: 15px; }
+
+  .pane-content { max-width: 640px; margin: 0 auto; padding: var(--sp-8) 36px var(--sp-20); }
+  .pane-title { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; color: var(--text-1); margin: 0 0 var(--sp-3); letter-spacing: -0.01em; }
+  .pane-meta {
+    display: flex; align-items: center; gap: var(--sp-1.5); flex-wrap: wrap;
+    font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-6);
+    padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border);
+  }
+  .pane-source { font-weight: 500; color: var(--text-2); }
+  .pane-author { font-style: italic; }
+  .pane-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-4); }
+  .pane-body { font-size: var(--text-md); line-height: 1.85; color: var(--text-3); }
+  .pane-body :global(p) { margin-bottom: 18px; }
+  .pane-body :global(img) { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--sp-3) 0; }
+  .pane-body :global(a) { color: var(--accent); text-decoration: underline; }
+  .pane-body :global(a:hover) { opacity: 0.8; }
+  .pane-body :global(blockquote) { border-left: 3px solid var(--border); padding-left: var(--sp-4); margin: var(--sp-4) 0; color: var(--text-3); font-style: italic; }
+  .pane-body :global(pre) { background: var(--surface-secondary); padding: 14px; border-radius: var(--radius-md); overflow-x: auto; font-size: var(--text-sm); font-family: var(--mono); margin: var(--sp-4) 0; }
+  .pane-body :global(code) { font-family: var(--mono); font-size: 0.9em; }
+  .pane-body :global(h1), .pane-body :global(h2), .pane-body :global(h3) { color: var(--text-1); margin: 20px 0 10px; }
+  .pane-body :global(ul), .pane-body :global(ol) { padding-left: var(--sp-5); margin-bottom: var(--sp-4); }
+  .pane-body :global(li) { margin-bottom: var(--sp-1.5); }
+
+  /* ── Responsive ── */
+  @media (max-width: 1024px) {
+    .reader-sidebar { display: none; }
+    .reader-sidebar.open { display: flex; position: fixed; left: 0; top: 56px; bottom: 0; z-index: 40; box-shadow: 8px 0 24px rgba(0,0,0,0.08); }
+    .mobile-menu { display: flex; }
+  }
+  @media (max-width: 768px) {
+    .reader-layout { height: calc(100vh - 56px); }
+    .reader-sidebar { display: none; }
+    .reader-sidebar.open { display: flex; position: fixed; left: 0; top: 56px; bottom: 0; z-index: 40; box-shadow: 8px 0 24px rgba(0,0,0,0.08); width: 260px; }
+    .mobile-menu { display: flex; }
+    .article-list { padding: var(--sp-1.5) var(--sp-3) var(--sp-20); gap: var(--sp-1.5); }
+    .article-card { padding: 12px 14px; }
+    .card-title { font-size: var(--text-base); }
+    .card-banner { height: 130px; border-radius: var(--radius-sm); }
+    .card-preview { -webkit-line-clamp: 2; }
+    .pane-sheet { width: 100%; }
+    .pane-content { padding: 20px 18px 80px; }
+    .pane-title { font-size: var(--text-lg); }
+    .pane-body { font-size: var(--text-md); line-height: 1.75; }
+    .pane-toolbar { padding: 8px 14px; }
+    .list-header { padding: 10px 14px 8px; }
+  }
+</style>
diff --git a/frontend-v2/src/lib/pages/trips/AtelierTripDetailPage.svelte b/frontend-v2/src/lib/pages/trips/AtelierTripDetailPage.svelte
new file mode 100644
index 0000000..b412a4b
--- /dev/null
+++ b/frontend-v2/src/lib/pages/trips/AtelierTripDetailPage.svelte
@@ -0,0 +1,1721 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/state';
+  import ItemModal from '$lib/components/trips/ItemModal.svelte';
+  import TripEditModal from '$lib/components/trips/TripEditModal.svelte';
+
+  interface ItineraryEvent {
+    time: string;
+    name: string;
+    description: string;
+    category: string;
+    mapsLink?: boolean;
+    stayingOvernight?: boolean;
+    image?: string;
+    cost?: { points?: number; cash?: number };
+    flightNumber?: string;
+    reservation?: string;
+    lat?: number | null;
+    lng?: number | null;
+    entityId?: string;
+    entityType?: 'transportation' | 'lodging' | 'location';
+    rawData?: any;
+  }
+
+  interface Day {
+    day: number;
+    date: string;
+    description: string;
+    events: ItineraryEvent[];
+  }
+
+  let trip = $state({ name: '', dates: '', away: '', duration: '', description: '' });
+  let coverImages = $state<string[]>(['']);
+  let itinerary = $state<Day[]>([]);
+  let unscheduled = $state<{ name: string; description: string }[]>([]);
+  let notes = $state<{ id: string; date: string; content: string }[]>([]);
+  let mapLocations = $state<{ name: string; lat: number; lng: number; type: string }[]>([]);
+  let rawTripData = $state<any>(null);
+  let loading = $state(true);
+
+  let itemModalOpen = $state(false);
+  let itemModalType = $state<'transportation' | 'lodging' | 'location' | 'note'>('location');
+  let itemModalEdit = $state<any>(null);
+  let tripEditOpen = $state(false);
+  let shareOpen = $state(false);
+  let shareCopied = $state(false);
+  let fabOpen = $state(false);
+  let activeView = $state<'itinerary' | 'map' | 'ai'>('itinerary');
+  let currentCoverIdx = $state(0);
+  let expandedDays = $state<Set<number>>(new Set([1, 2, 3]));
+  let noteDraft = $state('');
+
+  const tripId = $derived(page.url.searchParams.get('id') || '');
+  const shareMode = $derived(page.url.searchParams.get('share') === 'true');
+  const coverImage = $derived(coverImages[currentCoverIdx] || '');
+  const shareUrl = $derived(
+    rawTripData?.share_token && typeof window !== 'undefined'
+      ? `${window.location.origin}/trips/view/${rawTripData.share_token}`
+      : ''
+  );
+
+  const itineraryEvents = $derived(itinerary.flatMap((day) => day.events));
+  const scheduledDays = $derived(itinerary.filter((day) => day.events.length > 0));
+  const tripExpenses = $derived({
+    points: itineraryEvents.reduce((sum, event) => sum + (event.cost?.points || 0), 0),
+    cash: itineraryEvents.reduce((sum, event) => sum + (event.cost?.cash || 0), 0),
+    flights: itineraryEvents.filter((event) => event.category === 'Flight').length,
+    hotels: itineraryEvents.filter((event) => event.category === 'Hotel').length,
+    activities: itineraryEvents.filter((event) => ['Activity', 'Hike', 'Restaurant'].includes(event.category)).length
+  });
+
+  const singleMapPin = $derived(mapLocations.length === 1 ? mapLocations[0] : null);
+  const categoryColors: Record<string, { tint: string; ink: string }> = {
+    Flight: { tint: 'rgba(199, 92, 42, 0.14)', ink: '#934114' },
+    Hotel: { tint: 'rgba(126, 88, 214, 0.14)', ink: '#5a42a1' },
+    Restaurant: { tint: 'rgba(201, 113, 45, 0.14)', ink: '#9a4b1e' },
+    Activity: { tint: 'rgba(53, 121, 93, 0.14)', ink: '#1f6248' },
+    Hike: { tint: 'rgba(83, 135, 62, 0.14)', ink: '#386a2f' },
+    Drive: { tint: 'rgba(161, 113, 45, 0.14)', ink: '#8a581d' },
+    Logistics: { tint: 'rgba(117, 98, 75, 0.14)', ink: '#6f6052' }
+  };
+
+  function formatDateRange(start: string, end: string): string {
+    if (!start) return '';
+    const s = new Date(start + 'T00:00:00');
+    const e = new Date(end + 'T00:00:00');
+    const sMonth = s.toLocaleDateString('en-US', { month: 'short' });
+    const eMonth = e.toLocaleDateString('en-US', { month: 'short' });
+    const sYear = s.getFullYear();
+    const eYear = e.getFullYear();
+    if (sMonth === eMonth && sYear === eYear) {
+      return `${sMonth} ${s.getDate()} – ${e.getDate()}, ${sYear}`;
+    }
+    if (sYear === eYear) {
+      return `${sMonth} ${s.getDate()} – ${eMonth} ${e.getDate()}, ${sYear}`;
+    }
+    return `${sMonth} ${s.getDate()}, ${sYear} – ${eMonth} ${e.getDate()}, ${eYear}`;
+  }
+
+  function durationDays(start: string, end: string): string {
+    if (!start || !end) return '';
+    const days = Math.ceil((new Date(end).getTime() - new Date(start).getTime()) / 86400000) + 1;
+    return `${days} days`;
+  }
+
+  function daysAway(start: string): string {
+    if (!start) return '';
+    const diff = Math.ceil((new Date(start + 'T00:00:00').getTime() - Date.now()) / 86400000);
+    if (diff <= 0) return '';
+    if (diff === 1) return '1 day away';
+    return `${diff} days away`;
+  }
+
+  function formatTime(dateStr: string): string {
+    if (!dateStr) return '';
+    const d = new Date(dateStr);
+    if (Number.isNaN(d.getTime())) return '';
+    return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
+  }
+
+  function compactReservation(value?: string): string {
+    if (!value) return '';
+    const tokens = value
+      .split(/[,\s]+/)
+      .map((token) => token.trim())
+      .filter(Boolean);
+    const unique = [...new Set(tokens)];
+    const useful = unique.find((token) => /[a-z0-9]/i.test(token)) || '';
+    if (!useful) return '';
+    if (useful.length > 14) return `Ref ${useful.slice(0, 14)}`;
+    return `Ref ${useful}`;
+  }
+
+  function stripHtml(value?: string): string {
+    return (value || '')
+      .replace(/<br\s*\/?>/gi, ' ')
+      .replace(/<\/p>/gi, ' ')
+      .replace(/<[^>]+>/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+  }
+
+  function compactDescription(event: ItineraryEvent): string {
+    const description = stripHtml(event.description || '');
+    if (!description) return '';
+    if (event.category === 'Hotel' && description.length > 72) {
+      return 'Stay block with confirmation and check-in details.';
+    }
+    return description;
+  }
+
+  function sortedDayEvents(day: Day): ItineraryEvent[] {
+    return [...day.events].sort((a, b) => {
+      const aHotel = a.category === 'Hotel' ? 1 : 0;
+      const bHotel = b.category === 'Hotel' ? 1 : 0;
+      if (aHotel !== bHotel) return aHotel - bHotel;
+      const aRaw = a.rawData?.date || a.rawData?.start_time || a.rawData?.check_in || '';
+      const bRaw = b.rawData?.date || b.rawData?.start_time || b.rawData?.check_in || '';
+      const aStamp = aRaw ? new Date(aRaw).getTime() : Number.MAX_SAFE_INTEGER;
+      const bStamp = bRaw ? new Date(bRaw).getTime() : Number.MAX_SAFE_INTEGER;
+      if (Number.isFinite(aStamp) && Number.isFinite(bStamp) && aStamp !== bStamp) return aStamp - bStamp;
+      return (a.time || '').localeCompare(b.time || '');
+    });
+  }
+
+  function activeDaySummary(day: Day): string {
+    const nonHotelCount = day.events.filter((event) => event.category !== 'Hotel').length;
+    const hotelCount = day.events.filter((event) => event.category === 'Hotel').length;
+    if (nonHotelCount > 0 && hotelCount > 0) return `${nonHotelCount} stop${nonHotelCount === 1 ? '' : 's'} + stay`;
+    if (nonHotelCount > 0) return `${nonHotelCount} stop${nonHotelCount === 1 ? '' : 's'}`;
+    if (hotelCount > 0) return `${hotelCount} stay block${hotelCount === 1 ? '' : 's'}`;
+    return 'Flexible';
+  }
+
+  function crispDescription(event: ItineraryEvent): string {
+    const description = compactDescription(event);
+    if (!description) return '';
+    if (description.length > 110) return `${description.slice(0, 107)}...`;
+    return description;
+  }
+
+  function eventMetaTokens(event: ItineraryEvent): string[] {
+    const tokens: string[] = [];
+    if (event.flightNumber) tokens.push(event.flightNumber);
+    if (compactReservation(event.reservation)) tokens.push(compactReservation(event.reservation));
+    if (event.cost?.points) tokens.push(`${Math.round((event.cost.points || 0) / 1000)}K pts`);
+    if (event.cost?.cash) tokens.push(`$${event.cost.cash}`);
+    if (event.mapsLink && event.lat && event.lng) tokens.push('Maps');
+    return tokens.slice(0, 3);
+  }
+
+  function formatDayDate(dateStr: string): string {
+    const d = new Date(dateStr + 'T00:00:00');
+    return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+  }
+
+  function mapCategory(item: any, type: string): string {
+    if (type === 'transportation') {
+      const transportType = (item.type || '').toLowerCase();
+      if (transportType === 'plane' || transportType === 'flight') return 'Flight';
+      if (transportType === 'car' || transportType === 'rental') return 'Drive';
+      return 'Logistics';
+    }
+    if (type === 'lodging') return 'Hotel';
+    if (type === 'location') {
+      const category = (item.category || '').toLowerCase();
+      if (['restaurant', 'cafe', 'bar', 'food'].includes(category)) return 'Restaurant';
+      if (['hiking', 'hike'].includes(category)) return 'Hike';
+      return 'Activity';
+    }
+    return 'Activity';
+  }
+
+  function entityImage(tripImages: any[], entityId: string, entityOwnImages?: any[]): string {
+    const img = (entityOwnImages || []).find((image: any) => image.file_path)
+      || (tripImages || []).find((image: any) => image.entity_id === entityId);
+    if (!img) return '';
+    const path = img.file_path || '';
+    return path.startsWith('/') ? path : `/images/${path}`;
+  }
+
+  function nextCover() {
+    currentCoverIdx = (currentCoverIdx + 1) % coverImages.length;
+  }
+
+  function prevCover() {
+    currentCoverIdx = (currentCoverIdx - 1 + coverImages.length) % coverImages.length;
+  }
+
+  function toggleDay(day: number) {
+    const next = new Set(expandedDays);
+    if (next.has(day)) next.delete(day);
+    else next.add(day);
+    expandedDays = next;
+  }
+
+  function openCreateModal(type: 'transportation' | 'lodging' | 'location' | 'note') {
+    itemModalType = type;
+    itemModalEdit = null;
+    itemModalOpen = true;
+    fabOpen = false;
+  }
+
+  function openEdit(evt: ItineraryEvent) {
+    if (!evt.entityId || !evt.entityType) return;
+    itemModalType = evt.entityType;
+    itemModalEdit = evt.rawData || {};
+    itemModalOpen = true;
+  }
+
+  async function copyShare() {
+    if (!shareUrl) return;
+    await navigator.clipboard.writeText(shareUrl);
+    shareCopied = true;
+    setTimeout(() => (shareCopied = false), 1800);
+  }
+
+  async function saveNote() {
+    if (!tripId || !noteDraft.trim()) return;
+    try {
+      await fetch('/api/trips/note', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          trip_id: tripId,
+          name: noteDraft.trim().slice(0, 60),
+          content: noteDraft.trim()
+        })
+      });
+      noteDraft = '';
+      await reloadTrip();
+    } catch {
+      // keep route stable
+    }
+  }
+
+  async function deleteNote(noteId: string) {
+    if (!confirm('Delete this note?')) return;
+    try {
+      await fetch('/api/trips/note/delete', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: noteId })
+      });
+      await reloadTrip();
+    } catch {
+      // keep route stable
+    }
+  }
+
+  async function deleteTrip() {
+    if (!tripId) return;
+    if (!confirm('Delete this trip and all its data? This cannot be undone.')) return;
+    try {
+      const res = await fetch('/api/trips/trip/delete', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: tripId })
+      });
+      if (res.ok) window.location.href = '/trips';
+    } catch {
+      // keep route stable
+    }
+  }
+
+  function buildItinerary(data: any) {
+    trip = {
+      name: data.name || '',
+      dates: formatDateRange(data.start_date, data.end_date),
+      away: daysAway(data.start_date),
+      duration: durationDays(data.start_date, data.end_date),
+      description: data.description || ''
+    };
+
+    const allImages: string[] = [];
+    if (data.cover_image) allImages.push(data.cover_image);
+    for (const img of data.images || []) {
+      const path = img.file_path || '';
+      if (path && !allImages.includes(`/images/${path}`)) allImages.push(`/images/${path}`);
+    }
+    coverImages = allImages.length > 0 ? allImages : [''];
+    currentCoverIdx = 0;
+
+    const startDate = new Date(data.start_date + 'T00:00:00');
+    const endDate = new Date(data.end_date + 'T00:00:00');
+    const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / 86400000) + 1;
+    const dayMap: Record<string, ItineraryEvent[]> = {};
+
+    for (let i = 0; i < totalDays; i++) {
+      const d = new Date(startDate);
+      d.setDate(d.getDate() + i);
+      dayMap[d.toISOString().slice(0, 10)] = [];
+    }
+
+    const allImgs = data.images || [];
+    const allDocs = data.documents || [];
+    function enrichRaw(item: any, type: string) {
+      const eType = ({ transportation: 'transportation', lodging: 'lodging', location: 'location' } as Record<string, string>)[type] || type;
+      return {
+        ...item,
+        images: item.images?.length ? item.images : allImgs.filter((image: any) => image.entity_type === eType && image.entity_id === item.id),
+        documents: item.documents?.length ? item.documents : allDocs.filter((doc: any) => doc.entity_type === eType && doc.entity_id === item.id)
+      };
+    }
+
+    for (const t of data.transportations || []) {
+      const date = (t.date || '').slice(0, 10);
+      if (!dayMap[date]) dayMap[date] = [];
+      dayMap[date].push({
+        time: formatTime(t.date),
+        name: t.name || `${t.from_location} → ${t.to_location}`,
+        description: t.description || (t.from_location && t.to_location ? `${t.from_location} → ${t.to_location}` : ''),
+        category: mapCategory(t, 'transportation'),
+        flightNumber: t.flight_number || '',
+        cost: { points: t.cost_points || 0, cash: t.cost_cash || 0 },
+        mapsLink: !!(t.from_lat || t.to_lat),
+        lat: t.from_lat || t.to_lat,
+        lng: t.from_lng || t.to_lng,
+        image: entityImage(data.images, t.id, t.images),
+        entityId: t.id,
+        entityType: 'transportation',
+        rawData: enrichRaw(t, 'transportation')
+      });
+    }
+
+    for (const l of data.lodging || []) {
+      const date = (l.check_in || '').slice(0, 10);
+      if (!dayMap[date]) dayMap[date] = [];
+      dayMap[date].push({
+        time: formatTime(l.check_in),
+        name: l.name,
+        description: l.description || `${l.type || 'Hotel'} · ${l.location || ''}`.trim(),
+        category: 'Hotel',
+        stayingOvernight: true,
+        mapsLink: !!l.latitude,
+        lat: l.latitude,
+        lng: l.longitude,
+        cost: { points: l.cost_points || 0, cash: l.cost_cash || 0 },
+        reservation: l.reservation_number || '',
+        image: entityImage(data.images, l.id, l.images),
+        entityId: l.id,
+        entityType: 'lodging',
+        rawData: enrichRaw(l, 'lodging')
+      });
+    }
+
+    for (const loc of data.locations || []) {
+      const date = loc.visit_date || (loc.start_time || '').slice(0, 10);
+      if (!dayMap[date]) dayMap[date] = [];
+      let desc = loc.description || '';
+      if (loc.hike_distance) {
+        desc = `${loc.hike_distance} · ${loc.hike_difficulty || ''} · ${loc.hike_time || ''}`.trim();
+      }
+      dayMap[date].push({
+        time: formatTime(loc.start_time),
+        name: loc.name,
+        description: desc,
+        category: mapCategory(loc, 'location'),
+        mapsLink: !!loc.latitude,
+        lat: loc.latitude,
+        lng: loc.longitude,
+        cost: { points: loc.cost_points || 0, cash: loc.cost_cash || 0 },
+        image: entityImage(data.images, loc.id, loc.images),
+        entityId: loc.id,
+        entityType: 'location',
+        rawData: enrichRaw(loc, 'location')
+      });
+    }
+
+    const days: Day[] = [];
+    let dayNum = 1;
+    for (const [date, events] of Object.entries(dayMap).sort()) {
+      events.sort((a, b) => (a.time || '').localeCompare(b.time || ''));
+      days.push({
+        day: dayNum,
+        date: formatDayDate(date),
+        description: events.length > 0 ? events[0].name : 'Open day',
+        events
+      });
+      dayNum++;
+    }
+    itinerary = days;
+    const preExpanded = days.filter((day) => day.events.length > 0).slice(0, 3).map((day) => day.day);
+    expandedDays = new Set(preExpanded);
+
+    notes = (data.notes || []).map((note: any) => ({
+      id: note.id,
+      date: note.date ? new Date(note.date + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '',
+      content: note.content || note.name || ''
+    }));
+
+    unscheduled = (data.locations || [])
+      .filter((loc: any) => !loc.visit_date && !loc.start_time)
+      .map((loc: any) => ({ name: loc.name, description: loc.description || '' }));
+
+    const pins: typeof mapLocations = [];
+    for (const t of data.transportations || []) {
+      if (t.from_lat && t.from_lng) pins.push({ name: t.from_location || t.name, lat: t.from_lat, lng: t.from_lng, type: 'transport' });
+      if (t.to_lat && t.to_lng) pins.push({ name: t.to_location || t.name, lat: t.to_lat, lng: t.to_lng, type: 'transport' });
+    }
+    for (const l of data.lodging || []) {
+      if (l.latitude && l.longitude) pins.push({ name: l.name, lat: l.latitude, lng: l.longitude, type: 'hotel' });
+    }
+    for (const loc of data.locations || []) {
+      if (loc.latitude && loc.longitude) pins.push({ name: loc.name, lat: loc.latitude, lng: loc.longitude, type: loc.category || 'activity' });
+    }
+    mapLocations = pins;
+  }
+
+  async function reloadTrip() {
+    if (!tripId) return;
+    try {
+      const res = await fetch(`/api/trips/trip/${tripId}`, { credentials: 'include' });
+      if (res.ok) {
+        const data = await res.json();
+        rawTripData = data;
+        buildItinerary(data);
+      }
+    } catch {
+      // keep route stable
+    }
+  }
+
+  onMount(async () => {
+    if (!tripId) {
+      loading = false;
+      return;
+    }
+    await reloadTrip();
+    loading = false;
+  });
+</script>
+
+<div class="trip-workspace">
+  <section class="trip-hero reveal" style={coverImage ? `background-image:url('${coverImage}')` : ''}>
+    <div class="hero-veil"></div>
+    <div class="hero-top">
+      <a class="hero-back" href="/trips">Back to Trips</a>
+      {#if !shareMode}
+        <div class="hero-tools">
+          <button class="hero-tool" onclick={() => (shareOpen = true)}>Share</button>
+          <button class="hero-tool primary" onclick={() => (tripEditOpen = true)}>Edit trip</button>
+        </div>
+      {/if}
+    </div>
+
+    <div class="hero-copy">
+      <div class="hero-kicker">Trip detail</div>
+      <h1>{trip.name || 'Trip'}</h1>
+      <div class="hero-meta">{trip.dates}{#if trip.duration} · {trip.duration}{/if}{#if trip.away} · {trip.away}{/if}</div>
+      {#if trip.description}
+        <p>{trip.description}</p>
+      {/if}
+      <div class="hero-facts">
+        <span>{scheduledDays.length} live day{scheduledDays.length === 1 ? '' : 's'}</span>
+        <span>{Math.round(tripExpenses.points / 1000)}K points redeemed</span>
+      </div>
+    </div>
+
+    {#if coverImages.length > 1}
+      <div class="hero-nav">
+        <button class="cover-nav" onclick={prevCover} aria-label="Previous cover">‹</button>
+        <span>{currentCoverIdx + 1}/{coverImages.length}</span>
+        <button class="cover-nav" onclick={nextCover} aria-label="Next cover">›</button>
+      </div>
+    {/if}
+
+  </section>
+
+  <div class="detail-grid">
+    <div class="detail-main">
+      <section class="board-head reveal">
+        <div class="board-tools">
+          {#if !shareMode}
+            <button class:active={activeView === 'itinerary'} class="board-chip" onclick={() => (activeView = 'itinerary')}>Itinerary</button>
+            <button class:active={activeView === 'map'} class="board-chip" onclick={() => (activeView = 'map')}>Map</button>
+            <button class:active={activeView === 'ai'} class="board-chip" onclick={() => (activeView = 'ai')}>AI guide</button>
+          {/if}
+        </div>
+      </section>
+
+      {#if !shareMode && activeView === 'map'}
+          <section class="map-panel reveal">
+            {#if mapLocations.length > 1}
+              <iframe
+                title="Trip Map"
+                src="https://www.openstreetmap.org/export/embed.html?bbox={Math.min(...mapLocations.map((p) => p.lng))-0.05},{Math.min(...mapLocations.map((p) => p.lat))-0.03},{Math.max(...mapLocations.map((p) => p.lng))+0.05},{Math.max(...mapLocations.map((p) => p.lat))+0.03}&layer=mapnik&marker={mapLocations[0].lat},{mapLocations[0].lng}"
+                loading="lazy"
+              ></iframe>
+            {:else if singleMapPin}
+              <div class="map-single">
+                <div>
+                  <div class="section-label">Pinned place</div>
+                  <h3>{singleMapPin.name}</h3>
+                  <p>This trip only has one mapped anchor right now, so the full canvas would be mostly empty.</p>
+                </div>
+                <a class="map-link" href={`https://www.google.com/maps/search/?api=1&query=${singleMapPin.lat},${singleMapPin.lng}`} target="_blank" rel="noopener">Open in Maps</a>
+              </div>
+            {:else}
+              <div class="map-empty">No pinned locations yet.</div>
+            {/if}
+          </section>
+      {:else if !shareMode && activeView === 'ai'}
+          <section class="guide-panel reveal">
+            <div class="guide-copy">
+              <div class="section-label">AI guide</div>
+              <h3>Still a placeholder</h3>
+              <p>Restaurants, weather, and packing help should live here once the trip assistant is ready.</p>
+            </div>
+            <div class="guide-suggestions">
+              <span>Best coffee near the hotel</span>
+              <span>Weather shift on day 3</span>
+              <span>Need a better hike window</span>
+            </div>
+          </section>
+      {/if}
+
+      {#if activeView === 'itinerary' || shareMode}
+        <section class="itinerary-board reveal">
+          {#each itinerary as day (day.day)}
+            {@const isExpanded = expandedDays.has(day.day)}
+            <article class="day-block" class:collapsed={!isExpanded} class:empty-day={day.events.length === 0}>
+              <button class="day-head" onclick={() => toggleDay(day.day)}>
+                <div class="day-title">
+                  <span class="day-pill">Day {day.day}</span>
+                  <div>
+                    <div class="day-date">{day.date}</div>
+                    {#if day.events.length === 0}
+                      <div class="day-summary">Open day</div>
+                    {/if}
+                  </div>
+                </div>
+                <div class="day-count">{activeDaySummary(day)}</div>
+              </button>
+
+              {#if isExpanded}
+                <div class="events-stack">
+                  {#if day.events.length === 0}
+                    <div class="empty-block">Open day. Use it for travel padding, a dinner hold, or one anchor activity.</div>
+                  {:else}
+                    {#each sortedDayEvents(day) as event}
+                      {#if event.category === 'Hotel'}
+                        <button class="stay-row" type="button" onclick={() => openEdit(event)}>
+                          <div class="stay-label">Stay</div>
+                          <div class="stay-main">
+                            <div class="stay-name">{event.name}</div>
+                            <div class="stay-meta">
+                              <span>{event.time || 'Anytime'}</span>
+                              {#if compactReservation(event.reservation)}<span>{compactReservation(event.reservation)}</span>{/if}
+                              {#if event.cost?.points}<span>{Math.round((event.cost.points || 0) / 1000)}K pts</span>{/if}
+                              {#if event.cost?.cash}<span>${event.cost.cash}</span>{/if}
+                            </div>
+                          </div>
+                        </button>
+                      {:else}
+                        <button class="event-row" type="button" onclick={() => openEdit(event)}>
+                          <div class="event-time-column">{event.time || 'Anytime'}</div>
+                          <div class="event-line"></div>
+                          <div class="event-card">
+                            <div class="event-stamp-mobile">{event.time || 'Anytime'}</div>
+                            <div class="event-top">
+                              <div class="event-name">{event.name}</div>
+                              <span
+                                class="event-kind"
+                                style={`background:${categoryColors[event.category]?.tint || 'rgba(117,98,75,0.14)'};color:${categoryColors[event.category]?.ink || '#6f6052'}`}
+                              >
+                                {event.category}
+                              </span>
+                            </div>
+                            {#if crispDescription(event)}
+                              <div class="event-description">{crispDescription(event)}</div>
+                            {/if}
+                            <div class="event-meta">
+                              {#each eventMetaTokens(event) as token}
+                                <span>{token}</span>
+                              {/each}
+                            </div>
+                          </div>
+                          {#if event.image}
+                            <div class="event-thumb" style={`background-image:url('${event.image}')`}></div>
+                          {/if}
+                        </button>
+                      {/if}
+                    {/each}
+                  {/if}
+                </div>
+              {/if}
+            </article>
+          {/each}
+        </section>
+      {/if}
+    </div>
+
+    <aside class="detail-rail">
+      <section class="rail-block reveal">
+        <div class="section-label">Notes</div>
+        <h3>Trip desk</h3>
+        <p>Keep booking reminders, handoff notes, and quick journal lines beside the plan.</p>
+        <div class="notes-stack">
+          {#if notes.length === 0}
+            <div class="note-card muted">No notes yet.</div>
+          {:else}
+            {#each notes as note}
+              <div class="note-card">
+                <div class="note-date">{note.date || 'Trip note'}</div>
+                <div class="note-content">{note.content}</div>
+                {#if !shareMode}
+                  <button class="note-delete" onclick={() => deleteNote(note.id)}>Remove</button>
+                {/if}
+              </div>
+            {/each}
+          {/if}
+        </div>
+        {#if !shareMode}
+          <div class="note-compose">
+            <textarea bind:value={noteDraft} rows="3" placeholder="Leave a reminder, booking note, or journal line..."></textarea>
+            <button class="rail-action" onclick={saveNote} disabled={!noteDraft.trim()}>Save note</button>
+          </div>
+        {/if}
+      </section>
+
+      {#if unscheduled.length > 0}
+        <section class="rail-block reveal">
+          <div class="section-label">Unscheduled</div>
+          <div class="unscheduled-stack">
+            {#each unscheduled as item}
+              <div class="unscheduled-row">
+                <div class="unscheduled-name">{item.name}</div>
+                <div class="unscheduled-description">{item.description || 'No details yet.'}</div>
+              </div>
+            {/each}
+          </div>
+        </section>
+      {/if}
+    </aside>
+  </div>
+</div>
+
+{#if shareOpen}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="share-overlay" onclick={() => (shareOpen = false)}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="share-panel" onclick={(event) => event.stopPropagation()}>
+      <div class="section-label">Share trip</div>
+      <h3>{rawTripData?.share_token ? 'Viewer link is ready' : 'Create sharing in Edit trip'}</h3>
+      <p>{rawTripData?.share_token ? 'Anyone with the link can open the itinerary.' : 'Use Edit trip to create a share token first.'}</p>
+      {#if rawTripData?.share_token}
+        <div class="share-row">
+          <input readonly value={shareUrl} />
+          <button onclick={copyShare}>{shareCopied ? 'Copied' : 'Copy'}</button>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+{#if !shareMode}
+  <button class="trip-fab" class:open={fabOpen} onclick={() => (fabOpen = !fabOpen)} aria-label="Add to trip">
+    {fabOpen ? 'Close' : 'Add'}
+  </button>
+
+  {#if fabOpen}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="fab-overlay" onclick={() => (fabOpen = false)}></div>
+    <div class="fab-sheet">
+      <button onclick={() => openCreateModal('location')}>Add activity</button>
+      <button onclick={() => openCreateModal('lodging')}>Add accommodation</button>
+      <button onclick={() => openCreateModal('transportation')}>Add transport</button>
+      <button onclick={() => openCreateModal('note')}>Add note</button>
+      <button onclick={() => { fabOpen = false; tripEditOpen = true; }}>Edit trip</button>
+      <button class="danger" onclick={deleteTrip}>Delete trip</button>
+    </div>
+  {/if}
+{/if}
+
+<ItemModal bind:open={itemModalOpen} tripId={tripId} itemType={itemModalType} editItem={itemModalEdit} onSaved={reloadTrip} />
+<TripEditModal bind:open={tripEditOpen} tripData={rawTripData} onSaved={reloadTrip} />
+
+<style>
+  .trip-workspace {
+    display: flex;
+    flex-direction: column;
+    gap: 22px;
+    padding-bottom: 96px;
+    min-width: 0;
+    overflow-x: clip;
+    touch-action: pan-y;
+  }
+
+  .trip-hero {
+    position: relative;
+    min-height: 320px;
+    border-radius: 26px;
+    overflow: hidden;
+    background:
+      linear-gradient(135deg, rgba(101, 72, 44, 0.4), rgba(42, 32, 21, 0.15)),
+      radial-gradient(circle at top left, rgba(248, 239, 227, 0.92), rgba(223, 206, 185, 0.72));
+    background-size: cover;
+    background-position: center;
+    border: 1px solid rgba(144, 116, 86, 0.18);
+    box-shadow: 0 22px 60px rgba(76, 53, 30, 0.14);
+    padding: 22px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .hero-veil {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, rgba(30, 22, 14, 0.08), rgba(30, 22, 14, 0.7));
+  }
+
+  .hero-top,
+  .hero-copy,
+  .hero-nav {
+    position: relative;
+    z-index: 1;
+  }
+
+  .hero-top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+  }
+
+  .hero-back,
+  .hero-tool {
+    display: inline-flex;
+    align-items: center;
+    min-height: 38px;
+    padding: 0 14px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 248, 238, 0.18);
+    background: rgba(35, 25, 16, 0.24);
+    color: rgba(255, 248, 238, 0.96);
+    backdrop-filter: blur(12px);
+    font-size: 0.92rem;
+  }
+
+  .hero-tool.primary {
+    background: rgba(235, 218, 196, 0.92);
+    color: #3a2818;
+    border-color: transparent;
+  }
+
+  .hero-tools {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: flex-end;
+  }
+
+  .hero-copy {
+    max-width: 720px;
+    color: #fff7f0;
+  }
+
+  .hero-kicker,
+  .section-label {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: rgba(255, 242, 229, 0.72);
+  }
+
+  .hero-copy h1 {
+    margin: 8px 0 10px;
+    font-size: clamp(2.3rem, 4.8vw, 4.8rem);
+    line-height: 0.94;
+    letter-spacing: -0.04em;
+    color: #fff8f2;
+  }
+
+  .hero-meta {
+    font-size: 1rem;
+    color: rgba(255, 242, 229, 0.84);
+  }
+
+  .hero-copy p {
+    margin: 10px 0 0;
+    max-width: 40ch;
+    font-size: 0.96rem;
+    line-height: 1.55;
+    color: rgba(255, 242, 229, 0.88);
+  }
+
+  .hero-copy > :global(*) {
+    position: relative;
+    z-index: 1;
+  }
+
+  .hero-copy {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .hero-kicker {
+    margin-bottom: 2px;
+  }
+
+  .hero-facts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 14px;
+  }
+
+  .hero-facts span {
+    padding: 8px 11px;
+    border-radius: 999px;
+    background: rgba(255, 248, 238, 0.18);
+    color: rgba(255, 242, 229, 0.96);
+    font-size: 0.8rem;
+    border: 1px solid rgba(255, 248, 238, 0.1);
+    backdrop-filter: blur(12px);
+  }
+
+  .hero-nav {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: rgba(255, 242, 229, 0.86);
+  }
+
+  .cover-nav {
+    width: 34px;
+    height: 34px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 248, 238, 0.18);
+    background: rgba(35, 25, 16, 0.26);
+    color: inherit;
+  }
+
+  .rail-block,
+  .map-panel,
+  .guide-panel {
+    background: rgba(249, 244, 237, 0.84);
+    border: 1px solid rgba(153, 129, 102, 0.14);
+    border-radius: 22px;
+    box-shadow: 0 10px 34px rgba(89, 66, 44, 0.06);
+  }
+
+  .detail-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.35fr) 340px;
+    gap: 22px;
+    align-items: start;
+  }
+
+  .detail-main {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    min-width: 0;
+  }
+
+  .board-head {
+    display: flex;
+    justify-content: center;
+  }
+
+  .guide-copy h3,
+  .rail-block h3 {
+    margin: 6px 0 0;
+    font-size: 1.55rem;
+    line-height: 1.05;
+    letter-spacing: -0.03em;
+    color: #2f2218;
+  }
+
+  .board-tools {
+    display: inline-grid;
+    grid-auto-flow: column;
+    gap: 8px;
+    justify-content: center;
+    width: auto;
+    padding: 6px;
+    border-radius: 18px;
+    background: rgba(247, 240, 231, 0.92);
+    border: 1px solid rgba(153, 129, 102, 0.14);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
+  }
+
+  .board-chip {
+    min-height: 44px;
+    padding: 0 18px;
+    border-radius: 14px;
+    border: 1px solid transparent;
+    background: transparent;
+    color: #6f5b48;
+    font-weight: 600;
+  }
+
+  .board-chip.active {
+    background: #2f2218;
+    color: #fbf5ee;
+    border-color: #2f2218;
+    box-shadow: 0 8px 18px rgba(51, 37, 24, 0.16);
+  }
+
+  .board-chip:not(.active) {
+    background: rgba(255, 251, 245, 0.65);
+  }
+
+  .map-panel iframe {
+    width: 100%;
+    height: 220px;
+    border: none;
+    display: block;
+    border-radius: 22px;
+  }
+
+  .map-empty,
+  .guide-panel {
+    padding: 22px;
+  }
+
+  .map-single {
+    padding: 22px;
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: 16px;
+  }
+
+  .map-single h3 {
+    margin: 6px 0 0;
+    font-size: 1.35rem;
+    line-height: 1.1;
+    color: #2f2218;
+  }
+
+  .map-single p {
+    margin: 10px 0 0;
+    color: #6b5848;
+    line-height: 1.6;
+  }
+
+  .map-link {
+    min-height: 40px;
+    padding: 0 14px;
+    border-radius: 999px;
+    display: inline-flex;
+    align-items: center;
+    background: #2f2218;
+    color: #fbf5ee;
+    white-space: nowrap;
+  }
+
+  .guide-panel p,
+  .rail-block p {
+    margin: 10px 0 0;
+    color: #6b5848;
+    line-height: 1.6;
+  }
+
+  .guide-suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 16px;
+  }
+
+  .guide-suggestions span {
+    padding: 8px 12px;
+    border-radius: 999px;
+    background: rgba(96, 74, 53, 0.08);
+    color: #6a5542;
+    font-size: 0.9rem;
+  }
+
+  .itinerary-board {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+
+  .day-block {
+    position: relative;
+    padding-top: 24px;
+    margin-top: 10px;
+  }
+
+  .day-block::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 2px;
+    background: linear-gradient(90deg, rgba(169, 114, 63, 0.34), rgba(169, 114, 63, 0.08));
+  }
+
+  .day-head {
+    width: 100%;
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+    gap: 18px;
+    background: none;
+    border: none;
+    text-align: left;
+    padding: 0;
+  }
+
+  .day-title {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .day-pill {
+    min-width: 74px;
+    min-height: 30px;
+    padding: 0 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 999px;
+    font-size: 0.8rem;
+    color: #8f4c24;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    background: rgba(190, 120, 62, 0.1);
+    border: 1px solid rgba(190, 120, 62, 0.16);
+  }
+
+  .day-date {
+    font-size: 1rem;
+    letter-spacing: -0.02em;
+    color: #2f2218;
+    font-weight: 600;
+  }
+
+  .day-summary {
+    margin-top: 6px;
+    font-size: 0.9rem;
+    color: #7a6552;
+    font-weight: 500;
+    overflow-wrap: anywhere;
+    line-height: 1.2;
+  }
+
+  .day-count {
+    font-size: 0.76rem;
+    color: #7d6753;
+    padding-top: 0;
+    padding-inline: 10px;
+    min-height: 28px;
+    border-radius: 999px;
+    display: inline-flex;
+    align-items: center;
+    background: rgba(96, 74, 53, 0.08);
+  }
+
+  .events-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px 0 8px 88px;
+  }
+
+  .event-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    padding: 0;
+    background: none;
+    border: none;
+    color: inherit;
+    text-align: left;
+    min-width: 0;
+  }
+
+  .event-time-column {
+    width: 72px;
+    flex-shrink: 0;
+    padding-top: 12px;
+    font-size: 0.76rem;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #8c6f51;
+    text-align: left;
+  }
+
+  .event-line {
+    width: 1px;
+    background: rgba(153, 129, 102, 0.18);
+    align-self: stretch;
+    position: relative;
+  }
+
+  .event-line::after {
+    content: '';
+    position: absolute;
+    top: 12px;
+    left: 50%;
+    width: 9px;
+    height: 9px;
+    border-radius: 999px;
+    transform: translateX(-50%);
+    background: rgba(170, 108, 54, 0.82);
+    box-shadow: 0 0 0 4px rgba(247, 240, 231, 1);
+  }
+
+  .event-card {
+    flex: 1;
+    min-width: 0;
+    position: relative;
+    padding: 15px 16px 15px;
+    border-radius: 20px;
+    border: 1px solid rgba(153, 129, 102, 0.12);
+    background: rgba(252, 249, 245, 0.96);
+    box-shadow: 0 8px 24px rgba(87, 64, 43, 0.04);
+    overflow: hidden;
+  }
+
+  .event-card::before {
+    content: '';
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 3px;
+    background: rgba(170, 108, 54, 0.16);
+  }
+
+  .events-stack .event-row:first-child .event-card {
+    background: linear-gradient(180deg, rgba(253, 249, 244, 0.98), rgba(247, 240, 231, 0.92));
+    border-color: rgba(153, 129, 102, 0.18);
+    box-shadow: 0 16px 40px rgba(87, 64, 43, 0.1);
+  }
+
+  .events-stack .event-row:first-child {
+    display: grid;
+    grid-template-columns: 72px 1px minmax(0, 1fr);
+    gap: 14px;
+  }
+
+  .events-stack .event-row:first-child .event-card {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .events-stack .event-row:first-child .event-card::before {
+    display: none;
+  }
+
+  .event-stamp-mobile {
+    display: none;
+  }
+
+  .event-thumb {
+    width: 128px;
+    min-height: 116px;
+    border-radius: 20px;
+    background-size: cover;
+    background-position: center;
+    background-color: rgba(226, 215, 200, 0.7);
+    flex-shrink: 0;
+    box-shadow: 0 14px 34px rgba(87, 64, 43, 0.08);
+  }
+
+  .events-stack .event-row:first-child .event-thumb {
+    width: 100%;
+    min-height: 214px;
+    border-radius: 20px 20px 0 0;
+    box-shadow: none;
+  }
+
+  .events-stack .event-row:first-child .event-card .event-top,
+  .events-stack .event-row:first-child .event-card .event-description,
+  .events-stack .event-row:first-child .event-card .event-meta,
+  .events-stack .event-row:first-child .event-card .event-stamp-mobile {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+
+  .events-stack .event-row:first-child .event-card .event-top {
+    margin-top: 14px;
+  }
+
+  .events-stack .event-row:first-child .event-card .event-meta {
+    margin-bottom: 16px;
+  }
+
+  .event-top {
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .event-kind {
+    padding: 4px 8px;
+    border-radius: 999px;
+    font-size: 0.68rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-weight: 700;
+  }
+
+  .event-name {
+    margin-top: 2px;
+    font-size: 1.06rem;
+    line-height: 1.22;
+    color: #2f2218;
+    font-weight: 600;
+  }
+
+  .events-stack .event-row:first-child .event-name {
+    font-size: 1.14rem;
+  }
+
+  .event-description {
+    margin-top: 7px;
+    color: #6d5947;
+    line-height: 1.46;
+    font-size: 0.88rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .event-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 7px;
+    margin-top: 10px;
+  }
+
+  .event-meta span {
+    padding: 0;
+    border-radius: 0;
+    background: none;
+    color: #86725f;
+    font-size: 0.73rem;
+    position: relative;
+  }
+
+  .event-meta span:not(:last-child)::after {
+    content: '•';
+    margin-left: 7px;
+    color: rgba(134, 114, 95, 0.6);
+  }
+
+  .empty-block,
+  .note-card,
+  .unscheduled-row,
+  .stay-row {
+    border-radius: 16px;
+    background: rgba(250, 247, 242, 0.86);
+    border: 1px solid rgba(153, 129, 102, 0.14);
+  }
+
+  .empty-block {
+    padding: 16px;
+    color: #7b6652;
+  }
+
+  .empty-day .day-head {
+    opacity: 0.84;
+  }
+
+  .stay-row {
+    display: grid;
+    grid-template-columns: 60px minmax(0, 1fr);
+    gap: 12px;
+    padding: 13px 15px;
+    text-align: left;
+    color: inherit;
+    background: rgba(248, 244, 238, 0.94);
+  }
+
+  .stay-label {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #8c6f51;
+    padding-top: 4px;
+  }
+
+  .stay-main {
+    min-width: 0;
+  }
+
+  .stay-name {
+    font-size: 0.96rem;
+    font-weight: 600;
+    color: #2f2218;
+  }
+
+  .stay-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 6px;
+  }
+
+  .stay-meta span {
+    padding: 5px 8px;
+    border-radius: 999px;
+    background: rgba(96, 74, 53, 0.08);
+    color: #6f5b48;
+    font-size: 0.76rem;
+  }
+
+  .detail-rail {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    position: sticky;
+    top: 76px;
+  }
+
+  .rail-block {
+    padding: 20px;
+  }
+
+  .notes-stack,
+  .unscheduled-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 14px;
+  }
+
+  .note-card,
+  .unscheduled-row {
+    padding: 14px;
+  }
+
+  .note-card {
+    background: rgba(253, 250, 246, 0.96);
+  }
+
+  .note-card.muted {
+    color: #7b6652;
+  }
+
+  .note-date {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: #8c6f51;
+  }
+
+  .note-content,
+  .unscheduled-description {
+    margin-top: 6px;
+    color: #645140;
+    line-height: 1.55;
+  }
+
+  .note-delete {
+    margin-top: 10px;
+    color: #a14f35;
+    font-size: 0.84rem;
+    background: none;
+    border: none;
+    padding: 0;
+  }
+
+  .note-compose {
+    margin-top: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding-top: 14px;
+    border-top: 1px solid rgba(153, 129, 102, 0.12);
+  }
+
+  .note-compose textarea,
+  .share-row input {
+    width: 100%;
+    border-radius: 16px;
+    border: 1px solid rgba(153, 129, 102, 0.18);
+    background: rgba(253, 250, 246, 0.96);
+    padding: 12px 14px;
+    color: #2f2218;
+    font: inherit;
+  }
+
+  .rail-action,
+  .share-row button {
+    min-height: 40px;
+    padding: 0 14px;
+    border-radius: 999px;
+    border: none;
+    background: #2f2218;
+    color: #fbf5ee;
+    font: inherit;
+  }
+
+  .unscheduled-name {
+    color: #2f2218;
+    font-weight: 600;
+  }
+
+  .share-overlay,
+  .fab-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(28, 21, 14, 0.32);
+    z-index: 60;
+  }
+
+  .share-panel {
+    width: min(520px, calc(100vw - 32px));
+    margin: 10vh auto 0;
+    background: rgba(250, 247, 242, 0.98);
+    border-radius: 24px;
+    padding: 22px;
+    border: 1px solid rgba(153, 129, 102, 0.16);
+    box-shadow: 0 22px 70px rgba(67, 47, 31, 0.15);
+  }
+
+  .share-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 10px;
+    margin-top: 14px;
+  }
+
+  .trip-fab {
+    position: fixed;
+    right: 22px;
+    bottom: 20px;
+    min-width: 64px;
+    height: 52px;
+    padding: 0 18px;
+    border-radius: 999px;
+    background: #2f2218;
+    color: #fbf5ee;
+    border: none;
+    box-shadow: 0 18px 34px rgba(67, 47, 31, 0.22);
+    z-index: 65;
+  }
+
+  .fab-sheet {
+    position: fixed;
+    right: 22px;
+    bottom: 84px;
+    width: min(300px, calc(100vw - 32px));
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border-radius: 22px;
+    background: rgba(250, 247, 242, 0.98);
+    border: 1px solid rgba(153, 129, 102, 0.16);
+    box-shadow: 0 22px 60px rgba(67, 47, 31, 0.16);
+    z-index: 66;
+  }
+
+  .fab-sheet button {
+    min-height: 44px;
+    padding: 0 14px;
+    border-radius: 14px;
+    background: rgba(96, 74, 53, 0.07);
+    color: #2f2218;
+    border: none;
+    text-align: left;
+    font: inherit;
+  }
+
+  .fab-sheet button.danger {
+    color: #9a442b;
+    background: rgba(185, 77, 45, 0.08);
+  }
+
+  @media (max-width: 1040px) {
+    .detail-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .detail-rail {
+      position: static;
+    }
+  }
+
+  @media (max-width: 720px) {
+    .trip-workspace {
+      gap: 16px;
+      padding-bottom: 88px;
+      padding-inline: 16px;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .trip-hero {
+      min-height: 280px;
+      border-radius: 22px;
+      padding: 18px 16px;
+    }
+
+    .hero-top {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .hero-tools {
+      justify-content: flex-start;
+    }
+
+    .hero-copy h1 {
+      font-size: clamp(2rem, 11vw, 3rem);
+      letter-spacing: -0.035em;
+    }
+
+    .hero-meta {
+      font-size: 0.94rem;
+      line-height: 1.45;
+    }
+
+    .hero-copy p {
+      max-width: 100%;
+      font-size: 0.92rem;
+    }
+
+    .board-head {
+      justify-content: center;
+    }
+
+    .board-tools {
+      justify-content: center;
+      grid-auto-flow: column;
+      width: 100%;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 6px;
+      padding: 5px;
+    }
+
+    .board-chip {
+      min-width: 0;
+      padding: 0 12px;
+      font-size: 0.92rem;
+    }
+
+    .map-single {
+      padding: 18px;
+      flex-direction: column;
+      align-items: start;
+    }
+
+    .events-stack {
+      padding-left: 0;
+      padding-top: 12px;
+    }
+
+    .day-head {
+      flex-direction: column;
+      align-items: start;
+      gap: 10px;
+      padding: 0;
+    }
+
+    .day-title {
+      gap: 10px;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .day-block {
+      padding-top: 18px;
+      margin-top: 8px;
+    }
+
+    .day-count {
+      font-size: 0.78rem;
+      min-height: 26px;
+    }
+
+    .event-row {
+      flex-direction: column;
+      gap: 0;
+      overflow: hidden;
+      border-radius: 20px;
+      border: 1px solid rgba(153, 129, 102, 0.12);
+      background: rgba(252, 249, 245, 0.96);
+      box-shadow: 0 10px 26px rgba(87, 64, 43, 0.05);
+    }
+
+    .event-time-column {
+      display: none;
+    }
+
+    .event-line {
+      display: none;
+    }
+
+    .event-thumb {
+      width: 100%;
+      height: 156px;
+      order: -1;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    .event-stamp-mobile {
+      display: inline-flex;
+      align-self: flex-start;
+      margin-bottom: 8px;
+      padding: 5px 8px;
+      border-radius: 999px;
+      background: rgba(96, 74, 53, 0.08);
+      color: #7b6652;
+      font-size: 0.74rem;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+    }
+
+    .event-card {
+      border: none;
+      background: transparent;
+      box-shadow: none;
+      border-radius: 0;
+      padding: 14px 14px 16px;
+    }
+
+    .event-card::before {
+      display: none;
+    }
+
+    .events-stack .event-row:first-child {
+      display: flex;
+      box-shadow: 0 14px 34px rgba(87, 64, 43, 0.08);
+    }
+
+    .events-stack .event-row:first-child .event-thumb {
+      height: 184px;
+      min-height: 184px;
+    }
+
+    .event-name {
+      margin-top: 0;
+      font-size: 1.02rem;
+    }
+
+    .events-stack .event-row:first-child .event-name {
+      font-size: 1.14rem;
+    }
+
+    .event-description {
+      font-size: 0.86rem;
+    }
+
+    .event-meta span {
+      font-size: 0.72rem;
+    }
+
+    .stay-row {
+      grid-template-columns: 1fr;
+      gap: 8px;
+      padding: 13px 14px 15px;
+    }
+
+    .stay-label {
+      padding-top: 0;
+    }
+
+    .trip-fab {
+      right: 16px;
+      bottom: 72px;
+    }
+
+    .fab-sheet {
+      right: 16px;
+      left: 16px;
+      width: auto;
+      bottom: 136px;
+    }
+  }
+</style>
diff --git a/frontend-v2/src/lib/pages/trips/AtelierTripsPage.svelte b/frontend-v2/src/lib/pages/trips/AtelierTripsPage.svelte
new file mode 100644
index 0000000..23c3aef
--- /dev/null
+++ b/frontend-v2/src/lib/pages/trips/AtelierTripsPage.svelte
@@ -0,0 +1,849 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import CreateTripModal from '$lib/components/trips/CreateTripModal.svelte';
+
+  interface Trip {
+    id: string;
+    name: string;
+    dates: string;
+    daysAway: string;
+    status: 'active' | 'upcoming' | 'completed';
+    cover: string;
+    duration: string;
+    cities: string[];
+    points?: number;
+    cash?: number;
+    shareToken?: string;
+    sortDate: string;
+  }
+
+  let createOpen = $state(false);
+  let searchQuery = $state('');
+  let upcoming = $state<Trip[]>([]);
+  let past = $state<Trip[]>([]);
+  let stats = $state({ trips: 0, cities: 0, countries: 0, points: 0 });
+  let loading = $state(true);
+
+  const allTrips = $derived([...upcoming, ...past]);
+  const nextTrip = $derived(upcoming.find((trip) => trip.status === 'upcoming') || upcoming[0] || null);
+  const activeTrip = $derived(upcoming.find((trip) => trip.status === 'active') || null);
+  const leadTrip = $derived(activeTrip || nextTrip);
+  const searchResults = $derived(
+    searchQuery.trim()
+      ? allTrips.filter((trip) =>
+          trip.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          trip.cities.some((city) => city.toLowerCase().includes(searchQuery.toLowerCase()))
+        )
+      : null
+  );
+  const completedCount = $derived(past.length);
+  const activeCount = $derived(upcoming.filter((trip) => trip.status === 'active').length);
+  const openTripCount = $derived(upcoming.length);
+
+  function formatPoints(n: number): string {
+    if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+    if (n >= 1000) return Math.round(n / 1000) + 'K';
+    return n.toString();
+  }
+
+  function formatDateRange(start: string, end: string): string {
+    if (!start) return '';
+    const s = new Date(start + 'T00:00:00');
+    const e = new Date(end + 'T00:00:00');
+    const sMonth = s.toLocaleDateString('en-US', { month: 'short' });
+    const eMonth = e.toLocaleDateString('en-US', { month: 'short' });
+    const sYear = s.getFullYear();
+    const eYear = e.getFullYear();
+    if (sMonth === eMonth && sYear === eYear) {
+      return `${sMonth} ${s.getDate()} – ${e.getDate()}, ${sYear}`;
+    }
+    if (sYear === eYear) {
+      return `${sMonth} ${s.getDate()} – ${eMonth} ${e.getDate()}, ${sYear}`;
+    }
+    return `${sMonth} ${s.getDate()}, ${sYear} – ${eMonth} ${e.getDate()}, ${eYear}`;
+  }
+
+  function daysBetween(dateStr: string): string {
+    const d = new Date(dateStr + 'T00:00:00');
+    const now = new Date();
+    now.setHours(0, 0, 0, 0);
+    const diff = Math.ceil((d.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+    if (diff <= 0) return '';
+    if (diff === 1) return '1 day';
+    return `${diff} days`;
+  }
+
+  function durationDays(start: string, end: string): string {
+    if (!start || !end) return '';
+    const s = new Date(start + 'T00:00:00');
+    const e = new Date(end + 'T00:00:00');
+    const days = Math.ceil((e.getTime() - s.getTime()) / (1000 * 60 * 60 * 24)) + 1;
+    return `${days} days`;
+  }
+
+  function coverUrl(trip: any): string {
+    if (trip.cover_image) return trip.cover_image;
+    return '';
+  }
+
+  function mapTrip(raw: any): Trip {
+    const now = new Date().toISOString().slice(0, 10);
+    const isActive = raw.start_date <= now && raw.end_date >= now;
+    const isUpcoming = raw.start_date > now;
+    return {
+      id: raw.id,
+      name: raw.name,
+      dates: formatDateRange(raw.start_date, raw.end_date),
+      daysAway: isUpcoming ? daysBetween(raw.start_date) : '',
+      status: isActive ? 'active' : isUpcoming ? 'upcoming' : 'completed',
+      cover: coverUrl(raw),
+      duration: durationDays(raw.start_date, raw.end_date),
+      cities: [],
+      points: 0,
+      cash: 0,
+      shareToken: raw.share_token || '',
+      sortDate: raw.start_date || ''
+    };
+  }
+
+  async function loadTrips() {
+    loading = true;
+    try {
+      const [tripsRes, statsRes] = await Promise.all([
+        fetch('/api/trips/trips', { credentials: 'include' }),
+        fetch('/api/trips/stats', { credentials: 'include' })
+      ]);
+
+      if (tripsRes.ok) {
+        const data = await tripsRes.json();
+        const all = (data.trips || []).map(mapTrip);
+        upcoming = all
+          .filter((trip) => trip.status === 'active' || trip.status === 'upcoming')
+          .sort((a, b) => a.sortDate.localeCompare(b.sortDate));
+        past = all
+          .filter((trip) => trip.status === 'completed')
+          .sort((a, b) => b.sortDate.localeCompare(a.sortDate));
+      }
+
+      if (statsRes.ok) {
+        const data = await statsRes.json();
+        stats = {
+          trips: data.total_trips || 0,
+          cities: data.cities_visited || 0,
+          countries: data.countries_visited || 0,
+          points: data.total_points_redeemed || 0
+        };
+      }
+    } catch {
+      // keep route stable
+    } finally {
+      loading = false;
+    }
+  }
+
+  onMount(loadTrips);
+</script>
+
+<div class="trips-page">
+  <section class="journey-hero reveal">
+    <div class="hero-copy">
+      <div class="panel-kicker">Travel desk</div>
+      <h1>Trips</h1>
+      <p>Keep the active run, the next departure, and the archive in one calmer travel surface.</p>
+    </div>
+
+    <div class="hero-actions">
+      <button class="hero-button primary" onclick={() => (createOpen = true)}>Plan trip</button>
+      <a class="hero-button ghost" href={leadTrip ? `/trips/trip?id=${leadTrip.id}` : '/trips'}>
+        {activeTrip ? 'Open active' : 'Open next'}
+      </a>
+    </div>
+  </section>
+
+  <section class="signal-strip reveal">
+    <div class="signal-line">
+      <div>
+        <div class="signal-label">Open itineraries</div>
+        <div class="signal-note">{activeCount} active · {Math.max(0, upcoming.length - activeCount)} upcoming</div>
+      </div>
+      <div class="signal-value">{loading ? '…' : upcoming.length}</div>
+    </div>
+    <div class="signal-line">
+      <div>
+        <div class="signal-label">Coverage</div>
+        <div class="signal-note">{stats.cities} cities across {stats.countries} countries</div>
+      </div>
+      <div class="signal-value">{loading ? '…' : stats.countries}</div>
+    </div>
+    <div class="signal-line">
+      <div>
+        <div class="signal-label">Archive</div>
+        <div class="signal-note">{completedCount} completed journeys on record</div>
+      </div>
+      <div class="signal-value">{loading ? '…' : completedCount}</div>
+    </div>
+    <div class="signal-line">
+      <div>
+        <div class="signal-label">Points redeemed</div>
+        <div class="signal-note">Long-range travel cost pulled from live stats</div>
+      </div>
+      <div class="signal-value">{loading ? '…' : formatPoints(stats.points)}</div>
+    </div>
+  </section>
+
+  <section class="search-band reveal">
+    <div class="search-wrap">
+      <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+      <input class="search-input" type="text" placeholder="Search trips, cities, hotels, routes..." bind:value={searchQuery} />
+      {#if searchQuery}
+        <button class="search-clear" onclick={() => (searchQuery = '')}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      {/if}
+    </div>
+    <div class="search-note">
+      {#if searchResults}
+        {searchResults.length} result{searchResults.length !== 1 ? 's' : ''}
+      {:else if activeTrip}
+        Active now: {activeTrip.name}
+      {:else if nextTrip}
+        Next departure: {nextTrip.daysAway || nextTrip.dates}
+      {:else}
+        No active itinerary right now.
+      {/if}
+    </div>
+  </section>
+
+  <div class="trips-grid">
+    <section class="journey-column reveal">
+      {#if searchResults}
+        <div class="section-head">
+          <div>
+            <div class="section-label">Search</div>
+            <h2>Matching trips</h2>
+          </div>
+        </div>
+
+        <div class="journey-list">
+          {#each searchResults as trip (trip.id)}
+            <a class="journey-row" class:muted={trip.status === 'completed'} href={`/trips/trip?id=${trip.id}`}>
+              <div class="journey-cover" style={trip.cover ? `background-image:url('${trip.cover}')` : ''}>
+                {#if !trip.cover}
+                  <div class="journey-cover-empty">{trip.name.charAt(0)}</div>
+                {/if}
+              </div>
+              <div class="journey-main">
+                <div class="journey-meta">
+                  <span class={`status-pill ${trip.status}`}>{trip.status === 'completed' ? 'Completed' : trip.status === 'active' ? 'Active now' : 'Upcoming'}</span>
+                  <span>{trip.dates}</span>
+                  {#if trip.daysAway}<span>{trip.daysAway}</span>{/if}
+                </div>
+                <div class="journey-name">{trip.name}</div>
+                <div class="journey-notes">{trip.duration}{#if trip.points} · {formatPoints(trip.points)} pts{/if}</div>
+              </div>
+            </a>
+          {/each}
+        </div>
+      {:else}
+        <div class="section-head">
+          <div>
+            <div class="section-label">Active board</div>
+            <h2>Current and upcoming</h2>
+          </div>
+          {#if nextTrip}
+            <a class="inline-link" href={`/trips/trip?id=${nextTrip.id}`}>Open next trip</a>
+          {/if}
+        </div>
+
+        <div class="journey-list">
+          {#if upcoming.length === 0}
+            <div class="journey-empty">No live itinerary. Start a new trip to build the travel board.</div>
+          {:else}
+            {#each upcoming as trip (trip.id)}
+              <a class="journey-row featured" href={`/trips/trip?id=${trip.id}`}>
+                <div class="journey-cover large" style={trip.cover ? `background-image:url('${trip.cover}')` : ''}>
+                  {#if !trip.cover}
+                    <div class="journey-cover-empty">{trip.name.charAt(0)}</div>
+                  {/if}
+                </div>
+                <div class="journey-main">
+                  <div class="journey-meta">
+                    <span class={`status-pill ${trip.status}`}>{trip.status === 'active' ? 'Active now' : 'Upcoming'}</span>
+                    <span>{trip.dates}</span>
+                    {#if trip.daysAway}<span>{trip.daysAway}</span>{/if}
+                  </div>
+                  <div class="journey-name">{trip.name}</div>
+                  <div class="journey-notes">{trip.duration}{#if trip.points} · {formatPoints(trip.points)} pts{/if}</div>
+                  <div class="journey-open">Open itinerary</div>
+                </div>
+              </a>
+            {/each}
+          {/if}
+        </div>
+
+        <div class="section-head archive">
+          <div>
+            <div class="section-label">Archive</div>
+            <h2>Past routes</h2>
+          </div>
+        </div>
+
+        <div class="journey-list compact">
+          {#each past as trip (trip.id)}
+            <a class="journey-row muted compact-row" href={`/trips/trip?id=${trip.id}`}>
+              <div class="journey-cover compact" style={trip.cover ? `background-image:url('${trip.cover}')` : ''}>
+                {#if !trip.cover}
+                  <div class="journey-cover-empty">{trip.name.charAt(0)}</div>
+                {/if}
+              </div>
+              <div class="journey-main">
+                <div class="journey-meta">
+                  <span class="status-pill completed">Completed</span>
+                  <span>{trip.dates}</span>
+                </div>
+                <div class="journey-name">{trip.name}</div>
+                <div class="journey-notes">{trip.duration}{#if trip.cash} · ${trip.cash.toLocaleString()}{/if}</div>
+              </div>
+            </a>
+          {/each}
+        </div>
+      {/if}
+    </section>
+
+    <aside class="travel-rail reveal">
+      <div class="rail-block standout">
+        <div class="section-label">Next move</div>
+        <h3>{leadTrip ? leadTrip.name : 'No trip queued'}</h3>
+        <p>
+          {#if leadTrip}
+            {activeTrip ? 'Currently in motion. Keep the itinerary, bookings, and notes close.' : `${leadTrip.daysAway} until departure.`}
+          {:else}
+            Open a new itinerary to track dates, bookings, and notes here.
+          {/if}
+        </p>
+        {#if leadTrip}
+          <div class="rail-meta">{leadTrip.dates} · {leadTrip.duration}</div>
+          <a class="rail-link" href={`/trips/trip?id=${leadTrip.id}`}>{activeTrip ? 'Resume trip' : 'Open itinerary'}</a>
+        {/if}
+      </div>
+    </aside>
+  </div>
+</div>
+
+<CreateTripModal bind:open={createOpen} onCreated={(id) => goto(`/trips/trip?id=${id}`)} />
+
+<style>
+  .trips-page {
+    display: grid;
+    gap: 18px;
+    color: #1f1811;
+  }
+
+  .journey-hero,
+  .signal-strip,
+  .search-band,
+  .journey-column,
+  .travel-rail {
+    background: rgba(250, 244, 236, 0.72);
+    border: 1px solid rgba(35, 26, 17, 0.08);
+    border-radius: 28px;
+    backdrop-filter: blur(16px);
+  }
+
+  .journey-hero {
+    padding: 22px 24px;
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: 18px;
+    background:
+      radial-gradient(circle at top left, rgba(214, 126, 59, 0.14), transparent 30%),
+      linear-gradient(135deg, rgba(252, 246, 239, 0.96), rgba(241, 231, 220, 0.88));
+  }
+
+  .hero-copy {
+    display: grid;
+    gap: 8px;
+    max-width: 36rem;
+  }
+
+  .panel-kicker,
+  .section-label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #8a7868;
+  }
+
+  .journey-hero h1,
+  .section-head h2,
+  .travel-rail h3 {
+    margin: 0;
+    letter-spacing: -0.055em;
+    color: #1c140c;
+  }
+
+  .journey-hero h1 {
+    font-size: clamp(2.6rem, 5vw, 4.2rem);
+    line-height: 0.92;
+  }
+
+  .journey-hero p,
+  .rail-copy,
+  .standout p {
+    margin: 0;
+    color: #5f5347;
+    line-height: 1.55;
+  }
+
+  .hero-actions {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .hero-button,
+  .inline-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 999px;
+    text-decoration: none;
+    transition: all 160ms ease;
+  }
+
+  .hero-button {
+    padding: 11px 16px;
+    font-size: 0.92rem;
+    font-weight: 600;
+    border: 1px solid rgba(35, 26, 17, 0.08);
+  }
+
+  .hero-button.primary {
+    background: #2f241c;
+    color: #fff7ee;
+  }
+
+  .hero-button.ghost {
+    background: rgba(255, 251, 246, 0.82);
+    color: #4f4338;
+  }
+
+  .signal-strip {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    overflow: hidden;
+  }
+
+  .signal-line {
+    display: flex;
+    justify-content: space-between;
+    gap: 14px;
+    padding: 18px 20px;
+    border-right: 1px solid rgba(35, 26, 17, 0.08);
+  }
+
+  .signal-line:last-child {
+    border-right: none;
+  }
+
+  .signal-label {
+    font-size: 0.84rem;
+    font-weight: 600;
+    color: #30261d;
+  }
+
+  .signal-note {
+    margin-top: 4px;
+    font-size: 0.84rem;
+    color: #6f6255;
+    line-height: 1.45;
+  }
+
+  .signal-value {
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: #1b140d;
+    letter-spacing: -0.04em;
+  }
+
+  .search-band {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 14px 18px;
+  }
+
+  .search-wrap {
+    position: relative;
+    flex: 1;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    width: 16px;
+    height: 16px;
+    color: #857464;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 13px 44px 13px 42px;
+    border-radius: 18px;
+    border: 1px solid rgba(35, 26, 17, 0.08);
+    background: rgba(255, 251, 246, 0.88);
+    color: #241c15;
+    font-size: 0.98rem;
+  }
+
+  .search-clear {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: #857464;
+  }
+
+  .search-clear svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .search-note {
+    flex-shrink: 0;
+    font-size: 0.88rem;
+    color: #65584b;
+  }
+
+  .trips-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.4fr) 320px;
+    gap: 18px;
+    align-items: start;
+  }
+
+  .journey-column {
+    padding: 18px;
+  }
+
+  .travel-rail {
+    padding: 18px;
+    display: grid;
+    gap: 14px;
+    position: sticky;
+    top: 28px;
+  }
+
+  .section-head {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 14px;
+  }
+
+  .section-head h2 {
+    font-size: 1.7rem;
+    line-height: 0.98;
+  }
+
+  .section-head.archive {
+    margin-top: 22px;
+  }
+
+  .inline-link {
+    padding: 10px 14px;
+    background: rgba(255, 251, 246, 0.84);
+    border: 1px solid rgba(35, 26, 17, 0.08);
+    color: #4f4338;
+    font-size: 0.88rem;
+  }
+
+  .journey-list {
+    display: grid;
+    gap: 12px;
+  }
+
+  .journey-row {
+    display: grid;
+    grid-template-columns: 200px minmax(0, 1fr);
+    gap: 16px;
+    padding: 14px;
+    border-radius: 22px;
+    background: linear-gradient(135deg, rgba(255, 249, 243, 0.94), rgba(241, 230, 219, 0.86));
+    border: 1px solid rgba(35, 26, 17, 0.07);
+    color: inherit;
+    text-decoration: none;
+    transition: transform 160ms ease, box-shadow 160ms ease;
+  }
+
+  .journey-row:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 14px 30px rgba(41, 28, 17, 0.07);
+  }
+
+  .journey-row.muted {
+    opacity: 0.72;
+  }
+
+  .journey-row.compact-row {
+    grid-template-columns: 92px minmax(0, 1fr);
+    padding: 12px;
+  }
+
+  .journey-cover {
+    border-radius: 18px;
+    background: rgba(229, 218, 206, 0.84) center/cover no-repeat;
+    min-height: 128px;
+    overflow: hidden;
+  }
+
+  .journey-cover.large {
+    min-height: 152px;
+  }
+
+  .journey-cover.compact {
+    min-height: 84px;
+  }
+
+  .journey-cover-empty {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    font-size: 2rem;
+    font-weight: 700;
+    color: #8a7868;
+  }
+
+  .journey-main {
+    min-width: 0;
+    display: grid;
+    align-content: start;
+    gap: 8px;
+  }
+
+  .journey-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    font-size: 0.78rem;
+    color: #7c6b5c;
+  }
+
+  .status-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 8px;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .status-pill.active {
+    background: rgba(74, 101, 83, 0.14);
+    color: #465f50;
+  }
+
+  .status-pill.upcoming {
+    background: rgba(167, 111, 67, 0.14);
+    color: #8d5b35;
+  }
+
+  .status-pill.completed {
+    background: rgba(35, 26, 17, 0.08);
+    color: #685c51;
+  }
+
+  .journey-name {
+    font-size: 1.46rem;
+    font-weight: 700;
+    line-height: 1.02;
+    letter-spacing: -0.04em;
+    color: #1c140c;
+  }
+
+  .journey-notes,
+  .journey-open,
+  .journey-empty,
+  .rail-meta,
+  .rail-stat span,
+  .coverage-row span {
+    color: #605447;
+  }
+
+  .journey-open {
+    font-size: 0.88rem;
+    font-weight: 600;
+  }
+
+  .journey-empty {
+    padding: 20px;
+    border-radius: 20px;
+    background: rgba(255, 250, 245, 0.7);
+    border: 1px dashed rgba(35, 26, 17, 0.11);
+  }
+
+  .rail-block {
+    padding: 16px;
+    border-radius: 22px;
+    background: rgba(255, 249, 243, 0.84);
+    border: 1px solid rgba(35, 26, 17, 0.07);
+  }
+
+  .rail-block.standout {
+    background: linear-gradient(140deg, rgba(255, 247, 240, 0.96), rgba(244, 231, 217, 0.9));
+  }
+
+  .travel-rail h3 {
+    font-size: 1.5rem;
+    line-height: 1.02;
+    margin-top: 6px;
+  }
+
+  .rail-meta {
+    margin-top: 10px;
+    font-size: 0.88rem;
+  }
+
+  .rail-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 14px;
+    padding: 10px 14px;
+    border-radius: 999px;
+    background: rgba(255, 251, 246, 0.88);
+    border: 1px solid rgba(35, 26, 17, 0.08);
+    color: #4f4338;
+    font-size: 0.88rem;
+    font-weight: 600;
+    text-decoration: none;
+  }
+
+  .rail-stat,
+  .coverage-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    padding-top: 10px;
+    margin-top: 10px;
+    border-top: 1px solid rgba(35, 26, 17, 0.08);
+  }
+
+  .rail-stat strong,
+  .coverage-row strong {
+    color: #201810;
+    font-family: var(--mono);
+  }
+
+  @media (max-width: 1100px) {
+    .signal-strip {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .signal-line:nth-child(2) {
+      border-right: none;
+    }
+
+    .trips-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .travel-rail {
+      position: static;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 768px) {
+    .trips-page {
+      gap: 16px;
+      padding-inline: 16px;
+    }
+
+    .journey-hero,
+    .signal-strip,
+    .search-band,
+    .journey-column,
+    .travel-rail {
+      border-radius: 24px;
+    }
+
+    .journey-hero {
+      padding: 18px 16px;
+      grid-template-columns: 1fr;
+      align-items: start;
+    }
+
+    .hero-actions,
+    .search-band,
+    .signal-strip,
+    .travel-rail {
+      display: grid;
+    }
+
+    .hero-actions {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    .search-band {
+      padding: 14px 16px;
+      gap: 10px;
+    }
+
+    .search-note {
+      font-size: 0.82rem;
+    }
+
+    .signal-strip,
+    .travel-rail {
+      grid-template-columns: 1fr;
+    }
+
+    .signal-line {
+      padding: 16px;
+      border-right: none;
+      border-bottom: 1px solid rgba(35, 26, 17, 0.08);
+    }
+
+    .signal-line:last-child {
+      border-bottom: none;
+    }
+
+    .journey-row,
+    .journey-row.compact-row {
+      grid-template-columns: 1fr;
+      padding: 12px;
+    }
+
+    .journey-cover,
+    .journey-cover.large,
+    .journey-cover.compact {
+      min-height: 160px;
+    }
+
+    .journey-name {
+      font-size: 1.2rem;
+    }
+
+    .section-head {
+      align-items: start;
+      gap: 10px;
+    }
+
+    .journey-column,
+    .travel-rail {
+      padding: 16px;
+    }
+  }
+</style>
diff --git a/frontend-v2/src/lib/pages/trips/LegacyTripsPage.svelte b/frontend-v2/src/lib/pages/trips/LegacyTripsPage.svelte
new file mode 100644
index 0000000..71ca939
--- /dev/null
+++ b/frontend-v2/src/lib/pages/trips/LegacyTripsPage.svelte
@@ -0,0 +1,345 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import CreateTripModal from '$lib/components/trips/CreateTripModal.svelte';
+
+  let createOpen = $state(false);
+
+  interface Trip {
+    id: string;
+    name: string;
+    dates: string;
+    daysAway: string;
+    status: 'active' | 'upcoming' | 'completed';
+    cover: string;
+    duration: string;
+    cities: string[];
+    points?: number;
+    cash?: number;
+    shareToken?: string;
+    sortDate: string;
+  }
+
+  let searchQuery = $state('');
+  let upcoming = $state<Trip[]>([]);
+  let past = $state<Trip[]>([]);
+  let stats = $state({ trips: 0, cities: 0, countries: 0, points: 0 });
+  let loading = $state(true);
+
+  const allTrips = $derived([...upcoming, ...past]);
+
+  const filteredTrips = $derived(
+    searchQuery.trim()
+      ? allTrips.filter((t) =>
+          t.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          t.cities.some((c) => c.toLowerCase().includes(searchQuery.toLowerCase()))
+        )
+      : null
+  );
+
+  function formatPoints(n: number): string {
+    if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+    if (n >= 1000) return Math.round(n / 1000) + 'K';
+    return n.toString();
+  }
+
+  function formatDateRange(start: string, end: string): string {
+    if (!start) return '';
+    const s = new Date(start + 'T00:00:00');
+    const e = new Date(end + 'T00:00:00');
+    const sMonth = s.toLocaleDateString('en-US', { month: 'short' });
+    const eMonth = e.toLocaleDateString('en-US', { month: 'short' });
+    const sYear = s.getFullYear();
+    const eYear = e.getFullYear();
+    if (sMonth === eMonth && sYear === eYear) {
+      return `${sMonth} ${s.getDate()} – ${e.getDate()}, ${sYear}`;
+    }
+    if (sYear === eYear) {
+      return `${sMonth} ${s.getDate()} – ${eMonth} ${e.getDate()}, ${sYear}`;
+    }
+    return `${sMonth} ${s.getDate()}, ${sYear} – ${eMonth} ${e.getDate()}, ${eYear}`;
+  }
+
+  function daysBetween(dateStr: string): string {
+    const d = new Date(dateStr + 'T00:00:00');
+    const now = new Date();
+    now.setHours(0, 0, 0, 0);
+    const diff = Math.ceil((d.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+    if (diff <= 0) return '';
+    if (diff === 1) return '1 day';
+    return `${diff} days`;
+  }
+
+  function durationDays(start: string, end: string): string {
+    if (!start || !end) return '';
+    const s = new Date(start + 'T00:00:00');
+    const e = new Date(end + 'T00:00:00');
+    const days = Math.ceil((e.getTime() - s.getTime()) / (1000 * 60 * 60 * 24)) + 1;
+    return `${days} days`;
+  }
+
+  function coverUrl(trip: any): string {
+    if (trip.cover_image) return trip.cover_image;
+    return '';
+  }
+
+  function mapTrip(raw: any): Trip {
+    const now = new Date().toISOString().slice(0, 10);
+    const isActive = raw.start_date <= now && raw.end_date >= now;
+    const isUpcoming = raw.start_date > now;
+    return {
+      id: raw.id,
+      name: raw.name,
+      dates: formatDateRange(raw.start_date, raw.end_date),
+      daysAway: isUpcoming ? daysBetween(raw.start_date) : '',
+      status: isActive ? 'active' : isUpcoming ? 'upcoming' : 'completed',
+      cover: coverUrl(raw),
+      duration: durationDays(raw.start_date, raw.end_date),
+      cities: [],
+      points: 0,
+      cash: 0,
+      shareToken: raw.share_token || '',
+      sortDate: raw.start_date || ''
+    };
+  }
+
+  onMount(async () => {
+    try {
+      const [tripsRes, statsRes] = await Promise.all([
+        fetch('/api/trips/trips', { credentials: 'include' }),
+        fetch('/api/trips/stats', { credentials: 'include' })
+      ]);
+
+      if (tripsRes.ok) {
+        const data = await tripsRes.json();
+        const all = (data.trips || []).map(mapTrip);
+        upcoming = all
+          .filter((t) => t.status === 'active' || t.status === 'upcoming')
+          .sort((a, b) => a.sortDate.localeCompare(b.sortDate));
+        past = all
+          .filter((t) => t.status === 'completed')
+          .sort((a, b) => b.sortDate.localeCompare(a.sortDate));
+      }
+
+      if (statsRes.ok) {
+        const data = await statsRes.json();
+        stats = {
+          trips: data.total_trips || 0,
+          cities: data.cities_visited || 0,
+          countries: data.countries_visited || 0,
+          points: data.total_points_redeemed || 0
+        };
+      }
+    } catch {
+      // keep route stable
+    } finally {
+      loading = false;
+    }
+  });
+</script>
+
+<div class="page">
+  <div class="app-surface">
+    <div class="header-row">
+      <div>
+        <div class="page-title">TRIPS</div>
+        <div class="page-subtitle">Your Adventures</div>
+      </div>
+      <button class="btn-primary" onclick={() => (createOpen = true)}>+ Plan Trip</button>
+    </div>
+
+    <div class="stats-bar">
+      <div class="stat-box">
+        <div class="stat-value">{stats.trips}</div>
+        <div class="stat-label">Trips</div>
+      </div>
+      <div class="stat-box">
+        <div class="stat-value">{stats.cities}</div>
+        <div class="stat-label">Cities</div>
+      </div>
+      <div class="stat-box">
+        <div class="stat-value">{stats.countries}</div>
+        <div class="stat-label">Countries</div>
+      </div>
+      <div class="stat-box">
+        <div class="stat-value">{formatPoints(stats.points)}</div>
+        <div class="stat-label">Points Used</div>
+      </div>
+    </div>
+
+    <div class="search-wrap">
+      <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+      <input class="input search-input" type="text" placeholder="Search trips, cities, hotels, flights..." bind:value={searchQuery} />
+      {#if searchQuery}
+        <button class="search-clear" onclick={() => (searchQuery = '')}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      {/if}
+    </div>
+
+    {#if filteredTrips}
+      <div class="search-results-label">{filteredTrips.length} result{filteredTrips.length !== 1 ? 's' : ''}</div>
+      <div class="trip-grid">
+        {#each filteredTrips as trip (trip.id)}
+          <a href="/trips/trip?id={trip.id}" class="trip-card" class:muted={trip.status === 'completed'}>
+            <div class="trip-photo" style={trip.cover ? `background-image:url('${trip.cover}')` : ''}>
+              {#if !trip.cover}
+                <div class="photo-empty">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
+                </div>
+              {/if}
+            </div>
+            <div class="trip-body">
+              <div class="trip-name">{trip.name}</div>
+              {#if trip.dates}<div class="trip-dates">{trip.dates}</div>{/if}
+              {#if trip.cities.length > 0}<div class="trip-cities">{trip.cities.join(' · ')}</div>{/if}
+              <div class="trip-footer">
+                {#if trip.status === 'active'}<span class="badge active">Active</span>{/if}
+                {#if trip.status === 'completed'}<span class="badge completed">Completed</span>{/if}
+                {#if trip.daysAway}<span class="trip-countdown">{trip.daysAway}</span>{/if}
+                {#if trip.points}<span class="trip-points">{formatPoints(trip.points)} pts</span>{/if}
+              </div>
+            </div>
+          </a>
+        {/each}
+      </div>
+    {:else}
+      <section class="section">
+        <div class="section-title">UPCOMING</div>
+        <div class="trip-grid">
+          {#each upcoming as trip (trip.id)}
+            <a href="/trips/trip?id={trip.id}" class="trip-card">
+              <div class="trip-photo" style="background-image:url('{trip.cover}')">
+                {#if trip.shareToken}
+                  <button class="share-btn" title="Share trip">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
+                  </button>
+                {/if}
+              </div>
+              <div class="trip-body">
+                <div class="trip-name">{trip.name}</div>
+                <div class="trip-dates">{trip.dates} · {trip.duration}</div>
+                <div class="trip-cities">{trip.cities.join(' · ')}</div>
+                <div class="trip-footer">
+                  {#if trip.status === 'active'}<span class="badge active">Active</span>{/if}
+                  <span class="trip-countdown">{trip.daysAway}</span>
+                  {#if trip.points}<span class="trip-points">{formatPoints(trip.points)} pts</span>{/if}
+                </div>
+              </div>
+            </a>
+          {/each}
+        </div>
+      </section>
+
+      <section class="section">
+        <div class="section-title">PAST ADVENTURES</div>
+        <div class="trip-grid">
+          {#each past as trip (trip.id)}
+            <a href="/trips/trip?id={trip.id}" class="trip-card muted">
+              <div class="trip-photo" style={trip.cover ? `background-image:url('${trip.cover}')` : ''}>
+                {#if !trip.cover}
+                  <div class="photo-empty">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
+                  </div>
+                {/if}
+                {#if trip.shareToken}
+                  <button class="share-btn" title="Share trip">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
+                  </button>
+                {/if}
+              </div>
+              <div class="trip-body">
+                <div class="trip-name">{trip.name}</div>
+                {#if trip.dates}<div class="trip-dates">{trip.dates} · {trip.duration}</div>{/if}
+                {#if trip.cities.length > 0}<div class="trip-cities">{trip.cities.join(' · ')}</div>{/if}
+                <div class="trip-footer">
+                  <span class="badge completed">Completed</span>
+                  {#if trip.points}<span class="trip-points">{formatPoints(trip.points)} pts</span>{/if}
+                  {#if trip.cash}<span class="trip-cash">${trip.cash.toLocaleString()}</span>{/if}
+                </div>
+              </div>
+            </a>
+          {/each}
+        </div>
+      </section>
+    {/if}
+  </div>
+</div>
+
+<CreateTripModal bind:open={createOpen} onCreated={(id) => goto(`/trips/trip?id=${id}`)} />
+
+<style>
+  .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: 14px; }
+  .stat-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2) 6px; text-align: center; }
+  .stat-value { font-size: var(--text-md); font-weight: 700; font-family: var(--mono); color: var(--text-1); line-height: 1.1; }
+  .stat-label { font-size: var(--text-xs); color: var(--text-3); margin-top: var(--sp-0.5); text-transform: uppercase; letter-spacing: 0.05em; }
+
+  .header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-3); }
+  .page-subtitle { font-size: var(--text-2xl); font-weight: 300; color: var(--text-1); line-height: 1.15; margin-top: -1px; }
+  .btn-primary { padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); transition: opacity var(--transition); }
+  .btn-primary:hover { opacity: 0.9; }
+
+  .search-wrap { position: relative; margin-bottom: var(--sp-4); }
+  .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-4); pointer-events: none; }
+  .search-input { padding-left: 40px; font-size: var(--text-md); }
+  .search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-4); padding: var(--sp-1); }
+  .search-clear svg { width: 16px; height: 16px; }
+  .search-results-label { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-3); }
+
+  .section { margin-bottom: var(--section-gap); }
+  .section-title { font-size: var(--text-xs); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-3); }
+
+  .trip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
+
+  .trip-card {
+    background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
+    box-shadow: var(--card-shadow-sm); overflow: hidden; transition: all var(--transition);
+    text-decoration: none; color: inherit; display: block;
+  }
+  .trip-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow); }
+  .trip-card.muted { opacity: 0.6; }
+  .trip-card.muted:hover { opacity: 0.85; }
+
+  .trip-photo {
+    width: 100%; height: 180px; background: var(--card-hover) center/cover no-repeat;
+    position: relative;
+  }
+  .photo-empty {
+    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
+    color: var(--text-4);
+  }
+  .photo-empty svg { width: 28px; height: 28px; opacity: 0.3; }
+
+  .share-btn {
+    position: absolute; top: var(--sp-2); right: var(--sp-2);
+    width: 28px; height: 28px; border-radius: 50%;
+    background: rgba(0,0,0,0.35); backdrop-filter: blur(6px);
+    border: none; color: white; display: flex; align-items: center; justify-content: center;
+    cursor: pointer; transition: all var(--transition); opacity: 0;
+  }
+  .trip-card:hover .share-btn { opacity: 1; }
+  .share-btn:hover { background: rgba(0,0,0,0.55); }
+  .share-btn svg { width: 13px; height: 13px; }
+
+  .trip-body { padding: 8px 14px 10px; }
+  .trip-name { font-size: var(--text-base); font-weight: 600; color: var(--text-1); line-height: 1.3; }
+  .trip-dates { font-size: var(--text-xs); color: var(--text-3); margin-top: 3px; }
+  .trip-cities { font-size: var(--text-xs); color: var(--text-3); margin-top: 1px; opacity: 0.7; }
+  .trip-footer { display: flex; align-items: center; gap: var(--sp-1.5); margin-top: var(--sp-1.5); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--sp-1.5); }
+  .trip-countdown { font-size: var(--text-xs); color: var(--text-3); font-family: var(--mono); }
+  .trip-points { font-size: var(--text-xs); font-family: var(--mono); color: var(--accent); font-weight: 500; }
+  .trip-cash { font-size: var(--text-xs); font-family: var(--mono); color: var(--text-3); }
+
+  .badge { font-size: var(--text-xs); font-weight: 600; padding: 2px var(--sp-2); border-radius: var(--radius-sm); line-height: 1.5; }
+  .badge.active { background: var(--accent-bg); color: var(--accent); }
+  .badge.completed { background: var(--surface-secondary); color: var(--text-3); }
+
+  @media (max-width: 768px) {
+    .stats-bar { grid-template-columns: repeat(2, 1fr); }
+    .trip-grid { grid-template-columns: 1fr; }
+    .page-subtitle { font-size: var(--text-xl); }
+    .trip-photo { height: 160px; }
+    .trip-body { padding: 10px 16px 12px; }
+    .trip-name { font-size: var(--text-md); }
+  }
+</style>
diff --git a/frontend-v2/src/routes/(app)/+layout.server.ts b/frontend-v2/src/routes/(app)/+layout.server.ts
index 8aaa54b..222d619 100644
--- a/frontend-v2/src/routes/(app)/+layout.server.ts
+++ b/frontend-v2/src/routes/(app)/+layout.server.ts
@@ -5,6 +5,8 @@ import { env } from '$env/dynamic/private';
 const gatewayUrl = env.GATEWAY_URL || 'http://localhost:8100';
 
 export const load: LayoutServerLoad = async ({ cookies, url }) => {
+	const host = url.host.toLowerCase();
+	const useAtelierShell = host.includes(':4174') || host.startsWith('test.');
 	const session = cookies.get('platform_session');
 	if (!session) {
 		throw redirect(302, `/login?redirect=${encodeURIComponent(url.pathname)}`);
@@ -28,7 +30,7 @@ export const load: LayoutServerLoad = async ({ cookies, url }) => {
 				};
 				const hidden = hiddenByUser[data.user.username] || [];
 				const visibleApps = allApps.filter(a => !hidden.includes(a));
-				return { user: data.user, visibleApps };
+				return { user: data.user, visibleApps, useAtelierShell };
 			}
 		}
 	} catch { /* gateway down — let client handle */ }
diff --git a/frontend-v2/src/routes/(app)/+layout.svelte b/frontend-v2/src/routes/(app)/+layout.svelte
index d4326b2..cbefbf1 100644
--- a/frontend-v2/src/routes/(app)/+layout.svelte
+++ b/frontend-v2/src/routes/(app)/+layout.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
+	import AppShell from '$lib/components/layout/AppShell.svelte';
 	import Navbar from '$lib/components/layout/Navbar.svelte';
 	import MobileTabBar from '$lib/components/layout/MobileTabBar.svelte';
 	import CommandPalette from '$lib/components/layout/CommandPalette.svelte';
+	import FitnessAssistantDrawer from '$lib/components/assistant/FitnessAssistantDrawer.svelte';
 
 	let { children, data } = $props();
 	let commandOpen = $state(false);
+	let assistantEntryDate = $state<string | null>(null);
 	const visibleApps = data?.visibleApps || ['trips', 'fitness', 'inventory', 'budget', 'reader', 'media'];
 	const userName = data?.user?.display_name || '';
+	const useAtelierShell = data?.useAtelierShell || false;
 
 	function openCommand() {
 		commandOpen = true;
@@ -22,20 +26,33 @@
 			commandOpen = !commandOpen;
 		}
 	}
+
+	function handleAssistantOpen(event: Event) {
+		const detail = (event as CustomEvent<{ entryDate?: string }>).detail;
+		assistantEntryDate = detail?.entryDate || null;
+		commandOpen = true;
+	}
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} onopenassistant={handleAssistantOpen} />
 
-<div class="app">
-	<Navbar onOpenCommand={openCommand} {visibleApps} />
-
-	<main>
+{#if useAtelierShell}
+	<AppShell onOpenCommand={openCommand} {visibleApps} {userName}>
 		{@render children()}
-	</main>
+	</AppShell>
+	<FitnessAssistantDrawer bind:open={commandOpen} onclose={closeCommand} entryDate={assistantEntryDate} />
+{:else}
+	<div class="app">
+		<Navbar onOpenCommand={openCommand} {visibleApps} />
 
-	<MobileTabBar {visibleApps} />
-	<CommandPalette bind:open={commandOpen} onclose={closeCommand} />
-</div>
+		<main>
+			{@render children()}
+		</main>
+
+		<MobileTabBar {visibleApps} />
+		<CommandPalette bind:open={commandOpen} onclose={closeCommand} />
+	</div>
+{/if}
 
 <style>
 	.app {
diff --git a/frontend-v2/src/routes/(app)/+page.svelte b/frontend-v2/src/routes/(app)/+page.svelte
index cc24b59..9450fe1 100644
--- a/frontend-v2/src/routes/(app)/+page.svelte
+++ b/frontend-v2/src/routes/(app)/+page.svelte
@@ -1,444 +1,12 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { page } from '$app/state';
-	import BudgetModule from '$lib/components/dashboard/BudgetModule.svelte';
-	import FitnessModule from '$lib/components/dashboard/FitnessModule.svelte';
-	import IssuesModule from '$lib/components/dashboard/IssuesModule.svelte';
-	import TaskSlideOver from '$lib/components/dashboard/TaskSlideOver.svelte';
-
-	interface QuickTask {
-		id: string;
-		title: string;
-		startDate?: string;
-		dueDate?: string;
-		isAllDay?: boolean;
-		_projectName: string;
-		projectId: string;
-		_projectId: string;
-	}
-
-	const userName = $derived((page as any).data?.user?.display_name || 'there');
-
-	let inventoryIssueCount = $state(0);
-	let inventoryReviewCount = $state(0);
-	let budgetUncatCount = $state(0);
-	let budgetSpending = $state('');
-	let budgetIncome = $state('');
-	let fitnessCalRemaining = $state(0);
-	let fitnessCalLogged = $state(0);
-	let fitnessCalGoal = $state(2000);
-	let fitnessProtein = $state(0);
-	let fitnessCarbs = $state(0);
-	let fitnessProteinGoal = $state(150);
-	let fitnessCarbsGoal = $state(200);
-	let fitnessFat = $state(0);
-	let fitnessFatGoal = $state(65);
-	let headerTasks = $state<QuickTask[]>([]);
-	let headerOverdue = $state(0);
-	let headerTotalCount = $state(0);
-	let taskPanelOpen = $state(false);
-
-	function getGreeting(): string {
-		const h = new Date().getHours();
-		if (h < 12) return 'Good morning';
-		if (h < 17) return 'Good afternoon';
-		return 'Good evening';
-	}
-
-	function getDateString(): string {
-		return new Date().toLocaleDateString('en-US', {
-			weekday: 'long', month: 'long', day: 'numeric'
-		});
-	}
-
-	function formatTaskTime(t: QuickTask): string {
-		const d = t.startDate || t.dueDate;
-		if (!d || t.isAllDay) return '';
-		try {
-			const date = new Date(d);
-			const h = date.getHours(), m = date.getMinutes();
-			if (h === 0 && m === 0) return '';
-			const ampm = h >= 12 ? 'PM' : 'AM';
-			const hour = h % 12 || 12;
-			return m > 0 ? `${hour}:${String(m).padStart(2, '0')} ${ampm}` : `${hour} ${ampm}`;
-		} catch { return ''; }
-	}
-
-	const fitPercent = $derived(fitnessCalGoal > 0 ? Math.min(100, Math.round((fitnessCalLogged / fitnessCalGoal) * 100)) : 0);
-
-	async function loadTasks() {
-		try {
-			const res = await fetch('/api/tasks/today', { credentials: 'include' });
-			if (res.ok) {
-				const t = await res.json();
-				headerOverdue = t.overdueCount || 0;
-				const today = t.today || [];
-				const overdue = t.overdue || [];
-				headerTotalCount = today.length + overdue.length;
-				headerTasks = [...overdue, ...today].slice(0, 1);
-			}
-		} catch { /* silent */ }
-	}
-
-	onMount(async () => {
-		const n = new Date();
-		const today = `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, '0')}-${String(n.getDate()).padStart(2, '0')}`;
-
-		try {
-			const [invRes, budgetRes, uncatRes, fitTotalsRes, fitGoalsRes] = await Promise.all([
-				fetch('/api/inventory/summary', { credentials: 'include' }),
-				fetch('/api/budget/summary', { credentials: 'include' }),
-				fetch('/api/budget/uncategorized-count', { credentials: 'include' }),
-				fetch(`/api/fitness/entries/totals?date=${today}`, { credentials: 'include' }),
-				fetch(`/api/fitness/goals/for-date?date=${today}`, { credentials: 'include' }),
-			]);
-			if (invRes.ok) {
-				const data = await invRes.json();
-				inventoryIssueCount = data.issueCount || 0;
-				inventoryReviewCount = data.reviewCount || 0;
-			}
-			if (budgetRes.ok) {
-				const data = await budgetRes.json();
-				budgetSpending = '$' + Math.abs(data.spendingDollars || 0).toLocaleString('en-US');
-				budgetIncome = '$' + Math.abs(data.incomeDollars || 0).toLocaleString('en-US');
-			}
-			if (uncatRes.ok) {
-				const data = await uncatRes.json();
-				budgetUncatCount = data.count || 0;
-			}
-			if (fitTotalsRes.ok) {
-				const t = await fitTotalsRes.json();
-				fitnessCalLogged = Math.round(t.total_calories || 0);
-				fitnessProtein = Math.round(t.total_protein || 0);
-				fitnessCarbs = Math.round(t.total_carbs || 0);
-				fitnessFat = Math.round(t.total_fat || 0);
-			}
-			if (fitGoalsRes.ok) {
-				const g = await fitGoalsRes.json();
-				fitnessCalGoal = g.calories || 2000;
-				fitnessProteinGoal = g.protein || 150;
-				fitnessCarbsGoal = g.carbs || 200;
-				fitnessFatGoal = g.fat || 65;
-				fitnessCalRemaining = Math.max(0, fitnessCalGoal - fitnessCalLogged);
-			}
-		} catch { /* silent */ }
-
-		await loadTasks();
-	});
+  import { page } from '$app/state';
+  import AtelierDashboardPage from '$lib/pages/dashboard/AtelierDashboardPage.svelte';
+  import LegacyDashboardPage from '$lib/pages/dashboard/LegacyDashboardPage.svelte';
+  const useAtelierShell = $derived((page as any).data?.useAtelierShell || false);
 </script>
 
-<div class="page">
-	<div class="db-surface">
-
-		<!-- ═══ HEADER ═══ -->
-		<div class="db-header">
-			<div>
-				<div class="db-date">{getDateString()}</div>
-				<h1 class="db-greeting">{getGreeting()}, <strong>{userName}</strong></h1>
-			</div>
-			<button class="task-pill" onclick={() => taskPanelOpen = true}>
-				<span class="tp-dot" class:tp-overdue={headerOverdue > 0}></span>
-				<span class="tp-text"><b>{headerTotalCount} task{headerTotalCount !== 1 ? 's' : ''}</b>
-					{#if headerTasks[0]} &middot; Next: {headerTasks[0].title}{/if}
-				</span>
-				<svg class="tp-arrow" width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M5 3l3.5 3.5L5 10"/></svg>
-			</button>
-		</div>
-
-		<TaskSlideOver bind:open={taskPanelOpen} onclose={() => { taskPanelOpen = false; loadTasks(); }} />
-
-		<!-- ═══ BENTO ROW 1: Budget (2fr) + Inventory (1fr) ═══ -->
-		<div class="bento stagger">
-			<a href="/budget" class="bc bc-emerald">
-				<div class="bc-top">
-					<span class="bc-label">Budget</span>
-					<div class="bc-icon emerald">
-						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
-					</div>
-				</div>
-				<div class="bc-value">{budgetUncatCount}</div>
-				<div class="bc-desc">uncategorized transactions<br><strong>{budgetSpending} spent</strong> &middot; {budgetIncome} income</div>
-				<div class="bc-action">Review <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg></div>
-			</a>
-
-			<a href="/inventory" class="bc bc-rose">
-				<div class="bc-top">
-					<span class="bc-label">Inventory</span>
-					<div class="bc-icon rose">
-						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
-					</div>
-				</div>
-				<div class="bc-value-sm">{inventoryIssueCount} issues</div>
-				<div class="bc-desc">{inventoryReviewCount} needs review<br>{inventoryIssueCount + inventoryReviewCount} items need attention</div>
-				<div class="bc-action">View <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg></div>
-			</a>
-		</div>
-
-		<!-- ═══ BENTO ROW 2: Calories (1fr) + Fitness detail (1fr) ═══ -->
-		<div class="bento-row2 stagger">
-			<a href="/fitness" class="bc bc-emerald">
-				<div class="bc-top">
-					<span class="bc-label">Calories</span>
-					<div class="bc-icon emerald">
-						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
-					</div>
-				</div>
-				<div class="bc-value">{fitnessCalRemaining.toLocaleString()}</div>
-				<div class="bc-desc">remaining today<br><strong>{fitnessCalLogged.toLocaleString()} logged</strong> &middot; {fitnessProtein}g protein &middot; {fitnessCarbs}g carbs</div>
-				<div class="bc-action">Log food <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg></div>
-			</a>
-
-			<div class="bc">
-				<div class="fit-header">
-					<div class="fit-av">Y</div>
-					<div>
-						<div class="fit-name">{userName}</div>
-						<div class="fit-sub">{fitnessCalLogged.toLocaleString()} cal &middot; {fitnessCalRemaining.toLocaleString()} left</div>
-					</div>
-				</div>
-				<div class="fit-bar"><div class="fit-fill" style="width: {fitPercent}%"></div></div>
-				<div class="fit-macros">
-					<div><span class="fm-v">{fitnessProtein}<span class="fm-u">/{fitnessProteinGoal}g</span></span><div class="fm-l">protein</div></div>
-					<div><span class="fm-v">{fitnessCarbs}<span class="fm-u">/{fitnessCarbsGoal}g</span></span><div class="fm-l">carbs</div></div>
-					<div><span class="fm-v">{fitnessFat}<span class="fm-u">/{fitnessFatGoal}g</span></span><div class="fm-l">fat</div></div>
-				</div>
-			</div>
-		</div>
-
-		<!-- ═══ MODULES: Budget detail (7fr) + Issues (3fr) ═══ -->
-		<div class="db-modules">
-			<BudgetModule />
-			<IssuesModule />
-		</div>
-
-	</div>
-</div>
-
-<style>
-	/* ═══ Dashboard — matches React mockup exactly ═══ */
-
-	.db-surface {
-		max-width: 1280px;
-		width: 100%;
-		margin: 0 auto;
-		padding: 0 24px;
-	}
-
-	/* ── Header ── */
-	.db-header {
-		display: flex;
-		align-items: flex-end;
-		justify-content: space-between;
-		gap: 32px;
-		margin-bottom: 28px;
-	}
-
-	.db-date {
-		font-size: 11px;
-		font-weight: 600;
-		color: var(--accent);
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		margin-bottom: 4px;
-	}
-
-	.db-greeting {
-		font-size: 28px;
-		font-weight: 400;
-		letter-spacing: -0.03em;
-		line-height: 1.1;
-		color: var(--text-1);
-		margin: 0;
-	}
-	.db-greeting strong { font-weight: 800; }
-
-	/* ── Task pill ── */
-	.task-pill {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		padding: 8px 14px 8px 10px;
-		border-radius: 999px;
-		background: var(--card);
-		border: 1px solid var(--border);
-		box-shadow: var(--shadow-sm);
-		cursor: pointer;
-		flex-shrink: 0;
-		white-space: nowrap;
-		transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
-		font-family: var(--font);
-	}
-	.task-pill:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
-	.task-pill:active { transform: scale(0.97); }
-
-	.tp-dot {
-		width: 7px;
-		height: 7px;
-		border-radius: 50%;
-		background: var(--accent);
-		flex-shrink: 0;
-		animation: breathe 2.5s ease-in-out infinite;
-	}
-	.tp-dot.tp-overdue { background: var(--error); }
-
-	@keyframes breathe {
-		0%, 100% { opacity: 1; transform: scale(1); }
-		50% { opacity: 0.4; transform: scale(0.85); }
-	}
-
-	.tp-text { font-size: 12px; font-weight: 500; color: var(--text-3); }
-	.tp-text b { color: var(--text-1); font-weight: 600; }
-
-	.tp-arrow { color: var(--text-4); transition: all 0.2s; }
-	.task-pill:hover .tp-arrow { color: var(--accent); transform: translateX(2px); }
-
-	/* ── Bento grids ── */
-	.bento {
-		display: grid;
-		grid-template-columns: 2fr 1fr;
-		gap: 10px;
-		margin-bottom: 10px;
-	}
-	.bento-row2 {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 10px;
-		margin-bottom: 10px;
-	}
-
-	/* ── Bento card ── */
-	.bc {
-		background: var(--card);
-		border: 1px solid var(--border);
-		border-radius: 16px;
-		padding: 22px 24px;
-		box-shadow: var(--shadow-sm);
-		cursor: pointer;
-		position: relative;
-		overflow: hidden;
-		text-decoration: none;
-		color: inherit;
-		display: flex;
-		flex-direction: column;
-		border-top: 2px solid transparent;
-		transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
-	}
-	.bc:hover {
-		transform: translateY(-3px);
-		box-shadow: var(--shadow-md);
-	}
-	.bc:active { transform: scale(0.985); }
-	.bc.bc-emerald:hover { border-top-color: var(--accent); }
-	.bc.bc-rose:hover { border-top-color: var(--error); }
-
-	.bc-top {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 14px;
-	}
-	.bc-label {
-		font-size: 10px;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.12em;
-		color: var(--text-4);
-	}
-	.bc-icon {
-		width: 28px;
-		height: 28px;
-		border-radius: 8px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-	.bc-icon.emerald { background: var(--accent-dim); color: var(--accent); }
-	.bc-icon.rose { background: var(--error-dim); color: var(--error); }
-
-	.bc-value {
-		font-size: 32px;
-		font-weight: 700;
-		font-family: var(--mono);
-		letter-spacing: -0.04em;
-		line-height: 1;
-		color: var(--text-1);
-		margin-bottom: 6px;
-	}
-	.bc-value-sm {
-		font-size: 20px;
-		font-weight: 700;
-		font-family: var(--mono);
-		letter-spacing: -0.03em;
-		color: var(--text-1);
-		margin-bottom: 4px;
-	}
-	.bc-desc {
-		font-size: 13px;
-		color: var(--text-3);
-		line-height: 1.5;
-	}
-	.bc-desc :global(strong) { color: var(--text-2); font-weight: 500; }
-
-	.bc-action {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		font-size: 11px;
-		font-weight: 600;
-		color: var(--accent);
-		margin-top: 10px;
-		letter-spacing: 0.02em;
-		transition: gap 0.2s;
-	}
-	.bc:hover .bc-action { gap: 7px; }
-
-	/* ── Fitness card (inline) ── */
-	.fit-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
-	.fit-av {
-		width: 34px; height: 34px; border-radius: 50%;
-		background: var(--accent-dim); color: var(--accent);
-		display: flex; align-items: center; justify-content: center;
-		font-size: 12px; font-weight: 700;
-	}
-	.fit-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
-	.fit-sub { font-size: 11px; color: var(--text-4); margin-top: 1px; }
-	.fit-bar {
-		height: 4px; background: var(--card-hover); border-radius: 2px;
-		margin-bottom: 14px; overflow: hidden;
-	}
-	.fit-fill {
-		height: 100%; border-radius: 2px; background: var(--accent);
-		transition: width 1s cubic-bezier(0.16,1,0.3,1);
-	}
-	.fit-macros { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
-	.fm-v { font-size: 14px; font-weight: 600; font-family: var(--mono); color: var(--text-1); }
-	.fm-u { font-size: 10px; color: var(--text-4); }
-	.fm-l { font-size: 10px; color: var(--text-4); margin-top: 1px; }
-
-	/* ── Modules ── */
-	.db-modules {
-		display: grid;
-		grid-template-columns: 7fr 3fr;
-		gap: 10px;
-		align-items: start;
-	}
-	.db-modules > :global(.module) {
-		padding: 22px 24px;
-		border-radius: 16px;
-		min-width: 0;
-	}
-
-	/* ── Mobile ── */
-	@media (max-width: 900px) {
-		.db-header { flex-direction: column; align-items: flex-start; gap: 12px; }
-		.db-greeting { font-size: 22px; }
-		.task-pill { width: 100%; }
-	}
-
-	@media (max-width: 768px) {
-		.db-surface { padding: 0 16px; }
-		.bento, .bento-row2, .db-modules { grid-template-columns: 1fr; }
-		.bento > *, .bento-row2 > *, .db-modules > :global(*) { min-width: 0; max-width: 100%; }
-		.bc-value { font-size: 24px; }
-	}
-</style>
+{#if useAtelierShell}
+  <AtelierDashboardPage />
+{:else}
+  <LegacyDashboardPage />
+{/if}
diff --git a/frontend-v2/src/routes/(app)/fitness/+page.svelte b/frontend-v2/src/routes/(app)/fitness/+page.svelte
index 0243911..cbf79d1 100644
--- a/frontend-v2/src/routes/(app)/fitness/+page.svelte
+++ b/frontend-v2/src/routes/(app)/fitness/+page.svelte
@@ -1,1605 +1,12 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+	import AtelierFitnessPage from '$lib/pages/fitness/AtelierFitnessPage.svelte';
+	import LegacyFitnessPage from '$lib/pages/fitness/LegacyFitnessPage.svelte';
 
-  type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack';
-  type FitnessTab = 'log' | 'foods' | 'templates';
-
-  interface FoodEntry {
-    id: string;
-    name: string;
-    serving: string;
-    calories: number;
-    protein: number;
-    carbs: number;
-    fat: number;
-    method: string;
-    image?: string;
-    note?: string;
-    meal: MealType;
-    rawQty: number;
-    rawUnit: string;
-  }
-
-  interface FoodItem {
-    id: string;
-    name: string;
-    info: string;
-    calories: number;
-    favorite?: boolean;
-  }
-
-  interface Template {
-    id: string;
-    name: string;
-    calories: number;
-    items: number;
-    meal: string;
-  }
-
-  const now = new Date();
-  const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
-
-  let activeTab = $state<FitnessTab>('log');
-  let selectedDate = $state(todayStr);
-  let expandedMeals = $state<Set<string>>(new Set(['breakfast', 'lunch', 'dinner', 'snack']));
-  let foodSearch = $state('');
-  let highlightTemplate = $state('');
-  let fabOpen = $state(false);
-  let loading = $state(true);
-  let foodsLoading = $state(false);
-  let templatesLoading = $state(false);
-
-  let entries = $state<FoodEntry[]>([]);
-  let goal = $state({ calories: 2000, protein: 150, carbs: 200, fat: 65 });
-  let foods = $state<FoodItem[]>([]);
-  let templates = $state<Template[]>([]);
-
-  // Map backend entry to UI entry
-  function mapEntry(e: any): FoodEntry {
-    return {
-      id: e.id,
-      name: e.snapshot_food_name || 'Unknown',
-      serving: e.serving_description || e.snapshot_serving_label || `${e.quantity || 1} ${e.unit || 'serving'}`,
-      calories: Math.round(e.snapshot_calories || 0),
-      protein: Math.round(e.snapshot_protein || 0),
-      carbs: Math.round(e.snapshot_carbs || 0),
-      fat: Math.round(e.snapshot_fat || 0),
-      method: e.entry_method || 'manual',
-      image: e.food_image_path,
-      note: e.note,
-      meal: (e.meal_type || 'snack') as MealType,
-      rawQty: e.quantity || 1,
-      rawUnit: e.unit || 'serving',
-    };
-  }
-
-  // Map backend food to UI food (handles both /foods and /foods/recent shapes)
-  function mapFood(f: any): FoodItem {
-    const id = f.id || f.food_id || '';
-    const name = f.name || f.snapshot_food_name || 'Unknown';
-    const brand = f.brand ? `${f.brand} · ` : '';
-    const unit = f.base_unit === '100g' ? '100g' : (f.servings?.[0]?.label || f.base_unit || 'serving');
-    return {
-      id,
-      name,
-      info: `${brand}${unit}`,
-      calories: Math.round(f.calories_per_base || 0),
-      favorite: f.is_favorite || false,
-    };
-  }
-
-  // Map backend template to UI template
-  function mapTemplate(t: any): Template {
-    const items = t.items || [];
-    const totalCal = items.reduce((s: number, i: any) => s + (i.snapshot_calories || 0) * (i.quantity || 1), 0);
-    return {
-      id: t.id,
-      name: t.name,
-      calories: Math.round(totalCal),
-      items: items.length,
-      meal: t.meal_type || 'snack',
-    };
-  }
-
-  async function loadDayData() {
-    loading = true;
-    try {
-      const [entriesRes, goalsRes] = await Promise.all([
-        fetch(`/api/fitness/entries?date=${selectedDate}`, { credentials: 'include' }),
-        fetch(`/api/fitness/goals/for-date?date=${selectedDate}`, { credentials: 'include' }),
-      ]);
-      if (entriesRes.ok) {
-        const raw = await entriesRes.json();
-        entries = (Array.isArray(raw) ? raw : []).map(mapEntry);
-      } else {
-        entries = [];
-      }
-      if (goalsRes.ok) {
-        const g = await goalsRes.json();
-        goal = { calories: g.calories || 2000, protein: g.protein || 150, carbs: g.carbs || 200, fat: g.fat || 65 };
-      }
-    } catch { /* silent */ }
-    loading = false;
-  }
-
-  async function loadFoods(query?: string) {
-    foodsLoading = true;
-    try {
-      const url = query
-        ? `/api/fitness/foods/search?q=${encodeURIComponent(query)}&limit=30`
-        : `/api/fitness/foods?limit=100`;
-      const res = await fetch(url, { credentials: 'include' });
-      if (res.ok) {
-        const raw = await res.json();
-        foods = (Array.isArray(raw) ? raw : []).map(mapFood);
-      }
-    } catch { /* silent */ }
-    foodsLoading = false;
-  }
-
-  async function loadTemplates() {
-    templatesLoading = true;
-    try {
-      const res = await fetch('/api/fitness/templates', { credentials: 'include' });
-      if (res.ok) {
-        const raw = await res.json();
-        templates = (Array.isArray(raw) ? raw : []).map(mapTemplate);
-      }
-    } catch { /* silent */ }
-    templatesLoading = false;
-  }
-
-  let expandedEntry = $state<string | null>(null);
-
-  async function deleteEntry(id: string) {
-    expandedEntry = null;
-    entries = entries.filter(e => e.id !== id);
-    try {
-      await fetch(`/api/fitness/entries/${id}`, { method: 'DELETE', credentials: 'include' });
-    } catch {
-      await loadDayData();
-    }
-  }
-
-  let editQtyValue = $state('');
-
-  function toggleEntry(id: string) {
-    if (expandedEntry === id) {
-      expandedEntry = null;
-    } else {
-      expandedEntry = id;
-      const entry = entries.find(e => e.id === id);
-      editQtyValue = entry ? String(entry.rawQty) : '1';
-    }
-  }
-
-  async function updateEntryQty(id: string) {
-    const newQty = parseFloat(editQtyValue);
-    if (!newQty || newQty <= 0) return;
-    expandedEntry = null;
-    try {
-      const res = await fetch(`/api/fitness/entries/${id}`, {
-        method: 'PATCH',
-        credentials: 'include',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ quantity: newQty }),
-      });
-      if (res.ok) {
-        await loadDayData();
-      }
-    } catch { /* silent */ }
-  }
-
-  async function logTemplate(tpl: Template) {
-    try {
-      const res = await fetch(`/api/fitness/templates/${tpl.id}/log`, {
-        method: 'POST',
-        credentials: 'include',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ meal_type: tpl.meal, entry_date: selectedDate }),
-      });
-      if (res.ok) {
-        activeTab = 'log';
-        await loadDayData();
-      }
-    } catch { /* silent */ }
-  }
-
-  // ── AI Food Resolve (multi-item) ──
-  interface ResolvedItem {
-    result: any;
-    name: string;
-    qty: number;
-    unit: string;
-    calories: number;
-    protein: number;
-    carbs: number;
-    fat: number;
-  }
-
-  let resolveInput = $state('');
-  let resolveMeal = $state<MealType>('snack');
-  let resolving = $state(false);
-  let resolvedItems = $state<ResolvedItem[]>([]);
-  let resolveError = $state('');
-  let confirmLogging = $state(false);
-
-  function guessCurrentMeal(): MealType {
-    const h = new Date().getHours();
-    if (h >= 6 && h < 11) return 'breakfast';
-    if (h >= 11 && h < 15) return 'lunch';
-    if (h >= 17 && h < 21) return 'dinner';
-    return 'snack';
-  }
-
-  async function splitInputItems(input: string): Promise<string[]> {
-    // Use AI to split multi-item input into individual food items
-    try {
-      const res = await fetch('/api/fitness/foods/split', {
-        method: 'POST',
-        credentials: 'include',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ phrase: input }),
-      });
-      if (res.ok) {
-        const data = await res.json();
-        if (data.items?.length > 0) return data.items;
-      }
-    } catch { /* fallback below */ }
-    // Fallback: comma split
-    return input.split(/,/).map(s => s.trim()).filter(s => s.length > 0);
-  }
-
-  function resolveToItem(r: any): ResolvedItem {
-    const qty = r.parsed?.quantity || 1;
-    const food = r.matched_food;
-    let cal = 0, pro = 0, carb = 0, f = 0;
-    if (food) {
-      cal = (food.calories_per_base || 0) * qty;
-      pro = (food.protein_per_base || 0) * qty;
-      carb = (food.carbs_per_base || 0) * qty;
-      f = (food.fat_per_base || 0) * qty;
-    } else if (r.ai_estimate) {
-      cal = (r.ai_estimate.calories_per_base || 0) * qty;
-      pro = (r.ai_estimate.protein_per_base || 0) * qty;
-      carb = (r.ai_estimate.carbs_per_base || 0) * qty;
-      f = (r.ai_estimate.fat_per_base || 0) * qty;
-    } else if (r.resolution_type === 'quick_add') {
-      cal = r.parsed?.quantity || 0;
-    }
-    const name = r.snapshot_name_override || food?.name || r.ai_estimate?.food_name || r.raw_text || 'Unknown';
-    return {
-      result: r,
-      name,
-      qty: Math.round(qty * 10) / 10,
-      unit: r.parsed?.unit || 'serving',
-      calories: Math.round(cal),
-      protein: Math.round(pro),
-      carbs: Math.round(carb),
-      fat: Math.round(f),
-    };
-  }
-
-  async function submitResolve() {
-    const phrase = resolveInput.trim();
-    if (!phrase) return;
-    resolving = true;
-    resolveError = '';
-    resolvedItems = [];
-    resolveMeal = guessCurrentMeal();
-
-    const parts = await splitInputItems(phrase);
-
-    try {
-      const results = await Promise.all(parts.map(async (part) => {
-        const res = await fetch('/api/fitness/foods/resolve', {
-          method: 'POST',
-          credentials: 'include',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ raw_phrase: part, meal_type: resolveMeal, entry_date: selectedDate }),
-        });
-        if (!res.ok) {
-          if (res.status === 401) throw new Error('Not connected — connect fitness in Settings');
-          throw new Error(`Failed to resolve "${part}" (${res.status})`);
-        }
-        return res.json();
-      }));
-      resolvedItems = results.map(resolveToItem);
-    } catch (e: any) {
-      resolveError = e?.message || 'Network error';
-    }
-    resolving = false;
-  }
-
-  function updateItemQty(index: number, newQty: number) {
-    if (newQty <= 0) return;
-    const item = resolvedItems[index];
-    const r = item.result;
-    const food = r.matched_food;
-    const base = food || r.ai_estimate;
-    if (!base) return;
-    resolvedItems[index] = {
-      ...item,
-      qty: Math.round(newQty * 10) / 10,
-      calories: Math.round((base.calories_per_base || 0) * newQty),
-      protein: Math.round((base.protein_per_base || 0) * newQty),
-      carbs: Math.round((base.carbs_per_base || 0) * newQty),
-      fat: Math.round((base.fat_per_base || 0) * newQty),
-    };
-  }
-
-  function removeItem(index: number) {
-    resolvedItems = resolvedItems.filter((_, i) => i !== index);
-    if (resolvedItems.length === 0) cancelResolve();
-  }
-
-  const resolveTotalCal = $derived(resolvedItems.reduce((s, i) => s + i.calories, 0));
-
-  async function confirmResolve() {
-    if (resolvedItems.length === 0) return;
-    confirmLogging = true;
-    try {
-      for (const item of resolvedItems) {
-        const r = item.result;
-        let body: any;
-        if (r.resolution_type === 'quick_add' && !r.matched_food) {
-          body = {
-            entry_type: 'quick_add',
-            snapshot_food_name: r.raw_text || 'Quick add',
-            snapshot_calories: item.calories,
-            meal_type: resolveMeal,
-            entry_date: selectedDate,
-            source: 'web',
-            raw_text: r.raw_text,
-          };
-        } else if (r.matched_food) {
-          body = {
-            food_id: r.matched_food.id,
-            quantity: item.qty,
-            unit: item.unit,
-            meal_type: resolveMeal,
-            entry_date: selectedDate,
-            entry_method: r.resolution_type === 'ai_estimated' ? 'ai_label' : 'search',
-            source: 'web',
-            raw_text: r.raw_text,
-            confidence_score: r.confidence,
-            note: r.note || undefined,
-            snapshot_food_name_override: r.snapshot_name_override || undefined,
-          };
-        }
-        if (body) {
-          await fetch('/api/fitness/entries', {
-            method: 'POST',
-            credentials: 'include',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(body),
-          });
-        }
-      }
-      resolvedItems = [];
-      resolveInput = '';
-      await loadDayData();
-    } catch { /* silent */ }
-    confirmLogging = false;
-  }
-
-  function cancelResolve() {
-    resolvedItems = [];
-    resolveError = '';
-  }
-
-  // ── Food Edit/Delete ──
-  let editingFood = $state<any>(null);
-  let editFoodName = $state('');
-  let editFoodCal = $state('');
-  let editFoodProtein = $state('');
-  let editFoodCarbs = $state('');
-  let editFoodFat = $state('');
-  let editFoodUnit = $state('');
-  let savingFood = $state(false);
-
-  function openFoodEdit(food: FoodItem) {
-    editingFood = food;
-    editFoodName = food.name;
-    editFoodCal = String(food.calories);
-    editFoodProtein = '';
-    editFoodCarbs = '';
-    editFoodFat = '';
-    editFoodUnit = food.info.split('·').pop()?.trim() || 'serving';
-    // Fetch full food data for macros
-    fetch(`/api/fitness/foods/${food.id}`, { credentials: 'include' })
-      .then(r => r.ok ? r.json() : null)
-      .then(data => {
-        if (data) {
-          editFoodProtein = String(Math.round(data.protein_per_base || 0));
-          editFoodCarbs = String(Math.round(data.carbs_per_base || 0));
-          editFoodFat = String(Math.round(data.fat_per_base || 0));
-          editFoodUnit = data.base_unit || 'serving';
-        }
-      })
-      .catch(() => {});
-  }
-
-  function closeFoodEdit() {
-    editingFood = null;
-  }
-
-  async function saveFoodEdit() {
-    if (!editingFood) return;
-    savingFood = true;
-    try {
-      await fetch(`/api/fitness/foods/${editingFood.id}`, {
-        method: 'PATCH',
-        credentials: 'include',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          name: editFoodName.trim(),
-          calories_per_base: parseFloat(editFoodCal) || 0,
-          protein_per_base: parseFloat(editFoodProtein) || 0,
-          carbs_per_base: parseFloat(editFoodCarbs) || 0,
-          fat_per_base: parseFloat(editFoodFat) || 0,
-        }),
-      });
-      editingFood = null;
-      await loadFoods(foodSearch || undefined);
-    } catch { /* silent */ }
-    savingFood = false;
-  }
-
-  async function deleteFood() {
-    if (!editingFood) return;
-    savingFood = true;
-    try {
-      await fetch(`/api/fitness/foods/${editingFood.id}`, {
-        method: 'DELETE',
-        credentials: 'include',
-      });
-      editingFood = null;
-      await loadFoods(foodSearch || undefined);
-    } catch { /* silent */ }
-    savingFood = false;
-  }
-
-  // Reload day data when date changes
-  $effect(() => {
-    selectedDate; // track
-    loadDayData();
-  });
-
-  // Reload foods when search changes (debounced)
-  let foodSearchTimeout: ReturnType<typeof setTimeout>;
-  $effect(() => {
-    const q = foodSearch;
-    clearTimeout(foodSearchTimeout);
-    foodSearchTimeout = setTimeout(() => loadFoods(q || undefined), q ? 300 : 0);
-  });
-
-  onMount(() => {
-    loadTemplates();
-  });
-
-  function jumpToTemplates() {
-    activeTab = 'templates';
-    if (rankedTemplates.length > 0) {
-      highlightTemplate = rankedTemplates[0].name;
-      setTimeout(() => { highlightTemplate = ''; }, 2000);
-    }
-  }
-
-  const filteredFoods = $derived(foods);
-
-  const totals = $derived({
-    calories: entries.reduce((s, e) => s + e.calories, 0),
-    protein: entries.reduce((s, e) => s + e.protein, 0),
-    carbs: entries.reduce((s, e) => s + e.carbs, 0),
-    fat: entries.reduce((s, e) => s + e.fat, 0),
-    count: entries.length
-  });
-
-  const caloriesRemaining = $derived(goal.calories > 0 ? Math.max(goal.calories - totals.calories, 0) : 0);
-  const caloriesPercent = $derived(goal.calories > 0 ? Math.round((totals.calories / goal.calories) * 100) : 0);
-  const isToday = $derived(selectedDate === todayStr);
-
-  function entriesByMeal(meal: MealType) { return entries.filter(e => e.meal === meal); }
-  function mealCalories(meal: MealType) { return entriesByMeal(meal).reduce((s, e) => s + e.calories, 0); }
-  function mealProtein(meal: MealType) { return entriesByMeal(meal).reduce((s, e) => s + e.protein, 0); }
-
-  function toggleMeal(meal: string) {
-    const next = new Set(expandedMeals);
-    if (next.has(meal)) next.delete(meal); else next.add(meal);
-    expandedMeals = next;
-  }
-
-  function shiftDate(days: number) {
-    const d = new Date(selectedDate + 'T00:00:00');
-    d.setDate(d.getDate() + days);
-    selectedDate = d.toISOString().split('T')[0];
-  }
-
-  function formatDate(date: string) {
-    const d = new Date(date + 'T00:00:00');
-    return d.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' });
-  }
-
-  // Action-oriented coaching based on progress
-  function coachMessage(remaining: number, percent: number): string {
-    if (percent >= 100) return 'Done for the day — you hit your goal';
-    if (percent >= 90) return 'Almost done — keep it light';
-    if (percent >= 75) return 'Finish strong — ' + remaining.toLocaleString() + ' cal left';
-    if (percent >= 50) return 'You\'ve got room for a solid meal';
-    if (percent >= 25) return 'On track — plan your next meal';
-    if (percent > 0) return 'Just getting started — ' + remaining.toLocaleString() + ' cal to work with';
-    return 'Start logging to see your progress';
-  }
-
-  // Coaching focus — what the user needs most right now
-  type CoachFocus = 'protein' | 'low_carb' | 'low_fat' | 'light' | 'balanced';
-
-  function getCoachFocus(t: typeof totals, g: typeof goal, calLeft: number): CoachFocus {
-    const proteinPct = t.protein / g.protein;
-    const carbsPct = t.carbs / g.carbs;
-    const fatPct = t.fat / g.fat;
-    if (calLeft < 300) return 'light';
-    if (proteinPct < 0.7) return 'protein';
-    if (carbsPct > 0.8 && proteinPct < 0.8) return 'low_carb';
-    if (fatPct > 0.8) return 'low_fat';
-    return 'balanced';
-  }
-
-  const coachFocus = $derived(getCoachFocus(totals, goal, caloriesRemaining));
-
-  // "Best next move" — realistic meal suggestions
-  function bestNextMove(t: typeof totals, g: typeof goal, calRemaining: number): string {
-    if (calRemaining <= 0) return '';
-
-    const proteinPct = t.protein / g.protein;
-    const carbsPct = t.carbs / g.carbs;
-    const fatPct = t.fat / g.fat;
-    const proteinLeft = Math.max(g.protein - t.protein, 0);
-
-    // Protein-focused — use realistic meal combos
-    if (proteinPct < 0.4 && proteinLeft > 40) {
-      const lo = Math.round(proteinLeft * 0.3);
-      const hi = Math.round(proteinLeft * 0.45);
-      return `Best next: ~${lo}–${hi}g protein (chicken + rice, 3 eggs, or a shake)`;
-    }
-    if (proteinPct < 0.6 && proteinLeft > 25) {
-      const lo = Math.round(proteinLeft * 0.35);
-      const hi = Math.round(proteinLeft * 0.5);
-      return `Best next: ~${lo}–${hi}g protein (chicken, Greek yogurt, or protein shake)`;
-    }
-    if (proteinPct < 0.8 && proteinLeft > 10) {
-      return `Best next: ~${Math.round(proteinLeft * 0.6)}–${proteinLeft}g protein (eggs, yogurt, or tuna)`;
-    }
-
-    // Carbs running high + still need protein
-    if (carbsPct > 0.8 && proteinPct < 0.75) {
-      return 'Best next: skip the carbs — chicken salad, eggs, or a protein shake';
-    }
-
-    // Fat running high
-    if (fatPct > 0.85) {
-      return 'Best next: lean protein + rice or sweet potato — skip the oils';
-    }
-    if (fatPct > 0.7 && carbsPct < 0.5) {
-      return 'Best next: oatmeal, rice bowl, or pasta with grilled chicken';
-    }
-
-    // Low calories remaining
-    if (calRemaining < 200) {
-      return 'Best next: something light — yogurt, fruit, or veggies';
-    }
-    if (calRemaining < 400) {
-      return 'Best next: small meal — salad with chicken, or a shake with fruit';
-    }
-
-    // Everything balanced
-    return 'Best next: balanced plate — protein, carbs, and veggies';
-  }
-
-  // Macro guidance — considers both target gap and calories budget
-  function macroInstruction(macro: 'protein' | 'carbs' | 'fat', current: number, target: number, calLeft: number): string {
-    const pct = Math.round((current / target) * 100);
-    const left = Math.max(target - current, 0);
-    if (pct >= 100) return 'On target';
-
-    const budgetTight = calLeft < 400;
-
-    if (macro === 'protein') {
-      if (pct < 50 && !budgetTight) return 'Prioritize protein';
-      if (pct < 50 && budgetTight) return 'Add lean protein';
-      if (pct < 80) return 'Add protein';
-      return 'Almost there';
-    }
-    if (macro === 'carbs') {
-      if (pct >= 85) return 'Ease off carbs';
-      if (pct >= 70) return 'Watch carbs';
-      return 'Carbs on track';
-    }
-    // fat
-    if (pct >= 85) return 'Keep fats minimal';
-    if (pct >= 70) return 'Keep fats light';
-    return 'Fats on track';
-  }
-
-  function macroLeft(current: number, target: number): string {
-    const left = Math.max(target - current, 0);
-    if (left === 0) return '';
-    return `${left}g left`;
-  }
-
-  // Meal weight label — contextual per meal type
-  function mealWeight(mealCal: number, dailyGoal: number, meal: MealType): string {
-    if (mealCal === 0) return '';
-    const pct = Math.round((mealCal / dailyGoal) * 100);
-
-    if (meal === 'snack') {
-      // Snacks: bias toward Light/Snack
-      if (pct >= 25) return 'Heavy';
-      if (pct >= 12) return 'Moderate';
-      return 'Light';
-    }
-    if (meal === 'breakfast') {
-      // Breakfast: cap at Moderate
-      if (pct >= 30) return 'Moderate';
-      if (pct >= 12) return 'Light';
-      return 'Snack';
-    }
-    // Lunch / Dinner: normal scale
-    if (pct >= 35) return 'Heavy';
-    if (pct >= 20) return 'Moderate';
-    if (pct >= 8) return 'Light';
-    return 'Snack';
-  }
-
-  // Template scoring — decisive ranking aligned with coaching focus
-  function templateScore(tpl: Template, t: typeof totals, g: typeof goal, calLeft: number, focus: CoachFocus): number {
-    let score = 0;
-    const hour = new Date().getHours();
-    const isProteinRich = /protein|chicken|egg|salmon/i.test(tpl.name);
-    const isCarbHeavy = /oatmeal|rice|pasta/i.test(tpl.name);
-
-    // ── Calorie fit (highest weight) ──
-    if (calLeft > 0) {
-      if (tpl.calories <= calLeft) {
-        const ratio = tpl.calories / calLeft;
-        // Perfect fit: within ±15%
-        if (ratio >= 0.85 && ratio <= 1.0) score += 50;
-        // Good fit: within ±30%
-        else if (ratio >= 0.7) score += 35;
-        // Usable: under budget but not close
-        else if (ratio >= 0.4) score += 15;
-      } else {
-        // Over remaining — penalize harder
-        const overBy = (tpl.calories - calLeft) / calLeft;
-        score -= overBy > 0.3 ? 30 : 15;
-      }
-    }
-
-    // ── Coaching alignment (reinforce "Best next" direction) ──
-    if (focus === 'protein' && isProteinRich) score += 35;
-    if (focus === 'protein' && !isProteinRich) score -= 5;
-    if (focus === 'low_carb' && isCarbHeavy) score -= 20;
-    if (focus === 'low_carb' && isProteinRich) score += 20;
-    if (focus === 'low_fat' && isProteinRich) score += 15;
-    if (focus === 'light' && tpl.calories < 350) score += 20;
-    if (focus === 'light' && tpl.calories > 500) score -= 20;
-
-    // ── Time-of-day ──
-    if (tpl.meal === 'breakfast' && hour >= 6 && hour < 11) score += 15;
-    if (tpl.meal === 'lunch' && hour >= 11 && hour < 15) score += 15;
-    if (tpl.meal === 'dinner' && hour >= 17 && hour < 21) score += 15;
-    if (tpl.meal === 'snack' && hour >= 14 && hour < 17) score += 10;
-
-    // ── Macro penalties ──
-    const carbsPct = t.carbs / g.carbs;
-    const fatPct = t.fat / g.fat;
-    if (carbsPct > 0.85 && isCarbHeavy) score -= 15;
-    if (fatPct > 0.85) score -= 5;
-
-    return score;
-  }
-
-  // Sorted templates by score (descending)
-  const rankedTemplates = $derived(
-    [...templates]
-      .map(tpl => ({ tpl, score: templateScore(tpl, totals, goal, caloriesRemaining, coachFocus) }))
-      .sort((a, b) => b.score - a.score)
-      .map(item => item.tpl)
-  );
-
-  // Template hints — selective, max 3 total, top-ranked only
-  function templateHints(ranked: Template[], t: typeof totals, g: typeof goal, calLeft: number): Map<string, string> {
-    const hints = new Map<string, string>();
-    const hour = new Date().getHours();
-    const proteinPct = t.protein / g.protein;
-    const proteinPhrases = ['High protein option', 'Great for protein', 'Helps close your protein gap'];
-    let proteinIdx = 0;
-    const MAX_HINTS = 3;
-
-    // Only consider top-ranked templates for hints
-    const candidates = ranked.slice(0, Math.min(ranked.length, 5));
-
-    for (const tpl of candidates) {
-      if (hints.size >= MAX_HINTS) break;
-
-      // Calorie fit — tight ±15%
-      if (calLeft > 0 && tpl.calories <= calLeft) {
-        const ratio = tpl.calories / calLeft;
-        if (ratio >= 0.85 && ratio <= 1.0) {
-          hints.set(tpl.name, 'Fits your remaining calories');
-          continue;
-        }
-      }
-
-      // Protein hint — varied phrasing, max 2
-      const isProteinRich = /protein|chicken|egg|salmon/i.test(tpl.name);
-      if (isProteinRich && proteinPct < 0.7 && proteinIdx < 2) {
-        hints.set(tpl.name, proteinPhrases[proteinIdx]);
-        proteinIdx++;
-        continue;
-      }
-
-      // Time-of-day — max 1
-      if (!Array.from(hints.values()).some(h => h.startsWith('Good '))) {
-        if (tpl.meal === 'breakfast' && hour >= 6 && hour < 11) { hints.set(tpl.name, 'Good for this morning'); continue; }
-        if (tpl.meal === 'lunch' && hour >= 11 && hour < 15) { hints.set(tpl.name, 'Good for lunch right now'); continue; }
-        if (tpl.meal === 'dinner' && hour >= 17 && hour < 21) { hints.set(tpl.name, 'Good dinner choice'); continue; }
-        if (tpl.meal === 'snack' && hour >= 14 && hour < 17) { hints.set(tpl.name, 'Good afternoon pick-me-up'); continue; }
-      }
-    }
-
-    return hints;
-  }
-
-  const templateHintMap = $derived(templateHints(rankedTemplates, totals, goal, caloriesRemaining));
-
-  const mealTypes: MealType[] = ['breakfast', 'lunch', 'dinner', 'snack'];
+	let { data } = $props();
 </script>
 
-<div class="page">
-  <div class="app-surface">
-    <!-- Header -->
-    <div class="page-header">
-      <div class="page-title">FITNESS</div>
-      <div class="page-date">{#if isToday}Today{:else}{formatDate(selectedDate)}{/if}</div>
-    </div>
-
-    <!-- Top tabs (subtle) -->
-    <div class="top-tabs">
-      <button class="top-tab" class:active={activeTab === 'log'} onclick={() => activeTab = 'log'}>Food Log</button>
-      <button class="top-tab" class:active={activeTab === 'foods'} onclick={() => activeTab = 'foods'}>Food Library</button>
-      <button class="top-tab" class:active={activeTab === 'templates'} onclick={() => activeTab = 'templates'}>Quick Meals</button>
-    </div>
-
-    <!-- ═══════════════════════════════ -->
-    <!-- TAB: Food Log                   -->
-    <!-- ═══════════════════════════════ -->
-    {#if activeTab === 'log'}
-
-      <!-- Date nav -->
-      <div class="date-nav">
-        <button class="btn-icon" onclick={() => shiftDate(-1)} aria-label="Previous day">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
-        </button>
-        <input type="date" class="date-input" bind:value={selectedDate} />
-        <button class="btn-icon" onclick={() => shiftDate(1)} aria-label="Next day">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
-        </button>
-        {#if !isToday}
-          <button class="today-btn" onclick={() => selectedDate = todayStr}>Today</button>
-        {/if}
-      </div>
-
-      <!-- Calorie hero -->
-      <div class="calorie-card">
-        <div class="calorie-eaten">
-          <span class="calorie-number">{totals.calories.toLocaleString()}</span>
-          <span class="calorie-of">/ {goal.calories.toLocaleString()}</span>
-        </div>
-        <div class="progress-bar">
-          <div class="progress-fill" style="width:{Math.min(caloriesPercent, 100)}%"></div>
-        </div>
-        <div class="calorie-coach">{coachMessage(caloriesRemaining, caloriesPercent)}</div>
-        {#if caloriesRemaining > 0}
-          {@const hint = bestNextMove(totals, goal, caloriesRemaining)}
-          {#if hint}
-            <button class="calorie-next" onclick={jumpToTemplates}>{hint} <span class="next-arrow">→</span></button>
-          {/if}
-        {/if}
-      </div>
-
-      <!-- AI food input -->
-      <div class="resolve-bar">
-        <input
-          type="text"
-          class="resolve-input"
-          placeholder="Describe your meal... (e.g. 2 eggs and toast)"
-          bind:value={resolveInput}
-          onkeydown={(e) => { if (e.key === 'Enter') submitResolve(); }}
-          disabled={resolving}
-        />
-        <button class="resolve-submit" onclick={submitResolve} disabled={resolving || !resolveInput.trim()}>
-          {#if resolving}
-            <span class="resolve-spinner"></span>
-          {:else}
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
-          {/if}
-        </button>
-      </div>
-      {#if resolveError}
-        <div class="resolve-error">{resolveError}</div>
-      {/if}
-
-      <!-- Macros — inline row, not cards -->
-      <div class="macro-row">
-        <div class="macro-item">
-          <div class="macro-bar-wrap">
-            <div class="macro-bar-fill protein" style="width:{Math.min(totals.protein / goal.protein * 100, 100)}%"></div>
-          </div>
-          <div class="macro-label">
-            <span class="macro-current">{totals.protein}g</span>
-            <span class="macro-name">Protein</span>
-          </div>
-          <div class="macro-guidance">
-            <div class="macro-instruction">{macroInstruction('protein', totals.protein, goal.protein, caloriesRemaining)}</div>
-            <div class="macro-left">{macroLeft(totals.protein, goal.protein)}</div>
-          </div>
-        </div>
-        <div class="macro-item">
-          <div class="macro-bar-wrap">
-            <div class="macro-bar-fill carbs" style="width:{Math.min(totals.carbs / goal.carbs * 100, 100)}%"></div>
-          </div>
-          <div class="macro-label">
-            <span class="macro-current">{totals.carbs}g</span>
-            <span class="macro-name">Carbs</span>
-          </div>
-          <div class="macro-guidance">
-            <div class="macro-instruction">{macroInstruction('carbs', totals.carbs, goal.carbs, caloriesRemaining)}</div>
-            <div class="macro-left">{macroLeft(totals.carbs, goal.carbs)}</div>
-          </div>
-        </div>
-        <div class="macro-item">
-          <div class="macro-bar-wrap">
-            <div class="macro-bar-fill fat" style="width:{Math.min(totals.fat / goal.fat * 100, 100)}%"></div>
-          </div>
-          <div class="macro-label">
-            <span class="macro-current">{totals.fat}g</span>
-            <span class="macro-name">Fat</span>
-          </div>
-          <div class="macro-guidance">
-            <div class="macro-instruction">{macroInstruction('fat', totals.fat, goal.fat, caloriesRemaining)}</div>
-            <div class="macro-left">{macroLeft(totals.fat, goal.fat)}</div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Meals label -->
-      <div class="meals-divider">
-        <span class="meals-label">Meals</span>
-        <span class="meals-count">{totals.count} entries</span>
-      </div>
-
-      <!-- Meal sections -->
-      {#each mealTypes as meal, i}
-        {@const mealEntries = entriesByMeal(meal)}
-        {@const mCal = mealCalories(meal)}
-        {@const mPro = mealProtein(meal)}
-        {@const expanded = expandedMeals.has(meal)}
-        {@const weight = mealWeight(mCal, goal.calories, meal)}
-        {@const mealPct = mCal > 0 ? Math.round((mCal / goal.calories) * 100) : 0}
-
-        <div class="meal-section">
-          <button class="meal-header" onclick={() => toggleMeal(meal)}>
-            <div class="meal-number" class:has-entries={mealEntries.length > 0}>{i + 1}</div>
-            <div class="meal-info">
-              <div class="meal-top">
-                <span class="meal-name">{meal}</span>
-                {#if weight}
-                  <span class="meal-weight {weight.toLowerCase()}">{weight}</span>
-                {/if}
-              </div>
-              {#if mCal > 0}
-                <span class="meal-stats">{Math.round(mCal)} cal · {mealPct}% of daily · {Math.round(mPro)}g protein</span>
-              {:else}
-                <span class="meal-stats empty">No entries yet</span>
-              {/if}
-            </div>
-            <svg class="meal-chevron" class:expanded viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
-          </button>
-
-          {#if expanded}
-            <div class="meal-entries">
-              {#if mealEntries.length > 0}
-                {#each mealEntries as entry}
-                  <div class="entry-wrap">
-                    <!-- svelte-ignore a11y_no_static_element_interactions -->
-                    <div class="entry-row" onclick={() => toggleEntry(entry.id)}>
-                      <div class="entry-info">
-                        <div class="entry-name">
-                          {entry.name}
-                          {#if entry.method === 'ai_plate' || entry.method === 'ai_label'}
-                            <span class="entry-badge ai">AI</span>
-                          {/if}
-                          {#if entry.method === 'quick_add'}
-                            <span class="entry-badge quick">quick</span>
-                          {/if}
-                        </div>
-                        <div class="entry-serving">{entry.serving}</div>
-                        {#if entry.note}
-                          <div class="entry-note">{entry.note}</div>
-                        {/if}
-                      </div>
-                      <div class="entry-cals">
-                        <span class="entry-cal-value">{entry.calories}</span>
-                        <span class="entry-cal-label">cal</span>
-                      </div>
-                    </div>
-                    {#if expandedEntry === entry.id}
-                      <div class="entry-actions">
-                        <div class="entry-qty-control">
-                          <input
-                            type="number"
-                            class="entry-qty-input"
-                            bind:value={editQtyValue}
-                            onkeydown={(e) => { if (e.key === 'Enter') updateEntryQty(entry.id); }}
-                            step="0.5"
-                            min="0.1"
-                          />
-                          <span class="entry-qty-unit">{entry.rawUnit}</span>
-                          <button class="entry-qty-save" onclick={() => updateEntryQty(entry.id)}>Save</button>
-                        </div>
-                        <button class="entry-delete-btn" onclick={() => deleteEntry(entry.id)}>
-                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-                          Delete
-                        </button>
-                      </div>
-                    {/if}
-                  </div>
-                {/each}
-              {/if}
-
-              <button class="add-food-btn" onclick={() => { resolveMeal = meal; const input = document.querySelector('.resolve-input') as HTMLInputElement; if (input) { input.focus(); input.placeholder = `Add to ${meal}...`; } }}>
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-                Add to {meal}
-              </button>
-            </div>
-          {/if}
-        </div>
-      {/each}
-
-    <!-- ═══════════════════════════════ -->
-    <!-- TAB: Foods (neutral utility)    -->
-    <!-- ═══════════════════════════════ -->
-    {:else if activeTab === 'foods'}
-
-      <div class="foods-nudge">
-        Looking for a quick option? <button class="nudge-link" onclick={() => activeTab = 'templates'}>Try Quick Meals →</button>
-      </div>
-
-      <div class="list-header">
-        <div class="search-wrap">
-          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
-          <input type="text" class="search-input" placeholder="Search food library..." bind:value={foodSearch} />
-          {#if foodSearch}
-            <button class="search-clear" onclick={() => foodSearch = ''}>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-            </button>
-          {/if}
-        </div>
-      </div>
-
-      <div class="list-card">
-        {#each filteredFoods as food (food.name)}
-          <!-- svelte-ignore a11y_no_static_element_interactions -->
-          <div class="list-row" onclick={() => openFoodEdit(food)}>
-            <div class="list-row-info">
-              <div class="list-row-name">
-                {food.name}
-                {#if food.favorite}
-                  <svg class="fav-icon" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
-                {/if}
-              </div>
-              <div class="list-row-meta">{food.info}</div>
-            </div>
-            <div class="list-row-right">
-              <span class="list-row-value">{food.calories} cal</span>
-              <svg class="list-row-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
-            </div>
-          </div>
-        {/each}
-        {#if filteredFoods.length === 0}
-          <div class="empty-state">No foods found for "{foodSearch}"</div>
-        {/if}
-      </div>
-
-    <!-- ═══════════════════════════════ -->
-    <!-- TAB: Templates                  -->
-    <!-- ═══════════════════════════════ -->
-    {:else if activeTab === 'templates'}
-
-      <div class="list-header">
-        <div class="list-count">{#if templatesLoading}Loading...{:else if templates.length === 0}No quick meals yet{:else}{templates.length} go-to meals · ranked for you{/if}</div>
-      </div>
-
-      <div class="list-card">
-        {#each rankedTemplates as tpl}
-          {@const hint = templateHintMap.get(tpl.name) || ''}
-          <div class="list-row" class:highlighted={highlightTemplate === tpl.name}>
-            <div class="template-badge">{tpl.meal.charAt(0).toUpperCase()}</div>
-            <div class="list-row-info">
-              <div class="list-row-name">{tpl.name}</div>
-              <div class="list-row-meta"><span class="template-meal-label">{tpl.meal}</span> · {tpl.calories} cal</div>
-              <div class="list-row-sub">{tpl.items} items</div>
-              {#if hint}
-                <div class="template-hint">{hint}</div>
-              {/if}
-            </div>
-            <div class="list-row-right">
-              <button class="log-btn" onclick={() => logTemplate(tpl)}>Log meal</button>
-              <svg class="list-row-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
-            </div>
-          </div>
-        {/each}
-      </div>
-
-    {/if}
-  </div>
-</div>
-
-<!-- FAB — always visible -->
-<button class="fab" class:open={fabOpen} aria-label="Add" onclick={() => fabOpen = !fabOpen}>
-  <svg class="fab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-</button>
-
-<!-- FAB bottom sheet -->
-{#if fabOpen}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="fab-overlay" onclick={() => fabOpen = false}></div>
-  <div class="fab-sheet">
-    <div class="fab-sheet-handle"></div>
-    <button class="fab-action" onclick={() => { fabOpen = false; activeTab = 'log'; }}>
-      <div class="fab-action-icon accent">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-      </div>
-      <div class="fab-action-text">
-        <div class="fab-action-name">Log food</div>
-        <div class="fab-action-desc">Add an entry to your daily log</div>
-      </div>
-    </button>
-    <button class="fab-action" onclick={() => { fabOpen = false; activeTab = 'foods'; foodSearch = ''; }}>
-      <div class="fab-action-icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
-      </div>
-      <div class="fab-action-text">
-        <div class="fab-action-name">Search food</div>
-        <div class="fab-action-desc">Find a food in your library</div>
-      </div>
-    </button>
-    <button class="fab-action" onclick={() => { fabOpen = false; activeTab = 'foods'; }}>
-      <div class="fab-action-icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v6m0 0l3-3m-3 3L9 5"/><rect x="3" y="10" width="18" height="12" rx="2"/></svg>
-      </div>
-      <div class="fab-action-text">
-        <div class="fab-action-name">Create food</div>
-        <div class="fab-action-desc">Add a new food to your library</div>
-      </div>
-    </button>
-    <button class="fab-action" onclick={() => { fabOpen = false; activeTab = 'templates'; }}>
-      <div class="fab-action-icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
-      </div>
-      <div class="fab-action-text">
-        <div class="fab-action-name">Create quick meal</div>
-        <div class="fab-action-desc">Save a reusable meal preset</div>
-      </div>
-    </button>
-  </div>
+{#if data?.useAtelierShell}
+	<AtelierFitnessPage />
+{:else}
+	<LegacyFitnessPage />
 {/if}
-
-<!-- Food edit modal -->
-{#if editingFood}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="resolve-overlay" onclick={closeFoodEdit}>
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="resolve-modal" onclick={(e) => e.stopPropagation()}>
-      <div class="resolve-modal-header">
-        <div class="resolve-modal-title">Edit Food</div>
-        <button class="resolve-modal-close" onclick={closeFoodEdit}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-        </button>
-      </div>
-      <div class="resolve-modal-body">
-        <div class="food-edit-field">
-          <label class="food-edit-label">Name</label>
-          <input class="food-edit-input" type="text" bind:value={editFoodName} />
-        </div>
-        <div class="food-edit-row">
-          <div class="food-edit-field">
-            <label class="food-edit-label">Calories</label>
-            <input class="food-edit-input" type="number" bind:value={editFoodCal} />
-          </div>
-          <div class="food-edit-field">
-            <label class="food-edit-label">Protein (g)</label>
-            <input class="food-edit-input" type="number" bind:value={editFoodProtein} />
-          </div>
-        </div>
-        <div class="food-edit-row">
-          <div class="food-edit-field">
-            <label class="food-edit-label">Carbs (g)</label>
-            <input class="food-edit-input" type="number" bind:value={editFoodCarbs} />
-          </div>
-          <div class="food-edit-field">
-            <label class="food-edit-label">Fat (g)</label>
-            <input class="food-edit-input" type="number" bind:value={editFoodFat} />
-          </div>
-        </div>
-        <div class="food-edit-unit">Per 1 {editFoodUnit}</div>
-      </div>
-      <div class="resolve-modal-footer">
-        <button class="entry-delete-btn" onclick={deleteFood} disabled={savingFood}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-          Delete
-        </button>
-        <div class="resolve-footer-actions">
-          <button class="btn-secondary" onclick={closeFoodEdit}>Cancel</button>
-          <button class="btn-primary" onclick={saveFoodEdit} disabled={savingFood}>
-            {savingFood ? 'Saving...' : 'Save'}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}
-
-<!-- Resolve confirmation modal -->
-{#if resolvedItems.length > 0}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="resolve-overlay" onclick={cancelResolve}>
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="resolve-modal" onclick={(e) => e.stopPropagation()}>
-      <div class="resolve-modal-header">
-        <div class="resolve-modal-title">
-          {resolvedItems.length === 1 ? 'Confirm entry' : `Confirm ${resolvedItems.length} items`}
-        </div>
-        <button class="resolve-modal-close" onclick={cancelResolve}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-        </button>
-      </div>
-
-      <div class="resolve-modal-body">
-        {#each resolvedItems as item, idx}
-          <div class="resolve-item" class:resolve-item-border={idx > 0}>
-            <div class="resolve-item-top">
-              <div class="resolve-item-info">
-                <div class="resolve-food-name">{item.name}</div>
-                <div class="resolve-food-detail">{item.calories} cal · {item.protein}g P · {item.carbs}g C · {item.fat}g F</div>
-              </div>
-              {#if resolvedItems.length > 1}
-                <button class="resolve-item-remove" onclick={() => removeItem(idx)} aria-label="Remove">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-                </button>
-              {/if}
-            </div>
-            <div class="resolve-qty-row">
-              <button class="resolve-qty-btn" onclick={() => updateItemQty(idx, item.qty - 0.5)} disabled={item.qty <= 0.5}>−</button>
-              <span class="resolve-qty-value">{item.qty} {item.unit}</span>
-              <button class="resolve-qty-btn" onclick={() => updateItemQty(idx, item.qty + 0.5)}>+</button>
-            </div>
-          </div>
-        {/each}
-
-        <div class="resolve-meal-row">
-          <span class="resolve-meal-label">Meal</span>
-          <select class="resolve-meal-select" bind:value={resolveMeal}>
-            <option value="breakfast">Breakfast</option>
-            <option value="lunch">Lunch</option>
-            <option value="dinner">Dinner</option>
-            <option value="snack">Snack</option>
-          </select>
-        </div>
-
-        {#if resolvedItems.some(i => i.result.resolution_type === 'ai_estimated')}
-          <div class="resolve-note">Some items estimated by AI — values are approximate</div>
-        {/if}
-      </div>
-
-      <div class="resolve-modal-footer">
-        <div class="resolve-total">{resolveTotalCal} cal total</div>
-        <div class="resolve-footer-actions">
-          <button class="btn-secondary" onclick={cancelResolve}>Cancel</button>
-          <button class="btn-primary" onclick={confirmResolve} disabled={confirmLogging}>
-            {confirmLogging ? 'Logging...' : resolvedItems.length === 1 ? 'Log entry' : `Log ${resolvedItems.length} entries`}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}
-
-<style>
-  /* ── Top tabs (subtle segmented control) ── */
-  .top-tabs {
-    display: flex; gap: var(--sp-0.5); margin-bottom: var(--sp-5);
-    border-bottom: 1px solid var(--border); padding-bottom: 0;
-  }
-  .top-tab {
-    flex: 1; padding: 10px 8px 12px; font-size: var(--text-sm); font-weight: 500;
-    color: var(--text-3); background: none; border: none; border-bottom: 2px solid transparent;
-    cursor: pointer; font-family: var(--font); transition: all var(--transition);
-    text-align: center; margin-bottom: -1px;
-  }
-  .top-tab:hover { color: var(--text-2); }
-  .top-tab.active { color: var(--text-1); border-bottom-color: var(--accent); font-weight: 600; }
-
-  /* ── Header ── */
-  .page-date { font-size: var(--text-2xl); font-weight: 300; color: var(--text-1); line-height: 1.2; }
-
-  /* ── Date nav ── */
-  .date-nav { display: flex; align-items: center; gap: var(--sp-1.5); margin-bottom: var(--sp-5); }
-  .btn-icon { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-3); transition: all var(--transition); flex-shrink: 0; }
-  .btn-icon:hover { color: var(--text-1); background: var(--card-hover); }
-  .btn-icon svg { width: 16px; height: 16px; }
-  .date-input { padding: 6px 10px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--text-1); font-size: var(--text-sm); font-family: var(--font); }
-  .today-btn { padding: 6px 12px; border-radius: var(--radius-md); background: var(--accent-bg); color: var(--accent); border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); transition: all var(--transition); }
-  .today-btn:hover { opacity: 0.8; }
-
-  /* ── Calorie hero ── */
-  .calorie-card {
-    background: var(--card); border-radius: var(--radius); padding: var(--sp-6);
-    border: 1px solid var(--border); box-shadow: var(--card-shadow);
-    margin-bottom: var(--sp-4);
-  }
-  .calorie-eaten { display: flex; align-items: baseline; gap: var(--sp-1.5); margin-bottom: 14px; }
-  .calorie-number { font-size: var(--text-3xl); font-weight: 300; font-family: var(--mono); color: var(--text-1); line-height: 1; letter-spacing: -0.02em; }
-  .calorie-of { font-size: var(--text-md); color: var(--text-3); font-family: var(--mono); }
-  .progress-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: var(--sp-3); }
-  .progress-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.6s ease; }
-  .calorie-coach { font-size: var(--text-md); font-weight: 500; color: var(--text-2); line-height: 1.4; }
-  .calorie-next {
-    display: inline-flex; align-items: center; gap: var(--sp-1);
-    font-size: var(--text-sm); color: var(--accent); margin-top: var(--sp-1.5); font-weight: 500; opacity: 0.85;
-    background: none; border: none; padding: 0; cursor: pointer;
-    font-family: var(--font); text-align: left; transition: opacity var(--transition);
-  }
-  .calorie-next:hover { opacity: 1; }
-  .next-arrow { font-size: var(--text-sm); opacity: 0.6; transition: transform var(--transition); }
-  .calorie-next:hover .next-arrow { transform: translateX(2px); opacity: 1; }
-
-  /* ── Macro row (compact, not cards) ── */
-  .macro-row {
-    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
-    margin-bottom: var(--section-gap);
-  }
-  .macro-item {
-    background: var(--card); border-radius: 10px; padding: 14px;
-    border: 1px solid var(--border);
-  }
-  .macro-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
-  .macro-bar-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease; }
-  .macro-bar-fill.protein { background: #8B5CF6; }
-  .macro-bar-fill.carbs { background: #F59E0B; }
-  .macro-bar-fill.fat { background: #3B82F6; }
-  .macro-label { display: flex; align-items: baseline; gap: 5px; margin-bottom: 2px; }
-  .macro-current { font-size: var(--text-md); font-weight: 500; font-family: var(--mono); color: var(--text-1); letter-spacing: -0.01em; }
-  .macro-name { font-size: var(--text-sm); color: var(--text-3); }
-  .macro-guidance { margin-top: var(--sp-2); border-top: 1px solid var(--border); padding-top: var(--sp-2); }
-  .macro-instruction { font-size: var(--text-sm); font-weight: 500; color: var(--text-2); line-height: 1.3; }
-  .macro-left { font-size: var(--text-sm); color: var(--text-3); margin-top: 1px; font-family: var(--mono); }
-
-  /* ── Meals divider ── */
-  .meals-divider {
-    display: flex; align-items: center; justify-content: space-between;
-    margin-bottom: var(--sp-2); padding-bottom: var(--sp-2);
-  }
-  .meals-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
-  .meals-count { font-size: var(--text-sm); color: var(--text-4); }
-
-  /* ── Meal sections ── */
-  .meal-section { margin-bottom: var(--sp-1); }
-  .meal-header {
-    display: flex; align-items: center; gap: var(--sp-3); width: 100%;
-    padding: var(--sp-3) 0; background: none; border: none; cursor: pointer;
-    font-family: var(--font); color: inherit; text-align: left;
-  }
-  .meal-number {
-    width: 32px; height: 32px; border-radius: 50%;
-    background: var(--card-hover); display: flex; align-items: center; justify-content: center;
-    font-size: var(--text-sm); font-weight: 600; color: var(--text-4); flex-shrink: 0;
-    transition: all var(--transition);
-  }
-  .meal-number.has-entries { background: var(--accent-bg); color: var(--accent); }
-  .meal-info { flex: 1; min-width: 0; }
-  .meal-top { display: flex; align-items: center; gap: var(--sp-2); }
-  .meal-name { font-size: var(--text-md); font-weight: 600; color: var(--text-1); text-transform: capitalize; }
-  .meal-weight { font-size: var(--text-xs); font-weight: 600; padding: 1px 7px; border-radius: var(--radius-xs); text-transform: uppercase; letter-spacing: 0.03em; }
-  .meal-weight.heavy { background: rgba(239,68,68,0.1); color: #DC2626; }
-  .meal-weight.moderate { background: rgba(245,158,11,0.1); color: #B45309; }
-  .meal-weight.light { background: rgba(34,197,94,0.1); color: #15803D; }
-  .meal-weight.snack { background: var(--card-hover); color: var(--text-3); }
-  .meal-stats { font-size: var(--text-sm); color: var(--text-3); margin-top: 1px; }
-  .meal-stats.empty { color: var(--text-4); font-style: italic; }
-  .meal-chevron { width: 16px; height: 16px; color: var(--text-4); transition: transform var(--transition); flex-shrink: 0; }
-  .meal-chevron.expanded { transform: rotate(180deg); }
-
-  .meal-entries { padding-left: var(--sp-4); margin-left: var(--sp-4); border-left: 2px solid var(--border); padding-bottom: var(--sp-1.5); }
-
-  .entry-row {
-    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
-    padding: 11px 14px; border-radius: var(--radius-md); background: var(--card);
-    border: 1px solid var(--border); margin-bottom: var(--sp-1); transition: all var(--transition);
-  }
-  .entry-row:hover { background: var(--card-hover); }
-
-  .entry-info { flex: 1; min-width: 0; }
-  .entry-name { font-size: var(--text-base); font-weight: 500; color: var(--text-1); display: flex; align-items: center; gap: var(--sp-1.5); flex-wrap: wrap; }
-  .entry-badge { font-size: var(--text-xs); font-weight: 600; padding: 1px 6px; border-radius: var(--radius-xs); text-transform: uppercase; letter-spacing: 0.03em; }
-  .entry-badge.ai { background: rgba(59,130,246,0.1); color: #3B82F6; }
-  .entry-badge.quick { background: var(--card-hover); color: var(--text-4); }
-  .entry-serving { font-size: var(--text-sm); color: var(--text-3); margin-top: 1px; }
-  .entry-note { font-size: var(--text-sm); color: var(--text-3); font-style: italic; margin-top: 1px; }
-
-  .entry-wrap { margin-bottom: var(--sp-1); }
-  .entry-row { cursor: pointer; }
-  .entry-actions {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: var(--sp-2) var(--sp-3); background: var(--surface-secondary);
-    border: 1px solid var(--border); border-top: none;
-    border-radius: 0 0 var(--radius-md) var(--radius-md);
-  }
-  .entry-wrap:has(.entry-actions) .entry-row {
-    border-radius: var(--radius-md) var(--radius-md) 0 0;
-  }
-  .entry-qty-control { display: flex; align-items: center; gap: var(--sp-2); }
-  .entry-qty-input {
-    width: 64px; padding: var(--sp-1.5) var(--sp-2); border-radius: var(--radius-sm);
-    border: 1px solid var(--border); background: var(--card); color: var(--text-1);
-    font-size: var(--text-md); font-family: var(--mono); text-align: center;
-  }
-  .entry-qty-input:focus { outline: none; border-color: var(--accent); }
-  .entry-qty-unit { font-size: var(--text-sm); color: var(--text-3); }
-  .entry-qty-save {
-    padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md);
-    background: var(--accent); color: white; border: none;
-    font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font);
-    transition: opacity var(--transition); white-space: nowrap;
-  }
-  .entry-qty-save:hover { opacity: 0.9; }
-  .entry-delete-btn {
-    display: flex; align-items: center; gap: var(--sp-1.5); padding: var(--sp-2) var(--sp-4);
-    border-radius: var(--radius-md); background: none; border: 1px solid var(--error);
-    color: var(--error); font-size: var(--text-sm); font-weight: 500; cursor: pointer;
-    font-family: var(--font); transition: all var(--transition); white-space: nowrap;
-  }
-  .entry-delete-btn:hover { background: var(--error-dim); }
-  .entry-delete-btn svg { width: 14px; height: 14px; }
-
-  .entry-cals { display: flex; align-items: baseline; gap: 3px; flex-shrink: 0; }
-  .entry-cal-value { font-size: var(--text-md); font-weight: 600; font-family: var(--mono); color: var(--text-1); }
-  .entry-cal-label { font-size: var(--text-xs); color: var(--text-3); }
-
-  .add-food-btn {
-    display: flex; align-items: center; gap: var(--sp-1.5);
-    padding: 10px 14px; margin-top: var(--sp-1); background: none; border: 1px dashed var(--border);
-    border-radius: var(--radius-md); width: 100%;
-    font-size: var(--text-sm); font-weight: 500; color: var(--accent); cursor: pointer;
-    font-family: var(--font); transition: all var(--transition);
-  }
-  .add-food-btn:hover { background: var(--accent-bg); border-color: var(--accent); }
-  .add-food-btn svg { width: 15px; height: 15px; }
-
-  /* ── Foods nudge ── */
-  .foods-nudge { font-size: var(--text-sm); color: var(--text-3); margin-bottom: 14px; }
-  .nudge-link { background: none; border: none; color: var(--accent); font-size: var(--text-sm); font-weight: 500; cursor: pointer; font-family: var(--font); padding: 0; transition: opacity var(--transition); }
-  .nudge-link:hover { opacity: 0.7; }
-
-  /* ── Shared list styles (Foods + Templates) ── */
-  .list-header { display: flex; gap: 10px; align-items: center; margin-bottom: var(--sp-3); }
-  .list-count { flex: 1; font-size: var(--text-sm); color: var(--text-3); }
-  .search-wrap { flex: 1; position: relative; }
-  .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-4); pointer-events: none; }
-  .search-input { width: 100%; padding: 9px 36px 9px 36px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--text-1); font-size: var(--text-sm); font-family: var(--font); transition: all var(--transition); }
-  .search-input::placeholder { color: var(--text-4); }
-  .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
-  .search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-4); padding: 4px; }
-  .search-clear svg { width: 14px; height: 14px; }
-  .btn-primary-sm { padding: 8px 14px; border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); transition: opacity var(--transition); white-space: nowrap; flex-shrink: 0; }
-  .btn-primary-sm:hover { opacity: 0.9; }
-
-  .list-card {
-    background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
-    box-shadow: var(--card-shadow-sm); overflow: hidden;
-  }
-  .list-row {
-    display: flex; align-items: center; gap: 12px;
-    padding: 13px 16px; border-bottom: 1px solid var(--border); cursor: pointer;
-    transition: background var(--transition);
-  }
-  .list-row:last-child { border-bottom: none; }
-  .list-row:hover { background: var(--card-hover); }
-  .list-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 68%, var(--card)); }
-  .list-row:nth-child(even):hover { background: var(--card-hover); }
-  .list-row-info { flex: 1; min-width: 0; }
-  .list-row-name { font-size: var(--text-base); font-weight: 500; color: var(--text-1); display: flex; align-items: center; gap: var(--sp-1.5); }
-  .list-row-meta { font-size: var(--text-sm); color: var(--text-3); margin-top: 1px; }
-  .list-row-right { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
-  .list-row-value { font-size: var(--text-sm); font-family: var(--mono); color: var(--text-2); }
-  .list-row-chevron { width: 14px; height: 14px; color: var(--text-4); opacity: 0.5; }
-  .list-row:hover .list-row-chevron { opacity: 1; }
-  .list-row.highlighted { background: var(--accent-bg); border-bottom-color: color-mix(in srgb, var(--accent) 12%, transparent); animation: highlight-pulse 2s ease-out; }
-  @keyframes highlight-pulse { 0% { box-shadow: 0 0 0 3px rgba(79,70,229,0.15); } 100% { box-shadow: none; } }
-  .fav-icon { width: 13px; height: 13px; color: #F59E0B; flex-shrink: 0; }
-  .empty-state { padding: var(--sp-8); text-align: center; color: var(--text-3); font-size: var(--text-base); }
-
-  .list-row-sub { font-size: var(--text-xs); color: var(--text-4); margin-top: 1px; }
-  .template-meal-label { text-transform: capitalize; }
-  .template-hint { font-size: var(--text-xs); color: var(--accent); margin-top: 3px; font-weight: 500; opacity: 0.75; }
-
-  /* Template-specific */
-  .template-badge {
-    width: 32px; height: 32px; border-radius: var(--radius-md);
-    background: var(--accent-bg); color: var(--accent);
-    display: flex; align-items: center; justify-content: center;
-    font-size: var(--text-sm); font-weight: 700; flex-shrink: 0;
-  }
-  .log-btn {
-    padding: 5px 12px; border-radius: var(--radius-sm); background: var(--accent-bg);
-    color: var(--accent); border: none; font-size: var(--text-sm); font-weight: 600;
-    cursor: pointer; font-family: var(--font); transition: all var(--transition);
-  }
-  .log-btn:hover { background: var(--accent); color: white; }
-
-  /* ── FAB ── */
-  .fab {
-    position: fixed; bottom: 24px; right: 24px; z-index: 50;
-    width: 56px; height: 56px; border-radius: 50%;
-    background: var(--accent); color: white; border: none;
-    box-shadow: 0 8px 24px rgba(79,70,229,0.3); cursor: pointer;
-    display: flex; align-items: center; justify-content: center;
-    transition: all var(--transition);
-  }
-  .fab:hover { transform: scale(1.06); box-shadow: 0 12px 32px rgba(79,70,229,0.4); }
-  .fab-icon { width: 24px; height: 24px; transition: transform 200ms ease; }
-  .fab.open .fab-icon { transform: rotate(45deg); }
-
-  /* ── FAB bottom sheet ── */
-  .fab-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 45; animation: fadeIn 150ms ease; }
-  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-  .fab-sheet {
-    position: fixed; bottom: 0; left: 0; right: 0; z-index: 48;
-    background: var(--surface); border-top-left-radius: 20px; border-top-right-radius: 20px;
-    padding: 12px 16px 28px; box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
-    animation: slideUp 200ms ease;
-  }
-  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
-  .fab-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto var(--sp-4); }
-
-  .fab-action {
-    display: flex; align-items: center; gap: 14px; width: 100%;
-    padding: 14px 12px; border-radius: var(--radius); background: none; border: none;
-    cursor: pointer; font-family: var(--font); text-align: left;
-    transition: background var(--transition);
-  }
-  .fab-action:hover { background: var(--card-hover); }
-
-  .fab-action-icon {
-    width: 40px; height: 40px; border-radius: 10px;
-    background: var(--card); border: 1px solid var(--border);
-    display: flex; align-items: center; justify-content: center;
-    flex-shrink: 0; color: var(--text-3);
-  }
-  .fab-action-icon.accent { background: var(--accent); border-color: var(--accent); color: white; }
-  .fab-action-icon svg { width: 18px; height: 18px; }
-
-  .fab-action-text { flex: 1; min-width: 0; }
-  .fab-action-name { font-size: var(--text-md); font-weight: 500; color: var(--text-1); }
-  .fab-action-desc { font-size: var(--text-sm); color: var(--text-3); margin-top: 1px; }
-
-  /* ── AI Resolve bar ── */
-  .resolve-bar {
-    display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4);
-  }
-  .resolve-input {
-    flex: 1; padding: 10px 14px; border-radius: var(--radius); border: 1.5px solid var(--border);
-    background: var(--card); color: var(--text-1); font-size: var(--text-md); font-family: var(--font);
-    transition: all var(--transition);
-  }
-  .resolve-input::placeholder { color: var(--text-4); }
-  .resolve-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
-  .resolve-submit {
-    width: 42px; height: 42px; border-radius: var(--radius); background: var(--accent); color: white;
-    border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
-    transition: opacity var(--transition); flex-shrink: 0;
-  }
-  .resolve-submit:disabled { opacity: 0.4; cursor: default; }
-  .resolve-submit svg { width: 18px; height: 18px; }
-  .resolve-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; }
-  @keyframes spin { to { transform: rotate(360deg); } }
-  .resolve-error { font-size: var(--text-sm); color: var(--error); margin-top: calc(-1 * var(--sp-3)); margin-bottom: var(--sp-3); }
-
-  /* ── Resolve modal ── */
-  .resolve-overlay {
-    position: fixed; inset: 0; background: var(--overlay); z-index: 70;
-    display: flex; align-items: center; justify-content: center; animation: resolveFade 150ms ease;
-  }
-  @keyframes resolveFade { from { opacity: 0; } to { opacity: 1; } }
-  .resolve-modal {
-    width: 420px; max-width: 92vw; background: var(--surface); border-radius: var(--radius);
-    box-shadow: var(--shadow-xl); animation: resolveSlide 200ms ease;
-  }
-  @keyframes resolveSlide { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
-  .resolve-modal-header {
-    display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
-  }
-  .resolve-modal-title { font-size: var(--text-md); font-weight: 600; color: var(--text-1); }
-  .resolve-modal-close { background: none; border: none; cursor: pointer; color: var(--text-3); padding: var(--sp-1); border-radius: var(--radius-sm); }
-  .resolve-modal-close:hover { color: var(--text-1); background: var(--card-hover); }
-  .resolve-modal-close svg { width: 18px; height: 18px; }
-  .resolve-modal-body { padding: var(--sp-5); }
-  .resolve-item { padding-bottom: var(--sp-3); }
-  .resolve-item-border { padding-top: var(--sp-3); border-top: 1px solid var(--border); }
-  .resolve-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
-  .resolve-item-info { flex: 1; min-width: 0; }
-  .resolve-item-remove { background: none; border: none; cursor: pointer; color: var(--text-4); padding: var(--sp-1); border-radius: var(--radius-xs); flex-shrink: 0; }
-  .resolve-item-remove:hover { color: var(--error); background: var(--error-dim); }
-  .resolve-item-remove svg { width: 14px; height: 14px; }
-  .resolve-food-name { font-size: var(--text-base); font-weight: 600; color: var(--text-1); line-height: 1.3; }
-  .resolve-food-detail { font-size: var(--text-sm); color: var(--text-3); margin-top: 2px; font-family: var(--mono); }
-  .resolve-qty-row {
-    display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2);
-  }
-  .resolve-qty-btn {
-    width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border);
-    background: var(--card); color: var(--text-2); font-size: var(--text-md); font-weight: 600;
-    display: flex; align-items: center; justify-content: center; cursor: pointer;
-    transition: all var(--transition);
-  }
-  .resolve-qty-btn:hover { background: var(--card-hover); color: var(--text-1); }
-  .resolve-qty-btn:disabled { opacity: 0.3; cursor: default; }
-  .resolve-qty-value { font-size: var(--text-sm); font-family: var(--mono); color: var(--text-2); min-width: 60px; text-align: center; }
-  .resolve-meal-row {
-    display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-4);
-    padding-top: var(--sp-3); border-top: 1px solid var(--border);
-  }
-  .resolve-meal-label { font-size: var(--text-sm); color: var(--text-3); }
-  .resolve-meal-select {
-    padding: var(--sp-1.5) var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--border);
-    background: var(--card); color: var(--text-1); font-size: var(--text-sm); font-family: var(--font); cursor: pointer;
-  }
-  .resolve-note { font-size: var(--text-sm); color: var(--text-3); font-style: italic; margin-top: var(--sp-3); }
-  /* ── Food edit modal ── */
-  .food-edit-field { display: flex; flex-direction: column; gap: var(--sp-1); }
-  .food-edit-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-3); }
-  .food-edit-input {
-    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--border);
-    background: var(--surface-secondary); color: var(--text-1); font-size: var(--text-md); font-family: var(--font);
-  }
-  .food-edit-input:focus { outline: none; border-color: var(--accent); }
-  .food-edit-input[type="number"] { font-family: var(--mono); }
-  .food-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-3); }
-  .food-edit-field:first-child:not(:last-child) { margin-bottom: 0; }
-  .food-edit-unit { font-size: var(--text-sm); color: var(--text-4); margin-top: var(--sp-3); font-style: italic; }
-
-  .resolve-modal-footer {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border);
-  }
-  .resolve-total { font-size: var(--text-sm); font-weight: 600; font-family: var(--mono); color: var(--text-1); }
-  .resolve-footer-actions { display: flex; gap: var(--sp-2); }
-
-  /* ── Mobile ── */
-  @media (max-width: 768px) {
-    .page-date { font-size: var(--text-xl); }
-    .calorie-number { font-size: var(--text-3xl); }
-    .calorie-card { padding: 20px 16px; }
-    .macro-row { gap: var(--sp-2); }
-    .macro-item { padding: var(--sp-3); }
-    .macro-current { font-size: var(--text-base); }
-    .meal-entries { padding-left: var(--sp-3); margin-left: var(--sp-3); }
-    .entry-row { padding: 10px 12px; }
-    .top-tab { font-size: var(--text-sm); }
-    .list-header { flex-direction: column; }
-    .fab { bottom: 80px; right: 16px; width: 52px; height: 52px; }
-    .fab svg { width: 22px; height: 22px; }
-  }
-</style>
diff --git a/frontend-v2/src/routes/(app)/fitness/goals/+page.svelte b/frontend-v2/src/routes/(app)/fitness/goals/+page.svelte
index 013063c..1fe104a 100644
--- a/frontend-v2/src/routes/(app)/fitness/goals/+page.svelte
+++ b/frontend-v2/src/routes/(app)/fitness/goals/+page.svelte
@@ -5,6 +5,8 @@
   let protein = $state(150);
   let carbs = $state(200);
   let fat = $state(65);
+  let sugar = $state(0);
+  let fiber = $state(0);
   let startDate = $state('');
   let loading = $state(true);
   let editing = $state(false);
@@ -16,6 +18,8 @@
   let editProtein = $state('150');
   let editCarbs = $state('200');
   let editFat = $state('65');
+  let editSugar = $state('0');
+  let editFiber = $state('0');
 
   function today(): string {
     const n = new Date();
@@ -31,6 +35,8 @@
         protein = g.protein || 150;
         carbs = g.carbs || 200;
         fat = g.fat || 65;
+        sugar = g.sugar || 0;
+        fiber = g.fiber || 0;
         hasGoal = true;
         if (g.start_date) {
           const d = new Date(g.start_date + 'T00:00:00');
@@ -46,6 +52,8 @@
     editProtein = String(Math.round(protein));
     editCarbs = String(Math.round(carbs));
     editFat = String(Math.round(fat));
+    editSugar = String(Math.round(sugar));
+    editFiber = String(Math.round(fiber));
     editing = true;
   }
 
@@ -65,6 +73,8 @@
           protein: parseFloat(editProtein) || 150,
           carbs: parseFloat(editCarbs) || 200,
           fat: parseFloat(editFat) || 65,
+          sugar: parseFloat(editSugar) || 0,
+          fiber: parseFloat(editFiber) || 0,
           start_date: today(),
         }),
       });
@@ -112,6 +122,14 @@
             <label class="edit-label">Fat (g/day)</label>
             <input class="edit-input" type="number" bind:value={editFat} />
           </div>
+          <div class="edit-field">
+            <label class="edit-label">Sugar (g/day)</label>
+            <input class="edit-input" type="number" bind:value={editSugar} />
+          </div>
+          <div class="edit-field">
+            <label class="edit-label">Fiber (g/day)</label>
+            <input class="edit-input" type="number" bind:value={editFiber} />
+          </div>
         </div>
         <div class="edit-actions">
           <button class="btn-cancel" onclick={cancelEdit}>Cancel</button>
@@ -141,6 +159,16 @@
             <div class="goal-value">{loading ? '...' : Math.round(fat)}</div>
             <div class="goal-unit">grams/day</div>
           </div>
+          <div class="goal-card">
+            <div class="goal-label">Sugar</div>
+            <div class="goal-value">{loading ? '...' : Math.round(sugar)}</div>
+            <div class="goal-unit">grams/day</div>
+          </div>
+          <div class="goal-card">
+            <div class="goal-label">Fiber</div>
+            <div class="goal-value">{loading ? '...' : Math.round(fiber)}</div>
+            <div class="goal-unit">grams/day</div>
+          </div>
         </div>
 
         {#if startDate}
diff --git a/frontend-v2/src/routes/(app)/inventory/+page.svelte b/frontend-v2/src/routes/(app)/inventory/+page.svelte
index 625b27f..9d443c1 100644
--- a/frontend-v2/src/routes/(app)/inventory/+page.svelte
+++ b/frontend-v2/src/routes/(app)/inventory/+page.svelte
@@ -1,902 +1,12 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { page } from '$app/state';
-  import ImmichPicker from '$lib/components/shared/ImmichPicker.svelte';
+	import AtelierInventoryPage from '$lib/pages/inventory/AtelierInventoryPage.svelte';
+	import LegacyInventoryPage from '$lib/pages/inventory/LegacyInventoryPage.svelte';
 
-  // ── Types matching NocoDB fields ──
-  interface InventoryItem {
-    id: number;
-    name: string;
-    order: string;
-    sku: string;
-    serial: string;
-    status: string;
-    price: number;
-    tax: number;
-    total: number;
-    qty: number;
-    tracking: string;
-    vendor: string;
-    buyerName: string;
-    date: string;
-    notes: string;
-    photos: number;
-    photoUrls: string[];
-  }
-
-  interface ItemDetailRaw {
-    Id: number;
-    Item: string;
-    'Order Number': string;
-    'Serial Numbers': string;
-    SKU: string;
-    Received: string;
-    'Price Per Item': number;
-    Tax: number;
-    Total: number;
-    QTY: number;
-    'Tracking Number': string;
-    Source: string;
-    Name: string;
-    Date: string;
-    Notes: string;
-    photos: any[];
-    [key: string]: any;
-  }
-
-  // ── State ──
-  let activeTab = $state<'issues' | 'review' | 'all'>('issues');
-  let searchQuery = $state('');
-  let detailOpen = $state(false);
-  let selectedItem = $state<InventoryItem | null>(null);
-  let selectedDetail = $state<ItemDetailRaw | null>(null);
-  let nocodbUrl = $state('');
-
-  let recentItems = $state<InventoryItem[]>([]);
-  let issueItems = $state<InventoryItem[]>([]);
-  let reviewItems = $state<InventoryItem[]>([]);
-  let recentLoaded = $state(false);
-  let loading = $state(true);
-  let searching = $state(false);
-  let searchResults = $state<InventoryItem[] | null>(null);
-  let saving = $state(false);
-  let debounceTimer: ReturnType<typeof setTimeout>;
-
-  // ── Derived ──
-  const issueCount = $derived(issueItems.length);
-  const reviewCount = $derived(reviewItems.length);
-
-  const displayedItems = $derived(() => {
-    if (searchResults !== null) return searchResults;
-    if (activeTab === 'issues') return issueItems;
-    if (activeTab === 'review') return reviewItems;
-    return recentItems;
-  });
-
-  // ── Map API response to our item shape ──
-  function mapIssue(raw: any): InventoryItem {
-    return {
-      id: raw.id,
-      name: raw.item || '',
-      order: raw.orderNumber || '',
-      sku: raw.sku || '',
-      serial: raw.serialNumbers || '',
-      status: normalizeStatus(raw.received || ''),
-      price: 0,
-      tax: 0,
-      total: 0,
-      qty: 1,
-      tracking: raw.trackingNumber || '',
-      vendor: '',
-      buyerName: '',
-      date: '',
-      notes: raw.notes || '',
-      photos: 0,
-      photoUrls: []
-    };
-  }
-
-  const NOCODB_BASE = 'https://noco.quadjourney.com';
-
-  function extractPhotoUrls(photos: any[]): string[] {
-    if (!Array.isArray(photos)) return [];
-    return photos
-      .filter((p: any) => p && p.signedPath)
-      .map((p: any) => `${NOCODB_BASE}/${p.signedPath}`);
-  }
-
-  function mapDetail(raw: ItemDetailRaw): InventoryItem {
-    const photoUrls = extractPhotoUrls(raw.photos);
-    return {
-      id: raw.Id,
-      name: raw.Item || '',
-      order: raw['Order Number'] || '',
-      sku: raw.SKU || '',
-      serial: raw['Serial Numbers'] || '',
-      status: normalizeStatus(raw.Received || ''),
-      price: raw['Price Per Item'] || 0,
-      tax: raw.Tax || 0,
-      total: raw.Total || 0,
-      qty: raw.QTY || 1,
-      tracking: raw['Tracking Number'] || '',
-      vendor: raw.Source || '',
-      buyerName: raw.Name || '',
-      date: raw.Date || '',
-      notes: raw.Notes || '',
-      photos: Array.isArray(raw.photos) ? raw.photos.length : 0,
-      photoUrls
-    };
-  }
-
-  function normalizeStatus(received: string): string {
-    if (!received) return 'Pending';
-    const lower = received.toLowerCase();
-    if (lower === 'issue' || lower === 'issues') return 'Issue';
-    if (lower === 'needs review') return 'Needs Review';
-    if (lower === 'pending') return 'Pending';
-    if (lower === 'closed') return 'Closed';
-    // Any date string or other value = Received
-    return 'Received';
-  }
-
-  // ── API calls ──
-  async function loadSummary() {
-    try {
-      const res = await fetch('/api/inventory/summary', { credentials: 'include' });
-      if (res.ok) {
-        const data = await res.json();
-        issueItems = (data.issues || []).map(mapIssue);
-        reviewItems = (data.needsReview || []).map(mapIssue);
-      }
-    } catch { /* silent */ }
-  }
-
-  function mapSearchResult(r: any): InventoryItem {
-    return {
-      id: r.id,
-      name: r.item || '',
-      order: '', sku: '', serial: '',
-      status: normalizeStatus(r.received || ''),
-      price: 0, tax: 0, total: 0, qty: 1,
-      tracking: '', vendor: '', buyerName: '', date: '',
-      notes: '', photos: 0, photoUrls: []
-    };
-  }
-
-  async function loadRecent() {
-    if (recentLoaded) return;
-    try {
-      const res = await fetch('/api/inventory/recent?limit=30', { credentials: 'include' });
-      if (res.ok) {
-        const data = await res.json();
-        recentItems = (data.items || []).map(mapSearchResult);
-        recentLoaded = true;
-      }
-    } catch { /* silent */ }
-  }
-
-  async function searchItems(query: string) {
-    if (!query.trim()) { searchResults = null; return; }
-    searching = true;
-    try {
-      const res = await fetch(`/api/inventory/search-records?q=${encodeURIComponent(query)}`, { credentials: 'include' });
-      if (res.ok) {
-        const data = await res.json();
-        searchResults = (data.results || []).map((r: any) => ({
-          id: r.id,
-          name: r.item || '',
-          order: '', sku: '', serial: '',
-          status: normalizeStatus(r.received || ''),
-          price: 0, tax: 0, total: 0, qty: 1,
-          tracking: '', vendor: '', buyerName: '', date: '',
-          notes: '', photos: 0
-        }));
-      }
-    } catch { searchResults = []; }
-    finally { searching = false; }
-  }
-
-  async function loadItemDetail(id: number) {
-    try {
-      const res = await fetch(`/api/inventory/item-details/${id}`, { credentials: 'include' });
-      if (res.ok) {
-        const data = await res.json();
-        selectedDetail = data.item;
-        selectedItem = mapDetail(data.item);
-        nocodbUrl = data.nocodb_url || '';
-        detailOpen = true;
-      }
-    } catch { /* silent */ }
-  }
-
-  async function updateField(field: string, value: string | number) {
-    if (!selectedItem) return;
-    saving = true;
-    try {
-      const res = await fetch(`/api/inventory/item/${selectedItem.id}`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ [field]: value }),
-        credentials: 'include'
-      });
-      if (res.ok && selectedDetail) {
-        (selectedDetail as any)[field] = value;
-        selectedItem = mapDetail(selectedDetail);
-        // Update in lists
-        updateItemInLists(selectedItem);
-      }
-    } catch { /* silent */ }
-    finally { saving = false; }
-  }
-
-  function updateItemInLists(item: InventoryItem) {
-    const issueIdx = issueItems.findIndex(i => i.id === item.id);
-    const allIdx = allItems.findIndex(i => i.id === item.id);
-    if (allIdx >= 0) allItems[allIdx] = item;
-    // Add/remove from issues based on status
-    if (item.status === 'Issue') {
-      if (issueIdx < 0) issueItems = [...issueItems, item];
-      else issueItems[issueIdx] = item;
-    } else {
-      if (issueIdx >= 0) issueItems = issueItems.filter(i => i.id !== item.id);
-    }
-  }
-
-  // ── Event handlers ──
-  function onSearchInput() {
-    clearTimeout(debounceTimer);
-    if (!searchQuery.trim()) { searchResults = null; return; }
-    debounceTimer = setTimeout(() => searchItems(searchQuery), 300);
-  }
-
-  function openDetail(item: InventoryItem) {
-    loadItemDetail(item.id);
-  }
-
-  function closeDetail() {
-    detailOpen = false;
-    selectedItem = null;
-    selectedDetail = null;
-  }
-
-  const statusOptions = ['Issue', 'Needs Review', 'Pending', 'Received', 'Closed'];
-
-  // Maps our status to NocoDB "Received" field values
-  function statusToReceived(status: string): string {
-    if (status === 'Issue') return 'Issues';
-    if (status === 'Needs Review') return 'Needs Review';
-    if (status === 'Pending') return 'Pending';
-    if (status === 'Closed') return 'Closed';
-    // For "Received", we set today's date
-    return new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
-  }
-
-  async function changeStatus(newStatus: string) {
-    if (!selectedItem) return;
-    const receivedValue = statusToReceived(newStatus);
-    await updateField('Received', receivedValue);
-  }
-
-  function statusColor(status: string) {
-    if (status === 'Issue' || status === 'Issues') return 'error';
-    if (status === 'Needs Review') return 'warning';
-    if (status === 'Received') return 'success';
-    if (status === 'Pending') return 'warning';
-    if (status === 'Closed') return 'muted';
-    return 'muted';
-  }
-
-  function formatPrice(n: number) {
-    return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-  }
-
-  // ── Inline editing ──
-  let editingField = $state('');
-  let editValue = $state('');
-
-  // NocoDB field name → our display label + item property
-  const editableFields: Record<string, { nocoField: string; type: 'text' | 'number' }> = {
-    'Item': { nocoField: 'Item', type: 'text' },
-    'Price Per Item': { nocoField: 'Price Per Item', type: 'number' },
-    'Tax': { nocoField: 'Tax', type: 'number' },
-    'Total': { nocoField: 'Total', type: 'number' },
-    'QTY': { nocoField: 'QTY', type: 'number' },
-    'SKU': { nocoField: 'SKU', type: 'text' },
-    'Serial Numbers': { nocoField: 'Serial Numbers', type: 'text' },
-    'Order Number': { nocoField: 'Order Number', type: 'text' },
-    'Source': { nocoField: 'Source', type: 'text' },
-    'Name': { nocoField: 'Name', type: 'text' },
-    'Date': { nocoField: 'Date', type: 'text' },
-    'Tracking Number': { nocoField: 'Tracking Number', type: 'text' },
-    'Notes': { nocoField: 'Notes', type: 'text' },
-  };
-
-  function startEdit(nocoField: string, currentValue: any) {
-    editingField = nocoField;
-    editValue = currentValue != null ? String(currentValue) : '';
-  }
-
-  async function saveEdit() {
-    if (!editingField || !selectedItem) return;
-    const field = editableFields[editingField];
-    const value = field?.type === 'number' ? Number(editValue) || 0 : editValue;
-    await updateField(editingField, value);
-    editingField = '';
-    editValue = '';
-  }
-
-  function cancelEdit() {
-    editingField = '';
-    editValue = '';
-  }
-
-  function handleEditKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter') saveEdit();
-    if (e.key === 'Escape') cancelEdit();
-  }
-
-  // Get raw NocoDB value for a field
-  function rawField(field: string): any {
-    return selectedDetail ? (selectedDetail as any)[field] : '';
-  }
-
-  // ── Action handlers ──
-  async function duplicateItem() {
-    if (!selectedItem) return;
-    saving = true;
-    try {
-      const res = await fetch(`/api/inventory/duplicate/${selectedItem.id}`, {
-        method: 'POST', credentials: 'include'
-      });
-      if (res.ok) {
-        const data = await res.json();
-        const newId = data.newId || data.id;
-        if (newId) loadItemDetail(newId);
-      }
-    } catch { /* silent */ }
-    finally { saving = false; }
-  }
-
-  async function sendToPhone() {
-    if (!selectedItem) return;
-    saving = true;
-    try {
-      await fetch('/api/inventory/send-to-phone', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ rowId: selectedItem.id }),
-        credentials: 'include'
-      });
-    } catch { /* silent */ }
-    finally { saving = false; }
-  }
-
-  // ── Photo upload ──
-  let fileInput: HTMLInputElement;
-  let uploading = $state(false);
-  let uploadMenuOpen = $state(false);
-
-  function triggerUpload() {
-    fileInput?.click();
-  }
-
-  async function handleFileSelect(e: Event) {
-    const input = e.target as HTMLInputElement;
-    if (!input.files?.length || !selectedItem) return;
-    uploading = true;
-    try {
-      const formData = new FormData();
-      formData.append('rowId', String(selectedItem.id));
-      for (const file of input.files) {
-        formData.append('photos', file);
-      }
-      const res = await fetch('/api/inventory/upload', {
-        method: 'POST',
-        body: formData,
-        credentials: 'include'
-      });
-      if (res.ok) {
-        // Reload item to get updated photos
-        loadItemDetail(selectedItem.id);
-      }
-    } catch { /* silent */ }
-    finally {
-      uploading = false;
-      input.value = '';
-    }
-  }
-
-  // ── Immich picker ──
-  let immichOpen = $state(false);
-
-  async function handleImmichSelect(assetIds: string[]) {
-    if (!selectedItem || !assetIds.length) return;
-    uploading = true;
-    try {
-      // Server-to-server: inventory service downloads from Immich and uploads to NocoDB
-      const res = await fetch('/api/inventory/upload-from-immich', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
-        body: JSON.stringify({
-          rowId: selectedItem.id,
-          assetIds,
-          deleteAfter: true
-        })
-      });
-      if (res.ok) {
-        const data = await res.json();
-        console.log(`Uploaded ${data.uploadedCount} photos, deleted ${data.deletedCount} from Immich`);
-      }
-      // Reload to show new photos
-      loadItemDetail(selectedItem.id);
-    } catch { /* silent */ }
-    finally { uploading = false; }
-  }
-
-  async function createNewItem() {
-    saving = true;
-    try {
-      const res = await fetch('/api/inventory/create', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ Item: 'New Item' }),
-        credentials: 'include'
-      });
-      if (res.ok) {
-        const data = await res.json();
-        if (data.id) loadItemDetail(data.id);
-      }
-    } catch { /* silent */ }
-    finally { saving = false; }
-  }
-
-  // ── Init ──
-  onMount(async () => {
-    await loadSummary();
-    loading = false;
-
-    // Auto-open from query param
-    const itemId = page.url.searchParams.get('item');
-    if (itemId) loadItemDetail(Number(itemId));
-  });
+	let { data } = $props();
 </script>
 
-{#snippet editableRow(nocoField: string, displayValue: string, classes: string)}
-  {#if editingField === nocoField}
-    <div class="detail-row editing">
-      <span class="field-label">{nocoField}</span>
-      <input
-        class="edit-input {classes}"
-        type={editableFields[nocoField]?.type === 'number' ? 'number' : 'text'}
-        bind:value={editValue}
-        onkeydown={handleEditKeydown}
-        onblur={saveEdit}
-        autofocus
-      />
-    </div>
-  {:else}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="detail-row editable" onclick={() => startEdit(nocoField, rawField(nocoField))}>
-      <span class="field-label">{nocoField}</span>
-      <span class="field-value {classes}">{displayValue}</span>
-    </div>
-  {/if}
-{/snippet}
-
-<div class="page">
-  <div class="app-surface">
-    <div class="page-header">
-      <div class="header-row">
-        <div>
-          <div class="page-title">INVENTORY</div>
-          <div class="page-subtitle">{loading ? 'Loading...' : ''}<strong>{issueCount} issues</strong> · {reviewCount} needs review</div>
-        </div>
-        <button class="btn-primary" onclick={createNewItem}>+ New Item</button>
-      </div>
-    </div>
-
-    <!-- Search -->
-    <div class="search-wrap">
-      <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
-      <input
-        type="text"
-        class="search-input"
-        placeholder="Search by item name, order number, serial number, SKU..."
-        bind:value={searchQuery}
-        oninput={onSearchInput}
-      />
-      {#if searchQuery}
-        <button class="search-clear" onclick={() => { searchQuery = ''; searchResults = null; }}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-        </button>
-      {/if}
-    </div>
-
-    <!-- Tabs (hidden during search) -->
-    {#if !searchQuery && searchResults === null}
-      <div class="tabs">
-        <button class="tab" class:active={activeTab === 'issues'} onclick={() => activeTab = 'issues'}>
-          Issues <span class="tab-badge">{issueCount}</span>
-        </button>
-        <button class="tab" class:active={activeTab === 'review'} onclick={() => activeTab = 'review'}>
-          Needs Review <span class="tab-badge review">{reviewCount}</span>
-        </button>
-        <button class="tab" class:active={activeTab === 'all'} onclick={() => { activeTab = 'all'; loadRecent(); }}>
-          Recent
-        </button>
-      </div>
-    {:else}
-      <div class="search-results-label">{displayedItems().length} result{displayedItems().length !== 1 ? 's' : ''} for "{searchQuery}"</div>
-    {/if}
-
-    <!-- Item rows -->
-    <div class="items-card">
-      {#each displayedItems() as item (item.id)}
-        <button class="item-row" class:has-issue={item.status === 'Issue'} class:has-review={item.status === 'Needs Review'} onclick={() => openDetail(item)}>
-          <div class="item-info">
-            <div class="item-name">{item.name}</div>
-            <div class="item-meta">Order #{item.order} · SKU: {item.sku}</div>
-          </div>
-          <span class="status-badge {statusColor(item.status)}">{item.status}</span>
-          <svg class="row-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
-        </button>
-      {/each}
-      {#if displayedItems().length === 0}
-        <div class="empty">No items found</div>
-      {/if}
-    </div>
-  </div>
-</div>
-
-<!-- Detail sheet/modal -->
-{#if detailOpen && selectedItem}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="detail-overlay" onclick={closeDetail}>
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="detail-sheet" onclick={(e) => e.stopPropagation()}>
-      <!-- 1. Title (editable) -->
-      <div class="detail-header">
-        {#if editingField === 'Item'}
-          <input
-            class="edit-input detail-title-edit"
-            type="text"
-            bind:value={editValue}
-            onkeydown={handleEditKeydown}
-            onblur={saveEdit}
-            autofocus
-          />
-        {:else}
-          <!-- svelte-ignore a11y_no_static_element_interactions -->
-          <div class="detail-title editable" onclick={() => startEdit('Item', rawField('Item'))}>{selectedItem.name}</div>
-        {/if}
-        <button class="detail-close" onclick={closeDetail}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-        </button>
-      </div>
-
-      <!-- 2. Status control (segmented) -->
-      <div class="status-control">
-        {#each statusOptions as status}
-          <button
-            class="status-seg"
-            class:active={selectedItem.status === status}
-            data-status={status}
-            onclick={() => changeStatus(status)}
-          >
-            {status}
-          </button>
-        {/each}
-      </div>
-
-      <!-- 3. Photos -->
-      <div class="detail-photos">
-        {#if selectedItem.photoUrls.length > 0}
-          {#each selectedItem.photoUrls as url}
-            <img class="photo-img" src={url} alt="Item photo" loading="lazy" />
-          {/each}
-        {:else}
-          <div class="photo-placeholder empty-photo">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
-            <span>No photos yet</span>
-          </div>
-        {/if}
-      </div>
-
-      <!-- 4. Actions -->
-      <div class="actions-group">
-        <div class="actions-row">
-          <input type="file" accept="image/*" multiple class="hidden-input" bind:this={fileInput} onchange={handleFileSelect} />
-          <button class="action-btn primary" onclick={() => uploadMenuOpen = !uploadMenuOpen} disabled={uploading}>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
-            {uploading ? 'Uploading...' : 'Upload Photos'}
-          </button>
-          {#if uploadMenuOpen}
-            <div class="upload-menu">
-              <button class="upload-option" onclick={() => { uploadMenuOpen = false; triggerUpload(); }}>
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-                From device
-              </button>
-              <button class="upload-option" onclick={() => { uploadMenuOpen = false; immichOpen = true; }}>
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
-                From Immich
-              </button>
-            </div>
-          {/if}
-          <button class="action-btn" onclick={sendToPhone}>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
-            Phone
-          </button>
-        </div>
-        <div class="actions-row secondary">
-          <button class="action-btn sm" onclick={duplicateItem}>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-            Duplicate
-          </button>
-          <a class="action-btn sm ghost" href={nocodbUrl || '#'} target="_blank" rel="noopener">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
-            NocoDB
-          </a>
-        </div>
-      </div>
-
-      <!-- Purchase -->
-      <div class="section-group">
-        <div class="section-label">Purchase</div>
-        <div class="detail-fields">
-          {@render editableRow('Price Per Item', formatPrice(selectedItem.price), 'mono')}
-          {@render editableRow('Tax', formatPrice(selectedItem.tax), 'mono')}
-          {@render editableRow('Total', formatPrice(selectedItem.total), 'mono strong')}
-          {@render editableRow('QTY', String(selectedItem.qty), '')}
-        </div>
-      </div>
-
-      <!-- Item Info -->
-      <div class="section-group">
-        <div class="section-label">Item Info</div>
-        <div class="detail-fields">
-          {@render editableRow('SKU', selectedItem.sku || '—', 'mono')}
-          {@render editableRow('Serial Numbers', selectedItem.serial || '—', 'mono')}
-        </div>
-      </div>
-
-      <!-- Order -->
-      <div class="section-group">
-        <div class="section-label">Order</div>
-        <div class="detail-fields">
-          {@render editableRow('Order Number', selectedItem.order || '—', 'mono')}
-          {@render editableRow('Source', selectedItem.vendor || '—', '')}
-          {@render editableRow('Name', selectedItem.buyerName || '—', '')}
-          {@render editableRow('Date', selectedItem.date || '—', '')}
-        </div>
-      </div>
-
-      <!-- Shipping -->
-      <div class="section-group">
-        <div class="section-label">Shipping</div>
-        <div class="detail-fields">
-          {@render editableRow('Tracking Number', selectedItem.tracking || '—', 'mono')}
-        </div>
-      </div>
-
-      <!-- Notes -->
-      <div class="section-group">
-        <div class="section-label">Notes</div>
-        <div class="detail-fields">
-          {#if editingField === 'Notes'}
-            <div class="detail-row">
-              <textarea
-                class="edit-input edit-textarea"
-                bind:value={editValue}
-                onkeydown={handleEditKeydown}
-                onblur={saveEdit}
-                rows="3"
-              ></textarea>
-            </div>
-          {:else}
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div class="detail-row editable" onclick={() => startEdit('Notes', rawField('Notes'))}>
-              <span class="field-value" style="text-align:left;font-weight:400;color:var(--text-2);width:100%">{selectedItem.notes || 'Add notes...'}</span>
-            </div>
-          {/if}
-        </div>
-      </div>
-    </div>
-  </div>
+{#if data?.useAtelierShell}
+	<AtelierInventoryPage />
+{:else}
+	<LegacyInventoryPage />
 {/if}
-
-{#if immichOpen}
-  <ImmichPicker bind:open={immichOpen} onselect={handleImmichSelect} />
-{/if}
-
-<style>
-  .header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
-  .page-subtitle { font-size: var(--text-2xl); font-weight: 300; color: var(--text-1); line-height: 1.2; }
-  .btn-primary { padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); transition: opacity var(--transition); }
-  .btn-primary:hover { opacity: 0.9; }
-
-  /* ── Search ── */
-  .search-wrap { position: relative; margin-bottom: var(--sp-4); }
-  .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-4); pointer-events: none; transition: color var(--transition); }
-  .search-input { width: 100%; padding: var(--sp-3) var(--sp-10) var(--sp-3) 42px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--card); color: var(--text-1); font-size: var(--text-md); font-family: var(--font); transition: all var(--transition); box-shadow: var(--shadow-xs); }
-  .search-input::placeholder { color: var(--text-4); }
-  .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim), var(--shadow-sm); }
-  .search-input:focus ~ .search-icon { color: var(--accent); }
-  .search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-4); padding: var(--sp-1); border-radius: var(--radius-xs); }
-  .search-clear:hover { color: var(--text-2); background: var(--card-hover); }
-  .search-clear svg { width: 16px; height: 16px; }
-  .search-results-label { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-3); }
-
-  /* ── Tabs ── */
-  .tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); }
-  .tab { padding: var(--sp-2) 14px; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; color: var(--text-3); background: none; border: none; cursor: pointer; transition: all var(--transition); font-family: var(--font); display: flex; align-items: center; gap: var(--sp-1.5); }
-  .tab:hover { color: var(--text-1); background: var(--card-hover); }
-  .tab.active { color: var(--text-1); background: var(--card); box-shadow: var(--shadow-xs); }
-  .tab-badge { font-size: var(--text-xs); font-weight: 600; background: var(--error); color: white; padding: 1px 7px; border-radius: 10px; }
-  .tab-badge.review { background: var(--warning); }
-  .tab-count { font-size: var(--text-xs); color: var(--text-4); }
-
-  /* ── Item rows ── */
-  .items-card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-md); overflow: hidden; }
-  .item-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; width: 100%; background: none; border: none; cursor: pointer; transition: background var(--transition); text-align: left; font-family: var(--font); color: inherit; }
-  .item-row:hover { background: var(--card-hover); }
-  .item-row + .item-row { border-top: 1px solid var(--border); }
-  .item-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 68%, var(--card)); }
-  .item-row:nth-child(even):hover { background: var(--card-hover); }
-  .item-row.has-issue { border-left: 4px solid var(--error); }
-  .item-row.has-review { border-left: 4px solid var(--warning); }
-  .item-info { flex: 1; min-width: 0; }
-  .item-name { font-size: var(--text-base); font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .item-meta { font-size: var(--text-sm); color: var(--text-2); margin-top: 3px; letter-spacing: 0.01em; }
-
-  .status-badge { font-size: var(--text-xs); font-weight: 500; padding: 3px 10px; border-radius: var(--radius-sm); flex-shrink: 0; }
-  .status-badge.error { background: var(--error-dim); color: var(--error); }
-  .status-badge.success { background: var(--success-dim); color: var(--success); }
-  .status-badge.warning { background: var(--warning-bg); color: var(--warning); }
-  .status-badge.muted { background: var(--card-hover); color: var(--text-4); }
-
-  .row-chevron { width: 14px; height: 14px; color: var(--text-4); flex-shrink: 0; opacity: 0.5; }
-  .item-row:hover .row-chevron { opacity: 1; }
-  .empty { padding: var(--sp-12); text-align: center; color: var(--text-3); font-size: var(--text-base); }
-
-  /* ── Detail sheet ── */
-  .detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 60; display: flex; justify-content: flex-end; animation: fadeIn 150ms ease; }
-  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-  .detail-sheet { width: 520px; max-width: 100%; height: 100%; background: var(--surface); overflow-y: auto; padding: var(--sp-7); box-shadow: -12px 0 40px rgba(0,0,0,0.12); animation: slideIn 200ms ease; }
-  @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
-
-  .detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: 18px; }
-  .detail-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-1); line-height: 1.35; flex: 1; min-width: 0; }
-
-  /* ── Status segmented control ── */
-  .status-control {
-    display: flex;
-    justify-content: center;
-    gap: 0;
-    margin: 0 8px 22px;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 3px;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
-  }
-  .status-seg {
-    flex: 1;
-    padding: 8px 0;
-    font-size: var(--text-sm);
-    font-weight: 500;
-    color: var(--text-3);
-    background: none;
-    border: none;
-    border-radius: 9px;
-    cursor: pointer;
-    font-family: var(--font);
-    transition: all var(--transition);
-    text-align: center;
-  }
-  .status-seg:hover { color: var(--text-2); }
-  .status-seg.active { color: var(--text-1); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
-  .status-seg.active[data-status="Issue"] { background: var(--error-dim); color: var(--error); }
-  .status-seg.active[data-status="Pending"] { background: var(--warning-bg); color: var(--warning); }
-  .status-seg.active[data-status="Received"] { background: var(--success-dim); color: var(--success); }
-  .status-seg.active[data-status="Closed"] { background: var(--card); color: var(--text-2); }
-  .detail-close { background: none; border: none; cursor: pointer; color: var(--text-4); padding: var(--sp-1.5); border-radius: var(--radius-md); transition: all var(--transition); }
-  .detail-close:hover { color: var(--text-1); background: var(--card-hover); }
-  .detail-close svg { width: 18px; height: 18px; }
-
-  /* ── Photos ── */
-  .detail-photos { display: flex; gap: 10px; margin-bottom: var(--sp-5); overflow-x: auto; padding-bottom: var(--sp-1); }
-  .detail-photos::-webkit-scrollbar { height: 4px; }
-  .detail-photos::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
-  .photo-img { width: 140px; height: 105px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--card-hover); }
-  .photo-placeholder { width: 140px; height: 105px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 70%, var(--card)); border: 1px dashed var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1.5); flex-shrink: 0; color: var(--text-4); }
-  .photo-placeholder svg { width: 22px; height: 22px; opacity: 0.5; }
-  .empty-photo { width: 100%; height: 90px; border-radius: 10px; }
-  .empty-photo span { font-size: var(--text-sm); color: var(--text-4); }
-
-  /* ── Actions ── */
-  .actions-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-7); }
-  .actions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
-  .actions-row.secondary { grid-template-columns: repeat(2, 1fr); }
-  .action-btn {
-    display: flex; align-items: center; justify-content: center; gap: 5px;
-    padding: 8px 14px; border-radius: var(--radius-md); height: 34px; width: 100%;
-    background: var(--card); border: 1px solid var(--border);
-    font-size: var(--text-sm); font-weight: 500; color: var(--text-3);
-    cursor: pointer; font-family: var(--font);
-    transition: all var(--transition);
-  }
-  .action-btn:hover { border-color: var(--text-4); color: var(--text-1); }
-  .action-btn:active { transform: scale(0.97); }
-  .action-btn.primary { background: var(--accent); border-color: var(--accent); color: white; }
-  .action-btn.primary:hover { opacity: 0.9; border-color: var(--accent); color: white; }
-  .action-btn.sm { padding: 6px 11px; font-size: var(--text-sm); height: 30px; }
-  .action-btn.ghost { border-color: transparent; color: var(--text-4); background: none; }
-  .action-btn.ghost:hover { color: var(--text-2); background: var(--card-hover); border-color: transparent; }
-  .action-btn svg { width: 14px; height: 14px; }
-  .action-btn.sm svg { width: 13px; height: 13px; }
-
-  /* ── Section groups ── */
-  .section-group { margin-bottom: var(--sp-7); }
-  .section-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin-bottom: var(--sp-1.5); }
-
-  /* ── Detail fields ── */
-  .detail-fields { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
-  .detail-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
-  .detail-row + .detail-row { border-top: 1px solid var(--border); }
-  .detail-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 70%, var(--card)); }
-  .field-label { font-size: var(--text-sm); color: var(--text-1); opacity: 0.65; letter-spacing: 0.01em; }
-  .field-value { font-size: var(--text-base); font-weight: 400; color: var(--text-1); text-align: right; letter-spacing: -0.01em; }
-
-  /* ── Inline editing ── */
-  .detail-row.editable { cursor: pointer; }
-  .detail-row.editable:hover { background: var(--card-hover); }
-  .detail-title.editable { cursor: pointer; border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -4px; }
-  .detail-title.editable:hover { background: var(--card-hover); }
-  .edit-input {
-    width: 100%; padding: 6px 10px; border-radius: var(--radius-sm);
-    border: 1px solid var(--accent); background: var(--surface-secondary);
-    color: var(--text-1); font-size: var(--text-base); font-family: var(--font);
-    text-align: right; outline: none;
-    box-shadow: 0 0 0 3px var(--accent-border);
-  }
-  .edit-input.mono { font-family: var(--mono); }
-  .edit-input[type="number"] { font-family: var(--mono); }
-  .detail-title-edit {
-    font-size: var(--text-lg); font-weight: 600; text-align: left;
-    flex: 1; min-width: 0;
-  }
-  .edit-textarea {
-    text-align: left; resize: vertical; min-height: 60px;
-    width: 100%; font-size: var(--text-sm); line-height: 1.5;
-  }
-  .detail-row.editing { background: var(--accent-dim); }
-  .hidden-input { display: none; }
-  .upload-menu {
-    position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--sp-1); z-index: 10;
-    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.12); overflow: hidden;
-  }
-  .upload-option {
-    display: flex; align-items: center; gap: 10px; width: 100%;
-    padding: 12px 16px; background: none; border: none; border-bottom: 1px solid var(--border);
-    font-size: var(--text-base); font-weight: 500; color: var(--text-1); cursor: pointer;
-    font-family: var(--font); transition: background var(--transition); text-align: left;
-  }
-  .upload-option:last-child { border-bottom: none; }
-  .upload-option:hover { background: var(--card-hover); }
-  .upload-option svg { width: 18px; height: 18px; color: var(--text-3); }
-  .actions-row { position: relative; }
-  .field-value.mono { font-family: var(--mono); }
-  .field-value.strong { font-weight: 600; color: var(--text-1); }
-
-  /* ── Mobile ── */
-  @media (max-width: 768px) {
-    .page-subtitle { font-size: var(--text-xl); }
-    .detail-sheet { width: 100%; padding: var(--sp-5); }
-    .detail-photos { gap: var(--sp-2); }
-    .photo-img { width: 120px; height: 90px; }
-    .photo-placeholder { width: 120px; height: 90px; }
-    .detail-title { font-size: var(--text-lg); }
-  }
-</style>
diff --git a/frontend-v2/src/routes/(app)/reader/+page.svelte b/frontend-v2/src/routes/(app)/reader/+page.svelte
index 1ae89a9..a54461b 100644
--- a/frontend-v2/src/routes/(app)/reader/+page.svelte
+++ b/frontend-v2/src/routes/(app)/reader/+page.svelte
@@ -1,880 +1,12 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+	import AtelierReaderPage from '$lib/pages/reader/AtelierReaderPage.svelte';
+	import LegacyReaderPage from '$lib/pages/reader/LegacyReaderPage.svelte';
 
-  // ── Types ──
-  interface Feed { name: string; count: number; id?: number; }
-  interface FeedCategory { name: string; feeds: Feed[]; expanded: boolean; id?: number; }
-  interface Article {
-    id: number; title: string; feed: string; timeAgo: string; readingTime: string;
-    content: string; thumbnail?: string; starred: boolean; read: boolean;
-    author?: string; url?: string;
-  }
-
-  // ── State ──
-  let navItems = $state([
-    { label: 'Today', count: 0, icon: 'calendar' },
-    { label: 'Starred', count: 0, icon: 'star' },
-    { label: 'History', count: 0, icon: 'clock' }
-  ]);
-  let feedCategories = $state<FeedCategory[]>([]);
-  let articles = $state<Article[]>([]);
-  let activeNav = $state('Today');
-  let activeFeedId = $state<number | null>(null);
-  let selectedArticle = $state<Article | null>(null);
-  let filterMode = $state<'unread' | 'all'>('unread');
-  let sidebarOpen = $state(false);
-  let autoScrollActive = $state(false);
-  let autoScrollSpeed = $state(1.5);
-  let articleListEl: HTMLDivElement;
-  let scrollRAF: number | null = null;
-  let loading = $state(true);
-  let loadingMore = $state(false);
-  let hasMore = $state(true);
-  let totalUnread = $state(0);
-
-  const LIMIT = 50;
-  let feedCounters: Record<string, number> = {};
-
-  // ── Helpers ──
-  function timeAgo(dateStr: string): string {
-    const mins = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000);
-    if (mins < 1) return 'now';
-    if (mins < 60) return `${mins}m ago`;
-    const hrs = Math.floor(mins / 60);
-    if (hrs < 24) return `${hrs}h ago`;
-    const days = Math.floor(hrs / 24);
-    return `${days}d ago`;
-  }
-
-  function extractThumb(html: string): string | null {
-    const match = html?.match(/<img[^>]+src=["']([^"']+)["']/i);
-    if (!match) return null;
-    return match[1].replace(/&amp;/g, '&');
-  }
-
-  function stripHtml(html: string): string {
-    if (!html) return '';
-    return html.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/\s+/g, ' ').trim();
-  }
-
-  function mapEntry(e: any): Article {
-    return {
-      id: e.id, title: e.title, feed: e.feed?.title || '', url: e.url,
-      timeAgo: timeAgo(e.published_at), readingTime: `${e.reading_time || 1} min`,
-      content: e.content || '', thumbnail: extractThumb(e.content),
-      starred: e.starred || false, read: e.status === 'read',
-      author: e.author || ''
-    };
-  }
-
-  // ── API ──
-  async function api(path: string, opts: RequestInit = {}) {
-    const res = await fetch(`/api/reader${path}`, { credentials: 'include', ...opts });
-    if (!res.ok) throw new Error(`${res.status}`);
-    return res.json();
-  }
-
-  async function loadSidebar() {
-    try {
-      const [cats, feeds, counters] = await Promise.all([
-        api('/categories'), api('/feeds'), api('/feeds/counters')
-      ]);
-      feedCounters = counters.unreads || {};
-      totalUnread = Object.values(feedCounters).reduce((s: number, c: any) => s + (c as number), 0);
-
-      feedCategories = cats.map((c: any) => ({
-        id: c.id, name: c.title,
-        expanded: false,
-        feeds: feeds
-          .filter((f: any) => f.category.id === c.id)
-          .map((f: any) => ({ id: f.id, name: f.title, count: feedCounters[String(f.id)] || 0 }))
-      })).filter((c: FeedCategory) => c.feeds.length > 0);
-
-      // Expand first category
-      if (feedCategories.length > 0) feedCategories[0].expanded = true;
-
-      // Update nav counts
-      navItems[0].count = totalUnread;
-      try {
-        const [starred, history] = await Promise.all([
-          api('/entries?starred=true&limit=1'),
-          api('/entries?status=read&limit=1')
-        ]);
-        navItems[1].count = starred.total || 0;
-        navItems[2].count = history.total || 0;
-      } catch { /* silent */ }
-    } catch { /* silent */ }
-  }
-
-  async function loadEntries(append = false) {
-    if (loadingMore) return;
-    if (!append) { loading = true; articles = []; hasMore = true; }
-    else loadingMore = true;
-
-    try {
-      let params = `limit=${LIMIT}&direction=desc&order=published_at`;
-      if (!append) params += '&offset=0';
-      else params += `&offset=${articles.length}`;
-
-      if (activeFeedId) {
-        params += `&feed_id=${activeFeedId}`;
-      }
-
-      if (activeNav === 'Today') {
-        params += '&status=unread';
-      } else if (activeNav === 'Starred') {
-        params += '&starred=true';
-      } else if (activeNav === 'History') {
-        params += '&status=read';
-      }
-
-      const data = await api(`/entries?${params}`);
-      const mapped = (data.entries || []).map(mapEntry);
-
-      if (append) {
-        articles = [...articles, ...mapped];
-      } else {
-        articles = mapped;
-      }
-      hasMore = mapped.length === LIMIT;
-    } catch { /* silent */ }
-    finally { loading = false; loadingMore = false; }
-  }
-
-  async function markEntryRead(id: number) {
-    try {
-      await api('/entries', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ entry_ids: [id], status: 'read' })
-      });
-    } catch { /* silent */ }
-  }
-
-  async function markEntryUnread(id: number) {
-    try {
-      await api('/entries', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ entry_ids: [id], status: 'unread' })
-      });
-    } catch { /* silent */ }
-  }
-
-  async function toggleStarAPI(id: number) {
-    try {
-      await api(`/entries/${id}/bookmark`, { method: 'PUT' });
-    } catch { /* silent */ }
-  }
-
-  async function markAllReadAPI() {
-    const ids = articles.filter(a => !a.read).map(a => a.id);
-    if (!ids.length) return;
-    try {
-      await api('/entries', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ entry_ids: ids, status: 'read' })
-      });
-    } catch { /* silent */ }
-  }
-
-  // ── Karakeep ──
-  let karakeepIds = $state<Record<number, string>>({});
-  let savingToKarakeep = $state<Set<number>>(new Set());
-
-  async function toggleKarakeep(article: Article, e?: Event) {
-    e?.stopPropagation();
-    e?.preventDefault();
-    if (savingToKarakeep.has(article.id)) return;
-    const articleUrl = article.url || '';
-    console.log('Karakeep: saving', article.id, articleUrl);
-    if (!articleUrl && !karakeepIds[article.id]) {
-      console.log('Karakeep: no URL, skipping');
-      return;
-    }
-    savingToKarakeep = new Set([...savingToKarakeep, article.id]);
-    try {
-      if (karakeepIds[article.id]) {
-        const res = await fetch('/api/karakeep/delete', {
-          method: 'POST', credentials: 'include',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ id: karakeepIds[article.id] })
-        });
-        console.log('Karakeep delete:', res.status);
-        const next = { ...karakeepIds };
-        delete next[article.id];
-        karakeepIds = next;
-      } else {
-        const res = await fetch('/api/karakeep/save', {
-          method: 'POST', credentials: 'include',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ url: articleUrl })
-        });
-        const text = await res.text();
-        console.log('Karakeep save:', res.status, text);
-        try {
-          const data = JSON.parse(text);
-          if (res.ok && data.ok) {
-            karakeepIds = { ...karakeepIds, [article.id]: data.id };
-            console.log('Karakeep: saved as', data.id);
-          }
-        } catch { console.error('Karakeep: bad JSON response'); }
-      }
-    } catch (err) {
-      console.error('Karakeep error:', err);
-    } finally {
-      const next = new Set(savingToKarakeep);
-      next.delete(article.id);
-      savingToKarakeep = next;
-    }
-  }
-
-  // ── Touch to stop auto-scroll ──
-  function handleScrollInterrupt() {
-    if (autoScrollActive) stopAutoScroll();
-  }
-
-  // ── Event handlers ──
-  function decrementUnread(count = 1) {
-    totalUnread = Math.max(0, totalUnread - count);
-    navItems[0].count = totalUnread;
-    navItems = [...navItems];
-  }
-
-  const filteredArticles = $derived(articles);
-
-  const currentIndex = $derived(
-    selectedArticle ? filteredArticles.findIndex(a => a.id === selectedArticle!.id) : -1
-  );
-
-  function selectArticle(article: Article) {
-    selectedArticle = article;
-    if (!article.read) {
-      article.read = true;
-      articles = [...articles];
-      markEntryRead(article.id);
-      decrementUnread();
-    }
-  }
-
-  function closeArticle() { selectedArticle = null; }
-
-  function toggleStar(article: Article, e?: Event) {
-    e?.stopPropagation();
-    article.starred = !article.starred;
-    articles = [...articles];
-    toggleStarAPI(article.id);
-  }
-
-  function toggleRead(article: Article) {
-    const wasRead = article.read;
-    article.read = !article.read;
-    articles = [...articles];
-    if (article.read) { markEntryRead(article.id); decrementUnread(); }
-    else { markEntryUnread(article.id); totalUnread++; navItems[0].count = totalUnread; navItems = [...navItems]; }
-  }
-
-  function markAllRead() {
-    const unreadCount = articles.filter(a => !a.read).length;
-    markAllReadAPI();
-    articles = articles.map(a => ({ ...a, read: true }));
-    decrementUnread(unreadCount);
-  }
-
-  function goNext() {
-    if (currentIndex < filteredArticles.length - 1) selectArticle(filteredArticles[currentIndex + 1]);
-  }
-  function goPrev() {
-    if (currentIndex > 0) selectArticle(filteredArticles[currentIndex - 1]);
-  }
-
-  function toggleCategory(index: number) {
-    feedCategories[index].expanded = !feedCategories[index].expanded;
-  }
-
-  function selectFeed(feedId: number) {
-    activeFeedId = feedId;
-    activeNav = '';
-    sidebarOpen = false;
-    loadEntries();
-  }
-
-  function selectNav(label: string) {
-    activeNav = label;
-    activeFeedId = null;
-    sidebarOpen = false;
-    loadEntries();
-  }
-
-  // ── Auto-scroll (requestAnimationFrame for smoothness) ──
-  function startAutoScroll() {
-    if (scrollRAF) cancelAnimationFrame(scrollRAF);
-    if (!articleListEl) return;
-    autoScrollActive = true;
-    function step() {
-      if (!autoScrollActive || !articleListEl) return;
-      articleListEl.scrollTop += autoScrollSpeed;
-      scrollRAF = requestAnimationFrame(step);
-    }
-    scrollRAF = requestAnimationFrame(step);
-  }
-  function stopAutoScroll() {
-    autoScrollActive = false;
-    if (scrollRAF) { cancelAnimationFrame(scrollRAF); scrollRAF = null; }
-  }
-  function toggleAutoScroll() {
-    if (autoScrollActive) stopAutoScroll();
-    else startAutoScroll();
-  }
-  function adjustSpeed(delta: number) {
-    autoScrollSpeed = Math.max(0.5, Math.min(5, +(autoScrollSpeed + delta).toFixed(1)));
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'j' || e.key === 'ArrowDown') { e.preventDefault(); goNext(); }
-    if (e.key === 'k' || e.key === 'ArrowUp') { e.preventDefault(); goPrev(); }
-    if (e.key === 'Escape' && selectedArticle) { closeArticle(); }
-    if (e.key === 's' && selectedArticle) { toggleStar(selectedArticle); }
-    if (e.key === 'm' && selectedArticle) { toggleRead(selectedArticle); }
-  }
-
-  // ── Mark-as-read on scroll (throttled to avoid jitter) ──
-  let pendingReadIds: number[] = [];
-  let flushTimer: ReturnType<typeof setTimeout> | null = null;
-  let scrollCheckTimer: ReturnType<typeof setTimeout> | null = null;
-
-  function handleListScroll() {
-    // Throttle: only check every 400ms
-    if (scrollCheckTimer) return;
-    scrollCheckTimer = setTimeout(() => {
-      scrollCheckTimer = null;
-      checkScrolledCards();
-    }, 400);
-  }
-
-  function checkScrolledCards() {
-    if (!articleListEl) return;
-
-    // Infinite scroll — load more when near bottom
-    const { scrollTop, scrollHeight, clientHeight } = articleListEl;
-    if (hasMore && !loadingMore && scrollHeight - scrollTop - clientHeight < 300) {
-      loadEntries(true);
-    }
-
-    const listTop = articleListEl.getBoundingClientRect().top;
-    const cards = articleListEl.querySelectorAll('[data-entry-id]');
-    let newlyRead = 0;
-
-    cards.forEach(card => {
-      if (card.getBoundingClientRect().bottom < listTop + 20) {
-        const id = Number(card.getAttribute('data-entry-id'));
-        if (!id) return;
-        const article = articles.find(a => a.id === id);
-        if (article && !article.read) {
-          article.read = true;
-          pendingReadIds.push(id);
-          newlyRead++;
-        }
-      }
-    });
-
-    if (newlyRead > 0) {
-      articles = [...articles];
-      decrementUnread(newlyRead);
-      if (flushTimer) clearTimeout(flushTimer);
-      flushTimer = setTimeout(flushPendingReads, 1000);
-    }
-  }
-
-  async function flushPendingReads() {
-    if (!pendingReadIds.length) return;
-    const ids = [...pendingReadIds];
-    pendingReadIds = [];
-    try {
-      await api('/entries', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ entry_ids: ids, status: 'read' })
-      });
-    } catch { /* silent */ }
-  }
-
-  // ── Init ──
-  onMount(() => {
-    loadSidebar();
-    loadEntries();
-    return () => {
-      if (flushTimer) clearTimeout(flushTimer);
-    };
-  });
+	let { data } = $props();
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-<div class="reader-layout">
-
-  <!-- Left Sidebar -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <aside class="reader-sidebar" class:open={sidebarOpen}>
-    <div class="sidebar-header">
-      <svg class="rss-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
-      <span class="sidebar-title">Reader</span>
-    </div>
-
-    <nav class="sidebar-nav">
-      {#each navItems as item}
-        <button
-          class="nav-item"
-          class:active={activeNav === item.label}
-          onclick={() => selectNav(item.label)}
-        >
-          <div class="nav-icon">
-            {#if item.icon === 'inbox'}
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
-            {:else if item.icon === 'calendar'}
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-            {:else if item.icon === 'star'}
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
-            {:else}
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
-            {/if}
-          </div>
-          <span class="nav-label">{item.label}</span>
-          {#if item.count > 0}
-            <span class="nav-count">{item.count}</span>
-          {/if}
-        </button>
-      {/each}
-    </nav>
-
-    <div class="sidebar-separator"></div>
-
-    <div class="feeds-section">
-      <div class="feeds-header">Feeds</div>
-      {#each feedCategories as cat, i}
-        <div class="feed-category">
-          <button class="category-toggle" onclick={() => toggleCategory(i)}>
-            <svg class="expand-icon" class:expanded={cat.expanded} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
-            <span class="category-name">{cat.name}</span>
-            <span class="category-count">{cat.feeds.reduce((s, f) => s + f.count, 0)}</span>
-          </button>
-          {#if cat.expanded}
-            <div class="feed-list">
-              {#each cat.feeds as feed}
-                <button class="feed-item" onclick={() => selectFeed(feed.id || 0)}>
-                  <span class="feed-name">{feed.name}</span>
-                  {#if feed.count > 0}
-                    <span class="feed-count">{feed.count}</span>
-                  {/if}
-                </button>
-              {/each}
-            </div>
-          {/if}
-        </div>
-      {/each}
-    </div>
-  </aside>
-
-  <!-- Sidebar overlay for mobile -->
-  {#if sidebarOpen}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="sidebar-overlay" onclick={() => sidebarOpen = false}></div>
-  {/if}
-
-  <!-- Middle Panel: Article List -->
-  <div class="reader-list">
-    <div class="list-header">
-      <div class="list-header-top">
-        <button class="mobile-menu" onclick={() => sidebarOpen = !sidebarOpen} aria-label="Toggle sidebar">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
-        </button>
-        <div class="list-view-name">{activeFeedId ? feedCategories.flatMap(c => c.feeds).find(f => f.id === activeFeedId)?.name || 'Feed' : activeNav} <span class="list-count">{activeNav === 'Today' && !activeFeedId ? totalUnread : filteredArticles.length}</span></div>
-        <div class="list-actions">
-          <button class="btn-icon" title="Refresh">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
-          </button>
-          <button class="btn-icon" title="Mark all read" onclick={markAllRead}>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
-          </button>
-          <button class="btn-icon" class:active-icon={autoScrollActive} onclick={toggleAutoScroll} title="Auto-scroll feed">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14"/><path d="M19 12l-7 7-7-7"/></svg>
-          </button>
-          {#if autoScrollActive}
-            <div class="speed-control">
-              <button class="speed-btn" onclick={() => adjustSpeed(-0.5)}>-</button>
-              <span class="speed-value">{autoScrollSpeed}x</span>
-              <button class="speed-btn" onclick={() => adjustSpeed(0.5)}>+</button>
-            </div>
-          {/if}
-        </div>
-      </div>
-    </div>
-
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="article-list" bind:this={articleListEl} ontouchstart={handleScrollInterrupt} onwheel={handleScrollInterrupt} onscroll={handleListScroll}>
-      {#each filteredArticles as article (article.id)}
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div
-          class="article-card"
-          class:selected={selectedArticle?.id === article.id}
-          class:is-read={article.read}
-          data-entry-id={article.id}
-          onclick={() => selectArticle(article)}
-        >
-          <!-- Card header: source + time + actions -->
-          <div class="card-header">
-            <div class="card-source">
-              <svg class="card-rss" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
-              <span class="card-feed-name">{article.feed}</span>
-              {#if article.author}
-                <span class="card-author">· {article.author}</span>
-              {/if}
-            </div>
-            <div class="card-header-right">
-              <button class="bookmark-btn" class:saved={!!karakeepIds[article.id]} onclick={(e) => toggleKarakeep(article, e)} title={karakeepIds[article.id] ? 'Saved to Karakeep' : 'Save to Karakeep'}>
-                {#if savingToKarakeep.has(article.id)}
-                  <svg class="spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
-                {:else}
-                  <svg viewBox="0 0 24 24" fill={karakeepIds[article.id] ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
-                {/if}
-              </button>
-              <span class="card-time">{article.timeAgo}</span>
-            </div>
-          </div>
-
-          <!-- Title -->
-          <div class="card-title">{article.title}</div>
-
-          <!-- Banner image -->
-          {#if article.thumbnail}
-            <div class="card-banner" style="background-image:url('{article.thumbnail}')"></div>
-          {/if}
-
-          <!-- Preview text -->
-          <div class="card-preview">{stripHtml(article.content).slice(0, 200)}</div>
-
-          <!-- Footer -->
-          <div class="card-footer">
-            <span class="card-reading-time">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
-              {article.readingTime}
-            </span>
-          </div>
-        </div>
-      {/each}
-      {#if filteredArticles.length === 0}
-        <div class="list-empty">No articles to show</div>
-      {/if}
-    </div>
-  </div>
-</div>
-
-<!-- Reading pane — slide-in overlay -->
-{#if selectedArticle}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="pane-overlay" onclick={closeArticle}>
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="pane-sheet" onclick={(e) => e.stopPropagation()}>
-      <div class="pane-toolbar">
-        <div class="pane-nav">
-          <button class="pane-nav-btn" onclick={closeArticle} title="Close (Esc)">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-          </button>
-          <button class="pane-nav-btn" onclick={goPrev} disabled={currentIndex <= 0} title="Previous (k)">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
-          </button>
-          <span class="pane-nav-pos">{currentIndex + 1} / {filteredArticles.length}</span>
-          <button class="pane-nav-btn" onclick={goNext} disabled={currentIndex >= filteredArticles.length - 1} title="Next (j)">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
-          </button>
-        </div>
-        <div class="pane-actions">
-          <button class="pane-action-btn" class:saved-karakeep={!!karakeepIds[selectedArticle.id]} onclick={() => toggleKarakeep(selectedArticle!)} title={karakeepIds[selectedArticle.id] ? 'Saved to Karakeep' : 'Save to Karakeep'}>
-            {#if savingToKarakeep.has(selectedArticle.id)}
-              <svg class="spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
-            {:else}
-              <svg viewBox="0 0 24 24" fill={karakeepIds[selectedArticle.id] ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
-            {/if}
-          </button>
-          <button class="pane-action-btn" onclick={() => toggleRead(selectedArticle!)} title="Toggle read (m)">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-          </button>
-          {#if selectedArticle.url}
-            <a href={selectedArticle.url} target="_blank" rel="noopener" class="pane-action-btn" title="Open original">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
-            </a>
-          {/if}
-        </div>
-      </div>
-
-      <div class="pane-scroll">
-        <div class="pane-content">
-          <h1 class="pane-title">{selectedArticle.title}</h1>
-          <div class="pane-meta">
-            <span class="pane-source">{selectedArticle.feed}</span>
-            <span class="pane-dot"></span>
-            <span>{selectedArticle.timeAgo}</span>
-            <span class="pane-dot"></span>
-            <span>{selectedArticle.readingTime} read</span>
-            {#if selectedArticle.author}
-              <span class="pane-dot"></span>
-              <span class="pane-author">by {selectedArticle.author}</span>
-            {/if}
-          </div>
-          <div class="pane-body">
-            {@html selectedArticle.content}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+{#if data?.useAtelierShell}
+	<AtelierReaderPage />
+{:else}
+	<LegacyReaderPage />
 {/if}
-
-<style>
-  .reader-layout {
-    display: flex; height: calc(100vh - 56px);
-    overflow: hidden; position: relative;
-  }
-
-  /* ── Mobile menu ── */
-  .mobile-menu {
-    display: none; width: 30px; height: 30px; border-radius: var(--radius-sm);
-    background: none; border: 1px solid var(--border);
-    align-items: center; justify-content: center; cursor: pointer;
-    flex-shrink: 0; transition: all var(--transition);
-  }
-  .mobile-menu:hover { background: var(--card-hover); }
-  .mobile-menu svg { width: 16px; height: 16px; color: var(--text-3); }
-
-  /* ── Sidebar ── */
-  .reader-sidebar {
-    width: 220px; flex-shrink: 0; background: var(--surface);
-    border-right: 1px solid var(--border); display: flex;
-    flex-direction: column; overflow-y: auto; padding: var(--sp-4) 0 var(--sp-3);
-  }
-  .sidebar-header { display: flex; align-items: center; gap: 7px; padding: 0 16px 12px; }
-  .rss-icon { width: 16px; height: 16px; color: var(--accent); }
-  .sidebar-title { font-size: var(--text-base); font-weight: 600; color: var(--text-1); }
-
-  .sidebar-nav { display: flex; flex-direction: column; gap: var(--sp-0.5); padding: 0 10px; }
-  .nav-item {
-    display: flex; align-items: center; gap: var(--sp-2);
-    padding: var(--sp-2) 10px; border-radius: var(--radius-sm); background: none; border: none;
-    font-size: var(--text-sm); color: var(--text-3); cursor: pointer;
-    transition: all var(--transition); text-align: left; width: 100%; font-family: var(--font);
-  }
-  .nav-item:hover { background: var(--card-hover); color: var(--text-1); }
-  .nav-item.active { background: none; color: var(--accent); font-weight: 600; border-left: 2px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-left: 8px; }
-  .nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
-  .nav-icon svg { width: 15px; height: 15px; }
-  .nav-label { flex: 1; }
-  .nav-count { font-size: var(--text-xs); color: var(--text-4); font-family: var(--mono); }
-  .nav-item.active .nav-count { color: var(--accent); opacity: 0.7; }
-
-  .sidebar-separator { height: 1px; background: var(--border); margin: 10px 16px; }
-
-  .feeds-section { padding: 0 10px; flex: 1; }
-  .feeds-header { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); padding: 4px 10px 6px; }
-  .feed-category { margin-bottom: 1px; }
-  .category-toggle {
-    display: flex; align-items: center; gap: 5px; width: 100%;
-    padding: 5px 10px; background: none; border: none; font-size: var(--text-sm);
-    font-weight: 500; color: var(--text-2); cursor: pointer; border-radius: var(--radius-sm);
-    transition: all var(--transition); font-family: var(--font);
-  }
-  .category-toggle:hover { background: var(--card-hover); }
-  .category-name { flex: 1; text-align: left; }
-  .category-count { font-size: var(--text-xs); color: var(--text-4); font-family: var(--mono); }
-  .expand-icon { width: 11px; height: 11px; transition: transform var(--transition); flex-shrink: 0; color: var(--text-4); }
-  .expand-icon.expanded { transform: rotate(90deg); }
-
-  .feed-list { padding-left: var(--sp-4); }
-  .feed-item {
-    display: flex; align-items: center; justify-content: space-between; width: 100%;
-    padding: 4px 10px; background: none; border: none; font-size: var(--text-sm);
-    color: var(--text-3); cursor: pointer; border-radius: var(--radius-sm);
-    transition: all var(--transition); text-align: left; font-family: var(--font);
-  }
-  .feed-item:hover { background: var(--card-hover); color: var(--text-1); }
-  .feed-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .feed-count { font-size: var(--text-xs); font-family: var(--mono); color: var(--text-4); flex-shrink: 0; margin-left: var(--sp-1.5); }
-
-  .sidebar-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 39; }
-
-  /* ── Feed list panel ── */
-  .reader-list {
-    flex: 1; min-width: 0;
-    display: flex; flex-direction: column; background: var(--canvas);
-  }
-  .list-header { padding: 12px 20px 10px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
-  .list-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
-  .list-view-name { font-size: var(--text-base); font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: var(--sp-1.5); }
-  .list-count { font-size: var(--text-xs); font-weight: 400; color: var(--text-4); font-family: var(--mono); }
-  .list-actions { display: flex; gap: var(--sp-1); }
-  .btn-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); background: none; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-3); transition: all var(--transition); }
-  .btn-icon:hover { color: var(--text-1); background: var(--card-hover); }
-  .btn-icon.active-icon { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
-  .btn-icon svg { width: 14px; height: 14px; }
-
-  .list-filters { display: flex; gap: var(--sp-1); }
-  .filter-btn {
-    padding: 4px 10px 6px; border-radius: 0; background: none;
-    border: none; border-bottom: 2px solid transparent; font-size: var(--text-sm); font-weight: 500;
-    color: var(--text-3); cursor: pointer; transition: all var(--transition); font-family: var(--font);
-    position: relative;
-  }
-  .filter-btn:hover { color: var(--text-2); }
-  .filter-btn.active { color: var(--text-1); font-weight: 600; border-bottom-color: var(--accent); }
-
-  .speed-control { display: flex; align-items: center; gap: var(--sp-0.5); margin-left: var(--sp-1); }
-  .speed-btn {
-    width: 22px; height: 22px; border-radius: var(--radius-xs); background: var(--card);
-    border: 1px solid var(--border); font-size: var(--text-sm); font-weight: 600;
-    color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
-  }
-  .speed-btn:hover { color: var(--text-1); }
-  .speed-value { font-size: var(--text-xs); font-family: var(--mono); color: var(--text-2); min-width: 24px; text-align: center; }
-
-  /* ── Article cards (feed style) ── */
-  .article-list { flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-5) var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-2); }
-  .article-card {
-    padding: 14px 16px; border-radius: var(--radius);
-    background: var(--card); border: none;
-    box-shadow: var(--card-shadow-sm);
-    cursor: pointer; transition: all var(--transition);
-  }
-  .article-card:hover { box-shadow: var(--card-shadow); transform: translateY(-1px); }
-  .article-card.selected { box-shadow: 0 0 0 1.5px var(--accent); }
-  .article-card.is-read { opacity: 0.6; }
-  .article-card.is-read .card-title { color: var(--text-3); }
-  .article-card.is-read .card-preview { color: var(--text-4); }
-  .article-card.is-read:hover { opacity: 0.8; }
-
-  .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
-  .card-source { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); color: var(--text-3); font-weight: 500; min-width: 0; }
-  .card-rss { width: 12px; height: 12px; color: var(--text-4); flex-shrink: 0; }
-  .card-feed-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .card-author { color: var(--text-4); font-weight: 400; white-space: nowrap; }
-  .card-header-right { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
-  .card-time { font-size: var(--text-xs); color: var(--text-4); }
-  .star-btn {
-    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
-    background: none; border: none; cursor: pointer; color: var(--text-4); border-radius: var(--radius-sm);
-    transition: all var(--transition); opacity: 0;
-  }
-  .article-card:hover .star-btn { opacity: 1; }
-  .star-btn.starred { opacity: 1; color: #F59E0B; }
-  .star-btn:hover { color: #F59E0B; }
-  .star-btn svg { width: 13px; height: 13px; }
-
-  .bookmark-btn {
-    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
-    background: none; border: none; cursor: pointer; color: var(--text-4); border-radius: var(--radius-sm);
-    transition: all var(--transition); opacity: 0.5;
-  }
-  .article-card:hover .bookmark-btn { opacity: 0.8; }
-  .bookmark-btn.saved { opacity: 1; color: #F59E0B; }
-  .bookmark-btn:hover { opacity: 1; color: #F59E0B; }
-  .bookmark-btn svg { width: 13px; height: 13px; }
-
-  .spinning { animation: spin 0.8s linear infinite; }
-  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-
-  .card-title { font-size: var(--text-md); font-weight: 600; color: var(--text-1); line-height: 1.35; margin-bottom: var(--sp-1.5); }
-  .card-banner { width: 100%; height: 160px; border-radius: var(--radius-md); background: var(--card-hover) center/cover no-repeat; margin-bottom: var(--sp-2); }
-  .card-preview { font-size: var(--text-sm); color: var(--text-3); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--sp-1); }
-  .card-footer { display: flex; align-items: center; gap: var(--sp-2); }
-  .card-reading-time { display: flex; align-items: center; gap: 3px; font-size: var(--text-xs); color: var(--text-4); }
-  .card-reading-time svg { width: 11px; height: 11px; }
-  .list-empty { padding: var(--sp-10); text-align: center; color: var(--text-3); font-size: var(--text-sm); }
-
-  /* ── Reading pane (slide-in sheet) ── */
-  .pane-overlay {
-    position: fixed; inset: 0; background: var(--overlay); z-index: 60;
-    display: flex; justify-content: flex-end; animation: paneFadeIn 150ms ease;
-  }
-  @keyframes paneFadeIn { from { opacity: 0; } to { opacity: 1; } }
-  .pane-sheet {
-    width: 620px; max-width: 100%; height: 100%; background: var(--card);
-    display: flex; flex-direction: column;
-    border-left: 1px solid var(--border);
-    box-shadow: -6px 0 28px rgba(0,0,0,0.08);
-    animation: paneSlideIn 200ms ease;
-  }
-  @keyframes paneSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
-  .pane-scroll { flex: 1; overflow-y: auto; }
-
-  .pane-toolbar {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 12px 20px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); flex-shrink: 0;
-  }
-  .pane-nav { display: flex; align-items: center; gap: var(--sp-1); }
-  .pane-nav-btn {
-    width: 32px; height: 32px; border-radius: var(--radius-sm); background: none;
-    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
-    cursor: pointer; color: var(--text-3); transition: all var(--transition);
-  }
-  .pane-nav-btn:hover { color: var(--text-1); background: var(--card-hover); }
-  .pane-nav-btn:disabled { opacity: 0.25; cursor: default; }
-  .pane-nav-btn svg { width: 14px; height: 14px; }
-  .pane-nav-pos { font-size: var(--text-xs); color: var(--text-4); font-family: var(--mono); min-width: 44px; text-align: center; }
-
-  .pane-actions { display: flex; align-items: center; gap: var(--sp-0.5); }
-  .pane-action-btn {
-    width: 32px; height: 32px; border-radius: var(--radius-sm); background: none;
-    border: none; display: flex; align-items: center; justify-content: center;
-    cursor: pointer; color: var(--text-3); transition: all var(--transition); text-decoration: none;
-  }
-  .pane-action-btn:hover { color: var(--text-1); background: var(--card-hover); }
-  .pane-action-btn.active { color: var(--accent); }
-  .pane-action-btn.saved-karakeep { color: #F59E0B; }
-  .pane-action-btn svg { width: 15px; height: 15px; }
-
-  .pane-content { max-width: 640px; margin: 0 auto; padding: var(--sp-8) 36px var(--sp-20); }
-  .pane-title { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; color: var(--text-1); margin: 0 0 var(--sp-3); letter-spacing: -0.01em; }
-  .pane-meta {
-    display: flex; align-items: center; gap: var(--sp-1.5); flex-wrap: wrap;
-    font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-6);
-    padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border);
-  }
-  .pane-source { font-weight: 500; color: var(--text-2); }
-  .pane-author { font-style: italic; }
-  .pane-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-4); }
-  .pane-body { font-size: var(--text-md); line-height: 1.85; color: var(--text-3); }
-  .pane-body :global(p) { margin-bottom: 18px; }
-  .pane-body :global(img) { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--sp-3) 0; }
-  .pane-body :global(a) { color: var(--accent); text-decoration: underline; }
-  .pane-body :global(a:hover) { opacity: 0.8; }
-  .pane-body :global(blockquote) { border-left: 3px solid var(--border); padding-left: var(--sp-4); margin: var(--sp-4) 0; color: var(--text-3); font-style: italic; }
-  .pane-body :global(pre) { background: var(--surface-secondary); padding: 14px; border-radius: var(--radius-md); overflow-x: auto; font-size: var(--text-sm); font-family: var(--mono); margin: var(--sp-4) 0; }
-  .pane-body :global(code) { font-family: var(--mono); font-size: 0.9em; }
-  .pane-body :global(h1), .pane-body :global(h2), .pane-body :global(h3) { color: var(--text-1); margin: 20px 0 10px; }
-  .pane-body :global(ul), .pane-body :global(ol) { padding-left: var(--sp-5); margin-bottom: var(--sp-4); }
-  .pane-body :global(li) { margin-bottom: var(--sp-1.5); }
-
-  /* ── Responsive ── */
-  @media (max-width: 1024px) {
-    .reader-sidebar { display: none; }
-    .reader-sidebar.open { display: flex; position: fixed; left: 0; top: 56px; bottom: 0; z-index: 40; box-shadow: 8px 0 24px rgba(0,0,0,0.08); }
-    .mobile-menu { display: flex; }
-  }
-  @media (max-width: 768px) {
-    .reader-layout { height: calc(100vh - 56px); }
-    .reader-sidebar { display: none; }
-    .reader-sidebar.open { display: flex; position: fixed; left: 0; top: 56px; bottom: 0; z-index: 40; box-shadow: 8px 0 24px rgba(0,0,0,0.08); width: 260px; }
-    .mobile-menu { display: flex; }
-    .article-list { padding: var(--sp-1.5) var(--sp-3) var(--sp-20); gap: var(--sp-1.5); }
-    .article-card { padding: 12px 14px; }
-    .card-title { font-size: var(--text-base); }
-    .card-banner { height: 130px; border-radius: var(--radius-sm); }
-    .card-preview { -webkit-line-clamp: 2; }
-    .pane-sheet { width: 100%; }
-    .pane-content { padding: 20px 18px 80px; }
-    .pane-title { font-size: var(--text-lg); }
-    .pane-body { font-size: var(--text-md); line-height: 1.75; }
-    .pane-toolbar { padding: 8px 14px; }
-    .list-header { padding: 10px 14px 8px; }
-  }
-</style>
diff --git a/frontend-v2/src/routes/(app)/trips/+page.svelte b/frontend-v2/src/routes/(app)/trips/+page.svelte
index 58ff7db..e7fb946 100644
--- a/frontend-v2/src/routes/(app)/trips/+page.svelte
+++ b/frontend-v2/src/routes/(app)/trips/+page.svelte
@@ -1,368 +1,12 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { goto } from '$app/navigation';
-  import CreateTripModal from '$lib/components/trips/CreateTripModal.svelte';
-
-  let createOpen = $state(false);
-
-  interface Trip {
-    id: string;
-    name: string;
-    dates: string;
-    daysAway: string;
-    status: 'active' | 'upcoming' | 'completed';
-    cover: string;
-    duration: string;
-    cities: string[];
-    points?: number;
-    cash?: number;
-    shareToken?: string;
-    sortDate: string;
-  }
-
-  let searchQuery = $state('');
-  let upcoming = $state<Trip[]>([]);
-  let past = $state<Trip[]>([]);
-  let stats = $state({ trips: 0, cities: 0, countries: 0, points: 0 });
-  let loading = $state(true);
-
-  const allTrips = $derived([...upcoming, ...past]);
-
-  const filteredTrips = $derived(
-    searchQuery.trim()
-      ? allTrips.filter(t =>
-          t.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-          t.cities.some(c => c.toLowerCase().includes(searchQuery.toLowerCase()))
-        )
-      : null
-  );
-
-  // ── Helpers ──
-  function formatPoints(n: number): string {
-    if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
-    if (n >= 1000) return Math.round(n / 1000) + 'K';
-    return n.toString();
-  }
-
-  function formatDateRange(start: string, end: string): string {
-    if (!start) return '';
-    const s = new Date(start + 'T00:00:00');
-    const e = new Date(end + 'T00:00:00');
-    const sMonth = s.toLocaleDateString('en-US', { month: 'short' });
-    const eMonth = e.toLocaleDateString('en-US', { month: 'short' });
-    const sYear = s.getFullYear();
-    const eYear = e.getFullYear();
-    if (sMonth === eMonth && sYear === eYear) {
-      return `${sMonth} ${s.getDate()} – ${e.getDate()}, ${sYear}`;
-    }
-    if (sYear === eYear) {
-      return `${sMonth} ${s.getDate()} – ${eMonth} ${e.getDate()}, ${sYear}`;
-    }
-    return `${sMonth} ${s.getDate()}, ${sYear} – ${eMonth} ${e.getDate()}, ${eYear}`;
-  }
-
-  function daysBetween(dateStr: string): string {
-    const d = new Date(dateStr + 'T00:00:00');
-    const now = new Date();
-    now.setHours(0, 0, 0, 0);
-    const diff = Math.ceil((d.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
-    if (diff <= 0) return '';
-    if (diff === 1) return '1 day';
-    return `${diff} days`;
-  }
-
-  function durationDays(start: string, end: string): string {
-    if (!start || !end) return '';
-    const s = new Date(start + 'T00:00:00');
-    const e = new Date(end + 'T00:00:00');
-    const days = Math.ceil((e.getTime() - s.getTime()) / (1000 * 60 * 60 * 24)) + 1;
-    return `${days} days`;
-  }
-
-  function coverUrl(trip: any): string {
-    if (trip.cover_image) return trip.cover_image;
-    return '';
-  }
-
-  function mapTrip(raw: any): Trip {
-    const now = new Date().toISOString().slice(0, 10);
-    const isActive = raw.start_date <= now && raw.end_date >= now;
-    const isUpcoming = raw.start_date > now;
-    return {
-      id: raw.id,
-      name: raw.name,
-      dates: formatDateRange(raw.start_date, raw.end_date),
-      daysAway: isUpcoming ? daysBetween(raw.start_date) : '',
-      status: isActive ? 'active' : isUpcoming ? 'upcoming' : 'completed',
-      cover: coverUrl(raw),
-      duration: durationDays(raw.start_date, raw.end_date),
-      cities: [],
-      points: 0,
-      cash: 0,
-      shareToken: raw.share_token || '',
-      sortDate: raw.start_date || ''
-    };
-  }
-
-  // ── Load ──
-  onMount(async () => {
-    try {
-      const [tripsRes, statsRes] = await Promise.all([
-        fetch('/api/trips/trips', { credentials: 'include' }),
-        fetch('/api/trips/stats', { credentials: 'include' })
-      ]);
-
-      if (tripsRes.ok) {
-        const data = await tripsRes.json();
-        const now = new Date().toISOString().slice(0, 10);
-        const all = (data.trips || []).map(mapTrip);
-        upcoming = all.filter(t => t.status === 'active' || t.status === 'upcoming')
-          .sort((a, b) => a.sortDate.localeCompare(b.sortDate));
-        past = all.filter(t => t.status === 'completed')
-          .sort((a, b) => b.sortDate.localeCompare(a.sortDate));
-      }
-
-      if (statsRes.ok) {
-        const data = await statsRes.json();
-        stats = {
-          trips: data.total_trips || 0,
-          cities: data.cities_visited || 0,
-          countries: data.countries_visited || 0,
-          points: data.total_points_redeemed || 0
-        };
-        // Enrich trips with cities from stats
-        const citiesByCountry = data.cities_by_country || {};
-        // Can't easily map cities to individual trips from stats alone
-        // Cities will come from trip detail when opened
-      }
-    } catch { /* silent */ }
-    finally { loading = false; }
-  });
+  import { page } from '$app/state';
+  import AtelierTripsPage from '$lib/pages/trips/AtelierTripsPage.svelte';
+  import LegacyTripsPage from '$lib/pages/trips/LegacyTripsPage.svelte';
+  const useAtelierShell = $derived((page as any).data?.useAtelierShell || false);
 </script>
 
-<div class="page">
-  <div class="app-surface">
-    <!-- Header -->
-    <div class="header-row">
-      <div>
-        <div class="page-title">TRIPS</div>
-        <div class="page-subtitle">Your Adventures</div>
-      </div>
-      <button class="btn-primary" onclick={() => createOpen = true}>+ Plan Trip</button>
-    </div>
-
-    <!-- Stats Bar -->
-    <div class="stats-bar">
-      <div class="stat-box">
-        <div class="stat-value">{stats.trips}</div>
-        <div class="stat-label">Trips</div>
-      </div>
-      <div class="stat-box">
-        <div class="stat-value">{stats.cities}</div>
-        <div class="stat-label">Cities</div>
-      </div>
-      <div class="stat-box">
-        <div class="stat-value">{stats.countries}</div>
-        <div class="stat-label">Countries</div>
-      </div>
-      <div class="stat-box">
-        <div class="stat-value">{formatPoints(stats.points)}</div>
-        <div class="stat-label">Points Used</div>
-      </div>
-    </div>
-
-    <!-- Search -->
-    <div class="search-wrap">
-      <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
-      <input class="input search-input" type="text" placeholder="Search trips, cities, hotels, flights..." bind:value={searchQuery} />
-      {#if searchQuery}
-        <button class="search-clear" onclick={() => searchQuery = ''}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-        </button>
-      {/if}
-    </div>
-
-    {#if filteredTrips}
-      <!-- Search results -->
-      <div class="search-results-label">{filteredTrips.length} result{filteredTrips.length !== 1 ? 's' : ''}</div>
-      <div class="trip-grid">
-        {#each filteredTrips as trip (trip.id)}
-          <a href="/trips/trip?id={trip.id}" class="trip-card" class:muted={trip.status === 'completed'}>
-            <div class="trip-photo" style={trip.cover ? `background-image:url('${trip.cover}')` : ''}>
-              {#if !trip.cover}
-                <div class="photo-empty">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
-                </div>
-              {/if}
-            </div>
-            <div class="trip-body">
-              <div class="trip-name">{trip.name}</div>
-              {#if trip.dates}<div class="trip-dates">{trip.dates}</div>{/if}
-              {#if trip.cities.length > 0}<div class="trip-cities">{trip.cities.join(' · ')}</div>{/if}
-              <div class="trip-footer">
-                {#if trip.status === 'active'}<span class="badge active">Active</span>{/if}
-                {#if trip.status === 'completed'}<span class="badge completed">Completed</span>{/if}
-                {#if trip.daysAway}<span class="trip-countdown">{trip.daysAway}</span>{/if}
-                {#if trip.points}
-                  <span class="trip-points">{formatPoints(trip.points)} pts</span>
-                {/if}
-              </div>
-            </div>
-          </a>
-        {/each}
-      </div>
-    {:else}
-      <!-- Upcoming -->
-      <section class="section">
-        <div class="section-title">UPCOMING</div>
-        <div class="trip-grid">
-          {#each upcoming as trip (trip.id)}
-            <a href="/trips/trip?id={trip.id}" class="trip-card">
-              <div class="trip-photo" style="background-image:url('{trip.cover}')">
-                {#if trip.shareToken}
-                  <button class="share-btn" title="Share trip">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
-                  </button>
-                {/if}
-              </div>
-              <div class="trip-body">
-                <div class="trip-name">{trip.name}</div>
-                <div class="trip-dates">{trip.dates} · {trip.duration}</div>
-                <div class="trip-cities">{trip.cities.join(' · ')}</div>
-                <div class="trip-footer">
-                  {#if trip.status === 'active'}<span class="badge active">Active</span>{/if}
-                  <span class="trip-countdown">{trip.daysAway}</span>
-                  {#if trip.points}
-                    <span class="trip-points">{formatPoints(trip.points)} pts</span>
-                  {/if}
-                </div>
-              </div>
-            </a>
-          {/each}
-        </div>
-      </section>
-
-      <!-- Past -->
-      <section class="section">
-        <div class="section-title">PAST ADVENTURES</div>
-        <div class="trip-grid">
-          {#each past as trip (trip.id)}
-            <a href="/trips/trip?id={trip.id}" class="trip-card muted">
-              <div class="trip-photo" style={trip.cover ? `background-image:url('${trip.cover}')` : ''}>
-                {#if !trip.cover}
-                  <div class="photo-empty">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
-                  </div>
-                {/if}
-                {#if trip.shareToken}
-                  <button class="share-btn" title="Share trip">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
-                  </button>
-                {/if}
-              </div>
-              <div class="trip-body">
-                <div class="trip-name">{trip.name}</div>
-                {#if trip.dates}<div class="trip-dates">{trip.dates} · {trip.duration}</div>{/if}
-                {#if trip.cities.length > 0}<div class="trip-cities">{trip.cities.join(' · ')}</div>{/if}
-                <div class="trip-footer">
-                  <span class="badge completed">Completed</span>
-                  {#if trip.points}
-                    <span class="trip-points">{formatPoints(trip.points)} pts</span>
-                  {/if}
-                  {#if trip.cash}
-                    <span class="trip-cash">${trip.cash.toLocaleString()}</span>
-                  {/if}
-                </div>
-              </div>
-            </a>
-          {/each}
-        </div>
-      </section>
-    {/if}
-  </div>
-</div>
-
-<CreateTripModal bind:open={createOpen} onCreated={(id) => goto(`/trips/trip?id=${id}`)} />
-
-<style>
-  /* ── Stats Bar ── */
-  .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: 14px; }
-  .stat-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2) 6px; text-align: center; }
-  .stat-value { font-size: var(--text-md); font-weight: 700; font-family: var(--mono); color: var(--text-1); line-height: 1.1; }
-  .stat-label { font-size: var(--text-xs); color: var(--text-3); margin-top: var(--sp-0.5); text-transform: uppercase; letter-spacing: 0.05em; }
-
-  /* ── Header ── */
-  .header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-3); }
-  .page-subtitle { font-size: var(--text-2xl); font-weight: 300; color: var(--text-1); line-height: 1.15; margin-top: -1px; }
-  .btn-primary { padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); transition: opacity var(--transition); }
-  .btn-primary:hover { opacity: 0.9; }
-
-  /* ── Search ── */
-  .search-wrap { position: relative; margin-bottom: var(--sp-4); }
-  .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-4); pointer-events: none; }
-  .search-input { padding-left: 40px; font-size: var(--text-md); }
-  .search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-4); padding: var(--sp-1); }
-  .search-clear svg { width: 16px; height: 16px; }
-  .search-results-label { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-3); }
-
-  /* ── Sections ── */
-  .section { margin-bottom: var(--section-gap); }
-  .section-title { font-size: var(--text-xs); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-3); }
-
-  /* ── Trip Grid ── */
-  .trip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
-
-  /* ── Trip Card ── */
-  .trip-card {
-    background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
-    box-shadow: var(--card-shadow-sm); overflow: hidden; transition: all var(--transition);
-    text-decoration: none; color: inherit; display: block;
-  }
-  .trip-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow); }
-  .trip-card.muted { opacity: 0.6; }
-  .trip-card.muted:hover { opacity: 0.85; }
-
-  .trip-photo {
-    width: 100%; height: 180px; background: var(--card-hover) center/cover no-repeat;
-    position: relative;
-  }
-  .photo-empty {
-    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
-    color: var(--text-4);
-  }
-  .photo-empty svg { width: 28px; height: 28px; opacity: 0.3; }
-
-  .share-btn {
-    position: absolute; top: var(--sp-2); right: var(--sp-2);
-    width: 28px; height: 28px; border-radius: 50%;
-    background: rgba(0,0,0,0.35); backdrop-filter: blur(6px);
-    border: none; color: white; display: flex; align-items: center; justify-content: center;
-    cursor: pointer; transition: all var(--transition); opacity: 0;
-  }
-  .trip-card:hover .share-btn { opacity: 1; }
-  .share-btn:hover { background: rgba(0,0,0,0.55); }
-  .share-btn svg { width: 13px; height: 13px; }
-
-  .trip-body { padding: 8px 14px 10px; }
-  .trip-name { font-size: var(--text-base); font-weight: 600; color: var(--text-1); line-height: 1.3; }
-  .trip-dates { font-size: var(--text-xs); color: var(--text-3); margin-top: 3px; }
-  .trip-cities { font-size: var(--text-xs); color: var(--text-3); margin-top: 1px; opacity: 0.7; }
-  .trip-footer { display: flex; align-items: center; gap: var(--sp-1.5); margin-top: var(--sp-1.5); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--sp-1.5); }
-  .trip-countdown { font-size: var(--text-xs); color: var(--text-3); font-family: var(--mono); }
-  .trip-points { font-size: var(--text-xs); font-family: var(--mono); color: var(--accent); font-weight: 500; }
-  .trip-cash { font-size: var(--text-xs); font-family: var(--mono); color: var(--text-3); }
-
-  /* ── Badges ── */
-  .badge { font-size: var(--text-xs); font-weight: 600; padding: 2px var(--sp-2); border-radius: var(--radius-sm); line-height: 1.5; }
-  .badge.active { background: var(--accent-bg); color: var(--accent); }
-  .badge.completed { background: var(--surface-secondary); color: var(--text-3); }
-
-  @media (max-width: 768px) {
-    .stats-bar { grid-template-columns: repeat(2, 1fr); }
-    .trip-grid { grid-template-columns: 1fr; }
-    .page-subtitle { font-size: var(--text-xl); }
-    .trip-photo { height: 160px; }
-    .trip-body { padding: 10px 16px 12px; }
-    .trip-name { font-size: var(--text-md); }
-  }
-</style>
+{#if useAtelierShell}
+  <AtelierTripsPage />
+{:else}
+  <LegacyTripsPage />
+{/if}
diff --git a/frontend-v2/src/routes/(app)/trips/trip/+page.svelte b/frontend-v2/src/routes/(app)/trips/trip/+page.svelte
index 47950c2..6d661c1 100644
--- a/frontend-v2/src/routes/(app)/trips/trip/+page.svelte
+++ b/frontend-v2/src/routes/(app)/trips/trip/+page.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { page } from '$app/state';
+  import AtelierTripDetailPage from '$lib/pages/trips/AtelierTripDetailPage.svelte';
   import ItemModal from '$lib/components/trips/ItemModal.svelte';
   import TripEditModal from '$lib/components/trips/TripEditModal.svelte';
   import ImageUpload from '$lib/components/trips/ImageUpload.svelte';
 
+  let { data } = $props();
+
   // ── Types ──
   interface ItineraryEvent {
     time: string; name: string; description: string;
@@ -387,6 +390,9 @@
   });
 </script>
 
+{#if data?.useAtelierShell}
+  <AtelierTripDetailPage />
+{:else}
 <div class="page trip-detail-page">
   <div class="app-surface">
     <!-- Back (hidden in share mode) -->
@@ -1039,3 +1045,4 @@
     .day-story { margin: 6px 0 4px; padding: 10px 14px; }
   }
 </style>
+{/if}
diff --git a/frontend-v2/src/routes/assistant/fitness/+server.ts b/frontend-v2/src/routes/assistant/fitness/+server.ts
new file mode 100644
index 0000000..6dbc108
--- /dev/null
+++ b/frontend-v2/src/routes/assistant/fitness/+server.ts
@@ -0,0 +1,885 @@
+import { env } from '$env/dynamic/private';
+import { json } from '@sveltejs/kit';
+import { createHash } from 'node:crypto';
+import type { RequestHandler } from './$types';
+
+type ChatRole = 'user' | 'assistant';
+type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack';
+
+type Draft = {
+	food_name?: string;
+	meal_type?: MealType;
+	entry_date?: string;
+	quantity?: number;
+	unit?: string;
+	calories?: number;
+	protein?: number;
+	carbs?: number;
+	fat?: number;
+	sugar?: number;
+	fiber?: number;
+	note?: string;
+	default_serving_label?: string;
+};
+
+type DraftBundle = Draft[];
+
+type ChatMessage = {
+	role?: ChatRole;
+	content?: string;
+};
+
+type ResolvedFood = {
+	id: string;
+	name: string;
+	status?: string;
+	base_unit?: string;
+	calories_per_base?: number;
+	protein_per_base?: number;
+	carbs_per_base?: number;
+	fat_per_base?: number;
+	sugar_per_base?: number;
+	fiber_per_base?: number;
+	servings?: Array<{ id?: string; name?: string; amount_in_base?: number; is_default?: boolean }>;
+};
+
+function todayIso(): string {
+	const now = new Date();
+	const year = now.getFullYear();
+	const month = String(now.getMonth() + 1).padStart(2, '0');
+	const day = String(now.getDate()).padStart(2, '0');
+	return `${year}-${month}-${day}`;
+}
+
+function toNumber(value: unknown, fallback = 0): number {
+	if (typeof value === 'number' && Number.isFinite(value)) return value;
+	if (typeof value === 'string') {
+		const parsed = Number(value);
+		if (Number.isFinite(parsed)) return parsed;
+	}
+	return fallback;
+}
+
+function clampDraft(input: Record<string, unknown> | null | undefined): Draft {
+	const meal = input?.meal_type;
+	const normalizedMeal: MealType =
+		meal === 'breakfast' || meal === 'lunch' || meal === 'dinner' || meal === 'snack'
+			? meal
+			: 'snack';
+
+	return {
+		food_name: typeof input?.food_name === 'string' ? input.food_name.trim() : '',
+		meal_type: normalizedMeal,
+		entry_date: typeof input?.entry_date === 'string' && input.entry_date ? input.entry_date : todayIso(),
+		quantity: Math.max(toNumber(input?.quantity, 1), 0),
+		unit: typeof input?.unit === 'string' && input.unit ? input.unit.trim() : 'serving',
+		calories: Math.max(toNumber(input?.calories), 0),
+		protein: Math.max(toNumber(input?.protein), 0),
+		carbs: Math.max(toNumber(input?.carbs), 0),
+		fat: Math.max(toNumber(input?.fat), 0),
+		sugar: Math.max(toNumber(input?.sugar), 0),
+		fiber: Math.max(toNumber(input?.fiber), 0),
+		note: typeof input?.note === 'string' ? input.note.trim() : '',
+		default_serving_label:
+			typeof input?.default_serving_label === 'string' ? input.default_serving_label.trim() : ''
+	};
+}
+
+function parseLeadingQuantity(name: string): { quantity: number | null; cleanedName: string } {
+	const trimmed = name.trim();
+	const match = trimmed.match(/^(\d+(?:\.\d+)?)\s+(.+)$/);
+	if (!match) {
+		return { quantity: null, cleanedName: trimmed };
+	}
+	return {
+		quantity: Number(match[1]),
+		cleanedName: match[2].trim()
+	};
+}
+
+function canonicalFoodName(name: string): string {
+	const cleaned = name
+		.trim()
+		.replace(/^(?:a|an|the)\s+/i, '')
+		.replace(/\s+/g, ' ');
+
+	return cleaned
+		.split(' ')
+		.filter(Boolean)
+		.map((part) => {
+			if (/[A-Z]{2,}/.test(part)) return part;
+			return part.charAt(0).toUpperCase() + part.slice(1).toLowerCase();
+		})
+		.join(' ');
+}
+
+function normalizedFoodKey(name: string): string {
+	return canonicalFoodName(name)
+		.toLowerCase()
+		.replace(/[^a-z0-9\s]/g, ' ')
+		.replace(/\b(\d+(?:\.\d+)?)\b/g, ' ')
+		.replace(/\s+/g, ' ')
+		.trim();
+}
+
+function shouldReuseResolvedFood(canonicalName: string, resolved: ResolvedFood | null, confidence: number): boolean {
+	if (!resolved?.name) return false;
+	if (confidence < 0.9) return false;
+
+	const draftKey = normalizedFoodKey(canonicalName);
+	const resolvedKey = normalizedFoodKey(resolved.name);
+	if (!draftKey || !resolvedKey) return false;
+
+	return draftKey === resolvedKey;
+}
+
+function foodBaseUnit(draft: Draft): string {
+	const unit = (draft.unit || 'serving').trim().toLowerCase();
+	if (unit === 'piece' || unit === 'slice' || unit === 'cup' || unit === 'scoop' || unit === 'serving') {
+		return unit;
+	}
+	return 'serving';
+}
+
+function defaultServingName(baseUnit: string): string {
+	return `1 ${baseUnit}`;
+}
+
+function hasMaterialNutritionMismatch(draft: Draft, matchedFood: ResolvedFood, entryQuantity: number): boolean {
+	const draftPerBase = {
+		calories: Math.max((draft.calories || 0) / entryQuantity, 0),
+		protein: Math.max((draft.protein || 0) / entryQuantity, 0),
+		carbs: Math.max((draft.carbs || 0) / entryQuantity, 0),
+		fat: Math.max((draft.fat || 0) / entryQuantity, 0),
+		sugar: Math.max((draft.sugar || 0) / entryQuantity, 0),
+		fiber: Math.max((draft.fiber || 0) / entryQuantity, 0)
+	};
+
+	const currentPerBase = {
+		calories: matchedFood.calories_per_base || 0,
+		protein: matchedFood.protein_per_base || 0,
+		carbs: matchedFood.carbs_per_base || 0,
+		fat: matchedFood.fat_per_base || 0,
+		sugar: matchedFood.sugar_per_base || 0,
+		fiber: matchedFood.fiber_per_base || 0
+	};
+
+	return (Object.keys(draftPerBase) as Array<keyof typeof draftPerBase>).some((key) => {
+		const next = draftPerBase[key];
+		const current = currentPerBase[key];
+		if (Math.abs(next - current) >= 5) return true;
+		if (Math.max(next, current) <= 0) return false;
+		return Math.abs(next - current) / Math.max(next, current) >= 0.12;
+	});
+}
+
+function entryIdempotencyKey(draft: Draft, index = 0): string {
+	return createHash('sha256')
+		.update(
+			JSON.stringify({
+				index,
+				food_name: draft.food_name || '',
+				meal_type: draft.meal_type || 'snack',
+				entry_date: draft.entry_date || todayIso(),
+				quantity: draft.quantity || 1,
+				unit: draft.unit || 'serving',
+				calories: draft.calories || 0,
+				protein: draft.protein || 0,
+				carbs: draft.carbs || 0,
+				fat: draft.fat || 0,
+				sugar: draft.sugar || 0,
+				fiber: draft.fiber || 0,
+				note: draft.note || ''
+			})
+		)
+		.digest('hex');
+}
+
+function hasCompleteDraft(draft: Draft): boolean {
+	return !!draft.food_name && !!draft.meal_type && Number.isFinite(draft.calories ?? NaN);
+}
+
+function hasCompleteDrafts(drafts: DraftBundle | null | undefined): drafts is DraftBundle {
+	return Array.isArray(drafts) && drafts.length > 0 && drafts.every((draft) => hasCompleteDraft(draft));
+}
+
+function isExplicitConfirmation(message: string): boolean {
+	const text = message.trim().toLowerCase();
+	if (!text) return false;
+
+	return [
+		/^add it[.!]?$/,
+		/^log it[.!]?$/,
+		/^save it[.!]?$/,
+		/^looks good[.!]?$/,
+		/^looks good add it[.!]?$/,
+		/^that looks good[.!]?$/,
+		/^that looks good add it[.!]?$/,
+		/^confirm[.!]?$/,
+		/^go ahead[.!]?$/,
+		/^yes add it[.!]?$/,
+		/^yes log it[.!]?$/,
+		/^yes save it[.!]?$/
+	].some((pattern) => pattern.test(text));
+}
+
+function isRetryRequest(message: string): boolean {
+	const text = message.trim().toLowerCase();
+	if (!text) return false;
+
+	return [
+		"that's not right",
+		"that is not right",
+		'wrong item',
+		'wrong food',
+		'wrong meal',
+		'try again',
+		'search again',
+		'guess again',
+		'redo that',
+		'start over',
+		'that is wrong',
+		"that's wrong"
+	].some((phrase) => text.includes(phrase));
+}
+
+function draftForRetry(draft: Draft): Draft {
+	return {
+		meal_type: draft.meal_type,
+		entry_date: draft.entry_date || todayIso(),
+		quantity: draft.quantity || 1,
+		unit: draft.unit || 'serving',
+		food_name: '',
+		calories: 0,
+		protein: 0,
+		carbs: 0,
+		fat: 0,
+		sugar: 0,
+		fiber: 0,
+		note: draft.note || ''
+	};
+}
+
+async function applyDraft(fetchFn: typeof fetch, draft: Draft, index = 0) {
+	const parsedName = parseLeadingQuantity(draft.food_name || '');
+	const entryQuantity = Math.max(
+		draft.quantity && draft.quantity > 0 ? draft.quantity : parsedName.quantity || 1,
+		0.1
+	);
+	const canonicalName = canonicalFoodName(parsedName.cleanedName || draft.food_name || 'Quick add');
+	const baseUnit = foodBaseUnit(draft);
+
+	const resolveResponse = await fetchFn('/api/fitness/foods/resolve', {
+		method: 'POST',
+		headers: { 'content-type': 'application/json' },
+		body: JSON.stringify({
+			raw_phrase: canonicalName,
+			meal_type: draft.meal_type || 'snack',
+			entry_date: draft.entry_date || todayIso(),
+			source: 'assistant'
+		})
+	});
+
+	const resolveBody = await resolveResponse.json().catch(() => ({}));
+	let matchedFood: ResolvedFood | null =
+		resolveResponse.ok && shouldReuseResolvedFood(canonicalName, resolveBody?.matched_food ?? null, Number(resolveBody?.confidence || 0))
+			? (resolveBody?.matched_food ?? null)
+			: null;
+
+	if (!matchedFood) {
+		const perBaseCalories = Math.max((draft.calories || 0) / entryQuantity, 0);
+		const perBaseProtein = Math.max((draft.protein || 0) / entryQuantity, 0);
+		const perBaseCarbs = Math.max((draft.carbs || 0) / entryQuantity, 0);
+		const perBaseFat = Math.max((draft.fat || 0) / entryQuantity, 0);
+		const perBaseSugar = Math.max((draft.sugar || 0) / entryQuantity, 0);
+		const perBaseFiber = Math.max((draft.fiber || 0) / entryQuantity, 0);
+
+		const createFoodResponse = await fetchFn('/api/fitness/foods', {
+			method: 'POST',
+			headers: { 'content-type': 'application/json' },
+			body: JSON.stringify({
+				name: canonicalName,
+				calories_per_base: perBaseCalories,
+				protein_per_base: perBaseProtein,
+				carbs_per_base: perBaseCarbs,
+				fat_per_base: perBaseFat,
+				sugar_per_base: perBaseSugar,
+				fiber_per_base: perBaseFiber,
+				base_unit: baseUnit,
+				status: 'assistant_created',
+				notes: `Assistant created from chat draft: ${draft.food_name || canonicalName}`,
+				servings: [
+					{
+						name: draft.default_serving_label?.trim() || defaultServingName(baseUnit),
+						amount_in_base: 1.0,
+						is_default: true
+					}
+				]
+			})
+		});
+
+		const createdFoodBody = await createFoodResponse.json().catch(() => ({}));
+		if (!createFoodResponse.ok) {
+			return { ok: false, status: createFoodResponse.status, body: createdFoodBody };
+		}
+		matchedFood = createdFoodBody as ResolvedFood;
+	} else if (
+		(matchedFood.status === 'assistant_created' || matchedFood.status === 'ai_created') &&
+		hasMaterialNutritionMismatch(draft, matchedFood, entryQuantity)
+	) {
+		const updateFoodResponse = await fetchFn(`/api/fitness/foods/${matchedFood.id}`, {
+			method: 'PATCH',
+			headers: { 'content-type': 'application/json' },
+			body: JSON.stringify({
+				calories_per_base: Math.max((draft.calories || 0) / entryQuantity, 0),
+				protein_per_base: Math.max((draft.protein || 0) / entryQuantity, 0),
+				carbs_per_base: Math.max((draft.carbs || 0) / entryQuantity, 0),
+				fat_per_base: Math.max((draft.fat || 0) / entryQuantity, 0),
+				sugar_per_base: Math.max((draft.sugar || 0) / entryQuantity, 0),
+				fiber_per_base: Math.max((draft.fiber || 0) / entryQuantity, 0)
+			})
+		});
+		const updatedFoodBody = await updateFoodResponse.json().catch(() => ({}));
+		if (updateFoodResponse.ok) {
+			matchedFood = updatedFoodBody as ResolvedFood;
+		}
+	}
+
+	const entryPayload = {
+		food_id: matchedFood.id,
+		quantity: entryQuantity,
+		unit: baseUnit,
+		serving_id: matchedFood.servings?.find((serving) => serving.is_default)?.id,
+		meal_type: draft.meal_type || 'snack',
+		entry_date: draft.entry_date || todayIso(),
+		entry_method: 'assistant',
+		source: 'assistant',
+		note: draft.note || undefined,
+		idempotency_key: entryIdempotencyKey(draft, index),
+		snapshot_food_name_override:
+			draft.food_name && draft.food_name.trim() !== canonicalName ? draft.food_name.trim() : undefined
+	};
+
+	const response = await fetchFn('/api/fitness/entries', {
+		method: 'POST',
+		headers: { 'content-type': 'application/json' },
+		body: JSON.stringify(entryPayload)
+	});
+
+	const body = await response.json().catch(() => ({}));
+	return { ok: response.ok, status: response.status, body };
+}
+
+async function splitInputItems(fetchFn: typeof fetch, phrase: string): Promise<string[]> {
+	try {
+		const response = await fetchFn('/api/fitness/foods/split', {
+			method: 'POST',
+			headers: { 'content-type': 'application/json' },
+			body: JSON.stringify({ phrase })
+		});
+		const body = await response.json().catch(() => ({}));
+		if (response.ok && Array.isArray(body?.items) && body.items.length > 0) {
+			return body.items.map((item: unknown) => String(item).trim()).filter(Boolean);
+		}
+	} catch {
+		// fall back below
+	}
+
+	return phrase
+		.split(/,/)
+		.map((item) => item.trim())
+		.filter(Boolean);
+}
+
+function draftFromResolvedItem(resolved: Record<string, unknown>, entryDate: string): Draft {
+	const parsed = (resolved?.parsed as Record<string, unknown> | undefined) || {};
+	const matchedFood = (resolved?.matched_food as Record<string, unknown> | undefined) || null;
+	const aiEstimate = (resolved?.ai_estimate as Record<string, unknown> | undefined) || null;
+	const quantity = Math.max(toNumber(parsed.quantity, 1), 0.1);
+	const unit = typeof parsed.unit === 'string' && parsed.unit ? parsed.unit : 'serving';
+	const meal = parsed.meal_type;
+	const mealType: MealType =
+		meal === 'breakfast' || meal === 'lunch' || meal === 'dinner' || meal === 'snack'
+			? meal
+			: 'snack';
+
+	let calories = 0;
+	let protein = 0;
+	let carbs = 0;
+	let fat = 0;
+	let sugar = 0;
+	let fiber = 0;
+
+	if (matchedFood) {
+		calories = toNumber(matchedFood.calories_per_base) * quantity;
+		protein = toNumber(matchedFood.protein_per_base) * quantity;
+		carbs = toNumber(matchedFood.carbs_per_base) * quantity;
+		fat = toNumber(matchedFood.fat_per_base) * quantity;
+		sugar = toNumber(matchedFood.sugar_per_base) * quantity;
+		fiber = toNumber(matchedFood.fiber_per_base) * quantity;
+	} else if (aiEstimate) {
+		calories = toNumber(aiEstimate.calories_per_base) * quantity;
+		protein = toNumber(aiEstimate.protein_per_base) * quantity;
+		carbs = toNumber(aiEstimate.carbs_per_base) * quantity;
+		fat = toNumber(aiEstimate.fat_per_base) * quantity;
+		sugar = toNumber(aiEstimate.sugar_per_base) * quantity;
+		fiber = toNumber(aiEstimate.fiber_per_base) * quantity;
+	} else if (resolved?.resolution_type === 'quick_add') {
+		calories = toNumber(parsed.quantity);
+	}
+
+	const foodName =
+		(typeof resolved?.snapshot_name_override === 'string' && resolved.snapshot_name_override) ||
+		(typeof matchedFood?.name === 'string' && matchedFood.name) ||
+		(typeof aiEstimate?.food_name === 'string' && aiEstimate.food_name) ||
+		(typeof resolved?.raw_text === 'string' && resolved.raw_text) ||
+		'Quick add';
+
+	return clampDraft({
+		food_name: foodName,
+		meal_type: mealType,
+		entry_date: entryDate,
+		quantity,
+		unit,
+		calories: Math.round(calories),
+		protein: Math.round(protein),
+		carbs: Math.round(carbs),
+		fat: Math.round(fat),
+		sugar: Math.round(sugar),
+		fiber: Math.round(fiber),
+		note: typeof resolved?.note === 'string' ? resolved.note : '',
+		default_serving_label:
+			(typeof aiEstimate?.serving_description === 'string' && aiEstimate.serving_description) ||
+			(quantity > 0 && unit ? `${quantity} ${unit}` : '')
+	});
+}
+
+async function reviseDraftBundle(
+	fetchFn: typeof fetch,
+	messages: Array<{ role: 'user' | 'assistant'; content: string }>,
+	drafts: DraftBundle,
+	imageDataUrl: string | null
+): Promise<{ reply: string; drafts: DraftBundle } | null> {
+	if (!env.OPENAI_API_KEY || drafts.length === 0) return null;
+
+	const systemPrompt = `You are revising a bundled food draft inside a fitness app.
+
+Return ONLY JSON like:
+{
+  "reply": "short assistant reply",
+  "drafts": [
+    {
+      "food_name": "string",
+      "meal_type": "breakfast|lunch|dinner|snack",
+      "entry_date": "YYYY-MM-DD",
+      "quantity": 1,
+      "unit": "serving",
+      "calories": 0,
+      "protein": 0,
+      "carbs": 0,
+      "fat": 0,
+      "sugar": 0,
+      "fiber": 0,
+      "note": "",
+      "default_serving_label": ""
+    }
+  ]
+}
+
+Rules:
+- Update only the item or items the user is correcting.
+- Keep untouched items unchanged.
+- If the user says one item is wrong, replace that item without collapsing the bundle into one merged food.
+- Preserve meal and entry date unless the user changes them.
+- Keep replies brief and natural.
+- If a photo is attached, you may use it again for corrections.`;
+
+	const userMessages = messages.map((message) => ({
+		role: message.role,
+		content: message.content
+	}));
+
+	if (imageDataUrl) {
+		const latestUserText = [...messages].reverse().find((message) => message.role === 'user')?.content || 'Revise these items.';
+		userMessages.push({
+			role: 'user',
+			content: [
+				{ type: 'text', text: latestUserText },
+				{ type: 'image_url', image_url: { url: imageDataUrl } }
+			]
+		} as unknown as { role: ChatRole; content: string });
+	}
+
+	const response = await fetch('https://api.openai.com/v1/chat/completions', {
+		method: 'POST',
+		headers: {
+			'content-type': 'application/json',
+			authorization: `Bearer ${env.OPENAI_API_KEY}`
+		},
+		body: JSON.stringify({
+			model: env.OPENAI_MODEL || 'gpt-5.2',
+			response_format: { type: 'json_object' },
+			temperature: 0.2,
+			max_completion_tokens: 1000,
+			messages: [
+				{
+					role: 'system',
+					content: `${systemPrompt}\n\nCurrent bundle:\n${JSON.stringify(drafts, null, 2)}`
+				},
+				...userMessages
+			]
+		})
+	});
+
+	if (!response.ok) return null;
+	const raw = await response.json().catch(() => ({}));
+	const content = raw?.choices?.[0]?.message?.content;
+	if (typeof content !== 'string') return null;
+
+	try {
+		const parsed = JSON.parse(content);
+		const nextDrafts = Array.isArray(parsed?.drafts)
+			? parsed.drafts.map((draft: Record<string, unknown>) => clampDraft(draft))
+			: [];
+		if (!hasCompleteDrafts(nextDrafts)) return null;
+		return {
+			reply: typeof parsed?.reply === 'string' ? parsed.reply : 'I updated those items.',
+			drafts: nextDrafts
+		};
+	} catch {
+		return null;
+	}
+}
+
+async function buildDraftBundle(fetchFn: typeof fetch, phrase: string, entryDate: string): Promise<DraftBundle | null> {
+	const parts = await splitInputItems(fetchFn, phrase);
+	if (parts.length < 2) return null;
+
+	const results = await Promise.all(
+		parts.map(async (part) => {
+			const response = await fetchFn('/api/fitness/foods/resolve', {
+				method: 'POST',
+				headers: { 'content-type': 'application/json' },
+				body: JSON.stringify({
+					raw_phrase: part,
+					entry_date: entryDate,
+					source: 'assistant'
+				})
+			});
+			if (!response.ok) {
+				throw new Error(`Failed to resolve "${part}"`);
+			}
+			const body = await response.json().catch(() => ({}));
+			return draftFromResolvedItem(body, entryDate);
+		})
+	);
+
+	return results.filter((draft) => hasCompleteDraft(draft));
+}
+
+export const POST: RequestHandler = async ({ request, fetch, cookies }) => {
+	if (!cookies.get('platform_session')) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	const { messages = [], draft = null, drafts = null, action = 'chat', imageDataUrl = null, entryDate = null } = await request
+		.json()
+		.catch(() => ({}));
+	const requestedDate =
+		typeof entryDate === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(entryDate) ? entryDate : todayIso();
+	const currentDraft = clampDraft({
+		entry_date: requestedDate,
+		...(draft && typeof draft === 'object' ? draft : {})
+	});
+	const currentDrafts = Array.isArray(drafts)
+		? drafts
+				.filter((item) => !!item && typeof item === 'object')
+				.map((item) =>
+					clampDraft({
+						entry_date: requestedDate,
+						...(item as Record<string, unknown>)
+					})
+				)
+		: [];
+
+	if (action === 'apply') {
+		if (hasCompleteDrafts(currentDrafts)) {
+			const results = await Promise.all(currentDrafts.map((item, index) => applyDraft(fetch, item, index)));
+			const failed = results.find((result) => !result.ok);
+			if (failed) {
+				return json(
+					{
+						reply: 'I couldn’t add all of those entries yet. Try again in a moment.',
+						drafts: currentDrafts,
+						applied: false,
+						error: failed.body?.error || `Fitness API returned ${failed.status}`
+					},
+					{ status: 500 }
+				);
+			}
+
+			return json({
+				reply: `Added ${currentDrafts.length} items to ${currentDrafts[0]?.meal_type || 'your log'}.`,
+				drafts: currentDrafts,
+				applied: true,
+				entries: results.map((result) => result.body)
+			});
+		}
+
+		if (!hasCompleteDraft(currentDraft)) {
+			return json({
+				reply: 'I still need a food and calories before I can add it.',
+				draft: currentDraft,
+				drafts: currentDrafts,
+				applied: false
+			});
+		}
+
+		const result = await applyDraft(fetch, currentDraft);
+		if (!result.ok) {
+			return json(
+				{
+					reply: 'I couldn’t add that entry yet. Try again in a moment.',
+					draft: currentDraft,
+					applied: false,
+					error: result.body?.error || `Fitness API returned ${result.status}`
+				},
+				{ status: 500 }
+			);
+		}
+
+		return json({
+			reply: `Added ${currentDraft.food_name} to ${currentDraft.meal_type}.`,
+			draft: currentDraft,
+			drafts: [],
+			applied: true,
+			entry: result.body
+		});
+	}
+
+	const recentMessages = (Array.isArray(messages)
+		? messages
+				.filter((m: unknown) => !!m && typeof m === 'object')
+				.map((m: ChatMessage) => ({
+					role: m.role === 'assistant' ? 'assistant' : 'user',
+					content: typeof m.content === 'string' ? m.content.slice(0, 2000) : ''
+				}))
+					.filter((m) => m.content.trim())
+					.slice(-10)
+		: []) as Array<{ role: 'user' | 'assistant'; content: string }>;
+
+	const lastUserMessage =
+		[...recentMessages].reverse().find((message) => message.role === 'user')?.content || '';
+	const allowApply = isExplicitConfirmation(lastUserMessage);
+	const retryRequested = isRetryRequest(lastUserMessage);
+	const hasPhoto =
+		typeof imageDataUrl === 'string' &&
+		imageDataUrl.startsWith('data:image/') &&
+		imageDataUrl.length < 8_000_000;
+
+	if (!allowApply && currentDrafts.length > 1 && lastUserMessage.trim()) {
+		const revisedBundle = await reviseDraftBundle(
+			fetch,
+			recentMessages,
+			currentDrafts,
+			hasPhoto && typeof imageDataUrl === 'string' ? imageDataUrl : null
+		);
+		if (revisedBundle) {
+			return json({
+				reply: revisedBundle.reply,
+				drafts: revisedBundle.drafts,
+				draft: null,
+				applied: false
+			});
+		}
+	}
+
+	if (!hasPhoto && !retryRequested && !allowApply && lastUserMessage.trim()) {
+		const bundle = await buildDraftBundle(fetch, lastUserMessage, requestedDate);
+		if (bundle && bundle.length > 1) {
+			const meal = bundle[0]?.meal_type || 'snack';
+			return json({
+				reply: `I split that into ${bundle.length} items for ${meal}: ${bundle.map((item) => item.food_name).join(', ')}. Add them when this looks right.`,
+				drafts: bundle,
+				draft: null,
+				applied: false
+			});
+		}
+	}
+
+	const systemPrompt = `You are a conversational fitness logging assistant inside a personal app.
+
+Your job:
+- read the chat plus the current draft food entry
+- update the draft naturally
+- keep the reply short, plain, and useful
+- do not add an entry on the first food message
+- only set apply_now=true if the latest user message is a pure confirmation like "add it", "log it", "save it", or "looks good add it"
+- never say an item was added, logged, or saved unless apply_now=true for that response
+- if a food photo is attached, identify the likely food, portion, and meal context before drafting
+- if the user says the current guess is wrong, treat that as authoritative and replace the draft instead of defending the previous guess
+
+Return ONLY JSON with this shape:
+{
+  "reply": "short assistant reply",
+  "draft": {
+    "food_name": "string",
+    "meal_type": "breakfast|lunch|dinner|snack",
+    "entry_date": "YYYY-MM-DD",
+    "quantity": 1,
+    "unit": "serving",
+    "calories": 0,
+    "protein": 0,
+    "carbs": 0,
+    "fat": 0,
+    "sugar": 0,
+    "fiber": 0,
+    "note": "",
+    "default_serving_label": ""
+  },
+  "apply_now": false
+}
+
+Rules:
+- Preserve the current draft unless the user changes something.
+- If the latest user message says the guess is wrong, try again, or search again, do not cling to the old food guess. Replace the draft with a new best guess.
+- If the user says "make it 150 calories", update calories and keep the rest unless another field should obviously move with it.
+- If the user says a meal, move it to that meal.
+- Default meal_type to snack if not specified.
+- Default entry_date to today unless the user specifies another date.
+- Estimate realistic nutrition when needed.
+- Always include sugar and fiber estimates, even if rough.
+- Keep food_name human and concise, for example "2 boiled eggs".
+- If the photo is a nutrition label or package nutrition panel, extract the serving size from the label and put it in default_serving_label.
+- If the user gives a product name plus a nutrition label photo, use the label values instead of guessing from memory.
+- If the photo is ambiguous, briefly mention up to 2 likely alternatives instead of sounding overconfident.
+- After drafting or revising, summarize the draft with calories and key macros, then ask for confirmation.
+- If a photo is unclear, say what you think it is and mention the uncertainty briefly.
+- If retrying from a photo, use the image again and produce a different best guess or ask one short clarifying question.
+- If details are missing, ask one short follow-up instead of overexplaining.
+- When the user confirms, keep the reply brief because the app will add the entry next.
+
+Today is ${todayIso()}.
+Current draft:
+${JSON.stringify(retryRequested ? draftForRetry(currentDraft) : currentDraft, null, 2)}`;
+
+	if (!env.OPENAI_API_KEY) {
+		return json(
+			{
+				reply: 'Assistant is not configured yet.',
+				draft: currentDraft,
+				drafts: currentDrafts,
+				applied: false
+			},
+			{ status: 500 }
+		);
+	}
+
+	const userMessages = recentMessages.map((message) => ({
+		role: message.role,
+		content: message.content
+	}));
+
+	if (hasPhoto) {
+		const latestUserText = lastUserMessage || 'Analyze this food photo and draft a fitness entry.';
+		userMessages.push({
+			role: 'user',
+			content: [
+				{ type: 'text', text: latestUserText },
+				{
+					type: 'image_url',
+					image_url: {
+						url: imageDataUrl
+					}
+				}
+			]
+		} as unknown as { role: ChatRole; content: string });
+	}
+
+	const openAiResponse = await fetch('https://api.openai.com/v1/chat/completions', {
+		method: 'POST',
+		headers: {
+			'content-type': 'application/json',
+			authorization: `Bearer ${env.OPENAI_API_KEY}`
+		},
+		body: JSON.stringify({
+			model: env.OPENAI_MODEL || 'gpt-5.2',
+			response_format: { type: 'json_object' },
+			temperature: 0.2,
+			max_completion_tokens: 900,
+			messages: [
+				{ role: 'system', content: systemPrompt },
+				...userMessages
+			]
+		})
+	});
+
+	if (!openAiResponse.ok) {
+		const errorText = await openAiResponse.text();
+		return json(
+			{
+				reply: 'The assistant did not respond cleanly.',
+				draft: currentDraft,
+				drafts: currentDrafts,
+				applied: false,
+				error: errorText
+			},
+			{ status: 500 }
+		);
+	}
+
+	const raw = await openAiResponse.json();
+	const content = raw?.choices?.[0]?.message?.content;
+	if (typeof content !== 'string') {
+		return json(
+			{
+				reply: 'The assistant response was empty.',
+				draft: currentDraft,
+				drafts: currentDrafts,
+				applied: false
+			},
+			{ status: 500 }
+		);
+	}
+
+	let parsed: { reply?: string; draft?: Draft; apply_now?: boolean };
+	try {
+		parsed = JSON.parse(content);
+	} catch {
+		return json(
+			{
+				reply: 'The assistant response could not be parsed.',
+				draft: currentDraft,
+				drafts: currentDrafts,
+				applied: false
+			},
+			{ status: 500 }
+		);
+	}
+
+	const nextDraft = clampDraft(parsed.draft || currentDraft);
+
+	if (parsed.apply_now && allowApply && hasCompleteDraft(nextDraft)) {
+		const result = await applyDraft(fetch, nextDraft);
+		if (result.ok) {
+			return json({
+				reply: `Added ${nextDraft.food_name} to ${nextDraft.meal_type}.`,
+				draft: nextDraft,
+				drafts: [],
+				applied: true,
+				entry: result.body
+			});
+		}
+	}
+
+	return json({
+		reply:
+			parsed.reply ||
+			(hasCompleteDraft(nextDraft)
+				? `${nextDraft.food_name} is staged at ${Math.round(nextDraft.calories || 0)} calories.`
+				: 'I updated the draft.'),
+		draft: nextDraft,
+		drafts: [],
+		applied: false
+	});
+};
diff --git a/frontend-v2/src/routes/atelier/+layout.server.ts b/frontend-v2/src/routes/atelier/+layout.server.ts
new file mode 100644
index 0000000..ae37604
--- /dev/null
+++ b/frontend-v2/src/routes/atelier/+layout.server.ts
@@ -0,0 +1,37 @@
+import { redirect } from '@sveltejs/kit';
+import type { LayoutServerLoad } from './$types';
+import { env } from '$env/dynamic/private';
+
+const gatewayUrl = env.GATEWAY_URL || 'http://localhost:8100';
+const devAutoLogin = ['1', 'true', 'yes', 'on'].includes((env.DEV_AUTO_LOGIN || '').toLowerCase());
+
+export const load: LayoutServerLoad = async ({ cookies, url }) => {
+	const session = cookies.get('platform_session');
+	const onTestHost = url.host.toLowerCase().includes(':4174') || url.host.toLowerCase().startsWith('test.');
+	if (!session && !(devAutoLogin && onTestHost)) {
+		throw redirect(302, `/login?redirect=${encodeURIComponent(url.pathname)}`);
+	}
+
+	try {
+		const headers: Record<string, string> = {};
+		if (session) headers.Cookie = `platform_session=${session}`;
+		if (devAutoLogin && onTestHost) headers['X-Dev-Auto-Login'] = '1';
+		const res = await fetch(`${gatewayUrl}/api/auth/me`, {
+			headers
+		});
+		if (res.ok) {
+			const data = await res.json();
+			if (data.authenticated) {
+				const allApps = ['tasks', 'trips', 'fitness', 'inventory', 'budget', 'reader', 'media'];
+				const hiddenByUser: Record<string, string[]> = {
+					'madiha': ['inventory', 'reader'],
+				};
+				const hidden = hiddenByUser[data.user.username] || [];
+				const visibleApps = allApps.filter(a => !hidden.includes(a));
+				return { user: data.user, visibleApps };
+			}
+		}
+	} catch { /* gateway down */ }
+
+	throw redirect(302, `/login?redirect=${encodeURIComponent(url.pathname)}`);
+};
diff --git a/frontend-v2/src/routes/atelier/+layout.svelte b/frontend-v2/src/routes/atelier/+layout.svelte
new file mode 100644
index 0000000..7f6d130
--- /dev/null
+++ b/frontend-v2/src/routes/atelier/+layout.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import AppShell from '$lib/components/layout/AppShell.svelte';
+	import FitnessAssistantDrawer from '$lib/components/assistant/FitnessAssistantDrawer.svelte';
+
+	let { children, data } = $props();
+	let commandOpen = $state(false);
+	const visibleApps = data?.visibleApps || ['trips', 'fitness', 'inventory', 'budget', 'reader', 'media'];
+	const userName = data?.user?.display_name || '';
+
+	function openCommand() {
+		commandOpen = true;
+	}
+
+	function closeCommand() {
+		commandOpen = false;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+			e.preventDefault();
+			commandOpen = !commandOpen;
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<AppShell onOpenCommand={openCommand} {visibleApps} {userName}>
+	{@render children()}
+</AppShell>
+
+<FitnessAssistantDrawer bind:open={commandOpen} onclose={closeCommand} />
diff --git a/frontend-v2/src/routes/atelier/+page.svelte b/frontend-v2/src/routes/atelier/+page.svelte
new file mode 100644
index 0000000..330101a
--- /dev/null
+++ b/frontend-v2/src/routes/atelier/+page.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import PageIntro from '$lib/components/shared/PageIntro.svelte';
+</script>
+
+<div class="page">
+	<div class="app-surface">
+		<PageIntro
+			eyebrow="Atelier"
+			title="A parallel frontend for the next Platform"
+			description="This route tree is the new interface track. It can evolve against the same backend APIs while the current app remains live and unchanged."
+			meta="Safe parallel build"
+		/>
+
+		<div class="links">
+			<a href="/atelier/inventory">Open inventory</a>
+			<a href="/atelier/fitness">Open fitness</a>
+			<a href="/atelier/reader">Open reader</a>
+		</div>
+	</div>
+</div>
+
+<style>
+	.links {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 12px;
+	}
+	.links a {
+		padding: 12px 16px;
+		border-radius: 999px;
+		background: rgba(255,255,255,0.68);
+		border: 1px solid rgba(35,26,17,0.08);
+	}
+</style>
diff --git a/frontend-v2/src/routes/atelier/fitness/+page.svelte b/frontend-v2/src/routes/atelier/fitness/+page.svelte
new file mode 100644
index 0000000..9c4038e
--- /dev/null
+++ b/frontend-v2/src/routes/atelier/fitness/+page.svelte
@@ -0,0 +1,2680 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack';
+  type FitnessTab = 'log' | 'foods' | 'templates';
+
+  interface FoodEntry {
+    id: string;
+    name: string;
+    serving: string;
+    calories: number;
+    protein: number;
+    carbs: number;
+    fat: number;
+    method: string;
+    image?: string;
+    note?: string;
+    meal: MealType;
+    rawQty: number;
+    rawUnit: string;
+  }
+
+  interface FoodItem {
+    id: string;
+    name: string;
+    info: string;
+    calories: number;
+    favorite?: boolean;
+  }
+
+  interface Template {
+    id: string;
+    name: string;
+    calories: number;
+    items: number;
+    meal: string;
+  }
+
+  const now = new Date();
+  const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+
+  let activeTab = $state<FitnessTab>('log');
+  let selectedDate = $state(todayStr);
+  let expandedMeals = $state<Set<string>>(new Set(['breakfast', 'lunch', 'dinner', 'snack']));
+  let foodSearch = $state('');
+  let highlightTemplate = $state('');
+  let fabOpen = $state(false);
+  let loading = $state(true);
+  let foodsLoading = $state(false);
+  let templatesLoading = $state(false);
+
+  let entries = $state<FoodEntry[]>([]);
+  let goal = $state({ calories: 2000, protein: 150, carbs: 200, fat: 65 });
+  let foods = $state<FoodItem[]>([]);
+  let templates = $state<Template[]>([]);
+
+  // Map backend entry to UI entry
+  function mapEntry(e: any): FoodEntry {
+    return {
+      id: e.id,
+      name: e.snapshot_food_name || 'Unknown',
+      serving: e.serving_description || e.snapshot_serving_label || `${e.quantity || 1} ${e.unit || 'serving'}`,
+      calories: Math.round(e.snapshot_calories || 0),
+      protein: Math.round(e.snapshot_protein || 0),
+      carbs: Math.round(e.snapshot_carbs || 0),
+      fat: Math.round(e.snapshot_fat || 0),
+      method: e.entry_method || 'manual',
+      image: e.food_image_path,
+      note: e.note,
+      meal: (e.meal_type || 'snack') as MealType,
+      rawQty: e.quantity || 1,
+      rawUnit: e.unit || 'serving',
+    };
+  }
+
+  // Map backend food to UI food (handles both /foods and /foods/recent shapes)
+  function mapFood(f: any): FoodItem {
+    const id = f.id || f.food_id || '';
+    const name = f.name || f.snapshot_food_name || 'Unknown';
+    const brand = f.brand ? `${f.brand} · ` : '';
+    const unit = f.base_unit === '100g' ? '100g' : (f.servings?.[0]?.label || f.base_unit || 'serving');
+    return {
+      id,
+      name,
+      info: `${brand}${unit}`,
+      calories: Math.round(f.calories_per_base || 0),
+      favorite: f.is_favorite || false,
+    };
+  }
+
+  // Map backend template to UI template
+  function mapTemplate(t: any): Template {
+    const items = t.items || [];
+    const totalCal = items.reduce((s: number, i: any) => s + (i.snapshot_calories || 0) * (i.quantity || 1), 0);
+    return {
+      id: t.id,
+      name: t.name,
+      calories: Math.round(totalCal),
+      items: items.length,
+      meal: t.meal_type || 'snack',
+    };
+  }
+
+  async function loadDayData() {
+    loading = true;
+    try {
+      const [entriesRes, goalsRes] = await Promise.all([
+        fetch(`/api/fitness/entries?date=${selectedDate}`, { credentials: 'include' }),
+        fetch(`/api/fitness/goals/for-date?date=${selectedDate}`, { credentials: 'include' }),
+      ]);
+      if (entriesRes.ok) {
+        const raw = await entriesRes.json();
+        entries = (Array.isArray(raw) ? raw : []).map(mapEntry);
+      } else {
+        entries = [];
+      }
+      if (goalsRes.ok) {
+        const g = await goalsRes.json();
+        goal = { calories: g.calories || 2000, protein: g.protein || 150, carbs: g.carbs || 200, fat: g.fat || 65 };
+      }
+    } catch { /* silent */ }
+    loading = false;
+  }
+
+  async function loadFoods(query?: string) {
+    foodsLoading = true;
+    try {
+      const url = query
+        ? `/api/fitness/foods/search?q=${encodeURIComponent(query)}&limit=30`
+        : `/api/fitness/foods?limit=100`;
+      const res = await fetch(url, { credentials: 'include' });
+      if (res.ok) {
+        const raw = await res.json();
+        foods = (Array.isArray(raw) ? raw : []).map(mapFood);
+      }
+    } catch { /* silent */ }
+    foodsLoading = false;
+  }
+
+  async function loadTemplates() {
+    templatesLoading = true;
+    try {
+      const res = await fetch('/api/fitness/templates', { credentials: 'include' });
+      if (res.ok) {
+        const raw = await res.json();
+        templates = (Array.isArray(raw) ? raw : []).map(mapTemplate);
+      }
+    } catch { /* silent */ }
+    templatesLoading = false;
+  }
+
+  let expandedEntry = $state<string | null>(null);
+
+  async function deleteEntry(id: string) {
+    expandedEntry = null;
+    entries = entries.filter(e => e.id !== id);
+    try {
+      await fetch(`/api/fitness/entries/${id}`, { method: 'DELETE', credentials: 'include' });
+    } catch {
+      await loadDayData();
+    }
+  }
+
+  let editQtyValue = $state('');
+
+  function toggleEntry(id: string) {
+    if (expandedEntry === id) {
+      expandedEntry = null;
+    } else {
+      expandedEntry = id;
+      const entry = entries.find(e => e.id === id);
+      editQtyValue = entry ? String(entry.rawQty) : '1';
+    }
+  }
+
+  async function updateEntryQty(id: string) {
+    const newQty = parseFloat(editQtyValue);
+    if (!newQty || newQty <= 0) return;
+    expandedEntry = null;
+    try {
+      const res = await fetch(`/api/fitness/entries/${id}`, {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ quantity: newQty }),
+      });
+      if (res.ok) {
+        await loadDayData();
+      }
+    } catch { /* silent */ }
+  }
+
+  async function logTemplate(tpl: Template) {
+    try {
+      const res = await fetch(`/api/fitness/templates/${tpl.id}/log`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ meal_type: tpl.meal, entry_date: selectedDate }),
+      });
+      if (res.ok) {
+        activeTab = 'log';
+        await loadDayData();
+      }
+    } catch { /* silent */ }
+  }
+
+  // ── AI Food Resolve (multi-item) ──
+  interface ResolvedItem {
+    result: any;
+    name: string;
+    qty: number;
+    unit: string;
+    calories: number;
+    protein: number;
+    carbs: number;
+    fat: number;
+  }
+
+  let resolveInput = $state('');
+  let resolveMeal = $state<MealType>('snack');
+  let resolving = $state(false);
+  let resolvedItems = $state<ResolvedItem[]>([]);
+  let resolveError = $state('');
+  let confirmLogging = $state(false);
+
+  function guessCurrentMeal(): MealType {
+    const h = new Date().getHours();
+    if (h >= 6 && h < 11) return 'breakfast';
+    if (h >= 11 && h < 15) return 'lunch';
+    if (h >= 17 && h < 21) return 'dinner';
+    return 'snack';
+  }
+
+  async function splitInputItems(input: string): Promise<string[]> {
+    // Use AI to split multi-item input into individual food items
+    try {
+      const res = await fetch('/api/fitness/foods/split', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ phrase: input }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data.items?.length > 0) return data.items;
+      }
+    } catch { /* fallback below */ }
+    // Fallback: comma split
+    return input.split(/,/).map(s => s.trim()).filter(s => s.length > 0);
+  }
+
+  function resolveToItem(r: any): ResolvedItem {
+    const qty = r.parsed?.quantity || 1;
+    const food = r.matched_food;
+    let cal = 0, pro = 0, carb = 0, f = 0;
+    if (food) {
+      cal = (food.calories_per_base || 0) * qty;
+      pro = (food.protein_per_base || 0) * qty;
+      carb = (food.carbs_per_base || 0) * qty;
+      f = (food.fat_per_base || 0) * qty;
+    } else if (r.ai_estimate) {
+      cal = (r.ai_estimate.calories_per_base || 0) * qty;
+      pro = (r.ai_estimate.protein_per_base || 0) * qty;
+      carb = (r.ai_estimate.carbs_per_base || 0) * qty;
+      f = (r.ai_estimate.fat_per_base || 0) * qty;
+    } else if (r.resolution_type === 'quick_add') {
+      cal = r.parsed?.quantity || 0;
+    }
+    const name = r.snapshot_name_override || food?.name || r.ai_estimate?.food_name || r.raw_text || 'Unknown';
+    return {
+      result: r,
+      name,
+      qty: Math.round(qty * 10) / 10,
+      unit: r.parsed?.unit || 'serving',
+      calories: Math.round(cal),
+      protein: Math.round(pro),
+      carbs: Math.round(carb),
+      fat: Math.round(f),
+    };
+  }
+
+  async function submitResolve() {
+    const phrase = resolveInput.trim();
+    if (!phrase) return;
+    resolving = true;
+    resolveError = '';
+    resolvedItems = [];
+    resolveMeal = guessCurrentMeal();
+
+    const parts = await splitInputItems(phrase);
+
+    try {
+      const results = await Promise.all(parts.map(async (part) => {
+        const res = await fetch('/api/fitness/foods/resolve', {
+          method: 'POST',
+          credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ raw_phrase: part, meal_type: resolveMeal, entry_date: selectedDate }),
+        });
+        if (!res.ok) {
+          if (res.status === 401) throw new Error('Not connected — connect fitness in Settings');
+          throw new Error(`Failed to resolve "${part}" (${res.status})`);
+        }
+        return res.json();
+      }));
+      resolvedItems = results.map(resolveToItem);
+    } catch (e: any) {
+      resolveError = e?.message || 'Network error';
+    }
+    resolving = false;
+  }
+
+  function updateItemQty(index: number, newQty: number) {
+    if (newQty <= 0) return;
+    const item = resolvedItems[index];
+    const r = item.result;
+    const food = r.matched_food;
+    const base = food || r.ai_estimate;
+    if (!base) return;
+    resolvedItems[index] = {
+      ...item,
+      qty: Math.round(newQty * 10) / 10,
+      calories: Math.round((base.calories_per_base || 0) * newQty),
+      protein: Math.round((base.protein_per_base || 0) * newQty),
+      carbs: Math.round((base.carbs_per_base || 0) * newQty),
+      fat: Math.round((base.fat_per_base || 0) * newQty),
+    };
+  }
+
+  function removeItem(index: number) {
+    resolvedItems = resolvedItems.filter((_, i) => i !== index);
+    if (resolvedItems.length === 0) cancelResolve();
+  }
+
+  const resolveTotalCal = $derived(resolvedItems.reduce((s, i) => s + i.calories, 0));
+
+  async function confirmResolve() {
+    if (resolvedItems.length === 0) return;
+    confirmLogging = true;
+    try {
+      for (const item of resolvedItems) {
+        const r = item.result;
+        let body: any;
+        if (r.resolution_type === 'quick_add' && !r.matched_food) {
+          body = {
+            entry_type: 'quick_add',
+            snapshot_food_name: r.raw_text || 'Quick add',
+            snapshot_calories: item.calories,
+            meal_type: resolveMeal,
+            entry_date: selectedDate,
+            source: 'web',
+            raw_text: r.raw_text,
+          };
+        } else if (r.matched_food) {
+          body = {
+            food_id: r.matched_food.id,
+            quantity: item.qty,
+            unit: item.unit,
+            meal_type: resolveMeal,
+            entry_date: selectedDate,
+            entry_method: r.resolution_type === 'ai_estimated' ? 'ai_label' : 'search',
+            source: 'web',
+            raw_text: r.raw_text,
+            confidence_score: r.confidence,
+            note: r.note || undefined,
+            snapshot_food_name_override: r.snapshot_name_override || undefined,
+          };
+        }
+        if (body) {
+          await fetch('/api/fitness/entries', {
+            method: 'POST',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+          });
+        }
+      }
+      resolvedItems = [];
+      resolveInput = '';
+      await loadDayData();
+    } catch { /* silent */ }
+    confirmLogging = false;
+  }
+
+  function cancelResolve() {
+    resolvedItems = [];
+    resolveError = '';
+  }
+
+  // ── Food Edit/Delete ──
+  let editingFood = $state<any>(null);
+  let editFoodName = $state('');
+  let editFoodCal = $state('');
+  let editFoodProtein = $state('');
+  let editFoodCarbs = $state('');
+  let editFoodFat = $state('');
+  let editFoodUnit = $state('');
+  let savingFood = $state(false);
+
+  function openFoodEdit(food: FoodItem) {
+    editingFood = food;
+    editFoodName = food.name;
+    editFoodCal = String(food.calories);
+    editFoodProtein = '';
+    editFoodCarbs = '';
+    editFoodFat = '';
+    editFoodUnit = food.info.split('·').pop()?.trim() || 'serving';
+    // Fetch full food data for macros
+    fetch(`/api/fitness/foods/${food.id}`, { credentials: 'include' })
+      .then(r => r.ok ? r.json() : null)
+      .then(data => {
+        if (data) {
+          editFoodProtein = String(Math.round(data.protein_per_base || 0));
+          editFoodCarbs = String(Math.round(data.carbs_per_base || 0));
+          editFoodFat = String(Math.round(data.fat_per_base || 0));
+          editFoodUnit = data.base_unit || 'serving';
+        }
+      })
+      .catch(() => {});
+  }
+
+  function closeFoodEdit() {
+    editingFood = null;
+  }
+
+  async function saveFoodEdit() {
+    if (!editingFood) return;
+    savingFood = true;
+    try {
+      await fetch(`/api/fitness/foods/${editingFood.id}`, {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: editFoodName.trim(),
+          calories_per_base: parseFloat(editFoodCal) || 0,
+          protein_per_base: parseFloat(editFoodProtein) || 0,
+          carbs_per_base: parseFloat(editFoodCarbs) || 0,
+          fat_per_base: parseFloat(editFoodFat) || 0,
+        }),
+      });
+      editingFood = null;
+      await loadFoods(foodSearch || undefined);
+    } catch { /* silent */ }
+    savingFood = false;
+  }
+
+  async function deleteFood() {
+    if (!editingFood) return;
+    savingFood = true;
+    try {
+      await fetch(`/api/fitness/foods/${editingFood.id}`, {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+      editingFood = null;
+      await loadFoods(foodSearch || undefined);
+    } catch { /* silent */ }
+    savingFood = false;
+  }
+
+  // Reload day data when date changes
+  $effect(() => {
+    selectedDate; // track
+    loadDayData();
+  });
+
+  // Reload foods when search changes (debounced)
+  let foodSearchTimeout: ReturnType<typeof setTimeout>;
+  $effect(() => {
+    const q = foodSearch;
+    clearTimeout(foodSearchTimeout);
+    foodSearchTimeout = setTimeout(() => loadFoods(q || undefined), q ? 300 : 0);
+  });
+
+  onMount(() => {
+    loadTemplates();
+  });
+
+  function jumpToTemplates() {
+    activeTab = 'templates';
+    if (rankedTemplates.length > 0) {
+      highlightTemplate = rankedTemplates[0].name;
+      setTimeout(() => { highlightTemplate = ''; }, 2000);
+    }
+  }
+
+  const filteredFoods = $derived(foods);
+
+  const totals = $derived({
+    calories: entries.reduce((s, e) => s + e.calories, 0),
+    protein: entries.reduce((s, e) => s + e.protein, 0),
+    carbs: entries.reduce((s, e) => s + e.carbs, 0),
+    fat: entries.reduce((s, e) => s + e.fat, 0),
+    count: entries.length
+  });
+
+  const caloriesRemaining = $derived(goal.calories > 0 ? Math.max(goal.calories - totals.calories, 0) : 0);
+  const caloriesPercent = $derived(goal.calories > 0 ? Math.round((totals.calories / goal.calories) * 100) : 0);
+  const isToday = $derived(selectedDate === todayStr);
+
+  function entriesByMeal(meal: MealType) { return entries.filter(e => e.meal === meal); }
+  function mealCalories(meal: MealType) { return entriesByMeal(meal).reduce((s, e) => s + e.calories, 0); }
+  function mealProtein(meal: MealType) { return entriesByMeal(meal).reduce((s, e) => s + e.protein, 0); }
+
+  function toggleMeal(meal: string) {
+    const next = new Set(expandedMeals);
+    if (next.has(meal)) next.delete(meal); else next.add(meal);
+    expandedMeals = next;
+  }
+
+  function shiftDate(days: number) {
+    const d = new Date(selectedDate + 'T00:00:00');
+    d.setDate(d.getDate() + days);
+    selectedDate = d.toISOString().split('T')[0];
+  }
+
+  function formatDate(date: string) {
+    const d = new Date(date + 'T00:00:00');
+    return d.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' });
+  }
+
+  // Action-oriented coaching based on progress
+  function coachMessage(remaining: number, percent: number): string {
+    if (percent >= 100) return 'Done for the day — you hit your goal';
+    if (percent >= 90) return 'Almost done — keep it light';
+    if (percent >= 75) return 'Finish strong — ' + remaining.toLocaleString() + ' cal left';
+    if (percent >= 50) return 'You\'ve got room for a solid meal';
+    if (percent >= 25) return 'On track — plan your next meal';
+    if (percent > 0) return 'Just getting started — ' + remaining.toLocaleString() + ' cal to work with';
+    return 'Start logging to see your progress';
+  }
+
+  // Coaching focus — what the user needs most right now
+  type CoachFocus = 'protein' | 'low_carb' | 'low_fat' | 'light' | 'balanced';
+
+  function getCoachFocus(t: typeof totals, g: typeof goal, calLeft: number): CoachFocus {
+    const proteinPct = t.protein / g.protein;
+    const carbsPct = t.carbs / g.carbs;
+    const fatPct = t.fat / g.fat;
+    if (calLeft < 300) return 'light';
+    if (proteinPct < 0.7) return 'protein';
+    if (carbsPct > 0.8 && proteinPct < 0.8) return 'low_carb';
+    if (fatPct > 0.8) return 'low_fat';
+    return 'balanced';
+  }
+
+  const coachFocus = $derived(getCoachFocus(totals, goal, caloriesRemaining));
+
+  // "Best next move" — realistic meal suggestions
+  function bestNextMove(t: typeof totals, g: typeof goal, calRemaining: number): string {
+    if (calRemaining <= 0) return '';
+
+    const proteinPct = t.protein / g.protein;
+    const carbsPct = t.carbs / g.carbs;
+    const fatPct = t.fat / g.fat;
+    const proteinLeft = Math.max(g.protein - t.protein, 0);
+
+    // Protein-focused — use realistic meal combos
+    if (proteinPct < 0.4 && proteinLeft > 40) {
+      const lo = Math.round(proteinLeft * 0.3);
+      const hi = Math.round(proteinLeft * 0.45);
+      return `Best next: ~${lo}–${hi}g protein (chicken + rice, 3 eggs, or a shake)`;
+    }
+    if (proteinPct < 0.6 && proteinLeft > 25) {
+      const lo = Math.round(proteinLeft * 0.35);
+      const hi = Math.round(proteinLeft * 0.5);
+      return `Best next: ~${lo}–${hi}g protein (chicken, Greek yogurt, or protein shake)`;
+    }
+    if (proteinPct < 0.8 && proteinLeft > 10) {
+      return `Best next: ~${Math.round(proteinLeft * 0.6)}–${proteinLeft}g protein (eggs, yogurt, or tuna)`;
+    }
+
+    // Carbs running high + still need protein
+    if (carbsPct > 0.8 && proteinPct < 0.75) {
+      return 'Best next: skip the carbs — chicken salad, eggs, or a protein shake';
+    }
+
+    // Fat running high
+    if (fatPct > 0.85) {
+      return 'Best next: lean protein + rice or sweet potato — skip the oils';
+    }
+    if (fatPct > 0.7 && carbsPct < 0.5) {
+      return 'Best next: oatmeal, rice bowl, or pasta with grilled chicken';
+    }
+
+    // Low calories remaining
+    if (calRemaining < 200) {
+      return 'Best next: something light — yogurt, fruit, or veggies';
+    }
+    if (calRemaining < 400) {
+      return 'Best next: small meal — salad with chicken, or a shake with fruit';
+    }
+
+    // Everything balanced
+    return 'Best next: balanced plate — protein, carbs, and veggies';
+  }
+
+  // Macro guidance — considers both target gap and calories budget
+  function macroInstruction(macro: 'protein' | 'carbs' | 'fat', current: number, target: number, calLeft: number): string {
+    const pct = Math.round((current / target) * 100);
+    const left = Math.max(target - current, 0);
+    if (pct >= 100) return 'On target';
+
+    const budgetTight = calLeft < 400;
+
+    if (macro === 'protein') {
+      if (pct < 50 && !budgetTight) return 'Prioritize protein';
+      if (pct < 50 && budgetTight) return 'Add lean protein';
+      if (pct < 80) return 'Add protein';
+      return 'Almost there';
+    }
+    if (macro === 'carbs') {
+      if (pct >= 85) return 'Ease off carbs';
+      if (pct >= 70) return 'Watch carbs';
+      return 'Carbs on track';
+    }
+    // fat
+    if (pct >= 85) return 'Keep fats minimal';
+    if (pct >= 70) return 'Keep fats light';
+    return 'Fats on track';
+  }
+
+  function macroLeft(current: number, target: number): string {
+    const left = Math.max(target - current, 0);
+    if (left === 0) return '';
+    return `${left}g left`;
+  }
+
+  // Meal weight label — contextual per meal type
+  function mealWeight(mealCal: number, dailyGoal: number, meal: MealType): string {
+    if (mealCal === 0) return '';
+    const pct = Math.round((mealCal / dailyGoal) * 100);
+
+    if (meal === 'snack') {
+      // Snacks: bias toward Light/Snack
+      if (pct >= 25) return 'Heavy';
+      if (pct >= 12) return 'Moderate';
+      return 'Light';
+    }
+    if (meal === 'breakfast') {
+      // Breakfast: cap at Moderate
+      if (pct >= 30) return 'Moderate';
+      if (pct >= 12) return 'Light';
+      return 'Snack';
+    }
+    // Lunch / Dinner: normal scale
+    if (pct >= 35) return 'Heavy';
+    if (pct >= 20) return 'Moderate';
+    if (pct >= 8) return 'Light';
+    return 'Snack';
+  }
+
+  // Template scoring — decisive ranking aligned with coaching focus
+  function templateScore(tpl: Template, t: typeof totals, g: typeof goal, calLeft: number, focus: CoachFocus): number {
+    let score = 0;
+    const hour = new Date().getHours();
+    const isProteinRich = /protein|chicken|egg|salmon/i.test(tpl.name);
+    const isCarbHeavy = /oatmeal|rice|pasta/i.test(tpl.name);
+
+    // ── Calorie fit (highest weight) ──
+    if (calLeft > 0) {
+      if (tpl.calories <= calLeft) {
+        const ratio = tpl.calories / calLeft;
+        // Perfect fit: within ±15%
+        if (ratio >= 0.85 && ratio <= 1.0) score += 50;
+        // Good fit: within ±30%
+        else if (ratio >= 0.7) score += 35;
+        // Usable: under budget but not close
+        else if (ratio >= 0.4) score += 15;
+      } else {
+        // Over remaining — penalize harder
+        const overBy = (tpl.calories - calLeft) / calLeft;
+        score -= overBy > 0.3 ? 30 : 15;
+      }
+    }
+
+    // ── Coaching alignment (reinforce "Best next" direction) ──
+    if (focus === 'protein' && isProteinRich) score += 35;
+    if (focus === 'protein' && !isProteinRich) score -= 5;
+    if (focus === 'low_carb' && isCarbHeavy) score -= 20;
+    if (focus === 'low_carb' && isProteinRich) score += 20;
+    if (focus === 'low_fat' && isProteinRich) score += 15;
+    if (focus === 'light' && tpl.calories < 350) score += 20;
+    if (focus === 'light' && tpl.calories > 500) score -= 20;
+
+    // ── Time-of-day ──
+    if (tpl.meal === 'breakfast' && hour >= 6 && hour < 11) score += 15;
+    if (tpl.meal === 'lunch' && hour >= 11 && hour < 15) score += 15;
+    if (tpl.meal === 'dinner' && hour >= 17 && hour < 21) score += 15;
+    if (tpl.meal === 'snack' && hour >= 14 && hour < 17) score += 10;
+
+    // ── Macro penalties ──
+    const carbsPct = t.carbs / g.carbs;
+    const fatPct = t.fat / g.fat;
+    if (carbsPct > 0.85 && isCarbHeavy) score -= 15;
+    if (fatPct > 0.85) score -= 5;
+
+    return score;
+  }
+
+  // Sorted templates by score (descending)
+  const rankedTemplates = $derived(
+    [...templates]
+      .map(tpl => ({ tpl, score: templateScore(tpl, totals, goal, caloriesRemaining, coachFocus) }))
+      .sort((a, b) => b.score - a.score)
+      .map(item => item.tpl)
+  );
+
+  // Template hints — selective, max 3 total, top-ranked only
+  function templateHints(ranked: Template[], t: typeof totals, g: typeof goal, calLeft: number): Map<string, string> {
+    const hints = new Map<string, string>();
+    const hour = new Date().getHours();
+    const proteinPct = t.protein / g.protein;
+    const proteinPhrases = ['High protein option', 'Great for protein', 'Helps close your protein gap'];
+    let proteinIdx = 0;
+    const MAX_HINTS = 3;
+
+    // Only consider top-ranked templates for hints
+    const candidates = ranked.slice(0, Math.min(ranked.length, 5));
+
+    for (const tpl of candidates) {
+      if (hints.size >= MAX_HINTS) break;
+
+      // Calorie fit — tight ±15%
+      if (calLeft > 0 && tpl.calories <= calLeft) {
+        const ratio = tpl.calories / calLeft;
+        if (ratio >= 0.85 && ratio <= 1.0) {
+          hints.set(tpl.name, 'Fits your remaining calories');
+          continue;
+        }
+      }
+
+      // Protein hint — varied phrasing, max 2
+      const isProteinRich = /protein|chicken|egg|salmon/i.test(tpl.name);
+      if (isProteinRich && proteinPct < 0.7 && proteinIdx < 2) {
+        hints.set(tpl.name, proteinPhrases[proteinIdx]);
+        proteinIdx++;
+        continue;
+      }
+
+      // Time-of-day — max 1
+      if (!Array.from(hints.values()).some(h => h.startsWith('Good '))) {
+        if (tpl.meal === 'breakfast' && hour >= 6 && hour < 11) { hints.set(tpl.name, 'Good for this morning'); continue; }
+        if (tpl.meal === 'lunch' && hour >= 11 && hour < 15) { hints.set(tpl.name, 'Good for lunch right now'); continue; }
+        if (tpl.meal === 'dinner' && hour >= 17 && hour < 21) { hints.set(tpl.name, 'Good dinner choice'); continue; }
+        if (tpl.meal === 'snack' && hour >= 14 && hour < 17) { hints.set(tpl.name, 'Good afternoon pick-me-up'); continue; }
+      }
+    }
+
+    return hints;
+  }
+
+  const templateHintMap = $derived(templateHints(rankedTemplates, totals, goal, caloriesRemaining));
+
+  const mealTypes: MealType[] = ['breakfast', 'lunch', 'dinner', 'snack'];
+</script>
+
+<div class="fitness-page">
+  <div class="fitness-shell">
+    <header class="fitness-header">
+      <div class="fitness-heading">
+        <div class="fitness-kicker">Fitness desk</div>
+        <h1>Nutrition</h1>
+        <p>
+          Daily intake, food memory, and quick meal decisions in one quieter workspace.
+        </p>
+      </div>
+
+      <div class="fitness-header-side">
+        <div class="date-nav">
+          <button class="btn-icon" onclick={() => shiftDate(-1)} aria-label="Previous day">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+          </button>
+          <input type="date" class="date-input" bind:value={selectedDate} />
+          <button class="btn-icon" onclick={() => shiftDate(1)} aria-label="Next day">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </button>
+          {#if !isToday}
+            <button class="today-btn" onclick={() => selectedDate = todayStr}>Today</button>
+          {/if}
+        </div>
+        <div class="fitness-date-readout">{#if isToday}Today{:else}{formatDate(selectedDate)}{/if}</div>
+      </div>
+    </header>
+
+    <div class="top-tabs">
+      <button class="top-tab" class:active={activeTab === 'log'} onclick={() => activeTab = 'log'}>Day log</button>
+      <button class="top-tab" class:active={activeTab === 'foods'} onclick={() => activeTab = 'foods'}>Food library</button>
+      <button class="top-tab" class:active={activeTab === 'templates'} onclick={() => activeTab = 'templates'}>Quick meals</button>
+    </div>
+
+    {#if activeTab === 'log'}
+      <div class="fitness-log-grid">
+        <aside class="fitness-rail">
+          <section class="rail-panel calorie-card">
+            <div class="panel-kicker">Daily target</div>
+            <div class="calorie-eaten">
+              <span class="calorie-number">{totals.calories.toLocaleString()}</span>
+              <span class="calorie-of">/ {goal.calories.toLocaleString()}</span>
+            </div>
+            <div class="progress-bar">
+              <div class="progress-fill" style="width:{Math.min(caloriesPercent, 100)}%"></div>
+            </div>
+            <div class="calorie-coach">{coachMessage(caloriesRemaining, caloriesPercent)}</div>
+            {#if caloriesRemaining > 0}
+              {@const hint = bestNextMove(totals, goal, caloriesRemaining)}
+              {#if hint}
+                <button class="calorie-next" onclick={jumpToTemplates}>{hint} <span class="next-arrow">→</span></button>
+              {/if}
+            {/if}
+          </section>
+
+          <section class="rail-panel macro-panel">
+            <div class="panel-kicker">Macro balance</div>
+            <div class="macro-row">
+              <div class="macro-item">
+                <div class="macro-bar-wrap">
+                  <div class="macro-bar-fill protein" style="width:{Math.min(totals.protein / goal.protein * 100, 100)}%"></div>
+                </div>
+                <div class="macro-label">
+                  <span class="macro-current">{totals.protein}g</span>
+                  <span class="macro-name">Protein</span>
+                </div>
+                <div class="macro-guidance">
+                  <div class="macro-instruction">{macroInstruction('protein', totals.protein, goal.protein, caloriesRemaining)}</div>
+                  <div class="macro-left">{macroLeft(totals.protein, goal.protein)}</div>
+                </div>
+              </div>
+              <div class="macro-item">
+                <div class="macro-bar-wrap">
+                  <div class="macro-bar-fill carbs" style="width:{Math.min(totals.carbs / goal.carbs * 100, 100)}%"></div>
+                </div>
+                <div class="macro-label">
+                  <span class="macro-current">{totals.carbs}g</span>
+                  <span class="macro-name">Carbs</span>
+                </div>
+                <div class="macro-guidance">
+                  <div class="macro-instruction">{macroInstruction('carbs', totals.carbs, goal.carbs, caloriesRemaining)}</div>
+                  <div class="macro-left">{macroLeft(totals.carbs, goal.carbs)}</div>
+                </div>
+              </div>
+              <div class="macro-item">
+                <div class="macro-bar-wrap">
+                  <div class="macro-bar-fill fat" style="width:{Math.min(totals.fat / goal.fat * 100, 100)}%"></div>
+                </div>
+                <div class="macro-label">
+                  <span class="macro-current">{totals.fat}g</span>
+                  <span class="macro-name">Fat</span>
+                </div>
+                <div class="macro-guidance">
+                  <div class="macro-instruction">{macroInstruction('fat', totals.fat, goal.fat, caloriesRemaining)}</div>
+                  <div class="macro-left">{macroLeft(totals.fat, goal.fat)}</div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section class="rail-panel meals-summary">
+            <div class="panel-kicker">Meal rhythm</div>
+            <div class="summary-list">
+              {#each mealTypes as meal}
+                {@const totalMealCalories = mealCalories(meal)}
+                <div class="summary-row">
+                  <span class="summary-label">{meal}</span>
+                  <span class="summary-value">{totalMealCalories > 0 ? `${Math.round(totalMealCalories)} cal` : 'Open'}</span>
+                </div>
+              {/each}
+            </div>
+          </section>
+        </aside>
+
+        <main class="fitness-workspace">
+          <section class="composer-panel">
+            <div class="composer-copy">
+              <div class="panel-kicker">Quick log</div>
+              <h2>Describe what you ate</h2>
+              <p>Use natural language and let the app resolve portions, macros, and meal placement.</p>
+            </div>
+
+            <div class="resolve-bar">
+              <input
+                type="text"
+                class="resolve-input"
+                placeholder="Describe your meal... (e.g. 2 eggs and toast)"
+                bind:value={resolveInput}
+                onkeydown={(e) => { if (e.key === 'Enter') submitResolve(); }}
+                disabled={resolving}
+              />
+              <button class="resolve-submit" onclick={submitResolve} disabled={resolving || !resolveInput.trim()}>
+                {#if resolving}
+                  <span class="resolve-spinner"></span>
+                {:else}
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+                {/if}
+              </button>
+            </div>
+            {#if resolveError}
+              <div class="resolve-error">{resolveError}</div>
+            {/if}
+          </section>
+
+          <div class="meals-divider">
+            <span class="meals-label">Meals</span>
+            <span class="meals-count">{totals.count} entries</span>
+          </div>
+
+          {#each mealTypes as meal, i}
+            {@const mealEntries = entriesByMeal(meal)}
+            {@const mCal = mealCalories(meal)}
+            {@const mPro = mealProtein(meal)}
+            {@const expanded = expandedMeals.has(meal)}
+            {@const weight = mealWeight(mCal, goal.calories, meal)}
+            {@const mealPct = mCal > 0 ? Math.round((mCal / goal.calories) * 100) : 0}
+
+            <section class="meal-section">
+              <button class="meal-header" onclick={() => toggleMeal(meal)}>
+                <div class="meal-number" class:has-entries={mealEntries.length > 0}>{i + 1}</div>
+                <div class="meal-info">
+                  <div class="meal-top">
+                    <span class="meal-name">{meal}</span>
+                    {#if weight}
+                      <span class="meal-weight {weight.toLowerCase()}">{weight}</span>
+                    {/if}
+                  </div>
+                  {#if mCal > 0}
+                    <span class="meal-stats">{Math.round(mCal)} cal · {mealPct}% of daily · {Math.round(mPro)}g protein</span>
+                  {:else}
+                    <span class="meal-stats empty">No entries yet</span>
+                  {/if}
+                </div>
+                <svg class="meal-chevron" class:expanded viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+              </button>
+
+              {#if expanded}
+                <div class="meal-entries">
+                  {#if mealEntries.length > 0}
+                    {#each mealEntries as entry}
+                      <div class="entry-wrap">
+                        <!-- svelte-ignore a11y_no_static_element_interactions -->
+                        <div class="entry-row" onclick={() => toggleEntry(entry.id)}>
+                          <div class="entry-info">
+                            <div class="entry-name">
+                              {entry.name}
+                              {#if entry.method === 'ai_plate' || entry.method === 'ai_label'}
+                                <span class="entry-badge ai">AI</span>
+                              {/if}
+                              {#if entry.method === 'quick_add'}
+                                <span class="entry-badge quick">quick</span>
+                              {/if}
+                            </div>
+                            <div class="entry-serving">{entry.serving}</div>
+                            {#if entry.note}
+                              <div class="entry-note">{entry.note}</div>
+                            {/if}
+                          </div>
+                          <div class="entry-cals">
+                            <span class="entry-cal-value">{entry.calories}</span>
+                            <span class="entry-cal-label">cal</span>
+                          </div>
+                        </div>
+                        {#if expandedEntry === entry.id}
+                          <div class="entry-actions">
+                            <div class="entry-qty-control">
+                              <input
+                                type="number"
+                                class="entry-qty-input"
+                                bind:value={editQtyValue}
+                                onkeydown={(e) => { if (e.key === 'Enter') updateEntryQty(entry.id); }}
+                                step="0.5"
+                                min="0.1"
+                              />
+                              <span class="entry-qty-unit">{entry.rawUnit}</span>
+                              <button class="entry-qty-save" onclick={() => updateEntryQty(entry.id)}>Save</button>
+                            </div>
+                            <button class="entry-delete-btn" onclick={() => deleteEntry(entry.id)}>
+                              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                              Delete
+                            </button>
+                          </div>
+                        {/if}
+                      </div>
+                    {/each}
+                  {/if}
+
+                  <button class="add-food-btn" onclick={() => { resolveMeal = meal; const input = document.querySelector('.resolve-input') as HTMLInputElement; if (input) { input.focus(); input.placeholder = `Add to ${meal}...`; } }}>
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                    Add to {meal}
+                  </button>
+                </div>
+              {/if}
+            </section>
+          {/each}
+        </main>
+      </div>
+    {:else if activeTab === 'foods'}
+      <section class="library-stage">
+        <div class="list-stage-header">
+          <div>
+            <div class="panel-kicker">Food library</div>
+            <h2>Search, edit, and curate your ingredients.</h2>
+          </div>
+          <div class="foods-nudge">
+            Looking for a quick option? <button class="nudge-link" onclick={() => activeTab = 'templates'}>Try Quick Meals →</button>
+          </div>
+        </div>
+
+        <div class="list-header">
+          <div class="search-wrap">
+            <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+            <input type="text" class="search-input" placeholder="Search food library..." bind:value={foodSearch} />
+            {#if foodSearch}
+              <button class="search-clear" onclick={() => foodSearch = ''}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            {/if}
+          </div>
+        </div>
+
+        <div class="list-card">
+          {#each filteredFoods as food (food.name)}
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div class="list-row" onclick={() => openFoodEdit(food)}>
+              <div class="list-row-info">
+                <div class="list-row-name">
+                  {food.name}
+                  {#if food.favorite}
+                    <svg class="fav-icon" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+                  {/if}
+                </div>
+                <div class="list-row-meta">{food.info}</div>
+              </div>
+              <div class="list-row-right">
+                <span class="list-row-value">{food.calories} cal</span>
+                <svg class="list-row-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+              </div>
+            </div>
+          {/each}
+          {#if filteredFoods.length === 0}
+            <div class="empty-state empty-state-rich">
+              <div class="empty-state-kicker">Library is quiet</div>
+              <h3>{foodSearch ? 'No foods matched your search' : 'No foods in your library yet'}</h3>
+              <p>{foodSearch ? `Try a broader term than "${foodSearch}".` : 'Create foods or keep logging meals and the workspace will start building its own memory.'}</p>
+            </div>
+          {/if}
+        </div>
+      </section>
+    {:else if activeTab === 'templates'}
+      <section class="library-stage">
+        <div class="list-stage-header">
+          <div>
+            <div class="panel-kicker">Quick meals</div>
+            <h2>Reusable meals ranked against what your day still needs.</h2>
+          </div>
+          <div class="list-count">{#if templatesLoading}Loading...{:else if templates.length > 0}{templates.length} go-to meals · ranked for you{/if}</div>
+        </div>
+
+        <div class="list-card">
+          {#if rankedTemplates.length > 0}
+            {#each rankedTemplates as tpl}
+              {@const hint = templateHintMap.get(tpl.name) || ''}
+              <div class="list-row" class:highlighted={highlightTemplate === tpl.name}>
+                <div class="template-badge">{tpl.meal.charAt(0).toUpperCase()}</div>
+                <div class="list-row-info">
+                  <div class="list-row-name">{tpl.name}</div>
+                  <div class="list-row-meta"><span class="template-meal-label">{tpl.meal}</span> · {tpl.calories} cal</div>
+                  <div class="list-row-sub">{tpl.items} items</div>
+                  {#if hint}
+                    <div class="template-hint">{hint}</div>
+                  {/if}
+                </div>
+                <div class="list-row-right">
+                  <button class="log-btn" onclick={() => logTemplate(tpl)}>Log meal</button>
+                  <svg class="list-row-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+                </div>
+              </div>
+            {/each}
+          {:else}
+            <div class="empty-state empty-state-rich">
+              <div class="empty-state-kicker">Quick meals</div>
+              <h3>No reusable meals yet</h3>
+              <p>Once you save a go-to meal, this view can recommend the best fit for the rest of your day.</p>
+            </div>
+          {/if}
+        </div>
+      </section>
+    {/if}
+  </div>
+</div>
+
+<!-- FAB — always visible -->
+<button class="fab" class:open={fabOpen} aria-label="Add" onclick={() => fabOpen = !fabOpen}>
+  <svg class="fab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+</button>
+
+<!-- FAB bottom sheet -->
+{#if fabOpen}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="fab-overlay" onclick={() => fabOpen = false}></div>
+  <div class="fab-sheet">
+    <div class="fab-sheet-handle"></div>
+    <button class="fab-action" onclick={() => { fabOpen = false; activeTab = 'log'; }}>
+      <div class="fab-action-icon accent">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+      </div>
+      <div class="fab-action-text">
+        <div class="fab-action-name">Log food</div>
+        <div class="fab-action-desc">Add an entry to your daily log</div>
+      </div>
+    </button>
+    <button class="fab-action" onclick={() => { fabOpen = false; activeTab = 'foods'; foodSearch = ''; }}>
+      <div class="fab-action-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+      </div>
+      <div class="fab-action-text">
+        <div class="fab-action-name">Search food</div>
+        <div class="fab-action-desc">Find a food in your library</div>
+      </div>
+    </button>
+    <button class="fab-action" onclick={() => { fabOpen = false; activeTab = 'foods'; }}>
+      <div class="fab-action-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v6m0 0l3-3m-3 3L9 5"/><rect x="3" y="10" width="18" height="12" rx="2"/></svg>
+      </div>
+      <div class="fab-action-text">
+        <div class="fab-action-name">Create food</div>
+        <div class="fab-action-desc">Add a new food to your library</div>
+      </div>
+    </button>
+    <button class="fab-action" onclick={() => { fabOpen = false; activeTab = 'templates'; }}>
+      <div class="fab-action-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
+      </div>
+      <div class="fab-action-text">
+        <div class="fab-action-name">Create quick meal</div>
+        <div class="fab-action-desc">Save a reusable meal preset</div>
+      </div>
+    </button>
+  </div>
+{/if}
+
+<!-- Food edit modal -->
+{#if editingFood}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="resolve-overlay" onclick={closeFoodEdit}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="resolve-modal" onclick={(e) => e.stopPropagation()}>
+      <div class="resolve-modal-header">
+        <div class="resolve-modal-title">Edit Food</div>
+        <button class="resolve-modal-close" onclick={closeFoodEdit}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+      <div class="resolve-modal-body">
+        <div class="food-edit-field">
+          <label class="food-edit-label">Name</label>
+          <input class="food-edit-input" type="text" bind:value={editFoodName} />
+        </div>
+        <div class="food-edit-row">
+          <div class="food-edit-field">
+            <label class="food-edit-label">Calories</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodCal} />
+          </div>
+          <div class="food-edit-field">
+            <label class="food-edit-label">Protein (g)</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodProtein} />
+          </div>
+        </div>
+        <div class="food-edit-row">
+          <div class="food-edit-field">
+            <label class="food-edit-label">Carbs (g)</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodCarbs} />
+          </div>
+          <div class="food-edit-field">
+            <label class="food-edit-label">Fat (g)</label>
+            <input class="food-edit-input" type="number" bind:value={editFoodFat} />
+          </div>
+        </div>
+        <div class="food-edit-unit">Per 1 {editFoodUnit}</div>
+      </div>
+      <div class="resolve-modal-footer">
+        <button class="entry-delete-btn" onclick={deleteFood} disabled={savingFood}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+          Delete
+        </button>
+        <div class="resolve-footer-actions">
+          <button class="btn-secondary" onclick={closeFoodEdit}>Cancel</button>
+          <button class="btn-primary" onclick={saveFoodEdit} disabled={savingFood}>
+            {savingFood ? 'Saving...' : 'Save'}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<!-- Resolve confirmation modal -->
+{#if resolvedItems.length > 0}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="resolve-overlay" onclick={cancelResolve}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="resolve-modal" onclick={(e) => e.stopPropagation()}>
+      <div class="resolve-modal-header">
+        <div class="resolve-modal-title">
+          {resolvedItems.length === 1 ? 'Confirm entry' : `Confirm ${resolvedItems.length} items`}
+        </div>
+        <button class="resolve-modal-close" onclick={cancelResolve}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+
+      <div class="resolve-modal-body">
+        {#each resolvedItems as item, idx}
+          <div class="resolve-item" class:resolve-item-border={idx > 0}>
+            <div class="resolve-item-top">
+              <div class="resolve-item-info">
+                <div class="resolve-food-name">{item.name}</div>
+                <div class="resolve-food-detail">{item.calories} cal · {item.protein}g P · {item.carbs}g C · {item.fat}g F</div>
+              </div>
+              {#if resolvedItems.length > 1}
+                <button class="resolve-item-remove" onclick={() => removeItem(idx)} aria-label="Remove">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                </button>
+              {/if}
+            </div>
+            <div class="resolve-qty-row">
+              <button class="resolve-qty-btn" onclick={() => updateItemQty(idx, item.qty - 0.5)} disabled={item.qty <= 0.5}>−</button>
+              <span class="resolve-qty-value">{item.qty} {item.unit}</span>
+              <button class="resolve-qty-btn" onclick={() => updateItemQty(idx, item.qty + 0.5)}>+</button>
+            </div>
+          </div>
+        {/each}
+
+        <div class="resolve-meal-row">
+          <span class="resolve-meal-label">Meal</span>
+          <select class="resolve-meal-select" bind:value={resolveMeal}>
+            <option value="breakfast">Breakfast</option>
+            <option value="lunch">Lunch</option>
+            <option value="dinner">Dinner</option>
+            <option value="snack">Snack</option>
+          </select>
+        </div>
+
+        {#if resolvedItems.some(i => i.result.resolution_type === 'ai_estimated')}
+          <div class="resolve-note">Some items estimated by AI — values are approximate</div>
+        {/if}
+      </div>
+
+      <div class="resolve-modal-footer">
+        <div class="resolve-total">{resolveTotalCal} cal total</div>
+        <div class="resolve-footer-actions">
+          <button class="btn-secondary" onclick={cancelResolve}>Cancel</button>
+          <button class="btn-primary" onclick={confirmResolve} disabled={confirmLogging}>
+            {confirmLogging ? 'Logging...' : resolvedItems.length === 1 ? 'Log entry' : `Log ${resolvedItems.length} entries`}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  :global(:root) {
+    --fitness-bg: #efe6d8;
+    --fitness-bg-soft: #f7f1e8;
+    --fitness-paper: rgba(255, 251, 246, 0.82);
+    --fitness-paper-strong: rgba(255, 252, 248, 0.94);
+    --fitness-line: rgba(44, 31, 19, 0.09);
+    --fitness-line-strong: rgba(44, 31, 19, 0.16);
+    --fitness-text: #1f1710;
+    --fitness-muted: #6d5d4c;
+    --fitness-soft: #8f7f6d;
+    --fitness-accent: #2f6a52;
+    --fitness-accent-soft: rgba(47, 106, 82, 0.12);
+    --fitness-gold: #c88932;
+  }
+
+  .fitness-page {
+    min-height: calc(100vh - 56px);
+    background:
+      radial-gradient(circle at top left, rgba(255,255,255,0.7), transparent 30%),
+      linear-gradient(180deg, var(--fitness-bg-soft) 0%, var(--fitness-bg) 100%);
+  }
+
+  .fitness-shell {
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 28px 28px 120px;
+    color: var(--fitness-text);
+  }
+
+  .fitness-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 24px;
+    align-items: end;
+    margin-bottom: 18px;
+  }
+
+  .fitness-heading {
+    max-width: 640px;
+  }
+
+  .fitness-kicker,
+  .panel-kicker {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--fitness-soft);
+  }
+
+  .fitness-heading h1 {
+    margin: 10px 0 8px;
+    font-size: clamp(2.6rem, 5vw, 4.6rem);
+    line-height: 0.92;
+    letter-spacing: -0.07em;
+  }
+
+  .fitness-heading p {
+    margin: 0;
+    max-width: 560px;
+    color: var(--fitness-muted);
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+
+  .fitness-header-side {
+    display: grid;
+    gap: 10px;
+    justify-items: end;
+  }
+
+  .fitness-date-readout {
+    font-size: 1.1rem;
+    line-height: 1;
+    letter-spacing: -0.04em;
+    color: var(--fitness-text);
+    padding: 10px 14px;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.56);
+    border: 1px solid var(--fitness-line);
+  }
+
+  .top-tabs {
+    display: inline-flex;
+    gap: 4px;
+    padding: 4px;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.48);
+    border: 1px solid var(--fitness-line);
+    backdrop-filter: blur(12px);
+    margin-bottom: 24px;
+  }
+
+  .top-tab {
+    padding: 10px 16px;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--fitness-muted);
+    cursor: pointer;
+    font-size: 0.94rem;
+    font-weight: 600;
+    transition: all 180ms ease;
+    font-family: var(--font);
+  }
+
+  .top-tab:hover {
+    color: var(--fitness-text);
+  }
+
+  .top-tab.active {
+    background: var(--fitness-paper-strong);
+    color: var(--fitness-text);
+    box-shadow: 0 10px 24px rgba(33, 22, 14, 0.08);
+  }
+
+  .fitness-log-grid {
+    display: grid;
+    grid-template-columns: 340px minmax(0, 1fr);
+    gap: 18px;
+    align-items: start;
+  }
+
+  .fitness-rail {
+    display: grid;
+    gap: 14px;
+    position: sticky;
+    top: 78px;
+  }
+
+  .rail-panel,
+  .composer-panel,
+  .meal-section,
+  .list-card,
+  .fab-sheet,
+  .resolve-modal {
+    background: var(--fitness-paper);
+    border: 1px solid var(--fitness-line);
+    box-shadow: 0 16px 38px rgba(39, 28, 18, 0.07);
+    backdrop-filter: blur(16px);
+  }
+
+  .rail-panel,
+  .composer-panel,
+  .list-card {
+    border-radius: 28px;
+  }
+
+  .rail-panel {
+    padding: 20px 20px 22px;
+  }
+
+  .calorie-card {
+    background: linear-gradient(180deg, rgba(248, 245, 239, 0.98), rgba(240, 247, 241, 0.88));
+    border-color: rgba(47, 106, 82, 0.14);
+  }
+
+  .macro-panel {
+    background: linear-gradient(180deg, rgba(255,251,246,0.92), rgba(248,242,233,0.86));
+  }
+
+  .meals-summary {
+    background: linear-gradient(180deg, rgba(255,250,245,0.92), rgba(248,243,235,0.82));
+  }
+
+  .date-nav {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .btn-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 12px;
+    border: 1px solid var(--fitness-line);
+    background: rgba(255,255,255,0.62);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--fitness-muted);
+    transition: all 160ms ease;
+    flex-shrink: 0;
+  }
+
+  .btn-icon:hover {
+    color: var(--fitness-text);
+    background: rgba(255,255,255,0.9);
+  }
+
+  .btn-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .date-input,
+  .resolve-input,
+  .search-input,
+  .food-edit-input,
+  .entry-qty-input,
+  .resolve-meal-select {
+    border: 1px solid var(--fitness-line);
+    background: rgba(255,255,255,0.88);
+    color: var(--fitness-text);
+  }
+
+  .date-input {
+    padding: 7px 12px;
+    border-radius: 12px;
+    font-size: 0.92rem;
+    font-family: var(--font);
+  }
+
+  .today-btn,
+  .entry-qty-save,
+  .resolve-submit,
+  .btn-primary,
+  .log-btn {
+    background: var(--fitness-accent);
+    color: #f9f6f1;
+    border: none;
+  }
+
+  .today-btn {
+    padding: 8px 14px;
+    border-radius: 999px;
+    font-size: 0.82rem;
+    font-weight: 700;
+    cursor: pointer;
+    font-family: var(--font);
+  }
+
+  .calorie-eaten {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    margin: 14px 0 12px;
+  }
+
+  .calorie-number {
+    font-size: clamp(2.4rem, 4vw, 3.4rem);
+    font-weight: 600;
+    letter-spacing: -0.08em;
+    line-height: 0.92;
+    color: var(--fitness-text);
+    font-family: var(--mono);
+  }
+
+  .calorie-of {
+    color: var(--fitness-soft);
+    font-size: 0.96rem;
+    font-family: var(--mono);
+  }
+
+  .progress-bar {
+    height: 9px;
+    background: rgba(69, 53, 39, 0.1);
+    border-radius: 999px;
+    overflow: hidden;
+    margin-bottom: 14px;
+  }
+
+  .progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #346c56 0%, #4d8f73 100%);
+    border-radius: inherit;
+    transition: width 500ms ease;
+  }
+
+  .calorie-coach {
+    font-size: 1rem;
+    line-height: 1.5;
+    color: var(--fitness-text);
+  }
+
+  .calorie-next,
+  .nudge-link {
+    margin-top: 12px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--fitness-accent);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font-size: 0.92rem;
+    font-weight: 600;
+    font-family: var(--font);
+    text-align: left;
+  }
+
+  .next-arrow {
+    transition: transform 160ms ease;
+  }
+
+  .calorie-next:hover .next-arrow,
+  .nudge-link:hover {
+    transform: translateX(2px);
+  }
+
+  .macro-panel .macro-row {
+    display: grid;
+    gap: 10px;
+    margin-top: 14px;
+  }
+
+  .macro-item {
+    padding-top: 12px;
+    border-top: 1px solid var(--fitness-line);
+  }
+
+  .macro-bar-wrap {
+    height: 5px;
+    border-radius: 999px;
+    background: rgba(69, 53, 39, 0.09);
+    overflow: hidden;
+    margin-bottom: 10px;
+  }
+
+  .macro-bar-fill { height: 100%; border-radius: inherit; transition: width 500ms ease; }
+  .macro-bar-fill.protein { background: #346c56; }
+  .macro-bar-fill.carbs { background: #c88932; }
+  .macro-bar-fill.fat { background: #8f5d42; }
+
+  .macro-label {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+  }
+
+  .macro-current {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--fitness-text);
+    font-family: var(--mono);
+  }
+
+  .macro-name,
+  .macro-left,
+  .summary-label,
+  .summary-value,
+  .meals-count,
+  .meal-stats,
+  .entry-serving,
+  .entry-note,
+  .list-row-meta,
+  .list-row-sub,
+  .template-hint,
+  .foods-nudge,
+  .resolve-food-detail,
+  .food-edit-label,
+  .food-edit-unit,
+  .resolve-note,
+  .resolve-meal-label,
+  .resolve-total {
+    color: var(--fitness-muted);
+  }
+
+  .macro-guidance {
+    display: grid;
+    gap: 3px;
+    margin-top: 8px;
+  }
+
+  .macro-instruction,
+  .list-row-name,
+  .entry-name,
+  .meal-name,
+  .resolve-food-name,
+  .resolve-modal-title,
+  .fab-action-name,
+  .fitness-date-readout {
+    color: var(--fitness-text);
+  }
+
+  .summary-list {
+    display: grid;
+    gap: 10px;
+    margin-top: 14px;
+  }
+
+  .summary-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    padding-top: 10px;
+    border-top: 1px solid var(--fitness-line);
+  }
+
+  .summary-label {
+    text-transform: capitalize;
+  }
+
+  .summary-value {
+    font-family: var(--mono);
+  }
+
+  .fitness-workspace {
+    display: grid;
+    gap: 14px;
+  }
+
+  .composer-panel {
+    padding: 22px;
+    background: linear-gradient(180deg, rgba(255,252,248,0.96), rgba(248,242,233,0.9));
+  }
+
+  .composer-copy {
+    margin-bottom: 14px;
+  }
+
+  .composer-copy h2,
+  .list-stage-header h2 {
+    margin: 8px 0 6px;
+    font-size: clamp(1.5rem, 2vw, 2rem);
+    line-height: 1.02;
+    letter-spacing: -0.05em;
+  }
+
+  .composer-copy p {
+    margin: 0;
+    max-width: 560px;
+    color: var(--fitness-muted);
+    line-height: 1.55;
+  }
+
+  .resolve-bar {
+    display: flex;
+    gap: 10px;
+  }
+
+  .resolve-input {
+    flex: 1;
+    padding: 14px 16px;
+    border-radius: 18px;
+    font-size: 1rem;
+    transition: border-color 160ms ease, box-shadow 160ms ease;
+  }
+
+  .resolve-input::placeholder,
+  .search-input::placeholder {
+    color: var(--fitness-soft);
+  }
+
+  .resolve-input:focus,
+  .search-input:focus,
+  .food-edit-input:focus,
+  .entry-qty-input:focus,
+  .resolve-meal-select:focus,
+  .date-input:focus {
+    outline: none;
+    border-color: rgba(47, 106, 82, 0.38);
+    box-shadow: 0 0 0 4px rgba(47, 106, 82, 0.12);
+  }
+
+  .resolve-submit {
+    width: 52px;
+    height: 52px;
+    border-radius: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 160ms ease, opacity 160ms ease;
+    flex-shrink: 0;
+  }
+
+  .resolve-submit:hover:not(:disabled) {
+    transform: translateY(-1px);
+  }
+
+  .resolve-submit:disabled {
+    opacity: 0.45;
+    cursor: default;
+  }
+
+  .resolve-submit svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .resolve-spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid rgba(255,255,255,0.24);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+  }
+
+  .resolve-error {
+    margin-top: 10px;
+    color: #a13e2f;
+    font-size: 0.92rem;
+  }
+
+  .meals-divider {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2px 2px 0;
+  }
+
+  .meals-label {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--fitness-soft);
+  }
+
+  .meal-section {
+    padding: 8px 18px 14px;
+    border-radius: 26px;
+    background: linear-gradient(180deg, rgba(255,252,248,0.95), rgba(251,246,239,0.9));
+  }
+
+  .meal-header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 12px 2px;
+    background: none;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+    font-family: var(--font);
+  }
+
+  .meal-number {
+    width: 38px;
+    height: 38px;
+    border-radius: 999px;
+    background: rgba(69, 53, 39, 0.06);
+    color: var(--fitness-soft);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.82rem;
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+
+  .meal-number.has-entries {
+    background: var(--fitness-accent-soft);
+    color: var(--fitness-accent);
+  }
+
+  .meal-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .meal-top {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .meal-name {
+    font-size: 1.08rem;
+    font-weight: 700;
+    text-transform: capitalize;
+    letter-spacing: -0.03em;
+  }
+
+  .meal-weight {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    border-radius: 999px;
+    padding: 5px 8px;
+  }
+
+  .meal-weight.heavy { background: rgba(161, 62, 47, 0.1); color: #a13e2f; }
+  .meal-weight.moderate { background: rgba(200, 137, 50, 0.12); color: #9f5f18; }
+  .meal-weight.light { background: var(--fitness-accent-soft); color: var(--fitness-accent); }
+  .meal-weight.snack { background: rgba(69, 53, 39, 0.06); color: var(--fitness-muted); }
+
+  .meal-stats {
+    display: inline-block;
+    margin-top: 3px;
+    font-size: 0.92rem;
+  }
+
+  .meal-stats.empty {
+    color: var(--fitness-soft);
+    font-style: italic;
+  }
+
+  .meal-chevron {
+    width: 16px;
+    height: 16px;
+    color: var(--fitness-soft);
+    transition: transform 160ms ease;
+    flex-shrink: 0;
+  }
+
+  .meal-chevron.expanded {
+    transform: rotate(180deg);
+  }
+
+  .meal-entries {
+    display: grid;
+    gap: 10px;
+    padding-left: 14px;
+    border-left: 2px solid rgba(44,31,19,0.09);
+    margin-left: 18px;
+  }
+
+  .entry-wrap {
+    display: grid;
+    gap: 0;
+  }
+
+  .entry-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+    gap: 14px;
+    padding: 14px 16px;
+    border-radius: 18px;
+    background: rgba(255,255,255,0.78);
+    border: 1px solid rgba(44,31,19,0.07);
+    cursor: pointer;
+    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
+  }
+
+  .entry-row:hover {
+    background: rgba(255,255,255,0.94);
+    transform: translateY(-1px);
+    box-shadow: 0 10px 22px rgba(39, 28, 18, 0.06);
+  }
+
+  .entry-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .entry-name {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+  }
+
+  .entry-badge {
+    padding: 4px 7px;
+    border-radius: 999px;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    font-weight: 700;
+  }
+
+  .entry-badge.ai { background: rgba(47, 106, 82, 0.12); color: var(--fitness-accent); }
+  .entry-badge.quick { background: rgba(69, 53, 39, 0.08); color: var(--fitness-muted); }
+
+  .entry-serving,
+  .entry-note {
+    margin-top: 4px;
+    font-size: 0.92rem;
+    line-height: 1.45;
+  }
+
+  .entry-cals {
+    display: flex;
+    align-items: baseline;
+    gap: 3px;
+    flex-shrink: 0;
+    padding-top: 2px;
+  }
+
+  .entry-cal-value {
+    font-size: 1rem;
+    font-weight: 700;
+    font-family: var(--mono);
+    color: var(--fitness-text);
+  }
+
+  .entry-cal-label {
+    font-size: 11px;
+    color: var(--fitness-soft);
+  }
+
+  .entry-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px 0;
+  }
+
+  .entry-qty-control {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .entry-qty-input {
+    width: 74px;
+    padding: 9px 10px;
+    border-radius: 12px;
+    text-align: center;
+    font-family: var(--mono);
+    font-size: 0.96rem;
+  }
+
+  .entry-qty-unit {
+    font-size: 0.9rem;
+    color: var(--fitness-muted);
+  }
+
+  .entry-qty-save,
+  .entry-delete-btn,
+  .btn-secondary,
+  .btn-primary,
+  .log-btn {
+    padding: 10px 14px;
+    border-radius: 14px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    font-family: var(--font);
+    cursor: pointer;
+    transition: transform 160ms ease, opacity 160ms ease, background 160ms ease, color 160ms ease;
+  }
+
+  .entry-qty-save:hover,
+  .btn-primary:hover,
+  .log-btn:hover,
+  .today-btn:hover {
+    opacity: 0.92;
+  }
+
+  .entry-delete-btn,
+  .btn-secondary {
+    background: rgba(255,255,255,0.7);
+    color: #9a4b3f;
+    border: 1px solid rgba(154, 75, 63, 0.16);
+  }
+
+  .entry-delete-btn:hover,
+  .btn-secondary:hover {
+    background: rgba(154, 75, 63, 0.08);
+  }
+
+  .entry-delete-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .entry-delete-btn svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .add-food-btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: center;
+    padding: 14px;
+    border-radius: 18px;
+    border: 1px dashed rgba(47, 106, 82, 0.26);
+    background: rgba(47, 106, 82, 0.04);
+    color: var(--fitness-accent);
+    font-size: 0.92rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 160ms ease, transform 160ms ease;
+    font-family: var(--font);
+  }
+
+  .add-food-btn:hover {
+    background: rgba(47, 106, 82, 0.1);
+    transform: translateY(-1px);
+  }
+
+  .add-food-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .library-stage {
+    display: grid;
+    gap: 14px;
+  }
+
+  .list-stage-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 18px;
+    align-items: end;
+  }
+
+  .list-stage-header h2 {
+    max-width: 640px;
+  }
+
+  .list-header {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+
+  .list-count {
+    color: var(--fitness-muted);
+    font-size: 0.94rem;
+  }
+
+  .search-wrap {
+    flex: 1;
+    position: relative;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    color: var(--fitness-soft);
+    pointer-events: none;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 13px 42px 13px 40px;
+    border-radius: 18px;
+    font-size: 0.96rem;
+    transition: border-color 160ms ease, box-shadow 160ms ease;
+  }
+
+  .search-clear {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--fitness-soft);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .search-clear svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .list-card {
+    overflow: hidden;
+  }
+
+  .list-row {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 16px 18px;
+    border-bottom: 1px solid var(--fitness-line);
+    cursor: pointer;
+    transition: background 160ms ease;
+  }
+
+  .list-row:last-child {
+    border-bottom: none;
+  }
+
+  .list-row:hover {
+    background: rgba(255,255,255,0.54);
+  }
+
+  .list-row.highlighted {
+    background: rgba(47, 106, 82, 0.08);
+  }
+
+  .list-row-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .list-row-name {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+  }
+
+  .list-row-meta {
+    margin-top: 3px;
+    font-size: 0.92rem;
+  }
+
+  .list-row-sub {
+    margin-top: 3px;
+    font-size: 0.82rem;
+  }
+
+  .list-row-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .list-row-value {
+    font-size: 0.9rem;
+    color: var(--fitness-text);
+    font-family: var(--mono);
+  }
+
+  .list-row-chevron {
+    width: 14px;
+    height: 14px;
+    color: var(--fitness-soft);
+  }
+
+  .fav-icon {
+    width: 13px;
+    height: 13px;
+    color: var(--fitness-gold);
+  }
+
+  .empty-state {
+    padding: 36px 24px;
+    text-align: center;
+    color: var(--fitness-muted);
+  }
+
+  .empty-state-rich {
+    display: grid;
+    gap: 8px;
+    justify-items: start;
+    text-align: left;
+    padding: 28px 24px 30px;
+    background:
+      radial-gradient(circle at top right, rgba(47, 106, 82, 0.08), transparent 32%),
+      linear-gradient(180deg, rgba(255,252,248,0.66), rgba(248,243,236,0.44));
+  }
+
+  .empty-state-kicker {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--fitness-soft);
+  }
+
+  .empty-state-rich h3 {
+    margin: 0;
+    font-size: 1.35rem;
+    line-height: 1.05;
+    letter-spacing: -0.05em;
+    color: var(--fitness-text);
+  }
+
+  .empty-state-rich p {
+    margin: 0;
+    max-width: 520px;
+    font-size: 0.96rem;
+    line-height: 1.6;
+    color: var(--fitness-muted);
+  }
+
+  .template-badge {
+    width: 38px;
+    height: 38px;
+    border-radius: 14px;
+    background: rgba(47, 106, 82, 0.1);
+    color: var(--fitness-accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.92rem;
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+
+  .template-meal-label {
+    text-transform: capitalize;
+  }
+
+  .template-hint {
+    margin-top: 5px;
+    color: var(--fitness-accent);
+    font-size: 0.82rem;
+  }
+
+  .log-btn:hover {
+    transform: translateY(-1px);
+  }
+
+  .fab {
+    position: fixed;
+    right: 24px;
+    bottom: 24px;
+    width: 60px;
+    height: 60px;
+    border-radius: 999px;
+    border: none;
+    background: linear-gradient(180deg, #356d57 0%, #254f40 100%);
+    color: #f8f5f0;
+    box-shadow: 0 16px 30px rgba(37, 79, 64, 0.24);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 160ms ease, box-shadow 160ms ease;
+    z-index: 50;
+  }
+
+  .fab:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 20px 38px rgba(37, 79, 64, 0.28);
+  }
+
+  .fab-icon {
+    width: 24px;
+    height: 24px;
+    transition: transform 180ms ease;
+  }
+
+  .fab.open .fab-icon {
+    transform: rotate(45deg);
+  }
+
+  .fab-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(18, 12, 8, 0.32);
+    backdrop-filter: blur(8px);
+    z-index: 45;
+    animation: fadeIn 160ms ease;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .fab-sheet {
+    position: fixed;
+    left: 50%;
+    bottom: 18px;
+    transform: translateX(-50%);
+    width: min(720px, calc(100vw - 24px));
+    z-index: 48;
+    border-radius: 28px;
+    padding: 14px;
+    animation: slideUp 180ms ease;
+  }
+
+  @keyframes slideUp {
+    from { transform: translateX(-50%) translateY(18px); opacity: 0; }
+    to { transform: translateX(-50%) translateY(0); opacity: 1; }
+  }
+
+  .fab-sheet-handle {
+    width: 42px;
+    height: 4px;
+    border-radius: 999px;
+    background: rgba(44, 31, 19, 0.16);
+    margin: 4px auto 14px;
+  }
+
+  .fab-action {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px;
+    border: none;
+    border-radius: 18px;
+    background: transparent;
+    cursor: pointer;
+    text-align: left;
+    font-family: var(--font);
+    transition: background 160ms ease;
+  }
+
+  .fab-action:hover {
+    background: rgba(255,255,255,0.56);
+  }
+
+  .fab-action-icon {
+    width: 42px;
+    height: 42px;
+    border-radius: 14px;
+    background: rgba(255,255,255,0.7);
+    border: 1px solid var(--fitness-line);
+    color: var(--fitness-muted);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .fab-action-icon.accent {
+    background: var(--fitness-accent);
+    color: #f9f6f1;
+    border-color: transparent;
+  }
+
+  .fab-action-icon svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .fab-action-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .fab-action-desc {
+    margin-top: 2px;
+    color: var(--fitness-muted);
+    font-size: 0.9rem;
+  }
+
+  .resolve-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(18, 12, 8, 0.34);
+    backdrop-filter: blur(10px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 70;
+    animation: fadeIn 160ms ease;
+  }
+
+  .resolve-modal {
+    width: min(520px, calc(100vw - 24px));
+    border-radius: 28px;
+    overflow: hidden;
+    animation: modalUp 180ms ease;
+  }
+
+  @keyframes modalUp {
+    from { transform: translateY(16px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+
+  .resolve-modal-header,
+  .resolve-modal-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding: 18px 22px;
+    border-bottom: 1px solid var(--fitness-line);
+  }
+
+  .resolve-modal-footer {
+    border-top: 1px solid var(--fitness-line);
+    border-bottom: none;
+  }
+
+  .resolve-modal-close,
+  .resolve-item-remove {
+    width: 32px;
+    height: 32px;
+    border-radius: 999px;
+    border: none;
+    background: transparent;
+    color: var(--fitness-soft);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .resolve-modal-close:hover,
+  .resolve-item-remove:hover {
+    background: rgba(44, 31, 19, 0.06);
+    color: var(--fitness-text);
+  }
+
+  .resolve-modal-close svg,
+  .resolve-item-remove svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .resolve-modal-body {
+    padding: 20px 22px;
+  }
+
+  .resolve-item + .resolve-item {
+    margin-top: 14px;
+    padding-top: 14px;
+    border-top: 1px solid var(--fitness-line);
+  }
+
+  .resolve-item-top {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    align-items: start;
+  }
+
+  .resolve-item-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .resolve-food-name {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .resolve-food-detail {
+    margin-top: 4px;
+    font-size: 0.9rem;
+  }
+
+  .resolve-qty-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 12px;
+  }
+
+  .resolve-qty-btn {
+    width: 30px;
+    height: 30px;
+    border-radius: 999px;
+    border: 1px solid var(--fitness-line);
+    background: rgba(255,255,255,0.8);
+    color: var(--fitness-text);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .resolve-qty-btn:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
+
+  .resolve-qty-value {
+    min-width: 72px;
+    text-align: center;
+    color: var(--fitness-text);
+    font-family: var(--mono);
+    font-size: 0.92rem;
+  }
+
+  .resolve-meal-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 18px;
+    padding-top: 16px;
+    border-top: 1px solid var(--fitness-line);
+  }
+
+  .resolve-meal-select {
+    padding: 10px 12px;
+    border-radius: 14px;
+    font-size: 0.92rem;
+    font-family: var(--font);
+  }
+
+  .resolve-footer-actions {
+    display: flex;
+    gap: 10px;
+  }
+
+  .food-edit-field {
+    display: grid;
+    gap: 6px;
+  }
+
+  .food-edit-input {
+    padding: 12px 14px;
+    border-radius: 14px;
+    font-size: 0.95rem;
+    font-family: var(--font);
+  }
+
+  .food-edit-input[type="number"] {
+    font-family: var(--mono);
+  }
+
+  .food-edit-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    margin-top: 12px;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @media (max-width: 1100px) {
+    .fitness-log-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .fitness-rail {
+      position: static;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 768px) {
+    .fitness-shell {
+      padding: 20px 16px 120px;
+    }
+
+    .fitness-header,
+    .list-stage-header {
+      grid-template-columns: 1fr;
+      display: grid;
+      gap: 14px;
+      align-items: start;
+    }
+
+    .fitness-header-side {
+      justify-items: start;
+    }
+
+    .fitness-heading h1 {
+      font-size: 2.6rem;
+    }
+
+    .top-tabs {
+      width: 100%;
+      overflow-x: auto;
+    }
+
+    .fitness-rail {
+      grid-template-columns: 1fr;
+    }
+
+    .rail-panel,
+    .composer-panel,
+    .meal-section,
+    .list-card {
+      border-radius: 24px;
+    }
+
+    .resolve-bar,
+    .list-header,
+    .resolve-modal-footer,
+    .entry-actions {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .resolve-submit,
+    .entry-qty-save,
+    .entry-delete-btn,
+    .btn-secondary,
+    .btn-primary,
+    .log-btn {
+      width: 100%;
+      justify-content: center;
+    }
+
+    .meal-entries {
+      margin-left: 10px;
+      padding-left: 10px;
+    }
+
+    .entry-row,
+    .list-row {
+      padding: 14px;
+    }
+
+    .food-edit-row {
+      grid-template-columns: 1fr;
+    }
+
+    .fab {
+      right: 16px;
+      bottom: 16px;
+      width: 56px;
+      height: 56px;
+    }
+
+    .fab-sheet {
+      left: 12px;
+      right: 12px;
+      width: auto;
+      transform: none;
+      bottom: 12px;
+    }
+
+    @keyframes slideUp {
+      from { transform: translateY(18px); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
+  }
+</style>
diff --git a/frontend-v2/src/routes/atelier/inventory/+page.svelte b/frontend-v2/src/routes/atelier/inventory/+page.svelte
new file mode 100644
index 0000000..20e945d
--- /dev/null
+++ b/frontend-v2/src/routes/atelier/inventory/+page.svelte
@@ -0,0 +1,1054 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/state';
+  import ImmichPicker from '$lib/components/shared/ImmichPicker.svelte';
+
+  interface InventoryItem {
+    id: number;
+    name: string;
+    order: string;
+    sku: string;
+    serial: string;
+    status: string;
+    price: number;
+    tax: number;
+    total: number;
+    qty: number;
+    tracking: string;
+    vendor: string;
+    buyerName: string;
+    date: string;
+    notes: string;
+    photos: number;
+    photoUrls: string[];
+  }
+
+  interface ItemDetailRaw {
+    Id: number;
+    Item: string;
+    'Order Number': string;
+    'Serial Numbers': string;
+    SKU: string;
+    Received: string;
+    'Price Per Item': number;
+    Tax: number;
+    Total: number;
+    QTY: number;
+    'Tracking Number': string;
+    Source: string;
+    Name: string;
+    Date: string;
+    Notes: string;
+    photos: any[];
+    [key: string]: any;
+  }
+
+  let activeTab = $state<'issues' | 'review' | 'all'>('issues');
+  let searchQuery = $state('');
+  let detailOpen = $state(false);
+  let selectedItem = $state<InventoryItem | null>(null);
+  let selectedDetail = $state<ItemDetailRaw | null>(null);
+  let nocodbUrl = $state('');
+
+  let recentItems = $state<InventoryItem[]>([]);
+  let issueItems = $state<InventoryItem[]>([]);
+  let reviewItems = $state<InventoryItem[]>([]);
+  let recentLoaded = $state(false);
+  let loading = $state(true);
+  let searching = $state(false);
+  let searchResults = $state<InventoryItem[] | null>(null);
+  let saving = $state(false);
+  let debounceTimer: ReturnType<typeof setTimeout>;
+
+  const issueCount = $derived(issueItems.length);
+  const reviewCount = $derived(reviewItems.length);
+  const recentCount = $derived(recentItems.length);
+
+  const displayedItems = $derived(() => {
+    if (searchResults !== null) return searchResults;
+    if (activeTab === 'issues') return issueItems;
+    if (activeTab === 'review') return reviewItems;
+    return recentItems;
+  });
+  const activeCount = $derived(displayedItems().length);
+
+  function mapIssue(raw: any): InventoryItem {
+    return {
+      id: raw.id,
+      name: raw.item || '',
+      order: raw.orderNumber || '',
+      sku: raw.sku || '',
+      serial: raw.serialNumbers || '',
+      status: normalizeStatus(raw.received || ''),
+      price: 0,
+      tax: 0,
+      total: 0,
+      qty: 1,
+      tracking: raw.trackingNumber || '',
+      vendor: '',
+      buyerName: '',
+      date: '',
+      notes: raw.notes || '',
+      photos: 0,
+      photoUrls: []
+    };
+  }
+
+  const NOCODB_BASE = 'https://noco.quadjourney.com';
+
+  function extractPhotoUrls(photos: any[]): string[] {
+    if (!Array.isArray(photos)) return [];
+    return photos
+      .filter((p: any) => p && p.signedPath)
+      .map((p: any) => `${NOCODB_BASE}/${p.signedPath}`);
+  }
+
+  function mapDetail(raw: ItemDetailRaw): InventoryItem {
+    const photoUrls = extractPhotoUrls(raw.photos);
+    return {
+      id: raw.Id,
+      name: raw.Item || '',
+      order: raw['Order Number'] || '',
+      sku: raw.SKU || '',
+      serial: raw['Serial Numbers'] || '',
+      status: normalizeStatus(raw.Received || ''),
+      price: raw['Price Per Item'] || 0,
+      tax: raw.Tax || 0,
+      total: raw.Total || 0,
+      qty: raw.QTY || 1,
+      tracking: raw['Tracking Number'] || '',
+      vendor: raw.Source || '',
+      buyerName: raw.Name || '',
+      date: raw.Date || '',
+      notes: raw.Notes || '',
+      photos: Array.isArray(raw.photos) ? raw.photos.length : 0,
+      photoUrls
+    };
+  }
+
+  function normalizeStatus(received: string): string {
+    if (!received) return 'Pending';
+    const lower = received.toLowerCase();
+    if (lower === 'issue' || lower === 'issues') return 'Issue';
+    if (lower === 'needs review') return 'Needs Review';
+    if (lower === 'pending') return 'Pending';
+    if (lower === 'closed') return 'Closed';
+    return 'Received';
+  }
+
+  async function loadSummary() {
+    try {
+      const res = await fetch('/api/inventory/summary', { credentials: 'include' });
+      if (res.ok) {
+        const data = await res.json();
+        issueItems = (data.issues || []).map(mapIssue);
+        reviewItems = (data.needsReview || []).map(mapIssue);
+      }
+    } catch { /* silent */ }
+  }
+
+  function mapSearchResult(r: any): InventoryItem {
+    return {
+      id: r.id,
+      name: r.item || '',
+      order: '', sku: '', serial: '',
+      status: normalizeStatus(r.received || ''),
+      price: 0, tax: 0, total: 0, qty: 1,
+      tracking: '', vendor: '', buyerName: '', date: '',
+      notes: '', photos: 0, photoUrls: []
+    };
+  }
+
+  async function loadRecent() {
+    if (recentLoaded) return;
+    try {
+      const res = await fetch('/api/inventory/recent?limit=30', { credentials: 'include' });
+      if (res.ok) {
+        const data = await res.json();
+        recentItems = (data.items || []).map(mapSearchResult);
+        recentLoaded = true;
+      }
+    } catch { /* silent */ }
+  }
+
+  async function searchItems(query: string) {
+    if (!query.trim()) { searchResults = null; return; }
+    searching = true;
+    try {
+      const res = await fetch(`/api/inventory/search-records?q=${encodeURIComponent(query)}`, { credentials: 'include' });
+      if (res.ok) {
+        const data = await res.json();
+        searchResults = (data.results || []).map((r: any) => ({
+          id: r.id,
+          name: r.item || '',
+          order: '', sku: '', serial: '',
+          status: normalizeStatus(r.received || ''),
+          price: 0, tax: 0, total: 0, qty: 1,
+          tracking: '', vendor: '', buyerName: '', date: '',
+          notes: '', photos: 0, photoUrls: []
+        }));
+      }
+    } catch { searchResults = []; }
+    finally { searching = false; }
+  }
+
+  async function loadItemDetail(id: number) {
+    try {
+      const res = await fetch(`/api/inventory/item-details/${id}`, { credentials: 'include' });
+      if (res.ok) {
+        const data = await res.json();
+        selectedDetail = data.item;
+        selectedItem = mapDetail(data.item);
+        activePhoto = 0;
+        nocodbUrl = data.nocodb_url || '';
+        detailOpen = true;
+      }
+    } catch { /* silent */ }
+  }
+
+  async function updateField(field: string, value: string | number) {
+    if (!selectedItem) return;
+    saving = true;
+    try {
+      const res = await fetch(`/api/inventory/item/${selectedItem.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ [field]: value }),
+        credentials: 'include'
+      });
+      if (res.ok && selectedDetail) {
+        (selectedDetail as any)[field] = value;
+        selectedItem = mapDetail(selectedDetail);
+      }
+    } catch { /* silent */ }
+    finally { saving = false; }
+  }
+
+  function onSearchInput() {
+    clearTimeout(debounceTimer);
+    if (!searchQuery.trim()) { searchResults = null; return; }
+    debounceTimer = setTimeout(() => searchItems(searchQuery), 300);
+  }
+
+  function openDetail(item: InventoryItem) {
+    loadItemDetail(item.id);
+  }
+
+  async function refreshVisibleData() {
+    await loadSummary();
+    if (activeTab === 'all') {
+      recentLoaded = false;
+      await loadRecent();
+    }
+    if (searchQuery.trim()) {
+      await searchItems(searchQuery);
+    }
+  }
+
+  async function closeDetail() {
+    await refreshVisibleData();
+    detailOpen = false;
+    selectedItem = null;
+    selectedDetail = null;
+    activePhoto = 0;
+  }
+
+  const statusOptions = ['Issue', 'Needs Review', 'Pending', 'Received', 'Closed'];
+
+  function statusToReceived(status: string): string {
+    if (status === 'Issue') return 'Issues';
+    if (status === 'Needs Review') return 'Needs Review';
+    if (status === 'Pending') return 'Pending';
+    if (status === 'Closed') return 'Closed';
+    return new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  }
+
+  async function changeStatus(newStatus: string) {
+    if (!selectedItem) return;
+    const receivedValue = statusToReceived(newStatus);
+    await updateField('Received', receivedValue);
+  }
+
+  function statusColor(status: string) {
+    if (status === 'Issue' || status === 'Issues') return 'error';
+    if (status === 'Needs Review') return 'warning';
+    if (status === 'Received') return 'success';
+    if (status === 'Pending') return 'warning';
+    if (status === 'Closed') return 'muted';
+    return 'muted';
+  }
+
+  function formatPrice(n: number) {
+    return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  }
+
+  let editingField = $state('');
+  let editValue = $state('');
+
+  const editableFields: Record<string, { nocoField: string; type: 'text' | 'number' }> = {
+    'Item': { nocoField: 'Item', type: 'text' },
+    'Price Per Item': { nocoField: 'Price Per Item', type: 'number' },
+    'Tax': { nocoField: 'Tax', type: 'number' },
+    'Total': { nocoField: 'Total', type: 'number' },
+    'QTY': { nocoField: 'QTY', type: 'number' },
+    'SKU': { nocoField: 'SKU', type: 'text' },
+    'Serial Numbers': { nocoField: 'Serial Numbers', type: 'text' },
+    'Order Number': { nocoField: 'Order Number', type: 'text' },
+    'Source': { nocoField: 'Source', type: 'text' },
+    'Name': { nocoField: 'Name', type: 'text' },
+    'Date': { nocoField: 'Date', type: 'text' },
+    'Tracking Number': { nocoField: 'Tracking Number', type: 'text' },
+    'Notes': { nocoField: 'Notes', type: 'text' },
+  };
+
+  function startEdit(nocoField: string, currentValue: any) {
+    editingField = nocoField;
+    editValue = currentValue != null ? String(currentValue) : '';
+  }
+
+  async function saveEdit() {
+    if (!editingField || !selectedItem) return;
+    const field = editableFields[editingField];
+    const value = field?.type === 'number' ? Number(editValue) || 0 : editValue;
+    await updateField(editingField, value);
+    editingField = '';
+    editValue = '';
+  }
+
+  function handleEditKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') saveEdit();
+    if (e.key === 'Escape') { editingField = ''; editValue = ''; }
+  }
+
+  function rawField(field: string): any {
+    return selectedDetail ? (selectedDetail as any)[field] : '';
+  }
+
+  async function duplicateItem() {
+    if (!selectedItem) return;
+    saving = true;
+    try {
+      const res = await fetch(`/api/inventory/duplicate/${selectedItem.id}`, {
+        method: 'POST', credentials: 'include'
+      });
+      if (res.ok) {
+        const data = await res.json();
+        const newId = data.newId || data.id;
+        if (newId) loadItemDetail(newId);
+      }
+    } catch { /* silent */ }
+    finally { saving = false; }
+  }
+
+  async function sendToPhone() {
+    if (!selectedItem) return;
+    saving = true;
+    try {
+      await fetch('/api/inventory/send-to-phone', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ rowId: selectedItem.id }),
+        credentials: 'include'
+      });
+    } catch { /* silent */ }
+    finally { saving = false; }
+  }
+
+  let fileInput: HTMLInputElement;
+  let uploading = $state(false);
+  let uploadMenuOpen = $state(false);
+  let immichOpen = $state(false);
+  let activePhoto = $state(0);
+
+  function triggerUpload() {
+    fileInput?.click();
+  }
+
+  async function handleFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (!input.files?.length || !selectedItem) return;
+    uploading = true;
+    try {
+      const formData = new FormData();
+      formData.append('rowId', String(selectedItem.id));
+      for (const file of input.files) formData.append('photos', file);
+      const res = await fetch('/api/inventory/upload', {
+        method: 'POST',
+        body: formData,
+        credentials: 'include'
+      });
+      if (res.ok) loadItemDetail(selectedItem.id);
+    } catch { /* silent */ }
+    finally {
+      uploading = false;
+      input.value = '';
+    }
+  }
+
+  async function handleImmichSelect(assetIds: string[]) {
+    if (!selectedItem || !assetIds.length) return;
+    uploading = true;
+    try {
+      await fetch('/api/inventory/upload-from-immich', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ rowId: selectedItem.id, assetIds, deleteAfter: true })
+      });
+      loadItemDetail(selectedItem.id);
+    } catch { /* silent */ }
+    finally { uploading = false; }
+  }
+
+  async function createNewItem() {
+    saving = true;
+    try {
+      const res = await fetch('/api/inventory/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ Item: 'New Item' }),
+        credentials: 'include'
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data.id) loadItemDetail(data.id);
+      }
+    } catch { /* silent */ }
+    finally { saving = false; }
+  }
+
+  onMount(async () => {
+    await loadSummary();
+    loading = false;
+    const itemId = page.url.searchParams.get('item');
+    if (itemId) loadItemDetail(Number(itemId));
+  });
+</script>
+
+{#snippet editableRow(nocoField: string, displayValue: string, classes: string)}
+  {#if editingField === nocoField}
+    <div class="detail-row editing">
+      <span class="field-label">{nocoField}</span>
+      <input
+        class="edit-input {classes}"
+        type={editableFields[nocoField]?.type === 'number' ? 'number' : 'text'}
+        bind:value={editValue}
+        onkeydown={handleEditKeydown}
+        onblur={saveEdit}
+        autofocus
+      />
+    </div>
+  {:else}
+    <div class="detail-row editable" onclick={() => startEdit(nocoField, rawField(nocoField))}>
+      <span class="field-label">{nocoField}</span>
+      <span class="field-value {classes}">{displayValue}</span>
+    </div>
+  {/if}
+{/snippet}
+
+<div class="page">
+  <div class="app-surface">
+    <section class="inventory-command reveal">
+      <div class="command-copy">
+        <div class="command-label">Atelier inventory</div>
+        <h1>Inventory</h1>
+        <p>Review blockers, verify arrivals, and open records without leaving the live operating queue.</p>
+      </div>
+      <div class="command-actions">
+        <div class="command-kicker">Live queue</div>
+        <div class="command-stats">{issueCount + reviewCount} active · {recentCount} recent</div>
+        <button class="btn-primary intro-btn" onclick={createNewItem}>New item</button>
+      </div>
+    </section>
+
+    <section class="signal-strip stagger">
+      <button class="signal-card" class:active={activeTab === 'issues'} onclick={() => activeTab = 'issues'}>
+        <div class="signal-topline">
+          <div class="signal-label">Issues</div>
+          <div class="signal-value">{issueCount}</div>
+        </div>
+        <div class="signal-note">Blocked items that need a decision now.</div>
+      </button>
+      <button class="signal-card" class:active={activeTab === 'review'} onclick={() => activeTab = 'review'}>
+        <div class="signal-topline">
+          <div class="signal-label">Needs review</div>
+          <div class="signal-value">{reviewCount}</div>
+        </div>
+        <div class="signal-note">Arrivals waiting on confirmation, cleanup, or sorting.</div>
+      </button>
+      <button class="signal-card" class:active={activeTab === 'all'} onclick={() => { activeTab = 'all'; loadRecent(); }}>
+        <div class="signal-topline">
+          <div class="signal-label">Recent</div>
+          <div class="signal-value">{recentCount}</div>
+        </div>
+        <div class="signal-note">Fresh records for context beyond the active queues.</div>
+      </button>
+    </section>
+
+    <section class="inventory-layout">
+      <div class="inventory-main">
+        <div class="toolbar-card">
+          <div class="toolbar-head">
+            <div>
+              <div class="toolbar-label">Lookup</div>
+              <div class="toolbar-title">Search and open records</div>
+            </div>
+            <div class="toolbar-meta">
+              {#if searchQuery && searchResults !== null}
+                {activeCount} result{activeCount !== 1 ? 's' : ''}
+              {:else}
+                Showing {activeCount}
+              {/if}
+            </div>
+          </div>
+
+          <div class="search-wrap">
+            <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+            <input
+              type="text"
+              class="search-input"
+              placeholder="Search by item name, order number, serial number, SKU..."
+              bind:value={searchQuery}
+              oninput={onSearchInput}
+            />
+            {#if searchQuery}
+              <button class="search-clear" onclick={() => { searchQuery = ''; searchResults = null; }}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            {/if}
+          </div>
+
+          {#if searchQuery && searchResults !== null}
+            <div class="search-results-label">{displayedItems().length} result{displayedItems().length !== 1 ? 's' : ''} for "{searchQuery}"</div>
+          {/if}
+        </div>
+
+        <div class="queue-header">
+          <div>
+            <div class="queue-label">Working queue</div>
+            <div class="queue-title">
+              {#if activeTab === 'issues'}
+                Items with blockers
+              {:else if activeTab === 'review'}
+                Items waiting on verification
+              {:else}
+                Recent inventory records
+              {/if}
+            </div>
+            <div class="queue-summary">
+              {#if activeTab === 'issues'}
+                Direct triage for damaged, mismatched, or unresolved items.
+              {:else if activeTab === 'review'}
+                Validate condition, fields, and photos before records settle.
+              {:else}
+                Recent records from the live inventory feed.
+              {/if}
+            </div>
+          </div>
+          <div class="queue-freshness">{loading ? 'Syncing…' : 'Live from inventory API'}</div>
+        </div>
+
+        <div class="items-card">
+          {#each displayedItems() as item (item.id)}
+            <button class="item-row" class:has-issue={item.status === 'Issue'} class:has-review={item.status === 'Needs Review'} onclick={() => openDetail(item)}>
+              <div class="row-accent"></div>
+              <div class="item-info">
+                <div class="item-name">{item.name}</div>
+                <div class="item-meta">
+                  <span>Order #{item.order || '—'}</span>
+                  <span>SKU {item.sku || '—'}</span>
+                </div>
+              </div>
+              <div class="item-tail">
+                <span class="status-badge {statusColor(item.status)}">{item.status}</span>
+                <svg class="row-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+              </div>
+            </button>
+          {/each}
+          {#if displayedItems().length === 0}
+            <div class="empty">No items found</div>
+          {/if}
+        </div>
+      </div>
+
+      <aside class="inventory-side reveal">
+        <div class="side-card accent-card">
+          <div class="section-label">Attention</div>
+          <div class="side-stat">
+            <div class="side-value">{issueCount + reviewCount}</div>
+            <div class="side-note">records still need a human pass before they can disappear into archive flow</div>
+          </div>
+        </div>
+        <div class="side-card">
+          <div class="section-label">Current mode</div>
+          <div class="mode-panel">
+            <div class="mode-title">
+              {#if activeTab === 'issues'}
+                Issue queue
+              {:else if activeTab === 'review'}
+                Review queue
+              {:else}
+                Recent records
+              {/if}
+            </div>
+            <div class="mode-copy">
+              {#if activeTab === 'issues'}
+                Use this view when something is damaged, missing, duplicated, or just wrong.
+              {:else if activeTab === 'review'}
+                Use this view for arrivals that still need validation and cleanup.
+              {:else}
+                Use this view when you need broad recency context beyond the active blockers.
+              {/if}
+            </div>
+          </div>
+        </div>
+        <div class="side-card">
+          <div class="section-label">Field guide</div>
+          <div class="side-list">
+            <div>Search by item, order number, serial, or SKU.</div>
+            <div>Open a row to change status, edit fields, or attach photos.</div>
+            <div>Use the inspector as the source of truth while the queue stays stable behind it.</div>
+          </div>
+        </div>
+      </aside>
+    </section>
+  </div>
+</div>
+
+{#if detailOpen && selectedItem}
+  <div class="detail-overlay" onclick={closeDetail}>
+    <div class="detail-sheet" onclick={(e) => e.stopPropagation()}>
+      <div class="detail-header">
+        {#if editingField === 'Item'}
+          <input class="edit-input detail-title-edit" type="text" bind:value={editValue} onkeydown={handleEditKeydown} onblur={saveEdit} autofocus />
+        {:else}
+          <div class="detail-title editable" onclick={() => startEdit('Item', rawField('Item'))}>{selectedItem.name}</div>
+        {/if}
+        <button class="detail-close" onclick={closeDetail}>Close</button>
+      </div>
+
+      <div class="status-control">
+        {#each statusOptions as status}
+          <button class="status-seg" class:active={selectedItem.status === status} data-status={status} onclick={() => changeStatus(status)}>
+            {status}
+          </button>
+        {/each}
+      </div>
+
+      <div class="detail-hero">
+        <div class="detail-primary-photo">
+          {#if selectedItem.photoUrls.length > 0}
+            <img class="hero-photo-img" src={selectedItem.photoUrls[activePhoto]} alt="Item photo" loading="lazy" />
+          {:else}
+            <div class="photo-placeholder empty-photo"><span>No photos yet</span></div>
+          {/if}
+        </div>
+
+        {#if selectedItem.photoUrls.length > 1}
+          <div class="detail-photos">
+            {#each selectedItem.photoUrls as url, index}
+              <button class="photo-thumb" class:active={activePhoto === index} onclick={() => activePhoto = index}>
+                <img class="photo-img" src={url} alt="Item photo" loading="lazy" />
+              </button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+
+      <div class="actions-group">
+        <div class="actions-row">
+          <input type="file" accept="image/*" multiple class="hidden-input" bind:this={fileInput} onchange={handleFileSelect} />
+          <button class="action-btn primary" onclick={() => uploadMenuOpen = !uploadMenuOpen} disabled={uploading}>{uploading ? 'Uploading...' : 'Upload photos'}</button>
+          {#if uploadMenuOpen}
+            <div class="upload-menu">
+              <button class="upload-option" onclick={() => { uploadMenuOpen = false; triggerUpload(); }}>From device</button>
+              <button class="upload-option" onclick={() => { uploadMenuOpen = false; immichOpen = true; }}>From Immich</button>
+            </div>
+          {/if}
+          <button class="action-btn" onclick={sendToPhone}>Phone</button>
+          <button class="action-btn sm" onclick={duplicateItem}>Duplicate</button>
+        </div>
+      </div>
+
+      <div class="detail-body">
+        <div class="detail-column">
+          <div class="section-group">
+            <div class="section-label">Purchase</div>
+            <div class="detail-fields">
+              {@render editableRow('Price Per Item', formatPrice(selectedItem.price), 'mono')}
+              {@render editableRow('Tax', formatPrice(selectedItem.tax), 'mono')}
+              {@render editableRow('Total', formatPrice(selectedItem.total), 'mono strong')}
+              {@render editableRow('QTY', String(selectedItem.qty), '')}
+            </div>
+          </div>
+
+          <div class="section-group">
+            <div class="section-label">Notes</div>
+            <div class="detail-fields">
+              {@render editableRow('Notes', selectedItem.notes || 'Add notes...', '')}
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-column">
+          <div class="section-group">
+            <div class="section-label">Item info</div>
+            <div class="detail-fields">
+              {@render editableRow('SKU', selectedItem.sku || '—', 'mono')}
+              {@render editableRow('Serial Numbers', selectedItem.serial || '—', 'mono')}
+              {@render editableRow('Order Number', selectedItem.order || '—', 'mono')}
+              {@render editableRow('Source', selectedItem.vendor || '—', '')}
+              {@render editableRow('Tracking Number', selectedItem.tracking || '—', 'mono')}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <a class="action-btn ghost open-noco" href={nocodbUrl || '#'} target="_blank" rel="noopener">Open in NocoDB</a>
+    </div>
+  </div>
+{/if}
+
+{#if immichOpen}
+  <ImmichPicker bind:open={immichOpen} onselect={handleImmichSelect} />
+{/if}
+
+<style>
+  .page {
+    padding-top: 0;
+  }
+  .app-surface {
+    max-width: 1360px;
+  }
+  .inventory-command {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+    gap: 24px;
+    padding: 8px 0 18px;
+  }
+  .command-copy {
+    max-width: 640px;
+  }
+  .command-label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #8c7b69;
+    margin-bottom: 8px;
+  }
+  .command-copy h1 {
+    margin: 0;
+    font-size: clamp(2.1rem, 4.1vw, 3.5rem);
+    line-height: 0.94;
+    letter-spacing: -0.065em;
+    color: #17120d;
+  }
+  .command-copy p {
+    margin: 12px 0 0;
+    max-width: 46ch;
+    color: #5c5046;
+    font-size: 1rem;
+    line-height: 1.55;
+  }
+  .command-actions {
+    min-width: 220px;
+    display: grid;
+    justify-items: end;
+    gap: 8px;
+  }
+  .command-kicker {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #8c7b69;
+  }
+  .command-stats {
+    font-size: 1.15rem;
+    letter-spacing: -0.04em;
+    color: #221a13;
+  }
+  .intro-btn { background: #1e1812; border-color: #1e1812; color: white; box-shadow: none; }
+  .intro-btn:hover { filter: none; transform: none; box-shadow: none; opacity: 0.92; }
+  .signal-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
+  .signal-card, .inventory-main, .side-card, .toolbar-card {
+    border-radius: 28px; border: 1px solid rgba(35,26,17,0.08); background: rgba(255,252,248,0.68); backdrop-filter: blur(14px);
+  }
+  .signal-card { padding: 18px; text-align: left; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; }
+  .signal-card:hover { transform: translateY(-2px); background: rgba(255,255,255,0.82); }
+  .signal-card.active {
+    border-color: rgba(179,92,50,0.2);
+    background: linear-gradient(145deg, rgba(255,248,242,0.94), rgba(246,237,227,0.72));
+  }
+  .signal-topline {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 12px;
+  }
+  .signal-label, .toolbar-label, .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: #7d6f61; }
+  .signal-value, .side-value { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 0.95; letter-spacing: -0.05em; color: #1e1812; }
+  .signal-note, .side-note, .side-list, .toolbar-meta, .item-meta { color: #4f463d; line-height: 1.6; }
+  .inventory-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) 290px; gap: 18px; align-items: start; }
+  .inventory-main { padding: 16px; background: linear-gradient(180deg, rgba(255,252,248,0.84), rgba(244,237,229,0.74)); }
+  .toolbar-card { padding: 16px 16px 12px; margin-bottom: 8px; background: rgba(255,255,255,0.42); }
+  .toolbar-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
+  .toolbar-title { margin-top: 4px; font-size: 1.1rem; letter-spacing: -0.035em; color: #1e1812; }
+  .inventory-side { display: grid; gap: 12px; }
+  .side-card { padding: 20px; }
+  .accent-card {
+    background: linear-gradient(180deg, rgba(255,248,242,0.96), rgba(240,234,227,0.84));
+  }
+  .side-stat, .side-list { margin-top: 14px; }
+  .queue-header {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: 14px;
+    padding: 8px 4px 14px;
+  }
+  .queue-label, .queue-freshness {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: #7d6f61;
+  }
+  .queue-title {
+    margin-top: 4px;
+    font-size: 1.35rem;
+    letter-spacing: -0.04em;
+    color: #1e1812;
+  }
+  .queue-summary {
+    margin-top: 6px;
+    color: #6a5d50;
+    font-size: 0.94rem;
+    line-height: 1.45;
+  }
+  .search-wrap { position: relative; margin-bottom: var(--sp-4); }
+  .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #7f7365; pointer-events: none; }
+  .search-input {
+    width: 100%;
+    padding: var(--sp-3) var(--sp-10) var(--sp-3) 42px;
+    border-radius: var(--radius);
+    border: 1.5px solid rgba(35,26,17,0.12);
+    background: rgba(255,255,255,0.92);
+    color: #1e1812;
+    font-size: var(--text-md);
+    font-family: var(--font);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
+  }
+  .search-input::placeholder { color: #8b7b6a; }
+  .search-input:focus {
+    outline: none;
+    border-color: rgba(179,92,50,0.5);
+    box-shadow: 0 0 0 4px rgba(179,92,50,0.08);
+  }
+  .search-clear {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: #7f7365;
+  }
+  .search-clear:hover { color: #1e1812; }
+  .search-results-label { color: #5f564b; font-size: 13px; }
+  .items-card { background: rgba(255,255,255,0.82); border-radius: 24px; border: 1px solid rgba(35,26,17,0.06); overflow: hidden; box-shadow: 0 16px 44px rgba(42,30,19,0.05); }
+  .item-row { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 16px; width: 100%; background: none; border: none; text-align: left; transition: background 160ms ease, transform 160ms ease; }
+  .item-row:hover { background: rgba(255,248,242,0.88); transform: translateX(2px); }
+  .item-row + .item-row { border-top: 1px solid rgba(35,26,17,0.07); }
+  .row-accent {
+    align-self: stretch;
+    border-radius: 999px;
+    background: rgba(35,26,17,0.08);
+  }
+  .item-row.has-issue .row-accent { background: linear-gradient(180deg, #ff5d45, #ef3d2f); }
+  .item-row.has-review .row-accent { background: linear-gradient(180deg, #f6a33a, #e28615); }
+  .item-info { flex: 1; min-width: 0; }
+  .item-name {
+    font-size: 1rem;
+    font-weight: 700;
+    color: #1e1812;
+    line-height: 1.25;
+  }
+  .item-row:hover .item-name { color: #140f0b; }
+  .item-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    margin-top: 6px;
+    color: #5d5248;
+    font-size: 0.88rem;
+  }
+  .item-tail {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-left: auto;
+  }
+  .status-badge.error { background: var(--error-dim); color: var(--error); }
+  .status-badge.success { background: var(--success-dim); color: var(--success); }
+  .status-badge.warning { background: var(--warning-bg); color: var(--warning); }
+  .status-badge.muted { background: var(--card-hover); color: var(--text-4); }
+  .status-badge { font-size: var(--text-xs); font-weight: 700; padding: 5px 10px; border-radius: 999px; flex-shrink: 0; }
+  .row-chevron { width: 14px; height: 14px; color: #7d6f61; flex-shrink: 0; opacity: 0.7; }
+  .empty { color: #5f564b; }
+  .empty { padding: var(--sp-12); text-align: center; color: var(--text-3); font-size: var(--text-base); }
+  .detail-overlay { position: fixed; inset: 0; background: rgba(17,13,10,0.42); z-index: 60; display: flex; justify-content: flex-end; backdrop-filter: blur(12px); }
+  .detail-sheet { width: 680px; max-width: 100%; height: 100%; background: linear-gradient(180deg, #f8f1e8 0%, #f3eadc 100%); overflow-y: auto; padding: var(--sp-7); box-shadow: -20px 0 50px rgba(18,13,10,0.16); border-left: 1px solid rgba(35,26,17,0.08); color: #1e1812; animation: sheetIn 220ms ease; }
+  .detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: 16px; }
+  .detail-title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: #1e1812;
+    line-height: 1.12;
+    letter-spacing: -0.04em;
+    flex: 1;
+    min-width: 0;
+  }
+  .status-control { display: flex; justify-content: center; gap: 0; margin: 0 8px 22px; background: rgba(255,255,255,0.72); border: 1px solid rgba(35,26,17,0.09); border-radius: var(--radius); padding: 3px; }
+  .status-seg { flex: 1; padding: 8px 0; font-size: var(--text-sm); background: none; border: none; border-radius: 10px; }
+  .status-seg.active[data-status="Issue"] { background: var(--error-dim); color: var(--error); }
+  .status-seg.active[data-status="Pending"] { background: var(--warning-bg); color: var(--warning); }
+  .status-seg.active[data-status="Received"] { background: var(--success-dim); color: var(--success); }
+  .status-seg.active[data-status="Needs Review"] { background: rgba(217,119,6,0.12); color: #9a5d09; }
+  .detail-hero {
+    margin-bottom: var(--sp-5);
+  }
+  .detail-primary-photo {
+    width: 100%;
+    height: 280px;
+    border-radius: 18px;
+    overflow: hidden;
+    background: rgba(255,255,255,0.58);
+    border: 1px solid rgba(35,26,17,0.08);
+  }
+  .hero-photo-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    background: var(--card-hover);
+  }
+  .detail-photos { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; }
+  .photo-thumb {
+    border: none;
+    background: none;
+    padding: 0;
+    border-radius: 12px;
+    overflow: hidden;
+    opacity: 0.7;
+    transition: opacity 160ms ease, transform 160ms ease;
+  }
+  .photo-thumb.active,
+  .photo-thumb:hover {
+    opacity: 1;
+    transform: translateY(-1px);
+  }
+  .photo-img, .photo-placeholder { width: 116px; height: 88px; border-radius: 12px; flex-shrink: 0; }
+  .photo-img { object-fit: cover; background: var(--card-hover); display: block; }
+  .photo-placeholder { background: rgba(255,255,255,0.58); border: 1px dashed rgba(35,26,17,0.13); display: flex; align-items: center; justify-content: center; }
+  .empty-photo { width: 100%; height: 100%; }
+  .actions-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-7); }
+  .actions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); position: relative; }
+  .action-btn { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 14px; border-radius: var(--radius-md); background: rgba(255,255,255,0.8); border: 1px solid rgba(35,26,17,0.1); font-size: var(--text-sm); color: #1e1812; }
+  .action-btn.primary { background: #1e1812; border-color: #1e1812; color: white; }
+  .action-btn.ghost { background: none; color: #6b6256; }
+  .action-btn.sm { padding: 6px 11px; }
+  .open-noco { margin-top: 8px; }
+  .detail-body {
+    display: grid;
+    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+    gap: 14px;
+  }
+  .detail-column {
+    display: grid;
+    gap: 14px;
+    align-content: start;
+  }
+  .section-group {
+    display: grid;
+    gap: 8px;
+  }
+  .detail-fields { background: rgba(255,255,255,0.76); border-radius: var(--radius); border: 1px solid rgba(35,26,17,0.08); overflow: hidden; }
+  .detail-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
+  .detail-row + .detail-row { border-top: 1px solid rgba(35,26,17,0.08); }
+  .field-label { font-size: var(--text-sm); color: #6b5f53; opacity: 1; }
+  .field-value { font-size: var(--text-base); color: #1e1812; text-align: right; }
+  .detail-row.editable, .detail-title.editable { cursor: pointer; }
+  .detail-row.editable:hover { background: rgba(255,248,242,0.62); }
+  .edit-input { width: 100%; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: rgba(255,255,255,0.9); color: #1e1812; }
+  .detail-title-edit { font-size: var(--text-lg); font-weight: 600; text-align: left; flex: 1; min-width: 0; }
+  .upload-menu { position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--sp-1); z-index: 10; background: rgba(255,250,244,0.96); border: 1px solid rgba(35,26,17,0.09); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(18,13,10,0.1); }
+  .upload-option { display: flex; align-items: center; width: 100%; padding: 12px 16px; background: none; border: none; text-align: left; color: #1e1812; }
+  .upload-option + .upload-option { border-top: 1px solid rgba(35,26,17,0.08); }
+  .hidden-input { display: none; }
+  .open-noco { color: #5f564b; }
+  .open-noco:hover { color: #1e1812; }
+  .mode-panel {
+    margin-top: 14px;
+  }
+  .mode-title {
+    font-size: 1.15rem;
+    letter-spacing: -0.04em;
+    color: #20170f;
+  }
+  .mode-copy {
+    margin-top: 8px;
+    color: #5f564b;
+    line-height: 1.55;
+  }
+  .reveal {
+    animation: riseIn 280ms ease;
+  }
+  .stagger .signal-card:nth-child(1) { animation: riseIn 220ms ease; }
+  .stagger .signal-card:nth-child(2) { animation: riseIn 260ms ease; }
+  .stagger .signal-card:nth-child(3) { animation: riseIn 300ms ease; }
+  @keyframes riseIn {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes sheetIn {
+    from {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  @media (max-width: 768px) {
+    .inventory-command,
+    .signal-strip,
+    .inventory-layout { grid-template-columns: 1fr; }
+    .inventory-command {
+      display: grid;
+      align-items: start;
+      gap: 14px;
+    }
+    .command-actions {
+      justify-items: start;
+    }
+    .detail-sheet { width: 100%; padding: var(--sp-5); }
+    .queue-header,
+    .toolbar-head { flex-direction: column; align-items: flex-start; }
+    .item-row { align-items: flex-start; }
+    .item-tail { gap: 8px; }
+    .detail-primary-photo {
+      height: 220px;
+    }
+    .detail-body {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
diff --git a/frontend-v2/src/routes/atelier/reader/+page.svelte b/frontend-v2/src/routes/atelier/reader/+page.svelte
new file mode 100644
index 0000000..52a1d4e
--- /dev/null
+++ b/frontend-v2/src/routes/atelier/reader/+page.svelte
@@ -0,0 +1,1006 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  // ── Types ──
+  interface Feed { name: string; count: number; id?: number; }
+  interface FeedCategory { name: string; feeds: Feed[]; expanded: boolean; id?: number; }
+  interface Article {
+    id: number; title: string; feed: string; timeAgo: string; readingTime: string;
+    content: string; thumbnail?: string; starred: boolean; read: boolean;
+    author?: string; url?: string;
+  }
+
+  // ── State ──
+  let navItems = $state([
+    { label: 'Today', count: 0, icon: 'calendar' },
+    { label: 'Starred', count: 0, icon: 'star' },
+    { label: 'History', count: 0, icon: 'clock' }
+  ]);
+  let feedCategories = $state<FeedCategory[]>([]);
+  let articles = $state<Article[]>([]);
+  let activeNav = $state('Today');
+  let activeFeedId = $state<number | null>(null);
+  let selectedArticle = $state<Article | null>(null);
+  let filterMode = $state<'unread' | 'all'>('unread');
+  let sidebarOpen = $state(false);
+  let autoScrollActive = $state(false);
+  let autoScrollSpeed = $state(1.5);
+  let articleListEl: HTMLDivElement;
+  let scrollRAF: number | null = null;
+  let loading = $state(true);
+  let loadingMore = $state(false);
+  let hasMore = $state(true);
+  let totalUnread = $state(0);
+
+  const LIMIT = 50;
+  let feedCounters: Record<string, number> = {};
+
+  // ── Helpers ──
+  function timeAgo(dateStr: string): string {
+    const mins = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000);
+    if (mins < 1) return 'now';
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    return `${days}d ago`;
+  }
+
+  function extractThumb(html: string): string | null {
+    const match = html?.match(/<img[^>]+src=["']([^"']+)["']/i);
+    if (!match) return null;
+    return match[1].replace(/&amp;/g, '&');
+  }
+
+  function stripHtml(html: string): string {
+    if (!html) return '';
+    return html.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/\s+/g, ' ').trim();
+  }
+
+  function mapEntry(e: any): Article {
+    return {
+      id: e.id, title: e.title, feed: e.feed?.title || '', url: e.url,
+      timeAgo: timeAgo(e.published_at), readingTime: `${e.reading_time || 1} min`,
+      content: e.content || '', thumbnail: extractThumb(e.content),
+      starred: e.starred || false, read: e.status === 'read',
+      author: e.author || ''
+    };
+  }
+
+  // ── API ──
+  async function api(path: string, opts: RequestInit = {}) {
+    const res = await fetch(`/api/reader${path}`, { credentials: 'include', ...opts });
+    if (!res.ok) throw new Error(`${res.status}`);
+    return res.json();
+  }
+
+  async function loadSidebar() {
+    try {
+      const [cats, feeds, counters] = await Promise.all([
+        api('/categories'), api('/feeds'), api('/feeds/counters')
+      ]);
+      feedCounters = counters.unreads || {};
+      totalUnread = Object.values(feedCounters).reduce((s: number, c: any) => s + (c as number), 0);
+
+      feedCategories = cats.map((c: any) => ({
+        id: c.id, name: c.title,
+        expanded: false,
+        feeds: feeds
+          .filter((f: any) => f.category.id === c.id)
+          .map((f: any) => ({ id: f.id, name: f.title, count: feedCounters[String(f.id)] || 0 }))
+      })).filter((c: FeedCategory) => c.feeds.length > 0);
+
+      // Expand first category
+      if (feedCategories.length > 0) feedCategories[0].expanded = true;
+
+      // Update nav counts
+      navItems[0].count = totalUnread;
+      try {
+        const [starred, history] = await Promise.all([
+          api('/entries?starred=true&limit=1'),
+          api('/entries?status=read&limit=1')
+        ]);
+        navItems[1].count = starred.total || 0;
+        navItems[2].count = history.total || 0;
+      } catch { /* silent */ }
+    } catch { /* silent */ }
+  }
+
+  async function loadEntries(append = false) {
+    if (loadingMore) return;
+    if (!append) { loading = true; articles = []; hasMore = true; }
+    else loadingMore = true;
+
+    try {
+      let params = `limit=${LIMIT}&direction=desc&order=published_at`;
+      if (!append) params += '&offset=0';
+      else params += `&offset=${articles.length}`;
+
+      if (activeFeedId) {
+        params += `&feed_id=${activeFeedId}`;
+      }
+
+      if (activeNav === 'Today') {
+        params += '&status=unread';
+      } else if (activeNav === 'Starred') {
+        params += '&starred=true';
+      } else if (activeNav === 'History') {
+        params += '&status=read';
+      }
+
+      const data = await api(`/entries?${params}`);
+      const mapped = (data.entries || []).map(mapEntry);
+
+      if (append) {
+        articles = [...articles, ...mapped];
+      } else {
+        articles = mapped;
+      }
+      hasMore = mapped.length === LIMIT;
+    } catch { /* silent */ }
+    finally { loading = false; loadingMore = false; }
+  }
+
+  async function markEntryRead(id: number) {
+    try {
+      await api('/entries', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entry_ids: [id], status: 'read' })
+      });
+    } catch { /* silent */ }
+  }
+
+  async function markEntryUnread(id: number) {
+    try {
+      await api('/entries', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entry_ids: [id], status: 'unread' })
+      });
+    } catch { /* silent */ }
+  }
+
+  async function toggleStarAPI(id: number) {
+    try {
+      await api(`/entries/${id}/bookmark`, { method: 'PUT' });
+    } catch { /* silent */ }
+  }
+
+  async function markAllReadAPI() {
+    const ids = articles.filter(a => !a.read).map(a => a.id);
+    if (!ids.length) return;
+    try {
+      await api('/entries', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entry_ids: ids, status: 'read' })
+      });
+    } catch { /* silent */ }
+  }
+
+  // ── Karakeep ──
+  let karakeepIds = $state<Record<number, string>>({});
+  let savingToKarakeep = $state<Set<number>>(new Set());
+
+  async function toggleKarakeep(article: Article, e?: Event) {
+    e?.stopPropagation();
+    e?.preventDefault();
+    if (savingToKarakeep.has(article.id)) return;
+    const articleUrl = article.url || '';
+    console.log('Karakeep: saving', article.id, articleUrl);
+    if (!articleUrl && !karakeepIds[article.id]) {
+      console.log('Karakeep: no URL, skipping');
+      return;
+    }
+    savingToKarakeep = new Set([...savingToKarakeep, article.id]);
+    try {
+      if (karakeepIds[article.id]) {
+        const res = await fetch('/api/karakeep/delete', {
+          method: 'POST', credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ id: karakeepIds[article.id] })
+        });
+        console.log('Karakeep delete:', res.status);
+        const next = { ...karakeepIds };
+        delete next[article.id];
+        karakeepIds = next;
+      } else {
+        const res = await fetch('/api/karakeep/save', {
+          method: 'POST', credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ url: articleUrl })
+        });
+        const text = await res.text();
+        console.log('Karakeep save:', res.status, text);
+        try {
+          const data = JSON.parse(text);
+          if (res.ok && data.ok) {
+            karakeepIds = { ...karakeepIds, [article.id]: data.id };
+            console.log('Karakeep: saved as', data.id);
+          }
+        } catch { console.error('Karakeep: bad JSON response'); }
+      }
+    } catch (err) {
+      console.error('Karakeep error:', err);
+    } finally {
+      const next = new Set(savingToKarakeep);
+      next.delete(article.id);
+      savingToKarakeep = next;
+    }
+  }
+
+  // ── Touch to stop auto-scroll ──
+  function handleScrollInterrupt() {
+    if (autoScrollActive) stopAutoScroll();
+  }
+
+  // ── Event handlers ──
+  function decrementUnread(count = 1) {
+    totalUnread = Math.max(0, totalUnread - count);
+    navItems[0].count = totalUnread;
+    navItems = [...navItems];
+  }
+
+  const filteredArticles = $derived(articles);
+
+  const currentIndex = $derived(
+    selectedArticle ? filteredArticles.findIndex(a => a.id === selectedArticle!.id) : -1
+  );
+
+  function selectArticle(article: Article) {
+    selectedArticle = article;
+    if (!article.read) {
+      article.read = true;
+      articles = [...articles];
+      markEntryRead(article.id);
+      decrementUnread();
+    }
+  }
+
+  function closeArticle() { selectedArticle = null; }
+
+  function toggleStar(article: Article, e?: Event) {
+    e?.stopPropagation();
+    article.starred = !article.starred;
+    articles = [...articles];
+    toggleStarAPI(article.id);
+  }
+
+  function toggleRead(article: Article) {
+    const wasRead = article.read;
+    article.read = !article.read;
+    articles = [...articles];
+    if (article.read) { markEntryRead(article.id); decrementUnread(); }
+    else { markEntryUnread(article.id); totalUnread++; navItems[0].count = totalUnread; navItems = [...navItems]; }
+  }
+
+  function markAllRead() {
+    const unreadCount = articles.filter(a => !a.read).length;
+    markAllReadAPI();
+    articles = articles.map(a => ({ ...a, read: true }));
+    decrementUnread(unreadCount);
+  }
+
+  function goNext() {
+    if (currentIndex < filteredArticles.length - 1) selectArticle(filteredArticles[currentIndex + 1]);
+  }
+  function goPrev() {
+    if (currentIndex > 0) selectArticle(filteredArticles[currentIndex - 1]);
+  }
+
+  function toggleCategory(index: number) {
+    feedCategories[index].expanded = !feedCategories[index].expanded;
+  }
+
+  function selectFeed(feedId: number) {
+    activeFeedId = feedId;
+    activeNav = '';
+    sidebarOpen = false;
+    loadEntries();
+  }
+
+  function selectNav(label: string) {
+    activeNav = label;
+    activeFeedId = null;
+    sidebarOpen = false;
+    loadEntries();
+  }
+
+  // ── Auto-scroll (requestAnimationFrame for smoothness) ──
+  function startAutoScroll() {
+    if (scrollRAF) cancelAnimationFrame(scrollRAF);
+    if (!articleListEl) return;
+    autoScrollActive = true;
+    function step() {
+      if (!autoScrollActive || !articleListEl) return;
+      articleListEl.scrollTop += autoScrollSpeed;
+      scrollRAF = requestAnimationFrame(step);
+    }
+    scrollRAF = requestAnimationFrame(step);
+  }
+  function stopAutoScroll() {
+    autoScrollActive = false;
+    if (scrollRAF) { cancelAnimationFrame(scrollRAF); scrollRAF = null; }
+  }
+  function toggleAutoScroll() {
+    if (autoScrollActive) stopAutoScroll();
+    else startAutoScroll();
+  }
+  function adjustSpeed(delta: number) {
+    autoScrollSpeed = Math.max(0.5, Math.min(5, +(autoScrollSpeed + delta).toFixed(1)));
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'j' || e.key === 'ArrowDown') { e.preventDefault(); goNext(); }
+    if (e.key === 'k' || e.key === 'ArrowUp') { e.preventDefault(); goPrev(); }
+    if (e.key === 'Escape' && selectedArticle) { closeArticle(); }
+    if (e.key === 's' && selectedArticle) { toggleStar(selectedArticle); }
+    if (e.key === 'm' && selectedArticle) { toggleRead(selectedArticle); }
+  }
+
+  // ── Mark-as-read on scroll (throttled to avoid jitter) ──
+  let pendingReadIds: number[] = [];
+  let flushTimer: ReturnType<typeof setTimeout> | null = null;
+  let scrollCheckTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function handleListScroll() {
+    // Throttle: only check every 400ms
+    if (scrollCheckTimer) return;
+    scrollCheckTimer = setTimeout(() => {
+      scrollCheckTimer = null;
+      checkScrolledCards();
+    }, 400);
+  }
+
+  function checkScrolledCards() {
+    if (!articleListEl) return;
+
+    // Infinite scroll — load more when near bottom
+    const { scrollTop, scrollHeight, clientHeight } = articleListEl;
+    if (hasMore && !loadingMore && scrollHeight - scrollTop - clientHeight < 300) {
+      loadEntries(true);
+    }
+
+    const listTop = articleListEl.getBoundingClientRect().top;
+    const cards = articleListEl.querySelectorAll('[data-entry-id]');
+    let newlyRead = 0;
+
+    cards.forEach(card => {
+      if (card.getBoundingClientRect().bottom < listTop + 20) {
+        const id = Number(card.getAttribute('data-entry-id'));
+        if (!id) return;
+        const article = articles.find(a => a.id === id);
+        if (article && !article.read) {
+          article.read = true;
+          pendingReadIds.push(id);
+          newlyRead++;
+        }
+      }
+    });
+
+    if (newlyRead > 0) {
+      articles = [...articles];
+      decrementUnread(newlyRead);
+      if (flushTimer) clearTimeout(flushTimer);
+      flushTimer = setTimeout(flushPendingReads, 1000);
+    }
+  }
+
+  async function flushPendingReads() {
+    if (!pendingReadIds.length) return;
+    const ids = [...pendingReadIds];
+    pendingReadIds = [];
+    try {
+      await api('/entries', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entry_ids: ids, status: 'read' })
+      });
+    } catch { /* silent */ }
+  }
+
+  // ── Init ──
+  onMount(() => {
+    loadSidebar();
+    loadEntries();
+    return () => {
+      if (flushTimer) clearTimeout(flushTimer);
+    };
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="reader-layout">
+
+  <!-- Left Sidebar -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <aside class="reader-sidebar" class:open={sidebarOpen}>
+    <div class="sidebar-header">
+      <svg class="rss-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
+      <span class="sidebar-title">Reader</span>
+    </div>
+
+    <nav class="sidebar-nav">
+      {#each navItems as item}
+        <button
+          class="nav-item"
+          class:active={activeNav === item.label}
+          onclick={() => selectNav(item.label)}
+        >
+          <div class="nav-icon">
+            {#if item.icon === 'inbox'}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
+            {:else if item.icon === 'calendar'}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+            {:else if item.icon === 'star'}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+            {:else}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            {/if}
+          </div>
+          <span class="nav-label">{item.label}</span>
+          {#if item.count > 0}
+            <span class="nav-count">{item.count}</span>
+          {/if}
+        </button>
+      {/each}
+    </nav>
+
+    <div class="sidebar-separator"></div>
+
+    <div class="feeds-section">
+      <div class="feeds-header">Feeds</div>
+      {#each feedCategories as cat, i}
+        <div class="feed-category">
+          <button class="category-toggle" onclick={() => toggleCategory(i)}>
+            <svg class="expand-icon" class:expanded={cat.expanded} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+            <span class="category-name">{cat.name}</span>
+            <span class="category-count">{cat.feeds.reduce((s, f) => s + f.count, 0)}</span>
+          </button>
+          {#if cat.expanded}
+            <div class="feed-list">
+              {#each cat.feeds as feed}
+                <button class="feed-item" onclick={() => selectFeed(feed.id || 0)}>
+                  <span class="feed-name">{feed.name}</span>
+                  {#if feed.count > 0}
+                    <span class="feed-count">{feed.count}</span>
+                  {/if}
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </aside>
+
+  <!-- Sidebar overlay for mobile -->
+  {#if sidebarOpen}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="sidebar-overlay" onclick={() => sidebarOpen = false}></div>
+  {/if}
+
+  <!-- Middle Panel: Article List -->
+  <div class="reader-list">
+    <div class="list-header">
+      <div class="list-header-top">
+        <button class="mobile-menu" onclick={() => sidebarOpen = !sidebarOpen} aria-label="Toggle sidebar">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+        </button>
+        <div class="list-heading">
+          <div class="list-kicker">Reading desk</div>
+          <div class="list-view-name">{activeFeedId ? feedCategories.flatMap(c => c.feeds).find(f => f.id === activeFeedId)?.name || 'Feed' : activeNav} <span class="list-count">{activeNav === 'Today' && !activeFeedId ? totalUnread : filteredArticles.length}</span></div>
+          <div class="list-subtitle">
+            {#if activeFeedId}
+              Focused source view with full article detail one click away.
+            {:else if activeNav === 'Today'}
+              Fresh unread stories across your active feeds.
+            {:else if activeNav === 'Starred'}
+              Saved stories worth keeping in rotation.
+            {:else}
+              Previously read entries and archive context.
+            {/if}
+          </div>
+        </div>
+        <div class="list-actions">
+          <button class="btn-icon" title="Refresh">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+          </button>
+          <button class="btn-icon" title="Mark all read" onclick={markAllRead}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
+          </button>
+          <button class="btn-icon" class:active-icon={autoScrollActive} onclick={toggleAutoScroll} title="Auto-scroll feed">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14"/><path d="M19 12l-7 7-7-7"/></svg>
+          </button>
+          {#if autoScrollActive}
+            <div class="speed-control">
+              <button class="speed-btn" onclick={() => adjustSpeed(-0.5)}>-</button>
+              <span class="speed-value">{autoScrollSpeed}x</span>
+              <button class="speed-btn" onclick={() => adjustSpeed(0.5)}>+</button>
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="article-list" bind:this={articleListEl} ontouchstart={handleScrollInterrupt} onwheel={handleScrollInterrupt} onscroll={handleListScroll}>
+      {#each filteredArticles as article, index (article.id)}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="article-card"
+          class:featured={!selectedArticle && !article.read && article.thumbnail && index === 0}
+          class:selected={selectedArticle?.id === article.id}
+          class:is-read={article.read}
+          data-entry-id={article.id}
+          onclick={() => selectArticle(article)}
+        >
+          <!-- Card header: source + time + actions -->
+          <div class="card-header">
+            <div class="card-source">
+              <svg class="card-rss" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
+              <span class="card-feed-name">{article.feed}</span>
+              {#if article.author}
+                <span class="card-author">· {article.author}</span>
+              {/if}
+            </div>
+            <div class="card-header-right">
+              <button class="bookmark-btn" class:saved={!!karakeepIds[article.id]} onclick={(e) => toggleKarakeep(article, e)} title={karakeepIds[article.id] ? 'Saved to Karakeep' : 'Save to Karakeep'}>
+                {#if savingToKarakeep.has(article.id)}
+                  <svg class="spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+                {:else}
+                  <svg viewBox="0 0 24 24" fill={karakeepIds[article.id] ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+                {/if}
+              </button>
+              <span class="card-time">{article.timeAgo}</span>
+            </div>
+          </div>
+
+          <div class="card-main">
+            <div class="card-copy">
+              <div class="card-title">{article.title}</div>
+              <div class="card-preview">{stripHtml(article.content).slice(0, 200)}</div>
+            </div>
+
+            {#if article.thumbnail}
+              <div class="card-banner" style="background-image:url('{article.thumbnail}')"></div>
+            {/if}
+          </div>
+
+          <div class="card-footer">
+            <span class="card-reading-time">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+              {article.readingTime}
+            </span>
+            {#if !article.read}
+              <span class="card-state">Unread</span>
+            {/if}
+          </div>
+        </div>
+      {/each}
+      {#if filteredArticles.length === 0}
+        <div class="list-empty">No articles to show</div>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<!-- Reading pane — slide-in overlay -->
+{#if selectedArticle}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="pane-overlay" onclick={closeArticle}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="pane-sheet" onclick={(e) => e.stopPropagation()}>
+      <div class="pane-toolbar">
+        <div class="pane-nav">
+          <button class="pane-nav-btn" onclick={closeArticle} title="Close (Esc)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+          <button class="pane-nav-btn" onclick={goPrev} disabled={currentIndex <= 0} title="Previous (k)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+          </button>
+          <span class="pane-nav-pos">{currentIndex + 1} / {filteredArticles.length}</span>
+          <button class="pane-nav-btn" onclick={goNext} disabled={currentIndex >= filteredArticles.length - 1} title="Next (j)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </button>
+        </div>
+        <div class="pane-actions">
+          <button class="pane-action-btn" class:saved-karakeep={!!karakeepIds[selectedArticle.id]} onclick={() => toggleKarakeep(selectedArticle!)} title={karakeepIds[selectedArticle.id] ? 'Saved to Karakeep' : 'Save to Karakeep'}>
+            {#if savingToKarakeep.has(selectedArticle.id)}
+              <svg class="spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+            {:else}
+              <svg viewBox="0 0 24 24" fill={karakeepIds[selectedArticle.id] ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+            {/if}
+          </button>
+          <button class="pane-action-btn" onclick={() => toggleRead(selectedArticle!)} title="Toggle read (m)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+          </button>
+          {#if selectedArticle.url}
+            <a href={selectedArticle.url} target="_blank" rel="noopener" class="pane-action-btn" title="Open original">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+            </a>
+          {/if}
+        </div>
+      </div>
+
+      <div class="pane-scroll">
+        <div class="pane-content">
+          {#if selectedArticle.thumbnail}
+            <div class="pane-hero">
+              <div class="pane-hero-image" style="background-image:url('{selectedArticle.thumbnail}')"></div>
+            </div>
+          {/if}
+          <h1 class="pane-title">{selectedArticle.title}</h1>
+          <div class="pane-meta">
+            <span class="pane-source">{selectedArticle.feed}</span>
+            <span class="pane-dot"></span>
+            <span>{selectedArticle.timeAgo}</span>
+            <span class="pane-dot"></span>
+            <span>{selectedArticle.readingTime} read</span>
+            {#if selectedArticle.author}
+              <span class="pane-dot"></span>
+              <span class="pane-author">by {selectedArticle.author}</span>
+            {/if}
+          </div>
+          <div class="pane-body">
+            {@html selectedArticle.content}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .reader-layout {
+    display: grid;
+    grid-template-columns: 260px minmax(0, 0.92fr);
+    min-height: calc(100vh - 56px);
+    overflow: hidden;
+    position: relative;
+    gap: 0;
+    background:
+      radial-gradient(circle at top left, rgba(255,255,255,0.84), transparent 34%),
+      linear-gradient(180deg, #f6f0e7 0%, #eee6da 100%);
+  }
+
+  /* ── Mobile menu ── */
+  .mobile-menu {
+    display: none; width: 32px; height: 32px; border-radius: 10px;
+    background: rgba(255,255,255,0.66); border: 1px solid rgba(35,26,17,0.08);
+    align-items: center; justify-content: center; cursor: pointer;
+    flex-shrink: 0; transition: all var(--transition);
+  }
+  .mobile-menu:hover { background: rgba(255,255,255,0.9); }
+  .mobile-menu svg { width: 16px; height: 16px; color: #5e5248; }
+
+  /* ── Sidebar ── */
+  .reader-sidebar {
+    width: 260px;
+    flex-shrink: 0;
+    background: rgba(250,246,240,0.82);
+    border-right: 1px solid rgba(35,26,17,0.08);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    padding: 18px 0 14px;
+    backdrop-filter: blur(12px);
+  }
+  .sidebar-header { display: flex; align-items: center; gap: 8px; padding: 0 18px 14px; }
+  .rss-icon { width: 16px; height: 16px; color: #7f5f3d; }
+  .sidebar-title { font-size: 1rem; font-weight: 700; color: #1f1811; letter-spacing: -0.03em; }
+
+  .sidebar-nav { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
+  .nav-item {
+    display: flex; align-items: center; gap: var(--sp-2);
+    padding: 10px 12px; border-radius: 14px; background: none; border: none;
+    font-size: var(--text-sm); color: #65584c; cursor: pointer;
+    transition: all var(--transition); text-align: left; width: 100%; font-family: var(--font);
+  }
+  .nav-item:hover { background: rgba(255,255,255,0.76); color: #1f1811; }
+  .nav-item.active { background: rgba(255,255,255,0.9); color: #1f1811; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(35,26,17,0.06); }
+  .nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
+  .nav-icon svg { width: 15px; height: 15px; }
+  .nav-label { flex: 1; }
+  .nav-count { font-size: var(--text-xs); color: #8a7a68; font-family: var(--mono); }
+  .nav-item.active .nav-count { color: #7f5f3d; opacity: 0.8; }
+
+  .sidebar-separator { height: 1px; background: rgba(35,26,17,0.08); margin: 12px 18px; }
+
+  .feeds-section { padding: 0 12px; flex: 1; }
+  .feeds-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #8a7a68; padding: 6px 12px 8px; }
+  .feed-category { margin-bottom: 1px; }
+  .category-toggle {
+    display: flex; align-items: center; gap: 5px; width: 100%;
+    padding: 7px 12px; background: none; border: none; font-size: var(--text-sm);
+    font-weight: 500; color: #352b22; cursor: pointer; border-radius: 12px;
+    transition: all var(--transition); font-family: var(--font);
+  }
+  .category-toggle:hover { background: rgba(255,255,255,0.72); }
+  .category-name { flex: 1; text-align: left; }
+  .category-count { font-size: var(--text-xs); color: #8a7a68; font-family: var(--mono); }
+  .expand-icon { width: 11px; height: 11px; transition: transform var(--transition); flex-shrink: 0; color: #8a7a68; }
+  .expand-icon.expanded { transform: rotate(90deg); }
+
+  .feed-list { padding-left: 18px; }
+  .feed-item {
+    display: flex; align-items: center; justify-content: space-between; width: 100%;
+    padding: 6px 10px; background: none; border: none; font-size: var(--text-sm);
+    color: #65584c; cursor: pointer; border-radius: 10px;
+    transition: all var(--transition); text-align: left; font-family: var(--font);
+  }
+  .feed-item:hover { background: rgba(255,255,255,0.72); color: #1f1811; }
+  .feed-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .feed-count { font-size: var(--text-xs); font-family: var(--mono); color: #8a7a68; flex-shrink: 0; margin-left: var(--sp-1.5); }
+
+  .sidebar-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 39; }
+
+  /* ── Feed list panel ── */
+  .reader-list {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    background: transparent;
+  }
+  .list-header { padding: 20px 24px 10px; background: transparent; border-bottom: none; flex-shrink: 0; }
+  .list-header-top { display: flex; align-items: start; justify-content: space-between; margin-bottom: 0; gap: 16px; }
+  .list-heading {
+    display: grid;
+    gap: 6px;
+  }
+  .list-kicker {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #8a7a68;
+  }
+  .list-view-name { font-size: 2.15rem; font-weight: 700; color: #1b140d; display: flex; align-items: center; gap: 10px; letter-spacing: -0.06em; line-height: 0.95; }
+  .list-count { font-size: 0.82rem; font-weight: 500; color: #8a7a68; font-family: var(--mono); letter-spacing: 0; }
+  .list-subtitle {
+    color: #65584c;
+    font-size: 0.95rem;
+    line-height: 1.5;
+  }
+  .list-actions { display: flex; gap: var(--sp-1); }
+  .btn-icon { width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,0.66); border: 1px solid rgba(35,26,17,0.08); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #65584c; transition: all var(--transition); }
+  .btn-icon:hover { color: #1f1811; background: rgba(255,255,255,0.9); }
+  .btn-icon.active-icon { color: #7f5f3d; border-color: rgba(127,95,61,0.18); background: rgba(255,248,242,0.92); }
+  .btn-icon svg { width: 14px; height: 14px; }
+
+  .list-filters { display: flex; gap: var(--sp-1); }
+  .filter-btn {
+    padding: 4px 10px 6px; border-radius: 0; background: none;
+    border: none; border-bottom: 2px solid transparent; font-size: var(--text-sm); font-weight: 500;
+    color: var(--text-3); cursor: pointer; transition: all var(--transition); font-family: var(--font);
+    position: relative;
+  }
+  .filter-btn:hover { color: var(--text-2); }
+  .filter-btn.active { color: var(--text-1); font-weight: 600; border-bottom-color: var(--accent); }
+
+  .speed-control { display: flex; align-items: center; gap: var(--sp-0.5); margin-left: var(--sp-1); }
+  .speed-btn {
+    width: 22px; height: 22px; border-radius: 8px; background: rgba(255,255,255,0.72);
+    border: 1px solid rgba(35,26,17,0.08); font-size: var(--text-sm); font-weight: 600;
+    color: #65584c; cursor: pointer; display: flex; align-items: center; justify-content: center;
+  }
+  .speed-btn:hover { color: #1f1811; }
+  .speed-value { font-size: var(--text-xs); font-family: var(--mono); color: #65584c; min-width: 24px; text-align: center; }
+
+  /* ── Article cards (feed style) ── */
+  .article-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px 24px 80px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .article-card {
+    padding: 16px 18px;
+    border-radius: 22px;
+    background: rgba(255,252,248,0.82);
+    border: 1px solid rgba(35,26,17,0.07);
+    box-shadow: 0 14px 34px rgba(45,32,21,0.05);
+    cursor: pointer; transition: all var(--transition);
+  }
+  .article-card:hover { box-shadow: 0 18px 40px rgba(45,32,21,0.08); transform: translateY(-2px); }
+  .article-card.selected { background: rgba(255,248,242,0.96); border-color: rgba(127,95,61,0.16); }
+  .article-card.featured {
+    padding: 22px;
+    background: linear-gradient(145deg, rgba(255,249,243,0.96), rgba(246,238,227,0.86));
+  }
+  .article-card.featured .card-main {
+    grid-template-columns: minmax(0, 1fr) 220px;
+    gap: 24px;
+  }
+  .article-card.featured .card-title {
+    font-size: 1.9rem;
+    line-height: 1;
+  }
+  .article-card.featured .card-banner {
+    width: 220px;
+    height: 164px;
+    border-radius: 22px;
+  }
+  .article-card.featured .card-preview {
+    -webkit-line-clamp: 4;
+  }
+  .article-card.is-read { opacity: 0.68; }
+  .article-card.is-read .card-title { color: #695b4d; }
+  .article-card.is-read .card-preview { color: #8a7a68; }
+  .article-card.is-read:hover { opacity: 0.82; }
+
+  .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
+  .card-source { display: flex; align-items: center; gap: var(--sp-1); font-size: 11px; color: #65584c; font-weight: 600; min-width: 0; text-transform: uppercase; letter-spacing: 0.08em; }
+  .card-rss { width: 12px; height: 12px; color: #8a7a68; flex-shrink: 0; }
+  .card-feed-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .card-author { color: #8a7a68; font-weight: 400; white-space: nowrap; text-transform: none; letter-spacing: 0; }
+  .card-header-right { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
+  .card-time { font-size: var(--text-xs); color: #8a7a68; }
+  .star-btn {
+    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
+    background: none; border: none; cursor: pointer; color: var(--text-4); border-radius: var(--radius-sm);
+    transition: all var(--transition); opacity: 0;
+  }
+  .article-card:hover .star-btn { opacity: 1; }
+  .star-btn.starred { opacity: 1; color: #F59E0B; }
+  .star-btn:hover { color: #F59E0B; }
+  .star-btn svg { width: 13px; height: 13px; }
+
+  .bookmark-btn {
+    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
+    background: none; border: none; cursor: pointer; color: #8a7a68; border-radius: 10px;
+    transition: all var(--transition); opacity: 0.5;
+  }
+  .article-card:hover .bookmark-btn { opacity: 0.85; }
+  .bookmark-btn.saved { opacity: 1; color: #F59E0B; }
+  .bookmark-btn:hover { opacity: 1; color: #F59E0B; }
+  .bookmark-btn svg { width: 13px; height: 13px; }
+
+  .spinning { animation: spin 0.8s linear infinite; }
+  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+  .card-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 168px;
+    gap: 18px;
+    align-items: start;
+  }
+  .card-copy {
+    min-width: 0;
+  }
+  .card-title { font-size: 1.2rem; font-weight: 700; color: #1b140d; line-height: 1.16; margin-bottom: 10px; letter-spacing: -0.04em; }
+  .card-banner { width: 168px; height: 126px; border-radius: 18px; background: rgba(229,220,209,0.8) center/cover no-repeat; }
+  .card-preview { font-size: 0.94rem; color: #65584c; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
+  .card-footer { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
+  .card-reading-time { display: flex; align-items: center; gap: 3px; font-size: var(--text-xs); color: #8a7a68; }
+  .card-reading-time svg { width: 11px; height: 11px; }
+  .card-state {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: #8a7a68;
+  }
+  .list-empty { padding: var(--sp-10); text-align: center; color: #65584c; font-size: var(--text-sm); }
+
+  /* ── Reading pane (slide-in sheet) ── */
+  .pane-overlay {
+    position: fixed; inset: 0; background: rgba(17,13,10,0.42); z-index: 60;
+    display: flex; justify-content: flex-end; animation: paneFadeIn 150ms ease;
+    backdrop-filter: blur(12px);
+  }
+  @keyframes paneFadeIn { from { opacity: 0; } to { opacity: 1; } }
+  .pane-sheet {
+    width: 720px; max-width: 100%; height: 100%; background: linear-gradient(180deg, #faf5ee 0%, #f3ebdf 100%);
+    display: flex; flex-direction: column;
+    border-left: 1px solid rgba(35,26,17,0.08);
+    box-shadow: -16px 0 44px rgba(0,0,0,0.12);
+    animation: paneSlideIn 200ms ease;
+  }
+  @keyframes paneSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
+  .pane-scroll { flex: 1; overflow-y: auto; }
+
+  .pane-toolbar {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 22px; border-bottom: 1px solid rgba(35,26,17,0.08); flex-shrink: 0;
+  }
+  .pane-nav { display: flex; align-items: center; gap: var(--sp-1); }
+  .pane-nav-btn {
+    width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,0.7);
+    border: 1px solid rgba(35,26,17,0.08); display: flex; align-items: center; justify-content: center;
+    cursor: pointer; color: #65584c; transition: all var(--transition);
+  }
+  .pane-nav-btn:hover { color: #1f1811; background: rgba(255,255,255,0.95); }
+  .pane-nav-btn:disabled { opacity: 0.25; cursor: default; }
+  .pane-nav-btn svg { width: 14px; height: 14px; }
+  .pane-nav-pos { font-size: var(--text-xs); color: #8a7a68; font-family: var(--mono); min-width: 44px; text-align: center; }
+
+  .pane-actions { display: flex; align-items: center; gap: var(--sp-0.5); }
+  .pane-action-btn {
+    width: 34px; height: 34px; border-radius: 10px; background: none;
+    border: none; display: flex; align-items: center; justify-content: center;
+    cursor: pointer; color: #65584c; transition: all var(--transition); text-decoration: none;
+  }
+  .pane-action-btn:hover { color: #1f1811; background: rgba(255,255,255,0.9); }
+  .pane-action-btn.active { color: var(--accent); }
+  .pane-action-btn.saved-karakeep { color: #F59E0B; }
+  .pane-action-btn svg { width: 15px; height: 15px; }
+
+  .pane-content { max-width: 680px; margin: 0 auto; padding: 34px 38px 90px; }
+  .pane-hero {
+    margin-bottom: 22px;
+  }
+  .pane-hero-image {
+    width: 100%;
+    height: 280px;
+    border-radius: 24px;
+    background: rgba(228,217,204,0.9) center/cover no-repeat;
+    box-shadow: 0 18px 40px rgba(39,28,18,0.09);
+  }
+  .pane-title { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.04; color: #1b140d; margin: 0 0 14px; letter-spacing: -0.05em; }
+  .pane-meta {
+    display: flex; align-items: center; gap: var(--sp-1.5); flex-wrap: wrap;
+    font-size: var(--text-sm); color: #65584c; margin-bottom: var(--sp-6);
+    padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(35,26,17,0.08);
+  }
+  .pane-source { font-weight: 600; color: #1f1811; }
+  .pane-author { font-style: italic; }
+  .pane-dot { width: 3px; height: 3px; border-radius: 50%; background: #8a7a68; }
+  .pane-body { font-size: 1.02rem; line-height: 1.9; color: #42372d; }
+  .pane-body :global(p) { margin-bottom: 18px; }
+  .pane-body :global(img) { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--sp-3) 0; }
+  .pane-body :global(a) { color: var(--accent); text-decoration: underline; }
+  .pane-body :global(a:hover) { opacity: 0.8; }
+  .pane-body :global(blockquote) { border-left: 3px solid var(--border); padding-left: var(--sp-4); margin: var(--sp-4) 0; color: var(--text-3); font-style: italic; }
+  .pane-body :global(pre) { background: var(--surface-secondary); padding: 14px; border-radius: var(--radius-md); overflow-x: auto; font-size: var(--text-sm); font-family: var(--mono); margin: var(--sp-4) 0; }
+  .pane-body :global(code) { font-family: var(--mono); font-size: 0.9em; }
+  .pane-body :global(h1), .pane-body :global(h2), .pane-body :global(h3) { color: var(--text-1); margin: 20px 0 10px; }
+  .pane-body :global(ul), .pane-body :global(ol) { padding-left: var(--sp-5); margin-bottom: var(--sp-4); }
+  .pane-body :global(li) { margin-bottom: var(--sp-1.5); }
+
+  /* ── Responsive ── */
+  @media (max-width: 1024px) {
+    .reader-layout { grid-template-columns: minmax(0, 1fr); }
+    .reader-sidebar { display: none; }
+    .reader-sidebar.open { display: flex; position: fixed; left: 0; top: 56px; bottom: 0; z-index: 40; box-shadow: 8px 0 24px rgba(0,0,0,0.08); }
+    .mobile-menu { display: flex; }
+  }
+  @media (max-width: 768px) {
+    .reader-layout { min-height: calc(100vh - 56px); }
+    .reader-sidebar { display: none; }
+    .reader-sidebar.open { display: flex; position: fixed; left: 0; top: 56px; bottom: 0; z-index: 40; box-shadow: 8px 0 24px rgba(0,0,0,0.08); width: 260px; }
+    .mobile-menu { display: flex; }
+    .list-header { padding: 16px 16px 8px; }
+    .list-view-name { font-size: 1.6rem; }
+    .list-subtitle { font-size: 0.9rem; }
+    .article-list { padding: 6px 16px 72px; gap: 10px; }
+    .article-card { padding: 14px; }
+    .article-card.featured {
+      padding: 16px;
+    }
+    .card-main { grid-template-columns: 1fr; }
+    .article-card.featured .card-main {
+      grid-template-columns: 1fr;
+      gap: 12px;
+    }
+    .card-title { font-size: 1.05rem; }
+    .article-card.featured .card-title {
+      font-size: 1.35rem;
+    }
+    .card-banner { width: 100%; height: 160px; border-radius: 16px; margin-top: 8px; }
+    .card-preview { -webkit-line-clamp: 2; }
+    .pane-sheet { width: 100%; }
+    .pane-content { padding: 24px 18px 80px; }
+    .pane-hero-image {
+      height: 200px;
+      border-radius: 18px;
+    }
+    .pane-title { font-size: 1.8rem; }
+    .pane-body { font-size: var(--text-md); line-height: 1.75; }
+    .pane-toolbar { padding: 10px 14px; }
+  }
+</style>
diff --git a/frontend-v2/src/routes/mockup/+layout.svelte b/frontend-v2/src/routes/mockup/+layout.svelte
new file mode 100644
index 0000000..24dcfa6
--- /dev/null
+++ b/frontend-v2/src/routes/mockup/+layout.svelte
@@ -0,0 +1,327 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { BookOpen, CalendarDays, CircleDot, Compass, Dumbbell, Landmark, LibraryBig, Package2, Settings2, SquareCheckBig } from '@lucide/svelte';
+	import { mockupNav, routeMeta } from '$lib/mockup/data';
+
+	const icons = {
+		'/mockup': CircleDot,
+		'/mockup/tasks': SquareCheckBig,
+		'/mockup/trips': Compass,
+		'/mockup/fitness': Dumbbell,
+		'/mockup/budget': Landmark,
+		'/mockup/inventory': Package2,
+		'/mockup/reader': BookOpen,
+		'/mockup/media': LibraryBig,
+		'/mockup/settings': Settings2
+	};
+
+	const navItems = mockupNav.map((item) => ({
+		...item,
+		icon: icons[item.href as keyof typeof icons]
+	}));
+
+	let { children } = $props();
+
+	const meta = $derived(routeMeta[page.url.pathname] || routeMeta['/mockup']);
+	const today = $derived(
+		new Intl.DateTimeFormat('en-US', {
+			weekday: 'short',
+			month: 'short',
+			day: 'numeric'
+		}).format(new Date())
+	);
+</script>
+
+<svelte:head>
+	<title>Platform Mockup</title>
+</svelte:head>
+
+<div class="mockup-shell">
+	<div class="mockup-glow mockup-glow-a"></div>
+	<div class="mockup-glow mockup-glow-b"></div>
+
+	<aside class="mockup-rail reveal">
+		<div class="rail-brand">
+			<div class="brand-mark">P</div>
+			<div>
+				<div class="brand-name">Platform Atelier</div>
+				<div class="brand-sub">concept workspace</div>
+			</div>
+		</div>
+
+		<nav class="rail-nav">
+			{#each navItems as item}
+				<a
+					href={item.href}
+					class:selected={page.url.pathname === item.href}
+				>
+					<item.icon size={16} strokeWidth={1.8} />
+					<span>{item.label}</span>
+				</a>
+			{/each}
+		</nav>
+
+		<div class="rail-note">
+			<div class="note-label">Intent</div>
+			<p>Separate concept route for browsing a rebuilt visual direction without changing the live app.</p>
+		</div>
+	</aside>
+
+	<div class="mockup-main">
+		<header class="mockup-header reveal">
+			<div>
+				<div class="eyebrow">{meta.eyebrow}</div>
+				<h1>{meta.title}</h1>
+				<p>{meta.description}</p>
+			</div>
+			<div class="header-side">
+				<div class="header-chip">
+					<CalendarDays size={15} strokeWidth={1.8} />
+					<span>{today}</span>
+				</div>
+				<div class="header-meta">Prototype routes only</div>
+			</div>
+		</header>
+
+		<section class="mockup-content">
+			{@render children()}
+		</section>
+	</div>
+</div>
+
+<style>
+	:global(body) {
+		background:
+			radial-gradient(circle at top left, rgba(214, 120, 58, 0.14), transparent 26%),
+			radial-gradient(circle at 85% 12%, rgba(65, 91, 82, 0.18), transparent 24%),
+			linear-gradient(180deg, #f5efe6 0%, #efe6da 48%, #ede7de 100%);
+		color: #1a1612;
+	}
+
+	.mockup-shell {
+		--sand: #f7f1e8;
+		--sand-deep: rgba(247, 241, 232, 0.72);
+		--ink: #1e1812;
+		--muted: #6b6256;
+		--line: rgba(35, 26, 17, 0.12);
+		--accent: #b35c32;
+		--accent-soft: rgba(179, 92, 50, 0.12);
+		--forest: #445f56;
+		--forest-soft: rgba(68, 95, 86, 0.12);
+		min-height: 100vh;
+		display: grid;
+		grid-template-columns: 280px minmax(0, 1fr);
+		position: relative;
+		overflow: clip;
+	}
+
+	.mockup-glow {
+		position: fixed;
+		border-radius: 999px;
+		filter: blur(80px);
+		pointer-events: none;
+		opacity: 0.45;
+	}
+
+	.mockup-glow-a {
+		width: 360px;
+		height: 360px;
+		top: -120px;
+		right: 12%;
+		background: rgba(179, 92, 50, 0.2);
+	}
+
+	.mockup-glow-b {
+		width: 280px;
+		height: 280px;
+		bottom: 10%;
+		left: 6%;
+		background: rgba(68, 95, 86, 0.18);
+	}
+
+	.mockup-rail {
+		position: sticky;
+		top: 0;
+		height: 100vh;
+		padding: 28px 22px 24px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		background: linear-gradient(180deg, rgba(250, 246, 239, 0.84), rgba(244, 237, 228, 0.68));
+		border-right: 1px solid var(--line);
+		backdrop-filter: blur(22px);
+	}
+
+	.rail-brand {
+		display: flex;
+		align-items: center;
+		gap: 14px;
+	}
+
+	.brand-mark {
+		width: 42px;
+		height: 42px;
+		display: grid;
+		place-items: center;
+		border-radius: 14px;
+		background: linear-gradient(135deg, var(--ink), #5d4c3f);
+		color: white;
+		font-size: 18px;
+		font-weight: 700;
+		letter-spacing: 0.06em;
+	}
+
+	.brand-name {
+		font-size: 14px;
+		font-weight: 700;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+	}
+
+	.brand-sub,
+	.note-label,
+	.eyebrow,
+	.header-meta {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: var(--muted);
+	}
+
+	.rail-nav {
+		display: grid;
+		gap: 8px;
+		margin: 30px 0 auto;
+	}
+
+	.rail-nav a {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 12px 14px;
+		border-radius: 999px;
+		color: var(--muted);
+		transition: background 160ms ease, color 160ms ease, transform 160ms ease;
+	}
+
+	.rail-nav a:hover,
+	.rail-nav a.selected {
+		background: rgba(255, 255, 255, 0.62);
+		color: var(--ink);
+		transform: translateX(3px);
+	}
+
+	.rail-note {
+		padding: 18px 0 0;
+		border-top: 1px solid var(--line);
+	}
+
+	.rail-note p {
+		margin: 8px 0 0;
+		font-size: 14px;
+		line-height: 1.6;
+		color: var(--muted);
+	}
+
+	.mockup-main {
+		padding: 28px 28px 40px;
+	}
+
+	.mockup-header {
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		gap: 20px;
+		padding: 12px 0 28px;
+	}
+
+	.mockup-header h1 {
+		max-width: 10ch;
+		margin: 8px 0 10px;
+		font-size: clamp(2.6rem, 5vw, 4.7rem);
+		line-height: 0.95;
+		letter-spacing: -0.06em;
+		font-weight: 700;
+	}
+
+	.mockup-header p {
+		max-width: 48rem;
+		margin: 0;
+		font-size: 16px;
+		line-height: 1.65;
+		color: var(--muted);
+	}
+
+	.header-side {
+		display: grid;
+		gap: 12px;
+		justify-items: end;
+	}
+
+	.header-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		padding: 10px 14px;
+		border-radius: 999px;
+		background: rgba(255, 255, 255, 0.66);
+		border: 1px solid rgba(35, 26, 17, 0.08);
+		color: var(--ink);
+	}
+
+	.mockup-content {
+		display: grid;
+	}
+
+	@media (max-width: 980px) {
+		.mockup-shell {
+			grid-template-columns: 1fr;
+		}
+
+		.mockup-rail {
+			position: relative;
+			height: auto;
+			gap: 24px;
+			padding-bottom: 18px;
+		}
+
+		.rail-nav {
+			grid-template-columns: repeat(9, minmax(0, 1fr));
+			overflow-x: auto;
+			margin: 0;
+		}
+
+		.rail-nav a {
+			justify-content: center;
+			min-width: 118px;
+		}
+
+		.rail-note {
+			display: none;
+		}
+
+		.mockup-main {
+			padding: 18px 16px 28px;
+		}
+
+		.mockup-header {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		.header-side {
+			justify-items: start;
+		}
+	}
+
+	@media (max-width: 640px) {
+		.mockup-header h1 {
+			max-width: 12ch;
+			font-size: 2.8rem;
+		}
+
+		.rail-nav {
+			grid-template-columns: repeat(9, 118px);
+		}
+	}
+</style>
diff --git a/frontend-v2/src/routes/mockup/+page.svelte b/frontend-v2/src/routes/mockup/+page.svelte
new file mode 100644
index 0000000..1f8b27c
--- /dev/null
+++ b/frontend-v2/src/routes/mockup/+page.svelte
@@ -0,0 +1,334 @@
+<script lang="ts">
+	import { ArrowUpRight, Dot, MoveRight } from '@lucide/svelte';
+	import { overview, trips, fitness, budget, inventory } from '$lib/mockup/data';
+</script>
+
+<div class="overview-grid">
+	<section class="poster stagger">
+		<div class="poster-copy">
+			<div class="kicker">Today at a glance</div>
+			<h2>One desk for movement, intake, stock, and spend.</h2>
+			<p>This concept treats the platform like a quiet studio wall: fewer boxes, stronger hierarchy, and clearer next actions.</p>
+		</div>
+		<div class="poster-metrics">
+			{#each overview.status as item}
+				<div class="metric-line">
+					<div>
+						<div class="metric-label">{item.label}</div>
+						<div class="metric-note">{item.note}</div>
+					</div>
+					<div class="metric-value">{item.value}</div>
+				</div>
+			{/each}
+		</div>
+	</section>
+
+	<section class="agenda reveal">
+		<div class="section-head">
+			<div>
+				<div class="section-label">Daily sequence</div>
+				<h3>Agenda</h3>
+			</div>
+			<a href="/mockup/trips">Open routes <ArrowUpRight size={15} /></a>
+		</div>
+
+		<div class="agenda-list">
+			{#each overview.agenda as item}
+				<div class="agenda-row">
+					<div class="agenda-time">{item.time}</div>
+					<div class="agenda-main">
+						<div class="agenda-title">{item.title}</div>
+						<div class="agenda-tag">{item.tag}</div>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</section>
+
+	<section class="strip stagger">
+		<a href="/mockup/trips" class="strip-block">
+			<div class="strip-label">Trips</div>
+			<div class="strip-title">{trips.itineraries[0].name}</div>
+			<div class="strip-detail">{trips.itineraries[0].status}</div>
+		</a>
+		<a href="/mockup/fitness" class="strip-block">
+			<div class="strip-label">Fitness</div>
+			<div class="strip-title">{fitness.macros[0].value} protein</div>
+			<div class="strip-detail">Recovery: {fitness.recovery[0]}</div>
+		</a>
+		<a href="/mockup/budget" class="strip-block">
+			<div class="strip-label">Budget</div>
+			<div class="strip-title">{budget.streams[1].amount}</div>
+			<div class="strip-detail">{budget.streams[1].name}</div>
+		</a>
+		<a href="/mockup/inventory" class="strip-block">
+			<div class="strip-label">Inventory</div>
+			<div class="strip-title">{inventory.rooms[1].coverage}</div>
+			<div class="strip-detail">{inventory.rooms[1].name}</div>
+		</a>
+	</section>
+
+	<section class="signals reveal">
+		<div class="section-head">
+			<div>
+				<div class="section-label">Signals</div>
+				<h3>Operating context</h3>
+			</div>
+			<div class="mini-link">Scan everything <MoveRight size={15} /></div>
+		</div>
+		<div class="signal-list">
+			{#each overview.signals as item}
+				<div class="signal-row">
+					<div>
+						<div class="signal-value">{item.value}</div>
+						<div class="signal-label">{item.label}</div>
+					</div>
+					<div class="signal-detail">{item.detail}</div>
+				</div>
+			{/each}
+		</div>
+	</section>
+
+	<section class="notes reveal">
+		<div class="section-head">
+			<div>
+				<div class="section-label">Cross-app notes</div>
+				<h3>What needs attention next</h3>
+			</div>
+		</div>
+		<div class="notes-list">
+			<div class="note-item">
+				<Dot size={22} />
+				<span>{trips.notes[0]}</span>
+			</div>
+			<div class="note-item">
+				<Dot size={22} />
+				<span>{budget.watchlist[0]}</span>
+			</div>
+			<div class="note-item">
+				<Dot size={22} />
+				<span>{inventory.rooms[2].note}</span>
+			</div>
+		</div>
+	</section>
+</div>
+
+<style>
+	.overview-grid {
+		display: grid;
+		grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr);
+		gap: 18px;
+		align-items: start;
+	}
+
+	.poster,
+	.agenda,
+	.signals,
+	.notes {
+		background: rgba(255, 252, 248, 0.66);
+		border: 1px solid rgba(35, 26, 17, 0.1);
+		backdrop-filter: blur(14px);
+	}
+
+	.poster {
+		grid-column: 1 / 2;
+		padding: 28px;
+		min-height: 420px;
+		display: grid;
+		align-content: space-between;
+		background:
+			linear-gradient(145deg, rgba(255, 250, 244, 0.88), rgba(246, 233, 220, 0.55)),
+			radial-gradient(circle at 85% 15%, rgba(179, 92, 50, 0.18), transparent 28%);
+		border-radius: 30px;
+	}
+
+	.poster-copy h2 {
+		max-width: 10ch;
+		margin: 8px 0 12px;
+		font-size: clamp(2rem, 4vw, 3.4rem);
+		line-height: 0.95;
+		letter-spacing: -0.05em;
+	}
+
+	.poster-copy p,
+	.metric-note,
+	.signal-detail,
+	.note-item span {
+		color: #6b6256;
+		line-height: 1.6;
+	}
+
+	.kicker,
+	.section-label,
+	.strip-label,
+	.metric-label,
+	.agenda-tag {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: #8b7b6a;
+	}
+
+	.poster-metrics {
+		display: grid;
+		gap: 14px;
+	}
+
+	.metric-line {
+		display: flex;
+		align-items: end;
+		justify-content: space-between;
+		padding-top: 14px;
+		border-top: 1px solid rgba(35, 26, 17, 0.1);
+	}
+
+	.metric-value {
+		font-size: clamp(1.6rem, 3vw, 2.4rem);
+		letter-spacing: -0.05em;
+	}
+
+	.agenda,
+	.signals,
+	.notes {
+		border-radius: 24px;
+		padding: 22px;
+	}
+
+	.agenda {
+		grid-column: 2 / 3;
+	}
+
+	.section-head {
+		display: flex;
+		align-items: end;
+		justify-content: space-between;
+		gap: 12px;
+		margin-bottom: 16px;
+	}
+
+	.section-head h3 {
+		margin: 4px 0 0;
+		font-size: 1.5rem;
+		letter-spacing: -0.04em;
+	}
+
+	.section-head a,
+	.mini-link {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+		color: #6b6256;
+	}
+
+	.agenda-list,
+	.signal-list,
+	.notes-list {
+		display: grid;
+		gap: 14px;
+	}
+
+	.agenda-row,
+	.signal-row {
+		display: grid;
+		grid-template-columns: 72px minmax(0, 1fr);
+		gap: 12px;
+		padding-top: 14px;
+		border-top: 1px solid rgba(35, 26, 17, 0.09);
+	}
+
+	.agenda-time {
+		font-size: 1.1rem;
+		letter-spacing: -0.03em;
+	}
+
+	.agenda-title,
+	.strip-title,
+	.signal-value {
+		font-size: 1.35rem;
+		letter-spacing: -0.04em;
+	}
+
+	.strip {
+		grid-column: 1 / -1;
+		display: grid;
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+		gap: 12px;
+	}
+
+	.strip-block {
+		padding: 18px 18px 20px;
+		border-radius: 24px;
+		background: rgba(255, 255, 255, 0.64);
+		border: 1px solid rgba(35, 26, 17, 0.08);
+		transition: transform 160ms ease, background 160ms ease;
+	}
+
+	.strip-block:hover {
+		transform: translateY(-3px);
+		background: rgba(255, 255, 255, 0.8);
+	}
+
+	.strip-detail,
+	.signal-label {
+		margin-top: 4px;
+		color: #6b6256;
+	}
+
+	.signals {
+		grid-column: 1 / 2;
+	}
+
+	.signal-row {
+		grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
+	}
+
+	.notes {
+		grid-column: 2 / 3;
+	}
+
+	.note-item {
+		display: flex;
+		align-items: start;
+		gap: 8px;
+		padding-top: 14px;
+		border-top: 1px solid rgba(35, 26, 17, 0.09);
+	}
+
+	@media (max-width: 980px) {
+		.overview-grid {
+			grid-template-columns: 1fr;
+		}
+
+		.poster,
+		.agenda,
+		.strip,
+		.signals,
+		.notes {
+			grid-column: 1 / -1;
+		}
+
+		.strip {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+
+	@media (max-width: 640px) {
+		.poster,
+		.agenda,
+		.signals,
+		.notes {
+			padding: 18px;
+			border-radius: 22px;
+		}
+
+		.agenda-row,
+		.signal-row {
+			grid-template-columns: 1fr;
+		}
+
+		.strip {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/frontend-v2/src/routes/mockup/budget/+page.svelte b/frontend-v2/src/routes/mockup/budget/+page.svelte
new file mode 100644
index 0000000..01ed17d
--- /dev/null
+++ b/frontend-v2/src/routes/mockup/budget/+page.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { budget } from '$lib/mockup/data';
+</script>
+
+<div class="budget-layout">
+	<section class="flow-band stagger">
+		{#each budget.streams as item}
+			<article class="flow-item">
+				<div class="flow-label">{item.name}</div>
+				<h2>{item.amount}</h2>
+				<p>{item.note}</p>
+			</article>
+		{/each}
+	</section>
+
+	<section class="watch reveal">
+		<div class="section-label">Watchlist</div>
+		<h3>Category drift and decisions</h3>
+		<div class="watch-list">
+			{#each budget.watchlist as item}
+				<div class="watch-row">{item}</div>
+			{/each}
+		</div>
+	</section>
+</div>
+
+<style>
+	.budget-layout {
+		display: grid;
+		gap: 18px;
+	}
+
+	.flow-band,
+	.watch {
+		border-radius: 28px;
+		border: 1px solid rgba(35, 26, 17, 0.1);
+		background: rgba(255, 252, 248, 0.68);
+		backdrop-filter: blur(14px);
+	}
+
+	.flow-band {
+		padding: 18px;
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 12px;
+	}
+
+	.flow-item {
+		padding: 22px;
+		border-radius: 22px;
+		background: linear-gradient(140deg, rgba(255, 248, 242, 0.92), rgba(239, 232, 224, 0.66));
+	}
+
+	.flow-label,
+	.section-label {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: #8b7b6a;
+	}
+
+	.flow-item h2,
+	.watch h3 {
+		margin: 8px 0 10px;
+		font-size: clamp(2rem, 4vw, 3rem);
+		line-height: 0.95;
+		letter-spacing: -0.05em;
+	}
+
+	.flow-item p,
+	.watch-row {
+		color: #6b6256;
+		line-height: 1.6;
+	}
+
+	.watch {
+		padding: 22px;
+	}
+
+	.watch-list {
+		display: grid;
+		gap: 12px;
+		margin-top: 18px;
+	}
+
+	.watch-row {
+		padding-top: 12px;
+		border-top: 1px solid rgba(35, 26, 17, 0.09);
+	}
+
+	@media (max-width: 920px) {
+		.flow-band {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/frontend-v2/src/routes/mockup/fitness/+page.svelte b/frontend-v2/src/routes/mockup/fitness/+page.svelte
new file mode 100644
index 0000000..b0da0e8
--- /dev/null
+++ b/frontend-v2/src/routes/mockup/fitness/+page.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+	import { fitness } from '$lib/mockup/data';
+</script>
+
+<div class="fitness-layout">
+	<section class="macro-board reveal">
+		<div class="section-label">Live intake</div>
+		<h2>Today</h2>
+		<div class="macro-list">
+			{#each fitness.macros as item}
+				<div class="macro-row">
+					<div>
+						<div class="macro-label">{item.label}</div>
+						<div class="macro-value">{item.value}</div>
+					</div>
+					<div class="macro-target">{item.target}</div>
+				</div>
+			{/each}
+		</div>
+		<div class="recovery-band">
+			{#each fitness.recovery as item}
+				<span>{item}</span>
+			{/each}
+		</div>
+	</section>
+
+	<section class="meal-log stagger">
+		{#each fitness.today as item}
+			<article class="meal-row">
+				<div class="meal-meta">{item.meal}</div>
+				<div class="meal-main">
+					<h3>{item.detail}</h3>
+					<p>{item.value}</p>
+				</div>
+			</article>
+		{/each}
+	</section>
+</div>
+
+<style>
+	.fitness-layout {
+		display: grid;
+		grid-template-columns: 380px minmax(0, 1fr);
+		gap: 18px;
+	}
+
+	.macro-board,
+	.meal-log {
+		border-radius: 28px;
+		border: 1px solid rgba(35, 26, 17, 0.1);
+		background: rgba(255, 252, 248, 0.68);
+		backdrop-filter: blur(14px);
+	}
+
+	.macro-board {
+		padding: 24px;
+		position: sticky;
+		top: 28px;
+		height: fit-content;
+	}
+
+	.section-label,
+	.meal-meta,
+	.macro-label {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: #8b7b6a;
+	}
+
+	.macro-board h2 {
+		margin: 8px 0 20px;
+		font-size: 3rem;
+		line-height: 0.95;
+		letter-spacing: -0.05em;
+	}
+
+	.macro-list {
+		display: grid;
+		gap: 14px;
+	}
+
+	.macro-row {
+		display: flex;
+		align-items: end;
+		justify-content: space-between;
+		padding-top: 14px;
+		border-top: 1px solid rgba(35, 26, 17, 0.09);
+	}
+
+	.macro-value,
+	.meal-main h3 {
+		margin: 4px 0 0;
+		font-size: 1.6rem;
+		line-height: 1.05;
+		letter-spacing: -0.04em;
+	}
+
+	.macro-target,
+	.meal-main p {
+		color: #6b6256;
+	}
+
+	.recovery-band {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		margin-top: 20px;
+	}
+
+	.recovery-band span {
+		padding: 10px 14px;
+		border-radius: 999px;
+		background: rgba(68, 95, 86, 0.1);
+		color: #34443d;
+		font-size: 13px;
+	}
+
+	.meal-log {
+		padding: 18px;
+		display: grid;
+		gap: 12px;
+	}
+
+	.meal-row {
+		display: grid;
+		grid-template-columns: 120px minmax(0, 1fr);
+		gap: 14px;
+		padding: 20px;
+		border-radius: 22px;
+		background: linear-gradient(135deg, rgba(255, 251, 246, 0.92), rgba(236, 244, 238, 0.55));
+	}
+
+	@media (max-width: 920px) {
+		.fitness-layout {
+			grid-template-columns: 1fr;
+		}
+
+		.macro-board {
+			position: static;
+		}
+	}
+
+	@media (max-width: 640px) {
+		.meal-row {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/frontend-v2/src/routes/mockup/inventory/+page.svelte b/frontend-v2/src/routes/mockup/inventory/+page.svelte
new file mode 100644
index 0000000..106bf47
--- /dev/null
+++ b/frontend-v2/src/routes/mockup/inventory/+page.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { inventory } from '$lib/mockup/data';
+</script>
+
+<div class="inventory-layout">
+	<section class="rooms stagger">
+		{#each inventory.rooms as item}
+			<article class="room-row">
+				<div>
+					<div class="room-label">{item.name}</div>
+					<h2>{item.coverage}</h2>
+				</div>
+				<p>{item.note}</p>
+			</article>
+		{/each}
+	</section>
+
+	<section class="restock reveal">
+		<div class="section-label">Restock run</div>
+		<h3>Next pickup list</h3>
+		<div class="restock-list">
+			{#each inventory.restock as item}
+				<div class="restock-pill">{item}</div>
+			{/each}
+		</div>
+	</section>
+</div>
+
+<style>
+	.inventory-layout {
+		display: grid;
+		grid-template-columns: minmax(0, 1.2fr) 320px;
+		gap: 18px;
+	}
+
+	.rooms,
+	.restock {
+		border-radius: 28px;
+		border: 1px solid rgba(35, 26, 17, 0.1);
+		background: rgba(255, 252, 248, 0.68);
+		backdrop-filter: blur(14px);
+	}
+
+	.rooms {
+		padding: 18px;
+		display: grid;
+		gap: 12px;
+	}
+
+	.room-row {
+		display: grid;
+		grid-template-columns: 240px minmax(0, 1fr);
+		gap: 16px;
+		padding: 22px;
+		border-radius: 22px;
+		background: linear-gradient(140deg, rgba(255, 251, 246, 0.92), rgba(233, 238, 233, 0.56));
+	}
+
+	.room-label,
+	.section-label {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: #8b7b6a;
+	}
+
+	.room-row h2,
+	.restock h3 {
+		margin: 8px 0 0;
+		font-size: clamp(1.8rem, 4vw, 2.7rem);
+		line-height: 0.95;
+		letter-spacing: -0.05em;
+	}
+
+	.room-row p {
+		margin: 0;
+		color: #6b6256;
+		line-height: 1.6;
+		align-self: center;
+	}
+
+	.restock {
+		padding: 22px;
+	}
+
+	.restock-list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 10px;
+		margin-top: 18px;
+	}
+
+	.restock-pill {
+		padding: 11px 14px;
+		border-radius: 999px;
+		background: rgba(179, 92, 50, 0.1);
+		color: #7b472c;
+		font-size: 13px;
+	}
+
+	@media (max-width: 920px) {
+		.inventory-layout {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	@media (max-width: 640px) {
+		.room-row {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/frontend-v2/src/routes/mockup/media/+page.svelte b/frontend-v2/src/routes/mockup/media/+page.svelte
new file mode 100644
index 0000000..1df62c3
--- /dev/null
+++ b/frontend-v2/src/routes/mockup/media/+page.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { media } from '$lib/mockup/data';
+</script>
+
+<div class="media-layout">
+	<section class="tab-strip reveal">
+		{#each media.tabs as item, index}
+			<div class:active={index === 0} class="tab-pill">{item}</div>
+		{/each}
+	</section>
+
+	<section class="media-grid">
+		<div class="media-panel stagger">
+			<div class="panel-head">
+				<div class="section-label">Books</div>
+				<h2>Downloads</h2>
+			</div>
+			{#each media.books as item}
+				<article class="media-card">
+					<h3>{item.title}</h3>
+					<p>{item.detail}</p>
+				</article>
+			{/each}
+		</div>
+
+		<div class="media-panel stagger">
+			<div class="panel-head">
+				<div class="section-label">Music</div>
+				<h2>Saved listening</h2>
+			</div>
+			{#each media.music as item}
+				<article class="media-card">
+					<h3>{item.title}</h3>
+					<p>{item.detail}</p>
+				</article>
+			{/each}
+		</div>
+
+		<div class="media-panel stagger">
+			<div class="panel-head">
+				<div class="section-label">Library</div>
+				<h2>Curated shelves</h2>
+			</div>
+			{#each media.library as item}
+				<article class="media-card">
+					<h3>{item.title}</h3>
+					<p>{item.detail}</p>
+				</article>
+			{/each}
+		</div>
+	</section>
+</div>
+
+<style>
+	.media-layout { display: grid; gap: 18px; }
+	.tab-strip, .media-panel {
+		border-radius: 28px;
+		border: 1px solid rgba(35,26,17,0.1);
+		background: rgba(255,252,248,0.68);
+		backdrop-filter: blur(14px);
+	}
+	.tab-strip {
+		padding: 14px;
+		display: flex;
+		gap: 10px;
+	}
+	.tab-pill {
+		padding: 10px 14px;
+		border-radius: 999px;
+		color: #6b6256;
+		background: rgba(255,255,255,0.5);
+	}
+	.tab-pill.active {
+		color: #1e1812;
+		background: rgba(179,92,50,0.12);
+	}
+	.media-grid {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 18px;
+	}
+	.media-panel {
+		padding: 18px;
+		display: grid;
+		gap: 12px;
+	}
+	.section-label {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: #8b7b6a;
+	}
+	.panel-head h2 {
+		margin: 8px 0 0;
+		font-size: 1.8rem;
+		line-height: 1.02;
+		letter-spacing: -0.04em;
+	}
+	.media-card {
+		padding: 18px;
+		border-radius: 22px;
+		background: linear-gradient(145deg, rgba(255,251,246,0.92), rgba(236,244,238,0.56));
+	}
+	.media-card h3 {
+		margin: 0 0 8px;
+		font-size: 1.1rem;
+		letter-spacing: -0.03em;
+	}
+	.media-card p {
+		margin: 0;
+		color: #6b6256;
+		line-height: 1.6;
+	}
+	@media (max-width: 980px) {
+		.media-grid { grid-template-columns: 1fr; }
+	}
+</style>
diff --git a/frontend-v2/src/routes/mockup/reader/+page.svelte b/frontend-v2/src/routes/mockup/reader/+page.svelte
new file mode 100644
index 0000000..1fd31f5
--- /dev/null
+++ b/frontend-v2/src/routes/mockup/reader/+page.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { reader } from '$lib/mockup/data';
+</script>
+
+<div class="reader-layout">
+	<aside class="reader-sidebar reveal">
+		<div class="section-label">Reading queues</div>
+		<div class="nav-list">
+			{#each reader.nav as item}
+				<div class="nav-row">
+					<span>{item.label}</span>
+					<span>{item.count}</span>
+				</div>
+			{/each}
+		</div>
+
+		<div class="section-label second">Feeds</div>
+		<div class="feed-list">
+			{#each reader.feeds as item}
+				<div class="feed-row">
+					<span>{item.name}</span>
+					<span>{item.count}</span>
+				</div>
+			{/each}
+		</div>
+	</aside>
+
+	<section class="reader-list stagger">
+		{#each reader.articles as item, index}
+			<article class:selected={index === 0} class="article-card">
+				<div class="article-meta">{item.source} · {item.time}</div>
+				<h2>{item.title}</h2>
+				<p>{item.excerpt}</p>
+			</article>
+		{/each}
+	</section>
+
+	<section class="reader-detail reveal">
+		<div class="detail-kicker">Focused article</div>
+		<h3>{reader.articles[0].title}</h3>
+		<p>{reader.articles[0].excerpt}</p>
+		<div class="detail-body">
+			The mock direction here is a three-part reading surface: narrow source navigation, a dense but calm article list, and a wide reading panel with room for starring, archiving, and sending to your knowledge system.
+		</div>
+	</section>
+</div>
+
+<style>
+	.reader-layout {
+		display: grid;
+		grid-template-columns: 260px minmax(0, 0.8fr) minmax(0, 1.1fr);
+		gap: 18px;
+	}
+	.reader-sidebar, .reader-list, .reader-detail {
+		border-radius: 28px;
+		border: 1px solid rgba(35,26,17,0.1);
+		background: rgba(255,252,248,0.68);
+		backdrop-filter: blur(14px);
+	}
+	.reader-sidebar, .reader-detail { padding: 22px; }
+	.reader-list {
+		padding: 18px;
+		display: grid;
+		gap: 12px;
+	}
+	.section-label, .detail-kicker, .article-meta {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: #8b7b6a;
+	}
+	.second { margin-top: 22px; }
+	.nav-list, .feed-list { display: grid; gap: 8px; margin-top: 12px; }
+	.nav-row, .feed-row {
+		display: flex;
+		justify-content: space-between;
+		padding: 10px 12px;
+		border-radius: 14px;
+		background: rgba(255,255,255,0.6);
+		color: #6b6256;
+	}
+	.article-card {
+		padding: 18px;
+		border-radius: 22px;
+		background: rgba(255,255,255,0.62);
+		border: 1px solid rgba(35,26,17,0.08);
+	}
+	.article-card.selected {
+		background: linear-gradient(145deg, rgba(255,248,242,0.9), rgba(245,232,221,0.6));
+	}
+	.article-card h2, .reader-detail h3 {
+		margin: 8px 0 10px;
+		font-size: clamp(1.4rem, 2.5vw, 2.2rem);
+		line-height: 1.02;
+		letter-spacing: -0.04em;
+	}
+	.article-card p, .reader-detail p, .detail-body {
+		color: #6b6256;
+		line-height: 1.7;
+	}
+	.detail-body {
+		margin-top: 18px;
+		padding-top: 18px;
+		border-top: 1px solid rgba(35,26,17,0.09);
+	}
+	@media (max-width: 1100px) {
+		.reader-layout { grid-template-columns: 1fr; }
+	}
+</style>
diff --git a/frontend-v2/src/routes/mockup/settings/+page.svelte b/frontend-v2/src/routes/mockup/settings/+page.svelte
new file mode 100644
index 0000000..c8ffbc3
--- /dev/null
+++ b/frontend-v2/src/routes/mockup/settings/+page.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { settings } from '$lib/mockup/data';
+</script>
+
+<div class="settings-layout">
+	<section class="settings-panel reveal">
+		<div class="section-label">Account</div>
+		<div class="row-list">
+			{#each settings.account as item}
+				<div class="setting-row">
+					<span>{item.label}</span>
+					<strong>{item.value}</strong>
+				</div>
+			{/each}
+		</div>
+	</section>
+
+	<section class="settings-panel stagger">
+		<div class="section-label">Connections</div>
+		<div class="row-list">
+			{#each settings.connections as item}
+				<div class="setting-row">
+					<span>{item.name}</span>
+					<strong>{item.state}</strong>
+				</div>
+			{/each}
+		</div>
+	</section>
+
+	<section class="settings-panel stagger">
+		<div class="section-label">Goals</div>
+		<div class="goal-grid">
+			{#each settings.goals as item}
+				<div class="goal-card">
+					<div class="goal-label">{item.label}</div>
+					<div class="goal-value">{item.value}</div>
+				</div>
+			{/each}
+		</div>
+	</section>
+</div>
+
+<style>
+	.settings-layout {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 18px;
+	}
+	.settings-panel {
+		padding: 22px;
+		border-radius: 28px;
+		border: 1px solid rgba(35,26,17,0.1);
+		background: rgba(255,252,248,0.68);
+		backdrop-filter: blur(14px);
+	}
+	.section-label, .goal-label {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: #8b7b6a;
+	}
+	.row-list {
+		display: grid;
+		gap: 12px;
+		margin-top: 18px;
+	}
+	.setting-row {
+		display: flex;
+		justify-content: space-between;
+		gap: 12px;
+		padding-top: 12px;
+		border-top: 1px solid rgba(35,26,17,0.09);
+		color: #6b6256;
+	}
+	.setting-row strong { color: #1e1812; }
+	.goal-grid {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 12px;
+		margin-top: 18px;
+	}
+	.goal-card {
+		padding: 18px;
+		border-radius: 22px;
+		background: linear-gradient(145deg, rgba(255,248,242,0.92), rgba(245,232,221,0.56));
+	}
+	.goal-value {
+		margin-top: 8px;
+		font-size: 1.8rem;
+		letter-spacing: -0.04em;
+	}
+	@media (max-width: 980px) {
+		.settings-layout { grid-template-columns: 1fr; }
+	}
+</style>
diff --git a/frontend-v2/src/routes/mockup/tasks/+page.svelte b/frontend-v2/src/routes/mockup/tasks/+page.svelte
new file mode 100644
index 0000000..2850405
--- /dev/null
+++ b/frontend-v2/src/routes/mockup/tasks/+page.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { tasks } from '$lib/mockup/data';
+</script>
+
+<div class="tasks-layout">
+	<section class="project-strip reveal">
+		<div class="section-label">Projects</div>
+		<div class="project-list">
+			{#each tasks.projects as item}
+				<div class="project-pill">{item}</div>
+			{/each}
+		</div>
+	</section>
+
+	<section class="board stagger">
+		{#each tasks.columns as column}
+			<div class="column">
+				<div class="column-head">
+					<div class="column-label">{column.name}</div>
+					<div class="column-count">{column.items.length}</div>
+				</div>
+				<div class="column-items">
+					{#each column.items as item}
+						<article class="task-card">
+							<h3>{item.title}</h3>
+							<p>{item.meta}</p>
+						</article>
+					{/each}
+				</div>
+			</div>
+		{/each}
+	</section>
+</div>
+
+<style>
+	.tasks-layout { display: grid; gap: 18px; }
+	.project-strip, .board {
+		border-radius: 28px;
+		border: 1px solid rgba(35,26,17,0.1);
+		background: rgba(255,252,248,0.68);
+		backdrop-filter: blur(14px);
+	}
+	.project-strip { padding: 22px; }
+	.section-label, .column-label {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: #8b7b6a;
+	}
+	.project-list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 10px;
+		margin-top: 14px;
+	}
+	.project-pill {
+		padding: 10px 14px;
+		border-radius: 999px;
+		background: rgba(68,95,86,0.1);
+		color: #34443d;
+		font-size: 13px;
+	}
+	.board {
+		padding: 18px;
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 14px;
+	}
+	.column {
+		padding: 16px;
+		border-radius: 22px;
+		background: linear-gradient(140deg, rgba(255,251,246,0.92), rgba(241,234,227,0.58));
+	}
+	.column-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 14px;
+	}
+	.column-count {
+		font-size: 13px;
+		color: #6b6256;
+	}
+	.column-items {
+		display: grid;
+		gap: 10px;
+	}
+	.task-card {
+		padding: 16px;
+		border-radius: 18px;
+		background: rgba(255,255,255,0.7);
+		border: 1px solid rgba(35,26,17,0.08);
+	}
+	.task-card h3 {
+		margin: 0 0 8px;
+		font-size: 1.1rem;
+		line-height: 1.2;
+		letter-spacing: -0.03em;
+	}
+	.task-card p {
+		margin: 0;
+		color: #6b6256;
+		line-height: 1.5;
+	}
+	@media (max-width: 920px) {
+		.board { grid-template-columns: 1fr; }
+	}
+</style>
diff --git a/frontend-v2/src/routes/mockup/trips/+page.svelte b/frontend-v2/src/routes/mockup/trips/+page.svelte
new file mode 100644
index 0000000..96614c5
--- /dev/null
+++ b/frontend-v2/src/routes/mockup/trips/+page.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { MoveRight } from '@lucide/svelte';
+	import { trips } from '$lib/mockup/data';
+</script>
+
+<div class="page-grid">
+	<section class="route-board stagger">
+		{#each trips.itineraries as item}
+			<article class="route-item">
+				<div class="route-meta">{item.window}</div>
+				<h2>{item.name}</h2>
+				<p>{item.status}</p>
+				<div class="stop-line">
+					{#each item.stops as stop, index}
+						<span>{stop}</span>{#if index < item.stops.length - 1}<MoveRight size={14} />{/if}
+					{/each}
+				</div>
+				<div class="weather">{item.weather}</div>
+			</article>
+		{/each}
+	</section>
+
+	<section class="detail-pane reveal">
+		<div class="section-label">Field notes</div>
+		<h3>Travel logic</h3>
+		<div class="notes-list">
+			{#each trips.notes as note}
+				<div class="note-row">{note}</div>
+			{/each}
+		</div>
+	</section>
+</div>
+
+<style>
+	.page-grid {
+		display: grid;
+		grid-template-columns: minmax(0, 1.35fr) 320px;
+		gap: 18px;
+	}
+
+	.route-board,
+	.detail-pane {
+		background: rgba(255, 252, 248, 0.68);
+		border: 1px solid rgba(35, 26, 17, 0.1);
+		border-radius: 28px;
+		backdrop-filter: blur(14px);
+	}
+
+	.route-board {
+		padding: 18px;
+		display: grid;
+		gap: 14px;
+	}
+
+	.route-item {
+		padding: 22px;
+		border-radius: 22px;
+		background: linear-gradient(135deg, rgba(255, 248, 242, 0.9), rgba(245, 232, 221, 0.58));
+		min-height: 230px;
+		display: grid;
+		align-content: start;
+		gap: 14px;
+		transition: transform 160ms ease;
+	}
+
+	.route-item:hover {
+		transform: translateY(-4px);
+	}
+
+	.route-meta,
+	.section-label {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: #8b7b6a;
+	}
+
+	.route-item h2,
+	.detail-pane h3 {
+		margin: 0;
+		font-size: clamp(1.8rem, 3vw, 2.5rem);
+		line-height: 0.98;
+		letter-spacing: -0.05em;
+	}
+
+	.route-item p,
+	.weather,
+	.note-row {
+		color: #6b6256;
+		line-height: 1.6;
+	}
+
+	.stop-line {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 8px;
+		font-size: 14px;
+	}
+
+	.detail-pane {
+		padding: 22px;
+		position: sticky;
+		top: 28px;
+		height: fit-content;
+	}
+
+	.notes-list {
+		display: grid;
+		gap: 12px;
+		margin-top: 18px;
+	}
+
+	.note-row {
+		padding-top: 12px;
+		border-top: 1px solid rgba(35, 26, 17, 0.09);
+	}
+
+	@media (max-width: 920px) {
+		.page-grid {
+			grid-template-columns: 1fr;
+		}
+
+		.detail-pane {
+			position: static;
+		}
+	}
+</style>
diff --git a/gateway/config.py b/gateway/config.py
index c7ed659..a319268 100644
--- a/gateway/config.py
+++ b/gateway/config.py
@@ -59,6 +59,9 @@ OPENAI_MODEL = os.environ.get("OPENAI_MODEL", "gpt-5.2")
 
 # ── Session config ──
 SESSION_MAX_AGE = int(os.environ.get("SESSION_MAX_AGE", 30 * 86400))  # 30 days
+DEV_AUTO_LOGIN = os.environ.get("DEV_AUTO_LOGIN", "").lower() in {"1", "true", "yes", "on"}
+DEV_AUTO_LOGIN_USERNAME = os.environ.get("DEV_AUTO_LOGIN_USERNAME", "dev")
+DEV_AUTO_LOGIN_DISPLAY_NAME = os.environ.get("DEV_AUTO_LOGIN_DISPLAY_NAME", "Dev User")
 
 # ── Ensure data dir exists ──
 DATA_DIR.mkdir(parents=True, exist_ok=True)
@@ -66,4 +69,3 @@ DATA_DIR.mkdir(parents=True, exist_ok=True)
 # Note: All internal services use plain HTTP (Docker network).
 # No custom SSL context needed. External calls (OpenAI, SMTP2GO, Open Library)
 # use default TLS verification.
-
diff --git a/gateway/responses.py b/gateway/responses.py
index 7d9bcb5..b74a1e8 100644
--- a/gateway/responses.py
+++ b/gateway/responses.py
@@ -5,8 +5,8 @@ Platform Gateway — Response helpers mixed into GatewayHandler.
 import json
 from http.cookies import SimpleCookie
 
-from config import SESSION_MAX_AGE
-from sessions import get_session_user
+from config import SESSION_MAX_AGE, DEV_AUTO_LOGIN
+from sessions import get_session_user, get_or_create_dev_user
 
 
 class ResponseMixin:
@@ -30,6 +30,8 @@ class ResponseMixin:
         return None
 
     def _get_user(self):
+        if DEV_AUTO_LOGIN and self.headers.get("X-Dev-Auto-Login") == "1":
+            return get_or_create_dev_user()
         token = self._get_session_token()
         return get_session_user(token)
 
diff --git a/gateway/sessions.py b/gateway/sessions.py
index d3201ef..012368d 100644
--- a/gateway/sessions.py
+++ b/gateway/sessions.py
@@ -4,8 +4,9 @@ Platform Gateway — Session and service-connection helpers.
 
 import secrets
 from datetime import datetime, timedelta
+import bcrypt
 
-from config import SESSION_MAX_AGE
+from config import SESSION_MAX_AGE, DEV_AUTO_LOGIN_USERNAME, DEV_AUTO_LOGIN_DISPLAY_NAME
 from database import get_db
 
 
@@ -52,6 +53,24 @@ def get_service_token(user_id, service):
     return dict(row) if row else None
 
 
+def get_or_create_dev_user():
+    conn = get_db()
+    row = conn.execute("SELECT * FROM users WHERE username = ?", (DEV_AUTO_LOGIN_USERNAME,)).fetchone()
+    if row:
+        conn.close()
+        return dict(row)
+
+    pw_hash = bcrypt.hashpw(secrets.token_hex(16).encode(), bcrypt.gensalt()).decode()
+    conn.execute(
+        "INSERT INTO users (username, password_hash, display_name) VALUES (?, ?, ?)",
+        (DEV_AUTO_LOGIN_USERNAME, pw_hash, DEV_AUTO_LOGIN_DISPLAY_NAME)
+    )
+    conn.commit()
+    row = conn.execute("SELECT * FROM users WHERE username = ?", (DEV_AUTO_LOGIN_USERNAME,)).fetchone()
+    conn.close()
+    return dict(row) if row else None
+
+
 def set_service_token(user_id, service, auth_token, auth_type="bearer"):
     conn = get_db()
     conn.execute("""
diff --git a/services/brain/Dockerfile.api b/services/brain/Dockerfile.api
new file mode 100644
index 0000000..e4446ce
--- /dev/null
+++ b/services/brain/Dockerfile.api
@@ -0,0 +1,23 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends libpq-dev && rm -rf /var/lib/apt/lists/*
+RUN pip install --no-cache-dir --upgrade pip
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+RUN adduser --disabled-password --no-create-home appuser
+RUN mkdir -p /app/storage && chown -R appuser /app/storage
+
+COPY --chown=appuser app/ app/
+
+EXPOSE 8200
+ENV PYTHONUNBUFFERED=1
+
+HEALTHCHECK --interval=30s --timeout=5s --retries=3 \
+  CMD python3 -c "import urllib.request; urllib.request.urlopen('http://127.0.0.1:8200/api/health', timeout=3)" || exit 1
+
+USER appuser
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8200"]
diff --git a/services/brain/Dockerfile.worker b/services/brain/Dockerfile.worker
new file mode 100644
index 0000000..e0ebe0b
--- /dev/null
+++ b/services/brain/Dockerfile.worker
@@ -0,0 +1,19 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends libpq-dev && rm -rf /var/lib/apt/lists/*
+RUN pip install --no-cache-dir --upgrade pip
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+RUN adduser --disabled-password --no-create-home appuser
+RUN mkdir -p /app/storage && chown -R appuser /app/storage
+
+COPY --chown=appuser app/ app/
+
+ENV PYTHONUNBUFFERED=1
+
+USER appuser
+CMD ["rq", "worker", "brain", "--url", "redis://brain-redis:6379/0", "--path", "/app"]
diff --git a/services/brain/README.md b/services/brain/README.md
new file mode 100644
index 0000000..7f6f0bf
--- /dev/null
+++ b/services/brain/README.md
@@ -0,0 +1,76 @@
+# Second Brain Service
+
+A "save everything" knowledge management backend. Captures links, notes, PDFs, images, and documents. AI classifies everything automatically. Supports keyword, semantic, and hybrid search.
+
+## Architecture
+
+```
+brain-api        → FastAPI REST API (port 8200)
+brain-worker     → RQ background processor
+brain-db         → PostgreSQL 16 + pgvector
+brain-redis      → Redis 7 (job queue)
+brain-meili      → Meilisearch (keyword search)
+brain-browserless → Headless Chrome (JS rendering + screenshots)
+```
+
+## Quick Start
+
+```bash
+cd services/brain
+
+# Copy and edit env
+cp .env.example .env
+# Add your OPENAI_API_KEY
+
+# Start the stack
+docker compose up -d
+
+# Check health
+curl http://localhost:8200/api/health
+```
+
+## API Endpoints
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/api/health` | Health check |
+| GET | `/api/config` | List folders/tags |
+| POST | `/api/items` | Create item (link/note) |
+| POST | `/api/items/upload` | Upload file |
+| GET | `/api/items` | List items (with filters) |
+| GET | `/api/items/{id}` | Get item by ID |
+| PATCH | `/api/items/{id}` | Update item |
+| DELETE | `/api/items/{id}` | Delete item |
+| POST | `/api/items/{id}/reprocess` | Re-run AI classification |
+| POST | `/api/search` | Keyword search (Meilisearch) |
+| POST | `/api/search/semantic` | Semantic search (pgvector) |
+| POST | `/api/search/hybrid` | Combined keyword + semantic |
+
+## Gateway Integration
+
+The platform gateway proxies `/api/brain/*` to `brain-api:8200/api/*`.
+
+Auth is handled by the gateway injecting `X-Gateway-User-Id` header.
+
+The brain-api container joins the `pangolin` Docker network so the gateway can reach it.
+
+## Processing Flow
+
+1. User submits URL/note/file → stored immediately as `pending`
+2. RQ worker picks it up → status becomes `processing`
+3. Worker: fetches content, takes screenshot, extracts text
+4. Worker: calls OpenAI for classification (folder, tags, title, summary)
+5. Worker: generates embedding via OpenAI
+6. Worker: indexes in Meilisearch
+7. Status becomes `ready` (or `failed` on error)
+
+## Storage
+
+Files stored locally at `./storage/`. Each item gets a subdirectory:
+```
+storage/{item_id}/screenshot/screenshot.png
+storage/{item_id}/archived_html/page.html
+storage/{item_id}/original_upload/filename.pdf
+```
+
+S3-compatible storage can be added by implementing `S3Storage` in `app/services/storage.py`.
diff --git a/services/brain/app/__init__.py b/services/brain/app/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/services/brain/app/api/__init__.py b/services/brain/app/api/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/services/brain/app/api/deps.py b/services/brain/app/api/deps.py
new file mode 100644
index 0000000..2aea62b
--- /dev/null
+++ b/services/brain/app/api/deps.py
@@ -0,0 +1,21 @@
+"""API dependencies — auth, database session."""
+
+from fastapi import Depends, Header, HTTPException
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from app.database import get_db
+
+
+async def get_user_id(
+    x_gateway_user_id: str = Header(None, alias="X-Gateway-User-Id"),
+) -> str:
+    """Extract authenticated user ID from gateway-injected header."""
+    if not x_gateway_user_id:
+        raise HTTPException(status_code=401, detail="Not authenticated")
+    return x_gateway_user_id
+
+
+async def get_db_session() -> AsyncSession:
+    """Provide an async database session."""
+    async for session in get_db():
+        yield session
diff --git a/services/brain/app/api/routes.py b/services/brain/app/api/routes.py
new file mode 100644
index 0000000..049e854
--- /dev/null
+++ b/services/brain/app/api/routes.py
@@ -0,0 +1,319 @@
+"""Brain API endpoints."""
+
+from __future__ import annotations
+
+import uuid
+from datetime import datetime
+from typing import Optional
+
+from fastapi import APIRouter, Depends, HTTPException, UploadFile, File, Form, Query
+from sqlalchemy import select, func, desc
+from sqlalchemy.ext.asyncio import AsyncSession
+from sqlalchemy.orm import selectinload
+
+from app.api.deps import get_user_id, get_db_session
+from app.config import FOLDERS, TAGS
+from app.models.item import Item, ItemAsset
+from app.models.schema import (
+    ItemCreate, ItemUpdate, ItemOut, ItemList, SearchQuery, SemanticSearchQuery,
+    HybridSearchQuery, SearchResult, ConfigOut,
+)
+from app.services.storage import storage
+from app.worker.tasks import enqueue_process_item
+
+router = APIRouter(prefix="/api", tags=["brain"])
+
+
+# ── Health ──
+
+@router.get("/health")
+async def health():
+    return {"status": "ok", "service": "brain"}
+
+
+# ── Config ──
+
+@router.get("/config", response_model=ConfigOut)
+async def get_config():
+    return ConfigOut(folders=FOLDERS, tags=TAGS)
+
+
+# ── Create item ──
+
+@router.post("/items", response_model=ItemOut, status_code=201)
+async def create_item(
+    body: ItemCreate,
+    user_id: str = Depends(get_user_id),
+    db: AsyncSession = Depends(get_db_session),
+):
+    item = Item(
+        id=str(uuid.uuid4()),
+        user_id=user_id,
+        type=body.type,
+        url=body.url,
+        raw_content=body.raw_content,
+        title=body.title,
+        folder=body.folder,
+        tags=body.tags or [],
+        processing_status="pending",
+    )
+    db.add(item)
+    await db.commit()
+    await db.refresh(item, ["assets"])
+
+    # Enqueue background processing
+    enqueue_process_item(item.id)
+
+    return item
+
+
+# ── Upload file ──
+
+@router.post("/items/upload", response_model=ItemOut, status_code=201)
+async def upload_file(
+    file: UploadFile = File(...),
+    title: Optional[str] = Form(None),
+    folder: Optional[str] = Form(None),
+    user_id: str = Depends(get_user_id),
+    db: AsyncSession = Depends(get_db_session),
+):
+    item_id = str(uuid.uuid4())
+    content_type = file.content_type or "application/octet-stream"
+
+    # Determine type from content_type
+    if content_type.startswith("image/"):
+        item_type = "image"
+    elif content_type == "application/pdf":
+        item_type = "pdf"
+    else:
+        item_type = "file"
+
+    # Store the uploaded file
+    data = await file.read()
+    path = storage.save(
+        item_id=item_id,
+        asset_type="original_upload",
+        filename=file.filename or "upload",
+        data=data,
+    )
+
+    item = Item(
+        id=item_id,
+        user_id=user_id,
+        type=item_type,
+        title=title or file.filename,
+        folder=folder,
+        processing_status="pending",
+    )
+    db.add(item)
+
+    asset = ItemAsset(
+        id=str(uuid.uuid4()),
+        item_id=item_id,
+        asset_type="original_upload",
+        filename=file.filename or "upload",
+        content_type=content_type,
+        size_bytes=len(data),
+        storage_path=path,
+    )
+    db.add(asset)
+
+    await db.commit()
+    await db.refresh(item, ["assets"])
+
+    enqueue_process_item(item.id)
+    return item
+
+
+# ── Get item ──
+
+@router.get("/items/{item_id}", response_model=ItemOut)
+async def get_item(
+    item_id: str,
+    user_id: str = Depends(get_user_id),
+    db: AsyncSession = Depends(get_db_session),
+):
+    result = await db.execute(
+        select(Item).options(selectinload(Item.assets))
+        .where(Item.id == item_id, Item.user_id == user_id)
+    )
+    item = result.scalar_one_or_none()
+    if not item:
+        raise HTTPException(status_code=404, detail="Item not found")
+    return item
+
+
+# ── List items ──
+
+@router.get("/items", response_model=ItemList)
+async def list_items(
+    user_id: str = Depends(get_user_id),
+    db: AsyncSession = Depends(get_db_session),
+    folder: Optional[str] = Query(None),
+    tag: Optional[str] = Query(None),
+    type: Optional[str] = Query(None),
+    status: Optional[str] = Query(None),
+    limit: int = Query(20, le=100),
+    offset: int = Query(0),
+):
+    q = select(Item).options(selectinload(Item.assets)).where(Item.user_id == user_id)
+
+    if folder:
+        q = q.where(Item.folder == folder)
+    if tag:
+        q = q.where(Item.tags.contains([tag]))
+    if type:
+        q = q.where(Item.type == type)
+    if status:
+        q = q.where(Item.processing_status == status)
+
+    # Count
+    count_q = select(func.count()).select_from(q.subquery())
+    total = (await db.execute(count_q)).scalar() or 0
+
+    # Fetch
+    q = q.order_by(desc(Item.created_at)).offset(offset).limit(limit)
+    result = await db.execute(q)
+    items = result.scalars().all()
+
+    return ItemList(items=items, total=total)
+
+
+# ── Update item ──
+
+@router.patch("/items/{item_id}", response_model=ItemOut)
+async def update_item(
+    item_id: str,
+    body: ItemUpdate,
+    user_id: str = Depends(get_user_id),
+    db: AsyncSession = Depends(get_db_session),
+):
+    result = await db.execute(
+        select(Item).options(selectinload(Item.assets))
+        .where(Item.id == item_id, Item.user_id == user_id)
+    )
+    item = result.scalar_one_or_none()
+    if not item:
+        raise HTTPException(status_code=404, detail="Item not found")
+
+    if body.title is not None:
+        item.title = body.title
+    if body.folder is not None:
+        item.folder = body.folder
+    if body.tags is not None:
+        item.tags = body.tags
+    if body.raw_content is not None:
+        item.raw_content = body.raw_content
+
+    item.updated_at = datetime.utcnow()
+    await db.commit()
+    await db.refresh(item)
+    return item
+
+
+# ── Delete item ──
+
+@router.delete("/items/{item_id}")
+async def delete_item(
+    item_id: str,
+    user_id: str = Depends(get_user_id),
+    db: AsyncSession = Depends(get_db_session),
+):
+    result = await db.execute(
+        select(Item).where(Item.id == item_id, Item.user_id == user_id)
+    )
+    item = result.scalar_one_or_none()
+    if not item:
+        raise HTTPException(status_code=404, detail="Item not found")
+
+    # Delete stored assets
+    for asset in (await db.execute(
+        select(ItemAsset).where(ItemAsset.item_id == item_id)
+    )).scalars().all():
+        storage.delete(asset.storage_path)
+
+    await db.delete(item)
+    await db.commit()
+    return {"status": "deleted"}
+
+
+# ── Reprocess item ──
+
+@router.post("/items/{item_id}/reprocess", response_model=ItemOut)
+async def reprocess_item(
+    item_id: str,
+    user_id: str = Depends(get_user_id),
+    db: AsyncSession = Depends(get_db_session),
+):
+    result = await db.execute(
+        select(Item).options(selectinload(Item.assets))
+        .where(Item.id == item_id, Item.user_id == user_id)
+    )
+    item = result.scalar_one_or_none()
+    if not item:
+        raise HTTPException(status_code=404, detail="Item not found")
+
+    item.processing_status = "pending"
+    item.processing_error = None
+    item.updated_at = datetime.utcnow()
+    await db.commit()
+
+    enqueue_process_item(item.id)
+    return item
+
+
+# ── Search (keyword via Meilisearch) ──
+
+@router.post("/search", response_model=SearchResult)
+async def search_items(
+    body: SearchQuery,
+    user_id: str = Depends(get_user_id),
+    db: AsyncSession = Depends(get_db_session),
+):
+    from app.search.engine import keyword_search
+    item_ids, total = await keyword_search(
+        user_id=user_id, q=body.q, folder=body.folder, tags=body.tags,
+        item_type=body.type, limit=body.limit, offset=body.offset,
+    )
+    if not item_ids:
+        return SearchResult(items=[], total=0, query=body.q)
+
+    result = await db.execute(
+        select(Item).options(selectinload(Item.assets))
+        .where(Item.id.in_(item_ids))
+    )
+    items_map = {i.id: i for i in result.scalars().all()}
+    ordered = [items_map[id] for id in item_ids if id in items_map]
+    return SearchResult(items=ordered, total=total, query=body.q)
+
+
+# ── Semantic search (pgvector) ──
+
+@router.post("/search/semantic", response_model=SearchResult)
+async def semantic_search(
+    body: SemanticSearchQuery,
+    user_id: str = Depends(get_user_id),
+    db: AsyncSession = Depends(get_db_session),
+):
+    from app.search.engine import vector_search
+    items = await vector_search(
+        db=db, user_id=user_id, q=body.q,
+        folder=body.folder, item_type=body.type, limit=body.limit,
+    )
+    return SearchResult(items=items, total=len(items), query=body.q)
+
+
+# ── Hybrid search ──
+
+@router.post("/search/hybrid", response_model=SearchResult)
+async def hybrid_search(
+    body: HybridSearchQuery,
+    user_id: str = Depends(get_user_id),
+    db: AsyncSession = Depends(get_db_session),
+):
+    from app.search.engine import hybrid_search as do_hybrid
+    items = await do_hybrid(
+        db=db, user_id=user_id, q=body.q,
+        folder=body.folder, tags=body.tags, item_type=body.type, limit=body.limit,
+    )
+    return SearchResult(items=items, total=len(items), query=body.q)
diff --git a/services/brain/app/config.py b/services/brain/app/config.py
new file mode 100644
index 0000000..7b67438
--- /dev/null
+++ b/services/brain/app/config.py
@@ -0,0 +1,55 @@
+"""Brain service configuration — all from environment variables."""
+
+import os
+
+# ── Database ──
+DATABASE_URL = os.environ.get(
+    "DATABASE_URL",
+    "postgresql+asyncpg://brain:brain@brain-db:5432/brain"
+)
+DATABASE_URL_SYNC = DATABASE_URL.replace("+asyncpg", "")
+
+# ── Redis ──
+REDIS_URL = os.environ.get("REDIS_URL", "redis://brain-redis:6379/0")
+
+# ── Meilisearch ──
+MEILI_URL = os.environ.get("MEILI_URL", "http://brain-meili:7700")
+MEILI_KEY = os.environ.get("MEILI_MASTER_KEY", "brain-meili-key")
+MEILI_INDEX = "items"
+
+# ── Browserless ──
+BROWSERLESS_URL = os.environ.get("BROWSERLESS_URL", "http://brain-browserless:3000")
+
+# ── OpenAI ──
+OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", "")
+OPENAI_MODEL = os.environ.get("OPENAI_MODEL", "gpt-4o-mini")
+OPENAI_EMBED_MODEL = os.environ.get("OPENAI_EMBED_MODEL", "text-embedding-3-small")
+OPENAI_EMBED_DIM = int(os.environ.get("OPENAI_EMBED_DIM", "1536"))
+
+# ── Storage ──
+STORAGE_BACKEND = os.environ.get("STORAGE_BACKEND", "local")  # local | s3
+STORAGE_LOCAL_PATH = os.environ.get("STORAGE_LOCAL_PATH", "/app/storage")
+
+# ── S3 (future) ──
+S3_BUCKET = os.environ.get("S3_BUCKET", "")
+S3_ENDPOINT = os.environ.get("S3_ENDPOINT", "")
+S3_ACCESS_KEY = os.environ.get("S3_ACCESS_KEY", "")
+S3_SECRET_KEY = os.environ.get("S3_SECRET_KEY", "")
+
+# ── Service ──
+PORT = int(os.environ.get("PORT", "8200"))
+DEBUG = os.environ.get("DEBUG", "").lower() in ("1", "true")
+
+# ── Classification rules ──
+FOLDERS = [
+    "Home", "Family", "Work", "Travel", "Knowledge", "Faith", "Projects"
+]
+
+TAGS = [
+    "reference", "important", "legal", "financial", "insurance",
+    "research", "idea", "guide", "tutorial", "setup", "how-to",
+    "tools", "dev", "server", "selfhosted", "home-assistant",
+    "shopping", "compare", "buy", "product",
+    "family", "kids", "health", "travel", "faith",
+    "video", "read-later", "books",
+]
diff --git a/services/brain/app/database.py b/services/brain/app/database.py
new file mode 100644
index 0000000..cc9e2ea
--- /dev/null
+++ b/services/brain/app/database.py
@@ -0,0 +1,18 @@
+"""Database session and engine setup."""
+
+from sqlalchemy.ext.asyncio import AsyncSession, create_async_engine, async_sessionmaker
+from sqlalchemy.orm import DeclarativeBase
+
+from app.config import DATABASE_URL
+
+engine = create_async_engine(DATABASE_URL, echo=False, pool_size=10, max_overflow=5)
+async_session = async_sessionmaker(engine, class_=AsyncSession, expire_on_commit=False)
+
+
+class Base(DeclarativeBase):
+    pass
+
+
+async def get_db() -> AsyncSession:
+    async with async_session() as session:
+        yield session
diff --git a/services/brain/app/main.py b/services/brain/app/main.py
new file mode 100644
index 0000000..c776b94
--- /dev/null
+++ b/services/brain/app/main.py
@@ -0,0 +1,41 @@
+"""Brain service — FastAPI entrypoint."""
+
+import logging
+
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+
+from app.api.routes import router
+from app.config import DEBUG
+
+logging.basicConfig(
+    level=logging.DEBUG if DEBUG else logging.INFO,
+    format="%(asctime)s %(levelname)s %(name)s: %(message)s",
+)
+
+app = FastAPI(
+    title="Second Brain",
+    description="Save everything. AI classifies it. Search it later.",
+    version="1.0.0",
+    docs_url="/api/docs" if DEBUG else None,
+    redoc_url=None,
+)
+
+# No CORS — internal service only, accessed via gateway
+app.include_router(router)
+
+
+@app.on_event("startup")
+async def startup():
+    from app.database import engine, Base
+    from app.models.item import Item, ItemAsset, AppLink  # noqa: import to register models
+
+    # Create tables if they don't exist
+    async with engine.begin() as conn:
+        await conn.run_sync(Base.metadata.create_all)
+
+    # Ensure Meilisearch index exists
+    from app.search.engine import ensure_meili_index
+    await ensure_meili_index()
+
+    logging.getLogger(__name__).info("Brain service started")
diff --git a/services/brain/app/models/__init__.py b/services/brain/app/models/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/services/brain/app/models/item.py b/services/brain/app/models/item.py
new file mode 100644
index 0000000..454540c
--- /dev/null
+++ b/services/brain/app/models/item.py
@@ -0,0 +1,80 @@
+"""SQLAlchemy models for the brain service."""
+
+import uuid
+from datetime import datetime
+
+from pgvector.sqlalchemy import Vector
+from sqlalchemy import (
+    Column, String, Text, Integer, Float, DateTime, ForeignKey, Index, text
+)
+from sqlalchemy.dialects.postgresql import JSONB, UUID, ARRAY
+from sqlalchemy.orm import relationship
+
+from app.config import OPENAI_EMBED_DIM
+from app.database import Base
+
+
+def new_id():
+    return str(uuid.uuid4())
+
+
+class Item(Base):
+    __tablename__ = "items"
+
+    id = Column(UUID(as_uuid=False), primary_key=True, default=new_id)
+    user_id = Column(String(64), nullable=False, index=True)
+    type = Column(String(32), nullable=False, default="link")  # link|note|pdf|image|document|file
+    title = Column(Text, nullable=True)
+    url = Column(Text, nullable=True)
+    raw_content = Column(Text, nullable=True)       # original user input (note body, etc.)
+    extracted_text = Column(Text, nullable=True)     # full extracted text from page/doc
+    folder = Column(String(64), nullable=True)
+    tags = Column(ARRAY(String), nullable=True, default=list)
+    summary = Column(Text, nullable=True)
+    confidence = Column(Float, nullable=True)
+    metadata_json = Column(JSONB, nullable=True, default=dict)
+    processing_status = Column(String(32), nullable=False, default="pending")  # pending|processing|ready|failed
+    processing_error = Column(Text, nullable=True)
+
+    # Embedding (pgvector)
+    embedding = Column(Vector(OPENAI_EMBED_DIM), nullable=True)
+
+    created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow, nullable=False)
+
+    # Relationships
+    assets = relationship("ItemAsset", back_populates="item", cascade="all, delete-orphan")
+
+    __table_args__ = (
+        Index("ix_items_user_status", "user_id", "processing_status"),
+        Index("ix_items_user_folder", "user_id", "folder"),
+        Index("ix_items_created", "created_at"),
+    )
+
+
+class ItemAsset(Base):
+    __tablename__ = "item_assets"
+
+    id = Column(UUID(as_uuid=False), primary_key=True, default=new_id)
+    item_id = Column(UUID(as_uuid=False), ForeignKey("items.id", ondelete="CASCADE"), nullable=False, index=True)
+    asset_type = Column(String(32), nullable=False)  # screenshot|archived_html|original_upload|extracted_file
+    filename = Column(String(512), nullable=False)
+    content_type = Column(String(128), nullable=True)
+    size_bytes = Column(Integer, nullable=True)
+    storage_path = Column(String(1024), nullable=False)  # relative path in storage
+
+    created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
+
+    # Relationships
+    item = relationship("Item", back_populates="assets")
+
+
+class AppLink(Base):
+    """Placeholder for future cross-app linking (e.g. link a saved item to a trip or task)."""
+    __tablename__ = "app_links"
+
+    id = Column(UUID(as_uuid=False), primary_key=True, default=new_id)
+    item_id = Column(UUID(as_uuid=False), ForeignKey("items.id", ondelete="CASCADE"), nullable=False, index=True)
+    app = Column(String(64), nullable=False)       # trips|tasks|fitness|inventory
+    app_entity_id = Column(String(128), nullable=False)
+    created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
diff --git a/services/brain/app/models/schema.py b/services/brain/app/models/schema.py
new file mode 100644
index 0000000..89c8b37
--- /dev/null
+++ b/services/brain/app/models/schema.py
@@ -0,0 +1,109 @@
+"""Pydantic schemas for API request/response."""
+
+from __future__ import annotations
+
+from datetime import datetime
+from typing import Optional
+
+from pydantic import BaseModel, Field
+
+
+# ── Request schemas ──
+
+class ItemCreate(BaseModel):
+    type: str = "link"
+    url: Optional[str] = None
+    raw_content: Optional[str] = None
+    title: Optional[str] = None
+    folder: Optional[str] = None
+    tags: Optional[list[str]] = None
+
+
+class ItemUpdate(BaseModel):
+    title: Optional[str] = None
+    folder: Optional[str] = None
+    tags: Optional[list[str]] = None
+    raw_content: Optional[str] = None
+
+
+class SearchQuery(BaseModel):
+    q: str
+    folder: Optional[str] = None
+    tags: Optional[list[str]] = None
+    type: Optional[str] = None
+    limit: int = Field(default=20, le=100)
+    offset: int = 0
+
+
+class SemanticSearchQuery(BaseModel):
+    q: str
+    folder: Optional[str] = None
+    type: Optional[str] = None
+    limit: int = Field(default=20, le=100)
+
+
+class HybridSearchQuery(BaseModel):
+    q: str
+    folder: Optional[str] = None
+    tags: Optional[list[str]] = None
+    type: Optional[str] = None
+    limit: int = Field(default=20, le=100)
+
+
+# ── Response schemas ──
+
+class AssetOut(BaseModel):
+    id: str
+    asset_type: str
+    filename: str
+    content_type: Optional[str] = None
+    size_bytes: Optional[int] = None
+    created_at: datetime
+
+    model_config = {"from_attributes": True}
+
+
+class ItemOut(BaseModel):
+    id: str
+    type: str
+    title: Optional[str] = None
+    url: Optional[str] = None
+    folder: Optional[str] = None
+    tags: Optional[list[str]] = None
+    summary: Optional[str] = None
+    confidence: Optional[float] = None
+    processing_status: str
+    processing_error: Optional[str] = None
+    metadata_json: Optional[dict] = None
+    created_at: datetime
+    updated_at: datetime
+    assets: list[AssetOut] = []
+
+    model_config = {"from_attributes": True}
+
+
+class ItemList(BaseModel):
+    items: list[ItemOut]
+    total: int
+
+
+class SearchResult(BaseModel):
+    items: list[ItemOut]
+    total: int
+    query: str
+
+
+class ConfigOut(BaseModel):
+    folders: list[str]
+    tags: list[str]
+
+
+# ── OpenAI classification schema ──
+
+class ClassificationResult(BaseModel):
+    """What the AI returns for each item."""
+    folder: str
+    tags: list[str] = Field(min_length=2, max_length=3)
+    title: str
+    summary: str
+    confidence: float = Field(ge=0.0, le=1.0)
diff --git a/services/brain/app/search/__init__.py b/services/brain/app/search/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/services/brain/app/search/engine.py b/services/brain/app/search/engine.py
new file mode 100644
index 0000000..13e70b4
--- /dev/null
+++ b/services/brain/app/search/engine.py
@@ -0,0 +1,183 @@
+"""Search engine — Meilisearch for keywords, pgvector for semantic, hybrid merges both."""
+
+import logging
+from typing import Optional
+
+import httpx
+from sqlalchemy import select, text
+from sqlalchemy.ext.asyncio import AsyncSession
+from sqlalchemy.orm import selectinload
+
+from app.config import MEILI_URL, MEILI_KEY, MEILI_INDEX, OPENAI_EMBED_DIM
+from app.models.item import Item
+from app.services.embed import generate_embedding
+
+log = logging.getLogger(__name__)
+
+
+# ── Meilisearch helpers ──
+
+async def _meili_request(method: str, path: str, json_data: dict = None) -> dict | None:
+    try:
+        async with httpx.AsyncClient(timeout=10) as client:
+            resp = await client.request(
+                method,
+                f"{MEILI_URL}/{path}",
+                json=json_data,
+                headers={"Authorization": f"Bearer {MEILI_KEY}"},
+            )
+            if resp.status_code < 300:
+                return resp.json() if resp.content else {}
+            log.warning(f"Meilisearch {method} {path}: {resp.status_code}")
+    except Exception as e:
+        log.error(f"Meilisearch error: {e}")
+    return None
+
+
+async def ensure_meili_index():
+    """Create the Meilisearch index if it doesn't exist."""
+    await _meili_request("POST", "indexes", {"uid": MEILI_INDEX, "primaryKey": "id"})
+    # Set filterable attributes
+    await _meili_request("PUT", f"indexes/{MEILI_INDEX}/settings", {
+        "filterableAttributes": ["user_id", "folder", "tags", "type", "processing_status"],
+        "searchableAttributes": ["title", "extracted_text", "summary", "url"],
+        "sortableAttributes": ["created_at"],
+    })
+
+
+async def index_item(item_data: dict):
+    """Add or update an item in Meilisearch."""
+    await _meili_request("POST", f"indexes/{MEILI_INDEX}/documents", [item_data])
+
+
+async def remove_from_index(item_id: str):
+    """Remove an item from Meilisearch."""
+    await _meili_request("DELETE", f"indexes/{MEILI_INDEX}/documents/{item_id}")
+
+
+# ── Keyword search (Meilisearch) ──
+
+async def keyword_search(
+    user_id: str,
+    q: str,
+    folder: str | None = None,
+    tags: list[str] | None = None,
+    item_type: str | None = None,
+    limit: int = 20,
+    offset: int = 0,
+) -> tuple[list[str], int]:
+    """Search Meilisearch. Returns (item_ids, total)."""
+    filters = [f'user_id = "{user_id}"', 'processing_status = "ready"']
+    if folder:
+        filters.append(f'folder = "{folder}"')
+    if item_type:
+        filters.append(f'type = "{item_type}"')
+    if tags:
+        for tag in tags:
+            filters.append(f'tags = "{tag}"')
+
+    result = await _meili_request("POST", f"indexes/{MEILI_INDEX}/search", {
+        "q": q,
+        "filter": " AND ".join(filters),
+        "limit": limit,
+        "offset": offset,
+    })
+
+    if not result:
+        return [], 0
+
+    ids = [hit["id"] for hit in result.get("hits", [])]
+    total = result.get("estimatedTotalHits", len(ids))
+    return ids, total
+
+
+# ── Semantic search (pgvector) ──
+
+async def vector_search(
+    db: AsyncSession,
+    user_id: str,
+    q: str,
+    folder: str | None = None,
+    item_type: str | None = None,
+    limit: int = 20,
+) -> list:
+    """Semantic similarity search using pgvector cosine distance."""
+    query_embedding = await generate_embedding(q)
+    if not query_embedding:
+        return []
+
+    embedding_str = "[" + ",".join(str(x) for x in query_embedding) + "]"
+
+    filters = ["i.user_id = :user_id", "i.processing_status = 'ready'", "i.embedding IS NOT NULL"]
+    params = {"user_id": user_id, "limit": limit}
+
+    if folder:
+        filters.append("i.folder = :folder")
+        params["folder"] = folder
+    if item_type:
+        filters.append("i.type = :item_type")
+        params["item_type"] = item_type
+
+    where = " AND ".join(filters)
+
+    sql = text(f"""
+        SELECT i.id, i.embedding <=> '{embedding_str}'::vector AS distance
+        FROM items i
+        WHERE {where}
+        ORDER BY distance ASC
+        LIMIT :limit
+    """)
+
+    result = await db.execute(sql, params)
+    rows = result.fetchall()
+    item_ids = [row[0] for row in rows]
+
+    if not item_ids:
+        return []
+
+    items_result = await db.execute(
+        select(Item).options(selectinload(Item.assets))
+        .where(Item.id.in_(item_ids))
+    )
+    items_map = {i.id: i for i in items_result.scalars().all()}
+    return [items_map[id] for id in item_ids if id in items_map]
+
+
+# ── Hybrid search ──
+
+async def hybrid_search(
+    db: AsyncSession,
+    user_id: str,
+    q: str,
+    folder: str | None = None,
+    tags: list[str] | None = None,
+    item_type: str | None = None,
+    limit: int = 20,
+) -> list:
+    """Merge keyword + semantic results using reciprocal rank fusion."""
+    # Keyword results
+    kw_ids, _ = await keyword_search(user_id, q, folder, tags, item_type, limit=limit * 2)
+    # Semantic results
+    sem_items = await vector_search(db, user_id, q, folder, item_type, limit=limit * 2)
+    sem_ids = [i.id for i in sem_items]
+
+    # Reciprocal rank fusion
+    scores: dict[str, float] = {}
+    k = 60  # RRF constant
+    for rank, id in enumerate(kw_ids):
+        scores[id] = scores.get(id, 0) + 1.0 / (k + rank)
+    for rank, id in enumerate(sem_ids):
+        scores[id] = scores.get(id, 0) + 1.0 / (k + rank)
+
+    # Sort by combined score
+    merged_ids = sorted(scores.keys(), key=lambda x: scores[x], reverse=True)[:limit]
+
+    if not merged_ids:
+        return []
+
+    result = await db.execute(
+        select(Item).options(selectinload(Item.assets))
+        .where(Item.id.in_(merged_ids))
+    )
+    items_map = {i.id: i for i in result.scalars().all()}
+    return [items_map[id] for id in merged_ids if id in items_map]
diff --git a/services/brain/app/services/__init__.py b/services/brain/app/services/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/services/brain/app/services/classify.py b/services/brain/app/services/classify.py
new file mode 100644
index 0000000..3e2a76e
--- /dev/null
+++ b/services/brain/app/services/classify.py
@@ -0,0 +1,125 @@
+"""OpenAI classification — structured output for folder/tags/title/summary."""
+
+import json
+import logging
+
+import httpx
+
+from app.config import OPENAI_API_KEY, OPENAI_MODEL, FOLDERS, TAGS
+
+log = logging.getLogger(__name__)
+
+SYSTEM_PROMPT = f"""You are a classification engine for a personal "second brain" knowledge management system.
+
+Given an item (URL, note, document, or file), you must return structured JSON with:
+- folder: exactly 1 from this list: {json.dumps(FOLDERS)}
+- tags: exactly 2 or 3 from this list: {json.dumps(TAGS)}
+- title: a concise, normalized title (max 80 chars)
+- summary: a 1-2 sentence summary of the content
+- confidence: a float 0.0-1.0 indicating how confident you are
+
+Rules:
+- NEVER invent folders or tags not in the lists above
+- NEVER skip classification
+- NEVER return freeform text outside the schema
+- Always return valid JSON matching the schema exactly"""
+
+RESPONSE_SCHEMA = {
+    "type": "json_schema",
+    "json_schema": {
+        "name": "classification",
+        "strict": True,
+        "schema": {
+            "type": "object",
+            "properties": {
+                "folder": {"type": "string", "enum": FOLDERS},
+                "tags": {
+                    "type": "array",
+                    "items": {"type": "string", "enum": TAGS},
+                    "minItems": 2,
+                    "maxItems": 3,
+                },
+                "title": {"type": "string"},
+                "summary": {"type": "string"},
+                "confidence": {"type": "number"},
+            },
+            "required": ["folder", "tags", "title", "summary", "confidence"],
+            "additionalProperties": False,
+        },
+    },
+}
+
+
+def build_user_prompt(item_type: str, url: str | None, title: str | None, text: str | None) -> str:
+    parts = [f"Item type: {item_type}"]
+    if url:
+        parts.append(f"URL: {url}")
+    if title:
+        parts.append(f"Original title: {title}")
+    if text:
+        # Truncate to ~4000 chars for context window efficiency
+        truncated = text[:4000]
+        parts.append(f"Content:\n{truncated}")
+    return "\n\n".join(parts)
+
+
+async def classify_item(
+    item_type: str,
+    url: str | None = None,
+    title: str | None = None,
+    text: str | None = None,
+    retries: int = 2,
+) -> dict:
+    """Call OpenAI to classify an item. Returns dict with folder, tags, title, summary, confidence."""
+    if not OPENAI_API_KEY:
+        log.warning("No OPENAI_API_KEY set, returning defaults")
+        return {
+            "folder": "Knowledge",
+            "tags": ["reference", "read-later"],
+            "title": title or "Untitled",
+            "summary": "No AI classification available",
+            "confidence": 0.0,
+        }
+
+    user_msg = build_user_prompt(item_type, url, title, text)
+
+    for attempt in range(retries + 1):
+        try:
+            async with httpx.AsyncClient(timeout=30) as client:
+                resp = await client.post(
+                    "https://api.openai.com/v1/chat/completions",
+                    headers={"Authorization": f"Bearer {OPENAI_API_KEY}"},
+                    json={
+                        "model": OPENAI_MODEL,
+                        "messages": [
+                            {"role": "system", "content": SYSTEM_PROMPT},
+                            {"role": "user", "content": user_msg},
+                        ],
+                        "response_format": RESPONSE_SCHEMA,
+                        "temperature": 0.2,
+                    },
+                )
+                resp.raise_for_status()
+                data = resp.json()
+                content = data["choices"][0]["message"]["content"]
+                result = json.loads(content)
+
+                # Validate folder and tags are in allowed sets
+                if result["folder"] not in FOLDERS:
+                    result["folder"] = "Knowledge"
+                result["tags"] = [t for t in result["tags"] if t in TAGS][:3]
+                if len(result["tags"]) < 2:
+                    result["tags"] = (result["tags"] + ["reference", "read-later"])[:3]
+
+                return result
+
+        except Exception as e:
+            log.error(f"Classification attempt {attempt + 1} failed: {e}")
+            if attempt == retries:
+                return {
+                    "folder": "Knowledge",
+                    "tags": ["reference", "read-later"],
+                    "title": title or "Untitled",
+                    "summary": f"Classification failed: {e}",
+                    "confidence": 0.0,
+                }
diff --git a/services/brain/app/services/embed.py b/services/brain/app/services/embed.py
new file mode 100644
index 0000000..1e309df
--- /dev/null
+++ b/services/brain/app/services/embed.py
@@ -0,0 +1,36 @@
+"""Embedding generation via OpenAI text-embedding API."""
+
+import logging
+
+import httpx
+
+from app.config import OPENAI_API_KEY, OPENAI_EMBED_MODEL, OPENAI_EMBED_DIM
+
+log = logging.getLogger(__name__)
+
+
+async def generate_embedding(text: str) -> list[float] | None:
+    """Generate a vector embedding for the given text. Returns list of floats or None on failure."""
+    if not OPENAI_API_KEY or not text.strip():
+        return None
+
+    # Truncate to ~8000 chars for embedding model token limit
+    truncated = text[:8000]
+
+    try:
+        async with httpx.AsyncClient(timeout=20) as client:
+            resp = await client.post(
+                "https://api.openai.com/v1/embeddings",
+                headers={"Authorization": f"Bearer {OPENAI_API_KEY}"},
+                json={
+                    "model": OPENAI_EMBED_MODEL,
+                    "input": truncated,
+                    "dimensions": OPENAI_EMBED_DIM,
+                },
+            )
+            resp.raise_for_status()
+            data = resp.json()
+            return data["data"][0]["embedding"]
+    except Exception as e:
+        log.error(f"Embedding generation failed: {e}")
+        return None
diff --git a/services/brain/app/services/ingest.py b/services/brain/app/services/ingest.py
new file mode 100644
index 0000000..583fbf4
--- /dev/null
+++ b/services/brain/app/services/ingest.py
@@ -0,0 +1,164 @@
+"""Content ingestion — fetch, extract, screenshot, archive."""
+
+import logging
+import re
+import uuid
+from html.parser import HTMLParser
+from io import StringIO
+from urllib.parse import urlparse
+
+import httpx
+
+from app.config import BROWSERLESS_URL
+from app.services.storage import storage
+
+log = logging.getLogger(__name__)
+
+
+class _HTMLTextExtractor(HTMLParser):
+    """Simple HTML to text converter."""
+    def __init__(self):
+        super().__init__()
+        self._result = StringIO()
+        self._skip = False
+        self._skip_tags = {"script", "style", "noscript", "svg"}
+
+    def handle_starttag(self, tag, attrs):
+        if tag in self._skip_tags:
+            self._skip = True
+
+    def handle_endtag(self, tag):
+        if tag in self._skip_tags:
+            self._skip = False
+        if tag in ("p", "div", "br", "h1", "h2", "h3", "h4", "li", "tr"):
+            self._result.write("\n")
+
+    def handle_data(self, data):
+        if not self._skip:
+            self._result.write(data)
+
+    def get_text(self) -> str:
+        raw = self._result.getvalue()
+        # Collapse whitespace
+        lines = [line.strip() for line in raw.splitlines()]
+        return "\n".join(line for line in lines if line)
+
+
+def html_to_text(html: str) -> str:
+    extractor = _HTMLTextExtractor()
+    extractor.feed(html)
+    return extractor.get_text()
+
+
+def extract_title_from_html(html: str) -> str | None:
+    match = re.search(r"<title[^>]*>(.*?)</title>", html, re.IGNORECASE | re.DOTALL)
+    return match.group(1).strip() if match else None
+
+
+def extract_meta_description(html: str) -> str | None:
+    match = re.search(
+        r'<meta[^>]*name=["\']description["\'][^>]*content=["\'](.*?)["\']',
+        html, re.IGNORECASE | re.DOTALL,
+    )
+    return match.group(1).strip() if match else None
+
+
+async def fetch_url_content(url: str) -> dict:
+    """Fetch URL content. Returns dict with html, text, title, description, used_browserless."""
+    result = {"html": None, "text": None, "title": None, "description": None, "used_browserless": False}
+
+    # Try HTTP-first extraction
+    try:
+        async with httpx.AsyncClient(timeout=15, follow_redirects=True) as client:
+            resp = await client.get(url, headers={
+                "User-Agent": "Mozilla/5.0 (compatible; SecondBrain/1.0)"
+            })
+            resp.raise_for_status()
+            html = resp.text
+            result["html"] = html
+            result["text"] = html_to_text(html)
+            result["title"] = extract_title_from_html(html)
+            result["description"] = extract_meta_description(html)
+
+            # If extraction is weak (< 200 chars of text), try browserless
+            if len(result["text"] or "") < 200:
+                log.info(f"Weak extraction ({len(result['text'] or '')} chars), trying browserless")
+                br = await fetch_with_browserless(url)
+                if br and len(br.get("text", "")) > len(result["text"] or ""):
+                    result.update(br)
+                    result["used_browserless"] = True
+
+    except Exception as e:
+        log.warning(f"HTTP fetch failed for {url}: {e}, trying browserless")
+        try:
+            br = await fetch_with_browserless(url)
+            if br:
+                result.update(br)
+                result["used_browserless"] = True
+        except Exception as e2:
+            log.error(f"Browserless also failed for {url}: {e2}")
+
+    return result
+
+
+async def fetch_with_browserless(url: str) -> dict | None:
+    """Use browserless/chrome to render JS-heavy pages."""
+    try:
+        async with httpx.AsyncClient(timeout=30) as client:
+            resp = await client.post(
+                f"{BROWSERLESS_URL}/content",
+                json={"url": url, "waitForTimeout": 3000},
+            )
+            if resp.status_code == 200:
+                html = resp.text
+                return {
+                    "html": html,
+                    "text": html_to_text(html),
+                    "title": extract_title_from_html(html),
+                    "description": extract_meta_description(html),
+                }
+    except Exception as e:
+        log.error(f"Browserless fetch failed: {e}")
+    return None
+
+
+async def take_screenshot(url: str, item_id: str) -> str | None:
+    """Take a screenshot of a URL using browserless. Returns storage path or None."""
+    try:
+        async with httpx.AsyncClient(timeout=30) as client:
+            resp = await client.post(
+                f"{BROWSERLESS_URL}/screenshot",
+                json={
+                    "url": url,
+                    "options": {"type": "png", "fullPage": False},
+                    "waitForTimeout": 3000,
+                },
+            )
+            if resp.status_code == 200:
+                path = storage.save(
+                    item_id=item_id,
+                    asset_type="screenshot",
+                    filename="screenshot.png",
+                    data=resp.content,
+                )
+                return path
+    except Exception as e:
+        log.error(f"Screenshot failed for {url}: {e}")
+    return None
+
+
+async def archive_html(html: str, item_id: str) -> str | None:
+    """Save the full HTML as an archived asset."""
+    if not html:
+        return None
+    try:
+        path = storage.save(
+            item_id=item_id,
+            asset_type="archived_html",
+            filename="page.html",
+            data=html.encode("utf-8"),
+        )
+        return path
+    except Exception as e:
+        log.error(f"HTML archive failed: {e}")
+    return None
diff --git a/services/brain/app/services/storage.py b/services/brain/app/services/storage.py
new file mode 100644
index 0000000..8337c91
--- /dev/null
+++ b/services/brain/app/services/storage.py
@@ -0,0 +1,81 @@
+"""File storage abstraction — local disk first, S3-ready interface."""
+
+import os
+import shutil
+from abc import ABC, abstractmethod
+from pathlib import Path
+
+from app.config import STORAGE_BACKEND, STORAGE_LOCAL_PATH
+
+
+class StorageBackend(ABC):
+    @abstractmethod
+    def save(self, item_id: str, asset_type: str, filename: str, data: bytes) -> str:
+        """Save file, return relative storage path."""
+        ...
+
+    @abstractmethod
+    def read(self, path: str) -> bytes:
+        ...
+
+    @abstractmethod
+    def delete(self, path: str) -> None:
+        ...
+
+    @abstractmethod
+    def exists(self, path: str) -> bool:
+        ...
+
+    @abstractmethod
+    def url(self, path: str) -> str:
+        """Return a URL or local path for serving."""
+        ...
+
+
+class LocalStorage(StorageBackend):
+    def __init__(self, base_path: str):
+        self.base = Path(base_path)
+        self.base.mkdir(parents=True, exist_ok=True)
+
+    def _full_path(self, path: str) -> Path:
+        return self.base / path
+
+    def save(self, item_id: str, asset_type: str, filename: str, data: bytes) -> str:
+        rel = f"{item_id}/{asset_type}/{filename}"
+        full = self._full_path(rel)
+        full.parent.mkdir(parents=True, exist_ok=True)
+        full.write_bytes(data)
+        return rel
+
+    def read(self, path: str) -> bytes:
+        return self._full_path(path).read_bytes()
+
+    def delete(self, path: str) -> None:
+        full = self._full_path(path)
+        if full.exists():
+            full.unlink()
+        # Clean empty parent dirs
+        parent = full.parent
+        while parent != self.base:
+            try:
+                parent.rmdir()
+                parent = parent.parent
+            except OSError:
+                break
+
+    def exists(self, path: str) -> bool:
+        return self._full_path(path).exists()
+
+    def url(self, path: str) -> str:
+        return f"/storage/{path}"
+
+
+# Future: S3Storage class implementing the same interface
+
+def _create_storage() -> StorageBackend:
+    if STORAGE_BACKEND == "local":
+        return LocalStorage(STORAGE_LOCAL_PATH)
+    raise ValueError(f"Unknown storage backend: {STORAGE_BACKEND}")
+
+
+storage = _create_storage()
diff --git a/services/brain/app/worker/__init__.py b/services/brain/app/worker/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/services/brain/app/worker/tasks.py b/services/brain/app/worker/tasks.py
new file mode 100644
index 0000000..ca56acd
--- /dev/null
+++ b/services/brain/app/worker/tasks.py
@@ -0,0 +1,156 @@
+"""Background worker tasks — processes items after creation."""
+
+import asyncio
+import logging
+import uuid
+from datetime import datetime
+
+from redis import Redis
+from rq import Queue
+from sqlalchemy import select
+from sqlalchemy.orm import selectinload
+
+from app.config import REDIS_URL, DATABASE_URL_SYNC
+from app.models.item import Item, ItemAsset
+
+log = logging.getLogger(__name__)
+
+# RQ queue
+_redis = Redis.from_url(REDIS_URL)
+queue = Queue("brain", connection=_redis)
+
+
+def enqueue_process_item(item_id: str):
+    """Enqueue a background job to process an item."""
+    queue.enqueue(process_item_job, item_id, job_timeout=300)
+
+
+def process_item_job(item_id: str):
+    """Synchronous entry point for RQ — runs the async pipeline."""
+    asyncio.run(_process_item(item_id))
+
+
+async def _process_item(item_id: str):
+    """Full processing pipeline for a saved item."""
+    from sqlalchemy.ext.asyncio import AsyncSession, create_async_engine, async_sessionmaker
+    from app.config import DATABASE_URL
+    from app.services.ingest import fetch_url_content, take_screenshot, archive_html
+    from app.services.classify import classify_item
+    from app.services.embed import generate_embedding
+    from app.search.engine import index_item, ensure_meili_index
+
+    engine = create_async_engine(DATABASE_URL, echo=False)
+    Session = async_sessionmaker(engine, class_=AsyncSession, expire_on_commit=False)
+
+    async with Session() as db:
+        # Load item
+        result = await db.execute(
+            select(Item).options(selectinload(Item.assets)).where(Item.id == item_id)
+        )
+        item = result.scalar_one_or_none()
+        if not item:
+            log.error(f"Item {item_id} not found")
+            return
+
+        try:
+            item.processing_status = "processing"
+            await db.commit()
+
+            extracted_text = item.raw_content or ""
+            title = item.title
+            html_content = None
+
+            # ── Step 1: Fetch content for URLs ──
+            if item.type == "link" and item.url:
+                log.info(f"Fetching URL: {item.url}")
+                content = await fetch_url_content(item.url)
+                html_content = content.get("html")
+                extracted_text = content.get("text") or extracted_text
+                if not title:
+                    title = content.get("title")
+                item.metadata_json = item.metadata_json or {}
+                item.metadata_json["description"] = content.get("description")
+                item.metadata_json["used_browserless"] = content.get("used_browserless", False)
+
+                # Take screenshot
+                screenshot_path = await take_screenshot(item.url, item.id)
+                if screenshot_path:
+                    asset = ItemAsset(
+                        id=str(uuid.uuid4()),
+                        item_id=item.id,
+                        asset_type="screenshot",
+                        filename="screenshot.png",
+                        content_type="image/png",
+                        storage_path=screenshot_path,
+                    )
+                    db.add(asset)
+
+                # Archive HTML
+                if html_content:
+                    html_path = await archive_html(html_content, item.id)
+                    if html_path:
+                        asset = ItemAsset(
+                            id=str(uuid.uuid4()),
+                            item_id=item.id,
+                            asset_type="archived_html",
+                            filename="page.html",
+                            content_type="text/html",
+                            storage_path=html_path,
+                        )
+                        db.add(asset)
+
+            # ── Step 2: AI classification ──
+            log.info(f"Classifying item {item.id}")
+            classification = await classify_item(
+                item_type=item.type,
+                url=item.url,
+                title=title,
+                text=extracted_text,
+            )
+
+            item.title = classification.get("title") or title or "Untitled"
+            item.folder = classification.get("folder", "Knowledge")
+            item.tags = classification.get("tags", ["reference", "read-later"])
+            item.summary = classification.get("summary")
+            item.confidence = classification.get("confidence", 0.0)
+            item.extracted_text = extracted_text
+
+            # ── Step 3: Generate embedding ──
+            log.info(f"Generating embedding for item {item.id}")
+            embed_text = f"{item.title or ''}\n{item.summary or ''}\n{extracted_text}"
+            embedding = await generate_embedding(embed_text)
+            if embedding:
+                item.embedding = embedding
+
+            # ── Step 4: Update status ──
+            item.processing_status = "ready"
+            item.updated_at = datetime.utcnow()
+            await db.commit()
+
+            # ── Step 5: Index in Meilisearch ──
+            log.info(f"Indexing item {item.id} in Meilisearch")
+            await ensure_meili_index()
+            await index_item({
+                "id": item.id,
+                "user_id": item.user_id,
+                "type": item.type,
+                "title": item.title,
+                "url": item.url,
+                "folder": item.folder,
+                "tags": item.tags or [],
+                "summary": item.summary,
+                "extracted_text": (extracted_text or "")[:10000],  # Truncate for search index
+                "processing_status": item.processing_status,
+                "created_at": item.created_at.isoformat() if item.created_at else None,
+            })
+
+            log.info(f"Item {item.id} processed successfully")
+
+        except Exception as e:
+            log.error(f"Processing failed for item {item.id}: {e}", exc_info=True)
+            item.processing_status = "failed"
+            item.processing_error = str(e)[:500]
+            item.updated_at = datetime.utcnow()
+            await db.commit()
+
+    await engine.dispose()
diff --git a/services/brain/docker-compose.yml b/services/brain/docker-compose.yml
new file mode 100644
index 0000000..056d86d
--- /dev/null
+++ b/services/brain/docker-compose.yml
@@ -0,0 +1,104 @@
+services:
+  # ── API ──
+  brain-api:
+    build:
+      context: .
+      dockerfile: Dockerfile.api
+    container_name: brain-api
+    restart: unless-stopped
+    volumes:
+      - ./storage:/app/storage
+    environment:
+      - DATABASE_URL=postgresql+asyncpg://brain:brain@brain-db:5432/brain
+      - REDIS_URL=redis://brain-redis:6379/0
+      - MEILI_URL=http://brain-meili:7700
+      - MEILI_MASTER_KEY=${MEILI_MASTER_KEY:-brain-meili-key}
+      - BROWSERLESS_URL=http://brain-browserless:3000
+      - OPENAI_API_KEY=${OPENAI_API_KEY}
+      - OPENAI_MODEL=${OPENAI_MODEL:-gpt-4o-mini}
+      - PORT=8200
+      - DEBUG=${DEBUG:-0}
+      - TZ=${TZ:-America/Chicago}
+    depends_on:
+      brain-db:
+        condition: service_healthy
+      brain-redis:
+        condition: service_started
+      brain-meili:
+        condition: service_started
+    networks:
+      - default
+      - pangolin
+
+  # ── Worker ──
+  brain-worker:
+    build:
+      context: .
+      dockerfile: Dockerfile.worker
+    container_name: brain-worker
+    restart: unless-stopped
+    volumes:
+      - ./storage:/app/storage
+    environment:
+      - DATABASE_URL=postgresql+asyncpg://brain:brain@brain-db:5432/brain
+      - REDIS_URL=redis://brain-redis:6379/0
+      - MEILI_URL=http://brain-meili:7700
+      - MEILI_MASTER_KEY=${MEILI_MASTER_KEY:-brain-meili-key}
+      - BROWSERLESS_URL=http://brain-browserless:3000
+      - OPENAI_API_KEY=${OPENAI_API_KEY}
+      - OPENAI_MODEL=${OPENAI_MODEL:-gpt-4o-mini}
+      - TZ=${TZ:-America/Chicago}
+    depends_on:
+      brain-db:
+        condition: service_healthy
+      brain-redis:
+        condition: service_started
+
+  # ── PostgreSQL + pgvector ──
+  brain-db:
+    image: pgvector/pgvector:pg16
+    container_name: brain-db
+    restart: unless-stopped
+    environment:
+      - POSTGRES_USER=brain
+      - POSTGRES_PASSWORD=brain
+      - POSTGRES_DB=brain
+    volumes:
+      - ./data/postgres:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U brain"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+
+  # ── Redis ──
+  brain-redis:
+    image: redis:7-alpine
+    container_name: brain-redis
+    restart: unless-stopped
+    volumes:
+      - ./data/redis:/data
+
+  # ── Meilisearch ──
+  brain-meili:
+    image: getmeili/meilisearch:v1.12
+    container_name: brain-meili
+    restart: unless-stopped
+    environment:
+      - MEILI_MASTER_KEY=${MEILI_MASTER_KEY:-brain-meili-key}
+      - MEILI_ENV=production
+    volumes:
+      - ./data/meili:/meili_data
+
+  # ── Browserless (headless Chrome for JS rendering + screenshots) ──
+  brain-browserless:
+    image: ghcr.io/browserless/chromium:latest
+    container_name: brain-browserless
+    restart: unless-stopped
+    environment:
+      - MAX_CONCURRENT_SESSIONS=3
+      - TIMEOUT=30000
+
+networks:
+  pangolin:
+    external: true
diff --git a/services/brain/migrations/001_init.sql b/services/brain/migrations/001_init.sql
new file mode 100644
index 0000000..4b4df26
--- /dev/null
+++ b/services/brain/migrations/001_init.sql
@@ -0,0 +1,56 @@
+-- Brain service schema — PostgreSQL + pgvector
+-- This is a reference migration. Tables are auto-created by SQLAlchemy on startup.
+
+CREATE EXTENSION IF NOT EXISTS vector;
+
+CREATE TABLE IF NOT EXISTS items (
+    id UUID PRIMARY KEY,
+    user_id VARCHAR(64) NOT NULL,
+    type VARCHAR(32) NOT NULL DEFAULT 'link',
+    title TEXT,
+    url TEXT,
+    raw_content TEXT,
+    extracted_text TEXT,
+    folder VARCHAR(64),
+    tags TEXT[],
+    summary TEXT,
+    confidence FLOAT,
+    metadata_json JSONB DEFAULT '{}',
+    processing_status VARCHAR(32) NOT NULL DEFAULT 'pending',
+    processing_error TEXT,
+    embedding vector(1536),
+    created_at TIMESTAMP NOT NULL DEFAULT NOW(),
+    updated_at TIMESTAMP NOT NULL DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS ix_items_user_status ON items(user_id, processing_status);
+CREATE INDEX IF NOT EXISTS ix_items_user_folder ON items(user_id, folder);
+CREATE INDEX IF NOT EXISTS ix_items_created ON items(created_at);
+
+-- HNSW index for fast approximate nearest neighbor search
+CREATE INDEX IF NOT EXISTS ix_items_embedding ON items
+    USING hnsw (embedding vector_cosine_ops)
+    WITH (m = 16, ef_construction = 64);
+
+CREATE TABLE IF NOT EXISTS item_assets (
+    id UUID PRIMARY KEY,
+    item_id UUID NOT NULL REFERENCES items(id) ON DELETE CASCADE,
+    asset_type VARCHAR(32) NOT NULL,
+    filename VARCHAR(512) NOT NULL,
+    content_type VARCHAR(128),
+    size_bytes INTEGER,
+    storage_path VARCHAR(1024) NOT NULL,
+    created_at TIMESTAMP NOT NULL DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS ix_item_assets_item ON item_assets(item_id);
+
+CREATE TABLE IF NOT EXISTS app_links (
+    id UUID PRIMARY KEY,
+    item_id UUID NOT NULL REFERENCES items(id) ON DELETE CASCADE,
+    app VARCHAR(64) NOT NULL,
+    app_entity_id VARCHAR(128) NOT NULL,
+    created_at TIMESTAMP NOT NULL DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS ix_app_links_item ON app_links(item_id);
diff --git a/services/brain/requirements.txt b/services/brain/requirements.txt
new file mode 100644
index 0000000..fbf499b
--- /dev/null
+++ b/services/brain/requirements.txt
@@ -0,0 +1,11 @@
+fastapi==0.115.6
+uvicorn[standard]==0.34.0
+sqlalchemy[asyncio]==2.0.36
+asyncpg==0.30.0
+pgvector==0.3.6
+psycopg2-binary==2.9.10
+redis==5.2.1
+rq==2.1.0
+httpx==0.28.1
+pydantic==2.10.4
+python-multipart==0.0.20
diff --git a/services/fitness/frontend-legacy/src/lib/api/types.ts b/services/fitness/frontend-legacy/src/lib/api/types.ts
index 02cbea6..75ff8a9 100644
--- a/services/fitness/frontend-legacy/src/lib/api/types.ts
+++ b/services/fitness/frontend-legacy/src/lib/api/types.ts
@@ -15,6 +15,8 @@ export interface Food {
 	protein_per_base: number;
 	carbs_per_base: number;
 	fat_per_base: number;
+	sugar_per_base: number;
+	fiber_per_base: number;
 	status: string;
 	image_path?: string;
 	servings: FoodServing[];
@@ -55,6 +57,8 @@ export interface FoodEntry {
 	snapshot_protein: number;
 	snapshot_carbs: number;
 	snapshot_fat: number;
+	snapshot_sugar: number;
+	snapshot_fiber: number;
 	source: string;
 	entry_method: string;
 	raw_text?: string;
@@ -69,6 +73,8 @@ export interface DailyTotals {
 	total_protein: number;
 	total_carbs: number;
 	total_fat: number;
+	total_sugar: number;
+	total_fiber: number;
 	entry_count: number;
 }
 
@@ -81,6 +87,8 @@ export interface Goal {
 	protein: number;
 	carbs: number;
 	fat: number;
+	sugar: number;
+	fiber: number;
 	is_active: number;
 }
 
@@ -103,6 +111,8 @@ export interface MealTemplateItem {
 	snapshot_protein: number;
 	snapshot_carbs: number;
 	snapshot_fat: number;
+	snapshot_sugar: number;
+	snapshot_fiber: number;
 }
 
 export interface QueueItem {
@@ -126,6 +136,8 @@ export interface ExternalFood {
 	protein_per_100g: number;
 	carbs_per_100g: number;
 	fat_per_100g: number;
+	sugar_per_100g: number;
+	fiber_per_100g: number;
 	serving_size_text?: string;
 	serving_grams?: number;
 	source: string;
diff --git a/services/fitness/server.py b/services/fitness/server.py
index 94ba11f..25dedf1 100644
--- a/services/fitness/server.py
+++ b/services/fitness/server.py
@@ -147,6 +147,8 @@ def init_db():
             protein_per_base REAL NOT NULL DEFAULT 0,
             carbs_per_base REAL NOT NULL DEFAULT 0,
             fat_per_base REAL NOT NULL DEFAULT 0,
+            sugar_per_base REAL NOT NULL DEFAULT 0,
+            fiber_per_base REAL NOT NULL DEFAULT 0,
             -- Base unit: "100g" for weight-based foods, or "piece"/"slice"/"serving" etc for countable
             base_unit TEXT NOT NULL DEFAULT '100g',
             -- Status: confirmed, ai_created, needs_review, archived
@@ -212,6 +214,8 @@ def init_db():
             snapshot_protein REAL NOT NULL DEFAULT 0,
             snapshot_carbs REAL NOT NULL DEFAULT 0,
             snapshot_fat REAL NOT NULL DEFAULT 0,
+            snapshot_sugar REAL NOT NULL DEFAULT 0,
+            snapshot_fiber REAL NOT NULL DEFAULT 0,
             -- Source & method
             source TEXT NOT NULL DEFAULT 'web',      -- where: web, telegram, api
             entry_method TEXT NOT NULL DEFAULT 'manual', -- how: manual, search, template, ai_plate, ai_label, quick_add
@@ -240,6 +244,8 @@ def init_db():
             protein REAL NOT NULL DEFAULT 150,
             carbs REAL NOT NULL DEFAULT 200,
             fat REAL NOT NULL DEFAULT 65,
+            sugar REAL NOT NULL DEFAULT 0,
+            fiber REAL NOT NULL DEFAULT 0,
             is_active INTEGER NOT NULL DEFAULT 1,
             created_at TEXT DEFAULT CURRENT_TIMESTAMP,
             FOREIGN KEY (user_id) REFERENCES users(id)
@@ -275,6 +281,8 @@ def init_db():
             snapshot_protein REAL NOT NULL DEFAULT 0,
             snapshot_carbs REAL NOT NULL DEFAULT 0,
             snapshot_fat REAL NOT NULL DEFAULT 0,
+            snapshot_sugar REAL NOT NULL DEFAULT 0,
+            snapshot_fiber REAL NOT NULL DEFAULT 0,
             created_at TEXT DEFAULT CURRENT_TIMESTAMP,
             FOREIGN KEY (template_id) REFERENCES meal_templates(id) ON DELETE CASCADE,
             FOREIGN KEY (food_id) REFERENCES foods(id)
@@ -415,6 +423,22 @@ def init_db():
     except:
         pass
 
+    for table, column, coltype in [
+        ('foods', 'sugar_per_base', 'REAL NOT NULL DEFAULT 0'),
+        ('foods', 'fiber_per_base', 'REAL NOT NULL DEFAULT 0'),
+        ('food_entries', 'snapshot_sugar', 'REAL NOT NULL DEFAULT 0'),
+        ('food_entries', 'snapshot_fiber', 'REAL NOT NULL DEFAULT 0'),
+        ('meal_template_items', 'snapshot_sugar', 'REAL NOT NULL DEFAULT 0'),
+        ('meal_template_items', 'snapshot_fiber', 'REAL NOT NULL DEFAULT 0'),
+        ('goals', 'sugar', 'REAL NOT NULL DEFAULT 0'),
+        ('goals', 'fiber', 'REAL NOT NULL DEFAULT 0')
+    ]:
+        try:
+            cursor.execute(f"ALTER TABLE {table} ADD COLUMN {column} {coltype}")
+            conn.commit()
+        except:
+            pass
+
     conn.commit()
     conn.close()
 
@@ -691,6 +715,8 @@ def search_foods(query: str, user_id: str = None, limit: int = 20) -> list:
             'protein_per_base': food.get('protein_per_base', 0),
             'carbs_per_base': food.get('carbs_per_base', 0),
             'fat_per_base': food.get('fat_per_base', 0),
+            'sugar_per_base': food.get('sugar_per_base', 0),
+            'fiber_per_base': food.get('fiber_per_base', 0),
             'status': food.get('status', 'confirmed'),
             'image_path': food.get('image_path'),
             'servings': servings,
@@ -759,6 +785,8 @@ def search_openfoodfacts(query: str, limit: int = 5) -> list:
             'protein_per_100g': round(float(nuts.get('proteins_100g', 0) or 0), 1),
             'carbs_per_100g': round(float(nuts.get('carbohydrates_100g', 0) or 0), 1),
             'fat_per_100g': round(float(nuts.get('fat_100g', 0) or 0), 1),
+            'sugar_per_100g': round(float(nuts.get('sugars_100g', 0) or 0), 1),
+            'fiber_per_100g': round(float(nuts.get('fiber_100g', 0) or 0), 1),
             'serving_size_text': p.get('serving_size'),
             'serving_grams': p.get('serving_quantity'),
             'source': 'openfoodfacts',
@@ -791,6 +819,8 @@ def lookup_openfoodfacts_barcode(barcode: str) -> dict | None:
         'protein_per_100g': round(float(nuts.get('proteins_100g', 0) or 0), 1),
         'carbs_per_100g': round(float(nuts.get('carbohydrates_100g', 0) or 0), 1),
         'fat_per_100g': round(float(nuts.get('fat_100g', 0) or 0), 1),
+        'sugar_per_100g': round(float(nuts.get('sugars_100g', 0) or 0), 1),
+        'fiber_per_100g': round(float(nuts.get('fiber_100g', 0) or 0), 1),
         'serving_size_text': p.get('serving_size'),
         'serving_grams': p.get('serving_quantity'),
         'source': 'openfoodfacts',
@@ -834,6 +864,8 @@ def search_usda(query: str, limit: int = 5) -> list:
         protein = nutrient_by_name.get('Protein', 0) or 0
         carbs = nutrient_by_name.get('Carbohydrate, by difference', 0) or 0
         fat = nutrient_by_name.get('Total lipid (fat)', 0) or 0
+        sugar = nutrient_by_name.get('Sugars, total including NLEA', 0) or nutrient_by_name.get('Sugars, total', 0) or 0
+        fiber = nutrient_by_name.get('Fiber, total dietary', 0) or 0
 
         name = food.get('description', '').strip()
         if not name or (not cal and not protein):
@@ -850,6 +882,8 @@ def search_usda(query: str, limit: int = 5) -> list:
             'protein_per_100g': round(float(protein), 1),
             'carbs_per_100g': round(float(carbs), 1),
             'fat_per_100g': round(float(fat), 1),
+            'sugar_per_100g': round(float(sugar), 1),
+            'fiber_per_100g': round(float(fiber), 1),
             'serving_size_text': None,
             'serving_grams': None,
             'source': 'usda',
@@ -910,6 +944,8 @@ def import_external_food(external_result: dict, user_id: str) -> dict:
         'protein_per_base': external_result['protein_per_100g'],
         'carbs_per_base': external_result['carbs_per_100g'],
         'fat_per_base': external_result['fat_per_100g'],
+        'sugar_per_base': external_result.get('sugar_per_100g', 0),
+        'fiber_per_base': external_result.get('fiber_per_100g', 0),
         'base_unit': '100g',
         'status': 'confirmed',
         'notes': f"Imported from {external_result.get('source', 'external')}",
@@ -1158,10 +1194,14 @@ Return a JSON object with these fields:
 - protein: Total grams of protein for the entire quantity
 - carbs: Total grams of carbohydrates for the entire quantity
 - fat: Total grams of fat for the entire quantity
+- sugar: Total grams of sugar for the entire quantity
+- fiber: Total grams of fiber for the entire quantity
 - per_serving_calories: Calories for ONE serving/piece
 - per_serving_protein: Protein for ONE serving/piece
 - per_serving_carbs: Carbs for ONE serving/piece
 - per_serving_fat: Fat for ONE serving/piece
+- per_serving_sugar: Sugar for ONE serving/piece
+- per_serving_fiber: Fiber for ONE serving/piece
 - base_unit: What one unit is — "piece", "scoop", "serving", "slice", etc.
 - serving_description: Human-readable serving label, e.g. "1 taco", "1 scoop", "1 small pie"
 - estimated_grams: Approximate grams per serving
@@ -1213,10 +1253,14 @@ IMPORTANT:
             'protein': float(result.get('protein', 0)),
             'carbs': float(result.get('carbs', 0)),
             'fat': float(result.get('fat', 0)),
+            'sugar': float(result.get('sugar', 0)),
+            'fiber': float(result.get('fiber', 0)),
             'calories_per_base': float(result.get('per_serving_calories', result.get('calories', 0))),
             'protein_per_base': float(result.get('per_serving_protein', result.get('protein', 0))),
             'carbs_per_base': float(result.get('per_serving_carbs', result.get('carbs', 0))),
             'fat_per_base': float(result.get('per_serving_fat', result.get('fat', 0))),
+            'sugar_per_base': float(result.get('per_serving_sugar', result.get('sugar', 0))),
+            'fiber_per_base': float(result.get('per_serving_fiber', result.get('fiber', 0))),
             'base_unit': str(result.get('base_unit', 'serving')),
             'serving_description': str(result.get('serving_description', f'1 {unit}')),
             'estimated_grams': float(result.get('estimated_grams', 0)) if result.get('estimated_grams') else None,
@@ -1437,6 +1481,8 @@ def resolve_food(raw_phrase: str, user_id: str, meal_type: str = None,
                 'protein_per_base': existing_match.get('protein_per_base', 0),
                 'carbs_per_base': existing_match.get('carbs_per_base', 0),
                 'fat_per_base': existing_match.get('fat_per_base', 0),
+                'sugar_per_base': existing_match.get('sugar_per_base', 0),
+                'fiber_per_base': existing_match.get('fiber_per_base', 0),
                 'status': existing_match.get('status', 'confirmed'),
                 'servings': existing_match.get('servings', []),
                 'score': existing_match['score'],
@@ -1451,6 +1497,8 @@ def resolve_food(raw_phrase: str, user_id: str, meal_type: str = None,
                 'protein_per_base': ai_estimate['protein_per_base'],
                 'carbs_per_base': ai_estimate['carbs_per_base'],
                 'fat_per_base': ai_estimate['fat_per_base'],
+                'sugar_per_base': ai_estimate.get('sugar_per_base', 0),
+                'fiber_per_base': ai_estimate.get('fiber_per_base', 0),
                 'base_unit': ai_estimate['base_unit'],
                 'status': 'ai_created',
                 'notes': f"AI estimated from: {raw_phrase}",
@@ -1470,6 +1518,8 @@ def resolve_food(raw_phrase: str, user_id: str, meal_type: str = None,
                 'protein_per_base': new_food.get('protein_per_base', 0),
                 'carbs_per_base': new_food.get('carbs_per_base', 0),
                 'fat_per_base': new_food.get('fat_per_base', 0),
+                'sugar_per_base': new_food.get('sugar_per_base', 0),
+                'fiber_per_base': new_food.get('fiber_per_base', 0),
                 'status': 'ai_created',
                 'servings': new_food.get('servings', []),
                 'score': ai_estimate['confidence'],
@@ -1548,13 +1598,14 @@ def create_food(data: dict, user_id: str) -> dict:
     conn.execute(
         """INSERT INTO foods
            (id, name, normalized_name, brand, brand_normalized, barcode, notes,
-            calories_per_base, protein_per_base, carbs_per_base, fat_per_base,
+            calories_per_base, protein_per_base, carbs_per_base, fat_per_base, sugar_per_base, fiber_per_base,
             base_unit, status, created_by_user_id, is_shared)
-           VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
+           VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
         (food_id, name, normalized, brand, brand_norm, data.get('barcode'),
          data.get('notes'),
          data.get('calories_per_base', 0), data.get('protein_per_base', 0),
          data.get('carbs_per_base', 0), data.get('fat_per_base', 0),
+         data.get('sugar_per_base', 0), data.get('fiber_per_base', 0),
          data.get('base_unit', '100g'), data.get('status', 'confirmed'),
          user_id, 1 if data.get('is_shared', True) else 0)
     )
@@ -1717,6 +1768,8 @@ def calculate_entry_nutrition(food: dict, quantity: float, serving_id: str = Non
     base_protein = food.get('protein_per_base', 0)
     base_carbs = food.get('carbs_per_base', 0)
     base_fat = food.get('fat_per_base', 0)
+    base_sugar = food.get('sugar_per_base', 0)
+    base_fiber = food.get('fiber_per_base', 0)
 
     # If a specific serving is selected, multiply by its base amount
     multiplier = quantity
@@ -1732,6 +1785,8 @@ def calculate_entry_nutrition(food: dict, quantity: float, serving_id: str = Non
         'protein': round(base_protein * multiplier, 1),
         'carbs': round(base_carbs * multiplier, 1),
         'fat': round(base_fat * multiplier, 1),
+        'sugar': round(base_sugar * multiplier, 1),
+        'fiber': round(base_fiber * multiplier, 1),
     }
 
 
@@ -1770,6 +1825,8 @@ def create_food_entry(data: dict, user_id: str) -> dict:
         snapshot_protein = data.get('snapshot_protein', 0)
         snapshot_carbs = data.get('snapshot_carbs', 0)
         snapshot_fat = data.get('snapshot_fat', 0)
+        snapshot_sugar = data.get('snapshot_sugar', 0)
+        snapshot_fiber = data.get('snapshot_fiber', 0)
         entry_method = 'quick_add'
     else:
         # Get food and calculate nutrition snapshot
@@ -1784,6 +1841,8 @@ def create_food_entry(data: dict, user_id: str) -> dict:
         snapshot_protein = nutrition['protein']
         snapshot_carbs = nutrition['carbs']
         snapshot_fat = nutrition['fat']
+        snapshot_sugar = nutrition['sugar']
+        snapshot_fiber = nutrition['fiber']
 
         # Resolve serving label and grams for snapshot
         if serving_id:
@@ -1803,16 +1862,18 @@ def create_food_entry(data: dict, user_id: str) -> dict:
     conn.execute(
         """INSERT INTO food_entries
            (id, user_id, food_id, meal_type, entry_date, entry_type,
-            quantity, unit, serving_description,
+           quantity, unit, serving_description,
             snapshot_food_name, snapshot_serving_label, snapshot_grams,
             snapshot_calories, snapshot_protein, snapshot_carbs, snapshot_fat,
+            snapshot_sugar, snapshot_fiber,
             source, entry_method, raw_text, confidence_score, note, image_ref,
             ai_metadata, idempotency_key)
-           VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
+           VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
         (entry_id, user_id, food_id, meal_type, entry_date, entry_type,
          quantity, unit, serving_description,
          snapshot_name, snapshot_serving_label, snapshot_grams,
          snapshot_cals, snapshot_protein, snapshot_carbs, snapshot_fat,
+         snapshot_sugar, snapshot_fiber,
          source, entry_method, data.get('raw_text'), data.get('confidence_score'),
          data.get('note'), image_ref,
          json.dumps(data.get('ai_metadata')) if data.get('ai_metadata') else None,
@@ -1837,6 +1898,8 @@ def create_food_entry(data: dict, user_id: str) -> dict:
         'snapshot_protein': snapshot_protein,
         'snapshot_carbs': snapshot_carbs,
         'snapshot_fat': snapshot_fat,
+        'snapshot_sugar': snapshot_sugar,
+        'snapshot_fiber': snapshot_fiber,
         'source': source,
         'entry_method': entry_method,
     }
@@ -1874,6 +1937,8 @@ def get_daily_totals(user_id: str, entry_date: str) -> dict:
              COALESCE(SUM(snapshot_protein), 0) as total_protein,
              COALESCE(SUM(snapshot_carbs), 0) as total_carbs,
              COALESCE(SUM(snapshot_fat), 0) as total_fat,
+             COALESCE(SUM(snapshot_sugar), 0) as total_sugar,
+             COALESCE(SUM(snapshot_fiber), 0) as total_fiber,
              COUNT(*) as entry_count
            FROM food_entries
            WHERE user_id = ? AND entry_date = ?""",
@@ -1905,7 +1970,8 @@ def get_recent_foods(user_id: str, limit: int = 20) -> list:
     conn = get_db()
     rows = conn.execute(
         """SELECT DISTINCT fe.food_id, fe.snapshot_food_name, f.calories_per_base,
-                  f.protein_per_base, f.carbs_per_base, f.fat_per_base, f.base_unit,
+                  f.protein_per_base, f.carbs_per_base, f.fat_per_base,
+                  f.sugar_per_base, f.fiber_per_base, f.base_unit,
                   MAX(fe.created_at) as last_used
            FROM food_entries fe
            JOIN foods f ON fe.food_id = f.id
@@ -1924,7 +1990,8 @@ def get_frequent_foods(user_id: str, limit: int = 20) -> list:
     conn = get_db()
     rows = conn.execute(
         """SELECT fe.food_id, fe.snapshot_food_name, f.calories_per_base,
-                  f.protein_per_base, f.carbs_per_base, f.fat_per_base, f.base_unit,
+                  f.protein_per_base, f.carbs_per_base, f.fat_per_base,
+                  f.sugar_per_base, f.fiber_per_base, f.base_unit,
                   COUNT(*) as use_count, MAX(fe.created_at) as last_used
            FROM food_entries fe
            JOIN foods f ON fe.food_id = f.id
@@ -2355,13 +2422,15 @@ class CalorieHandler(BaseHTTPRequestHandler):
                     conn.execute(
                         """INSERT INTO meal_template_items
                            (id, template_id, food_id, quantity, unit, serving_description,
-                            snapshot_food_name, snapshot_calories, snapshot_protein, snapshot_carbs, snapshot_fat)
-                           VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
+                            snapshot_food_name, snapshot_calories, snapshot_protein, snapshot_carbs,
+                            snapshot_fat, snapshot_sugar, snapshot_fiber)
+                           VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
                         (str(uuid.uuid4()), template_id, item['food_id'],
                          item.get('quantity', 1), item.get('unit', 'serving'),
                          item.get('serving_description'),
                          food['name'], nutrition['calories'], nutrition['protein'],
-                         nutrition['carbs'], nutrition['fat'])
+                         nutrition['carbs'], nutrition['fat'],
+                         nutrition['sugar'], nutrition['fiber'])
                     )
             conn.commit()
             conn.close()
@@ -2513,10 +2582,12 @@ class CalorieHandler(BaseHTTPRequestHandler):
                     nutrition = calculate_entry_nutrition(food, quantity)
                     updates.extend([
                         'snapshot_calories = ?', 'snapshot_protein = ?',
-                        'snapshot_carbs = ?', 'snapshot_fat = ?'
+                        'snapshot_carbs = ?', 'snapshot_fat = ?',
+                        'snapshot_sugar = ?', 'snapshot_fiber = ?'
                     ])
                     params.extend([nutrition['calories'], nutrition['protein'],
-                                   nutrition['carbs'], nutrition['fat']])
+                                   nutrition['carbs'], nutrition['fat'],
+                                   nutrition['sugar'], nutrition['fiber']])
 
             if updates:
                 params.append(entry_id)
@@ -2539,6 +2610,7 @@ class CalorieHandler(BaseHTTPRequestHandler):
 
             for field in ['name', 'brand', 'barcode', 'notes',
                           'calories_per_base', 'protein_per_base', 'carbs_per_base', 'fat_per_base',
+                          'sugar_per_base', 'fiber_per_base',
                           'base_unit', 'status', 'is_shared']:
                 if field in data:
                     if field == 'name':
@@ -2592,11 +2664,13 @@ class CalorieHandler(BaseHTTPRequestHandler):
 
             goal_id = str(uuid.uuid4())
             conn.execute(
-                """INSERT INTO goals (id, user_id, start_date, end_date, calories, protein, carbs, fat, is_active)
-                   VALUES (?, ?, ?, ?, ?, ?, ?, ?, 1)""",
+                """INSERT INTO goals
+                   (id, user_id, start_date, end_date, calories, protein, carbs, fat, sugar, fiber, is_active)
+                   VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1)""",
                 (goal_id, target_user, start_date, data.get('end_date'),
                  data.get('calories', 2000), data.get('protein', 150),
-                 data.get('carbs', 200), data.get('fat', 65))
+                 data.get('carbs', 200), data.get('fat', 65),
+                 data.get('sugar', 0), data.get('fiber', 0))
             )
             conn.commit()
             conn.close()