Spaces:

rnilkyway
/

APIarium

Sleeping

rnilkyway commited on May 24

Commit

19a497d

1 Parent(s): 06c8c6a

feat(admin): unify dashboard + login design with landing/docs theme

Aligns the entire admin surface (auth gate, header, footer, cards,
buttons, /admin/login page) with the visual language already used by
landing.html and docs.html: pure black background with a subtle radial
grid pattern, gray-900 cards on gray-800 borders, Inter + JetBrains
Mono typography, amber accents instead of gradients.

dashboard.html:
- Drop the glassmorphism palette (rgba(17,17,24,.65) blur + radial
amber/blue/emerald glows) for flat gray-900 cards. Old .glass /
.glass-bright / .glass-hover class names are kept as aliases so all
existing JS-injected markup keeps working without changes.
- Rebuild auth gate: smaller logo, white primary button, mono v0.4.0
badge, 'Back to homepage' link.
- Rebuild header: sticky black/80 backdrop-blur (same as landing),
inline nav links instead of pill-group, ADMIN badge, Live indicator
pill, Docs link, sized-down logout button.
- Rebuild footer to match landing/docs: copyright + sync time +
Operational pulse + Home/Docs links.
- Replace gradient buttons with flat amber-500 (bg-amber-500 hover:
bg-amber-400).
- Drop the 4 decorative bg-*-500/5 rounded-full blur-2xl halos.
- text-3xl font-extrabold stats → text-2xl font-semibold.
- Soften rounded-2xl → rounded-xl on all glass cards.
- Map every text-/bg-/border-slate-* to gray-* (103 occurrences) so
the palette stays consistent with landing.html.
- Swap the missing lucide 'pocket' icon for 'inbox'.

index.py:
- /admin/login page rewritten to use the same theme tokens (black bg,
gray-900 card with gray-800 border, Inter font, white primary
button, grid background, back-to-home link). Turnstile widget and
master-key flow unchanged.

Files changed (2) hide show

app/index.py +31 -10
app/templates/dashboard.html +251 -312

app/index.py CHANGED Viewed

@@ -2098,24 +2098,45 @@ async def admin_login_page():
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>APIarium | Admin Login</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
 </head>
-<body class="bg-slate-950 text-slate-100 min-h-screen flex items-center justify-center p-4">
-    <div class="w-full max-w-md">
         <div class="text-center mb-8">
-            <h1 class="text-3xl font-bold">🐝 APIarium</h1>
-            <p class="text-slate-400 mt-2">Admin Login</p>
         </div>
-        <div class="bg-slate-900/50 border border-white/5 rounded-xl p-8">
-            <label class="block text-xs font-mono text-slate-400 uppercase tracking-wider mb-2">Master Key</label>
-            <input type="password" id="master-key" placeholder="Enter master key" class="w-full bg-black/30 border border-white/10 rounded-lg px-4 py-3 text-sm font-mono focus:outline-none focus:border-amber-500/50 mb-4">
             <div id="turnstile-widget" class="flex justify-center mb-4"></div>
-            <div id="login-error" class="text-red-400 text-sm mb-4 hidden"></div>
-            <button id="login-btn" class="w-full bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-black font-semibold px-5 py-3 rounded-lg transition text-sm">
-                Sign in
             </button>
         </div>
     </div>
     <script>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>APIarium | Admin Login</title>
+    <meta name="description" content="APIarium admin console — master key sign-in.">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+    <style>
+        body { background-color: #000; color: #ededed; font-family: 'Inter', sans-serif; }
+        .bg-grid-pattern {
+            background-image: linear-gradient(to right, #ffffff05 1px, transparent 1px),
+                              linear-gradient(to bottom, #ffffff05 1px, transparent 1px);
+            background-size: 40px 40px;
+            mask-image: radial-gradient(circle at center, black, transparent 80%);
+            -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
+        }
+    </style>
 </head>
+<body class="min-h-screen flex items-center justify-center p-4 relative">
+    <div class="absolute inset-0 bg-grid-pattern pointer-events-none z-0"></div>
+    <div class="w-full max-w-md relative z-10">
         <div class="text-center mb-8">
+            <span class="text-5xl" aria-label="APIarium">🐝</span>
+            <h1 class="text-2xl font-semibold tracking-tight mt-3">APIarium Admin</h1>
+            <p class="text-xs font-mono text-gray-500 mt-2 px-2.5 py-0.5 rounded-full border border-gray-800 inline-block">v0.4.0 · Admin Console</p>
         </div>
+        <div class="bg-gray-900 border border-gray-800 rounded-2xl p-8 shadow-2xl">
+            <label class="block text-[10px] font-mono text-gray-500 uppercase tracking-wider mb-2">Master Key</label>
+            <input type="password" id="master-key" placeholder="apiarium_master_..." class="w-full bg-black border border-gray-800 rounded-lg px-4 py-3 text-sm font-mono text-gray-100 focus:outline-none focus:border-amber-500/60 mb-4 placeholder:text-gray-700 transition-colors">
             <div id="turnstile-widget" class="flex justify-center mb-4"></div>
+            <div id="login-error" class="text-red-400 text-sm bg-red-500/10 border border-red-500/30 rounded-lg px-3 py-2 mb-4 hidden font-mono"></div>
+            <button id="login-btn" class="w-full bg-white hover:bg-gray-100 active:scale-[0.99] text-black font-semibold px-5 py-3 rounded-lg transition-all text-sm flex items-center justify-center gap-2">
+                <span>Sign in</span>
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
             </button>
+            <div class="mt-6 pt-5 border-t border-gray-800 text-center">
+                <a href="/" class="text-[10px] font-mono text-gray-500 hover:text-gray-300 transition-colors">← Back to homepage</a>
+            </div>
         </div>
     </div>
     <script>

app/templates/dashboard.html CHANGED Viewed

@@ -3,19 +3,15 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>APIarium | Admin Gateway Console</title>
-    <meta name="description" content="APIarium enterprise admin gateway dashboard — manage IP-bound client keys, dynamic providers, and models routing.">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Chart.js for beautiful analytics -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <!-- Lucide Icons for high-fidelity UI -->
     <script src="https://unpkg.com/lucide@latest"></script>
     <script>
@@ -28,31 +24,12 @@
                         mono: ['JetBrains Mono', 'monospace'],
                     },
                     colors: {
-                        primary: {
-                            50: '#fffbeb',
-                            100: '#fef3c7',
-                            200: '#fde68a',
-                            300: '#fcd34d',
-                            400: '#fbbf24',
-                            500: '#f59e0b',
-                            600: '#d97706',
-                            700: '#b45309',
-                            800: '#92400e',
-                            900: '#78350f'
-                        },
-                        dark: {
-                            950: '#06060a',
-                            900: '#0a0a0f',
-                            800: '#111118',
-                            700: '#1a1a24',
-                            600: '#262636',
-                            500: '#3c3c54'
-                        },
-                    },
-                    boxShadow: {
-                        'amber-glow': '0 0 20px -3px rgba(245, 158, 11, 0.15)',
-                        'emerald-glow': '0 0 20px -3px rgba(16, 185, 129, 0.15)',
-                        'glass-inner': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.05)',
                     }
                 }
             }
@@ -60,197 +37,158 @@
     </script>
     <style>
         body {
-            background-color: #06060a;
-            background-image:
-                radial-gradient(at 10% 5%, rgba(245, 158, 11, 0.07) 0px, transparent 40%),
-                radial-gradient(at 90% 95%, rgba(59, 130, 246, 0.05) 0px, transparent 45%),
-                radial-gradient(at 50% 50%, rgba(16, 185, 129, 0.02) 0px, transparent 50%);
-            background-attachment: fixed;
-            min-height: 100vh;
-        }
-        /* Premium Glassmorphism */
-        .glass {
-            background: rgba(17, 17, 24, 0.65);
-            backdrop-filter: blur(16px);
-            -webkit-backdrop-filter: blur(16px);
-            border: 1px solid rgba(255, 255, 255, 0.06);
-            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.03);
-        }
-        .glass-bright {
-            background: rgba(255, 255, 255, 0.03);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
         }
-        .glass-hover {
-            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        .glass-hover:hover {
-            background: rgba(255, 255, 255, 0.05);
-            border-color: rgba(245, 158, 11, 0.35);
-            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 0 15px -3px rgba(245, 158, 11, 0.08);
-            transform: translateY(-1px);
         }
-        /* Custom Scrollbar */
-        ::-webkit-scrollbar {
-            width: 6px;
-            height: 6px;
         }
-        ::-webkit-scrollbar-track {
-            background: rgba(0, 0, 0, 0.2);
         }
-        ::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 999px;
         }
-        ::-webkit-scrollbar-thumb:hover {
-            background: rgba(245, 158, 11, 0.3);
         }
-        /* Toasts dynamic slider */
         .toast {
-            position: fixed;
-            bottom: 24px;
-            right: 24px;
-            padding: 14px 20px;
-            border-radius: 12px;
-            font-family: 'JetBrains Mono', monospace;
             font-size: 13px;
-            z-index: 9999;
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
             display: flex;
             align-items: center;
             gap: 10px;
-            animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
-            transition: all 0.3s;
-        }
-        @keyframes slideIn {
-            from { transform: translateY(20px) scale(0.95); opacity: 0; }
-            to { transform: translateY(0) scale(1); opacity: 1; }
         }
-        .toast-success {
-            background: rgba(10, 25, 20, 0.95);
-            border: 1px solid rgba(16, 185, 129, 0.3);
-            color: #34d399;
         }
-        .toast-error {
-            background: rgba(30, 15, 15, 0.95);
-            border: 1px solid rgba(239, 68, 68, 0.3);
-            color: #f87171;
         }
-        /* Shimmer effect for status indicators */
-        @keyframes pulse-slow {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.4; }
-        }
-        .animate-pulse-slow {
-            animation: pulse-slow 3s infinite;
-        }
     </style>
 </head>
-<body class="font-sans text-slate-100 antialiased min-h-screen flex flex-col justify-between selection:bg-amber-500/30 selection:text-amber-200">
 <!-- Auth Gate -->
-<div id="auth-gate" class="hidden min-h-screen flex items-center justify-center px-4 py-12 relative z-50">
-    <div class="absolute inset-0 bg-dark-950/40 backdrop-blur-md pointer-events-none"></div>
-    <div class="glass rounded-2xl p-8 max-w-md w-full relative z-10 shadow-2xl border border-white/10">
-        <div class="absolute -top-12 left-1/2 -translate-x-1/2 w-24 h-24 rounded-full bg-amber-500/10 border border-amber-500/20 blur-xl"></div>
         <div class="flex flex-col items-center text-center mb-8">
-            <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center text-3xl shadow-lg shadow-amber-500/20 mb-4 ring-2 ring-amber-400/20">🐝</div>
-            <div>
-                <h1 class="text-2xl font-bold tracking-tight bg-gradient-to-r from-white via-slate-100 to-slate-400 bg-clip-text text-transparent">APIarium Admin</h1>
-                <p class="text-xs text-slate-400 font-mono mt-1 bg-white/5 px-2 py-0.5 rounded-full inline-block">GATEWAY CONSOLE v0.4.0</p>
-            </div>
         </div>
         <div class="space-y-4">
             <div>
-                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 font-mono">Master Security Key</label>
                 <div class="relative">
-                    <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500">
-                        <i data-lucide="key-round" class="w-4 h-4 text-amber-500/60"></i>
                     </span>
                     <input id="master-key-input" type="password" placeholder="apiarium_master_..."
-                        class="w-full bg-black/40 border border-white/10 rounded-xl pl-10 pr-4 py-3 text-slate-100 font-mono text-sm focus:outline-none focus:border-amber-500/60 focus:ring-1 focus:ring-amber-500/30 transition-all placeholder:text-slate-600">
                 </div>
             </div>
