UI v31

app.py

@@ -299,16 +299,18 @@ Answer:"""
             
             --background-app: hsl(210, 15%, 15%); /* Dark charcoal/navy for overall background */
             --background-card: hsl(210, 30%, 20%); /* Deep blue for main content cards (image primary blue) */
-            --background-input-output: hsl(210, 25%, 30%); /* Lighter blue/gray for input/output elements (image inner blue) */
+            --background-input-output: hsl(0, 0%, 100%); /* PURE WHITE for input/output elements (as per latest request) */
             
             --text-on-dark: hsl(0, 0%, 95%); /* Very light text (white/light gray) for dark backgrounds */
+            --text-dark: hsl(210, 20%, 20%); /* Dark text for light backgrounds (input/output text) */
             
             --text-muted-on-dark: hsl(210, 10%, 70%); /* Muted light text for secondary info on dark backgrounds */
-            --text-muted-on-input: hsl(210, 15%, 55%); /* Muted blue-gray for placeholders on input fields */
+            --text-muted-on-input: hsl(210, 15%, 55%); /* Muted blue-gray for placeholders on white input fields */
             
             --border-card: hsl(210, 10%, 65%); /* Light gray for outer card borders (from image) */
-            --border-input: hsl(210, 15%, 45%); /* Mid-tone blue-gray for borders on inner elements */
-            
+            --border-input: hsl(210, 15%, 45%); /* Mid-tone blue-gray for borders on inner elements (original image) */
+            --border-white-input: hsl(210, 5%, 80%); /* Light gray border for white input fields (new) */
+
             --shadow-sm: 0 1px 3px rgba(0,0,0,0.15);
             --shadow-md: 0 4px 10px rgba(0,0,0,0.3);
             --shadow-lg: 0 10px 20px rgba(0,0,0,0.4);
@@ -320,7 +322,7 @@ Answer:"""
             --button-secondary-bg: hsl(0, 0%, 85%); /* Light gray button */
             --button-secondary-text: hsl(210, 30%, 20%); /* Dark text for secondary button */
 
-            --link-footer-color: hsl(210, 20%, 65%); /* Specific blue for footer links as per image */
+            --link-footer-color: var(--primary-color); /* GREEN for footer links (as per latest request, overrides image) */
         }
         
         /* Body and Gradio Container */
@@ -338,7 +340,7 @@ Answer:"""
             border-radius: 16px !important;
         }
 
-        /* Header Styling (title box) */
+        /* Header Styling (title box) - background matches other cards, not different */
         .app-header-wrapper {
             background: var(--background-card) !important; /* Consistent deep blue with other cards (as per image) */
             border: 2px solid var(--border-card) !important; /* Border for header is the same as card border */
@@ -381,7 +383,7 @@ Answer:"""
         .app-header-title {
             font-family: 'Poppins', sans-serif !important;
             font-size: 3rem !important;
-            font-weight: 800 !important;
+            font-weight: 800 !important; /* Bold */
             color: var(--text-on-dark) !important; /* White for title */
             margin: 0 0 0.75rem 0 !important;
             line-height: 1.1 !important;
@@ -422,13 +424,13 @@ Answer:"""
             transform: translateY(-3px) !important;
         }
 
-        /* Section Titles (e.g., "Welcome & Disclaimer") */
+        /* Section Titles (e.g., "Welcome & Disclaimer") - now centered */
         .sub-section-title {
             font-family: 'Poppins', sans-serif !important;
             font-size: 1.7rem !important;
-            font-weight: 700 !important;
+            font-weight: 700 !important; /* Bold */
             color: var(--text-on-dark) !important; /* White for titles */
-            text-align: left !important; /* LEFT-ALIGNED as per image */
+            text-align: center !important; /* CENTERED as per latest request */
             margin: 0 0 1.25rem 0 !important;
             padding-bottom: 0.75rem !important;
             border-bottom: 1px dashed rgba(255, 255, 255, 0.15) !important; /* Subtle light dashed line as separator */
@@ -444,19 +446,19 @@ Answer:"""
             color: var(--accent-orange) !important; /* Orange for specific strong text (e.g., Disclaimer) */
         }
 
