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/globals.css

@@ -1,56 +1,185 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: var(--font-nunito), "Nunito", ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", sans-serif;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+}
+
+/* Default theme variables (faithful to AtomCMS app.blade.php). ThemeVars may
+   override these at runtime from website_settings. */
 :root {
-  /* Atom theme tokens (faithful to AtomCMS app.blade.php defaults) */
   --color-primary: #f59e0b;
   --color-primary-hover: #cf9d15;
-  --color-golden: #eeb425;
-  --color-background: #f1f5f9;
+  --color-background: #f8fafc;
   --color-surface: #ffffff;
+  --color-dropdown: #ffffff;
   --color-navbar: #ffffff;
+  --color-navbar-text: #1e293b;
   --color-text: #0f172a;
   --color-text-muted: #64748b;
   --color-accent: #10b981;
   --color-danger: #ef4444;
-  --color-danger-hover: #dc2626;
-  --color-secondary: #22c55e;
-  --color-secondary-hover: #16a34a;
-  --border-color: #e7ebf0;
+  --button-color: #f59e0b;
+  --button-text-color: #1e293b;
+  --button-secondary-color: #22c55e;
+  --button-secondary-text-color: #ffffff;
+  --button-secondary-hover-color: #16a34a;
+  --button-danger-color: #ef4444;
+  --button-danger-text-color: #ffffff;
+  --button-danger-hover-color: #dc2626;
+  --button-outline-color: #eeb425;
+  --button-outline-text-color: #1a1a2e;
+  --button-outline-hover-color: #cf9d15;
   --border-radius: 12px;
-  --radius-sm: 8px;
+  --border-color: #eeb425;
+  --font-family: var(--font-nunito), "Nunito", sans-serif;
+  --size-heading-h1: 32px;
+  --size-heading-h2: 24px;
+  --size-heading-h3: 20px;
+  --avatar-border-radius: 8px;
+  --avatar-border-color: #eeb425;
+  --badge-background: #eeb425;
+  --badge-text-color: #000000;
+  --badge-border-radius: 4px;
+  --card-border-radius: 12px;
+  --link-color: #eeb425;
+  --link-hover-color: #cf9d15;
+  --input-border-color: #4b5563;
+  --input-focus-color: #eeb425;
   --navbar-height: 64px;
-  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.05);
-  --shadow-card-hover: 0 6px 22px rgba(15, 23, 42, 0.12);
-  --font-family: var(--font-nunito), ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
 }
 
