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/components/auth/auth-top-bar.tsx

@@ -0,0 +1,95 @@
+import Image from "next/image";
+import { Clock } from "@/components/clock";
+import { LanguageSwitcher } from "@/components/language-switcher";
+import { Reveal } from "@/components/motion-reveal";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+
+/**
+ * Shared frosted-glass top bar for the public auth pages (login, register,
+ * etc.). Shows the hotel logo + name on the left and language / clock / theme
+ * controls on the right. Defaults mirror the homepage top bar so auth pages
+ * share one consistent look.
+ */
+export function AuthTopBar({
+	hotelName,
+	logo,
+	showHotelName = true,
+}: {
+	hotelName: string;
+	logo?: string | null;
+	showHotelName?: boolean;
+}) {
+	return (
+		<Reveal>
+			<div
+				className="relative flex items-center justify-between rounded-xl border px-3 py-2.5 sm:px-5 sm: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)",
+					boxShadow:
+						"0 1px 3px rgba(0,0,0,0.04), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
+				}}
+			>
+				<div className="flex items-center gap-2 sm: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
+						/>
+					)}
+					{showHotelName ? (
+						<span
+							className="hidden sm:inline text-sm font-extrabold uppercase tracking-wide"
+							style={{ color: "var(--color-text-readable)" }}
+						>
+							{hotelName}
+						</span>
+					) : null}
+				</div>
+				<div
+					className="flex items-center gap-1 sm:gap-1.5 rounded-lg px-1.5 py-1 sm:px-2"
+					style={{
+						background:
+							"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+					}}
+				>
+					<LanguageSwitcher />
+					<div
+						className="hidden sm:block 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>
+	);
+}