feat: improve style

app.py

@@ -38,8 +38,6 @@ if HF_TOKEN is None:
         "Missing Hugging Face token. Set NTV3_HF_TOKEN as a Space Secret."
     )
 
-# asyncio.set_event_loop_policy(asyncio.DefaultEventLoopPolicy())
-
 PLOT_TARGET_POINTS = int(os.environ.get("PLOT_TARGET_POINTS", "1500"))
 SEARCH_MAX_RESULTS = int(os.environ.get("SEARCH_MAX_RESULTS", "50"))
 
@@ -122,12 +120,21 @@ def _make_tracks_figure(
 
     n = len(series)
 
+    # Adjust vertical spacing based on number of tracks
+    # More spacing when fewer tracks to prevent title overlap
+    if n <= 2:
+        vertical_spacing = 0.15  # More space for 1-2 tracks
+    elif n <= 4:
+        vertical_spacing = 0.08  # Moderate space for 3-4 tracks
+    else:
+        vertical_spacing = 0.04  # Tighter spacing for many tracks
+
     # Create subplots with shared x-axis
     fig = make_subplots(
         rows=n,
         cols=1,
         shared_xaxes=True,
-        vertical_spacing=0.02,
+        vertical_spacing=vertical_spacing,
         subplot_titles=[title for title, _ in series],
     )
 
@@ -166,13 +173,31 @@ def _make_tracks_figure(
             col=1,
         )
 
+    # Adjust height and margins based on number of tracks
+    # More height per track when fewer tracks to accommodate titles
+    if n <= 2:
+        height_per_track = 200  # More height for 1-2 tracks
+        top_margin = 60  # More top margin for titles
+    elif n <= 4:
+        height_per_track = 170  # Moderate height for 3-4 tracks
+        top_margin = 50
+    else:
+        height_per_track = 150  # Standard height for many tracks
+        top_margin = 40
+
     # Update layout for better appearance
     fig.update_layout(
-        height=150 * n,  # Adjust height based on number of tracks
+        height=height_per_track * n,  # Adjust height based on number of tracks
         width=1200,
-        margin={"l": 80, "r": 20, "t": 40, "b": 60},
+        margin={"l": 80, "r": 20, "t": top_margin, "b": 60},
         hovermode="x unified",  # Show all values at same x position
         template="plotly_white",
+        modebar={
+            "activecolor": "#7dd3fc",  # Blue color for active/hovered buttons
+            "bgcolor": "rgba(255, 255, 255, 0.9)",
+            "color": "#7dd3fc",  # Blue color for buttons
+            "orientation": "v",
+        },
     )
 
     # Update y-axes to remove ticks and improve appearance
@@ -453,12 +478,6 @@ def remove_selected(current_selected: list[str], to_remove: list[str]):
     return gr.update(choices=cur, value=cur, visible=show_selected)
 
 
-def update_coords_on_species_change(species: str):
-    """Update coordinates when species changes."""
-    coords = DEFAULT_COORDS.get(species, DEFAULT_COORDS["human"])
-    return coords["chrom"], coords["start"], coords["end"]
-
-
 def reset_on_species_change(species: str):
     """Reset search and selected tracks when species changes."""
     # Clear results + selected when species changes (avoids mismatched IDs)
@@ -599,18 +618,8 @@ def predict(
 
     # Defaults if user picked none
     if has_bigwigs and not bigwig_selected:
-        default_bigwig_tracks = [
-            "ENCSR056HPM",  # K562 RNA-seq
-            "ENCSR921NMD",  # K562 DNAse
-            "ENCSR000DWD",  # K562 H3k4me3
-            "ENCSR000AKO",  # K562 CTCF
-            "ENCSR561FEE_P",  # HepG2 RNA-seq
-            "ENCSR000EJV",  # HepG2 DNAse
-            "ENCSR000AMP",  # HepG2 H3k4me3
-            "ENCSR000BIE",  # HepG2 CTCF
-        ]
         # Filter to only include tracks that are available for this species/assembly
-        bigwig_selected = [tid for tid in default_bigwig_tracks if tid in bw_names]
+        bigwig_selected = [tid for tid in DEFAULT_BIGWIG_TRACKS if tid in bw_names]
 
     if (not bed_elements) and bed_names:
         default_bed_elements = ["protein_coding_gene", "exon", "intron"]
@@ -672,9 +681,6 @@ def predict(
     fig = _make_tracks_figure(x, series, region=region)
     tprint("figure created")
 
-    png_path = _save_fig_png(fig)
-    tprint("figure png saved")
-
     meta = {
         "model_id": current_model_id,
         "species": out.species,
@@ -688,7 +694,16 @@ def predict(
         "plot_target_points": PLOT_TARGET_POINTS,
     }
 
-    return fig, png_path, meta, out, bigwig_selected, bed_elements
+    return (
+        gr.update(visible=True),  # predictions_heading
+        gr.update(visible=True),  # predictions_note
+        gr.update(value=fig, visible=True),  # plot
+        gr.update(visible=True),  # download_bigwig_btn
+        # meta,
+        out,
+        bigwig_selected,
+        bed_elements,
+    )
 
 
 # -----------------------------
@@ -699,32 +714,53 @@ CSS_PATH = Path(__file__).parent / "style.css"
 CSS = CSS_PATH.read_text() if CSS_PATH.exists() else ""
 
 JS = """
-function addDownloadIcon() {
-  const plot = document.querySelector("#tracks_plot");
-  if (!plot) return;
-  if (document.querySelector("#tracks_plot_download")) return;
-
-  const btn = document.createElement("div");
-  btn.id = "tracks_plot_download";
-  btn.title = "Download PNG";
-  btn.innerHTML = `
-    <svg viewBox="0 0 24 24" aria-hidden="true">
-      <path d="M5 20h14v-2H5v2zm7-18v10.17l3.59-3.58L17 10l-5 5-5-5
-        1.41-1.41L11 12.17V2h1z"/>
-    </svg>
-  `;
-  btn.onclick = () => {
-    const link = document.querySelector("#export_png_hidden a");
-    if (link) link.click();
-  };
-  plot.appendChild(btn);
+// Remove blue backgrounds from footer buttons after page loads
+function removeFooterButtonBackgrounds() {
+    // Target all buttons and links in footer
+    const footer = document.querySelector('footer');
+    if (footer) {
+        const buttons = footer.querySelectorAll('button, a[role="button"], a[class*="button"]');
+        buttons.forEach(btn => {
+            btn.style.setProperty('background', 'transparent', 'important');
+            btn.style.setProperty('background-color', 'transparent', 'important');
+            btn.style.setProperty('border', '1px solid rgba(125, 211, 252, 0.2)', 'important');
+        });
+    }
 }
-function setup() {
-  addDownloadIcon();
-  const obs = new MutationObserver(() => addDownloadIcon());
-  obs.observe(document.body, { childList: true, subtree: true });
+
+// Run on page load
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', removeFooterButtonBackgrounds);
+} else {
+    removeFooterButtonBackgrounds();
 }
-setup();
+
+// Also run after a delay to catch dynamically loaded content
+setTimeout(removeFooterButtonBackgrounds, 100);
+setTimeout(removeFooterButtonBackgrounds, 500);
+setTimeout(removeFooterButtonBackgrounds, 1000);
+
+// Use MutationObserver to watch for dynamically added footer buttons
+const observer = new MutationObserver(() => {
+    removeFooterButtonBackgrounds();
+});
+
+// Observe changes to the footer
+const footer = document.querySelector('footer');
+if (footer) {
+    observer.observe(footer, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['style', 'class']
+    });
+}
+
+// Also observe the entire document for footer additions
+observer.observe(document.body, {
+    childList: true,
+    subtree: true
+});
 """
 
 # BED list is small enough to keep as dropdown
@@ -803,6 +839,14 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
     Predict and visualize functional genomics signals directly from DNA using
     <strong>Nucleotide Transformer v3</strong>.
   </p>
+  
+  <div class="intro-pillrow">
+    <span class="intro-pill">🧬 Functional genomics</span>
+    <span class="intro-pill">📊 BigWig tracks</span>
+    <span class="intro-pill">🎯 Genome annotation</span>
+    <span class="intro-pill">🌍 Multi-species</span>
+    <span class="intro-pill">⚡ Interactive visualization</span>
+  </div>
 </div>
 
 <div class="intro-grid">
@@ -829,8 +873,8 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
     <h3>3) Explore</h3>
     <ul>
       <li>View stacked tracks across the region</li>
-      <li>Compare multiple signals side-by-side</li>
-      <li>Download a high-resolution PNG from the plot</li>
+      <li>Compare multiple tracks side-by-side</li>
+      <li>Download plot and BigWig files</li>
     </ul>
   </div>
 </div>
@@ -841,8 +885,7 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
     to get started, taking ~ 15 seconds to run for the example on human.</span>
 </div>
 
-<div style="margin-top: 16px; padding: 12px; background: rgba(0,0,0,0.03);
-  border-radius: 12px; font-size: 0.95rem;">
+<div class="intro-species-info">
   <strong>Available species:</strong> {_all_species_list}<br>
   <br>
   <strong>Species with functional tracks:</strong> {_bigwig_species_list}
@@ -853,7 +896,7 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
         elem_id="intro_markdown",
     )
 
-    gr.Markdown("## Select NTv3 post-trained model")
+    gr.Markdown("# Select NTv3 post-trained model")
 
     # Model display names (without InstaDeepAI/ prefix) and their full IDs
     MODEL_OPTIONS = {
@@ -875,7 +918,7 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
 
     model_status = gr.Markdown("", visible=False)
 
-    gr.Markdown("## Input DNA sequence")
+    gr.Markdown("# Input DNA sequence")
 
     # Get all available species from the pipeline
     all_species = sorted(ASSEMBLY_TO_SPECIES.values())
@@ -910,9 +953,23 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
             + ")"
         )
         with gr.Row():
-            chrom = gr.Textbox(label="Chromosome", value=_default_coords["chrom"])
-            start = gr.Number(label="Start", value=_default_coords["start"], precision=0)
-            end = gr.Number(label="End", value=_default_coords["end"], precision=0)
+                # chrom = gr.Textbox(
+                #     label="Chromosome", value=_default_coords["chrom"], elem_id="chromosome_input"
+                # )
+                chrom = gr.Dropdown(
+                    label="Chromosome",
+                    choices=[],                 # no predefined list
+                    value=_default_coords["chrom"],
+                    allow_custom_value=True,    # user can type anything (e.g. chr19, scaffold_123)
+                    filterable=True,            # enables typing/search UI
+                    elem_id="chromosome_input",
+                )
+                start = gr.Number(
+                    label="Start", value=_default_coords["start"], precision=0, elem_id="start_input"
+                )
+                end = gr.Number(
+                    label="End", value=_default_coords["end"], precision=0, elem_id="end_input"
+                )
 
     # DNA sequence section - visible only when "Enter DNA sequence" is selected
     # Using Textbox directly (not wrapped in Group) to avoid visual border/line
@@ -951,7 +1008,7 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
         outputs=[model_status, model_status],
     )
 
-    gr.Markdown("## Select functional tracks")
+    gr.Markdown("# Select functional tracks")
 
     # Button to download tracks metadata
     def get_metadata_file_path():
@@ -1013,24 +1070,27 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
         bigwig_clear_btn = gr.Button("Clear search results")
         bigwig_remove_btn = gr.Button("Remove all selected")
 
-    gr.Markdown("## Select genome annotation elements")
+    gr.Markdown("# Select genome annotation elements")
 
     bed_elements = gr.Dropdown(
         choices=_init_bed,
         value=_init_bed_selected if _init_bed_selected else [],
         multiselect=True,
         label="Genome annotation elements (search + select)",
+        elem_id="bed_elements_dropdown",
     )
 
     btn = gr.Button("Predict", elem_id="predict_btn")
 
-    gr.Markdown("## NTv3 predictions for selected tracks and elements")
-    gr.Markdown(
-        "Note: NTv3 predictions are for the 37.5% center of the input sequence."
+    predictions_heading = gr.Markdown(
+        "## NTv3 predictions for selected tracks and elements", visible=False
+    )
+    predictions_note = gr.Markdown(
+        "Note: NTv3 predictions are for the 37.5% center of the input sequence.",
+        visible=False,
     )
 
-    plot = gr.Plot(label="", elem_id="tracks_plot")
-    export_png = gr.File(elem_id="export_png_hidden", interactive=False)
+    plot = gr.Plot(label="", elem_id="tracks_plot", visible=False)
 
     # State to store prediction output and selections for BigWig export
     prediction_state = gr.State(value=None)
@@ -1038,13 +1098,12 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
     bed_elements_state = gr.State(value=[])
 
     download_bigwig_btn = gr.Button(
-        "📥 Download tracks as BigWig files (ZIP)", variant="secondary"
+        "📥 Download tracks as BigWig files (ZIP)",
+        variant="secondary",
+        visible=False,
     )
     export_bigwig = gr.File(label="Download BigWig files", visible=False)
 
-    with gr.Accordion("Meta (click to expand)", open=False):
-        meta = gr.JSON(label="Meta")
-
     # --- wiring (live search + auto-add) ---
 
     # Live search on every keystroke and when text changes (including deletion)
@@ -1106,31 +1165,17 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
         current_results: list[str],
         current_species: str,
     ):
-        upd = add_selected(selected_now, results_checked)  # reuses your function
-        # Show selected tracks section if there are selections
+        """Add selected tracks and refresh search results."""
+        upd = add_selected(selected_now, results_checked)
         show_selected = bool(upd["value"])
 
-        # Get the new search results choices directly (excluding all selected tracks)
+        # Get updated search results (excluding newly selected tracks)
         new_choices = _get_search_results_choices(
             current_species, current_query, upd["value"]
         )
 
-        # Create a completely fresh update with explicit empty value
-        # to prevent any checked state. Force Gradio to clear checked state
-        # by explicitly setting value to empty list.
-        # Ensure no items from results_checked are in new_choices
-        # (they should already be filtered, but double-check)
-        checked_track_ids = {_extract_track_id(x) for x in results_checked}
-        new_choices_filtered = [
-            c for c in new_choices if _extract_track_id(c) not in checked_track_ids
-        ]
-
-        # Create update with explicit empty value
-        # This should force Gradio to clear all checked items
-        fresh_update = gr.update(
-            choices=new_choices_filtered,
-            value=[],  # CRITICAL: Explicitly empty list to clear all checked state
-        )
+        # Clear checked state by setting empty value
+        fresh_update = gr.update(choices=new_choices, value=[])
 
         return gr.update(**upd, visible=show_selected), fresh_update
 
@@ -1142,8 +1187,8 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
         current_results: list[str],
         current_species: str,
     ):
