fix(reader): add test font, expand ranges, fix colors, add restore defaults

- Add Comic Sans MS as a test font option to verify font switching works
- Add !important to background-color and color in getCSS() to prevent
  book CSS from overriding user's reading theme colors
- Expand font size range from 12-24px to 10-40px, bump default to 18px
- Expand line height range from 1.0-2.5 to 0.8-3.0
- Add restoreDefaults() method that resets reading theme, font, size,
  line height, and justify/hyphenate to sensible defaults
- Add ↩️ restore defaults button in top bar underneath the settings gear

templates/reader.templ

@@ -60,16 +60,24 @@ templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 					← Back
 				</a>
 				<h1 class="text-lg font-semibold">{ metadata.Title }</h1>
-				<button
-					@click="toggleSettings()"
-					class="p-2 rounded-lg hover:bg-gray-700"
-					title="Settings"
-				>
-					⚙️
-				</button>
+				<div class="flex flex-col items-center gap-0.5">
+					<button
+						@click="toggleSettings()"
+						class="p-2 rounded-lg hover:bg-gray-700"
+						title="Settings"
+					>
+						⚙️
+					</button>
+					<button
+						@click="restoreDefaults()"
+						class="p-1 rounded-lg hover:bg-gray-700 text-xs"
+						title="Restore Defaults"
+					>
+						↩️
+					</button>
+				</div>
 			</div>
-		</div>
-		<!-- Bottom bar -->
+		</div>		<!-- Bottom bar -->
 		<div class="fixed bottom-0 left-0 right-0 bg-opacity-95 backdrop-blur border-t z-40" style="background-color: var(--bg-primary);">
 			<div class="flex items-center px-2 py-2 gap-1">
 				<!-- Left navigation -->
@@ -251,16 +259,17 @@ templ ReaderSettingsPanel() {
 						<option value="noto-serif">Noto Serif</option>
 						<option value="charis-sil">Charis SIL</option>
 						<option value="ibm-plex">IBM Plex Serif</option>
+						<option value="comic-sans">Comic Sans MS (Test)</option>
 					</select>
 				</label>
 				<label class="block mb-2">
 					Font Size
-					<input type="range" name="font_size" x-model.number="fontSize" @change="applyFont()" min="12" max="24" class="w-full"/>
-					<span class="text-xs" x-text="fontSize + 'px'" style="color: var(--text-secondary)">16px</span>
+					<input type="range" name="font_size" x-model.number="fontSize" @change="applyFont()" min="10" max="40" class="w-full"/>
+					<span class="text-xs" x-text="fontSize + 'px'" style="color: var(--text-secondary)">18px</span>
 				</label>
 				<label class="block mb-2">
 					Line Height
-					<input type="range" name="line_height" x-model.number="lineHeight" @change="applyFont()" min="1.0" max="2.5" step="0.1" class="w-full"/>
+					<input type="range" name="line_height" x-model.number="lineHeight" @change="applyFont()" min="0.8" max="3.0" step="0.1" class="w-full"/>
 					<span class="text-xs" x-text="lineHeight" style="color: var(--text-secondary)">1.6</span>
 				</label>
 			</div>