-            <button id="auth-btn" class="w-full bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 active:scale-[0.98] text-black font-semibold py-3 rounded-xl transition-all shadow-lg shadow-amber-500/10 flex items-center justify-center gap-2 mt-2">
                 <span>Unlock Dashboard</span>
                 <i data-lucide="unlock" class="w-4 h-4"></i>
             </button>
-            <p id="auth-error" class="text-red-400 text-xs mt-3 text-center bg-red-500/10 border border-red-500/20 py-2.5 px-3 rounded-lg hidden font-mono"></p>
         </div>
-        <div class="mt-8 pt-6 border-t border-white/5 text-center">
-            <span class="text-[10px] font-mono text-slate-500">Enterprise AI Reverse-Proxy Administration</span>
         </div>
     </div>
 </div>
 <!-- Dashboard Container -->
-<div id="dashboard" class="hidden flex-1 flex flex-col">
-    <!-- Top Glow Line -->
-    <div class="h-[2px] w-full bg-gradient-to-r from-amber-500/50 via-amber-400 to-indigo-500/30"></div>
     <!-- Header Navigation -->
-    <header class="sticky top-0 z-40 glass border-b border-white/5">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex items-center justify-between h-16">
-                <!-- Brand Signature -->
-                <div class="flex items-center gap-3">
-                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center text-xl shadow-md shadow-amber-500/10">🐝</div>
-                    <div>
-                        <div class="flex items-center gap-2">
-                            <span class="font-bold text-slate-100 tracking-tight text-lg">APIarium</span>
-                            <span class="text-[10px] font-mono bg-amber-500/10 border border-amber-500/20 text-amber-400 px-1.5 py-0.2 rounded-md">GATEWAY</span>
-                        </div>
-                        <p class="text-[10px] text-slate-500 font-mono tracking-wider uppercase">Enterprise Admin panel</p>
-                    </div>
-                </div>
-                <!-- Live Router Status Indicator -->
-                <div class="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/5 border border-emerald-500/15 text-emerald-400 text-xs font-mono">
-                    <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse-slow"></span>
-                    <span>Router: Live</span>
                 </div>
-                <!-- Navigation Tabs & Actions -->
-                <nav class="flex items-center gap-2 sm:gap-4">
-                    <div class="flex items-center gap-1 sm:gap-2 bg-black/25 p-1 rounded-xl border border-white/5">
-                        <a href="#stats" class="text-xs font-medium text-slate-300 hover:text-white px-2.5 sm:px-3 py-1.5 rounded-lg hover:bg-white/5 transition flex items-center gap-1.5">
-                            <i data-lucide="bar-chart-3" class="w-3.5 h-3.5 text-amber-500"></i>
-                            <span class="hidden md:inline">Analytics</span>
-                        </a>
-                        <a href="#providers" class="text-xs font-medium text-slate-300 hover:text-white px-2.5 sm:px-3 py-1.5 rounded-lg hover:bg-white/5 transition flex items-center gap-1.5">
-                            <i data-lucide="cpu" class="w-3.5 h-3.5 text-slate-400"></i>
-                            <span class="hidden md:inline">Providers</span>
-                        </a>
-                        <a href="#models" class="text-xs font-medium text-slate-300 hover:text-white px-2.5 sm:px-3 py-1.5 rounded-lg hover:bg-white/5 transition flex items-center gap-1.5">
-                            <i data-lucide="layers" class="w-3.5 h-3.5 text-slate-400"></i>
-                            <span class="hidden md:inline">Models</span>
-                        </a>
-                        <a href="#generator" class="text-xs font-medium text-slate-300 hover:text-white px-2.5 sm:px-3 py-1.5 rounded-lg hover:bg-white/5 transition flex items-center gap-1.5">
-                            <i data-lucide="key" class="w-3.5 h-3.5 text-slate-400"></i>
-                            <span class="hidden md:inline">API Keys</span>
-                        </a>
-                    </div>
-                    <!-- Power Logout Button -->
-                    <button id="logout-btn" class="flex items-center gap-1.5 bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20 px-3 py-1.5 rounded-xl text-xs font-mono transition">
-                        <i data-lucide="log-out" class="w-3.5 h-3.5"></i>
-                        <span class="hidden sm:inline">Logout</span>
-                    </button>
-                </nav>
             </div>
         </div>
     </header>
@@ -266,9 +204,9 @@
                         <i data-lucide="gauge" class="text-amber-500 w-5 h-5"></i>
                         Gateway Overview
                     </h2>
-                    <p class="text-sm text-slate-400">Real-time usage analytics, rate metrics, and authenticated keys.</p>
                 </div>
-                <div class="text-xs font-mono text-slate-500 flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-lg border border-white/5">
                     <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
                     <span>Sync State: Active</span>
                 </div>
@@ -277,50 +215,47 @@
             <!-- Stats KPI Cards -->
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                 <!-- Card 1: Unique Client IPs -->
-                <div class="glass rounded-2xl p-5 relative overflow-hidden flex flex-col justify-between">
-                    <div class="absolute top-0 right-0 w-24 h-24 bg-amber-500/5 rounded-full blur-2xl"></div>
                     <div class="flex items-center justify-between mb-4">
-                        <span class="text-xs font-mono uppercase tracking-wider text-slate-400">Unique Clients</span>
                         <div class="p-2 bg-amber-500/10 text-amber-400 rounded-lg">
                             <i data-lucide="users" class="w-4 h-4"></i>
                         </div>
                     </div>
                     <div>
-                        <h3 id="stat-active" class="text-3xl font-extrabold text-white font-mono tracking-tight">—</h3>
-                        <p class="text-[11px] text-slate-500 mt-2 flex items-center gap-1">
                             <i data-lucide="network" class="w-3.5 h-3.5 text-amber-500/60"></i> Active IP-bound keys in routing table
                         </p>
                     </div>
                 </div>
                 <!-- Card 2: Total API Keys -->
-                <div class="glass rounded-2xl p-5 relative overflow-hidden flex flex-col justify-between">
-                    <div class="absolute top-0 right-0 w-24 h-24 bg-blue-500/5 rounded-full blur-2xl"></div>
                     <div class="flex items-center justify-between mb-4">
-                        <span class="text-xs font-mono uppercase tracking-wider text-slate-400">Total Keycards</span>
                         <div class="p-2 bg-blue-500/10 text-blue-400 rounded-lg">
                             <i data-lucide="key-round" class="w-4 h-4"></i>
                         </div>
                     </div>
                     <div>
-                        <h3 id="stat-total" class="text-3xl font-extrabold text-white font-mono tracking-tight">—</h3>
-                        <p class="text-[11px] text-slate-500 mt-2 flex items-center gap-1">
                             <i data-lucide="check-circle" class="w-3.5 h-3.5 text-blue-500/60"></i> Provisioned reverse-proxy credentials
                         </p>
                     </div>
                 </div>
                 <!-- Card 3: Total Requests routed -->
-                <div class="glass rounded-2xl p-5 relative overflow-hidden flex flex-col justify-between">
-                    <div class="absolute top-0 right-0 w-24 h-24 bg-emerald-500/5 rounded-full blur-2xl"></div>
                     <div class="flex items-center justify-between mb-4">
-                        <span class="text-xs font-mono uppercase tracking-wider text-slate-400">Total API Requests</span>
                         <div class="p-2 bg-emerald-500/10 text-emerald-400 rounded-lg">
                             <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
                         </div>
                     </div>
                     <div>
-                        <h3 id="stat-requests" class="text-3xl font-extrabold text-white font-mono tracking-tight">0</h3>
                         <p class="text-[11px] text-emerald-400/80 mt-2 flex items-center gap-1">
                             <span class="inline-block w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                             Incoming calls intercepted by proxy
@@ -329,16 +264,15 @@
                 </div>
                 <!-- Card 4: Rate Limited attempts -->
-                <div class="glass rounded-2xl p-5 relative overflow-hidden flex flex-col justify-between">
-                    <div class="absolute top-0 right-0 w-24 h-24 bg-red-500/5 rounded-full blur-2xl"></div>
                     <div class="flex items-center justify-between mb-4">
-                        <span class="text-xs font-mono uppercase tracking-wider text-slate-400">Rate Limited</span>
                         <div class="p-2 bg-red-500/10 text-red-400 rounded-lg">
                             <i data-lucide="shield-alert" class="w-4 h-4"></i>
                         </div>
                     </div>
                     <div>
-                        <h3 id="stat-ratelimited" class="text-3xl font-extrabold text-white font-mono tracking-tight">0</h3>
                         <p class="text-[11px] text-red-400/80 mt-2 flex items-center gap-1">
                             <i data-lucide="alert-octagon" class="w-3.5 h-3.5 text-red-400/60"></i> Unauthorized or rate-limited requests
                         </p>
@@ -349,13 +283,13 @@
             <!-- ANALYTICS CHARTS PANEL -->
             <div id="charts" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                 <!-- Chart 1: Request Load over 7 Days -->
-                <div class="glass rounded-2xl p-6 lg:col-span-2 space-y-4">
                     <div class="flex items-center justify-between">
-                        <h3 class="text-sm font-semibold text-slate-200 tracking-tight flex items-center gap-2">
                             <i data-lucide="activity" class="w-4 h-4 text-amber-500"></i>
                             Traffic Load Analysis
                         </h3>
-                        <span class="text-[10px] font-mono text-slate-500 bg-white/5 px-2 py-0.5 rounded">7-day timeline</span>
                     </div>
                     <div class="relative min-h-[220px] flex items-center justify-center">
                         <canvas id="chart-requests" class="max-h-[260px]"></canvas>
@@ -363,13 +297,13 @@
                 </div>
                 <!-- Chart 2: Popular Models Routing share -->
-                <div class="glass rounded-2xl p-6 space-y-4">
                     <div class="flex items-center justify-between">
-                        <h3 class="text-sm font-semibold text-slate-200 tracking-tight flex items-center gap-2">
                             <i data-lucide="pie-chart" class="w-4 h-4 text-indigo-400"></i>
                             Models Routing Share
                         </h3>
-                        <span class="text-[10px] font-mono text-slate-500 bg-white/5 px-2 py-0.5 rounded font-mono">Real-time</span>
                     </div>
                     <div class="relative min-h-[220px] flex items-center justify-center">
                         <canvas id="chart-models" class="max-h-[260px]"></canvas>
@@ -386,7 +320,7 @@
                         <i data-lucide="cpu" class="text-amber-500 w-5 h-5"></i>
                         Dynamic Providers
                     </h2>
-                    <p class="text-sm text-slate-400">Plug external API end-points instantly. Automatically probe and extract upstream model paths.</p>
                 </div>
                 <div class="text-xs font-mono text-amber-500 flex items-center gap-1.5 bg-amber-500/10 border border-amber-500/20 px-3 py-1 rounded-lg">
                     <i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
@@ -396,23 +330,23 @@
             <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
                 <!-- Add Provider form card -->
-                <div class="glass rounded-2xl p-6 lg:col-span-5 space-y-4 border border-white/10 shadow-amber-glow">
                     <div class="flex items-center gap-2 border-b border-white/5 pb-3">
                         <div class="p-1.5 bg-amber-500/10 text-amber-400 rounded-lg">
                             <i data-lucide="plus-circle" class="w-4 h-4"></i>
                         </div>
-                        <h3 class="text-sm font-semibold text-slate-200">Register New Upstream AI Provider</h3>
                     </div>
                     <div class="space-y-3.5">
                         <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
                             <div>
-                                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono">Provider Name</label>
                                 <input id="prov-name" type="text" placeholder="e.g. DeepBricks"
-                                    class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-slate-100 font-sans text-sm focus:outline-none focus:border-amber-500/60 transition-all">
                             </div>
                             <div>
