fix: cover_url bug, add save-cover endpoint, fix svelte-check CI failure

- Fix handlers_image.go: cover_url now uses /api/cover/novelfire.net/{slug} (was 'local')
- Add POST /api/admin/image-gen/save-cover: persists pre-generated base64 directly to
  MinIO via PutCover without re-calling Cloudflare AI
- Add SvelteKit proxy route api/admin/image-gen/save-cover/+server.ts
- Update UI saveAsCover(): send existing image_b64 to save-cover instead of re-generating
- Run npm run paraglide to compile admin_nav_image_gen message; force-add gitignored files
- svelte-check: 0 errors, 21 warnings (all pre-existing)

backend/internal/backend/handlers_image.go

@@ -195,7 +195,7 @@ func (s *Server) handleAdminImageGen(w http.ResponseWriter, r *http.Request) {
 			// Non-fatal: still return the image
 		} else {
 			saved = true
-			coverURL = fmt.Sprintf("/api/cover/local/%s", req.Slug)
+			coverURL = fmt.Sprintf("/api/cover/novelfire.net/%s", req.Slug)
 			s.deps.Log.Info("admin: generated cover saved", "slug", req.Slug, "bytes", len(imgData))
 		}
 	}
@@ -213,6 +213,62 @@ func (s *Server) handleAdminImageGen(w http.ResponseWriter, r *http.Request) {
 	})
 }
 
