fix: remove debug console.log from root layout

src/app/client/page.tsx

@@ -97,10 +97,19 @@ export default function ClientPage() {
     return (
       <div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
         <header
-          className="flex h-14 items-center border-b px-4"
-          style={{ backgroundColor: "var(--color-navbar)", borderColor: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)" }}
+          className="flex h-14 items-center justify-between border-b px-6 shrink-0"
+          style={{ backgroundColor: "var(--color-navbar)", borderColor: "var(--color-primary, #eeb425)" }}
         >
-          <span className="font-bold text-lg">{hotelName || "Atom"}</span>
+          <span className="font-bold text-lg" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{hotelName || "Atom"}</span>
+          <div className="flex items-center gap-2">
+            <span className="relative flex h-2.5 w-2.5">
+              <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.5 w-2.5 bg-green-500" />
+            </span>
+            <span className="text-sm font-bold" style={{ color: "var(--color-navbar-text, var(--color-text-muted))" }}>
+              {onlineCount} Online
+            </span>
+          </div>
         </header>
         <main className="flex-1 flex items-center justify-center">
           <ContentCard icon="🔒" title={t("title")} subtitle={t("errors.unauthorized")}>
@@ -119,10 +128,19 @@ export default function ClientPage() {
     return (
       <div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
         <header
-          className="flex h-14 items-center border-b px-4"
-          style={{ backgroundColor: "var(--color-navbar)", borderColor: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)" }}
+          className="flex h-14 items-center justify-between border-b px-6 shrink-0"
+          style={{ backgroundColor: "var(--color-navbar)", borderColor: "var(--color-primary, #eeb425)" }}
         >
-          <span className="font-bold text-lg">{hotelName || "Atom"}</span>
+          <span className="font-bold text-lg" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{hotelName || "Atom"}</span>
+          <div className="flex items-center gap-2">
+            <span className="relative flex h-2.5 w-2.5">
+              <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.5 w-2.5 bg-green-500" />
+            </span>
+            <span className="text-sm font-bold" style={{ color: "var(--color-navbar-text, var(--color-text-muted))" }}>
+              {onlineCount} Online
+            </span>
+          </div>
         </header>
         <main className="flex-1 flex items-center justify-center">
           <p className="text-center" style={{ color: "var(--color-text-muted)" }}>
@@ -136,7 +154,7 @@ export default function ClientPage() {
   const clientSrc = getClientSrc();
 
   return (
-    <div className="relative w-screen h-screen overflow-hidden site-bg" style={{ backgroundColor: "var(--color-background)" }}>
+    <div className="relative w-screen h-screen overflow-hidden" style={{ backgroundColor: "var(--color-background)" }}>
       {/* Floating Toolbar */}
       <div className="fixed top-4 left-4 z-50 flex items-center gap-2">
         {/* Home Button */}

src/app/globals.css

@@ -728,20 +728,24 @@ tbody tr:hover {
   background-color: var(--color-dropdown);
   border: 1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent);
   box-shadow: 0 8px 32px color-mix(in srgb, rgb(0 0 0) 20%, transparent);
+  transform-origin: top right;
+  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+  pointer-events: none;
 }
 
 details[open] > .dropdown-menu {
-  animation: dropdownIn 0.15s ease-out;
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
 }
 
-@keyframes dropdownIn {
-  from {
+@starting-style {
+  details[open] > .dropdown-menu {
     opacity: 0;
-    transform: translateY(-6px) scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: translateY(-8px) scale(0.95);
   }
 }
 

src/app/layout.tsx

@@ -41,8 +41,6 @@ export default async function RootLayout({ children }: { children: ReactNode })
   const headersList = await headers();
   const pathname = headersList.get("x-pathname") || "";
   const isClient = pathname === "/client" || pathname.startsWith("/client/");
-  console.log(`[RootLayout] pathname: "${pathname}", isClient: ${isClient}`);
-
   return (
     <html lang={locale} className={`app ${nunito.variable}`}>
       <head>