Update app.py

app.py

@@ -29,136 +29,113 @@ st.markdown("""
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Sans:wght@300;400;500&display=swap');
 
-:root {
-    --bg: #FFFFFF;
-    --surface: #F5F5F5;
-    --card: #F9F9F9;
-    --border: #E0E0E0;
-    --accent: #111111;
-    --text: #111111;
-    --muted: #888888;
-}
-
 html, body, [class*="css"] {
     font-family: 'DM Sans', sans-serif;
-    background-color: var(--bg);
-    color: var(--text);
+    background-color: #0a0a12;
+    color: #e8e8ff;
 }
 
-.main { background-color: var(--bg) !important; }
+.main { background-color: #0a0a12 !important; }
 
 /* Header */
 .hero-title {
     font-family: 'Syne', sans-serif;
     font-size: 2.8rem;
     font-weight: 800;
-    color: #111111;
+    background: linear-gradient(135deg, #e8e8ff 0%, #6C63FF 50%, #43E97B 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
     margin-bottom: 0.2rem;
-    letter-spacing: -0.02em;
 }
 .hero-sub {
-    color: var(--muted);
+    color: #6a6a9a;
     font-size: 1rem;
     margin-bottom: 2rem;
 }
 
 /* Cards */
 .stat-card {
-    background: var(--card);
-    border: 1.5px solid var(--border);
+    background: #1a1a2e;
+    border: 1px solid #2a2a45;
     border-radius: 16px;
     padding: 1.2rem 1.5rem;
     text-align: center;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
 }
 .stat-num {
     font-family: 'Syne', sans-serif;
     font-size: 2rem;
     font-weight: 800;
-    color: #111111;
-}
-.stat-label {
-    color: var(--muted);
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
+    color: #6C63FF;
 }
+.stat-label { color: #6a6a9a; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }
 
 /* Chat bubbles */
 .user-bubble {
-    background: #111111;
-    border: 1px solid #111111;
+    background: rgba(108,99,255,0.15);
+    border: 1px solid rgba(108,99,255,0.3);
     border-radius: 18px 18px 4px 18px;
     padding: 0.9rem 1.2rem;
     margin: 0.5rem 0;
     font-size: 0.95rem;
-    color: #FFFFFF;
 }
 .agent-bubble {
-    background: var(--card);
-    border: 1.5px solid var(--border);
+    background: #1a1a2e;
+    border: 1px solid #2a2a45;
     border-radius: 18px 18px 18px 4px;
     padding: 0.9rem 1.2rem;
     margin: 0.5rem 0;
     font-size: 0.95rem;
     line-height: 1.6;
-    color: var(--text);
-    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 }
 
 /* Sidebar */
 section[data-testid="stSidebar"] {
-    background: #F9F9F9 !important;
-    border-right: 1.5px solid var(--border);
+    background: #10101e !important;
+    border-right: 1px solid #2a2a45;
 }
 
 /* Buttons */
 .stButton > button {
-    background: #111111;
-    color: #FFFFFF;
+    background: linear-gradient(135deg, #6C63FF, #43E97B);
+    color: white;
     border: none;
     border-radius: 12px;
     font-family: 'Syne', sans-serif;
     font-weight: 700;
     padding: 0.6rem 1.5rem;
-    transition: background 0.2s, transform 0.2s;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-}
-.stButton > button:hover {
-    background: #333333;
-    color: #FFFFFF;
-    transform: translateY(-1px);
+    transition: opacity 0.2s, transform 0.2s;
 }
+.stButton > button:hover { opacity: 0.85; color: white; transform: translateY(-1px); }
 
 .stTextInput > div > div > input {
-    background: var(--surface);
-    border: 1.5px solid var(--border);
+    background: #1a1a2e;
+    border: 1px solid #2a2a45;
     border-radius: 12px;
-    color: var(--text);
+    color: #e8e8ff;
 }
 .stSelectbox > div > div {
-    background: var(--surface);
-    border: 1.5px solid var(--border);
+    background: #1a1a2e;
+    border: 1px solid #2a2a45;
     border-radius: 12px;
-    color: var(--text);
 }
 
 /* Tabs */
 .stTabs [data-baseweb="tab-list"] {
-    background: #F0F0F0;
+    background: #10101e;
     border-radius: 12px;
     gap: 0.3rem;
     padding: 0.3rem;
 }
 .stTabs [data-baseweb="tab"] {
     background: transparent;
-    color: var(--muted);
+    color: #6a6a9a;
     border-radius: 10px;
     font-family: 'Syne', sans-serif;
 }
 .stTabs [aria-selected="true"] {
-    background: #111111 !important;
-    color: #FFFFFF !important;
+    background: rgba(108,99,255,0.2) !important;
+    color: #6C63FF !important;
 }
 
 /* Dataframe */