Rebuild styling on Base theme: full blue-white palette, no grey panels

app.py

@@ -60,60 +60,99 @@ SEARCH_CACHE: Dict[str, Dict[str, Any]] = {}
 VISIT_CACHE: Dict[str, Dict[str, Any]] = {}
 LOGO_PATH = str(Path(__file__).resolve().parent / "assets" / "quest-logo.png")
 
-# Gradio 5: neutral defaults read as grey; tune theme variables so panels/forms match the blue‑white UI.
-APP_THEME = gr.themes.Soft(
+# Gradio 5 default themes pull greys from the neutral palette; Base + explicit overrides keep
+# the whole UI on a strict blue/white scheme without unwanted slate panels.
+APP_THEME = gr.themes.Base(
     primary_hue=gr.themes.colors.blue,
     secondary_hue=gr.themes.colors.sky,
     neutral_hue=gr.themes.colors.blue,
     font=gr.themes.GoogleFont("Manrope"),
     font_mono=gr.themes.GoogleFont("JetBrains Mono"),
 ).set(
-    body_background_fill="#f3f8ff",
+    body_background_fill="#f5f9ff",
     body_text_color="#0f2744",
     body_text_color_subdued="#4a6a8c",
     color_accent="*primary_600",
+    color_accent_soft="#dbeafe",
     background_fill_primary="#ffffff",
-    background_fill_secondary="#e8f1ff",
-    border_color_primary="#c7dbfa",
+    background_fill_secondary="#f0f6ff",
+    border_color_primary="#dbeafe",
     border_color_accent="*primary_500",
-    block_background_fill="transparent",
+    block_background_fill="#ffffff",
     block_border_width="0px",
     block_border_color="transparent",
-    block_shadow="none",
+    block_shadow="0 1px 2px rgba(15,39,68,0.04), 0 10px 30px rgba(37,99,235,0.06)",
+    block_radius="18px",
     block_label_background_fill="transparent",
     block_label_border_width="0px",
+    block_label_text_color="#3b5b7a",
+    block_label_text_weight="600",
+    block_title_text_color="#0f2744",
+    block_title_text_weight="700",
     block_title_border_width="0px",
     panel_background_fill="transparent",
     panel_border_width="0px",
     panel_border_color="transparent",
     input_background_fill="#ffffff",
-    input_border_color="#93c5fd",
+    input_background_fill_focus="#ffffff",
+    input_border_color="#bfdbfe",
+    input_border_color_focus="*primary_500",
     input_border_width="1px",
+    input_radius="14px",
     input_shadow="none",
-    input_shadow_focus="none",
+    input_shadow_focus="0 0 0 3px rgba(59,130,246,0.18)",
     code_background_fill="#f0f7ff",
     slider_color="*primary_500",
+    button_primary_background_fill="linear-gradient(135deg,#1d4ed8 0%,#3b82f6 100%)",
+    button_primary_background_fill_hover="linear-gradient(135deg,#1e40af 0%,#2563eb 100%)",
+    button_primary_text_color="#ffffff",
+    button_primary_border_color="transparent",
+    button_primary_shadow="0 8px 22px rgba(37,99,235,0.28)",
     button_secondary_background_fill="#ffffff",
     button_secondary_background_fill_hover="#eff6ff",
-    button_secondary_border_color="#93c5fd",
+    button_secondary_text_color="*primary_700",
+    button_secondary_border_color="#bfdbfe",
     button_cancel_background_fill="#ffffff",
     button_cancel_background_fill_hover="#eff6ff",
-    button_cancel_border_color="#93c5fd",
+    button_cancel_text_color="*primary_700",
+    button_cancel_border_color="#bfdbfe",
     table_border_color="#dbeafe",
     table_even_background_fill="#fafdff",
     table_odd_background_fill="#ffffff",
 )
 
 CUSTOM_CSS = """
-/* Gradio 5 uses versioned root classes (e.g. gradio-container-5-29-0); match all of them. */
+/* Gradio 5 uses versioned root classes (gradio-container-5-29-0). Match all of them and
+   replace every neutral grey surface with white / soft-blue tints. */
+
+html, body, gradio-app, [class*="gradio-container"] {
+  background: #f5f9ff !important;
+}
+
 [class*="gradio-container"] {
-  max-width: 1200px !important;
+  max-width: 1180px !important;
   color: #0f2744;
 }
 
-.banner-logo-image img,
-[class*="gradio-container"] .image-container img,
-[class*="gradio-container"] .image-frame img {
+[class*="gradio-container"] *::selection { background: rgba(37,99,235,0.18); }
+
+/* --- LEFT/RIGHT layout --- */
+.layout-gap { gap: 24px !important; align-items: flex-start; }
+.right-stack > * { margin-bottom: 12px; }
+.action-row { gap: 10px !important; margin-top: 12px; }
+.action-row button { min-width: 0; flex: 1; }
+
+/* --- LOGO --- */
+.banner-logo-image,
+.banner-logo-image .image-container,
+.banner-logo-image .image-frame,
+.banner-logo-image > div,
+.banner-logo-image button {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+.banner-logo-image img {
   width: 100%;
   max-width: 360px;
   height: auto;
@@ -124,41 +163,35 @@ CUSTOM_CSS = """
   box-shadow: none !important;
 }
 
