feat: redesign admin panel to match Liquid Editorial Bento design system

- Login page: stone/dark palette, liquid ambient blobs, dk0.dev branding,
  gradient accent bar, large rounded card, site-matching button/input styles
- Lockout/loading states: dark mode support, emerald spinner, red gradient bar
- Dashboard navbar: gradient accent bar, monospace branding, pill-style tab buttons
  with dark/light active state, improved mobile menu grid layout
- Stats cards: liquid-* gradient backgrounds per metric (emerald, sky, purple,
  amber, pink, teal) with matching icon colors and rounded-3xl corners
- Section headings: uppercase tracking-tighter font-black with emerald accent dot
- Activity/settings cards: white/dark-stone background, rounded-3xl, dark mode
- Removed framer-motion from manage/page.tsx; replaced admin-glass* CSS classes
  with proper Tailwind throughout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/manage/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useEffect, useCallback } from 'react';
-import { motion } from 'framer-motion';
 import { Lock, Loader2 } from 'lucide-react';
 import ModernAdminDashboard from '@/components/ModernAdminDashboard';
 
@@ -58,7 +57,7 @@ const AdminPage = () => {
   // Check if user is locked out
   const checkLockout = useCallback(() => {
     if (typeof window === 'undefined') return false;
-    
+
     try {
       const lockoutData = localStorage.getItem('admin_lockout');
       if (lockoutData) {
@@ -103,11 +102,11 @@ const AdminPage = () => {
     try {
       const sessionToken = sessionStorage.getItem('admin_session_token');
       if (!sessionToken) {
-        setAuthState(prev => ({ 
-          ...prev, 
-          isAuthenticated: false, 
-          showLogin: true, 
-          isLoading: false 
+        setAuthState(prev => ({
+          ...prev,
+          isAuthenticated: false,
+          showLogin: true,
+          isLoading: false
         }));
         return;
       }
@@ -118,38 +117,38 @@ const AdminPage = () => {
           'Content-Type': 'application/json',
           'X-CSRF-Token': authState.csrfToken
         },
-        body: JSON.stringify({ 
-          sessionToken, 
-          csrfToken: authState.csrfToken 
+        body: JSON.stringify({
+          sessionToken,
+          csrfToken: authState.csrfToken
         })
       });
 
       const data = await response.json();
-      
+
       if (response.ok && data.valid) {
-        setAuthState(prev => ({ 
-          ...prev, 
-          isAuthenticated: true, 
-          showLogin: false, 
-          isLoading: false 
+        setAuthState(prev => ({
+          ...prev,
+          isAuthenticated: true,
+          showLogin: false,
+          isLoading: false
         }));
         sessionStorage.setItem('admin_authenticated', 'true');
       } else {
         sessionStorage.removeItem('admin_authenticated');
         sessionStorage.removeItem('admin_session_token');
-        setAuthState(prev => ({ 
-          ...prev, 
-          isAuthenticated: false, 
-          showLogin: true, 
-          isLoading: false 
+        setAuthState(prev => ({
+          ...prev,
+          isAuthenticated: false,
+          showLogin: true,
+          isLoading: false
         }));
       }
     } catch {
-      setAuthState(prev => ({ 
-        ...prev, 
-        isAuthenticated: false, 
-        showLogin: true, 
-        isLoading: false 
+      setAuthState(prev => ({
+        ...prev,
+        isAuthenticated: false,
+        showLogin: true,
+        isLoading: false
       }));
     }
   }, [authState.csrfToken]);
@@ -158,13 +157,13 @@ const AdminPage = () => {
   useEffect(() => {
     const init = async () => {
       if (checkLockout()) return;
-      
+
       const token = await fetchCSRFToken();
       if (token) {
         setAuthState(prev => ({ ...prev, csrfToken: token }));
       }
     };
-    
+
     init();
   }, [checkLockout, fetchCSRFToken]);
 
@@ -178,7 +177,7 @@ const AdminPage = () => {
   // Handle login form submission
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!authState.password.trim() || authState.isLoading) return;
 
     setAuthState(prev => ({ ...prev, isLoading: true, error: '' }));
@@ -259,10 +258,12 @@ const AdminPage = () => {
   // Loading state
   if (authState.isLoading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-[#faf8f3]">
-        <div className="text-center">
-          <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-[#795548]" />
-          <p className="text-[#5d4037]">Loading...</p>
+      <div className="min-h-screen flex items-center justify-center bg-stone-50 dark:bg-stone-950">
+        <div className="text-center space-y-4">
+          <div className="font-mono text-sm font-black tracking-tighter text-stone-900 dark:text-stone-50">
+            dk<span className="text-red-500">0</span>.dev
+          </div>
+          <Loader2 className="w-5 h-5 animate-spin mx-auto text-emerald-500" />
         </div>
       </div>
     );
@@ -271,26 +272,38 @@ const AdminPage = () => {
   // Lockout state
   if (authState.isLocked) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-[#faf8f3]">
-        <div className="text-center">
-          <div className="w-16 h-16 bg-[#fecaca] rounded-2xl flex items-center justify-center mx-auto mb-6">
-            <Lock className="w-8 h-8 text-[#d84315]" />
+      <div className="min-h-screen flex items-center justify-center bg-stone-50 dark:bg-stone-950 px-6">
+        <div className="w-full max-w-sm">
+          <div className="bg-white dark:bg-stone-900 rounded-[2.5rem] border border-stone-200 dark:border-stone-800 overflow-hidden shadow-2xl">
+            <div className="h-0.5 bg-gradient-to-r from-red-500 via-orange-400 to-red-400" />
+            <div className="p-10 text-center">
+              <div className="w-14 h-14 bg-red-50 dark:bg-red-950/30 rounded-[1.25rem] flex items-center justify-center mx-auto mb-6 border border-red-200 dark:border-red-900">
+                <Lock className="w-6 h-6 text-red-500" />
+              </div>
+              <p className="font-mono text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 mb-4">
+                dk<span className="text-red-500">0</span>.dev · admin
+              </p>
+              <h1 className="text-2xl font-black tracking-tighter uppercase text-stone-900 dark:text-stone-50 mb-2">
+                Account Locked
+              </h1>
+              <p className="text-stone-500 dark:text-stone-400 text-sm leading-relaxed mb-8">
+                Too many failed attempts. Please try again in 15 minutes.
+              </p>
+              <button
+                onClick={() => {
+                  try {
+                    localStorage.removeItem('admin_lockout');
+                  } catch {
+                    // Ignore errors
+                  }
+                  window.location.reload();
+                }}
+                className="px-8 py-3 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-2xl font-black text-xs uppercase tracking-[0.2em] hover:scale-105 active:scale-95 transition-all"
+              >
+                Try Again
+              </button>
+            </div>
           </div>
-          <h2 className="text-2xl font-bold text-[#3e2723] mb-2">Account Locked</h2>
-          <p className="text-[#5d4037]">Too many failed attempts. Please try again in 15 minutes.</p>
-          <button
-            onClick={() => {
-              try {
-                localStorage.removeItem('admin_lockout');
-              } catch {
-                // Ignore errors
-              }
-              window.location.reload();
-            }}
-            className="mt-4 px-6 py-2 bg-[#5d4037] text-[#faf8f3] rounded-xl hover:bg-[#3e2723] transition-colors"
-          >
-            Try Again
-          </button>
         </div>
       </div>
     );
@@ -299,70 +312,84 @@ const AdminPage = () => {
   // Login form
   if (authState.showLogin || !authState.isAuthenticated) {
     return (
-      <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-[#faf8f3] z-0">
-        
-        <motion.div
-          initial={{ opacity: 0, scale: 0.95 }}
-          animate={{ opacity: 1, scale: 1 }}
-          className="w-full max-w-md p-6"
-        >
-          <div className="bg-[#fffcf5] backdrop-blur-xl rounded-3xl p-8 border border-[#d7ccc8] shadow-2xl relative z-10">
-            <div className="text-center mb-8">
-              <div className="w-16 h-16 bg-[#efebe9] rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm border border-[#d7ccc8]">
-                <Lock className="w-6 h-6 text-[#5d4037]" />
-              </div>
-              <h1 className="text-2xl font-bold text-[#3e2723] mb-2 tracking-tight">Admin Access</h1>
-              <p className="text-[#5d4037]">Enter your password to continue</p>
-            </div>
+      <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-stone-50 dark:bg-stone-950 px-6">
+        {/* Liquid ambient blobs */}
+        <div className="absolute inset-0 pointer-events-none overflow-hidden">
+          <div className="absolute top-[5%] left-[5%] w-[50vw] h-[50vw] bg-liquid-mint rounded-full blur-[140px] opacity-20" />
+          <div className="absolute bottom-[5%] right-[5%] w-[40vw] h-[40vw] bg-liquid-purple rounded-full blur-[120px] opacity-15" />
+        </div>
 
-            <form onSubmit={handleLogin} className="space-y-5">
-              <div>
-                <div className="relative">
-                  <input
-                    type={authState.showPassword ? 'text' : 'password'}
-                    value={authState.password}
-                    onChange={(e) => setAuthState(prev => ({ ...prev, password: e.target.value }))}
-                    placeholder="Enter password"
-                    className="w-full px-4 py-3.5 bg-white border border-[#d7ccc8] rounded-xl text-[#3e2723] placeholder:text-[#a1887f] focus:outline-none focus:ring-2 focus:ring-[#bcaaa4] focus:border-[#5d4037] transition-all shadow-sm"
-                    disabled={authState.isLoading}
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setAuthState(prev => ({ ...prev, showPassword: !prev.showPassword }))}
-                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[#a1887f] hover:text-[#5d4037] p-1"
-                  >
-                    {authState.showPassword ? '👁️' : '👁️‍🗨️'}
-                  </button>
+        <div className="relative z-10 w-full max-w-sm animate-[fadeIn_0.4s_ease-out]">
+          <div className="bg-white dark:bg-stone-900 rounded-[2.5rem] border border-stone-200 dark:border-stone-800 overflow-hidden shadow-2xl">
+            <div className="h-0.5 bg-gradient-to-r from-emerald-400 via-sky-400 to-purple-400" />
+
+            <div className="p-10">
+              <div className="text-center mb-8">
+                <p className="font-mono text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 mb-5">
+                  dk<span className="text-red-500">0</span>.dev · admin
+                </p>
+                <div className="w-14 h-14 bg-stone-100 dark:bg-stone-800 rounded-[1.25rem] flex items-center justify-center mx-auto mb-5 border border-stone-200 dark:border-stone-700">
+                  <Lock className="w-6 h-6 text-stone-700 dark:text-stone-300" />
                 </div>
-                {authState.error && (
-                  <motion.p 
-                    initial={{ opacity: 0, y: -5 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    className="mt-2 text-[#d84315] text-sm font-medium flex items-center"
-                  >
-                    <span className="w-1.5 h-1.5 bg-[#d84315] rounded-full mr-2" />
-                    {authState.error}
-                  </motion.p>
-                )}
+                <h1 className="text-3xl font-black tracking-tighter uppercase text-stone-900 dark:text-stone-50 mb-1">
+                  Admin Access
+                </h1>
+                <p className="text-stone-500 dark:text-stone-400 text-sm">
+                  Enter your password to continue
+                </p>
               </div>
 
-              <button
-                type="submit"
-                disabled={authState.isLoading || !authState.password}
-                className="w-full bg-[#5d4037] text-[#faf8f3] py-3.5 px-6 rounded-xl font-semibold text-lg hover:bg-[#3e2723] focus:outline-none focus:ring-2 focus:ring-[#bcaaa4] focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg flex items-center justify-center"
-              >
-                {authState.isLoading ? (
-                  <div className="flex items-center justify-center space-x-2">
-                    <Loader2 className="w-5 h-5 animate-spin" />
-                    <span className="text-[#faf8f3]">Authenticating...</span>
+              <form onSubmit={handleLogin} className="space-y-4">
+                <div>
+                  <div className="relative">
+                    <input
+                      type={authState.showPassword ? 'text' : 'password'}
+                      value={authState.password}
+                      onChange={(e) => setAuthState(prev => ({ ...prev, password: e.target.value }))}
+                      placeholder="Password"
+                      className="w-full px-5 py-4 bg-stone-50 dark:bg-stone-950/50 border border-stone-200 dark:border-stone-700 rounded-2xl text-stone-900 dark:text-stone-50 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-transparent transition-all"
+                      disabled={authState.isLoading}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setAuthState(prev => ({ ...prev, showPassword: !prev.showPassword }))}
+                      className="absolute right-4 top-1/2 -translate-y-1/2 text-stone-400 hover:text-stone-700 dark:hover:text-stone-200 p-1 transition-colors"
+                    >
+                      {authState.showPassword ? '👁️' : '👁️‍🗨️'}
+                    </button>
                   </div>
-                ) : (
-                  <span className="text-[#faf8f3]">Sign In</span>
-                )}
-              </button>
-            </form>
+                  {authState.error && (
+                    <p className="mt-2 text-red-500 text-sm font-medium flex items-center gap-2">
+                      <span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0" />
+                      {authState.error}
+                    </p>
+                  )}
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={authState.isLoading || !authState.password}
+                  className="w-full bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 py-4 rounded-2xl font-black text-xs uppercase tracking-[0.2em] hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 transition-all flex items-center justify-center gap-2"
+                >
+                  {authState.isLoading ? (
+                    <>
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                      Authenticating
+                    </>
+                  ) : (
+                    'Sign In'
+                  )}
+                </button>
+              </form>
+            </div>
           </div>
-        </motion.div>
+
+          {authState.attempts > 0 && (
+            <p className="text-center text-xs text-stone-400 mt-4">
+              {5 - authState.attempts} attempt{5 - authState.attempts !== 1 ? 's' : ''} remaining
+            </p>
+          )}
+        </div>
       </div>
     );
   }
@@ -375,4 +402,4 @@ const AdminPage = () => {
   );
 };
 
-export default AdminPage;
+export default AdminPage;