Port AtomCMS atom theme faithfully (Tailwind v4 + real CSS/assets + shell)

Make the template match the atom theme, not just approximate it:
- Add Tailwind v4 (+forms/typography plugins, postcss) and port the real atom
  CSS (global.css + atom app.css) into globals.css: nav-item underline, currency
  + navigation icon classes, site-bg, card-base/hover-lift, text utils — asset
  paths adapted to /assets.
- Copy the real theme assets (backgrounds, icons/currency/navigation, profile,
  leaderboards) into public/assets.
- Rebuild the shell 1:1 from the atom Blade: TopHeader (currency pills +
  user/admin dropdowns, auth-only), SiteHeader (header image + black/50 overlay,
  logo+online+Nitro client / guest Login+Create-account CTA), Navigation (white
  bar, nav-item + Community/Assistance dropdowns), Footer. ThemeVars injects the
  DB-driven CSS custom properties into :root like app.blade.php. Layout uses the
  atom body/site-bg + grid-cols-12 max-w-7xl content wrapper.

Verified: tsc 0, next build exit 0; curl confirms the atom markup, compiled CSS
references the assets, and background-light.jpg + currency/navigation icons all
serve 200.

src/app/layout.tsx

@@ -1,11 +1,13 @@
 import type { Metadata } from "next";
 import { Nunito } from "next/font/google";
 import type { ReactNode } from "react";
+import { Navigation } from "@/components/navigation";
 import { SiteFooter } from "@/components/site-footer";
 import { SiteHeader } from "@/components/site-header";
+import { ThemeVars } from "@/components/theme-vars";
+import { TopHeader } from "@/components/top-header";
 import "./globals.css";
 
-// Self-hosted (no runtime external fetch) — the atom theme's font.
 const nunito = Nunito({
   subsets: ["latin"],
   weight: ["400", "600", "700", "800"],
@@ -20,15 +22,21 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={nunito.variable}>
-      <body>
-        <div style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
-          <SiteHeader />
-          <div className="container" style={{ flex: 1, width: "100%" }}>
-            {children}
+    <html lang="en" className={`app ${nunito.variable}`}>
+      <body
+        className="flex min-h-screen flex-col site-bg"
+        style={{ backgroundColor: "var(--color-background)" }}
+      >
+        <ThemeVars />
+        <TopHeader />
+        <SiteHeader />
+        <Navigation />
+        <main className="overflow-hidden site-bg">
+          <div className="mx-auto mt-10 grid max-w-7xl grid-cols-12 gap-x-3 gap-y-8 p-6 md:mt-0">
+            <div className="col-span-12">{children}</div>
           </div>
-          <SiteFooter />
-        </div>
+        </main>
+        <SiteFooter />
       </body>
     </html>
   );