update

app.py

@@ -832,114 +832,17 @@ def basic_get_scores_and_sources(
         )
 
 def load_custom_css():
-    """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"""
+    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 from external file
 custom_css = load_custom_css()
@@ -947,7 +850,7 @@ theme = gr.themes.Citrus(
     text_size="lg",
     spacing_size="md",
 )
-with gr.Blocks(theme=theme, css=custom_css) as demo:
+with gr.Blocks(theme=theme) as demo:
     gr.Markdown(f"# {APP_TITLE}")
     gr.Markdown(APP_DESCRIPTION, elem_classes="app-description")
     # gr.Markdown(NEW_TEXT, elem_classes="app-description-2")