-                                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono flex items-center gap-1.5">
                                     Prefix
                                     <span class="text-[9px] font-mono text-amber-400/80 bg-amber-500/10 border border-amber-500/20 px-1.5 py-0.5 rounded">{prefix}/model</span>
                                 </label>
@@ -421,23 +355,23 @@
                             </div>
                         </div>
                         <div>
-                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono">Upstream Endpoint URL</label>
                             <input id="prov-url" type="url" placeholder="https://api.yourprovider.com/v1"
-                                class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-slate-100 font-mono text-xs focus:outline-none focus:border-amber-500/60 transition-all">
                         </div>
                         <div>
-                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono">Bearer Access Keys (one per line)</label>
                             <textarea id="prov-keys" rows="3" placeholder="sk-provider-..."
-                                class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-slate-100 font-mono text-xs focus:outline-none focus:border-amber-500/60 transition-all resize-none"></textarea>
                         </div>
                         <!-- Step 1: Discover Models -->
                         <div class="flex gap-2 pt-2">
-                            <button id="prov-preview-btn" class="flex-1 bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-black text-xs font-bold py-2.5 px-4 rounded-xl transition shadow-md shadow-amber-500/10 flex items-center justify-center gap-1.5">
                                 <i data-lucide="stethoscope" class="w-3.5 h-3.5"></i>
                                 <span>Discover Models</span>
                             </button>
-                            <button id="prov-reset-btn" class="bg-white/5 hover:bg-white/10 text-slate-300 text-xs font-semibold py-2.5 px-3 rounded-xl transition border border-white/10 flex items-center justify-center" title="Reset form">
                                 <i data-lucide="rotate-ccw" class="w-3.5 h-3.5"></i>
                             </button>
                         </div>
@@ -448,14 +382,14 @@
                 </div>
                 <!-- Step 2: Model Selection + Alias Editor (full width when active) -->
-                <div id="prov-selector" class="hidden lg:col-span-12 glass rounded-2xl p-6 space-y-4 border border-amber-500/20 shadow-amber-glow">
                     <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-white/5 pb-3">
                         <div>
                             <h3 class="text-sm font-semibold text-amber-300 flex items-center gap-2">
                                 <i data-lucide="list-checks" class="w-4 h-4"></i>
                                 Step 2 — Choose & Alias Models
                             </h3>
-                            <p class="text-[11px] text-slate-400 mt-1">Tick the models you want to expose. Edit the right column to set custom IDs. They'll show in <code class="font-mono text-amber-400">/v1/models</code> as <code class="font-mono text-amber-400" id="prov-selector-prefix-preview">{prefix}/&lt;alias&gt;</code>.</p>
                         </div>
                         <div class="flex items-center gap-2">
                             <span id="prov-selected-count" class="text-xs font-mono text-amber-400 bg-amber-500/10 border border-amber-500/20 px-2.5 py-1 rounded-full">0 / 0 selected</span>
@@ -464,27 +398,27 @@
                     <div class="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
                         <div class="relative flex-1">
-                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">
                                 <i data-lucide="search" class="w-4 h-4"></i>
                             </span>
                             <input id="prov-selector-search" type="text" placeholder="Filter models..."
-                                class="w-full bg-black/40 border border-white/10 rounded-xl pl-9 pr-4 py-2 text-xs text-slate-100 font-mono focus:outline-none focus:border-amber-500/50 transition-all">
                         </div>
                         <div class="flex gap-2 text-[11px] font-mono">
-                            <button id="prov-select-all" class="bg-white/5 hover:bg-white/10 text-slate-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1">
                                 <i data-lucide="check-square" class="w-3 h-3"></i> All
                             </button>
-                            <button id="prov-select-none" class="bg-white/5 hover:bg-white/10 text-slate-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1">
                                 <i data-lucide="square" class="w-3 h-3"></i> None
                             </button>
-                            <button id="prov-reset-aliases" class="bg-white/5 hover:bg-white/10 text-slate-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1" title="Reset aliases to upstream id">
                                 <i data-lucide="undo-2" class="w-3 h-3"></i> Reset
                             </button>
                         </div>
                     </div>
                     <!-- Table header -->
-                    <div class="grid grid-cols-12 gap-3 text-[10px] uppercase font-mono text-slate-500 px-3">
                         <div class="col-span-1"></div>
                         <div class="col-span-5">Upstream Model ID</div>
                         <div class="col-span-6">Exposed Alias <span class="text-amber-400/70">(editable)</span></div>
@@ -495,11 +429,11 @@
                     </div>
                     <div class="flex flex-col sm:flex-row gap-2 pt-3 border-t border-white/5">
-                        <button id="prov-cancel-import" class="flex-1 sm:flex-none bg-white/5 hover:bg-white/10 text-slate-300 text-xs font-semibold py-2.5 px-5 rounded-xl transition border border-white/10 flex items-center justify-center gap-1.5">
                             <i data-lucide="x" class="w-3.5 h-3.5"></i>
                             <span>Cancel</span>
                         </button>
-                        <button id="prov-import-btn" class="flex-1 bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-400 hover:to-emerald-500 text-black text-xs font-bold py-2.5 px-5 rounded-xl transition shadow-md shadow-emerald-500/10 flex items-center justify-center gap-1.5">
                             <i data-lucide="import" class="w-3.5 h-3.5"></i>
                             <span>Import Selected Models</span>
                         </button>
@@ -509,7 +443,7 @@
                 <!-- Existing active dynamic upstreams -->
                 <div class="lg:col-span-7 space-y-4">
                     <div class="flex items-center justify-between border-b border-white/5 pb-3">
-                        <h3 class="text-sm font-semibold text-slate-200 flex items-center gap-2">
                             <i data-lucide="server" class="w-4 h-4 text-emerald-400"></i>
                             Configured Upstream Targets
                         </h3>
@@ -517,8 +451,8 @@
                     <div id="providers-list" class="space-y-3 max-h-[460px] overflow-y-auto pr-1">
                         <!-- Dynamic providers list gets injected here -->
-                        <div class="flex flex-col items-center justify-center py-12 text-center text-slate-500 glass rounded-2xl border border-dashed border-white/10">
-                            <i data-lucide="database" class="w-8 h-8 mb-2 text-slate-600"></i>
                             <span class="text-xs font-mono">No active dynamic provider targets</span>
                         </div>
                     </div>
@@ -534,29 +468,29 @@
                         <i data-lucide="layers" class="text-indigo-400 w-5 h-5"></i>
                         Unified Model Catalog
                     </h2>
-                    <p class="text-sm text-slate-400">Click models to copy names instantly. Routes are automatically clustered by provider backends.</p>
                 </div>
                 <div class="relative w-full sm:w-64">
-                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">
-                        <i data-lucide="search" class="w-4 h-4 text-slate-500"></i>
                     </span>
                     <input id="models-search" type="text" placeholder="Filter unified models..."
-                        class="w-full bg-black/40 border border-white/10 rounded-xl pl-9 pr-4 py-2 text-xs text-slate-100 font-mono focus:outline-none focus:border-indigo-500/50 transition-all">
                 </div>
             </div>
-            <div class="glass rounded-2xl p-6">
                 <div class="flex items-center justify-between mb-4 pb-3 border-b border-white/5">
                     <div class="flex items-center gap-2">
                         <span id="models-count" class="text-xs font-mono bg-indigo-500/15 border border-indigo-500/25 text-indigo-300 px-2.5 py-1 rounded-full">0 models</span>
-                        <span class="text-xs text-slate-500 font-mono">available through local proxy endpoints</span>
                     </div>
                 </div>
                 <!-- Unified Grid of Route Models -->
                 <div id="models-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3.5 max-h-[380px] overflow-y-auto pr-1">
                     <!-- Loaded dynamically -->
-                    <div class="col-span-full py-12 flex flex-col items-center justify-center text-center text-slate-500">
                         <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-amber-500 mb-2"></div>
                         <span class="text-xs font-mono">Indexing models routes...</span>
                     </div>
@@ -572,35 +506,35 @@
                         <i data-lucide="shield-check" class="text-amber-500 w-5 h-5"></i>
                         IP-Bound API Keys
                     </h2>
-                    <p class="text-sm text-slate-400">Strict IP validation logic on all reverse-proxy requests. Set labels to keep track of organizational nodes.</p>
                 </div>
             </div>
             <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
                 <!-- KEY GENERATION COMPONENT -->
-                <div class="glass rounded-2xl p-6 lg:col-span-4 space-y-4 border border-white/10 shadow-amber-glow">
                     <div class="flex items-center gap-2 border-b border-white/5 pb-3">
                         <div class="p-1.5 bg-amber-500/10 text-amber-400 rounded-lg">
                             <i data-lucide="key-round" class="w-4 h-4"></i>
                         </div>
-                        <h3 class="text-sm font-semibold text-slate-200">Generate Client Key</h3>
                     </div>
                     <form id="key-form" class="space-y-4">
                         <div>
-                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono">Bound IP Address</label>
                             <input id="ip-input" type="text" required placeholder="e.g. 192.168.1.50 or ::1"
-                                class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-slate-100 font-mono text-xs focus:outline-none focus:border-amber-500/60 transition-all">
                             <p id="ip-error" class="text-red-400 text-[11px] font-mono mt-1 hidden"></p>
                         </div>
                         <div>
-                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono">Descriptive Client Label</label>
                             <input id="label-input" type="text" placeholder="e.g. Staging server, Analytics engine"
-                                class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-slate-100 font-sans text-sm focus:outline-none focus:border-amber-500/60 transition-all">
                         </div>
-                        <button id="gen-btn" type="submit" class="w-full bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-black font-bold py-2.5 rounded-xl transition-all shadow-md shadow-amber-500/10 flex items-center justify-center gap-1.5">
                             <i data-lucide="plus-circle" class="w-4 h-4"></i>
                             <span>Generate Route Key</span>
                         </button>
@@ -614,16 +548,16 @@
                         </div>
                         <div class="space-y-1.5">
                             <div class="flex items-center justify-between gap-2">
-                                <span class="text-[10px] text-slate-500 font-mono">KEY:</span>
                                 <span id="result-key" class="font-mono text-xs text-amber-200 select-all break-all text-right"></span>
                             </div>
                             <div class="flex items-center justify-between">
-                                <span class="text-[10px] text-slate-500 font-mono">BOUND TO:</span>
-                                <span id="result-ip" class="font-mono text-xs text-slate-300"></span>
                             </div>
                             <div class="flex items-center justify-between">
-                                <span class="text-[10px] text-slate-500 font-mono">LABEL:</span>
-                                <span id="result-label" class="font-sans text-xs text-slate-300"></span>
                             </div>
                         </div>
                         <button id="copy-key-btn" class="w-full bg-white/5 hover:bg-white/10 text-white text-xs font-semibold py-1.5 rounded border border-white/5 transition flex items-center justify-center gap-1">
@@ -634,19 +568,19 @@
                 </div>
                 <!-- TABLE OF CURRENT KEYS -->
-                <div class="lg:col-span-8 glass rounded-2xl p-6 space-y-4">
                     <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-white/5 pb-3">
-                        <h3 class="text-sm font-semibold text-slate-200 flex items-center gap-2">
                             <i data-lucide="table" class="w-4 h-4 text-amber-400"></i>
                             IP Routing Table Keys
                         </h3>
                         <div class="relative w-full sm:w-56">
-                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">
-                                <i data-lucide="filter" class="w-3.5 h-3.5 text-slate-500"></i>
                             </span>
                             <input id="search-input" type="text" placeholder="Filter keys by IP/Label..."
-                                class="w-full bg-black/40 border border-white/10 rounded-xl pl-9 pr-4 py-1.5 text-xs text-slate-100 font-mono focus:outline-none focus:border-amber-500/50 transition-all">
                         </div>
                     </div>
