fix: species names

style.css

@@ -1,4 +1,4 @@
-/* CSS Variables matching NTv3 hub design */
+/* CSS Variables matching NTv3 hub design - Dark mode (default) */
 :root {
   --bg: #0b1020;
   --card: rgba(255, 255, 255, 0.06);
@@ -8,17 +8,49 @@
   --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.5);
+  --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.92);
+    --muted: rgba(0, 0, 0, 0.65);
+    --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.5);
+    --modebar-bg: rgba(255, 255, 255, 0.95);
+  }
 }
 
 /* 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;
+  background: var(--bg) !important;
   min-height: 100vh;
 }
 
+/* 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;
+  }
+}
+
 /* Plot container */
 #tracks_plot { 
   position: relative; 
@@ -96,8 +128,8 @@ body, .gradio-container {
 #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;
+  background-color: var(--modebar-bg) !important;
+  border: 1px solid var(--input-border) !important;
   border-radius: 8px !important;
 }
 
@@ -371,9 +403,9 @@ 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;
+  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;
@@ -383,9 +415,9 @@ textarea {
 /* 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;
+  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;
@@ -398,19 +430,19 @@ 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;
+  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: 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;
+  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;
 }
 
@@ -421,22 +453,22 @@ 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;
+  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: rgba(125, 211, 252, 0.1) !important;
-  border-color: rgba(125, 211, 252, 0.25) !important;
+  background: var(--input-focus-bg) !important;
+  border-color: var(--input-focus-border) !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;
+  background: var(--input-focus-bg) !important;
+  border-color: var(--input-focus-border) !important;
 }
 
 /* Coordinates group number inputs hover - transparent background */
@@ -446,21 +478,21 @@ 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;
+  border-color: var(--input-focus-border) !important;
 }
 
 /* Placeholder text */
 input::placeholder,
 textarea::placeholder {
-  color: rgba(255, 255, 255, 0.5) !important;
+  color: var(--placeholder) !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;
+  background: var(--input-bg) !important;
+  background-color: var(--input-bg) !important;
 }
 
 /* ============================================================================
@@ -487,8 +519,8 @@ textarea[style*="background"] {
 .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;
+  background: var(--input-bg) !important;
+  background-color: var(--input-bg) !important;
 }
 
 /* ============================================================================
@@ -547,9 +579,9 @@ textarea[style*="background"] {
 .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;
+  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;
@@ -559,8 +591,8 @@ select {
 /* 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;
+  background: var(--input-bg) !important;
+  background-color: var(--input-bg) !important;
 }
 
 .gr-dropdown:hover,
@@ -571,18 +603,18 @@ select[style*="background"] {
 .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;
+  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 rgba(125, 211, 252, 0.1) !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: rgba(125, 211, 252, 0.08) !important;
-  background-color: rgba(125, 211, 252, 0.08) !important;
+  background: var(--input-bg) !important;
+  background-color: var(--input-bg) !important;
   color: var(--text) !important;
 }
 
@@ -594,9 +626,9 @@ select:focus {
 #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;
+  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;
@@ -612,7 +644,8 @@ select:focus {
 #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;
+  background: var(--input-focus-bg) !important;
+  opacity: 0.9 !important;
   border-color: var(--link) !important;
 }
 
@@ -644,8 +677,8 @@ select:focus {
    ============================================================================ */
 
 .gr-radio {
-  background: rgba(125, 211, 252, 0.08) !important;
-  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  background: var(--input-bg) !important;
+  border: 1px solid var(--input-border) !important;
   border-radius: 12px !important;
   padding: 12px !important;
 }
