Final 5.3.2

src/app.py

@@ -378,15 +378,16 @@ def create_interface():
     css = """
     /* Base styling for proper contrast */
     .gradio-container {
-        color: #333 !important;
-        background-color: #ffffff !important;
+        color: #3c3c3c !important;
+        background-color: #faf9f7 !important;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
     }
     
     /* Fix all text elements EXCEPT buttons */
     .gradio-container *:not(button):not(.gr-button):not(.gr-button-primary):not(.gr-button-secondary), 
     .gradio-container *:not(button):not(.gr-button):not(.gr-button-primary):not(.gr-button-secondary)::before, 
     .gradio-container *:not(button):not(.gr-button):not(.gr-button-primary):not(.gr-button-secondary)::after {
-        color: #333 !important;
+        color: #3c3c3c !important;
     }
     
     /* Headers */
@@ -396,7 +397,7 @@ def create_interface():
     .gradio-container h4, 
     .gradio-container h5, 
     .gradio-container h6 {
-        color: #1a1a1a !important;
+        color: #2c2c2c !important;
         font-weight: 600 !important;
     }
     
@@ -405,18 +406,19 @@ def create_interface():
     .gradio-container div:not(.gr-button):not(.gr-button-primary):not(.gr-button-secondary),
     .gradio-container span:not(.gr-button):not(.gr-button-primary):not(.gr-button-secondary),
     .gradio-container label {
-        color: #333 !important;
+        color: #3c3c3c !important;
     }
     
     /* Input fields */
     .gradio-container input,
     .gradio-container textarea {
-        color: #333 !important;
+        color: #3c3c3c !important;
         background-color: #ffffff !important;
-        border: 1px solid #ccc !important;
+        border: 1px solid #d4c4b0 !important;
+        border-radius: 6px !important;
     }
     
-    /* Buttons - High specificity to override universal rules */
+    /* Buttons - Professional neutral theme */
     .gradio-container button,
     .gradio-container .gr-button,
     .gradio-container .gr-button-primary,
@@ -428,11 +430,12 @@ def create_interface():
         color: white !important;
         font-weight: 500 !important;
         text-shadow: none !important;
+        border-radius: 6px !important;
     }
     
     .gradio-container .gr-button-primary,
     .gradio-container button[variant="primary"] {
-        background: #007bff !important;
+        background: #8b7355 !important;
         color: white !important;
         border: none !important;
         padding: 8px 16px !important;
@@ -441,7 +444,7 @@ def create_interface():
     
     .gradio-container .gr-button-secondary,
     .gradio-container button[variant="secondary"] {
-        background: #6c757d !important;
+        background: #a08b73 !important;
         color: white !important;
         border: none !important;
         padding: 8px 16px !important;
@@ -449,7 +452,7 @@ def create_interface():
     }
     
     .gradio-container button:not([variant]) {
-        background: #28a745 !important;
+        background: #6b5d4f !important;
         color: white !important;
         border: none !important;
         padding: 8px 16px !important;
@@ -460,20 +463,24 @@ def create_interface():
     .gradio-container button:hover,
     .gradio-container .gr-button:hover,
     .gradio-container .gr-button-primary:hover {
-        background: #0056b3 !important;
+        background: #756749 !important;
         color: white !important;
+        transform: translateY(-1px) !important;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
     }
     
     .gradio-container .gr-button-secondary:hover {
-        background: #545b62 !important;
+        background: #8f7c65 !important;
         color: white !important;
+        transform: translateY(-1px) !important;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
     }
     
     /* Markdown content */
     .gradio-container .gr-markdown,
     .gradio-container .markdown,
     .gradio-container .prose {
-        color: #333 !important;
+        color: #3c3c3c !important;
         background-color: transparent !important;
     }
     
@@ -482,41 +489,41 @@ def create_interface():
         max-width: 1200px; 
         margin: auto; 
         padding: 20px;
-        background-color: #ffffff !important;
-        color: #333 !important;
+        background-color: #faf9f7 !important;
+        color: #3c3c3c !important;
     }
     
     .output-markdown {
         font-size: 16px; 
         line-height: 1.6; 
-        color: #333 !important;
-        background-color: #ffffff !important;
+        color: #3c3c3c !important;
+        background-color: #faf9f7 !important;
     }
     
     .details-box {
-        background-color: #f8f9fa !important; 
+        background-color: #f5f3f0 !important; 
         padding: 15px; 
         border-radius: 8px; 
         margin: 10px 0; 
-        color: #333 !important;
-        border: 1px solid #dee2e6 !important;
+        color: #3c3c3c !important;
+        border: 1px solid #e0d5c7 !important;
     }
     
     .reasoning-box {
-        background-color: #fff !important; 
+        background-color: #ffffff !important; 
         padding: 20px; 
-        border: 1px solid #dee2e6 !important; 
+        border: 1px solid #e0d5c7 !important; 
         border-radius: 8px; 
-        color: #333 !important;
+        color: #3c3c3c !important;
     }
     
     .unit4-section {
-        background-color: #e3f2fd !important; 
+        background-color: #f0ede8 !important; 
         padding: 20px; 
         border-radius: 8px; 
         margin: 20px 0; 
-        color: #1565c0 !important;
-        border: 1px solid #90caf9 !important;
+        color: #4a4035 !important;
+        border: 1px solid #d4c4b0 !important;
     }
     
     .unit4-section h1,
@@ -524,30 +531,30 @@ def create_interface():
     .unit4-section h3,
     .unit4-section p,
     .unit4-section div:not(button):not(.gr-button) {
-        color: #1565c0 !important;
+        color: #4a4035 !important;
     }
     
     /* Login section */
     .oauth-login {
-        background: #f8f9fa !important; 
+        background: #f5f3f0 !important; 
         padding: 10px; 
         border-radius: 5px; 
         margin: 10px 0;
-        color: #333 !important;
-        border: 1px solid #dee2e6 !important;
+        color: #3c3c3c !important;
+        border: 1px solid #e0d5c7 !important;
     }
     
     /* Tables */
     .gradio-container table,
     .gradio-container th,
     .gradio-container td {
-        color: #333 !important;
+        color: #3c3c3c !important;
         background-color: #ffffff !important;
-        border: 1px solid #dee2e6 !important;
+        border: 1px solid #e0d5c7 !important;
     }
     
     .gradio-container th {
-        background-color: #f8f9fa !important;
+        background-color: #f5f3f0 !important;
         font-weight: 600 !important;
     }
     
@@ -556,7 +563,7 @@ def create_interface():
     .gradio-container .gr-file,
     .gradio-container .gr-textbox,
     .gradio-container .gr-checkbox {
-        color: #333 !important;
+        color: #3c3c3c !important;
         background-color: #ffffff !important;
     }
     
@@ -564,20 +571,32 @@ def create_interface():
     .gradio-container .gr-form,
     .gradio-container .gr-panel,
     .gradio-container .gr-block {
-        color: #333 !important;
+        color: #3c3c3c !important;
         background-color: transparent !important;
     }
     
-    /* Ensure dark text on light backgrounds for all content */
+    /* Ensure proper text on light backgrounds */
     .gradio-container .light,
     .gradio-container [data-theme="light"] {
-        color: #333 !important;
-        background-color: #ffffff !important;
+        color: #3c3c3c !important;
+        background-color: #faf9f7 !important;
     }
     
     /* Override any problematic inline styles but preserve button colors */
     .gradio-container [style*="color: white"]:not(button):not(.gr-button) {
-        color: #333 !important;
+        color: #3c3c3c !important;
+    }
+    
+    /* Professional spacing and shadows */
+    .gradio-container .gr-box {
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
+        border-radius: 8px !important;
+    }
+    
+    /* Loading states */
+    .gradio-container .loading {
+        background-color: #f5f3f0 !important;
+        color: #6b5d4f !important;
     }
     """