@@ -654,7 +588,7 @@
                     <div class="overflow-x-auto">
                         <table class="w-full text-left text-xs min-w-[640px]">
                             <thead>
-                                <tr class="text-slate-400 font-mono border-b border-white/5 uppercase text-[10px] tracking-wider">
                                     <th class="pb-3.5 pr-4 font-semibold">Client Key Auth</th>
                                     <th class="pb-3.5 pr-4 font-semibold">Ip Binding</th>
                                     <th class="pb-3.5 pr-4 font-semibold">Description Label</th>
@@ -670,10 +604,10 @@
                     </div>
                     <!-- Empty placeholder state -->
-                    <div id="empty-state" class="hidden flex flex-col items-center justify-center py-16 text-center text-slate-500">
-                        <i data-lucide="pocket" class="w-10 h-10 mb-2 text-slate-600 animate-bounce"></i>
-                        <h4 class="text-sm font-semibold text-slate-400">No Authorized IP-Bound Keys</h4>
-                        <p class="text-xs text-slate-500 max-w-xs mt-1">Generate your first IP-bound route configuration using the key generator panel on the left.</p>
                     </div>
                 </div>
@@ -683,16 +617,21 @@
     </main>
     <!-- Footer Area -->
-    <footer class="border-t border-white/5 mt-auto bg-black/20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-slate-500 font-mono">
-            <div class="flex items-center gap-2">
-                <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
-                <span>APIarium Enterprise Reverse Proxy Server Engine</span>
             </div>
-            <div class="flex items-center gap-4">
-                <span id="sync-status">Last synchronized: <span id="last-sync" class="text-amber-400">—</span></span>
-                <span>·</span>
-                <span>System status: <span class="text-emerald-400">Operational</span></span>
             </div>
         </div>
     </footer>
@@ -794,7 +733,7 @@
         // Visual loading state
         authBtn.disabled = true;
