diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index da08e6d..190f5c5 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -5,7 +5,11 @@ declare global {
 		// interface Error {}
 		// interface Locals {}
 		// interface PageData {}
-		// interface PageState {}
+		interface PageState {
+			/** Set via shallow routing when the file viewer is open as an overlay
+			 *  on top of the files list. */
+			fileId?: string;
+		}
 		// interface Platform {}
 	}
 }
diff --git a/frontend/src/lib/components/file/FileViewer.svelte b/frontend/src/lib/components/file/FileViewer.svelte
new file mode 100644
index 0000000..2256bd3
--- /dev/null
+++ b/frontend/src/lib/components/file/FileViewer.svelte
@@ -0,0 +1,638 @@
+<script lang="ts">
+	import { get } from 'svelte/store';
+	import { untrack, onDestroy } from 'svelte';
+	import { api, ApiError } from '$lib/api/client';
+	import { authStore } from '$lib/stores/auth';
+	import TagPicker from '$lib/components/file/TagPicker.svelte';
+	import type { File, Tag } from '$lib/api/types';
+
+	interface Props {
+		/** File currently shown. Changing it (paging) reloads in place. */
+		fileId: string;
+		/** Neighbour ids resolved by the parent; null hides the arrow. */
+		prevId?: string | null;
+		nextId?: string | null;
+		/** Page to a neighbour. */
+		onNavigate: (id: string) => void;
+		/** Close the viewer. */
+		onClose: () => void;
+	}
+
+	let { fileId, prevId = null, nextId = null, onNavigate, onClose }: Props = $props();
+
+	let file = $state<File | null>(null);
+	let fileTags = $state<Tag[]>([]);
+	let previewSrc = $state<string | null>(null);
+	let loading = $state(true);
+	let saving = $state(false);
+	let error = $state('');
+
+	// Tags are loaded lazily — the Tags section sits below a full-viewport
+	// preview, so fetching them on open just hammers the DB for data the user
+	// usually never scrolls to. We fetch only once the section comes into view.
+	let tagsVisible = $state(false);
+	let tagsLoading = $state(false);
+	let tagsLoadedFor = $state<string | null>(null);
+	let tagsLoaded = $derived(tagsLoadedFor === fileId);
+
+	// Editable fields (initialised on load)
+	let notes = $state('');
+	let contentDatetime = $state('');
+	let isPublic = $state(false);
+	let dirty = $state(false);
+
+	let exifEntries = $derived(
+		file?.exif ? Object.entries(file.exif as Record<string, unknown>) : [],
+	);
+
+	// ---- Load (re-runs whenever the file changes, i.e. paging) ----
+	$effect(() => {
+		if (!fileId) return;
+		const id = fileId; // snapshot — don't re-run if other state changes
+		// Revoke old blob URL without tracking previewSrc as a dependency.
+		untrack(() => {
+			if (previewSrc) URL.revokeObjectURL(previewSrc);
+			previewSrc = null;
+		});
+		void loadFile(id);
+	});
+
+	onDestroy(() => {
+		if (previewSrc) URL.revokeObjectURL(previewSrc);
+	});
+
+	async function loadFile(id: string) {
+		loading = true;
+		error = '';
+		// Drop the previous file's tags; they reload lazily when scrolled to.
+		fileTags = [];
+		try {
+			const fileData = await api.get<File>(`/files/${id}`);
+			if (fileId !== id) return; // paged on; ignore
+			file = fileData;
+			notes = fileData.notes ?? '';
+			contentDatetime = fileData.content_datetime
+				? fileData.content_datetime.slice(0, 16) // YYYY-MM-DDTHH:mm
+				: '';
+			isPublic = fileData.is_public ?? false;
+			dirty = false;
+			void fetchPreview(id);
+		} catch (e) {
+			error = e instanceof ApiError ? e.message : 'Failed to load file';
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function fetchPreview(id: string) {
+		const token = get(authStore).accessToken;
+		try {
+			const res = await fetch(`/api/v1/files/${id}/preview`, {
+				headers: token ? { Authorization: `Bearer ${token}` } : {},
+			});
+			if (res.ok && fileId === id) {
+				previewSrc = URL.createObjectURL(await res.blob());
+			}
+		} catch {
+			// non-critical — thumbnail stays as fallback
+		}
+	}
+
+	// ---- Tags (lazy) ----
+	// Fetch the current file's tags the first time the Tags section is visible.
+	// Re-runs when fileId changes while the section is still on-screen.
+	$effect(() => {
+		const id = fileId;
+		if (id && tagsVisible && tagsLoadedFor !== id && !tagsLoading) {
+			void loadTags(id);
+		}
+	});
+
+	async function loadTags(id: string) {
+		tagsLoading = true;
+		try {
+			const tags = await api.get<Tag[]>(`/files/${id}/tags`);
+			if (fileId !== id) return; // paged on; ignore
+			fileTags = tags;
+			tagsLoadedFor = id;
+		} catch {
+			// non-critical — a later scroll into view retries
+		} finally {
+			tagsLoading = false;
+		}
+	}
+
+	// Svelte action: flips tagsVisible while the Tags section is in (or near) the
+	// viewport. rootMargin pre-loads just before it scrolls fully into view.
+	function tagsSentinel(node: HTMLElement) {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				tagsVisible = entries[0]?.isIntersecting ?? false;
+			},
+			{ rootMargin: '200px' },
+		);
+		observer.observe(node);
+		return {
+			destroy() {
+				observer.disconnect();
+			},
+		};
+	}
+
+	async function addTag(tagId: string) {
+		const updated = await api.put<Tag[]>(`/files/${fileId}/tags/${tagId}`);
+		fileTags = updated;
+		tagsLoadedFor = fileId;
+	}
+
+	async function removeTag(tagId: string) {
+		await api.delete(`/files/${fileId}/tags/${tagId}`);
+		fileTags = fileTags.filter((t) => t.id !== tagId);
+	}
+
+	// ---- Save ----
+	async function save() {
+		if (!file || saving) return;
+		saving = true;
+		error = '';
+		try {
+			const updated = await api.patch<File>(`/files/${file.id}`, {
+				notes: notes.trim() || null,
+				content_datetime: contentDatetime
+					? new Date(contentDatetime).toISOString()
+					: undefined,
+				is_public: isPublic,
+			});
+			file = updated;
+			dirty = false;
+		} catch (e) {
+			error = e instanceof ApiError ? e.message : 'Failed to save';
+		} finally {
+			saving = false;
+		}
+	}
+
+	// ---- Keyboard ----
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+		if (e.key === 'ArrowLeft') {
+			if (prevId) onNavigate(prevId);
+		} else if (e.key === 'ArrowRight') {
+			if (nextId) onNavigate(nextId);
+		} else if (e.key === 'Escape') {
+			onClose();
+		}
+	}
+
+	// ---- Helpers ----
+	function formatDatetime(iso: string | null | undefined): string {
+		if (!iso) return '—';
+		return new Date(iso).toLocaleString();
+	}
+
+	// EXIF values may be nested arrays/objects (e.g. rationals, GPS); render those
+	// as JSON instead of the useless "[object Object]".
+	function formatExifValue(val: unknown): string {
+		if (val === null || val === undefined) return '—';
+		if (typeof val === 'object') return JSON.stringify(val);
+		return String(val);
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="viewer-page">
+	<!-- Top bar -->
+	<div class="top-bar">
+		<button class="back-btn" onclick={onClose} aria-label="Back to files">
+			<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+				<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+			</svg>
+		</button>
+		<span class="filename">{file?.original_name ?? ''}</span>
+	</div>
+
+	<!-- Preview -->
+	<div class="preview-wrap">
+		{#if previewSrc}
+			<img src={previewSrc} alt={file?.original_name ?? ''} class="preview-img" />
+		{:else if loading}
+			<div class="preview-placeholder shimmer"></div>
+		{:else}
+			<div class="preview-placeholder failed"></div>
+		{/if}
+
+		<!-- Prev / Next -->
+		{#if prevId}
+			<button
+				class="nav-btn nav-prev"
+				onclick={() => prevId && onNavigate(prevId)}
+				aria-label="Previous file"
+			>
+				<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+					<path d="M11 3L5 9L11 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+				</svg>
+			</button>
+		{/if}
+		{#if nextId}
+			<button
+				class="nav-btn nav-next"
+				onclick={() => nextId && onNavigate(nextId)}
+				aria-label="Next file"
+			>
+				<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+					<path d="M7 3L13 9L7 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+				</svg>
+			</button>
+		{/if}
+	</div>
+
+	<!-- Metadata panel -->
+	<div class="meta-panel">
+		{#if error}
+			<p class="error" role="alert">{error}</p>
+		{/if}
+
+		{#if file}
+			<!-- File info -->
+			<div class="info-row">
+				<span class="mime">{file.mime_type}</span>
+				<span class="sep">·</span>
+				<span class="created">Added {formatDatetime(file.created_at)}</span>
+			</div>
+
+			<!-- Edit form -->
+			<section class="section">
+				<label class="field-label" for="notes">Notes</label>
+				<textarea
+					id="notes"
+					class="textarea"
+					rows="3"
+					bind:value={notes}
+					oninput={() => (dirty = true)}
+					placeholder="Add notes…"
+				></textarea>
+			</section>
+
+			<section class="section">
+				<label class="field-label" for="datetime">Date taken</label>
+				<input
+					id="datetime"
+					type="datetime-local"
+					class="input"
+					bind:value={contentDatetime}
+					oninput={() => (dirty = true)}
+				/>
+			</section>
+
+			<section class="section toggle-row">
+				<span class="field-label">Public</span>
+				<button
+					class="toggle"
+					class:on={isPublic}
+					onclick={() => { isPublic = !isPublic; dirty = true; }}
+					role="switch"
+					aria-checked={isPublic}
+					aria-label="Public"
+				>
+					<span class="thumb"></span>
+				</button>
+			</section>
+
+			<button
+				class="save-btn"
+				onclick={save}
+				disabled={!dirty || saving}
+			>
+				{saving ? 'Saving…' : 'Save changes'}
+			</button>
+
+			<!-- Tags (loaded lazily on scroll) -->
+			<section class="section" use:tagsSentinel>
+				<div class="field-label">Tags</div>
+				{#if tagsLoaded}
+					<TagPicker {fileTags} onAdd={addTag} onRemove={removeTag} />
+				{:else}
+					<p class="tags-loading">Loading tags…</p>
+				{/if}
+			</section>
+
+			<!-- EXIF -->
+			{#if exifEntries.length > 0}
+				<section class="section">
+					<div class="field-label">EXIF</div>
+					<dl class="exif">
+						{#each exifEntries as [key, val]}
+							<dt>{key}</dt>
+							<dd>{formatExifValue(val)}</dd>
+						{/each}
+					</dl>
+				</section>
+			{/if}
+		{:else if !loading}
+			<p class="empty">File not found.</p>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.viewer-page {
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		padding-bottom: 70px; /* clear the bottom navbar in the standalone route */
+	}
+
+	/* ---- Top bar ---- */
+	.top-bar {
+		position: sticky;
+		top: 0;
+		z-index: 20;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 6px 10px;
+		background-color: var(--color-bg-primary);
+		border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
+		min-height: 44px;
+	}
+
+	.back-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		border-radius: 8px;
+		border: none;
+		background: none;
+		color: var(--color-text-primary);
+		cursor: pointer;
+		flex-shrink: 0;
+	}
+
+	.back-btn:hover {
+		background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
+	}
+
+	.filename {
+		font-size: 0.9rem;
+		color: var(--color-text-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* ---- Preview ---- */
+	.preview-wrap {
+		position: relative;
+		background-color: #000;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		/* Fill viewport below the top bar (44px) */
+		height: calc(100dvh - 44px);
+		flex-shrink: 0;
+		overflow: hidden;
+	}
+
+	.preview-img {
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: contain;
+		display: block;
+	}
+
+	.preview-placeholder {
+		width: 100%;
+		height: 100%;
+	}
+
+	.preview-placeholder.shimmer {
+		background: linear-gradient(
+			90deg,
+			#111 25%,
+			#222 50%,
+			#111 75%
+		);
+		background-size: 200% 100%;
+		animation: shimmer 1.4s infinite;
+	}
+
+	.preview-placeholder.failed {
+		background-color: #1a1010;
+	}
+
+	/* ---- Nav buttons ---- */
+	.nav-btn {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		border: none;
+		background-color: rgba(0, 0, 0, 0.55);
+		color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		transition: background-color 0.15s;
+	}
+
+	.nav-btn:hover {
+		background-color: rgba(0, 0, 0, 0.8);
+	}
+
+	.nav-prev { left: 10px; }
+	.nav-next { right: 10px; }
+
+	/* ---- Metadata panel ---- */
+	.meta-panel {
+		padding: 14px 14px 0;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.info-row {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 0.8rem;
+		color: var(--color-text-muted);
+		padding-bottom: 10px;
+	}
+
+	.sep { opacity: 0.4; }
+
+	.section {
+		padding: 10px 0;
+		border-top: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
+	}
+
+	.field-label {
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: var(--color-text-muted);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		margin-bottom: 6px;
+	}
+
+	.textarea {
+		width: 100%;
+		box-sizing: border-box;
+		padding: 8px 10px;
+		border-radius: 6px;
+		border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
+		background-color: var(--color-bg-elevated);
+		color: var(--color-text-primary);
+		font-size: 0.875rem;
+		font-family: inherit;
+		resize: vertical;
+		outline: none;
+		min-height: 70px;
+	}
+
+	.textarea:focus {
+		border-color: var(--color-accent);
+	}
+
+	.input {
+		width: 100%;
+		box-sizing: border-box;
+		height: 36px;
+		padding: 0 10px;
+		border-radius: 6px;
+		border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
+		background-color: var(--color-bg-elevated);
+		color: var(--color-text-primary);
+		font-size: 0.875rem;
+		font-family: inherit;
+		outline: none;
+		color-scheme: dark;
+	}
+
+	.input:focus {
+		border-color: var(--color-accent);
+	}
+
+	/* ---- Toggle ---- */
+	.toggle-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-top: 12px;
+		padding-bottom: 12px;
+	}
+
+	.toggle-row .field-label {
+		margin-bottom: 0;
+	}
+
+	.toggle {
+		position: relative;
+		width: 44px;
+		height: 26px;
+		border-radius: 13px;
+		border: none;
+		background-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-bg-elevated));
+		cursor: pointer;
+		transition: background-color 0.2s;
+		flex-shrink: 0;
+	}
+
+	.toggle.on {
+		background-color: var(--color-accent);
+	}
+
+	.thumb {
+		position: absolute;
+		top: 3px;
+		left: 3px;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background-color: #fff;
+		transition: transform 0.2s;
+	}
+
+	.toggle.on .thumb {
+		transform: translateX(18px);
+	}
+
+	/* ---- Save button ---- */
+	.save-btn {
+		width: 100%;
+		height: 40px;
+		border-radius: 8px;
+		border: none;
+		background-color: var(--color-accent);
+		color: var(--color-bg-primary);
+		font-size: 0.9rem;
+		font-weight: 600;
+		font-family: inherit;
+		cursor: pointer;
+		margin-top: 4px;
+		margin-bottom: 4px;
+		transition: background-color 0.15s, opacity 0.15s;
+	}
+
+	.save-btn:hover:not(:disabled) {
+		background-color: var(--color-accent-hover);
+	}
+
+	.save-btn:disabled {
+		opacity: 0.4;
+		cursor: default;
+	}
+
+	/* ---- Tags ---- */
+	.tags-loading {
+		margin: 0;
+		font-size: 0.8rem;
+		color: var(--color-text-muted);
+		opacity: 0.7;
+	}
+
+	/* ---- EXIF ---- */
+	.exif {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: 3px 12px;
+		font-size: 0.78rem;
+		margin: 0;
+	}
+
+	dt {
+		color: var(--color-text-muted);
+		font-weight: 500;
+	}
+
+	dd {
+		margin: 0;
+		color: var(--color-text-primary);
+		word-break: break-word;
+	}
+
+	/* ---- Misc ---- */
+	.error {
+		color: var(--color-danger);
+		font-size: 0.875rem;
+		padding: 8px 0;
+	}
+
+	.empty {
+		color: var(--color-text-muted);
+		font-size: 0.95rem;
+		text-align: center;
+		padding: 40px 0;
+	}
+
+	@keyframes shimmer {
+		0% { background-position: 200% 0; }
+		100% { background-position: -200% 0; }
+	}
+</style>
diff --git a/frontend/src/lib/stores/filesCache.ts b/frontend/src/lib/stores/filesCache.ts
deleted file mode 100644
index 18fe6d5..0000000
--- a/frontend/src/lib/stores/filesCache.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { browser } from '$app/environment';
-import { api } from '$lib/api/client';
-import type { File, FileCursorPage } from '$lib/api/types';
-
-/** The sort/order/filter that identifies a particular files listing. */
-export interface FilesQuery {
-	sort: string;
-	order: string;
-	filter: string | null;
-}
-
-/**
- * A snapshot of the files grid, kept so that opening a file and returning
- * restores the same list (and scroll position) instead of reloading page 1 from
- * the top. The file viewer also reads this to derive prev/next, to find the list
- * URL to return to, and extends it as the user pages past the loaded set.
- *
- * Held in a module variable (survives client-side navigation) AND mirrored to
- * sessionStorage (survives a full reload / deep navigation within the tab).
- */
-export interface FilesSnapshot {
-	query: FilesQuery;
-	/** Search string of the list URL this grid was viewed at (e.g. "?filter=x"),
-	 *  so the viewer returns to the exact same filtered list rather than bare
-	 *  /files — otherwise the filter is lost and the snapshot no longer matches. */
-	listSearch: string;
-	files: File[];
-	nextCursor: string | null;
-	hasMore: boolean;
-	scrollTop: number;
-	/** ID of the file the user opened — restore the grid centred on this. */
-	lastOpenedId: string | null;
-}
-
-/** Stable string identity for a query, used to tell whether a snapshot still
- *  applies to the current sort/order/filter. */
-export function queryKey(q: FilesQuery): string {
-	return `${q.sort}|${q.order}|${q.filter ?? ''}`;
-}
-
-const STORAGE_KEY = 'filesSnapshot';
-
-let snapshot: FilesSnapshot | null = null;
-let hydrated = false;
-let loading = false;
-
-/** Lazily restore the snapshot from sessionStorage the first time it's read so
- *  the position survives a page reload, not just client-side navigation. */
-function hydrate(): void {
-	if (hydrated) return;
-	hydrated = true;
-	if (!browser) return;
-	try {
-		const raw = sessionStorage.getItem(STORAGE_KEY);
-		if (raw) snapshot = JSON.parse(raw) as FilesSnapshot;
-	} catch {
-		// Corrupt/missing — start fresh.
-	}
-}
-
-function persist(): void {
-	if (!browser) return;
-	try {
-		if (snapshot) sessionStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot));
-		else sessionStorage.removeItem(STORAGE_KEY);
-	} catch {
-		// Quota or serialization failure — non-critical, in-memory copy still works.
-	}
-}
-
-/** Save (replace) the current grid snapshot. */
-export function saveFilesSnapshot(s: FilesSnapshot): void {
-	snapshot = s;
-	hydrated = true;
-	persist();
-}
-
-/** Read the snapshot without consuming it. */
-export function peekFilesSnapshot(): FilesSnapshot | null {
-	hydrate();
-	return snapshot;
-}
-
-/** Forget the snapshot (e.g. on logout). */
-export function clearFilesSnapshot(): void {
-	snapshot = null;
-	hydrated = true;
-	persist();
-}
-
-/** Record the file currently being viewed so back-navigation lands on it. */
-export function setLastOpened(id: string): void {
-	hydrate();
-	if (snapshot) {
-		snapshot = { ...snapshot, lastOpenedId: id };
-		persist();
-	}
-}
-
-/**
- * Append the next page to the snapshot using its own query/cursor. The file
- * viewer calls this to extend the cached list as the user pages forward, so
- * prev/next keep working past the originally loaded set and the grid restores
- * correctly on return. No-op when there is nothing cached, no further pages, or
- * a load is already in flight.
- */
-export async function loadMoreIntoSnapshot(limit: number): Promise<void> {
-	hydrate();
-	if (!snapshot || !snapshot.hasMore || loading) return;
-	loading = true;
-	try {
-		const q = snapshot.query;
-		const params = new URLSearchParams({ limit: String(limit), sort: q.sort, order: q.order });
-		if (snapshot.nextCursor) params.set('cursor', snapshot.nextCursor);
-		if (q.filter) params.set('filter', q.filter);
-		const res = await api.get<FileCursorPage>(`/files?${params}`);
-		// Re-read snapshot: it may have been replaced while the request was in flight.
-		if (!snapshot) return;
-		snapshot = {
-			...snapshot,
-			files: [...snapshot.files, ...(res.items ?? [])],
-			nextCursor: res.next_cursor ?? null,
-			hasMore: !!res.next_cursor,
-		};
-		persist();
-	} catch {
-		// Non-critical: leave the snapshot unchanged.
-	} finally {
-		loading = false;
-	}
-}
diff --git a/frontend/src/routes/files/+page.svelte b/frontend/src/routes/files/+page.svelte
index 6b013ef..447caa8 100644
--- a/frontend/src/routes/files/+page.svelte
+++ b/frontend/src/routes/files/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { afterNavigate, goto, replaceState } from '$app/navigation';
+	import { afterNavigate, goto, pushState, replaceState } from '$app/navigation';
 	import { api } from '$lib/api/client';
 	import { ApiError } from '$lib/api/client';
 	import FileCard from '$lib/components/file/FileCard.svelte';
+	import FileViewer from '$lib/components/file/FileViewer.svelte';
 	import FileUpload from '$lib/components/file/FileUpload.svelte';
 	import FilterBar from '$lib/components/file/FilterBar.svelte';
 	import Header from '$lib/components/layout/Header.svelte';
@@ -17,11 +18,6 @@
 	import { parseDslFilter } from '$lib/utils/dsl';
 	import type { File, FileCursorPage, Pool, PoolOffsetPage } from '$lib/api/types';
 	import { appSettings } from '$lib/stores/appSettings';
-	import {
-		saveFilesSnapshot,
-		peekFilesSnapshot,
-		queryKey,
-	} from '$lib/stores/filesCache';
 
 	let scrollContainer = $state<HTMLElement | undefined>();
 
@@ -98,49 +94,34 @@
 	let resetKey = $derived(`${sortState.sort}|${sortState.order}|${filterParam ?? ''}`);
 	let prevKey = $state('');
 
-	// Restore the grid DATA on entry. Scroll restoration is handled separately in
-	// afterNavigate (below), which runs after SvelteKit's own scroll reset.
+	// Reset + reload when the query (sort/order/filter) changes or on first mount.
+	// The viewer opens as an overlay now (the list is never unmounted), so there's
+	// no snapshot to restore — except a deep-link return carrying an anchor.
 	$effect(() => {
 		const key = resetKey;
 		if (key === prevKey) return;
 		const firstRun = prevKey === '';
 		prevKey = key;
 
-		// On entry, restore the grid the user left when opening a file (same
-		// sort/order/filter) so back-navigation keeps their place. A later change
-		// means the query itself changed → reset and reload from the top.
-		const snap = peekFilesSnapshot();
-		if (firstRun && snap && queryKey(snap.query) === key) {
-			files = snap.files;
-			nextCursor = snap.nextCursor;
-			hasMore = snap.hasMore;
-		} else {
-			files = [];
-			nextCursor = null;
-			hasMore = true;
-			error = '';
-			// Deep link / reload carrying a position anchor but no cached grid:
-			// load a window starting at the anchor so we have something to scroll to.
-			if (firstRun && anchorParam) {
-				void loadAroundAnchor(anchorParam);
-			}
+		files = [];
+		nextCursor = null;
+		hasMore = true;
+		error = '';
+		// Deep-link return carrying a position anchor but no loaded grid: load a
+		// window starting at the anchor instead of page 1, so we can scroll to it.
+		if (firstRun && anchorParam) {
+			void loadAroundAnchor(anchorParam);
 		}
 	});
 
-	// Scroll restoration runs here because afterNavigate fires AFTER SvelteKit has
-	// applied its own scroll handling, so our position wins instead of being reset
-	// to the top. The anchor (last-viewed file) is read from the URL.
-	afterNavigate((nav) => {
+	// Scroll to an ?anchor= file on a deep-link return. Runs in afterNavigate
+	// because it fires AFTER SvelteKit's own scroll handling, so our position wins
+	// instead of being reset to the top.
+	afterNavigate(() => {
 		const anchor = page.url.searchParams.get('anchor');
 		if (anchor) {
 			scrollToFile(anchor);
 			consumeAnchor();
-			return;
-		}
-		// Plain entry/reload (no explicit anchor): fall back to the snapshot's
-		// last-opened file so a refresh still lands near where the user was.
-		if (nav.type === 'enter') {
-			scrollToFile(peekFilesSnapshot()?.lastOpenedId ?? null);
 		}
 	});
 
@@ -243,20 +224,50 @@
 
 	function openFile(file: File) {
 		if (!file.id) return;
-		// Snapshot the grid so returning from the viewer restores this exact list
-		// and scroll position instead of reloading page 1 from the top.
-		saveFilesSnapshot({
-			query: { sort: sortState.sort, order: sortState.order, filter: filterParam },
-			// Only the filter — never the transient ?anchor — defines the list URL
-			// to return to.
-			listSearch: filterParam ? `?filter=${encodeURIComponent(filterParam)}` : '',
-			files,
-			nextCursor,
-			hasMore,
-			scrollTop: scrollContainer?.scrollTop ?? 0,
-			lastOpenedId: file.id,
-		});
-		goto(`/files/${file.id}`);
+		// Open the viewer as an overlay on top of the still-mounted grid via
+		// shallow routing: the URL becomes /files/<id> and the browser back button
+		// closes it, but the list is never torn down or reloaded.
+		pushState(`/files/${file.id}`, { fileId: file.id });
+	}
+
+	// ---- Viewer overlay (shallow routing) ----
+	let activeFileId = $derived(page.state.fileId);
+	let activeIdx = $derived(activeFileId ? files.findIndex((f) => f.id === activeFileId) : -1);
+	let viewerPrevId = $derived(activeIdx > 0 ? (files[activeIdx - 1]?.id ?? null) : null);
+	let viewerNextId = $derived(
+		activeIdx >= 0 && activeIdx < files.length - 1 ? (files[activeIdx + 1]?.id ?? null) : null,
+	);
+
+	// Paging near the end of the loaded grid: pull the next page by cursor so the
+	// viewer keeps advancing past what was loaded.
+	$effect(() => {
+		if (activeIdx >= 0 && activeIdx >= files.length - 3 && hasMore && !loading) {
+			void loadMore();
+		}
+	});
+
+	// When the overlay closes (back / Escape / close button), bring the grid to
+	// the last-viewed file. The list was never unmounted, so this is instant.
+	let lastOverlayId: string | null = null;
+	$effect(() => {
+		const id = activeFileId;
+		if (id) {
+			lastOverlayId = id;
+		} else if (lastOverlayId) {
+			const target = lastOverlayId;
+			lastOverlayId = null;
+			scrollToFile(target);
+		}
+	});
+
+	function pageTo(id: string) {
+		// Replace (not push) so a single back press returns to the grid rather than
+		// stepping back through every file paged.
+		replaceState(`/files/${id}`, { fileId: id });
+	}
+
+	function closeViewer() {
+		history.back();
 	}
 
 	// ---- Selection logic ----
@@ -393,6 +404,20 @@
 	</FileUpload>
 </div>
 
+<!-- File viewer overlay (shallow routing): renders on top of the still-mounted
+     grid, so closing it reveals the list untouched. -->
+{#if activeFileId}
+	<div class="viewer-overlay">
+		<FileViewer
+			fileId={activeFileId}
+			prevId={viewerPrevId}
+			nextId={viewerNextId}
+			onNavigate={pageTo}
+			onClose={closeViewer}
+		/>
+	</div>
+{/if}
+
 {#if $selectionActive}
 	<SelectionBar
 		onEditTags={() => (tagEditorOpen = true)}
@@ -489,6 +514,16 @@
 		flex-direction: column;
 	}
 
+	/* Full-screen overlay covering the grid and the bottom navbar (z 100). */
+	.viewer-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 200;
+		background-color: var(--color-bg-primary);
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+
 	main {
 		flex: 1;
 		overflow-y: auto;
diff --git a/frontend/src/routes/files/[id]/+page.svelte b/frontend/src/routes/files/[id]/+page.svelte
index 01741bd..06a3685 100644
--- a/frontend/src/routes/files/[id]/+page.svelte
+++ b/frontend/src/routes/files/[id]/+page.svelte
@@ -2,122 +2,28 @@
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
 	import { get } from 'svelte/store';
-	import { untrack } from 'svelte';
-	import { api, ApiError } from '$lib/api/client';
-	import { authStore } from '$lib/stores/auth';
+	import { api } from '$lib/api/client';
 	import { fileSorting } from '$lib/stores/sorting';
-	import { appSettings } from '$lib/stores/appSettings';
-	import { peekFilesSnapshot, setLastOpened, loadMoreIntoSnapshot } from '$lib/stores/filesCache';
-	import TagPicker from '$lib/components/file/TagPicker.svelte';
-	import type { File, Tag, FileCursorPage } from '$lib/api/types';
+	import FileViewer from '$lib/components/file/FileViewer.svelte';
+	import type { FileCursorPage } from '$lib/api/types';
 
-	// ---- State ----
+	// This standalone route is the fallback for a deep link / hard reload to a
+	// file. The normal path (opening from the grid) renders FileViewer as an
+	// overlay on the still-mounted list via shallow routing — see files/+page.
 	let fileId = $derived(page.params.id);
 
-	let file = $state<File | null>(null);
-	let fileTags = $state<Tag[]>([]);
-	let previewSrc = $state<string | null>(null);
-	let prevFile = $state<File | null>(null);
-	let nextFile = $state<File | null>(null);
-	let loading = $state(true);
-	let saving = $state(false);
-	let error = $state('');
+	let prevId = $state<string | null>(null);
+	let nextId = $state<string | null>(null);
 
-	// Tags are loaded lazily — the Tags section sits below a full-viewport
-	// preview, so fetching them on open just hammers the DB for data the user
-	// usually never scrolls to. We fetch only once the section comes into view.
-	let tagsVisible = $state(false);
-	let tagsLoading = $state(false);
-	let tagsLoadedFor = $state<string | null>(null);
-	let tagsLoaded = $derived(tagsLoadedFor === fileId);
-
-	// Editable fields (initialised on load)
-	let notes = $state('');
-	let contentDatetime = $state('');
-	let isPublic = $state(false);
-	let dirty = $state(false);
-
-	let exifEntries = $derived(
-		file?.exif ? Object.entries(file.exif as Record<string, unknown>) : [],
-	);
-
-	// ---- Load ----
 	$effect(() => {
-		if (!fileId) return;
-		const id = fileId; // snapshot — don't re-run if other state changes
-		// Revoke old blob URL without tracking previewSrc as a dependency
-		untrack(() => {
-			if (previewSrc) URL.revokeObjectURL(previewSrc);
-			previewSrc = null;
-		});
-		void loadPage(id);
+		const id = fileId;
+		if (id) void resolveNeighbors(id);
 	});
 
-	async function loadPage(id: string) {
-		loading = true;
-		error = '';
-		// Drop the previous file's tags; they reload lazily when scrolled to.
-		fileTags = [];
-		try {
-			const fileData = await api.get<File>(`/files/${id}`);
-			file = fileData;
-			notes = fileData.notes ?? '';
-			contentDatetime = fileData.content_datetime
-				? fileData.content_datetime.slice(0, 16) // YYYY-MM-DDTHH:mm
-				: '';
-			isPublic = fileData.is_public ?? false;
-			dirty = false;
-
-			void fetchPreview(id);
-			resolveNeighbors(id);
-		} catch (e) {
-			error = e instanceof ApiError ? e.message : 'Failed to load file';
-		} finally {
-			loading = false;
-		}
-	}
-
-	async function fetchPreview(id: string) {
-		const token = get(authStore).accessToken;
-		try {
-			const res = await fetch(`/api/v1/files/${id}/preview`, {
-				headers: token ? { Authorization: `Bearer ${token}` } : {},
-			});
-			if (res.ok) {
-				const blob = await res.blob();
-				previewSrc = URL.createObjectURL(blob);
-			}
-		} catch {
-			// non-critical — thumbnail stays as fallback
-		}
-	}
-
-	// Derive prev/next from the shared grid snapshot so paging is symmetric and
-	// instant and matches the order the user was browsing. As we approach the end
-	// of the cached list, prefetch the next page into the snapshot so forward
-	// paging continues and the grid restores correctly on return.
-	function resolveNeighbors(id: string) {
-		const snap = peekFilesSnapshot();
-		const idx = snap ? snap.files.findIndex((f) => f.id === id) : -1;
-		if (snap && idx >= 0) {
-			prevFile = idx > 0 ? snap.files[idx - 1] : null;
-			nextFile = idx < snap.files.length - 1 ? snap.files[idx + 1] : null;
-			if (idx >= snap.files.length - 3 && snap.hasMore) {
-				void loadMoreIntoSnapshot(get(appSettings).fileLoadLimit).then(() => {
-					if (page.params.id !== id) return; // user navigated on; ignore
-					const s2 = peekFilesSnapshot();
-					const i2 = s2 ? s2.files.findIndex((f) => f.id === id) : -1;
-					if (s2 && i2 >= 0) nextFile = i2 < s2.files.length - 1 ? s2.files[i2 + 1] : null;
-				});
-			}
-			return;
-		}
-		// No cached grid (e.g. a deep link straight to this file) — fall back to
-		// an anchored window from the API.
-		void loadNeighborsAnchor(id);
-	}
-
-	async function loadNeighborsAnchor(id: string) {
+	// No cached grid here, so derive neighbours from an anchored window. The
+	// backend anchor window is forward-inclusive, so prev is only available once
+	// we're past the first item of that window.
+	async function resolveNeighbors(id: string) {
 		const sort = get(fileSorting);
 		const params = new URLSearchParams({
 			anchor: id,
@@ -127,572 +33,32 @@
 		});
 		try {
 			const result = await api.get<FileCursorPage>(`/files?${params}`);
+			if (fileId !== id) return;
 			const items = result.items ?? [];
 			const idx = items.findIndex((f) => f.id === id);
-			prevFile = idx > 0 ? items[idx - 1] : null;
-			nextFile = idx >= 0 && idx < items.length - 1 ? items[idx + 1] : null;
+			prevId = idx > 0 ? (items[idx - 1].id ?? null) : null;
+			nextId = idx >= 0 && idx < items.length - 1 ? (items[idx + 1].id ?? null) : null;
 		} catch {
 			// non-critical
 		}
 	}
 
-	// ---- Save ----
-	async function save() {
-		if (!file || saving) return;
-		saving = true;
-		error = '';
-		try {
-			const updated = await api.patch<File>(`/files/${file.id}`, {
-				notes: notes.trim() || null,
-				content_datetime: contentDatetime
-					? new Date(contentDatetime).toISOString()
-					: undefined,
-				is_public: isPublic,
-			});
-			file = updated;
-			dirty = false;
-		} catch (e) {
-			error = e instanceof ApiError ? e.message : 'Failed to save';
-		} finally {
-			saving = false;
-		}
+	function pageTo(id: string) {
+		goto(`/files/${id}`);
 	}
 
-	// ---- Tags (lazy) ----
-	// Fetch the current file's tags the first time the Tags section is visible.
-	// Re-runs when fileId changes while the section is still on-screen (e.g.
-	// keyboard paging while scrolled down).
-	$effect(() => {
+	function closeViewer() {
+		// No list mounted underneath — go to the grid, carrying the file as an
+		// anchor so it scrolls into view there.
 		const id = fileId;
-		if (id && tagsVisible && tagsLoadedFor !== id && !tagsLoading) {
-			void loadTags(id);
-		}
-	});
-
-	async function loadTags(id: string) {
-		tagsLoading = true;
-		try {
-			const tags = await api.get<Tag[]>(`/files/${id}/tags`);
-			if (page.params.id !== id) return; // user navigated on; ignore
-			fileTags = tags;
-			tagsLoadedFor = id;
-		} catch {
-			// non-critical — a later scroll into view retries
-		} finally {
-			tagsLoading = false;
-		}
-	}
-
-	// Svelte action: flips tagsVisible while the Tags section is in (or near) the
-	// viewport. rootMargin pre-loads just before it scrolls fully into view.
-	function tagsSentinel(node: HTMLElement) {
-		const observer = new IntersectionObserver(
-			(entries) => {
-				tagsVisible = entries[0]?.isIntersecting ?? false;
-			},
-			{ rootMargin: '200px' },
-		);
-		observer.observe(node);
-		return {
-			destroy() {
-				observer.disconnect();
-			},
-		};
-	}
-
-	async function addTag(tagId: string) {
-		const updated = await api.put<Tag[]>(`/files/${fileId}/tags/${tagId}`);
-		fileTags = updated;
-		tagsLoadedFor = fileId ?? null;
-	}
-
-	async function removeTag(tagId: string) {
-		await api.delete(`/files/${fileId}/tags/${tagId}`);
-		fileTags = fileTags.filter((t) => t.id !== tagId);
-	}
-
-	// ---- Navigation ----
-	function navigateTo(f: File | null) {
-		if (!f?.id) return;
-		// Remember where we paged to, so returning to the grid lands here.
-		setLastOpened(f.id);
-		goto(`/files/${f.id}`);
-	}
-
-	// Return to the list the user came from, passing the current file as an
-	// ?anchor=<id> so the grid scrolls back to it (the position is carried in the
-	// URL — survives reload and doesn't depend on hidden in-memory state).
-	// noScroll stops SvelteKit from jumping the list to the top first.
-	function backToList() {
-		const snap = peekFilesSnapshot();
-		const params = new URLSearchParams(snap?.listSearch ?? '');
-		if (fileId) params.set('anchor', fileId);
-		const qs = params.toString();
-		goto('/files' + (qs ? `?${qs}` : ''), { noScroll: true });
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
-		if (e.key === 'ArrowLeft') navigateTo(prevFile);
-		if (e.key === 'ArrowRight') navigateTo(nextFile);
-		if (e.key === 'Escape') backToList();
-	}
-
-	// ---- Helpers ----
-	function formatDatetime(iso: string | null | undefined): string {
-		if (!iso) return '—';
-		return new Date(iso).toLocaleString();
-	}
-
-	// EXIF values may be nested arrays/objects (e.g. rationals, GPS); render those
-	// as JSON instead of the useless "[object Object]".
-	function formatExifValue(val: unknown): string {
-		if (val === null || val === undefined) return '—';
-		if (typeof val === 'object') return JSON.stringify(val);
-		return String(val);
+		goto('/files' + (id ? `?anchor=${id}` : ''), { noScroll: true });
 	}
 </script>
 
 <svelte:head>
-	<title>
-		{file?.original_name ?? fileId} | Tanabata
-	</title>
+	<title>{fileId} | Tanabata</title>
 </svelte:head>
 
-<svelte:window onkeydown={handleKeydown} />
-
-<div class="viewer-page">
-	<!-- Top bar -->
-	<div class="top-bar">
-		<button class="back-btn" onclick={backToList} aria-label="Back to files">
-			<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
-				<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-			</svg>
-		</button>
-		<span class="filename">{file?.original_name ?? ''}</span>
-	</div>
-
-	<!-- Preview -->
-	<div class="preview-wrap">
-		{#if previewSrc}
-			<img src={previewSrc} alt={file?.original_name ?? ''} class="preview-img" />
-		{:else if loading}
-			<div class="preview-placeholder shimmer"></div>
-		{:else}
-			<div class="preview-placeholder failed"></div>
-		{/if}
-
-		<!-- Prev / Next -->
-		{#if prevFile}
-			<button
-				class="nav-btn nav-prev"
-				onclick={() => navigateTo(prevFile)}
-				aria-label="Previous file"
-			>
-				<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
-					<path d="M11 3L5 9L11 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-				</svg>
-			</button>
-		{/if}
-		{#if nextFile}
-			<button
-				class="nav-btn nav-next"
-				onclick={() => navigateTo(nextFile)}
-				aria-label="Next file"
-			>
-				<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
-					<path d="M7 3L13 9L7 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-				</svg>
-			</button>
-		{/if}
-	</div>
-
-	<!-- Metadata panel -->
-	<div class="meta-panel">
-		{#if error}
-			<p class="error" role="alert">{error}</p>
-		{/if}
-
-		{#if file}
-			<!-- File info -->
-			<div class="info-row">
-				<span class="mime">{file.mime_type}</span>
-				<span class="sep">·</span>
-				<span class="created">Added {formatDatetime(file.created_at)}</span>
-			</div>
-
-			<!-- Edit form -->
-			<section class="section">
-				<label class="field-label" for="notes">Notes</label>
-				<textarea
-					id="notes"
-					class="textarea"
-					rows="3"
-					bind:value={notes}
-					oninput={() => (dirty = true)}
-					placeholder="Add notes…"
-				></textarea>
-			</section>
-
-			<section class="section">
-				<label class="field-label" for="datetime">Date taken</label>
-				<input
-					id="datetime"
-					type="datetime-local"
-					class="input"
-					bind:value={contentDatetime}
-					oninput={() => (dirty = true)}
-				/>
-			</section>
-
-			<section class="section toggle-row">
-				<span class="field-label">Public</span>
-				<button
-					class="toggle"
-					class:on={isPublic}
-					onclick={() => { isPublic = !isPublic; dirty = true; }}
-					role="switch"
-					aria-checked={isPublic}
-					aria-label="Public"
-				>
-					<span class="thumb"></span>
-				</button>
-			</section>
-
-			<button
-				class="save-btn"
-				onclick={save}
-				disabled={!dirty || saving}
-			>
-				{saving ? 'Saving…' : 'Save changes'}
-			</button>
-
-			<!-- Tags (loaded lazily on scroll) -->
-			<section class="section" use:tagsSentinel>
-				<div class="field-label">Tags</div>
-				{#if tagsLoaded}
-					<TagPicker {fileTags} onAdd={addTag} onRemove={removeTag} />
-				{:else}
-					<p class="tags-loading">Loading tags…</p>
-				{/if}
-			</section>
-
-			<!-- EXIF -->
-			{#if exifEntries.length > 0}
-				<section class="section">
-					<div class="field-label">EXIF</div>
-					<dl class="exif">
-						{#each exifEntries as [key, val]}
-							<dt>{key}</dt>
-							<dd>{formatExifValue(val)}</dd>
-						{/each}
-					</dl>
-				</section>
-			{/if}
-		{:else if !loading}
-			<p class="empty">File not found.</p>
-		{/if}
-	</div>
-</div>
-
-<style>
-	.viewer-page {
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		padding-bottom: 70px; /* clear navbar */
-	}
-
-	/* ---- Top bar ---- */
-	.top-bar {
-		position: sticky;
-		top: 0;
-		z-index: 20;
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 6px 10px;
-		background-color: var(--color-bg-primary);
-		border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
-		min-height: 44px;
-	}
-
-	.back-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 36px;
-		height: 36px;
-		border-radius: 8px;
-		border: none;
-		background: none;
-		color: var(--color-text-primary);
-		cursor: pointer;
-		flex-shrink: 0;
-	}
-
-	.back-btn:hover {
-		background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
-	}
-
-	.filename {
-		font-size: 0.9rem;
-		color: var(--color-text-muted);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	/* ---- Preview ---- */
-	.preview-wrap {
-		position: relative;
-		background-color: #000;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		/* Fill viewport below the top bar (44px) */
-		height: calc(100dvh - 44px);
-		flex-shrink: 0;
-		overflow: hidden;
-	}
-
-	.preview-img {
-		max-width: 100%;
-		max-height: 100%;
-		object-fit: contain;
-		display: block;
-	}
-
-	.preview-placeholder {
-		width: 100%;
-		height: 100%;
-	}
-
-	.preview-placeholder.shimmer {
-		background: linear-gradient(
-			90deg,
-			#111 25%,
-			#222 50%,
-			#111 75%
-		);
-		background-size: 200% 100%;
-		animation: shimmer 1.4s infinite;
-	}
-
-	.preview-placeholder.failed {
-		background-color: #1a1010;
-	}
-
-	/* ---- Nav buttons ---- */
-	.nav-btn {
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		width: 40px;
-		height: 40px;
-		border-radius: 50%;
-		border: none;
-		background-color: rgba(0, 0, 0, 0.55);
-		color: #fff;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		transition: background-color 0.15s;
-	}
-
-	.nav-btn:hover {
-		background-color: rgba(0, 0, 0, 0.8);
-	}
-
-	.nav-prev { left: 10px; }
-	.nav-next { right: 10px; }
-
-	/* ---- Metadata panel ---- */
-	.meta-panel {
-		padding: 14px 14px 0;
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-	}
-
-	.info-row {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		font-size: 0.8rem;
-		color: var(--color-text-muted);
-		padding-bottom: 10px;
-	}
-
-	.sep { opacity: 0.4; }
-
-	.section {
-		padding: 10px 0;
-		border-top: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
-	}
-
-	.field-label {
-		font-size: 0.75rem;
-		font-weight: 600;
-		color: var(--color-text-muted);
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		margin-bottom: 6px;
-	}
-
-	.textarea {
-		width: 100%;
-		box-sizing: border-box;
-		padding: 8px 10px;
-		border-radius: 6px;
-		border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
-		background-color: var(--color-bg-elevated);
-		color: var(--color-text-primary);
-		font-size: 0.875rem;
-		font-family: inherit;
-		resize: vertical;
-		outline: none;
-		min-height: 70px;
-	}
-
-	.textarea:focus {
-		border-color: var(--color-accent);
-	}
-
-	.input {
-		width: 100%;
-		box-sizing: border-box;
-		height: 36px;
-		padding: 0 10px;
-		border-radius: 6px;
-		border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
-		background-color: var(--color-bg-elevated);
-		color: var(--color-text-primary);
-		font-size: 0.875rem;
-		font-family: inherit;
-		outline: none;
-		color-scheme: dark;
-	}
-
-	.input:focus {
-		border-color: var(--color-accent);
-	}
-
-	/* ---- Toggle ---- */
-	.toggle-row {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding-top: 12px;
-		padding-bottom: 12px;
-	}
-
-	.toggle-row .field-label {
-		margin-bottom: 0;
-	}
-
-	.toggle {
-		position: relative;
-		width: 44px;
-		height: 26px;
-		border-radius: 13px;
-		border: none;
-		background-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-bg-elevated));
-		cursor: pointer;
-		transition: background-color 0.2s;
-		flex-shrink: 0;
-	}
-
-	.toggle.on {
-		background-color: var(--color-accent);
-	}
-
-	.thumb {
-		position: absolute;
-		top: 3px;
-		left: 3px;
-		width: 20px;
-		height: 20px;
-		border-radius: 50%;
-		background-color: #fff;
-		transition: transform 0.2s;
-	}
-
-	.toggle.on .thumb {
-		transform: translateX(18px);
-	}
-
-	/* ---- Save button ---- */
-	.save-btn {
-		width: 100%;
-		height: 40px;
-		border-radius: 8px;
-		border: none;
-		background-color: var(--color-accent);
-		color: var(--color-bg-primary);
-		font-size: 0.9rem;
-		font-weight: 600;
-		font-family: inherit;
-		cursor: pointer;
-		margin-top: 4px;
-		margin-bottom: 4px;
-		transition: background-color 0.15s, opacity 0.15s;
-	}
-
-	.save-btn:hover:not(:disabled) {
-		background-color: var(--color-accent-hover);
-	}
-
-	.save-btn:disabled {
-		opacity: 0.4;
-		cursor: default;
-	}
-
-	/* ---- Tags ---- */
-	.tags-loading {
-		margin: 0;
-		font-size: 0.8rem;
-		color: var(--color-text-muted);
-		opacity: 0.7;
-	}
-
-	/* ---- EXIF ---- */
-	.exif {
-		display: grid;
-		grid-template-columns: auto 1fr;
-		gap: 3px 12px;
-		font-size: 0.78rem;
-		margin: 0;
-	}
-
-	dt {
-		color: var(--color-text-muted);
-		font-weight: 500;
-	}
-
-	dd {
-		margin: 0;
-		color: var(--color-text-primary);
-		word-break: break-word;
-	}
-
-	/* ---- Misc ---- */
-	.error {
-		color: var(--color-danger);
-		font-size: 0.875rem;
-		padding: 8px 0;
-	}
-
-	.empty {
-		color: var(--color-text-muted);
-		font-size: 0.95rem;
-		text-align: center;
-		padding: 40px 0;
-	}
-
-	@keyframes shimmer {
-		0% { background-position: 200% 0; }
-		100% { background-position: -200% 0; }
-	}
-</style>
\ No newline at end of file
+{#if fileId}
+	<FileViewer {fileId} {prevId} {nextId} onNavigate={pageTo} onClose={closeViewer} />
+{/if}