Apply Second Brain design: Fira Mono, Aubade cards, brand palette

src/app/admin/layout.tsx

@@ -10,21 +10,46 @@ export default async function AdminLayout({ children }: { children: React.ReactN
   if (session.user.role !== "admin") redirect("/dashboard");
 
   return (
-    <div className="min-h-screen flex bg-slate-50">
-      <aside className="w-56 bg-slate-900 text-white flex flex-col shrink-0 fixed h-full z-10">
-        <div className="px-5 py-5 border-b border-slate-800">
-          <p className="font-bold text-amber-400 text-base">Second Brain</p>
-          <p className="text-xs text-slate-400 mt-0.5">Админ-панель</p>
+    <div className="min-h-screen flex">
+      {/* Sidebar */}
+      <aside
+        className="w-52 flex flex-col shrink-0 fixed h-full z-10"
+        style={{ backgroundColor: "var(--sidebar-bg)", color: "var(--sidebar-text)" }}
+      >
+        {/* Logo */}
+        <div
+          className="px-5 py-5"
+          style={{ borderBottom: "2px solid var(--sidebar-border)" }}
+        >
+          <p className="font-bold text-base tracking-wide" style={{ color: "#E8F0D8" }}>
+            Second Brain
+          </p>
+          <p className="text-xs mt-0.5 uppercase tracking-widest" style={{ color: "var(--sidebar-text)", fontSize: "0.6rem" }}>
+            Администратор
+          </p>
         </div>
-        <nav className="flex-1 p-3 space-y-0.5 overflow-y-auto">
+
+        {/* Navigation */}
+        <nav className="flex-1 px-2 py-4 space-y-0.5 overflow-y-auto">
           <AdminNav />
         </nav>
-        <div className="p-4 border-t border-slate-800">
-          <p className="text-xs text-slate-400 mb-3 truncate">{session.user.name}</p>
+
+        {/* User info */}
+        <div
+          className="px-4 py-4"
+          style={{ borderTop: "2px solid var(--sidebar-border)" }}
+        >
+          <p className="text-xs mb-3 truncate" style={{ color: "var(--sidebar-text)" }}>
+            {session.user.name}
+          </p>
           <LogoutButton />
         </div>
       </aside>
-      <div className="ml-56 flex-1 min-h-screen">{children}</div>
+
+      {/* Main content */}
+      <div className="ml-52 flex-1 min-h-screen" style={{ backgroundColor: "var(--background)" }}>
+        {children}
+      </div>
     </div>
   );
 }