update

app.py

@@ -832,17 +832,114 @@ def basic_get_scores_and_sources(
         )
 
 def load_custom_css():
-    """Load CSS from external file"""
-    try:
-        with open("assets/app_styles.css", "r") as f:
-            css_content = f.read()
-        return css_content
-    except FileNotFoundError:
-        print("Warning: CSS file not found, using minimal CSS")
-        return ""
-    except Exception as e:
-        print(f"Error loading CSS: {e}")
-        return ""
+    """Load CSS - embedded version for Hugging Face Spaces compatibility"""
+    css_content = """
+/* Add global page margins */
+.gradio-container {
+   padding-left: 12rem !important;
+   padding-right: 12rem !important;
+}
+
+/* App title styling */
+.app-title {
+    text-align: center !important;
+    margin: 2rem 0 !important;
+}
+
+.app-title .brand {
+    color: #333333 !important;
+    font-weight: 700 !important;
+    font-size: 3rem !important;
+    margin-right: 12px !important;
+}
+
+.app-title .subtitle {
+    color: #666666 !important;
+    font-weight: 400 !important;
+    font-size: 1.6rem !important;
+    display: block !important;
+    margin-top: 12px !important;
+}
+
+/* App description styling */
+.app-description p {
+    font-size: 1.25rem !important;
+    color: #555555 !important;
+    line-height: 1.6 !important;
+}
+
+/* Feature highlights */
+.feature-highlights {
+    font-size: 1.1rem !important;
+    color: #444444 !important;
+    line-height: 1.5 !important;
+}
+
+/* Example title */
+.example-title {
+    text-align: center !important;
+    margin: 2rem 0 1rem 0 !important;
+    font-size: 1.5rem !important;
+    font-weight: 600 !important;
+    color: #333333 !important;
+}
+
+/* Example button container */
+.example-button-container {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    gap: 1rem !important;
+    margin: 1rem 0 !important;
+    flex-wrap: wrap !important;
+}
+
+/* Example buttons */
+.example-button button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 12px 20px !important;
+    font-size: 0.9rem !important;
+    font-weight: 600 !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
+    min-width: 200px !important;
+    text-align: center !important;
+}
+
+.example-button button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+    }
+    
+    .app-title .brand {
+        font-size: 2rem !important;
+    }
+    
+    .app-title .subtitle {
+        font-size: 1.2rem !important;
+    }
+    
+    .example-button-container {
+        flex-direction: column !important;
+    }
+    
+    .example-button button {
+        min-width: 100% !important;
+    }
+}
+"""
+    return css_content
 
 # Load CSS from external file
 custom_css = load_custom_css()