-        # First, get the updates
-        selected_update, results_update = _auto_add(
+        """Wrapper to ensure results are cleared after adding tracks."""
+        return _auto_add(
             selected_now,
             results_checked,
             current_query,
@@ -1151,34 +1196,6 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
             current_species,
         )
 
-        # Force the results update to have an explicit empty value
-        # Extract choices from results_update if it's a dict-like object
-        if isinstance(results_update, dict):
-            results_choices = results_update.get("choices", [])
-        else:
-            # If it's a gr.update object, we need to access it differently
-            # Try to get choices from the update
-            try:
-                results_choices = (
-                    results_update.choices if hasattr(results_update, "choices") else []
-                )
-            except Exception:
-                # Fallback: get choices from the search function directly
-                results_choices = _get_search_results_choices(
-                    current_species,
-                    current_query,
-                    selected_now + results_checked
-                    if isinstance(selected_now, list)
-                    and isinstance(results_checked, list)
-                    else [],
-                )
-
-        # Create a completely fresh update with explicit empty value
-        # This should force Gradio to clear all checked items
-        fresh_results_update = gr.update(choices=results_choices, value=[])
-
-        return selected_update, fresh_results_update
-
     bigwig_results.change(
         fn=_auto_add_wrapper,
         inputs=[bigwig_selected, bigwig_results, bigwig_query, bigwig_results, species],
@@ -1247,27 +1264,19 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
         show_seq = not show_coords
 
         # Format available tracks for display if species has bigwigs
+        formatted_tracks = []
+        default_formatted = []
+        show_selected_tracks = False
+        
         if has_bigwigs:
             try:
                 track_ids = _get_bigwig_names(species)
                 formatted_tracks = [_format_track_for_display(tid) for tid in track_ids]
-                # Get default tracks for this species (filter to what's available)
-                default_track_ids = [
-                    tid for tid in DEFAULT_BIGWIG_TRACKS if tid in track_ids
-                ]
-                default_formatted = [
-                    _format_track_for_display(tid) for tid in default_track_ids
-                ]
-                # Show selected tracks section if there are default tracks
+                default_track_ids = [tid for tid in DEFAULT_BIGWIG_TRACKS if tid in track_ids]
+                default_formatted = [_format_track_for_display(tid) for tid in default_track_ids]
                 show_selected_tracks = bool(default_formatted)
             except Exception:
-                formatted_tracks = []
-                default_formatted = []
-                show_selected_tracks = False
-        else:
-            formatted_tracks = []
-            default_formatted = []
-            show_selected_tracks = False
+                pass
 
         return (
             gr.update(visible=show_coords, value=coords["chrom"]),
@@ -1307,32 +1316,17 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
     # Update input visibility when radio button changes
     def update_input_visibility(input_type_val: str, species: str):
         """Update input visibility when radio button changes."""
-        # Explicitly check the input type value
-        if input_type_val == "Enter DNA sequence":
-            # Hide coordinates, show sequence
-            return (
-                gr.update(
-                    visible=False
-                ),  # coords_group - always hide when sequence is selected
-                gr.update(visible=True),  # seq - always show when sequence is selected
-            )
-        elif input_type_val == "Use genomic coordinates":
-            # Show coordinates only if species supports it
-            is_supported = species in SPECIES_WITH_COORDINATE_SUPPORT
-            return (
-                gr.update(
-                    visible=is_supported
-                ),  # coords_group - show only if supported
-                gr.update(
-                    visible=not is_supported
-                ),  # seq - hide when coordinates are shown
-            )
-        else:
-            # Fallback: hide both (shouldn't happen)
-            return (
-                gr.update(visible=False),
-                gr.update(visible=False),
-            )
+        is_supported = species in SPECIES_WITH_COORDINATE_SUPPORT
+        use_coords = input_type_val == "Use genomic coordinates"
+        show_coords = is_supported and use_coords
+        
+        return (
+            gr.update(visible=show_coords),  # coords_group
+            gr.update(visible=not show_coords),  # seq
+            gr.update(visible=show_coords),  # chrom
+            gr.update(visible=show_coords),  # start
+            gr.update(visible=show_coords),  # end
+        )
 
     species.change(
         fn=update_input_type_on_species_change,
@@ -1361,10 +1355,29 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
     input_type.change(
         fn=update_input_visibility,
         inputs=[input_type, species],
-        outputs=[coords_group, seq],
+        outputs=[coords_group, seq, chrom, start, end],
     )
 
+    def show_prediction_ui():
+        """Show prediction UI elements immediately when Predict is clicked."""
+        return (
+            gr.update(visible=True),  # predictions_heading
+            gr.update(visible=True),  # predictions_note
+            gr.update(visible=True),  # plot (shows progress bar)
+            gr.update(visible=False),  # download_bigwig_btn (will be shown after prediction)
+        )
+
+    # Show UI elements immediately when button is clicked
     btn.click(
+        fn=show_prediction_ui,
+        inputs=[],
+        outputs=[
+            predictions_heading,
+            predictions_note,
+            plot,
+            download_bigwig_btn,
+        ],
+    ).then(
         fn=predict,
         inputs=[
             seq,
@@ -1377,9 +1390,11 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
             bed_elements,
         ],
         outputs=[
+            predictions_heading,
+            predictions_note,
             plot,
-            export_png,
-            meta,
+            download_bigwig_btn,
+            # meta,
             prediction_state,
             bigwig_selected_state,
             bed_elements_state,

style.css

@@ -1,55 +1,135 @@
-#tracks_plot { position: relative; width: 100% !important; max-width: 100% !important; }
-#tracks_plot .wrap, #tracks_plot .plot-container {
+/* CSS Variables matching NTv3 hub design */
+:root {
+  --bg: #0b1020;
+  --card: rgba(255, 255, 255, 0.06);
+  --text: rgba(255, 255, 255, 0.92);
+  --muted: rgba(255, 255, 255, 0.65);
+  --link: #7dd3fc;
+  --border: rgba(255, 255, 255, 0.12);
+  --shadow: 0 10px 30px rgba(0,0,0,0.35);
+  --radius: 18px;
+}
+
+/* Overall page background matching hub */
+body, .gradio-container {
+  background:
+    radial-gradient(1200px 800px at 10% 10%, rgba(125, 211, 252, 0.12), transparent 60%),
+    radial-gradient(1200px 800px at 90% 30%, rgba(167, 139, 250, 0.12), transparent 55%),
+    var(--bg) !important;
+  min-height: 100vh;
+}
+
+/* Plot container */
+#tracks_plot { 
+  position: relative; 
+  width: 100% !important; 
+  max-width: 100% !important;
+}
+#tracks_plot .wrap, 
+#tracks_plot .plot-container {
   width: 100% !important;
   max-width: 100% !important;
 }
 
-#tracks_plot_download {
-  position: absolute;
-  top: 10px;
-  right: 12px;
-  z-index: 50;
-  background: rgba(0,0,0,0.55);
-  border: 1px solid rgba(255,255,255,0.15);
-  border-radius: 10px;
-  padding: 6px 8px;
-  cursor: pointer;
-  user-select: none;
+
+/* Plotly modebar buttons - make them blue for visibility on white background */
+/* Target all possible Plotly modebar selectors */
+.modebar-btn,
+.modebar-btn svg,
+.modebar-btn path,
+.modebar-group .modebar-btn,
+.modebar-group .modebar-btn svg,
+.modebar-group .modebar-btn path,
+#tracks_plot .modebar-btn,
+#tracks_plot .modebar-btn svg,
+#tracks_plot .modebar-btn path,
+#tracks_plot .modebar-group .modebar-btn,
+#tracks_plot .modebar-group .modebar-btn svg,
+#tracks_plot .modebar-group .modebar-btn path,
+.js-plotly-plot .modebar-btn,
+.js-plotly-plot .modebar-btn svg,
+.js-plotly-plot .modebar-btn path,
+.plotly .modebar-btn,
+.plotly .modebar-btn svg,
+.plotly .modebar-btn path {
+  color: #7dd3fc !important;
+  fill: #7dd3fc !important;
+  stroke: #7dd3fc !important;
+}
+
+.modebar-btn:hover,
+.modebar-btn:focus,
+#tracks_plot .modebar-btn:hover,
+#tracks_plot .modebar-btn:focus {
+  background-color: rgba(125, 211, 252, 0.1) !important;
+  color: #3B82F6 !important;
 }
-#tracks_plot_download:hover { background: rgba(0,0,0,0.7); }
-#tracks_plot_download svg { width: 18px; height: 18px; display: block; fill: white; }
-#export_png_hidden { display: none !important; }
 
+.modebar-btn:hover svg,
+.modebar-btn:hover path,
+.modebar-btn:focus svg,
+.modebar-btn:focus path,
+#tracks_plot .modebar-btn:hover svg,
+#tracks_plot .modebar-btn:hover path,
+#tracks_plot .modebar-btn:focus svg,
+#tracks_plot .modebar-btn:focus path {
+  fill: #3B82F6 !important;
+  stroke: #3B82F6 !important;
+}
+
+/* Plotly modebar container */
+.modebar,
+#tracks_plot .modebar,
+.js-plotly-plot .modebar,
+.plotly .modebar {
+  background-color: rgba(255, 255, 255, 0.9) !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border-radius: 8px !important;
+}
+
+/* Predict button matching hub button style */
 #predict_btn {
-  background-color: #FF6B35 !important;
+  background: rgba(41,91,234,1) !important;
   color: white !important;
   border: none !important;
+  border-radius: 12px !important;
+  font-weight: 600 !important;
+  transition: all 0.2s ease !important;
+  box-shadow: 0 4px 12px rgba(125, 211, 252, 0.3) !important;
 }
 #predict_btn:hover {
-  background-color: #E55A2B !important;
+  background: rgb(5, 36, 121) !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 6px 16px rgba(125, 211, 252, 0.4) !important;
 }
 
