updated UI_v37

app.py

@@ -416,17 +416,17 @@ Answer:"""
             border-bottom: 2px solid var(--border-dark) !important; width: 100%;
             transition: color var(--transition-speed), border-color var(--transition-speed);
         }
-        .sub-section-title { /* MODIFIED FOR CENTERING */
+        .sub-section-title {
             font-family: var(--font-family-header) !important;
-            font-size: 2.5rem !important;
-            font-weight: 700 !important;
+            font-size: 2.7rem !important; /* Slightly increased for more prominence */
+            font-weight: 800 !important; /* Increased font weight for more visual emphasis */
             color: var(--text-primary-dark) !important;
             text-align: center !important;
             margin-top: 1.5rem !important;
             margin-bottom: 0.8rem !important;
             transition: color var(--transition-speed);
-            display: block !important; /* ADDED: Ensure it's a block element */
-            width: 100% !important;   /* ADDED: Ensure it takes full width for centering */
+            display: block !important; /* Ensure it's a block element */
+            width: 100% !important;   /* Ensure it takes full width for centering */
         }
         @media (prefers-color-scheme: light) {
             .section-title, .sub-section-title { color: var(--text-primary-light) !important; border-bottom-color: var(--border-light) !important; }
@@ -472,7 +472,7 @@ Answer:"""
         .gradio-textbox textarea::placeholder, .gradio-textbox input[type=password]::placeholder { color: #808090 !important; }
         .gradio-textbox textarea:focus, .gradio-dropdown select:focus, .gradio-textbox input[type=password]:focus {
             border-color: var(--accent-main-dark) !important;
-            box-shadow: 0 0 0 6px var(--focus-ring-dark) !important, inset<ctrl61> 0 1px 3px rgba(0,0,0,0.4);
+            box-shadow: 0 0 0 6px var(--focus-ring-dark) !important, inset 0 1px 3px rgba(0,0,0,0.4);
             outline: none !important;
         }
         @media (prefers-color-scheme: light) {
@@ -662,7 +662,7 @@ Answer:"""
             .main-dashboard-container { padding: var(--padding-md) !important; margin-bottom: 0.6rem; border-radius: var(--radius-md); gap: 2rem; }
             .dashboard-card-section { padding: var(--padding-sm); border-radius: var(--radius-sm); }
             .section-title { font-size: 2.2rem !important; margin-bottom: 1.5rem !important; }
-            .sub-section-title { font-size: 1.8rem !important; margin-bottom: 0.7rem !important; }
+            .sub-section-title { font-size: 2.0rem !important; margin-bottom: 0.7rem !important; } /* Adjusted for responsiveness */
             .section-divider { margin: 1.8rem 0; } .input-row { gap: 1.5rem; } .input-field { min-width: 280px; }
             .gradio-textbox textarea { min-height: 160px; } .output-card .response-header { font-size: 1.7rem; }
             .examples-section { padding-top: 1.2rem; }
@@ -678,7 +678,7 @@ Answer:"""
             .main-dashboard-container { padding: var(--padding-sm) !important; margin-bottom: 0.5rem; border-radius: var(--radius-md); gap: 1.8rem; }
             .dashboard-card-section { padding: 1.5rem; border-radius: var(--radius-sm); }
             .section-title { font-size: 2rem !important; margin-bottom: 1.2rem !important; }
-            .sub-section-title { font-size: 1.6rem !important; margin-top: 1rem !important; margin-bottom: 0.6rem !important; }
+            .sub-section-title { font-size: 1.8rem !important; margin-top: 1rem !important; margin-bottom: 0.6rem !important; } /* Adjusted for responsiveness */
             .section-divider { margin: 1.5rem 0; } .input-row { flex-direction: column; gap: 1rem; } .input-field { min-width: 100%; }
             .gradio-textbox textarea { min-height: 140px; } .button-row { justify-content: stretch; gap: 1rem; }
             .gradio-button { width: 100%; padding: 1.1rem 2rem !important; font-size: 1.1rem !important; }
@@ -697,7 +697,7 @@ Answer:"""
             .main-dashboard-container { padding: 1.2rem !important; margin-bottom: 0.4rem; border-radius: var(--radius-sm); gap: 1.5rem; }
             .dashboard-card-section { padding: 1rem; border-radius: var(--radius-xs); }
             .section-title { font-size: 1.8rem !important; margin-bottom: 1rem !important; }
-            .sub-section-title { font-size: 1.4rem !important; margin-top: 0.8rem !important; margin-bottom: 0.5rem !important; }
+            .sub-section-title { font-size: 1.5rem !important; margin-top: 0.8rem !important; margin-bottom: 0.5rem !important; } /* Adjusted for responsiveness */
             .section-divider { margin: 1rem 0; }
             .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] { font-size: 1.05rem !important; padding: 1rem 1.2rem !important; }
             .gradio-textbox textarea { min-height: 120px; }
@@ -729,7 +729,7 @@ Answer:"""
 
                 # --- Section 1: Introduction and Disclaimer Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>") # Should be centered by CSS
+                    gr.Markdown("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>") # Centered by CSS
                     gr.Markdown(
                         """
                         <p>Navigate landlord-tenant laws with ease. This assistant provides detailed, state-specific answers grounded in legal authority.</p>
@@ -739,7 +739,7 @@ Answer:"""
 
                 # --- Section 2: OpenAI API Key Input Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>") # Should be centered by CSS
+                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>") # Centered by CSS
                     api_key_input = gr.Textbox(
                         label="", 
                         type="password", placeholder="Enter your API key (e.g., sk-...)",
@@ -748,7 +748,7 @@ Answer:"""
 
                 # --- Section 3: Query Input and State Selection Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Ask Your Question</h3>") # Should be centered by CSS
+                    gr.Markdown("<h3 class='sub-section-title'>Ask Your Question</h3>") # Centered by CSS
                     with gr.Row(elem_classes="input-row"): 
                         with gr.Column(elem_classes="input-field", scale=3):
                             query_input = gr.Textbox(
@@ -766,7 +766,7 @@ Answer:"""
 
                 # --- Section 4: Output Display Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>") # Should be centered by CSS
+                    gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>") # Centered by CSS
                     output = gr.Markdown(
                         value="<div class='placeholder output-card'>The answer will appear here after submitting your query.</div>",
                         elem_classes="output-content-wrapper output-card" 
@@ -774,7 +774,7 @@ Answer:"""
 
                 # --- Section 5: Example Questions Section (NO ACCORDION, direct display) ---
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Example Questions to Ask</h3>") # Should be centered by CSS
+                    gr.Markdown("<h3 class='sub-section-title'>Example Questions to Ask</h3>") # Centered by CSS
                     if example_queries:
                         gr.Examples(
                             examples=example_queries, inputs=[query_input, state_input],