Update app.py

app.py

@@ -1,3 +1,10 @@
+Ten předchozí vzhled vypadal prýdě, protože se Tailwind CSS styly z CDNa občas neaplikovaly včas a chyběly ucelené vizuální struktury. Udělal jsem kompletní redesign frontendového kódu přímo uvnitř `app.py`. 
+
+Vytvořil jsem **ultra-profesionální, čistý "Enterprise" design** ve stylu moderních SaaS platforem (Vercel / Linear / Stripe). Vše je postaveno na dokonalém odstupu (spacing), luxusních stínech, průhlednostech, skleněných efektech (glassmorphism) a dokonale nastaveném tmavém režimu.
+
+Zde je vylepšený `app.py`. Stačí zkopírovat a vložit.
+
+```python
 """
 OmniParse AI - Enterprise Document Parsing System
 Single-file Hugging Face Spaces Application
@@ -446,19 +453,21 @@ def bridge_export(extracted_json: str) -> str:
     return generate_csv_b64(extracted_json)
 
 # ─────────────────────────────────────────────────────────────────────────────
-# GRADIO UI & CUSTOM HTML INJECTION
+# GRADIO UI & LUXURY ENTERPRISE HTML INJECTION
 # ─────────────────────────────────────────────────────────────────────────────
 
 CUSTOM_CSS = """
 :root {
-    --bg-primary: #09090b;
-    --bg-surface: #111113;
-    --bg-elevated: #18181b;
-    --border-color: #27272a;
-    --accent-blue: #3b82f6;
-    --accent-emerald: #10b981;
-    --text-primary: #fafafa;
-    --text-muted: #a1a1aa;
+    --bg-primary: #050507;
+    --bg-surface: #0A0A0F;
+    --bg-elevated: #101015;
+    --border-color: #1F1F25;
+    --border-hover: #2A2A35;
+    --accent-blue: #3B82F6;
+    --accent-emerald: #10B981;
+    --accent-violet: #8B5CF6;
+    --text-primary: #FAFAFA;
+    --text-muted: #71717A;
 }
 .gradio-container {
     max-width: 100% !important;
@@ -471,11 +480,140 @@ CUSTOM_CSS = """
     background: var(--bg-primary);
     color: var(--text-primary);
     font-family: 'Inter', sans-serif;
+    background-image: 
+        radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 25%),
+        radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.04) 0%, transparent 25%);
 }
 footer { display: none !important; }
+.glass-card {
+    background: rgba(16, 16, 21, 0.6);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    transition: border-color 0.2s ease, transform 0.2s ease;
+}
+.glass-card:hover {
+    border-color: var(--border-hover);
+}
+.luxury-input {
+    background: var(--bg-surface) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 10px !important;
+    padding: 14px 16px !important;
+    color: var(--text-primary) !important;
+    font-size: 14px !important;
+    transition: all 0.2s ease !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+}
+.luxury-input:focus {
+    outline: none !important;
+    border-color: var(--accent-blue) !important;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
+}
+.luxury-btn-primary {
+    background: var(--text-primary) !important;
+    color: var(--bg-primary) !important;
+    font-weight: 600 !important;
+    padding: 12px 20px !important;
+    border-radius: 10px !important;
+    transition: all 0.2s ease !important;
+    width: 100% !important;
+    border: 1px solid transparent !important;
+}
+.luxury-btn-primary:hover {
+    opacity: 0.9 !important;
+    transform: translateY(-1px) !important;
+}
+.luxury-btn-secondary {
+    background: transparent !important;
+    color: var(--text-primary) !important;
+    font-weight: 500 !important;
+    padding: 12px 20px !important;
+    border-radius: 10px !important;
+    border: 1px solid var(--border-color) !important;
+    transition: all 0.2s ease !important;
+    width: 100% !important;
+}
+.luxury-btn-secondary:hover {
+    background: var(--bg-elevated) !important;
+    border-color: var(--border-hover) !important;
+}
+.luxury-btn-accent {
+    background: linear-gradient(180deg, #3B82F6, #2563EB) !important;
+    color: white !important;
+    font-weight: 600 !important;
+    padding: 12px 20px !important;
+    border-radius: 10px !important;
+    transition: all 0.2s ease !important;
+    width: 100% !important;
+    border: 1px solid rgba(255,255,255,0.1) !important;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
+}
+.luxury-btn-accent:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3) !important;
+}
+.drop-zone {
+    border: 2px dashed var(--border-color) !important;
+    background: var(--bg-surface) !important;
+    border-radius: 16px !important;
+    transition: all 0.3s ease !important;
+    cursor: pointer !important;
+}
+.drop-zone:hover {
+    border-color: var(--accent-blue) !important;
+    background: rgba(59, 130, 246, 0.02) !important;
+}
+.drop-zone-active {
+    border-color: var(--accent-emerald) !important;
+    background: rgba(16, 185, 129, 0.05) !important;
+    transform: scale(1.01);
+}
+.hidden-gradio {
+    position: absolute !important;
+    left: -9999px !important;
+    top: -9999px !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+}
+.terminal-block {
+    background: #000000;
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    color: #A1A1AA;
+}
+.status-badge {
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.modal-bg {
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+.modal-content {
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-color);
+    border-radius: 24px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
+}
+.fancy-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
+.fancy-scroll::-webkit-scrollbar-track { background: transparent; }
+.fancy-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
+.fancy-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
 """
 
-# The massive custom HTML, CSS, and JS frontend
 def get_frontend_html() -> str:
     return """
 <!DOCTYPE html>
@@ -485,88 +623,125 @@ def get_frontend_html() -> str:
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>OmniParse AI</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <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;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-    <style>
-        body { font-family: 'Inter', sans-serif; }
-        .font-mono { font-family: 'JetBrains Mono', monospace; }
-        ::-webkit-scrollbar { width: 6px; height: 6px; }
-        ::-webkit-scrollbar-track { background: #111113; }
-        ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
-        ::-webkit-scrollbar-thumb:hover { background: #3f3f46; }
-        .modal-bg { background: rgba(9, 9, 11, 0.8); backdrop-filter: blur(8px); }
-        .glow-blue { box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); }
-        .glow-emerald { box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); }
-        .drop-zone-active { border-color: #10b981 !important; background: rgba(16, 185, 129, 0.05) !important; }
-        .hidden-gradio { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; }
-        .terminal-line { animation: fadeIn 0.3s ease-in; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
-    </style>
 </head>
-<body class="bg-[#09090b] text-white">
+<body class="bg-[#050507] text-[#FAFAFA] antialiased">
 
 <div id="omniparse-root">
     <!-- Navigation -->
-    <nav class="border-b border-[#27272a] bg-[#09090b] sticky top-0 z-40">
-        <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
-            <div class="flex items-center space-x-3">
-                <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-emerald-500 rounded-lg flex items-center justify-center font-bold">O</div>
-                <span class="text-xl font-bold tracking-tight">OmniParse <span class="text-blue-400">AI</span></span>
-            </div>
-            <div class="flex items-center space-x-4">
-                <span id="user-badge" class="text-xs px-3 py-1.5 bg-[#18181b] border border-[#27272a] rounded-full text-gray-400">Not Authenticated</span>
-                <button id="upgrade-btn" class="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 rounded-full text-sm font-semibold transition">Upgrade to Pro</button>
+    <nav class="sticky top-0 z-40 border-b border-[#1F1F25] bg-[#050507]/80 backdrop-blur-xl">
+        <div class="max-w-7xl mx-auto px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center space-x-3">
+                    <div class="w-9 h-9 bg-gradient-to-br from-blue-500 to-violet-500 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20">
+                        <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+                    </div>
+                    <div>
+                        <span class="text-lg font-bold tracking-tight block">OmniParse <span class="text-blue-400">AI</span></span>
+                        <span class="text-[10px] text-gray-500 uppercase tracking-widest font-medium">Enterprise Engine</span>
+                    </div>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <span id="user-badge" class="hidden md:flex items-center space-x-2 text-xs px-3 py-1.5 bg-[#101015] border border-[#1F1F25] rounded-full">
+                        <span class="w-2 h-2 bg-gray-500 rounded-full"></span>
+                        <span class="text-gray-400">Unauthenticated</span>
+                    </span>
+                    <button id="upgrade-btn" class="flex items-center space-x-2 px-4 py-2 bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 rounded-full text-xs font-semibold transition-all shadow-lg shadow-blue-500/20">
+                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 11l7-7 7 7M12 4v16" /></svg>
+                        <span>Upgrade</span>
+                    </button>
+                </div>
             </div>
         </div>
     </nav>
 
-    <!-- Main Content -->
-    <main class="max-w-7xl mx-auto px-6 py-8">
+    <main class="max-w-7xl mx-auto px-6 lg:px-8 py-10">
         
         <!-- Auth View -->
-        <div id="auth-view" class="min-h-[70vh] flex flex-col items-center justify-center">
-            <div class="w-full max-w-md bg-[#111113] border border-[#27272a] rounded-2xl p-8">
-                <h2 class="text-2xl font-bold mb-6 text-center">Access Terminal</h2>
-                <div class="space-y-4">
-                    <div>
-                        <label class="block text-xs font-mono text-gray-400 mb-1">EMAIL</label>
-                        <input id="auth-email" type="email" class="w-full bg-[#18181b] border border-[#27272a] rounded-lg px-4 py-2.5 text-sm focus:border-blue-500 outline-none" placeholder="user@corp.com">
-                    </div>
-                    <div>
-                        <label class="block text-xs font-mono text-gray-400 mb-1">PASSWORD</label>
-                        <input id="auth-pass" type="password" class="w-full bg-[#18181b] border border-[#27272a] rounded-lg px-4 py-2.5 text-sm focus:border-blue-500 outline-none" placeholder="••••••••">
-                    </div>
-                    <div class="flex gap-2">
-                        <button id="login-btn" class="flex-1 bg-blue-600 hover:bg-blue-700 rounded-lg py-2.5 text-sm font-semibold transition">Login</button>
-                        <button id="signup-btn" class="flex-1 bg-[#18181b] border border-[#27272a] hover:bg-[#27272a] rounded-lg py-2.5 text-sm font-semibold transition">Sign Up</button>
-                    </div>
-                    <div class="relative py-2">
-                        <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-[#27272a]"></div></div>
-                        <div class="relative flex justify-center"><span class="bg-[#111113] px-2 text-xs text-gray-500">OR</span></div>
+        <div id="auth-view" class="min-h-[75vh] flex flex-col items-center justify-center">
+            <div class="w-full max-w-md">
+                <div class="text-center mb-10">
+                    <h1 class="text-4xl font-extrabold tracking-tight mb-3">Access the Engine</h1>
+                    <p class="text-gray-500 max-w-sm mx-auto">Securely parse sensitive financial documents with enterprise-grade AI.</p>
+                </div>
+                
+                <div class="glass-card p-8">
+                    <div class="space-y-5">
+                        <div>
+                            <label class="block text-[11px] font-mono text-gray-500 uppercase tracking-wider mb-2">Email Address</label>
+                            <input id="auth-email" type="email" class="luxury-input" placeholder="admin@enterprise.com">
+                        </div>
+                        <div>
+                            <label class="block text-[11px] font-mono text-gray-500 uppercase tracking-wider mb-2">Password</label>
+                            <input id="auth-pass" type="password" class="luxury-input" placeholder="••••••••••••">
+                        </div>
+                        <div class="flex gap-3 pt-2">
+                            <button id="login-btn" class="luxury-btn-primary">Log In</button>
+                            <button id="signup-btn" class="luxury-btn-secondary">Sign Up</button>
+                        </div>
+                        <div class="relative py-4">
+                            <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-[#1F1F25]"></div></div>
+                            <div class="relative flex justify-center"><span class="bg-[#101015] px-3 text-[10px] text-gray-500 uppercase tracking-widest">Or</span></div>
+                        </div>
+                        <button id="guest-btn" class="flex items-center justify-center space-x-2 w-full py-3 border border-[#1F1F25] rounded-xl text-sm font-medium text-gray-400 hover:text-white hover:border-[#2A2A35] hover:bg-[#101015] transition-all">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
+                            <span>Continue as Guest</span>
+                        </button>
                     </div>
-                    <button id="guest-btn" class="w-full bg-emerald-600/20 border border-emerald-600/40 text-emerald-400 hover:bg-emerald-600/30 rounded-lg py-2.5 text-sm font-semibold transition">Continue as Guest (Free Plan)</button>
                 </div>
             </div>
         </div>
 
         <!-- Dashboard View -->
         <div id="dashboard-view" class="hidden">
+            <div class="mb-10">
+                <h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
+                <p class="text-gray-500 mt-1">Monitor document parsing metrics and compliance in real-time.</p>
+            </div>
+
             <!-- Stats Banner -->
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
-                <div class="bg-[#111113] border border-[#27272a] rounded-xl p-5">
-                    <div class="text-xs font-mono text-gray-500 uppercase">Processed Docs</div>
-                    <div id="stat-docs" class="text-3xl font-bold mt-1">0</div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+                <div class="glass-card p-5">
+                    <div class="flex justify-between items-start mb-3">
+                        <span class="text-[11px] font-mono text-gray-500 uppercase tracking-wider">Processed</span>
+                        <div class="w-8 h-8 bg-blue-500/10 rounded-lg flex items-center justify-center">
+                            <svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /></svg>
+                        </div>
+                    </div>
+                    <div id="stat-docs" class="text-3xl font-bold text-white">0</div>
+                    <div class="text-xs text-gray-500 mt-1">Total documents</div>
                 </div>
-                <div class="bg-[#111113] border border-[#27272a] rounded-xl p-5">
-                    <div class="text-xs font-mono text-gray-500 uppercase">Extracted Fields</div>
-                    <div id="stat-fields" class="text-3xl font-bold mt-1 text-blue-400">0</div>
+                <div class="glass-card p-5">
+                    <div class="flex justify-between items-start mb-3">
+                        <span class="text-[11px] font-mono text-gray-500 uppercase tracking-wider">Fields</span>
+                        <div class="w-8 h-8 bg-violet-500/10 rounded-lg flex items-center justify-center">
+                            <svg class="w-4 h-4 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
+                        </div>
+                    </div>
+                    <div id="stat-fields" class="text-3xl font-bold text-white">0</div>
+                    <div class="text-xs text-gray-500 mt-1">Data points extracted</div>
                 </div>
-                <div class="bg-[#111113] border border-[#27272a] rounded-xl p-5">
-                    <div class="text-xs font-mono text-gray-500 uppercase">Execution Time</div>
-                    <div id="stat-time" class="text-3xl font-bold mt-1 text-emerald-400">0.00s</div>
+                <div class="glass-card p-5">
+                    <div class="flex justify-between items-start mb-3">
+                        <span class="text-[11px] font-mono text-gray-500 uppercase tracking-wider">Exec Time</span>
+                        <div class="w-8 h-8 bg-amber-500/10 rounded-lg flex items-center justify-center">
+                            <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                        </div>
+                    </div>
+                    <div id="stat-time" class="text-3xl font-bold text-white">0.00s</div>
+                    <div class="text-xs text-gray-500 mt-1">Processing speed</div>
                 </div>
-                <div class="bg-[#111113] border border-[#27272a] rounded-xl p-5">
-                    <div class="text-xs font-mono text-gray-500 uppercase">Accuracy Score</div>
-                    <div id="stat-acc" class="text-3xl font-bold mt-1 text-emerald-400">0%</div>
+                <div class="glass-card p-5">
+                    <div class="flex justify-between items-start mb-3">
+                        <span class="text-[11px] font-mono text-gray-500 uppercase tracking-wider">Accuracy</span>
+                        <div class="w-8 h-8 bg-emerald-500/10 rounded-lg flex items-center justify-center">
+                            <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" /></svg>
+                        </div>
+                    </div>
+                    <div id="stat-acc" class="text-3xl font-bold text-white">0%</div>
+                    <div class="text-xs text-gray-500 mt-1">AI confidence score</div>
                 </div>
             </div>
 
@@ -574,44 +749,61 @@ def get_frontend_html() -> str:
                 <!-- Left Column: Upload & Terminal -->
                 <div class="lg:col-span-2 space-y-6">
                     <!-- Upload Zone -->
-                    <div id="drop-zone" class="border-2 border-dashed border-[#27272a] rounded-2xl p-12 text-center cursor-pointer hover:border-blue-500 transition">
+                    <div id="drop-zone" class="drop-zone p-12 text-center">
                         <input id="file-input" type="file" class="hidden" accept="image/*">
-                        <svg class="mx-auto h-12 w-12 text-gray-500 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /></svg>
-                        <p class="text-lg font-semibold">Drop invoice image here</p>
-                        <p class="text-sm text-gray-500 mt-1">or click to browse</p>
+                        <div class="flex flex-col items-center">
+                            <div class="w-16 h-16 bg-[#101015] border border-[#1F1F25] rounded-2xl flex items-center justify-center mb-5">
+                                <svg class="w-7 h-7 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /></svg>
+                            </div>
+                            <p class="text-base font-semibold text-white mb-1">Drop invoice image here</p>
+                            <p class="text-sm text-gray-500">PNG, JPG up to 10MB</p>
+                        </div>
                     </div>
 
                     <!-- Terminal -->
-                    <div class="bg-[#111113] border border-[#27272a] rounded-xl overflow-hidden">
-                        <div class="flex items-center justify-between px-4 py-2.5 border-b border-[#27272a] bg-[#18181b]">
-                            <div class="flex items-center space-x-2">
-                                <div class="w-2.5 h-2.5 bg-red-500 rounded-full"></div>
-                                <div class="w-2.5 h-2.5 bg-yellow-500 rounded-full"></div>
-                                <div class="w-2.5 h-2.5 bg-green-500 rounded-full"></div>
+                    <div class="glass-card overflow-hidden">
+                        <div class="flex items-center justify-between px-5 py-3 border-b border-[#1F1F25]">
+                            <div class="flex items-center space-x-3">
+                                <div class="flex space-x-1.5">
+                                    <div class="w-2.5 h-2.5 bg-red-500/80 rounded-full"></div>
+                                    <div class="w-2.5 h-2.5 bg-yellow-500/80 rounded-full"></div>
+                                    <div class="w-2.5 h-2.5 bg-green-500/80 rounded-full"></div>
+                                </div>
+                                <span class="text-xs font-mono text-gray-400 ml-2">output_stream.log</span>
                             </div>
-                            <span class="text-xs font-mono text-gray-500">live_terminal_output.json</span>
+                            <span id="terminal-status" class="text-[10px] font-mono text-gray-500 uppercase tracking-widest">Idle</span>
                         </div>
-                        <pre id="terminal-output" class="p-4 text-xs font-mono text-emerald-400 h-80 overflow-y-auto whitespace-pre-wrap">> Awaiting input...</pre>
+                        <pre id="terminal-output" class="fancy-scroll p-5 text-xs font-mono text-gray-400 h-96 overflow-y-auto whitespace-pre-wrap"><span class="text-gray-600">System ready. Awaiting document input...</span></pre>
                     </div>
                 </div>
 
                 <!-- Right Column: Export & Status -->
                 <div class="space-y-6">
                     <!-- Status Card -->
-                    <div class="bg-[#111113] border border-[#27272a] rounded-xl p-5">
-                        <h3 class="text-sm font-bold uppercase text-gray-400 mb-4">Compliance Status</h3>
-                        <div id="compliance-status" class="space-y-3 text-sm">
-                            <div class="flex justify-between"><span class="text-gray-500">Validation</span><span class="text-gray-600">--</span></div>
-                            <div class="flex justify-between"><span class="text-gray-500">Duplicates</span><span class="text-gray-600">--</span></div>
+                    <div class="glass-card p-6">
+                        <h3 class="text-[11px] font-mono text-gray-500 uppercase tracking-wider mb-5">Compliance Status</h3>
+                        <div id="compliance-status" class="space-y-4">
+                            <div class="flex justify-between items-center pb-3 border-b border-[#1F1F25]">
+                                <span class="text-sm text-gray-400">Validation</span>
+                                <span class="status-badge bg-gray-500/10 text-gray-500">PENDING</span>
+                            </div>
+                            <div class="flex justify-between items-center pb-3 border-b border-[#1F1F25]">
+                                <span class="text-sm text-gray-400">Duplicates</span>
+                                <span class="status-badge bg-gray-500/10 text-gray-500">N/A</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm text-gray-400">Review Required</span>
+                                <span class="status-badge bg-gray-500/10 text-gray-500">N/A</span>
+                            </div>
                         </div>
                     </div>
 
                     <!-- Export Card -->
-                    <div class="bg-[#111113] border border-[#27272a] rounded-xl p-5">
-                        <h3 class="text-sm font-bold uppercase text-gray-400 mb-4">Data Export</h3>
-                        <button id="export-btn" class="w-full bg-[#18181b] border border-[#27272a] hover:bg-[#27272a] rounded-lg py-2.5 text-sm font-semibold transition flex items-center justify-center">
-                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
-                            Download CSV
+                    <div class="glass-card p-6">
+                        <h3 class="text-[11px] font-mono text-gray-500 uppercase tracking-wider mb-5">Data Export</h3>
+                        <button id="export-btn" class="luxury-btn-secondary flex items-center justify-center space-x-2">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+                            <span>Download CSV</span>
                         </button>
                         <a id="csv-download-link" href="#" download="omniparse_export.csv" class="hidden">dl</a>
                     </div>
@@ -622,30 +814,39 @@ def get_frontend_html() -> str:
 
     <!-- Chat Companion Widget -->
     <div id="chat-widget" class="fixed bottom-6 right-6 z-30 hidden">
-        <div class="bg-[#111113] border border-[#27272a] rounded-2xl w-80 shadow-2xl flex flex-col" style="height: 400px;">
-            <div class="px-4 py-3 border-b border-[#27272a] flex justify-between items-center">
-                <h3 class="text-sm font-bold flex items-center"><span class="w-2 h-2 bg-emerald-500 rounded-full mr-2"></span> AI Audit Companion</h3>
-                <button id="chat-close" class="text-gray-500 hover:text-white">&times;</button>
+        <div class="glass-card flex flex-col" style="width: 360px; height: 480px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);">
+            <div class="px-5 py-4 border-b border-[#1F1F25] flex justify-between items-center">
+                <h3 class="text-sm font-semibold flex items-center">
+                    <span class="w-2 h-2 bg-emerald-500 rounded-full mr-2.5 shadow-sm shadow-emerald-500/50"></span> 
+                    AI Audit Companion
+                </h3>
+                <button id="chat-close" class="text-gray-500 hover:text-white transition">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+                </button>
             </div>
-            <div id="chat-log" class="flex-1 p-3 overflow-y-auto space-y-2 text-sm"></div>
-            <div class="p-3 border-t border-[#27272a] flex gap-2">
-                <input id="chat-input" type="text" placeholder="Ask about the data..." class="flex-1 bg-[#18181b] border border-[#27272a] rounded-lg px-3 py-1.5 text-xs outline-none focus:border-blue-500">
-                <button id="chat-send" class="bg-blue-600 rounded-lg px-3 py-1.5 text-xs font-bold">Send</button>
+            <div id="chat-log" class="fancy-scroll flex-1 p-4 overflow-y-auto space-y-3 text-sm"></div>
+            <div class="p-3 border-t border-[#1F1F25]">
+                <div class="flex gap-2 items-center bg-[#050507] rounded-xl p-1.5 border border-[#1F1F25]">
+                    <input id="chat-input" type="text" placeholder="Ask about the data..." class="flex-1 bg-transparent border-none text-sm outline-none placeholder-gray-600 px-2">
+                    <button id="chat-send" class="bg-blue-600 hover:bg-blue-500 rounded-lg p-2 transition">
+                        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
+                    </button>
+                </div>
             </div>
         </div>
     </div>
-    <button id="chat-toggle" class="fixed bottom-6 right-6 z-30 bg-blue-600 hover:bg-blue-700 w-14 h-14 rounded-full flex items-center justify-center shadow-lg glow-blue hidden">
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /></svg>
+    <button id="chat-toggle" class="fixed bottom-6 right-6 z-30 w-14 h-14 bg-gradient-to-br from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 rounded-full flex items-center justify-center shadow-xl shadow-blue-500/30 transition-all hidden">
+        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /></svg>
     </button>
 
     <!-- Footer -->
-    <footer class="border-t border-[#27272a] mt-12 py-6">
-        <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center">
-            <p class="text-xs text-gray-600">© 2024 OmniParse AI. All rights reserved.</p>
-            <div class="flex gap-4 mt-4 md:mt-0">
-                <button onclick="openModal('terms-modal')" class="text-xs text-gray-500 hover:text-white">Terms of Service</button>
-                <button onclick="openModal('privacy-modal')" class="text-xs text-gray-500 hover:text-white">Privacy Policy</button>
-                <button onclick="openModal('gdpr-modal')" class="text-xs text-gray-500 hover:text-white">GDPR Compliance</button>
+    <footer class="border-t border-[#1F1F25] mt-12 py-8">
+        <div class="max-w-7xl mx-auto px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center">
+            <p class="text-xs text-gray-600 mb-4 md:mb-0">© 2024 OmniParse AI. Enterprise Edition.</p>
+            <div class="flex gap-6">
+                <button onclick="openModal('terms-modal')" class="text-xs text-gray-500 hover:text-white transition">Terms of Service</button>
+                <button onclick="openModal('privacy-modal')" class="text-xs text-gray-500 hover:text-white transition">Privacy Policy</button>
+                <button onclick="openModal('gdpr-modal')" class="text-xs text-gray-500 hover:text-white transition">GDPR Compliance</button>
             </div>
         </div>
     </footer>
@@ -653,92 +854,115 @@ def get_frontend_html() -> str:
 
 <!-- Modals -->
 <div id="terms-modal" class="modal-bg fixed inset-0 z-50 hidden flex items-center justify-center p-4">
-    <div class="bg-[#111113] border border-[#27272a] rounded-2xl max-w-2xl w-full p-8 max-h-[80vh] overflow-y-auto">
-        <h2 class="text-2xl font-bold mb-4">Terms of Service</h2>
-        <div class="text-sm text-gray-400 space-y-3">
+    <div class="modal-content max-w-2xl w-full p-8 max-h-[80vh] overflow-y-auto fancy-scroll">
+        <div class="flex justify-between items-start mb-6">
+            <h2 class="text-2xl font-bold">Terms of Service</h2>
+            <button onclick="closeModal('terms-modal')" class="text-gray-500 hover:text-white"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
+        </div>
+        <div class="text-sm text-gray-400 space-y-4 leading-relaxed">
             <p>1. Acceptance of Terms: By accessing OmniParse AI, you agree to be bound by these terms. AI data processing carries inherent risks, and outputs should be verified by a human operator.</p>
             <p>2. Enterprise Liability: OmniParse AI is not liable for misclassified financial data. The system provides high-confidence extractions but does not replace formal accounting audits.</p>
             <p>3. Data Retention: Parsed documents are retained for a maximum of 30 days for caching purposes unless explicitly deleted by the user or enterprise admin.</p>
         </div>
-        <button onclick="closeModal('terms-modal')" class="mt-6 bg-[#18181b] border border-[#27272a] rounded-lg px-4 py-2 text-sm">Close</button>
     </div>
 </div>
 
 <div id="privacy-modal" class="modal-bg fixed inset-0 z-50 hidden flex items-center justify-center p-4">
-    <div class="bg-[#111113] border border-[#27272a] rounded-2xl max-w-2xl w-full p-8 max-h-[80vh] overflow-y-auto">
-        <h2 class="text-2xl font-bold mb-4">Privacy Policy</h2>
-        <div class="text-sm text-gray-400 space-y-3">
+    <div class="modal-content max-w-2xl w-full p-8 max-h-[80vh] overflow-y-auto fancy-scroll">
+        <div class="flex justify-between items-start mb-6">
+            <h2 class="text-2xl font-bold">Privacy Policy</h2>
+            <button onclick="closeModal('privacy-modal')" class="text-gray-500 hover:text-white"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
+        </div>
+        <div class="text-sm text-gray-400 space-y-4 leading-relaxed">
             <p>1. Data Collection: We collect minimal authentication data (email, hashed password). Document images are processed in memory and not permanently stored unless explicitly saved by the user.</p>
             <p>2. AI Processing: Images are processed via our internal neural networks. We do not share your documents with third-party APIs.</p>
             <p>3. Security: Passwords are hashed using PBKDF2 with SHA-256 and unique cryptographic salts. Database access is strictly isolated.</p>
         </div>
-        <button onclick="closeModal('privacy-modal')" class="mt-6 bg-[#18181b] border border-[#27272a] rounded-lg px-4 py-2 text-sm">Close</button>
     </div>
 </div>
 
 <div id="gdpr-modal" class="modal-bg fixed inset-0 z-50 hidden flex items-center justify-center p-4">
-    <div class="bg-[#111113] border border-[#27272a] rounded-2xl max-w-2xl w-full p-8 max-h-[80vh] overflow-y-auto">
-        <h2 class="text-2xl font-bold mb-4">GDPR Compliance</h2>
-        <div class="text-sm text-gray-400 space-y-3">
+    <div class="modal-content max-w-2xl w-full p-8 max-h-[80vh] overflow-y-auto fancy-scroll">
+        <div class="flex justify-between items-start mb-6">
+            <h2 class="text-2xl font-bold">GDPR Compliance</h2>
+            <button onclick="closeModal('gdpr-modal')" class="text-gray-500 hover:text-white"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
+        </div>
+        <div class="text-sm text-gray-400 space-y-4 leading-relaxed">
             <p>1. Right to Erasure: You may request complete deletion of your account and associated parsed invoices at any time. Execution occurs within 72 hours.</p>
             <p>2. Data Portability: Users can export all extracted data in CSV format compliant with machine-readable portability standards.</p>
             <p>3. Automated Decision Making: Our AI parsing does not make automated legal decisions. All outputs are advisory and require human review.</p>
         </div>
-        <button onclick="closeModal('gdpr-modal')" class="mt-6 bg-[#18181b] border border-[#27272a] rounded-lg px-4 py-2 text-sm">Close</button>
     </div>
 </div>
 
 <!-- Upgrade & Checkout Modals -->
 <div id="upgrade-modal" class="modal-bg fixed inset-0 z-50 hidden flex items-center justify-center p-4">
-    <div class="bg-[#111113] border border-[#27272a] rounded-2xl max-w-md w-full p-8">
-        <h2 class="text-2xl font-bold mb-2">Upgrade to Enterprise</h2>
-        <p class="text-gray-500 mb-6">Unlock database persistence, duplicate detection, and priority AI processing.</p>
-        <div class="bg-[#18181b] border border-[#27272a] rounded-xl p-6 mb-6">
-            <div class="flex justify-between items-center mb-4">
+    <div class="modal-content max-w-md w-full p-8 relative overflow-hidden">
+        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-600 to-violet-600"></div>
+        <div class="flex justify-between items-start mb-6">
+            <div>
+                <h2 class="text-2xl font-bold">Upgrade to Enterprise</h2>
+                <p class="text-gray-500 mt-1 text-sm">Unlock the full potential of OmniParse AI.</p>
+            </div>
+            <button onclick="closeModal('upgrade-modal')" class="text-gray-500 hover:text-white"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
+        </div>
+        <div class="bg-[#050507] border border-[#1F1F25] rounded-2xl p-6 mb-6">
+            <div class="flex justify-between items-baseline mb-1">
                 <span class="text-sm text-gray-400">Enterprise Plan</span>
-                <span class="text-3xl font-bold">$49<span class="text-sm text-gray-500">/mo</span></span>
+                <div>
+                    <span class="text-4xl font-extrabold tracking-tight">$49</span>
+                    <span class="text-sm text-gray-500">/mo</span>
+                </div>
+            </div>
+            <div class="mt-5 pt-5 border-t border-[#1F1F25] space-y-3 text-sm text-gray-400">
+                <div class="flex items-center"><svg class="w-4 h-4 text-emerald-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>Unlimited Document Parsing</div>
+                <div class="flex items-center"><svg class="w-4 h-4 text-emerald-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>Cross-Field Math Validation</div>
+                <div class="flex items-center"><svg class="w-4 h-4 text-emerald-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>Duplicate Invoice Detection</div>
+                <div class="flex items-center"><svg class="w-4 h-4 text-emerald-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>Priority GPU Access</div>
             </div>
-            <ul class="text-sm text-gray-400 space-y-2">
-                <li class="flex items-center"><span class="text-emerald-400 mr-2">✓</span> Unlimited Document Parsing</li>
-                <li class="flex items-center"><span class="text-emerald-400 mr-2">✓</span> Cross-Field Math Validation</li>
-                <li class="flex items-center"><span class="text-emerald-400 mr-2">✓</span> Duplicate Invoice Detection</li>
-                <li class="flex items-center"><span class="text-emerald-400 mr-2">✓</span> Priority GPU Access</li>
-            </ul>
         </div>
-        <button onclick="openCheckout()" class="w-full bg-blue-600 hover:bg-blue-700 rounded-lg py-3 font-semibold transition">Subscribe Now</button>
-        <button onclick="closeModal('upgrade-modal')" class="w-full mt-2 text-sm text-gray-500 hover:text-white">Maybe later</button>
+        <button onclick="openCheckout()" class="luxury-btn-accent">Subscribe Now</button>
+        <button onclick="closeModal('upgrade-modal')" class="w-full mt-3 text-xs text-gray-500 hover:text-white py-2">Maybe later</button>
     </div>
 </div>
 
 <div id="checkout-modal" class="modal-bg fixed inset-0 z-50 hidden flex items-center justify-center p-4">
-    <div class="bg-[#111113] border border-[#27272a] rounded-2xl max-w-md w-full p-8">
+    <div class="modal-content max-w-md w-full p-8 relative overflow-hidden">
+        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-600 to-blue-600"></div>
         <div id="checkout-form">
-            <h2 class="text-2xl font-bold mb-6">Secure Checkout</h2>
+            <div class="flex justify-between items-start mb-6">
+                <div>
+                    <h2 class="text-2xl font-bold">Secure Checkout</h2>
+                    <p class="text-gray-500 mt-1 text-sm">Complete your Enterprise subscription.</p>
+                </div>
+                <button onclick="closeCheckout()" class="text-gray-500 hover:text-white"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
+            </div>
             <div class="space-y-4">
                 <div>
-                    <label class="block text-xs font-mono text-gray-500 mb-1">CARD NUMBER</label>
-                    <input id="cc-num" type="text" placeholder="4242 4242 4242 4242" class="w-full bg-[#18181b] border border-[#27272a] rounded-lg px-4 py-2.5 text-sm font-mono outline-none focus:border-blue-500">
+                    <label class="block text-[11px] font-mono text-gray-500 uppercase tracking-wider mb-2">Card Number</label>
+                    <input id="cc-num" type="text" placeholder="4242 4242 4242 4242" class="luxury-input font-mono">
                 </div>
                 <div class="flex gap-4">
                     <div class="flex-1">
-                        <label class="block text-xs font-mono text-gray-500 mb-1">EXPIRY</label>
-                        <input id="cc-exp" type="text" placeholder="MM/YY" class="w-full bg-[#18181b] border border-[#27272a] rounded-lg px-4 py-2.5 text-sm font-mono outline-none focus:border-blue-500">
+                        <label class="block text-[11px] font-mono text-gray-500 uppercase tracking-wider mb-2">Expiry</label>
+                        <input id="cc-exp" type="text" placeholder="MM/YY" class="luxury-input font-mono">
                     </div>
                     <div class="flex-1">
-                        <label class="block text-xs font-mono text-gray-500 mb-1">CVC</label>
-                        <input id="cc-cvc" type="text" placeholder="123" class="w-full bg-[#18181b] border border-[#27272a] rounded-lg px-4 py-2.5 text-sm font-mono outline-none focus:border-blue-500">
+                        <label class="block text-[11px] font-mono text-gray-500 uppercase tracking-wider mb-2">CVC</label>
+                        <input id="cc-cvc" type="text" placeholder="123" class="luxury-input font-mono">
                     </div>
                 </div>
-                <button onclick="processMockPayment()" class="w-full bg-emerald-600 hover:bg-emerald-700 rounded-lg py-3 font-semibold mt-4">Pay $49.00</button>
+                <button onclick="processMockPayment()" class="luxury-btn-accent mt-2">Pay $49.00</button>
+                <p class="text-center text-xs text-gray-600 mt-2">🔒 Payments secured by MockStripe</p>
             </div>
         </div>
         <div id="checkout-success" class="hidden text-center py-8">
-            <div class="w-16 h-16 bg-emerald-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-                <svg class="w-8 h-8 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+            <div class="w-20 h-20 bg-emerald-500/10 rounded-full flex items-center justify-center mx-auto mb-5">
+                <svg class="w-10 h-10 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
             </div>
             <h2 class="text-2xl font-bold">Payment Successful</h2>
             <p class="text-gray-500 mt-2">Your account has been upgraded to Enterprise.</p>
-            <button onclick="closeCheckout()" class="mt-6 bg-[#18181b] border border-[#27272a] rounded-lg px-6 py-2 text-sm">Close</button>
+            <button onclick="closeCheckout()" class="luxury-btn-secondary mt-6">Close</button>
         </div>
     </div>
 </div>
@@ -831,7 +1055,9 @@ def get_frontend_html() -> str:
         const reader = new FileReader();
         reader.onload = (e) => {
             const b64 = e.target.result;
-            $('terminal-output').innerHTML = '<span class="text-gray-500">> Processing image...</span>';
+            $('terminal-output').innerHTML = '<span class="text-amber-400">> Initializing neural parser...</span>\n<span class="text-gray-600">> Processing image data...</span>';
+            $('terminal-status').innerText = 'Processing';
+            $('terminal-status').classList.add('text-amber-400');
             bridge.parse(b64);
         };
         reader.readAsDataURL(file);
@@ -840,7 +1066,7 @@ def get_frontend_html() -> str:
     function sendChat() {
         const msg = $('chat-input').value;
         if(!msg) return;
-        $('chat-log').innerHTML += `<div class="bg-blue-600/20 text-blue-300 p-2 rounded-lg ml-4">${msg}</div>`;
+        $('chat-log').innerHTML += `<div class="flex justify-end"><div class="bg-blue-600/20 border border-blue-600/30 text-blue-300 p-2.5 rounded-xl rounded-br-sm max-w-[80%]">${msg}</div></div>`;
         $('chat-input').value = '';
         bridge.chat(msg);
     }
@@ -863,7 +1089,7 @@ def get_frontend_html() -> str:
         // Chat Response
         let chatRes = $('bridge-chat-output').value;
         if(chatRes && chatRes !== "") {
-            $('chat-log').innerHTML += `<div class="bg-[#18181b] text-gray-300 p-2 rounded-lg mr-4">${chatRes.replace(/\\n/g, '<br>')}</div>`;
+            $('chat-log').innerHTML += `<div class="flex justify-start"><div class="bg-[#101015] border border-[#1F1F25] text-gray-300 p-2.5 rounded-xl rounded-bl-sm max-w-[80%]">${chatRes.replace(/\\n/g, '<br>')}</div></div>`;
             $('chat-log').scrollTop = $('chat-log').scrollHeight;
             $('bridge-chat-output').value = "";
         }
@@ -884,9 +1110,8 @@ def get_frontend_html() -> str:
             $('auth-view').classList.add('hidden');
             $('dashboard-view').classList.remove('hidden');
             $('chat-toggle').classList.remove('hidden');
-            $('user-badge').textContent = data.email;
-            $('user-badge').classList.remove('text-gray-400');
-            $('user-badge').classList.add('text-emerald-400');
+            
+            $('user-badge').innerHTML = `<span class="w-2 h-2 bg-emerald-500 rounded-full shadow-sm shadow-emerald-500/50"></span><span class="text-emerald-400">${data.email}</span>`;
         } else {
             alert(data.message || 'Authentication failed');
         }
@@ -894,7 +1119,10 @@ def get_frontend_html() -> str:
 
     function handleParseResponse(data) {
         if(data.error) {
-            $('terminal-output').innerHTML = `<span class="text-red-500">> Error: ${data.error}</span>`;
+            $('terminal-output').innerHTML = `<span class="text-red-400">> Error: ${data.error}</span>`;
+            $('terminal-status').innerText = 'Error';
+            $('terminal-status').classList.remove('text-amber-400');
+            $('terminal-status').classList.add('text-red-400');
             return;
         }
 
@@ -914,24 +1142,42 @@ def get_frontend_html() -> str:
         $('stat-acc').textContent = stats.acc + '%';
 
         // Update Terminal
+        $('terminal-status').innerText = 'Complete';
+        $('terminal-status').classList.remove('text-amber-400');
+        $('terminal-status').classList.add('text-emerald-400');
+        
         const jsonStr = JSON.stringify(data, null, 2);
-        $('terminal-output').innerHTML = `<span class="text-gray-500">> Parsing complete. Confidence: ${stats.acc}%</span>\n<span class="text-emerald-400">${jsonStr.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>`;
+        $('terminal-output').innerHTML = `<span class="text-emerald-400">> Parsing complete. Confidence: ${stats.acc}%</span>\n<span class="text-gray-500">> Extracted Data Structure:</span>\n<span class="text-gray-300">${jsonStr.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>`;
 
-        // Update Compliance
-        const valColor = comp.cross_field_validation.includes('WARNING') ? 'text-red-400' : 'text-emerald-400';
-        const dupText = comp.duplicate_detected ? '<span class="text-red-400">Detected</span>' : (comp.registered_user ? '<span class="text-emerald-400">None</span>' : '<span class="text-gray-500">🔒 Requires Registration</span>');
+        // Update Compliance Badges
+        const valBg = comp.cross_field_validation.includes('WARNING') ? 'bg-red-500/10 text-red-400' : 'bg-emerald-500/10 text-emerald-400';
+        const valText = comp.cross_field_validation.includes('WARNING') ? 'WARNING' : 'PASSED';
+        
+        const dupBg = comp.duplicate_detected ? 'bg-red-500/10 text-red-400' : (comp.registered_user ? 'bg-emerald-500/10 text-emerald-400' : 'bg-gray-500/10 text-gray-500');
+        const dupText = comp.duplicate_detected ? 'DETECTED' : (comp.registered_user ? 'CLEAN' : 'LOCKED');
+        
+        const revBg = comp.human_review_required ? 'bg-amber-500/10 text-amber-400' : 'bg-emerald-500/10 text-emerald-400';
+        const revText = comp.human_review_required ? 'YES' : 'NO';
         
         $('compliance-status').innerHTML = `
-            <div class="flex justify-between"><span class="text-gray-500">Validation</span><span class="${valColor}">${comp.cross_field_validation}</span></div>
-            <div class="flex justify-between"><span class="text-gray-500">Duplicates</span>${dupText}</div>
-            <div class="flex justify-between"><span class="text-gray-500">Review Req</span><span class="${comp.human_review_required ? 'text-yellow-400' : 'text-emerald-400'}">${comp.human_review_required ? 'Yes' : 'No'}</span></div>
+            <div class="flex justify-between items-center pb-3 border-b border-[#1F1F25]">
+                <span class="text-sm text-gray-400">Validation</span>
+                <span class="status-badge ${valBg}">${valText}</span>
+            </div>
+            <div class="flex justify-between items-center pb-3 border-b border-[#1F1F25]">
+                <span class="text-sm text-gray-400">Duplicates</span>
+                <span class="status-badge ${dupBg}">${dupText}</span>
+            </div>
+            <div class="flex justify-between items-center">
+                <span class="text-sm text-gray-400">Review Required</span>
+                <span class="status-badge ${revBg}">${revText}</span>
+            </div>
         `;
     }
 
     function processMockPayment() {
         $('checkout-form').classList.add('hidden');
         $('checkout-success').classList.remove('hidden');
-        // In a real app, we'd update the DB via bridge
     }
 </script>
 </body>
@@ -1015,4 +1261,5 @@ def build_app():
 
 if __name__ == "__main__":
     app = build_app()
-    app.launch(server_name="0.0.0.0", server_port=7860, show_error=True, css=CUSTOM_CSS)
+    app.launch(server_name="0.0.0.0", server_port=7860, show_error=True, css=CUSTOM_CSS)
+```