UI update

app.py

@@ -300,568 +300,274 @@ Answer:"""
         /* Import legible fonts from Google Fonts */
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
 
-        /* Define light theme variables */
+        /* Define our custom light theme variables */
         :root {{
-            --primary-color: #FF8C00;
-            --primary-hover: #E07B00;
-            --background-primary: hsl(30, 100%, 99.9%); /* Near white, slightly warm */
-            --background-secondary: hsl(30, 100%, 96%); /* Slightly darker background */
-            --text-primary: #4A3C32; /* Dark brown/off-black for main text */
-            --text-secondary: #8C7B6F; /* Lighter brown/gray for subdued text */
-            --border-color: hsl(30, 70%, 85%); /* Light brown/peach border */
-            --border-focus: #FF8C00; /* Primary color for focus */
-            --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
-            --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
-            --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
-            --error-bg: #FFF0E0; /* Light peach error background */
-            --error-border: #FFD2B2; /* Peach error border */
-            --error-text: #E05C00; /* Orange-red error text */
-        }}
-
-        /* IMPORTANT: Force Gradio's internal variables to use our light theme values for both light and dark modes */
-        /* This is the key to override system theme preference without using theme_mode */
-        /* Targeting :root, html.dark, body.dark, and .dark ensures maximum override */
+            --custom-primary-color: #FF8C00;
+            --custom-primary-hover: #E07B00;
+            --custom-background-primary: hsl(30, 100%, 99.9%); /* Near white, slightly warm */
+            --custom-background-secondary: hsl(30, 100%, 96%); /* Slightly darker background */
+            --custom-text-primary: #4A3C32; /* Dark brown/off-black for main text */
+            --custom-text-secondary: #8C7B6F; /* Lighter brown/gray for subdued text */
+            --custom-border-color: hsl(30, 70%, 85%); /* Light brown/peach border */
+            --custom-border-focus: #FF8C00; /* Primary color for focus */
+            --custom-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
+            --custom-shadow-md: 0 4px 10px rgba(0,0,0,0.1);
+            --custom-shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
+            --custom-error-bg: #FFF0E0; /* Light peach error background */
+            --custom-error-border: #FFD2B2; /* Peach error border */
+            --custom-error-text: #E05C00; /* Orange-red error text */
+        }}
+
+        /* CRITICAL: FORCE GRADIO'S INTERNAL VARIABLES TO OUR CUSTOM LIGHT THEME VALUES */
+        /* This targets :root, html.dark, body.dark, and generic .dark classes to ensure precedence */
         :root, html.dark, body.dark, .dark {{
             /* General backgrounds */
-            --background-fill-primary: var(--background-primary) !important;
-            --background-fill-secondary: var(--background-secondary) !important;
-            --background-fill-tertiary: var(--background-secondary) !important; /* For less prominent backgrounds */
-            --panel-background: var(--background-primary) !important;
-            --block-background: var(--background-primary) !important;
-            --color-background-primary: var(--background-primary) !important;
-            --color-background-secondary: var(--background-secondary) !important;
+            --background-fill-primary: var(--custom-background-primary) !important;
+            --background-fill-secondary: var(--custom-background-secondary) !important;
+            --background-fill-tertiary: var(--custom-background-secondary) !important;
+            --panel-background: var(--custom-background-primary) !important;
+            --block-background: var(--custom-background-primary) !important;
+            --color-background-primary: var(--custom-background-primary) !important;
+            --color-background-secondary: var(--custom-background-secondary) !important;
 
             /* Text colors */
-            --text-color-body: var(--text-primary) !important;
-            --text-color-subdued: var(--text-secondary) !important;
-            --text-color-highlight: var(--primary-color) !important;
-            --text-color-placeholder: var(--text-secondary) !important;
-            --text-color-link: var(--primary-color) !important; /* For links */
-            --color-text-primary: var(--text-primary) !important;
-            --color-text-secondary: var(--text-secondary) !important;
-            --color-text-placeholder: var(--text-secondary) !important;
+            --text-color-body: var(--custom-text-primary) !important;
+            --text-color-subdued: var(--custom-text-secondary) !important;
+            --text-color-highlight: var(--custom-primary-color) !important;
+            --text-color-placeholder: var(--custom-text-secondary) !important;
+            --text-color-link: var(--custom-primary-color) !important;
+            --color-text-primary: var(--custom-text-primary) !important;
+            --color-text-secondary: var(--custom-text-secondary) !important;
+            --color-text-placeholder: var(--custom-text-secondary) !important;
 
             /* Border colors */
-            --border-color-primary: var(--border-color) !important;
-            --border-color-accent: var(--border-focus) !important;
-            --border-color-secondary: var(--border-color) !important;
-            --border-color-tertiary: var(--border-color) !important;
-            --color-border-primary: var(--border-color) !important;
-            --color-border-secondary: var(--border-color) !important;
+            --border-color-primary: var(--custom-border-color) !important;
+            --border-color-accent: var(--custom-border-focus) !important;
+            --border-color-secondary: var(--custom-border-color) !important;
+            --border-color-tertiary: var(--custom-border-color) !important;
+            --color-border-primary: var(--custom-border-color) !important;
+            --color-border-secondary: var(--custom-border-color) !important;
 
             /* Button colors */
-            --button-primary-background: var(--primary-color) !important;
-            --button-primary-background-hover: var(--primary-hover) !important;
+            --button-primary-background: var(--custom-primary-color) !important;
+            --button-primary-background-hover: var(--custom-primary-hover) !important;
             --button-primary-text-color: white !important; /* Ensure text is white on primary buttons */
             --button-secondary-background: transparent !important;
-            --button-secondary-background-hover: var(--background-secondary) !important;
-            --button-secondary-border-color: var(--border-color) !important;
-            --button-secondary-border-color-hover: var(--primary-color) !important;
-            --button-secondary-text-color: var(--text-primary) !important; /* Ensure text color for secondary */
-            --color-button-primary-background: var(--primary-color) !important;
-            --color-button-primary-background-hover: var(--primary-hover) !important;
-            --color-button-secondary-background: transparent !important;
-            --color-button-secondary-background-hover: var(--background-secondary) !important;
+            --button-secondary-background-hover: var(--custom-background-secondary) !important;
+            --button-secondary-border-color: var(--custom-border-color) !important;
+            --button-secondary-border-color-hover: var(--custom-primary-color) !important;
+            --button-secondary-text-color: var(--custom-text-primary) !important;
+            --color-button-primary-background: var(--custom-primary-color) !important;
+            --color-button-primary-background-hover: var(--custom-primary-hover) !important;
             --color-button-primary-text: white !important;
-            --color-button-secondary-text: var(--text-primary) !important;
+            --color-button-secondary-text: var(--custom-text-primary) !important;
 
             /* Input specific */
-            --input-background-fill: var(--background-primary) !important;
-            --input-border-color: var(--border-color) !important;
-            --input-border-color-focus: var(--border-focus) !important;
-            --input-shadow: var(--shadow-sm) !important; /* For textboxes */
+            --input-background-fill: var(--custom-background-primary) !important;
+            --input-border-color: var(--custom-border-color) !important;
+            --input-border-color-focus: var(--custom-border-focus) !important;
+            --input-shadow: var(--custom-shadow-sm) !important;
             --input-shadow-focus: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
-            --input-text-color: var(--text-primary) !important;
+            --input-text-color: var(--custom-text-primary) !important;
 
             /* Shadows */
-            --shadow-s: var(--shadow-sm) !important;
-            --shadow-m: var(--shadow-md) !important;
-            --shadow-l: var(--shadow-lg) !important;
+            --shadow-s: var(--custom-shadow-sm) !important;
+            --shadow-m: var(--custom-shadow-md) !important;
+            --shadow-l: var(--custom-shadow-lg) !important;
 
             /* Misc */
-            --color-accent-soft: rgba(255, 140, 0, 0.2) !important; /* Used for focus shadows */
-            --color-error: var(--error-text) !important; /* For error messages */
-            --color-error-background: var(--error-bg) !important;
-            --color-error-border: var(--error-border) !important;
-        }}
+            --color-accent-soft: rgba(255, 140, 0, 0.2) !important;
+            --color-error: var(--custom-error-text) !important;
+            --color-error-background: var(--custom-error-bg) !important;
+            --color-error-border: var(--custom-error-border) !important;
 
-        /* Base styles for html and body */
-        body, html {{
-            background-color: var(--background-secondary) !important;
-            color: var(--text-primary) !important;
-            transition: none !important; /* Prevent any Gradio theme change transitions */
-        }}
+            /* Specific overrides for common Gradio components that might be problematic */
+            --block-border-color: var(--custom-border-color) !important;
+            --input-border-color: var(--custom-border-color) !important;
+            --input-label-color: var(--custom-text-primary) !important;
+            --link-text-color: var(--custom-primary-color) !important;
+            --link-text-color-hover: var(--custom-primary-hover) !important;
 
-        /* General Gradio container and element overrides */
-        .gradio-container {{
-            max-width: 900px !important;
-            margin: 0 auto !important;
-            padding: 1.5rem !important;
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-            background-color: var(--background-secondary) !important; /* Ensure main container background */
-            box-shadow: none !important;
-            color: var(--text-primary) !important;
-        }}
-        .main-dashboard-container > * {{
-            background-color: var(--background-primary) !important;
-            border-color: var(--border-color) !important; /* Ensure card borders are consistent */
-            color: var(--text-primary) !important;
-        }}
-        .app-header-wrapper {{
-            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
-            border: 2px solid var(--border-color) !important;
-            border-radius: 16px !important;
-            padding: 2.5rem 1.5rem !important;
-            margin-bottom: 1.5rem !important;
-            box-shadow: var(--shadow-md) !important;
-            position: relative;
-            overflow: hidden;
-            text-align: center !important;
-            color: var(--text-primary) !important;
-        }}
-        .app-header-wrapper::before {{
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: radial-gradient(circle at top left, rgba(255,140,0,0.3) 0%, transparent 60%), radial-gradient(circle at bottom right, rgba(255,140,0,0.3) 0%, transparent 60%);
-            z-index: 0;
-            opacity: 0.8;
-            pointer-events: none;
-        }}
-        .app-header-logo {{
-            font-size: 8.5rem !important;
-            margin-bottom: 0.75rem !important;
-            display: block !important;
-            color: var(--primary-color) !important;
-            position: relative;
-            z-index: 1;
-            animation: float-icon 3s ease-in-out infinite alternate;
-        }}
-        @keyframes float-icon {{
-            0% {{ transform: translateY(0px); }}
-            50% {{ transform: translateY(-5px); }}
-            100% {{ transform: translateY(0px); }}
-        }}
-        .app-header-title {{
-            font-family: 'Poppins', sans-serif !important;
-            font-size: 3rem !important;
-            font-weight: 800 !important;
-            color: var(--text-primary) !important;
-            margin: 0 0 0.75rem 0 !important;
-            line-height: 1.1 !important;
-            letter-spacing: -0.03em !important;
-            position: relative;
-            z-index: 1;
-            display: inline-block;
-            max-width: 100%;
-        }}
-        .app-header-tagline {{
-            font-size: 1.25rem !important;
-            color: var(--text-secondary) !important;
-            font-weight: 400 !important;
-            margin: 0 !important;
-            max-width: 700px;
-            display: inline-block;
-            position: relative;
-            z-index: 1;
-        }}
-        .main-dashboard-container {{
-            display: flex !important;
-            flex-direction: column !important;
-            gap: 1.25rem !important;
-        }}
-        .dashboard-card-section {{
-            background-color: var(--background-primary) !important;
-            border: 2px solid var(--border-color) !important;
-            border-radius: 12px !important;
-            padding: 0 !important;
-            box-shadow: var(--shadow-sm) !important;
-            transition: all 0.3s ease-out !important;
-            cursor: default;
-            color: var(--text-primary) !important;
-        }}
-        .dashboard-card-section:hover {{
-            box-shadow: var(--shadow-md) !important;
-            transform: translateY(-3px) !important;
-        }}
-        .full-width-center {{
-            display: flex !important;
-            justify-content: center !important;
-            align-items: center !important;
-            width: 100% !important;
-            flex-direction: column !important;
-            background-color: transparent !important;
-        }}
-        .section-title-gradient-bar {{
-            background-color: var(--background-secondary) !important;
-            padding: 1.25rem 1.75rem !important;
-            border-top-left-radius: 10px !important;
-            border-top-right-radius: 10px !important;
-            margin-bottom: 0 !important;
-            text-align: center !important;
-            box-sizing: border-box;
-            width: 100%;
-            color: var(--text-primary) !important;
-        }}
-        .section-title {{
-            font-family: 'Poppins', sans-serif !important;
-            font-size: 1.7rem !important;
-            font-weight: 700 !important;
-            color: var(--text-primary) !important;
-            margin: 0 !important;
-            padding-bottom: 0 !important;
-            border-bottom: 2px solid var(--border-color) !important;
-            line-height: 1.1 !important;
-            display: inline-block !important;
-            text-align: center !important;
-            letter-spacing: -0.01em !important;
-        }}
-        .dashboard-card-content-area {{
-            padding: 0 1.75rem 1.75rem 1.75rem !important;
-            background-color: var(--background-primary) !important;
-            box-sizing: border-box;
-            width: 100%;
-            color: var(--text-primary) !important;
-        }}
-        .dashboard-card-section p {{
-            line-height: 1.7 !important;
-            color: var(--text-primary) !important;
-            font-size: 1rem !important;
-            text-align: left !important;
-            background-color: transparent !important;
-            margin: 0 !important;
-            padding: 0 !important;
-            white-space: normal !important;
-        }}
-        .dashboard-card-section strong, .dashboard-card-section b {{
-            font-weight: 700 !important;
-            color: var(--primary-color) !important;
-        }}
-        /* More specific overrides for Gradio components */
-        .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel,
-        .gr-columns, .gr-column {{
-            background-color: var(--background-primary) !important;
-            color: var(--text-primary) !important;
-            border-color: var(--border-color) !important; /* Ensure consistent borders */
-            white-space: normal !important;
-            overflow-wrap: break-word;
-            word-break: break-word;
-        }}
-        .gradio-html, .gradio-markdown, .gradio-textbox, .gradio-radio, .gradio-button {{
-            background-color: transparent !important; /* Let parent background control this */
-            color: var(--text-primary) !important;
-            white-space: normal !important;
-            overflow-wrap: break-word;
-            word-break: break-word;
-        }}
-        .gradio-textbox textarea,
-        .gradio-textbox input,
-        .gradio-radio label,
-        .placeholder {{
-            background-color: var(--background-primary) !important;
-            color: var(--text-primary) !important;
-        }}
-        .gradio-textbox {{
-            margin-bottom: 0.5rem !important;
+            /* Ensure scrollbar in textboxes if it ever gets themed */
+            --scrollbar-thumb-color: var(--custom-border-color) !important;
+            --scrollbar-track-color: var(--custom-background-secondary) !important;
         }}
+
+        /* Base styles for html and body - ensure no dark mode inheritance */
+        body, html {{
+            background-color: var(--custom-background-secondary) !important;
+            color: var(--custom-text-primary) !important;
+            transition: none !important; /* Extremely important to prevent theme transition flickering */
+        }}
+
+        /* Target the main Gradio application container directly if it's the root */
+        .gradio-app {{
+            background-color: var(--custom-background-secondary) !important;
+            color: var(--custom-text-primary) !important;
+            /* Add any other global overrides if needed for the app container */
+        }}
+
+        /* Ensure all core Gradio blocks and components use our defined colors */
+        .gr-block, .gr-box, .gr-panel, .gr-form, .gr-columns, .gr-column,
+        .gradio-html, .gradio-markdown, .gradio-prose {{
+            background-color: var(--custom-background-primary) !important;
+            color: var(--custom-text-primary) !important;
+            border-color: var(--custom-border-color) !important;
+            /* Ensure text content within markdown and HTML is consistent */
+            --text-color-body: var(--custom-text-primary) !important; /* Re-apply explicitly */
+            --text-color-subdued: var(--custom-text-secondary) !important; /* Re-apply explicitly */
+        }}
+        
+        /* Specific overrides for input fields */
         .gradio-textbox textarea,
         .gradio-textbox input {{
-            border: 2px solid var(--border-color) !important;
-            border-radius: 8px !important;
-            padding: 0.85rem 1rem !important;
-            font-size: 0.98rem !important;
-            font-family: 'Inter', sans-serif !important;
-            color: var(--text-primary) !important; /* Ensure text color in inputs */
-            transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
-            box-shadow: var(--shadow-sm) !important;
-        }}
-        .gradio-textbox .scroll-hide {{
-            background-color: var(--background-primary) !important;
+            background-color: var(--custom-background-primary) !important;
+            color: var(--custom-text-primary) !important;
+            border: 2px solid var(--custom-border-color) !important;
+            box-shadow: var(--custom-shadow-sm) !important;
         }}
         .gradio-textbox textarea:focus,
         .gradio-textbox input:focus {{
+            border-color: var(--custom-border-focus) !important;
+            box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important; /* Use rgba for consistent shadow */
             outline: none !important;
-            border-color: var(--border-focus) !important;
-            box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
-        }}
-        .gradio-radio {{
-            padding: 0 !important;
-            margin-top: 1rem !important;
-        }}
-        .gradio-radio input[type="radio"] {{
-            display: none !important;
         }}
+
+        /* Specific overrides for radio buttons */
         .gradio-radio label {{
-            display: flex !important;
-            justify-content: center !important;
-            align-items: center !important;
-            padding: 0.75rem 1rem !important;
-            border: 2px solid var(--border-color) !important;
-            border-radius: 8px !important;
-            color: var(--text-primary) !important;
-            font-weight: 500 !important;
-            cursor: pointer !important;
-            transition: all 0.2s ease-out !important;
-            box-shadow: var(--shadow-sm) !important;
-            margin: 0.2rem 0 !important;
-            width: 100 !important;
-            box-sizing: border-box !important;
+            background-color: var(--custom-background-primary) !important;
+            color: var(--custom-text-primary) !important;
+            border: 2px solid var(--custom-border-color) !important;
+            box-shadow: var(--custom-shadow-sm) !important;
         }}
         .gradio-radio label span.text-lg {{
-            font-weight: 600 !important;
-            color: var(--text-primary) !important;
-            font-size: 0.98rem !important;
+            color: var(--custom-text-primary) !important; /* Ensure text color of radio labels */
         }}
         .gradio-radio label:hover {{
-            background-color: var(--background-secondary) !important;
-            border-color: var(--primary-color) !important;
-            box-shadow: var(--shadow-md) !important;
+            background-color: var(--custom-background-secondary) !important;
+            border-color: var(--custom-primary-color) !important;
+            box-shadow: var(--custom-shadow-md) !important;
             transform: translateY(-2px) !important;
         }}
         .gradio-radio input[type="radio"]:checked + label {{
-            background-color: var(--primary-color) !important;
-            color: white !important; /* Ensure text is white when selected */
-            border-color: var(--primary-hover) !important;
-            box-shadow: var(--shadow-md) !important;
-            transform: translateY(-1px) !important;
+            background-color: var(--custom-primary-color) !important;
+            color: white !important; /* Text should be white on selected primary background */
+            border-color: var(--custom-primary-hover) !important;
+            box-shadow: var(--custom-shadow-md) !important;
         }}
         .gradio-radio input[type="radio"]:checked + label span.text-lg {{
-            color: white !important; /* Ensure text is white when selected */
-        }}
-        .gradio-radio .gr-form {{
-            padding: 0 !important;
-        }}
-        .gradio-textbox label,
-        .gradio-radio > label {{
-            font-weight: 600 !important;
-            color: var(--text-primary) !important;
-            font-size: 1rem !important;
-            margin-bottom: 0.6rem !important;
-            display: block !important;
-            text-align: left !important;
-        }}
-        .gr-prose {{
-            font-size: 0.9rem !important;
-            color: var(--text-secondary) !important;
-            margin-top: 0.4rem !important;
-            text-align: left !important;
-            background-color: transparent !important;
-        }}
-        .input-column {{
-            display: flex !important;
-            flex-direction: column !important;
-            gap: 1.25rem !important;
-            margin-bottom: 0.5rem !important;
-        }}
-        .input-field {{
-            flex: none !important;
-            width: 100% !important;
-        }}
-        .button-row {{
-            display: flex !important;
-            gap: 1rem !important;
-            justify-content: flex-end !important;
-            margin-top: 1.5rem !important;
-        }}
-        .gradio-button {{
-            padding: 0.85rem 1.8rem !important;
-            border-radius: 9px !important;
-            font-weight: 600 !important;
-            font-size: 1rem !important;
-            transition: all 0.2s ease-out !important;
-            cursor: pointer !important;
-            border: 2px solid transparent !important;
-            text-align: center !important;
-            color: var(--text-primary) !important;
+            color: white !important; /* Text should be white on selected primary background */
         }}
+        
+        /* Overrides for buttons */
         .gr-button-primary {{
-            background-color: var(--primary-color) !important;
-            color: white !important; /* Ensure text is white for primary buttons */
-            box-shadow: var(--shadow-sm) !important;
+            background-color: var(--custom-primary-color) !important;
+            color: white !important;
         }}
         .gr-button-primary:hover {{
-            background-color: var(--primary-hover) !important;
-            box-shadow: var(--shadow-md) !important;
-            transform: translateY(-2px) !important;
-        }}
-        .gr-button-primary:active {{
-            transform: translateY(1px) !important;
-            box-shadow: none !important;
+            background-color: var(--custom-primary-hover) !important;
         }}
         .gr-button-secondary {{
             background-color: transparent !important;
-            color: var(--text-primary) !important;
-            border-color: var(--border-color) !important;
+            color: var(--custom-text-primary) !important;
+            border-color: var(--custom-border-color) !important;
         }}
         .gr-button-secondary:hover {{
-            background-color: var(--background-secondary) !important;
-            border-color: var(--primary-color) !important;
-            transform: translateY(-2px) !important;
-        }}
-        .gr-button-secondary:active {{
-            transform: translateY(1px) !important;
-            box-shadow: none !important;
-        }}
-        .output-content-wrapper {{
-            background-color: var(--background-primary) !important;
-            border: 2px solid var(--border-color) !important;
-            border-radius: 8px !important;
-            padding: 1.5rem !important;
-            min-height: 150px !important;
-            color: var(--text-primary) !important;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-        }}
-        .animated-output-content {{
-            opacity: 0;
-            animation: fadeInAndSlideUp 0.7s ease-out forwards;
-            width: 100%;
-            white-space: pre-wrap;
-            overflow-wrap: break-word;
-            word-break: break-word;
-            text-align: left !important;
-            color: var(--text-primary) !important;
-        }}
-        @keyframes fadeInAndSlideUp {{
-            from {{ opacity: 0; transform: translateY(15px); }}
-            to {{ opacity: 1; transform: translateY(0); }}
-        }}
-        .response-header {{
-            font-size: 1.3rem !important;
-            font-weight: 700 !important;
-            color: var(--primary-color) !important;
-            margin-bottom: 0.75rem !important;
-            display: flex !important;
-            align-items: center !important;
-            gap: 0.6rem !important;
-            text-align: left !important;
-            width: 100%;
-            justify-content: flex-start;
-        }}
-        .response-icon {{
-            font-size: 1.5rem !important;
-            color: var(--primary-color) !important;
-        }}
-        .divider {{
-            border: none !important;
-            border-top: 1px dashed var(--border-color) !important;
-            margin: 1rem 0 !important;
-        }}
-        .error-message {{
-            background-color: var(--error-bg) !important;
-            border: 2px solid var(--error-border) !important;
-            color: var(--error-text) !important;
-            padding: 1.25rem !important;
-            border-radius: 8px !important;
-            display: flex !important;
-            align-items: flex-start !important;
-            gap: 0.8rem !important;
-            font-size: 0.95rem !important;
-            font-weight: 500 !important;
-            line-height: 1.6 !important;
-            text-align: left !important;
-            width: 100%;
-            box-sizing: border-box;
-        }}
-        .error-message a {{
-            color: var(--error-text) !important;
-            text-decoration: underline !important;
-        }}
-        .error-icon {{
-            font-size: 1.4rem !important;
-            line-height: 1 !important;
-            margin-top: 0.1rem !important;
-        }}
-        .error-details {{
-            font-size: 0.85rem !important;
-            color: var(--error-text) !important;
-            margin-top: 0.5rem !important;
-            opacity: 0.8;
+            background-color: var(--custom-background-secondary) !important;
+            border-color: var(--custom-primary-color) !important;
         }}
+
+        /* Placeholders */
         .placeholder {{
-            background-color: var(--background-primary) !important;
-            border: 2px dashed var(--border-color) !important;
-            border-radius: 8px !important;
-            padding: 2.5rem 1.5rem !important;
-            text-align: center !important;
-            color: var(--text-secondary) !important;
-            font-style: italic !important;
-            font-size: 1.1rem !important;
-            width: 100%;
-            box-sizing: border-box;
+            background-color: var(--custom-background-primary) !important;
+            border: 2px dashed var(--custom-border-color) !important;
+            color: var(--custom-text-secondary) !important;
         }}
+
+        /* Example table */
         .examples-section .gr-samples-table {{
-            border: 2px solid var(--border-color) !important;
-            border-radius: 8px !important;
-            overflow: hidden !important;
-            margin-top: 1rem !important;
-        }}
-        .examples-section .gr-samples-table th,
-        .examples-section .gr-samples-table td {{
-            padding: 0.9rem !important;
-            border: none !important;
-            font-size: 0.95rem !important;
-            text-align: left !important;
-            color: var(--text-primary) !important;
+            border: 2px solid var(--custom-border-color) !important;
+            background-color: var(--custom-background-primary) !important;
+            color: var(--custom-text-primary) !important;
         }}
         .examples-section .gr-samples-table th {{
-            background-color: var(--background-secondary) !important;
-            font-weight: 700 !important;
-            color: var(--text-primary) !important;
+            background-color: var(--custom-background-secondary) !important;
+            color: var(--custom-text-primary) !important;
         }}
         .examples-section .gr-samples-table td {{
-            background-color: var(--background-primary) !important;
-            color: var(--text-primary) !important;
-            border-top: 1px solid var(--border-color) !important;
-            cursor: pointer !important;
-            transition: background 0.2s ease, transform 0.1s ease !important;
+            background-color: var(--custom-background-primary) !important;
+            color: var(--custom-text-primary) !important;
+            border-top: 1px solid var(--custom-border-color) !important;
         }}
         .examples-section .gr-samples-table tr:hover td {{
-            background-color: var(--background-secondary) !important;
-            transform: translateX(5px);
+            background-color: var(--custom-background-secondary) !important;
+            transform: translateX(5px); /* Keep the hover effect */
+        }}
+        .examples-section .gr-samples-table th, .examples-section .gr-samples-table td {{
+            border-color: var(--custom-border-color) !important; /* Explicitly set border color */
+        }}
+
+        /* Error messages */
+        .error-message {{
+            background-color: var(--custom-error-bg) !important;
+            border: 2px solid var(--custom-error-border) !important;
+            color: var(--custom-error-text) !important;
         }}
-        .gr-examples .gr-label,
-        .gr-examples .label-wrap,
-        .gr-examples .gr-accordion-header {{
-            display: none !important;
+        .error-message a {{
+            color: var(--custom-error-text) !important; /* Ensure link color in error messages */
         }}
+
+        /* Footer */
         .app-footer-wrapper {{
-            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
-            border: 2px solid var(--border-color) !important;
-            border-radius: 12px !important;
-            padding: 1.75rem !important;
-            margin-top: 1.5rem !important;
-            margin-bottom: 1.5rem !important;
-            text-align: center !important;
-            color: var(--text-primary) !important;
+            background: linear-gradient(145deg, var(--custom-background-primary) 0%, var(--custom-background-secondary) 100%) !important;
+            border: 2px solid var(--custom-border-color) !important;
+            color: var(--custom-text-primary) !important;
         }}
         .app-footer p {{
-            margin: 0 !important;
-            max-width: 90% !important;
-            font-size: 0.95rem !important;
-            color: var(--text-secondary) !important;
-            line-height: 1.6 !important;
-            background-color: transparent !important;
-            text-align: center !important;
-            white-space: normal !important;
+            color: var(--custom-text-secondary) !important;
         }}
         .app-footer strong, .app-footer b {{
-            font-weight: 700 !important;
-            color: var(--primary-color) !important;
+            color: var(--custom-primary-color) !important;
         }}
         .app-footer a {{
-            color: var(--primary-color) !important;
-            text-decoration: underline !important;
-            font-weight: 600 !important;
+            color: var(--custom-primary-color) !important;
+        }}
+
+        /* General element classes that might inherit */
+        .gr-text, .gr-label, .gr-checkbox-group, .gr-radio-group,
+        .gr-slider, .gr-number, .gr-dropdown {{
+            color: var(--custom-text-primary) !important;
         }}
-        .app-footer a:hover {{
-            text-decoration: none !important;
+
+        /* Ensure all text within any Gradio element defaults to primary text color */
+        .gradio-container * {{
+            color: var(--custom-text-primary) !important;
+        }}
+        /* And then re-override for specific cases that need secondary text color */
+        .gradio-container .gr-prose,
+        .gradio-container .app-header-tagline,
+        .gradio-container .placeholder,
+        .gradio-container .app-footer p {{
+            color: var(--custom-text-secondary) !important;
+        }}
+        /* And re-override for primary color elements */
+        .gradio-container .app-header-logo,
+        .gradio-container .response-header,
+        .gradio-container .response-icon,
+        .gradio-container .custom-link {{
+            color: var(--custom-primary-color) !important;
+        }}
+        .gradio-container .gr-button-primary {{
+            color: white !important;
+        }}
+        /* Ensure inputs specifically use primary text color, not inherited secondary */
+        .gradio-textbox textarea, .gradio-textbox input,
+        .gradio-radio label span.text-lg {{
+            color: var(--custom-text-primary) !important;
         }}
+
+
+        /* Existing Media Queries (keep as is) */
         @media (max-width: 768px) {{
             .gradio-container {{
                 padding: 1rem !important;
@@ -902,7 +608,7 @@ Answer:"""
         }}
         """
 
-        # Removed theme_mode="light" to avoid TypeError
+        # Removed theme_mode="light" to prevent the TypeError
         with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
             with gr.Group(elem_classes="app-header-wrapper"):
                 gr.Markdown(
@@ -994,11 +700,19 @@ Answer:"""
                 gr.Markdown(
                     f"""
                     <style>
+                        /* Use custom variables for consistency */
                         .custom-link {{
                             font-weight: bold !important;
-                            color: orange !important;
+                            color: var(--custom-primary-color) !important;
                             text-decoration: underline;
                         }}
+                        /* Ensure general footer text color */
+                        .app-footer p {{
+                            color: var(--custom-text-secondary) !important;
+                        }}
+                        .app-footer strong, .app-footer b {{
+                            color: var(--custom-primary-color) !important;
+                        }}
                     </style>
                     <p><strong>Disclaimer:</strong> This tool is for informational purposes only and does not constitute legal advice. For specific legal guidance, always consult with a licensed attorney in your jurisdiction.</p>
                     <p>Developed by <strong>Nischal Subedi</strong>. Connect on <a href="https://www.linkedin.com/in/nischal1/" target="_blank" class="custom-link">LinkedIn</a> or explore insights at <a href="https://datascientistinsights.substack.com/" target="_blank" class="custom-link">Substack</a>.</p>