feat(reader): webtoon reading mode + brightness/contrast/night filters

Phase 4 of the reader redesign (foliate-js ea268df):

- Webtoon mode for comics: continuous vertical scroll of all pages
  (900px centered column on wide screens), lazy-loaded with a 150%
  IntersectionObserver margin, far pages unloaded to bound memory
  with stable aspect-ratio placeholders so the scrollbar never jumps.
  Chosen per book (Paged | Webtoon segmented control in Settings →
  Layout & Display; stored in localStorage per media item since a
  webtoon title and a paged manga volume want different flows).
  Toggling reloads the reader — the renderer is chosen at open time —
  and progress restores from the saved page. Relocate events flow
  through the same pipeline, so the slider, progress saving, back
  stack, tap zones, and edge zones all work unchanged. Zoom/fit/
  magnifier/spread controls hide in webtoon (natural-width scroll).
- Display filters for fixed-layout: brightness (30-130%) and
  contrast (70-130%) sliders with live preview, plus Night Mode
  (invert) — also a quick row in the ⋯ tools menu. One --fx-filter
  CSS var drives everything: ::part(filter) on foliate-view iframes
  (forwarded via the new exportparts attribute) and the webtoon
  page images alike. Persisted as fx_brightness/fx_contrast/fx_invert
  (types + defaults both sides); Restore Defaults resets them.

templates/reader.templ

@@ -70,7 +70,7 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
 			<!-- Reading surface: edge-to-edge. Chrome overlays translucently;
 			     drawers and scrim float above everything. -->
 			<div id="reader-viewport" class="fixed inset-0">
-				<foliate-view id="reader-view" class="block w-full h-full"></foliate-view>
+				<foliate-view id="reader-view" exportparts="filter" class="block w-full h-full"></foliate-view>
 				<!-- Desktop edge page-turn zones: hover to reveal the arrow.
 				     Hidden on touch (tap zones cover that) and while a
 				     fixed-layout page is zoomed (edges belong to content then). -->
@@ -413,8 +413,8 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 					</svg>
 				</button>
 				<div class="w-px h-6 mx-1 reader-sep"></div>
-				<!-- Fit mode + zoom cluster -->
-				<div class="flex items-center gap-1">
+				<!-- Fit mode + zoom cluster (not applicable in webtoon flow) -->
+				<div class="flex items-center gap-1" x-show="comicFlow !== 'webtoon'">
 					<select
 						@change="applyFitMode($event.target.value)"
 						class="reader-select text-xs px-1.5 py-1 rounded-lg shrink-0"
@@ -458,8 +458,8 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 					<button :class="interactionMode === 'pan' ? 'active' : ''" @click="setInteractionMode('pan')" title="Pan: drag anywhere to move">Pan</button>
 					<button :class="interactionMode === 'text' ? 'active' : ''" @click="setInteractionMode('text')" title="Text: selection only, never pan (Shift overrides)">Text</button>
 				</div>
-				<!-- Double page spread -->
-				<button @click="toggleSpread()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" :class="doublePageSpread ? 'bg-blue-600 hover:bg-blue-700' : ''" title="Double Page Spread" aria-label="Toggle double page spread">
+				<!-- Double page spread (not applicable in webtoon flow) -->
+				<button x-show="comicFlow !== 'webtoon'" @click="toggleSpread()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" :class="doublePageSpread ? 'bg-blue-600 hover:bg-blue-700' : ''" title="Double Page Spread" aria-label="Toggle double page spread">
 					<svg class="reader-icon" width="20" height="20" aria-hidden="true">
 						<path d="M 3 5 h 6 v 14 h -6 z M 15 5 h 6 v 14 h -6 z"></path>
 					</svg>
@@ -540,7 +540,7 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 					aria-label="Reader tools"
 					@pointerdown.stop
 				>
-					<div class="reader-tools-row">
+					<div class="reader-tools-row" x-show="comicFlow !== 'webtoon'">
 						<span>Zoom</span>
 						<div class="flex items-center gap-1">
 							<button @click="zoomOut()" class="reader-popover-btn" title="Zoom out">−</button>
@@ -548,7 +548,7 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 							<button @click="zoomIn()" class="reader-popover-btn" title="Zoom in">+</button>
 						</div>
 					</div>
-					<div class="reader-tools-row">
+					<div class="reader-tools-row" x-show="comicFlow !== 'webtoon'">
 						<span>Fit</span>
 						<select
 							@change="applyFitMode($event.target.value)"
