Merge branch 'main' of https://gitlab.epicnabbo.nl/remco/EpicNext-Cms into codex/housekeeping-complete

.nvmrc

@@ -1 +1 @@
-26.7.0
+26.8.1

package.json

@@ -3,7 +3,7 @@
 	"private": true,
 	"type": "module",
 	"engines": {
-		"node": ">=26.7.0 <27"
+		"node": ">=26.8.1 <27"
 	},
 	"packageManager": "[email protected]",
 	"scripts": {

src/actions/auth-precheck.test.ts

@@ -1,19 +1,25 @@
 // @ts-nocheck
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { checkLogin } from "@/lib/auth/password";
 import { clientIp, rateLimit } from "@/lib/rate-limit";
 import { captchaConfig, verifyCaptcha } from "@/lib/services/captcha";
 import { siteSettings } from "@/lib/services/site-settings";
 import { precheckLogin } from "./auth-precheck";
 
-const { queryPreparedOne } = vi.hoisted(() => {
+const core = vi.hoisted(() => ({
-	const queryPreparedOne = vi.fn().mockResolvedValue(null);
+	getLoginUser: vi.fn(),
-	return { queryPreparedOne };
+	verifyLoginPassword: vi.fn(),
-});
+	isEmailUnverified: vi.fn(),
+	runDummyHashCheck: vi.fn(),
+	normalizeLoginInput: (username: unknown, password: unknown) => ({
+		username: String(username ?? "")
+			.normalize("NFC")
+			.trim(),
+		password: String(password ?? "").normalize("NFC"),
+	}),
+}));
 
 vi.mock("@/env", () => ({ env: { CONVERT_PASSWORDS: false } }));
-vi.mock("@/lib/auth/password", () => ({ checkLogin: vi.fn() }));
+vi.mock("@/lib/auth/login-core", () => core);
-vi.mock("@/lib/db", () => ({ queryPreparedOne }));
 vi.mock("@/lib/rate-limit", () => ({ clientIp: vi.fn(), rateLimit: vi.fn() }));
 vi.mock("@/lib/services/captcha", () => ({
 	captchaConfig: vi.fn(),
@@ -23,33 +29,35 @@ vi.mock("@/lib/services/site-settings", () => ({
 	siteSettings: { getBool: vi.fn() },
 }));
 
-beforeEach(() => {
+const user = (overrides = {}) => ({
-	vi.clearAllMocks();
-	vi.mocked(clientIp).mockResolvedValue("1.2.3.4");
-	vi.mocked(rateLimit).mockResolvedValue({ ok: true });
-	vi.mocked(checkLogin).mockResolvedValue({ valid: true } as never);
-	vi.mocked(captchaConfig).mockResolvedValue({ provider: "none" } as never);
-	queryPreparedOne.mockResolvedValue(null);
-});
-
-describe("precheckLogin", () => {
-	it("returns ok for valid login without 2FA", async () => {
-		queryPreparedOne.mockResolvedValue({
 	password: "hash",
 	twoFactorConfirmedAt: null,
 	mail: null,
 	mailVerified: "0",
-		});
+	...overrides,
+});
+
+beforeEach(() => {
+	vi.clearAllMocks();
+	vi.mocked(clientIp).mockResolvedValue("1.2.3.4");
+	vi.mocked(rateLimit).mockResolvedValue({ ok: true });
+	vi.mocked(captchaConfig).mockResolvedValue({ provider: "none" } as never);
+	core.getLoginUser.mockResolvedValue(null);
+	core.verifyLoginPassword.mockResolvedValue({ valid: true });
+	core.isEmailUnverified.mockResolvedValue(false);
+	core.runDummyHashCheck.mockResolvedValue(undefined);
+});
+
+describe("precheckLogin", () => {
+	it("returns ok for valid login without 2FA", async () => {
+		core.getLoginUser.mockResolvedValue(user());
 		expect(await precheckLogin("user", "pass")).toBe("ok");
 	});
 
 	it("returns twofactor when 2FA is set up", async () => {
-		queryPreparedOne.mockResolvedValue({
+		core.getLoginUser.mockResolvedValue(
-			password: "hash",
+			user({ twoFactorConfirmedAt: new Date() }),
-			twoFactorConfirmedAt: new Date(),
+		);
-			mail: null,
-			mailVerified: "0",
-		});
 		expect(await precheckLogin("user", "pass")).toBe("twofactor");
 	});
 
@@ -62,30 +70,20 @@ describe("precheckLogin", () => {
 			provider: "hcaptcha",
 		} as never);
 		vi.mocked(verifyCaptcha).mockResolvedValue(false);
-		queryPreparedOne.mockResolvedValue({
+		core.getLoginUser.mockResolvedValue(user());
-			password: "hash",
-			twoFactorConfirmedAt: null,
-			mail: null,
-			mailVerified: "0",
-		});
 		expect(await precheckLogin("user", "pass", "bad-token")).toBe("captcha");
 	});
 
 	it("returns invalid when user not found (dummy hash check)", async () => {
-		queryPreparedOne.mockResolvedValue(null);
+		core.getLoginUser.mockResolvedValue(null);
 		const result = await precheckLogin("nonexistent", "pass");
 		expect(result).toBe("invalid");
-		expect(checkLogin).toHaveBeenCalled();
+		expect(core.runDummyHashCheck).toHaveBeenCalled();
 	});
 
 	it("returns unverified when email verification required", async () => {
-		queryPreparedOne.mockResolvedValue({
+		core.getLoginUser.mockResolvedValue(user({ mail: "[email protected]" }));
-			password: "hash",
+		core.isEmailUnverified.mockResolvedValue(true);
-			twoFactorConfirmedAt: null,
-			mail: "[email protected]",
-			mailVerified: "0",
-		});
-		vi.mocked(siteSettings.getBool).mockResolvedValue(true);
 		expect(await precheckLogin("user", "pass")).toBe("unverified");
 	});
 });

src/actions/auth-precheck.ts

@@ -1,11 +1,14 @@
 "use server";
 
-import { env } from "@/env";
+import {
-import { checkLogin } from "@/lib/auth/password";
+	getLoginUser,
-import { queryPreparedOne } from "@/lib/db";
+	isEmailUnverified,
+	normalizeLoginInput,
+	runDummyHashCheck,
+	verifyLoginPassword,
+} from "@/lib/auth/login-core";
 import { clientIp, rateLimit } from "@/lib/rate-limit";
 import { captchaConfig, verifyCaptcha } from "@/lib/services/captcha";
-import { siteSettings } from "@/lib/services/site-settings";
 
 export type PrecheckResult =
 	| "ok"
@@ -24,10 +27,7 @@ export async function precheckLogin(
 	password: string,
 	captchaToken?: string | null,
 ): Promise<PrecheckResult> {
-	const u = String(username ?? "")
+	const { username: u, password: p } = normalizeLoginInput(username, password);
-		.normalize("NFC")
-		.trim();
-	const p = String(password ?? "");
 	if (!u || !p) return "invalid";
 
 	const ip = await clientIp();
@@ -38,49 +38,17 @@ export async function precheckLogin(
 		if (!(await verifyCaptcha(captchaToken ?? null, ip))) return "captcha";
 	}
 
-	let user: {
+	const user = await getLoginUser(u);
-		password: string;
-		twoFactorConfirmedAt: Date | null;
-		mail: string | null;
-		mailVerified: string;
-	} | null;
-	try {
-		user = await queryPreparedOne<{
-			password: string;
-			twoFactorConfirmedAt: Date | null;
-			mail: string | null;
-			mailVerified: string;
-		}>(
-			`SELECT password, two_factor_confirmed_at AS twoFactorConfirmedAt,
-			        mail, mail_verified AS mailVerified
-			 FROM users WHERE username = ? LIMIT 1`,
-			[u],
-		);
-	} catch {
-		return "invalid";
-	}
 	if (!user) {
 		// Prevent timing-based enumeration: always run a dummy hash check.
-		await checkLogin(
+		await runDummyHashCheck(p);
-			p,
-			"$2y$12$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcd",
-			{
-				convertPasswords: false,
-			},
-		);
 		return "invalid";
 	}
 
-	const res = await checkLogin(p, user.password, {
+	const res = await verifyLoginPassword(user, p);
-		convertPasswords: env.CONVERT_PASSWORDS,
-	});
 	if (!res.valid) return "invalid";
 
-	if (
+	if (await isEmailUnverified(user)) {
-		(await siteSettings.getBool("require_email_verification", false)) &&
-		user.mail &&
-		user.mailVerified !== "1"
-	) {
 		return "unverified";
 	}
 

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

@@ -8,6 +8,7 @@ import { Clock } from "@/components/clock";
 import { LanguageSwitcher } from "@/components/language-switcher";
 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";
@@ -48,7 +49,7 @@ export default async function LoginPage() {
 	]);
 
 	return (
-		<div className="flex flex-col gap-10 pb-14">
+		<div className="mx-auto w-full max-w-6xl flex flex-col gap-8 pb-16">
 			{/* ── Top Bar ── */}
 			<Reveal>
 				<div
@@ -117,12 +118,13 @@ export default async function LoginPage() {
 					</div>
 				</div>
 			</Reveal>
+
 			<Reveal>
-				<div className="flex flex-col lg:flex-row gap-10 stagger-children">
+				<div className="flex flex-col gap-8 lg:flex-row">
 					{/* Left panel */}
 					<div className="lg:w-80 shrink-0 space-y-4">
-						<div
+						<SurfaceCard
-							className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
+							className="relative p-6 text-center"
 							style={{
 								borderColor:
 									"color-mix(in srgb, var(--color-primary) 20%, transparent)",
@@ -147,7 +149,7 @@ export default async function LoginPage() {
 									priority
 								/>
 								<div
-									className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border backdrop-blur-sm"
+									className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border"
 									style={{
 										borderColor:
 											"color-mix(in srgb, var(--color-primary) 18%, transparent)",
@@ -179,43 +181,13 @@ export default async function LoginPage() {
 									{t("welcomeBackSub", { hotelName })}
 								</p>
 							</div>
-						</div>
+						</SurfaceCard>
 
 						{recentUsers.length > 0 && (
-							<div
+							<SurfaceCard
-								className="overflow-hidden rounded-xl border"
+								title={th("online", { count: online, hotel: "" }).trim()}
-								style={{
+								icon="/assets/images/icons/navigation/goody.png"
-									borderColor:
+								bodyClassName="p-4"
-										"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-								}}
-							>
-								<div
-									className="flex items-center gap-2.5 px-4 py-3"
-									style={{
-										background:
-											"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
-									}}
-								>
-									<Image
-										src="/assets/images/icons/navigation/goody.png"
-										alt=""
-										width={18}
-										height={18}
-										unoptimized
-									/>
-									<h3
-										className="text-sm font-bold text-white"
-										style={{ fontFamily: "var(--font-nunito)" }}
-									>
-										{th("online", { count: online, hotel: "" }).trim()}
-									</h3>
-								</div>
-								<div
-									className="p-4"
-									style={{
-										background:
-											"color-mix(in srgb, var(--color-surface) 70%, transparent)",
-									}}
 							>
 								<div className="grid grid-cols-4 gap-1.5">
 									{recentUsers.map((u) => (
@@ -242,45 +214,14 @@ export default async function LoginPage() {
 										</div>
 									))}
 								</div>
-								</div>
+							</SurfaceCard>
-							</div>
 						)}
 
 						{latestUsers.length > 0 && (
-							<div
+							<SurfaceCard
-								className="overflow-hidden rounded-xl border"
+								title="Newest citizens"
-								style={{
+								icon="/assets/images/icons/friends.png"
-									borderColor:
+								bodyClassName="p-4"
-										"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-								}}
-							>
-								<div
-									className="flex items-center gap-2.5 px-4 py-3"
-									style={{
-										background:
-											"linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
-									}}
-								>
-									<Image
-										src="/assets/images/icons/friends.png"
-										alt=""
-										width={18}
-										height={18}
-										unoptimized
-									/>
-									<h3
-										className="text-sm font-bold text-white"
-										style={{ fontFamily: "var(--font-nunito)" }}
-									>
-										Newest citizens
-									</h3>
-								</div>
-								<div
-									className="p-4"
-									style={{
-										background:
-											"color-mix(in srgb, var(--color-surface) 70%, transparent)",
-									}}
 							>
 								<div className="grid grid-cols-4 gap-1.5">
 									{latestUsers.map((u) => (
@@ -307,8 +248,7 @@ export default async function LoginPage() {
 										</div>
 									))}
 								</div>
-								</div>
+							</SurfaceCard>
-							</div>
 						)}
 
 						<p
@@ -330,37 +270,10 @@ export default async function LoginPage() {
 
 					{/* Right: form */}
 					<div className="flex-1">
-						<div
+						<SurfaceCard
-							className="overflow-hidden rounded-xl border"
+							title={t("title")}
-							style={{
+							icon="/assets/images/icons/navigation/me.png"
-								borderColor:
+							bodyClassName="p-6"
-									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-							}}
-						>
-							<div
-								className="flex items-center gap-2.5 px-4 py-3"
-								style={{
-									background:
-										"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
-								}}
-							>
-								<Image
-									src="/assets/images/icons/navigation/me.png"
-									alt=""
-									width={18}
-									height={18}
-									unoptimized
-								/>
-								<h2
-									className="text-sm font-bold text-white"
-									style={{ fontFamily: "var(--font-nunito)" }}
-								>
-									{t("title")}
-								</h2>
-							</div>
-							<div
-								className="p-6"
-								style={{ backgroundColor: "var(--color-surface)" }}
 						>
 							<p
 								className="text-sm mb-6"
@@ -376,8 +289,7 @@ export default async function LoginPage() {
 								}}
 								nonce={nonce}
 							/>
-							</div>
+						</SurfaceCard>
-						</div>
 					</div>
 				</div>
 			</Reveal>

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

@@ -7,6 +7,7 @@ import { claimReferral } from "@/actions/referral";
 
 import { Reveal } from "@/components/motion-reveal";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
+import { SurfaceCard } from "@/components/surface-card";
 import { auth } from "@/lib/auth";
 import {
 	db,
@@ -253,8 +254,8 @@ export default async function MePage({
 				) : null}
 
 				<Reveal>
-					<div
+					<SurfaceCard
-						className="relative overflow-hidden rounded-2xl border p-6 flex items-start gap-6"
+						className="relative p-6 flex items-start gap-6"
 						style={{
 							background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)), var(--color-surface))`,
 							borderColor:
@@ -342,13 +343,13 @@ export default async function MePage({
 								</span>
 							</div>
 						</div>
-					</div>
+					</SurfaceCard>
 				</Reveal>
 
 				{alertRaw ? (
 					<Reveal delay={0.05}>
-						<div
+						<SurfaceCard
-							className="rounded-2xl border px-6 py-4 text-center"
+							className="px-6 py-4 text-center"
 							style={{
 								background:
 									"color-mix(in srgb, var(--color-accent) 12%, transparent)",
@@ -362,7 +363,7 @@ export default async function MePage({
 							>
 								{alertRaw}
 							</p>
-						</div>
+						</SurfaceCard>
 					</Reveal>
 				) : null}
 
@@ -382,14 +383,9 @@ export default async function MePage({
 							{ value: friendCount.toLocaleString(), label: "Friends" },
 							{ value: lastLoginDate, label: "Last login" },
 						].map((s) => (
-							<div
+							<SurfaceCard
 								key={s.label}
-								className="relative rounded-2xl border p-5 text-center transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
+								className="relative p-5 text-center transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
-								style={{
-									background: "var(--color-surface)",
-									borderColor:
-										"color-mix(in srgb, var(--color-primary) 12%, transparent)",
-								}}
 							>
 								<div
 									className="text-xl md:text-2xl font-black tracking-tight mb-0.5"
@@ -403,20 +399,13 @@ export default async function MePage({
 								>
 									{s.label}
 								</div>
-							</div>
+							</SurfaceCard>
 						))}
 					</div>
 				</Reveal>
 
 				<Reveal delay={0.15}>
-					<div
+					<SurfaceCard className="p-5">
-						className="rounded-2xl border p-5"
-						style={{
-							background: "var(--color-surface)",
-							borderColor:
-								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
-						}}
-					>
 						<div className="flex items-center justify-between mb-4">
 							<div>
 								<h2
@@ -497,18 +486,11 @@ export default async function MePage({
 								))}
 							</div>
 						)}
-					</div>
+					</SurfaceCard>
 				</Reveal>
 
 				<Reveal delay={0.2}>
-					<div
+					<SurfaceCard className="p-5">
-						className="rounded-2xl border p-5"
-						style={{
-							background: "var(--color-surface)",
-							borderColor:
-								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
-						}}
-					>
 						<div className="mb-4">
 							<h2
 								className="text-lg font-black tracking-tight"
@@ -592,19 +574,12 @@ export default async function MePage({
 								</button>
 							)}
 						</div>
-					</div>
+					</SurfaceCard>
 				</Reveal>
 
 				{recentRooms.length > 0 && (
 					<Reveal delay={0.25}>
-						<div
+						<SurfaceCard className="p-5">
-							className="rounded-2xl border p-5"
-							style={{
-								background: "var(--color-surface)",
-								borderColor:
-									"color-mix(in srgb, var(--color-primary) 12%, transparent)",
-							}}
-						>
 							<div className="flex items-center justify-between mb-4">
 								<div>
 									<h2
@@ -656,20 +631,13 @@ export default async function MePage({
 									</Link>
 								))}
 							</div>
-						</div>
+						</SurfaceCard>
 					</Reveal>
 				)}
 
 				{badges.length > 0 && (
 					<Reveal delay={0.3}>
-						<div
+						<SurfaceCard className="p-5">
-							className="rounded-2xl border p-5"
-							style={{
-								background: "var(--color-surface)",
-								borderColor:
-									"color-mix(in srgb, var(--color-primary) 12%, transparent)",
-							}}
-						>
 							<div className="mb-4">
 								<h2
 									className="text-lg font-black tracking-tight"
@@ -697,19 +665,12 @@ export default async function MePage({
 									/>
 								))}
 							</div>
-						</div>
+						</SurfaceCard>
 					</Reveal>
 				)}
 
 				<Reveal delay={0.35}>
-					<div
+					<SurfaceCard className="p-5">
-						className="rounded-2xl border p-5"
-						style={{
-							background: "var(--color-surface)",
-							borderColor:
-								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
-						}}
-					>
 						<h2
 							className="text-lg font-black tracking-tight mb-4"
 							style={{ color: "var(--color-text-readable)" }}
@@ -750,20 +711,13 @@ export default async function MePage({
 								</Link>
 							))}
 						</div>
-					</div>
+					</SurfaceCard>
 				</Reveal>
 			</div>
 		);
 	} catch {
 		content = (
-			<div
+			<SurfaceCard className="p-6 text-center">
-				className="rounded-2xl border p-6 text-center"
-				style={{
-					background: "var(--color-surface)",
-					borderColor:
-						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-				}}
-			>
 				<p
 					className="text-sm font-bold"
 					style={{ color: "var(--color-text-muted)" }}
@@ -771,7 +725,7 @@ export default async function MePage({
 					We couldn&apos;t load your dashboard right now. Please try again
 					shortly.
 				</p>
-			</div>
+			</SurfaceCard>
 		);
 	}
 

src/app/(site)/page.tsx

@@ -11,6 +11,7 @@ import { Clock } from "@/components/clock";
 import { LanguageSwitcher } from "@/components/language-switcher";
 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 { TypewriterText } from "@/components/typewriter-text";
 import { auth } from "@/lib/auth";
@@ -115,7 +116,7 @@ export default async function Home() {
 	const nonce = (await headers()).get("x-nonce") ?? undefined;
 
 	return (
-		<div className="flex flex-col gap-10 pb-14">
+		<div className="mx-auto w-full max-w-6xl flex flex-col gap-8 pb-16">
 			{/* ── Top Bar ── */}
 			<Reveal>
 				<div
@@ -188,7 +189,7 @@ export default async function Home() {
 			{/* ── Hero ── */}
 			<Reveal>
 				<div
-					className="relative overflow-hidden rounded-2xl border"
+					className="relative overflow-hidden rounded-3xl border"
 					style={{
 						borderColor:
 							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
@@ -206,12 +207,12 @@ export default async function Home() {
 						className="absolute inset-0"
 						style={{
 							background:
-								"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 90%, transparent) 0%, color-mix(in srgb, var(--color-surface) 35%, transparent) 50%, color-mix(in srgb, var(--color-surface) 10%, transparent) 100%)",
+								"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 92%, transparent) 0%, color-mix(in srgb, var(--color-surface) 45%, transparent) 50%, color-mix(in srgb, var(--color-surface) 12%, transparent) 100%)",
 						}}
 					/>
 					<AmbientOrbs />
 					<div
-						className="relative flex flex-col md:flex-row items-center gap-8 px-6 py-10 md:px-10 md:py-14"
+						className="relative flex flex-col items-center gap-8 px-6 py-12 md:flex-row md:px-12 md:py-16"
 						style={{ zIndex: 2 }}
 					>
 						<div className="flex-1 text-center md:text-left">
@@ -232,7 +233,7 @@ export default async function Home() {
 								{th("online", { count: online, hotel: hotelName })}
 							</div>
 							<h1
-								className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-3"
+								className="text-4xl font-black leading-[1.05] tracking-tight mb-3 md:text-5xl lg:text-6xl"
 								style={{
 									color: "var(--color-text-readable)",
 									fontFamily: "var(--font-nunito)",
@@ -241,7 +242,7 @@ export default async function Home() {
 								<TypewriterText text={tp("welcome", { hotelName })} />
 							</h1>
 							<p
-								className="text-base md:text-lg leading-relaxed max-w-xl mb-7"
+								className="text-base leading-relaxed max-w-xl mb-7 md:text-lg"
 								style={{ color: "var(--color-text-muted)" }}
 							>
 								{th("tagline")}
@@ -320,17 +321,9 @@ export default async function Home() {
 							icon: "/assets/images/icons/catalog.png",
 						},
 					].map((s) => (
-						<div
+						<SurfaceCard
 							key={s.label}
-							className="relative overflow-hidden rounded-xl border p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl card-premium"
+							className="relative p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
-							style={{
-								background:
-									"color-mix(in srgb, var(--color-surface) 70%, transparent)",
-								backdropFilter: "blur(8px)",
-								WebkitBackdropFilter: "blur(8px)",
-								borderColor:
-									"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-							}}
 						>
 							<div
 								className="absolute -top-6 -right-6 w-20 h-20 rounded-full opacity-[0.06]"
@@ -338,7 +331,7 @@ export default async function Home() {
 							/>
 							<div className="relative">
 								<div
-									className="w-10 h-10 rounded-xl flex items-center justify-center mx-auto mb-2.5 animate-pulse-glow"
+									className="mx-auto mb-2.5 flex h-10 w-10 items-center justify-center rounded-xl"
 									style={{
 										background:
 											"color-mix(in srgb, var(--color-primary) 14%, transparent)",
@@ -353,7 +346,7 @@ export default async function Home() {
 									/>
 								</div>
 								<div
-									className="text-3xl md:text-4xl font-black tracking-tight mb-0.5"
+									className="mb-0.5 text-3xl font-black tracking-tight md:text-4xl"
 									style={{ color: "var(--color-primary)" }}
 								>
 									<AnimatedCounter value={s.value} />
@@ -365,7 +358,7 @@ export default async function Home() {
 									{s.label}
 								</div>
 							</div>
-						</div>
+						</SurfaceCard>
 					))}
 				</div>
 			</Reveal>
@@ -374,37 +367,10 @@ export default async function Home() {
 			<div className="flex flex-col gap-4 md:flex-row">
 				{/* Left: Login & Register */}
 				<Reveal className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
-					<div
+					<SurfaceCard
-						className="overflow-hidden rounded-xl border"
+						title={th("login")}
-						style={{
+						icon="/assets/images/icons/navigation/me.png"
-							borderColor:
+						bodyClassName="p-4"
-								"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-						}}
-					>
-						<div
-							className="flex items-center gap-2.5 px-4 py-3"
-							style={{
-								background:
-									"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
-							}}
-						>
-							<Image
-								src="/assets/images/icons/navigation/me.png"
-								alt=""
-								width={18}
-								height={18}
-								unoptimized
-							/>
-							<h2
-								className="text-sm font-bold text-white"
-								style={{ fontFamily: "var(--font-nunito)" }}
-							>
-								Login
-							</h2>
-						</div>
-						<div
-							className="p-3"
-							style={{ backgroundColor: "var(--color-surface)" }}
 					>
 						<HomeLoginForm
 							captcha={{
@@ -414,17 +380,10 @@ export default async function Home() {
 							}}
 							nonce={nonce}
 						/>
-						</div>
+					</SurfaceCard>
-					</div>
 
 					<Link href="/register" className="relative block group">
-						<div
+						<SurfaceCard className="transition-all duration-200 group-hover:shadow-lg">
-							className="overflow-hidden rounded-xl border transition-all duration-200 group-hover:shadow-lg"
-							style={{
-								borderColor:
-									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-							}}
-						>
 							<Image
 								src="/assets/images/EnterHubbly.png"
 								alt="Register"
@@ -433,9 +392,9 @@ export default async function Home() {
 								className="block w-full"
 								unoptimized
 							/>
-						</div>
+						</SurfaceCard>
 						<span
-							className="pointer-events-none absolute inset-0 flex items-center text-2xl md:text-3xl font-extrabold text-white"
+							className="pointer-events-none absolute inset-0 flex items-center text-2xl font-extrabold text-white md:text-3xl"
 							style={{
 								marginLeft: "18px",
 								fontFamily: "var(--font-nunito)",
@@ -447,50 +406,24 @@ export default async function Home() {
 					</Link>
 
 					{latestUsers.length > 0 && (
-						<div
+						<SurfaceCard
-							className="overflow-hidden rounded-xl border"
+							title={tp("latestUsers", { count: users.toLocaleString() })}
-							style={{
+							icon="/assets/images/icons/navigation/goody.png"
-								borderColor:
+							bodyClassName="p-4"
-									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-								backgroundColor: "var(--color-surface)",
-							}}
 						>
-							<div
+							<div className="grid grid-cols-4 gap-2">
-								className="flex items-center gap-2.5 px-4 py-3"
-								style={{
-									background:
-										"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
-								}}
-							>
-								<Image
-									src="/assets/images/icons/navigation/goody.png"
-									alt=""
-									width={18}
-									height={18}
-									unoptimized
-								/>
-								<h2
-									className="text-sm font-bold text-white"
-									style={{ fontFamily: "var(--font-nunito)" }}
-								>
-									{tp("latestUsers", { count: users.toLocaleString() })}
-								</h2>
-							</div>
-							<div className="grid grid-cols-4 gap-2 p-3">
 								{latestUsers.map((u) => (
 									<div
 										key={u.username}
 										className="flex flex-col items-center gap-1"
 									>
-										<div className="relative overflow-visible">
 										<UserAvatarThumbnail
 											figure={u.look}
 											alt={u.username}
 											options={{ direction: 3 }}
 										/>
-										</div>
 										<span
-											className="text-[11px] font-bold truncate max-w-[64px] text-center leading-tight"
+											className="max-w-[64px] truncate text-center text-[11px] font-bold leading-tight"
 											style={{ color: "var(--color-text-readable)" }}
 										>
 											{u.username}
@@ -498,57 +431,25 @@ export default async function Home() {
 									</div>
 								))}
 							</div>
-						</div>
+						</SurfaceCard>
 					)}
 				</Reveal>
 
 				{/* Right: News */}
 				<Reveal delay={0.15} className="flex w-full flex-col gap-4 md:w-2/3">
-					<div
+					<SurfaceCard
-						className="overflow-hidden rounded-xl border"
+						title={tp("latestNews")}
-						style={{
+						icon="/assets/images/icons/article.gif"
-							borderColor:
+						actionHref="/news"
-								"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+						actionLabel={tp("allNews")}
-							backgroundColor: "var(--color-surface)",
-						}}
 					>
-						<div
-							className="flex items-center justify-between px-4 py-3"
-							style={{
-								background:
-									"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
-							}}
-						>
-							<div className="flex items-center gap-2.5">
-								<Image
-									src="/assets/images/icons/article.gif"
-									alt=""
-									width={18}
-									height={18}
-									unoptimized
-								/>
-								<h2
-									className="text-sm font-bold text-white"
-									style={{ fontFamily: "var(--font-nunito)" }}
-								>
-									{tp("latestNews")}
-								</h2>
-							</div>
-							<Link
-								href="/news"
-								className="text-xs font-bold text-white/80 hover:text-white hover:underline"
-							>
-								{tp("allNews")}
-							</Link>
-						</div>
-						<div className="p-4">
 						{articles.length > 0 ? (
 							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
 								{articles.slice(0, 4).map((a) => (
 									<Link
 										key={a.slug}
 										href={`/news/${a.slug}`}
-											className="group relative w-full overflow-hidden rounded-lg transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5"
+										className="group relative w-full overflow-hidden rounded-xl transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
 										style={{
 											height: "200px",
 											backgroundColor: "var(--color-background)",
@@ -556,23 +457,20 @@ export default async function Home() {
 												"1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
 										}}
 									>
-											<div className="relative h-full w-full overflow-hidden rounded-lg">
+										<div className="relative h-full w-full overflow-hidden rounded-xl">
 											<Image
 												src={a.image}
 												alt={a.title}
 												fill
 												sizes="(max-width: 768px) 100vw, 400px"
-													className="rounded-lg object-cover transition-all duration-300 group-hover:scale-105"
+												className="rounded-xl object-cover transition-all duration-300 group-hover:scale-105"
 											/>
-												<div className="absolute top-2.5 right-2.5 w-8 h-8 rounded-full flex items-center justify-center bg-black/50 backdrop-blur-sm transition-all duration-300 opacity-0 group-hover:opacity-100 translate-x-1 group-hover:translate-x-0">
+											<div className="absolute right-2.5 top-2.5 flex h-8 w-8 translate-x-1 items-center justify-center rounded-full bg-black/50 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
-													<span className="text-white text-sm font-bold">
+												<span className="text-sm font-bold text-white">→</span>
-														→
-													</span>
 											</div>
 											<div
-													className="absolute left-0 w-full p-2.5"
+												className="absolute bottom-0 left-0 w-full p-2.5"
 												style={{
-														bottom: 0,
 													background:
 														"linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%)",
 												}}
@@ -581,7 +479,7 @@ export default async function Home() {
 													{a.title}
 												</h3>
 												<p
-														className="text-[11px] font-semibold mt-0.5 opacity-80"
+													className="mt-0.5 text-[11px] font-semibold opacity-80"
 													style={{ color: "var(--color-text-muted)" }}
 												>
 													{formatDate(a.createdAt, "date", "")}
@@ -599,57 +497,24 @@ export default async function Home() {
 								{tp("noArticles")}
 							</p>
 						)}
-						</div>
+					</SurfaceCard>
-					</div>
 				</Reveal>
 			</div>
 
 			{/* ── Online users ── */}
 			{recentUsers.length > 0 && (
 				<Reveal>
-					<div
+					<SurfaceCard
-						className="overflow-hidden rounded-xl border"
+						title={tp("recentUsers")}
-						style={{
+						icon="/assets/images/icons/navigation/goody.png"
-							borderColor:
+						actionHref="/community"
-								"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+						actionLabel={tp("allUsers")}
-							backgroundColor: "var(--color-surface)",
-						}}
 					>
-						<div
-							className="flex items-center justify-between px-4 py-3"
-							style={{
-								background:
-									"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
-							}}
-						>
-							<div className="flex items-center gap-2.5">
-								<Image
-									src="/assets/images/icons/navigation/goody.png"
-									alt=""
-									width={18}
-									height={18}
-									unoptimized
-								/>
-								<h3
-									className="text-sm font-bold text-white"
-									style={{ fontFamily: "var(--font-nunito)" }}
-								>
-									{tp("recentUsers")}
-								</h3>
-							</div>
-							<Link
-								href="/community"
-								className="text-xs font-bold text-white/80 hover:text-white hover:underline"
-							>
-								{tp("allUsers")}
-							</Link>
-						</div>
-						<div className="p-4">
 						<div className="flex flex-wrap justify-center gap-2">
 							{recentUsers.slice(0, 12).map((u) => (
 								<div
 									key={u.username}
-										className="flex flex-col items-center gap-0.5 px-2 py-1.5 rounded-lg transition-all duration-200 hover:scale-110 hover:shadow-md"
+									className="flex flex-col items-center gap-0.5 rounded-lg px-2 py-1.5 transition-all duration-200 hover:scale-110 hover:shadow-md"
 									style={{
 										background:
 											"color-mix(in srgb, var(--color-primary) 5%, transparent)",
@@ -662,7 +527,7 @@ export default async function Home() {
 										className="rounded-md"
 									/>
 									<span
-											className="text-[9px] font-bold truncate max-w-[50px] text-center leading-tight"
+										className="max-w-[50px] truncate text-center text-[9px] font-bold leading-tight"
 										style={{ color: "var(--color-text-readable)" }}
 									>
 										{u.username}
@@ -670,15 +535,14 @@ export default async function Home() {
 								</div>
 							))}
 						</div>
-						</div>
+					</SurfaceCard>
-					</div>
 				</Reveal>
 			)}
 
 			{/* ── Bottom CTA ── */}
 			<Reveal>
 				<div
-					className="relative overflow-hidden rounded-xl border text-center px-6 py-10"
+					className="relative overflow-hidden rounded-3xl border px-6 py-12 text-center"
 					style={{
 						background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 70%, transparent))`,
 						borderColor:
@@ -686,7 +550,7 @@ export default async function Home() {
 					}}
 				>
 					<h2
-						className="text-2xl md:text-3xl font-black tracking-tight mb-2"
+						className="mb-2 text-2xl font-black tracking-tight md:text-3xl"
 						style={{
 							color: "var(--color-text-readable)",
 							fontFamily: "var(--font-nunito)",
@@ -695,7 +559,7 @@ export default async function Home() {
 						{tp("joinNow", { hotelName })}
 					</h2>
 					<p
-						className="text-sm mb-6 max-w-sm mx-auto"
+						className="mb-6 max-w-sm mx-auto text-sm"
 						style={{ color: "var(--color-text-muted)" }}
 					>
 						{tp("welcomeBody")}
@@ -725,42 +589,16 @@ export default async function Home() {
 			{/* ── Recent photos ── */}
 			{recentPhotos.length > 0 && (
 				<Reveal>
-					<div
+					<SurfaceCard
-						className="overflow-hidden rounded-xl border"
+						title={tp("recentPhotos")}
-						style={{
+						icon="/assets/images/icons/camera.png"
-							borderColor:
-								"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-							backgroundColor: "var(--color-surface)",
-						}}
 					>
-						<div
+						<div className="mx-auto grid max-w-sm grid-cols-4 gap-2">
-							className="flex items-center gap-2.5 px-4 py-3"
-							style={{
-								background:
-									"linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
-							}}
-						>
-							<Image
-								src="/assets/images/icons/camera.png"
-								alt=""
-								width={18}
-								height={18}
-								unoptimized
-							/>
-							<h3
-								className="text-sm font-bold text-white"
-								style={{ fontFamily: "var(--font-nunito)" }}
-							>
-								{tp("recentPhotos")}
-							</h3>
-						</div>
-						<div className="p-4">
-							<div className="grid grid-cols-4 gap-2 max-w-sm mx-auto">
 							{recentPhotos.slice(0, 4).map((p) => (
 								<Link
 									key={p.id}
 									href="/photos"
-										className="block rounded-lg overflow-hidden aspect-square border transition-all duration-200 hover:shadow-md"
+									className="block aspect-square overflow-hidden rounded-xl border transition-all duration-200 hover:shadow-md"
 									style={{
 										borderColor:
 											"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
@@ -771,14 +609,13 @@ export default async function Home() {
 										alt=""
 										width={200}
 										height={200}
-											className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
+										className="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
 										unoptimized
 									/>
 								</Link>
 							))}
 						</div>
-						</div>
+					</SurfaceCard>
-					</div>
 				</Reveal>
 			)}
 		</div>

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

@@ -8,6 +8,7 @@ import { Clock } from "@/components/clock";
 import { LanguageSwitcher } from "@/components/language-switcher";
 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";
@@ -50,7 +51,7 @@ export default async function RegisterPage() {
 	]);
 
 	return (
-		<div className="flex flex-col gap-10 pb-14">
+		<div className="mx-auto w-full max-w-6xl flex flex-col gap-8 pb-16">
 			{/* ── Top Bar ── */}
 			<Reveal>
 				<div
@@ -119,12 +120,13 @@ export default async function RegisterPage() {
 					</div>
 				</div>
 			</Reveal>
+
 			<Reveal>
-				<div className="flex flex-col lg:flex-row gap-10 stagger-children">
+				<div className="flex flex-col gap-8 lg:flex-row">
 					{/* Left panel */}
 					<div className="lg:w-80 shrink-0 space-y-4">
-						<div
+						<SurfaceCard
-							className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
+							className="relative p-6 text-center"
 							style={{
 								borderColor:
 									"color-mix(in srgb, var(--color-primary) 20%, transparent)",
@@ -178,43 +180,13 @@ export default async function RegisterPage() {
 									{th("tagline")}
 								</p>
 							</div>
-						</div>
+						</SurfaceCard>
 
 						{recentUsers.length > 0 && (
-							<div
+							<SurfaceCard
-								className="overflow-hidden rounded-xl border"
+								title={tpr("whoIsOnline")}
-								style={{
+								icon="/assets/images/icons/navigation/goody.png"
-									borderColor:
+								bodyClassName="p-4"
-										"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-								}}
-							>
-								<div
-									className="flex items-center gap-2.5 px-4 py-3"
-									style={{
-										background:
-											"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
-									}}
-								>
-									<Image
-										src="/assets/images/icons/navigation/goody.png"
-										alt=""
-										width={18}
-										height={18}
-										unoptimized
-									/>
-									<h3
-										className="text-sm font-bold text-white"
-										style={{ fontFamily: "var(--font-nunito)" }}
-									>
-										{tpr("whoIsOnline")}
-									</h3>
-								</div>
-								<div
-									className="p-4"
-									style={{
-										background:
-											"color-mix(in srgb, var(--color-surface) 70%, transparent)",
-									}}
 							>
 								<div className="grid grid-cols-4 gap-1.5">
 									{recentUsers.map((u) => (
@@ -241,45 +213,14 @@ export default async function RegisterPage() {
 										</div>
 									))}
 								</div>
-								</div>
+							</SurfaceCard>
-							</div>
 						)}
 
 						{latestUsers.length > 0 && (
-							<div
+							<SurfaceCard
-								className="overflow-hidden rounded-xl border"
+								title="Newest citizens"
-								style={{
+								icon="/assets/images/icons/friends.png"
-									borderColor:
+								bodyClassName="p-4"
-										"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-								}}
-							>
-								<div
-									className="flex items-center gap-2.5 px-4 py-3"
-									style={{
-										background:
-											"linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
-									}}
-								>
-									<Image
-										src="/assets/images/icons/friends.png"
-										alt=""
-										width={18}
-										height={18}
-										unoptimized
-									/>
-									<h3
-										className="text-sm font-bold text-white"
-										style={{ fontFamily: "var(--font-nunito)" }}
-									>
-										Newest citizens
-									</h3>
-								</div>
-								<div
-									className="p-4"
-									style={{
-										background:
-											"color-mix(in srgb, var(--color-surface) 70%, transparent)",
-									}}
 							>
 								<div className="grid grid-cols-4 gap-1.5">
 									{latestUsers.map((u) => (
@@ -306,8 +247,7 @@ export default async function RegisterPage() {
 										</div>
 									))}
 								</div>
-								</div>
+							</SurfaceCard>
-							</div>
 						)}
 
 						<p
@@ -329,37 +269,10 @@ export default async function RegisterPage() {
 
 					{/* Right: form */}
 					<div className="flex-1">
-						<div
+						<SurfaceCard
-							className="overflow-hidden rounded-xl border"
+							title={tpr("title")}
-							style={{
+							icon="/assets/images/icons/navigation/me.png"
-								borderColor:
+							bodyClassName="p-6"
-									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-							}}
-						>
-							<div
-								className="flex items-center gap-2.5 px-4 py-3"
-								style={{
-									background:
-										"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
-								}}
-							>
-								<Image
-									src="/assets/images/icons/navigation/me.png"
-									alt=""
-									width={18}
-									height={18}
-									unoptimized
-								/>
-								<h2
-									className="text-sm font-bold text-white"
-									style={{ fontFamily: "var(--font-nunito)" }}
-								>
-									{tpr("title")}
-								</h2>
-							</div>
-							<div
-								className="p-6"
-								style={{ backgroundColor: "var(--color-surface)" }}
 						>
 							<p
 								className="text-sm mb-6"
@@ -375,8 +288,7 @@ export default async function RegisterPage() {
 								}}
 								nonce={nonce}
 							/>
-							</div>
+						</SurfaceCard>
-						</div>
 					</div>
 				</div>
 			</Reveal>

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

@@ -2,6 +2,7 @@ import { and, eq, like } from "drizzle-orm";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
+import { SurfaceCard } from "@/components/surface-card";
 import { db, Rooms, User } from "@/lib/db";
 
 export const metadata: Metadata = { title: "Search" };
@@ -18,21 +19,14 @@ export default async function SearchPage({
 
 	if (!query) {
 		return (
-			<div
+			<SurfaceCard className="p-10 text-center">
-				className="rounded-2xl border p-10 text-center"
-				style={{
-					background: "var(--color-surface)",
-					borderColor:
-						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-				}}
-			>
 				<p
 					className="text-sm font-bold"
 					style={{ color: "var(--color-text-muted)" }}
 				>
 					Enter a search term to find users.
 				</p>
-			</div>
+			</SurfaceCard>
 		);
 	}
 
@@ -66,14 +60,7 @@ export default async function SearchPage({
 
 	return (
 		<div className="flex flex-col gap-6">
-			<div
+			<SurfaceCard className="p-4">
-				className="rounded-2xl border p-4"
-				style={{
-					background: "var(--color-surface)",
-					borderColor:
-						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-				}}
-			>
 				<form action="/search" method="GET" className="flex gap-2">
 					<input
 						type="text"
@@ -99,7 +86,7 @@ export default async function SearchPage({
 						Search
 					</button>
 				</form>
-			</div>
+			</SurfaceCard>
 
 			<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
 				Results for &quot;{query}&quot; — {users.length} user
@@ -109,14 +96,7 @@ export default async function SearchPage({
 			</p>
 
 			{users.length > 0 && (
-				<div
+				<SurfaceCard className="p-5">
-					className="rounded-2xl border p-5"
-					style={{
-						background: "var(--color-surface)",
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-					}}
-				>
 					<h2
 						className="text-lg font-black tracking-tight mb-4"
 						style={{ color: "var(--color-text-readable)" }}
@@ -155,18 +135,11 @@ export default async function SearchPage({
 							</Link>
 						))}
 					</div>
-				</div>
+				</SurfaceCard>
 			)}
 
 			{rooms.length > 0 && (
-				<div
+				<SurfaceCard className="p-5">
-					className="rounded-2xl border p-5"
-					style={{
-						background: "var(--color-surface)",
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-					}}
-				>
 					<h2
 						className="text-lg font-black tracking-tight mb-4"
 						style={{ color: "var(--color-text-readable)" }}
@@ -201,25 +174,18 @@ export default async function SearchPage({
 							</Link>
 						))}
 					</div>
-				</div>
+				</SurfaceCard>
 			)}
 
 			{users.length === 0 && rooms.length === 0 && (
-				<div
+				<SurfaceCard className="p-10 text-center">
-					className="rounded-2xl border p-10 text-center"
-					style={{
-						background: "var(--color-surface)",
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-					}}
-				>
 					<p
 						className="text-sm font-bold"
 						style={{ color: "var(--color-text-muted)" }}
 					>
 						No users or rooms found for &quot;{query}&quot;.
 					</p>
-				</div>
+				</SurfaceCard>
 			)}
 		</div>
 	);

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

@@ -5,6 +5,7 @@ import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { updateMotto } from "@/actions/user-settings";
 import { Reveal } from "@/components/motion-reveal";
+import { SurfaceCard } from "@/components/surface-card";
 import { auth } from "@/lib/auth";
 import { db, User } from "@/lib/db";
 import { avatarImageUrl } from "@/lib/format";
@@ -46,19 +47,20 @@ export default async function SettingsPage() {
 		<div className="flex flex-col gap-6 pb-14">
 			{/* Header */}
 			<Reveal>
-				<div
+				<SurfaceCard
-					className="relative overflow-hidden rounded-xl border px-5 py-4"
+					className="relative px-5 py-4"
 					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">
 						<div
-							className="w-10 h-10 rounded-xl flex items-center justify-center"
+							className="flex h-10 w-10 items-center justify-center rounded-xl"
 							style={{
 								background:
 									"color-mix(in srgb, var(--color-primary) 14%, transparent)",
@@ -90,46 +92,19 @@ export default async function SettingsPage() {
 							</p>
 						</div>
 					</div>
-				</div>
+				</SurfaceCard>
 			</Reveal>
 
 			{/* Profile card */}
 			<Reveal delay={0.05}>
-				<div
+				<SurfaceCard
-					className="overflow-hidden rounded-xl border card-premium"
+					title={t("publicProfile")}
-					style={{
+					icon="/assets/images/icons/navigation/me.png"
-						borderColor:
+					bodyClassName="p-5 flex items-center gap-5"
-							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-					}}
-				>
-					<div
-						className="flex items-center gap-2.5 px-4 py-3"
-						style={{
-							background:
-								"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
-						}}
-					>
-						<Image
-							src="/assets/images/icons/navigation/me.png"
-							alt=""
-							width={18}
-							height={18}
-							unoptimized
-						/>
-						<h2
-							className="text-sm font-bold text-white"
-							style={{ fontFamily: "var(--font-nunito)" }}
-						>
-							{t("publicProfile")}
-						</h2>
-					</div>
-					<div
-						className="p-5 flex items-center gap-5"
-						style={{ backgroundColor: "var(--color-surface)" }}
 				>
 					<div className="shrink-0">
 						<div
-								className="rounded-xl overflow-hidden border"
+							className="overflow-hidden rounded-xl border"
 							style={{
 								borderColor:
 									"color-mix(in srgb, var(--color-primary) 15%, transparent)",
@@ -172,43 +147,15 @@ export default async function SettingsPage() {
 							{user.mail || t("noEmail")}
 						</p>
 					</div>
-					</div>
+				</SurfaceCard>
-				</div>
 			</Reveal>
 
 			{/* Motto form */}
 			<Reveal delay={0.1}>
-				<div
+				<SurfaceCard
-					className="overflow-hidden rounded-xl border"
+					title={t("changeMotto")}
-					style={{
+					icon="/assets/images/icons/star.gif"
-						borderColor:
+					bodyClassName="p-5"
-							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-					}}
-				>
-					<div
-						className="flex items-center gap-2.5 px-4 py-3"
-						style={{
-							background:
-								"linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
-						}}
-					>
-						<Image
-							src="/assets/images/icons/star.gif"
-							alt=""
-							width={18}
-							height={18}
-							unoptimized
-						/>
-						<h2
-							className="text-sm font-bold text-white"
-							style={{ fontFamily: "var(--font-nunito)" }}
-						>
-							{t("changeMotto")}
-						</h2>
-					</div>
-					<div
-						className="p-5"
-						style={{ backgroundColor: "var(--color-surface)" }}
 				>
 					<p
 						className="text-xs mb-4"
@@ -250,43 +197,15 @@ export default async function SettingsPage() {
 							</button>
 						</div>
 					</form>
-					</div>
+				</SurfaceCard>
-				</div>
 			</Reveal>
 
 			{/* Security card */}
 			<Reveal delay={0.15}>
-				<div
+				<SurfaceCard
-					className="overflow-hidden rounded-xl border"
+					title={t("securityTitle")}
-					style={{
+					icon="/assets/images/icons/navigation/goody.png"
-						borderColor:
+					bodyClassName="p-5"
-							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-					}}
-				>
-					<div
-						className="flex items-center gap-2.5 px-4 py-3"
-						style={{
-							background:
-								"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
-						}}
-					>
-						<Image
-							src="/assets/images/icons/navigation/goody.png"
-							alt=""
-							width={18}
-							height={18}
-							unoptimized
-						/>
-						<h2
-							className="text-sm font-bold text-white"
-							style={{ fontFamily: "var(--font-nunito)" }}
-						>
-							{t("securityTitle")}
-						</h2>
-					</div>
-					<div
-						className="p-5"
-						style={{ backgroundColor: "var(--color-surface)" }}
 				>
 					<p
 						className="text-xs mb-4"
@@ -307,27 +226,20 @@ export default async function SettingsPage() {
 					>
 						{t("twoFactorLink")}
 					</Link>
-					</div>
+				</SurfaceCard>
-				</div>
 			</Reveal>
 
 			{/* Sessions link */}
 			<Reveal delay={0.2}>
-				<Link
+				<Link href="/settings/sessions" className="block">
-					href="/settings/sessions"
+					<SurfaceCard className="transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
-					className="block overflow-hidden rounded-xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
-					style={{
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-					}}
-				>
 						<div
 							className="flex items-center justify-between px-5 py-4"
 							style={{ backgroundColor: "var(--color-surface)" }}
 						>
 							<div className="flex items-center gap-3">
 								<div
-								className="w-10 h-10 rounded-xl flex items-center justify-center"
+									className="flex h-10 w-10 items-center justify-center rounded-xl"
 									style={{
 										background:
 											"color-mix(in srgb, var(--color-primary) 14%, transparent)",
@@ -363,6 +275,7 @@ export default async function SettingsPage() {
 								→
 							</span>
 						</div>
+					</SurfaceCard>
 				</Link>
 			</Reveal>
 		</div>

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

@@ -3,6 +3,7 @@ import { CheckCircle2, Clock, MailX } from "lucide-react";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { isValidVerificationToken } from "@/actions/email-verify";
+import { SurfaceCard } from "@/components/surface-card";
 import { db, User } from "@/lib/db";
 
 type Status = "verified" | "already" | "invalid" | "unavailable";
@@ -20,38 +21,47 @@ function StatusCard({
 	children: React.ReactNode;
 	color: string;
 }) {
-	const gradientMap: Record<string, string> = {
+	const tintMap: Record<string, string> = {
-		green:
+		green: "#16a34a",
-			"linear-gradient(140deg, #0A2F1A 0%, #0F3D22 20%, #154C2A 40%, #1B5A32 60%, #20683A 75%, #1A5A30 90%, #144826 100%)",
+		yellow: "#d97706",
-		yellow:
+		red: "#dc2626",
-			"linear-gradient(140deg, #3A2F0A 0%, #4A3D0F 20%, #5A4C15 40%, #6A5A1B 60%, #7A6820 75%, #6A5A1A 90%, #5A4814 100%)",
+		blue: "#2563eb",
-		red: "linear-gradient(140deg, #3A0F0A 0%, #4A1A0F 20%, #5A2515 40%, #6A301B 60%, #7A3B20 75%, #6A301A 90%, #5A2514 100%)",
-		blue: "linear-gradient(140deg, #0A1A3A 0%, #0F254A 20%, #15305A 40%, #1B3B6A 60%, #20467A 75%, #1A3B6A 90%, #14305A 100%)",
 	};
+	const tint = tintMap[color] ?? tintMap.blue;
 
 	return (
 		<main className="flex min-h-[60vh] items-center justify-center px-4">
+			<SurfaceCard className="w-full max-w-md">
 				<div
-				className="w-full max-w-md overflow-hidden rounded-xl border"
+					className="flex items-center gap-2.5 border-b px-5 py-4"
 					style={{
+						background: `color-mix(in srgb, ${tint} 12%, var(--color-surface))`,
 						borderColor:
-						"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-					backgroundColor: "var(--color-surface)",
 					}}
 				>
-				<div
+					<span
-					className="flex items-center gap-2.5 px-5 py-4"
+						className="flex h-7 w-7 items-center justify-center rounded-lg"
-					style={{ background: gradientMap[color] ?? gradientMap.blue }}
+						style={{
+							background: `color-mix(in srgb, ${tint} 18%, transparent)`,
+							color: tint,
+						}}
 					>
-					<span className="text-white">{icon}</span>
+						{icon}
-					<h1 className="text-sm font-bold text-white">{title}</h1>
+					</span>
+					<h1
+						className="text-sm font-bold tracking-tight"
+						style={{ color: "var(--color-text-readable)" }}
+					>
+						{title}
+					</h1>
 				</div>
 				<div className="flex flex-col items-center gap-4 px-6 py-8 text-center">
 					<div
 						className="flex h-16 w-16 items-center justify-center rounded-full"
 						style={{
-							background:
+							background: `color-mix(in srgb, ${tint} 12%, transparent)`,
-								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+							color: tint,
 						}}
 					>
 						{icon}
@@ -64,7 +74,7 @@ function StatusCard({
 					</p>
 					{children}
 				</div>
-			</div>
+			</SurfaceCard>
 		</main>
 	);
 }

src/app/admin/settings/cms-settings-config.ts

@@ -1,4 +1,3 @@
-import { FALLBACK_HOTEL_NAME } from "@/lib/brand";
 import { HABBO_GAMEDATA_HOTELS } from "@/lib/habbo-gamedata-hotel";
 
 export type FieldType =
@@ -45,13 +44,6 @@ export const SETTINGS_GROUPS: SettingsGroup[] = [
 		icon: "building",
 		description: "Name, branding and defaults shown across the site.",
 		fields: [
-			{
-				key: "hotel_name",
-				label: "Hotel name",
-				type: "text",
-				placeholder: "Epicnabbo",
-				defaultValue: FALLBACK_HOTEL_NAME,
-			},
 			{
 				key: "cms_logo",
 				label: "Logo URL",

src/app/api/home/route.ts

@@ -1,6 +1,6 @@
 import { count, desc, eq } from "drizzle-orm";
+import { env } from "@/env";
 import { apiJson } from "@/lib/api";
-import { FALLBACK_HOTEL_NAME } from "@/lib/brand";
 import { db, User, WebsiteArticles } from "@/lib/db";
 import { resolveHotelName } from "@/lib/hotel-name";
 import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
@@ -38,7 +38,7 @@ export async function GET(_req: Request) {
 		return apiJson(data);
 	} catch {
 		return apiJson(
-			{ articles: [], online: 0, hotelName: FALLBACK_HOTEL_NAME },
+			{ articles: [], online: 0, hotelName: env.HOTEL_NAME },
 			{ status: 200 },
 		);
 	}

src/components/mobile-nav.tsx

@@ -3,7 +3,6 @@
 import { AnimatePresence, motion } from "motion/react";
 import Image from "next/image";
 import { type ReactNode, useRef, useState } from "react";
-import { FALLBACK_HOTEL_NAME } from "@/lib/brand";
 import { mobileMenuVariants } from "@/lib/motion";
 
 interface MobileNavProps {
@@ -17,7 +16,7 @@ export function MobileNav({
 	children,
 	menuLabel = "Open menu",
 	closeLabel = "Close menu",
-	brandLabel = FALLBACK_HOTEL_NAME,
+	brandLabel = "",
 }: MobileNavProps) {
 	const [open, setOpen] = useState(false);
 	const detailsRef = useRef<HTMLDivElement>(null);

src/components/public/logo-generator.tsx

@@ -16,10 +16,9 @@ import {
 	renderToCanvas,
 } from "@/components/public/sprite-font";
 import { ContentCard } from "@/components/public/ui";
-import { FALLBACK_HOTEL_NAME } from "@/lib/brand";
 
 export default function LogoGenerator({
-	initialText = FALLBACK_HOTEL_NAME,
+	initialText = "",
 }: {
 	initialText?: string;
 }) {

src/components/surface-card.tsx

@@ -0,0 +1,101 @@
+import Image from "next/image";
+import Link from "next/link";
+import type { CSSProperties, ReactNode } from "react";
+
+const CARD_BORDER =
+	"color-mix(in srgb, var(--color-text-muted) 12%, transparent)";
+const CARD_DIVIDER =
+	"color-mix(in srgb, var(--color-text-muted) 8%, transparent)";
+const CARD_HEADER_BG =
+	"color-mix(in srgb, var(--color-primary) 10%, var(--color-surface))";
+
+export interface SurfaceCardProps {
+	children: ReactNode;
+	/** Optional header title. */
+	title?: string;
+	/** Optional header icon (image URL). */
+	icon?: string;
+	/** Optional header action link. */
+	actionHref?: string;
+	actionLabel?: string;
+	/** Class for the body wrapper (only used when a header is present). */
+	bodyClassName?: string;
+	className?: string;
+	style?: CSSProperties;
+}
+
+/**
+ * The single public-site card component. Mirrors the CSS `.content-card` visual
+ * language (--radius-lg corners, --shadow-card, hairline border). Pass `title`
+ * / `icon` / `actionHref` to render a section header, exactly like the old
+ * a card header. Without a header, children render directly so callers control
+ * padding via `className`.
+ */
+export function SurfaceCard({
+	children,
+	title,
+	icon,
+	actionHref,
+	actionLabel,
+	bodyClassName,
+	className = "",
+	style,
+}: SurfaceCardProps) {
+	const hasHeader = Boolean(title || icon || (actionHref && actionLabel));
+
+	return (
+		<div
+			className={`overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`}
+			style={{
+				borderColor: CARD_BORDER,
+				boxShadow: "var(--shadow-card)",
+				...style,
+			}}
+		>
+			{hasHeader && (
+				<div
+					className="flex items-center justify-between gap-3 border-b px-5 py-3.5"
+					style={{ borderColor: CARD_DIVIDER, background: CARD_HEADER_BG }}
+				>
+					<div className="flex items-center gap-2.5">
+						{icon && (
+							<Image
+								src={icon}
+								alt=""
+								width={18}
+								height={18}
+								unoptimized
+								className="opacity-90"
+							/>
+						)}
+						{title && (
+							<h2
+								className="text-sm font-bold tracking-tight"
+								style={{
+									fontFamily: "var(--font-nunito)",
+									color: "var(--color-text-readable)",
+								}}
+							>
+								{title}
+							</h2>
+						)}
+					</div>
+					{actionHref && actionLabel && (
+						<Link
+							href={actionHref}
+							className="text-xs font-semibold transition-colors hover:text-[var(--color-primary)] hover:underline"
+							style={{ color: "var(--color-text-muted)" }}
+						>
+							{actionLabel}
+						</Link>
+					)}
+				</div>
+			)}
+			{hasHeader ? (
+				<div className={bodyClassName ?? "p-5"}>{children}</div>
+			) : (
+				children
+			)}
+		</div>
+	);
+}

src/env.ts

@@ -1,5 +1,4 @@
 import { z } from "zod";
-import { FALLBACK_HOTEL_NAME } from "@/lib/brand";
 
 // Minimal validated env for the foundation. When the Next.js app is added this
 // will move to @t3-oss/env-nextjs (the habbo-next pattern), but the data layer
@@ -25,7 +24,12 @@ const schema = z
 			.int()
 			.positive()
 			.default(10_000),
-		HOTEL_NAME: z.string().default(FALLBACK_HOTEL_NAME),
+		HOTEL_NAME: z
+			.string()
+			.min(
+				1,
+				"HOTEL_NAME is not set — the site has not been configured/built yet.",
+			),
 		APP_URL: z.string().url().default("http://localhost:3000"),
 		NEXT_PUBLIC_APP_URL: z.string().url().default("http://localhost:3000"),
 		// Public imager URL — overrides the default /imaging relative path.

src/lib/auth.ts

@@ -1,85 +1,24 @@
-import { eq, sql } from "drizzle-orm";
+import { eq } from "drizzle-orm";
 import NextAuth from "next-auth";
 import Credentials from "next-auth/providers/credentials";
 import { env } from "@/env";
 import { getCachedJwtVersion } from "@/lib/auth/jwt-version-cache";
+import {
+	getLoginUser,
+	invalidateLoginCache,
+	isEmailUnverified,
+	normalizeLoginInput,
+	runDummyHashCheck,
+	verifyLoginPassword,
+} from "@/lib/auth/login-core";
+
+export { invalidateLoginCache };
+
 import { LaravelEncrypter } from "@/lib/auth/laravel-encrypter";
-import { checkLogin } from "@/lib/auth/password";
 import { verifyTotp } from "@/lib/auth/totp";
-import { cachedQuery, invalidateKey } from "@/lib/cached-db";
 import { db, User, WebsiteLoginLogs } from "@/lib/db";
 import { logger } from "@/lib/logger";
 import { clientIp, rateLimit } from "@/lib/rate-limit";
-import { siteSettings } from "@/lib/services/site-settings";
-
-interface LoginUser {
-	id: number;
-	username: string;
-	password: string | null;
-	rank: number;
-	mail: string | null;
-	mailVerified: string | null;
-	twoFactorConfirmedAt: string | null;
-	twoFactorSecret: string | null;
-}
-
-/**
- * Cached login user lookup — short TTL to survive brute-force attempts
- * while still reflecting recent password/account changes reasonably fast.
- */
-async function getLoginUser(username: string): Promise<LoginUser | null> {
-	return cachedQuery<LoginUser | null>(
-		`login:user:${username}`,
-		async () => {
-			const [result] = await db.execute<{
-				id: number;
-				username: string;
-				password: string | null;
-				rank: number;
-				mail: string | null;
-				mail_verified: string | null;
-				two_factor_confirmed_at: string | null;
-				two_factor_secret: string | null;
-			}>(sql`
-				SELECT id, username, password, rank, mail,
-				       mail_verified,
-				       two_factor_confirmed_at,
-				       two_factor_secret
-				FROM users
-				WHERE username = ${username}
-				LIMIT 1
-			`);
-			const rows = result as unknown as Array<{
-				id: number;
-				username: string;
-				password: string | null;
-				rank: number;
-				mail: string | null;
-				mail_verified: string | null;
-				two_factor_confirmed_at: string | null;
-				two_factor_secret: string | null;
-			}>;
-			return rows.length > 0
-				? {
-						id: rows[0].id,
-						username: rows[0].username,
-						password: rows[0].password,
-						rank: rows[0].rank,
-						mail: rows[0].mail,
-						mailVerified: rows[0].mail_verified,
-						twoFactorConfirmedAt: rows[0].two_factor_confirmed_at,
-						twoFactorSecret: rows[0].two_factor_secret,
-					}
-				: null;
-		},
-		15, // 15s TTL — brute-force protection without blocking legit changes
-	);
-}
-
-/** Call after password reset / rank change to invalidate the cached login row. */
-export async function invalidateLoginCache(username: string): Promise<void> {
-	await invalidateKey(`login:user:${username}`);
-}
 
 async function verify2faCode(userId: number, code: string): Promise<boolean> {
 	const [user] = await db
@@ -149,8 +88,10 @@ export const { handlers, signOut, auth } = NextAuth({
 				code: { label: "2FA code", type: "text" },
 			},
 			authorize: async (credentials) => {
-				const username = String(credentials?.username ?? "").trim();
+				const { username, password } = normalizeLoginInput(
-				const password = String(credentials?.password ?? "");
+					credentials?.username,
+					credentials?.password,
+				);
 				if (!username || !password) return null;
 
 				const ip = await clientIp();
@@ -161,28 +102,14 @@ export const { handlers, signOut, auth } = NextAuth({
 				const user = await getLoginUser(username);
 				if (!user) {
 					// Prevent timing-based enumeration: always run a dummy hash check.
-					await checkLogin(
+					await runDummyHashCheck(password);
-						password,
-						"$2y$12$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcd",
-						{
-							convertPasswords: false,
-						},
-					);
 					return null;
 				}
 
-				// Byte-compatible AtomCMS check (argon2id + legacy md5/bcrypt upgrade).
+				const res = await verifyLoginPassword(user, password);
-				if (!user.password) return null;
-				const res = await checkLogin(password, user.password, {
-					convertPasswords: env.CONVERT_PASSWORDS,
-				});
 				if (!res.valid) return null;
 
-				if (
+				if (await isEmailUnverified(user)) {
-					(await siteSettings.getBool("require_email_verification", false)) &&
-					user.mail &&
-					user.mailVerified !== "1"
-				) {
 					return null;
 				}
 

src/lib/auth/login-core.ts

@@ -0,0 +1,122 @@
+import { sql } from "drizzle-orm";
+import { env } from "@/env";
+import { checkLogin } from "@/lib/auth/password";
+import { cachedQuery, invalidateKey } from "@/lib/cached-db";
+import { db } from "@/lib/db";
+import { siteSettings } from "@/lib/services/site-settings";
+
+export interface LoginUser {
+	id: number;
+	username: string;
+	password: string | null;
+	rank: number;
+	mail: string | null;
+	mailVerified: string | null;
+	twoFactorConfirmedAt: string | null;
+	twoFactorSecret: string | null;
+}
+
+/**
+ * Fixed dummy bcrypt hash used to keep timing roughly constant when a username
+ * does not exist, so attackers can't enumerate accounts by response time.
+ */
+const DUMMY_BCRYPT_HASH =
+	"$2y$12$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcd";
+
+/**
+ * Normalize credentials exactly like the registration flow hashes them, so
+ * accounts with accented/non-ASCII usernames or passwords verify correctly.
+ */
+export function normalizeLoginInput(username: unknown, password: unknown) {
+	return {
+		username: String(username ?? "")
+			.normalize("NFC")
+			.trim(),
+		password: String(password ?? "").normalize("NFC"),
+	};
+}
+
+/**
+ * Cached login user lookup — short TTL to survive brute-force attempts
+ * while still reflecting recent password/account changes reasonably fast.
+ */
+export async function getLoginUser(
+	username: string,
+): Promise<LoginUser | null> {
+	return cachedQuery<LoginUser | null>(
+		`login:user:${username}`,
+		async () => {
+			const [result] = await db.execute<{
+				id: number;
+				username: string;
+				password: string | null;
+				rank: number;
+				mail: string | null;
+				mail_verified: string | null;
+				two_factor_confirmed_at: string | null;
+				two_factor_secret: string | null;
+			}>(sql`
+				SELECT id, username, password, rank, mail,
+				       mail_verified,
+				       two_factor_confirmed_at,
+				       two_factor_secret
+				FROM users
+				WHERE username = ${username}
+				LIMIT 1
+			`);
+			const rows = result as unknown as Array<{
+				id: number;
+				username: string;
+				password: string | null;
+				rank: number;
+				mail: string | null;
+				mail_verified: string | null;
+				two_factor_confirmed_at: string | null;
+				two_factor_secret: string | null;
+			}>;
+			return rows.length > 0
+				? {
+						id: rows[0].id,
+						username: rows[0].username,
+						password: rows[0].password,
+						rank: rows[0].rank,
+						mail: rows[0].mail,
+						mailVerified: rows[0].mail_verified,
+						twoFactorConfirmedAt: rows[0].two_factor_confirmed_at,
+						twoFactorSecret: rows[0].two_factor_secret,
+					}
+				: null;
+		},
+		15, // 15s TTL — brute-force protection without blocking legit changes
+	);
+}
+
+/** Call after password reset / rank change to invalidate the cached login row. */
+export async function invalidateLoginCache(username: string): Promise<void> {
+	await invalidateKey(`login:user:${username}`);
+}
+
+/** Runs a dummy hash check so missing-user responses stay timing-constant. */
+export async function runDummyHashCheck(password: string): Promise<void> {
+	await checkLogin(password, DUMMY_BCRYPT_HASH, { convertPasswords: false });
+}
+
+/** Verifies the password against the stored hash and reports a possible upgrade. */
+export async function verifyLoginPassword(
+	user: LoginUser,
+	password: string,
+): Promise<{ valid: boolean; upgradedHash?: string }> {
+	if (!user.password) return { valid: false };
+	return checkLogin(password, user.password, {
+		convertPasswords: env.CONVERT_PASSWORDS,
+	});
+}
+
+/** True when email verification is required but this account hasn't verified yet. */
+export async function isEmailUnverified(user: LoginUser): Promise<boolean> {
+	return (
+		(await siteSettings.getBool("require_email_verification", false)) &&
+		!!user.mail &&
+		user.mailVerified !== "1"
+	);
+}

src/lib/brand.ts

@@ -1,10 +0,0 @@
-/**
- * Single hardcoded fallback hotel brand.
- * Override order at runtime:
- *   1. website_settings.hotel_name
- *   2. HOTEL_NAME env
- *   3. this constant
- *
- * Safe for client components (no env / DB imports).
- */
-export const FALLBACK_HOTEL_NAME = "Atom";

src/lib/hotel-name.ts

@@ -1,17 +1,12 @@
 import "server-only";
 
 import { env } from "@/env";
-import { FALLBACK_HOTEL_NAME } from "@/lib/brand";
-import { siteSettings } from "@/lib/services/site-settings";
 
 /**
- * Resolve the public hotel name: CMS setting → HOTEL_NAME env → FALLBACK_HOTEL_NAME.
+ * The public hotel name is read directly from the required HOTEL_NAME env var.
+ * There is no CMS override or hardcoded preset — the site must be configured,
+ * otherwise HOTEL_NAME fails validation at startup.
  */
 export async function resolveHotelName(): Promise<string> {
-	const fromSettings = await siteSettings.get("hotel_name", env.HOTEL_NAME);
+	return env.HOTEL_NAME;
-	const trimmed = fromSettings?.trim();
-	if (trimmed) return trimmed;
-	const fromEnv = env.HOTEL_NAME?.trim();
-	if (fromEnv) return fromEnv;
-	return FALLBACK_HOTEL_NAME;
 }

src/lib/services/site-settings.ts

@@ -1,12 +1,10 @@
 import "server-only";
 
-import { FALLBACK_HOTEL_NAME } from "@/lib/brand";
 import { db, WebsiteSetting } from "@/lib/db";
 import { logger } from "@/lib/logger";
 import { redis } from "@/lib/redis";
 
 const DEFAULTS: Record<string, string> = {
-	hotel_name: FALLBACK_HOTEL_NAME,
 	habbo_imaging_url: "/imaging",
 	logo_url: "",
 	nitro_client_url: "",
@@ -16,7 +14,7 @@ const DEFAULTS: Record<string, string> = {
 const CACHE_TTL_MS = 300_000;
 const REDIS_CACHE_KEY = "site_settings";
 // Short in-process window so repeated getters in one request (header, nav,
-// footer all read hotel_name / logo) don't each pay a Redis round-trip.
+// footer all read logo and other settings) don't each pay a Redis round-trip.
 // Redis stays the source of truth across instances.
 const MEMORY_TTL_MS = 60_000;
 

vitest.config.ts

@@ -19,6 +19,7 @@ export default defineConfig({
 		// unit tests run without a populated .env.
 		env: {
 			SKIP_ENV_VALIDATION: "1",
+			HOTEL_NAME: "TestHotel",
 			DATABASE_URL: "mysql://root:root@localhost:3306/test",
 		},
 		testTimeout: 10000,