-[class*="gradio-container"] .image-container,
-[class*="gradio-container"] .image-frame {
-  border: none !important;
-  background: transparent !important;
-  box-shadow: none !important;
-}
-
+/* --- SECTION CARDS --- */
+/* `section-card` becomes a real white rounded card with soft blue shadow, no grey. */
 .section-card {
-  border: none !important;
-  border-radius: 0 !important;
-  padding: 0 !important;
+  background: #ffffff !important;
+  border: 1px solid rgba(191,219,254,0.55) !important;
+  border-radius: 20px !important;
+  box-shadow: 0 1px 2px rgba(15,39,68,0.03), 0 16px 40px rgba(37,99,235,0.07) !important;
+  padding: 18px !important;
+}
+/* `no-frame` opts a card out of all chrome (used for logo + icon grid). */
+.no-frame {
   background: transparent !important;
+  border: none !important;
   box-shadow: none !important;
+  padding: 0 !important;
 }
 
 .section-heading {
   font-size: 0.72rem;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
   color: #2563eb;
-  margin: 0 0 10px 0;
-  padding-bottom: 8px;
-  border-bottom: 1px solid rgba(37, 99, 235, 0.18);
-}
-
-.layout-gap {
-  gap: 20px;
-  align-items: flex-start;
-}
-
-.right-stack > * {
-  margin-bottom: 10px;
+  margin: 0 0 14px 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(37,99,235,0.14);
 }
 
