Premium polish: enhanced toolbar, glass cards, Habbo bg panels, animations

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

@@ -48,17 +48,29 @@ export default async function LoginPage() {
 
 	return (
 		<div className="flex flex-col gap-6">
-			<div
-				className="flex items-center justify-end gap-2 rounded-2xl border px-4 py-2.5"
-				style={{
-					background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
-					backdropFilter: "blur(8px)",
-					WebkitBackdropFilter: "blur(8px)",
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-				}}
-			>
-				<LanguageSwitcher />
-				<ThemeSwitcher />
+			<div className="relative">
+				<div
+					className="absolute -inset-6 rounded-full opacity-[0.06] blur-[40px]"
+					style={{ background: "var(--color-primary)" }}
+				/>
+				<div
+					className="relative flex items-center justify-between rounded-2xl border px-5 py-3"
+					style={{
+						background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
+						backdropFilter: "blur(12px)",
+						WebkitBackdropFilter: "blur(12px)",
+						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+					}}
+				>
+					<span className="text-xs font-bold uppercase tracking-[0.15em] opacity-40" style={{ color: "var(--color-text-muted)" }}>
+						{hotelName}
+					</span>
+					<div className="flex items-center gap-1">
+						<LanguageSwitcher />
+						<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<ThemeSwitcher />
+					</div>
+				</div>
 			</div>
 			<div className="flex flex-col lg:flex-row gap-10">
 			{/* Left panel */}
@@ -73,7 +85,7 @@ export default async function LoginPage() {
 					<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) 50%, transparent) 100%)",
+							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">