Update app.py

app.py

@@ -10,6 +10,17 @@ from docx import Document
 from docx.shared import Pt
 
 # ---------- Branding ----------
+# ---------- Palette ----------
+PALETTE = {
+    "navy":   "#083D77",   # dark background
+    "gold":   "#F2B400",   # accents, primary buttons
+    "ice":    "#FBF8F9",   # off-white surfaces
+    "maroon": "#8B1E1E",   # emphasis chips / dividers
+    "amber":  "#F5C26B",   # secondary accents
+    "text_on_dark": "#EAF2FF",
+    "text_on_light": "#0B1220",
+}
+
 APP_NAME = "ScholarLens"
 TAGLINE = "Query your literature, get page-level proof"
 
@@ -331,21 +342,103 @@ theme = gr.themes.Soft(
 with gr.Blocks(
     title=f"{APP_NAME} | RAG over PDFs",
     theme=theme,
-    css="""
-#hero {
-  background: radial-gradient(1200px 600px at 20% -10%, rgba(99,102,241,.25), transparent),
-              radial-gradient(1000px 500px at 120% 10%, rgba(14,165,233,.20), transparent);
-  border: 1px solid rgba(99,102,241,.20);
+    css=f"""
+:root {{
+  --navy: {PALETTE['navy']};
+  --gold: {PALETTE['gold']};
+  --ice: {PALETTE['ice']};
+  --maroon: {PALETTE['maroon']};
+  --amber: {PALETTE['amber']};
+  --text-dark: {PALETTE['text_on_light']};
+  --text-light: {PALETTE['text_on_dark']};
+}}
+
+body, .gradio-container {{ 
+  background: var(--navy) !important; 
+  color: var(--text-light) !important;
+}}
+
+.gradio-container .block, 
+.gradio-container .tabs, 
+.gradio-container .tabs > .tabitem {{
+  background: color-mix(in srgb, var(--navy) 80%, black 20%) !important;
+  color: var(--text-light) !important;
   border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--navy) 70%, white 10%);
+}}
+
+#hero {{
+  background:
+    linear-gradient(90deg, var(--navy) 0%, var(--gold) 25%, var(--ice) 45%, var(--maroon) 65%, var(--amber) 85%, transparent 100%);
+  border: 1px solid color-mix(in srgb, var(--gold) 40%, white 20%);
+  border-radius: 14px;
   padding: 14px 16px;
-}
-.kpi {text-align:center;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);}
-.footer {opacity:.8;}
-/* Dark-friendly background */
-body, .gradio-container { background: #0B1220 !important; }
-.gradio-container .block, .gradio-container .tabs { background: #0F172A !important; }
+  color: var(--text-light);
+}}
+
+a, .prose a {{
+  color: var(--amber) !important;
+  text-decoration: none;
+}}
+a:hover {{ text-decoration: underline; }}
+
+.kpi {{
+  text-align:center;
+  padding:12px;
+  border-radius:10px;
+  border:1px solid color-mix(in srgb, var(--ice) 35%, var(--navy) 65%);
+  background: color-mix(in srgb, var(--navy) 75%, black 25%);
+  color: var(--text-light);
+}}
+
+button, .gr-button {{
+  border-radius: 10px !important;
+  font-weight: 600 !important;
+  color: var(--text-light) !important;
+}}
+button.primary, .gr-button-primary {{
+  background: var(--gold) !important;
+  color: var(--text-dark) !important;
+  border: 1px solid color-mix(in srgb, var(--gold) 70%, black 10%) !important;
+}}
+button.secondary, .gr-button-secondary {{
+  background: color-mix(in srgb, var(--amber) 60%, var(--gold) 40%) !important;
+  color: var(--text-dark) !important;
+}}
+
+input, textarea, .gr-textbox, .gr-text-area, .gr-slider, .gr-dropdown, .gr-file, .wrap.svelte* {{
+  background: color-mix(in srgb, var(--navy) 65%, black 35%) !important;
+  color: var(--text-light) !important;
+  border: 1px solid color-mix(in srgb, var(--ice) 25%, var(--navy) 75%) !important;
+  border-radius: 10px !important;
+}}
+
+label, .label, .prose h1, .prose h2, .prose h3, .prose p, .markdown-body {{
+  color: var(--text-light) !important;
+}}
+
+.dataframe, table, .table, .gr-dataframe * {{
+  color: var(--text-light) !important;
+  background: transparent !important;
+}}
+.dataframe th {{
+  background: color-mix(in srgb, var(--navy) 70%, black 30%) !important;
+  border-bottom: 1px solid color-mix(in srgb, var(--ice) 20%, var(--navy) 80%) !important;
+}}
+.dataframe td {{
+  border-bottom: 1px solid color-mix(in srgb, var(--ice) 15%, var(--navy) 85%) !important;
+}}
+
+.accordion, .gr-accordion {{
+  background: color-mix(in srgb, var(--navy) 70%, black 30%) !important;
+  border: 1px solid color-mix(in srgb, var(--ice) 20%, var(--navy) 80%) !important;
+  border-radius: 10px !important;
+}}
+
+footer, .footer {{ opacity:.75; color: var(--text-light); }}
 """
 ) as demo:
+
     # --- Header / Hero ---
     with gr.Group(elem_id="hero"):
         gr.Markdown(