Improvements: remove dead config, fix ESM, add URL validation, unify types, add missing logging

- Remove .prettierrc (dead config, Biome replaces Prettier) - Rename lighthouserc.json to lighthouserc.cjs with module.exports for ESM compat - Add logger.warn to empty catch blocks in auth, register, site-settings, prisma-cache, redis, security, rate-limit - Unify ActionResult type: action-helper.ts uses 'ok' consistent with safe-action-shared.ts - Add noUnusedLocals + noUnusedParameters to tsconfig + fix 25 pre-existing unused vars - Replace barrel export src/types/index.ts with direct @/types/common imports - Make trustHost conditional (development only) in auth.ts - Add pre-flight URL validation to update-Nitrov3.sh to catch image.library.url misconfigurations - Improve NITRO_IMAGE_LIBRARY_URL content validation in pre-flight & post-compute checks
2026-07-26 20:28:11 +02:00
1 parent b922f6d49f
commit 17847545dd
@@ -4,9 +4,9 @@ import type { CSSProperties } from "react";
 import { applyStaff } from "@/actions/applications";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
 import { formatDate } from "@/lib/format-date";
 import { resolveHotelName } from "@/lib/hotel-name";
+import { prisma } from "@/lib/prisma";

 export const dynamic = "force-dynamic";