+/* Intro markdown container */
 #intro_markdown {
-  max-width: 1200px;
+  max-width: 100% !important;
+  width: 100% !important;
   margin: 0 auto;
-  padding: 14px 8px 6px 8px;
+  padding: 44px 18px 6px 18px;
 }
 
-/* overall hero container */
+/* Hero container matching hub */
 #intro_markdown .intro-hero {
-  border: 1px solid rgba(0,0,0,0.08);
-  border-radius: 18px;
-  padding: 18px 18px 14px 18px;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 128, 255, 0.06),
-    rgba(0, 0, 0, 0.00)
-  );
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 26px 24px;
+  background: var(--card);
+  box-shadow: var(--shadow);
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
 }
 
-/* badge + title row */
+/* Badge + title row */
 #intro_markdown .intro-title {
-  margin-bottom: 14px;
+  margin-bottom: 0;
+}
+
+#intro_markdown .intro-title h1 {
+  margin-bottom: 8px;
 }
 
 #intro_markdown .intro-badge {
@@ -59,95 +139,109 @@
   letter-spacing: 0.02em;
   padding: 6px 10px;
   border-radius: 999px;
-  background: rgba(0,0,0,0.06);
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--border);
   margin-bottom: 10px;
+  color: var(--muted);
 }
 
 #intro_markdown h1 {
