UI v31

app.py

@@ -291,21 +291,23 @@ 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');
         
-        /* Root variables for consistent theming - based on verbal instructions */
+        /* Root variables for consistent theming */
         :root {
-            --primary-color: hsl(150, 60%, 35%); /* Darker Seafoam Green (for text, links, primary button) */
-            --primary-hover: hsl(150, 60%, 30%);
-            --accent-orange: hsl(30, 90%, 55%); /* Vibrant Orange for Disclaimer */
+            --primary-color: hsl(28, 90%, 50%); /* Vibrant Orange for primary action/highlights */
+            --primary-hover: hsl(28, 90%, 45%);
+            --accent-orange: hsl(28, 90%, 55%); /* Slightly brighter orange for specific text */
+            --accent-blue: hsl(200, 70%, 35%); /* Deep Blue for main title/section headers */
+            --accent-blue-light: hsl(200, 70%, 90%); /* Light blue for header background tint */
             
-            --background-app: hsl(180, 20%, 98%); /* Very light, off-white seafoam for overall background */
-            --background-header: hsl(150, 40%, 92%); /* Slightly more saturated light seafoam for header */
+            --background-app: hsl(0, 0%, 98%); /* Very light, off-white for overall background */
+            --background-header-start: hsl(40, 90%, 95%); /* Light yellow for header gradient start */
+            --background-header-end: hsl(28, 90%, 95%); /* Light orange for header gradient end */
             --background-card: hsl(0, 0%, 100%); /* Pure white for content cards */
             --background-input-output: hsl(0, 0%, 100%); /* Pure white for input/output elements */
             
-            --text-dark: hsl(210, 20%, 20%); /* Dark text for readability on light backgrounds */
+            --text-dark: hsl(210, 20%, 20%); /* Dark charcoal for primary text */
             --text-light: hsl(210, 10%, 30%); /* Slightly lighter dark for general text on white cards */
-            
-            --text-muted: hsl(210, 10%, 50%); /* Muted gray for secondary info/placeholders */
+            --text-muted: hsl(210, 10%, 45%); /* Muted gray for secondary info/placeholders */
             
             --border-card: hsl(210, 10%, 85%); /* Light gray border for cards */
             --border-input: hsl(210, 10%, 75%); /* Slightly darker gray for input borders */
@@ -339,7 +341,7 @@ Answer:"""
 
         /* Header Styling (title box) - distinct background */
         .app-header-wrapper {
-            background: var(--background-header) !important; /* Distinct light seafoam background */
+            background: linear-gradient(135deg, var(--background-header-start) 0%, var(--background-header-end) 100%) !important; /* Gradient from light yellow to light orange */
             border: 2px solid var(--border-card) !important; /* Consistent border with cards */
             border-radius: 16px !important;
             padding: 2.5rem 1.5rem !important;
@@ -357,8 +359,8 @@ Answer:"""
             left: 0;
             width: 100%;
             height: 100%;
-            background: radial-gradient(circle at top left, rgba(60,179,113,0.05) 0%, transparent 40%),
-                        radial-gradient(circle at bottom right, rgba(60,179,113,0.05) 0%, transparent 40%);
+            background: radial-gradient(circle at top left, rgba(255,165,0,0.05) 0%, transparent 40%),
+                        radial-gradient(circle at bottom right, rgba(255,165,0,0.05) 0%, transparent 40%);
             z-index: 0;
             opacity: 0.8;
             pointer-events: none;
@@ -367,7 +369,7 @@ Answer:"""
             font-size: 4.5rem !important; /* Larger icon */
             margin-bottom: 0.75rem !important;
             display: block !important;
-            color: var(--primary-color) !important; /* Primary color for icon */
+            color: var(--accent-blue) !important; /* Deep blue for icon */
             position: relative;
             z-index: 1;
             animation: float-icon 3s ease-in-out infinite alternate;
@@ -381,7 +383,7 @@ Answer:"""
             font-family: 'Poppins', sans-serif !important;
             font-size: 3rem !important;
             font-weight: 800 !important; /* Bold */
-            color: var(--primary-color) !important; /* Primary color for title */
+            color: var(--accent-blue) !important; /* Deep blue for title */
             margin: 0 0 0.75rem 0 !important;
             line-height: 1.1 !important;
             letter-spacing: -0.03em !important;
@@ -418,7 +420,7 @@ Answer:"""
         }
         .dashboard-card-section:hover {
             box-shadow: var(--shadow-md) !important;
-            transform: translateY(-3px) !important;
+            transform: translateY(-5px) !important; /* More pronounced lift */
         }
 
         /* Section Titles (e.g., "Welcome & Disclaimer") - now centered and bold */
@@ -426,11 +428,11 @@ Answer:"""
             font-family: 'Poppins', sans-serif !important;
             font-size: 1.7rem !important;
             font-weight: 700 !important; /* Bold */
-            color: var(--primary-color) !important; /* Primary color for titles */
+            color: var(--accent-blue) !important; /* Deep blue for titles */
             text-align: center !important; /* CENTERED */
             margin: 0 0 1.25rem 0 !important;
             padding-bottom: 0.75rem !important;
-            border-bottom: 2px solid var(--primary-color) !important; /* Consistent "blue line" (now green) */
+            border-bottom: 2px solid var(--accent-blue) !important; /* Consistent blue line */
             display: block !important;
             letter-spacing: -0.01em !important;
         }
