Update app.py

app.py

@@ -30,16 +30,13 @@ st.markdown("""
 @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Sans:wght@300;400;500&display=swap');
 
 :root {
-    --bg: #F7F8FC;
-    --surface: #FFFFFF;
-    --card: #FFFFFF;
-    --border: #E2E8F0;
-    --accent: #4F8EF7;
-    --accent2: #F7654F;
-    --accent3: #27C98F;
-    --accent4: #F7B84F;
-    --text: #1A202C;
-    --muted: #718096;
+    --bg: #FFFFFF;
+    --surface: #F5F5F5;
+    --card: #F9F9F9;
+    --border: #E0E0E0;
+    --accent: #111111;
+    --text: #111111;
+    --muted: #888888;
 }
 
 html, body, [class*="css"] {
@@ -48,20 +45,16 @@ html, body, [class*="css"] {
     color: var(--text);
 }
 
-.main {
-    background-color: var(--bg) !important;
-}
+.main { background-color: var(--bg) !important; }
 
 /* Header */
 .hero-title {
     font-family: 'Syne', sans-serif;
     font-size: 2.8rem;
     font-weight: 800;
-    background: linear-gradient(135deg, #4F8EF7 0%, #27C98F 60%, #F7B84F 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    color: #111111;
     margin-bottom: 0.2rem;
+    letter-spacing: -0.02em;
 }
 .hero-sub {
     color: var(--muted);
@@ -72,38 +65,38 @@ html, body, [class*="css"] {
 /* Cards */
 .stat-card {
     background: var(--card);
-    border: 1px solid var(--border);
+    border: 1.5px solid var(--border);
     border-radius: 16px;
     padding: 1.2rem 1.5rem;
     text-align: center;
-    box-shadow: 0 2px 12px rgba(79,142,247,0.07);
+    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: var(--accent);
+    color: #111111;
 }
 .stat-label {
     color: var(--muted);
     font-size: 0.8rem;
     text-transform: uppercase;
-    letter-spacing: 0.1em;
+    letter-spacing: 0.12em;
 }
 
 /* Chat bubbles */
 .user-bubble {
-    background: linear-gradient(135deg, #EBF3FF, #F0FBF7);
-    border: 1px solid #BDD8FF;
+    background: #111111;
+    border: 1px solid #111111;
     border-radius: 18px 18px 4px 18px;
     padding: 0.9rem 1.2rem;
     margin: 0.5rem 0;
     font-size: 0.95rem;
-    color: var(--text);
+    color: #FFFFFF;
 }
 .agent-bubble {
-    background: var(--surface);
-    border: 1px solid var(--border);
+    background: var(--card);
+    border: 1.5px solid var(--border);
     border-radius: 18px 18px 18px 4px;
     padding: 0.9rem 1.2rem;
     margin: 0.5rem 0;
@@ -115,44 +108,44 @@ html, body, [class*="css"] {
 
 /* Sidebar */
 section[data-testid="stSidebar"] {
-    background: #FFFFFF !important;
-    border-right: 1px solid var(--border);
+    background: #F9F9F9 !important;
+    border-right: 1.5px solid var(--border);
 }
 
 /* Buttons */
 .stButton > button {
-    background: linear-gradient(135deg, #4F8EF7, #27C98F);
-    color: white;
+    background: #111111;
+    color: #FFFFFF;
     border: none;
     border-radius: 12px;
     font-family: 'Syne', sans-serif;
     font-weight: 700;
     padding: 0.6rem 1.5rem;
-    transition: opacity 0.2s, transform 0.2s;
-    box-shadow: 0 4px 12px rgba(79,142,247,0.25);
+    transition: background 0.2s, transform 0.2s;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 }
 .stButton > button:hover {
-    opacity: 0.88;
-    color: white;
+    background: #333333;
+    color: #FFFFFF;
     transform: translateY(-1px);
 }
 
 .stTextInput > div > div > input {
     background: var(--surface);
-    border: 1px solid var(--border);
+    border: 1.5px solid var(--border);
     border-radius: 12px;
     color: var(--text);
 }
 .stSelectbox > div > div {
     background: var(--surface);
-    border: 1px solid var(--border);
+    border: 1.5px solid var(--border);
     border-radius: 12px;
     color: var(--text);
 }
 
 /* Tabs */
 .stTabs [data-baseweb="tab-list"] {
-    background: #EEF2FF;
+    background: #F0F0F0;
     border-radius: 12px;
     gap: 0.3rem;
     padding: 0.3rem;
@@ -164,9 +157,8 @@ section[data-testid="stSidebar"] {
     font-family: 'Syne', sans-serif;
 }
 .stTabs [aria-selected="true"] {
-    background: #FFFFFF !important;
-    color: var(--accent) !important;
-    box-shadow: 0 2px 8px rgba(79,142,247,0.15);
+    background: #111111 !important;
+    color: #FFFFFF !important;
 }
 
 /* Dataframe */