+/* --- ICON GRID (Paper / Code / Dataset / Model) --- */
 .icon-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -167,174 +200,239 @@ CUSTOM_CSS = """
   max-width: 360px;
   margin: 0 auto;
 }
-
 .icon-link {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 14px 14px;
-  border-radius: 14px;
+  padding: 16px 14px;
+  border-radius: 16px;
   text-decoration: none !important;
   color: #1d4ed8 !important;
-  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
+  background: #ffffff;
   font-weight: 600;
-  font-size: 17px;
-  box-shadow: 0 1px 0 rgba(37, 99, 235, 0.06), 0 8px 24px rgba(37, 99, 235, 0.08);
-  border: 1px solid rgba(147, 197, 253, 0.65);
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  font-size: 16px;
+  border: 1px solid rgba(191,219,254,0.7);
+  box-shadow: 0 1px 2px rgba(15,39,68,0.03), 0 10px 28px rgba(37,99,235,0.07);
+  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
 }
-
 .icon-link:hover {
   transform: translateY(-1px);
-  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.12);
+  border-color: #93c5fd;
+  box-shadow: 0 4px 18px rgba(37,99,235,0.14);
 }
 
+/* --- BUTTONS --- */
+[class*="gradio-container"] button.primary,
 [class*="gradio-container"] .gr-button-primary {
-  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
-  color: white !important;
+  background: linear-gradient(135deg,#1d4ed8 0%,#3b82f6 100%) !important;
+  color: #ffffff !important;
   border: none !important;
-  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28) !important;
+  box-shadow: 0 8px 22px rgba(37,99,235,0.28) !important;
 }
-
-[class*="gradio-container"] .gr-button-secondary {
-  background: #ffffff !important;
-  color: #1d4ed8 !important;
-  border: 1px solid rgba(147, 197, 253, 0.9) !important;
-  box-shadow: 0 1px 2px rgba(15, 39, 68, 0.04) !important;
-}
-
-[class*="gradio-container"] .gr-button-secondary:hover {
-  background: #f0f7ff !important;
+[class*="gradio-container"] button.primary:hover,
+[class*="gradio-container"] .gr-button-primary:hover {
+  background: linear-gradient(135deg,#1e40af 0%,#2563eb 100%) !important;
+  box-shadow: 0 10px 26px rgba(37,99,235,0.34) !important;
 }
-
+[class*="gradio-container"] button.secondary,
+[class*="gradio-container"] button.stop,
+[class*="gradio-container"] .gr-button-secondary,
 [class*="gradio-container"] .gr-button-stop {
   background: #ffffff !important;
   color: #1d4ed8 !important;
-  border: 1px solid rgba(147, 197, 253, 0.9) !important;
-  box-shadow: 0 1px 2px rgba(15, 39, 68, 0.04) !important;
+  border: 1px solid #bfdbfe !important;
+  box-shadow: 0 1px 2px rgba(15,39,68,0.04) !important;
 }
-
+[class*="gradio-container"] button.secondary:hover,
+[class*="gradio-container"] button.stop:hover,
+[class*="gradio-container"] .gr-button-secondary:hover,
 [class*="gradio-container"] .gr-button-stop:hover {
-  background: #f0f7ff !important;
+  background: #eff6ff !important;
+  border-color: #93c5fd !important;
 }
 
+/* --- KILL DEFAULT GREY BLOCKS / FORMS / PANELS --- */
 [class*="gradio-container"] .gr-group,
 [class*="gradio-container"] fieldset,
 [class*="gradio-container"] .gr-box,
-[class*="gradio-container"] .gr-panel {
-  border: none !important;
-  box-shadow: none !important;
+[class*="gradio-container"] .gr-panel,
+[class*="gradio-container"] .form,
+[class*="gradio-container"] .gr-form,
+[class*="gradio-container"] .block,
+[class*="gradio-container"] .wrap,
+[class*="gradio-container"] .container {
   background: transparent !important;
 }
-
-/* Form rows use theme vars; keep chrome transparent so only inputs read as “cards”. */
-[class*="gradio-container"] .gr-form,
-[class*="gradio-container"] .form {
+/* Anything Gradio decides to paint with neutral_50 → make it white-on-card. */
+[class*="gradio-container"] [class*="svelte-"] > .form {
   background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
 }
 
+/* --- INPUTS / TEXTAREA --- */
 [class*="gradio-container"] textarea,
-[class*="gradio-container"] input:not([type="checkbox"]):not([type="radio"]) {
+[class*="gradio-container"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
   background: #ffffff !important;
-  border: 1px solid rgba(147, 197, 253, 0.85) !important;
-  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.06) !important;
+  border: 1px solid #bfdbfe !important;
+  box-shadow: none !important;
   border-radius: 14px !important;
+  color: #0f2744 !important;
 }
-
+[class*="gradio-container"] textarea::placeholder,
+[class*="gradio-container"] input::placeholder { color: #7591b3 !important; }
 [class*="gradio-container"] textarea:focus,
 [class*="gradio-container"] input:focus {
   border-color: #3b82f6 !important;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
+  box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
+  outline: none !important;
 }
 
-[class*="gradio-container"] .gr-markdown,
-[class*="gradio-container"] .prose {
-  color: #0f2744 !important;
+/* --- DROPDOWN --- */
+[class*="gradio-container"] [data-testid="dropdown"],
+[class*="gradio-container"] [data-testid="dropdown"] > .wrap,
+[class*="gradio-container"] .secondary-wrap,
+[class*="gradio-container"] [class*="dropdown"] .wrap {
+  background: #ffffff !important;
+  border: 1px solid #bfdbfe !important;
+  border-radius: 14px !important;
+  box-shadow: none !important;
 }
-
-[class*="gradio-container"] .gr-markdown a,
-[class*="gradio-container"] .prose a {
+[class*="gradio-container"] .options ul,
+[class*="gradio-container"] .options {
+  background: #ffffff !important;
+  border: 1px solid #bfdbfe !important;
+  border-radius: 12px !important;
+  box-shadow: 0 12px 30px rgba(37,99,235,0.12) !important;
+}
+[class*="gradio-container"] .options li[aria-selected="true"],
+[class*="gradio-container"] .options li:hover {
+  background: #eff6ff !important;
   color: #1d4ed8 !important;
 }
 
-/* Tabs: no heavy panels */
-[class*="gradio-container"] .tabs {
-  border: none !important;
+/* Small "info / help" labels under inputs */
+[class*="gradio-container"] .info,
+[class*="gradio-container"] [data-testid*="info"],
+[class*="gradio-container"] .gr-info {
+  color: #6b86a6 !important;
   background: transparent !important;
+  font-size: 12px !important;
 }
 
-.inline-example-title {
-  font-size: 0.72rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: #2563eb;
-  margin: 16px 0 4px 0;
-}
-
-.example-buttons {
-  display: grid;
-  gap: 10px;
-  margin-top: 8px;
-}
-
-.example-note {
-  color: #4a6a8c;
-  font-size: 12px;
-  margin: 0 0 6px 0;
+/* --- SLIDERS (Gradio uses native input[type=range], not noUi) --- */
+[class*="gradio-container"] input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  background: #dbeafe;
+  border-radius: 999px;
+  outline: none;
+  box-shadow: none !important;
+  border: none !important;
 }
-
-.no-frame {
+[class*="gradio-container"] input[type="range"]::-webkit-slider-runnable-track {
+  height: 6px;
+  background: linear-gradient(90deg,#2563eb var(--val,50%), #dbeafe var(--val,50%));
+  border-radius: 999px;
+}
+[class*="gradio-container"] input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2px solid #2563eb;
+  box-shadow: 0 2px 6px rgba(37,99,235,0.25);
+  margin-top: -6px;
+  cursor: pointer;
+}
+[class*="gradio-container"] input[type="range"]::-moz-range-track {
+  height: 6px;
+  background: #dbeafe;
+  border-radius: 999px;
+}
+[class*="gradio-container"] input[type="range"]::-moz-range-progress {
+  height: 6px;
+  background: #2563eb;
+  border-radius: 999px;
+}
+[class*="gradio-container"] input[type="range"]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2px solid #2563eb;
+  box-shadow: 0 2px 6px rgba(37,99,235,0.25);
+}
+/* The legacy noUi slider, kept just in case */
+[class*="gradio-container"] .noUi-target { background: #dbeafe !important; border: none !important; box-shadow: none !important; }
+[class*="gradio-container"] .noUi-connect { background: #2563eb !important; }
+[class*="gradio-container"] .noUi-handle  { background: #ffffff !important; border: 2px solid #2563eb !important; box-shadow: 0 2px 8px rgba(37,99,235,0.2) !important; }
+
+/* --- TABS --- */
+[class*="gradio-container"] .tabs,
+[class*="gradio-container"] .tab-container,
+[class*="gradio-container"] .tab-wrapper {
   background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
 }
-
-.slider-root .noUi-target,
-.slider-root [role="slider"] {
-  --track-color: #dbeafe;
-  --range-color: #2563eb;
+[class*="gradio-container"] .tab-container::after {
+  background: rgba(37,99,235,0.18) !important;
 }
-
-.slider-root .noUi-target {
-  background: #dbeafe !important;
+[class*="gradio-container"] .tab-wrapper button {
+  color: #4a6a8c !important;
+  font-weight: 600 !important;
 }
-
-.slider-root .noUi-connect {
-  background: #2563eb !important;
-}
-
-[class*="gradio-container"] .noUi-target {
-  border: none !important;
-  box-shadow: none !important;
-  background: #e8f1ff !important;
+[class*="gradio-container"] .tab-wrapper button.selected {
+  color: #1d4ed8 !important;
 }
-
-[class*="gradio-container"] .noUi-connect {
+[class*="gradio-container"] .tab-wrapper button.selected::after {
   background: #2563eb !important;
 }
 
-[class*="gradio-container"] .noUi-handle {
+/* --- MARKDOWN / PROSE --- */
+[class*="gradio-container"] .gr-markdown,
+[class*="gradio-container"] .prose,
+[class*="gradio-container"] .markdown { color: #0f2744 !important; }
+[class*="gradio-container"] .gr-markdown a,
+[class*="gradio-container"] .prose a { color: #1d4ed8 !important; }
+
+/* --- CODE BLOCK (Trace tab) --- */
+[class*="gradio-container"] .codemirror-wrapper,
+[class*="gradio-container"] .cm-editor,
+[class*="gradio-container"] .cm-scroller,
+[class*="gradio-container"] .cm-gutters,
+[class*="gradio-container"] .cm-content {
+  background: #f3f8ff !important;
+  color: #0f2744 !important;
   border: none !important;
-  box-shadow: 0 0 0 2px #2563eb, 0 2px 8px rgba(37, 99, 235, 0.2) !important;
-  background: #ffffff !important;
+}
+[class*="gradio-container"] .cm-gutters {
+  border-right: 1px solid #dbeafe !important;
+  color: #6b86a6 !important;
 }
 
-/* Example preset buttons live in normal Button blocks; soften any label chrome */
-[class*="gradio-container"] .example-buttons .gr-form {
-  gap: 10px !important;
+/* --- "Try Examples" preset buttons --- */
+.inline-example-title {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #2563eb;
+  margin: 0 0 4px 0;
 }
+.example-note { color: #4a6a8c; font-size: 12px; margin: 0 0 10px 0; }
+.example-buttons { display: grid; gap: 10px; margin-top: 4px; }
 
+/* --- gr.Examples component (currently unused but defensively styled) --- */
 [class*="gradio-container"] [data-testid="block-examples"] {
-  background: linear-gradient(180deg, #f7fbff 0%, #eef4ff 100%) !important;
+  background: #f0f6ff !important;
+  border: 1px solid #dbeafe !important;
   border-radius: 16px !important;
   padding: 12px !important;
-  border: 1px solid rgba(147, 197, 253, 0.45) !important;
+  box-shadow: none !important;
 }
-
 [class*="gradio-container"] [data-testid="block-examples"] table,
 [class*="gradio-container"] [data-testid="block-examples"] thead,
 [class*="gradio-container"] [data-testid="block-examples"] tbody,
@@ -343,19 +441,21 @@ CUSTOM_CSS = """
   border: none !important;
   background: transparent !important;
 }
