Widen layout, restore logo, flatten Settings via CSS vars, drop heading rules

app.py

@@ -137,11 +137,12 @@ gradio-app, gradio-app > .gradio-container, gradio-app > div {
 }
 
 [class*="gradio-container"] {
-  max-width: 1180px !important;
+  max-width: 1480px !important;
+  width: 92vw !important;
   margin-left: auto !important;
   margin-right: auto !important;
-  padding-left: 24px !important;
-  padding-right: 24px !important;
+  padding-left: 28px !important;
+  padding-right: 28px !important;
   color: #0f2744;
 }
 
@@ -180,14 +181,19 @@ gradio-app, gradio-app > .gradio-container, gradio-app > div {
   border: none !important;
   box-shadow: none !important;
 }
-/* Strip any overlay buttons (share / download / fullscreen) that some Gradio builds
-   still inject on top of the image, even when their show_* flags are off. */
+/* Strip ONLY the overlay icon buttons (share / download / fullscreen). Do NOT touch
+   the wrapper <button> that Gradio uses to render the image itself, otherwise the
+   logo disappears. */
 .banner-logo-image .icon-button-wrapper,
 .banner-logo-image .source-selection,
-.banner-logo-image button,
+.banner-logo-image .icon-buttons,
+.banner-logo-image .icon-button,
 .banner-logo-image [aria-label*="hare" i],
 .banner-logo-image [aria-label*="ownload" i],
-.banner-logo-image [aria-label*="ullscreen" i] {
+.banner-logo-image [aria-label*="ullscreen" i],
+.banner-logo-image button[title*="hare" i],
+.banner-logo-image button[title*="ownload" i],
+.banner-logo-image button[title*="ullscreen" i] {
   display: none !important;
 }
 
@@ -214,9 +220,7 @@ gradio-app, gradio-app > .gradio-container, gradio-app > div {
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: #2563eb;
-  margin: 0 0 14px 0;
-  padding-bottom: 10px;
-  border-bottom: 1px solid rgba(37,99,235,0.14);
+  margin: 0 0 12px 0;
 }
 
 /* --- ICON GRID (Paper / Code / Dataset / Model) --- */
@@ -291,23 +295,46 @@ gradio-app, gradio-app > .gradio-container, gradio-app > div {
   background: transparent !important;
 }
 
-/* Inside our white section-cards, the OUTER Gradio block of each component must
-   be flat — otherwise we get the "card inside card" double border on Settings. */
+/* Inside our white section-cards, every nested Gradio wrapper must be FLAT
+   (no border / shadow / background), otherwise the auto-form Gradio inserts
+   around consecutive Dropdown+Slider components shows up as a "card inside card".
+   We override the relevant CSS variables locally + add explicit overrides. */
+.section-card {
+  --block-shadow: none;
+  --block-shadow-dark: none;
+  --block-background-fill: transparent;
+  --block-border-color: transparent;
+  --block-border-width: 0px;
+  --panel-background-fill: transparent;
+  --panel-border-width: 0px;
+  --background-fill-secondary: transparent;
+}
 .section-card .block,
 .section-card .form,
 .section-card .gr-form,
 .section-card .gr-block,
 .section-card .gr-panel,
+.section-card .gr-group,
 .section-card .gradio-dropdown,
 .section-card .gradio-slider,
 .section-card .gradio-textbox,
 .section-card .gradio-markdown,
-.section-card .gradio-code {
+.section-card .gradio-code,
+.section-card > div > div,
+.section-card > div > div > div {
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
   padding: 0 !important;
 }
+/* Re-add tasteful spacing inside a card (we just stripped padding above). */
+.section-card .form,
+.section-card .gr-form,
+.section-card > div > div {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
 
 /* Direct children of a card get vertical rhythm without extra chrome. */
 .section-card > * + * { margin-top: 14px; }
@@ -451,11 +478,34 @@ gradio-app, gradio-app > .gradio-container, gradio-app > div {
   color: #0f2744 !important;
   border: none !important;
 }
+[class*="gradio-container"] .codemirror-wrapper,
+[class*="gradio-container"] .cm-editor {
+  border-radius: 14px !important;
+  overflow: hidden !important;
+}
 [class*="gradio-container"] .cm-gutters {
   border-right: 1px solid #dbeafe !important;
   color: #6b86a6 !important;
 }
 
+/* --- GLOBAL ROUNDED CORNERS: kill any leftover right-angle frames --- */
+[class*="gradio-container"] .block,
+[class*="gradio-container"] .form,
+[class*="gradio-container"] .gr-box,
+[class*="gradio-container"] .gr-panel,
+[class*="gradio-container"] .gr-group,
+[class*="gradio-container"] [data-testid="textbox"],
+[class*="gradio-container"] [data-testid="dropdown"],
+[class*="gradio-container"] .tabitem,
+[class*="gradio-container"] .tab-content,
+[class*="gradio-container"] .gradio-markdown,
+[class*="gradio-container"] .gradio-code {
+  border-radius: 16px !important;
+}
+[class*="gradio-container"] button {
+  border-radius: 12px !important;
+}
+
 /* --- "Try Examples" preset buttons --- */
 .inline-example-title {
   font-size: 0.72rem;
@@ -807,14 +857,12 @@ with gr.Blocks(
 
             with gr.Group(elem_classes="section-card"):
                 gr.HTML('<div class="section-heading">Try Examples</div>')
-                gr.HTML('<div class="example-note">Click to auto-fill the chat box</div>')
                 with gr.Column(elem_classes="example-buttons"):
                     ex1_btn = gr.Button("🌏  Plan a 2-day Tokyo trip under $250 with trade-offs", variant="secondary")
                     ex2_btn = gr.Button("🤖  Compare 3 open-source coding agents with pros/cons", variant="secondary")
                     ex3_btn = gr.Button("⚖️  RAG vs fine-tuning for legal QA: which and why?", variant="secondary")
 
             with gr.Group(elem_classes="section-card"):
-                gr.HTML('<div class="section-heading">Output</div>')
                 with gr.Tabs():
                     with gr.TabItem("Result"):
                         answer = gr.Markdown(label="Final Answer")