Polish content pages: share AuthTopBar, page-grid helper and responsive tables

- Extract shared AuthTopBar frosted top bar; reuse in login & register
- Add .page-grid class replacing 48 inline grid styles
- Add .table-scroll + .table-cell-truncate helpers; wrap leaderboard/staff tables
- Constrain settings page width (max-w-5xl) and stack profile card on mobile
- Use theme background var for shop category icon (dark-mode safe)

src/app/(site)/register/page.tsx

@@ -2,14 +2,12 @@ import { count, desc, eq } from "drizzle-orm";
 import { headers } from "next/headers";
 import Image from "next/image";
 import { getTranslations } from "next-intl/server";
+import { AuthTopBar } from "@/components/auth/auth-top-bar";
 import { RegisterForm } from "@/components/auth/register-form";
-import { Clock } from "@/components/clock";
-import { LanguageSwitcher } from "@/components/language-switcher";
 import Link from "@/components/link";
 import { Reveal } from "@/components/motion-reveal";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { SurfaceCard } from "@/components/surface-card";
-import { ThemeSwitcher } from "@/components/theme-switcher";
 import { cached } from "@/lib/cache";
 import { db, User } from "@/lib/db";
 import { resolveHotelName } from "@/lib/hotel-name";
@@ -51,74 +49,7 @@ export default async function RegisterPage() {
 
 	return (
 		<div className="mx-auto w-full max-w-6xl flex flex-col gap-8 pb-16">
-			{/* ── Top Bar ── */}
-			<Reveal>
-				<div
-					className="relative flex items-center justify-between rounded-xl border px-5 py-3"
-					style={{
-						background:
-							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
-						backdropFilter: "blur(14px)",
-						WebkitBackdropFilter: "blur(14px)",
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-					}}
-				>
-					<div className="flex items-center gap-3">
-						{logo ? (
-							<Image
-								src={logo}
-								alt={hotelName}
-								width={100}
-								height={28}
-								className="shrink-0 object-contain"
-								unoptimized
-								style={{ maxHeight: 28, width: "auto", height: "auto" }}
-							/>
-						) : (
-							<Image
-								src="/assets/images/icons/lighthouse.png"
-								alt={hotelName}
-								width={28}
-								height={28}
-								className="shrink-0"
-								unoptimized
-							/>
-						)}
-						<span
-							className="text-sm font-extrabold uppercase tracking-wide"
-							style={{ color: "var(--color-text-readable)" }}
-						>
-							{hotelName}
-						</span>
-					</div>
-					<div
-						className="flex items-center gap-1.5 rounded-lg px-2 py-1"
-						style={{
-							background:
-								"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
-						}}
-					>
-						<LanguageSwitcher />
-						<div
-							className="w-px h-5"
-							style={{
-								background:
-									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-							}}
-						/>
-						<Clock />
-						<div
-							className="w-px h-5"
-							style={{
-								background:
-									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-							}}
-						/>
-						<ThemeSwitcher />
-					</div>
-				</div>
-			</Reveal>
+			<AuthTopBar hotelName={hotelName} logo={logo} />
 
 			<Reveal>
 				<div className="flex flex-col gap-8 lg:flex-row lg:items-start">