feat(ui): migrate remaining pages to the new shell

Apply the sidebar shell and bold primitives across the rest of the app so
the whole experience shares one visual language:

- Browse/organize: series (keeps stacked-covers/series-card CSS),
  collections (keeps wood-paneling + carousel classes), browse_detail.
- Account/stats: profile + form + modal, progress, analytics (stat-card
  tiles), devices, conflicts (status semantics), queue (status/priority
  badges).
- Admin: admin sidebar restyled with icons, dashboard/users/library/
  processing-issues/settings migrated to .card/.btn/.input primitives.
- Docs/setup/misc: docs (keeps prose/highlight.js), api_explorer, setup
  wizard, unlinked_books, custom_section builder.
- Modals/fragments: collection_modal, collection_rules,
  restore_system_collection_modal, filter_item, book_detail_modals — all
  overlays use --surface-overlay + --shadow-pop.

Every Alpine handler, HTMX attribute, id, name, and data-* is preserved;
only presentation changes.

templates/admin_sidebar.templ

@@ -1,23 +1,32 @@
 package templates
 
 templ AdminSidebar(user User, currentPath string) {
-	<aside class="w-64 border-r" style="background-color: var(--bg-secondary); border-color: var(--border)">
-		<div class="p-6">
-			<h2 class="text-lg font-semibold mb-6" style="color: var(--text-primary)">Admin Panel</h2>
-			<nav class="space-y-2">
-				<a href="/admin" class={activeClass(currentPath, "/admin")} style="color: var(--text-primary)">
-					🏠 Dashboard
+	<aside class="w-64 shrink-0 self-start sticky top-16 h-[calc(100vh-4rem)] overflow-y-auto border-r" style="background-color: var(--bg-secondary); border-color: var(--border);">
+		<div class="p-5">
+			<div class="flex items-center gap-2 mb-6 px-2">
+				<span class="grid place-items-center h-8 w-8 rounded-lg shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
+					@Icon("shield", "h-4 w-4")
+				</span>
+				<h2 class="text-xs font-bold uppercase tracking-wide" style="color: var(--text-primary)">Admin Panel</h2>
+			</div>
+			<nav class="space-y-0.5">
+				<a href="/admin" class={ activeClass(currentPath, "/admin") }>
+					@Icon("grid", "h-5 w-5 shrink-0")
+					<span>Dashboard</span>
 				</a>
-				<a href="/admin/users" class={activeClass(currentPath, "/admin/users")} style="color: var(--text-primary)">
-					👤 User Administration
+				<a href="/admin/users" class={ activeClass(currentPath, "/admin/users") }>
+					@Icon("users", "h-5 w-5 shrink-0")
+					<span>Users</span>
 				</a>
-				<a href="/admin/library" class={activeClass(currentPath, "/admin/library")} style="color: var(--text-primary)">
-					📚 Library Management
+				<a href="/admin/library" class={ activeClass(currentPath, "/admin/library") }>
+					@Icon("library", "h-5 w-5 shrink-0")
+					<span>Library</span>
 				</a>
-				<a href="/admin/settings" class={activeClass(currentPath, "/admin/settings")} style="color: var(--text-primary)">
-					⚙️ System Settings
+				<a href="/admin/settings" class={ activeClass(currentPath, "/admin/settings") }>
+					@Icon("settings", "h-5 w-5 shrink-0")
+					<span>Settings</span>
 				</a>
 			</nav>
 		</div>
 	</aside>
-}   
+}