@@ -145,7 +145,13 @@ export default async function ApplyStaffPage({
 								<div className="content-card-body">
 									<p style={{ margin: "0 0 0.5rem" }}>{position.description}</p>
 									<p className="muted" style={{ margin: "0 0 0.75rem" }}>
-										{t("deadline", { date: formatDate(position.applyTo, "datetime", t("noDeadline")) })}
+										{t("deadline", {
+											date: formatDate(
+												position.applyTo,
+												"datetime",
+												t("noDeadline"),
+											),
+										})}
 									</p>

 									{alreadyApplied ? (
@@ -4,8 +4,8 @@ import type { CSSProperties } from "react";
 import { applyTeam } from "@/actions/applications";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
 import { resolveHotelName } from "@/lib/hotel-name";
+import { prisma } from "@/lib/prisma";

 export const dynamic = "force-dynamic";

@@ -42,7 +42,10 @@ export default async function EventDetailPage({
 		})
 		.catch(() => null);

-	if (!event || (event.status !== "published" && event.status !== "completed")) {
+	if (
+		!event ||
+		(event.status !== "published" && event.status !== "completed")
+	) {
 		notFound();
 	}

@@ -70,8 +73,7 @@ export default async function EventDetailPage({
 	const winnerName = new Map(winners.map((u) => [u.id, u.username]));

 	const isFull =
-		event.maxPlayers != null &&
-		event._count.registrations >= event.maxPlayers;
+		event.maxPlayers != null && event._count.registrations >= event.maxPlayers;
 	const hasEnded =
 		event.status === "completed" ||
 		(event.endsAt != null && event.endsAt.getTime() < Date.now());
@@ -157,7 +159,11 @@ export default async function EventDetailPage({
 				</div>
 			</ContentCard>

-			<ContentCard icon="✍️" title={t("registerTitle")} subtitle={t("registerSubtitle")}>
+			<ContentCard
+				icon="✍️"
+				title={t("registerTitle")}
+				subtitle={t("registerSubtitle")}
+			>
 				{session?.user && canRegister ? (
 					<EventRegisterButton eventId={event.id} />
 				) : (
@@ -112,7 +112,13 @@ export default async function EventsPage() {
 										>
 											{formatDate(event.startsAt, "datetime", "")}
 										</p>
-										<p style={{ margin: 0, fontSize: "0.88rem", lineHeight: 1.5 }}>
+										<p
+											style={{
+												margin: 0,
+												fontSize: "0.88rem",
+												lineHeight: 1.5,
+											}}
+										>
 											{excerpt(event.description, 120)}
 										</p>
 										<p
@@ -4,8 +4,8 @@ import { getTranslations } from "next-intl/server";
 import type { CSSProperties } from "react";
 import { replyToThread } from "@/actions/social";
 import { ContentCard, EmptyState } from "@/components/public/ui";
-import { formatDate } from "@/lib/format-date";
 import { auth } from "@/lib/auth";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";

 export const revalidate = 60;
@@ -216,7 +216,9 @@ export default async function GuildForumThreadPage({
 											)}
 										</span>
 										<span className="muted" style={{ fontSize: "0.85rem" }}>
-											{formatDate(post.createdAt ? new Date(post.createdAt * 1000) : null)}
+											{formatDate(
+												post.createdAt ? new Date(post.createdAt * 1000) : null,
+											)}
 										</span>
 									</div>
 									<p
@@ -236,7 +238,11 @@ export default async function GuildForumThreadPage({
 			</ContentCard>

 			{canReply ? (
-				<ContentCard icon="✍️" title={t("replyTitle")} subtitle={t("replySubtitle")}>
+				<ContentCard
+					icon="✍️"
+					title={t("replyTitle")}
+					subtitle={t("replySubtitle")}
+				>
 					<form action={replyToThread}>
 						<input type="hidden" name="guildId" value={String(guild.id)} />
 						<input type="hidden" name="threadId" value={String(thread.id)} />
@@ -262,8 +268,7 @@ export default async function GuildForumThreadPage({
 				</p>
 			) : (
 				<p className="muted" style={{ margin: 0 }}>
-					{t("loginToReply")}{" "}
-					<Link href="/login">{t("loginLink")}</Link>
+					{t("loginToReply")} <Link href="/login">{t("loginLink")}</Link>
 				</p>
 			)}
 		</main>
@@ -2,8 +2,8 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import type { CSSProperties } from "react";
-import { formatDate } from "@/lib/format-date";
 import { ContentCard, EmptyState } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";

 export const revalidate = 300;
@@ -190,7 +190,10 @@ export default async function GuildForumPage({
 											{t2.postsCount ?? 0}
 										</td>
 										<td className="muted" style={{ padding: "0.6rem 0.75rem" }}>
-											{formatDate(t2.createdAt ? new Date(t2.createdAt * 1000) : null, "date")}
+											{formatDate(
+												t2.createdAt ? new Date(t2.createdAt * 1000) : null,
+												"date",
+											)}
 										</td>
 									</tr>
 								);
@@ -3,8 +3,8 @@ import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
 import { avatarImageUrl } from "@/lib/format";
-import { prisma } from "@/lib/prisma";
 import { formatDate } from "@/lib/format-date";
+import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";

 export const revalidate = 300;
@@ -2,10 +2,10 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { ContentCard } from "@/components/public/ui";
-import { prisma } from "@/lib/prisma";
-import { sanitize } from "@/lib/sanitize";
 import { SanitizedHtml } from "@/components/shared/sanitized-html";
 import { resolveHotelName } from "@/lib/hotel-name";
+import { prisma } from "@/lib/prisma";
+import { sanitize } from "@/lib/sanitize";

 export const revalidate = 300;

@@ -118,8 +118,8 @@ export default async function HelpCategoryPage({
 					/>
 				) : null}

-		{/* content is author-supplied HTML — sanitised server-side. */}
-		<SanitizedHtml html={sanitize(content)} style={{ lineHeight: 1.7 }} />
+				{/* content is author-supplied HTML — sanitised server-side. */}
+				<SanitizedHtml html={sanitize(content)} style={{ lineHeight: 1.7 }} />

 				{hasButton ? (
 					<div style={{ clear: "both", marginTop: "1rem" }}>
@@ -99,9 +99,7 @@ export default async function HelpTicketDetailPage({
 		replies = [];
 	}

-	const authorIds = [
-		...new Set([userId, ...replies.map((r) => r.userId)]),
-	];
+	const authorIds = [...new Set([userId, ...replies.map((r) => r.userId)])];
 	let users: { id: number; username: string }[] = [];
 	try {
 		users = await prisma.user.findMany({
@@ -174,7 +172,11 @@ export default async function HelpTicketDetailPage({
 				<Link href="/help/tickets">{t("backToList")}</Link>
 			</p>

-			<ContentCard icon="🎫" title={ticket.title} subtitle={t("ticketId", { id: String(ticket.id) })}>
+			<ContentCard
+				icon="🎫"
+				title={ticket.title}
+				subtitle={t("ticketId", { id: String(ticket.id) })}
+			>
 				<span className={`online-badge${ticket.open ? " online" : ""}`}>
 					<span className="online-dot" aria-hidden />
 					{ticket.open ? t("statusOpen") : t("statusClosed")}
@@ -220,7 +222,9 @@ export default async function HelpTicketDetailPage({
 									}}
 								>
 									<span style={{ fontWeight: 700 }}>
-										{index === 0 ? t("you") : username ? (
+										{index === 0 ? (
+											t("you")
+										) : username ? (
 											<Link href={`/u/${username}`}>{username}</Link>
 										) : (
 											<span className="muted">
@@ -11,7 +11,11 @@ import { auth } from "@/lib/auth";
 * Public site chrome. Route group `(site)` keeps this off `/admin` and `/client`,
 * so housekeeping is never constrained by the public max-w-7xl grid.
 */
-export default async function SiteLayout({ children }: { children: ReactNode }) {
+export default async function SiteLayout({
+	children,
+}: {
+	children: ReactNode;
+}) {
 	const session = await auth();

 	return (
@@ -3,21 +3,21 @@ import Image from "next/image";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { LoginForm } from "@/components/auth/login-form";
-import { cached } from "@/lib/cache";
-import { avatarImageUrl } from "@/lib/format";
-import { prisma } from "@/lib/prisma";
-import { captchaConfig } from "@/lib/services/captcha";
-import { resolveHotelName } from "@/lib/hotel-name";
-import { siteSettings } from "@/lib/services/site-settings";
-import { ThemeSwitcher } from "@/components/theme-switcher";
+import { Clock } from "@/components/clock";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { Reveal } from "@/components/motion-reveal";
-import { Clock } from "@/components/clock";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { cached } from "@/lib/cache";
+import { avatarImageUrl } from "@/lib/format";
+import { resolveHotelName } from "@/lib/hotel-name";
+import { prisma } from "@/lib/prisma";
+import { captchaConfig } from "@/lib/services/captcha";
+import { siteSettings } from "@/lib/services/site-settings";

 export default async function LoginPage() {
 	const t = await getTranslations("pages.login");
 	const th = await getTranslations("header");
-	const [hotelName, imagerRaw, cfg, discordUrl, logo] = await Promise.all([
+	const [hotelName, imagerRaw, cfg, logo] = await Promise.all([
 		resolveHotelName(),
 		siteSettings.get(
 			"habbo_imaging_url",
@@ -54,229 +54,347 @@ export default async function LoginPage() {
 		<div className="flex flex-col gap-10 pb-14">
 			{/* ── 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="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={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 />
+							<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)" }}>
+						<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)",
-					}}>
-
+					<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)" }} />
+						<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)" }} />
+						<div
+							className="w-px h-5"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							}}
+						/>
 						<ThemeSwitcher />
 					</div>
 				</div>
 			</Reveal>
 			<Reveal>
-			<div className="flex flex-col lg:flex-row gap-10 stagger-children">
-			{/* Left panel */}
-			<div className="lg:w-80 shrink-0 space-y-4">
-				<div
-					className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
-					style={{
-						borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
-						background: `url(/assets/images/background.png) center/cover no-repeat`,
-					}}
-				>
-					<div
-						className="absolute inset-0"
-						style={{
-							background: "linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
-						}}
-					/>
-					<div className="relative">
-						<Image
-							src="/assets/images/FrankwithBag.gif"
-							alt="Frank"
-							width={130}
-							height={170}
-							className="object-contain mx-auto drop-shadow-xl animate-float"
-							unoptimized
-							priority
-						/>
+				<div className="flex flex-col lg:flex-row gap-10 stagger-children">
+					{/* Left panel */}
+					<div className="lg:w-80 shrink-0 space-y-4">
 						<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="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
 							style={{
-								borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
-								background: "color-mix(in srgb, var(--color-primary) 10%, transparent)",
-								color: "var(--color-primary-readable, var(--color-primary))",
+								borderColor:
+									"color-mix(in srgb, var(--color-primary) 20%, transparent)",
+								background: `url(/assets/images/background.png) center/cover no-repeat`,
 							}}
 						>
-							<span className="relative flex h-2 w-2">
-								<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-								<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
-							</span>
-							{th("online", { count: online, hotel: "" }).trim()}
+							<div
+								className="absolute inset-0"
+								style={{
+									background:
+										"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
+								}}
+							/>
+							<div className="relative">
+								<Image
+									src="/assets/images/FrankwithBag.gif"
+									alt="Frank"
+									width={130}
+									height={170}
+									className="object-contain mx-auto drop-shadow-xl animate-float"
+									unoptimized
+									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"
+									style={{
+										borderColor:
+											"color-mix(in srgb, var(--color-primary) 18%, transparent)",
+										background:
+											"color-mix(in srgb, var(--color-primary) 10%, transparent)",
+										color:
+											"var(--color-primary-readable, var(--color-primary))",
+									}}
+								>
+									<span className="relative flex h-2 w-2">
+										<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+										<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+									</span>
+									{th("online", { count: online, hotel: "" }).trim()}
+								</div>
+								<h1
+									className="text-xl font-black"
+									style={{
+										color: "var(--color-text-readable)",
+										fontFamily: "var(--font-nunito)",
+									}}
+								>
+									{t("welcomeBack")}
+								</h1>
+								<p
+									className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{t("welcomeBackSub", { hotelName })}
+								</p>
+							</div>
 						</div>
-						<h1
-							className="text-xl font-black"
-							style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}
-						>
-							{t("welcomeBack")}
-						</h1>
+
+						{recentUsers.length > 0 && (
+							<div
+								className="overflow-hidden rounded-xl border"
+								style={{
+									borderColor:
+										"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) => (
+											<div
+												key={u.username}
+												className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+												style={{
+													background:
+														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												}}
+											>
+												<Image
+													src={avatarImageUrl(imager, u.look, {
+														headOnly: true,
+														direction: 2,
+														size: "s",
+													})}
+													alt=""
+													width={26}
+													height={32}
+													className="rounded-md"
+													unoptimized
+												/>
+												<span
+													className="text-[8px] font-bold truncate w-full text-center leading-tight"
+													style={{ color: "var(--color-text-readable)" }}
+												>
+													{u.username}
+												</span>
+											</div>
+										))}
+									</div>
+								</div>
+							</div>
+						)}
+
+						{latestUsers.length > 0 && (
+							<div
+								className="overflow-hidden rounded-xl border"
+								style={{
+									borderColor:
+										"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) => (
+											<div
+												key={u.username}
+												className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+												style={{
+													background:
+														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												}}
+											>
+												<Image
+													src={avatarImageUrl(imager, u.look, {
+														headOnly: true,
+														direction: 2,
+														size: "s",
+													})}
+													alt=""
+													width={26}
+													height={32}
+													className="rounded-md"
+													unoptimized
+												/>
+												<span
+													className="text-[8px] font-bold truncate w-full text-center leading-tight"
+													style={{ color: "var(--color-text-readable)" }}
+												>
+													{u.username}
+												</span>
+											</div>
+										))}
+									</div>
+								</div>
+							</div>
+						)}
+
 						<p
-							className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
+							className="text-xs text-center"
 							style={{ color: "var(--color-text-muted)" }}
 						>
-							{t("welcomeBackSub", { hotelName })}
+							{t("noAccount") ?? "No account?"}{" "}
+							<Link
+								href="/register"
+								className="font-extrabold hover:underline"
+								style={{
+									color: "var(--color-primary-readable, var(--color-primary))",
+								}}
+							>
+								{t("createOne") ?? "Create one"}
+							</Link>
 						</p>
 					</div>
+
+					{/* Right: form */}
+					<div className="flex-1">
+						<div
+							className="overflow-hidden rounded-xl border"
+							style={{
+								borderColor:
+									"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"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{t("subtitle")}
+								</p>
+								<LoginForm
+									captcha={{
+										provider: cfg.provider,
+										siteKey: cfg.siteKey || undefined,
+										field: cfg.field || undefined,
+									}}
+									nonce={nonce}
+								/>
+							</div>
+						</div>
+					</div>
 				</div>
-
-				{recentUsers.length > 0 && (
-					<div
-						className="overflow-hidden rounded-xl border"
-						style={{ borderColor: "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) => (
-								<div
-									key={u.username}
-									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
-									style={{
-										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
-									}}
-								>
-									<Image
-										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
-										alt=""
-										width={26}
-										height={32}
-										className="rounded-md"
-										unoptimized
-									/>
-									<span
-										className="text-[8px] font-bold truncate w-full text-center leading-tight"
-										style={{ color: "var(--color-text-readable)" }}
-									>
-										{u.username}
-									</span>
-								</div>
-							))}
-						</div>
-						</div>
-					</div>
-				)}
-
-				{latestUsers.length > 0 && (
-					<div
-						className="overflow-hidden rounded-xl border"
-						style={{ borderColor: "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) => (
-								<div
-									key={u.username}
-									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
-									style={{
-										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
-									}}
-								>
-									<Image
-										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
-										alt=""
-										width={26}
-										height={32}
-										className="rounded-md"
-										unoptimized
-									/>
-									<span
-										className="text-[8px] font-bold truncate w-full text-center leading-tight"
-										style={{ color: "var(--color-text-readable)" }}
-									>
-										{u.username}
-									</span>
-								</div>
-							))}
-						</div>
-						</div>
-					</div>
-				)}
-
-				<p className="text-xs text-center" style={{ color: "var(--color-text-muted)" }}>
-					{t("noAccount") ?? "No account?"}{" "}
-					<Link
-						href="/register"
-						className="font-extrabold hover:underline"
-						style={{ color: "var(--color-primary-readable, var(--color-primary))" }}
-					>
-						{t("createOne") ?? "Create one"}
-					</Link>
-				</p>
-			</div>
-
-			{/* Right: form */}
-			<div className="flex-1">
-				<div className="overflow-hidden rounded-xl border" style={{ borderColor: "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"
-						style={{ color: "var(--color-text-muted)" }}
-					>
-						{t("subtitle")}
-					</p>
-				<LoginForm
-					captcha={{
-						provider: cfg.provider,
-						siteKey: cfg.siteKey || undefined,
-						field: cfg.field || undefined,
-					}}
-					nonce={nonce}
-				/>
-			</div>
-			</div>
-			</div>
-		</div>
 			</Reveal>
 		</div>
 	);
@@ -1,6 +1,6 @@
 import { getTranslations } from "next-intl/server";
-import { formatDate } from "@/lib/format-date";
 import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";

 export const revalidate = 300;
@@ -124,7 +124,10 @@ export default async function MarketplacePage() {
 										<td style={{ fontWeight: 700 }}>
 											{o.price.toLocaleString()} cr
 										</td>
-										<td className="muted" title={formatDate(new Date(o.timestamp * 1000))}>
+										<td
+											className="muted"
+											title={formatDate(new Date(o.timestamp * 1000))}
+										>
 											{listedAgo(o.timestamp, t)}
 										</td>
 									</tr>
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import type { CSSProperties, ReactNode } from "react";
 import { claimReferral } from "@/actions/referral";
-import { ContentCard, EmptyState, OnlineBadge } from "@/components/public/ui";
+
 import { Reveal } from "@/components/motion-reveal";
 import { auth } from "@/lib/auth";
 import { avatarImageUrl } from "@/lib/format";
@@ -71,89 +71,105 @@ export default async function MePage({
 	try {
 		const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";

-		const [user, imagerBase, hotelName, neededRaw, amountRaw, currencyRaw, alertRaw, recentRooms, badges, lastWebLogin, userSettings, friendCount, unreadCount] =
-			await Promise.all([
-				prisma.user.findUnique({
-					where: { id: userId },
+		const [
+			user,
+			imagerBase,
+			hotelName,
+			neededRaw,
+			amountRaw,
+			currencyRaw,
+			alertRaw,
+			recentRooms,
+			badges,
+			lastWebLogin,
+			userSettings,
+			friendCount,
+			unreadCount,
+		] = await Promise.all([
+			prisma.user.findUnique({
+				where: { id: userId },
+				select: {
+					id: true,
+					username: true,
+					look: true,
+					motto: true,
+					rank: true,
+					credits: true,
+					accountCreated: true,
+					lastLogin: true,
+					lastOnline: true,
+				},
+			}),
+			siteSettings.get(
+				"habbo_imaging_url",
+				"https://www.habbo.com/habbo-imaging/avatarimage",
+			),
+			resolveHotelName(),
+			prisma.websiteSetting
+				.findUnique({
+					where: { key: "referrals_needed" },
+					select: { value: true },
+				})
+				.catch(() => null),
+			prisma.websiteSetting
+				.findUnique({
+					where: { key: "referral_reward_amount" },
+					select: { value: true },
+				})
+				.catch(() => null),
+			prisma.websiteSetting
+				.findFirst({
+					where: {
+						key: {
+							in: ["referral_reward_currency_type", "referral_reward_currency"],
+						},
+					},
+					select: { value: true },
+				})
+				.catch(() => null),
+			siteSettings.get("hotel_alert_banner", ""),
+			prisma.rooms
+				.findMany({
+					orderBy: { id: "desc" },
 					select: {
 						id: true,
-						username: true,
-						look: true,
-						motto: true,
-						rank: true,
-						credits: true,
-						accountCreated: true,
-						lastLogin: true,
-						lastOnline: true,
+						name: true,
+						ownerName: true,
+						users: true,
+						usersMax: true,
 					},
-				}),
-				siteSettings.get(
-					"habbo_imaging_url",
-					"https://www.habbo.com/habbo-imaging/avatarimage",
-				),
-				resolveHotelName(),
-				prisma.websiteSetting
-					.findUnique({
-						where: { key: "referrals_needed" },
-						select: { value: true },
-					})
-					.catch(() => null),
-				prisma.websiteSetting
-					.findUnique({
-						where: { key: "referral_reward_amount" },
-						select: { value: true },
-					})
-					.catch(() => null),
-				prisma.websiteSetting
-					.findFirst({
-						where: {
-							key: {
-								in: [
-									"referral_reward_currency_type",
-									"referral_reward_currency",
-								],
-							},
-						},
-						select: { value: true },
-					})
-					.catch(() => null),
-				siteSettings.get("hotel_alert_banner", ""),
-				prisma.rooms
-					.findMany({
-						orderBy: { id: "desc" },
-						select: { id: true, name: true, ownerName: true, users: true, usersMax: true },
-						take: 6,
-					})
-					.catch(() => []),
-				prisma.usersBadges
-					.findMany({
-						where: { userId, slotId: { gt: 0 } },
-						orderBy: { slotId: "asc" },
-						select: { badgeCode: true, slotId: true },
-					})
-					.catch(() => []),
-				prisma.websiteLoginLogs
-					.findFirst({
-						where: { userId },
-						orderBy: { id: "desc" },
-						select: { createdAt: true },
-					})
-					.catch(() => null),
-				prisma.usersSettings
-					.findUnique({
-						where: { userId },
-						select: { achievementScore: true, respectsReceived: true },
-					})
-					.catch(() => null),
-				prisma.messengerFriendships
-					.count({
-						where: { OR: [{ userOneId: userId }, { userTwoId: userId }] },
-					})
-					.catch(() => 0),
-				prisma.messengerOffline
-					.count({ where: { userId } })
-					.catch(() => 0),
-			]);
+					take: 6,
+				})
+				.catch(() => []),
+			prisma.usersBadges
+				.findMany({
+					where: { userId, slotId: { gt: 0 } },
+					orderBy: { slotId: "asc" },
+					select: { badgeCode: true, slotId: true },
+				})
+				.catch(() => []),
+			prisma.websiteLoginLogs
+				.findFirst({
+					where: { userId },
+					orderBy: { id: "desc" },
+					select: { createdAt: true },
+				})
+				.catch(() => null),
+			prisma.usersSettings
+				.findUnique({
+					where: { userId },
+					select: { achievementScore: true, respectsReceived: true },
+				})
+				.catch(() => null),
+			prisma.messengerFriendships
+				.count({
+					where: { OR: [{ userOneId: userId }, { userTwoId: userId }] },
+				})
+				.catch(() => 0),
+			prisma.messengerOffline.count({ where: { userId } }).catch(() => 0),
+		]);
+
+		void lastWebLogin;

 		if (!user) throw new Error("user-not-found");

@@ -212,23 +228,23 @@ export default async function MePage({
 		const lastLoginDate = user.lastLogin
 			? new Date(user.lastLogin * 1000).toISOString().slice(0, 10)
 			: "Never";
-		const lastWebLoginDate = lastWebLogin?.createdAt
-			? new Date(lastWebLogin.createdAt).toISOString().slice(0, 10)
-			: null;
 		const lastOnlineDate = user.lastOnline
 			? new Date(user.lastOnline * 1000).toISOString().slice(0, 10)
 			: "Never";
 		const referralLink = `/register?ref=${encodeURIComponent(user.username)}`;

-		const imager = imagerBase ?? "https://www.habbo.com/habbo-imaging/avatarimage";
-		const avatarFull = avatarImageUrl(imager, user.look, { size: "l", direction: 2 });
-		const avatarHead = avatarImageUrl(imager, user.look, { headOnly: true, direction: 2, size: "s" });
-
+		const imager =
+			imagerBase ?? "https://www.habbo.com/habbo-imaging/avatarimage";
+		const avatarFull = avatarImageUrl(imager, user.look, {
+			size: "l",
+			direction: 2,
+		});
 		content = (
 			<div className="flex flex-col gap-8 pb-8">
 				{claimed ? (
 					<div role="status" style={feedbackStyle("success")}>
-						Woah! You have successfully claimed your reward — keep up the good work!
+						Woah! You have successfully claimed your reward — keep up the good
+						work!
 					</div>
 				) : null}
 				{error ? (
@@ -242,24 +258,47 @@ export default async function MePage({
 						className="relative overflow-hidden rounded-2xl border 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: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
+							borderColor:
+								"color-mix(in srgb, var(--color-primary) 20%, transparent)",
 						}}
 					>
-						<div className="absolute -top-10 -right-10 w-40 h-40 rounded-full opacity-10" style={{ background: "var(--color-primary)" }} />
+						<div
+							className="absolute -top-10 -right-10 w-40 h-40 rounded-full opacity-10"
+							style={{ background: "var(--color-primary)" }}
+						/>
 						<div className="relative shrink-0 flex flex-col items-center gap-3">
-							<div className="absolute -inset-3 rounded-full opacity-[0.15] blur-[40px]" style={{ background: "var(--color-primary)" }} />
-							<Image src={avatarFull} alt="" width={120} height={160} className="object-contain drop-shadow-xl relative" unoptimized priority />
+							<div
+								className="absolute -inset-3 rounded-full opacity-[0.15] blur-[40px]"
+								style={{ background: "var(--color-primary)" }}
+							/>
+							<Image
+								src={avatarFull}
+								alt=""
+								width={120}
+								height={160}
+								className="object-contain drop-shadow-xl relative"
+								unoptimized
+								priority
+							/>
 							<Link
 								href="/client"
 								className="btn-shine flex items-center justify-center gap-1.5 rounded-xl border py-2 px-4 font-extrabold text-xs transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
 								style={{
 									background: "var(--color-primary)",
 									color: "var(--color-primary-foreground)",
-									borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
-									boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+									borderColor:
+										"color-mix(in srgb, var(--color-primary) 20%, transparent)",
+									boxShadow:
+										"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
 								}}
 							>
-								<Image src="/assets/images/EnterHubbly.png" alt="" width={16} height={16} unoptimized />
+								<Image
+									src="/assets/images/EnterHubbly.png"
+									alt=""
+									width={16}
+									height={16}
+									unoptimized
+								/>
 								Enter {hotelName}
 							</Link>
 						</div>
@@ -267,25 +306,39 @@ export default async function MePage({
 							<div
 								className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-wider mb-3 border"
 								style={{
-									borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
-									background: "color-mix(in srgb, var(--color-primary) 10%, transparent)",
+									borderColor:
+										"color-mix(in srgb, var(--color-primary) 18%, transparent)",
+									background:
+										"color-mix(in srgb, var(--color-primary) 10%, transparent)",
 									color: "var(--color-primary-readable, var(--color-primary))",
 								}}
 							>
 								Rank {user.rank}
 							</div>
-							<h1 className="text-2xl md:text-3xl font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>
+							<h1
+								className="text-2xl md:text-3xl font-black tracking-tight"
+								style={{ color: "var(--color-text-readable)" }}
+							>
 								{user.username}
 							</h1>
-							<p className="text-sm mt-1" style={{ color: "var(--color-text-muted)" }}>
+							<p
+								className="text-sm mt-1"
+								style={{ color: "var(--color-text-muted)" }}
+							>
 								{user.motto || "No motto"}
 							</p>
 							<div className="flex flex-wrap gap-x-6 gap-y-1 mt-4 text-xs">
 								<span style={{ color: "var(--color-text-muted)" }}>
-									Registered: <strong style={{ color: "var(--color-text-readable)" }}>{registered}</strong>
+									Registered:{" "}
+									<strong style={{ color: "var(--color-text-readable)" }}>
+										{registered}
+									</strong>
 								</span>
 								<span style={{ color: "var(--color-text-muted)" }}>
-									Last online: <strong style={{ color: "var(--color-text-readable)" }}>{lastOnlineDate}</strong>
+									Last online:{" "}
+									<strong style={{ color: "var(--color-text-readable)" }}>
+										{lastOnlineDate}
+									</strong>
 								</span>
 							</div>
 						</div>
@@ -294,8 +347,21 @@ export default async function MePage({

 				{alertRaw ? (
 					<Reveal delay={0.05}>
-						<div className="rounded-2xl border px-6 py-4 text-center" style={{ background: "color-mix(in srgb, var(--color-accent) 12%, transparent)", borderColor: "color-mix(in srgb, var(--color-accent) 25%, transparent)" }}>
-							<p className="text-sm font-bold" style={{ color: "var(--color-accent)" }}>{alertRaw}</p>
+						<div
+							className="rounded-2xl border px-6 py-4 text-center"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-accent) 12%, transparent)",
+								borderColor:
+									"color-mix(in srgb, var(--color-accent) 25%, transparent)",
+							}}
+						>
+							<p
+								className="text-sm font-bold"
+								style={{ color: "var(--color-accent)" }}
+							>
+								{alertRaw}
+							</p>
 						</div>
 					</Reveal>
 				) : null}
@@ -305,8 +371,14 @@ export default async function MePage({
 						{[
 							{ value: user.credits.toLocaleString(), label: "Credits" },
 							{ value: `Rank ${user.rank}`, label: "Hotel rank" },
-							{ value: (userSettings?.achievementScore ?? 0).toLocaleString(), label: "Achievement score" },
-							{ value: (userSettings?.respectsReceived ?? 0).toLocaleString(), label: "Respects" },
+							{
+								value: (userSettings?.achievementScore ?? 0).toLocaleString(),
+								label: "Achievement score",
+							},
+							{
+								value: (userSettings?.respectsReceived ?? 0).toLocaleString(),
+								label: "Respects",
+							},
 							{ value: friendCount.toLocaleString(), label: "Friends" },
 							{ value: lastLoginDate, label: "Last login" },
 						].map((s) => (
@@ -315,13 +387,20 @@ export default async function MePage({
 								className="relative rounded-2xl border 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)",
+									borderColor:
+										"color-mix(in srgb, var(--color-primary) 12%, transparent)",
 								}}
 							>
-								<div className="text-xl md:text-2xl font-black tracking-tight mb-0.5" style={{ color: "var(--color-primary)" }}>
+								<div
+									className="text-xl md:text-2xl font-black tracking-tight mb-0.5"
+									style={{ color: "var(--color-primary)" }}
+								>
 									{s.value}
 								</div>
-								<div className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--color-text-muted)" }}>
+								<div
+									className="text-[11px] font-bold uppercase tracking-widest"
+									style={{ color: "var(--color-text-muted)" }}
+								>
 									{s.label}
 								</div>
 							</div>
@@ -330,19 +409,47 @@ export default async function MePage({
 				</Reveal>

 				<Reveal delay={0.15}>
-					<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
+					<div
+						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 className="text-lg font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>Online friends</h2>
-								<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
-									{onlineFriends.length === 0 ? "None of your friends are online right now" : `${onlineFriends.length} of your ${friends.length} friends online`}
+								<h2
+									className="text-lg font-black tracking-tight"
+									style={{ color: "var(--color-text-readable)" }}
+								>
+									Online friends
+								</h2>
+								<p
+									className="text-xs mt-0.5"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{onlineFriends.length === 0
+										? "None of your friends are online right now"
+										: `${onlineFriends.length} of your ${friends.length} friends online`}
 								</p>
 							</div>
-							<Link href="/friends" className="text-xs font-bold hover:underline shrink-0" style={{ color: "var(--color-primary)" }}>View all</Link>
+							<Link
+								href="/friends"
+								className="text-xs font-bold hover:underline shrink-0"
+								style={{ color: "var(--color-primary)" }}
+							>
+								View all
+							</Link>
 						</div>
 						{onlineFriends.length === 0 ? (
 							<div className="text-center py-6">
-								<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>No friends online right now. Check back later!</p>
+								<p
+									className="text-sm"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									No friends online right now. Check back later!
+								</p>
 							</div>
 						) : (
 							<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
@@ -351,14 +458,45 @@ export default async function MePage({
 										key={friend.id}
 										href={`/u/${friend.username}`}
 										className="flex items-center gap-3 p-3 rounded-xl transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
-										style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)", textDecoration: "none" }}
+										style={{
+											background:
+												"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+											textDecoration: "none",
+										}}
 									>
-										<Image src={avatarImageUrl(imager, friend.look, { size: "s", headOnly: true })} alt="" width={40} height={50} className="rounded-lg shrink-0" unoptimized />
+										<Image
+											src={avatarImageUrl(imager, friend.look, {
+												size: "s",
+												headOnly: true,
+											})}
+											alt=""
+											width={40}
+											height={50}
+											className="rounded-lg shrink-0"
+											unoptimized
+										/>
 										<div className="min-w-0">
-											<p className="text-sm font-extrabold truncate" style={{ color: "var(--color-text-readable)" }}>{friend.username}</p>
-											<p className="text-[10px] font-semibold truncate mt-0.5" style={{ color: "var(--color-text-muted)" }}>{friend.motto || "No motto"}</p>
-											<span className="inline-flex items-center gap-1 text-[10px] font-bold mt-1" style={{ color: "var(--color-success)" }}>
-												<span className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--color-success)" }} /> Online
+											<p
+												className="text-sm font-extrabold truncate"
+												style={{ color: "var(--color-text-readable)" }}
+											>
+												{friend.username}
+											</p>
+											<p
+												className="text-[10px] font-semibold truncate mt-0.5"
+												style={{ color: "var(--color-text-muted)" }}
+											>
+												{friend.motto || "No motto"}
+											</p>
+											<span
+												className="inline-flex items-center gap-1 text-[10px] font-bold mt-1"
+												style={{ color: "var(--color-success)" }}
+											>
+												<span
+													className="w-1.5 h-1.5 rounded-full"
+													style={{ background: "var(--color-success)" }}
+												/>{" "}
+												Online
 											</span>
 										</div>
 									</Link>
@@ -369,41 +507,92 @@ export default async function MePage({
 				</Reveal>

 				<Reveal delay={0.2}>
-					<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
+					<div
+						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" style={{ color: "var(--color-text-readable)" }}>Refer a friend ({referralTotal}/{needed})</h2>
-							<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>Refer new users and earn in-game rewards</p>
+							<h2
+								className="text-lg font-black tracking-tight"
+								style={{ color: "var(--color-text-readable)" }}
+							>
+								Refer a friend ({referralTotal}/{needed})
+							</h2>
+							<p
+								className="text-xs mt-0.5"
+								style={{ color: "var(--color-text-muted)" }}
+							>
+								Refer new users and earn in-game rewards
+							</p>
 						</div>
 						<div className="flex flex-col gap-4">
-							<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
+							<p
+								className="text-sm"
+								style={{ color: "var(--color-text-muted)" }}
+							>
 								{rewardAmount > 0
 									? `For every ${needed} users who register through your referral link you can claim a reward of ${rewardAmount.toLocaleString()} ${rewardCurrency}!`
 									: `Invite ${needed} users through your referral link to claim a reward!`}
 							</p>
 							<div role="note" style={feedbackStyle("warning")}>
-								Boosting referrals by making your own accounts will lead to removal of all progress, currency, inventory and a potential ban.
+								Boosting referrals by making your own accounts will lead to
+								removal of all progress, currency, inventory and a potential
+								ban.
 							</div>
 							<div>
-								<label htmlFor="referral-link" className="text-xs font-bold mb-1.5 block" style={{ color: "var(--color-text-muted)" }}>Your referral link</label>
+								<label
+									htmlFor="referral-link"
+									className="text-xs font-bold mb-1.5 block"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									Your referral link
+								</label>
 								<div className="flex gap-2 flex-wrap">
-									<input id="referral-link" type="text" readOnly defaultValue={referralLink}
+									<input
+										id="referral-link"
+										type="text"
+										readOnly
+										defaultValue={referralLink}
 										className="input-glow flex-1 min-w-0 rounded-xl border-2 px-4 py-2.5 text-sm font-medium"
-										style={{ backgroundColor: "var(--color-background)", color: "var(--color-text-readable, var(--color-text))", borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)" }}
+										style={{
+											backgroundColor: "var(--color-background)",
+											color: "var(--color-text-readable, var(--color-text))",
+											borderColor:
+												"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+										}}
 									/>
 									<CopyReferralButton value={referralLink} />
 								</div>
 							</div>
 							{canClaim ? (
 								<form action={claimReferral}>
-									<button type="submit" className="btn-shine w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
-										style={{ background: "var(--color-primary)", color: "var(--color-primary-foreground)", boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)" }}
+									<button
+										type="submit"
+										className="btn-shine w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
+										style={{
+											background: "var(--color-primary)",
+											color: "var(--color-primary-foreground)",
+											boxShadow:
+												"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+										}}
 									>
 										Claim your referral reward!
 									</button>
 								</form>
 							) : (
-								<button type="button" disabled className="w-full rounded-xl font-extrabold text-sm py-3.5 opacity-60 cursor-not-allowed"
-									style={{ background: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)", color: "var(--color-text-muted)" }}
+								<button
+									type="button"
+									disabled
+									className="w-full rounded-xl font-extrabold text-sm py-3.5 opacity-60 cursor-not-allowed"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-text-muted) 15%, transparent)",
+										color: "var(--color-text-muted)",
+									}}
 								>
 									{`Refer ${remaining} more ${remaining === 1 ? "user" : "users"} to unlock your reward`}
 								</button>
@@ -414,22 +603,62 @@ export default async function MePage({

 				{recentRooms.length > 0 && (
 					<Reveal delay={0.25}>
-						<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
+						<div
+							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 className="text-lg font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>Recent rooms</h2>
-									<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>Newest rooms in the hotel</p>
+									<h2
+										className="text-lg font-black tracking-tight"
+										style={{ color: "var(--color-text-readable)" }}
+									>
+										Recent rooms
+									</h2>
+									<p
+										className="text-xs mt-0.5"
+										style={{ color: "var(--color-text-muted)" }}
+									>
+										Newest rooms in the hotel
+									</p>
 								</div>
-								<Link href="/community" className="text-xs font-bold hover:underline shrink-0" style={{ color: "var(--color-primary)" }}>View all</Link>
+								<Link
+									href="/community"
+									className="text-xs font-bold hover:underline shrink-0"
+									style={{ color: "var(--color-primary)" }}
+								>
+									View all
+								</Link>
 							</div>
 							<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
 								{recentRooms.map((room) => (
-									<Link key={room.id} href={`/room/${room.id}`}
+									<Link
+										key={room.id}
+										href={`/room/${room.id}`}
 										className="block rounded-xl border p-3 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
-										style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)", borderColor: "color-mix(in srgb, var(--color-primary) 10%, transparent)" }}
+										style={{
+											background:
+												"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+											borderColor:
+												"color-mix(in srgb, var(--color-primary) 10%, transparent)",
+										}}
 									>
-										<p className="text-sm font-extrabold truncate" style={{ color: "var(--color-text-readable)" }}>{room.name}</p>
-										<p className="text-[10px] font-semibold mt-0.5" style={{ color: "var(--color-text-muted)" }}>{room.ownerName} &middot; {room.users}/{room.usersMax}</p>
+										<p
+											className="text-sm font-extrabold truncate"
+											style={{ color: "var(--color-text-readable)" }}
+										>
+											{room.name}
+										</p>
+										<p
+											className="text-[10px] font-semibold mt-0.5"
+											style={{ color: "var(--color-text-muted)" }}
+										>
+											{room.ownerName} &middot; {room.users}/{room.usersMax}
+										</p>
 									</Link>
 								))}
 							</div>
@@ -439,14 +668,39 @@ export default async function MePage({

 				{badges.length > 0 && (
 					<Reveal delay={0.3}>
-						<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
+						<div
+							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" style={{ color: "var(--color-text-readable)" }}>Badges</h2>
-								<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>{badges.length} badge{badges.length !== 1 ? "s" : ""} equipped</p>
+								<h2
+									className="text-lg font-black tracking-tight"
+									style={{ color: "var(--color-text-readable)" }}
+								>
+									Badges
+								</h2>
+								<p
+									className="text-xs mt-0.5"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{badges.length} badge{badges.length !== 1 ? "s" : ""} equipped
+								</p>
 							</div>
 							<div className="flex flex-wrap gap-2">
 								{badges.map((badge) => (
-									<Image key={badge.badgeCode} src={`${BADGE_IMG_BASE}/${badge.badgeCode}.gif`} alt={badge.badgeCode} width={40} height={40} className="rounded-md transition-transform hover:scale-110" unoptimized />
+									<Image
+										key={badge.badgeCode}
+										src={`${BADGE_IMG_BASE}/${badge.badgeCode}.gif`}
+										alt={badge.badgeCode}
+										width={40}
+										height={40}
+										className="rounded-md transition-transform hover:scale-110"
+										unoptimized
+									/>
 								))}
 							</div>
 						</div>
@@ -454,8 +708,20 @@ export default async function MePage({
 				)}

 				<Reveal delay={0.35}>
-					<div 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)" }}>Quick links</h2>
+					<div
+						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)" }}
+						>
+							Quick links
+						</h2>
 						<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
 							{[
 								{ href: "/messages", label: "Messages", badge: unreadCount },
@@ -463,13 +729,27 @@ export default async function MePage({
 								{ href: "/settings", label: "Settings", badge: 0 },
 								{ href: "/shop", label: "Shop", badge: 0 },
 							].map((link) => (
-								<Link key={link.href} href={link.href}
+								<Link
+									key={link.href}
+									href={link.href}
 									className="relative flex items-center justify-center rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5 hover:shadow-md"
-									style={{ background: "color-mix(in srgb, var(--color-primary) 6%, transparent)", borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)", color: "var(--color-text-readable)" }}
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-primary) 6%, transparent)",
+										borderColor:
+											"color-mix(in srgb, var(--color-primary) 18%, transparent)",
+										color: "var(--color-text-readable)",
+									}}
 								>
 									{link.label}
 									{link.badge > 0 && (
-										<span className="absolute -top-1.5 -right-1.5 flex min-w-[18px] h-[18px] items-center justify-center rounded-full px-1 text-[10px] font-bold leading-none" style={{ background: "var(--color-danger)", color: "white" }}>
+										<span
+											className="absolute -top-1.5 -right-1.5 flex min-w-[18px] h-[18px] items-center justify-center rounded-full px-1 text-[10px] font-bold leading-none"
+											style={{
+												background: "var(--color-danger)",
+												color: "white",
+											}}
+										>
 											{link.badge > 99 ? "99+" : link.badge}
 										</span>
 									)}
@@ -486,11 +766,16 @@ export default async function MePage({
 				className="rounded-2xl border p-6 text-center"
 				style={{
 					background: "var(--color-surface)",
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+					borderColor:
+						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
 				}}
 			>
-				<p className="text-sm font-bold" style={{ color: "var(--color-text-muted)" }}>
-					We couldn&apos;t load your dashboard right now. Please try again shortly.
+				<p
+					className="text-sm font-bold"
+					style={{ color: "var(--color-text-muted)" }}
+				>
+					We couldn&apos;t load your dashboard right now. Please try again
+					shortly.
 				</p>
 			</div>
 		);
@@ -10,8 +10,8 @@ import {
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
 import { avatarImageUrl } from "@/lib/format";
-import { prisma } from "@/lib/prisma";
 import { formatDate } from "@/lib/format-date";
+import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";

 export const dynamic = "force-dynamic";
@@ -16,7 +16,11 @@ import { sanitize } from "@/lib/sanitize";

 export const revalidate = 60;

-type SearchParams = Promise<{ comment?: string; reaction?: string; error?: string }>;
+type SearchParams = Promise<{
+	comment?: string;
+	reaction?: string;
+	error?: string;
+}>;

 function feedbackStyle(tone: "success" | "error"): CSSProperties {
 	const accent =
@@ -78,7 +82,6 @@ const REACTIONS: { key: string; emoji: string }[] = [
 	{ key: "wow", emoji: "😮" },
 ];

-
 export default async function ArticlePage({
 	params,
 	searchParams,
@@ -204,9 +207,7 @@ export default async function ArticlePage({
 				icon="📰"
 				title={article.title}
 				subtitle={
-					article.createdAt
-						? formatDate(article.createdAt, "date")
-						: undefined
+					article.createdAt ? formatDate(article.createdAt, "date") : undefined
 				}
 				action={
 					<Link className="btn btn-outline" href="/news">
@@ -222,8 +223,11 @@ export default async function ArticlePage({
 						style={{ width: "100%", borderRadius: 10, margin: "0 0 1rem" }}
 					/>
 				) : null}
-			{/* Article body is rich HTML (atom uses TinyMCE) — sanitised server-side. */}
-			<SanitizedHtml html={sanitize(article.fullStory)} className="article-body" />
+				{/* Article body is rich HTML (atom uses TinyMCE) — sanitised server-side. */}
+				<SanitizedHtml
+					html={sanitize(article.fullStory)}
+					className="article-body"
+				/>
 			</ContentCard>

 			{/* ── Reactions ─────────────────────────────────────────── */}
@@ -1,16 +1,15 @@
 import Image from "next/image";
-import { formatDate } from "@/lib/format-date";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { excerpt } from "@/lib/format";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";

 export const revalidate = 300;

 export const metadata = { title: "News" };

-
 export default async function NewsPage() {
 	const t = await getTranslations("pages.news");

@@ -1,24 +1,24 @@
+import { headers } from "next/headers";
 import Image from "next/image";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import { headers } from "next/headers";
 import { getTranslations } from "next-intl/server";
+import { AmbientOrbs } from "@/components/ambient-orbs";
+import { AnimatedCounter } from "@/components/animated-counter";
+import { HomeLoginForm } from "@/components/auth/home-login-form";
+import { Clock } from "@/components/clock";
+import { LanguageSwitcher } from "@/components/language-switcher";
+import { Reveal } from "@/components/motion-reveal";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { TypewriterText } from "@/components/typewriter-text";
+import { auth } from "@/lib/auth";
 import { cached } from "@/lib/cache";
 import { avatarImageUrl } from "@/lib/format";
 import { formatDate } from "@/lib/format-date";
-import { prisma } from "@/lib/prisma";
 import { resolveHotelName } from "@/lib/hotel-name";
-import { siteSettings } from "@/lib/services/site-settings";
+import { prisma } from "@/lib/prisma";
 import { captchaConfig } from "@/lib/services/captcha";
-import { auth } from "@/lib/auth";
-import { ThemeSwitcher } from "@/components/theme-switcher";
-import { LanguageSwitcher } from "@/components/language-switcher";
-import { HomeLoginForm } from "@/components/auth/home-login-form";
-import { Reveal } from "@/components/motion-reveal";
-import { Clock } from "@/components/clock";
-import { TypewriterText } from "@/components/typewriter-text";
-import { AnimatedCounter } from "@/components/animated-counter";
-import { AmbientOrbs } from "@/components/ambient-orbs";
+import { siteSettings } from "@/lib/services/site-settings";

 export const revalidate = 120;

@@ -33,38 +33,54 @@ async function getHotelData() {
 	]);
 	const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";

-	const [online, users, rooms, articles, recentUsers, recentPhotos, latestUsers] =
-		await Promise.all([
-			cached("online_count", 10_000, () =>
-				prisma.user.count({ where: { online: "1" } }),
-			).catch(() => 0),
-			cached("total_users", 30_000, () => prisma.user.count()).catch(() => 0),
-			cached("total_rooms", 30_000, () => prisma.rooms.count()).catch(() => 0),
-			prisma.websiteArticles
-				.findMany({ orderBy: { createdAt: "desc" }, take: 5 })
-				.catch(() => []),
-			prisma.user
-				.findMany({
-					where: { online: "1" },
-					select: { username: true, look: true },
-					take: 30,
-				})
-				.catch(() => []),
-			prisma.cameraWeb
-				.findMany({ orderBy: { timestamp: "desc" }, take: 4 })
-				.catch(() => []),
-			prisma.user
-				.findMany({
-					orderBy: { accountCreated: "desc" },
-					select: { username: true, look: true },
-					take: 8,
-				})
-				.catch(() => []),
-		]);
+	const [
+		online,
+		users,
+		rooms,
+		articles,
+		recentUsers,
+		recentPhotos,
+		latestUsers,
+	] = await Promise.all([
+		cached("online_count", 10_000, () =>
+			prisma.user.count({ where: { online: "1" } }),
+		).catch(() => 0),
+		cached("total_users", 30_000, () => prisma.user.count()).catch(() => 0),
+		cached("total_rooms", 30_000, () => prisma.rooms.count()).catch(() => 0),
+		prisma.websiteArticles
+			.findMany({ orderBy: { createdAt: "desc" }, take: 5 })
+			.catch(() => []),
+		prisma.user
+			.findMany({
+				where: { online: "1" },
+				select: { username: true, look: true },
+				take: 30,
+			})
+			.catch(() => []),
+		prisma.cameraWeb
+			.findMany({ orderBy: { timestamp: "desc" }, take: 4 })
+			.catch(() => []),
+		prisma.user
+			.findMany({
+				orderBy: { accountCreated: "desc" },
+				select: { username: true, look: true },
+				take: 8,
+			})
+			.catch(() => []),
+	]);

-	const discordUrl = await siteSettings.get("radio_social_discord", "");
-
-	return { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl, logo };
+	return {
+		hotelName,
+		imager,
+		online,
+		users,
+		rooms,
+		articles,
+		recentUsers,
+		recentPhotos,
+		latestUsers,
+		logo,
+	};
 }

 export default async function Home() {
@@ -73,40 +89,88 @@ export default async function Home() {

 	const tp = await getTranslations("pages.home");
 	const th = await getTranslations("header");
-	const { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl, logo } = await getHotelData();
+	const {
+		hotelName,
+		imager,
+		online,
+		users,
+		rooms,
+		articles,
+		recentUsers,
+		recentPhotos,
+		latestUsers,
+		logo,
+	} = await getHotelData();

 	const captcha = await captchaConfig();
 	const nonce = (await headers()).get("x-nonce") ?? undefined;

 	return (
 		<div className="flex flex-col gap-10 pb-14">
-
 			{/* ── 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="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={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 />
+							<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)" }}>
+						<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)",
-					}}>
-
+					<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)" }} />
+						<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)" }} />
+						<div
+							className="w-px h-5"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							}}
+						/>
 						<ThemeSwitcher />
 					</div>
 				</div>
@@ -119,23 +183,30 @@ export default async function Home() {
 					style={{
 						background: `url(/assets/images/next_header.jpg) center/cover no-repeat`,
 						backgroundPosition: "center 20%",
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 					}}
 				>
 					<div
 						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%)",
+							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%)",
 						}}
 					/>
 					<AmbientOrbs />
-					<div className="relative flex flex-col md:flex-row items-center gap-8 px-6 py-10 md:px-10 md:py-14" style={{ zIndex: 2 }}>
+					<div
+						className="relative flex flex-col md:flex-row items-center gap-8 px-6 py-10 md:px-10 md:py-14"
+						style={{ zIndex: 2 }}
+					>
 						<div className="flex-1 text-center md:text-left">
 							<div
 								className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-5 border backdrop-blur-sm"
 								style={{
-									background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
-									borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
+									background:
+										"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+									borderColor:
+										"color-mix(in srgb, var(--color-primary) 20%, transparent)",
 									color: "var(--color-primary-readable, var(--color-primary))",
 								}}
 							>
@@ -147,7 +218,10 @@ export default async function Home() {
 							</div>
 							<h1
 								className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-3"
-								style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}
+								style={{
+									color: "var(--color-text-readable)",
+									fontFamily: "var(--font-nunito)",
+								}}
 							>
 								<TypewriterText text={tp("welcome", { hotelName })} />
 							</h1>
@@ -164,19 +238,28 @@ export default async function Home() {
 									style={{
 										background: "var(--color-primary)",
 										color: "var(--color-primary-foreground)",
-										boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+										boxShadow:
+											"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
 									}}
 								>
-									<Image src="/assets/images/EnterHubbly.png" alt="" width={20} height={20} unoptimized />
+									<Image
+										src="/assets/images/EnterHubbly.png"
+										alt=""
+										width={20}
+										height={20}
+										unoptimized
+									/>
 									{tp("register")}
 								</Link>
 								<Link
 									href="/login"
 									className="inline-flex items-center gap-2 font-bold text-sm px-7 py-3.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
 									style={{
-										borderColor: "color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
+										borderColor:
+											"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
 										color: "var(--color-text-readable)",
-										background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
+										background:
+											"color-mix(in srgb, var(--color-surface) 50%, transparent)",
 									}}
 								>
 									{th("login")}
@@ -206,18 +289,32 @@ export default async function Home() {
 			<Reveal>
 				<div className="grid grid-cols-3 gap-4 stagger-children">
 					{[
-						{ value: online, label: tp("statsOnline"), icon: "/assets/images/icons/online-friends.png" },
-						{ value: users, label: tp("statsCitizens"), icon: "/assets/images/icons/friends.png" },
-						{ value: rooms, label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
+						{
+							value: online,
+							label: tp("statsOnline"),
+							icon: "/assets/images/icons/online-friends.png",
+						},
+						{
+							value: users,
+							label: tp("statsCitizens"),
+							icon: "/assets/images/icons/friends.png",
+						},
+						{
+							value: rooms,
+							label: tp("statsRooms"),
+							icon: "/assets/images/icons/catalog.png",
+						},
 					].map((s) => (
 						<div
 							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"
 							style={{
-								background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
+								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)",
+								borderColor:
+									"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 							}}
 						>
 							<div
@@ -227,14 +324,29 @@ 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"
-									style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-primary) 14%, transparent)",
+									}}
 								>
-									<Image src={s.icon} alt="" width={24} height={24} unoptimized />
+									<Image
+										src={s.icon}
+										alt=""
+										width={24}
+										height={24}
+										unoptimized
+									/>
 								</div>
-								<div className="text-3xl md:text-4xl font-black tracking-tight mb-0.5" style={{ color: "var(--color-primary)" }}>
+								<div
+									className="text-3xl md:text-4xl font-black tracking-tight mb-0.5"
+									style={{ color: "var(--color-primary)" }}
+								>
 									<AnimatedCounter value={s.value} />
 								</div>
-								<div className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--color-text-muted)" }}>
+								<div
+									className="text-xs font-bold uppercase tracking-widest"
+									style={{ color: "var(--color-text-muted)" }}
+								>
 									{s.label}
 								</div>
 							</div>
@@ -245,59 +357,122 @@ export default async function Home() {

 			{/* ── Login + News ── */}
 			<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
 						className="overflow-hidden rounded-xl border"
 						style={{
-							borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							borderColor:
+								"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%)",
+								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)" }}>
+							<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={{ provider: captcha.provider, siteKey: captcha.siteKey || undefined, field: captcha.field || undefined }} nonce={nonce} />
+						<div
+							className="p-3"
+							style={{ backgroundColor: "var(--color-surface)" }}
+						>
+							<HomeLoginForm
+								captcha={{
+									provider: captcha.provider,
+									siteKey: captcha.siteKey || undefined,
+									field: captcha.field || undefined,
+								}}
+								nonce={nonce}
+							/>
 						</div>
 					</div>

 					<Link href="/register" className="relative block group">
-						<div 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" width={300} height={100} className="block w-full" unoptimized />
+						<div
+							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"
+								width={300}
+								height={100}
+								className="block w-full"
+								unoptimized
+							/>
 						</div>
-						<span className="pointer-events-none absolute inset-0 flex items-center text-2xl md:text-3xl font-extrabold text-white" style={{ marginLeft: "18px", fontFamily: "var(--font-nunito)", textShadow: "0 2px 8px rgba(0,0,0,0.6)" }}>
+						<span
+							className="pointer-events-none absolute inset-0 flex items-center text-2xl md:text-3xl font-extrabold text-white"
+							style={{
+								marginLeft: "18px",
+								fontFamily: "var(--font-nunito)",
+								textShadow: "0 2px 8px rgba(0,0,0,0.6)",
+							}}
+						>
 							{tp("register")}
 						</span>
 					</Link>

 					{latestUsers.length > 0 && (
-						<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)", backgroundColor: "var(--color-surface)" }}>
+						<div
+							className="overflow-hidden rounded-xl border"
+							style={{
+								borderColor:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+								backgroundColor: "var(--color-surface)",
+							}}
+						>
 							<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%)",
+									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)" }}>
+								<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
+										key={u.username}
+										className="flex flex-col items-center gap-1"
+									>
 										<div className="relative overflow-visible">
 											<Image
-												src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 3 })}
+												src={avatarImageUrl(imager, u.look, {
+													headOnly: true,
+													direction: 3,
+												})}
 												alt={u.username}
 												width={64}
 												height={78}
@@ -305,7 +480,10 @@ export default async function Home() {
 												unoptimized
 											/>
 										</div>
-										<span className="text-[11px] font-bold truncate max-w-[64px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
+										<span
+											className="text-[11px] font-bold truncate max-w-[64px] text-center leading-tight"
+											style={{ color: "var(--color-text-readable)" }}
+										>
 											{u.username}
 										</span>
 									</div>
@@ -317,20 +495,40 @@ export default async function Home() {

 				{/* Right: News */}
 				<Reveal delay={0.15} className="flex w-full flex-col gap-4 md:w-2/3">
-					<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)", backgroundColor: "var(--color-surface)" }}>
+					<div
+						className="overflow-hidden rounded-xl border"
+						style={{
+							borderColor:
+								"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							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%)",
+								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)" }}>
+								<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">
+							<Link
+								href="/news"
+								className="text-xs font-bold text-white/80 hover:text-white hover:underline"
+							>
 								{tp("allNews")}
 							</Link>
 						</div>
@@ -345,7 +543,8 @@ export default async function Home() {
 											style={{
 												height: "200px",
 												backgroundColor: "var(--color-background)",
-												border: "1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+												border:
+													"1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
 											}}
 										>
 											<div className="relative h-full w-full overflow-hidden rounded-lg">
@@ -356,22 +555,26 @@ export default async function Home() {
 													className="rounded-lg object-cover transition-all duration-300 group-hover:scale-105"
 													unoptimized
 												/>
-												<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"
-												>
-													<span className="text-white text-sm font-bold">→</span>
+												<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">
+													<span className="text-white text-sm font-bold">
+														→
+													</span>
 												</div>
 												<div
 													className="absolute left-0 w-full p-2.5"
 													style={{
 														bottom: 0,
-														background: "linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%)",
+														background:
+															"linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%)",
 													}}
 												>
 													<h3 className="truncate text-base font-bold text-white text-shadow-sm">
 														{a.title}
 													</h3>
-													<p className="text-[11px] font-semibold mt-0.5 opacity-80" style={{ color: "var(--color-text-muted)" }}>
+													<p
+														className="text-[11px] font-semibold mt-0.5 opacity-80"
+														style={{ color: "var(--color-text-muted)" }}
+													>
 														{formatDate(a.createdAt, "date", "")}
 													</p>
 												</div>
@@ -380,7 +583,10 @@ export default async function Home() {
 									))}
 								</div>
 							) : (
-								<p className="py-8 text-center text-sm" style={{ color: "var(--color-text-muted)" }}>
+								<p
+									className="py-8 text-center text-sm"
+									style={{ color: "var(--color-text-muted)" }}
+								>
 									{tp("noArticles")}
 								</p>
 							)}
@@ -392,20 +598,40 @@ export default async function Home() {
 			{/* ── Online users ── */}
 			{recentUsers.length > 0 && (
 				<Reveal>
-					<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)", backgroundColor: "var(--color-surface)" }}>
+					<div
+						className="overflow-hidden rounded-xl border"
+						style={{
+							borderColor:
+								"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							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%)",
+								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)" }}>
+								<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">
+							<Link
+								href="/community"
+								className="text-xs font-bold text-white/80 hover:text-white hover:underline"
+							>
 								{tp("allUsers")}
 							</Link>
 						</div>
@@ -415,17 +641,27 @@ export default async function Home() {
 									<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"
-										style={{ background: "color-mix(in srgb, var(--color-primary) 5%, transparent)" }}
+										style={{
+											background:
+												"color-mix(in srgb, var(--color-primary) 5%, transparent)",
+										}}
 									>
 										<Image
-											src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
+											src={avatarImageUrl(imager, u.look, {
+												headOnly: true,
+												direction: 2,
+												size: "s",
+											})}
 											alt={u.username}
 											width={30}
 											height={36}
 											className="rounded-md"
 											unoptimized
 										/>
-										<span className="text-[9px] font-bold truncate max-w-[50px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
+										<span
+											className="text-[9px] font-bold truncate max-w-[50px] text-center leading-tight"
+											style={{ color: "var(--color-text-readable)" }}
+										>
 											{u.username}
 										</span>
 									</div>
@@ -442,13 +678,23 @@ export default async function Home() {
 					className="relative overflow-hidden rounded-xl border text-center px-6 py-10"
 					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: "color-mix(in srgb, var(--color-primary) 15%, transparent)",
+						borderColor:
+							"color-mix(in srgb, var(--color-primary) 15%, transparent)",
 					}}
 				>
-					<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}>
+					<h2
+						className="text-2xl md:text-3xl font-black tracking-tight mb-2"
+						style={{
+							color: "var(--color-text-readable)",
+							fontFamily: "var(--font-nunito)",
+						}}
+					>
 						{tp("joinNow", { hotelName })}
 					</h2>
-					<p className="text-sm mb-6 max-w-sm mx-auto" style={{ color: "var(--color-text-muted)" }}>
+					<p
+						className="text-sm mb-6 max-w-sm mx-auto"
+						style={{ color: "var(--color-text-muted)" }}
+					>
 						{tp("welcomeBody")}
 					</p>
 					<Link
@@ -457,10 +703,17 @@ export default async function Home() {
 						style={{
 							background: "var(--color-primary)",
 							color: "var(--color-primary-foreground)",
-							boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+							boxShadow:
+								"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
 						}}
 					>
-						<Image src="/assets/images/EnterHubbly.png" alt="" width={20} height={20} unoptimized />
+						<Image
+							src="/assets/images/EnterHubbly.png"
+							alt=""
+							width={20}
+							height={20}
+							unoptimized
+						/>
 						{tp("register")}
 					</Link>
 				</div>
@@ -469,22 +722,47 @@ export default async function Home() {
 			{/* ── Recent photos ── */}
 			{recentPhotos.length > 0 && (
 				<Reveal>
-					<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)", backgroundColor: "var(--color-surface)" }}>
+					<div
+						className="overflow-hidden rounded-xl border"
+						style={{
+							borderColor:
+								"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							backgroundColor: "var(--color-surface)",
+						}}
+					>
 						<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%)",
+								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)" }}>
+							<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" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)" }}>
+									<Link
+										key={p.id}
+										href="/photos"
+										className="block rounded-lg overflow-hidden aspect-square border transition-all duration-200 hover:shadow-md"
+										style={{
+											borderColor:
+												"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+										}}
+									>
 										<Image
 											src={p.url}
 											alt=""
@@ -3,8 +3,8 @@ import {
 	type LightboxPhoto,
 	PhotoLightbox,
 } from "@/components/public/photo-lightbox";
-import { formatDate } from "@/lib/format-date";
 import { ContentCard, EmptyState } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";

 export const revalidate = 300;
@@ -36,7 +36,11 @@ export default async function PollDetailPage({
 	}

 	const now = Date.now();
-	if (poll.startsAt && poll.startsAt.getTime() > now && poll.status === "active") {
+	if (
+		poll.startsAt &&
+		poll.startsAt.getTime() > now &&
+		poll.status === "active"
+	) {
 		// Not started yet — treat as unavailable for guests
 		notFound();
 	}
@@ -101,7 +105,11 @@ export default async function PollDetailPage({

 			{isOpen && !hasVoted ? (
 				session?.user ? (
-					<ContentCard icon="🗳️" title={t("voteTitle")} subtitle={t("voteSubtitle")}>
+					<ContentCard
+						icon="🗳️"
+						title={t("voteTitle")}
+						subtitle={t("voteSubtitle")}
+					>
 						<PollVoteForm
 							pollId={poll.id}
 							questions={poll.questions.map((q) => ({
@@ -156,7 +164,10 @@ export default async function PollDetailPage({
 							const counts = new Map<string, number>();
 							for (const opt of options) counts.set(opt, 0);
 							for (const vote of votes) {
-								for (const part of vote.split("\n").map((a) => a.trim()).filter(Boolean)) {
+								for (const part of vote
+									.split("\n")
+									.map((a) => a.trim())
+									.filter(Boolean)) {
 									counts.set(part, (counts.get(part) ?? 0) + 1);
 								}
 							}
@@ -99,10 +99,16 @@ export function PollVoteForm({
 								value={answers[q.id] ?? ""}
 								onChange={(e) => setSingle(q.id, e.target.value)}
 								placeholder={t("textPlaceholder")}
-								style={{ width: "100%", marginTop: "0.35rem", resize: "vertical" }}
+								style={{
+									width: "100%",
+									marginTop: "0.35rem",
+									resize: "vertical",
+								}}
 							/>
 						) : q.type === "multiple" ? (
-							<div style={{ display: "grid", gap: "0.4rem", marginTop: "0.35rem" }}>
+							<div
+								style={{ display: "grid", gap: "0.4rem", marginTop: "0.35rem" }}
+							>
 								{options.map((opt) => (
 									<label
 										key={opt}
@@ -123,7 +129,9 @@ export function PollVoteForm({
 								))}
 							</div>
 						) : (
-							<div style={{ display: "grid", gap: "0.4rem", marginTop: "0.35rem" }}>
+							<div
+								style={{ display: "grid", gap: "0.4rem", marginTop: "0.35rem" }}
+							>
 								{options.map((opt) => (
 									<label
 										key={opt}
@@ -64,7 +64,13 @@ export default async function PollsPage() {
 										{poll.title}
 									</h3>
 									{poll.description ? (
-										<p style={{ margin: 0, fontSize: "0.88rem", lineHeight: 1.5 }}>
+										<p
+											style={{
+												margin: 0,
+												fontSize: "0.88rem",
+												lineHeight: 1.5,
+											}}
+										>
 											{excerpt(poll.description, 120)}
 										</p>
 									) : null}
@@ -1,13 +1,12 @@
 import Link from "next/link";
-import { formatDate } from "@/lib/format-date";
 import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { ContentCard } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";

 export const revalidate = 300;

-
 export default async function RadioContestDetailPage({
 	params,
 }: {
@@ -61,9 +60,13 @@ export default async function RadioContestDetailPage({
 						<tr>
 							<th>Period</th>
 							<td>
-								{contest.startDate ? formatDate(contest.startDate, "datetime-seconds", "") : "—"}
+								{contest.startDate
+									? formatDate(contest.startDate, "datetime-seconds", "")
+									: "—"}
 								{" — "}
-								{contest.endDate ? formatDate(contest.endDate, "datetime-seconds", "") : "ongoing"}
+								{contest.endDate
+									? formatDate(contest.endDate, "datetime-seconds", "")
+									: "ongoing"}
 							</td>
 						</tr>
 						<tr>
@@ -1,12 +1,11 @@
 import Link from "next/link";
-import { formatDate } from "@/lib/format-date";
 import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";

 export const revalidate = 300;

-
 export default async function RadioContestsPage() {
 	const t = await getTranslations("pages.radioContests");

@@ -1,13 +1,12 @@
 import Link from "next/link";
-import { formatDate } from "@/lib/format-date";
 import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { ContentCard } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";

 export const revalidate = 300;

-
 export default async function RadioGiveawayDetailPage({
 	params,
 }: {
@@ -66,9 +65,13 @@ export default async function RadioGiveawayDetailPage({
 						<tr>
 							<th>Period</th>
 							<td>
-								{giveaway.startDate ? formatDate(giveaway.startDate, "datetime-seconds", "") : "—"}
+								{giveaway.startDate
+									? formatDate(giveaway.startDate, "datetime-seconds", "")
+									: "—"}
 								{" — "}
-								{giveaway.endDate ? formatDate(giveaway.endDate, "datetime-seconds", "") : "ongoing"}
+								{giveaway.endDate
+									? formatDate(giveaway.endDate, "datetime-seconds", "")
+									: "ongoing"}
 							</td>
 						</tr>
 						<tr>
@@ -1,12 +1,11 @@
 import Link from "next/link";
-import { formatDate } from "@/lib/format-date";
 import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";

 export const revalidate = 300;

-
 export default async function RadioGiveawaysPage() {
 	const t = await getTranslations("pages.radioGiveaways");

@@ -1,9 +1,9 @@
 import { getTranslations } from "next-intl/server";
 import type { CSSProperties } from "react";
-import { formatDate } from "@/lib/format-date";
 import { submitRequest } from "@/actions/radio-requests";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";

 export const dynamic = "force-dynamic";
@@ -179,7 +179,9 @@ export default async function RadioRequestsPage({
 											)}
 										</td>
 										<td className="muted">
-											{r.submittedAt ? formatDate(r.submittedAt, "datetime", "") : "—"}
+											{r.submittedAt
+												? formatDate(r.submittedAt, "datetime", "")
+												: "—"}
 										</td>
 										<td>{status}</td>
 									</tr>
@@ -3,21 +3,21 @@ import Image from "next/image";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { RegisterForm } from "@/components/auth/register-form";
-import { cached } from "@/lib/cache";
-import { avatarImageUrl } from "@/lib/format";
-import { prisma } from "@/lib/prisma";
-import { captchaConfig } from "@/lib/services/captcha";
-import { resolveHotelName } from "@/lib/hotel-name";
-import { siteSettings } from "@/lib/services/site-settings";
-import { ThemeSwitcher } from "@/components/theme-switcher";
+import { Clock } from "@/components/clock";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { Reveal } from "@/components/motion-reveal";
-import { Clock } from "@/components/clock";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { cached } from "@/lib/cache";
+import { avatarImageUrl } from "@/lib/format";
+import { resolveHotelName } from "@/lib/hotel-name";
+import { prisma } from "@/lib/prisma";
+import { captchaConfig } from "@/lib/services/captcha";
+import { siteSettings } from "@/lib/services/site-settings";

 export default async function RegisterPage() {
 	const th = await getTranslations("header");
 	const tpr = await getTranslations("pages.register");
-	const [hotelName, imagerRaw, cfg, discordUrl, logo] = await Promise.all([
+	const [hotelName, imagerRaw, cfg, logo] = await Promise.all([
 		resolveHotelName(),
 		siteSettings.get(
 			"habbo_imaging_url",
@@ -54,238 +54,343 @@ export default async function RegisterPage() {
 		<div className="flex flex-col gap-10 pb-14">
 			{/* ── 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="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={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 />
+							<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)" }}>
+						<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)",
-					}}>
-
+					<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)" }} />
+						<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)" }} />
+						<div
+							className="w-px h-5"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							}}
+						/>
 						<ThemeSwitcher />
 					</div>
 				</div>
 			</Reveal>
 			<Reveal>
-			<div className="flex flex-col lg:flex-row gap-10 stagger-children">
-			{/* Left panel */}
-			<div className="lg:w-80 shrink-0 space-y-4">
-				<div
-					className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
-					style={{
-						borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
-						background: `url(/assets/images/background.png) center/cover no-repeat`,
-					}}
-				>
-					<div
-						className="absolute inset-0"
-						style={{
-							background: "linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
-						}}
-					/>
-					<div className="relative">
-					<Image
-						src="/assets/images/FrankwithBag.gif"
-						alt="Frank"
-						width={130}
-						height={170}
-						className="object-contain mx-auto drop-shadow-xl animate-float"
-						unoptimized
-						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"
-						style={{
-							borderColor:
-								"color-mix(in srgb, var(--color-primary) 18%, transparent)",
-							background:
-								"color-mix(in srgb, var(--color-primary) 10%, transparent)",
-							color: "var(--color-primary-readable, var(--color-primary))",
-						}}
-					>
-						<span className="w-2 h-2 rounded-full bg-green-500" />
-						{tpr("usersOnline", { count: online })}
-					</div>
-					<h1
-						className="text-xl font-black"
-						style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}
-					>
-						{tpr("title")} — {hotelName}
-					</h1>
-					<p
-						className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
-						style={{ color: "var(--color-text-muted)" }}
-					>
-						{th("tagline")}
-					</p>
-				</div>
-			</div>
-
-				{recentUsers.length > 0 && (
-					<div
-						className="overflow-hidden rounded-xl border"
-						style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
-					>
+				<div className="flex flex-col lg:flex-row gap-10 stagger-children">
+					{/* Left panel */}
+					<div className="lg:w-80 shrink-0 space-y-4">
 						<div
-							className="flex items-center gap-2.5 px-4 py-3"
+							className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
 							style={{
-								background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
+								borderColor:
+									"color-mix(in srgb, var(--color-primary) 20%, transparent)",
+								background: `url(/assets/images/background.png) center/cover no-repeat`,
 							}}
 						>
-							<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) => (
+							<div
+								className="absolute inset-0"
+								style={{
+									background:
+										"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
+								}}
+							/>
+							<div className="relative">
+								<Image
+									src="/assets/images/FrankwithBag.gif"
+									alt="Frank"
+									width={130}
+									height={170}
+									className="object-contain mx-auto drop-shadow-xl animate-float"
+									unoptimized
+									priority
+								/>
 								<div
-									key={u.username}
-									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+									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)",
+										background:
+											"color-mix(in srgb, var(--color-primary) 10%, transparent)",
+										color:
+											"var(--color-primary-readable, var(--color-primary))",
+									}}
+								>
+									<span className="w-2 h-2 rounded-full bg-green-500" />
+									{tpr("usersOnline", { count: online })}
+								</div>
+								<h1
+									className="text-xl font-black"
+									style={{
+										color: "var(--color-text-readable)",
+										fontFamily: "var(--font-nunito)",
+									}}
+								>
+									{tpr("title")} — {hotelName}
+								</h1>
+								<p
+									className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{th("tagline")}
+								</p>
+							</div>
+						</div>
+
+						{recentUsers.length > 0 && (
+							<div
+								className="overflow-hidden rounded-xl border"
+								style={{
+									borderColor:
+										"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+								}}
+							>
+								<div
+									className="flex items-center gap-2.5 px-4 py-3"
 									style={{
 										background:
-											"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+											"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
 									}}
 								>
 									<Image
-										src={avatarImageUrl(imager, u.look, {
-											headOnly: true,
-											direction: 2,
-											size: "s",
-										})}
+										src="/assets/images/icons/navigation/goody.png"
 										alt=""
-										width={26}
-										height={32}
-										className="rounded-md"
+										width={18}
+										height={18}
 										unoptimized
 									/>
-									<span
-										className="text-[8px] font-bold truncate w-full text-center leading-tight"
-										style={{ color: "var(--color-text-readable)" }}
+									<h3
+										className="text-sm font-bold text-white"
+										style={{ fontFamily: "var(--font-nunito)" }}
 									>
-										{u.username}
-									</span>
+										{tpr("whoIsOnline")}
+									</h3>
 								</div>
-							))}
-						</div>
-						</div>
-					</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) => (
+											<div
+												key={u.username}
+												className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+												style={{
+													background:
+														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												}}
+											>
+												<Image
+													src={avatarImageUrl(imager, u.look, {
+														headOnly: true,
+														direction: 2,
+														size: "s",
+													})}
+													alt=""
+													width={26}
+													height={32}
+													className="rounded-md"
+													unoptimized
+												/>
+												<span
+													className="text-[8px] font-bold truncate w-full text-center leading-tight"
+													style={{ color: "var(--color-text-readable)" }}
+												>
+													{u.username}
+												</span>
+											</div>
+										))}
+									</div>
+								</div>
+							</div>
+						)}

-				{latestUsers.length > 0 && (
-					<div
-						className="overflow-hidden rounded-xl border"
-						style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
-					>
+						{latestUsers.length > 0 && (
+							<div
+								className="overflow-hidden rounded-xl border"
+								style={{
+									borderColor:
+										"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) => (
+											<div
+												key={u.username}
+												className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+												style={{
+													background:
+														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												}}
+											>
+												<Image
+													src={avatarImageUrl(imager, u.look, {
+														headOnly: true,
+														direction: 2,
+													})}
+													alt=""
+													width={52}
+													height={64}
+													className="rounded-md"
+													unoptimized
+												/>
+												<span
+													className="text-[10px] font-bold truncate w-full text-center leading-tight"
+													style={{ color: "var(--color-text-readable)" }}
+												>
+													{u.username}
+												</span>
+											</div>
+										))}
+									</div>
+								</div>
+							</div>
+						)}
+
+						<p
+							className="text-xs text-center"
+							style={{ color: "var(--color-text-muted)" }}
+						>
+							{tpr("alreadyHaveAccountPre")}{" "}
+							<Link
+								href="/login"
+								className="font-extrabold hover:underline"
+								style={{
+									color: "var(--color-primary-readable, var(--color-primary))",
+								}}
+							>
+								{tpr("alreadyHaveAccountLink")}
+							</Link>
+						</p>
+					</div>
+
+					{/* Right: form */}
+					<div className="flex-1">
 						<div
-							className="flex items-center gap-2.5 px-4 py-3"
+							className="overflow-hidden rounded-xl border"
 							style={{
-								background: "linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
+								borderColor:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 							}}
 						>
-							<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) => (
-								<div
-									key={u.username}
-									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
-									style={{
-										background: "color-mix(in srgb, var(--color-primary) 4%, 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)" }}
 								>
-									<Image
-										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2 })}
-										alt=""
-										width={52}
-										height={64}
-										className="rounded-md"
-										unoptimized
-									/>
-									<span
-										className="text-[10px] font-bold truncate w-full text-center leading-tight"
-										style={{ color: "var(--color-text-readable)" }}
-									>
-										{u.username}
-									</span>
-								</div>
-							))}
-						</div>
+									{tpr("title")}
+								</h2>
+							</div>
+							<div
+								className="p-6"
+								style={{ backgroundColor: "var(--color-surface)" }}
+							>
+								<p
+									className="text-sm mb-6"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{tpr("subtitle")}
+								</p>
+								<RegisterForm
+									hotelName={hotelName}
+									captcha={{
+										provider: cfg.provider,
+										siteKey: cfg.siteKey || undefined,
+									}}
+									nonce={nonce}
+								/>
+							</div>
 						</div>
 					</div>
-				)}
-
-				<p
-					className="text-xs text-center"
-					style={{ color: "var(--color-text-muted)" }}
-				>
-					{tpr("alreadyHaveAccountPre")}{" "}
-					<Link
-						href="/login"
-						className="font-extrabold hover:underline"
-						style={{
-							color: "var(--color-primary-readable, var(--color-primary))",
-						}}
-					>
-						{tpr("alreadyHaveAccountLink")}
-					</Link>
-				</p>
-			</div>
-
-			{/* Right: form */}
-			<div className="flex-1">
-				<div className="overflow-hidden rounded-xl border" style={{ borderColor: "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"
-						style={{ color: "var(--color-text-muted)" }}
-					>
-						{tpr("subtitle")}
-					</p>
-				<RegisterForm
-					hotelName={hotelName}
-					captcha={{
-						provider: cfg.provider,
-						siteKey: cfg.siteKey || undefined,
-					}}
-					nonce={nonce}
-				/>
-			</div>
-			</div>
-			</div>
-		</div>
+				</div>
 			</Reveal>
 		</div>
 	);
@@ -1,6 +1,6 @@
+import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
-import type { Metadata } from "next";
 import { avatarImageUrl } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
@@ -17,15 +17,26 @@ export default async function SearchPage({
 	const { q } = await searchParams;
 	const query = q?.trim();

-	const imager = (await siteSettings.get(
-		"habbo_imaging_url",
-		"https://www.habbo.com/habbo-imaging/avatarimage",
-	)) ?? "";
+	const imager =
+		(await siteSettings.get(
+			"habbo_imaging_url",
+			"https://www.habbo.com/habbo-imaging/avatarimage",
+		)) ?? "";

 	if (!query) {
 		return (
-			<div 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)" }}>
+			<div
+				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>
@@ -68,7 +79,14 @@ export default async function SearchPage({

 	return (
 		<div className="flex flex-col gap-6">
-			<div className="rounded-2xl border p-4" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
+			<div
+				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"
@@ -79,7 +97,8 @@ export default async function SearchPage({
 						style={{
 							backgroundColor: "var(--color-background)",
 							color: "var(--color-text-readable)",
-							borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+							borderColor:
+								"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
 						}}
 					/>
 					<button
@@ -96,13 +115,25 @@ export default async function SearchPage({
 			</div>

 			<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
-				Results for &quot;{query}&quot; — {users.length} user{users.length !== 1 ? "s" : ""}
-				{rooms.length > 0 && `, ${rooms.length} room${rooms.length !== 1 ? "s" : ""}`}
+				Results for &quot;{query}&quot; — {users.length} user
+				{users.length !== 1 ? "s" : ""}
+				{rooms.length > 0 &&
+					`, ${rooms.length} room${rooms.length !== 1 ? "s" : ""}`}
 			</p>

 			{users.length > 0 && (
-				<div 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)" }}>
+				<div
+					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)" }}
+					>
 						Users
 					</h2>
 					<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
@@ -111,20 +142,32 @@ export default async function SearchPage({
 								key={u.id}
 								href={`/u/${u.username}`}
 								className="flex flex-col items-center gap-1.5 rounded-xl p-3 transition-all duration-200 hover:-translate-y-0.5"
-								style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)" }}
+								style={{
+									background:
+										"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+								}}
 							>
 								<Image
-									src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2 })}
+									src={avatarImageUrl(imager, u.look, {
+										headOnly: true,
+										direction: 2,
+									})}
 									alt={u.username}
 									width={40}
 									height={48}
 									unoptimized
 									className="rounded-lg"
 								/>
-								<span className="text-xs font-extrabold truncate max-w-full text-center" style={{ color: "var(--color-text-readable)" }}>
+								<span
+									className="text-xs font-extrabold truncate max-w-full text-center"
+									style={{ color: "var(--color-text-readable)" }}
+								>
 									{u.username}
 								</span>
-								<span className="text-[9px] font-semibold" style={{ color: "var(--color-text-muted)" }}>
+								<span
+									className="text-[9px] font-semibold"
+									style={{ color: "var(--color-text-muted)" }}
+								>
 									{u.online === "1" ? "🟢 Online" : "Offline"}
 								</span>
 							</Link>
@@ -134,8 +177,18 @@ export default async function SearchPage({
 			)}

 			{rooms.length > 0 && (
-				<div 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)" }}>
+				<div
+					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)" }}
+					>
 						Rooms
 					</h2>
 					<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
@@ -145,14 +198,22 @@ export default async function SearchPage({
 								href={`/room/${room.id}`}
 								className="rounded-xl border p-3 transition-all duration-200 hover:-translate-y-0.5"
 								style={{
-									background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
-									borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+									background:
+										"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+									borderColor:
+										"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
 								}}
 							>
-								<p className="text-sm font-extrabold truncate" style={{ color: "var(--color-text-readable)" }}>
+								<p
+									className="text-sm font-extrabold truncate"
+									style={{ color: "var(--color-text-readable)" }}
+								>
 									{room.name}
 								</p>
-								<p className="text-[10px] font-semibold mt-0.5" style={{ color: "var(--color-text-muted)" }}>
+								<p
+									className="text-[10px] font-semibold mt-0.5"
+									style={{ color: "var(--color-text-muted)" }}
+								>
 									{room.ownerName} · {room.users}/{room.usersMax}
 								</p>
 							</Link>
@@ -162,8 +223,18 @@ export default async function SearchPage({
 			)}

 			{users.length === 0 && rooms.length === 0 && (
-				<div 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)" }}>
+				<div
+					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>
@@ -11,8 +11,8 @@ import { env } from "@/env";
 import { auth } from "@/lib/auth";
 import { LaravelEncrypter } from "@/lib/auth/laravel-encrypter";
 import { totpKeyUri } from "@/lib/auth/totp";
-import { prisma } from "@/lib/prisma";
 import { resolveHotelName } from "@/lib/hotel-name";
+import { prisma } from "@/lib/prisma";

 export const dynamic = "force-dynamic";

@@ -52,26 +52,43 @@ export default async function SettingsPage() {
 				<div
 					className="relative overflow-hidden rounded-xl border px-5 py-4"
 					style={{
-						background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
+						background:
+							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
 						backdropFilter: "blur(14px)",
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+						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"
-							style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-primary) 14%, transparent)",
+							}}
 						>
-							<Image src="/assets/images/icons/navigation/me.png" alt="" width={22} height={22} unoptimized />
+							<Image
+								src="/assets/images/icons/navigation/me.png"
+								alt=""
+								width={22}
+								height={22}
+								unoptimized
+							/>
 						</div>
 						<div>
 							<h1
 								className="text-lg font-black tracking-tight"
-								style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}
+								style={{
+									color: "var(--color-text-readable)",
+									fontFamily: "var(--font-nunito)",
+								}}
 							>
 								{t("accountSettings")}
 							</h1>
-							<p className="text-xs" style={{ color: "var(--color-text-muted)" }}>
+							<p
+								className="text-xs"
+								style={{ color: "var(--color-text-muted)" }}
+							>
 								{t("accountSettingsSubtitle")}
 							</p>
 						</div>
@@ -84,17 +101,28 @@ export default async function SettingsPage() {
 				<div
 					className="overflow-hidden rounded-xl border card-premium"
 					style={{
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+						borderColor:
+							"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%)",
+							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)" }}>
+						<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>
@@ -103,7 +131,13 @@ export default async function SettingsPage() {
 						style={{ backgroundColor: "var(--color-surface)" }}
 					>
 						<div className="shrink-0">
-							<div className="rounded-xl overflow-hidden border" style={{ borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)" }}>
+							<div
+								className="rounded-xl overflow-hidden border"
+								style={{
+									borderColor:
+										"color-mix(in srgb, var(--color-primary) 15%, transparent)",
+								}}
+							>
 								<Image
 									src={avatar}
 									alt={`${user.username} avatar`}
@@ -115,13 +149,29 @@ export default async function SettingsPage() {
 							</div>
 						</div>
 						<div className="min-w-0 flex-1">
-							<h3 className="text-base font-extrabold" style={{ color: "var(--color-text-readable)" }}>
+							<h3
+								className="text-base font-extrabold"
+								style={{ color: "var(--color-text-readable)" }}
+							>
 								{user.username}
 							</h3>
-							<p className="text-sm mt-0.5" style={{ color: "var(--color-text-muted)" }}>
-								{user.motto || <span style={{ fontStyle: "italic", opacity: 0.5 }}>{t("noMotto")}</span>}
+							<p
+								className="text-sm mt-0.5"
+								style={{ color: "var(--color-text-muted)" }}
+							>
+								{user.motto || (
+									<span style={{ fontStyle: "italic", opacity: 0.5 }}>
+										{t("noMotto")}
+									</span>
+								)}
 							</p>
-							<p className="text-xs mt-1.5 font-medium" style={{ color: "color-mix(in srgb, var(--color-text-muted) 70%, transparent)" }}>
+							<p
+								className="text-xs mt-1.5 font-medium"
+								style={{
+									color:
+										"color-mix(in srgb, var(--color-text-muted) 70%, transparent)",
+								}}
+							>
 								{user.mail || t("noEmail")}
 							</p>
 						</div>
@@ -134,17 +184,28 @@ export default async function SettingsPage() {
 				<div
 					className="overflow-hidden rounded-xl border"
 					style={{
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+						borderColor:
+							"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%)",
+							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)" }}>
+						<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>
@@ -152,7 +213,10 @@ export default async function SettingsPage() {
 						className="p-5"
 						style={{ backgroundColor: "var(--color-surface)" }}
 					>
-						<p className="text-xs mb-4" style={{ color: "var(--color-text-muted)" }}>
+						<p
+							className="text-xs mb-4"
+							style={{ color: "var(--color-text-muted)" }}
+						>
 							{t("changeMottoSubtitle")}
 						</p>
 						<form
@@ -170,7 +234,8 @@ export default async function SettingsPage() {
 								style={{
 									backgroundColor: "var(--color-background)",
 									color: "var(--color-text-readable)",
-									borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+									borderColor:
+										"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
 								}}
 							/>
 							<div>
@@ -180,7 +245,8 @@ export default async function SettingsPage() {
 									style={{
 										background: "var(--color-primary)",
 										color: "var(--color-primary-foreground)",
-										boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
+										boxShadow:
+											"0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
 									}}
 								>
 									{t("saveMotto")}
@@ -196,17 +262,28 @@ export default async function SettingsPage() {
 				<div
 					className="overflow-hidden rounded-xl border"
 					style={{
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+						borderColor:
+							"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%)",
+							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)" }}>
+						<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>
@@ -214,16 +291,21 @@ export default async function SettingsPage() {
 						className="p-5"
 						style={{ backgroundColor: "var(--color-surface)" }}
 					>
-						<p className="text-xs mb-4" style={{ color: "var(--color-text-muted)" }}>
+						<p
+							className="text-xs mb-4"
+							style={{ color: "var(--color-text-muted)" }}
+						>
 							{t("securityDescription")}
 						</p>
 						<Link
 							href="/settings/2fa"
 							className="inline-flex items-center gap-2 font-bold text-sm px-5 py-2.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
 							style={{
-								borderColor: "color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
+								borderColor:
+									"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
 								color: "var(--color-text-readable)",
-								background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
+								background:
+									"color-mix(in srgb, var(--color-surface) 50%, transparent)",
 							}}
 						>
 							{t("twoFactorLink")}
@@ -238,7 +320,8 @@ export default async function SettingsPage() {
 					href="/settings/sessions"
 					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)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 					}}
 				>
 					<div
@@ -248,20 +331,38 @@ export default async function SettingsPage() {
 						<div className="flex items-center gap-3">
 							<div
 								className="w-10 h-10 rounded-xl flex items-center justify-center"
-								style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
+								style={{
+									background:
+										"color-mix(in srgb, var(--color-primary) 14%, transparent)",
+								}}
 							>
-								<Image src="/assets/images/icons/navigation/community.png" alt="" width={20} height={20} unoptimized />
+								<Image
+									src="/assets/images/icons/navigation/community.png"
+									alt=""
+									width={20}
+									height={20}
+									unoptimized
+								/>
 							</div>
 							<div>
-								<span className="text-sm font-extrabold" style={{ color: "var(--color-text-readable)" }}>
+								<span
+									className="text-sm font-extrabold"
+									style={{ color: "var(--color-text-readable)" }}
+								>
 									Session Management
 								</span>
-								<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
+								<p
+									className="text-xs mt-0.5"
+									style={{ color: "var(--color-text-muted)" }}
+								>
 									View active sessions and sign out everywhere
 								</p>
 							</div>
 						</div>
-						<span className="text-lg font-bold" style={{ color: "var(--color-text-muted)" }}>
+						<span
+							className="text-lg font-bold"
+							style={{ color: "var(--color-text-muted)" }}
+						>
 							→
 						</span>
 					</div>
@@ -86,11 +86,7 @@ export default async function SessionsPage({
 				</p>
 			) : null}

-			<ContentCard
-				icon="🔐"
-				title={t("title")}
-				subtitle={t("subtitle")}
-			/>
+			<ContentCard icon="🔐" title={t("title")} subtitle={t("subtitle")} />

 			<ContentCard
 				icon="🚪"
@@ -104,7 +100,11 @@ export default async function SessionsPage({
 				</form>
 			</ContentCard>

-			<ContentCard icon="✅" title={t("recentTitle")} padded={logins.length === 0}>
+			<ContentCard
+				icon="✅"
+				title={t("recentTitle")}
+				padded={logins.length === 0}
+			>
 				{logins.length === 0 ? (
 					<EmptyState icon="🔐">{t("recentEmpty")}</EmptyState>
 				) : (
@@ -148,7 +148,11 @@ export default async function SessionsPage({
 							{failed.map((f) => (
 								<tr key={f.id}>
 									<td className="muted" style={{ whiteSpace: "nowrap" }}>
-									{formatDate(typeof f.attempted_at === "string" ? new Date(f.attempted_at) : f.attempted_at)}
+										{formatDate(
+											typeof f.attempted_at === "string"
+												? new Date(f.attempted_at)
+												: f.attempted_at,
+										)}
 									</td>
 									<td className="muted">{f.ip_address}</td>
 								</tr>
@@ -79,7 +79,12 @@ const ARTICLE_SELECT = {
 export default async function ShopPage({
 	searchParams,
 }: {
-	searchParams: Promise<{ category?: string; bought?: string; error?: string; package?: string }>;
+	searchParams: Promise<{
+		category?: string;
+		bought?: string;
+		error?: string;
+		package?: string;
+	}>;
 }) {
 	const t = await getTranslations("pages.shop");
 	const sp = await searchParams;
@@ -185,8 +190,7 @@ export default async function ShopPage({
 				}
 			>
 				<p className="muted" style={{ margin: "0 0 0.75rem" }}>
-					{t("creditsHint")}{" "}
-					<Link href="/shop/topup">{t("topUpLink")}</Link>
+					{t("creditsHint")} <Link href="/shop/topup">{t("topUpLink")}</Link>
 				</p>
 				{categories.length > 0 ? (
 					<div
@@ -319,8 +323,16 @@ export default async function ShopPage({
 									</span>
 									{isLoggedIn ? (
 										<form action={buyShopArticle} style={{ margin: 0 }}>
-											<input type="hidden" name="articleId" value={String(a.id)} />
-											<input type="hidden" name="categoryId" value={categoryId} />
+											<input
+												type="hidden"
+												name="articleId"
+												value={String(a.id)}
+											/>
+											<input
+												type="hidden"
+												name="categoryId"
+												value={categoryId}
+											/>
 											<button type="submit" className="btn btn-primary">
 												{t("buy")}
 											</button>
@@ -67,8 +67,6 @@ const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";
 const CURRENCY_DUCKETS = 0;
 const CURRENCY_DIAMONDS = 5;

-
-
 export default async function ProfilePage({
 	params,
 	searchParams,
@@ -1,4 +1,4 @@
-import { CheckCircle2, Clock, Link2, MailX } from "lucide-react";
+import { CheckCircle2, Clock, MailX } from "lucide-react";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { isValidVerificationToken } from "@/actions/email-verify";
@@ -22,8 +22,10 @@ function StatusCard({
 	color: string;
 }) {
 	const gradientMap: Record<string, string> = {
-		green: "linear-gradient(140deg, #0A2F1A 0%, #0F3D22 20%, #154C2A 40%, #1B5A32 60%, #20683A 75%, #1A5A30 90%, #144826 100%)",
-		yellow: "linear-gradient(140deg, #3A2F0A 0%, #4A3D0F 20%, #5A4C15 40%, #6A5A1B 60%, #7A6820 75%, #6A5A1A 90%, #5A4814 100%)",
+		green:
+			"linear-gradient(140deg, #0A2F1A 0%, #0F3D22 20%, #154C2A 40%, #1B5A32 60%, #20683A 75%, #1A5A30 90%, #144826 100%)",
+		yellow:
+			"linear-gradient(140deg, #3A2F0A 0%, #4A3D0F 20%, #5A4C15 40%, #6A5A1B 60%, #7A6820 75%, #6A5A1A 90%, #5A4814 100%)",
 		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%)",
 	};
@@ -33,7 +35,8 @@ function StatusCard({
 			<div
 				className="w-full max-w-md overflow-hidden rounded-xl border"
 				style={{
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+					borderColor:
+						"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 					backgroundColor: "var(--color-surface)",
 				}}
 			>
@@ -48,12 +51,16 @@ function StatusCard({
 					<div
 						className="flex h-16 w-16 items-center justify-center rounded-full"
 						style={{
-							background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
+							background:
+								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
 						}}
 					>
 						{icon}
 					</div>
-					<p className="text-sm font-semibold" style={{ color: "var(--color-text-muted)" }}>
+					<p
+						className="text-sm font-semibold"
+						style={{ color: "var(--color-text-muted)" }}
+					>
 						{subtitle}
 					</p>
 					{children}
@@ -107,7 +114,8 @@ export default async function VerifyPage({
 	const linkStyle = {
 		background: "var(--color-primary)",
 		color: "var(--color-primary-foreground)",
-		boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
+		boxShadow:
+			"0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
 	};

 	return (
@@ -167,11 +175,14 @@ export default async function VerifyPage({
 					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
 						{t("invalidBody")}
 					</p>
-					<Link href="/login" className={`${linkClass} !shadow-none`}
+					<Link
+						href="/login"
+						className={`${linkClass} !shadow-none`}
 						style={{
 							background: "transparent",
 							color: "var(--color-text-readable)",
-							border: "2px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
+							border:
+								"2px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
 						}}
 					>
 						{t("backToLogin")}
@@ -180,4 +191,4 @@ export default async function VerifyPage({
 			)}
 		</>
 	);
-}
+}