Update app.py

app.py

@@ -12,124 +12,85 @@ st.set_page_config(
     layout="wide",
     initial_sidebar_state="expanded"
 )
-
-# FIXED CSS - Much better colors and visibility!
 st.markdown("""
 <style>
-    /* Main background */
-    .main {
-        background-color: #ffffff;
-    }
-    
-    /* Headers with good contrast */
-    .main-header {
-        font-size: 3rem;
-        font-weight: bold;
-        color: #1a1a1a;
-        text-align: center;
-        margin-bottom: 0.5rem;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
-    }
-    
-    .sub-header {
-        text-align: center;
-        color: #444444;
-        margin-bottom: 2rem;
-        font-size: 1.2rem;
-    }
-    
-    /* TRUE verdict - Green with dark text */
-    .verdict-true {
-        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
-        border-left: 6px solid #28a745;
-        padding: 1.5rem;
-        border-radius: 8px;
-        margin: 1rem 0;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        color: #155724 !important;
-    }
-    
-    .verdict-true h3, .verdict-true p, .verdict-true strong {
-        color: #155724 !important;
-    }
-    
-    /* FALSE verdict - Red with dark text */
-    .verdict-false {
-        background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
-        border-left: 6px solid #dc3545;
-        padding: 1.5rem;
-        border-radius: 8px;
-        margin: 1rem 0;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        color: #721c24 !important;
-    }
-    
-    .verdict-false h3, .verdict-false p, .verdict-false strong {
-        color: #721c24 !important;
-    }
-    
-    /* MIXED verdict - Yellow with dark text */
-    .verdict-mixed {
-        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
-        border-left: 6px solid #ffc107;
-        padding: 1.5rem;
-        border-radius: 8px;
-        margin: 1rem 0;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        color: #856404 !important;
-    }
-    
-    .verdict-mixed h3, .verdict-mixed p, .verdict-mixed strong {
-        color: #856404 !important;
-    }
-    
-    /* UNVERIFIED - Blue with dark text */
-    .verdict-unverified {
-        background: linear-gradient(135deg, #e7f3ff 0%, #cfe2ff 100%);
-        border-left: 6px solid #0d6efd;
-        padding: 1.5rem;
-        border-radius: 8px;
-        margin: 1rem 0;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        color: #084298 !important;
-    }
-    
-    .verdict-unverified h3, .verdict-unverified p, .verdict-unverified strong {
-        color: #084298 !important;
-    }
-    
-    /* Links */
-    .verdict-true a, .verdict-false a, .verdict-mixed a, .verdict-unverified a {
-        color: #0066cc !important;
-        text-decoration: underline;
-        font-weight: bold;
-    }
-    
-    /* Stats boxes */
-    .stat-box {
-        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-        padding: 2rem 1rem;
-        border-radius: 12px;
-        text-align: center;
-        margin: 0.5rem;
-        border: 2px solid #dee2e6;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-    }
-    
-    .stat-box h2 {
-        margin: 0 !important;
-        font-size: 2.5rem !important;
-    }
-    
-    .stat-box p {
-        color: #495057 !important;
-        font-weight: 600;
-        font-size: 0.9rem;
-    }
+/* Page background */
+[data-testid="stAppViewContainer"] {
+    background: #f7fafc;  /* soft off-white so cards stand out */
+}
+
+/* Header */
+.main-header {
+    font-size: 2.6rem;
+    font-weight: 700;
+    color: #111827;
+    text-align: center;
+    margin-bottom: 0.25rem;
+}
+
+/* Sub header */
+.sub-header {
+    text-align: center;
+    color: #334155;
+    margin-bottom: 1.5rem;
+    font-size: 1.05rem;
+}
+
+/* Make sure Streamlit text inputs / textareas are visible */
+.stTextInput > div > input,
+.stTextArea > div > textarea,
+textarea,
+input[type="text"],
+input[type="password"] {
+    background-color: #ffffff !important;
+    color: #0f172a !important;
+    border: 1px solid #cbd5e1 !important;
+    border-radius: 6px !important;
+}
+
+/* Label color */
+label {
+    color: #0f172a !important;
+    font-weight: 600;
+}
+
+/* Buttons */
+.stButton > button {
+    background-color: #0d6efd !important;
+    color: #ffffff !important;
+    border-radius: 6px !important;
+    padding: 0.55rem 0.8rem;
+}
+
+/* Stat boxes (kept subtle and readable) */
+.stat-box {
+    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
+    padding: 1.4rem 1rem;
+    border-radius: 10px;
+    text-align: center;
+    margin: 0.5rem;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 6px 12px rgba(2,6,23,0.04);
+}
+
+/* Verdict boxes: keep colors but ensure text contrast */
+.verdict-true, .verdict-false, .verdict-mixed, .verdict-unverified {
+    padding: 1rem;
+    border-radius: 8px;
+    margin: 0.8rem 0;
+}
+.verdict-true { border-left: 6px solid #16a34a; background: #f0fdf4; color: #064e3b; }
+.verdict-false { border-left: 6px solid #dc3545; background: #fff1f2; color: #641220; }
+.verdict-mixed { border-left: 6px solid #f59e0b; background: #fffbeb; color: #78350f; }
+.verdict-unverified { border-left: 6px solid #0d6efd; background: #e7f3ff; color: #08306b; }
+
+/* Footer small text */
+footer, .footer { color: #64748b !important; font-size: 0.9rem; text-align:center; padding: 1rem 0; }
 </style>
 """, unsafe_allow_html=True)
 
 
+
 class GoogleFactCheckAPI:
     """Google Fact Check Tools API Integration - IMPROVED VERSION"""