-        authBtn.innerHTML = `<span>Unlocking Console...</span> <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-slate-900"></div>`;
         try {
             const r = await fetch('/admin/keys', { headers: { 'Authorization': 'Bearer ' + val } });
@@ -964,22 +903,22 @@
         tbody.innerHTML = filtered.map(k => `
             <tr class="hover:bg-white/[0.02] transition border-b border-white/[0.03]">
                 <td class="py-3.5 pr-4 font-mono text-xs text-amber-300 select-all font-semibold tracking-wide">${maskKey(k.key)}</td>
-                <td class="py-3.5 pr-4 font-mono text-xs text-slate-300">
                     <span class="bg-black/35 px-2 py-1 rounded border border-white/5">${k.ip || '—'}</span>
                 </td>
-                <td class="py-3.5 pr-4 text-slate-300 font-medium">${k.label || '<span class="text-slate-600 font-mono text-xs">NO_LABEL</span>'}</td>
-                <td class="py-3.5 pr-4 text-[11px] font-mono text-slate-400">${formatDate(k.created_at)}</td>
                 <td class="py-3.5 pr-4">
                     <span class="text-[10px] font-mono px-2.5 py-1 rounded-full ${k.status === 'active' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-red-500/10 text-red-400 border border-red-500/20'}">
                         ${(k.status || 'active').toUpperCase()}
                     </span>
                 </td>
                 <td class="py-3.5 text-right flex justify-end gap-2">
-                    <button onclick="window.__copyKey('${k.key}')" class="text-[11px] font-mono text-slate-300 hover:text-amber-400 px-2.5 py-1 rounded-lg bg-white/5 hover:bg-white/10 border border-white/5 transition flex items-center gap-1">
                         <i data-lucide="clipboard" class="w-3 h-3"></i> COPY
                     </button>
                     ${k.status !== 'revoked' ? `
-                    <button onclick="window.__revokeKey('${k.key}')" class="text-[11px] font-mono text-red-400/80 hover:text-red-400 px-2.5 py-1 rounded-lg bg-red-500/5 hover:bg-red-500/15 border border-red-500/10 transition flex items-center gap-1">
                         <i data-lucide="trash-2" class="w-3 h-3"></i> REVOKE
                     </button>` : ''}
                 </td>
@@ -1056,7 +995,7 @@
         const btn = $('gen-btn');
         btn.disabled = true;
-        btn.innerHTML = `<span>Provisioning Key...</span> <div class="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-slate-900"></div>`;
         try {
             const r = await api('/admin/keys', { method: 'POST', body: JSON.stringify({ ip, label }) });
@@ -1251,7 +1190,7 @@
         const items = selectorState.available
             .filter(id => !q || id.toLowerCase().includes(q));
         if (items.length === 0) {
-            list.innerHTML = `<div class="text-center text-slate-500 text-xs font-mono py-8">No models match this filter.</div>`;
             return;
         }
         const prefix = (($('prov-prefix') || {}).value || '').trim();
@@ -1270,7 +1209,7 @@
                     </label>
                 </div>
                 <div class="col-span-5 min-w-0">
-                    <div class="font-mono text-[11px] text-slate-200 truncate" title="${escapeAttr(id)}">${escapeHtml(id)}</div>
                 </div>
                 <div class="col-span-6">
                     <div class="flex items-center gap-2">
@@ -1280,7 +1219,7 @@
                             data-upstream="${escapeAttr(id)}"
                             ${isSel ? '' : 'disabled'}
                             placeholder="alias">
-                        <span class="text-[10px] font-mono text-slate-500 truncate flex-shrink-0 min-w-0" title="${escapeAttr(full)}">→ ${escapeHtml(full)}</span>
                     </div>
                 </div>
             </div>`;
@@ -1356,8 +1295,8 @@
         if (!list) return;
         if (providers.length === 0) {
             list.innerHTML = `
-                <div class="flex flex-col items-center justify-center py-10 text-center text-slate-500 bg-black/25 rounded-2xl border border-dashed border-white/5">
-                    <i data-lucide="help-circle" class="w-8 h-8 mb-2 text-slate-600"></i>
                     <span class="text-xs font-mono">No dynamically registered upstreams</span>
                 </div>`;
             lucide.createIcons();
@@ -1377,18 +1316,18 @@
             const moreCount = Math.max(0, richModels.length - 6);
             const prefixBadge = prefix
                 ? `<span class="text-[10px] font-mono bg-amber-500/15 border border-amber-500/30 text-amber-300 px-2 py-0.5 rounded-md tracking-wider">${escapeHtml(prefix)}/</span>`
-                : `<span class="text-[10px] font-mono bg-slate-500/10 border border-slate-500/20 text-slate-400 px-2 py-0.5 rounded-md">no prefix</span>`;
             return `
             <div class="bg-gradient-to-br from-black/45 to-black/25 rounded-2xl p-4 border border-white/5 hover:border-amber-500/25 transition-all group">
                 <div class="flex items-start justify-between gap-3">
                     <div class="flex-1 min-w-0">
                         <div class="flex items-center gap-2 flex-wrap">
-                            <span class="font-bold text-slate-100 text-sm tracking-tight">${escapeHtml(p.name)}</span>
                             ${prefixBadge}
-                            <span class="text-[9px] font-mono bg-white/5 border border-white/10 text-slate-400 px-1.5 py-0.5 rounded">${escapeHtml(p.id)}</span>
                         </div>
-                        <div class="text-[11px] text-slate-400 font-mono mt-1.5 truncate flex items-center gap-1.5">
-                            <i data-lucide="link-2" class="w-3 h-3 text-slate-500"></i>
                             <span class="truncate">${escapeHtml(p.base_url)}</span>
                         </div>
                     </div>
@@ -1396,20 +1335,20 @@
                         <button onclick="window.__editProvider('${escapeAttr(p.id)}')" class="text-amber-300/80 hover:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-500/20 text-[10px] font-mono font-bold px-2.5 py-1.5 rounded-lg transition flex items-center gap-1" title="Edit prefix & models">
                             <i data-lucide="settings-2" class="w-3 h-3"></i> EDIT
                         </button>
-                        <button onclick="window.__deleteProvider('${escapeAttr(p.id)}')" class="text-red-400/80 hover:text-red-400 bg-red-500/5 hover:bg-red-500/15 border border-red-500/20 text-[10px] font-mono font-bold px-2.5 py-1.5 rounded-lg transition flex items-center gap-1">
                             <i data-lucide="trash-2" class="w-3 h-3"></i> DEL
                         </button>
                     </div>
                 </div>
-                <div class="flex flex-wrap gap-3 mt-3 text-[11px] text-slate-500 font-mono">
                     <span class="flex items-center gap-1"><i data-lucide="key-round" class="w-3 h-3"></i> ${p.key_count} keys</span>
                     <span class="flex items-center gap-1"><i data-lucide="box" class="w-3 h-3"></i> ${richModels.length} exposed</span>
-                    <span class="flex items-center gap-1 text-slate-600"><i data-lucide="database" class="w-3 h-3"></i> ${(p.available_models || []).length} available upstream</span>
                 </div>
                 ${richModels.length > 0 ? `
                 <div class="mt-3 pt-3 border-t border-white/5 flex flex-wrap gap-1.5">
                     ${previewChips}
-                    ${moreCount > 0 ? `<span class="text-[10px] font-mono text-slate-500 px-2 py-0.5">+${moreCount} more</span>` : ''}
                 </div>` : ''}
             </div>`;
         }).join('');
@@ -1455,7 +1394,7 @@
         btn.innerHTML = `<div class="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-black"></div><span>Discovering...</span>`;
         status.classList.remove('hidden');
         status.textContent = 'Probing upstream /models endpoint...';
-        status.className = 'text-xs font-mono text-slate-400 bg-white/5 px-2.5 py-1.5 rounded-lg border border-white/10';
         let discovered = [];
         try {
@@ -1612,7 +1551,7 @@
         const q = (editState.filter || '').toLowerCase();
         const items = editState.available.filter(id => !q || id.toLowerCase().includes(q));
         if (items.length === 0) {
-            list.innerHTML = `<div class="text-center text-slate-500 text-xs font-mono py-8">No models match this filter.</div>`;
             return;
         }
         list.innerHTML = items.map(id => {
@@ -1630,7 +1569,7 @@
                     </label>
                 </div>
                 <div class="col-span-5 min-w-0">
-                    <div class="font-mono text-[11px] text-slate-200 truncate" title="${escapeAttr(id)}">${escapeHtml(id)}</div>
                 </div>
                 <div class="col-span-6">
                     <div class="flex items-center gap-2">
@@ -1639,7 +1578,7 @@
                             value="${escapeAttr(alias)}"
                             data-upstream="${escapeAttr(id)}"
                             ${isSel ? '' : 'disabled'}>
-                        <span class="text-[10px] font-mono text-slate-500 truncate flex-shrink-0 min-w-0" title="${escapeAttr(full)}">→ ${escapeHtml(full)}</span>
                     </div>
                 </div>
             </div>`;
@@ -1817,7 +1756,7 @@
         if (filtered.length === 0) {
             grid.innerHTML = `
-                <div class="col-span-full py-10 text-center text-slate-500 bg-black/20 rounded-xl border border-dashed border-white/5 font-mono text-xs">
                     No registered proxy model routes matched query filters.
                 </div>`;
             return;
@@ -1827,15 +1766,15 @@
             <div class="bg-black/45 border border-white/5 hover:border-amber-500/30 rounded-xl p-3.5 transition-all duration-200 cursor-pointer group shadow-glass-inner"
                  onclick="window.__copyModelId('${escapeHtml(m.name)}')">
                 <div class="flex items-start justify-between gap-2">
-                    <span class="font-mono text-xs text-slate-200 break-all select-all group-hover:text-amber-300 font-semibold transition-colors duration-150">${escapeHtml(m.name || m.id)}</span>
                     ${m.upstreams > 1 ? `<span class="text-[9px] font-mono font-bold text-amber-400 bg-amber-500/15 border border-amber-500/20 px-1.5 py-0.5 rounded flex-shrink-0">x${m.upstreams} nodes</span>` : ''}
                 </div>
                 <div class="mt-3 flex items-center justify-between">
                     <div class="flex items-center gap-1.5">
                         <span class="w-1.5 h-1.5 rounded-full ${m.provider === 'built-in' ? 'bg-amber-400' : m.provider === 'image-backend' ? 'bg-indigo-400' : 'bg-emerald-400'}"></span>
-                        <span class="text-[10px] font-mono text-slate-400 truncate max-w-[120px]">${escapeHtml(m.provider)}</span>
                     </div>
-                    <span class="text-[9px] font-mono text-slate-500 group-hover:text-amber-400 transition-colors flex items-center gap-1">
                         <i data-lucide="copy" class="w-3 h-3"></i> COPY
                     </span>
                 </div>
@@ -1872,11 +1811,11 @@
                     <i data-lucide="settings-2" class="w-4 h-4"></i>
                 </div>
                 <div class="min-w-0">
-                    <h3 id="edit-prov-modal-title" class="font-bold text-slate-100 truncate">Edit Provider</h3>
-                    <p class="text-[11px] text-slate-400 font-mono">Update prefix, model selection, and aliases</p>
                 </div>
             </div>
-            <button id="edit-prov-close" class="text-slate-400 hover:text-slate-100 bg-white/5 hover:bg-white/10 rounded-lg p-1.5 transition">
                 <i data-lucide="x" class="w-4 h-4"></i>
             </button>
         </div>
@@ -1884,11 +1823,11 @@
         <!-- Top: name + prefix -->
         <div class="px-6 py-4 grid grid-cols-1 sm:grid-cols-2 gap-4 border-b border-white/5">
             <div>
-                <label class="block text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono">Display Name</label>
-                <input id="edit-prov-name" type="text" class="w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-amber-500/60 transition-all">
             </div>
             <div>
-                <label class="block text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono flex items-center gap-1.5">
                     Prefix <span class="text-[9px] text-amber-400/80 bg-amber-500/10 border border-amber-500/20 px-1.5 py-0.5 rounded">{prefix}/model</span>
                 </label>
                 <input id="edit-prov-prefix" type="text" class="w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2 text-amber-200 font-mono text-xs focus:outline-none focus:border-amber-500/60 transition-all" placeholder="e.g. deb">
@@ -1898,17 +1837,17 @@
         <!-- Filter & bulk -->
         <div class="px-6 py-3 flex flex-col sm:flex-row gap-3 items-stretch sm:items-center border-b border-white/5">
             <div class="relative flex-1">
-                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">
                     <i data-lucide="search" class="w-4 h-4"></i>
                 </span>
                 <input id="edit-prov-search" type="text" placeholder="Filter models..."
-                    class="w-full bg-black/40 border border-white/10 rounded-xl pl-9 pr-4 py-2 text-xs text-slate-100 font-mono focus:outline-none focus:border-amber-500/50 transition-all">
             </div>
             <div class="flex gap-2 text-[11px] font-mono">
-                <button id="edit-prov-select-all" class="bg-white/5 hover:bg-white/10 text-slate-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1">
                     <i data-lucide="check-square" class="w-3 h-3"></i> All
                 </button>
-                <button id="edit-prov-select-none" class="bg-white/5 hover:bg-white/10 text-slate-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1">
                     <i data-lucide="square" class="w-3 h-3"></i> None
                 </button>
                 <span id="edit-prov-count" class="text-xs font-mono text-amber-400 bg-amber-500/10 border border-amber-500/20 px-2.5 py-1.5 rounded-lg">0 / 0 selected</span>
@@ -1916,7 +1855,7 @@
         </div>
         <!-- Table -->
-        <div class="px-6 pt-3 grid grid-cols-12 gap-3 text-[10px] uppercase font-mono text-slate-500">
             <div class="col-span-1"></div>
             <div class="col-span-5">Upstream Model ID</div>
             <div class="col-span-6">Exposed Alias <span class="text-amber-400/70">(editable)</span></div>
@@ -1927,10 +1866,10 @@
         <!-- Footer -->
         <div class="px-6 py-4 border-t border-white/10 flex flex-col sm:flex-row gap-2 justify-end">
-            <button id="edit-prov-cancel" class="bg-white/5 hover:bg-white/10 text-slate-300 text-xs font-semibold py-2.5 px-5 rounded-xl transition border border-white/10 flex items-center justify-center gap-1.5">
                 <i data-lucide="x" class="w-3.5 h-3.5"></i><span>Cancel</span>
             </button>
-            <button id="edit-prov-save" class="bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-black text-xs font-bold py-2.5 px-5 rounded-xl transition shadow-md shadow-amber-500/10 flex items-center justify-center gap-1.5">
                 <i data-lucide="save" class="w-3.5 h-3.5"></i><span>Save Changes</span>
             </button>
         </div>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>APIarium | Admin Console</title>
+    <meta name="description" content="APIarium admin console — manage IP-bound client keys, dynamic providers, and model routing.">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
     <script>
                         mono: ['JetBrains Mono', 'monospace'],
                     },
                     colors: {
+                        gray: {
+                            900: '#0A0A0A',
+                            800: '#171717',
+                            700: '#262626',
+                            600: '#404040',
+                        }
                     }
                 }
             }
     </script>
     <style>
         body {
+            background-color: #000000;
+            color: #ededed;
         }
+        /* Background grid pattern, matches landing.html */
+        .bg-grid-pattern {
+            background-image: linear-gradient(to right, #ffffff05 1px, transparent 1px),
+                              linear-gradient(to bottom, #ffffff05 1px, transparent 1px);
+            background-size: 40px 40px;
+            mask-image: radial-gradient(circle at center, black, transparent 80%);
+            -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
         }
+        /* Legacy aliases kept so existing JS classes keep working. */
+        .glass {
+            background-color: #0A0A0A;          /* gray-900 */
+            border: 1px solid #171717;          /* gray-800 */
         }
+        .glass-bright {
+            background-color: rgba(23, 23, 23, 0.6);
+            border: 1px solid #262626;
         }
+        .glass-hover { transition: border-color 0.2s ease, background-color 0.2s ease; }
+        .glass-hover:hover {
+            border-color: #404040;
+            background-color: rgba(38, 38, 38, 0.4);
         }
+        .shadow-amber-glow,
+        .shadow-emerald-glow,
+        .shadow-glass-inner { box-shadow: none; }
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #262626; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #404040; }
+        @keyframes slideUp {
+            from { transform: translate(-50%, 100%); opacity: 0; }
+            to { transform: translate(-50%, 0); opacity: 1; }
         }
         .toast {
+            position: fixed;
+            bottom: 32px;
+            left: 50%;
+            transform: translateX(-50%);
+            padding: 12px 20px;
+            border-radius: 10px;
+            font-family: 'JetBrains Mono', monospace;
             font-size: 13px;
+            z-index: 9999;
+            box-shadow: 0 18px 36px -10px rgba(0, 0, 0, 0.6);
             display: flex;
             align-items: center;
             gap: 10px;
+            animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
         }
+        .toast-success {
+            background: #0A0A0A;
+            border: 1px solid rgba(16, 185, 129, 0.4);
+            color: #34d399;
         }
+        .toast-error {
+            background: #0A0A0A;
+            border: 1px solid rgba(239, 68, 68, 0.4);
+            color: #f87171;
         }
+        @keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+        .animate-pulse-slow { animation: pulse-slow 3s infinite; }
+        /* Section anchor offset under sticky header */
+        section[id] { scroll-margin-top: 80px; }
     </style>
 </head>
+<body class="font-sans text-gray-100 antialiased min-h-screen flex flex-col relative selection:bg-amber-500/30 selection:text-amber-100">
+<!-- Background grid pattern (matches landing.html / docs.html) -->
+<div class="absolute inset-0 bg-grid-pattern pointer-events-none z-0"></div>
 <!-- Auth Gate -->
+<div id="auth-gate" class="hidden min-h-screen flex items-center justify-center px-4 py-12 relative z-10 w-full">
+    <div class="bg-gray-900 border border-gray-800 rounded-2xl p-8 max-w-md w-full shadow-2xl">
         <div class="flex flex-col items-center text-center mb-8">
+            <span class="text-5xl mb-3" aria-label="APIarium">🐝</span>
+            <h1 class="text-2xl font-semibold tracking-tight text-white">APIarium Admin</h1>
+            <p class="text-xs font-mono text-gray-500 mt-2 px-2.5 py-0.5 rounded-full border border-gray-800 inline-block">v0.4.0 · Admin Console</p>
         </div>
         <div class="space-y-4">
             <div>
+                <label class="block text-[10px] font-semibold text-gray-500 uppercase tracking-wider mb-2 font-mono">Master Security Key</label>
                 <div class="relative">
+                    <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-500">
+                        <i data-lucide="key-round" class="w-4 h-4"></i>
                     </span>
                     <input id="master-key-input" type="password" placeholder="apiarium_master_..."
+                        class="w-full bg-black border border-gray-800 rounded-lg pl-10 pr-4 py-3 text-gray-100 font-mono text-sm focus:outline-none focus:border-amber-500/60 transition-colors placeholder:text-gray-700">
                 </div>
             </div>
+            <button id="auth-btn" class="w-full bg-white hover:bg-gray-100 active:scale-[0.99] text-black font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2">
                 <span>Unlock Dashboard</span>
                 <i data-lucide="unlock" class="w-4 h-4"></i>
             </button>
+            <p id="auth-error" class="text-red-400 text-xs mt-3 text-center bg-red-500/10 border border-red-500/30 py-2.5 px-3 rounded-lg hidden font-mono"></p>
         </div>
+        <div class="mt-8 pt-6 border-t border-gray-800 text-center">
+            <a href="/" class="text-[10px] font-mono text-gray-500 hover:text-gray-300 transition-colors">← Back to homepage</a>
         </div>
     </div>
 </div>
 <!-- Dashboard Container -->
+<div id="dashboard" class="hidden flex-1 flex flex-col relative z-10 w-full">
     <!-- Header Navigation -->
+    <header class="sticky top-0 z-40 bg-black/80 backdrop-blur-md border-b border-white/10">
+        <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
+            <a href="/" class="flex items-center gap-3 group">
+                <span class="text-2xl" aria-label="APIarium">🐝</span>
+                <span class="font-semibold text-lg tracking-tight group-hover:text-amber-300 transition-colors">APIarium</span>
+                <span class="ml-1 px-2 py-0.5 text-[10px] font-mono font-medium bg-amber-500/10 text-amber-300 border border-amber-500/30 rounded-full">ADMIN</span>
+            </a>
+            <nav class="hidden md:flex items-center gap-1 text-sm">
+                <a href="#stats" class="text-gray-400 hover:text-white px-3 py-1.5 rounded-md hover:bg-white/5 transition-colors flex items-center gap-1.5">
+                    <i data-lucide="bar-chart-3" class="w-3.5 h-3.5"></i><span>Analytics</span>
+                </a>
+                <a href="#providers" class="text-gray-400 hover:text-white px-3 py-1.5 rounded-md hover:bg-white/5 transition-colors flex items-center gap-1.5">
+                    <i data-lucide="cpu" class="w-3.5 h-3.5"></i><span>Providers</span>
+                </a>
+                <a href="#models" class="text-gray-400 hover:text-white px-3 py-1.5 rounded-md hover:bg-white/5 transition-colors flex items-center gap-1.5">
+                    <i data-lucide="layers" class="w-3.5 h-3.5"></i><span>Models</span>
+                </a>
+                <a href="#generator" class="text-gray-400 hover:text-white px-3 py-1.5 rounded-md hover:bg-white/5 transition-colors flex items-center gap-1.5">
+                    <i data-lucide="key" class="w-3.5 h-3.5"></i><span>Keys</span>
+                </a>
+            </nav>
+            <div class="flex items-center gap-3">
+                <div class="hidden sm:flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-xs font-mono">
+                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse-slow"></span>
+                    <span>Live</span>
                 </div>
+                <a href="/docs" class="hidden sm:inline-block text-xs text-gray-400 hover:text-white transition-colors">Docs</a>
+                <button id="logout-btn" class="flex items-center gap-1.5 bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/30 px-2.5 py-1.5 rounded-md text-xs font-mono transition-colors">
+                    <i data-lucide="log-out" class="w-3.5 h-3.5"></i>
+                    <span class="hidden sm:inline">Logout</span>
+                </button>
             </div>
         </div>
     </header>
                         <i data-lucide="gauge" class="text-amber-500 w-5 h-5"></i>
                         Gateway Overview
                     </h2>
+                    <p class="text-sm text-gray-400">Real-time usage analytics, rate metrics, and authenticated keys.</p>
                 </div>
+                <div class="text-xs font-mono text-gray-500 flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-lg border border-white/5">
                     <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
                     <span>Sync State: Active</span>
                 </div>
             <!-- Stats KPI Cards -->
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                 <!-- Card 1: Unique Client IPs -->
+                <div class="glass rounded-xl p-5 relative overflow-hidden flex flex-col justify-between">
                     <div class="flex items-center justify-between mb-4">
+                        <span class="text-xs font-mono uppercase tracking-wider text-gray-400">Unique Clients</span>
                         <div class="p-2 bg-amber-500/10 text-amber-400 rounded-lg">
                             <i data-lucide="users" class="w-4 h-4"></i>
                         </div>
                     </div>
                     <div>
+                        <h3 id="stat-active" class="text-2xl font-semibold text-white font-mono tracking-tight">—</h3>
+                        <p class="text-[11px] text-gray-500 mt-2 flex items-center gap-1">
                             <i data-lucide="network" class="w-3.5 h-3.5 text-amber-500/60"></i> Active IP-bound keys in routing table
                         </p>
                     </div>
                 </div>
                 <!-- Card 2: Total API Keys -->
+                <div class="glass rounded-xl p-5 relative overflow-hidden flex flex-col justify-between">
                     <div class="flex items-center justify-between mb-4">
+                        <span class="text-xs font-mono uppercase tracking-wider text-gray-400">Total Keycards</span>
                         <div class="p-2 bg-blue-500/10 text-blue-400 rounded-lg">
                             <i data-lucide="key-round" class="w-4 h-4"></i>
                         </div>
                     </div>
                     <div>
+                        <h3 id="stat-total" class="text-2xl font-semibold text-white font-mono tracking-tight">—</h3>
+                        <p class="text-[11px] text-gray-500 mt-2 flex items-center gap-1">
                             <i data-lucide="check-circle" class="w-3.5 h-3.5 text-blue-500/60"></i> Provisioned reverse-proxy credentials
                         </p>
                     </div>
                 </div>
                 <!-- Card 3: Total Requests routed -->
+                <div class="glass rounded-xl p-5 relative overflow-hidden flex flex-col justify-between">
                     <div class="flex items-center justify-between mb-4">
+                        <span class="text-xs font-mono uppercase tracking-wider text-gray-400">Total API Requests</span>
                         <div class="p-2 bg-emerald-500/10 text-emerald-400 rounded-lg">
                             <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
                         </div>
                     </div>
                     <div>
+                        <h3 id="stat-requests" class="text-2xl font-semibold text-white font-mono tracking-tight">0</h3>
                         <p class="text-[11px] text-emerald-400/80 mt-2 flex items-center gap-1">
                             <span class="inline-block w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                             Incoming calls intercepted by proxy
                 </div>
                 <!-- Card 4: Rate Limited attempts -->
+                <div class="glass rounded-xl p-5 relative overflow-hidden flex flex-col justify-between">
                     <div class="flex items-center justify-between mb-4">
+                        <span class="text-xs font-mono uppercase tracking-wider text-gray-400">Rate Limited</span>
                         <div class="p-2 bg-red-500/10 text-red-400 rounded-lg">
                             <i data-lucide="shield-alert" class="w-4 h-4"></i>
                         </div>
                     </div>
                     <div>
+                        <h3 id="stat-ratelimited" class="text-2xl font-semibold text-white font-mono tracking-tight">0</h3>
                         <p class="text-[11px] text-red-400/80 mt-2 flex items-center gap-1">
                             <i data-lucide="alert-octagon" class="w-3.5 h-3.5 text-red-400/60"></i> Unauthorized or rate-limited requests
                         </p>
             <!-- ANALYTICS CHARTS PANEL -->
             <div id="charts" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                 <!-- Chart 1: Request Load over 7 Days -->
+                <div class="glass rounded-xl p-6 lg:col-span-2 space-y-4">
                     <div class="flex items-center justify-between">
+                        <h3 class="text-sm font-semibold text-gray-200 tracking-tight flex items-center gap-2">
                             <i data-lucide="activity" class="w-4 h-4 text-amber-500"></i>
                             Traffic Load Analysis
                         </h3>
+                        <span class="text-[10px] font-mono text-gray-500 bg-white/5 px-2 py-0.5 rounded">7-day timeline</span>
                     </div>
                     <div class="relative min-h-[220px] flex items-center justify-center">
                         <canvas id="chart-requests" class="max-h-[260px]"></canvas>
                 </div>
                 <!-- Chart 2: Popular Models Routing share -->
+                <div class="glass rounded-xl p-6 space-y-4">
                     <div class="flex items-center justify-between">
+                        <h3 class="text-sm font-semibold text-gray-200 tracking-tight flex items-center gap-2">
                             <i data-lucide="pie-chart" class="w-4 h-4 text-indigo-400"></i>
                             Models Routing Share
                         </h3>
+                        <span class="text-[10px] font-mono text-gray-500 bg-white/5 px-2 py-0.5 rounded font-mono">Real-time</span>
                     </div>
                     <div class="relative min-h-[220px] flex items-center justify-center">
                         <canvas id="chart-models" class="max-h-[260px]"></canvas>
                         <i data-lucide="cpu" class="text-amber-500 w-5 h-5"></i>
                         Dynamic Providers
                     </h2>
+                    <p class="text-sm text-gray-400">Plug external API end-points instantly. Automatically probe and extract upstream model paths.</p>
                 </div>
                 <div class="text-xs font-mono text-amber-500 flex items-center gap-1.5 bg-amber-500/10 border border-amber-500/20 px-3 py-1 rounded-lg">
                     <i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
             <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
                 <!-- Add Provider form card -->
+                <div class="glass rounded-xl p-6 lg:col-span-5 space-y-4 border border-white/10 shadow-amber-glow">
                     <div class="flex items-center gap-2 border-b border-white/5 pb-3">
                         <div class="p-1.5 bg-amber-500/10 text-amber-400 rounded-lg">
                             <i data-lucide="plus-circle" class="w-4 h-4"></i>
                         </div>
+                        <h3 class="text-sm font-semibold text-gray-200">Register New Upstream AI Provider</h3>
                     </div>
                     <div class="space-y-3.5">
                         <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
                             <div>
+                                <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5 font-mono">Provider Name</label>
                                 <input id="prov-name" type="text" placeholder="e.g. DeepBricks"
+                                    class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-gray-100 font-sans text-sm focus:outline-none focus:border-amber-500/60 transition-all">
                             </div>
                             <div>
+                                <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5 font-mono flex items-center gap-1.5">
                                     Prefix
                                     <span class="text-[9px] font-mono text-amber-400/80 bg-amber-500/10 border border-amber-500/20 px-1.5 py-0.5 rounded">{prefix}/model</span>
                                 </label>
                             </div>
                         </div>
                         <div>
+                            <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5 font-mono">Upstream Endpoint URL</label>
                             <input id="prov-url" type="url" placeholder="https://api.yourprovider.com/v1"
+                                class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-gray-100 font-mono text-xs focus:outline-none focus:border-amber-500/60 transition-all">
                         </div>
                         <div>
+                            <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5 font-mono">Bearer Access Keys (one per line)</label>
                             <textarea id="prov-keys" rows="3" placeholder="sk-provider-..."
+                                class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-gray-100 font-mono text-xs focus:outline-none focus:border-amber-500/60 transition-all resize-none"></textarea>
                         </div>
                         <!-- Step 1: Discover Models -->
                         <div class="flex gap-2 pt-2">
+                            <button id="prov-preview-btn" class="flex-1 bg-amber-500 hover:bg-amber-400 text-black text-xs font-bold py-2.5 px-4 rounded-xl transition shadow-md shadow-amber-500/10 flex items-center justify-center gap-1.5">
                                 <i data-lucide="stethoscope" class="w-3.5 h-3.5"></i>
                                 <span>Discover Models</span>
                             </button>
+                            <button id="prov-reset-btn" class="bg-white/5 hover:bg-white/10 text-gray-300 text-xs font-semibold py-2.5 px-3 rounded-xl transition border border-white/10 flex items-center justify-center" title="Reset form">
                                 <i data-lucide="rotate-ccw" class="w-3.5 h-3.5"></i>
                             </button>
                         </div>
                 </div>
                 <!-- Step 2: Model Selection + Alias Editor (full width when active) -->
+                <div id="prov-selector" class="hidden lg:col-span-12 glass rounded-xl p-6 space-y-4 border border-amber-500/20 shadow-amber-glow">
                     <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-white/5 pb-3">
                         <div>
                             <h3 class="text-sm font-semibold text-amber-300 flex items-center gap-2">
                                 <i data-lucide="list-checks" class="w-4 h-4"></i>
                                 Step 2 — Choose & Alias Models
                             </h3>
+                            <p class="text-[11px] text-gray-400 mt-1">Tick the models you want to expose. Edit the right column to set custom IDs. They'll show in <code class="font-mono text-amber-400">/v1/models</code> as <code class="font-mono text-amber-400" id="prov-selector-prefix-preview">{prefix}/&lt;alias&gt;</code>.</p>
                         </div>
                         <div class="flex items-center gap-2">
                             <span id="prov-selected-count" class="text-xs font-mono text-amber-400 bg-amber-500/10 border border-amber-500/20 px-2.5 py-1 rounded-full">0 / 0 selected</span>
                     <div class="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
                         <div class="relative flex-1">
+                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
                                 <i data-lucide="search" class="w-4 h-4"></i>
                             </span>
                             <input id="prov-selector-search" type="text" placeholder="Filter models..."
+                                class="w-full bg-black/40 border border-white/10 rounded-xl pl-9 pr-4 py-2 text-xs text-gray-100 font-mono focus:outline-none focus:border-amber-500/50 transition-all">
                         </div>
                         <div class="flex gap-2 text-[11px] font-mono">
+                            <button id="prov-select-all" class="bg-white/5 hover:bg-white/10 text-gray-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1">
                                 <i data-lucide="check-square" class="w-3 h-3"></i> All
                             </button>
+                            <button id="prov-select-none" class="bg-white/5 hover:bg-white/10 text-gray-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1">
                                 <i data-lucide="square" class="w-3 h-3"></i> None
                             </button>
+                            <button id="prov-reset-aliases" class="bg-white/5 hover:bg-white/10 text-gray-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1" title="Reset aliases to upstream id">
                                 <i data-lucide="undo-2" class="w-3 h-3"></i> Reset
                             </button>
                         </div>
                     </div>
                     <!-- Table header -->
+                    <div class="grid grid-cols-12 gap-3 text-[10px] uppercase font-mono text-gray-500 px-3">
                         <div class="col-span-1"></div>
                         <div class="col-span-5">Upstream Model ID</div>
                         <div class="col-span-6">Exposed Alias <span class="text-amber-400/70">(editable)</span></div>
                     </div>
                     <div class="flex flex-col sm:flex-row gap-2 pt-3 border-t border-white/5">
+                        <button id="prov-cancel-import" class="flex-1 sm:flex-none bg-white/5 hover:bg-white/10 text-gray-300 text-xs font-semibold py-2.5 px-5 rounded-xl transition border border-white/10 flex items-center justify-center gap-1.5">
                             <i data-lucide="x" class="w-3.5 h-3.5"></i>
                             <span>Cancel</span>
                         </button>
+                        <button id="prov-import-btn" class="flex-1 bg-emerald-500 hover:bg-emerald-400 text-black text-xs font-bold py-2.5 px-5 rounded-xl transition shadow-md shadow-emerald-500/10 flex items-center justify-center gap-1.5">
                             <i data-lucide="import" class="w-3.5 h-3.5"></i>
                             <span>Import Selected Models</span>
                         </button>
                 <!-- Existing active dynamic upstreams -->
                 <div class="lg:col-span-7 space-y-4">
                     <div class="flex items-center justify-between border-b border-white/5 pb-3">
+                        <h3 class="text-sm font-semibold text-gray-200 flex items-center gap-2">
                             <i data-lucide="server" class="w-4 h-4 text-emerald-400"></i>
                             Configured Upstream Targets
                         </h3>
                     <div id="providers-list" class="space-y-3 max-h-[460px] overflow-y-auto pr-1">
                         <!-- Dynamic providers list gets injected here -->
+                        <div class="flex flex-col items-center justify-center py-12 text-center text-gray-500 glass rounded-xl border border-dashed border-white/10">
+                            <i data-lucide="database" class="w-8 h-8 mb-2 text-gray-500"></i>
                             <span class="text-xs font-mono">No active dynamic provider targets</span>
                         </div>
                     </div>
                         <i data-lucide="layers" class="text-indigo-400 w-5 h-5"></i>
                         Unified Model Catalog
                     </h2>
+                    <p class="text-sm text-gray-400">Click models to copy names instantly. Routes are automatically clustered by provider backends.</p>
                 </div>
                 <div class="relative w-full sm:w-64">
+                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
+                        <i data-lucide="search" class="w-4 h-4 text-gray-500"></i>
                     </span>
                     <input id="models-search" type="text" placeholder="Filter unified models..."
+                        class="w-full bg-black/40 border border-white/10 rounded-xl pl-9 pr-4 py-2 text-xs text-gray-100 font-mono focus:outline-none focus:border-indigo-500/50 transition-all">
                 </div>
             </div>
+            <div class="glass rounded-xl p-6">
                 <div class="flex items-center justify-between mb-4 pb-3 border-b border-white/5">
                     <div class="flex items-center gap-2">
                         <span id="models-count" class="text-xs font-mono bg-indigo-500/15 border border-indigo-500/25 text-indigo-300 px-2.5 py-1 rounded-full">0 models</span>
+                        <span class="text-xs text-gray-500 font-mono">available through local proxy endpoints</span>
                     </div>
                 </div>
                 <!-- Unified Grid of Route Models -->
                 <div id="models-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3.5 max-h-[380px] overflow-y-auto pr-1">
                     <!-- Loaded dynamically -->
+                    <div class="col-span-full py-12 flex flex-col items-center justify-center text-center text-gray-500">
                         <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-amber-500 mb-2"></div>
                         <span class="text-xs font-mono">Indexing models routes...</span>
                     </div>
                         <i data-lucide="shield-check" class="text-amber-500 w-5 h-5"></i>
                         IP-Bound API Keys
                     </h2>
+                    <p class="text-sm text-gray-400">Strict IP validation logic on all reverse-proxy requests. Set labels to keep track of organizational nodes.</p>
                 </div>
             </div>
             <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
                 <!-- KEY GENERATION COMPONENT -->
+                <div class="glass rounded-xl p-6 lg:col-span-4 space-y-4 border border-white/10 shadow-amber-glow">
                     <div class="flex items-center gap-2 border-b border-white/5 pb-3">
                         <div class="p-1.5 bg-amber-500/10 text-amber-400 rounded-lg">
                             <i data-lucide="key-round" class="w-4 h-4"></i>
                         </div>
+                        <h3 class="text-sm font-semibold text-gray-200">Generate Client Key</h3>
                     </div>
                     <form id="key-form" class="space-y-4">
                         <div>
+                            <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5 font-mono">Bound IP Address</label>
                             <input id="ip-input" type="text" required placeholder="e.g. 192.168.1.50 or ::1"
+                                class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-gray-100 font-mono text-xs focus:outline-none focus:border-amber-500/60 transition-all">
                             <p id="ip-error" class="text-red-400 text-[11px] font-mono mt-1 hidden"></p>
                         </div>
                         <div>
+                            <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5 font-mono">Descriptive Client Label</label>
                             <input id="label-input" type="text" placeholder="e.g. Staging server, Analytics engine"
+                                class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-gray-100 font-sans text-sm focus:outline-none focus:border-amber-500/60 transition-all">
                         </div>
+                        <button id="gen-btn" type="submit" class="w-full bg-amber-500 hover:bg-amber-400 text-black font-bold py-2.5 rounded-xl transition-all shadow-md shadow-amber-500/10 flex items-center justify-center gap-1.5">
                             <i data-lucide="plus-circle" class="w-4 h-4"></i>
                             <span>Generate Route Key</span>
                         </button>
                         </div>
                         <div class="space-y-1.5">
                             <div class="flex items-center justify-between gap-2">
+                                <span class="text-[10px] text-gray-500 font-mono">KEY:</span>
                                 <span id="result-key" class="font-mono text-xs text-amber-200 select-all break-all text-right"></span>
                             </div>
                             <div class="flex items-center justify-between">
+                                <span class="text-[10px] text-gray-500 font-mono">BOUND TO:</span>
+                                <span id="result-ip" class="font-mono text-xs text-gray-300"></span>
                             </div>
                             <div class="flex items-center justify-between">
+                                <span class="text-[10px] text-gray-500 font-mono">LABEL:</span>
+                                <span id="result-label" class="font-sans text-xs text-gray-300"></span>
                             </div>
                         </div>
                         <button id="copy-key-btn" class="w-full bg-white/5 hover:bg-white/10 text-white text-xs font-semibold py-1.5 rounded border border-white/5 transition flex items-center justify-center gap-1">
                 </div>
                 <!-- TABLE OF CURRENT KEYS -->
+                <div class="lg:col-span-8 glass rounded-xl p-6 space-y-4">
                     <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-white/5 pb-3">
+                        <h3 class="text-sm font-semibold text-gray-200 flex items-center gap-2">
                             <i data-lucide="table" class="w-4 h-4 text-amber-400"></i>
                             IP Routing Table Keys
                         </h3>
                         <div class="relative w-full sm:w-56">
+                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
+                                <i data-lucide="filter" class="w-3.5 h-3.5 text-gray-500"></i>
                             </span>
                             <input id="search-input" type="text" placeholder="Filter keys by IP/Label..."
+                                class="w-full bg-black/40 border border-white/10 rounded-xl pl-9 pr-4 py-1.5 text-xs text-gray-100 font-mono focus:outline-none focus:border-amber-500/50 transition-all">
                         </div>
                     </div>
                     <div class="overflow-x-auto">
                         <table class="w-full text-left text-xs min-w-[640px]">
                             <thead>
+                                <tr class="text-gray-400 font-mono border-b border-white/5 uppercase text-[10px] tracking-wider">
                                     <th class="pb-3.5 pr-4 font-semibold">Client Key Auth</th>
                                     <th class="pb-3.5 pr-4 font-semibold">Ip Binding</th>
                                     <th class="pb-3.5 pr-4 font-semibold">Description Label</th>
                     </div>
                     <!-- Empty placeholder state -->
+                    <div id="empty-state" class="hidden flex flex-col items-center justify-center py-16 text-center text-gray-500">
+                        <i data-lucide="inbox" class="w-10 h-10 mb-2 text-gray-500 animate-bounce"></i>
+                        <h4 class="text-sm font-semibold text-gray-400">No Authorized IP-Bound Keys</h4>
+                        <p class="text-xs text-gray-500 max-w-xs mt-1">Generate your first IP-bound route configuration using the key generator panel on the left.</p>
                     </div>
                 </div>
     </main>
     <!-- Footer Area -->
+    <footer class="border-t border-gray-900 bg-black mt-auto">
+        <div class="max-w-7xl mx-auto px-6 py-6 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs text-gray-500">
+            <div class="flex items-center gap-2 font-mono">
+                <span class="text-base">🐝</span>
+                <span>&copy; 2026 APIarium · Admin Console</span>
             </div>
+            <div class="flex items-center gap-4 font-mono">
+                <span id="sync-status">Last sync: <span id="last-sync" class="text-gray-300">—</span></span>
+                <span class="w-1 h-1 rounded-full bg-gray-700"></span>
+                <span class="flex items-center gap-1.5">
+                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse-slow"></span>
+                    <span class="text-emerald-300">Operational</span>
+                </span>
+                <a href="/" class="hover:text-gray-300 transition-colors">Home</a>
+                <a href="/docs" class="hover:text-gray-300 transition-colors">Docs</a>
             </div>
         </div>
     </footer>
         // Visual loading state
         authBtn.disabled = true;
+        authBtn.innerHTML = `<span>Unlocking Console...</span> <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-900"></div>`;
         try {
             const r = await fetch('/admin/keys', { headers: { 'Authorization': 'Bearer ' + val } });
         tbody.innerHTML = filtered.map(k => `
             <tr class="hover:bg-white/[0.02] transition border-b border-white/[0.03]">
                 <td class="py-3.5 pr-4 font-mono text-xs text-amber-300 select-all font-semibold tracking-wide">${maskKey(k.key)}</td>
+                <td class="py-3.5 pr-4 font-mono text-xs text-gray-300">
                     <span class="bg-black/35 px-2 py-1 rounded border border-white/5">${k.ip || '—'}</span>
                 </td>
+                <td class="py-3.5 pr-4 text-gray-300 font-medium">${k.label || '<span class="text-gray-500 font-mono text-xs">NO_LABEL</span>'}</td>
+                <td class="py-3.5 pr-4 text-[11px] font-mono text-gray-400">${formatDate(k.created_at)}</td>
                 <td class="py-3.5 pr-4">
                     <span class="text-[10px] font-mono px-2.5 py-1 rounded-full ${k.status === 'active' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-red-500/10 text-red-400 border border-red-500/20'}">
                         ${(k.status || 'active').toUpperCase()}
                     </span>
                 </td>
                 <td class="py-3.5 text-right flex justify-end gap-2">
+                    <button onclick="window.__copyKey('${k.key}')" class="text-[11px] font-mono text-gray-300 hover:text-amber-400 px-2.5 py-1 rounded-lg bg-white/5 hover:bg-white/10 border border-white/5 transition flex items-center gap-1">
                         <i data-lucide="clipboard" class="w-3 h-3"></i> COPY
                     </button>
                     ${k.status !== 'revoked' ? `
+                    <button onclick="window.__revokeKey('${k.key}')" class="text-[11px] font-mono text-red-400/80 hover:text-red-400 px-2.5 py-1 rounded-lg bg-red-500/5 hover:bg-red-500/10 border border-red-500/10 transition flex items-center gap-1">
                         <i data-lucide="trash-2" class="w-3 h-3"></i> REVOKE
                     </button>` : ''}
                 </td>
         const btn = $('gen-btn');
         btn.disabled = true;
+        btn.innerHTML = `<span>Provisioning Key...</span> <div class="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-gray-900"></div>`;
         try {
             const r = await api('/admin/keys', { method: 'POST', body: JSON.stringify({ ip, label }) });
         const items = selectorState.available
             .filter(id => !q || id.toLowerCase().includes(q));
         if (items.length === 0) {
+            list.innerHTML = `<div class="text-center text-gray-500 text-xs font-mono py-8">No models match this filter.</div>`;
             return;
         }
         const prefix = (($('prov-prefix') || {}).value || '').trim();
                     </label>
                 </div>
                 <div class="col-span-5 min-w-0">
+                    <div class="font-mono text-[11px] text-gray-200 truncate" title="${escapeAttr(id)}">${escapeHtml(id)}</div>
                 </div>
                 <div class="col-span-6">
                     <div class="flex items-center gap-2">
                             data-upstream="${escapeAttr(id)}"
                             ${isSel ? '' : 'disabled'}
                             placeholder="alias">
+                        <span class="text-[10px] font-mono text-gray-500 truncate flex-shrink-0 min-w-0" title="${escapeAttr(full)}">→ ${escapeHtml(full)}</span>
                     </div>
                 </div>
             </div>`;
         if (!list) return;
         if (providers.length === 0) {
             list.innerHTML = `
+                <div class="flex flex-col items-center justify-center py-10 text-center text-gray-500 bg-black/25 rounded-2xl border border-dashed border-white/5">
+                    <i data-lucide="help-circle" class="w-8 h-8 mb-2 text-gray-500"></i>
                     <span class="text-xs font-mono">No dynamically registered upstreams</span>
                 </div>`;
             lucide.createIcons();
             const moreCount = Math.max(0, richModels.length - 6);
             const prefixBadge = prefix
                 ? `<span class="text-[10px] font-mono bg-amber-500/15 border border-amber-500/30 text-amber-300 px-2 py-0.5 rounded-md tracking-wider">${escapeHtml(prefix)}/</span>`
+                : `<span class="text-[10px] font-mono bg-gray-500/10 border border-gray-500/20 text-gray-400 px-2 py-0.5 rounded-md">no prefix</span>`;
             return `
             <div class="bg-gradient-to-br from-black/45 to-black/25 rounded-2xl p-4 border border-white/5 hover:border-amber-500/25 transition-all group">
                 <div class="flex items-start justify-between gap-3">
                     <div class="flex-1 min-w-0">
                         <div class="flex items-center gap-2 flex-wrap">
+                            <span class="font-bold text-gray-100 text-sm tracking-tight">${escapeHtml(p.name)}</span>
                             ${prefixBadge}
+                            <span class="text-[9px] font-mono bg-white/5 border border-white/10 text-gray-400 px-1.5 py-0.5 rounded">${escapeHtml(p.id)}</span>
                         </div>
+                        <div class="text-[11px] text-gray-400 font-mono mt-1.5 truncate flex items-center gap-1.5">
+                            <i data-lucide="link-2" class="w-3 h-3 text-gray-500"></i>
                             <span class="truncate">${escapeHtml(p.base_url)}</span>
                         </div>
                     </div>
                         <button onclick="window.__editProvider('${escapeAttr(p.id)}')" class="text-amber-300/80 hover:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-500/20 text-[10px] font-mono font-bold px-2.5 py-1.5 rounded-lg transition flex items-center gap-1" title="Edit prefix & models">
                             <i data-lucide="settings-2" class="w-3 h-3"></i> EDIT
                         </button>
+                        <button onclick="window.__deleteProvider('${escapeAttr(p.id)}')" class="text-red-400/80 hover:text-red-400 bg-red-500/5 hover:bg-red-500/10 border border-red-500/20 text-[10px] font-mono font-bold px-2.5 py-1.5 rounded-lg transition flex items-center gap-1">
                             <i data-lucide="trash-2" class="w-3 h-3"></i> DEL
                         </button>
                     </div>
                 </div>
+                <div class="flex flex-wrap gap-3 mt-3 text-[11px] text-gray-500 font-mono">
                     <span class="flex items-center gap-1"><i data-lucide="key-round" class="w-3 h-3"></i> ${p.key_count} keys</span>
                     <span class="flex items-center gap-1"><i data-lucide="box" class="w-3 h-3"></i> ${richModels.length} exposed</span>
+                    <span class="flex items-center gap-1 text-gray-500"><i data-lucide="database" class="w-3 h-3"></i> ${(p.available_models || []).length} available upstream</span>
                 </div>
                 ${richModels.length > 0 ? `
                 <div class="mt-3 pt-3 border-t border-white/5 flex flex-wrap gap-1.5">
                     ${previewChips}
+                    ${moreCount > 0 ? `<span class="text-[10px] font-mono text-gray-500 px-2 py-0.5">+${moreCount} more</span>` : ''}
                 </div>` : ''}
             </div>`;
         }).join('');
         btn.innerHTML = `<div class="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-black"></div><span>Discovering...</span>`;
         status.classList.remove('hidden');
         status.textContent = 'Probing upstream /models endpoint...';
+        status.className = 'text-xs font-mono text-gray-400 bg-white/5 px-2.5 py-1.5 rounded-lg border border-white/10';
         let discovered = [];
         try {
         const q = (editState.filter || '').toLowerCase();
         const items = editState.available.filter(id => !q || id.toLowerCase().includes(q));
         if (items.length === 0) {
+            list.innerHTML = `<div class="text-center text-gray-500 text-xs font-mono py-8">No models match this filter.</div>`;
             return;
         }
         list.innerHTML = items.map(id => {
                     </label>
                 </div>
                 <div class="col-span-5 min-w-0">
+                    <div class="font-mono text-[11px] text-gray-200 truncate" title="${escapeAttr(id)}">${escapeHtml(id)}</div>
                 </div>
                 <div class="col-span-6">
                     <div class="flex items-center gap-2">
                             value="${escapeAttr(alias)}"
                             data-upstream="${escapeAttr(id)}"
                             ${isSel ? '' : 'disabled'}>
+                        <span class="text-[10px] font-mono text-gray-500 truncate flex-shrink-0 min-w-0" title="${escapeAttr(full)}">→ ${escapeHtml(full)}</span>
                     </div>
                 </div>
             </div>`;
         if (filtered.length === 0) {
             grid.innerHTML = `
+                <div class="col-span-full py-10 text-center text-gray-500 bg-black/20 rounded-xl border border-dashed border-white/5 font-mono text-xs">
                     No registered proxy model routes matched query filters.
                 </div>`;
             return;
             <div class="bg-black/45 border border-white/5 hover:border-amber-500/30 rounded-xl p-3.5 transition-all duration-200 cursor-pointer group shadow-glass-inner"
                  onclick="window.__copyModelId('${escapeHtml(m.name)}')">
                 <div class="flex items-start justify-between gap-2">
+                    <span class="font-mono text-xs text-gray-200 break-all select-all group-hover:text-amber-300 font-semibold transition-colors duration-150">${escapeHtml(m.name || m.id)}</span>
                     ${m.upstreams > 1 ? `<span class="text-[9px] font-mono font-bold text-amber-400 bg-amber-500/15 border border-amber-500/20 px-1.5 py-0.5 rounded flex-shrink-0">x${m.upstreams} nodes</span>` : ''}
                 </div>
                 <div class="mt-3 flex items-center justify-between">
                     <div class="flex items-center gap-1.5">
                         <span class="w-1.5 h-1.5 rounded-full ${m.provider === 'built-in' ? 'bg-amber-400' : m.provider === 'image-backend' ? 'bg-indigo-400' : 'bg-emerald-400'}"></span>
+                        <span class="text-[10px] font-mono text-gray-400 truncate max-w-[120px]">${escapeHtml(m.provider)}</span>
                     </div>
+                    <span class="text-[9px] font-mono text-gray-500 group-hover:text-amber-400 transition-colors flex items-center gap-1">
                         <i data-lucide="copy" class="w-3 h-3"></i> COPY
                     </span>
                 </div>
                     <i data-lucide="settings-2" class="w-4 h-4"></i>
                 </div>
                 <div class="min-w-0">
+                    <h3 id="edit-prov-modal-title" class="font-bold text-gray-100 truncate">Edit Provider</h3>
+                    <p class="text-[11px] text-gray-400 font-mono">Update prefix, model selection, and aliases</p>
                 </div>
             </div>
+            <button id="edit-prov-close" class="text-gray-400 hover:text-gray-100 bg-white/5 hover:bg-white/10 rounded-lg p-1.5 transition">
                 <i data-lucide="x" class="w-4 h-4"></i>
             </button>
         </div>
         <!-- Top: name + prefix -->
         <div class="px-6 py-4 grid grid-cols-1 sm:grid-cols-2 gap-4 border-b border-white/5">
             <div>
+                <label class="block text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5 font-mono">Display Name</label>
+                <input id="edit-prov-name" type="text" class="w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2 text-gray-100 text-sm focus:outline-none focus:border-amber-500/60 transition-all">
             </div>
             <div>
+                <label class="block text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5 font-mono flex items-center gap-1.5">
                     Prefix <span class="text-[9px] text-amber-400/80 bg-amber-500/10 border border-amber-500/20 px-1.5 py-0.5 rounded">{prefix}/model</span>
                 </label>
                 <input id="edit-prov-prefix" type="text" class="w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2 text-amber-200 font-mono text-xs focus:outline-none focus:border-amber-500/60 transition-all" placeholder="e.g. deb">
         <!-- Filter & bulk -->
         <div class="px-6 py-3 flex flex-col sm:flex-row gap-3 items-stretch sm:items-center border-b border-white/5">
             <div class="relative flex-1">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
                     <i data-lucide="search" class="w-4 h-4"></i>
                 </span>
                 <input id="edit-prov-search" type="text" placeholder="Filter models..."
+                    class="w-full bg-black/40 border border-white/10 rounded-xl pl-9 pr-4 py-2 text-xs text-gray-100 font-mono focus:outline-none focus:border-amber-500/50 transition-all">
             </div>
             <div class="flex gap-2 text-[11px] font-mono">
+                <button id="edit-prov-select-all" class="bg-white/5 hover:bg-white/10 text-gray-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1">
                     <i data-lucide="check-square" class="w-3 h-3"></i> All
                 </button>
+                <button id="edit-prov-select-none" class="bg-white/5 hover:bg-white/10 text-gray-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1">
                     <i data-lucide="square" class="w-3 h-3"></i> None
                 </button>
                 <span id="edit-prov-count" class="text-xs font-mono text-amber-400 bg-amber-500/10 border border-amber-500/20 px-2.5 py-1.5 rounded-lg">0 / 0 selected</span>
         </div>
         <!-- Table -->
+        <div class="px-6 pt-3 grid grid-cols-12 gap-3 text-[10px] uppercase font-mono text-gray-500">
             <div class="col-span-1"></div>
             <div class="col-span-5">Upstream Model ID</div>
             <div class="col-span-6">Exposed Alias <span class="text-amber-400/70">(editable)</span></div>
         <!-- Footer -->
         <div class="px-6 py-4 border-t border-white/10 flex flex-col sm:flex-row gap-2 justify-end">
+            <button id="edit-prov-cancel" class="bg-white/5 hover:bg-white/10 text-gray-300 text-xs font-semibold py-2.5 px-5 rounded-xl transition border border-white/10 flex items-center justify-center gap-1.5">
                 <i data-lucide="x" class="w-3.5 h-3.5"></i><span>Cancel</span>
             </button>
+            <button id="edit-prov-save" class="bg-amber-500 hover:bg-amber-400 text-black text-xs font-bold py-2.5 px-5 rounded-xl transition shadow-md shadow-amber-500/10 flex items-center justify-center gap-1.5">
                 <i data-lucide="save" class="w-3.5 h-3.5"></i><span>Save Changes</span>
             </button>
         </div>