-  font-size: 2.25rem !important;
+  font-size: 34px !important;
   line-height: 1.1 !important;
   margin: 0 0 8px 0 !important;
+  letter-spacing: -0.02em;
+  color: var(--text) !important;
 }
 
 #intro_markdown .intro-subtitle {
   font-size: 1.05rem !important;
-  line-height: 1.6 !important;
+  line-height: 1.5 !important;
   margin: 0 !important;
-  opacity: 0.9;
+  color: var(--muted) !important;
 }
 
-/* grid of cards */
+/* Grid of cards */
 #intro_markdown .intro-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-  margin-top: 14px;
+  gap: 14px;
+  margin-top: 18px;
 }
 
-/* cards */
+/* Cards matching hub card style */
 #intro_markdown .intro-card {
-  border: 1px solid rgba(56, 189, 248, 0.18);           /* sky accent */
-  border-radius: 16px;
-  padding: 14px 14px 12px 14px;
-
-  /* dark glass */
-  background: linear-gradient(
-    180deg,
-    rgba(15, 23, 42, 0.72),
-    rgba(15, 23, 42, 0.55)
-  );
-
-  box-shadow:
-    0 10px 30px rgba(0, 0, 0, 0.35),
-    inset 0 1px 0 rgba(255, 255, 255, 0.06);
-
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px 18px;
+  background: var(--card);
+  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
   transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
 }
 
 #intro_markdown .intro-card:hover {
   transform: translateY(-2px);
-  border-color: rgba(56, 189, 248, 0.38);
-  box-shadow:
-    0 14px 36px rgba(0, 0, 0, 0.42),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
 }
 
 #intro_markdown .intro-card h3 {
-  font-size: 1.05rem !important;
-  margin: 0 0 8px 0 !important;
-  color: rgba(255, 255, 255, 0.95);
+  font-size: 16px !important;
+  margin: 0 0 10px 0 !important;
+  color: var(--text) !important;
   letter-spacing: 0.01em;
+  font-weight: 600;
+}
+
+#intro_markdown .intro-card ul {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--muted);
 }
 
 #intro_markdown .intro-card li {
-  font-size: 0.98rem !important;
-  line-height: 1.55 !important;
-  margin: 6px 0;
-  color: rgba(255, 255, 255, 0.82);
+  font-size: 0.95rem !important;
+  line-height: 1.5 !important;
+  margin: 8px 0;
+  color: var(--muted) !important;
 }
 
 #intro_markdown .intro-card li::marker {
-  color: rgba(56, 189, 248, 0.75);
+  color: var(--link);
 }
 
 #intro_markdown .intro-card em,
 #intro_markdown .intro-card strong {
-  color: rgba(255, 255, 255, 0.92);
+  color: var(--text) !important;
 }
 
-/* tip callout */
+/* Tip callout */
 #intro_markdown .intro-tip {
-  margin-top: 14px;
+  margin-top: 18px;
   display: flex;
   gap: 10px;
   align-items: flex-start;
-  padding: 10px 12px;
+  padding: 12px 16px;
   border-radius: 14px;
-  background: rgba(0, 128, 255, 0.08);
-  border: 1px solid rgba(0, 128, 255, 0.18);
+  background: var(--card);
+  border: 1px solid var(--border);
+}
+
+/* Pill badges matching hub style */
+#intro_markdown .intro-pillrow {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 14px;
+}
+
+#intro_markdown .intro-pill {
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--muted);
+  font-weight: 500;
 }
 
 #intro_markdown .intro-tip-icon {
@@ -157,59 +251,807 @@
 }
 
 #intro_markdown .intro-tip span {
-  font-size: 0.98rem !important;
-  line-height: 1.55 !important;
+  font-size: 0.95rem !important;
+  line-height: 1.5 !important;
+  color: var(--muted) !important;
 }
 
-/* responsive */
-@media (max-width: 960px) {
+#intro_markdown .intro-tip strong {
+  color: var(--text) !important;
+}
+
+/* Species info box */
+#intro_markdown .intro-species-info {
+  margin-top: 18px !important;
+  padding: 12px 16px !important;
+  background: var(--card) !important;
+  border-radius: 12px !important;
+  border: 1px solid var(--border) !important;
+  font-size: 0.95rem !important;
+  color: var(--muted) !important;
+}
+
+#intro_markdown .intro-species-info strong {
+  color: var(--text) !important;
+}
+
+/* Responsive */
+@media (max-width: 860px) {
   #intro_markdown .intro-grid {
     grid-template-columns: 1fr;
   }
   #intro_markdown h1 {
-    font-size: 2.0rem !important;
+    font-size: 28px !important;
   }
 }
 