-* {
-  box-sizing: border-box;
+html {
+  scroll-behavior: smooth;
 }
-
-html,
 body {
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  background:
-    radial-gradient(1200px 500px at 50% -200px, #fff7e6 0%, transparent 60%),
-    var(--color-background);
-  color: var(--color-text);
   font-family: var(--font-family);
-  font-size: 16px;
-  line-height: 1.55;
-  min-height: 100vh;
+  color: var(--color-text, #0f172a);
 }
 
-a {
-  color: var(--color-primary-hover);
-  text-decoration: none;
+::-webkit-scrollbar-thumb {
+  border-radius: 100px;
+  border: 4px solid transparent;
+  background-clip: content-box;
+  background-color: #2c3039;
 }
-a:hover {
-  text-decoration: underline;
+::-webkit-scrollbar {
+  width: 12px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 
+/* ── Atom theme components ────────────────────────────────── */
+@layer components {
+  .nav-item {
+    @apply flex h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4! md:border-transparent! md:hover:border-b-[#eeb425]!;
+    color: var(--color-navbar-text, #1e293b);
+  }
+  .dropdown-item {
+    @apply block py-2 px-4 font-semibold transition duration-200;
+    color: var(--color-text);
+  }
+  .dropdown-item:hover {
+    background-color: var(--color-primary, #eeb425);
+    color: var(--button-text-color, #1a1a2e);
+  }
+}
+
+/* ── Atom icons / backgrounds (asset paths adapted to /assets) ── */
+.icon-base {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+.nav-credit-icon {
+  background: #e9b124 url("/assets/images/icons/currency/credits.png") no-repeat center;
+  outline: 1px solid #b26d18;
+}
+.nav-ducket-icon {
+  background: #c44aac url("/assets/images/icons/currency/duckets.png") no-repeat center;
+  outline: 1px solid #812378;
+}
+.nav-diamond-icon {
+  background: #caf1f3 url("/assets/images/icons/currency/diamonds.png") no-repeat center;
+  outline: 1px solid #6caff4;
+}
+.navigation-icon {
+  width: 20px;
+  height: 25px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.navigation-icon.shop {
+  background-image: url("/assets/images/icons/navigation/shop.png");
+}
+.navigation-icon.leaderboards {
+  background-image: url("/assets/images/icons/navigation/leaderboards.png");
+}
+.navigation-icon.rules {
+  background-image: url("/assets/images/icons/navigation/rules.gif");
+}
+.navigation-icon.home {
+  background-image: url("/assets/images/icons/navigation/home.png");
+}
+.navigation-icon.community {
+  background-image: url("/assets/images/icons/navigation/community.png");
+}
+
+.site-bg {
+  background: url("/assets/images/background-light.jpg") no-repeat fixed right bottom;
+}
+.app.dark .site-bg {
+  background: url("/assets/images/background-dark.jpg") no-repeat fixed right bottom;
+}
+
+.text-body {
+  color: var(--color-text);
+}
+.text-muted {
+  color: var(--color-text-muted);
+}
+.text-nav {
+  color: var(--color-navbar-text);
+}
+.text-shadow {
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+}
+.transition-base {
+  transition: all 0.2s ease-in-out;
+}
+.hover-lift {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-card-hover);
+}
+.card-base {
+  background-color: var(--color-surface);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-card);
+  border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
+}
+.card-base:hover {
+  box-shadow: var(--shadow-card-hover);
+  border-color: color-mix(in srgb, var(--color-text-muted) 25%, transparent);
+}
+
+/* ── App component classes (used across the converted pages) ── */
 h1 {
   font-size: 30px;
   font-weight: 800;
@@ -64,86 +193,141 @@ h3 {
   font-size: 18px;
   font-weight: 700;
 }
-
-.container {
-  max-width: 1180px;
-  margin: 0 auto;
-  padding: 1.75rem 1.25rem 3rem;
+a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
 }
-
 .muted {
   color: var(--color-text-muted);
   font-size: 0.875rem;
 }
-
-/* ── Header / nav ─────────────────────────────────────────── */
-.site-header {
-  background: var(--color-navbar);
-  border-bottom: 1px solid var(--border-color);
-  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
-  position: sticky;
-  top: 0;
-  z-index: 50;
+.hero {
+  background: linear-gradient(120deg, rgba(245, 158, 11, 0.16), rgba(16, 185, 129, 0.12)),
+    var(--color-surface);
+  border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
+  border-radius: 18px;
+  padding: 2rem 2.25rem;
+  box-shadow: var(--shadow-card);
+  margin-bottom: 1.5rem;
 }
-.site-header .bar {
-  max-width: 1180px;
-  margin: 0 auto;
-  height: var(--navbar-height);
-  display: flex;
-  align-items: center;
-  gap: 1.5rem;
-  padding: 0 1.25rem;
+.card {
+  background: var(--color-surface);
+  border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
+  border-radius: var(--card-border-radius);
+  box-shadow: var(--shadow-card);
+  padding: 1.1rem 1.25rem;
 }
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  font-weight: 800;
-  font-size: 1.25rem;
-  color: var(--color-text);
+.card.hover:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-card-hover);
+  transition: all 0.2s ease-in-out;
 }
-.brand .dot {
-  width: 26px;
-  height: 26px;
-  border-radius: 8px;
-  background: linear-gradient(135deg, var(--color-primary), var(--color-golden));
-  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
+.grid {
+  display: grid;
+  gap: 1rem;
 }
-.nav {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  height: 100%;
+.grid.cols-2 {
+  grid-template-columns: repeat(2, 1fr);
 }
-.nav-item {
+.grid.cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+@media (max-width: 720px) {
+  .grid.cols-2,
+  .grid.cols-3 {
+    grid-template-columns: 1fr;
+  }
+}
+.article-img {
+  width: 100%;
+  height: 140px;
+  object-fit: cover;
+  display: block;
+  background: linear-gradient(135deg, #fde68a, #fbbf24);
+}
+.btn {
   display: inline-flex;
   align-items: center;
-  height: 100%;
-  padding: 0 0.85rem;
-  font-size: 13px;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 0.5rem 1.1rem;
+  border-radius: var(--border-radius);
+  border: 2px solid transparent;
+  font-family: inherit;
   font-weight: 700;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-  color: var(--color-text);
-  border-bottom: 3px solid transparent;
+  font-size: 14px;
+  cursor: pointer;
   transition: all 0.18s ease-in-out;
-}
-.nav-item:hover {
-  color: var(--color-primary-hover);
-  border-bottom-color: var(--color-primary);
+  background: #eef2f7;
+  color: var(--color-text);
   text-decoration: none;
 }
-.spacer {
-  flex: 1;
+.btn:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-card);
+  text-decoration: none;
 }
-
-/* ── Currency pills ───────────────────────────────────────── */
-.currencies {
-  display: flex;
-  gap: 0.5rem;
+.btn-primary {
+  background: var(--button-color);
+  color: var(--button-text-color);
+}
+.btn-secondary {
+  background: var(--button-secondary-color);
+  color: var(--button-secondary-text-color);
+}
+.btn-danger {
+  background: var(--button-danger-color);
+  color: var(--button-danger-text-color);
+}
+.btn-outline {
+  background: transparent;
+  border-color: var(--button-outline-color);
+  color: #8a6a05;
+}
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 14px;
+  padding: 0.5rem 0.7rem;
+  border: 2px solid color-mix(in srgb, var(--color-text-muted) 22%, transparent);
+  border-radius: var(--radius-sm);
+  background: #fbfcfe;
+  color: var(--color-text);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--color-primary);
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+th {
+  text-align: left;
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 0.4rem 0.5rem;
+}
+td {
+  padding: 0.55rem 0.5rem;
+  border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
+}
+.avatar {
+  border-radius: var(--avatar-border-radius);
+  background: #f1f5f9;
+  border: 2px solid var(--avatar-border-color);
 }
 .currency {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   font-weight: 800;
@@ -151,7 +335,7 @@ h3 {
   padding: 0.2rem 0.6rem 0.2rem 0.2rem;
   border-radius: 999px;
   background: #f8fafc;
-  border: 1px solid var(--border-color);
+  border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
 }
 .currency .coin {
   width: 22px;
@@ -171,167 +355,3 @@ h3 {
 .coin.diamonds {
   background: #4bc0d9;
 }
-
-/* ── Buttons ──────────────────────────────────────────────── */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.4rem;
-  padding: 0.5rem 1.1rem;
-  border-radius: var(--border-radius);
-  border: 2px solid transparent;
-  font-family: inherit;
-  font-weight: 700;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.18s ease-in-out;
-  background: #eef2f7;
-  color: var(--color-text);
-}
-.btn:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-card);
-  text-decoration: none;
-}
-.btn-primary {
-  background: var(--color-primary);
-  color: #3a2c05;
-}
-.btn-secondary {
-  background: var(--color-secondary);
-  color: #fff;
-}
-.btn-danger {
-  background: var(--color-danger);
-  color: #fff;
-}
-.btn-outline {
-  background: transparent;
-  border-color: var(--color-golden);
-  color: #8a6a05;
-}
-
-/* ── Cards ────────────────────────────────────────────────── */
-.card {
-  background: var(--color-surface);
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow-card);
-  padding: 1.1rem 1.25rem;
-}
-.card.hover:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-card-hover);
-  transition: all 0.2s ease-in-out;
-}
-
-.grid {
-  display: grid;
-  gap: 1rem;
-}
-.grid.cols-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-.grid.cols-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-@media (max-width: 720px) {
-  .grid.cols-2,
-  .grid.cols-3 {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* ── Article cards ────────────────────────────────────────── */
-.article {
-  overflow: hidden;
-  padding: 0;
-}
-.article .article-img {
-  width: 100%;
-  height: 140px;
-  object-fit: cover;
-  display: block;
-  background: linear-gradient(135deg, #fde68a, #fbbf24);
-}
-.article .body {
-  padding: 0.85rem 1.05rem 1.05rem;
-}
-
-/* ── Forms ────────────────────────────────────────────────── */
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 14px;
-  padding: 0.5rem 0.7rem;
-  border: 2px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  background: #fbfcfe;
-  color: var(--color-text);
-  outline: none;
-  transition: border-color 0.15s ease;
-}
-input:focus,
-select:focus,
-textarea:focus {
-  border-color: var(--color-primary);
-}
-button {
-  font-family: inherit;
-}
-
-/* ── Hero ─────────────────────────────────────────────────── */
-.hero {
-  background:
-    linear-gradient(120deg, rgba(245, 158, 11, 0.16), rgba(16, 185, 129, 0.12)),
-    var(--color-surface);
-  border: 1px solid var(--border-color);
-  border-radius: 18px;
-  padding: 2rem 2.25rem;
-  box-shadow: var(--shadow-card);
-  margin-bottom: 1.5rem;
-}
-
-/* ── Tables (admin) ───────────────────────────────────────── */
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-th {
-  text-align: left;
-  color: var(--color-text-muted);
-  font-size: 0.8rem;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  padding: 0.4rem 0.5rem;
-}
-td {
-  padding: 0.55rem 0.5rem;
-  border-top: 1px solid var(--border-color);
-}
-
-/* ── Avatar ───────────────────────────────────────────────── */
-.avatar {
-  border-radius: 8px;
-  background: #f1f5f9;
-  border: 2px solid var(--color-golden);
-}
-
-/* ── Footer ───────────────────────────────────────────────── */
-.site-footer {
-  border-top: 1px solid var(--border-color);
-  background: var(--color-surface);
-  color: var(--color-text-muted);
-  font-size: 0.85rem;
-}
-.site-footer .inner {
-  max-width: 1180px;
-  margin: 0 auto;
-  padding: 1.1rem 1.25rem;
-  display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
-  align-items: center;
-}

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>
   );

src/components/navigation.tsx

@@ -0,0 +1,94 @@
+import Link from "next/link";
+import { auth } from "@/lib/auth";
+
+export async function Navigation() {
+  const session = await auth();
+  const isStaff = (session?.user?.rank ?? 0) >= 7;
+
+  return (
+    <nav className="relative shadow-sm" style={{ backgroundColor: "var(--color-navbar)" }}>
+      <div className="max-w-7xl min-h-[60px] px-4 flex items-center gap-x-6 md:gap-x-8 mx-auto flex-wrap">
+        <Link href="/" className="nav-item">
+          <i className="navigation-icon home mr-1 hidden lg:inline-flex" />
+          Home
+        </Link>
+
+        <details className="relative">
+          <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
+            <i className="navigation-icon community mr-1 hidden lg:inline-flex" />
+            Community
+          </summary>
+          <div
+            className="absolute left-0 mt-1 min-w-[190px] rounded-md shadow-lg z-50 py-1"
+            style={{ backgroundColor: "var(--color-dropdown)" }}
+          >
+            <Link href="/news" className="dropdown-item">
+              Articles
+            </Link>
+            <Link href="/photos" className="dropdown-item">
+              Photos
+            </Link>
+            <Link href="/staff" className="dropdown-item">
+              Staff
+            </Link>
+            <Link href="/rankings" className="dropdown-item">
+              Rankings
+            </Link>
+            <Link href="/guilds" className="dropdown-item">
+              Guilds
+            </Link>
+          </div>
+        </details>
+
+        <Link href="/leaderboard" className="nav-item">
+          <i className="navigation-icon leaderboards mr-1 hidden lg:inline-flex" />
+          Leaderboards
+        </Link>
+        <Link href="/rares" className="nav-item">
+          Rare values
+        </Link>
+        <Link href="/shop" className="nav-item">
+          <i className="navigation-icon shop mr-1 hidden lg:inline-flex" />
+          Shop
+        </Link>
+        <Link href="/marketplace" className="nav-item">
+          Market
+        </Link>
+
+        <details className="relative">
+          <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
+            <i className="navigation-icon rules mr-1 hidden lg:inline-flex" />
+            Assistance
+          </summary>
+          <div
+            className="absolute left-0 mt-1 min-w-[190px] rounded-md shadow-lg z-50 py-1"
+            style={{ backgroundColor: "var(--color-dropdown)" }}
+          >
+            <Link href="/help" className="dropdown-item">
+              Help center
+            </Link>
+            {session?.user ? (
+              <Link href="/help/tickets" className="dropdown-item">
+                My tickets
+              </Link>
+            ) : null}
+            <Link href="/badges" className="dropdown-item">
+              Badges
+            </Link>
+          </div>
+        </details>
+
+        {session?.user ? (
+          <Link href="/friends" className="nav-item">
+            Friends
+          </Link>
+        ) : null}
+        {isStaff ? (
+          <Link href="/admin" className="nav-item">
+            Admin
+          </Link>
+        ) : null}
+      </div>
+    </nav>
+  );
+}

src/components/site-footer.tsx

@@ -5,13 +5,12 @@ export async function SiteFooter() {
   const year = new Date().getFullYear();
 
   return (
-    <footer className="site-footer">
-      <div className="inner">
-        <span>
-          © {year} {hotelName}
-        </span>
-        <span className="spacer" />
-        <span className="muted">AtomCMS → Next.js conversion</span>
+    <footer
+      className="mt-auto flex h-14 w-full flex-col items-center justify-center text-sm md:flex-row md:px-8"
+      style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text-muted)" }}
+    >
+      <div className="md:font-semibold text-[12px] md:text-[14px]">
+        © {year} - {hotelName} is a not for profit educational project
       </div>
     </footer>
   );

src/components/site-header.tsx

@@ -1,136 +1,114 @@
 import Link from "next/link";
-import { auth, signOut } from "@/lib/auth";
+import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
 export async function SiteHeader() {
-  const [hotelName, session] = await Promise.all([
-    siteSettings.get("hotel_name", "Atom"),
+  const [session, hotelName, header, logo] = await Promise.all([
     auth(),
+    siteSettings.get("hotel_name", "Atom"),
+    siteSettings.get("cms_header", "/assets/images/background.png"),
+    siteSettings.get("cms_logo", ""),
   ]);
 
-  let credits = 0;
-  let duckets = 0;
-  let diamonds = 0;
-  if (session?.user?.id) {
-    try {
-      const id = Number(session.user.id);
-      const [user, currencies] = await Promise.all([
-        prisma.user.findUnique({ where: { id }, select: { credits: true } }),
-        prisma.usersCurrency.findMany({ where: { userId: id } }),
-      ]);
-      credits = user?.credits ?? 0;
-      for (const c of currencies) {
-        if (c.type === 0) duckets = c.amount;
-        if (c.type === 5) diamonds = c.amount;
-      }
-    } catch {
-      // DB unavailable — render the header without live balances.
-    }
+  let online = 0;
+  try {
+    online = await prisma.user.count({ where: { online: "1" } });
+  } catch {
+    online = 0;
   }
 
-  const isStaff = (session?.user?.rank ?? 0) >= 7;
-
   return (
-    <header className="site-header">
-      <div className="bar">
-        <Link href="/" className="brand">
-          <span className="dot" />
-          {hotelName}
-        </Link>
-        <nav className="nav">
-          <Link className="nav-item" href="/">
-            Home
-          </Link>
-          <Link className="nav-item" href="/news">
-            News
-          </Link>
-          <Link className="nav-item" href="/shop">
-            Shop
-          </Link>
-          <Link className="nav-item" href="/marketplace">
-            Market
-          </Link>
-          <Link className="nav-item" href="/community">
-            Community
-          </Link>
-          <Link className="nav-item" href="/photos">
-            Photos
-          </Link>
-          <Link className="nav-item" href="/leaderboard">
-            Leaderboard
-          </Link>
-          <Link className="nav-item" href="/guilds">
-            Guilds
-          </Link>
-          <Link className="nav-item" href="/rares">
-            Rares
-          </Link>
-          <Link className="nav-item" href="/help">
-            Help
-          </Link>
-          {session?.user ? (
-            <Link className="nav-item" href="/client">
-              Hotel
+    <div
+      className="relative flex min-h-[13rem] h-52 w-full items-center justify-center"
+      style={{ background: `url(${header})`, backgroundSize: "cover", backgroundPosition: "center" }}
+    >
+      <div className="absolute h-full w-full bg-black/50" />
+
+      {session?.user ? (
+        <div className="relative flex h-full w-full max-w-7xl items-center justify-center pr-10 md:justify-between">
+          <div className="flex items-center gap-x-4">
+            <Link href="/" className="ml-7">
+              {logo ? (
+                // biome-ignore lint/performance/noImgElement: external/CDN logo
+                <img
+                  className="transition duration-300 ease-in-out hover:scale-105"
+                  src={logo}
+                  alt="Hotel logo"
+                />
+              ) : (
+                <span className="text-3xl font-extrabold text-white text-shadow">{hotelName}</span>
+              )}
             </Link>
-          ) : null}
-          {isStaff ? (
-            <Link className="nav-item" href="/admin">
-              Admin
-            </Link>
-          ) : null}
-        </nav>
-        <span className="spacer" />
-        {session?.user ? (
-          <>
-            <div className="currencies">
-              <span className="currency">
-                <span className="coin credits">cr</span>
-                {credits}
-              </span>
-              <span className="currency">
-                <span className="coin duckets">d</span>
-                {duckets}
-              </span>
-              <span className="currency">
-                <span className="coin diamonds">◆</span>
-                {diamonds}
+
+            <div
+              className="hidden md:flex items-center px-4 rounded-md relative h-[50px]"
+              style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
+            >
+              <div
+                className="absolute -left-1 h-6 w-6 rotate-45"
+                style={{ backgroundColor: "var(--color-surface)" }}
+              />
+              <span className="relative">
+                {online} {hotelName} online
               </span>
             </div>
-            <Link className="nav-item" href="/friends">
-              Friends
-            </Link>
-            <Link className="nav-item" href="/redeem">
-              Redeem
-            </Link>
-            <Link className="nav-item" href="/settings">
-              Settings
-            </Link>
-            <Link className="nav-item" href={`/u/${session.user.name}`}>
-              {session.user.name}
-            </Link>
-            <form
-              action={async () => {
-                "use server";
-                await signOut({ redirectTo: "/" });
-              }}
-            >
-              <button type="submit" className="btn btn-outline">
-                Logout
+          </div>
+
+          <div className="flex flex-col gap-y-2 md:flex-row md:gap-x-4">
+            <Link href="/client">
+              <button
+                type="button"
+                className="font-bold py-3 px-6 rounded-xl shadow-xl border-2 transition-all duration-300 hover:scale-110 hover:shadow-2xl text-base tracking-wide"
+                style={{
+                  backgroundColor: "var(--button-color)",
+                  color: "var(--button-text-color)",
+                  borderColor: "rgba(255,255,255,0.3)",
+                }}
+              >
+                Nitro client
               </button>
-            </form>
-          </>
-        ) : (
-          <>
-            <Link className="nav-item" href="/register">
-              Register
             </Link>
-            <Link className="btn btn-outline" href="/login">
-              Login
-            </Link>
-          </>
-        )}
-      </div>
-    </header>
+          </div>
+        </div>
+      ) : (
+        <div className="relative flex justify-center px-4">
+          <div
+            className="font-semibold flex flex-col items-center md:w-[600px]"
+            style={{ color: "#ffffff", textShadow: "0 1px 4px rgba(0,0,0,0.7)" }}
+          >
+            <p className="hidden text-center text-xl md:block">
+              An online virtual world where you can create your own avatar, make friends, chat,
+              create rooms and much more!
+            </p>
+            <div className="flex flex-col items-center justify-center gap-x-6 gap-y-4 md:mt-6 md:flex-row md:gap-y-0">
+              <Link href="/login">
+                <button
+                  type="button"
+                  className="rounded-full border-2 px-8 py-2 uppercase transition duration-200 ease-in-out"
+                  style={{
+                    borderColor: "var(--color-primary)",
+                    backgroundColor: "var(--color-primary)",
+                    color: "var(--button-text-color)",
+                  }}
+                >
+                  Login
+                </button>
+              </Link>
+              <p className="text-sm uppercase">Or</p>
+              <Link href="/register">
+                <button
+                  type="button"
+                  className="uppercase px-8 py-2.5 rounded-full transition ease-in-out duration-200"
+                  style={{ backgroundColor: "var(--color-accent)", color: "#ffffff" }}
+                >
+                  Create an account
+                </button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
   );
 }

src/components/theme-vars.tsx

@@ -0,0 +1,58 @@
+import { siteSettings } from "@/lib/services/site-settings";
+
+// Injects the DB-driven CSS custom properties into :root, exactly like
+// AtomCMS's app.blade.php. Falls back to the atom defaults when no DB.
+export async function ThemeVars() {
+  const g = (k: string, d: string) => siteSettings.get(k, d);
+  const [
+    primary,
+    background,
+    surface,
+    dropdown,
+    navbar,
+    navbarText,
+    text,
+    textMuted,
+    accent,
+    buttonColor,
+    buttonText,
+    borderColor,
+    borderRadius,
+  ] = await Promise.all([
+    g("color_primary", "#f59e0b"),
+    g("color_background", "#f8fafc"),
+    g("color_surface", "#ffffff"),
+    g("color_dropdown", "#ffffff"),
+    g("color_navbar", "#ffffff"),
+    g("color_navbar_text", "#1e293b"),
+    g("color_text", "#0f172a"),
+    g("color_text_muted", "#64748b"),
+    g("color_accent", "#10b981"),
+    g("button_primary_color", "#f59e0b"),
+    g("button_text_color", "#1e293b"),
+    g("border_color", "#eeb425"),
+    g("border_radius", "12"),
+  ]);
+
+  // Only hex/keyword color values are admin-controlled — sanitize defensively.
+  const safe = (v: string | null, d: string) => (v && /^[#a-zA-Z0-9(),.\s%-]+$/.test(v) ? v : d);
+
+  const css = `:root{
+--color-primary:${safe(primary, "#f59e0b")};
+--color-background:${safe(background, "#f8fafc")};
+--color-surface:${safe(surface, "#ffffff")};
+--color-dropdown:${safe(dropdown, "#ffffff")};
+--color-navbar:${safe(navbar, "#ffffff")};
+--color-navbar-text:${safe(navbarText, "#1e293b")};
+--color-text:${safe(text, "#0f172a")};
+--color-text-muted:${safe(textMuted, "#64748b")};
+--color-accent:${safe(accent, "#10b981")};
+--button-color:${safe(buttonColor, "#f59e0b")};
+--button-text-color:${safe(buttonText, "#1e293b")};
+--border-color:${safe(borderColor, "#eeb425")};
+--border-radius:${/^\d+$/.test(borderRadius ?? "") ? borderRadius : "12"}px;
+}`;
+
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: server-built CSS from sanitized admin settings
+  return <style dangerouslySetInnerHTML={{ __html: css }} />;
+}

src/components/top-header.tsx

@@ -0,0 +1,128 @@
+import Link from "next/link";
+import { auth, signOut } from "@/lib/auth";
+import { avatarImageUrl } from "@/lib/format";
+import { prisma } from "@/lib/prisma";
+import { siteSettings } from "@/lib/services/site-settings";
+
+function Currency({ icon, amount, label }: { icon: string; amount: number; label: string }) {
+  return (
+    <div className="flex gap-x-3 sm:gap-x-2 items-center">
+      <div className={`h-[25px] w-[25px] rounded-full outline-offset-[3px] ${icon}`} />
+      <div style={{ color: "var(--color-text-muted)" }}>
+        <span className="font-semibold" style={{ color: "var(--color-text)" }}>
+          {amount.toLocaleString()}
+        </span>{" "}
+        <span>{label}</span>
+      </div>
+    </div>
+  );
+}
+
+export async function TopHeader() {
+  const session = await auth();
+  if (!session?.user?.id) return null;
+  const id = Number(session.user.id);
+
+  let credits = 0;
+  let duckets = 0;
+  let diamonds = 0;
+  let look = "";
+  try {
+    const [user, currencies] = await Promise.all([
+      prisma.user.findUnique({ where: { id }, select: { credits: true, look: true } }),
+      prisma.usersCurrency.findMany({ where: { userId: id } }),
+    ]);
+    credits = user?.credits ?? 0;
+    look = user?.look ?? "";
+    for (const c of currencies) {
+      if (c.type === 0) duckets = c.amount;
+      if (c.type === 5) diamonds = c.amount;
+    }
+  } catch {
+    // render without live balances
+  }
+
+  const imager =
+    (await siteSettings.get("habbo_imaging_url", "https://www.habbo.com/habbo-imaging/avatarimage")) ??
+    "";
+  const avatar = avatarImageUrl(imager, look, { headOnly: true, direction: 2 });
+  const isStaff = (session.user.rank ?? 0) >= 7;
+
+  return (
+    <div style={{ backgroundColor: "var(--color-surface)" }}>
+      <div className="max-w-7xl min-h-[60px] px-4 flex items-center justify-between mx-auto">
+        <div className="flex gap-x-6">
+          <Currency icon="nav-credit-icon" amount={credits} label="Credits" />
+          <Currency icon="nav-ducket-icon" amount={duckets} label="Duckets" />
+          <Currency icon="nav-diamond-icon" amount={diamonds} label="Diamonds" />
+        </div>
+
+        <div className="flex items-center gap-x-3">
+          {isStaff ? (
+            <details className="relative">
+              <summary
+                className="list-none cursor-pointer font-semibold [&::-webkit-details-marker]:hidden"
+                style={{ color: "var(--color-text)" }}
+              >
+                Administration
+              </summary>
+              <div
+                className="absolute right-0 mt-1 min-w-[180px] rounded-md shadow-lg z-50 py-1"
+                style={{ backgroundColor: "var(--color-dropdown)" }}
+              >
+                <Link href="/admin" className="dropdown-item">
+                  Admin panel
+                </Link>
+                <Link href="/admin/commandocentrum" className="dropdown-item">
+                  Commandocentrum
+                </Link>
+                <Link href="/admin/logs" className="dropdown-item">
+                  Logs
+                </Link>
+              </div>
+            </details>
+          ) : null}
+
+          <details className="relative">
+            <summary className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden">
+              {/* biome-ignore lint/performance/noImgElement: external imager */}
+              <img className="w-[54px] h-[62px] bg-no-repeat bg-center" src={avatar} alt="" />
+              <span className="-ml-2 font-semibold">{session.user.name}</span>
+            </summary>
+            <div
+              className="absolute right-0 mt-1 min-w-[180px] rounded-md shadow-lg z-50 py-1"
+              style={{ backgroundColor: "var(--color-dropdown)" }}
+            >
+              <Link href={`/u/${session.user.name}`} className="dropdown-item">
+                My profile
+              </Link>
+              <Link href="/settings" className="dropdown-item">
+                User settings
+              </Link>
+              <Link href="/settings/2fa" className="dropdown-item">
+                Two-factor
+              </Link>
+              <form
+                action={async () => {
+                  "use server";
+                  await signOut({ redirectTo: "/" });
+                }}
+              >
+                <button
+                  type="submit"
+                  className="dropdown-item w-full text-center"
+                  style={{
+                    backgroundColor: "var(--button-danger-color)",
+                    color: "var(--button-danger-text-color)",
+                  }}
+                >
+                  Logout
+                </button>
+              </form>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+  );
+}