Fix app shell layout with stable top bar and dynamic nav offset.

Unified chrome keeps the home logo top-left, measures bottom nav height
for scroll clearance, and adds responsive content widths for mobile/desktop.

components/layout/app-top-bar.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+import { HomeLogoLink } from "@/components/layout/home-logo-link";
+import { routes } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+
+type AppTopBarProps = {
+  className?: string;
+};
+
+export function AppTopBar({ className }: AppTopBarProps) {
+  const pathname = usePathname();
+  const isHome = pathname === routes.avatar;
+
+  return (
+    <header
+      className={cn(
+        "app-top-bar fixed inset-x-0 top-0 z-40 border-b-2 border-border bg-background/95 shadow-[var(--retro-shadow-sm)] backdrop-blur supports-[backdrop-filter]:bg-background/90",
+        className,
+      )}
+      style={{
+        height: "var(--app-topbar-height)",
+        paddingTop: "env(safe-area-inset-top, 0px)",
+      }}
+    >
+      <div className="mx-auto flex h-full max-w-6xl items-center px-4">
+        <HomeLogoLink
+          className="mt-0"
+          aria-current={isHome ? "page" : undefined}
+        />
+      </div>
+    </header>
+  );
+}