Update app.py

app.py

@@ -29,97 +29,153 @@ 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: #F7F8FC;
+    --surface: #FFFFFF;
+    --card: #FFFFFF;
+    --border: #E2E8F0;
+    --accent: #4F8EF7;
+    --accent2: #F7654F;
+    --accent3: #27C98F;
+    --accent4: #F7B84F;
+    --text: #1A202C;
+    --muted: #718096;
+}
+
 html, body, [class*="css"] {
     font-family: 'DM Sans', sans-serif;
-    background-color: #0a0a12;
-    color: #e8e8ff;
+    background-color: var(--bg);
+    color: var(--text);
 }
 
-.main { background-color: #0a0a12; }
+.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, #e8e8ff 0%, #6C63FF 50%, #43E97B 100%);
+    background: linear-gradient(135deg, #4F8EF7 0%, #27C98F 60%, #F7B84F 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 0.2rem;
 }
 .hero-sub {
-    color: #6a6a9a;
+    color: var(--muted);
     font-size: 1rem;
     margin-bottom: 2rem;
 }
 
 /* Cards */
 .stat-card {
-    background: #1a1a2e;
-    border: 1px solid #2a2a45;
+    background: var(--card);
+    border: 1px 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);
 }
 .stat-num {
     font-family: 'Syne', sans-serif;
     font-size: 2rem;
     font-weight: 800;
-    color: #6C63FF;
+    color: var(--accent);
+}
+.stat-label {
+    color: var(--muted);
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
 }
-.stat-label { color: #6a6a9a; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }
 
 /* Chat bubbles */
 .user-bubble {
-    background: rgba(108,99,255,0.15);
-    border: 1px solid rgba(108,99,255,0.3);
+    background: linear-gradient(135deg, #EBF3FF, #F0FBF7);
+    border: 1px solid #BDD8FF;
     border-radius: 18px 18px 4px 18px;
     padding: 0.9rem 1.2rem;
     margin: 0.5rem 0;
     font-size: 0.95rem;
+    color: var(--text);
 }
 .agent-bubble {
-    background: #1a1a2e;
-    border: 1px solid #2a2a45;
+    background: var(--surface);
+    border: 1px solid var(--border);
     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: #10101e;
-    border-right: 1px solid #2a2a45;
+    background: #FFFFFF !important;
+    border-right: 1px solid var(--border);
 }
 
 /* Buttons */
 .stButton > button {
-    background: linear-gradient(135deg, #6C63FF, #43E97B);
+    background: linear-gradient(135deg, #4F8EF7, #27C98F);
     color: white;
     border: none;
     border-radius: 12px;
     font-family: 'Syne', sans-serif;
     font-weight: 700;
     padding: 0.6rem 1.5rem;
-    transition: opacity 0.2s;
+    transition: opacity 0.2s, transform 0.2s;
+    box-shadow: 0 4px 12px rgba(79,142,247,0.25);
+}
+.stButton > button:hover {
+    opacity: 0.88;
+    color: white;
+    transform: translateY(-1px);
 }
-.stButton > button:hover { opacity: 0.85; color: white; }
 
 .stTextInput > div > div > input {
-    background: #1a1a2e;
-    border: 1px solid #2a2a45;
+    background: var(--surface);
+    border: 1px solid var(--border);
     border-radius: 12px;
-    color: #e8e8ff;
+    color: var(--text);
 }
 .stSelectbox > div > div {
-    background: #1a1a2e;
-    border: 1px solid #2a2a45;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    color: var(--text);
+}
+
+/* Tabs */
+.stTabs [data-baseweb="tab-list"] {
+    background: #EEF2FF;
     border-radius: 12px;
+    gap: 0.3rem;
+    padding: 0.3rem;
+}
+.stTabs [data-baseweb="tab"] {
+    background: transparent;
+    color: var(--muted);
+    border-radius: 10px;
+    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);
 }
 
+/* Dataframe */
+.stDataFrame { border-radius: 12px; overflow: hidden; }
+
+/* Info / success boxes */
+.stAlert { border-radius: 12px; }
+</style>""", unsafe_allow_html=True)
+
 /* Tabs */
 .stTabs [data-baseweb="tab-list"] {
     background: #10101e;
@@ -469,4 +525,4 @@ else:
             data=csv_buf.getvalue(),
             file_name="analyzed_data.csv",
             mime="text/csv"
-        )
+        )