-        /* Input Styling (textboxes, dropdowns) - now light blue-gray backgrounds */
+        /* Input Styling (textboxes, dropdowns) - now pure white backgrounds */
         .gradio-textbox textarea,
         .gradio-textbox input,
         .gradio-dropdown > div > input[type="text"],
         .gradio-dropdown .primary-wrap,
         .gradio-dropdown .scroll-hide {
-            background: var(--background-input-output) !important; /* Light blue-gray background for inputs */
-            border: 2px solid var(--border-input) !important; /* Mid-tone blue-gray border for inner elements */
+            background: var(--background-input-output) !important; /* PURE WHITE background for inputs */
+            border: 2px solid var(--border-white-input) !important; /* Light gray border for white inputs */
             border-radius: 8px !important;
             padding: 0.85rem 1rem !important;
             font-size: 0.98rem !important;
             font-family: 'Inter', sans-serif !important;
-            color: var(--text-on-dark) !important; /* Light text for inputs */
+            color: var(--text-dark) !important; /* Dark text for inputs */
             transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
             box-shadow: var(--shadow-sm) !important;
         }
@@ -542,14 +544,14 @@ Answer:"""
             box-shadow: none !important;
         }
 
-        /* Output Styling - now light blue-gray background */
+        /* Output Styling - now pure white background */
         .output-content-wrapper {
-            background: var(--background-input-output) !important; /* Light blue-gray background for output box */
+            background: var(--background-input-output) !important; /* PURE WHITE background for output box */
             border: 2px dashed var(--border-input) !important; /* Dashed light blue-gray border */
             border-radius: 8px !important;
             padding: 1.5rem !important;
             min-height: 150px !important;
-            color: var(--text-on-dark) !important; /* Light text for output */
+            color: var(--text-dark) !important; /* Dark text for output */
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -563,7 +565,7 @@ Answer:"""
             overflow-wrap: break-word;
             word-break: break-word;
             text-align: left !important;
-            color: var(--text-on-dark) !important; /* Ensure this also overrides to light text */
+            color: var(--text-dark) !important; /* Ensure this also overrides to dark text */
         }
         @keyframes fadeInAndSlideUp {
             from { opacity: 0; transform: translateY(15px); }
@@ -619,7 +621,7 @@ Answer:"""
             opacity: 0.8;
         }
         .placeholder {
-            background: var(--background-input-output) !important; /* Light blue-gray background for placeholder */
+            background: var(--background-input-output) !important; /* PURE WHITE background for placeholder */
             border: 2px dashed var(--border-input) !important; /* Dashed light blue-gray border */
             border-radius: 8px !important;
             padding: 2.5rem 1.5rem !important;
@@ -631,7 +633,7 @@ Answer:"""
             box-sizing: border-box;
         }
 
-        /* Examples Table Styling - now light blue-gray background rows */
+        /* Examples Table Styling - now pure white background rows */
         .examples-section .gr-samples-table {
             border: 2px solid var(--border-card) !important; /* Outer table border matches cards */
             border-radius: 8px !important;
@@ -651,14 +653,14 @@ Answer:"""
             color: var(--text-on-dark) !important; /* White text for header */
         }
         .examples-section .gr-samples-table td {
-            background: var(--background-input-output) !important; /* Light blue-gray for example rows */
-            color: var(--text-on-dark) !important; /* Light text for example rows */
+            background: var(--background-input-output) !important; /* PURE WHITE for example rows */
+            color: var(--text-dark) !important; /* Dark text for example rows */
             border-top: 1px solid var(--border-input) !important; /* Mid-tone blue-gray border between rows */
             cursor: pointer !important;
             transition: background 0.2s ease, transform 0.1s ease !important;
         }
         .examples-section .gr-samples-table tr:hover td {
-            background: hsl(210, 25%, 35%) !important; /* Slightly darker light blue-gray on hover */
+            background: hsl(0, 0%, 95%) !important; /* Slightly darker white on hover */
             transform: translateX(5px);
         }
         .gr-examples .gr-label,
@@ -684,14 +686,14 @@ Answer:"""
             line-height: 1.6 !important;
         }
         .app-footer a {
-            color: var(--link-footer-color) !important; /* BLUE highlight for links (as per image) */
+            color: var(--link-footer-color) !important; /* GREEN highlight for links (as per latest request) */
             text-decoration: none !important;
             font-weight: 600 !important;
             transition: text-decoration 0.2s ease, text-decoration-color 0.2s ease !important;
         }
         .app-footer a:hover {
             text-decoration: underline !important;
-            text-decoration-color: var(--link-footer-color) !important; /* Blue underline on hover */
+            text-decoration-color: var(--link-footer-color) !important; /* Green underline on hover */
         }
 
         /* Responsive Design */