-
 [class*="gradio-container"] [data-testid="block-examples"] button {
   background: #ffffff !important;
   color: #1d4ed8 !important;
-  border: none !important;
+  border: 1px solid #bfdbfe !important;
   border-radius: 12px !important;
-  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.9) !important;
+  box-shadow: none !important;
   font-size: 13px !important;
 }
-
 [class*="gradio-container"] [data-testid="block-examples"] button:hover {
   background: #eff6ff !important;
+  border-color: #93c5fd !important;
 }
+
+/* Hide the small "footer" branding so nothing grey leaks in below the app */
+footer { display: none !important; }
 """
 
 
@@ -657,20 +757,21 @@ with gr.Blocks(
                     placeholder="Ask anything you want to research...",
                     lines=6,
                 )
-                with gr.Row():
+                with gr.Row(elem_classes="action-row"):
                     run_btn = gr.Button("Run Research", variant="primary", size="lg")
                     stop_btn = gr.Button("Stop", variant="stop", size="lg")
                     clear_btn = gr.Button("Clear", variant="secondary", size="lg")
 
             with gr.Group(elem_classes="section-card"):
-                gr.HTML('<div class="inline-example-title">Try Examples</div>')
+                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")
+                    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")
@@ -710,13 +811,26 @@ with gr.Blocks(
                     allow_custom_value=True,
                     info="You can type any model id supported by HF Inference API.",
                 )
-                max_turns = gr.Slider(label="Max Turns", minimum=2, maximum=20, value=8, step=1, elem_classes="slider-root")
+                max_turns = gr.Slider(
+                    label="Max Turns",
+                    minimum=2,
+                    maximum=20,
+                    value=8,
+                    step=1,
+                )
                 max_search_results = gr.Slider(
-                    label="Search Results Per Query", minimum=1, maximum=10, value=5, step=1
-                    , elem_classes="slider-root"
+                    label="Search Results Per Query",
+                    minimum=1,
+                    maximum=10,
+                    value=5,
+                    step=1,
                 )
                 temperature = gr.Slider(
-                    label="Temperature", minimum=0.0, maximum=1.5, value=0.4, step=0.1, elem_classes="slider-root"
+                    label="Temperature",
+                    minimum=0.0,
+                    maximum=1.5,
+                    value=0.4,
+                    step=0.1,
                 )
 
     run_event = run_btn.click(