Update src/streamlit_app.py

src/streamlit_app.py

@@ -88,34 +88,57 @@ Output: Write each question on a new line. Do not invent facts — base question
         return ["How do I start using this guide?", "What does this document cover?"]
 
 # ==========================================================
-# 🎨 STYLING — MINIMAL ENTERPRISE DESIGN
+# 🎨 STYLING — NEUTRAL ENTERPRISE THEME (SLEEK + LIGHT-MODE SAFE)
 # ==========================================================
 st.markdown("""
 <style>
-div.block-container {padding-top: 1.2rem; max-width: 1080px;}
-h1, h2, h3 {color: #f3f4f6; font-weight: 600;}
+div.block-container {
+    padding-top: 1.2rem;
+    max-width: 1080px;
+}
+
+/* Headings and general text */
+h1, h2, h3 {
+    color: #f1f5f9;
+    font-weight: 600;
+    letter-spacing: -0.2px;
+}
+p, label, .stMarkdown, .stRadio label {
+    color: #e5e7eb !important;
+}
+
+/* Suggestion chips */
 .suggest-chip {
-    background: #0f1724;
+    background: #111827;
     border: 1px solid #374151;
     border-radius: 14px;
-    color: #e6eef8;
+    color: #e2e8f0;
     padding: 8px 12px;
     cursor: pointer;
     font-size: 13px;
     margin: 6px 6px 6px 0;
     display: inline-block;
-    transition: background 0.2s, transform 0.1s;
+    transition: background 0.2s, transform 0.1s, box-shadow 0.1s;
+}
+.suggest-chip:hover {
+    background: #2563eb;
+    color: #fff;
+    box-shadow: 0 2px 6px rgba(37,99,235,0.3);
+    transform: translateY(-2px);
 }
-.suggest-chip:hover {background: #1e3a8a; transform: translateY(-2px);}
+
+/* Answer box — softer contrast, same depth */
 .answer-box {
-    background: linear-gradient(180deg,#0b1220,#071027);
+    background: linear-gradient(180deg, #131a2a, #0f1628);
     border-left: 4px solid #3b82f6;
-    border-radius: 8px;
+    border-radius: 10px;
     padding: 16px 18px;
-    color: #e6eef8;
+    color: #e5e7eb;
     margin-top: 12px;
-    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
+    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
 }
+
+/* Input box refinement */
 .stTextInput > div > div > input {
     background-color: #0f172a !important;
     color: #f1f5f9 !important;
@@ -124,15 +147,43 @@ h1, h2, h3 {color: #f3f4f6; font-weight: 600;}
     padding: 8px 10px !important;
     font-size: 15px !important;
 }
-.stTextInput > label {font-weight: 500;}
+.stTextInput > label {font-weight: 500; color: #e5e7eb;}
+
+/* Links */
 .small-link {
     font-size: 13px;
     color: #60a5fa;
     cursor: pointer;
 }
+
+/* Light-mode safety: ensure readability if user’s browser is light */
+@media (prefers-color-scheme: light) {
+    body, .stApp {
+        background-color: #f9fafb !important;
+        color: #111827 !important;
+    }
+    h1, h2, h3, label { color: #111827 !important; }
+    .answer-box {
+        background: #ffffff !important;
+        border-left: 4px solid #2563eb !important;
+        color: #1f2937 !important;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    }
+    .suggest-chip {
+        background: #e5e7eb;
+        border: 1px solid #d1d5db;
+        color: #111827;
+    }
+    .suggest-chip:hover {
+        background: #2563eb;
+        color: #fff;
+        box-shadow: 0 2px 5px rgba(37,99,235,0.25);
+    }
+}
 </style>
 """, unsafe_allow_html=True)
 
+
 # ==========================================================
 # 🧭 SIDEBAR
 # ==========================================================