+/* ============================================================================
+   GRADIO COMPONENT STYLING
+   ============================================================================ */
+
+/* Remove grey backgrounds from Gradio containers */
+.gr-form, 
+.gr-block,
+.gr-panel,
+.gr-box,
+[class*="panel"],
+[class*="block"],
+[class*="form"],
+/* Remove grey backgrounds from Gradio containers and wrappers */
+.gradio-container > div,
+.gradio-container .wrap,
+.gradio-container [class*="panel"],
+.gradio-container [class*="block"],
+.gradio-container [class*="form"],
+[class*="gradio"] [class*="panel"],
+[class*="gradio"] [class*="block"],
+div[class*="panel"],
+div[class*="block"] {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Ensure form containers don't constrain textbox width */
+.gr-form .gr-textbox,
+.gr-block .gr-textbox,
+.gradio-container .gr-textbox {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+/* Remove grey backgrounds from section containers */
+section,
+.gr-section,
+[role="region"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Markdown headings */
+h2 {
+  color: var(--text) !important;
+  font-size: 18px !important;
+  letter-spacing: 0.01em !important;
+  margin-top: 24px !important;
+  margin-bottom: 16px !important;
+}
+
+/* Input labels */
+label {
+  color: var(--text) !important;
+  font-weight: 500 !important;
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* ============================================================================
+   INPUT FIELDS - Base styling for all input types
+   ============================================================================ */
+
+/* Base input styling - applies to all input types EXCEPT number inputs in coords_group */
+input[type="text"],
+input[type="search"],
+input[type="email"],
+input[type="password"],
+input[type="tel"],
+input[type="url"],
+textarea {
+  background: rgba(125, 211, 252, 0.08) !important;
+  background-color: rgba(125, 211, 252, 0.08) !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border-radius: 12px !important;
+  color: var(--text) !important;
+  padding: 10px 12px !important;
+}
+
+/* Number inputs - default blue background */
+/* Note: Coordinates group inputs are overridden at the end of the file */
+input[type="number"],
+.gr-number input {
+  background: rgba(125, 211, 252, 0.08) !important;
+  background-color: rgba(125, 211, 252, 0.08) !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border-radius: 12px !important;
+  color: var(--text) !important;
+  padding: 10px 12px !important;
+}
+
+input[type="text"]:focus,
+input[type="search"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+textarea:focus {
+  background: rgba(125, 211, 252, 0.12) !important;
+  background-color: rgba(125, 211, 252, 0.12) !important;
+  border-color: rgba(125, 211, 252, 0.35) !important;
+  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.1) !important;
+  outline: none !important;
+}
+
+/* Number inputs focus - default blue background */
+input[type="number"]:focus {
+  background: rgba(125, 211, 252, 0.12) !important;
+  background-color: rgba(125, 211, 252, 0.12) !important;
+  border-color: rgba(125, 211, 252, 0.35) !important;
+  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.1) !important;
+  outline: none !important;
+}
+
+/* Coordinates group number inputs focus - transparent background */
+#coords_group input[type="number"]:focus,
+#coords_group .gr-number input:focus,
+#coords_group .gr-row input[type="number"]:focus,
+#coords_group .gr-row .gr-number input:focus {
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: rgba(125, 211, 252, 0.35) !important;
+  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.1) !important;
+  outline: none !important;
+}
+
+input[type="text"]:hover,
+input[type="search"]:hover,
+textarea:hover {
+  background: rgba(125, 211, 252, 0.1) !important;
+  border-color: rgba(125, 211, 252, 0.25) !important;
+}
+
+/* Number inputs hover - default blue background */
+input[type="number"]:hover {
+  background: rgba(125, 211, 252, 0.1) !important;
+  border-color: rgba(125, 211, 252, 0.25) !important;
+}
+
+/* Coordinates group number inputs hover - transparent background */
+#coords_group input[type="number"]:hover,
+#coords_group .gr-number input:hover,
+#coords_group .gr-row input[type="number"]:hover,
+#coords_group .gr-row .gr-number input:hover {
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: rgba(125, 211, 252, 0.35) !important;
+}
+
+/* Placeholder text */
+input::placeholder,
+textarea::placeholder {
+  color: rgba(255, 255, 255, 0.5) !important;
+  opacity: 0.7 !important;
+}
+
+/* Override inline grey backgrounds */
+input[style*="background"],
+textarea[style*="background"] {
+  background: rgba(125, 211, 252, 0.08) !important;
+  background-color: rgba(125, 211, 252, 0.08) !important;
+}
+
+/* ============================================================================
+   GRADIO COMPONENT WRAPPERS - Make transparent
+   ============================================================================ */
+
+/* Make textbox and number input wrappers transparent (only input is styled) */
+/* NOTE: Dropdowns are EXCLUDED - they keep blue backgrounds */
+.gr-textbox .wrap,
+.gr-textbox .wrap > div,
+.gr-textbox .wrap > div > div,
+.gr-number .wrap,
+.gr-number .wrap > div,
+.gr-number .wrap > div > div,
+.gr-radio .wrap,
+.gr-radio .wrap > div,
+.gr-radio .wrap > div > div {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Explicitly ensure dropdown wrappers are NOT transparent */
+.gr-dropdown .wrap,
+.gr-dropdown .wrap > div,
+.gr-dropdown .wrap > div > div,
+.gr-dropdown .wrap > div > div > div {
+  background: rgba(125, 211, 252, 0.08) !important;
+  background-color: rgba(125, 211, 252, 0.08) !important;
+}
+
+/* ============================================================================
+   TEXTBOX COMPONENTS
+   ============================================================================ */
+
+/* Textbox component - transparent wrapper, only input is styled */
+.gr-textbox {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  border-top: none !important;
+  margin-top: 0 !important;
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+/* Make textbox wrappers full width */
+.gr-textbox .wrap,
+.gr-textbox .wrap > div,
+.gr-textbox .wrap > div > div {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+/* Make textbox inputs full width */
+.gr-textbox input,
+.gr-textbox textarea {
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+/* Textbox input inherits base input styling above */
+
+/* ============================================================================
+   NUMBER INPUT COMPONENTS
+   ============================================================================ */
+
+/* Number input component - transparent wrapper, only input is styled */
+.gr-number {
+  background: transparent !important;
+}
+
+/* Number input inherits base input styling above */
+
+/* ============================================================================
+   DROPDOWN COMPONENTS
+   ============================================================================ */
+
+/* Dropdowns */
+.gr-dropdown,
+.gr-dropdown input,
+.gr-dropdown select,
+.gr-dropdown .wrap,
+.gr-dropdown .wrap > div,
+select {
+  background: rgba(125, 211, 252, 0.08) !important;
+  background-color: rgba(125, 211, 252, 0.08) !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border-radius: 12px !important;
+  color: var(--text) !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* Override any inline grey backgrounds on dropdowns */
+.gr-dropdown[style*="background"],
+select[style*="background"] {
+  background: rgba(125, 211, 252, 0.08) !important;
+  background-color: rgba(125, 211, 252, 0.08) !important;
+}
+
+.gr-dropdown:hover,
+.gr-dropdown:focus,
+.gr-dropdown input:hover,
+.gr-dropdown input:focus,
+.gr-dropdown select:hover,
+.gr-dropdown select:focus,
+select:hover,
+select:focus {
+  background: rgba(125, 211, 252, 0.12) !important;
+  background-color: rgba(125, 211, 252, 0.12) !important;
+  border-color: rgba(125, 211, 252, 0.35) !important;
+  outline: none !important;
+  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.1) !important;
+}
+
+/* Ensure dropdown option container is blue */
+.gr-dropdown .wrap select,
+.gr-dropdown select option {
+  background: rgba(125, 211, 252, 0.08) !important;
+  background-color: rgba(125, 211, 252, 0.08) !important;
+  color: var(--text) !important;
+}
+
+/* Selected tags/chips in multiselect dropdown */
+#bed_elements_dropdown .wrap > div > span:not(:empty),
+#bed_elements_dropdown .wrap > div > div:not(.wrap):not(input):not(select):not(:empty),
+#bed_elements_dropdown .wrap > div > button:not([type="submit"]),
+#bed_elements_dropdown [class*="tag"],
+#bed_elements_dropdown [class*="chip"],
+#bed_elements_dropdown [class*="badge"],
+#bed_elements_dropdown [class*="pill"] {
+  background: rgba(125, 211, 252, 0.15) !important;
+  background-color: rgba(125, 211, 252, 0.15) !important;
+  border: 1px solid rgba(125, 211, 252, 0.35) !important;
+  border-radius: 6px !important;
+  color: var(--text) !important;
+  padding: 5px 10px !important;
+  margin: 2px 4px 2px 0 !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  transition: all 0.2s ease !important;
+}
+
+#bed_elements_dropdown .wrap > div > span:hover:not(input),
+#bed_elements_dropdown .wrap > div > div:hover:not(input):not(select):not(.wrap),
+#bed_elements_dropdown .wrap > div > button:hover:not([type="submit"]) {
+  background: rgba(125, 211, 252, 0.25) !important;
+  border-color: var(--link) !important;
+}
+
+/* X button inside tags */
+#bed_elements_dropdown button[aria-label*="Remove"],
+#bed_elements_dropdown button[aria-label*="remove"],
+#bed_elements_dropdown span button,
+#bed_elements_dropdown div button {
+  background: transparent !important;
+  border: none !important;
+  color: var(--text) !important;
+  opacity: 0.7 !important;
+  padding: 2px 4px !important;
+  margin-left: 4px !important;
+  border-radius: 4px !important;
+  cursor: pointer !important;
+}
+
+#bed_elements_dropdown button[aria-label*="Remove"]:hover,
+#bed_elements_dropdown button[aria-label*="remove"]:hover,
+#bed_elements_dropdown span button:hover,
+#bed_elements_dropdown div button:hover {
+  background: rgba(255, 255, 255, 0.1) !important;
+  opacity: 1 !important;
+}
+
+/* ============================================================================
+   RADIO BUTTONS
+   ============================================================================ */
+
+.gr-radio {
+  background: rgba(125, 211, 252, 0.08) !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border-radius: 12px !important;
+  padding: 12px !important;
+}
+
+.gr-radio label,
+input[type="radio"] + label {
+  color: var(--text) !important;
+  background: rgba(125, 211, 252, 0.08) !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border-radius: 8px !important;
+  padding: 8px 12px !important;
+  margin: 4px !important;
+  display: inline-block !important;
+  transition: all 0.2s ease !important;
+}
+
+.gr-radio label:hover,
+input[type="radio"] + label:hover {
+  background: rgba(125, 211, 252, 0.12) !important;
+  border-color: rgba(125, 211, 252, 0.3) !important;
+}
+
+.gr-radio input[type="radio"]:checked + label,
+input[type="radio"]:checked + label {
+  background: rgba(125, 211, 252, 0.18) !important;
+  border-color: rgba(125, 211, 252, 0.4) !important;
+}
+
+/* Change radio button selected indicator from orange to blue */
+input[type="radio"] {
+  accent-color: #7dd3fc !important;
+  color: #7dd3fc !important;
+}
+
+/* Override Gradio's default orange radio button styling */
+input[type="radio"]:checked {
+  accent-color: #7dd3fc !important;
+  background-color: #7dd3fc !important;
+  border-color: #7dd3fc !important;
+}
+
+/* Radio button circle/dot when checked - change from orange to blue */
+input[type="radio"]:checked::before,
+input[type="radio"]:checked::after,
+.gr-radio input[type="radio"]:checked::before,
+.gr-radio input[type="radio"]:checked::after,
+label:has(input[type="radio"]:checked) input[type="radio"]::before,
+label:has(input[type="radio"]:checked) input[type="radio"]::after {
+  color: #7dd3fc !important;
+  background-color: #7dd3fc !important;
+  border-color: #7dd3fc !important;
+}
+
+/* SVG radio button icons */
+input[type="radio"]:checked + svg,
+.gr-radio input[type="radio"]:checked + svg,
+label:has(input[type="radio"]:checked) svg {
+  fill: #7dd3fc !important;
+  color: #7dd3fc !important;
+}
+
+/* Radio button circle background when checked */
+input[type="radio"]:checked {
+  background-color: #7dd3fc !important;
+  background: #7dd3fc !important;
+  border-color: #7dd3fc !important;
+}
+
+/* Override any orange colors in radio button styling */
+input[type="radio"][style*="orange"],
+input[type="radio"][style*="#ff"],
+input[type="radio"][style*="rgb(255"],
+.gr-radio input[type="radio"][style*="orange"],
+.gr-radio input[type="radio"][style*="#ff"],
+.gr-radio input[type="radio"][style*="rgb(255"] {
+  accent-color: #7dd3fc !important;
+  background-color: #7dd3fc !important;
+  border-color: #7dd3fc !important;
+}
+
+/* Target radio button wrapper elements */
+.gr-radio .wrap input[type="radio"]:checked,
+.gr-radio label .wrap input[type="radio"]:checked,
+.gr-radio [class*="radio"] input[type="radio"]:checked {
+  accent-color: #7dd3fc !important;
+  background-color: #7dd3fc !important;
+  border-color: #7dd3fc !important;
+}
+
+/* Override Gradio's default radio button checked state colors */
+.gradio-container input[type="radio"]:checked {
+  accent-color: #7dd3fc !important;
+  background-color: #7dd3fc !important;
+  background: #7dd3fc !important;
+  border-color: #7dd3fc !important;
+}
+
+/* ============================================================================
+   CHECKBOX GROUPS
+   ============================================================================ */
+
+.gr-checkboxgroup {
+  background: rgba(125, 211, 252, 0.08) !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border-radius: 12px !important;
+  padding: 12px !important;
+}
+
+.gr-checkboxgroup label {
+  color: var(--text) !important;
+  background: rgba(125, 211, 252, 0.08) !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border-radius: 8px !important;
+  padding: 8px 12px !important;
+  margin: 4px 0 !important;
+  display: block !important;
+  transition: all 0.2s ease !important;
+}
+
+.gr-checkboxgroup label:hover {
+  background: rgba(125, 211, 252, 0.12) !important;
+  border-color: rgba(125, 211, 252, 0.3) !important;
+}
+
+.gr-checkboxgroup input[type="checkbox"]:checked + label,
+.gr-checkboxgroup label:has(input[type="checkbox"]:checked) {
+  background: rgba(125, 211, 252, 0.18) !important;
+  border: 1px solid rgba(125, 211, 252, 0.4) !important;
+}
+
+/* Change checkbox icon color from orange to blue */
+input[type="checkbox"] {
+  accent-color: #7dd3fc !important;
+  color: #7dd3fc !important;
+}
+
+/* Override Gradio's default orange checkbox styling */
+input[type="checkbox"]:checked {
+  accent-color: #7dd3fc !important;
+  background-color: #7dd3fc !important;
+  border-color: #7dd3fc !important;
+}
+
+/* Checkbox checkmark icon - change from orange to blue */
+input[type="checkbox"]:checked::before,
+input[type="checkbox"]:checked::after,
+.gr-checkboxgroup input[type="checkbox"]:checked::before,
+.gr-checkboxgroup input[type="checkbox"]:checked::after,
+label:has(input[type="checkbox"]:checked) input[type="checkbox"]::before,
+label:has(input[type="checkbox"]:checked) input[type="checkbox"]::after {
+  color: #7dd3fc !important;
+  background-color: #7dd3fc !important;
+  border-color: #7dd3fc !important;
+}
+
+/* SVG checkmark icons */
+input[type="checkbox"]:checked + svg,
+.gr-checkboxgroup input[type="checkbox"]:checked + svg,
+label:has(input[type="checkbox"]:checked) svg {
+  fill: #7dd3fc !important;
+  color: #7dd3fc !important;
+}
+
+/* Checkbox square/box background when checked */
+input[type="checkbox"]:checked {
+  background-color: #7dd3fc !important;
+  background: #7dd3fc !important;
+  border-color: #7dd3fc !important;
+}
+
+/* Override any orange colors in checkbox styling */
+input[type="checkbox"][style*="orange"],
+input[type="checkbox"][style*="#ff"],
+input[type="checkbox"][style*="rgb(255"],
+.gr-checkboxgroup input[type="checkbox"][style*="orange"],
+.gr-checkboxgroup input[type="checkbox"][style*="#ff"],
+.gr-checkboxgroup input[type="checkbox"][style*="rgb(255"] {
+  accent-color: #7dd3fc !important;
+  background-color: #7dd3fc !important;
+  border-color: #7dd3fc !important;
+}
+
+/* Target checkbox wrapper elements that might contain the icon */
+.gr-checkboxgroup .wrap input[type="checkbox"]:checked,
+.gr-checkboxgroup label .wrap input[type="checkbox"]:checked,
+.gr-checkboxgroup [class*="checkbox"] input[type="checkbox"]:checked {
+  accent-color: #7dd3fc !important;
+  background-color: #7dd3fc !important;
+  border-color: #7dd3fc !important;
+}
+
+/* Checkbox icon/checkmark in various possible locations */
+.gr-checkboxgroup [class*="icon"]:has(input[type="checkbox"]:checked),
+.gr-checkboxgroup [class*="check"]:has(input[type="checkbox"]:checked),
+.gr-checkboxgroup span:has(input[type="checkbox"]:checked),
+.gr-checkboxgroup div:has(input[type="checkbox"]:checked) {
+  color: #7dd3fc !important;
+  background-color: #7dd3fc !important;
+}
+
+/* Override Gradio's default checkbox checked state colors */
+.gradio-container input[type="checkbox"]:checked {
+  accent-color: #7dd3fc !important;
+  background-color: #7dd3fc !important;
+  background: #7dd3fc !important;
+  border-color: #7dd3fc !important;
+}
+
+/* ============================================================================
+   BUTTONS
+   ============================================================================ */
+
+button {
+  border-radius: 12px !important;
+  font-weight: 500 !important;
+  transition: all 0.2s ease !important;
+}
+
+/* All buttons except predict button */
+button:not(#predict_btn):not([id*="predict"]),
+.gr-button:not(#predict_btn),
+button.gr-button:not(#predict_btn),
+[class*="button"]:not(#predict_btn) {
+  background: rgba(125, 211, 252, 0.1) !important;
+  background-color: rgba(125, 211, 252, 0.1) !important;
+  border: 1px solid rgba(125, 211, 252, 0.3) !important;
+  color: var(--text) !important;
+}
+
+button:not(#predict_btn):not([id*="predict"]):hover,
+.gr-button:not(#predict_btn):hover,
+button.gr-button:not(#predict_btn):hover,
+[class*="button"]:not(#predict_btn):hover {
+  background: rgba(125, 211, 252, 0.15) !important;
+  background-color: rgba(125, 211, 252, 0.15) !important;
+  border-color: var(--link) !important;
+  box-shadow: 0 4px 12px rgba(125, 211, 252, 0.2) !important;
+}
+
+/* ============================================================================
+   COORDINATES GROUP - Special handling
+   ============================================================================ */
+
 /* Remove borders/lines from input sections */
-.gr-group {
+.gr-group,
+.gr-group *,
+.gr-group .wrap,
+.gr-group .wrap > div,
+.gr-group .wrap > div > div {
   border: none !important;
   box-shadow: none !important;
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
+  background: transparent !important;
+  background-color: transparent !important;
 }
 
-/* Remove any borders or separators from textbox components in input sections */
-.gr-textbox {
-  border-top: none !important;
-  margin-top: 0 !important;
+.gr-row,
+.gr-row *,
+.gr-row .wrap,
+.gr-row .wrap > div,
+.gr-row .wrap > div > div {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Coordinates group: make wrappers transparent, keep inputs styled */
+#coords_group .wrap,
+#coords_group .wrap > div,
+#coords_group .wrap > div > div,
+#coords_group .gr-row,
+#coords_group .gr-row *:not(input):not(textarea):not(select) {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Override inline grey backgrounds in coordinates group */
+#coords_group [style*="rgb(40"],
+#coords_group [style*="rgba(40"],
+#coords_group [style*="rgb(50"],
+#coords_group [style*="rgba(50"],
+#coords_group [style*="#282"],
+#coords_group [style*="#3a4"],
+#coords_group [style*="#444"],
+#coords_group [style*="#555"] {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Inputs in coordinates group - match dropdown style with transparent background and border */
+/* These rules must override base input styling, so they come after */
+#coords_group .gr-number input,
+#coords_group .gr-number .wrap input,
+#coords_group .gr-number .wrap > div input,
+#coords_group input[type="number"],
+#coords_group .gr-row .gr-number input,
+#coords_group .gr-row input[type="number"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border-radius: 12px !important;
+  color: var(--text) !important;
+  height: 44px !important;
+  min-height: 44px !important;
+  padding: 0 12px !important;
+  line-height: 44px !important;
+}
+
+#coords_group .gr-number input:hover,
+#coords_group .gr-number .wrap input:hover,
+#coords_group input[type="number"]:hover,
+#coords_group .gr-row .gr-number input:hover,
+#coords_group .gr-row input[type="number"]:hover {
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: rgba(125, 211, 252, 0.35) !important;
+}
+
+#coords_group .gr-number input:focus,
+#coords_group .gr-number .wrap input:focus,
+#coords_group input[type="number"]:focus,
+#coords_group .gr-row .gr-number input:focus,
+#coords_group .gr-row input[type="number"]:focus {
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: rgba(125, 211, 252, 0.35) !important;
+  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.1) !important;
+  outline: none !important;
 }
 
-/* Remove borders from form sections */
+/* ============================================================================
+   CHROMOSOME INPUT - Special case
+   ============================================================================ */
+
+/* Chromosome component: transparent wrapper, remove all borders from wrappers */
+#chromosome_input,
+#chromosome_input label,
+#chromosome_input > label,
+#chromosome_input .wrap label {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+/* Remove borders from all wrapper elements */
+#chromosome_input .wrap,
+#chromosome_input .wrap > div,
+#chromosome_input .wrap > div > div,
+#chromosome_input .wrap > div > div > div,
+#chromosome_input.gr-dropdown,
+#chromosome_input.gr-dropdown .wrap,
+#chromosome_input.gr-dropdown .wrap > div,
+#chromosome_input.gr-dropdown .wrap > div > div {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+/* Chromosome input: match dropdown style with transparent background and border */
+/* Only the actual input field should have a border */
+#chromosome_input input,
+#chromosome_input input[type="text"],
+#chromosome_input .wrap input,
+#chromosome_input .wrap > div input,
+#chromosome_input .wrap > div > div input,
+#chromosome_input [role="combobox"],
+#chromosome_input button[aria-haspopup] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border-radius: 12px !important;
+  color: var(--text) !important;
+  height: 44px !important;
+  min-height: 44px !important;
+  padding: 0 12px !important;
+  line-height: 44px !important;
+}
+
+#chromosome_input input:hover,
+#chromosome_input .wrap input:hover,
+#chromosome_input [role="combobox"]:hover {
+  border-color: rgba(125, 211, 252, 0.35) !important;
+}
+
+#chromosome_input input:focus,
+#chromosome_input .wrap input:focus,
+#chromosome_input [role="combobox"]:focus {
+  border-color: rgba(125, 211, 252, 0.35) !important;
+  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.1) !important;
+  outline: none !important;
+}
+
+/* ============================================================================
+   FORM SECTIONS & SEPARATORS
+   ============================================================================ */
+
 .form {
   border: none !important;
 }
 
-/* Remove any hr or separator lines */
 hr {
   display: none !important;
 }
 
-/* Remove line above DNA sequence input */
 #dna_sequence_input {
   border-top: none !important;
   margin-top: 0 !important;
   padding-top: 0 !important;
 }
 
