Update app.py

app.py

@@ -110,26 +110,27 @@ html, body {
 }
 
 /* ========================================
-   Cards & Groups - Consistent with About Section
+   Cards & Groups - Glass Morphism Style
    ======================================== */
 .group {
     background: var(--bg-card) !important;
     border: 1px solid var(--border-color) !important;
-    border-radius: 20px !important;
-    padding: 32px !important;
+    border-radius: var(--radius-xl) !important;
+    padding: 28px !important;
     margin-bottom: 24px !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
-    backdrop-filter: none !important;
+    box-shadow: var(--shadow-md) !important;
+    backdrop-filter: blur(10px) !important;
     transition: var(--transition);
 }
 
 .group:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 40px rgba(139, 92, 246, 0.15) !important;
+    box-shadow: var(--shadow-lg), var(--shadow-glow) !important;
+    transform: translateY(-2px);
 }
 
 .dark .group {
-    background: var(--bg-card) !important;
-    border: 1px solid var(--border-color) !important;
+    background: linear-gradient(145deg, var(--bg-card) 0%, rgba(28, 28, 31, 0.8) 100%) !important;
+    border: 1px solid rgba(139, 92, 246, 0.15) !important;
 }
 
 /* ========================================
@@ -198,15 +199,16 @@ button.secondary:hover {
    Tabs - Premium Look
    ======================================== */
 .tabs {
-    background: transparent !important;
+    background: var(--bg-card) !important;
     border: 1px solid var(--border-color) !important;
-    border-radius: 16px !important;
+    border-radius: var(--radius-xl) !important;
     overflow: hidden !important;
-    box-shadow: none !important;
+    box-shadow: var(--shadow-md) !important;
 }
 
 .dark .tabs {
-    border-color: var(--border-color) !important;
+    background: linear-gradient(145deg, var(--bg-card) 0%, rgba(28, 28, 31, 0.9) 100%) !important;
+    border: 1px solid rgba(74, 222, 128, 0.15) !important;
 }
 
 .tab-nav {
@@ -241,24 +243,24 @@ button.secondary:hover {
 
 .tabitem {
     background: var(--bg-secondary) !important;
-    padding: 24px !important;
+    padding: 28px !important;
 }
 
 /* ========================================
    Accordion - Expandable Sections
    ======================================== */
 .accordion {
-    background: var(--bg-tertiary) !important;
+    background: var(--bg-card) !important;
     border: 1px solid var(--border-color) !important;
-    border-radius: 14px !important;
-    margin-top: 16px !important;
+    border-radius: var(--radius-lg) !important;
+    margin-top: 20px !important;
     overflow: hidden !important;
     transition: var(--transition);
 }
 
 .dark .accordion {
-    background: var(--bg-tertiary) !important;
-    border: 1px solid rgba(249, 115, 22, 0.2) !important;
+    background: linear-gradient(145deg, rgba(28, 28, 31, 0.8), rgba(39, 39, 42, 0.5)) !important;
+    border: 1px solid rgba(249, 115, 22, 0.15) !important;
 }
 
 .accordion:hover {
@@ -382,30 +384,6 @@ button.secondary:hover {
     padding: 0 !important;
 }
 
-/* Header Row - Remove any background and styling */
-.header-row,
-.header-row > *,
-.header-column,
-.header-column > * {
-    background: transparent !important;
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-/* Remove default Gradio block backgrounds for header area */
-.header-row .block,
-.header-row .panel,
-.header-column .block,
-.header-column .panel {
-    background: transparent !important;
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-}
-
 /* Container max width */
 .gradio-container > .main {
     padding: 0 !important;
@@ -432,10 +410,100 @@ button.secondary:hover {
 }
 
 /* ========================================
-   Custom Card Classes - Matching About Section Style
+   Special Elements
    ======================================== */
+/* Hero section styling */
+.hero-card {
+    background: linear-gradient(145deg, var(--bg-card), var(--bg-secondary)) !important;
+    border: 1px solid var(--border-color) !important;
+}
+
+.dark .hero-card {
+    background: linear-gradient(145deg, rgba(28, 28, 31, 0.9), rgba(18, 18, 20, 0.9)) !important;
+    border: 1px solid rgba(139, 92, 246, 0.2) !important;
+}
+
+/* Terminal styling */
+.terminal-header {
+    background: linear-gradient(90deg, var(--bg-tertiary), var(--bg-secondary)) !important;
+}
+
+.dark .terminal-header {
+    background: linear-gradient(90deg, rgba(28, 28, 31, 0.9), rgba(24, 24, 27, 0.9)) !important;
+}
+
+/* Status indicator */
+.status-online {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--accent-green);
+    animation: pulse 2s infinite;
+    box-shadow: 0 0 10px var(--accent-green);
+}
+
+/* Badge styling */
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 14px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    transition: var(--transition);
+}
+
+.badge-purple {
+    background: var(--accent-purple-light);
+    color: var(--accent-purple);
+    border: 1px solid rgba(139, 92, 246, 0.3);
+}
+
+.badge-green {
+    background: var(--accent-green-light);
+    color: var(--accent-green);
+    border: 1px solid rgba(34, 197, 94, 0.3);
+}
+
+.badge-orange {
+    background: var(--accent-orange-light);
+    color: var(--accent-orange);
+    border: 1px solid rgba(249, 115, 22, 0.3);
+}
 
-/* Base card styling - matching About section exactly */
+/* Feature card */
+.feature-card {
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius-lg) !important;
+    padding: 16px !important;
+    transition: var(--transition);
+}
+
+.feature-card:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--accent-purple) !important;
+}
+
+/* Icon box */
+.icon-box {
+    width: 44px;
+    height: 44px;
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition);
+}
+
+.icon-box:hover {
+    transform: scale(1.1);
+}
+
+/* ========================================
+   Custom Card Classes - Matching About Section Style
+   ======================================== */
 .command-center-card,
 .pipeline-status-card,
 .campaign-output-card {
@@ -445,60 +513,44 @@ button.secondary:hover {
     padding: 32px !important;
     margin-bottom: 24px !important;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
-    transition: all 0.3s ease !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
 .command-center-card:hover,
 .pipeline-status-card:hover,
 .campaign-output-card:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 40px rgba(139, 92, 246, 0.15) !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 40px rgba(139, 92, 246, 0.1) !important;
 }
 
-/* Dark mode - matching About section dark styling */
+/* Dark mode for all business cards */
 .dark .command-center-card,
 .dark .pipeline-status-card,
-.dark .campaign-output-card,
-[data-theme="dark"] .command-center-card,
-[data-theme="dark"] .pipeline-status-card,
-[data-theme="dark"] .campaign-output-card {
+.dark .campaign-output-card {
     background: var(--bg-card, #1c1c1f) !important;
-    border: 1px solid var(--border-color, #27272a) !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
-}
-
-/* Command Center - Purple accent in dark mode */
-.dark .command-center-card,
-[data-theme="dark"] .command-center-card {
-    border-color: rgba(139, 92, 246, 0.2) !important;
+    border: 1px solid rgba(139, 92, 246, 0.15) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
 }
 
-/* Pipeline Status - Green accent in dark mode */
-.dark .pipeline-status-card,
-[data-theme="dark"] .pipeline-status-card {
-    border-color: rgba(34, 197, 94, 0.2) !important;
+.dark .command-center-card:hover,
+.dark .pipeline-status-card:hover,
+.dark .campaign-output-card:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4), 0 0 60px rgba(139, 92, 246, 0.2) !important;
+    border-color: rgba(139, 92, 246, 0.25) !important;
 }
 
-/* Campaign Output - Cyan/Green accent in dark mode */
-.dark .campaign-output-card,
-[data-theme="dark"] .campaign-output-card {
-    border-color: rgba(6, 182, 212, 0.2) !important;
+/* Command Center - Purple accent border on hover */
+.command-center-card:hover {
+    border-color: rgba(139, 92, 246, 0.3) !important;
 }
 
-/* Override default Gradio group styles for our custom cards */
-.command-center-card.group,
-.pipeline-status-card.group,
-.campaign-output-card.group {
-    background: var(--bg-card, #ffffff) !important;
-    border: 1px solid var(--border-color, #e4e4e7) !important;
-    border-radius: 20px !important;
-    padding: 32px !important;
-    backdrop-filter: none !important;
+/* Pipeline Status - Green accent border on hover */
+.pipeline-status-card:hover {
+    border-color: rgba(34, 197, 94, 0.3) !important;
 }
 
-.dark .command-center-card.group,
-.dark .pipeline-status-card.group,
-.dark .campaign-output-card.group {
-    background: var(--bg-card, #1c1c1f) !important;
+/* Campaign Output - Cyan accent border on hover */
+.campaign-output-card:hover {
+    border-color: rgba(6, 182, 212, 0.3) !important;
 }
 
 /* Terminal content styling */
@@ -514,49 +566,81 @@ button.secondary:hover {
     line-height: 1.6 !important;
 }
 
-.dark .terminal-content,
-[data-theme="dark"] .terminal-content {
-    background: var(--bg-tertiary, #27272a) !important;
-    border-color: var(--border-color, #3f3f46) !important;
+.dark .terminal-content {
+    background: rgba(39, 39, 42, 0.5) !important;
+    border-color: rgba(63, 63, 70, 0.5) !important;
 }
 
-/* Ensure tabs inside campaign output card match styling */
+/* Tabs inside Campaign Output - matching card style */
 .campaign-output-card .tabs {
     background: transparent !important;
-    border: 1px solid var(--border-color, #e4e4e7) !important;
-    border-radius: 16px !important;
-    overflow: hidden !important;
+    border: none !important;
     box-shadow: none !important;
+    margin-top: 0 !important;
 }
 
 .campaign-output-card .tab-nav {
     background: var(--bg-tertiary, #f5f5f5) !important;
-    border-bottom: 1px solid var(--border-color, #e4e4e7) !important;
-    padding: 12px 16px !important;
+    border: 1px solid var(--border-color, #e4e4e7) !important;
+    border-radius: 14px !important;
+    padding: 8px !important;
+    gap: 6px !important;
+    margin-bottom: 16px !important;
 }
 
-.dark .campaign-output-card .tabs,
-[data-theme="dark"] .campaign-output-card .tabs {
-    border-color: var(--border-color, #3f3f46) !important;
+.dark .campaign-output-card .tab-nav {
+    background: rgba(39, 39, 42, 0.4) !important;
+    border-color: rgba(63, 63, 70, 0.4) !important;
 }
 
-.dark .campaign-output-card .tab-nav,
-[data-theme="dark"] .campaign-output-card .tab-nav {
-    background: var(--bg-tertiary, #27272a) !important;
-    border-color: var(--border-color, #3f3f46) !important;
+.campaign-output-card .tab-nav button {
+    background: transparent !important;
+    border: none !important;
+    border-radius: 10px !important;
+    color: var(--text-muted, #71717a) !important;
+    font-weight: 500 !important;
+    font-size: 13px !important;
+    padding: 10px 16px !important;
+    transition: all 0.2s ease !important;
+}
+
+.campaign-output-card .tab-nav button:hover {
+    background: rgba(139, 92, 246, 0.1) !important;
+    color: var(--accent-purple, #8b5cf6) !important;
+}
+
+.campaign-output-card .tab-nav button.selected {
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(34, 197, 94, 0.1)) !important;
+    color: var(--accent-purple, #8b5cf6) !important;
+    font-weight: 600 !important;
+    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.15) !important;
 }
 
 .campaign-output-card .tabitem {
-    background: var(--bg-secondary, #ffffff) !important;
+    background: var(--bg-tertiary, #f5f5f5) !important;
+    border: 1px solid var(--border-color, #e4e4e7) !important;
+    border-radius: 14px !important;
     padding: 24px !important;
+    min-height: 300px !important;
 }
 
-.dark .campaign-output-card .tabitem,
-[data-theme="dark"] .campaign-output-card .tabitem {
-    background: var(--bg-secondary, #18181b) !important;
+.dark .campaign-output-card .tabitem {
+    background: rgba(39, 39, 42, 0.3) !important;
+    border-color: rgba(63, 63, 70, 0.4) !important;
 }
 
-/* Form elements inside cards - consistent styling */
+/* Markdown content inside tabs */
+.campaign-output-card .markdown {
+    color: var(--text-primary, #18181b) !important;
+    font-size: 14px !important;
+    line-height: 1.7 !important;
+}
+
+.dark .campaign-output-card .markdown {
+    color: var(--text-primary, #fafafa) !important;
+}
+
+/* Form elements inside cards */
 .command-center-card input,
 .command-center-card textarea,
 .command-center-card select {
@@ -568,11 +652,11 @@ button.secondary:hover {
 .dark .command-center-card input,
 .dark .command-center-card textarea,
 .dark .command-center-card select {
-    background: var(--bg-tertiary, #27272a) !important;
-    border-color: var(--border-color, #3f3f46) !important;
+    background: rgba(39, 39, 42, 0.5) !important;
+    border-color: rgba(63, 63, 70, 0.5) !important;
 }
 
-/* Accordion inside command center - matching style */
+/* Accordion styling inside cards */
 .command-center-card .accordion {
     background: var(--bg-tertiary, #f5f5f5) !important;
     border: 1px solid var(--border-color, #e4e4e7) !important;
@@ -581,105 +665,51 @@ button.secondary:hover {
 }
 
 .dark .command-center-card .accordion {
-    background: var(--bg-tertiary, #27272a) !important;
-    border-color: rgba(249, 115, 22, 0.2) !important;
-}
-
-/* Button row spacing */
-.command-center-card .row {
-    margin-top: 20px !important;
-}
-
-/* ========================================
-   Special Elements
-   ======================================== */
-/* Hero section styling */
-.hero-card {
-    background: linear-gradient(145deg, var(--bg-card), var(--bg-secondary)) !important;
-    border: 1px solid var(--border-color) !important;
+    background: rgba(39, 39, 42, 0.4) !important;
+    border-color: rgba(249, 115, 22, 0.15) !important;
 }
 
-.dark .hero-card {
-    background: linear-gradient(145deg, rgba(28, 28, 31, 0.9), rgba(18, 18, 20, 0.9)) !important;
-    border: 1px solid rgba(139, 92, 246, 0.2) !important;
-}
-
-/* Terminal styling */
-.terminal-header {
-    background: linear-gradient(90deg, var(--bg-tertiary), var(--bg-secondary)) !important;
-}
-
-.dark .terminal-header {
-    background: linear-gradient(90deg, rgba(28, 28, 31, 0.9), rgba(24, 24, 27, 0.9)) !important;
-}
-
-/* Status indicator */
-.status-online {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: var(--accent-green);
-    animation: pulse 2s infinite;
-    box-shadow: 0 0 10px var(--accent-green);
-}
-
-/* Badge styling */
-.badge {
-    display: inline-flex;
-    align-items: center;
-    padding: 6px 14px;
-    border-radius: 20px;
-    font-size: 12px;
-    font-weight: 600;
-    transition: var(--transition);
+.command-center-card .accordion:hover {
+    border-color: rgba(249, 115, 22, 0.3) !important;
 }
 
-.badge-purple {
-    background: var(--accent-purple-light);
-    color: var(--accent-purple);
-    border: 1px solid rgba(139, 92, 246, 0.3);
-}
-
-.badge-green {
-    background: var(--accent-green-light);
-    color: var(--accent-green);
-    border: 1px solid rgba(34, 197, 94, 0.3);
-}
-
-.badge-orange {
-    background: var(--accent-orange-light);
-    color: var(--accent-orange);
-    border: 1px solid rgba(249, 115, 22, 0.3);
+/* Buttons inside cards */
+.command-center-card button.primary {
+    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    color: white !important;
+    font-weight: 600 !important;
+    padding: 14px 24px !important;
+    box-shadow: 0 4px 6px rgba(139, 92, 246, 0.25), 0 0 20px rgba(139, 92, 246, 0.2) !important;
+    transition: all 0.3s ease !important;
 }
 
-/* Feature card */
-.feature-card {
-    background: var(--bg-secondary) !important;
-    border: 1px solid var(--border-color) !important;
-    border-radius: var(--radius-lg) !important;
-    padding: 16px !important;
-    transition: var(--transition);
+.command-center-card button.primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 12px rgba(139, 92, 246, 0.35), 0 0 30px rgba(139, 92, 246, 0.3) !important;
 }
 
-.feature-card:hover {
-    transform: translateY(-3px);
-    box-shadow: var(--shadow-md);
-    border-color: var(--accent-purple) !important;
+.command-center-card button.secondary {
+    background: var(--bg-tertiary, #f5f5f5) !important;
+    border: 1px solid var(--border-color, #e4e4e7) !important;
+    border-radius: 12px !important;
+    color: var(--text-secondary, #52525b) !important;
+    font-weight: 500 !important;
+    padding: 14px 24px !important;
+    transition: all 0.3s ease !important;
 }
 
-/* Icon box */
-.icon-box {
-    width: 44px;
-    height: 44px;
-    border-radius: var(--radius-md);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: var(--transition);
+.dark .command-center-card button.secondary {
+    background: rgba(39, 39, 42, 0.5) !important;
+    border-color: rgba(63, 63, 70, 0.5) !important;
+    color: var(--text-secondary, #a1a1aa) !important;
 }
 
-.icon-box:hover {
-    transform: scale(1.1);
+.command-center-card button.secondary:hover {
+    background: var(--bg-secondary, #ffffff) !important;
+    border-color: var(--accent-purple, #8b5cf6) !important;
+    color: var(--accent-purple, #8b5cf6) !important;
 }
 """
 
@@ -722,7 +752,7 @@ def format_logs() -> str:
     for log in current_job["logs"]:
         color = color_map.get(log["color"], "var(--text-primary, #18181b)")
         lines.append(
-            f'<div style="margin: 6px 0; padding: 4px 10px;">'
+            f'<div style="margin: 6px 0; padding: 4px 0;">'
             f'<span style="color: var(--text-muted, #71717a);">›</span> '
             f'<span style="color: {color}; font-weight: 600;">[{log["agent"]}]</span> '
             f'<span style="color: var(--text-secondary, #52525b);">{log["message"]}</span>'
@@ -733,20 +763,20 @@ def format_logs() -> str:
 
 def get_progress_html(progress: int, status: str) -> str:
     """Generate progress bar HTML."""
-    status_styles = {
-        "idle": ("#71717a", "linear-gradient(135deg, rgba(113, 113, 122, 0.15), rgba(113, 113, 122, 0.05))", "rgba(113, 113, 122, 0.25)"),
-        "analyzing": ("#8b5cf6", "linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05))", "rgba(139, 92, 246, 0.25)"),
-        "generating": ("#22c55e", "linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05))", "rgba(34, 197, 94, 0.25)"),
-        "completed": ("#22c55e", "linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05))", "rgba(34, 197, 94, 0.25)"),
-        "failed": ("#ef4444", "linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05))", "rgba(239, 68, 68, 0.25)"),
+    status_colors = {
+        "idle": ("var(--text-muted, #71717a)", "var(--border-color, #e4e4e7)"),
+        "analyzing": ("#8b5cf6", "rgba(139, 92, 246, 0.2)"),
+        "generating": ("#22c55e", "rgba(34, 197, 94, 0.2)"),
+        "completed": ("#22c55e", "rgba(34, 197, 94, 0.2)"),
+        "failed": ("#ef4444", "rgba(239, 68, 68, 0.2)"),
     }
-    text_color, bg_gradient, border_color = status_styles.get(status, status_styles["idle"])
+    text_color, bg_color = status_colors.get(status, status_colors["idle"])
     
     return f"""
-    <div style="margin-bottom: 24px; padding: 10px;">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
-            <span style="color: #8b5cf6; font-weight: 600; font-size: 14px; padding-left: 10px;">Pipeline Status</span>
-            <span style="color: {text_color}; font-size: 13px; padding: 8px 16px; background: {bg_gradient}; border: 1px solid {border_color}; border-radius: 20px; font-weight: 600; text-transform: capitalize;">{status}</span>
+    <div style="margin-bottom: 16px;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+            <span style="color: #8b5cf6; font-weight: 600; font-size: 14px;">Pipeline Status</span>
+            <span style="color: {text_color}; font-size: 12px; padding: 4px 12px; background: {bg_color}; border: 1px solid {text_color}33; border-radius: 16px; font-weight: 500; text-transform: capitalize;">{status}</span>
         </div>
         <div style="width: 100%; height: 10px; background: var(--bg-tertiary, #f5f5f5); border-radius: 5px; overflow: hidden; border: 1px solid var(--border-color, #e4e4e7);">
             <div style="width: {progress}%; height: 100%; background: linear-gradient(90deg, #8b5cf6, #22c55e); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 5px;"></div>
@@ -1228,7 +1258,7 @@ def create_app():
         panel_background_fill_dark="#1c1c1f",
         # Borders
         block_border_color="#e4e4e7",
-        block_border_color_dark="#27272a",
+        block_border_color_dark="rgba(139, 92, 246, 0.2)",
         border_color_primary="#8b5cf6",
         border_color_primary_dark="#a78bfa",
         # Inputs
@@ -1258,7 +1288,7 @@ def create_app():
         block_shadow="0 4px 6px -1px rgba(0, 0, 0, 0.1)",
         block_shadow_dark="0 4px 6px -1px rgba(0, 0, 0, 0.4)",
         # Radius
-        block_radius="20px",
+        block_radius="16px",
         button_large_radius="12px",
         button_small_radius="8px",
     )
@@ -1278,22 +1308,22 @@ def create_app():
         app.theme = custom_theme
         app.css = CUSTOM_CSS
         app.js = DARK_MODE_JS
-        # Header - Clean, no background
-        with gr.Row(elem_classes=["header-row"]):
-            with gr.Column(elem_classes=["header-column"]):
+        # Header
+        with gr.Row():
+            with gr.Column():
                 gr.HTML(
                     """
-                    <div style="display: flex; align-items: center; justify-content: space-between; padding: 24px 0; margin-bottom: 24px;">
+                    <div style="display: flex; align-items: center; justify-content: space-between; padding: 20px 0; margin-bottom: 8px;">
                         <div style="display: flex; align-items: center; gap: 16px;">
-                            <div style="width: 56px; height: 56px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(34, 197, 94, 0.1)); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(139, 92, 246, 0.15);">
-                                <span style="font-size: 28px;">✨</span>
+                            <div style="width: 52px; height: 52px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(34, 197, 94, 0.1)); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);">
+                                <span style="font-size: 26px;">✨</span>
                             </div>
                             <div>
-                                <h1 style="margin: 0; background: linear-gradient(135deg, #8b5cf6, #22c55e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 32px; font-weight: 800; letter-spacing: -0.5px;">DevRel Campaign Generator</h1>
-                                <p style="margin: 6px 0 0 0; color: var(--text-muted, #71717a); font-size: 14px;">AI-Powered Content for Developer Relations</p>
+                                <h1 style="margin: 0; background: linear-gradient(135deg, #8b5cf6, #22c55e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 28px; font-weight: 800; letter-spacing: -0.5px;">DevRel Campaign Generator</h1>
+                                <p style="margin: 4px 0 0 0; color: var(--text-muted, #71717a); font-size: 14px;">AI-Powered Content for Developer Relations</p>
                             </div>
                         </div>
-                        <div style="display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05)); border: 1px solid rgba(34, 197, 94, 0.25); border-radius: 24px;">
+                        <div style="display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: 24px;">
                             <div style="width: 10px; height: 10px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);"></div>
                             <span style="font-size: 13px; font-weight: 600; color: #22c55e;">System Online</span>
                         </div>
@@ -1312,7 +1342,7 @@ def create_app():
             with gr.Column():
                 gr.HTML(
                     """
-                    <div style="background: var(--bg-card, #ffffff); border: 1px solid var(--border-color, #e4e4e7); border-radius: 20px; padding: 32px; margin-bottom: 24px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.3s ease;">
+                    <div style="background: var(--bg-card, #ffffff); border: 1px solid var(--border-color, #e4e4e7); border-radius: 20px; padding: 32px; margin-bottom: 24px; box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1)); transition: all 0.3s ease;">
                         <!-- Header -->
                         <div style="display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px;">
                             <div style="display: flex; align-items: center; gap: 16px;">
@@ -1428,15 +1458,13 @@ def create_app():
                 with gr.Group(elem_classes=["command-center-card"]):
                     gr.HTML(
                         """
-                        <div style="display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px;">
-                            <div style="display: flex; align-items: center; gap: 16px; padding: 15px;">
-                                <div style="width: 56px; height: 56px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05)); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(139, 92, 246, 0.15);">
-                                    <span style="font-size: 28px;">🐙</span>
-                                </div>
-                                <div>
-                                    <h2 style="margin: 0; font-size: 24px; font-weight: 700; color: var(--text-primary, #18181b);">Command Center</h2>
-                                    <p style="margin: 6px 0 0 0; color: var(--text-muted, #71717a); font-size: 14px;">Configure and launch your campaign</p>
-                                </div>
+                        <div style="display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color, #e4e4e7);">
+                            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05)); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);">
+                                <span style="font-size: 24px;">🐙</span>
+                            </div>
+                            <div>
+                                <h3 style="margin: 0; font-size: 20px; font-weight: 700; color: var(--text-primary, #18181b);">Command Center</h3>
+                                <p style="margin: 4px 0 0 0; color: var(--text-muted, #71717a); font-size: 13px;">Configure and launch your campaign</p>
                             </div>
                         </div>
                         """
@@ -1463,7 +1491,7 @@ def create_app():
                     # Settings Accordion for API Keys
                     with gr.Accordion("⚙️ Settings (API Keys)", open=False):
                         gr.HTML(
-                            '<div style="padding: 12px 0; color: var(--text-muted, #71717a); font-size: 14px;">💡 Add your own API keys if the default quota is exhausted</div>'
+                            '<div style="padding: 12px 0; color: var(--text-muted, #71717a); font-size: 13px;">💡 Add your own API keys if the default quota is exhausted</div>'
                         )
                         anthropic_key = gr.Textbox(
                             label="Anthropic API Key (Claude)",
@@ -1478,7 +1506,7 @@ def create_app():
                             lines=1,
                         )
                         gr.HTML(
-                            '''<div style="padding: 12px 0; color: var(--text-muted, #71717a); font-size: 14px;">
+                            '''<div style="padding: 12px 0; color: var(--text-muted, #71717a); font-size: 13px;">
                             <p style="margin: 0 0 8px 0;">🔑 <a href="https://console.anthropic.com" target="_blank" style="color: #8b5cf6; text-decoration: none; font-weight: 500;">Get Anthropic API Key →</a></p>
                             <p style="margin: 0;">🔑 <a href="https://github.com/settings/tokens" target="_blank" style="color: #22c55e; text-decoration: none; font-weight: 500;">Get GitHub Token →</a></p>
                             </div>'''
@@ -1496,15 +1524,13 @@ def create_app():
                 with gr.Group(elem_classes=["pipeline-status-card"]):
                     gr.HTML(
                         """
-                        <div style="display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px;">
-                            <div style="display: flex; align-items: center; gap: 16px; padding: 10px;">
-                                <div style="width: 56px; height: 56px; background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05)); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(34, 197, 94, 0.15);">
-                                    <span style="font-size: 28px;">📊</span>
-                                </div>
-                                <div>
-                                    <h2 style="margin: 0; font-size: 24px; font-weight: 700; color: var(--text-primary, #18181b);">Pipeline Status</h2>
-                                    <p style="margin: 6px 0 0 0; color: var(--text-muted, #71717a); font-size: 14px;">Real-time generation progress</p>
-                                </div>
+                        <div style="display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color, #e4e4e7);">
+                            <div style="width: 44px; height: 44px; background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05)); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(34, 197, 94, 0.15);">
+                                <span style="font-size: 22px;">📊</span>
+                            </div>
+                            <div>
+                                <h3 style="margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary, #18181b);">Pipeline Status</h3>
+                                <p style="margin: 4px 0 0 0; color: var(--text-muted, #71717a); font-size: 12px;">Real-time generation progress</p>
                             </div>
                         </div>
                         """
@@ -1516,8 +1542,8 @@ def create_app():
                     # Event Log Section Header
                     gr.HTML(
                         """
-                        <div style="padding-top: 0px; padding-left: 20px; border-top: 1px solid var(--border-color, #e4e4e7); margin-top: 14px;">
-                            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
+                        <div style="margin-top: 16px; border-top: 1px solid var(--border-color, #e4e4e7); padding-top: 16px;">
+                            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
                                 <div style="display: flex; align-items: center; gap: 12px;">
                                     <div style="display: flex; gap: 6px;">
                                         <div style="width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);"></div>
@@ -1526,9 +1552,9 @@ def create_app():
                                     </div>
                                     <span style="font-weight: 600; color: var(--text-primary, #18181b); font-size: 14px;">Event Log</span>
                                 </div>
-                                <div style="margin: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05)); border: 1px solid rgba(34, 197, 94, 0.25); border-radius: 20px;">
+                                <div style="display: flex; align-items: center; gap: 6px; padding: 4px 12px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.25); border-radius: 16px;">
                                     <div style="width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);"></div>
-                                    <span style="color: #22c55e; font-size: 13px; font-weight: 600;">LIVE</span>
+                                    <span style="color: #22c55e; font-size: 11px; font-weight: 600;">LIVE</span>
                                 </div>
                             </div>
                         </div>
@@ -1544,12 +1570,12 @@ def create_app():
                     # Footer
                     gr.HTML(
                         """
-                        <div style="display: flex; align-items: center; justify-content: space-between; padding-left: 10px; padding-top: 16px; border-top: 1px solid var(--border-color, #e4e4e7); margin-top: 14px;">
-                            <div style="display: flex; align-items: center; gap: 12px; padding: 10px;">
-                                <span style="color: var(--text-muted, #71717a); font-size: 14px;">Powered by:</span>
-                                <span style="background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)); color: #8b5cf6; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 13px; border: 1px solid rgba(139, 92, 246, 0.25);">Claude</span>
-                                <span style="color: var(--text-muted, #71717a); font-size: 14px;">×</span>
-                                <span style="background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.05)); color: #f97316; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 13px; border: 1px solid rgba(249, 115, 22, 0.25);">Gradio 6</span>
+                        <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color, #e4e4e7); font-size: 12px;">
+                            <div style="display: flex; align-items: center; gap: 12px;">
+                                <span style="color: var(--text-muted, #71717a);">Powered by:</span>
+                                <span style="background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)); color: #8b5cf6; padding: 4px 12px; border-radius: 14px; font-weight: 600; font-size: 11px; border: 1px solid rgba(139, 92, 246, 0.2);">Claude</span>
+                                <span style="color: var(--text-muted, #71717a);">×</span>
+                                <span style="background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.05)); color: #f97316; padding: 4px 12px; border-radius: 14px; font-weight: 600; font-size: 11px; border: 1px solid rgba(249, 115, 22, 0.2);">Gradio 6</span>
                             </div>
                         </div>
                         """
@@ -1561,18 +1587,18 @@ def create_app():
                 with gr.Group(elem_classes=["campaign-output-card"]):
                     gr.HTML(
                         """
-                        <div style="display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px;">
-                            <div style="display: flex; align-items: center; gap: 16px; padding: 15px;">
-                                <div style="width: 56px; height: 56px; background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(6, 182, 212, 0.1)); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(34, 197, 94, 0.15);">
-                                    <span style="font-size: 28px;">📤</span>
+                        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color, #e4e4e7);">
+                            <div style="display: flex; align-items: center; gap: 14px;">
+                                <div style="width: 48px; height: 48px; background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(6, 182, 212, 0.1)); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(34, 197, 94, 0.15);">
+                                    <span style="font-size: 24px;">📤</span>
                                 </div>
                                 <div>
-                                    <h2 style="margin: 0; font-size: 24px; font-weight: 700; color: var(--text-primary, #18181b);">Campaign Output</h2>
-                                    <p style="margin: 6px 0 0 0; color: var(--text-muted, #71717a); font-size: 14px;">Generated content for all platforms</p>
+                                    <h3 style="margin: 0; font-size: 20px; font-weight: 700; color: var(--text-primary, #18181b);">Campaign Output</h3>
+                                    <p style="margin: 4px 0 0 0; color: var(--text-muted, #71717a); font-size: 13px;">Generated content for all platforms</p>
                                 </div>
                             </div>
-                            <div style="display: flex; gap: 10px; padding: 20px;">
-                                <span style="background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05)); color: #22c55e; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; border: 1px solid rgba(34, 197, 94, 0.25);">6 Formats</span>
+                            <div style="display: flex; gap: 10px;">
+                                <span style="background: rgba(34, 197, 94, 0.1); color: #22c55e; padding: 6px 14px; border-radius: 16px; font-size: 12px; font-weight: 600; border: 1px solid rgba(34, 197, 94, 0.2);">6 Formats</span>
                             </div>
                         </div>
                         """
@@ -1660,8 +1686,8 @@ if __name__ == "__main__":
     app = create_app()
     app.launch(
         server_name="0.0.0.0",
-        server_port=7865,
-        share=True,
+        server_port=7860,
+        share=False,
         show_error=True,
         ssr_mode=False,  # Disable experimental SSR to avoid potential issues
     )