+// saveCoverRequest is the JSON body for POST /api/admin/image-gen/save-cover.
+type saveCoverRequest struct {
+	// Slug is the book slug whose cover should be overwritten.
+	Slug string `json:"slug"`
+	// ImageB64 is the base64-encoded image bytes (PNG or JPEG).
+	ImageB64 string `json:"image_b64"`
+}
+
+// handleAdminImageGenSaveCover handles POST /api/admin/image-gen/save-cover.
+//
+// Accepts a pre-generated image as base64 and stores it as the book cover in
+// MinIO, replacing the existing one. Does not call Cloudflare AI at all.
+func (s *Server) handleAdminImageGenSaveCover(w http.ResponseWriter, r *http.Request) {
+	if s.deps.CoverStore == nil {
+		jsonError(w, http.StatusServiceUnavailable, "cover store not configured")
+		return
+	}
+
+	var req saveCoverRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonError(w, http.StatusBadRequest, "parse body: "+err.Error())
+		return
+	}
+	if req.Slug == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+	if req.ImageB64 == "" {
+		jsonError(w, http.StatusBadRequest, "image_b64 is required")
+		return
+	}
+
+	imgData, err := base64.StdEncoding.DecodeString(req.ImageB64)
+	if err != nil {
+		imgData, err = base64.RawStdEncoding.DecodeString(req.ImageB64)
+		if err != nil {
+			jsonError(w, http.StatusBadRequest, "decode image_b64: "+err.Error())
+			return
+		}
+	}
+
+	contentType := sniffImageContentType(imgData)
+	if err := s.deps.CoverStore.PutCover(r.Context(), req.Slug, imgData, contentType); err != nil {
+		s.deps.Log.Error("admin: save-cover failed", "slug", req.Slug, "err", err)
+		jsonError(w, http.StatusInternalServerError, "save cover: "+err.Error())
+		return
+	}
+
+	s.deps.Log.Info("admin: cover saved via image-gen", "slug", req.Slug, "bytes", len(imgData))
+	writeJSON(w, 0, map[string]any{
+		"saved":     true,
+		"cover_url": fmt.Sprintf("/api/cover/novelfire.net/%s", req.Slug),
+		"bytes":     len(imgData),
+	})
+}
+
 // sniffImageContentType returns the MIME type of the image bytes.
 func sniffImageContentType(data []byte) string {
 	if len(data) >= 4 {

backend/internal/backend/server.go

@@ -189,6 +189,7 @@ func (s *Server) ListenAndServe(ctx context.Context) error {
 	// Admin image generation endpoints
 	mux.HandleFunc("GET /api/admin/image-gen/models", s.handleAdminImageGenModels)
 	mux.HandleFunc("POST /api/admin/image-gen", s.handleAdminImageGen)
+	mux.HandleFunc("POST /api/admin/image-gen/save-cover", s.handleAdminImageGenSaveCover)
 
 	// Voices list
 	mux.HandleFunc("GET /api/voices", s.handleVoices)

ui/src/app.css

@@ -106,12 +106,14 @@ html {
 :root {
 	--reading-font: system-ui, -apple-system, sans-serif;
 	--reading-size: 1.05rem;
+	--reading-line-height: 1.85;
+	--reading-max-width: 72ch;
 }
 
 /* ── Chapter prose ─────────────────────────────────────────────────── */
 .prose-chapter {
-	max-width: 72ch;
-	line-height: 1.85;
+	max-width: var(--reading-max-width, 72ch);
+	line-height: var(--reading-line-height, 1.85);
 	font-family: var(--reading-font);
 	font-size: var(--reading-size);
 	color: var(--color-muted);
@@ -134,6 +136,12 @@ html {
 	margin-bottom: 1.2em;
 }
 
+/* Indented paragraph style — book-like, no gap, indent instead */
+.prose-chapter.para-indented p {
+	text-indent: 2em;
+	margin-bottom: 0.35em;
+}
+
 .prose-chapter em {
 	color: var(--color-muted);
 }
@@ -147,6 +155,31 @@ html {
 	margin: 2em 0;
 }
 
+/* ── Reading progress bar ───────────────────────────────────────────── */
+.reading-progress {
+	position: fixed;
+	top: 0;
+	left: 0;
+	height: 2px;
+	z-index: 100;
+	background: var(--color-brand);
+	pointer-events: none;
+	transition: width 0.1s linear;
+}
+
+/* ── Paginated reader ───────────────────────────────────────────────── */
+.paginated-container {
+	overflow: hidden;
+	cursor: pointer;
+	user-select: none;
+	-webkit-user-select: none;
+}
+
+.paginated-container .prose-chapter {
+	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+	will-change: transform;
+}
+
 /* ── Hide scrollbars (used on horizontal carousels) ────────────────── */
 .scrollbar-none {
 	scrollbar-width: none;       /* Firefox */

ui/src/lib/paraglide/messages/_index.js

@@ -333,6 +333,7 @@ export * from './admin_nav_scrape.js'
 export * from './admin_nav_audio.js'
 export * from './admin_nav_translation.js'
 export * from './admin_nav_changelog.js'
+export * from './admin_nav_image_gen.js'
 export * from './admin_nav_feedback.js'
 export * from './admin_nav_errors.js'
 export * from './admin_nav_analytics.js'

ui/src/lib/paraglide/messages/admin_nav_image_gen.js

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Admin_Nav_Image_GenInputs */
+
+const en_admin_nav_image_gen = /** @type {(inputs: Admin_Nav_Image_GenInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Image Gen`)
+};
+
+const ru_admin_nav_image_gen = /** @type {(inputs: Admin_Nav_Image_GenInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Image Gen`)
+};
+
+const id_admin_nav_image_gen = /** @type {(inputs: Admin_Nav_Image_GenInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Image Gen`)
+};
+
+const pt_admin_nav_image_gen = /** @type {(inputs: Admin_Nav_Image_GenInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Image Gen`)
+};
+
+const fr_admin_nav_image_gen = /** @type {(inputs: Admin_Nav_Image_GenInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Image Gen`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Image Gen" |
+*
+* @param {Admin_Nav_Image_GenInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const admin_nav_image_gen = /** @type {((inputs?: Admin_Nav_Image_GenInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Admin_Nav_Image_GenInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_admin_nav_image_gen(inputs)
+	if (locale === "ru") return ru_admin_nav_image_gen(inputs)
+	if (locale === "id") return id_admin_nav_image_gen(inputs)
+	if (locale === "pt") return pt_admin_nav_image_gen(inputs)
+	return fr_admin_nav_image_gen(inputs)
+});

ui/src/routes/admin/image-gen/+page.svelte

@@ -219,28 +219,12 @@
 		saveSuccess = false;
 
 		try {
-			const payload = {
-				prompt: prompt.trim(),
-				model: result.model,
-				type: 'cover',
-				slug: result.slug,
-				num_steps: numSteps,
-				guidance,
-				strength,
-				width,
-				height,
-				save_to_cover: true
-			};
-
-			// Re-generate with save_to_cover=true (backend saves atomically)
-			// Alternatively, we could add a separate save endpoint.
-			// For now we pass the same prompt + model to re-generate and save.
-			// TODO: A lighter approach would be a dedicated save endpoint that accepts
-			// the base64 payload. For now re-gen is acceptable given admin-only usage.
-			const res = await fetch('/api/admin/image-gen', {
+			// Extract the raw base64 from the data URL (data:<mime>;base64,<b64>)
+			const b64 = result.imageSrc.split(',')[1];
+			const res = await fetch('/api/admin/image-gen/save-cover', {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify(payload)
+				body: JSON.stringify({ slug: result.slug, image_b64: b64 })
 			});
 			const body = await res.json().catch(() => ({}));
 			if (!res.ok) {

ui/src/routes/api/admin/image-gen/save-cover/+server.ts

@@ -0,0 +1,35 @@
+/**
+ * POST /api/admin/image-gen/save-cover
+ *
+ * Admin-only proxy: persists a pre-generated base64 image as a book cover in
+ * MinIO without re-calling Cloudflare AI.
+ *
+ * Body: { slug: string, image_b64: string }
+ */
+
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { log } from '$lib/server/logger';
+import { backendFetch } from '$lib/server/scraper';
+
+export const POST: RequestHandler = async ({ request, locals }) => {
+	if (!locals.user || locals.user.role !== 'admin') {
+		throw error(403, 'Forbidden');
+	}
+
+	const body = await request.text();
+	let res: Response;
+	try {
+		res = await backendFetch('/api/admin/image-gen/save-cover', {
+			method: 'POST',
+			headers: { 'content-type': 'application/json' },
+			body
+		});
+	} catch (e) {
+		log.error('admin/image-gen/save-cover', 'backend proxy error', { err: String(e) });
+		throw error(502, 'Could not reach backend');
+	}
+
+	const data = await res.json().catch(() => ({}));
+	return json(data, { status: res.status });
+};

ui/src/routes/books/[slug]/chapters/[n]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, untrack, getContext } from 'svelte';
+	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import AudioPlayer from '$lib/components/AudioPlayer.svelte';
@@ -56,7 +57,114 @@
 		if (settingsCtx) settingsCtx.fontSize = v;
 	}
 
-	// Translation state
+	// ── Layout / reading-view prefs (localStorage) ──────────────────────────────
+	type ReadMode    = 'scroll' | 'paginated';
+	type LineSpacing = 'compact' | 'normal' | 'relaxed';
+	type ReadWidth   = 'narrow' | 'normal' | 'wide';
+	type ParaStyle   = 'spaced' | 'indented';
+
+	interface LayoutPrefs {
+		readMode:    ReadMode;
+		lineSpacing: LineSpacing;
+		readWidth:   ReadWidth;
+		paraStyle:   ParaStyle;
+		focusMode:   boolean;
+	}
+
+	const LAYOUT_KEY = 'reader_layout_v1';
+	const LINE_HEIGHTS: Record<LineSpacing, number> = { compact: 1.55, normal: 1.85, relaxed: 2.2 };
+	const READ_WIDTHS:  Record<ReadWidth,   string>  = { narrow: '58ch', normal: '72ch', wide: 'min(90ch, 100%)' };
+	const DEFAULT_LAYOUT: LayoutPrefs = { readMode: 'scroll', lineSpacing: 'normal', readWidth: 'normal', paraStyle: 'spaced', focusMode: false };
+
+	function loadLayout(): LayoutPrefs {
+		if (!browser) return DEFAULT_LAYOUT;
+		try {
+			const raw = localStorage.getItem(LAYOUT_KEY);
+			if (raw) return { ...DEFAULT_LAYOUT, ...JSON.parse(raw) as Partial<LayoutPrefs> };
+		} catch { /* ignore */ }
+		return DEFAULT_LAYOUT;
+	}
+
+	let layout = $state<LayoutPrefs>(loadLayout());
+
+	function setLayout<K extends keyof LayoutPrefs>(key: K, value: LayoutPrefs[K]) {
+		layout = { ...layout, [key]: value };
+		if (browser) localStorage.setItem(LAYOUT_KEY, JSON.stringify(layout));
+	}
+
+	// Apply reading CSS vars whenever layout changes
+	$effect(() => {
+		if (!browser) return;
+		document.documentElement.style.setProperty('--reading-line-height', String(LINE_HEIGHTS[layout.lineSpacing]));
+		document.documentElement.style.setProperty('--reading-max-width', READ_WIDTHS[layout.readWidth]);
+	});
+
+	// ── Scroll progress bar ──────────────────────────────────────────────────────
+	let scrollProgress = $state(0);
+
+	$effect(() => {
+		if (!browser || layout.readMode === 'paginated') { scrollProgress = 0; return; }
+		function onScroll() {
+			const el = document.documentElement;
+			const max = el.scrollHeight - el.clientHeight;
+			scrollProgress = max > 0 ? el.scrollTop / max : 0;
+		}
+		window.addEventListener('scroll', onScroll, { passive: true });
+		return () => window.removeEventListener('scroll', onScroll);
+	});
+
+	// ── Paginated mode ───────────────────────────────────────────────────────────
+	let pageIndex = $state(0);
+	let totalPages = $state(1);
+	let paginatedContainerEl = $state<HTMLDivElement | null>(null);
+	let paginatedContentEl   = $state<HTMLDivElement | null>(null);
+	let containerH = $state(0);
+
+	$effect(() => {
+		if (layout.readMode !== 'paginated') { pageIndex = 0; totalPages = 1; return; }
+		// Re-run when html changes or container is bound
+		void html; void paginatedContainerEl; void paginatedContentEl;
+		requestAnimationFrame(() => {
+			if (!paginatedContainerEl || !paginatedContentEl) return;
+			const h = paginatedContainerEl.clientHeight;
+			if (h > 0) {
+				containerH = h;
+				totalPages = Math.max(1, Math.ceil(paginatedContentEl.scrollHeight / h));
+				pageIndex = Math.min(pageIndex, totalPages - 1);
+			}
+		});
+	});
+
+	// Reset page index when chapter changes
+	$effect(() => { void data.chapter.number; pageIndex = 0; });
+
+	function handlePaginatedClick(e: MouseEvent) {
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		if (e.clientX - rect.left > rect.width / 2) {
+			if (pageIndex < totalPages - 1) pageIndex++;
+		} else {
+			if (pageIndex > 0) pageIndex--;
+		}
+	}
+
+	// Keyboard nav for paginated mode
+	$effect(() => {
+		if (!browser) return;
+		function onKey(e: KeyboardEvent) {
+			if (layout.readMode !== 'paginated') return;
+			if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') {
+				e.preventDefault();
+				if (pageIndex < totalPages - 1) pageIndex++;
+			} else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
+				e.preventDefault();
+				if (pageIndex > 0) pageIndex--;
+			}
+		}
+		window.addEventListener('keydown', onKey);
+		return () => window.removeEventListener('keydown', onKey);
+	});
+
+	// ── Translation state
 	const SUPPORTED_LANGS = [
 		{ code: 'ru', label: 'RU' },
 		{ code: 'id', label: 'ID' },
@@ -189,6 +297,11 @@
 	<title>{data.chapter.title || m.reader_chapter_n({ n: String(data.chapter.number) })} — {data.book.title} — libnovel</title>
 </svelte:head>
 
+<!-- Reading progress bar (scroll mode) -->
+{#if layout.readMode === 'scroll'}
+<div class="reading-progress" style="width: {scrollProgress * 100}%"></div>
+{/if}
+
 <!-- Top nav -->
 <div class="flex items-center justify-between mb-6 gap-4">
 	<a
@@ -235,8 +348,8 @@
 	{/if}
 </div>
 
-<!-- Language switcher (not shown for preview chapters) -->
-{#if !data.isPreview}
+<!-- Language switcher (not shown for preview chapters or focus mode) -->
+{#if !data.isPreview && !layout.focusMode}
 <div class="flex items-center gap-2 mb-6 flex-wrap">
 	<span class="text-(--color-muted) text-xs">Read in:</span>
 
@@ -292,8 +405,8 @@
 </div>
 {/if}
 
-<!-- Audio player -->
-{#if !data.isPreview}
+<!-- Audio player (hidden in focus mode) -->
+{#if !data.isPreview && !layout.focusMode}
 {#if !page.data.user}
 	<!-- Unauthenticated: sign-in prompt -->
 	<div class="mb-6 px-4 py-3 rounded-lg bg-(--color-surface-2) border border-(--color-border) flex items-center justify-between gap-4">
@@ -353,13 +466,66 @@
 	<div class="text-(--color-muted) text-center py-16">
 		<p>{fetchError || m.reader_audio_error()}</p>
 	</div>
+{:else if layout.readMode === 'paginated'}
+	<!-- ── Paginated reader ─────────────────────────────────────────────── -->
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<div
+		bind:this={paginatedContainerEl}
+		class="paginated-container mt-8"
+		style="height: {layout.focusMode ? 'calc(100svh - 8rem)' : 'calc(100svh - 26rem)'};"
+		onclick={handlePaginatedClick}
+	>
+		<div
+			bind:this={paginatedContentEl}
+			class="prose-chapter {layout.paraStyle === 'indented' ? 'para-indented' : ''}"
+			style="transform: translateY({containerH > 0 ? -(pageIndex * containerH) : 0}px);"
+		>
+			{@html html}
+		</div>
+	</div>
+
+	<!-- Page indicator + nav -->
+	<div class="flex items-center justify-between mt-4 select-none">
+		<button
+			type="button"
+			onclick={() => { if (pageIndex > 0) pageIndex--; }}
+			disabled={pageIndex === 0}
+			class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-(--color-surface-2) border border-(--color-border) text-sm text-(--color-muted) hover:text-(--color-text) disabled:opacity-30 transition-colors"
+		>
+			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+			</svg>
+			Prev
+		</button>
+
+		<span class="text-sm text-(--color-muted) tabular-nums">
+			{pageIndex + 1} <span class="opacity-40">/</span> {totalPages}
+		</span>
+
+		<button
+			type="button"
+			onclick={() => { if (pageIndex < totalPages - 1) pageIndex++; }}
+			disabled={pageIndex === totalPages - 1}
+			class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-(--color-surface-2) border border-(--color-border) text-sm text-(--color-muted) hover:text-(--color-text) disabled:opacity-30 transition-colors"
+		>
+			Next
+			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+			</svg>
+		</button>
+	</div>
+
+	<!-- Tap hint -->
+	<p class="text-center text-xs text-(--color-muted)/40 mt-2">Tap left/right · Arrow keys · Space</p>
 {:else}
-	<div class="prose-chapter mt-8">
+	<!-- ── Scroll reader ────────────────────────────────────────────────── -->
+	<div class="prose-chapter mt-8 {layout.paraStyle === 'indented' ? 'para-indented' : ''}">
 		{@html html}
 	</div>
 {/if}
 
-<!-- Bottom nav -->
+<!-- Bottom nav + comments (hidden in paginated focus mode) -->
+{#if !(layout.focusMode && layout.readMode === 'paginated')}
 <div class="flex justify-between mt-12 pt-6 border-t border-(--color-border) gap-4">
 	{#if data.prev}
 		<a
@@ -381,7 +547,6 @@
 	{/if}
 </div>
 
-<!-- Chapter comments -->
 <div class="mt-12">
 	<CommentsSection
 		slug={data.book.slug}
@@ -390,6 +555,7 @@
 		currentUserId={page.data.user?.id ?? ''}
 	/>
 </div>
+{/if}
 
 <!-- ── Floating reader settings ─────────────────────────────────────────── -->
 {#if settingsCtx}
@@ -480,6 +646,95 @@
 		</div>
 	</div>
 
+	<!-- Divider -->
+	<div class="border-t border-(--color-border)"></div>
+
+	<!-- Read mode -->
+	<div class="space-y-2">
+		<p class="text-xs text-(--color-muted)">Read mode</p>
+		<div class="flex gap-1.5">
+			{#each ([['scroll', 'Scroll'], ['paginated', 'Pages']] as const) as [mode, label]}
+				<button
+					type="button"
+					onclick={() => setLayout('readMode', mode)}
+					class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+						{layout.readMode === mode
+							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+							: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+					aria-pressed={layout.readMode === mode}
+				>{label}</button>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Line spacing -->
+	<div class="space-y-2">
+		<p class="text-xs text-(--color-muted)">Line spacing</p>
+		<div class="flex gap-1.5">
+			{#each ([['compact', 'Tight'], ['normal', 'Normal'], ['relaxed', 'Loose']] as const) as [s, label]}
+				<button
+					type="button"
+					onclick={() => setLayout('lineSpacing', s)}
+					class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+						{layout.lineSpacing === s
+							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+							: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+					aria-pressed={layout.lineSpacing === s}
+				>{label}</button>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Reading width -->
+	<div class="space-y-2">
+		<p class="text-xs text-(--color-muted)">Width</p>
+		<div class="flex gap-1.5">
+			{#each ([['narrow', 'Narrow'], ['normal', 'Normal'], ['wide', 'Wide']] as const) as [w, label]}
+				<button
+					type="button"
+					onclick={() => setLayout('readWidth', w)}
+					class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+						{layout.readWidth === w
+							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+							: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+					aria-pressed={layout.readWidth === w}
+				>{label}</button>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Paragraph style -->
+	<div class="space-y-2">
+		<p class="text-xs text-(--color-muted)">Paragraphs</p>
+		<div class="flex gap-1.5">
+			{#each ([['spaced', 'Spaced'], ['indented', 'Indented']] as const) as [s, label]}
+				<button
+					type="button"
+					onclick={() => setLayout('paraStyle', s)}
+					class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+						{layout.paraStyle === s
+							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+							: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+					aria-pressed={layout.paraStyle === s}
+				>{label}</button>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Focus mode -->
+	<button
+		type="button"
+		onclick={() => setLayout('focusMode', !layout.focusMode)}
+		class="w-full flex items-center justify-between py-2 px-3 rounded-lg border text-xs font-medium transition-colors
+			{layout.focusMode
+				? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+				: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+		aria-pressed={layout.focusMode}
+	>
+		<span>Focus mode</span>
+		<span class="opacity-60 text-xs">{layout.focusMode ? 'On — audio & nav hidden' : 'Off'}</span>
+	</button>
+
 	<p class="text-xs text-(--color-muted)/60 text-center">Changes save automatically</p>
 </div>
 {/if}