@@ -653,8 +686,8 @@ select:focus {
 .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;
+  background: var(--input-bg) !important;
+  border: 1px solid var(--input-border) !important;
   border-radius: 8px !important;
   padding: 8px 12px !important;
   margin: 4px !important;
@@ -664,14 +697,15 @@ input[type="radio"] + label {
 
 .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;
+  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: rgba(125, 211, 252, 0.18) !important;
-  border-color: rgba(125, 211, 252, 0.4) !important;
+  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 */
@@ -748,16 +782,16 @@ input[type="radio"][style*="rgb(255"],
    ============================================================================ */
 
 .gr-checkboxgroup {
-  background: rgba(125, 211, 252, 0.08) !important;
-  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  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: rgba(125, 211, 252, 0.08) !important;
-  border: 1px solid rgba(125, 211, 252, 0.2) !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;
@@ -766,14 +800,15 @@ input[type="radio"][style*="rgb(255"],
 }
 
 .gr-checkboxgroup label:hover {
-  background: rgba(125, 211, 252, 0.12) !important;
-  border-color: rgba(125, 211, 252, 0.3) !important;
+  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: rgba(125, 211, 252, 0.18) !important;
-  border: 1px solid rgba(125, 211, 252, 0.4) !important;
+  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 */
@@ -869,9 +904,9 @@ 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;
+  background: var(--input-bg) !important;
+  background-color: var(--input-bg) !important;
+  border: 1px solid var(--input-border) !important;
   color: var(--text) !important;
 }
 
@@ -879,10 +914,10 @@ 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;
+  background: var(--input-focus-bg) !important;
+  background-color: var(--input-focus-bg) !important;
   border-color: var(--link) !important;
-  box-shadow: 0 4px 12px rgba(125, 211, 252, 0.2) !important;
+  box-shadow: 0 4px 12px var(--input-bg) !important;
 }
 
 /* ============================================================================
@@ -945,7 +980,7 @@ button.gr-button:not(#predict_btn):hover,
 #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: 1px solid var(--input-border) !important;
   border-radius: 12px !important;
   color: var(--text) !important;
   height: 44px !important;
@@ -961,7 +996,7 @@ button.gr-button:not(#predict_btn):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;
+  border-color: var(--input-focus-border) !important;
 }
 
 #coords_group .gr-number input:focus,
@@ -971,8 +1006,8 @@ button.gr-button:not(#predict_btn):hover,
 #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;
+  border-color: var(--input-focus-border) !important;
+  box-shadow: 0 0 0 3px var(--input-bg) !important;
   outline: none !important;
 }
 
@@ -1019,7 +1054,7 @@ button.gr-button:not(#predict_btn):hover,
 #chromosome_input button[aria-haspopup] {
   background: transparent !important;
   background-color: transparent !important;
-  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border: 1px solid var(--input-border) !important;
   border-radius: 12px !important;
   color: var(--text) !important;
   height: 44px !important;
@@ -1031,14 +1066,14 @@ button.gr-button:not(#predict_btn):hover,
 #chromosome_input input:hover,
 #chromosome_input .wrap input:hover,
 #chromosome_input [role="combobox"]:hover {
-  border-color: rgba(125, 211, 252, 0.35) !important;
+  border-color: var(--input-focus-border) !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;
+  border-color: var(--input-focus-border) !important;
+  box-shadow: 0 0 0 3px var(--input-bg) !important;
   outline: none !important;
 }
 
@@ -1086,8 +1121,8 @@ hr {
    ============================================================================ */
 
 .gr-accordion {
-  background: rgba(125, 211, 252, 0.08) !important;
-  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  background: var(--input-bg) !important;
+  border: 1px solid var(--input-border) !important;
   border-radius: 12px !important;
 }
 
@@ -1110,9 +1145,9 @@ hr {
 .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;
+  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 */
@@ -1131,8 +1166,8 @@ hr {
 .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;
+  background: var(--input-bg) !important;
+  background-color: var(--input-bg) !important;
 }
 
 /* Ultimate catch-all: Force blue background on ALL dropdown elements */
@@ -1149,9 +1184,9 @@ hr {
 .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;
+  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 */
@@ -1162,8 +1197,8 @@ hr {
 .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;
+  background: var(--input-bg) !important;
+  background-color: var(--input-bg) !important;
 }
 
 /* ============================================================================
@@ -1192,7 +1227,7 @@ hr {
 #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: 1px solid var(--input-border) !important;
   border-radius: 12px !important;
   color: var(--text) !important;
 }
@@ -1207,7 +1242,7 @@ hr {
 .gradio-container #coords_group .gr-number input:hover {
   background: transparent !important;
   background-color: transparent !important;
-  border-color: rgba(125, 211, 252, 0.35) !important;
+  border-color: var(--input-focus-border) !important;
 }
 
 /* Focus state */
@@ -1220,8 +1255,8 @@ hr {
 .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;
+  border-color: var(--input-focus-border) !important;
+  box-shadow: 0 0 0 3px var(--input-bg) !important;
   outline: none !important;
 }
 
@@ -1249,7 +1284,7 @@ hr {
 .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: 1px solid var(--input-border) !important;
   border-radius: 12px !important;
   color: var(--text) !important;
 }
@@ -1262,7 +1297,7 @@ hr {
 #coords_group #end_input input:hover {
   background: transparent !important;
   background-color: transparent !important;
-  border-color: rgba(125, 211, 252, 0.35) !important;
+  border-color: var(--input-focus-border) !important;
 }
 
 #start_input input:focus,
@@ -1273,8 +1308,8 @@ hr {
 #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;
+  border-color: var(--input-focus-border) !important;
+  box-shadow: 0 0 0 3px var(--input-bg) !important;
   outline: none !important;
 }
 
@@ -1308,7 +1343,7 @@ footer span button,
 footer div button {
   background: transparent !important;
   background-color: transparent !important;
-  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border: 1px solid var(--input-border) !important;
   color: var(--text) !important;
 }
 
@@ -1324,9 +1359,9 @@ footer a[class*="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;
+  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 */
@@ -1337,7 +1372,7 @@ 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;
+  border: 1px solid var(--input-border) !important;
 }
 
 /* Target all buttons in footer container */
@@ -1397,8 +1432,8 @@ 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;
+  background: var(--input-bg) !important;
+  background-color: var(--input-bg) !important;
 }
 
 /* Override any blue color values in inline styles - very specific */
@@ -1446,7 +1481,7 @@ footer [class*="button"],
 footer [role="button"] {
   background: transparent !important;
   background-color: transparent !important;
-  border: 1px solid rgba(125, 211, 252, 0.2) !important;
+  border: 1px solid var(--input-border) !important;
 }
 
 /* Override ALL possible background color formats */