-/* Remove any border or separator before the DNA sequence input */
 #dna_sequence_input::before,
 #dna_sequence_input .wrap::before {
   display: none !important;
   content: none !important;
 }
 
-/* Ensure coordinates group doesn't leave a border when hidden */
 #coords_group[style*="display: none"],
 #coords_group:not(:visible) {
   display: none !important;
@@ -218,10 +1060,395 @@ hr {
   padding: 0 !important;
 }
 
-/* Remove any separator between input sections */
 #coords_group + *,
 #coords_group ~ #dna_sequence_input {
   border-top: none !important;
   margin-top: 0 !important;
   padding-top: 0 !important;
 }
+
+/* ============================================================================
+   ACCORDION
+   ============================================================================ */
+
+.gr-accordion {
+  background: rgba(125, 211, 252, 0.08) !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border-radius: 12px !important;
+}
+
+.gr-accordion summary {
+  color: var(--text) !important;
+}
+
+.gr-accordion .gr-json {
+  color: var(--muted) !important;
+}
+
+/* ============================================================================
+   FINAL OVERRIDES - Ensure dropdowns have blue backgrounds
+   ============================================================================ */
+
+/* Force dropdowns to have blue background - override any grey */
+.gradio-container .gr-dropdown,
+.gradio-container .gr-dropdown .wrap,
+.gradio-container .gr-dropdown .wrap > div,
+.gradio-container .gr-dropdown .wrap > div > div,
+.gradio-container .gr-dropdown input,
+.gradio-container .gr-dropdown select {
+  background: rgba(125, 211, 252, 0.08) !important;
+  background-color: rgba(125, 211, 252, 0.08) !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+}
+
+/* Override any grey color values in inline styles for dropdowns */
+.gradio-container .gr-dropdown[style*="rgb(40"],
+.gradio-container .gr-dropdown[style*="rgba(40"],
+.gradio-container .gr-dropdown[style*="#282"],
+.gradio-container .gr-dropdown[style*="#3a4"],
+.gradio-container .gr-dropdown[style*="#444"],
+.gradio-container .gr-dropdown .wrap[style*="rgb(40"],
+.gradio-container .gr-dropdown .wrap[style*="rgba(40"],
+.gradio-container .gr-dropdown .wrap[style*="#282"],
+.gradio-container .gr-dropdown .wrap[style*="#3a4"],
+.gradio-container .gr-dropdown .wrap[style*="#444"],
+.gradio-container .gr-dropdown .wrap > div[style*="rgb(40"],
+.gradio-container .gr-dropdown .wrap > div[style*="rgba(40"],
+.gradio-container .gr-dropdown .wrap > div[style*="#282"],
+.gradio-container .gr-dropdown .wrap > div[style*="#3a4"],
+.gradio-container .gr-dropdown .wrap > div[style*="#444"] {
+  background: rgba(125, 211, 252, 0.08) !important;
+  background-color: rgba(125, 211, 252, 0.08) !important;
+}
+
+/* Ultimate catch-all: Force blue background on ALL dropdown elements */
+/* This ensures no grey backgrounds slip through - applies to Model, Species, Chromosome, etc. */
+.gradio-container .gr-dropdown,
+.gradio-container .gr-dropdown > *,
+.gradio-container .gr-dropdown .wrap,
+.gradio-container .gr-dropdown .wrap > *,
+.gradio-container .gr-dropdown .wrap > div,
+.gradio-container .gr-dropdown .wrap > div > *,
+.gradio-container .gr-dropdown .wrap > div > div,
+.gradio-container .gr-dropdown .wrap > div > div > *,
+.gradio-container .gr-dropdown .wrap > div > div > div,
+.gradio-container .gr-dropdown input,
+.gradio-container .gr-dropdown select,
+.gradio-container select {
+  background: rgba(125, 211, 252, 0.08) !important;
+  background-color: rgba(125, 211, 252, 0.08) !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+}
+
+/* Override any element with grey background that's inside a dropdown */
+.gradio-container .gr-dropdown [style*="rgb(40"],
+.gradio-container .gr-dropdown [style*="rgba(40"],
+.gradio-container .gr-dropdown [style*="#282"],
+.gradio-container .gr-dropdown [style*="#3a4"],
+.gradio-container .gr-dropdown [style*="#444"],
+.gradio-container .gr-dropdown [style*="background: rgb(40"],
+.gradio-container .gr-dropdown [style*="background: rgba(40"] {
+  background: rgba(125, 211, 252, 0.08) !important;
+  background-color: rgba(125, 211, 252, 0.08) !important;
+}
+
+/* ============================================================================
+   FINAL OVERRIDE - Number inputs in coordinates group: transparent background
+   ============================================================================ */
+/* This comes at the very end to override ALL other rules - maximum specificity */
+/* Normal state */
+#coords_group input[type="number"],
+#coords_group .gr-number input,
+#coords_group .gr-number .wrap input,
+#coords_group .gr-number .wrap > div input,
+#coords_group .gr-number .wrap > div > div input,
+#coords_group .gr-row input[type="number"],
+#coords_group .gr-row .gr-number input,
+#coords_group .gr-row .gr-number .wrap input,
+#coords_group .gr-row .gr-number .wrap > div input,
+.gradio-container #coords_group input[type="number"],
+.gradio-container #coords_group .gr-number input,
+.gradio-container #coords_group .gr-row input[type="number"],
+.gradio-container #coords_group .gr-row .gr-number input,
+#coords_group input[type="number"][style*="background"],
+#coords_group input[type="number"][style*="rgba(125"],
+#coords_group input[type="number"][style*="rgb(125"],
+#coords_group .gr-number input[style*="background"],
+#coords_group .gr-number input[style*="rgba(125"],
+#coords_group .gr-number input[style*="rgb(125"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border-radius: 12px !important;
+  color: var(--text) !important;
+}
+
+/* Hover state */
+#coords_group input[type="number"]:hover,
+#coords_group .gr-number input:hover,
+#coords_group .gr-number .wrap input:hover,
+#coords_group .gr-row input[type="number"]:hover,
+#coords_group .gr-row .gr-number input:hover,
+.gradio-container #coords_group input[type="number"]:hover,
+.gradio-container #coords_group .gr-number input:hover {
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: rgba(125, 211, 252, 0.35) !important;
+}
+
+/* Focus state */
+#coords_group input[type="number"]:focus,
+#coords_group .gr-number input:focus,
+#coords_group .gr-number .wrap input:focus,
+#coords_group .gr-row input[type="number"]:focus,
+#coords_group .gr-row .gr-number input:focus,
+.gradio-container #coords_group input[type="number"]:focus,
+.gradio-container #coords_group .gr-number input:focus {
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: rgba(125, 211, 252, 0.35) !important;
+  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.1) !important;
+  outline: none !important;
+}
+
+/* ============================================================================
+   START AND END INPUTS - Direct ID targeting for maximum specificity
+   ============================================================================ */
+/* Target Start and End inputs directly by their IDs - override everything */
+#start_input input,
+#start_input input[type="number"],
+#start_input .wrap input,
+#start_input .wrap > div input,
+#start_input .wrap > div > div input,
+#end_input input,
+#end_input input[type="number"],
+#end_input .wrap input,
+#end_input .wrap > div input,
+#end_input .wrap > div > div input,
+#coords_group #start_input input,
+#coords_group #start_input input[type="number"],
+#coords_group #end_input input,
+#coords_group #end_input input[type="number"],
+.gradio-container #start_input input,
+.gradio-container #start_input input[type="number"],
+.gradio-container #end_input input,
+.gradio-container #end_input input[type="number"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border-radius: 12px !important;
+  color: var(--text) !important;
+}
+
+#start_input input:hover,
+#start_input .wrap input:hover,
+#end_input input:hover,
+#end_input .wrap input:hover,
+#coords_group #start_input input:hover,
+#coords_group #end_input input:hover {
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: rgba(125, 211, 252, 0.35) !important;
+}
+
+#start_input input:focus,
+#start_input .wrap input:focus,
+#end_input input:focus,
+#end_input .wrap input:focus,
+#coords_group #start_input input:focus,
+#coords_group #end_input input:focus {
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: rgba(125, 211, 252, 0.35) !important;
+  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.1) !important;
+  outline: none !important;
+}
+
+/* Override any inline styles on Start and End inputs */
+#start_input input[style*="background"],
+#start_input input[style*="rgba(125"],
+#start_input input[style*="rgb(125"],
+#end_input input[style*="background"],
+#end_input input[style*="rgba(125"],
+#end_input input[style*="rgb(125"] {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* ============================================================================
+   GRADIO FOOTER BUTTONS - Remove blue backgrounds
+   ============================================================================ */
+
+/* Target footer buttons: "Use via API" and "Settings" */
+footer button,
+footer .gr-button,
+footer a[role="button"],
+footer a[class*="button"],
+.gradio-footer button,
+.gradio-footer .gr-button,
+.gradio-footer a[role="button"],
+[class*="footer"] button,
+[class*="footer"] .gr-button,
+[class*="footer"] a[role="button"],
+footer span button,
+footer div button {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  color: var(--text) !important;
+}
+
+footer button:hover,
+footer .gr-button:hover,
+footer a[role="button"]:hover,
+footer a[class*="button"]:hover,
+.gradio-footer button:hover,
+.gradio-footer .gr-button:hover,
+.gradio-footer a[role="button"]:hover,
+[class*="footer"] button:hover,
+[class*="footer"] .gr-button:hover,
+[class*="footer"] a[role="button"]:hover,
+footer span button:hover,
+footer div button:hover {
+  background: rgba(125, 211, 252, 0.08) !important;
+  background-color: rgba(125, 211, 252, 0.08) !important;
+  border-color: rgba(125, 211, 252, 0.3) !important;
+}
+
+/* More specific targeting for footer area buttons */
+footer > div button,
+footer > div a[role="button"],
+footer > div .gr-button,
+footer > div > div button,
+footer > div > div a[role="button"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+}
+
+/* Target all buttons in footer container */
+footer * button,
+footer * a[role="button"],
+footer * .gr-button {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Override any inline blue/grey backgrounds on footer buttons */
+footer button[style*="background"],
+footer a[style*="background"],
+footer .gr-button[style*="background"],
+footer button[style*="rgba(125"],
+footer button[style*="rgb(125"],
+footer a[style*="rgba(125"],
+footer a[style*="rgb(125"] {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Target buttons with specific Gradio footer classes */
+[class*="api"] button,
+[class*="API"] button,
+[class*="settings"] button,
+[class*="Settings"] button,
+button[class*="api"],
+button[class*="API"],
+button[class*="settings"],
+button[class*="Settings"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+}
+
+/* Specifically target buttons and links in footer - more specific */
+footer a,
+footer button,
+footer [role="button"],
+footer [class*="button"],
+footer span button,
+footer div button,
+footer div a,
+footer span a {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  color: var(--text) !important;
+}
+
+footer a:hover,
+footer button:hover,
+footer [role="button"]:hover,
+footer [class*="button"]:hover,
+footer span button:hover,
+footer div button:hover,
+footer div a:hover,
+footer span a:hover {
+  background: rgba(125, 211, 252, 0.08) !important;
+  background-color: rgba(125, 211, 252, 0.08) !important;
+}
+
+/* Override any blue color values in inline styles - very specific */
+footer button[style*="background"],
+footer a[style*="background"],
+footer [role="button"][style*="background"],
+footer [class*="button"][style*="background"],
+footer button[style*="background-color"],
+footer a[style*="background-color"] {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Target Gradio's specific footer structure with maximum specificity */
+.gradio-container footer button,
+.gradio-container footer a,
+.gradio-container > footer button,
+.gradio-container > footer a,
+body footer button,
+body footer a,
+html body footer button,
+html body footer a {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Target by data attributes or specific Gradio classes */
+footer [data-testid],
+footer [aria-label],
+footer button[type="button"],
+footer a[href] {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Nuclear option - target ALL elements in footer that might be buttons */
+footer > * > * > button,
+footer > * > * > a,
+footer > * > button,
+footer > * > a,
+footer button,
+footer a,
+footer [class*="btn"],
+footer [class*="button"],
+footer [role="button"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+}
+
+/* Override ALL possible background color formats */
+footer button,
+footer a,
+footer [role="button"],
+footer [class*="button"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+/* Force override even with inline styles using attribute selectors */
+footer button[style],
+footer a[style],
+footer [role="button"][style] {
+  background: transparent !important;
+  background-color: transparent !important;
+}