Refactor Admin and Settings UI to Ethereal Precision aesthetic and improve note import/export functionality

memento-note/app/(admin)/admin/layout.tsx

@@ -1,6 +1,5 @@
 import { AdminHeader } from '@/components/admin-header'
-import { AdminSidebar } from '@/components/admin-sidebar'
-import { AdminContentArea } from '@/components/admin-content-area'
+import { AdminNav } from '@/components/admin-nav'
 
 // Auth is enforced solely by middleware (auth.config.ts → authorized callback).
 // All cross-group navigation (admin ↔ main) uses <a> tags (full page reload)
@@ -11,11 +10,19 @@ export default function AdminLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-white flex flex-col min-h-screen">
+    <div className="bg-background flex flex-col min-h-screen">
       <AdminHeader />
-      <div className="flex flex-1">
-        <AdminSidebar />
-        <AdminContentArea>{children}</AdminContentArea>
+      
+      {/* Horizontal Tab Navigation */}
+      <div className="flex items-center gap-1 px-8 bg-background border-b border-border shrink-0">
+        <AdminNav />
+      </div>
+
+      {/* Page Content */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-5xl mx-auto px-8 py-8 space-y-8">
+          {children}
+        </div>
       </div>
     </div>
   )