feat(ui): group sidebar footer menus into distinct panels

The account and appearance menus sat in one container with no separation,
so expanding one made the other hard to find. Each collapsible menu now
lives in its own subtly lifted, bordered panel (.sidebar-panel) so the
expanded items stay visually contained and the menus never blend together.
Applied to the account, appearance, and sign-in menus.

templates/header.templ

@@ -81,7 +81,7 @@ templ Header(user User, currentPath string) {
 					@SidebarSignIn(currentPath)
 				}
 				<!-- Theme picker -->
-				<div x-data="{ themeOpen: false }">
+				<div x-data="{ themeOpen: false }" class="sidebar-panel">
 					<button
 						type="button"
 						@click="themeOpen = !themeOpen"
@@ -155,7 +155,7 @@ templ Header(user User, currentPath string) {
 
 // SidebarUserMenu is the bottom-of-sidebar account control for signed-in users.
 templ SidebarUserMenu(user User) {
-	<div x-data="{ userOpen: false }">
+	<div x-data="{ userOpen: false }" class="sidebar-panel">
 		<button
 			type="button"
 			@click="userOpen = !userOpen"
@@ -195,7 +195,7 @@ templ SidebarUserMenu(user User) {
 // SidebarSignIn is an inline sign-in for signed-out visitors, preserving the
 // original header's inline login (htmx POST) so users can auth from any page.
 templ SidebarSignIn(currentPath string) {
-	<div x-data="{ signInOpen: false }">
+	<div x-data="{ signInOpen: false }" class="sidebar-panel">
 		<button
 			type="button"
 			@click="signInOpen = !signInOpen"