feat(ui): sidebar app shell and bold design system

Replace the top-nav with a fixed left sidebar + slim content topbar
(the Komga/Audiobookshelf layout), the signature change versus the
conservative tighten-ui branch.

- App shell: .app-sidebar (off-canvas on mobile via Alpine mobileMenuOpen,
  pinned at 16rem on lg), .app-topbar (fixed, blurred, 4rem), and
  .app-subbar for in-page sticky bars (parks under the topbar). Content is
  auto-offset via body:has(.app-sidebar) so reader.templ/error.templ (which
  have no sidebar) are untouched.
- Header rebuilt as the sidebar: logo + vertical nav (activeClass), an
  inline Appearance picker driven by ThemeOptions/WoodOptions, and an
  inline account menu / sign-in (preserving the inline htmx login). The
  search lives in the topbar so its dropdown still anchors correctly.
- Bolder primitives: .card -> rounded-2xl, cinematic .book-card-cover
  hover overlay with a quick-action affordance, .brand-gradient hero
  surface, .hero-backdrop (blurred cover) and .stat-card utilities.

templates/library_switcher.templ

@@ -1,24 +1,26 @@
 package templates
 
 templ LibrarySwitcher(libData []LibraryData, currentLibraryID string, actions ...templ.Component) {
-	<div class="sticky top-0 z-40 bg-opacity-95 backdrop-blur border-b" style="background-color: var(--bg-primary);">
-		<div class="w-full px-4 py-3 flex items-center justify-between">
-			<div class="flex items-center gap-4">
-				<label class="text-sm font-medium" style="color: var(--text-secondary)">Library:</label>
+	<div
+		class="app-subbar backdrop-blur border-b"
+		style="background-color: color-mix(in srgb, var(--bg-primary) 88%, transparent); border-color: color-mix(in srgb, var(--text-primary) 6%, transparent);"
+	>
+		<div class="w-full px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between gap-4">
+			<div class="flex items-center gap-3">
+				<label class="text-sm font-medium" style="color: var(--text-secondary)">Library</label>
 				<select
 					id="library-select"
 					name="library_id"
-					class="px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
-					style="background-color: var(--bg-secondary); color: var(--text-primary);"
+					class="input w-auto py-1.5 pr-8 cursor-pointer"
 				>
-				<option value="">All Libraries ({ TotalMediaCount(libData) })</option>
-				for _, lib := range libData {
-					if lib.ID == currentLibraryID {
-						<option value={ lib.ID } selected>{ lib.Name } ({ lib.MediaCount })</option>
-					} else {
-						<option value={ lib.ID }>{ lib.Name } ({ lib.MediaCount })</option>
+					<option value="">All Libraries ({ TotalMediaCount(libData) })</option>
+					for _, lib := range libData {
+						if lib.ID == currentLibraryID {
+							<option value={ lib.ID } selected>{ lib.Name } ({ lib.MediaCount })</option>
+						} else {
+							<option value={ lib.ID }>{ lib.Name } ({ lib.MediaCount })</option>
+						}
 					}
-				}
 				</select>
 			</div>
 			if len(actions) > 0 {
@@ -42,18 +44,16 @@ templ LibrarySwitcher(libData []LibraryData, currentLibraryID string, actions ..
 templ DashboardActions() {
 	<button
 		data-action="open-dashboard-settings"
-		class="p-2 rounded-lg hover:bg-gray-700 transition-colors"
-		style="background-color: var(--bg-secondary);"
+		class="icon-btn"
 		title="Customize Dashboard"
 	>
-		⚙️
+		@Icon("settings", "h-5 w-5")
 	</button>
 	<button
 		data-action="reload-page"
-		class="p-2 rounded-lg hover:bg-gray-700 transition-colors"
-		style="background-color: var(--bg-secondary);"
+		class="icon-btn"
 		title="Refresh"
 	>
-		🔄
+		@Icon("refresh", "h-5 w-5")
 	</button>
 }