Update app.py

app.py

@@ -250,24 +250,75 @@ def run_query(query: str):
     return format_result(get_data(query))
 
 
-CSS = """
-#header-banner {
+CSS = ""  # unused — styles injected via gr.HTML below
+
+HEADER_HTML = """
+<style>
+  /* ── Sloth global styles ── */
+  .gradio-container { background: #F1F5F9 !important; }
+
+  /* Header banner */
+  #sloth-header {
     background: linear-gradient(135deg, #0B1F3A 0%, #12294D 60%, #0D9488 100%);
     border-radius: 12px; padding: 28px 32px 20px; margin-bottom: 16px;
-}
-#header-banner h1 {
-    font-size: 2.4rem; font-weight: 700; letter-spacing: 0.1em;
-    color: white !important; margin: 0 0 4px;
-}
-#header-banner p { color: #5DCAA5; font-size: 1rem; margin: 0; }
-.result-panel {
-    background: white; border: 1px solid #E2E8F0;
-    border-radius: 10px; padding: 20px; margin-top: 12px;
-}
-"""
+  }
+  #sloth-header h1 {
+    font-size: 2.2rem; font-weight: 700; letter-spacing: 0.08em;
+    color: #FFFFFF !important; margin: 0 0 6px 0;
+    font-family: system-ui, sans-serif;
+  }
+  #sloth-header p {
+    color: #5DCAA5; font-size: 1rem; margin: 0;
+    font-family: system-ui, sans-serif;
+  }
 
-HEADER_HTML = """
-<div id="header-banner">
+  /* Result panels — white cards with visible border */
+  .sloth-panel > .prose,
+  .sloth-panel .markdown-body,
+  .sloth-panel {
+    background: #FFFFFF !important;
+    border: 1.5px solid #CBD5E1 !important;
+    border-radius: 10px !important;
+    padding: 20px !important;
+    color: #1E293B !important;
+  }
+
+  /* Headings inside results */
+  .sloth-panel h1 { color: #0B1F3A !important; font-size: 1.4rem !important; }
+  .sloth-panel h2 { color: #0D9488 !important; font-size: 1.1rem !important;
+    border-bottom: 1px solid #E2E8F0; padding-bottom: 4px; margin-top: 16px; }
+  .sloth-panel p, .sloth-panel li { color: #1E293B !important; }
+  .sloth-panel code {
+    background: #F0FDFA !important; color: #0B1F3A !important;
+    border-radius: 4px; padding: 1px 6px;
+  }
+  .sloth-panel strong { color: #0B1F3A !important; }
+
+  /* Table styling */
+  .sloth-panel table { border-collapse: collapse; width: 100%; }
+  .sloth-panel th {
+    background: #F8FAFC !important; color: #0B1F3A !important;
+    border: 1px solid #E2E8F0; padding: 6px 10px; font-size: 0.88rem;
+  }
+  .sloth-panel td {
+    border: 1px solid #E2E8F0; padding: 6px 10px;
+    color: #1E293B !important; font-size: 0.88rem;
+  }
+
+  /* Query input */
+  textarea { color: #1E293B !important; background: #FFFFFF !important; }
+  label { color: #334155 !important; }
+
+  /* Submit button */
+  button.primary, .primary {
+    background: #0D9488 !important; color: #FFFFFF !important;
+    border: none !important; border-radius: 8px !important;
+    font-weight: 600 !important;
+  }
+  button.primary:hover { background: #0F6E56 !important; }
+</style>
+
+<div id="sloth-header">
   <h1>🦥 SLOTH</h1>
   <p>AI Workforce Intelligence &nbsp;·&nbsp; Real-time compliance monitoring across 150+ countries</p>
 </div>
@@ -290,14 +341,14 @@ with gr.Blocks(title="Sloth — AI Workforce Intelligence") as demo:
     gr.Examples(examples=EXAMPLE_QUERIES, inputs=query_box, label="")
 
     with gr.Row():
-        header_out = gr.Markdown(elem_classes=["result-panel"])
+        header_out = gr.Markdown(elem_classes=["sloth-panel"])
     with gr.Row():
         with gr.Column(scale=1):
-            summary_out = gr.Markdown(elem_classes=["result-panel"])
+            summary_out = gr.Markdown(elem_classes=["sloth-panel"])
         with gr.Column(scale=1):
-            changes_out = gr.Markdown(elem_classes=["result-panel"])
+            changes_out = gr.Markdown(elem_classes=["sloth-panel"])
     with gr.Row():
-        expansion_out = gr.Markdown(elem_classes=["result-panel"])
+        expansion_out = gr.Markdown(elem_classes=["sloth-panel"])
 
     gr.Markdown(
         "<center style='color:#94A3B8;font-size:0.8rem;margin-top:16px'>"
@@ -313,4 +364,5 @@ with gr.Blocks(title="Sloth — AI Workforce Intelligence") as demo:
                      outputs=[header_out, summary_out, changes_out, expansion_out])
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860, css=CSS, ssr_mode=False)
+    demo.launch(server_name="0.0.0.0", server_port=7860, ssr_mode=False)
+