@@ -469,8 +471,8 @@ Answer:"""
         .gradio-dropdown > div > input[type="text"]:focus,
         .gradio-dropdown .primary-wrap.focused {
             outline: none !important;
-            border-color: var(--border-focus) !important; /* Primary color border on focus */
-            box-shadow: 0 0 0 4px rgba(60, 179, 113, 0.2) !important; /* Green glow on focus */
+            border-color: var(--border-focus) !important; /* Orange border on focus */
+            box-shadow: 0 0 0 4px rgba(255, 165, 0, 0.2) !important; /* Orange glow on focus */
         }
         .gradio-textbox label,
         .gradio-dropdown label {
@@ -513,7 +515,7 @@ Answer:"""
             text-align: center !important;
         }
         .gr-button-primary {
-            background: var(--primary-color) !important; /* Green button */
+            background: var(--primary-color) !important; /* Orange button */
             color: white !important;
             box-shadow: var(--shadow-sm) !important;
         }
@@ -523,7 +525,7 @@ Answer:"""
             transform: translateY(-2px) !important;
         }
         .gr-button-primary:active {
-            transform: translateY(1px) !important;
+            transform: translateY(1px) !important; /* Press effect */
             box-shadow: none !important;
         }
         .gr-button-secondary {
@@ -533,11 +535,11 @@ Answer:"""
         }
         .gr-button-secondary:hover {
             background: hsl(210, 10%, 85%) !important; /* Darker gray on hover */
-            border-color: var(--primary-color) !important; /* Green border on hover */
+            border-color: var(--primary-color) !important; /* Orange border on hover */
             transform: translateY(-2px) !important;
         }
         .gr-button-secondary:active {
-            transform: translateY(1px) !important;
+            transform: translateY(1px) !important; /* Press effect */
             box-shadow: none !important;
         }
 
@@ -571,7 +573,7 @@ Answer:"""
         .response-header {
             font-size: 1.3rem !important;
             font-weight: 700 !important;
-            color: var(--primary-color) !important; /* Green for response header */
+            color: var(--accent-blue) !important; /* Blue for response header */
             margin-bottom: 0.75rem !important;
             display: flex !important;
             align-items: center !important;
@@ -579,7 +581,7 @@ Answer:"""
         }
         .response-icon {
             font-size: 1.5rem !important;
-            color: var(--primary-color) !important;
+            color: var(--accent-blue) !important;
         }
         .divider {
             border: none !important;
@@ -647,7 +649,7 @@ Answer:"""
         .examples-section .gr-samples-table th {
             background: var(--background-card) !important; /* White for example header */
             font-weight: 700 !important;
-            color: var(--primary-color) !important; /* Primary color for header text */
+            color: var(--accent-blue) !important; /* Blue for header text */
         }
         .examples-section .gr-samples-table td {
             background: var(--background-input-output) !important; /* Pure white for example rows */
@@ -658,7 +660,7 @@ Answer:"""
         }
         .examples-section .gr-samples-table tr:hover td {
             background: hsl(0, 0%, 95%) !important; /* Slightly darker white on hover */
-            transform: translateX(5px);
+            transform: translateX(8px); /* More pronounced slide */
         }
         .gr-examples .gr-label,
         .gr-examples .label-wrap,
@@ -683,14 +685,14 @@ Answer:"""
             line-height: 1.6 !important;
         }
         .app-footer a {
-            color: var(--link-footer-color) !important; /* GREEN highlight for links (same as submit button) */
+            color: var(--primary-color) !important; /* ORANGE highlight for links (same as submit button) */
             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; /* Green underline on hover */
+            text-decoration-color: var(--primary-color) !important; /* Orange underline on hover */
         }
 
         /* Responsive Design */