style.css

/* CSS Variables matching NTv3 hub design - Dark mode (default) */
:root {
  --bg: #0b1020;
  --card: rgba(255, 255, 255, 0.06);
  --text: rgba(255, 255, 255, 0.75);
  --muted: rgba(255, 255, 255, 0.55);
  --link: #7dd3fc;
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --radius: 18px;
  --input-bg: rgba(125, 211, 252, 0.08);
  --input-border: rgba(125, 211, 252, 0.2);
  --input-focus-bg: rgba(125, 211, 252, 0.12);
  --input-focus-border: rgba(125, 211, 252, 0.35);
  --placeholder: rgba(255, 255, 255, 0.4);
  --modebar-bg: rgba(255, 255, 255, 0.9);
}

/* Light mode overrides */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --card: rgba(0, 0, 0, 0.04);
    --text: rgba(0, 0, 0, 0.75);
    --muted: rgba(0, 0, 0, 0.55);
    --link: #0369a1;
    --border: rgba(0, 0, 0, 0.12);
    --shadow: 0 10px 30px rgba(0,0,0,0.1);
    --input-bg: rgba(3, 105, 161, 0.08);
    --input-border: rgba(3, 105, 161, 0.2);
    --input-focus-bg: rgba(3, 105, 161, 0.12);
    --input-focus-border: rgba(3, 105, 161, 0.35);
    --placeholder: rgba(0, 0, 0, 0.4);
    --modebar-bg: rgba(255, 255, 255, 0.95);
  }
}

/* Overall page background matching hub */
body, .gradio-container {
  background: var(--bg) !important;
  min-height: 100vh;
  color: var(--text) !important;
}

/* Add subtle gradient only in dark mode */
@media (prefers-color-scheme: dark) {
  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;
  }
}

/* Ensure all text elements use the correct color - default to white for dark mode */
body, .gradio-container {
  color: var(--text) !important;
}

/* All text elements in gradio container */
.gradio-container *,
.gradio-container p,
.gradio-container span,
.gradio-container div:not([class*="plotly"]):not([class*="modebar"]),
.gradio-container label,
.gradio-container h1,
.gradio-container h2,
.gradio-container h3,
.gradio-container h4,
.gradio-container h5,
.gradio-container h6,
.gradio-container li,
.gradio-container td,
.gradio-container th {
  color: var(--text) !important;
}

/* Input values and selected text */
.gradio-container input,
.gradio-container textarea,
.gradio-container select,
.gradio-container input::placeholder,
.gradio-container textarea::placeholder {
  color: var(--text) !important;
}

/* Links */
.gradio-container a {
  color: var(--link) !important;
}

.gradio-container a:hover {
  color: var(--link) !important;
  opacity: 0.8;
}

/* Markdown content */
.gradio-container .markdown,
.gradio-container .markdown *,
.gradio-container [class*="markdown"] * {
  color: var(--text) !important;
}

/* Ensure dropdown options are visible */
.gradio-container select option {
  color: var(--text) !important;
  background: var(--input-bg) !important;
}

/* Plot container */
#tracks_plot { 
  position: relative; 
  width: 100% !important; 
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
#tracks_plot .wrap, 
#tracks_plot .plot-container {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Center the actual plotly plot */
#tracks_plot .js-plotly-plot,
#tracks_plot .plotly,
#tracks_plot [class*="plotly"] {
  margin: 0 auto !important;
  display: block !important;
}


/* 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;
}

.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: var(--modebar-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 8px !important;
}

/* Predict button matching hub button style */
#predict_btn {
  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: 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: 100% !important;
  width: 100% !important;
  margin: 0 auto;
  padding: 44px 18px 6px 18px;
}

/* Hero container matching hub */
#intro_markdown .intro-hero {
  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 */
#intro_markdown .intro-title {
  margin-bottom: 0;
}

#intro_markdown .intro-title h1 {
  margin-bottom: 8px;
}

#intro_markdown .intro-badge {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  margin-bottom: 10px;
  color: var(--muted);
}

#intro_markdown h1 {
  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.5 !important;
  margin: 0 !important;
  color: var(--muted) !important;
}

/* Grid of cards */
#intro_markdown .intro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

/* Cards matching hub card style */
#intro_markdown .intro-card {
  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(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

#intro_markdown .intro-card h3 {
  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.95rem !important;
  line-height: 1.5 !important;
  margin: 8px 0;
  color: var(--muted) !important;
}

#intro_markdown .intro-card li::marker {
  color: var(--link);
}

#intro_markdown .intro-card em,
#intro_markdown .intro-card strong {
  color: var(--text) !important;
}

/* Tip callout */
#intro_markdown .intro-tip {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: 14px;
  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 {
  font-size: 1.2rem;
  line-height: 1;
  margin-top: 1px;
}

