updated UI_v2

app.py

@@ -483,7 +483,7 @@ Answer:"""
         /* Section titles within the unified main content area */
         .section-title { /* For 'Know Your Rights' */
             font-family: var(--font-family-header) !important;
-            font-size: 2.5rem !important; /* Larger section titles */
+            font-size: 2.8rem !important; /* Larger section titles */
             font-weight: 800 !important; /* Extra bold */
             color: var(--text-primary-dark) !important;
             text-align: center !important;
@@ -495,7 +495,7 @@ Answer:"""
         }
         .sub-section-title { /* For 'Ask Your Question', 'Example Questions to Ask' */
             font-family: var(--font-family-header) !important;
-            font-size: 2rem !important; /* Slightly smaller for sub-sections */
+            font-size: 2.2rem !important; /* Slightly smaller for sub-sections, increased from 2rem */
             font-weight: 700 !important;
             color: var(--text-primary-dark) !important;
             text-align: center !important; /* Ensures centering for all sub-section titles */
@@ -609,8 +609,6 @@ Answer:"""
                 color: var(--text-primary-light) !important;
                 box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
             }
-            .gradio-textbox textarea::placeholder,
-            .gradio-textbox input[type=password]::placeholder { color: #A0AEC0 !important; }
             .gradio-textbox textarea:focus,
             .gradio-dropdown select:focus,
             .gradio-textbox input[type=password]:focus {
@@ -892,16 +890,19 @@ Answer:"""
         }
         .app-footer {
             padding: 0 var(--padding-lg) !important;
-            text-align: center !important;
+            /* Changed from align-items: center */
             display: flex;
             flex-direction: column;
-            align-items: center;
+            align-items: flex-start; /* Align content to the start (left) */
+            max-width: 1120px; /* Match main content width */
+            margin: 0 auto; /* Center the footer content block */
         }
         .app-footer p {
             font-size: 1.05rem !important;
             color: var(--text-secondary-dark) !important;
             margin-bottom: 1rem;
-            max-width: 900px;
+            max-width: 900px; /* Keep max-width for readability */
+            text-align: left; /* Ensure text aligns left within its container */
             transition: color var(--transition-speed);
         }
         .app-footer a {
@@ -977,7 +978,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-top: 1.2rem !important; margin-bottom: 0.7rem !important; }
+            .sub-section-title { font-size: 1.8rem !important; margin-bottom: 0.7rem !important; } /* Adjusted for 1024px */
             .section-divider { margin: 1.8rem 0; }
             .input-row { gap: 1.5rem; }
             .input-field { min-width: 280px; }
@@ -986,6 +987,7 @@ Answer:"""
             .examples-section { padding-top: 1.2rem; }
             .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.9rem 1.1rem !important; }
             .app-footer-wrapper { margin-top: 0.6rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
+            .app-footer { padding: 0 1.5rem !important; } /* Match main content padding */
         }
         @media (max-width: 768px) {
             .gradio-container > .flex.flex-col { padding: 0 1rem !important; }
@@ -1006,9 +1008,10 @@ Answer:"""
             .output-card .response-header { font-size: 1.5rem; }
             .output-card .response-icon { font-size: 1.7rem; }
             .output-card .placeholder { padding: 2.5rem 1.5rem; font-size: 1.1rem; }
-            .examples-section { padding-top: 1.2rem; } /* Restore to 1.2rem from 1rem */
-            .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.9rem 1.1rem !important; font-size: 1.0rem !important; } /* Restore to 0.9rem/1.1rem */
+            .examples-section { padding-top: 1.2rem; }
+            .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.9rem 1.1rem !important; font-size: 1.0rem !important; }
             .app-footer-wrapper { margin-top: 0.5rem; padding-top: 2rem; padding-bottom: 2rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
+            .app-footer { padding: 0 1rem !important; } /* Match main content padding */
         }
         @media (max-width: 480px) {
             .gradio-container > .flex.flex-col { padding: 0 0.8rem !important; }
@@ -1030,6 +1033,7 @@ Answer:"""
             .examples-section { padding-top: 0.8rem; }
             .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.6rem 0.8rem !important; font-size: 0.95rem !important; }
             .app-footer-wrapper { margin-top: 0.4rem; padding-top: 1.5rem; padding-bottom: 1.5rem; border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
+            .app-footer { padding: 0 0.8rem !important; } /* Match main content padding */
         }
         """
 
@@ -1063,7 +1067,8 @@ Answer:"""
                 with gr.Group(elem_classes="dashboard-card-section"):
                     gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>")
                     api_key_input = gr.Textbox(
-                        label="OpenAI API Key", type="password", placeholder="Enter your API key (e.g., sk-...)",
+                        label="", # Removed redundant label here
+                        type="password", placeholder="Enter your API key (e.g., sk-...)",
                         info="Required to process your query. Securely used per request, not stored. <a href='https://platform.openai.com/api-keys' target='_blank'>Get one free from OpenAI</a>.", lines=1
                     )