@@ -559,14 +559,18 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 							<option value="fit-width">Fit Width</option>
 						</select>
 					</div>
-					<div class="reader-tools-row">
+					<div class="reader-tools-row" x-show="comicFlow !== 'webtoon'">
 						<span>Page position</span>
 						<button @click="recenterView()" class="reader-popover-btn text-xs px-2" title="Reset pan, keep zoom">Recenter</button>
 					</div>
-					<div class="reader-tools-row">
+					<div class="reader-tools-row" x-show="comicFlow !== 'webtoon'">
 						<span>Magnifier</span>
 						<button @click="toggleMagnifier()" class="reader-popover-btn text-xs px-2" :class="magnifierEnabled ? 'text-blue-400' : ''" x-text="magnifierEnabled ? 'On' : 'Off'">Off</button>
 					</div>
+					<div class="reader-tools-row" x-show="comicFlow !== 'webtoon'">
+						<span>Night mode</span>
+						<button @click="fxInvert = !fxInvert; applyFxFilter(true)" class="reader-popover-btn text-xs px-2" :class="fxInvert ? 'text-blue-400' : ''" x-text="fxInvert ? 'On' : 'Off'">Off</button>
+					</div>
 					<div class="reader-tools-row" x-show="isPDF">
 						<span>Pointer</span>
 						<div class="reader-seg" role="group" aria-label="Pointer mode">
@@ -575,7 +579,7 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 							<button :class="interactionMode === 'text' ? 'active' : ''" @click="setInteractionMode('text')">Text</button>
 						</div>
 					</div>
-					<div class="reader-tools-row">
+					<div class="reader-tools-row" x-show="comicFlow !== 'webtoon'">
 						<span>Double page</span>
 						<button @click="toggleSpread()" class="reader-popover-btn text-xs px-2" :class="doublePageSpread ? 'text-blue-400' : ''" x-text="doublePageSpread ? 'On' : 'Off'">Off</button>
 					</div>
@@ -892,10 +896,31 @@ templ ReaderSettingsDrawer() {
 				<span class="text-xs" x-text="lineHeight" style="color: var(--text-secondary)">1.6</span>
 			</label>
 		</div>
-		<!-- Layout (fixed-layout only) -->
+		<!-- Layout & display (fixed-layout only) -->
 		<div class="mb-6" x-show="isFixedLayout">
-			<h3 class="font-semibold mb-2">Layout</h3>
+			<h3 class="font-semibold mb-2">Layout &amp; Display</h3>
+			<label class="block mb-3" x-show="isComic">
+				Reading Flow
+				<div class="reader-seg w-full mt-1" role="group" aria-label="Reading flow">
+					<button type="button" class="flex-1" :class="comicFlow !== 'webtoon' ? 'active' : ''" @click="setComicFlow('paged')" title="One page or spread at a time">Paged</button>
+					<button type="button" class="flex-1" :class="comicFlow === 'webtoon' ? 'active' : ''" @click="setComicFlow('webtoon')" title="Continuous vertical scroll (long-strip)">Webtoon</button>
+				</div>
+			</label>
+			<label class="block mb-2">
+				Brightness
+				<input type="range" name="fx_brightness" x-model.number="fxBrightness" @input="applyFxFilter()" @change="applyFxFilter(true)" min="0.3" max="1.3" step="0.05" class="w-full"/>
+				<span class="text-xs" x-text="Math.round(fxBrightness * 100) + '%'" style="color: var(--text-secondary)">100%</span>
+			</label>
+			<label class="block mb-2">
+				Contrast
+				<input type="range" name="fx_contrast" x-model.number="fxContrast" @input="applyFxFilter()" @change="applyFxFilter(true)" min="0.7" max="1.3" step="0.05" class="w-full"/>
+				<span class="text-xs" x-text="Math.round(fxContrast * 100) + '%'" style="color: var(--text-secondary)">100%</span>
+			</label>
 			<label class="flex items-center mb-2">
+				<input type="checkbox" name="fx_invert" x-model="fxInvert" @change="applyFxFilter(true)" class="mr-2"/>
+				Night Mode <span class="text-xs ml-1" style="color: var(--text-secondary)">(invert)</span>
+			</label>
+			<label class="flex items-center mb-2" x-show="comicFlow !== 'webtoon'">
 				<input type="checkbox" name="double_page_spread" x-model="doublePageSpread" @change="applyDoublePageSpread()" class="mr-2"/>
 				Double Page Spread
 			</label>