#intro_markdown .intro-tip span {
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
}

#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: 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: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !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: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !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: var(--input-focus-bg) !important;
  background-color: var(--input-focus-bg) !important;
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--input-bg) !important;
  outline: none !important;
}

/* Number inputs focus - default blue background */
input[type="number"]:focus {
  background: var(--input-focus-bg) !important;
  background-color: var(--input-focus-bg) !important;
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--input-bg) !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: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--input-bg) !important;
  outline: none !important;
}

input[type="text"]:hover,
input[type="search"]:hover,
textarea:hover {
  background: var(--input-focus-bg) !important;
  border-color: var(--input-focus-border) !important;
}

/* Number inputs hover - default blue background */
input[type="number"]:hover {
  background: var(--input-focus-bg) !important;
  border-color: var(--input-focus-border) !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: var(--input-focus-border) !important;
}

/* Placeholder text */
input::placeholder,
textarea::placeholder {
  color: var(--placeholder) !important;
  opacity: 0.7 !important;
}

/* Override inline grey backgrounds */
input[style*="background"],
textarea[style*="background"] {
  background: var(--input-bg) !important;
  background-color: var(--input-bg) !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: var(--input-bg) !important;
  background-color: var(--input-bg) !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: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !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: var(--input-bg) !important;
  background-color: var(--input-bg) !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: var(--input-focus-bg) !important;
  background-color: var(--input-focus-bg) !important;
  border-color: var(--input-focus-border) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--input-bg) !important;
}

/* Ensure dropdown option container is blue */
.gr-dropdown .wrap select,
.gr-dropdown select option {
  background: var(--input-bg) !important;
  background-color: var(--input-bg) !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: var(--input-focus-bg) !important;
  background-color: var(--input-focus-bg) !important;
  border: 1px solid var(--input-focus-border) !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: var(--input-focus-bg) !important;
  opacity: 0.9 !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: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 12px !important;
  padding: 12px !important;
}

.gr-radio label,
input[type="radio"] + label {
  color: var(--text) !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !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: var(--input-focus-bg) !important;
  border-color: var(--input-focus-border) !important;
}

.gr-radio input[type="radio"]:checked + label,
input[type="radio"]:checked + label {
  background: var(--input-focus-bg) !important;
  opacity: 1.2 !important;
  border-color: var(--input-focus-border) !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: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 12px !important;
  padding: 12px !important;
}

.gr-checkboxgroup label {
  color: var(--text) !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !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: var(--input-focus-bg) !important;
  border-color: var(--input-focus-border) !important;
}

.gr-checkboxgroup input[type="checkbox"]:checked + label,
.gr-checkboxgroup label:has(input[type="checkbox"]:checked) {
  background: var(--input-focus-bg) !important;
  opacity: 1.2 !important;
  border: 1px solid var(--input-focus-border) !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: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !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: var(--input-focus-bg) !important;
  background-color: var(--input-focus-bg) !important;
  border-color: var(--link) !important;
  box-shadow: 0 4px 12px var(--input-bg) !important;
}

/* ============================================================================
   COORDINATES GROUP - Special handling
   ============================================================================ */

/* Remove borders/lines from input sections */
.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;
}

.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 var(--input-border) !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: var(--input-focus-border) !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: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--input-bg) !important;
  outline: none !important;
}

/* ============================================================================
   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 var(--input-border) !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: var(--input-focus-border) !important;
}

#chromosome_input input:focus,
#chromosome_input .wrap input:focus,
#chromosome_input [role="combobox"]:focus {
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--input-bg) !important;
  outline: none !important;
}

/* ============================================================================
   FORM SECTIONS & SEPARATORS
   ============================================================================ */

.form {
  border: none !important;
}

hr {
  display: none !important;
}

#dna_sequence_input {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#dna_sequence_input::before,
#dna_sequence_input .wrap::before {
  display: none !important;
  content: none !important;
}

#coords_group[style*="display: none"],
#coords_group:not(:visible) {
  display: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#coords_group + *,
#coords_group ~ #dna_sequence_input {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================================
   ACCORDION
   ============================================================================ */

.gr-accordion {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !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: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !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: var(--input-bg) !important;
  background-color: var(--input-bg) !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: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !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: var(--input-bg) !important;
  background-color: var(--input-bg) !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 var(--input-border) !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: var(--input-focus-border) !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: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--input-bg) !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 var(--input-border) !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: var(--input-focus-border) !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: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--input-bg) !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 var(--input-border) !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: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  border-color: var(--input-focus-border) !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 var(--input-border) !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: var(--input-bg) !important;
  background-color: var(--input-bg) !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 var(--input-border) !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;
}